/* input(320,23): run-time error CSS1038: Expected hex color, found '#CategoryHeader'
input(320,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found '>' */
:root {
    --DarkBlack: #101010;
    --Black: #444444;
    --LightGray: #CCC;
    --LightGrayHighlight: #999;
    --LightBlueHighlight: #24a5dc;
    --Blue: #F1F5F9; /*#0458A7;*/
    --CategoryHeaderText: #034C8E;
    --SecondMainColor: #FEF200;
    --BlueHighlight: #0f447b;
    --BlueClick: #0d3966;
    --LBlack: #8A8A8A;
    --LBlackHover: #717171;
    --LBlackClicked: #4c4c4c;
    --SuccessGreen: #02b61d;
    --SuccessBackground: rgb(2, 182, 29,3%);
    --FailRed: #ba0000;
    --MobileDrawerWidth: 65vw;
    --GlowLight: rgb(0,0,0,20%);
    --GlowDark: rgb(0,0,0,30%);
    --GlowDarker: rgb(0,0,0,50%);
    --Orange: #ef7a28;
    --Spring: linear-gradient( 90deg,#008E46 0.01%, #01AB55 100%);
    --Winter: linear-gradient(90deg,#0458A7 0.01%, #056AC9 100%);
    --Summer: linear-gradient(90deg,#CBCE00 0.01%, #E5E800 100%);
    --Autumn: linear-gradient(90deg,#8B4A00 0.01%, #CB6C00 99.99%, #CA6C00 100%);
    /*--BasketPopupHeight: 150px;*/
    --BasketPopupHeight: 100px;
    --TspDrk: #3b3b3b;
    --TspLight: #e1000f;
    --hnkDefault: #3b3b3b;
    --hnkRed: #e1000f;
    --warmgrey: #ded7d6;
}


/*.flat-list-wrapper > .flat-card-container > .flat-list-item-info-container > .flat-list-delete-button {
}*/

/*.TelCodeWrapper {
    width:100%;
    height:30px;
    display: block;
    margin: 2em auto;*/
/*border: 1px solid #000;*/
/*border:none;
    padding: 0;
    width: 8.5ch;
    background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/ 10ch no-repeat;
    background:border-box;
    font:5ch droid sans mono,consolas,monospace;
    
    letter-spacing:0.8rem;
}*/
#warningMessages {

    overflow: auto;
    max-height: 10rem;
}
#table {
    background-color: white;
    min-height: 400px;
}
body #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-button-group .banner-actions-container {
    display: flex;
    flex-direction: inherit;
    max-width: 100%;
    gap: 1.6rem;
}

.tabulator-cell {
    border: 1px solid #dcdcdc;
}

.tabulator-col, .tabulator-header {
    font-weight: bold;
    font-size: 14px;
    background-color: #f9f9f9;
}
.HeaderCategoryContainer{
    display:flex;
    width:100%
}
.PCardIconOneWrapper {
    position: absolute;
    z-index: 500;
    width: 75px;
}
.PCardIconTwoWrapper {
    position: absolute;
    z-index: 500;
    left:100px;
    width: 75px;
}
.PCardIconThreeWrapper {
    position: absolute;
    z-index: 500;
    top :80px;
    width:75px;
}

.PDetailIconOneWrapper {
    position: absolute;
    z-index: 500;
    width: 75px;
    top:0px;
}
.dx-gallery .dx-gallery-nav-button-next, .dx-gallery .dx-gallery-nav-button-prev {
    width: 5% !important;
}
.PDetailIconTwoWrapper {
    position: absolute;
    z-index: 500;
    left: 100px;
    top:0px;
    width: 75px;
}

.PDetailIconThreeWrapper {
    position: absolute;
    z-index: 500;
    top: 80px;
    width: 75px;
}
.ProductDetailStockWrapper {
    font-size: small;
    opacity: 0.7;
}
.top-logo-wrapper-container {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    flex-flow: column;
}
.ToolbarMainOption > a > svg {
    fill: var(--hnkRed);
}
.obname {
    color: white;
    font-size: 15px;
    font-weight: 500;
    
    color: white;
}
.app-side-nav-outer-toolbar {
    background-color: white;
}
.BranchTypeName {
    position: absolute;
    color: var(--hnkRed);
    display: inline-flex;
    font-size: smaller;
    width: 200px;
    right: -127px;
    bottom: 0px;
    z-index: 9;
}
.CompanyBranchDropdown {
    display: flex;
    justify-content: start;
    align-items: center;
    z-index:150;
    cursor:pointer;
}
.CompanyBranchPopupContent {
    position: fixed;
    display: block;
    width: 690px;
    height: auto;
    /*max-width: 80%;*/
    /*padding:40px;*/
    background-color: #fff;
    /*margin: 350px auto;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 255, 0.9);*/
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    /*border: 2px solid blue;*/
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
}
 
.phlabel {
    padding-left: 0px !important;
}
.dateboxsignupmargin {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.DynamicContainerPh {
    margin-left: 0px;
    margin-right: 0px;
}

#eu-cookie-bar {
    display: none;
    direction: ltr;
    color: #ffffff;
    min-height: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    padding: 3px 20px 2px;
    background-color: #2e363f;
    text-align: center;
    font-size: 12px;
}
#euCookieAcceptWP {
    margin: 0 10px;
    line-height: 20px;
    background: #45AE52;
    border: none;
    color: #ffffff;
    padding: 2px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.gridViewButton {
    display: none !important;
}
.flatViewButton {
    display: none !important;
}
.rootadditional {
    margin:auto;
    text-align: center;
}
.BasketViableCampaignscontainer .BasketCampaignContainer {
    display: none;
}
    .BasketViableCampaignscontainer .BasketCampaignContainer:first-child {
        display: block;
    }
.FlatCardManageWrapperCampaign[item-is-in-cart=true] > .CardAddToCartButtonCampaign {
    display: none;
}
.FlatCardManageWrapperCampaign[item-is-in-cart=false] > .CardItemQuantityWrapperCampaign {
    display: none;
}
.CardAddToCartButtonCampaign {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    cursor: pointer;
    border-radius: 4px;
    background: #085fae;
    color: white;
}
    .CardAddToCartButtonCampaign > p {
        margin: 5px;
        color: white;
        white-space: nowrap;
        font-size: 13px;
        color: #fff;
    }
.campaignheaderimagecontainer > img
{
    min-width:100%;
}
.BasketCampaignContainer {
    display: flex;
    flex-direction: column;
}
.CampaignSelectedCount {
    color: red !important;
    font-size:18px;
}
.BasketCampaignHeaderContainer {
    cursor: pointer;
    margin: 5px;
    border-bottom: 2px var(--TspLight) solid;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
}

.popupCampaignHeaderContainer {
    width: 100%;
    display: flex;
}

.popupcampaignapplybutton {
    width: 180px;
    height: 60px;
    margin: 0px;
    justify-content: center;
    align-items: center;
    background-color: gray;
    color: whitesmoke;
    border-radius: 4px;
     text-align: center;
    vertical-align: middle;
    user-select: none;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
}
    .popupcampaignapplybutton > a {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        align-items: center;
    }
.popupcampaignapplybuttonactive {
    cursor: pointer;
    background-color: #CategoryHeader > span;
}
    .BasketViableCampaignscontainer {
        display: grid;
        height: 100%;
    }

.BasketCampaignItemsContainer {
    display: block;
    overflow-y: scroll;
    height: 100%;
}
.cdisablepointerevents {
    pointer-events: none;
}
 
#OrderSummaryPager {
    display: flex;
    bottom: 5px;
    width: 100%;
    justify-content: center;
}

@media screen and (max-width:900px) {
    .selectshippinginfo {
        left: -15px !important;
    }

        .selectshippinginfo ::after {
            left: 17% !important;
        }
}

.selectshippinginfo {
    width: 30vw;
    min-width: 280px;
    left: -100px;
    height: 100px;
    position: absolute;
    background: var(--Blue);
    border-radius: 10px;
    cursor: default;
    z-index: 999999;
    border : 2px solid;
    /*    display:flex;
*/
    display: none;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

    .selectshippinginfo ::after {
        content: "";
        position: absolute;
        border: 11px solid transparent;
        border-bottom: 14px solid white;
        top: -21px;
        left: 50%;
        transform: translateX(-50%);
    }
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}

    .close-button:hover {
        color: #000;
    }
.selectshippinginfoHeadertext {
    /*color: white;*/
    font-size: 16px;
    font-weight: 600;
}

.selectshippinginfotext {
    /*color: white;*/
    font-size: 14px;
    font-weight: 400;
    white-space: normal;
}

.CategoryBar.MainPadding {
    display: none;
}

.addressboxlistnotfound {
    margin: auto;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    padding: 15px;
    display: flex;
}

.shippingselectioncancel {
    text-align: center;
    font-weight: 900;
    font-size: 18px;
    width: 20%;
    cursor: pointer;
}

.shippingselectioncancelcontainer {
    width: 100%;
    justify-content: center;
    display: flex;
}

.shopselectedborder {
    border: 1px solid var(--TspLight) !important;
}

.Campaigndownarrowcontainer {
    float: right;
    text-align: end;
    padding-top: 14px;
}

.campaigndropdownarrow {
    width: 17px;
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.topheaderdropdownarrow {
    width: 17px;
    top: 8px;
    right: 25px;
    position: absolute;
}
.downarrow {
    width: 17px;
    top: 8px;
    right: 25px;
    position: absolute;
  
}
#ClosestDeliveryTime {
    white-space: nowrap;
    color: white;
    font-size: .75rem;
    font-stretch: normal;
    font-style: normal;
    margin-right: auto;
    margin-left: 0.5rem;
    text-align: left;
    overflow: hidden;
    position: relative;
}

.ClosestDeliveryTimeInfo {
    color: white;
    margin-right: auto;
    margin-left: 0.5rem;
    text-align: left;
    overflow: hidden;
    position: relative;
    line-height: 1rem;
    max-height: 2rem;
    padding-right: 1.5em;
    font-size: .75rem;
    font-stretch: normal;
    font-style: normal;
}

#modalshippininfodaddress {
    font-weight: 900;
}

.ShippingMessageHeader {
    height: auto;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    margin: 25px;
}

.ModalShippingMessage {
    font-size: 14px;
    height: auto;
    text-align: center;
    margin: 15px;
}

.ModalRemovedItemsMessage {
    font-size: 14px;
    height: auto;
    text-align: center;
    font-weight: 900;
    margin: 15px;
}

.rimodalheadericoncontiner {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
}

.removeditempopupdangericon {
}

.removeditemproductname {
    margin: auto;
    width: 60%;
    left: 0;
    color: var(--TspLight);
    font-weight: 900;
}

.removedproductimage {
    width: 80px;
}

.ModalShippingMessagesub {
    font-size: 16px;
    height: auto;
    text-align: center;
    color: #2e62ee;
    margin: 15px
}

#MainRemovedItemsPopupcontainer {
    display: flex;
    flex-flow: column;
    max-height: 43vh;
    overflow-y: auto;
}

.removedProductrow {
    display: flex;
    width: 100%
}

.MainShippingtimesModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999999 !important; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.RemovedItemsModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999999 !important; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.shippingtimerow {
    display: flex;
    gap: 25px;
    border-radius: 5px;
    border: 1px gray solid;
    align-items: center;
    height: auto;
    margin-bottom: 5px;
}

.shippingtimeseccol {
    display: flex;
    column-gap: 12px;
    flex-wrap: wrap;
    padding: 7px;
}

.shippingtimefirstcol {
    margin: 10px;
    width: 10%;
}

.cseperator {
    width: 1px;
    background-color: gray;
    color: gray;
    height: 100%;
}
/* Modal Content */

@media screen and (max-width:900px) {
    .MainShippingtimesmodal-content {
        width: 100% !important;
    }

    .MainShippingtimesmodal-content {
        width: 100% !important;
        height: 100%
    }

    .MainShippingtimesModal {
        padding-top: 0px !important;
    }

    .RemovedItemsModal {
        padding-top: 0px !important;
    }

    .topheaderdropdownarrow {
        display: none;
    }
}

.MainShippingtimesmodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.RemovedItemsmodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 35%;
}

.RemovedProductPopupContinueText {
    text-align: center;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    padding-top: 30px;
}

.removedproductRemovedAllText {
    font-size: 13px;
    margin: auto;
}

    .removedproductRemovedAllText > span {
        color: white;
        background-color: gray;
        padding: 3px;
        border-radius: 5px;
    }
.updatedproductRemovedAllText {
    font-size: 13px;
    margin: auto;
}

    .updatedproductRemovedAllText > span {
        color: white;
        background-color: green;
        padding: 3px;
        border-radius: 5px;
    }
.shippingtimeseccolitem {
    border-right: 1px gray solid;
    border-block-end: 1px gray solid;
    border-radius: 5px;
    padding: 5px;
}
/* The Close Button */
.MainShippingtimesclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .MainShippingtimesclose:hover,
    .MainShippingtimesclose:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.RemovedItemsclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .RemovedItemsclose:hover,
    .RemovedItemsclose:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.ConfirmButtonsWrapper > div {
    margin-inline: 0px;
}

.fromshopaddresschangepopupinfo {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.DeliveryTakeFromShopcontainer > form {
    width: 100%;
    border-top: 0px;
    padding-top: 0px;
}

.DeliveryTakeFromShopheadercontainer {
    display: flex;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
    width: 40%;
}

.DeliveryTakeFromShopcontainer {
    width: 60%;
}

#testpcont > .dx-overlay-wrapper > .dx-overlay-content > .dx-popup-content {
    height: 200px !important;
}

#ProvinceSelectBoxDContainer > .dx-overlay-wrapper > .dx-overlay-content > .dx-popup-content {
    height: 200px !important;
}

#CountySelectBoxDContainer > .dx-overlay-wrapper > .dx-overlay-content > .dx-popup-content {
    height: 200px !important;
}

#NeighborhoodSelectBoxDContainer > .dx-overlay-wrapper > .dx-overlay-content > .dx-popup-content {
    height: 200px !important;
}

.LocationSelectBoxContainer > form {
    width: 100%;
    border-top: 0px;
    padding-top: 0px;
}


#DeliveryTakeFromShop {
    border-radius: 8px;
    box-shadow: 0 0 9px 0 rgb(0 0 0 / 8%);
    border: 1px solid rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    padding: 0 1.125rem;
    margin-bottom: 1rem;
    min-height: 4.5rem;
}

