/* Common Elements Starts  */

HTML, body * {font-family: 'proximnaNova', Helvetica, sans-serif!important; font-size: 0.9rem;} 
/* body {background:
    url('https://lwreid--cwxdev.sandbox.lightning.force.com/cms/media/MCLXQCSQY64ZCVPKF6UEUIQ6PI24') center 10px repeat-y #eeeff2 !important;
} */
.slds-button--brand:focus, .slds-button_brand:focus {background: none;} 
header .component-wrapper-spacer {margin-bottom: 0!important;}
.community_layout-section_section-host.comm-section-container {padding: 0 auto!important;}
.spinner-div {min-height: 100vh; height: 100vh; position: fixed; z-index: 99; left: 0; top:0; bottom: 0; right:0}
.slds-button:focus {box-shadow: none;} 
.slds-nav-vertical__action:hover {text-decoration: none!important;}
/* scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.3);
  }


.webruntimedesign-componentWrapper_componentWrapper-host.component-wrapper-spacer {margin: 0;}
.siteWrapper {margin: 0 auto;}
main.mainContainer, .SiteFooter__wrapper, footer .wrapper .inner {padding: 0 10px; max-width: 1366px; margin: 0 auto;}
.outerBox {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; min-height: 52px; padding-top: 0.3rem;}
/* Reset Variable Based CSS */
:root {
    --button-color-bg:#4c4d4f;
    --button-color-bg-hover:#000;
    --button-color-text:#fff;
    --button-color-border:#fff;
    --primary-color:#111;
    
    
}
a, a:link:not(.slds-button,.slds-dropdown__item>a), a:visited:not(.slds-button,.slds-dropdown__item>a) {color:var(--primary-color);}

/* vars applied to the theme elements */
/* ========================================================================= */
/* Site Buttons  Starts */
.btnFilter button, .siteBtn button, .siteBtn, .pdpGrid
.cehckoutContainer .buttonSet button.slds-button, .flow-main-container .slds-button_brand, 
.preloginWrapper .slds-button, .retailCheckoutContainer .buttons .slds-button, button.slds-button.slds-button_destructive,
.buttonSet .siteBtn button, .slds-modal__footer .slds-button_brand
{background:var(--button-color-bg)!important; border:0; justify-content: center; 
    text-align: center; text-align: center; 
    min-width:115px; color: var(--button-color-text); border-radius: 0; position: relative;
    overflow: hidden;
    z-index: 1;     min-height: 30px;
    line-height: 35px;
    display: inline-flex;
    color: #fff!important;
    margin: 0 0 0 5px; font-size: 0.9rem; cursor: pointer;}

.btnFilter button::after, .siteBtn button::after, .siteBtn::after, 
.cehckoutContainer .buttonSet button.slds-button::after, .flow-main-container .slds-button_brand::after, 
.preloginWrapper .slds-button::after, .retailCheckoutContainer .buttons .slds-button::after, 
button.slds-button.slds-button_destructive::after, .buttonSet .siteBtn button::after, .slds-modal__footer .slds-button_brand::after
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:var(--button-color-bg);
    z-index: -2;
      }

