/*******************************************************/
/* from: eClub\eClubOnline_net\scss, run this command: */
/* sass --watch NewNav.scss:../css/NewNav.css          */
/*******************************************************/
:root {
  --maxWidth: 1170px;
  --minWidth: 320px;
  --NavPadding: 10px;
  --NavTintColor: #efefef40; /*failsafe when no color-mix*/
  --NavTintColor: color-mix(in srgb, var(--color-button-background, #80808060), transparent 60%);
  --NavBgColor: var(--color-branding-primary, #2d6cb1);
  --NavTextColor: var(--white, white);
  /*--NavHoverTextColor: SOMECOLOR;  use this only in client's sheet, along with custom NavTintColor, to define hover colors*/
}

header.main__header.newEclubNav {
  background-color: var(--NavBgColor);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 20px;
  justify-content: space-between;
  padding: 0 var(--NavPadding);
  max-width: var(--maxWidth);
  min-height: 56px;
  margin-left: auto;
  margin-right: auto;
  color: var(--NavTextColor);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #ctl00_ctl00_ContentPlaceHolder1_logolink {
  padding: calc(1.4 * var(--NavPadding)) calc(1.2 * var(--NavPadding));
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer {
  display: flex;
  column-gap: 10px;
  align-items: center;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer #ctl00_ctl00_ContentPlaceHolder1_logo, header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer #ctl00_ctl00_ContentPlaceHolder1_FILogo {
  max-height: 40px;
  max-width: 130px;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer #ctl00_ctl00_ContentPlaceHolder1_FILogo {
  padding: 5px;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer #ctl00_ctl00_ContentPlaceHolder1_FILogo[ribbon=true] {
  background-color: var(--white, white);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu {
  display: flex;
  column-gap: 10px;
  flex-grow: 1;
  justify-content: space-between;
  position: relative;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.compact #BenefitsMenu {
  display: flex;
  align-items: center;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.compact #BenefitsMenu .navLinks {
  height: auto;
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.compact #BenefitsMenu .navLinks.is-open {
  display: grid;
  position: absolute;
  top: 110%;
  left: 0;
  z-index: 10;
  background-color: var(--NavBgColor);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.compact #BenefitsMenu .navLinks.is-open a {
  width: 100%;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.compact #benefitLinksToggle {
  display: flex;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #benefitLinksToggle {
  display: none;
  border: none;
  padding: var(--NavPadding);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #benefitLinksToggle .arrowUp {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #benefitLinksToggle.is-open .arrowDown {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #benefitLinksToggle.is-open .arrowUp {
  display: inline-block;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu {
  display: flex;
  align-items: center;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .smallBenefitsHeading {
  display: none;
  align-items: center;
  column-gap: 1rem;
  font-size: clamp(1.2em, 3vw, 1.5em);
  white-space: nowrap;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .navLinks {
  height: 100%;
  display: flex;
  position: relative;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .navLinks > li {
  height: 100%;
  display: flex;
  align-items: center;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .navLinks > li a {
  height: 100%;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu {
  display: flex;
  align-items: center;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .smallAccountHeading {
  display: none;
  font-size: clamp(1.2em, 3vw, 1.5em);
  column-gap: 1rem;
  align-items: center;
  white-space: nowrap;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .smallAccountHeading .material-symbols-outlined {
  font-size: 36px;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  position: relative;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 100%;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li {
  height: 100%;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li a, header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li button {
  height: 100%;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons .quickLinkText {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons #AccountMenuToggle .arrowUp {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons #AccountMenuToggle.is-open .arrowDown {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons #AccountMenuToggle.is-open .arrowUp {
  display: inline-block;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons .userInitials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  font-size: 14px;
  border-radius: 50%;
  background: var(--NavTextColor);
  color: var(--NavBgColor, black);
  font-weight: 600;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuLinks {
  display: none;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuLinks.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 110%;
  right: 0%;
  background-color: var(--NavBgColor);
  z-index: 10;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu > button:hover {
  background-color: var(--NavTintColor);
  color: var(--NavHoverTextColor);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle {
  display: none;
  width: 46px;
  height: 36px;
  border-radius: 4px;
  background-color: transparent;
  border: 2px solid var(--NavTextColor);
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle .material-symbols-outlined {
  font-size: 28px;
}
header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle .menuOpen {
  display: none;
}
header.main__header.newEclubNav li:has(a:hover) {
  background-color: var(--NavTintColor);
}
header.main__header.newEclubNav li:has(a:hover) a, header.main__header.newEclubNav li:has(a:hover) .material-symbols-outlined {
  color: var(--NavHoverTextColor, var(--NavTextColor));
}
header.main__header.newEclubNav a {
  text-decoration: none;
}
header.main__header.newEclubNav button {
  justify-content: center;
  border: none;
  background-color: transparent;
}
header.main__header.newEclubNav button:hover {
  background-color: var(--NavTintColor);
  color: var(--NavHoverTextColor);
}
header.main__header.newEclubNav a, header.main__header.newEclubNav button {
  display: flex;
  column-gap: var(--NavPadding);
  align-items: center;
  color: var(--NavTextColor);
  white-space: nowrap;
  padding: var(--NavPadding) calc(1.2 * var(--NavPadding));
}
header.main__header.newEclubNav a .material-symbols-outlined, header.main__header.newEclubNav button .material-symbols-outlined {
  color: var(--NavTextColor);
}
header.main__header.newEclubNav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*RESPONSIVE*/
@media (max-width: 767px) {
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header {
    display: grid;
    grid-template-rows: 56px auto;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer {
    grid-row: 1/2;
    grid-column: 1/2;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #FirstLogoContainer #ctl00_ctl00_ContentPlaceHolder1_logolink {
    padding-left: 0;
    padding-right: 0;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle {
    grid-row: 1/2;
    grid-column: 2/3;
    justify-self: flex-end;
    display: flex;
    align-items: center;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle.is-open .menuOpen {
    display: inline-block;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header #hamburgerToggle.is-open .menuClosed {
    display: none;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu {
    grid-row: 2/3;
    grid-column: 1/3;
    gap: 10px;
    flex-direction: column-reverse;
    align-items: center;
    height: 0px;
    overflow: hidden;
    transition: height 0.35s ease;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #benefitLinksToggle {
    display: none;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu {
    display: flex;
    padding: clamp(5px, 2vh, 20px) clamp(2px, 5vw, 50px);
    align-items: flex-start;
    row-gap: var(--NavPadding);
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.1254901961);
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .smallBenefitsHeading {
    display: flex;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .navLinks {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu .navLinks a {
    width: 100%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu {
    grid-column: 1/2;
    flex-direction: column;
    row-gap: var(--NavPadding);
    display: flex;
    padding: clamp(5px, 2vh, 20px) clamp(2px, 5vw, 50px);
    background-color: rgba(0, 0, 0, 0.1254901961);
    align-items: flex-start;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu > * {
    width: 100%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .smallAccountHeading {
    display: flex;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons {
    width: 100%;
    flex-direction: column;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons #AccountMenuToggle {
    display: none;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li {
    width: 100%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li a {
    width: 100%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuIcons li a .quickLinkText {
    display: inline;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu .quickLinks #AccountMenuLinks {
    width: 100%;
    position: static;
    display: flex;
    flex-direction: column;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu, header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu {
    width: 90%;
  }
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu.is-open {
    height: var(--NavElementHeight);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 360px) {
  header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #BenefitsMenu, header.main__header.newEclubNav #ctl00_ctl00_ContentPlaceHolder1_header nav#MainMenu #AccountMenu {
    width: 95%;
    padding: 5px;
  }
}
/*OLDER INVOCATIONS*/
/* not sure what this is for ehhh*/
/*nav.navbar.navbar-default {
    background-color: var(--NavBgColor);
    border: none;
    margin-bottom: 0;

    img {
        height: 80px;
    }

    #ctl00_ContentPlaceHolder1_navHeader {
        a {
            justify-content: center;
        }
    }
}*/

/*# sourceMappingURL=NewNav.css.map */