.address-option-edit-popup {
    display: flex;
    height: 3.15rem;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    column-gap: 5px;
}

    .address-option-edit-popup > .editaddress-svgpen {
        height: 12px;
    }

    .address-option-edit-popup > .editaddress-svgtrash {
        width: 10.5px;
        height: 12px;
    }

.address-info-detail {
    overflow-wrap: break-word;
    overflow: auto;
    height: 6rem;
}

.address-options-popup {
    display: flex;
    width: 100%;
    column-gap: 10px;
}

.address-info-title {
    overflow-wrap: break-word;
    overflow: auto;
    height: 2.6rem;
    line-height: 1.4;
    color: #292a2c;
    font-weight: 600;
    font-stretch: normal;
}

.svgtowhite {
    filter: invert(1);
}

.address-box-popup {
    border-radius: 8px;
    border: 1px solid var(--TspDrk);
    padding: 2.25rem 1rem 0.75rem 0.75rem;
    width: 8.5rem;
    min-width: 8.5rem;
    height: 100%;
    position: relative;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.address-selectedicon {
    background-color: var(--TspDrk);
    border-radius: 0 4px;
    top: 0;
    position: absolute;
    right: 0;
    font-size: .75rem;
    padding: 0 0.125rem;
}

.address-notselectedicon {
    border-radius: 0 4px;
    top: 0;
    position: absolute;
    right: 0;
    font-size: .75rem;
    padding: 0 0.125rem;
}

.address-box-list-wrapper {
    display: none;
    width: 100%;
    /*display: flex;*/
    overflow-y: auto;
    column-gap: 15px;
}

#SelectedDeliveryOption {
    color: white;
    font-size: 12px;
}

#SelectedDeliveryOptionextra {
    color: white;
    font-size: 12px;
}

.delivery-address-card-icon {
    margin: 5px;
    height: 20px;
    width: 20px;
}

.delivery-shop-card-icon {
    margin: 5px;
    height: 30px;
    width: 30px;
}

.delivery-address-card-new-address {
    display: none;
    text-align: center;
    align-items: center;
    cursor: pointer;
    color: var(--TspDrk);
}

#DeliveryFromShoptoAddressContainer {
    width: 100%
}

#DeliveryFromShoptoAddressContainer-master {
    border-radius: 8px;
    box-shadow: 0 0 9px 0 rgb(0 0 0 / 8%);
    border: 1px solid rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    padding: 0 1.125rem;
    margin-bottom: 1rem;
    min-height: 4.5rem;
}

#DeliverycargoAddressContainer {
    width: 100%;
}

#DeliveryCargoAddressContainer-master {
    border-radius: 8px;
    box-shadow: 0 0 9px 0 rgb(0 0 0 / 8%);
    border: 1px solid rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    padding: 0 1.125rem;
    margin-bottom: 1rem;
    min-height: 4.5rem;
}

.FromShoptoAddressPopupHeader {
    display: flex;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.fromshoptitle {
    margin-right: auto;
    text-align: center;
    font-weight: 600;
    font-stretch: normal;
    font-size: 18px;
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: #fff;
    background-color: var(--TspDrk) !important;
    border: none;
    font: 16px/16px DXIcons;
    font-size: 16px !important;
    text-align: center;
}

.PassrenewAlertMessage {
    color: red;
    font-weight: bold;
    font-size: large;
}

#footerTitle {
    cursor: pointer;
}

.RenewPassresultInfo {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.footerSelect {
    width: 100% !important;
    padding: 10px 10px 10px 20px;
    /*margin: 0 0 10px 10px;*/
    border: 0;
    background: rgba(3,76,142,.12);
    border-bottom: 2px solid #fff;
    color: #034C8E;
    /*border-radius:6px;*/
    height: 55px;
    font-weight: 600;
}

.Safari3 .footerSelect {
    width: 100% !important;
    padding: 10px 10px 10px 20px;
    /*margin: 0 0 10px 10px;*/
    border: 0;
    background: yellow;
    border-bottom: 2px solid #fff;
    color: #034C8E;
    /*border-radius:6px;*/
    height: 55px;
    font-weight: 600;
}

.mobileFooterItem {
    display: none;
}

.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.bannerwebwr {
    display: block;
}

.bannermobilewr {
    display: none;
}

.footerWrapper {
    position: relative;
    display: inline-block;
}

.footer-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .footer-dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .footer-dropdown-content a:hover {
            background-color: #ddd;
        }

.footerWrapper:hover .footer-dropdown-content {
    display: block;
}

.footerWrapper:hover .dropbtn {
    background-color: #3e8e41;
}

/*----------------*/

.HeaderIconText {
    color: var(--hnkRed);
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
}

.SigninorRegisterText {
    color: white !important;
}

.closepopupContainer {
    text-align: end;
    margin: 12px 6px 0 0;
}

@font-face {
    font-family: sans-serif;
    /*  font-family: "NunitoSans-Regular";
    src: url("/css/fonts/NunitoSans-Regular.ttf?v=Hb_pKzLMz-VCUkfWp_XNXQnKhHc") format("truetype");*/
}

html * {
    /* font-family: 'NunitoSans-Regular';*/
    font-family: sans-serif;
}


.SelectAccountPopupClose {
    font-weight: bold;
    color: var(--TspDrk) !important;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 5px 10px;
    border-radius: 50%;
}

    .SelectAccountPopupClose:hover {
        background: #f2f2f2;
    }

.skipbuttoncontainer {
    text-align: end;
    margin-top: 10px;
}

.skipbutton {
    width: 100%;
    /*background: #034C8E;*/
    color: var(--TspDrk) !important;
    margin-top: 17px;
    font-weight: bold;
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
}

.InfoPopupSignup {
    /*margin-left: 20px;*/
}

html[is-mobile=true] {
    overflow-x: hidden;
    position: relative !important;
}

    html[is-mobile=true] .TopSticky {
        position: fixed;
    }

/*html[is-mobile=true] main {*/
/*margin-top: 169.26px;*/
/*margin-top: 125.26px;
    }*/

.MobileHeader {
    display: none;
    top: 0;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 60px;
}

.MobileLogo {
    display: flex;
    justify-content: center;
    width: 100%;
}

.MobileCompanyLogo {
    /*float: left;*/
    width: 30%;
    /*margin: 18px 0 10px 17px;*/
}

#MobileSelectAccountBtn {
    margin-left: 15px;
}

.MobileCategoryWrapper {
    display: none;
    height: 30px;
}

.MobileCategoryBarDropdown {
    display: flex;
}

.mobile-search-bar-wrapper {
    float: left;
    width: 100%;
    position: relative;
}

.mobileSearchForm {
    background-color: transparent;
    margin: auto;
    padding: 0;
    width: 80%;
    border-top: 0;
    margin: 4px auto;
}

#MobileSearchText {
    background: #fff;
}

.MobileSearchWrapper {
    display: none;
    width: 100%;
    height: 40px;
    height: 40px;
    background: #f2f2f2;
}

#MobileCargoDropdownTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 2px solid #d5d5d5;
    float: left;
    width: 50%;
    user-select: none;
}

#MobileAccount {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    height: 30px;
    width: 50%;
}

.MobileDropdownTitle {
    margin-left: 15px;
    color: #034C8E;
}

#FeedbackMessageMain {
    text-align: center;
}

#FeedbackButton {
    width: 35%;
}

#FeedbackWrapper > svg {
    width: 3rem;
    margin-bottom: 2rem;
}

#FeedbackPopupMain > .dx-overlay-wrapper {
    z-index: 99999999 !important;
}

#FeedbackWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    padding-bottom: 0;
}

.BasketStateWrap > svg {
    fill: var(--TspDrk);
}

.LogoLight {
    /*filter: brightness(0) invert(1);*/
}

#SelectedStoreWrapper > svg {
    fill: var(--TspDrk);
}

#ShipmentTimeHeader > svg {
    fill: var(--TspDrk);
}

#ShipmentDateHeader > svg {
    fill: var(--TspDrk);
}

.SvgLoadingMain {

}
.SvgLoadingMainl0 {
    height: 30vh;
}
.SvgLoadingMainl1 {
    background: url(/image/loading.svg?v=TkS-k1jCN9qJ-PPuLbVUIpGQoUU) no-repeat center;
    background-size: 275px;
    height: 140px;
}

@keyframes logoanim1 {
    0% {
        left: -100px;
        top: -100px;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 100px;
        top: 100px;
        opacity: 0;
    }
}

.SvgLoadingInner {
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: translate(-50%,-50%);
    height: 30%;
    z-index: 99999;
}

.SvgLoadingMain > path {
    stroke: var(--TspDrk);
}

body {
    background-color: #fff !important;
    overflow-x: hidden;
    height: auto;
}

a {
    /*color: var(--CategoryHeaderText) !important;*/
}

main {
    min-height: 70vh
}

img {
    max-width: 100%;
    height: auto;
}

.ShowCaseShowAll {
    display: -webkit-flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    width: auto;
    /*padding-right:15px;*/
}

.TopStickyLoginLayout {
    height: 8vh;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #ffffffa6;*/
    background: #fff;
    opacity: 0.85;
    /*opacity: 0.7;*/
    z-index: 999999999;
    display: none;
}

.SignupMessage {
    justify-content: flex-end !important;
    margin-right: 0 !important;
}

.SignupPopupBody {
    margin: 5px 70px !important;
}

#messageClose {
    margin: 20px 20px 0 0;
}

#idbody > .SvgLoading {
    z-index: 99999;
    fill: var(--TspLight);
}

.SvgLoading {
    display: flex;
    justify-content: center;
    text-align: center;
    fill: var(--TspLight);
}

.MainLayoutLoading {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: white;
    opacity: 0.6;
    display: none;
}

.InnerSvgWrapper {
    width: 100%;
    height: 100%;
}

.ShowCaseShowAll > a {
    font-weight: bold;
    color: var(--TspDrk);
    font-size: 13px;
}

#CustomerSelectionWrapper {
    z-index: 1;
    height: 150px;
}

#CustomerSelectionWrapperInner {
    overflow: auto;
    max-height: 150px;
    margin: 20px 50px;
}

#UserChangeButton {
    width: 80%;
    margin: auto;
    margin-top: 20px;
}

#CustomerDropdown {
}

#CustomerDropDownList {
    border: 0px;
    background: transparent;
    font-size: 16px;
    color: white;
    font-weight: 600;
    margin-top: 5px;
}

    #CustomerDropDownList > option {
        margin: 40px;
        box-shadow: 0 4px 5px rgb(0 0 0 / 25%);
        border-radius: 5px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        color: var(--CategoryArrowColor);
        background: var(--Blue);
        font-size: 16px;
        font-weight: 600;
    }

#CustomerDropdown > .DropdownTitle {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.CustomHeaderBackground1 {
    position: absolute;
/*    background: var(--TspLight);
*/    left: 0;
    height: 100%;
    width: 25%;
}

.CustomHeaderBackground2 {
    width: 50%;
    height: 100%;
    /*   border-left: 20px solid var(--TspLight);
    border-right: 20px solid var(--TspLight);*/
    /*background-image: url('../../image/headerBackground.png?v=aFI6mFVppcQ-TKn4q4ANZw0vN3g');*/
    /*border-top: 20% solid var(--TspDrk);*/
    /*background: var(--TspLight);*/ /* --#1759a7;*/
    /*border-top: 102px solid var(--TspDrk);
    border-left: 2.85vw solid var(--TspLight);
    border-right: 2.85vw solid var(--TspLight);*/
    right: 25%;
    background-size: 100% 100%;
    object-fit: cover;
    position: absolute;
}

.CustomHeaderBackground3 {
    position: absolute;
/*    background: var(--TspLight);
*/    width: 25%;
    right: 0;
    height: 100%;
}
/*.right-border {
    float: right;
    height: 127px;
    border-color: #1759a7 #0f6dc7 #0f6dc7 #1759a7;
    border-width: 63px;
    border-style: solid;
}

.left-border {
    float: left;
    height: 127px;
    border-color: #1759a7 #1759a7 #0f6dc7 #0f6dc7;
    border-width: 63px;
    border-style: solid;
}*/
.CustombannerClass {
    /*width: 100vw;
    height: fit-content;
    margin-left: -11.5vw;*/ /* Disapble parents padding*/
    /*margin-right: -11vw;*/ /* Disapble parents padding*/
    margin-right: -6vw;
    margin-left: -6vw;
}

    .CustombannerClass > div {
        /*width: 100vw;*/
        width: 100%;
        height: fit-content;
    }

.MobileBannerWrapper {
    display: none;
}

.dx-gallery-item-image {
    width: 100%;
    cursor: pointer;
    margin: 0px !important;
}

.LoginForm {
    display: flex;
    flex-direction: column;
    /*gap:0.2rem;*/
    margin: 20px;
}

#DynamicTelTextbox {
    margin-bottom: 20px;
}

    #DynamicTelTextbox .dx-texteditor-input {
        font-size: 18px;
    }

.TelCodeForm {
    display: flex;
    margin: 20px;
    justify-content: center;
    align-items: center;
}


.TelCodeTime {
    display: inline-flex;
    margin: 0;
    color: #737373;
    padding: .5rem;
    /*background: var(--TspDrk);*/
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-weight: bold;
    transition: background 250ms;
}

#MainTelCodeWrapper .LGButton {
    margin: 11px;
}

.TelCodeTime[times-up=true] {
    color: var(--FailRed);
}

.TelCodeInfo {
    margin: 0 15px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
}

#UserTelNumber {
    font-weight: 600;
}

.TelCodeTimeTitle {
    font-size: 15px;
    margin-left: 4px;
}

#TelCodeTimeText {
    font-size: 15px;
    margin-left: 4px;
}

.TelCodeForm .RelativeInputWrapper {
    border-bottom: 1px solid #d5d5d5;
    width: 100%
}

    .TelCodeForm .RelativeInputWrapper > .BorderInput {
        margin: 0 !important;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

.RegisterForm .BorderInput {
    padding-left: 0 !important;
    padding: 0 !important;
}

.RegisterForm .ComboBoxOne .ComboBox {
    box-shadow: none;
    background: transparent;
    padding-left: 0;
    border-bottom: 1px solid #d5d5d5;
    border-radius: 0;
}

.RegisterForm .ComboBoxTitle {
    color: rgb(0,0,0,0.63)
}

.RegisterForm .ComboBox .ArrowContainer {
    justify-content: start;
    background: transparent;
    padding: 0;
}

.ArrowIcon {
    width: 14px;
    height: 14px;
}

#RegisterBranchComboBox {
    padding: 0.5rem 0 !important;
}

