/*
// BuRPS (Budgeting Rostering and Payroll System)
// (c) YTT Solutions Pty. Ltd. Australia
//
// module: new-main-styles.css
// folder: ./css
//
// Build    Date      PR     Comment
// 1.0.82   30/11/21  PR2982  TK - Copy new-main-styles from burps so new portal styles are consistent with reskin. (Removed un-needed styles)
// 1.0.84   25/02/22  PR2982  IL - textarea change to 150 instead of 200 high
*/

/*
// BuRPS (Budgeting Rostering and Payroll System)
// (c) YTT Solutions Pty. Ltd. Australia
//
// module: new-main-styles.css
// folder: ./css
//
// Build    Date      PR     Comment
// 1.0.81   30/11/20  PR2910  JO - NEW FILE for RESKIN
// 1.0.82   20/01/21  PR2919  IL - RESKIN - add ph-background and note-background at the bottom - using Classes to highlight public hols instead of setting in-line background style
//                               - add classes for Date Display on all pages
//                               - remove overflow-x:hidden
//                               - add First Aid and Food Safety div classes
// 1.0.82   21/02/21  PR2919  IL - add Hover effect on dp_date_and_cal
//          11/09/23  PR3095  JO - Add calendar icon (.icon-calendar)
//                               - Hide the footer on mobile
// 15/11/23 PR3103 IL - new style for warning about lots of outstanding requests.
// 30/11/23 PR3103 IL - remove padding on textarea - since sizing is content-box, it pushes them off the edge of iphones
// 01/12/23 PR3103 IL - add new styles for confirmyesno to override the other styles and make it just a white box instead of windows-xp style
// 08/04/24 PR3125 NC - Add styling for reskinned paged buttons on onboarding form
// 06/12/24 PR3150 IL - reskinned ConfirmYesNo - the buttons were wrapping cos the container .buttons had width:135px
// 09/05/25 PR3175 IL - ConfirmYesNo box - use height:fit-content instead of auto
// 11/07/26 PR3227 RO - .paging Next button centered instead of right-aligned on previous_requests.php -
//                      pin new_paging_prev/next to explicit grid columns, not just justify-self
// 11/07/26 PR3227 RO - add breathing room below .paging Prev/Next on narrow screens - they sat flush
//                      against the box's bottom edge
*/

@charset "utf-8";


/* IMPORTS */
/* ------------------------------------------------------ */
/* Buttons */
@import url("new-buttons.css");
@import url("colors.css");
@import url("new-tables.css");


/* END IMPORTS ------------------------------------------------------ */

/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v18-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/open-sans-v18-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v18-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v18-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v18-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v18-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/open-sans-v18-latin-600.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/open-sans-v18-latin-600.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v18-latin-600.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v18-latin-600.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v18-latin-600.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v18-latin-600.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v18-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/open-sans-v18-latin-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v18-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v18-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v18-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v18-latin-700.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* CSS Document */

html,
body {
  font-family: var(--font-family-primary) !important;
  font-size: 12px;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background: var(--white-2) !important;
  color: var(--dark-1) !important;
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}


/********
UTILITIES
********/
.vis-hidden {
  visibility: hidden;
}


.flex {
  display: flex;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
}

.flex-space {
  display: flex;
  justify-content: space-between;
}



/* Section Gap */
.section-gap {
  margin-top: var(--section-gap);
}


.error_message {
  font-size: 12pt;
  color: var(--red-1);
  font-weight: bold;
}

/******************
12/11/2020 - Jayden
Header iframe styles
*******************/
#new-header-iframe {
  height: 70px;
  width: 100%;
  overflow: hidden;
  display: block;
  background: var(--blue-1);
}

/*******************
Custom Dropdown List
*******************/
select {
	border: 1px solid var(--grey-2);
  border-radius: 1px;
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	background: url('../icons/icon-angle-down-keyline-grey.svg') no-repeat calc(100% - 3px);
  background-color: white;
  background-size: 12px;
  transition: all 0.1s linear;
  cursor: pointer;
  color: var(--dark-1);
  font-size: 14px;
  font-weight: normal;
  height: 30px;
  padding-left: 15px;
  -webkit-padding-left: 5px;
  outline: none;
  padding-right: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: max-content; /* PR3064 JO */
}

