/* header NEW

1.0.82 09/11/21 PR2972 IL - add styles for STore SELECTOR Droplist
1.0.85 08/09/23 PR3096 IL - move Store Name to left under Logo. Make right-hand buttons bigger
1.0.86 22/05/24 PR3130 IL - add border-radius to store-name droplist. Add outline and focus-visible styles to remove black outline when you click it in Chrome
1.0.86 13/06/24 PR3132 IL - Add min-width to primary-menu ul - if you only have a couple of setup options, need to make sure the white bar is long enough
1.0.86 16/07/24 PR3137 IL - make Store Select droplist lighter so you can see the darker bar on hover
1.0.88 21/08/26 PR3249 RO - BSUP-1153 - add header-stacked mode: when the right-hand section would overlap the nav on a narrow window,
                            new-header.js moves it onto its own row below the nav and grows the header frame to fit
*/

header {
  z-index: 9999;
  transition: transform .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: #4068e1;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
}
header .header-wrapper {
  margin: 0 auto;
  display: block;
  height: 75px;
  padding: 0 20px;
}
.logo-container {
  position: absolute;
  line-height: 46px; /* PR3096 - was 70 */
}
.burps-logo-sm {
  width: 120px;  /* PR3096 - was 150px */
  margin-bottom: 8px;
  margin-left:18px;
}
.burps-logo-lg {
  width: 300px;
}
.primary-menu {
  position: relative;
  float: left;
  left: 160px; /* PR3096 - was 150 */
  height: 40px;
  line-height: 20px;
}
.primary-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 29px; /* PR2910 RESKIN - Jayden - Specify height, firefox wasn't displaying the same as Chrome */
  min-width:475px; /* PR3132 RESKIN - if you only have a couple of setup options, need to make sure the white bar is long enough */
}
.main-nav-item {
  width: 65px;
  margin: 0 10px !important;
}
.primary-menu li {
  margin: 0;
  padding: 0;
  float: left;
  font-size: 12px !important;
}
.primary-menu li a {
  color: #ffffff;
  line-height: 1.2;
  display: block;
  font-family: 'Open Sans', sans-serif;
  padding: 6px 0;
  text-align: center;
  text-decoration: none !important;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#main_HOME .main-nav-link {
  background-image: url(../icons/ui/nav-home-inactive.svg);
}
#main_ROSTERS .main-nav-link {
  background-image: url(../icons/ui/nav-rosters-inactive.svg);
}
#main_STAFF .main-nav-link {
  background-image: url(../icons/ui/nav-staff-inactive.svg);
}
#main_REPORTS .main-nav-link {
  background-image: url(../icons/ui/nav-reports-inactive.svg);
}
#main_PAYROLL .main-nav-link {
  background-image: url(../icons/ui/nav-payroll-inactive.svg);
}
#main_SETUP .main-nav-link {
  background-image: url(../icons/ui/nav-setup-inactive.svg);
}
#main_OPERATIONS .main-nav-link {
  background-image: url(../icons/ui/nav-operations-inactive.svg);
}
#main_HOME.hover .main-nav-link, #main_HOME.selected .main-nav-link {
  background-image: url(../icons/ui/nav-home-active.svg);
}
#main_ROSTERS.hover .main-nav-link, #main_ROSTERS.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-rosters-active.svg);
}
#main_STAFF.hover .main-nav-link, #main_STAFF.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-staff-active.svg);
}
#main_REPORTS.hover .main-nav-link, #main_REPORTS.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-reports-active.svg);
}
#main_PAYROLL.hover .main-nav-link, #main_PAYROLL.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-payroll-active.svg);
}
#main_SETUP.hover .main-nav-link, #main_SETUP.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-setup-active.svg);
}
#main_OPERATIONS.hover .main-nav-link, #main_OPERATIONS.selected .main-nav-link  {
  background-image: url(../icons/ui/nav-operations-active.svg);
}
.triangle-up {
  position: absolute;
  margin-left: 28px;
  top: 33px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #ffffff;
}
.main-nav-link {
  padding: 20px 0 5px 0 !important;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center 4px;
}
.selected a {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.inactive a {
  color: #ffffff !important;
  opacity: .5 !important;
}
.hover a {
  color: #ffffff !important;
  opacity: 1 !important;
}
.nav-icon-inactive {
  width: 18px;
}
.nav-icon-active {
  width: 18px;
}
.submenu {
  left: 20px; /* PR2910 RESKIN - Shift away from logo */
  position: absolute;
  z-index: 1;
  background: #ffffff;
  border-radius: 5px;
  white-space: nowrap;
  width: auto !important;
  display: flex; /* Removes whitespace between submenu items */
}
.submenu li {
  position: relative;
  font-size: 12px !important;
  width: auto;
  float: none !important;
  display: inline-block;
}

li.subnavSelected a {
  color: #4068e1 !important;
  font-weight: bold;
  background: #eeeeee;
}
.submenu a {
  color: #192855 !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  height: 29px;
}
.submenu a:hover {
  color: #192855 !important;
  background: #eeeeee;
}
.rounded-left {
  border-radius: 5px 0 0 5px !important;
}
.rounded-right {
  border-radius: 0 5px 5px 0 !important;
}

.secondary-menu  {
  float: right;
  height: 50px;
  margin: 12.5px 0;
  border-left: 2px solid #ffffff;
}
.account-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: right;
}
.account-container ul li {
  float: left;
  text-align: center;
  font-size: 12px !important;
}
.account-container ul li a {
  color: #ffffff;
  display: block;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-decoration: none !important;
  margin-left: 10px;
}
.account-container ul li a:hover {
  color: #ffffff !important;
  opacity: .5 !important;
}
.logged-in-as {
  color: #ffffff;
  display: block;
  font-family: 'Open Sans', sans-serif;
  margin-left: 10px; /* PR2910 RESKIN - 12/11/2020 - Jayden */
  text-decoration: none !important;
}
.utility-container ul {
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
  float: right;
}
.utility-container ul li {
  float: left;
  font-size: 14px !important;
  text-align: center;
}
.utility-container ul li a {
  color: #444444;
  background: #ffffff;
  display: block;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-decoration: none !important;
  margin-left: 10px;
  margin-top:3px;
  border: 1px solid #ffffff;
  border-radius: 2px;
  padding: 2px 10px;
  font-size: 12px;
}
.utility-container ul li a:hover {
  color: #444444 !important;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}
.awesome-icon {
  margin-right: 5px;
}
#store-details {
  /* PR3096 - move it to the left float: right; */
  position:absolute;
  top:33px;
  left:0px;
  padding: 7px 15px 0; /* PR2972 - changed from 10px to 7pm to move store name up a bit */
}