#MainLoginWrapper[email-login=true] #DynamicTelTextbox {
    display: none;
}

#MainLoginWrapper[email-login=false] #DynamicEmailTextbox,
#MainLoginWrapper[email-login=false] #DynamicPasswordTextbox {
    display: none;
}

/*#DynamicTelTextbox > .dx-text-editor.dx-state-active::before, .dx-text-editor .dx-state-focused::before{
    border:none;
    border-bottom:#000;
}*/

#LoginPopupClose {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    float: right;
    font-size: 20px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    color: #034C8E;
}

    #LoginPopupClose:hover {
        background: #f2f2f2;
        border-radius: 50%;
    }

.toast {
    z-index: 99;
    /*transition: all 250ms;*/
}

    .toast svg {
        width: 24px;
        margin-left: auto;
        z-index: 9999999999999;
        display: none;
    }

    .toast[show=true] {
        opacity: 1 !important;
        animation: 1s;
        /*animation-delay:150ms;*/
        /*background: #038C0C;*/
        background: #13b44c;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        position: relative;
        width: 275px;
        height: 65px;
        padding: 5px;
    }

.toast-body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: .4rem .4rem !important;
}

/*.toast-message {
    width: 100%;
    text-align: center;
    margin-right: .5rem;*/
    /*max-width: 300px;*/
    /*text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 17px;
    color: #fff;*/
    /*padding:30px;*/
    /*background:#000;*/
/*}*/
.toast-message {
    width: 100%;
    text-align: center;
    margin-right: .5rem;
    font-size: 17px;
    color: #fff;
    word-wrap: break-word; /* Uzun kelimeleri böler */
    overflow-wrap: break-word; /* Alternatif olarak kullanılabilir */
    white-space: normal; /* Metnin alt satıra geçmesini sağlar */
}
.GlowDarker {
    animation: GlowDarker 1.5s infinite;
}

.CardPrice {
    /*font-size:unset !important;*/
}

.setPasswordBtn {
    width: 100%;
    background: #034C8E !important;
    color: #fff !important;
    margin-top: 17px;
}

@keyframes Glow {
    0% {
        background: var(--GlowLight)
    }

    25% {
        background: var(--GlowDark)
    }

    50% {
        background: var(--GlowLight)
    }

    75% {
        background: var(--GlowDark)
    }

    100% {
        background: var(--GlowLight)
    }
}

@keyframes GlowGreen {
    0% {
        background: green;
    }


    100% {
        background: green;
    }
}

@keyframes GlowDarker {
    0% {
        background: var(--GlowLight)
    }

    25% {
        background: var(--GlowDarker)
    }

    50% {
        background: var(--GlowLight)
    }

    75% {
        background: var(--GlowDarker)
    }

    100% {
        background: var(--GlowLight)
    }
}

#ToastWrapper {
    /*display:flex;*/
    justify-content: center;
    position: fixed;
    /*top: 40px;*/
    /*right: 20px;*/
    z-index: 999 !important;
    top: 130px;
    /*left:50%;*/
    right: 0;
    z-index:999999999!important;
    /*transform:translate(-50%,-50%);*/
}

.NavWrapper {
    display: flex;
    color: var(--TspLight);
    justify-content: space-between;
    margin: 20px;
}

    .NavWrapper > a {
        color: inherit !important;
    }

#Card .OneSelectList {
    margin-bottom: 0;
}

#Card .EditSection {
    width: 80%;
}

#Card .CardItemQuantityWrapper {
    align-items: center;
    /*margin-top: .1rem;*/
}

.OneSelectList {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    /*background-color: var(--TspDrk);*/
}

    .OneSelectList li {
        display: block;
        transition: all 200ms;
        cursor: pointer;
        padding: .2rem 0;
        /*width: 50%;*/
        text-align: center;
        border-radius: 4px;
        font-size: 16px;
        /*color: white;*/
        color: #000;
    }

        .OneSelectList li:hover {
            background: rgb(0,0,0,15%)
        }

    .OneSelectList .Selected {
        display: unset !important;
    }

.SalesUnitListWrapper {
    display: flex;
    width: 100%;
    margin-top: 2px !important;
    margin-top: auto;
    justify-content: center;
    align-items: center;
    /*box-shadow: 0 0 0 1px rgb(0,0,0,25%);*/
    border-radius: 6px;
    overflow: hidden;
}

    .SalesUnitListWrapper .OneSelecteList {
        padding: .5rem;
    }



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

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


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

.ToolbarMainOption .SVGBasket {
    width: 28px;
    height: 28px;
    fill: white;
    pointer-events: none;
}

.BasketPopupDeleteAllBtn .SVGDelete {
    width: 23px;
}

.BasketPopupDeleteAllBtn > a {
    color: #737373 !important;
    font-size: 16px;
}
/*search*/
#SearchText {
    background-color: white;
    height: 41px;
    border: 2px var(--hnkRed);
    border-style:solid;
    border-radius :8px;
}

    #SearchText .dx-texteditor-buttons-container {
        background: var(--hnkRed);
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    #SearchText .dx-button-text {
        line-height: 40px;
        color: #fff;
    }

    #SearchText .dx-button-content {
        padding: 0;
    }

    #SearchText .dx-button.dx-button-mode-text {
        margin: 0;
        height: 100%;
    }
    /*#SearchText .dx-texteditor-input{
    padding:7px 0 6px;
}*/
    #SearchText .dx-texteditor-input-container {
        margin-left: 32px;
    }

.SearchIconWrapper {
    top: 0;
    width: 38px;
    height: 60px;
    position: absolute;
    z-index: 9;
}

.SearchIcon {
    font-size: 19px;
    top: 27px;
    left: 14px;
    z-index: 99;
    color: #9FADBF;
    position: absolute;
}

.SearchInput {
    display: flex;
    align-items: center;
    /*margin: 20px;*/
    padding: 2px 6px;
    padding-left: 10px !important;
    /*box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);*/
    /*border-bottom:1px solid #d5d5d5;*/
    border-radius: 3px;
    transition: all .2s;
    border-bottom: 1px solid #d5d5d5;
}
/*search*/
.searchForm {
    padding-top: 0;
    padding-left: 0;
    border-radius: 3px;
    /*background: #1759a7;*/
    background-color: transparent;
    border-top: 0;
    width: 100%;
}

    .searchForm .BorderInput {
        border-bottom: none;
    }

#CampaignsWrapper {
    color: white !important;
    margin-left: auto;
    /*border-left: solid 1px rgb(0,0,0,25%);*/
}

    #CampaignsWrapper:hover {
        color: white;
    }

.AddAddressHref {
    color: var(--TspDrk);
}

.ArrowContainer > .Arrow {
    /*transform: rotate( 90deg );*/
    transform: translate(-50%, -50%) rotate( 90deg ) !important;
    transition: all 200ms;
    position: absolute;
    left: 50%;
    top: 50%;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.MainPadding {
    /*padding: 0 10rem;*/
    /*padding: 0 11%;*/
    padding: 0 6%;
}

/*.Avoid

.MainPadding[right-side=true] {
    padding-left: calc(10rem + 12vw);
}*/


.dx-dropdowneditor-input-wrapper {
    width: 100% !important;
}

#SelectedCargoOptionsWrapper {
    /*  display: none;*/
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*min-width:210px;*/
    margin-left: 10px;
}

#SelectedCargoOption:hover {
    /*margin: 0 10px;*/
    text-decoration: underline;
}

#selectAccountBtn {
    color: #fff !important;
}

    #selectAccountBtn:hover {
        text-decoration: underline;
    }

#CargoSvg,
#TakeAwaySvg {
    fill: white;
}

.EmailPopupKvkk {
    margin-top: 20px;
}

.emailPopupCheckbox {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.LGButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    /*background-color: var(--CategoryHeaderText);*/
    background-color: var(--hnkRed);
    /*background: linear-gradient(to right, rgb(36, 198, 220), rgb(81, 74, 157));*/
    color: whitesmoke;
    height: 39px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 24%);
    /*margin:0;*/
    /*display:inline-block;
    width:270px;*/
}

.ContinueOrderButton {
    display: inline-block;
    width: 270px;
}

.LGButton:active {
    box-shadow: 0 4px 6px rgb(0 0 0 / 24%);
    -webkit-box-shadow: 0 4px 6px rgb(0 0 0 / 24%);
}

.LGButton > svg {
    display: none;
    height: 50%;
    width: 50%;
}

.ButtonLoadingIc {
    /*border: none;*/ /* Remove borders */
    color: white; /* White text */
    padding: 12px 24px; /* Some padding */
    font-size: 16px; /* Set a font-size */
    display: none;
}

.LGButton[loading="true"] span {
    display: none;
}

.LGButton[loading="true"] svg {
    display: unset;
}

.LGButton[loading="true"] .ButtonLoadingIc {
    display: block;
}
#PaymentTypeInBasket.Disabled {
    background-color: darkgray !important;
    cursor: default;
    pointer-events: none;
}
#PayAtDoorTypeComboBox.Disabled {
    background-color: darkgray !important;
    cursor: default;
    pointer-events: none;
}
.LGButton.Disabled {
    background-color: darkgray !important;
    cursor: default;
    pointer-events: none;
}

    .LGButton.Disabled * {
        pointer-events: none;
    }

.LGButton a {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: white !important;
}

#CategoryHeader {
    width: 150px;
    display: flex;
    justify-content: start;
    align-items: center;
    user-select: none;
    padding-left: 10px;
}

    #CategoryHeader > span {
        color: white;
        font-size: 15px;
        font-weight: 500;
        font-style: normal;
    }

.BorderInput {
    display: flex;
    align-items: center;
    margin: 20px;
    padding: 2px 6px;
    padding-left: 10px !important;
    /*box-shadow: 0 0 0 1px rgb(0 0 0 / 25%);*/
    /*border-bottom:1px solid #d5d5d5;*/
    /*border-radius: 3px;*/
    transition: all .2s;
    border-bottom: 1px solid #d5d5d5;
}



    .BorderInput:focus-within {
        /*box-shadow: 0 0 1px 1px var(--LightBlueHighlight);*/
        border: none;
        border-bottom: 2px solid var(--LightBlueHighlight) !important;
    }

    .BorderInput:before {
        border-bottom: none !important;
    }

    .BorderInput:after {
        border-bottom: none !important;
    }

.RelativeInputWrapper {
    position: relative;
    height: fit-content;
    height: -moz-fit-content;
}

.CompanyName {
    margin-top: 20px;
}
/*.AddressInputItem{
    margin-top:20px !important;
}
.ComboBoxItem{
    margin-top:20px !important;
}*/

.RelativeInputWrapper > .BorderInput {
    margin: 5px 0 !important;
}
.RelativeInputWrapper > .formbottommr {
    margin-bottom: 15px !important;
}
#DynamicEmailTextbox {
    margin: 11px 0 !important;
}

#DynamicPasswordTextbox {
    margin: 11px 0 !important;
}

#DynamicEmailTextbox .dx-texteditor-input {
    font-size: 18px;
}

#DynamicPasswordTextbox .dx-texteditor-input {
    font-size: 18px;
}

.DynamicPlaceholder {
    position: absolute;
    /*left: 5%;*/
    top: 50%;
    transform: translate(0, -50%);
    /*background: linear-gradient(-90deg,hsla(0,0%,100%,0),#fff);*/
    background: white;
    padding: 0 9px;
    transition: all 100ms;
    z-index: 1;
    color: gray;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    background: rgb(255,255,255,0%);
}

    .DynamicPlaceholder[at-top=true] {
        top: 6%;
        /*left: 1%;*/
        /*transform: translate(-15%, -210%) !important;*/
        color: var(--Black);
        font-size: 12px;
        background: transparent;
    }


/*.dx-texteditor-input:focus {
    color: var(--LightBlueHighlight) !important;
}*/
.LoginLogoWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: 40px;
}

    .LoginLogoWrapper > img {
        width: 50%;
    }

.LoginType {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    box-shadow: rgb(0 0 0 / 24%) 0px 1px 3px 0px;
    border-radius: 4px;
    width: fit-content;
    width: -moz-fit-content;
}

.LoginTypeOption {
    cursor: pointer;
    padding: 3px 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px 0px;
    color: #737373;
}

#LoginTelTitle {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.LoginTypeOption:hover {
    background-color: #ebebeb
}

    .LoginTypeOption:hover > svg {
        fill: red;
    }

.SelectedTypeOption {
    background-color: #f2f2f2 !important;
    color: #0459a9;
}
.PageHeaderCenter {
    width: 100%;
    display: flex;
    flex-flow: column;
}
.CompanyLogo {
    min-width: 125px;
    /*width: 35%;*/
    /*margin:auto;*/
    /*margin-bottom: 10px;*/
}

.top-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    /* flex: 1;*/
    height: 77.56px;
    cursor: pointer;
    grid-row: 1;
    grid-column: 1;
    padding-left: 20px;
}

.search-bar-wrapper {
    /* flex: 4;*/
    position: relative;
    /*grid-row: 1;*/
    /*grid-column: 2;*/
    height: 100%;
    /*margin-right: 3%;*/
    /*margin-left: 3%;*/
    margin: 0 auto;
    width: 60%;
    /*display: inline-flex;*/
    align-items: center;
    height: 72px;
    display: none;
}

.AutoCompleteWrapper {
    display: none;
    width: calc(100%);
    z-index: 999999999;
    position: absolute;
    top: 74%;
    left: 50%;
    transform: translateX(-50%);
}

.AutoComplete svg {
    height: 24px;
    width: 24px;
    fill: rgb(0 0 0 / 25%)
}

.AutoComplete {
    border: solid 1px rgb(0,0,0,25%);
    box-shadow: 0 4px 5px rgb(0 0 0 / 50%);
    max-height: 45vh;
    overflow-y: auto;
    padding: 1rem;
    border-radius: 4px;
    background: white;
}

    .AutoComplete::-webkit-scrollbar {
        width: 5px;
    }

    .AutoComplete::-webkit-scrollbar-track {
        border-radius: 4px;
        background: rgb(0,0,0,20%);
    }

    .AutoComplete::-webkit-scrollbar-thumb {
        background: rgb(0,0,0,25%);
        /*background: #105594c9;*/
        border-radius: 4px;
    }