select:hover {
  border: 1px solid var(--grey-1);
}

select:disabled {
  background: var(--grey-2);
  cursor: auto;
}

select:disabled:hover {
  border: 1px solid var(--grey-2);
}

p {
  color: var(--dark-1);
  line-height: 1.5em;
  padding: 0 0 10px 0 !important;
}
a {
  color: var(--blue-1);
}
a:hover,
a:focus {
  color: var(--blue-0);
}
h1 {
  font-size: 2.375rem;
  font-weight: 500;
  font-style: normal;
  color: var(--blue-0);
  margin-bottom: 15px !important;
}
h2 {
  font-size: 2rem !important;
  font-weight: 500;
  font-style: normal;
  color: var(--blue-0);
  margin-bottom: 15px !important;
}
/* h3 {
  font-size: 1.75rem;
  font-weight: 500;
  font-style: normal;
  color: var(--blue-0);
  margin-bottom: 10px;
} */
h4 {
  color: var(--blue-0);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 10px;
}
h5 {
  color: var(--blue-0);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 5px !important;
}
h6 {
  color: var(--dark-1);
  font-size: 1rem;
  font-style: normal;
  margin-bottom: 5px !important;
}

/* Input Fields */

input{
  font-family: var(--font-family-primary);
  color: var(--dark-1);
  border: 1px solid var(--grey-2);
  border-radius: 1px;
  height: 30px;
  transition: border-color .15s
  ease-in-out,box-shadow .15s
  ease-in-out;
}

input:hover{
  border: 1px solid var(--grey-1);
}

input[type="text"] {
  width: 100%;
  line-height: 30px;
  /* font-size: 14px; PR3095 JO - This seems a bit too much (Should default back to 12) */
  padding-left: 5px;
}

input[type="checkbox"], input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0px 5px;
}

textarea{
  border: 1px solid var(--grey-2);
  min-width: 205px;
  width: 100%;
  /* min-height: 150px; PR3222TODO */
}


.bold {
	font-weight:bold;
}

.hide {
  display: none;
}

/* PR2919 - use classes for PH and NOTE backgrounds in headers and date-pickers */
.ph-background {
  background: var(--white-2) !important;
}
.note-background {
  background: var(--yellow-1) !important;
}

/* components */
.page-template {
  background: var(--white-2);
  width: 100vw;
  min-height: 100vh;
  padding: 125px 0 80px 0;
}
.main-wrapper-light {
  background: var(--white-1);
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid var(--grey-2);
}
.main-wrapper-dark {
  background: var(--blue-1);
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
}
.content-area-text {
  border-radius: 5px;
  padding: 15px;
}
.global-margin-bottom {
  margin-bottom: 15px;
}
.content-area-feature-text {
  border-radius: 5px;
  padding: 0 0 15px;
}
.inner-border {
  border-radius: 5px;
  border: 1px solid var(--white-3);
}
.section-heading-grey {
  color: var(--dark-2);
}
.main-wrapper-dark h4,
.main-wrapper-dark p {
  color: var(--white-1) !important;
}
.utility-icon {
  height: 25px;
  padding-bottom: 3px;
}

/**** 
ICONS
START
*****/
.fa-question-circle {
  cursor: pointer;
  color: var(--dark-2);
  padding-right: 2px;
}
.fa-question-circle:hover {
  color: var(--dark-1);
}
.icon-cross {
  position: absolute;
  right: 2px;
  z-index: 9999;
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../icons/icon-cross-alt-keyline-grey.svg") no-repeat;
  opacity: 0.8;
}

.icon-cross:hover {
  background: url("../icons/icon-cross-alt-red.svg") no-repeat;
}

.icon-cross:active {
  opacity: 1;
}

/* PR3119 */
.icon-help {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-block: -3px;
  background:url('../icons/icon-question-blue.svg');
  width: 16px;
  height: 16px;
}
.icon-help:hover{
  background:url('../icons/icon-question-keyline-grey.svg');
  opacity: 1;
}

