/* BS5 styles for BS3 backwards compatibility */
header.account.bs3-comp.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}
header.account.bs3-comp .w-100 {
    width: 100%;
}
header.account.bs3-comp .d-none {
    display: none;
}
header.account.bs3-comp .d-flex,
.top-promo.bs3-comp .d-flex {
    display: flex;
} 
header.account.bs3-comp .d-block {
    display: block;
}
header.account.bs3-comp .flex-wrap {
    flex-wrap: wrap;
}
header.account.bs3-comp .align-items-center,
.top-promo.bs3-comp .align-items-center {
    align-items: center;
} 
header.account.bs3-comp .align-items-start {
    align-items: flex-start;
}
header.account.bs3-comp .justify-content-start {
    justify-content: start;
}
header.account.bs3-comp .justify-content-between,
.top-promo.bs3-comp .justify-content-between {
    justify-content: space-between;
}
header.account.bs3-comp .justify-content-center,
.top-promo.bs3-comp .justify-content-center {
    justify-content: center;
}
header.account.bs3-comp .text-decoration-none,
.top-promo.bs3-comp .text-decoration-none {
    text-decoration: none;
}
header.account.bs3-comp .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
header.account.bs3-comp .nav-link {
    display: block;
    padding: 0;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out
}
header.account.bs3-comp .dropdown {
    position: relative;
}
header.account.bs3-comp .dropdown-toggle {
    white-space: nowrap;
}
header.account.bs3-comp [role="button"] {
    cursor: pointer;
}
header.account.bs3-comp .flex-grow-1 {
    flex-grow: 1;
}
header.account.bs3-comp .col-12 {
    flex: 0 0 auto;
    width: 100%;
}
header.account.bs3-comp .mx-auto {
    margin-left: auto;
    margin-right: auto;
}
header.account.bs3-comp .mb-0,
.top-promo.bs3-comp .mb-0 {
    margin-bottom: 0;
}
header.account.bs3-comp .mb-1 {
    margin-bottom: 0.25rem;
}
header.account.bs3-comp .mb-2 {
    margin-bottom: 0.5rem;
}
header.account.bs3-comp .offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: #29353A;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s ease-in-out;
}
header.account.bs3-comp .offcanvas.showing, 
header.account.bs3-comp .offcanvas.show:not(.hiding) {
    transform: none;
    width: 100%;
}
header.account.bs3-comp .offcanvas.showing, 
header.account.bs3-comp .offcanvas.hiding, 
header.account.bs3-comp .offcanvas.show {
    visibility: visible;
}
header.account.bs3-comp .offcanvas.offcanvas-bottom {
    right: 0;
    left: 0;
    height: 35vh;
    max-height: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.175);
    transform: translateY(100%);
}
header.account.bs3-comp .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}
header.account.bs3-comp .offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
}
header.account.bs3-comp .fade {
    transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
    .fade {
       transition: none
    }
}
.fade:not(.show) {
    opacity: 0
}
header.account.bs3-comp .offcanvas-backdrop.fade {
    opacity: 0
}
header.account.bs3-comp .offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
header.account.bs3-comp .offcanvas-backdrop.fade {
    opacity: 0;
}
header.account.bs3-comp .offcanvas-backdrop.show {
    opacity: .5;
}
header.account.bs3-comp .list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 8px;
 }
 header.account.bs3-comp .modal-content,
 .top-promo.bs3-comp .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 8px;
    outline: 0;
}
header.account.bs3-comp .modal-header,
.top-promo.bs3-comp .modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* medium */
@media (min-width: 768px) {
    header.account.bs3-comp .justify-content-md-between,
    .top-promo.bs3-comp .justify-content-md-between {
        justify-content: space-between;
    }
    header.account.bs3-comp .my-md-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    header.account.bs3-comp .offcanvas {
        width: 375px;
    }
}
/* large */
@media (min-width: 992px) { 
    header.account.bs3-comp .d-lg-none {
        display: none;
    }
    header.account.bs3-comp .my-lg-0 {
        margin-top: 0;
        margin-bottom: 0;
    } 
    header.account.bs3-comp .d-lg-inline-block {
        display: inline-block;
    }
    header.account.bs3-comp .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    header.account.bs3-comp .me-lg-auto {
        margin-right: auto;
    }
}
/* end of BS5 styles */