.AutoCompleteSuggestionList {
    margin: 0;
    list-style: none;
}

.AutoCompleteSuggestionItem {
    border-radius: 4px;
    transition: all 200ms;
}

    .AutoCompleteSuggestionItem:hover {
        background: rgb(0,0,0,10%)
    }

    .AutoCompleteSuggestionItem.NoContent {
        background: transparent !important;
        user-select: none;
    }

    .AutoCompleteSuggestionItem a {
        display: block;
        height: 100%;
        width: 100%;
        text-decoration: none !important;
    }

.AutoCompleteSuggestionContent {
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    color: black !important;
}

    .AutoCompleteSuggestionContent:hover {
        text-decoration: none;
    }


    .AutoCompleteSuggestionContent > .ContentBox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
    }



.SearchContainer {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 50%;
}

.ToolbarMainOptionContainer {
    border-radius: 75px;
    /*width: 90%;*/
    background-color: transparent;
    grid-row: 1;
    grid-column: 3;
    display: none;
    flex-direction: row;
    align-items: center;
    /* flex:1;*/
    /*    margin-right: 20px;*/
    justify-content: flex-end;
    font-size: 16px;
}

.ToolbarMainOption {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 5px 10%;
    align-items: center;
    border-radius: 4px;
    /*margin: 6px;*/
    transition: all .2s;
}

.ShowcaseWrapper > .tabTopItem {
    overflow: hidden;
}

#RegisterHeaderText {
    color: var(--TspDrk);
}

#ToolbarSignUp > a {
    display: block;
}

#ToolbarSignUp svg {
    fill: var(--CategoryHeaderText);
}

#SelectedStoreSvg, #ShipmentDateSvg, #ShipmentTimeSvg, #HeaderDeliverylogoSvg, #HeaderCampaignLogoSvg {
    fill: var(--CategoryHeaderText);
}


.ToolbarMainOption:hover {
    background-color: var(--hnkred);
}

    .ToolbarMainOption:hover .DynamicColorPath {
        opacity: .5
    }

    .ToolbarMainOption:hover .DynamicColorFavorite {
        fill: red;
        opacity: .7
    }

.ToolbarMainOption svg {
    width: 28px;
    height: 28px;
    /*margin: 5px;*/
    overflow: visible;
    fill: #8d8d8d;
}

.ToolbarMainOption > span {
    text-align: center;
    white-space: nowrap;
}

#ToolbarProfile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color:white;   
}


    #ToolbarProfile:hover {
        overflow: visible;
        color: var(--hnkRed);
    }

        #ToolbarProfile:hover > .LoginNav {
            opacity: 1;
        }

#Account {
    display: none;
    margin-left: 60px
}

.ToolbarBasket {
    position: relative;
}

#TakeAwayExtras {
    display: none;
    flex-direction: column;
    gap: .8rem;
}

#CargoDropdown[option=takeAway] #TakeAwayExtras {
    display: flex;
}

#ToolbarBasketHover {
    pointer-events: none;
}

.BasketItemCount {
    position: absolute;
    top: 5%;
    right: 27%;
    border-radius: 50%;
    font-size: small;
    padding: .6rem;
    z-index: 11;
    background: red;
    color: white;
    transition: all 250ms;
    pointer-events: none;
}

.MobileBasketItemCount {
    width: auto;
    height: auto;
    position: absolute;
    top: 4%;
    border-radius: 50%;
    font-size: smaller;
    padding: .6rem;
    z-index: 11;
    background: red;
    color: white;
    transition: all 250ms;
    pointer-events: none;
    margin: 7px 0 0 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MobileBasketValue {
    position: absolute;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 11px;
    /*top: -74%;*/
    /*left: 26%;*/
}

.BasketItemCount[no-item=true] {
    /*opacity:0;*/
    transform: scale(0);
}

.MsgNotInStock {
    font-size: small;
    color: red;
}

.BasketItemCount > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: smaller;
    margin-top: 0px;
}

#ToolbarProfile > .LoginNav {
    opacity: 0;
    display: flex;
    width: 100%;
    min-width: 160px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 200ms;
    border-radius: 6px;
}

.ProfileNavOne {
    background: var(--Blue);
    box-shadow: 0 4px 5px 1px rgb(0 0 0 / 25%);
    border-radius: 6px;
    opacity: 0.95;
    width: 100%;
    overflow: hidden;
    margin: 1rem 0;
}

.ProfileNavTwo {
    background: white;
    box-shadow: 0 1px 1px 2px rgb(0 0 0 / 25%);
    border-radius: 6px;
    width: 100%;
    color: black;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*.ListItem > a {
    color: inherit !important;
    text-decoration:none !important;
}*/

.ProfileNavOne .LoginNav .ListItem {
    background-color: unset;
    font-size: medium;
}

.ProfileNavTwo .LoginNav .ListItem {
    background-color: unset;
    font-size: medium;
    color: inherit !important;
}

.ProfileNavTwo .ListItem:hover {
    /*background: rgb(0,0,0,25%) !important;*/
    background: #BDE4F2 !important;
}

.ProfileNavTwo .ListItem {
    background-color: transparent !important;
    color: black !important;
    transition: all 200ms;
    font-size: 15px !important;
}

.NavItem {
    padding: 0 !important;
}

    .NavItem a {
        display: block;
        padding: 3%;
        /*color:var(--TspDrk);*/
        color: #000;
    }

.tabTopItem {
    overflow: auto;
}

.VerticalSeperator {
    border: none;
    border-left: 1px solid var(--LightGray);
    height: 4vh;
}

.BannerCustom {
    height: inherit !important;
    width: -webkit-fill-available !important;
}

.BannerGallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 180px;
    display: inline;
}

    .BannerGallery:hover {
        border: 1px solid #777;
    }

    .BannerGallery img {
        width: 100%;
        height: auto;
    }

.MyHeader {
    /*padding-left: 7%;*/
    /*background: white;*/
    box-shadow: unset;
    padding: 0 7%;
    height: 110px;
}

.Footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: red;
}

.footer-basic {
    padding: 40px 0;
    background-color: #ffffff;
    color: #4b4c4d;
    box-shadow: 0 0 5px 0 rgb(0, 0,0,25%);
    margin-top: 30px;
}

    .footer-basic ul {
        padding: 0;
        list-style: none;
        text-align: center;
        font-size: 18px;
        line-height: 1.6;
        /*margin-bottom: 0;*/
    }


    .footer-basic li {
        padding: 1% 3%;
    }

    .footer-basic ul a {
        color: inherit;
        text-decoration: none;
        opacity: 0.8;
        line-height: 1.5em;
        min-width: 9rem;
        /*max-width: 15rem;*/
        text-align: start;
        cursor: pointer;
        font-size: initial;
    }

.MobileFooterContent {
    display: none;
}

.PListNotFound {
    margin-top: 20%;
    transform: translateY(-50%);
    text-align: center;
}

    .PListNotFound a {
        color: var(--TspDrk);
    }


.footer-basic ul a:hover {
    opacity: 1;
}

.footer-basic .social {
    text-align: center;
    padding-top: 25px;
    padding-bottom: 10px;
}

    .footer-basic .social > a {
        font-size: 24px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: center;
        border-radius: 50%;
        border: 1px solid #ccc;
        margin: 0 8px;
        color: inherit;
        opacity: 0.75;
    }

        .footer-basic .social > a:hover {
            opacity: 0.9;
        }

.footer-basic .copyright {
    margin-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 0;
}

.list-inline-flex-item {
    flex-direction: column;
    display: inline-flex;
}

    .list-inline-flex-item > span:first-child {
        color: var(--hnkRed);
        margin-bottom: .5rem;
        text-align: left;
        font-size: larger;
    }



.TopSticky {
    height: 105px;
    position: -webkit-sticky;
    /*position: sticky;*/
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    z-index: 9999;
    /*background-color: aquamarine;*/
/*    border-bottom: 3px solid yellow;
*/}

.TopSpace {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    height: 150px;
    width: 100%;
}

.MobileTopSpace {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    height: 60px;
    width: 100%;
}

.Stick {
    position: fixed;
}

.header-items-container {
    /*display: flex;
    flex-direction: row;*/
    display: grid;
    grid-template-columns: 17% 67% 16%;
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    align-items: center;
    height:100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.CategoryBar {
    display: flex;
    flex-direction: row;
    transition: all .3s;
    height: 40px;
    justify-content: start;
    padding: 0 7%;
    background-color: var(--hnkRed);
    /*padding:20px;*/
    /* background-color: #0072de;*/
    /*background-color:var(--Blue);*/
    /*opacity:.95;*/
}

.MinifyBar {
    /*   padding:10px;*/
    height: 6vh;
}

.CategoryBar > .CategoryBarItem {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white !important;
    /* background: var(--Blue);*/
}

#SelectedCargoOption {
    color: white;
}

.CategoryBarDropdown {
    position: relative;
    /* height: inherit; */
    width: fit-content;
    min-width: fit-content;
    min-width: -moz-fit-content;
    color: var(--TspLight);
    font-size: 15px;
    font-weight: 400;
    /*background-color: rgb(0,0,0,20%);*/
    /* margin-left: 5%; */
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 100px 0 20px;
    /*padding: 0 30px;*/
    transition: all 250ms;
    cursor: pointer;
    white-space: nowrap;
    /*user-select: none;*/
}

.HeaderCategory:hover {
    /*background: #1759a7;*/
    background: #F1F5F8;
    color: #000;
    border-top-left-radius: 6px;
}

#CategoryHoverBackground {
    width: 100%;
    height: 100%;
    top: 105px;
    left: 0;
    position: fixed;
    display: none;
    background: rgb(0,0,0,0.8);
    z-index: 999;
}
/*.HeaderCategory:hover + .CategoryHoverBackground {
    display:block;
    
}*/
.HeaderCategory:hover > #CategoryHeader > span {
    color: var(--hnkRed) !important;
    text-decoration: underline;
}

.HeaderCategory:hover > #CategoryHeader > i {
    color: var(--hnkRed) !important;
}
/*.HeaderCategory:hover #CategoryHeader > span{
    color:red;
}*/
.CategoryBarDropdown:not(last-child) {
    /*border-left:  groove 1px #0458A7;*/
}

.CategoryBarDropdown > span {
    /*margin-left: 5%;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
    width: -moz-fit-content;
    text-align: center;
}



.MinifyBar > .CategoryBarDropdown {
    padding: 6px;
}

.LoadingItem {
    animation: BlinkFade 1s ease-in-out infinite;
    background: linear-gradient( 180deg, #fff 0%, #e1e1e1 100%) !important;
}

#SuggestMobileApp {
    height: 40px;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--Blue);
    z-index: 999;
    align-items: center;
    /*border-top: solid 1px rgb(0,0,0,70%);*/
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

    #SuggestMobileApp > .SuggestMobileText {
        color: #034C8E;
        margin-left: auto;
        font-size: smaller;
        margin: auto;
    }

.footerItemSelected {
    display: flex;
    /*background: rgba(3,76,142,.12);*/
    background: #F1F5F9;
    color: #034C8E !important;
    height: 55px;
    width: 100%;
    height: 55px;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 10px 10px 20px;
    cursor: pointer;
    border-top: 1px solid #d5d5d5;
    align-items: center;
    justify-content: space-between;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    font-family: system-ui;
}

.MobileCategoryBackground {
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    position: fixed;
    cursor: pointer;
}

.LoginPopupBackground {
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    position: fixed;
    cursor: pointer;
}

.footerMobileIconPlus {
    display: block;
}

.footerMobileIconClose {
    display: none;
}

.footerItemSelected:hover + .footerSubItem {
    width: 100%;
    height: auto;
    /*padding:20px 10px;*/
    display: block;
}

.footerSubItem {
    display: none;
    /*border-bottom: 1px solid #d5d5d5;*/
}

.footerSubItemSelected {
    display: flex;
    align-items: center;
    /*padding: 10px 10px 10px 20px;*/
    height: 40px;
    background: #F1F5F9;
    color: #000;
    font-size: 13px;
    padding-left: 20px;
}

.CloseFooterWrapper {
    width: 100%;
    height: 55px;
    background-color: transparent;
    position: absolute;
    display: none;
}


.CargoOption {
    color: white;
    margin-left: 5%;
}

.ShipmentFromShopWrapper {
    display: block;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    width: 100%;
    height: 75px;
    z-index: 999;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 25px 0 0 50px;
    margin-top: 10px;
    /*box-shadow:rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}

.CargoShipmentWrapper {
    margin-top: 10px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    width: 100%;
    height: 75px;
    z-index: 999;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 25px 0 0 50px;
}

.TakeAwayWrapper {
    margin-top: 10px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    width: 100%;
    height: 75px;
    z-index: 999;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 25px 0 0 50px;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}

.RadioContainer {
    /*display: block;*/
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
}

    /* Hide the browser's default radio button */
    .RadioContainer input {
        position: relative;
        opacity: 1;
        cursor: pointer;
        display: none;
    }

    .RadioContainer > #GenderMale {
        display: block !important;
        margin-right: 5px;
        float: left;
    }

    .RadioContainer > #GenderFemale {
        display: block !important;
        margin-right: 5px;
        float: left;
    }

    .RadioContainer > .signupcheckbox {
        display: block;
    }

.SignupContainer {
    margin-left: 0px !important;
    margin: 20px;
}

.SignupInfo {
    margin: 0;
    padding: 0;
}

    .SignupInfo > input {
        width: 15px;
    }
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    /*   background-color: var(--CategoryHeaderText);*/
    border: 2px solid var(--CategoryHeaderText);
    border-radius: 50%;
    display: block;
    z-index: -1;
}

.HeaderIcon {
    color: white !important;
    font-size: 21px;
    margin-right: 10px;
}

.AccountHeaderIcon {
    color: var(--hnkDefault) !important;
    font-size: 19px;
    margin-right: 7px;
}
/*
.RadioText{
    position:absolute;
    right:0;
    top:0;
}*/
/* On mouse-over, add a grey background color */
.RadioContainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.RadioContainer input:checked ~ .checkmark {
    background-color: var(--CategoryHeaderText);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.RadioContainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.RadioContainer .checkmark:after {
    top: 50%;
    left: 51%;
    transform: translate(-50%,-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}


#SuggestMobileApp > .CloseButton {
    background: #034C8E;
    margin: 3px auto;
    width: 20px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    /* display: flex; */
    padding: 0 5px;
    border-radius: 50%;
    color: #fff;
}

.ShowcaseItem {
    width: 100% !important;
}

.One #MobileCategoryDrawer {
    display: none;
    position: fixed;
    width: var(--MobileDrawerWidth);
    /*left: calc(var(--MobileDrawerWidth) * -1);*/
    right: calc(var(--MobileDrawerWidth) * -1);
    height: 100%;
    background: var(--Blue);
    /*   bottom: 0;*/
    transition: 250ms ease-out;
    overflow-y: auto;
    z-index: 9999;
    top: 0;
    padding-top: 4%;
}