/* PR3064 - Copied from BuRPS reskin */
.popup_cross {
	position: absolute;
	z-index: 5;
	top: -8px;
	right: -8px;
	background: url('../icons/icon-cross-alt-keyline-red.svg') no-repeat;
	width: 20px;
	height: 20px;
	transition: all 0.1s linear;
  cursor: pointer;
}

.popup_cross:hover {
  opacity: 0.8;
  background:url('../icons/icon-cross-alt-red.svg') no-repeat;
}

.icon-expand {
  height: 20px;
  width: 20px;
  background: url('../icons/icon-angle-down-keyline-grey.svg');
}

/**** 
ICONS    
FINISH
*****/

/* ------------------------------------------------------
    Date Display in the Date Picker, all pages
   ------------------------------------------------------ */
#dp_displayed_date {
  font-weight: normal;
  float: left;
  margin-top: 0px;
  text-align: center;
  height: 18px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
}
#dp_date_and_cal {
  float: left;
  cursor: pointer;
  /* FOr reskin - make backgroun white, put grey border around it */
  border-radius: 2px;
  border: 1px solid var(--grey-2);
  background: var(--white-1);
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 2px;
  margin-top: -2px;
  color: var(--dark-2);
}
#dp_calendar_icon {
  float: left;
  opacity: 0.5;
  width: 13px;
  height: 14px;
  margin-top: 1px;
}
#dp_down_arrow {
  float: left;
  opacity: 0.5;
  width: 10px;
  height: 10px;
  margin-top: 3px;
}
.dp_week_num {
  color: var(--blue-2);
}

/* This changes colour of Calendar on hover (*/
#dp_date_and_cal:hover #dp_calendar_icon {
  opacity: 0.6;
}

/* This changes colour of text on hover - switch off for now */
#dp_date_and_cal:hover {
  color: var(--dark-1) !important;
  background: var(--white-3);
}
/* This changes colour of text on hover - switch off for now */
#dp_date_and_cal:hover #dp_down_arrow {
  opacity: 1;
}
/* This changes colour of text on hover - switch off for now */
#dp_date_and_cal:hover .dp_week_num {
  color: var(--blue-2);
}

/* Prev Week and Next Week arrows for Date Picker */
.dp_prev_disabled {
  float: left;
  margin-right: 2px;
  cursor: default;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  background: url("../icons/icon-chevron-left-keyline-grey.svg");
  opacity: 0.2;
}
.dp_prev_arrow {
  float: left;
  margin-right: 4px;
  cursor: pointer;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  background: url("../icons/icon-chevron-left-keyline-grey.svg");
  opacity: 0.4;
}
.dp_prev_arrow:hover {
  opacity: 0.8;
}
.dp_next_disabled {
  background: url("../icons/icon-chevron-right-keyline-grey.svg");
  width: 18px;
  height: 18px;
  float: right;
  margin-left: 4px;
  cursor: default;
  margin-top: 2px;
  opacity: 0.2;
}
.dp_next_arrow {
  background: url("../icons/icon-chevron-right-keyline-grey.svg");
  width: 18px;
  height: 18px;
  float: left;
  margin-left: 4px;
  cursor: pointer;
  margin-top: 2px;
  opacity: 0.4;
}
.dp_next_arrow:hover {
  opacity: 0.8;
}

/*************************************************************
    GENERIC white surrounding box to go around Dept/Roster droplists
		and search options etc
***************************************************************/
.droplist-surround {
  background: var(--white-1);
  border: 1px solid var(--grey-2);
  padding: 2px;
  padding-left: 2px;
  border-radius: 5px;
  padding-left: 5px;
  font-size: 12px;
  color: var(--dark-2);
  cursor: pointer;
}

.droplist-surround select {
  color: var(--dark-2);
  cursor: pointer;
  border: 0px !important;
}

.droplist-surround:hover {
  border: 1px solid var(--grey-1);
  background: var(--white-3);
}

/**********************************************************
  Generic Icons for buttons on the left-hand side e.g. add row, delete row etc
********************************************************/
.button_add_row_below {
  cursor: pointer;
  float: left;
  background: url(../icons/icon-chevron-down-green.svg);
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  margin: 3px 2px 3px 2px;
  opacity: 0.8;
}
.button_add_row_below:hover {
  opacity: 1;
}