#store-name {
  color: white;
  font-weight: bold;
  width:175px;
  text-align:center;
  max-height:28px;
  overflow:hidden;
}

.store-name-smaller-font {
  font-size:14px;
  padding-top:3px;
}

#store-name select {
  border:2px solid white;
  background:#5078f1; /* PR3137 - make it lighter so you can see the darker bar on hover */
  color:white;
  font-weight:bold;
  font-size:14px;
  font-family:'Open Sans', sans-serif;
  margin-top:-3px;
  max-width:170px;
  outline-color: white !important; /* PR3130 - to remove default black outline when you click it in chrome */
  outline-width: 0px !important;
  border-radius:4px;
}

#store-name select:focus-visible {
  border:2px solid white !important; /* PR3130 - to remove default black outline when you click it in chrome */
  outline-color: white !important;
  outline-width: 0px !important;
}

#store_select option {
  font-weight:normal !important;
  /*background: #83a2f2; */
}

#store_select .refresh_option {
  color: #fefefe;
  font-size:12px;
  background: #51bf9a;
}


#store-roster-list {
  margin-top: 5px;
}
.custom-form-control {
  width: 160px;
  height: 25px;
  color: #ffffff;
  font-weight: bold;
  background: #4068e1;
  border-radius: 2px !important;
  border: 2px solid #ffffff;
}
.custom-form-control:focus {
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* PR2910 RESKIN - JO - Header Help Styling (We need it for both login and main header*/
#header-help {
  color: #ffffff;
  display: block;
  float: right;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-decoration: none !important;
  margin: 0px 20px 0 10px;
}
#header-help:hover {
  color: #ffffff !important;
  opacity: .5 !important;
}
.icon-help {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-block: -2px;
  background:url('../../icons/icon-question-keyline-white.svg');
  background-repeat:no-repeat;
  width: 14px;
  height: 13px;
  margin-right:2px;
}
.icon-help:hover {
  background:url('../../icons/icon-question-keyline-white.svg') !important;
}
.icon-exit {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-block: -3px;
  background:url('../../icons/icon-exit-white.svg');
  background-repeat:no-repeat;
  width: 15px;
  height: 14px;
  margin-right:2px;
}
.icon-key {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-block: -2px;
  background:url('../../icons/icon-key-white.svg');
  background-repeat:no-repeat;
  width: 14px;
  height: 13px;
  margin-right:2px;
}

/* PR3249 RO - BSUP-1153 - 'stacked' header mode, toggled by headerCheckStacking() in new-header.js.
   On a narrow window the right-hand section (Password/Logout/Help + action buttons) used to float
   over the top of the nav. In stacked mode it moves onto its own row below the nav, right-aligned;
   the JS also grows this frame's row in the parent frameset from 75px to 135px so the row is not
   clipped (the headerframe is scrolling=no). */
body.header-stacked header {
  height: 135px;
}
body.header-stacked .secondary-menu {
  float: none;
  position: absolute; /* anchors to the fixed <header> */
  top: 78px;
  right: 20px;
  margin: 0;
  border-left: none;
}