.MobileCategoryTitle {
    font-size: 20px;
    display: flex;
    background: #F1F5F9;
    justify-content: space-between;
    font-weight: 600;
    height: 50px;
    padding: 18px 18px 0 18px;
    z-index: 1 !important;
    position: absolute;
    top: 0;
    /*left:0;*/
    width: 100%;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
}

.One #MobileCategoryDrawer[drawer-open=true] {
    box-shadow: 6px 0px 10px rgb(0 0 0 / 25%);
    left: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    /*right:0;*/
}

.ProductListWrapper .SVGDelete {
    width: 24px;
    height: 24px;
}

#MobileDrawer {
    z-index: 9999 !important;
    display: none;
    position: fixed;
    width: var(--MobileDrawerWidth);
    right: calc(var(--MobileDrawerWidth) * -1);
    height: 100%;
    background: var(--Blue);
    /*   bottom: 0;*/
    transition: 250ms ease-out;
    z-index: -1;
    overflow-y: scroll;
}

    #MobileDrawer[drawer-open=true] {
        box-shadow: 6px 0px 10px rgb(0 0 0 / 25%);
        right: 0;
    }

    #MobileDrawer .FilterBoxList {
        max-height: unset;
        overflow-y: unset;
    }

    #MobileDrawer .FilterBox {
        box-shadow: none;
        padding-bottom: 70%;
    }


    #MobileDrawer .FilterHeading:first-child {
        border-top: none;
        display: flex;
        justify-content: space-between;
    }

.FilterHeading > p {
    margin-bottom: 0;
}

.FilterDrawerButton {
    display: none;
    padding: .5rem;
    /*display: flex;*/
    align-items: center;
    justify-content: flex-end;
    background: #105594c9;
    border-radius: 6px;
    /*color: #034C8E;*/
    color: #fff;
}

.filterIcon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.PassInfo {
    margin: 20px;
    font-size: 13px;
    font-family: system-ui;
}

.RenewPassInfo {
    margin: 20px;
    font-size: 13px;
    font-family: system-ui;
}

.SetPasswordPopupBody > .PassInfo {
    margin: 20px 0;
}

.RegisterForm .PassInfo {
    color: #737373;
    margin-left :0px;
}

.MobileDrawerContent {
    padding-bottom: 40%;
    padding-top: 1%;
}

.DrawerButton {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    display: none;
    align-items: center;
    /*justify-content: flex-end;*/
}

    .DrawerButton .Arrow {
        position: static;
        transform: none;
        height: 19px;
        width: 19px;
    }

.ListItem {
    display: block;
    margin: 5%;
    padding: 5%;
    text-align: center;
    border-radius: 6px;
    color: white !important;
    /*background-color: rgb(0,0,0,25%);*/
    background-color: #034C8E;
    cursor: pointer;
}

#StoreSearch:focus {
    outline: none;
}

.StoreListOne {
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 300px;
    margin-bottom: 0;
}




#DateList {
}

.DateListOne {
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 250px;
}

.ShopDateListOne {
    /*flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 250px;*/
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 320px;
    margin-bottom: 0;
}

.TimeListOne {
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 250px;
    flex-wrap: wrap;
}

.ShopTimeListOne {
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 20px;
    overflow-y: scroll;
    max-height: 250px;
    flex-wrap: wrap;
}

.StoreListOne::-webkit-scrollbar {
    width: 10px;
}

.StoreListOne::-webkit-scrollbar-track {
    border-radius: 4px;
}

.StoreListOne::-webkit-scrollbar-thumb {
    background: rgb(0,0,0,25%);
    border-radius: 4px;
}


.DateListOne::-webkit-scrollbar {
    width: 10px;
}

.DateListOne::-webkit-scrollbar-track {
    border-radius: 4px;
}

.DateListOne::-webkit-scrollbar-thumb {
    background: rgb(0,0,0,25%);
    border-radius: 4px;
}

.AddressSelectionHeader {
    /* background: var(--TspDrk); */
    color: var(--TspDrk);
    padding: 7px;
    cursor: pointer;
    margin-left: 5px;
}

    .AddressSelectionHeader > span {
        font-size: 14px;
    }

    .AddressSelectionHeader[selected=true] {
        background: var(--TspDrk);
        color: white;
        padding: 6px;
        cursor: pointer;
        margin-left: 5px;
        border-radius: 5px;
    }

.AddressPopupHeaderCaption {
    font-size: 18px;
    font-weight: bold;
}

.AddressSelectionContainer {
    display: flex;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: auto;
    padding: 3px;
    white-space: nowrap;
}

.AddressItem {
    margin: .3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.AddressTitle {
    background: #034C8E;
    color: #fff;
    border-radius: 4px;
    margin-right: auto;
    padding: 4px;
    min-width: 60%;
    max-width: 70%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 16px;
}

.AddressItem > .AddressDetail {
    color: #034C8E;
}

.TimeListOne::-webkit-scrollbar {
    width: 10px;
}

.TimeListOne::-webkit-scrollbar-track {
    border-radius: 4px;
}

.TimeListOne::-webkit-scrollbar-thumb {
    background: rgb(0,0,0,25%);
    border-radius: 4px;
}

.ShopTimeListOne::-webkit-scrollbar {
    width: 10px;
}

.ShopTimeListOne::-webkit-scrollbar-track {
    border-radius: 4px;
}

.ShopTimeListOne::-webkit-scrollbar-thumb {
    background: rgb(0,0,0,25%);
    border-radius: 4px;
}

/*.StoreItem {*/
/*transition: background 250ms;*/
/*border-radius: 4px !important;*/
/*   background:transparent;*/
/*}*/

#TakeAwayExtras .ListItem {
    background-color: var(--CategoryHeaderText);
    border-radius: 6px;
    margin: 5%;
    font-size: 14px;
}

#StoreListHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.SelectedStoreOne {
    margin-right: auto;
    margin-left: 10px;
}

#SelectedStoreWrapper {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #d5d5d5;
}



#ShipmentDateWrapper {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.SvgShipmentDateDay {
    fill: black;
    height: 26px;
    width: 26px;
}

.SvgShipmentDateTime {
    fill: black;
    height: 26px;
    width: 26px;
}

.SvgShipmentAddress {
    fill: black;
    height: 26px;
    width: 26px;
}

#ShipmentTimeWrapper {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

#ShopDeliveryDateWrapper {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 4%;
    margin-bottom: 4%;
}

    #ShopDeliveryDateWrapper > svg {
        fill: black;
    }

#ShopDeliveryTimeWrapper {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}



#SelectedDateWrapper {
    width: 100%;
}

#ShipmentDateHeader {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#ShipmentShopDateHeader {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#CargoOptions > hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}


.SelectedDateOne {
    margin-right: auto;
    margin-left: 10px;
}

.AddressSelectedDateOne {
    margin-right: auto;
    margin-left: 10px;
}

#ShipmentTimeHeader {
    display: none;
    width: 100%;
    align-items: center;
    /*justify-content: center;*/
}

#ShopShipmentTimeHeader {
    display: none;
    width: 100%;
    align-items: center;
    /*justify-content: center;*/
}

.SelectedTimeOne {
    margin-right: auto;
    margin-left: 10px;
}

.ShopSelectedTimeOne {
    margin-right: auto;
    margin-left: 10px;
}

.ListSeperator {
    border-top: 1px solid rgb(0,0,0,50%);
}

#SelectedCargoDownArrow {
    /*margin-left:auto;*/
    color: white;
}

#CargoOptions {
    cursor: default;
    /* padding:20px;*/
}

#CargoDropdown #SelectedCargoOptionsWrapper svg {
    display: none;
}

#CargoDropdown[option=cargo] #CargoSvg {
    display: unset;
}

#CargoDropdown[option=shop] #ShipmentFromShopSvg {
    display: unset;
}

#CargoDropdown[option=takeAway] #TakeAwaySvg {
    display: unset;
}

#CargoAddressesSeperator {
    display: block;
}

.SelectedAddress,
.SelectedTakeAway {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#CargoDropdown[option=cargo][address-selected=true] .SelectedAddress,
#CargoDropdown[option=shop][address-selected=true] .SelectedAddress {
    display: flex;
}

#CargoDropdown[option=takeAway][all-selections-made=true] .SelectedTakeAway {
    display: flex;
}


#CargoDropdown[option=cargo] #CargoShipmentExtras,
#CargoDropdown[option=shop] #CargoShipmentExtras {
    display: unset;
}

#CargoDropdown[option=cargo] .CargoAddressesSeperator,
#CargoDropdown[option=shop] .CargoAddressesSeperator,
#CargoDropdown[option=takeAway] .CargoAddressesSeperator {
    display: unset;
}

#CargoDropdown[option=takeAway] #StoreListWrapper,
#CargoOptions[store-selected=true] #SelectedStoreWrapper,
#CargoOptions[store-selected=true] #StoreList,
#CargoOptions[store-selected=true] #ShipmentDateWrapper,
#CargoOptions[shipment-date-selected=true] #ShipmentDateHeader,
#CargoOptions[shipment-date-selected=true] #ShipmentShopDateHeader,
#CargoOptions[shipment-date-selected=true] #ShipmentTimeWrapper,
#CargoOptions[shipment-time-selected=true] #ShipmentTimeHeader,
#CargoOptions[shipment-date-selected=true] #ShopDeliveryTimeWrapper,
#CargoOptions[shipment-time-selected=true] #ShopShipmentTimeHeader {
    display: flex;
}

#CargoOptions[store-selected=true] #StoreSearch,
#CargoOptions[store-selected=true] #StoreList,
#CargoOptions[shipment-date-selected=true] #DateList,
#CargoOptions[shipment-date-selected=true] #ShopDateList,
#CargoOptions[shipment-time-selected=true] #TimeList,
#CargoOptions[shipment-time-selected=true] #ShopTimeList,
#CargoDropdown[option=shop] #TakeAwayExtras {
    display: none;
}


/*#CargoDropdown[all-selections-made=true] #SelectedCargoOptionsWrapper {
    display: flex;
}*/

#CargoDropdown[option=takeAway][all-selections-made=true] #CargoDropdownTitle,
#CargoDropdown[option=cargo][address-selected=true] #CargoDropdownTitle,
#CargoDropdown[option=shop][address-selected=true] #CargoDropdownTitle {
    display: none;
}


#CargoDropdown:hover > #CargoOptions {
    max-height: 99999px;
    opacity: 1;
    padding: 20px;
}

#CargoDropdownTitle {
    user-select: none;
}

    #CargoDropdownTitle > span {
        color: white;
    }

#CategoryDropdown:hover > #CategoryList {
    max-height: 99999px !important;
    opacity: 1 !important;
}

#CategoryDropdown:hover .FilterBox {
    opacity: 0;
}


.StoreSearchOne {
    border-radius: 4px;
    border: none;
    padding: 12px;
    margin-bottom: 20px;
    background: #f2f2f2;
    width: 100%;
}

#ChangeStore {
    cursor: pointer;
}


.ChangeStoreOne {
    text-decoration: underline;
    margin-right: 5px;
}

#ChangeDate {
    cursor: pointer;
}

.ChangeDateOne {
    text-decoration: underline;
    margin-right: 5px;
}

#ShopChangeDate {
    cursor: pointer;
}

.AddressChangeDateOne {
    text-decoration: underline;
    margin-right: 5px;
}

#ChangeTime {
    cursor: pointer;
}

.ChangeTimeOne {
    text-decoration: underline;
    margin-right: 5px;
}

.ShopChangeTimeOne {
    text-decoration: underline;
    margin-right: 5px;
}

#StoreListWrapper {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: default;
}

#TakeAwayExtras .SvgLoading {
    height: 60px;
    width: 60px;
}

.ComboBox {
    display: flex;
    position: relative;
    cursor: pointer;
}

.ComboBoxOne .ComboBox {
    box-shadow: 0 0px 0px 1px rgb(0 0 0 / 25%);
    padding: .5rem;
    border-radius: 6px;
    padding-left: 1rem;
    background: rgb(0,0,0,4%);
    transition: all 200ms;
}

    .ComboBoxOne .ComboBox:hover {
        background: rgb(0,0,0,8%);
    }



.ComboBoxHeader {
    display: flex;
    width: 100%;
}

.MemberNameWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

    .MemberNameWrapper .ArrowContainer {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--Blue);
        padding: 0.25rem;
        margin-left: auto;
    }


.ComboBox .ArrowContainer {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Blue);
    /* padding: 0.4rem; */
    margin-left: auto;
    transition: all 200ms;
    height: 20px;
    width: 20px;
    position: relative;
}

.ComboBoxTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.ComboBoxSelectedValue {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.ComboBoxOne .ComboBox[list-open=true] .ArrowContainer {
    transform: rotate(-180deg);
}

.ComboBox[value-selected=false] .ComboBoxSelectedValue {
    display: none;
}

.dx-overlay-content {
    overflow: visible !important;
    /*margin-top:2rem !important;*/
}

.ComboBox[value-selected=true] .ComboBoxTitle {
    display: none;
}

.dx-overlay-modal {
    z-index: 9999 !important;
}

.ComboBox[list-open=true] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    .ComboBox[list-open=true] > .ComboBoxList {
        /*display: unset;*/
        max-height: 25vh;
    }

.ComboBoxOne .ComboBox[list-open=true] > .ComboBoxList {
    box-shadow: 0 0px 0px 1px rgb(0 0 0 / 33%);
}

.ComboBoxList {
    /*display: none;*/
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,0);
    overflow-y: scroll;
    overflow-y: overlay;
    max-height: 0;
}

.ComboBoxOne .ComboBoxList {
    width: 100%;
    background: white;
    transition: all 200ms;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 1;
}

.ComboBoxList::-webkit-scrollbar {
    width: 15px;
    /*border: solid 1px rgb(0,0,0,25%);*/
    /*border-radius: 8px;*/
}

.ComboBoxList::-webkit-scrollbar-track {
}