.button_delete_row {
  cursor: pointer;
  float: left;
  background: url(../icons/icon-cross-alt-red.svg);
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  margin: 3px 2px 3px 2px;
  opacity: 0.8;
}
.button_delete_row:hover {
  opacity: 1;
}

/* PR2919 - icons for first-aid and food safety - on visual and on Staff Setup */
.icon_first_aid {
  background: url(../icons/icon-first-aid-red.svg);
  height: 16px;
  width: 16px;
  background-size: contain;
}

.icon_food_safety {
  background: url(../icons/icon-food-safety-green.svg);
  height: 16px;
  width: 16px;
  background-size: contain;
}

/* Placeholder Generic*/
::placeholder{
  color: var(--grey-2);
}

/* PR2980 - Nov 21 - add a generic box shadow for main content boxes (like on Dashboard page) */
.content_box_shadow {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
}


.top_nav {
  background: var(--blue-2);
}

.top_nav.custom {
	background: #185c87;
}

.nav {
  background: var(--blue-2);
  width: 940px;
  margin: 0 auto;
  float: none;
}

.nav.custom {
  background: url('../images/nav_tile.gif') repeat-x;
}




.button_left, .button_right, .leftcap_button, .rightcap_button, .box_top_left, .box_top_right {
  display: none;
}

.right_button, .back_button {
  border-radius: 3px;
}

.view_all_btn {
  height: 29px !important;
  box-sizing: border-box;
  background: var(--white-1) !important;
}

.reminder_button {
  background: var(--white-1) !important;
  margin-top: 0px !important; /* PR3095 JO - These were the only buttons I've found that were affected by removing 'margin-top: 0px' from .button class */ 
}

/*************
WRAPPER ELEMENTS (box, columns etc)
*************/
.full_col {
  /* width: 700px; */
}

.box {
  border-radius: 5px !important;
}

.full_col .box_top, .box_top_strip, .right_col .box_top, .left_col .box_top {
	background: var(--blue-1);
  border-radius: 5px 5px 0 0;
  border-top: none !important;
}

.right_col {
  width: 410px;
}

.light_box_top {
  background: var(--white-1) !important; /* Backgroud color for Noticeboard, This Week's Roster, Documents and Forms box headers */
  border-bottom: 1px solid #d9d9d9;
}

.label {
  margin-bottom: 5px;
}

.title {
  margin-left: 10px;
}

.box_top .title {
  text-transform: none !important;
  font-size: 1.7em !important;
}

.center {
  margin: 0 auto;
}

.button {
  float: none;
/*   margin-top: 0px !important; PR3095 - Not sure why this is here, need to keep an eye out for buttons with funny alignment after this update*/
}

#button-login_form {
  border-radius: 5px;
  width: 80%;
}

#button-login_form .inner {
  width: 100%;
}

.link:hover {
  color: white;
  border-radius: 0px 0px 0px
}


.link:nth-child(2) {
  border-radius: 0 0 0 15px;
}

.link:nth-child(6) {
  border-radius: 0 0 15px 0;
}

.button-submit {
  display: inline-block;
}

.paging {
  margin-top: var(--section-gap);
  background: none;
  /* PR3215 RO - Use 3-column grid so Prev/Next don't crowd the centered Save button */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* PR3222 Change from .info to .icon.info (Too vauge a classname which was hitting other elements unintentionally */
.icon.info {
  width: 30px;
  height: 30px;
  background: url("../images/info.svg") no-repeat;
  background-size: contain;
  margin-left: 10px;
  margin-top: 1px !important;
}

#noticeboard-icon {
  color: rgb(121,121,121) !important;
}

.top_nav a:hover, .top_nav .current, .nav a:hover, .nav .current {
  background: var(--blue-0);
}

.dropdown {
  background: var(--blue-0);
  border: none;
  border-radius: 0 0 5px 5px;
  z-index: 3;
}

.dropdown a:hover, .dropdown a.current {
  background: var(--blue-3);
}

.dropdown a:hover:last-of-type, .dropdown a.current:last-of-type {
  border-radius: 0 0 5px 5px;
}

.panel .header, .noticeboard .header, #modal-noticeboard .header, .modal .header {
  background: var(--white-1);
  align-items: center;
}

