/* input(16,40): run-time error CSS1034: Expected closing parenthesis, found ','
input(16,40): run-time error CSS1042: Expected function, found ','
input(16,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(19,27): run-time error CSS1034: Expected closing parenthesis, found ','
input(19,27): run-time error CSS1042: Expected function, found ','
input(19,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(20,26): run-time error CSS1034: Expected closing parenthesis, found ','
input(20,26): run-time error CSS1042: Expected function, found ','
input(20,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(21,28): run-time error CSS1034: Expected closing parenthesis, found ','
input(21,28): run-time error CSS1042: Expected function, found ','
input(21,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(361,37): run-time error CSS1046: Expect comma, found '0'
input(361,41): run-time error CSS1046: Expect comma, found '/'
input(487,37): run-time error CSS1046: Expect comma, found '0'
input(487,41): run-time error CSS1046: Expect comma, found '/'
input(502,37): run-time error CSS1046: Expect comma, found '0'
input(502,41): run-time error CSS1046: Expect comma, found '/'
input(1013,41): run-time error CSS1046: Expect comma, found '0'
input(1013,45): run-time error CSS1046: Expect comma, found '/'
input(1187,25): run-time error CSS1034: Expected closing parenthesis, found ','
input(1187,25): run-time error CSS1042: Expected function, found ','
input(1187,30): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1413,38): run-time error CSS1034: Expected closing parenthesis, found ','
input(1413,38): run-time error CSS1042: Expected function, found ','
input(1413,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1646,45): run-time error CSS1046: Expect comma, found '0'
input(1646,49): run-time error CSS1046: Expect comma, found '/'
input(1647,37): run-time error CSS1046: Expect comma, found '0'
input(1647,41): run-time error CSS1046: Expect comma, found '/'
input(1659,37): run-time error CSS1046: Expect comma, found '0'
input(1659,41): run-time error CSS1046: Expect comma, found '/'
input(1660,45): run-time error CSS1046: Expect comma, found '0'
input(1660,49): run-time error CSS1046: Expect comma, found '/'
input(1803,36): run-time error CSS1034: Expected closing parenthesis, found ','
input(1803,36): run-time error CSS1042: Expected function, found ','
input(1803,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1836,27): run-time error CSS1046: Expect comma, found '0'
input(1836,31): run-time error CSS1046: Expect comma, found '/'
input(1916,21): run-time error CSS1046: Expect comma, found '0'
input(1916,25): run-time error CSS1046: Expect comma, found '/'
input(1920,36): run-time error CSS1034: Expected closing parenthesis, found ','
input(1920,36): run-time error CSS1042: Expected function, found ','
input(1920,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1921,37): run-time error CSS1046: Expect comma, found '0'
input(1921,41): run-time error CSS1046: Expect comma, found '/'
input(1935,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(1935,34): run-time error CSS1042: Expected function, found ','
input(1935,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1939,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(1939,34): run-time error CSS1042: Expected function, found ','
input(1939,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(1955,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(1955,34): run-time error CSS1042: Expected function, found ','
input(1955,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(2193,41): run-time error CSS1046: Expect comma, found '0'
input(2193,45): run-time error CSS1046: Expect comma, found '/'
input(2203,41): run-time error CSS1046: Expect comma, found '0'
input(2203,45): run-time error CSS1046: Expect comma, found '/'
input(2305,41): run-time error CSS1034: Expected closing parenthesis, found ','
input(2305,41): run-time error CSS1042: Expected function, found ','
input(2305,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(2407,37): run-time error CSS1046: Expect comma, found '0'
input(2407,41): run-time error CSS1046: Expect comma, found '/'
input(2407,65): run-time error CSS1046: Expect comma, found '0'
input(2407,69): run-time error CSS1046: Expect comma, found '/'
input(2525,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(2525,30): run-time error CSS1042: Expected function, found ','
input(2525,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(2885,40): run-time error CSS1046: Expect comma, found '0'
input(2885,44): run-time error CSS1046: Expect comma, found '/'
input(2912,44): run-time error CSS1046: Expect comma, found '0'
input(2912,48): run-time error CSS1046: Expect comma, found '/'
input(3080,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3080,30): run-time error CSS1042: Expected function, found ','
input(3080,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3094,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3094,30): run-time error CSS1042: Expected function, found ','
input(3094,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3172,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3172,30): run-time error CSS1042: Expected function, found ','
input(3172,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3185,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3185,30): run-time error CSS1042: Expected function, found ','
input(3185,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3346,40): run-time error CSS1034: Expected closing parenthesis, found ','
input(3346,40): run-time error CSS1042: Expected function, found ','
input(3346,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3539,41): run-time error CSS1046: Expect comma, found '0'
input(3539,45): run-time error CSS1046: Expect comma, found '/'
input(3543,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3543,30): run-time error CSS1042: Expected function, found ','
input(3543,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3548,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(3548,34): run-time error CSS1042: Expected function, found ','
input(3548,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3636,41): run-time error CSS1046: Expect comma, found '0'
input(3636,45): run-time error CSS1046: Expect comma, found '/'
input(3687,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(3687,34): run-time error CSS1042: Expected function, found ','
input(3687,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3755,36): run-time error CSS1034: Expected closing parenthesis, found ','
input(3755,36): run-time error CSS1042: Expected function, found ','
input(3755,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3764,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(3764,34): run-time error CSS1042: Expected function, found ','
input(3764,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3896,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(3896,30): run-time error CSS1042: Expected function, found ','
input(3896,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3970,36): run-time error CSS1034: Expected closing parenthesis, found ','
input(3970,36): run-time error CSS1042: Expected function, found ','
input(3970,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(3980,34): run-time error CSS1034: Expected closing parenthesis, found ','
input(3980,34): run-time error CSS1042: Expected function, found ','
input(3980,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(4051,41): run-time error CSS1046: Expect comma, found '0'
input(4051,45): run-time error CSS1046: Expect comma, found '/'
input(4142,30): run-time error CSS1034: Expected closing parenthesis, found ','
input(4142,30): run-time error CSS1042: Expected function, found ','
input(4142,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(4265,28): run-time error CSS1046: Expect comma, found '50'
input(4265,34): run-time error CSS1046: Expect comma, found '/'
input(4265,65): run-time error CSS1046: Expect comma, found '0'
input(4265,69): run-time error CSS1046: Expect comma, 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: #0459a9;
    --TspLight: #0f6dc7;
}

/*.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;
}*/
#OrderSummaryPager {
    display: flex;
    bottom: 5px;
    width: 100%;
    justify-content: center;
}
.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;
}
.topheaderdropdownarrow {
    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;
    }