.ComboBoxList::-webkit-scrollbar-thumb {
    position: absolute;
    right: 5%;
    background: #dedede;
    /*border-radius: 8px;*/
}



.ComboBoxOne .ComboBoxItem {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    font-size: larger;
    transition: all 200ms;
}

    .ComboBoxOne .ComboBoxItem:hover {
        background: rgb(0,0,0,20%);
    }

.ComboBoxNoList {
    text-align: center;
    padding: .5rem;
}

.ComboBoxSelectedValue {
    display: flex;
    justify-content: flex-start;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.One .SVGNotFound {
    fill: var(--Blue)
}

.One .NotFoundWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    gap: 0.5rem;
    color: var(--Blue);
    /*box-shadow: 0 0px 4px 1px rgb(0 0 0 / 15%);*/
    border-radius: 8px;
    padding: 3rem;
    /*border: solid 1px rgb(0,0,0,25%);*/
}

    .One .NotFoundWrapper p {
        margin: 0;
    }


.MobileCategoriesDropdown {
    /*   border:solid 1px var(--LightGray);*/
    padding: 3px;
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-items: center;
    display: none;
}

.ShakeInput {
    animation: Shake 700ms;
    border-bottom: 1.5px solid red;
}


.PShoppingList {
    overflow: auto;
    max-height: 50vh;
}

.One .ShoppingListSep {
    margin-bottom: 0;
}


.One .ShoppingListItem {
    background: transparent;
    border: solid 1px rgb(0,0,0,25%);
    border-radius: 4px;
    padding: 3%;
    margin: 3%;
    transition: all 250ms;
    cursor: pointer;
}

    .One .ShoppingListItem:hover {
        background: rgb(0,0,0,5%);
    }

.ShoppingListSVGWrapper {
    width: 24px;
    position: absolute;
    right: 1%;
}

.ShoppingListItem .SVGSuccess {
    transform: scale(0) translate(-50%, -50%) !important;
    transition: all 250ms;
}

.FailedLoginFeedback {
    margin: 1rem 0;
}

    .FailedLoginFeedback p {
        text-align: center;
        color: red;
        font-size: medium;
    }

.One .ShoppingListItem svg {
    width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ShoppingListItem .SvgLoading {
    display: none;
    top: 0;
}

    .ShoppingListItem .SvgLoading > path {
        stroke: var(--Blue);
    }

.ShoppingListItem[waiting=true] .SvgLoading {
    display: unset;
}

.ShoppingListItem[waiting=true] .SVGSuccess {
    transition: all 0s !important;
    transform: scale(0) !important;
    display: none;
}

.One .ShoppingListItem[product-is-in-list=true] .SVGSuccess {
    transform: scale(1) translate(-50%, -50%) !important;
}


.One .ShoppingListItemContent {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

    .One .ShoppingListItemContent p {
        color: var(--Black);
        margin: 0;
    }
#ToolbarLogin{
    background:var(--hnkRed);
}

#ToolbarLogin .SVGKey {
    fill: white;
}

.ChangeAccount > p {
    font-size: 14px;
    /*font-family: monospace;*/
    font-weight: 500;
    cursor:pointer;
}


@keyframes BlinkFade {
    66% {
        opacity: .33
    }
}

@keyframes Shake {
    10% {
        transform: translateX(8px)
    }

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(5px)
    }

    50% {
        transform: translateX(-8px)
    }

    60% {
        transform: translateX(10px)
    }

    70% {
        transform: translateX(-7px)
    }

    80% {
        transform: translateX(5px)
    }

    90% {
        transform: translateX(-10px)
    }

    100% {
        transform: translate(3px)
    }
}

.LoadingMask {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0,25%);
    z-index: 9999999;
}

    .LoadingMask[show=true] {
        display: unset;
    }

    .LoadingMask > .SvgLoading {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 15vh;
        transform: translate(-50%,-50%);
        fill: var(--Blue)
    }

.ConfirmButtonsWrapper {
    display: flex;
    gap: 1rem;
}

    .ConfirmButtonsWrapper > * {
        flex: 1;
    }

.ConfirmationDesc {
    text-align: center;
}

.PShoppingList {
    width: 100%
}

#PShoppingListWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

    #PShoppingListWrapper .SvgLoading {
        width: 50%
    }

.AppliedFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.RemoveFiltersText {
    font-size: 14px;
    /*color: var(--Blue);*/
    color: #0f6dc7;
}

.AppliedFiltersWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 16px;
    margin: 1rem 0;
}

    .AppliedFiltersWrapper a {
        text-decoration: none !important;
        display: flex;
    }

.AppliedFilterWrapper {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    border: 1px solid rgb(0,0,0,25%);
    border-radius: 30px;
    padding: .3rem .6rem;
    background: whitesmoke;
    color: var(--Black);
    gap: 0.5rem;
    height: 37px;
}

    .AppliedFilterWrapper:hover {
        background: rgb(0,0,0,25%)
    }

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

.AppliedFilterCancel {
    border-radius: 50%;
    width: 20px
}

.AppliedFilterTitle {
    font-size: 11.8px;
    font-weight: bold;
    color: rgba(1,0,0,0.5);
}

.AppliedFilterName {
    font-size: 12px;
}

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

    .LoseAllFilters a {
        display: block;
    }


    .LoseAllFilters .AppliedFilterWrapper {
        background-color: rgba(4,88,167,0.8);
    }


#PShoppingListWrapper .SvgLoading path {
    stroke: var(--Blue)
}
#ToolbarBasketHover > a > svg{
    fill:var(--hnkRed);
    margin-left:5px;
}
#ToolbarBasketWrapper {
    position: relative;
    overflow: hidden;
    background-color:white;
    margin-top: 5px;
}

    #ToolbarBasketWrapper:hover {
        overflow: visible;
    }

        #ToolbarBasketWrapper:hover #BasketPopupWrapper {
            /*display:unset;*/
            opacity: 1;
        }

#BasketPopupWrapper {
    opacity: 0;
    transition: opacity 350ms;
    position: absolute;
    top: 100%;
    right: 0;
    /*transform: translateX(-50%);*/
    /*background: white;*/
}

.BasketPopupContent {
    padding: 1rem;
    background: white;
    box-shadow: 0 3px 6px 0px rgb(0 0 0 / 50%);
    border-radius: 4px;
    /*width: 560px;*/
    width: 500px;
}

    .BasketPopupContent .flat-list-item-info-name > a {
        width: 230px;
        font-size: .9rem;
        color: #000 !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .BasketPopupContent .FlatListStyleOne {
        display: flex;
        flex-wrap: wrap;
        height: fit-content;
        height: -moz-fit-content;
        /* padding: 1% 0; */
        gap: 0.3rem;
        width: 100%;
    }

    .BasketPopupContent .BasketNav {
        display: none;
    }

.BasketPopupInner {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.ProductListWrapper {
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    /*max-height: var(--BasketPopupHeight);*/
    max-height: 228px;
    overflow-y: auto;
}

.BasketPopupInner > .ProductListWrapper > .FlatListStyleOne {
    width: 100%;
}

.BasketPopupInner > .ProductListWrapper {
    align-items: center;
    max-height: 228px;
    overflow-y: auto;
}

.BasketPopupInner .flat-list-wrapper {
    height: 120px !important;
}

.BasketPopupInner .OneSelectList li {
    font-size: 14px;
}

.BasketPopupInner .ProductListWrapper .SVGDelete {
    width: 22px;
    height: 22px;
}

.BasketPopupInner .flat-list-add-to-basket {
    gap: 0.1rem;
}

.ProductListWrapper .SvgLoading {
    height: var(--BasketPopupHeight);
    width: var(--BasketPopupHeight);
    margin: auto;
}

.ProductListWrapper > .SvgLoading > path {
    stroke: var(--TspDrk);
}


.ProductListWrapper::-webkit-scrollbar {
    width: 10px;
}

.ProductListWrapper::-webkit-scrollbar-track {
    border-radius: 4px;
}

.ProductListWrapper::-webkit-scrollbar-thumb {
    background: rgb(0,0,0,25%);
    border-radius: 4px;
}

.BasketPopupInteractionWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

    .BasketPopupInteractionWrapper .LGButton {
        margin: 0;
        padding: 5px 20px;
        height: unset;
        float: left;
        margin-right: 10px;
    }

.PopupProductItemWrapper > * {
    flex: 3;
}

.PopupProductPrices {
    display: flex;
    margin-top: auto;
    margin-bottom: .3rem;
    margin-right: .5rem;
}

.BasketPopupProductList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 10px;
    width: 100%;
}

.PopupProductItem {
    height: var(--BasketPopupHeight);
}

    .PopupProductItem hr {
        margin: 0;
    }

.LoadingPlaceholder {
    position: relative;
    animation: Glow 2s infinite;
    height: 15px;
    width: 30%;
    border-radius: 6px;
    overflow: hidden;
}

.LoadingPlaceholderStripe {
    position: absolute;
    left: -10%;
    bottom: 0;
    height: 100%;
    width: 10%;
    background: var(--TspDrk);
    animation: MoveStripe 2s infinite;
}

#MobileCategoryDrawer .ListItem {
    font-size: 15px;
    position: relative;
    /*background-color: rgb(0,0,0,25%) !important;*/
    /*border-radius: 6px;*/
    /*margin: 3% !important;*/
    border: none;
    margin: 0;
    border-radius: 0;
    padding: 0;
    text-align: start;
    border: none;
    border-bottom: 1px solid rgba(3,76,142,.12);
}

    #MobileCategoryDrawer .ListItem > a {
        color: #0459a9 !important;
        display: flex;
        width: 100%;
        padding: 6% 9%;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
    }

        #MobileCategoryDrawer .ListItem > a:hover {
            background: #fff;
        }

@keyframes MoveStripe {
    50% {
        left: 110%
    }

    100% {
        left: -10%;
    }
}
/*
#Card .CardQuantityButtonDecrease,
#Card .CardQuantityButtonIncrease {
    background-color: var(--Blue);
    color: white;
}*/


.PopupProductImg {
    height: 100%; /*calc(var(--BasketPopupHeight) - 5px);*/
    width: auto;
    margin: auto;
}

.PopupProductLeftSection {
    display: flex;
    flex-direction: column;
    /*margin:1rem 0;*/
    flex: 1;
    margin: 0 0 6px 2px;
    box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
}

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

.BasketPopupContentInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: medium;
}

.BasketPopupInfoPrice {
    background: #23964F;
    padding: 5px;
    border-radius: 13px 6px 6px 0px;
    color: white;
    margin-left: 10px;
}

.BasketPopupInfoText {
    color: #A6A6A6;
}

.PopupProductName {
    font-size: small;
}

    .PopupProductName a {
        color: var(--Black) !important;
    }

.PopupProductQuantity {
    font-size: small;
    margin-top: .3rem;
    color: #ccc;
}

.PopupProductPrice {
    text-align: right;
    font-size: small;
    background: var(--Winter);
    color: white;
    /*padding: 0 .5rem;*/
    padding: 3px 9px;
    border-radius: 6px;
    margin-left: auto;
}


.PopupProductItemWrapper {
    display: flex;
    height: 100%;
    gap: 1rem;
}

.Checkbox {
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    cursor: pointer;
    padding: .5rem 0;
    gap: .5rem;
}

.SVGCategory {
    fill: white;
}

.Checkbox .Box {
    border: solid 1.5px gray;
    width: 15%;
    border-radius: 4px;
    transition: all 250ms;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.Checkbox[checked=true] .Box {
    border: solid 1.5px transparent;
}

.Checkbox .Box svg {
    width: inherit;
    height: inherit;
    transform: scale(0);
    transition: all 250ms;
}

.Checkbox[checked=true] .Box svg {
    transform: scale(1.3);
}



.Checkbox .CheckboxText {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    user-select: none;
}

.CategoryIcon {
    height: 24px;
    width: auto;
    /* margin-right: auto; */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#CargoDropdown .Arrow {
    /*  display: none;
    top: 150%;
    left: 50%;*/
    position: static;
    transform: rotateZ( -90deg );
    height: 64px;
    width: 64px;
    animation: PointingArrow 1.5s infinite;
}

#ArrowPointerContainer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translateX(-50%);
    top: 150%;
    left: 50%;
    pointer-events: none;
}

#ArrowPointerDesc {
    font-size: large;
}



@keyframes PointingArrow {
    25% {
        transform: translateY(-15px) rotateZ( -90deg );
    }

    50% {
        transform: translateY(0) rotateZ( -90deg );
    }

    75% {
        transform: translateY(-15px) rotateZ( -90deg );
    }

    100% {
        transform: translateY(0) rotateZ( -90deg );
    }
}



/*@media screen and (max-width:920px) {*/ /*  Mobil Görünümüne geçiş*/
/*.MainPadding{
        padding: 0 5%;
    }
    
}*/

.NewPasswordPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.NewPasswordPopupContent {
    position: fixed;
    display: none;
    width: 450px;
    height: auto;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    z-index: 99999999 !important;
    border-radius: 4px;
    /*padding-bottom: 20px;*/
}

.NewPasswordPopupBody {
    padding: 60px 65px;
}

.NewPasswordPopupTitle {
    font-size: 24px;
    font-weight: 600;
    color: #595959;
}

.NewPasswordInfo {
    margin: 10px auto;
    color: #737373;
}

.NewPasswordForm {
    padding-top: 0;
    border: none;
    width: 100%;
    margin-top: 30px;
}

.NewPasswordInputWrapper {
    background: #f2f2f2;
    width: 100%;
    height: 50px;
    border-radius: 6px;
    margin-top: 10px;
}

.NewPasswordValue {
    background: transparent;
    width: 100%;
    border: none;
    border-radius: 6px;
    float: left;
    height: 50px;
    padding: 10px 15px;
    color: #737373;
}

.NewPasswordInputWrapper > input:focus {
    border: none;
    outline: none;
}
/*.PasswordVisibleBtn{
    margin-left:-35px;
    margin-top:15px ;
    position:relative;
    z-index:2;
    color:#BFBFBF;
    font-size:22px;
    cursor:pointer;
}*/
#newPasswordVisibleRepeatBtn {
    margin-left: -37px;
    margin-top: 14px;
    position: absolute;
    z-index: 2;
    color: #BFBFBF;
    font-size: 22px;
    cursor: pointer;
}

#newPasswordVisibleBtn {
    margin-left: -37px;
    margin-top: 14px;
    position: absolute;
    z-index: 2;
    color: #BFBFBF;
    font-size: 22px;
    cursor: pointer;
}