.panel .header .icon, #modal-noticeboard .header .icon, #notice_title, #notice_date {
  color: rgb(121,121,121) !important;
}

.onboarding-button {
  height: 40px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

#hide_title {
  width: 220px !important;
}

.home_buttons a {
  border-radius: 5px;
  padding: 0 5px;
}

.icon-calendar {
  background: url('../icons/icon-calendar-blue.svg') no-repeat !important;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  /* top: 5px;      PR3215-RO removed for new layout in portal/iframe_availability_add.php */     
  /* left: 5px;     PR3215-RO removed for new layout in portal/iframe_availability_add.php */
}


.icon-tick {
  background:url(../icons/icon-check-green.svg);
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  display:inline-block;
  margin-right: 5px;
}


.icon-pending {
  background:url(../icons/icon-question-keyline-grey.svg);
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  display:inline-block;
  margin-right: 5px;
}

.icon-cancelled {
  background:url(../icons/icon-cross-alt-keyline-grey.svg);
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  display:inline-block;
  margin-right: 5px;
}

.icon-denied {
  background:url(../icons/icon-cross-alt-keyline-red.svg);
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  display:inline-block;
  margin-right: 5px;
}

.icon-caret-down {
  background:url(../icons/icon-caret-down-blue.svg);
  background-repeat:no-repeat;
  height: 10px;
  width: 10px;
  display:inline-block;
}

.icon-caret-up {
  background:url(../icons/icon-caret-up-blue.svg);
  background-repeat:no-repeat;
  height: 10px;
  width: 10px;
  display:inline-block;
}

#approve-btn {

}

.action-btn {
  cursor: pointer;
  border-radius: 5px;
  display: block;
  /* PR3227 - should be safe to remove height */
  /* height: 24px;  */
  line-height: 24px;
  font-weight: bold;
  margin-right: 4px;
}

.action-btn span {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* // 15/11/23 PR3103 IL - new style for warning about lots of outstanding requests */
.outstanding_warning {
  width:337px;
  padding:5px;
  padding-right:20px;
  background:var(--red-1);
  color:white;
  font-weight:bold;
  position:absolute;
  top:37px;
  left:1px;
  height:27px;
  overflow:hidden;
  z-index:2;
}
.close_outstanding {
  position: absolute;
  top: 3px;
  right: 0px;
}


/* 01/12/23 PR3103 IL - add new styles for confirmyesno to override the other styles and make it just a white box instead of windows-xp style */
.confirmYesNo_box {
  background:white !important;
  border-radius:10px;
  box-shadow: 0px 0px 10px 2px #aaaaaa;
  margin-top:-50px; /*PR3153 - in new style, the middle box is too low */
  height:fit-content !important; /* PR3175 - use fit-content instead of auto */
}
.confirmYesNo_box .middle {
  background:none !important;
}
.confirmYesNo_box .top {
  background:none !important;
}
.confirmYesNo_box .bottom {
  background:none !important;
}
.confirmYesNo_box .buttons {
/* PR3150 - remove this - need it full width so the buttons dont' wrap  width:135px !important; */
}
.confirmYesNo_box .msg {
  font-size:12px !important;
}
.confirmYesNo_x {
  top: -32px !important;
  left: 10px !important;
  background: url(../icons/icon-cross-alt-keyline-red.svg) !important;
}
.confirmYesNo_x:hover {
  background: url(../icons/icon-cross-alt-red.svg) !important;
}

/* PR3125 */
/* PR3215 RO - Grid layout: Prev left, Save centered, Next right-aligned */
/* 11/07/26 PR3227 RO - pin explicit grid-column too, not just justify-self. On previous_requests.php
   .paging_middle (page numbers) is position:absolute so it doesn't count as a grid item, leaving only
   2 real items for the 3 defined columns - auto-placement was dropping Next into column 2 instead of 3. */
.paging .new_paging_prev {
  grid-column: 1;
  justify-self: start;
}

.paging .new_paging_next {
  grid-column: 3;
  justify-self: end;
}

.paging .save-later-bottom {
  justify-self: center;
  margin: 0;
  line-height: normal;
}


.bottomtext { 
  font-size: 12pt; 
  margin-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.gutter-t {
  margin-top: var(--gutters);
}

.gutter-tb {
  margin-top: var(--gutters);
  margin-bottom: var(--gutters);
}

.gutter-b {
  margin-bottom: var(--gutters);
}

#box_top_back_btn .inner {
  background-color: var(--white-1);
}

.full_col .box_top {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.full_col .box_top .right_button {
  margin-top: 0;
}

#withdraw_request_button {
  justify-content: center;
}

#withdraw_request_button .inner {
  background: var(--white-1);
}