.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: 14px;
}
#SelectedDeliveryOptionextra {
    color: white;
    font-size: 14px;
}
.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: #fff;
        margin-top: 5px;
        font-size: 13px;
    }

    .SigninorRegisterText {
        color: white !important;
    }

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

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

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

    .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);
    }

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

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

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

    .SvgLoadingMain {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .SvgLoadingMainl1 {
        width: 210px;
    height: 130px;
    background: url("../image/loading-icon v02.png?v=Z6U5CHIZ6L0hn5wJvReFXOuEKVY");
    position: relative;
    background-size: 210px 130px;
    animation-name: logoanim1;
    animation-duration: 2.1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin: auto;
    margin-top: 20%;
    top:50%;
    left:50%;
    justify-content:center;
    align-items:center;
    transform:translate(-50%,-50%);
    position:fixed;
    }

    @keyframes logoanim1 {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            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');*/
        /*border-top: 20% solid var(--TspDrk);*/
        /*background: #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: 50px;
            padding: 5px;
        }

    .toast-body {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: .3rem .3rem !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;*/
    }

    .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: 999999 !important;
    top:130px;
    /*left:50%;*/
    right:0;
    /*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: none;
    }

        #SearchText .dx-texteditor-buttons-container {
            background: #9FADBF;
            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: #085fae;
        /*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;
    }

    .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: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        user-select: none;
        padding-left: 10px;
    }

        #CategoryHeader > span {
            color: white;
            font-size: 14px;
            font-weight: 600;
            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;
    }

    #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: none;
        margin-top: 10px;
        font-size: 12px;
    }

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

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

    .SelectedTypeOption {
        background-color: #f2f2f2 !important;
        color: #0459a9;
    }

    .CompanyLogo {
    min-width: 115px;
    width:35%;
    /*margin:auto;*/
    margin-bottom:10px;
    }

    .top-logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: start;
        /* flex: 1;*/
        height: 100%;
        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: 77px;
        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(--TspDrk);
    }

        .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;
    }


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

            #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: 200%;
        min-width: 190px;
        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: 5%;
            /*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: 66px;
    }

    .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: 50%;
        transform: translateY(-50%);
        text-align: center;
    }

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


    .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(--TspDrk);
            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: 105px;
        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;
    }

    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%;
        /*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: 600;
        /*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: #1759a7 !important;
        text-decoration: underline;
    }

    .HeaderCategory:hover > #CategoryHeader > i {
        color: #1759a7 !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: 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-radius: 50%;
        display: block;
        z-index: -1;
    }

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

    .AccountHeaderIcon {
        color: #fff !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 {
        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;
    }

    .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;
        box-shadow: 0 0 1px 1px 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 .SVGKey {
        fill: white;
    }

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


    @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)
    }

    #ToolbarBasketWrapper {
        position: relative;
        overflow: hidden;
        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: 90px !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;
        }

        /*.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) {
        .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;
        }

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

        #CategoryDropdown {
            display: none;
        }

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

        #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 var(--TspDrk);
        }
    }

    @media(max-width:660px) {
        .BasketDeletePopupContent {
            width: 350px;
        }

        .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: 20px;
        }
    }

    @media(max-width:410px) {
        /*.DeliveryPopupTitle{
        margin-left:4%;
    }*/
        .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;
        }
    }