#passwordNotVisibleRepeat {
    display: none;
}

#passwordNotVisible {
    display: none;
}

.NewPasswordPopupBtn {
    display: flex;
    width: 100%;
    height: 50px;
    background: #085fae;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 20px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

    .NewPasswordPopupBtn:hover {
        opacity: .8;
    }

.BasketDeletePopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.548);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.BasketDeletePopupContent {
    position: fixed;
    display: block;
    width: 600px;
    height: 140px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    z-index: 99999 !important;
    display: none;
    border-radius: 4px;
}

.BasketDeletePopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 35px 65px;
}

.BasketDeletePopupText {
    font-size: 17px;
}

.BasketDeleteBtn {
    float: right;
    padding: 8px 10px;
    margin-bottom: 25px;
    border: 1px solid #034C8E;
    text-decoration: none;
    border-radius: 4px;
    background: #034C8E;
    color: #fff !important;
    cursor: pointer;
    margin-left: 7px;
    color: #fff;
}


.FavoriteDeletePopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.548);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.FavoriteDeletePopupContent {
    position: fixed;
    display: block;
    width: 600px;
    height: 140px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    z-index: 999999999 !important;
    display: none;
    border-radius: 4px;
}

.FavoriteDeletePopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 35px 65px;
}

.FavoriteDeletePopupText {
    font-size: 17px;
}

.FavoriteDeleteBtn {
    float: right;
    padding: 8px 10px;
    margin-bottom: 25px;
    border: 1px solid #034C8E;
    text-decoration: none;
    border-radius: 4px;
    background: #034C8E;
    color: #fff !important;
    cursor: pointer;
    margin-left: 7px;
    color: #fff;
}

.StorePopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.548);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.StoreContent {
    position: fixed;
    display: block;
    width: 550px;
    height: auto;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
}

.StorePopupHeader {
    width: auto;
    height: 10%;
    z-index: 10;
}

.StorePopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 60px 70px;
}

.StorePopupClose {
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    float: right;
    background-color: transparent;
}

.storePopupInfo {
    font-size: 17px;
}

.StoreBtn {
    padding: 8px 10px;
    border: 1px solid #034C8E;
    text-decoration: none;
    list-style: none;
    border-radius: 4px;
    background: #034C8E;
    color: #fff !important;
    cursor: pointer;
    float: right;
    margin-left: 10px;
}

.AcoountSelectPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.AccountSelectContent {
    position: fixed;
    display: block;
    width: 550px;
    height: 340px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
    padding-bottom: 20px;
}

.AccountSelectPopupHeader {
    width: auto;
    height: 10%;
    z-index: 10;
}

.AccountSelectPopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 50px 30px 45px 30px;
}

.AccountBtn {
    cursor: pointer;
    color: black;
    z-index: 999999;
}

.SetPasswordPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.548);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.SetPasswordContent {
    position: fixed;
    display: block;
    width: 550px;
    height: 340px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
}

.SetPasswordPopupHeader {
    display: flex;
    justify-content: center;
    width: auto;
    height: 10%;
    z-index: 10;
}

.SetPasswordPopupTitle {
    align-content: center;
    display: inline-block;
    height: 10%;
    padding: 20px 0;
    font-size: 17px;
}

.RenewPasswordPopupTitle {
    align-content: center;
    display: inline-block;
    height: 10%;
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
}

.SetPasswordPopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 4px 70px 60px 70px;
}

.SetPasswordPopupClose {
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    float: right;
    background-color: transparent;
}

.PopupNewPasswordTextBox {
    width: 100%;
    height: auto;
    padding: 13px 20px;
    box-shadow: none;
    border: 1px solid #d5d5d5;
}

.SetEmailPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.548);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.SetEmailContent {
    position: fixed;
    display: block;
    width: 550px;
    height: 340px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
}

.SetEmailPopupHeader {
    width: auto;
    height: 10%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svgcustomanimation {
    animation-name: stretchSVG;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes stretchSVG {
    0% {
        transform: scale(.5);
    }

    50% {
    }

    100% {
        transform: scale(1);
    }
}

.SetEmailPopupTitle {
    align-content: center;
    display: inline-block;
    height: 10%;
    font-size: 17px;
    /*margin-top:20px;*/
}

.SetEmailPopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 40px 70px 60px 70px;
}

.SetEmailPopupInfo {
    font-family: system-ui;
    color: #737373;
    font-weight: 600;
    font-size: 15px;
}

#emailUpdateBtn {
    color: white !important;
}

.SetEmailPopupClose {
    width: 30px;
    height: 30px;
    padding: 0px !important;
    float: right;
    background-color: transparent;
    position: absolute;
    right: 5px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px !important;
    font-family: sans-serif;
    font-weight: 600;
    color: #034C8E !important;
}

.PopupNewEmailTextBox {
    width: 100%;
    height: auto;
    padding: 13px 20px;
    box-shadow: none;
    border: 1px solid #d5d5d5;
}


.TelCodePopupWrapper .dx-popup-wrapper {
    position: fixed !important;
    z-index: 99999 !important;
}

.TelCodePopupWrapper > .dx-popup-wrapper > .dx-overlay-content {
    position: fixed !important;
    z-index: 9999999 !important;
    height: 480px;
    /*top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;*/
}

/*.TelCodePopupWrapper > .dx-popup-wrapper > .dx-overlay-content {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    transform: translate(0px,0px) !important;
    position: fixed !important;
    z-index: 9999999 !important;
}*/
@media screen and (max-width:768px) { /*  Mobil Görünümüne geçiş*/
    /*html {
        overflow-x: hidden;
    }*/

    
    #ArrowPointerDesc {
        white-space: normal;
        text-align: center;
    }

    #ToolbarBasketWrapper {
        overflow: visible;
    }

    .header-items-container {
        grid-template-columns: 20% 62% 20%;
    }

    #ShowcaseBanner {
        display: none !important;
    }

    #ToolbarProfile {
        overflow: unset;
    }

    #SuggestMobileApp {
        display: none;
    }

    #CategoryDropdown {
        display: none;
    }

    .ToolbarMainOption svg {
        /*width: 36px;
        height: 36px;*/
        
        transition: all .2s;
    }

    .BorderInput {
        margin: 8px 20px;
        max-height: 40px;
    }

    .One #MobileCategoryDrawer {
        display: block;
    }

    #MobileDrawer {
        display: block;
    }

    .MainPadding {
        padding: 0;
    }

    .CustombannerClass {
        margin-left: 0;
    }

    .MobileCategoriesDropdown > svg {
        fill: white;
    }
    /*.header-items-container{
        grid-template-columns:
    }*/
    .MobileCategoriesDropdown {
        display: flex;
    }

    .top-logo-wrapper {
        grid-column: 2;
        justify-content: center;
        height: auto;
    }

    /*.search-bar-wrapper {
        grid-row: 2/2;
        grid-column: 1/4;
        padding: 0 12%;
        margin-right: 0;
        margin-left:0;
        display:none;
    }*/

    .LoginNav {
        display: none !important;
    }

    .ToolbarMainOption > span {
        display: none;
    }

    .MinifyBar {
        height: 5vh;
    }
    /*.search-bar-wrapper {
        margin-right: 0;
        flex: 1;
    }*/
    .MyHeader {
        padding-left: 0;
    }

    .layout-header {
        padding-left: 0;
    }

    .CategoryBar.MainPadding {
        padding: 0;
        justify-content: center;
        /*margin-left: 25%;*/
    }

    #SelectedCargoDownArrow {
        margin-left: 0;
    }
    /*  .MainPadding {
        padding: 0 2.5%;
    }*/
    /*#LoginPopup {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translate(0px,0px) !important;
    }*/
    #LoginPopup {
        width: 100% !important;
    }

    /*.test{
        width:100% !important;
        height:100% !important;
    }*/

    .LoginLogoWrapper {
        margin-top: 15px;
    }
}


@media screen and (max-width:568px) {
    #SelectedCargoOption {
        font-size: small;
    }

    .CategoryBarDropdown > span {
        font-size: xx-small;
    }

    .CategoryBarDropdown {
        padding: 0;
    }

    .DropdownTitle {
        font-size: smaller
    }

    .ShowcaseCardOne {
        min-width: 41vw;
    }

    #BasketPopupWrapper {
        display: none !important;
    }

    .AccountSelectContent {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .SetEmailContent {
        width: 100%;
        height: 100%;
    }

    .HeaderIcon {
        font-size: 16px;
    }

    .AccountHeaderIcon {
        font-size: 15px;
    }
}

/*@media screen and (max-width: 568px) {
    
}*/



/*popup başlangıç*/

.DeliveryPopup {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background-color: #000;*/
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    opacity: 0.97;
    z-index: 99999 !important;
    display: none;
}

.DeliveryPopupContent {
    position: fixed;
    display: block;
    width: 690px;
    height: auto;
    /*max-width: 80%;*/
    /*padding:40px;*/
    background-color: #fff;
    /*margin: 350px auto;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% );
    align-content: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease-out;
    /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 255, 0.9);*/
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    /*border: 2px solid blue;*/
    z-index: 99999999 !important;
    display: none;
    border-radius: 4px;
}

.DeliveryPopupOptions {
    transition: all 200ms ease-out;
    top: 100%;
    left: 0;
    width: 100%;
    list-style: none;
    background: #fff;
    z-index: 999;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    overflow: hidden;
    min-width: fit-content;
    min-width: -moz-fit-content;
    margin-top: 30px;
}

.DeliveryPopupHeader > .DeliveryPopupTitle {
    margin-left: 65px;
}

.DeliveryPopupTitle {
    align-content: center;
    display: flex;
    /*height: 10%;*/
    padding: 20px 0;
    justify-content: center;
    font-size: 17px;
    flex: 1;
}

.DeliveryPopupSubtitle {
    margin-top: 25px;
    font-weight: 500;
    font-size: 20px;
}

.DeliveryPopupButtonName {
    padding: 20px;
}

.DeliveryPopupHeader {
    width: auto;
    height: 10%;
    z-index: 10;
    display: flex;
    align-items: center;
    /*flex-direction: row-reverse;*/
    margin-right: 10px;
}

.DeliveryPopupBody {
    width: auto;
    height: auto;
    /*padding:20px;*/
    margin: 20px 70px;
}

.DeliveryPopupClose {
    display: flex;
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    float: right;
    background-color: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #034C8E !important;
}

    .DeliveryPopupClose:hover {
        background: #f2f2f2;
        border-radius: 50%;
    }
/*popup bitiş*/

/*Mobil menu*/
.MobileMenuSpace {
    position: absolute;
    height: 50px;
    width: 100%;
}

.MobileMenu {
    border-top: 2px solid #f2f2f2;
    background: #fff;
    width: 100%;
    height: 50px;
    bottom: 0;
    position: fixed;
    z-index: 999;
    display: none;
    padding-top: 3px;
}

.MobileMenuContainer {
    /*margin:auto 10%;*/
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
}

.MobileMenuHome {
    /*width:18%;*/
    order: 1;
    align-content: center;
    justify-content: center;
    line-height: 40px;
}

.MobileMenuOffer {
    /*width: 18%;*/
    order: 4;
    align-content: center;
    justify-content: center;
    line-height: 40px;
}

.MobileMenuBasket {
    /*width: 18%;*/
    order: 3;
    align-content: center;
    justify-content: center;
    line-height: 40px;
}

.MobileMenuCategory {
    /*width: 18%;*/
    order: 2;
    align-content: center;
    justify-content: center;
    line-height: 40px;
}

.MobileMenuUser {
    /*width: 18%;*/
    order: 5;
    align-content: center;
    justify-content: center;
    line-height: 40px;
}

.MobileMenuBtn {
    padding: 10px 7px;
    border-radius: 50%;
}

    .MobileMenuBtn:hover {
        background: #f2f2f2;
    }

.MobileMenuCategoryBtn {
    padding: 0 10px 0 10px;
    width: 42px;
    height: 42px;
}
/*Mail aktif sayfası css*/
.mailActiveted {
    margin-top: 100px !important;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.mailActivetedImg {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

    .mailActivetedImg > img {
        width: 100%;
        height: 100%;
    }

.mailActivetedInfo > h1 {
    margin-top: 10px;
    font-size: 37px !important;
}

.homePage {
    justify-content: center;
    margin-top: 50px;
    width: auto;
    height: 100px;
}

.homePageBtn {
    display: flex;
    background-color: #034C8E;
    color: #fff;
    width: fit-content;
    padding: 20px;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 auto;
}

    .homePageBtn > a:hover {
        color: #fff;
    }

#UpdatePasswordInfoButton {
    width: 50%;
}

.mailActivetedInfo > h1 {
    display: flex;
    justify-content: center;
}

#MobileCategoryCloseBtn {
    cursor: pointer;
    color: #034C8E;
    width: 30px;
    padding: 2px 8px;
    border-radius: 50%;
}

    #MobileCategoryCloseBtn:hover {
        background: #d5d5d5;
    }

.LoginPopupWrapper .dx-popup-wrapper {
    position: fixed !important;
    z-index: 99999 !important;
}

.LoginPopupWrapper .DynamicPlaceholder {
    padding: 0;
}

    .LoginPopupWrapper .DynamicPlaceholder[at-top=true] {
        top: -3%;
    }

.LoginPopupWrapper .BorderInput {
    padding-left: 0 !important;
}

.LoginCheckboxWrapper {
    display: flex;
    align-content: center;
}

.LoginCheckbox {
    width: 15px;
    height: 15px;
}

.LoginCheckboxText {
    margin-left: 10px;
    color: #034C8E;
    cursor: pointer;
}

.SVGShoppingList {
    width: 30px;
    height: 30px;
}
/*son*/
.ImageShowcase {
    width: 82% !important;
}

@media(max-width:1400px) {
    .ImageShowcase {
        width: 75% !important;
    }
}

@media(max-width:1200px) {
    .ImageShowcase {
        width: 70% !important;
    }

    .BasketItemCount {
        right: 21%;
    }
}

@media(max-width:1060px) {
    .TopSpace {
        position: relative;
    }

    .StoreListOne {
        max-height: 200px;
    }

    .PosterImage {
        height: 180px !important;
    }
    /*.ShowcaseItem{
        width:69%;
    }*/
    .ImageShowcase {
        width: 66% !important;
    }
}