#withdraw_request_button .icon {
  line-height: inherit;
}

/* Media Queries */
@media only screen and (max-width: 960px) {


  .gutter-t-mobile {
    margin-top: var(--gutters);
  }

  .gutter-tb {
    margin-top: var(--gutters);
    margin-bottom: var(--gutters);
  }

  .gutter-b {
    margin-bottom: var(--gutters);
  }


  /*************
  WRAPPER ELEMENTS (box, columns etc)
  *************/
  .full_col {
    padding-left: 0px;
    margin-right: 0;
    margin-top: 0;
    float: none;
    width: 100%;
  }

  .full_col * {
    box-sizing: border-box;
  }

  .full_col .box {

    /* Set the box width to full screen MINUS 2* Screen margins */
    width: 100%;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .full_col .box_top {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #box_top_back_btn .inner {
    background-color: var(--white-1);
  }

  .full_col .box_top .box-top-header {
    color: var(--white-1);
  }

  .box-top-header#late_notice_header {
    font-size: 14pt;
  }

  #wrap {
    min-height: auto;
  }

  /* log in page */
  .form-wrapper {
    width: 375px;
  }

  .content_wrapper {
    width: calc(100vw - (var(--screen-edge-margins) * 2)) !important;
    padding: 0 !important;
    padding-bottom: var(--screen-edge-margins) !important;
    padding-top: var(--section-gap) !important;
    overflow: unset !important;
    position: static;
  }




  /* Bottom text disclaimer that appears on most request screens */
  .bottomtext { 
		margin-top: var(--section-gap);
	}



  /* Put th */
  #recent_activity_table {
    margin-left: 0;
    text-align: left;
  }

  #recent_activity_table .table_header {
    height: var(--touch-target);
  }

  #recent_activity_table .table_header * {
    font-size: 14pt;
  }

  #recent_activity_table .table_header td {
    height: var(--touch-target);
  }

  .recent-activity-row {
    height: var(--touch-target);
  }

  .recent-activity-row td {
    font-size: 14pt !important;
  }


  /* Hide Page Selector Buttons */
  .paging_middle {
    display: none;
  }

  /* 11/07/26 PR3227 RO - Prev/Next sat flush against the box's bottom edge on narrow screens
     (.box_content only has 10px padding-bottom) - give them some breathing room below */
  .paging {
    margin-bottom: var(--section-gap);
  }


  .iframe_head_date {
    width: 100%;
    font-size: 12pt;
  }
}

@media only screen and (max-width: 767px) {
  .panel .header, .noticeboard .header, #modal-noticeboard .header, .modal .header {
    background: var(--white-1) !important;
  }
}

@media only screen and (max-width: 576px) {
  /* log in page */
  .form-wrapper {
    width: 100%;
  }



  
  /* PR3222 JO - Moving all box_content across to border-box sizing on mobile */
  .box_top, .box_content {
    box-sizing: border-box;
    width: 100% !important;
    padding-top: 0px;
  }

  /* PR3222 JO - Helper class to hide elements on smaller screens */
  .mobile-hide {
    display: none;
  }


  .iframe_head_action {
    width: 100%;
  }

  .recent-activity-row td {
    font-size: 12pt !important;
  }

}


/* 
PR3222 JO - Hide the emp name part of the box header on small screens
The blue ribbon at top of request (Eg. "Request Time Off Request (Neal Zhang - Demo Store)")
Not enough room to have the name on the end
Also fixes the button display issue
 */
@media only screen and (max-width: 480px) {
}