header.account .bg-color{
    background-color: var(--Color-Brand-UI-Colors-Accessible-Blue, #0875B5);
    padding:10px 0 8px 0;
    border-bottom: 1px solid #BFC2C4;
}
header.account .offcanvas{
    height: 35vh;
}
header.account .offcanvas.show:not(.hiding) {
    border-radius: 1rem 1rem 0 0;
}
header.account .offcanvas-body {
    flex-grow: 1;
    padding: 0;
    overflow-y: auto;
}
header.account .list-group-item {
    position: relative;
    display: block;
    padding: 1rem 1.5rem;
    color: #16384E;

}
header.account .offcanvas-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--Colors-Grays-Light-Gray, #BFC2C4);
}
header.account .offcanvas-title{
    color: var(--Colors-Grays-Slate-Gray, #16384E);
    font-family: Prompt;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
}
header.account .offcanvas-header .btn-close {
    color:#16384E;
    padding:0;
    margin:0;
}
header.account .nav .list-group-flush > .list-group-item {
    color: var(--Colors-Grays-Slate-Gray, #16384E);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.1;
}
header.account .nav-link:hover, 
header.account .nav-link:focus,
header.account a.help-link:hover,
header.account a.help-link:focus,
header.account a.acct-link:hover,
header.account a.acct-link:focus,
header.account a.active,
header.account.bs3-comp .nav-link:hover, 
header.account.bs3-comp .nav-link:focus,
header.account.bs3-comp a.help-link:hover,
header.account.bs3-comp a.help-link:focus,
header.account.bs3-comp a.acct-link:hover,
header.account.bs3-comp a.acct-link:focus,
header.account.bs3-comp a.active {
    color: #16384E;
    background-color:#DFEBF0;
}
header.account a.shop-link.active {
	border-radius:0;
}
header.account .links-wrap{
    row-gap:.625rem;
    justify-content: space-between;
}
header.account .nav{
   justify-content: space-between; 
   align-items: end;
}
header.account .nav .nav-link{
    font-size: 0.875rem;
    margin: 0 auto;
    text-align: center;
    padding:6px;
}
header.account .nav .more .nav-link{
    padding:15px 5px 5px;
}
header.account .nav .nav-link:hover svg path,
header.account .nav .nav-link:focus svg path,
header.account .nav .nav-link.active svg path,
header.account .nav .nav-link:active svg path{
    fill:#16384E;
}
header.account #moreNavMobile a{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:6px;
    color:#16384E;
}
header.account .dropdown-toggle::after {
    display: none;
}
header.account .cart-count{
    display: unset;
    color: #fff;
    font-family: Prompt, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
}
header.account .cart-count.item{
    display:inline-block;
    color: var(--Text-text-primary, #16384E);
    font-family: Prompt;
    font-size: 1.125rem;
    font-weight: 700;
}
header.account a.cart-link.item {
    background-color:#FFE500;
    border-radius: 6px;
    padding: .4rem .25rem;
}
header.account a.cart-link.item svg path{
    fill:#16384E;
}
header.account .dropdown-item:active{
    background-color:transparent;
}

header.account .offcanvas .icon-wrap{
    width:1.5rem;
    text-align: center;
}
.top-promo.bs3-comp {
    background: #F5CE97;
}
 
.top-promo.bs3-comp .top-promo-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:.5rem;
    padding: .75rem 0;
    text-decoration: none;
    cursor:pointer;
}
 
.top-promo.bs3-comp .promo-offer{
    color:#16384E;
    font-family: Prompt;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
}
 
.top-promo.bs3-comp .details{
    color: var(--Text-text-primary, #16384E);
    font-family: Arial;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    text-decoration-line: underline;
}
.top-promo.bs3-comp .modal.fade.in {
    opacity: 1;
}
#topPromo .modal-footer{
    justify-content: center;
}

.sub-header.bs3-comp {
    overflow:auto;
    position: sticky;
    top:8.5rem;
    background-color: #fff;
    border-bottom: var(--Item-Count, 1px) solid var(--Colors-Grays-Lightest-Gray, #EAEBEB);
    z-index:3;
 }
 .sub-header.bs3-comp .icon-row{
    display: flex;
    gap: 1.5rem;
    width: fit-content;
    padding: 1rem 1rem 0rem 1rem;
 }
 .sub-header.bs3-comp a{
    display: flex;
    flex-direction: column;
    color: var(--Colors-Grays-Dark-Gray, #6D7477);
    text-align: center;
    font-family: Prompt;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    line-height:1.6;
    gap:0;
 }
 
 .sub-header.bs3-comp p{
     margin-bottom:.5rem;
     line-height: 1.3;
    white-space: nowrap;
 }
 .sub-header.bs3-comp a{
    border-bottom: 5px solid #fff;
 }
 .sub-header.bs3-comp a.active{
    font-weight:600;
    border-bottom: 5px solid var(--Action-action-primary-orange, #BD357A);
    color:#16384E;
 }
 .sub-header.bs3-comp a:not(.active) svg.icon-active,
 .sub-header.bs3-comp a.active svg:not(.icon-active),
 .sub-header.bs3-comp .icon-row.hide-icons svg {
     display:none;
 }
 
 .sub-header.bs3-comp .icon-link svg{
    height:2.5rem;
 }
 

@media(max-width:320px){
    header.account .nav .nav-link {
        font-size: 0.75rem;
    }
}
@media(min-width:768px){
    header.account .nav {
        max-width: 450px;
        order:2;
    }
    header.account .acct-cart-wrap{
        order:3;
    }
    header.account.bs3-comp .nav .nav-link {
        font-size: 0.74em;
    }
    .top-promo.bs3-comp .top-promo-link {
        justify-content: space-between;
    }
    .top-promo.bs3-comp .promo-offer {
        font-size: 0.845em;
    }
    .sub-header.bs3-comp {
        top: 3.9rem;
    }
    .sub-header.bs3-comp .icon-row {
        display: flex;
        width: 100%;
        padding: 1rem 0 0 0;
        margin:0 auto
    }
    .sub-header.bs3-comp a {
        font-size: 0.845em;
    }
}

@media(min-width:992px){
    header.account .nav {
        max-width: none;
    }
    header.account .links-wrap {
        align-items: center;
    }
    header.account .bg-color{
        height:88px;
        padding:0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header.account .nav .nav-link{
        font-size: .9rem;
        padding:6px 12px;
        font-family: Prompt;
    }
    header.account img.brand-logo{
        padding-bottom:12px;
        margin-right:12px;
    }
    header.account a.cart-link span{
        color: #fff;
        font-family: Prompt, sans-serif;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1;
    }
    header.account a.cart-link.item span{
        color: inherit;
    }
    header.account.bs3-comp a.cart-link span {
        font-size: 0.95em;
    }
    header.account .acct-cart-wrap{
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    header.account .acct-cart-wrap a.acct-link,
    header.account .acct-cart-wrap a.help-link{
        color:#fff;
        text-decoration: none;
        padding:8px;
    }
    header.account.bs3-comp .acct-cart-wrap .dropdown-toggle,
    header.account.bs3-comp .acct-cart-wrap .cart-link {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
    header.account a.acct-link{
        display: flex;
        align-items: center;
        gap:4px;
    }
    header.account a.help-link{
        color: #fff;
        font-family: Prompt, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        display: block;
    }
    header.account.bs3-comp a.help-link {
        font-size: 0.845em;
    }
    header.account a.acct-link span.greeting{
        color: #fff;
        font-family: Prompt, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;  
    }
    header.account.bs3-comp a.acct-link span.greeting {
        font-size: 0.845em;
    }
    header.account a.acct-link span.acct-txt{
        display: block;
        font-size: .75rem;
    }
    header.account.bs3-comp a.acct-link span.acct-txt{
        display: block;
        font-size: .75em;
    }
    header.account a.cart-link:hover,
    header.account a.cart-link:focus {
        background-color:#DFEBF0;
    }
    header.account a.acct-link:hover,
    header.account a.acct-link:focus,
    header.account a.acct-link:hover span,
    header.account a.acct-link:focus span,
    header.account a.help-link:hover,
    header.account a.help-link:focus,
    header.account a.cart-link:hover span,
    header.account a.cart-link:focus span,
    header.account a.help-link:hover svg path,
    header.account a.help-link:focus svg path,
    header.account a.cart-link:hover svg path,
    header.account a.cart-link:focus svg path,
    header.account a.acct-link:hover svg path,
    header.account a.acct-link:focus svg path
    {
        color: #16384E;
        fill:#16384E;
    }
    header.account a.cart-link{
        padding:8px;
    }
    header.account .dropdown-item {
        color: #16384E;
        font-family: Prompt, sans-serif;
        font-size: 0.845em;
        font-weight: 500;
        line-height: 1;
        padding:18px;
    }
    header.account .dropdown-menu{
        padding:0;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border:none;
        border-radius:0;
        border-top: 6px solid #0875B5;
    }
    header.account .dropdown:hover .dropdown-menu {
        display: block;
        margin-top:0;
        right:0;
    }
    header.account .cart-count{
        display:inline-block;
    }
    .top-promo.bs3-comp .promo-offer {
        font-size: 0.95em;
    }
    .sub-header.bs3-comp {
        top: 4.5rem;
    }
    .sub-header.bs3-comp .icon-row {
        width: 100%;
    }
    .sub-header.bs3-comp a {
        flex-grow: 1;
    }
}

@media(min-width:1200px){
    header.account .nav .nav-link{
        font-size: 1.125rem;
    }
    header.account.bs3-comp .nav .nav-link {
        font-size: 0.95em;
    }
    .sub-header.bs3-comp {
        top: 4.5rem;
    }
    .sub-header.bs3-comp .icon-row {
        justify-content: space-between;
    }
}