@media (max-width:920px) {
    .top-logo-wrapper-container {
        grid-row: 1 / 2;
        grid-column: 1 / 4;
    }
    .PosterWrapper > article {
        gap: 1rem !important;
    }

    .PosterImage {
        width: 100px !important;
        height: 100px !important;
    }

    .MobileMenu {
        display: block;
    }

    .ToolbarMainOption {
        display: none;
    }

    #ToolbarProfile {
        display: none;
    }

    #CampaignsWrapper {
        display: none;
    }
    /* #SearchText{
        display:none;
    }*/
    .One #MobileCategoryDrawer {
        display: block;
        width: 50%;
        padding-bottom: 300px;
    }

    #MobileDrawer {
        display: block;
    }

    .MobileFilterBoxItem {
        float: none !important;
        border: 1px solid #d5d5d5 !important;
        color: #d5d5d5;
    }

    .FilterMobileSection {
        height: auto !important;
    }

    .FilterMobileSection {
        height: auto !important;
        /*margin-bottom:100px !important;*/
    }

    #CategoryDropdown {
        display: none;
    }

    .top-logo-wrapper {
        grid-column: 2;
        justify-content: center;
        padding-left: 0;
        height: auto;
    }

    #SelectedCargoOptionsWrapper {
        grid-column: 2;
        justify-content: center;
    }

    #Account {
        margin-left: 30px;
    }

    .footer-basic {
        padding: 40px 0 90px 0;
    }

    .ListItem {
        background-color: transparent !important;
        border: 1px solid #d5d5d5;
    }

        .ListItem > a {
            color: #0459a9 !important;
            /*color: #292a2c !important;*/
        }

            .ListItem > a:hover {
                color: #007bff !important;
                /*color: #292a2c !important;*/
            }

    .tabTopItem {
        padding: 0;
    }

    .FilterDrawerButton {
        display: block;
    }

    .ViewButtons {
        display: none !important;
    }

    .StoreListOne > .ListItem {
        background-color: var(--CategoryHeaderText) !important;
    }

    .search-bar-wrapper {
        grid-row: 2/2;
        grid-column: 1/4;
        justify-content: center;
        /*padding: 0 12%;*/
        /*margin-right: 0;*/
        /*margin-left: 0;*/
        /*display:none;*/
        height: auto;
    }

    .searchForm {
        background: transparent;
        margin: 4px 0 2px 0;
    }

    #SearchText {
        height: 35px;
    }

    .BorderInput {
        margin: 5px 10px 0 10px;
    }

    .CategoryBar {
        justify-content: center;
    }

    .TopSticky {
        height: 150px;
    }

    .TopSpace {
        height: 150px;
    }

    .CategoryBar {
        height: 40px;
    }

    .ProfileNavOne {
        background: #fff;
    }

    .BasketDeletePopupBody {
        margin: 40px 30px;
    }

    .CategoryBarDropdown {
        justify-content: center;
        padding: 0;
    }

    .CustomHeaderBackground2 {
        /*border-top: 147px solid var(--TspDrk);*/
    }

    .SearchIcon {
        top: 12px;
        left: 16px;
    }

    .SearchInput {
        /*margin: 5px 10px 0 10px;*/
    }

    .AutoCompleteWrapper {
        top: 99%;
        width: calc(100% - -100px) !important;
    }

    .CompanyLogo {
        margin-bottom: 0;
    }

    .MyHeader {
        height: auto;
    }
    /* .CategoryBar {
        grid-row: 2/2;
        grid-column: 2/4;
        padding: 0 12%;
        margin-right: 0;
        margin-left: 0;
    }*/
}

@media(max-width:768px) {
    /*
    .DeliveryPopupTitle {
        margin-left: 34%;
    }*/
    #TabAndNavWrapper {
        padding: 0 20px;
    }

    .ShowcaseItem {
        width: 100% !important;
    }

    .One #MobileCategoryDrawer {
        width: 50%;
        right: -50%;
    }

    .footer-basic {
        display: block;
    }

    main {
        padding-bottom: 50px;
    }

    .FlexRight {
        display: block;
    }

    .OldPriceBox {
        padding: 0;
        margin-right: 0;
        margin-left: 34px;
        font-size: 13px;
    }

    .flat-list-item-photo {
        margin: 0;
    }

    .TopSpace {
        position: relative;
    }

    .ShowCaseShowAll {
        width: auto
    }
    /*.LoginPopupContent > .dx-overlay-wrapper {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translate(0px,0px) !important;
    }*/
    .LoginPopupWrapper .dx-popup-wrapper {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        transform: translate(0,0) !important;
        z-index: 99999 !important;
    }

    .LoginPopupWrapper > .dx-popup-wrapper > .dx-overlay-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translate(0px,0px) !important;
        position: fixed !important;
        z-index: 9999999;
    }

    .TelCodePopupWrapper .dx-popup-wrapper {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        transform: translate(0,0) !important;
        z-index: 99999 !important;
    }

    .TelCodePopupWrapper > .dx-popup-wrapper > .dx-overlay-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translate(0px,0px) !important;
        position: fixed !important;
        z-index: 9999999 !important;
    }

    /* .dx-overlay-shader > .dx-overlay-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translate(0px,0px) !important;
        position: fixed !important;
    }*/
    .BasketDeletePopupText {
        font-size: 13px;
    }



    .CustombannerClass {
        /*width: 100vw;
    height: fit-content;
    margin-left: -11.5vw;*/ /* Disapble parents padding*/
        /*margin-right: -11vw;*/ /* Disapble parents padding*/
        margin-right: 0;
        margin-left: 0;
    }

        .CustombannerClass > div {
            width: 100vw;
            /*width: 100%;*/
            height: fit-content;
        }

    .TopSticky {
        height: 145px;
    }

    .TopSpace {
        height: 145px;
    }

    .CustomHeaderBackground2 {
/*        border-top: 142px solid white;
*/    }
}

@media(max-width:660px) {
    .BasketDeletePopupContent {
        width: 350px;
    }
    .RemovedItemsmodal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%;
    }
    .FavoriteDeletePopupContent {
        width: 350px;
    }

    .FavoriteDeletePopupBody {
        margin: 30px 10px 15px 10px;
    }
}

@media(max-width:577px) {
    .footer-basic ul {
        padding: 0 40px;
    }

    .mobileFooter {
        text-align: center !important;
    }

    .footer-basic ul {
        display: none;
    }

    .MobileFooterContent {
        display: block;
    }

    .footer-basic {
        padding: 0;
    }

    footer {
        padding: 0 !important;
    }
}
/*mobil görünüm*/
@media(max-width:568px) {
    .DeliveryPopupContent {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    /*.DeliveryPopupTitle{
        margin-left:29%;
    }*/
    #selectAccountBtn {
        font-size: small;
    }

    #Account > img {
        width: 17px;
    }

    .OneSelectList li {
        height: 12px;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .RadioContainer {
        padding-left: 0;
    }

    .DeliveryPopupBody {
        margin: 20px 20px;
    }

    .DeliveryPopupSubtitle {
        font-size: 16px;
    }

    .DeliveryPopupOptions {
        margin-top: 0;
    }

    #SearchText {
        height: 30px;
    }

    .CompanyLogo {
        min-width: 120px;
    }

    .TopSticky {
        height: 115px;
    }

    .TopSpace {
        height: 115px;
    }

    .BorderInput {
        margin: 0;
    }

    .SetPasswordContent {
        width: 100%;
        height: 100%;
    }

    .BasketDeletePopupContent {
        width: 300px;
    }

    .FavoriteDeletePopupContent {
        width: 300px;
    }

    .BasketDeletePopupBody {
        margin: 30px 30px;
    }

    .NavWrapper {
        margin: 20px;
    }

    .GenderMaleText {
        margin: 30px;
    }

    .StoreContent {
        width: 450px;
    }

    .StorePopupBody {
        margin: 60px 40px;
    }

    .CategoryBar {
        height: 30px;
    }
    /* .searchForm{
        padding:2px 0;
    }*/
    #SelectedCargoDownArrow {
        font-size: 12px;
    }

    .CategoryBar svg {
        width: 20px;
        height: 20px;
    }

    .footer-basic {
        box-shadow: none;
    }

    .One #MobileCategoryDrawer {
        width: 75%;
        right: -75%;
    }

    .MobileCategoryTitle {
        width: 100%;
    }

    .MobileBannerWrapper {
        display: block;
        margin-right: 0;
        margin-left: 0;
    }

    .CustombannerClass {
        display: none;
    }

    .bannerwebwr {
        display: none;
    }

    .bannermobilewr {
        display: block;
    }

    #ToastWrapper {
        top: 120px;
    }

    .toast[show=true] {
        opacity: 1 !important;
        animation: 1s;
        /*animation-delay:150ms;*/
        /*background: #038C0C;*/
        background: #13b44c;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        position: relative;
        width: 200px;
        height: auto;
        padding: 5px;
    }

    .toast-message {
        font-size: 14px;
    }

    .CustomHeaderBackground2 {
       /* border-top: 112px solid var(--TspDrk);*/
    }

    .SearchIcon {
        top: 12px;
        left: 12px;
        font-size: 18px;
    }

    #SearchText .dx-button-text {
        line-height: 32px;
    }

    .AutoComplete {
        padding: 0;
    }

    .AutoCompleteSuggestionItem {
        font-size: 13px;
    }

    .AutoCompleteSuggestionContent > .ContentBoxInfo {
        display: none;
    }

    .SearchInput {
        /*margin: 5px 0;*/
    }

    #SearchText .dx-texteditor-input-container {
        margin-left: 26px;
    }

    .FavoriteDeletePopupBody {
        margin: 30px 10px 15px 10px;
    }

    .NewPasswordPopupContent {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .mailActivetedImg {
        width: 200px;
        height: 200px;
    }

    .mailActivetedInfo > h1 {
        font-size: 30px !important;
    }
}

@media(max-width:510px) {
    #Card .EditSection {
        width: 100%;
    }
}

@media(max-width:500px) {
    /*.TopSticky{
        display:none;
    }*/
    .MobileHeader {
        display: block;
    }

    .MobileSearchWrapper {
        display: block;
    }

    .MobileCategoryWrapper {
        display: block;
    }

    .MobileTopSpace {
        height: 60px;
    }

    .StoreContent {
        width: 400px;
    }

    .StorePopupBody {
        margin: 60px 40px;
    }

    .storePopupInfo {
        font-size: 15px;
    }

    .StoreBtn {
        font-size: 13px;
    }
}

@media(max-width:480px) {
}

@media(max-width:450px) {
    /*.DeliveryPopupTitle{
        margin-left:19%;
    }*/
    .StoreListOne {
        max-height: 200px;
    }

    .DateListOne {
        max-height: 200px;
    }

    .TimeListOne {
        max-height: 160px;
    }

    .ShowCaseShowAll > a {
        font-size: 12px;
    }

    .MobileCompanyLogo {
        /*float: left;*/
        width: 36%;
        /*margin: 18px 0 10px 17px;*/
    }

    .StoreContent {
        width: 350px;
    }

    .StorePopupBody {
        margin: 60px 17px;
    }

    .storePopupInfo {
        font-size: 15px;
    }

    .filterIcon {
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }

    #Account {
        margin-left: 5px;
    }
}

@media(max-width:410px) {
    /*.DeliveryPopupTitle{
        margin-left:4%;
    }*/
    #messageClose {
        margin: 20px 90px 0 0;
    }

    .ShipmentFromShopWrapper {
        padding: 33px 0 14px 25px;
    }
    /*.TakeAwayWrapper {
        padding: 33px 0 14px 25px;
    }*/
    .RadioContainer {
        font-size: 14px;
    }

    .DeliveryPopupIcon {
        width: 20px;
    }

    .TakeAwayWrapper {
        margin-top: 0;
        height: 60px;
        padding: 20px 0 0 50px;
    }
    /*.ShowCaseShowAll{
        padding-right:10px;
    }*/
    .tabTopItem {
        padding: 0;
    }

    .ShowcaseTitle {
        font-size: 17px;
    }

    .StoreContent {
        width: 312px;
    }

    .StorePopupBody {
        margin: 60px 12px;
    }

    .storePopupInfo {
        font-size: 14px;
    }

    .StoreBtn {
        font-size: 12px;
    }

    #SearchText .dx-button-has-text {
        min-width: 50px;
    }

    .NewPasswordPopupBody {
        padding: 60px 40px;
    }
}
    @media(max-width:350px) {
        .DeliveryPopupTitle {
            margin-left: 4%;
        }

        .ShipmentFromShopWrapper {
            padding: 33px 0 14px 15px;
        }

        /*.TakeAwayWrapper {
        padding: 33px 0 14px 15px;
    }*/

        .RadioContainer {
            font-size: 14px;
        }

        .DeliveryPopupIcon {
            width: 20px;
        }

        .DeliveryPopupButtonName {
            padding: 10px;
        }

        .MobileCompanyLogo {
            width: 40%;
        }
    }

    @media(max-width:326px) {
        .DeliveryPopupTitle {
            margin-left: 4%;
        }

        .ShipmentFromShopWrapper {
            padding: 33px 0 14px 8px;
        }

        /*.TakeAwayWrapper {
        padding: 33px 0 14px 8px;
    }*/

        .RadioContainer {
            font-size: 14px;
        }

        .DeliveryPopupIcon {
            width: 20px;
        }

        .DeliveryPopupButtonName {
            padding: 10px;
        }

        .MobileCompanyLogo {
            width: 44%;
        }

        .BasketDeletePopupBody {
            margin: 30px 20px;
        }

        .StoreContent {
            width: 250px;
        }

        .StorePopupBody {
            margin: 49px 12px;
        }
    }

    @media(max-width:290px) {
        .BasketDeletePopupContent {
            width: 265px;
        }

        .FavoriteDeletePopupContent {
            width: 265px;
        }

        .StoreContent {
            width: 222px;
        }

        .StorePopupBody {
            margin: 46px 8px;
        }
    }


    @media(max-width:768px) and (min-height:1000px) {
        .CategoryBarDropdown {
            height: 30px;
        }
    }

    @media(max-width:568px) and (min-height:545px) {
        #CustomerSelectionWrapperInner {
            max-height: 350px;
        }
    }

    #PhoneCodeBtn:hover {
        transition: ease;
        background-color: #e5e5e5;
    }


.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading-spinner {
    width: 40px;
    height: 40px !important;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid red;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: auto;
}
.loading-text {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}
/* Dönen animasyon */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}