.btnFilter button::before, .siteBtn button::before, .siteBtn::before, 
.cehckoutContainer .buttonSet button.slds-button::before, .flow-main-container .slds-button_brand::before, 
.preloginWrapper .slds-button::before, .retailCheckoutContainer .buttons .slds-button::before, 
button.slds-button.slds-button_destructive::before, .buttonSet .siteBtn button::before, .slds-modal__footer .slds-button_brand::before
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color:var(--button-color-bg-hover);
    transition: all .3s;
    z-index: -1; 

}
.btnFilter button:hover, .siteBtn button:hover, .siteBtn:hover, 
.cehckoutContainer .buttonSet button.slds-button:hover, .flow-main-container .slds-button_brand:hover, 
.preloginWrapper .slds-button:hover, .retailCheckoutContainer .buttons .slds-button:hover,
.buttonSet .siteBtn button:hover, .slds-modal__footer .slds-button_brand:hover {
    color: #fff; text-decoration: none!important; }

.btnFilter button:hover::before, .siteBtn button:hover::before, .siteBtn:hover::before, .siteBtn .slds-button:hover::before, 
.preloginWrapper .slds-button:hover::before, .cehckoutContainer .buttonSet button.slds-button:hover::before, 
.flow-main-container .slds-button_brand:hover::before, .retailCheckoutContainer .buttons .slds-button:hover::before,
.buttonSet .siteBtn button:hover::before, .slds-modal__footer .slds-button_brand:hover::before {
      width: 100%; }

.cartButtonsSet {display: flex; align-items: baseline;}
.cartButtonsSet button {margin: 0 2px; align-items: baseline;}
.cehckoutContainer .slds-button .slds-button__icon_left {display: none;}

.contentBox .buttonSet button {margin: 0 20px; padding: 3px 25px;}
.contentBox .buttonSet button:hover {color:#fff}
.centerIcon button {margin: 0 auto;}
.centerIcon svg {width: 70px; height:70px; fill: var(--primary-color); margin: 30px auto;}
/* Site Buttons  Ends */

/* Form Elements (buttons, input boxes, textareas etc) */
.slds-input, .slds-textarea, .slds-input_faux {border:1px solid #ccc!important; border-radius: 0;}

/* message toasters */
.slds-notify_container .slds-notify_toast .slds-icon-action-approval svg {fill: green;}
.slds-notify_container .slds-notify__content {max-width: 90%;}

/* SEARCH PANEL */

.searchBox {position: relative; top:9px}
.searchBox input {font-size: 0.8rem; border-radius:20px;}
.searchInputBox .slds-input__icon#searchClear {top:0}
.searchInputBox .slds-input__icon {right:0; top:8px; left: auto!important; 
    width: 50px; height: 40px; background-color:var(--primary-color); color: #fff; padding: 5px; border-radius: 0 5px 5px 0; }
.searchInputBox .slds-input {padding: 0 50px 0 10px; min-height: 40px; line-height: 40px}

/* Header Panel */
.menu-trigger-p.commerce_my_account-userProfileMenu_userProfileMenu {max-width: 100%!important;}
.menu-button.commerce_my_account-userProfileMenu_userProfileMenu:hover {background: none!important;}
.guest-login-max-width.commerce_my_account-userProfileMenu_userProfileMenu {max-width: 100%!important;}
.menu-button.commerce_my_account-userProfileMenu_userProfileMenu:hover {background: none!important;}

header {position: -webkit-sticky; position: sticky; top: 0; z-index: 9;top:0}

.menu-trigger-p.commerce_my_account-userProfileMenu_userProfileMenu {min-width: 120px;}
.navbar-items .slds-dropdown li a:hover {color:#333;}
.commerce_my_account-userProfileMenu_userProfileMenu-host {display: flex; justify-content: flex-end;}

svg.commerce_cart-badge_badge, .commerce_my_account-userProfileMenu_userProfileMenu svg {fill:#fff!important; width: 25px; height: 25px; margin-right: 7px;}
.menu-trigger.commerce_my_account-userProfileMenu_userProfileMenu {color: #fff; font-size: 0.9rem; max-width: none!important}
.menu-trigger.commerce_my_account-userProfileMenu_userProfileMenu p {font-size:1rem; color: #fff; margin-right: 7px;}
.menu-button:hover.commerce_my_account-userProfileMenu_userProfileMenu:hover {background: none!important; box-shadow: none!important;}

.login-text.commerce_my_account-userProfileMenu_userProfileMenu {color: #fff!important; margin: 0; text-decoration: none!important;}
.commerce_my_account-userProfileMenu_userProfileMenu.login-link {background: none; text-decoration: none;}
.commerce_my_account-userProfileMenu_userProfileMenu.login-link:hover {text-decoration: none!important; background: none!important;}
commerce_my_account-user-profile-menu .login-link {float: right; color: #fff !important; margin-top: 0.25rem;}
commerce_my_account-user-profile-menu .login-link:hover {background: none !important; text-decoration: none !important;}
commerce_my_account-user-profile-menu .login-link .login-text {color: #fff; padding: 0 0.25rem 0 0; margin: 0;}
commerce_my_account-user-profile-menu .login-link .slds-icon {fill: #fff;}
commerce_my_account-user-profile-menu .login-link:hover .login-text {text-decoration: none !important;}
commerce_my_account-user-profile-menu .menu-button.slds-button {width: 100%; color: #fff !important;}
commerce_my_account-user-profile-menu .menu-button.slds-button:hover {background: none !important;}
commerce_my_account-user-profile-menu .menu-button.slds-button > .slds-media {width: 100%; justify-content: flex-end;}
commerce_my_account-user-profile-menu .slds-button p:first-child {line-height: normal; margin: 0;}
commerce_my_account-user-profile-menu .slds-button p:last-child {font-size: 0.75rem; white-space: normal; line-height: normal;}
commerce_my_account-user-profile-menu .slds-button .slds-icon_container {margin-left: 0.25rem;}
commerce_my_account-user-profile-menu .slds-button .slds-icon_container .slds-icon {fill: #fff;}
slot[name="rightPanel"] .lwc-bh41l7ugn9.columns {align-items: center;}
commerce_my_account-user-profile-menu .slds-dropdown-trigger {justify-content: flex-end;}
commerce_my_account-user-profile-menu .menu-button {padding: 0; margin: 0;}
commerce_my_account-user-profile-menu .menu-button:hover {background: none !important;}
commerce_my_account-user-profile-menu .menu-button svg {fill:#fff!important; width: 25px!important; height: 25px!important;}
commerce_my_account-user-profile-menu .menu-trigger span {font-size:0.9rem; color: #fff; margin: 0 5px 0 0;}
commerce_my_account-user-profile-menu .menu-button .menu-trigger.lwc-5uc1gleli5 {max-width: none;}

/* BREADCRUMB */
.commerce-breadcrumb.commerce-breadcrumbs_breadcrumbs {display: block!important;}
commerce_builder-breadcrumbs {max-width: 70%; z-index: 9; margin-bottom: 5px!important;}
.commerce-breadcrumbs_breadcrumbs {margin:0; position: relative; z-index: 1;}
ol.commerce-breadcrumbs_breadcrumbs li.commerce-breadcrumbs_breadcrumbs a.commerce-breadcrumbs_breadcrumbs {color:var(--primary-color)!important;}
ol.commerce-breadcrumbs_breadcrumbs li.commerce-breadcrumbs_breadcrumbs a.commerce-breadcrumbs_breadcrumbs:hover {text-decoration: underline;}

/* HOME PAGE DEFAULT BANNER */
.home-page-banner-container {max-width: 125%; margin: 0 auto; overflow: visible;}

/* HOME PAGE CATEGORY SECTION */
.galleryBox {margin-bottom: 20px;}
.categoryTileBox .col-large-size_3-of-12 {margin-bottom: 20px;}

/* main wrapper fixes */
.pageHead {font-size:1.75rem!important; color: var(--primary-color)!important; font-weight: normal!important;}
h2 {font-size:1.5rem!important; color: var(--primary-color)!important; font-weight: normal!important;}
main.mainContainer {min-height: calc(100vh - 463px); /* this calc value need to change when the footer element will get changed*/ padding:15px 0 30px 0; background: #fff;}
main.preloginWrapper {min-height:  calc(100vh - 463px);}
lightning-button-icon {align-items: center; display: flex;}

/* Prelogin pages parts */
.preloginWrapper h1 {font-size: 1.5rem; text-align: center; color:var(--primary-color);}
.navWrapper nav, .navWrapper {background:var(--primary-color)!important;}
.navWrapper .navbar-items a span {color: #fff!important;}
c-retail-custom-login-cmp .slds-var-p-top_small.slds-grid button label svg {fill: #707275;}
c-retail-custom-login-cmp .slds-var-p-top_small.slds-grid button:hover label svg {fill: #fff;}
.preloginWrapper c-retail-custom-login-cmp .slds-button {margin: 0!important;}
.preloginWrapper c-retail-custom-login-cmp .loginButtonSet button:first-child {margin-right: 5px!important;}
/* Footer Setion */
footer .wrapper {background:#eeeff2;}
.footer-nav-menu-container {padding: 0 0 15px}
.footer-nav-menu-container h4 {margin-bottom: 10px; font-weight: bold;}
.footer-nav-menu-container .menu-item-list li {line-height: 35px}
.footer-nav-menu-container .menu-item-list li a {color: #666;}
.footer-nav-menu-container .menu-item-list li a:hover {text-decoration: none; color:#ec1b30;}
.collapsable-section-header span.collapsable-section-icon {max-width: 15px;
    display: inline-block;
    min-width: 15px;
    height: 15px;}
footer .slds-nav-vertical__action {padding: 0!important;}
.copyText[c-footerCopyRight_footerCopyRight] {color: #fff!important;}
.socialLinks {color:var(--primary-color); display: flex; align-items: baseline; float: right;}
.socialLinks li:first-child {margin-right: 15px;}
.socialLinks svg {width: 40px; width: 30px; margin: 0 4px; fill: #111;}
.inner[c-footerCopyRight_footerCopyRight] {background:#4f91aa;}
.slds-text-title_caps[c-footerCopyRight_footerCopyRight] {color: #fff!important;
    font-size: 0.8rem!important;}
footer .inner[c-footerCopyRight_footerCopyRight] {padding:5px 0;}
footer .logo-image[c-retailSiteLogoCmp_retailSiteLogoCmp] {height: 50px;
    width: 50px;
    margin: 5px;}
footer .logo-image {border: 0;}
footer .wrapper {border-top:4px solid #fff}
.SiteFooterSitemap .column h4 svg {display: none;}
footer .dxp_content_layout-siteLogo_siteLogo {margin:0}
footer .dxp-content-layout-site-logo {position: static;}
footer .slds-box, footer .custom-box {border:0}

/* ================================================================ */

/* Docker Panel */
.slds-docked_container {padding: 0!important;}
.slds-docked_container .slds-docked-composer {height:47px; max-width: 170px; font-size: 1rem!important;}
.slds-docked_container .available img {max-width: 30px; padding: 5px; border-radius: 5px; background-color:var(--primary-color)!important;}
.slds-docked_container .slds-media__body h2 {font-size: 1rem!important;}
.slds-size_3-of-12.leftCol {margin-bottom: 20px;}
.sizeBox .inputBox .slds-input {padding:0 3px; font-size: 0.8rem; max-width: 40px;}

.sectionHead, .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
        background:#eeeff2;
        color: var(--primary-color);
        padding: 5px 10px;
        _border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
    }

    /* =========================================================== */

/* PLP and PDP color name display on hover */

/*Display Colour Name on Mouseover*/
.colour-picker-block {
    position: relative;
 }
 .color-picker .items1, .color-picker .items2, 
 .color-picker .items3, .color-picker .item1, .color-picker .item2, 
 .color-picker .item3 {margin: 0 1px 1px 0; padding: 1px; border: 1px solid #f2f2f2; display: flex; max-width: 30px;}
 .color-picker div.active {border: 1px solid #800000;}
 .color-picker .item3 p {flex: 1 1 auto; border: 0;}
 
 .colour-picker-block .popover-colour-name {    
     visibility: hidden;
     width: 120px;
     text-align: center;
     color: #fff;
     background-color: #006fb9;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     border:0px;
     margin-left: -60px;
 }
 
 .colour-picker-block .popover-colour-name::after {
   content: " ";
   position: absolute;
   top: 100%; /* At the bottom of the tooltip */
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #006fb9 transparent transparent transparent;
 }
 
 .colour-picker-block:hover .popover-colour-name {
     visibility: visible;
 }

.mobileButton {display: none;}
/* filter panel mobile */
.mobileFilter svg {width: 25px;
    height: 25px;
    fill: var(--primary-color);
}
.mobileFilterPanel .slds-button.slds-button_icon {color: var(--primary-color); fill: var(--primary-color);}
.mobileFilterPanel .slds-button.slds-button_icon svg {height: 30px;}

/* ================= MEDIA QUERY CODE Starts =================== */

/* For desktops =====================================*/

@media screen and (min-width: 1024px) {
    .siteLogoBox {position:relative;}
    .siteLogoBox a {position: absolute; top:-22px; z-index: 9;}
    svg.commerce_cart-badge_badge {height: 30px; width: 30px;}
}

/* For Mobile =======================*/

@media screen and (max-width: 767px) {
    svg.commerce_cart-badge_badge, .commerce_my_account-userProfileMenu_userProfileMenu svg {margin-right: 27px!important;}
    img.dxp_base-image_image {height: auto!important;}
    c-retail-cart-container .pageHeaderBox {z-index: 1!important;}
       /* Logo */
       .dxp_content_layout-siteLogo_siteLogo {height: 50px!important;
        width: 145px!important;}
    .SiteFooterSitemap {max-width: 90%; margin: 0 auto;}
    .mobileFilter {top:7px!important}
    main.mainContainer {padding-top: 0;}
    .mainContainer lightning-tabset, .commerce-breadcrumbs_breadcrumbs {display: none;}
    .store-search-container {background: none;}
    .store-search-container .searchBox {margin: 10px 0; max-width: 100%;}
    .colorTag {position: relative!important; top:12px; width: 100%;}
    .pdpRight .color-picker {max-width: none!important; justify-content: center;}
    .pdpRight .product-quantity-header {min-width: 70px!important;}
    .pdpGrid .expander {right: -10px!important;
        top: 10px!important;}
    .pdpRight {padding:20px 0 0 20px!important;}
    .pdpRight .brand-image {top: 8px!important;
        right: 13%!important;}
    .mobileSection, .mobileButton  {display: block!important; max-width: 90%;}

    .pdpRight .innerGrid .slds-text-title img {height:45px;}
    .productCarousal .color-picker {height: 35px; overflow: hidden;}

  
    /* topStripPanel */
.footerTop {max-width: 100%; overflow: hidden;} 
.footerTop .slds-col .slds-media__body {display: none;}
.footerTop .slds-col:hover .slds-media__body {display: block;
    width: 100%;
    position: absolute;
    top: 60px;
    z-index: 9;
    border-radius: 5px;
    padding: 5px;
    background: rgba(255,255,255,0.7);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
    .footerTop .slds-col:hover .slds-media__body::after {    content: '';
        position: absolute;
        left: 42%;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff;
        clear: both;
        transform: rotate(180deg);
        opacity: 0.5;}

    /* Gallery page  effect */
.itemImg:hover {transform: none!important; opacity: 0.8;}

    /* Header Panel */
.interactions-component.webruntimedesign-componentWrapper_componentWrapper {min-height: 0;}
.outerBox {max-height:110px!important; background:#ec1b30; padding: 0;}
.slds-context-bar__item:not(.slds-no-hover):hover::after {display: none;}
.slds-docked_container {max-width: 50px!important}  

c-retail-cart-container .pageHeaderBox {top:111px!important; margin-bottom: 20px!important;}
c-retail-cart-items .retail-cart-items-container {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} 
.gridRepeat .inner {max-width: 200px!important;}
  }

/* iPad/Tab Oriented CSS ========================================================= */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.showFilter {    top: 78px!important;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding-top: 20px; height: 100%!important;}   
.product-card-container .slds-grid_vertical-stretch {border-left:1px solid #ccc; margin-left:15px;}
.product-card-container .retail-width {min-height: 40px!important;}
.product-card-container .b2c-plp-card .sizeCont {min-height: 55px!important;}
.mobileFilter {top:10px!important; height: 30px!important;}
header.headerWrap {height: 110px!important;}
.searchBox input {max-width: none;}
.footerTop p {display: none;}
.categoryTileBox {padding: 20px 10px;}
.categoryTileBox .columns[dxp_layout-columns_columns] {display: block;}   
.categoryTileBox .col-large-size_3-of-12 {min-width: 47%; max-width: 47%; float: left; margin: 0 10px 20px 10px;}
.categoryTileBox  [dxp_layout-columnSpacer_columnSpacer-host] {display: none;}
.product-card-container .slds-grid_vertical-stretch {max-width: 90%; margin: 0 auto;}
}

/* For Mobile and Tablet common elements================================= */

@media screen and (max-width: 1023px) {
    /* Navigation */
    .hamburger {display: block!important; background: none; border:0}
    .nav-container {position: absolute; top: 10px; left: 0}
    .nav-container .menu.show {background:#4c4d4f!important; top:100px!important}
    .menu-bar .dropdown {border-radius: 0!important;}
    .dropdown-btn.is-open {background: none!important;}
    .menu-bar li {border-bottom: 1px solid #999!important; padding: 0!important; margin:0!important}
    .menu-bar li li {border:0!important}
    commerce_my_account-user-profile-menu {position: absolute; top:10px; right:50px}
    commerce_my_account-user-profile-menu .login-link .login-text {display: block !important;}
    .guest-login-max-width {max-width: 4rem;}
    commerce_my_account-user-profile-menu .slds-icon-utility-chevrondown {display: none;}
    commerce_my_account-user-profile-menu .slds-button .slds-icon_container {margin: 0;}
    commerce_my_account-user-profile-menu .slds-button {padding: 0;}
    commerce_my_account-user-profile-menu .slds-button .menu-trigger {max-width: 4rem !important; display: block !important;}
    commerce_my_account-user-profile-menu .slds-button .menu-trigger p.menu-trigger-p {line-height: 1 !important;}
    c-cart-badge-cmp {position: absolute; right:15px; top:10px}
ol.commerce-breadcrumbs_breadcrumbs {margin-top: -28px;}
.logo-image {height: 60px!important; width: 60px!important;}
.collapsable-section-header.open svg { transform: rotate(180deg); }
.collapsable-section-header {display: flex!important; justify-content: space-between;}
footer .menu-item-list {height: 0; overflow: hidden; transition: height 4s;}
footer .menu-item-list.open {height: auto; transition: height 4s;}
.socialLinks {padding: 10px; float: left;}
.product-card-container .slds-grid_vertical-stretch {border-left:1px solid #f2f2f2;}
.preloginMainWrapper .contentBox {top: 4%!important; left: 5%!important; max-width: 90%!important;}
.preloginMainWrapper .contentBox button {margin:10px auto;}

c-retail-site-logo-cmp {margin: 0 auto 7px; max-width: 80px;}
.pageHead, h2 {margin-bottom: 15px;}
.gridBody .slds-col, .gridBody .slds-col .product-price-line {border:0!important}
.cartButtonsSet button {background: var(--primary-color)!important;
    color: #fff!important;
    padding: 5px 9px;
    font-size: 0.8rem;
    margin: 0 5px!important;
    text-align: center;
    align-items: baseline;
    justify-content: center;}
.cartButtons {display: flex;
    text-align: center;
    align-items: baseline;
    justify-content: center;}
.cartButtons .deleteBtn, .cartButtons .editBtn {position: unset!important; margin: 0 10px;}
.gridBody {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 0 0 10px 0;}
.cartProductCard {text-align: center;}
.showFilter {top:50px}
.sortBox .slds-context-bar__item {min-width: 180px!important;}

/* Mobile and tablet common elements */
.plpContainer {position: relative; min-height: 100vh;}
.banner-container {height: 170px!important;}
.showMenu, .mobileButton, .cartTable .sectionHead.showMobile, 
.orderContainer .sectionHead.showMobile {display: block}
.deleteBtn {position: unset;}
.collapsable-section h4 svg {display: block!important;}
.slds-combobox_container p {margin-bottom: 10px!important;}
.searchBox {max-width: 90%; margin: 10px auto 0; width: 100%;}
.searchBox input {min-height: 35px; max-width: none!important;}
.store-search-container {margin: 10px 0;}
c-retail-site-logo-cmp {width: 151px!important;
    margin: 0 auto 7px!important; display: block;}
.hideMobile, .slds-docked-composer__header .slds-media__body {display: none;}
  .commerce_cart-badge_badge.cart-container {position: absolute!important; top:10!important; right:5px!important;}
  .outerBox {max-height: 110px;}
  .searchBox {position: static; margin: -5px auto!important;}
  footer .mobileNone {display: none!important;}
 .preloginMainWrapper  .contentBox {top: 20%;
    left: 5%;
    max-width: 90%;
}
.infoBox .siteBtn {position: unset!important; margin-bottom: 10px; display: inline-block;}

.community_layout-section_section-host.comm-section-container {padding: 0;}
.summaryBox .slds-card .slds-card__header header {height: auto!important;}
.retail-cart-items-container .slds-grid {padding: 5px 0;}
.mobileNone {display: none;}
.retail-cart-items-container .cart-product-image-container, 
.retail-cart-items-container .cart-product-image-container .cart-product-image {width: 70px!important; height: 70px!important;} 
.preloginWrapper .bannerBox {overflow: hidden;}
.preloginWrapper .bannerBox img {min-width: 360px;}
.preloginWrapper * {max-width: 100%;}
.preloginWrapper .formPanel {padding: 0;}

/* PLP Page */

.sizeCont p.slds-truncate:hover::after {content: attr(displayName)}
.colorBox.slds-is-relative {min-height: 42px;}
.product-image {min-height: 15px!important;}
.product-image img {min-height: auto!important;}
.banner-container, .banner-container img {min-width:auto!important;}
.banner-container .school-name {font-size: 1rem!important; min-width:auto!important ;} 
.b2c-plp-card .sizeCont {min-height: 100px;}
.prdtSubHeadFromPlp span {font-size: 0.7rem!important;}
.more-options-link-container {height: 35px!important;}
.sizeCont .slds-col.slds-size_1-of-5 {min-width: 40px;}
.b2cButtonSet .slds-col {display: flex; justify-content: center; align-items: center;}
.retail-width {min-height: 70px!important;}
}

  /* Cart Page  - Mobile*/
  .cartTable .showMobile {display: block;}
  /* ================= MEDIA QUERY CODE ===============Ends==== */
/* cart and order module common code */
/* Totals section */
.totals label {
    float: left;
    clear: both;
    width: 79%;
    text-align: right;
}
.totals .totals-item {
    float: right;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
}
.totals .totals-value {
        float: right;
        width: 21%;
        text-align: right;
}
.totals .totals-item-total {
      font-family: -bold;
}
/* cart and order module common code ends */
.sizeCont .slds-box {border-radius: 0;}
/* Flows OOTB css override */
.flow-main-container span p {font-size: 1.2rem; color:var(--primary-color);}
/* order page section */
.orderContainer .slds-large-size_4-of-12.slds-text-align_right .siteBtn {align-items: baseline;}
.orderContainer .flow-main-container .section.slds-grid .column.slds-col {padding: 0;}
.flow-main-container .flowruntimeBody {padding: 0!important; margin:0!important;}
.flow-main-container .slds-accordion__section {padding: 0; margin: 10px 0;}
.flow-main-container .slds-is-open>.slds-accordion__summary {margin: 0 0 2px 0!important;}
.flow-main-container .section.slds-grid {margin: 0;}
c-retail-theme-layout .table-row.open{
    background:#4c4d4f!important;}
/* order page section           Ends    */
.flow-main-container c-fileuploadcmp_fileuploadcmp {background: #f2f2f2;
    padding: 20px;
    margin: 0 0 0 15px!important;
    border: 1px dashed #ccc;}
.flow-main-container .field-element p strong,
.flow-main-container .slds-form-element, .flow-main-container .slds-rich-text-editor__output,
.slds-form-element__label  {font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; color: var(--primary-color)!important;}
.flow-main-container .field-element p, 
.flow-main-container .slds-select_container {font-size:0.9rem; color: #858585; font-weight: normal;}
.flow-main-container input {height: 35px;}
.flow-main-container input, .flow-main-container select, .flow-main-container .slds-textarea {border-radius: 0;
    line-height: 35px; background: #fff; border-color: #ccc; font-weight: normal;}
.flow-main-container ul {margin: 0; list-style: none;}
.flow-main-container ul li strong {font-size: 1.3rem;
    border-bottom: 1px solid #ccc;
    display: block;
    margin-bottom: 15px;
    padding-bottom: 5px;}
.flow-main-container {
    width: 100%;
    min-height: 120px;
    padding:5px;
    text-align: left;
}
.flow-main-container article.slds-card {min-height: auto;}
.flow-main-container textarea {font-size: 0.8rem;
    font-weight: normal;
    color: #858585;}

.flow-main-container .pageHeader {font-size: 1.2rem; color: var(--primary-color); border-bottom: 1px solid #ccc; padding-bottom: 7px; margin-bottom: 12px;}
.flow-main-container .newLogoWrapper .slds-card__header-title span { background: #f2f2f2;
    color: var(--primary-color);
    padding: 5px 15px;
    border-left: 5px solid var(--primary-color);
    _border-bottom: 1px solid #ccc;
    margin-bottom: 15px; width: 100%; font-size: 0.9rem;} 
.flow-main-container .newLogoWrapper .article.slds-card {min-height: auto;}
.flow-main-container .slds-text-color_success {color: green!important; padding:10px 0;}
.flow-main-container .slds-text-color_error {color: red!important; padding:10px 0;}


.ftSectionHead {color: var(--primary-color); font-size: 1rem; text-transform: uppercase; margin-bottom: 20px;}

/* UI Refinement */
.mobileSection {display: none;}
.headerWrap {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-bottom: 1px solid #ccc!important;}
main.mainContainer {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-bottom: 20px;}
.messageBox {text-align: center;}
.messageBox p {font-size: 0.9rem; text-align: center; margin:20px auto}
.messageBox button {background:#d4af37!important; color: var(--primary-color)!important;}

/* Profile Page */
.slotWrapper article.slds-card { min-height: auto!important;}
.slds-nav-vertical__item {padding: 0;}
.slds-nav-vertical__action {margin-bottom: 0!important; box-shadow: none!important;}
.tableGridHead {background: #f2f2f2; margin: 0;}
.tableGrid {margin: 0;}
.tableGridHead .slds-col, .tableGrid .slds-col {padding: 5px;}
.tableGrid:nth-child(even) {background: #eeeff2}
.tableGrid:nth-child(odd) {background: #FFF}
.profileContainer article.slds-card {min-height:auto;}
.profileContainer .passwordBox .slds-card__body, .profileContainer .passwordBox .slds-card__header {margin:0; padding: 0;}
.dashboardContainer .passwordBox .slds-card, 
.dashboardContainer .passwordBox .slds-card .slds-card__header,
.dashboardContainer .passwordBox .slds-card .slds-card__body { border: 0; padding: 0; margin: 0;}
.dashboardContainer .passwordBox .slds-card__header .slds-button {position: absolute; top:0; right:0; z-index: 9; text-decoration: underline;}
.dashboardContainer .passwordBox .slds-card__header .slds-button:hover {text-decoration: none;}
.dashboardContainer .passwordBox .slds-card .slds-card__body .slds-input {padding:0 5px;}

/* B2C css */
.logo-image {border:3px solid #fff}
.outerBox, .navWrapper nav, .navWrapper {background-color:#ec1b30!important;}
.detailSection .slds-input {max-width: 40px;
    font-size: 0.8rem!important;
    padding: 0 2px;
    text-align: center;}
    .color-picker {min-height: 50px;}
    .color-picker div p {height:15px; width:25px;}
/* PLP page */ 
c-retail-theme-layout .drawerBtn button {background:#4c4d4f}
.drawerBtn button {background:#4c4d4f; padding: 5px; border-radius: 4px 0 0 4px; color: #fff!important;}
.filter-container {background: none!important;}
.b2c-plp-card .sizeCont {min-height:55px; margin: 0;}
.b2cButtonSet {align-items: baseline;} 
.b2cButtonSet .slds-col {padding: 0;}
.b2cButtonSet .slds-form-element_horizontal div {display: flex; align-items: baseline;} 
.b2cButtonSet .slds-form-element__label {min-width: 35px;}
.b2cButtonSet .slds-form-element_horizontal {margin: 0; padding:0}
.b2cButtonSet .slds-form-element__control {padding: 0;}
.prdtSubHeadFromPlp {font-size:0.9rem; margin: 0;}
.prdtSubHeadFromPlp span {font-size: 0.9rem;}
.sortBox {margin: 0!important;}
.sortBox label {min-width:70px; margin: 0; text-align: right;}
community_layout-section_section-host {padding: 0;}
.quantity-input div {display: flex; align-items: baseline;}
.quantity-input div input {min-width: 40px; border:1px solid #ccc; padding: 0 2px; text-align: center; min-height: 35px;}
svg use#anti-pill {display: none;}
/* B2C Banner */
.banner-name {max-width: 350px; top:20%!important; min-height: 160px!important;}
.slds-carousel__image>img {max-height: 270px;}
.slds-carousel__indicators {position: absolute; bottom: 0;}
.slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover {background: #ec1b30; border-color: #ec1b30;}

/* Prelogin box */
/* B2C Mobile CSS */

.preloginWrapper .comm-forgot-password .slds-form-element {display: flex;}
.preloginWrapper .comm-forgot-password .comm-forgot-password__username-input {width:100%!important; display: block;}

.preloginMainWrapper .logo-imagec {border: 0;}
.preloginMainWrapper header {background:#fff;}
.preloginMainWrapper header .slds-grid {align-items: center;}
.preloginMainWrapper header .slds-col {padding: 0 10px}
.preloginMainWrapper h1 {font-size: 1.5rem; font-weight: normal!important; margin:0!important; padding: 0!important; color:#4c4d4f;}
.preloginMainWrapper .slds-form-element {margin:0 0 10px 0}
.preloginMainWrapper button {justify-content: center;}
.bannerWrapper {position: relative;}
.preloginMainWrapper .contentBox {
    position: absolute;
    top: 30%;
    left: 24%;
    color: #fff;
    background: rgba(255, 255, 255, 0.8);
    max-width:50%;
    padding: 10px 20px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.preloginMainWrapper .contentBox p:first-child {font-size: 1.4rem; color:#415b72!important;}
.preloginMainWrapper .contentBox p span {font-size: 0.9rem; color:#415b72!important;}
.comm-social-login__button[community_login-socialLogin_socialLogin] {background: #415b72!important;}
.comm-login-form__container[community_login-loginForm_loginForm] {border: 0; box-shadow: none;}
button.slds-button.slds-button_destructive[disabled] {
    opacity: 0.5;
}
/* my dashboard page */
.slds-nav-vertical__action {background:#eeeff2;
    border-left: 5px solid #fff; padding-left: 10px;}
.slds-is-active .slds-nav-vertical__action {border-left: 5px solid #415b72;}
.information {padding: 10px;
    background: #f2f2f2;
    margin-bottom: 10px;}
    .infoBox .buttonSet .siteBtn {position:unset;}
    .infoBox .buttonSet .slds-col {margin: 0; padding: 0;}
    .infoBox .siteBtn {position: absolute; right:0 }
.infoBox .siteBtn.edit {top:0}
.infoBox .siteBtn.save {bottom:-10px}

/* web store home page */
.partyBranding {position: absolute; top:-35px; width: 100%;}
.partyBranding .slds-col {padding:4px;}
.partyBranding .color1 {background:#66ff00;}
.partyBranding .color2 {background:#1974d2;}
.partyBranding .color3 {background:#08e8de;}
.partyBranding .color4 {background:#fff000;}

/* Contact edit form address book */

.formContainer {max-width: 600px; margin: 0 auto;}
.formContainer label {margin-bottom: 4px;}
.formContainer .slds-form-element.slds-form-element_stacked, .formContainer .slds-form-element__row {margin-bottom: 15px; padding: 0;}

/* my Order module */
.orderContainer .sectionHead {margin-bottom: 0;}
.addressBox {padding:10px; border:1px dashed #ccc; border-width: 0 1px 1px 1px; margin-bottom: 20px; min-height: 180px;}

/* Site Main Navigation ==================================== */

.menu button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: inherit;
}

.menu {
    position: relative;
}

.menu-bar, .hamburger-container {
    display: flex;
    align-items: center;
}

.menu-bar li:first-child .dropdown {
    flex-direction: initial;
}

.menu-bar li:first-child ul:nth-child(1) {
    border-right: #ccc;
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
border-bottom: #ccc;
}

.menu-bar .dropdown-link-title {
    font-weight: 600;
}

.menu-bar .nav-link {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.2px;
    padding: 0.3rem 0.8rem;
    color: #fff; line-height:30px; display: block; text-align: center; 
}

.menu-bar .nav-link:hover,
.dropdown-link:hover {
    color: #fff;
    background-color: none;
}

.dropdown {
    position: absolute;
    display: none;
    flex-direction: column;
    z-index: 100;
    min-width:200px;
    transition: 0.1s ease-in-out;
    border:1px solid #ccc;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.16);
}

.dropdown.active {
    transform: scale(1) translateX(8px);
    background:#fff;
    border-radius: 3px;
    display: block;
}

.dropdown ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.95rem;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem;
}

.dropdown-link {
    display: flex;
    gap: 0.5rem;
    padding:0.3rem;
    transition: 0.1s ease-in-out;
}

.dropdown-link p {
    font-size: 0.8rem;
    color: #ccc;
}

.hamburger {
    display: none;
    padding: 0.1rem;
    margin-left: 1rem;
    font-size: 1.9rem;
    width: 24px;
    margin-top: 5px;
    margin-left: 16px;
}

@media (max-width: 1100px) {
    .hamburger {
        display: none;
    }

    .menu {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        font-size: 1rem;
        z-index:100;
        background: #fff !important;
    }

    .menu-bar li:first-child ul:nth-child(1) {
        border-right: none;
        border-bottom: #ccc;
    }

    .dropdown {
        display: none;
        min-width: 100%;
        border: none !important;
        position: relative;
        box-shadow: none;
        transform: none;
    }

    .dropdown ul {
        width:100%;
        padding:0px;
        margin:0px;
    }

    .menu.show,
    .dropdown.active {
        display: block;
        transform:none;
    }

    .menu-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 1rem;
        padding: 1rem;
    }

    .menu-bar .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 1rem;
        margin: 0;
        padding:0.2rem;
    }

    .menu-bar > li:not(:last-child) {
        border-bottom: #ccc;
    }

    .dropdown-btn.is-open {
        background-color: #182859;
        color: #fff !important;
    }
}

.hamburger span {
    width:20px;
    height:3px;
    display: block;
    background-color: #fff;
    margin:3px 0;
    transition: 0.4s;
}

.hamburger.is-open .bar1 {
    transform: translate(0, 5px) rotate(-45deg);
}
  
.hamburger.is-open .bar2 {opacity: 0;}
  
.hamburger.is-open .bar3 {
    transform: translate(0, -7px) rotate(45deg);
}

.chevron::before {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.menu-bar .nav-link svg.slds-icon {fill:#fff!important; position: relative; right:-4px}
.menu-bar .nav-link:hover svg.slds-icon {fill: #fff!important;}

/* New Navigation End ==============================================================*/

/* Prelogin Menu changes */
.navWrapper .menu-bar .nav-link {color: #fff!important; border:0!important}
.navWrapper .menu-bar .nav-link:hover {color: #fff!important;}
.navWrapper .menu-bar .nav-link svg.slds-icon {fill: #fff!important;}


/* Shipping cost section */

.shipping-cost-section.waive-off-shipping-cost label {
	text-decoration: line-through;
}
.shipping-cost-section.waive-off-shipping-cost .totals-value {
	text-decoration: line-through;
}

/* retail store search panel */
.store-search-container {margin: 10px -15px;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: center;background:#eeeff2; padding: 10px;}

    /* Cart page sticky header */
c-retail-cart-container .pageHeaderBox  {position: -webkit-sticky;
    position: sticky;
    top:53px;
    z-index: 1;
    background: #fff;
    padding: 5px 15px 15px;
    margin: 0 -15px;}



    /* Static pages grid structure */
    .gridRepeat .inner { 
        width: 100%;
        max-width: 1200px;
        overflow-x:scroll;  
        margin-left:8em; 
        overflow-y:visible;
        padding-bottom:1px; margin-bottom: 20px;
    }
    .gridRepeat table thead tr th:first-child {border-top: 1px solid #e5e5e5;}
    .gridRepeat table tr th:first-child, .gridRepeat table tr td:first-child {
        position:absolute; 
        width:8em; 
        left:0;
        top:auto;
        border-bottom: 1px solid #e5e5e5;
    
    }

    /* Checkout page */
    .payment-amount-details dl, .payment-amount-details dt, .payment-amount-details dd, .payment-amount-details .slds-text-heading_small {font-size: 0.9rem; margin-bottom: 10px;}
    .payment-methods-list .slds-radio__label {font-weight: normal;}
    .retail-payments-container section.slds-modal .slds-modal__close {background: #fff;}

    /*CSS For Error Page Start*/
.error-page-container h1 {
    font-size: 1.25rem;
    color: #182859;
}

.error-page-container .sub-title {
    font-size: 1rem !important;
    color: #182859;
}

.error-page-container ul {
    margin-left: 24px;
    line-height: 27px;
    padding-top: 6px;
    margin-bottom: 13px;
    list-style-position: outside;
    list-style-type: disc;
}

.error-page-container ul.no-bullet {
    list-style: none;
}

.continue-shopping-button-container .slds-button{
    background: var(--button-color-bg)!important;
    border: 0;
    justify-content: center;
    text-align: center;
    text-align: center;
    min-width: 130px;
    color: var(--button-color-text)!important;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    line-height: 35px;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
}
/*CSS For Error Page End*/