@font-face {
    font-family: 'RobotoCondensed';
    src: url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Regular.woff') format('woff'), url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoCondensed';
    src: url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Bold.woff') format('woff'), url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoCondensed';
    src: url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Italic.woff') format('woff'), url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'RobotoCondensed';
    src: url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-BoldItalic.woff') format('woff'), url('https://adoraimages.blob.core.windows.net/fonts/RobotoCondensed-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Led';
    src: url('fonts/digital-7-mono.woff') format('woff'),url('fonts/digital-7-mono.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Kalam';
    src: url('https://adoraimages.blob.core.windows.net/fonts/Kalam-Regular.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/Kalam-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Kalam';
    src: url('https://adoraimages.blob.core.windows.net/fonts/Kalam-Bold.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/Kalam-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'nunito';
    src: url('https://adoraimages.blob.core.windows.net/fonts/nunito-regular.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/nunito-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nunito';
    src: url('https://adoraimages.blob.core.windows.net/fonts/nunito-bold.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/nunito-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PTSans';
    src: url('https://adoraimages.blob.core.windows.net/fonts/ptsans-regular.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/ptsans-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PTSans';
    src: url('https://adoraimages.blob.core.windows.net/fonts/ptsans-bold.woff') format('woff'),url('https://adoraimages.blob.core.windows.net/fonts/ptsans-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

:root {
    /******************/
    /***   General  ***/
    /******************/
    /*--shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,0,0,.4);*/
    --shadow: 0 4px 10px 0 rgba(0,0,0,.14), 0 2px 5px -5px rgba(0,0,0,.4);
    --radius: 3px;
    --placeHolder: #b0b0b0;
    --padding: 0.5rem;
    --padding2: 1rem;
    --margin: 0.5rem;
    --margin2: 1rem;
    --lineHeight: 1.3;
    --backgroundImgUrl: "";
    /******************/
    /***    Fonts   ***/
    /******************/
    --fontBody: 1.0rem PTSans, Arial, sans-serif;
    --font: 1.0rem Arial, sans-serif;
    --fontHeader: 1.35rem Arial, sans-serif;
    --fontTitle1: bold 1.5rem Arial, sans-serif;
    --fontTitle2: bold 1.35rem Arial, sans-serif;
    --fontTitle3: bold 1rem Arial, sans-serif;
    --fontCategory: 1.35rem Arial, sans-serif;
    --fontOrderRegular: 1.2rem Arial, sans-serif;
    --fontOrderStrong: 1.35rem Arial, sans-serif;
    --fontMenuItem: 1rem Arial, sans-serif;
    --fontMenuItemName: bold 1.45rem RobotoCondensed, Arial, sans-serif;
    --fontMenuItemDescription: 1rem RobotoCondensed, Arial, sans-serif;
    --fontInput: 1.2rem Arial, sans-serif;
    --fontButton: 1.2rem Arial, sans-serif;
    /******************/
    /***   Colors   ***/
    /******************/
    --colorFocuse: #000000;
    --colorText: #333333;
    --colorInputBg: #ffffff;
    --colorFocusBg: bisque;
    --colorBg: #fefefe;
    --colorBgCard: #f5f5f5;
    --colorTheme: #efefef;
    --colorThemeSecondary: #8ED1C0;
    --colorThemeBg: #E15D26;
    --colorHover: #E15D26;
    --colorActive: #3895D3;
    --colorBorder: #cfcfcf;
    --colorWarning: #ff0000;
    --colorDefMod: var(--colorText);
    --colorAddMod: green;
    --colorAdjustMod: red;
    --colorDisabled: #a1a1a1;
    /******************/
    /***   Header   ***/
    /******************/
    --hedBgColor: var(--colorBg);
    --hedHeight: 100px;
    --hedCartColor: #000000;
    --hedCartFontSize: 220px;
    --hedCartFontSizeXXX: 170px;
    /*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /*XXXXXXXXXXXXXXX More Customizations XXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    /******************/
    /***   Button   ***/
    /******************/
    --btnColor: var(--colorTheme);
    --btnColorBg: var(--colorThemeBg);
    --btnColorHover: var(--colorTheme);
    --btnColorBgHover: var(--colorHover);
    --btnColorActive: var(--colorTheme);
    --btnColorDisabled: var(--colorTheme);
    --btnColorBgActive: var(--colorActive);
    --btnPadding: 0.65rem 1rem;
    --btnBorder: none;
    --btnRadius: var(--radius);
    /*----icon----*/
    --btnIconColor: var(--colorThemeBg);
    --btnIconColorBg: var(--colorBgCard);
    --btnIconRadius: 5px;
    --btnIconPadding: 0px 3px;
    --btnIconFontSize: 1.2rem;
    /*----link----*/
    --btnLinkColor: var(--colorText);
    /******************/
    /*** Categories ***/
    /******************/
    --catColor: var(--colorTheme);
    --catColorBg: var(--colorThemeBg);
    --catColorHover: var(--colorHover);
    --catColorActive: var(--colorActive);
    --catPadding: 1rem;
    /*--catBorder: 1px dotted var(--btnColor);*/
    --catBorder: 3px solid var(--colorBg);
    --catTextAlign: center;
    --catFontSize: 1.5rem;
    --catTextCase: uppercase;
    /******************/
    /***   Order    ***/
    /******************/
    --ordBgImage: "";
    --ordBgColor: var(--colorBgCard);
    --ordBgMargin: var(--margin);
    --ordBgPadding: var(--padding);
    --ordPadding: var(--padding);
    --ordLines: 2px solid var(--colorBorder);
    --ordItemLines: 1px dotted var(--colorBorder);
    --ordWidth: 400px;
    /******************/
    /***  Menu Item ***/
    /******************/
    --itmBorder: 1px solid var(--colorBorder);
    --itmFontSize: 1rem;
    --itmColorBG: var(--colorBgCard);
    --itmhHeight: 120px;
    --itmvWidth: 340px;
    /******************/
    /***  Dialog ******/
    /******************/
    --diBorder: 1px solid var(--colorBorder);
    --diColorBg: var(--colorBgCard);
    /******************/
    /*** Order Type ***/
    /******************/
    font-size: 16px;
    /******************/
    /*** Dark mode ****/
    /******************/
    --darkColorText: #efefef;
    --darkColorInputBg: #333333;
    --darkColorFocusBg: #444444;
    --darkColorFocus: #fefefe;
    --darkColorBg: #1E1E1E;
    --darkColorBgCard: #1A1A1A;
    --darkColorTheme: #FFFFFF;
    --darkColorThemeBg: #962135;
    --darkColorThemeSecondary: #FDB826;
    --darkColorHover: #C25160;
    --darkColorActive: #B24150;
    --darkColorBorder: #962135;
    --darkColorWarning: #ff9090;
    --darkColorDefMod: #0000e0;
    --darkColorAddMod: #00e000;
    --darkColorAdjustMod: #ff9090;
    --darkHedBgColor: #1E1E1E;
    --darkHedHeight: 100px;
    --darkHedCartColor: #FDB826;
    --darkHedCartFontSize: 220px;
    --darkHedCartFontSizeXXX: 170px;
    /******************/
    /***   Button   ***/
    /******************/
    --darkBtnColor: #efefef;
    --darkBtnColorBg: var(--colorThemeBg);
    --darkBtnColorHover: var(--colorTheme);
    --darkBtnColorBgHover: var(--colorHover);
    --darkBtnColorActive: var(--colorTheme);
    --darkBtnColorDisabled: var(--colorTheme);
    --darkBtnColorBgActive: var(--colorActive);
    --darkBtnPadding: 0.65rem 1rem;
    --darkBtnBorder: none;
    --darkBtnRadius: var(--radius);
    /*----icon----*/
    --darkBtnIconColor: var(--colorThemeBg);
    --darkBtnIconColorBg: var(--colorBgCard);
    --darkBtnIconRadius: 5px;
    --darkBtnIconPadding: 0px 3px;
    --darkBtnIconFontSize: 1.2rem;
    /*----link----*/
    --darkBtnLinkColor: var(--colorText);
    /******************/
    /*** Categories ***/
    /******************/
    --darkCatColor: var(--colorTheme);
    --darkCatColorBg: var(--colorThemeBg);
    --darkCatColorHover: var(--colorHover);
    --darkCatColorActive: var(--colorActive);
    --darkCatPadding: 1rem;
    /*--catBorder: 1px dotted var(--btnColor);*/
    --darkCatBorder: 3px solid var(--colorBg);
    --darkCatTextAlign: center;
    --darkCatFontSize: 1.5rem;
    --darkCatTextCase: uppercase;
    /******************/
    /***   Order    ***/
    /******************/
    --darkOrdBgImage: "";
    --darkOrdBgColor: var(--colorBgCard);
    --darkOrdBgMargin: var(--margin);
    --darkOrdBgPadding: var(--padding);
    --darkOrdPadding: var(--padding);
    --darkOrdLines: 2px solid var(--colorBorder);
    --darkOrdItemLines: 1px dotted var(--colorBorder);
    --darkOrdWidth: 400px;
    /******************/
    /***  Menu Item ***/
    /******************/
    --darkItmBorder: 1px solid var(--colorBorder);
    --darkItmFontSize: 1rem;
    --darkItmColorBG: var(--colorBgCard);
    --darkItmhHeight: 120px;
    --darkItmvWidth: 365px;
    /******************/
    /***  Dialog ******/
    /******************/
    --darkDiBorder: 1px solid var(--colorBorder);
    --darkDiColorBg: var(--colorBgCard);
    --darkShadow: 0 4px 10px 0 rgba(255,255,255,.14), 0 2px 5px -5px rgba(255,255,255,.4);
    --darkBackgroundImgUrl: none;
}

/******************/
/***   Global   ***/
/******************/
html {
    font-size: 16px;
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    background: var(--colorBg);
    background-image: var(--backgroundImgUrl);
    color: var(--colorText);
    padding: 0;
    margin: 0;
    line-height: var(--lineHeight);
    font: var(--fontBody);
    transition-property: background;
    transition-duration: 0.3s;
}

.altBackground {
    background-color: var(--colorBg);
    filter: brightness(95%);
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2;
}

.colorThemeSecondary {
    color: var(--colorThemeSecondary);
}

.colorThemeBg {
    color: var(--colorThemeBg);
}

button {
    color: var(--btnColor);
    background-color: var(--btnColorBg);
    padding: var(--btnPadding);
    border: var(--btnBorder);
    border-radius: var(--btnRadius) !important;
    font: var(--fontButton);
    cursor: pointer;
}

    /*    button:hover {
        color: var(--btnColorHover);
        background-color: var(--btnColorBgHover);
        transition: all 0.5s ease-out;
    }*/

    button:active {
        color: var(--btnColorActive);
        background-color: var(--btnColorBgActive);
    }

    button:disabled {
        color: var(--colorDisabled);
        background-color: var(--colorDisabled);
    }

label {
    font: var(--fontBody);
    font-weight: normal;
}

select {
    color: var(--colorText);
    touch-action: manipulation;
    font-size: 1rem;
    width: 100%;
    padding: 0.75rem 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--colorBorder);
    background-color: var(--colorInputBg);
}

    select:focus {
        background-color: var(--colorFocusBg);
    }

    select option {
        margin: var(--margin);
        background: var(--colorInputBg);
        height: 30px;
        padding: 0.5rem 0;
        line-height: 5;
    }

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--placeHolder);
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--placeHolder);
    opacity: 0;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeHolder);
}



textarea,
input {
    touch-action: manipulation;
    color: var(--colorText);
    font-size: 1rem;
    border: 0;
    border-bottom: 1px solid var(--colorBorder);
    background-color: var(--colorInputBg);
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0.75rem;
    cursor: text;
}

    textarea:focus,
    input:focus {
        background-color: var(--colorFocusBg);
    }

textarea {
    width: 100%;
    resize: vertical;
    min-height: 5rem;
    font-size: 1.2rem;
}

.dialogFaded {
    transition: opacity 0.4s ease-in-out;
}


dialog {
    background-color: var(--diColorBg);
    border: 1px solid var(--colorThemeSecondary);
    border-radius: var(--radius);
    opacity: 0.0;
    max-height: 95vh;
    overflow-y: auto;
    position: fixed;
    /*width:75vw;*/
    /*color: var(--colorText);
	 top: 50%; 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);	
	*/
}

    dialog::backdrop {
        background-color: black;
        opacity: 0.80;
    }

.fadeout::backdrop {
    opacity: 0;
}

.fontSmall {
    font-size: 0.8rem;
}
/******************/
/***   General  ***/
/******************/
.autoHeight {
    height: auto !important;
    min-height: unset !important;
}

.autoWidth {
    width: max-content !important;
    min-width: unset !important;
}

.modDef {
    color: var(--colorDefMod);
}

.modAdd {
    color: var(--colorAddMod);
}

.modAdjust {
    color: var(--colorAdjustMod);
}

.opacity0 {
    opacity: 0;
}

.opacity1 {
    opacity: 1;
}

.field {
    display: flex;
    flex-flow: column-reverse;
    /*    margin-bottom: 0.5rem;*/
    font: var(--fontInput);
}
    /**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the 
* pesky delay.
*/
    .field label,
    .field input {
        transition: all 0.2s;
        touch-action: manipulation;
        color: var(--colorText);
    }

    .field input {
        font-size: 1rem;
        border: 0;
        border-bottom: 1px solid var(--colorBorder);
        background-color: var(--colorInputBg);
        font-family: inherit;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 0.75rem;
        cursor: text;
    }

        .field input:focus {
            outline: 0;
            background-color: var(--colorFocusBg);
        }

    .field label {
        font-size: 1rem;
        letter-spacing: 0.05em;
        padding-left: var(--padding);
    }
    /**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
    .field input:placeholder-shown + label {
        cursor: text;
        max-width: 66.66%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform-origin: left bottom;
        transform: translate(0, 1.825rem) scale(1.2);
    }
    /**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/
    .field ::-webkit-input-placeholder {
        opacity: 0;
        transition: inherit;
    }
    /**
* Show the placeholder when the input is focused.
*/
    .field input:focus::-moz-placeholder {
        opacity: 1;
    }

    .field input:focus::-webkit-input-placeholder {
        opacity: 1;
    }
    /**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/
    .field input:not(:placeholder-shown) + label,
    .field input:focus + label {
        transform: translate(0, 0) scale(1);
        cursor: pointer;
    }

.accordion {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    padding: 0 !important;
}

.accordion_Open {
    max-height: 500px !important;
    transition: max-height 0.5s ease-in !important;
}

.checkRadio {
    position: relative;
    margin-bottom: var(--margin);
    margin-top: var(--margin);
    color: var(--colorText);
}

    /*style label to give some more space*/
    .checkRadio label {
        display: inline-block;
        padding: 0.2rem 0 0.3rem 33px;
        cursor: pointer;
    }

    /*style and hide original checkbox*/
    .checkRadio input {
        position: absolute;
        top: 0;
        left: 0;
        height: 2rem;
        width: 2rem;
        opacity: 0;
    }

        /*position new box*/
        .checkRadio input[type="radio"] + label::before {
            border: 2px solid;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 28px;
            width: 28px;
            border-radius: 50%;
            color: var(--btnColorBg);
            background-color: var(--colorInputBg);
        }
        /*position new box*/
        .checkRadio input[type="checkbox"] + label::before {
            border: 2px solid;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 28px;
            width: 28px;
            color: var(--btnColorBg);
            border-radius: 3px;
            background-color: var(--colorInputBg);
        }

        .checkRadio input:disabled + label {
            opacity: 0.65;
        }

            .checkRadio input:disabled + label::before {
                opacity: 0.35;
            }
        /*radio pseudo element styles*/
        .checkRadio input[type="radio"] + label::after {
            content: "";
            opacity: 0;
            border: 8px solid;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            top: 6px;
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColorBg);
        }

        /*create check symbol with pseudo element*/
        .checkRadio input[type="checkbox"] + label::after {
            content: "";
            border: 0.25rem solid;
            border-left: 0;
            border-top: 0;
            height: 1.2rem;
            width: 0.60rem;
            position: absolute;
            top: 2px;
            left: 9px;
            opacity: 0;
            transform: rotate(40deg);
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColorBg);
        }

        /*reveal check for 'on' state*/
        .checkRadio input:checked + label::after {
            opacity: 1;
        }

        /*focus styles*/
        .checkRadio input:focus + label::before {
            /*box-shadow: 0 0 0 3px black;*/
            outline: 3px dotted var(--colorFocuse); /* For Windows high contrast mode. */
        }

.warning {
    color: var(--colorWarning) !important;
}

.lineThrough {
    text-decoration: line-through;
}

.btnIcon {
    border: none;
    color: var(--btnIconColor);
    background-color: transparent;
    padding: var(--btnIconPadding) !important;
    margin-left: 0.5rem;
    border-radius: var(--btnIconRadius);
}

.uppercase {
    text-transform: uppercase;
}

.btnLink {
    border: none;
    background-color: transparent;
    color: var(--btnLinkColor);
    font-size: 1rem;
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0;
    text-decoration: underline;
}

.pencil:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: var(--btnIconFontSize);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f040";
}

.sun:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: var(--btnIconFontSize);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f042";
    color: var(--colorText);
}

.remove:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: var(--btnIconFontSize);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f00d";
}

.block {
    display: block;
}

.width100 {
    width: 100%;
}

.width75_resp {
    width: 75%;
}

.p {
    padding: var(--padding);
}

.p-t {
    padding-top: var(--padding);
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.p-b {
    padding-top: 0 !important;
    padding-bottom: var(--padding);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.p-tb {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: var(--padding) !important;
    padding-bottom: var(--padding) !important;
}

.p-l {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--padding) !important;
}

.p-r {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: var(--padding) !important;
}

.p-lr {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--padding) !important;
    padding-right: var(--padding) !important;
}

.p-0 {
    padding: 0;
}

.m {
    margin: var(--margin);
}

.m-t {
    margin: 0;
    margin-top: var(--margin);
}

.m-b {
    margin: 0;
    margin-bottom: var(--margin);
}

.m-tb {
    margin: 0;
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

.m-l {
    margin: 0;
    margin-left: var(--margin);
}

.m-r {
    margin: 0;
    margin-right: var(--margin);
}

.m-lr {
    margin: 0;
    margin-left: var(--margin);
    margin-right: var(--margin);
}

.m-0 {
    margin: 0;
}

.m2 {
    margin: var(--margin2);
}

.m2-t {
    margin: 0;
    margin-top: var(--margin2);
}

.m2-b {
    margin: 0;
    margin-bottom: var(--margin2);
}

.m2-tb {
    margin: 0;
    margin-top: var(--margin2);
    margin-bottom: var(--margin2);
}

.m2-l {
    margin: 0;
    margin-left: var(--margin2);
}

.m2-r {
    margin: 0;
    margin-right: var(--margin2);
}

.m2-lr {
    margin: 0;
    margin-left: var(--margin2);
    margin-right: var(--margin2);
}





.shadow {
    box-shadow: var(--shadow);
}

.active {
    background-color: var(--btnColorActive);
}

.downArrow:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f078";
    color: var(--btnColor);
}

.upArrow:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f077";
    color: var(--btnColor);
}

.inline {
    display: inline-block;
}

.hidden {
    display: none !important;
}

.hidden_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.inline_label {
    padding-top: 0.8rem;
    text-align: right;
}

.text {
    color: var(--textColor);
    line-height: 1.3;
}

.hLine {
    height: 2px;
    border-width: 0;
    color: var(--colorBorder);
    background-color: var(--colorBorder);
}

.title1 {
    font: var(--fontTitle1);
    padding-bottom: var(--padding);
    color: var(--colorThemeSecondary);
}

.title2 {
    font: var(--fontTitle2);
    padding-bottom: var(--padding);
    margin-bottom: var(--padding);
    display: block;
    color: var(--colorThemeSecondary);
}

.title3 {
    font: var(--fontTitle3);
    color: var(--colorThemeSecondary);
    padding-top: var(--padding);
    padding-right: var(--padding);
    padding-bottom: var(--padding);
    padding-left: 0;
}

.lang {
    margin-right: var(--margin);
    position: absolute;
    right: 0px;
    top: 5px;
    overflow: hidden;
    white-space: nowrap;
}

.readOnly {
    border-bottom: 1px solid var(--colorBorder);
    padding: var(--padding);
    display: inline-block;
}

.lineTheme100 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 0px;
    background-color: transparent;
    border: none;
    border-bottom: var(--ordLines);
    border-color: var(--colorThemeBg);
}

.lineTheme80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 0px;
    background-color: transparent;
    border: none;
    border-bottom: var(--ordLines);
    border-color: var(--colorThemeBg);
}

.lineThemeDot75 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    height: 0px;
    background-color: transparent;
    border: none;
    border-bottom: 2px dotted var(--colorThemeSecondary);
}

.upsaleImage {
    min-height: 180px;
    max-height: 180px;
}
/******************/
/***   Layout   ***/
/******************/
.header {
    background: var(--hedBgColor);
    font: var(--fontHeader);
    height: var(--hedHeight);
    display: -ms-grid;
    display: grid;
    /*grid-gap: 10px;*/
    -ms-grid-columns: auto auto 1fr;
    grid-template-columns: auto auto 1fr;
    overflow: hidden;
    width: 100%;
}

    .header .logo {
        margin-right: var(--margin);
        -ms-grid-column: 1;
        grid-column: 1;
    }

        .header .logo > img {
            max-height: calc(var(--hedHeight) - 1rem);
        }

    .header .storeInfo {
        -ms-grid-column: 2;
        grid-column: 2;
        padding-top: 2rem;
        line-height: 0.75;
        overflow-x: hidden;
        font-size: clamp(0.85rem, 2.5vw, 1.25rem);
    }

    .header .custom {
        padding: var(--padding);
        -ms-grid-column: 3;
        grid-column: 3;
        text-align: right;
        margin-top: 1.5rem;
    }

    .header .cart {
        padding: var(--padding);
        height: calc(var(--hedHeight) - 1rem);
        width: calc(var(--hedHeight) - 1rem);
        display: none;
        margin-top: 1.5rem;
    }

    .header .storeInfoName {
        display: block;
    }

    .header .storeInfoAddr {
        font: var(--fontHeader);
        display: inline-block;
    }

    .header .cartButton {
        height: calc(var(--hedHeight) - 2rem);
        width: calc(var(--hedHeight) - 2rem);
        padding: 0.5rem;
    }

    .header .cartSvg {
        fill: var(--hedCartColor);
        font: var(--fontTitle1);
        font-size: var(--hedCartFontSize);
    }

.gridCols1x1x_resp,
.gridCols1x1x {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

.gridCols1x1x1x1x {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gridCols1x1x1x1x1x {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.gridColsAuto1x_resp,
.gridColsAuto1x {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
}


.gridColsAuto1xAuto {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
}

.gridCols1xAuto {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
}

.gridColsAutoAuto {
    display: -ms-grid;
    display: grid;
    grid-gap: 5px;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.gridColsAutoAuto1x {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: auto auto 1fr;
    grid-template-columns: auto auto 1fr;
}

.gridCol1 {
    -ms-grid-column: 1;
    grid-column: 1;
}

.gridCol2 {
    -ms-grid-column: 2;
    grid-column: 2;
}

.gridCol3 {
    -ms-grid-column: 3;
    grid-column: 3;
}

.gridCol4 {
    -ms-grid-column: 4;
    grid-column: 4;
}

.gridCol5 {
    -ms-grid-column: 5;
    grid-column: 5;
}
/******************/
/*** Categories ***/
/******************/
.catLink {
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0px;
}

.container {
    margin-top: var(--hedHeight);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    grid-template-columns: 200px 1fr;
}

    .container .categories {
        -ms-grid-column: 1;
        grid-column: 1;
        background-color: var(--colorBg);
    }

        .container .categories > div {
            position: fixed;
            top: var(--hedHeight);
            bottom: 0;
            overflow-y: auto;
            padding-right: 0px;
            width: 200px;
        }

        .container .categories a {
            color: var(--catColor);
            background-color: var(--catColorBg);
            font: var(--fontCategory);
            font-size: var(--catFontSize);
            text-transform: var(--catTextCase);
            text-align: var(--catTextAlign);
            border-bottom: var(--catBorder);
            margin: 0;
            display: block;
            cursor: pointer;
            border-top-right-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
            border-radius: 0 !important;
        }

            .container .categories a:before {
                border-radius: 0 !important;
            }

            .container .categories a > div {
                padding: 0.5em;
            }

    .container .items_Order {
        -ms-grid-column: 2;
        grid-column: 2;
        background-color: aquamarine;
    }
/*top category */
.containerTopCat {
    margin-top: var(--hedHeight);
}

.categoriesTopCat {
}

.categoryItemsTopCat {
    display: flex;
    position: fixed;
    top: var(--hedHeight);
    background-color: var(--colorBg);
    box-shadow: var(--shadow);
    width: 100%;
    z-index: 2;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-y: hidden;
    overflow-x: auto;
}

    .categoryItemsTopCat a {
        color: var(--catColor);
        background-color: var(--catColorBg);
        font: var(--fontCategory);
        font-size: var(--catFontSize);
        text-transform: var(--catTextCase);
        text-align: var(--catTextAlign);
        border-right: var(--catBorder);
        /*margin-right: 2px;*/
        flex-grow: 1;
        flex-shrink: 0;
        /*flex: 1;*/
        cursor: pointer;
        border-radius: 0;
    }

        .categoryItemsTopCat a:before {
            border-radius: 0 !important;
            background-color: var(--catColorHover);
        }

        .categoryItemsTopCat a > div {
            padding: 0.5em 0px;
            white-space: nowrap;
        }

.categoryItemsTopCats a:last-child {
    margin: 0;
}

.containerTopCat .boxTopperContainer {
    top: calc(var(--hedHeight) + 3rem);
}

#divCategoriesArrow {
    display: none;
    font: var(--fontCategory);
    font-size: var(--catFontSize);
    padding: 0.5em;
    white-space: nowrap;
    color: var(--catColor);
    background-color: var(--colorThemeBg) !important;
    z-index: 2000;
    height: 4rem;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    vertical-align: middle;
}

    #divCategoriesArrow:after {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: "\f078";
        color: var(--btnColor);
        position: absolute;
        right: 2rem;
    }
/**************************************/
/*********** Order ********************/
/**************************************/
.CouponCodeInput {
    max-width: calc(var(--ordWidth) - 12rem);
}

.orderBackrgound {
    background: var(--ordBgImage);
    margin: var(--ordBgMargin);
    padding: var(--ordBgPadding);
    min-width: calc(var(--ordWidth) - 1rem);
    max-width: calc(var(--ordWidth) - 1rem);
    background-color: VAR(--colorThemeSecondary);
    border-radius: var(--radius);
}

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.order {
    font: var(--fontOrderRegular);
    background-color: var(--ordBgColor);
    padding: var(--ordPadding);
}

.orderItems {
    margin-top: calc(var(--hedHeight) + 4rem);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: var(--ordWidth) 1fr;
    grid-template-columns: var(--ordWidth) 1fr;
}

.itemsOrder {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr var(--ordWidth);
    grid-template-columns: 1fr var(--ordWidth);
    font: var(--fontMenuItem);
}

.itemsOrderTopCats {
    margin-top: calc(var(--hedHeight) + 4rem);
}

.itemsCol1 {
    -ms-grid-column: 1;
    grid-column: 1;
    padding: 1rem;
}

.itemsCol2 {
    -ms-grid-column: 2;
    grid-column: 2;
    padding: 1rem;
}

.orderCol1 {
    -ms-grid-column: 1;
    grid-column: 1;
    /*  overflow-x: hidden;*/
    position: relative;
}

.orderCol2 {
    -ms-grid-column: 2;
    grid-column: 2;
    /* overflow-x: hidden;*/
    position: relative;
}

.orderItem {
    margin-bottom: 1rem;
}

.orderLine {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 0px;
    background-color: transparent;
    border: none;
    border-bottom: var(--ordLines);
}

.orderItemLine {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    height: 0px;
    background-color: transparent;
    border: none;
    border-bottom: var(--ordItemLines);
}

.orderItemNameQty {
    border: none;
    font: var(--fontOrderStrong);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--colorBorder);
    background-color: var(--ordBgColor);
    padding: 0px;
    height: auto;
    min-height: unset;
    max-height: unset;
}

.orderItemName {
    display: grid;
    -ms-grid-columns: auto 7fr auto auto;
    grid-template-columns: auto 7fr auto auto;
    font: var(--fontOrderStrong);
}

.orderItemCoupon {
    text-align: center;
    color: var(--btnColorBg);
    font-size: 0.9rem;
}

.totals {
    margin-bottom: 1rem;
}

.totalLine {
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
}

.totalLineParaValue {
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
}

    .totalLineParaValue > div:first-of-type {
        -ms-grid-column: 1;
        grid-column: 1;
    }

    .totalLineParaValue > div:last-of-type {
        -ms-grid-column: 2;
        grid-column: 2;
        text-align: right;
    }


.totalLineCoupon {
    display: grid;
    -ms-grid-columns: 7fr auto auto;
    grid-template-columns: 7fr auto auto;
    font: var(--fontOrderStrong);
    font-size: 1rem;
}

    .totalLineCoupon > div:first-of-type {
        -ms-grid-column: 1;
        grid-column: 1;
    }

    .totalLineCoupon > div:nth-child(2) {
        -ms-grid-column: 2;
        grid-column: 2;
        text-align: right;
    }

    .totalLineCoupon > button {
        -ms-grid-column: 3;
        grid-column: 3;
    }

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.margin-left {
    margin-left: 1rem;
}

#divOrderAddress1 {
    font-size: smaller;
}

#divOrderAddress2 {
    font-size: smaller;
}
/**************************************/
/********** Menu Items ****************/
/**************************************/
.menuItemName {
    font: var(--fontMenuItemName);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.categoryHeader {
    grid-column: 1 / -1;
    overflow: hidden;
    text-align: center;
    /*margin-top:2rem;*/
}

.categoryHeaderText {
    font-family: var(--fontTitle1);
    display: inline-block;
    position: relative;
    color: var(--colorThemeSecondary);
    font-weight: bold;
    text-transform: uppercase;
}

    .categoryHeaderText:before {
        display: inline-block;
        position: absolute;
        /*        z-index: 1;*/
        width: 100vw;
        height: 8px;
        background-color: var(--colorThemeBg);
        content: '';
        top: 50%;
        -webkit-transform: translate(0%,-50%);
        transform: translate(0%,-50%);
        right: calc(100% + 5px);
    }

    .categoryHeaderText:after {
        display: inline-block;
        position: absolute;
        /*      z-index: 1;*/
        width: 100vw;
        height: 8px;
        background-color: var(--colorThemeBg);
        content: '';
        top: 50%;
        -webkit-transform: translate(0%,-50%);
        transform: translate(0%,-50%);
        left: calc(100% + 5px);
    }

/*----------------*/
.hMenuItems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px,1fr));
}

.hMenuItem {
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

    .hMenuItem > button {
        margin: var(--margin);
        border-radius: var(--radius);
        border: var(--itmBorder);
        background-color: var(--itmColorBG);
        color: var(--colorText);
        display: flex;
        padding: 0;
        text-align: left;
        width: calc(100% - var(--margin) - var(--margin));
    }

        .hMenuItem > button:focus {
            box-shadow: 0 0 4px 2px var(--btnColorBg);
            border-color: var(--btnColorBg);
            outline: 0;
        }

        .hMenuItem > button:hover {
            box-shadow: 0 0 4px 2px var(--btnColorBgHover);
            border-color: var(--btnColorBgHover);
        }

.hMenuItemContent {
    min-width: 0;
    flex: 1 0 0%;
}

.hMenuItemDescription {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font: var(--fontMenuItemDescription);
}

.hMenuItemImgLeft {
    flex-shrink: 0;
    width: var(--itmhHeight);
    height: var(--itmhHeight);
    background-size: cover;
    background-position: 50%;
    position: relative;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.hMenuItemImgRight {
    flex-shrink: 0;
    width: var(--itmhHeight);
    height: var(--itmhHeight);
    background-size: cover;
    background-position: 50%;
    position: relative;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.vMenuItems {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--itmvWidth),1fr));
}

.vMenuItem {
    border: var(--itmBorder);
    margin: var(--margin);
    border-radius: var(--radius);
    background-color: var(--itmColorBG);
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(12vw,auto) 1fr auto;
}

    .vMenuItem img {
        width: 100% !important;
        /*max-height:250px;*/
    }

    .vMenuItem > div:first-of-type {
        padding: var(--padding);
        vertical-align: top;
    }

        .vMenuItem > div:first-of-type > span {
            font: var(--fontMenuItemName);
        }

        .vMenuItem > div:first-of-type > p {
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            font: var(--fontMenuItemDescription);
        }

        .vMenuItem > div:first-of-type > select {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 10px;
        }
    /*        .vMenuItem > div:first-of-type > label {
            font-weight:bold;
        }*/
    .vMenuItem > div:last-of-type {
        padding: var(--padding);
        width: 100%;
        display: -ms-grid;
        display: grid;
        grid-gap: 1px;
    }

    .vMenuItem select {
        font-size: 16px;
        font-weight: bold;
    }

.vMenuItemCalorie {
    color: var(--colorThemeSecondary);
    text-transform: lowercase;
    font-weight: bold;
}

.vMenuItemBtnSize {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--colorBorder);
    flex: 1;
    font: var(--fontMenuItem);
    min-width: fit-content;
}

.customize {
    /*    border: none;
    background-color: transparent;
    color: var(--colorThemeBg);
    font-size: 1.2rem;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .3s ease-in-out;*/
}

    .customize:hover {
        /*color: var(--colorThemeSecondary);*/
    }

        .customize:hover:after {
            /* color: var(--colorThemeSecondary);*/
        }

    .customize:before {
        /* display: none !important;*/
    }

/*    .customize:after {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 0.75rem;
        line-height: 0.8;
        color: var(--colorThemeBg);
        content: "\f068\f068\f054";
        letter-spacing: -6px;
        margin-left: 11px;
        transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .3s ease-in-out;
    }*/
/**************************************/
/**************************************/
/********* Login **********************/
/**************************************/
.login {
    margin: auto;
    border: var(--diBorder);
    border-radius: var(--radius);
    padding: var(--padding);
    font: var(--fontMenuItem);
}

.loginStoreInfoName {
    font: var(--fontHeader);
    display: block;
    font-weight: bold;
}

.loginStoreInfoAddr {
    font: var(--fontHeader);
    display: block;
}

.loginCustGuest {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: 2fr auto 1fr;
    width: 100%;
    margin-top: var(--margin);
    padding-top: var(--margin);
}

.orLine {
    height: 100%;
    width: 0;
    border: 2px solid var(--colorBorder);
    border-radius: var(--radius);
}

.orLineSpan {
    margin-left: -8px;
    position: absolute;
    top: calc(50% - 1rem);
    background-color: var(--diColorBg);
    padding: 0.5rem 0;
}
/**************************************/

/**************************************/
/********* CheckOut *******************/
/**************************************/
.checkOut_Dialog {
    width: 75vw !important;
    max-width: 900px;
}
/**************************************/
/********* Modifier *******************/
/**************************************/
.modifier {
    border-radius: var(--radius);
    padding: 0;
    font: var(--fontMenuItem);
    /*    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;*/
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.modifierCheck {
    display: inline-block;
    position: relative;
    margin: var(--margin);
    margin-top: 3rem;
    /*    flex: 1;
    flex-basis: 15rem;*/
    cursor: pointer;
}



    .modifierCheck select {
        display: inline;
        position: absolute;
        right: 0.5rem;
        top: 2rem;
        width: 8rem;
        background-color: transparent;
        border: none;
        padding: 0.4rem 0.75rem !important;
        font: var(--fontButton);
        height: auto;
        max-height: unset;
        min-height: unset;
    }

    /*style label to give some more space*/
    .modifierCheck label:nth-child(2) {
        display: block;
        padding: var(--padding);
        border: none;
        background-color: var(--colorInputBg);
        border-radius: var(--radius);
        height: 4.5rem;
        box-shadow: var(--shadow);
    }

    .modifierCheck label img {
        display: inline;
        position: absolute;
        left: 1.75rem;
        top: -1.25rem;
        width: 5rem;
        height: 5rem;
        fill: white;
    }



    .modifierCheck label span:first-of-type {
        margin-left: 7rem;
        font: var(--fontTitle2);
        margin-top: 0.25rem;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modifierCheck label span:last-of-type {
        margin-left: 7rem;
        font: var(--font);
        margin-top: 0;
        display: inline-block;
    }
    /*style and hide original checkbox*/
    .modifierCheck input {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
    }

        .modifierCheck input:nth-child(1) + label::before {
            border: none;
            content: "";
            height: 1.5rem;
            width: 1.5rem;
            top: -2rem;
            left: 1.5rem;
            position: absolute;
            border-radius: var(--radius);
            box-shadow: 0 4px 20px 0 rgba(0,0,0,.14);
            /*var(--shadow);*/
            z-index: 1;
            background-color: white;
        }

        .modifierCheck input:nth-child(1):checked + label {
            /*box-shadow: 0 0 4px 2px var(--btnColorBg);*/
            box-shadow: 0 0 6px 0 var(--btnColorBg);
            /*border: 2px solid var(--btnColorBg);*/
            cursor: pointer;
        }

            .modifierCheck input:nth-child(1):checked + label::before {
                color: var(--btnColor);
                cursor: pointer;
                /*background-color: var(--btnColorBg);*/
            }

        .modifierCheck input:nth-child(1) + label > span {
            cursor: pointer;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 15vw;
            display: block;
            color: var(--colorText);
        }

            .modifierCheck input:nth-child(1) + label > span::after {
                border: none;
                content: "";
                height: 6rem;
                width: 6rem;
                top: -2.5rem;
                left: 1rem;
                position: absolute;
                border-radius: var(--radius);
                background-color: var(--colorBg);
                color: var(--colorText);
                box-shadow: var(--shadow);
                filter: brightness(85%);
                cursor: pointer;
            }

        .modifierCheck input:nth-child(1):checked + label > span::after {
            background-color: var(--btnColorBg);
            cursor: pointer;
        }

        .modifierCheck input:nth-child(1) + label::after {
            content: "";
            border: 0.25rem solid;
            border-left: 0;
            border-top: 0;
            position: absolute;
            height: 1rem;
            width: 0.5rem;
            left: 2rem;
            top: -1.85rem;
            opacity: 0;
            transform: rotate(40deg);
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColorBg);
            z-index: 2;
            cursor: pointer;
        }

        .modifierCheck input:nth-child(1):checked + label::after {
            opacity: 1;
        }

        .modifierCheck input:nth-child(1):focus + label::before {
            /*box-shadow: 0 0 0 3px black;*/
            outline: 3px dotted var(--colorFocuse); /* For Windows high contrast mode. */
        }

        .modifierCheck input:nth-child(1) ~ select {
            display: none;
            font-weight: bold;
        }

        .modifierCheck input:nth-child(1):checked ~ select {
            display: inline !important;
        }

        .modifierCheck input:nth-child(1) ~ input:checked + span {
            cursor: not-allowed;
        }

            .modifierCheck input:nth-child(1) ~ input:checked + span::before {
                display: block;
                border: 4px solid red;
                content: "";
                height: 3rem;
                width: 3rem;
                top: 0.75rem;
                right: 0.80rem;
                position: absolute;
                border-radius: 50%;
                z-index: 1000;
            }

            .modifierCheck input:nth-child(1) ~ input:checked + span::after {
                display: block;
                border: 2px solid red;
                background-color: red;
                content: "";
                height: 0;
                width: 3rem;
                top: 2.1rem;
                right: 0.8rem;
                position: absolute;
                z-index: 1000;
                transform: rotateZ(45deg);
            }


        .modifierCheck input:nth-child(1):checked ~ input + span::before {
            display: none;
        }

        .modifierCheck input:nth-child(1):checked ~ input + span::after {
            display: none;
        }

.modifierCheckNoImg {
    display: inline-block;
    position: relative;
    margin: var(--margin);
    /*    flex: 1;
    flex-basis: 15rem;*/
    cursor: pointer;
}

    .modifierCheckNoImg select {
        display: inline;
        position: absolute;
        right: 0.5rem;
        top: 2rem;
        width: 8rem;
        background-color: transparent;
        border: none;
        padding: 0.4rem 0.75rem !important;
        font: var(--fontButton);
        height: auto;
        max-height: unset;
        min-height: unset;
    }

    /*style label to give some more space*/
    .modifierCheckNoImg label:nth-child(2) {
        display: block;
        padding: var(--padding);
        border: none;
        background-color: var(--colorInputBg);
        border-radius: var(--radius);
        height: 4.5rem;
        box-shadow: var(--shadow);
    }

    .modifierCheckNoImg label img {
        display: none;
        position: absolute;
        left: 1.75rem;
        top: -1.25rem;
        width: 5rem;
        height: 5rem;
        fill: white;
    }



    .modifierCheckNoImg label span:first-of-type {
        margin-left: 4.75rem;
        font: var(--fontTitle2);
        margin-top: 0.5rem;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modifierCheckNoImg label span:last-of-type {
        margin-left: 4.75rem;
        font: var(--font);
        margin-top: 0;
        display: inline-block;
    }
    /*style and hide original checkbox*/
    .modifierCheckNoImg input {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
    }

        .modifierCheckNoImg input:nth-child(1) + label::before {
            border: none;
            content: "";
            height: 3.5rem;
            width: 3.5rem;
            top: 0.5rem;
            left: 1rem;
            position: absolute;
            border-radius: var(--radius);
            box-shadow: 0 4px 20px 0 rgba(0,0,0,.14);
            /*var(--shadow);*/
            z-index: 1;
            background-color: white;
        }

        .modifierCheckNoImg input:nth-child(1):checked + label {
            /*box-shadow: 0 0 4px 2px var(--btnColorBg);*/
            box-shadow: 0 0 6px 0 var(--btnColorBg);
            /*border: 2px solid var(--btnColorBg);*/
            cursor: pointer;
        }

            .modifierCheckNoImg input:nth-child(1):checked + label::before {
                color: var(--btnColor);
                cursor: pointer;
                /*background-color: var(--btnColorBg);*/
            }

        .modifierCheckNoImg input:nth-child(1) + label > span {
            cursor: pointer;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: 15vw;
            display: block;
            color: var(--colorText);
        }

        /*        .modifierCheckNoImg input:nth-child(1) + label > span::after {
            border: none;
            content: "";
            height: 6rem;
            width: 6rem;
            top: -2.5rem;
            left: 1rem;
            position: absolute;
            border-radius: var(--radius);
            background-color: var(--colorBg);
            color: var(--colorText);
            box-shadow: var(--shadow);
            filter: brightness(85%);
            cursor: pointer;
        }*/

        .modifierCheckNoImg input:nth-child(1):checked + label > span::after {
            background-color: var(--btnColorBg);
            cursor: pointer;
        }

        .modifierCheckNoImg input:nth-child(1) + label::after {
            content: "";
            border: 0.25rem solid var(--colorHover);
            border-left: 0;
            border-top: 0;
            position: absolute;
            height: 2.5rem;
            width: 1rem;
            left: 2.25rem;
            top: 0.85rem;
            opacity: 0;
            transform: rotate(40deg);
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColorBg);
            z-index: 2;
            cursor: pointer;
        }

        .modifierCheckNoImg input:nth-child(1):checked + label::after {
            opacity: 1;
        }

        .modifierCheckNoImg input:nth-child(1):focus + label::before {
            /*box-shadow: 0 0 0 3px black;*/
            outline: 3px dotted var(--colorFocuse); /* For Windows high contrast mode. */
        }

        .modifierCheckNoImg input:nth-child(1) ~ select {
            display: none;
            font-weight: bold;
        }

        .modifierCheckNoImg input:nth-child(1):checked ~ select {
            display: inline !important;
        }

        .modifierCheckNoImg input:nth-child(1) ~ input:checked + span {
            cursor: not-allowed;
        }

            .modifierCheckNoImg input:nth-child(1) ~ input:checked + span::before {
                display: block;
                border: 4px solid red;
                content: "";
                height: 3rem;
                width: 3rem;
                top: 0.75rem;
                right: 0.80rem;
                position: absolute;
                border-radius: 50%;
            }

            .modifierCheckNoImg input:nth-child(1) ~ input:checked + span::after {
                display: block;
                border: 2px solid red;
                background-color: red;
                content: "";
                height: 0;
                width: 2.7rem;
                top: 2.15rem;
                right: 1rem;
                position: absolute;
                transform: rotateZ(45deg);
            }


        .modifierCheckNoImg input:nth-child(1):checked ~ input + span::before {
            display: none;
        }

        .modifierCheckNoImg input:nth-child(1):checked ~ input + span::after {
            display: none;
        }
/*        .modifierCheck input:nth-child(3) ~ input:checked + label > span {
            text-decoration-line :line-through ;
        }*/
/**************************************/
/********* call center stores *********/
/**************************************/
.imgOrderType_Store {
    width: 12rem;
    height: 8rem;
    border-radius: var(--radius);
}

.callCenterStores {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
    border-radius: var(--radius);
    padding: 0;
    font: var(--fontMenuItem);
    overflow-x: hidden;
    max-width: 95vw;
}

.callCenterStore {
    display: inline-block;
    position: relative;
    margin: var(--margin);
    margin-top: 4rem;
    /*    width: calc(33% - 1.5rem);*/
    min-width: 25rem;
}
    /*style label to give some more space*/
    .callCenterStore label {
        display: block;
        padding: var(--padding);
        border: none;
        background-color: var(--colorBg);
        border-radius: var(--radius);
        height: 6rem;
        box-shadow: var(--shadow);
        filter: brightness(85%);
    }

        .callCenterStore label:hover {
            box-shadow: 0 0 4px 2px var(--btnColorBg);
            border-color: var(--btnColorBg);
        }

        .callCenterStore label img {
            display: inline;
            position: absolute;
            left: 1rem;
            top: -3rem;
            width: 12rem;
            height: 8rem;
            border-radius: var(--radius);
        }

        .callCenterStore label span {
            margin-left: 14rem;
            font: var(--font);
            display: inline-block;
            margin-top: 0.25rem;
            width: 100%;
        }

            .callCenterStore label span:first-of-type {
                font: var(--fontTitle2);
            }

            .callCenterStore label span:last-of-type {
                margin-top: 0;
            }

    .callCenterStore input {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
    }

        .callCenterStore input[type="radio"] + label::before {
            border: none;
            content: "";
            height: 8rem;
            width: 12rem;
            top: -3rem;
            left: 1rem;
            position: absolute;
            border-radius: var(--radius);
            background-color: var(--colorBg);
            color: var(--colorText);
            box-shadow: var(--shadow);
            filter: brightness(85%);
        }

        .callCenterStore input[type="radio"]:checked + label {
            background-color: var(--btnColorBg);
            color: var(--btnColor);
        }

            .callCenterStore input[type="radio"]:checked + label::before {
                color: var(--btnColor);
                background-color: var(--btnColorBg);
                filter: brightness(65%);
            }

        .callCenterStore input[type="radio"] + label::after {
            content: "";
            border: 0.5rem solid;
            border-left: 0;
            border-top: 0;
            position: absolute;
            height: 3rem;
            width: 1.5rem;
            right: 1.5rem;
            top: 0;
            opacity: 0;
            transform: rotate(40deg);
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColor);
        }

        .callCenterStore input:checked + label::after {
            opacity: 1;
        }

        .callCenterStore input:focus + label::before {
            /*box-shadow: 0 0 0 3px black;*/
            outline: 3px dotted var(--colorFocuse); /* For Windows high contrast mode. */
        }
/**************************************/
/********* Order Type *****************/
/**************************************/
.orderType {
    margin: auto;
    border: var(--diBorder);
    border-radius: var(--radius);
    padding: 0;
    font: var(--fontMenuItem);
}

.orderTypeRadio {
    display: inline-block;
    position: relative;
    margin: var(--margin);
    margin-top: 3rem;
    /*    width: calc(33% - 1.5rem);*/
    min-width: 15rem;
}

    /*style label to give some more space*/
    .orderTypeRadio label {
        display: block;
        padding: var(--padding);
        border: none;
        background-color: var(--colorBg);
        border-radius: var(--radius);
        height: 4rem;
        box-shadow: var(--shadow);
        filter: brightness(85%);
        cursor: pointer;
        color: var(--colorText);
        background-color: var(--colorInputBg);
    }

        .orderTypeRadio label svg {
            display: inline;
            position: absolute;
            left: 1.5rem;
            top: -1.5rem;
            width: 4rem;
            height: 4rem;
            fill: white;
        }

        .orderTypeRadio label span:first-of-type {
            margin-left: 6rem;
            font: var(--fontTitle2);
            margin-top: 0.25rem;
            display: inline-block;
            width: 100%;
        }

        .orderTypeRadio label span:last-of-type {
            margin-left: 7rem;
            font: var(--font);
            margin-top: 0;
            display: inline-block;
        }
    /*style and hide original checkbox*/
    .orderTypeRadio input {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
    }

        .orderTypeRadio input[type="radio"] + label::before {
            border: none;
            content: "";
            height: 5rem;
            width: 5rem;
            top: -2rem;
            left: 1rem;
            position: absolute;
            border-radius: var(--radius);
            background-color: var(--colorBg);
            color: var(--colorText);
            box-shadow: var(--shadow);
            filter: brightness(85%);
        }

        .orderTypeRadio input[type="radio"]:checked + label {
            background-color: var(--btnColorBg);
            color: var(--btnColor);
        }

            .orderTypeRadio input[type="radio"]:checked + label::before {
                color: var(--btnColor);
                background-color: var(--btnColorBg);
                filter: brightness(65%);
            }

        .orderTypeRadio input[type="radio"] + label::after {
            content: "";
            border: 0.5rem solid;
            border-left: 0;
            border-top: 0;
            position: absolute;
            height: 3rem;
            width: 1.5rem;
            right: 1.5rem;
            top: 0;
            opacity: 0;
            transform: rotate(40deg);
            transition: opacity 0.2s ease-in-out;
            color: var(--btnColor);
        }

        .orderTypeRadio input:checked + label::after {
            opacity: 1;
        }

        .orderTypeRadio input:focus + label::before {
            /*box-shadow: 0 0 0 3px black;*/
            outline: 3px dotted var(--colorFocuse); /* For Windows high contrast mode. */
        }

.divOrderLater {
    display: block;
}

#rdoLater:checked ~ div#divOrderLater {
    display: block !important;
}
/***************************************/
/******** Tab      *********************/
/***************************************/
.tabs {
    display: flex;
    flex-wrap: wrap;
}

.tabInput {
    position: absolute;
    opacity: 0;
}

.tabLabel {
    width: 100%;
    padding: var(--padding);
    cursor: pointer;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background-color: transparent;
    color: var(--btnColorBg);
}

    .tabLabel:hover {
        background-color: var(--btnColorBgHover);
    }

    .tabLabel:active {
        background-color: var(--btnColorBg);
    }

.tabInput:focus + .tabLabel {
    z-index: 1;
}

.tabInput:checked + .tabLabel > span,
.tabInput:checked + .tabLabel {
    background-color: var(--btnColorBg);
    color: white;
}

/***************************************/
/******** Coupons  *********************/
/***************************************/
.coupons {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--itmvWidth),1fr));
}

    .coupons > div {
        border: 3px dashed var(--colorThemeSecondary);
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
    }

        .coupons > div > div {
            margin-top: auto;
        }


@media (min-width: 600px) {
    .tabLabel {
        width: 50%;
        order: 99;
    }
}

.tabPanel {
    display: none;
    padding: var(--padding);
    background: #fff;
    border-top: 12px solid var(--btnColorBg);
    width: 100%;
}


.tabInput:checked + .tabLabel + .tabPanel {
    display: block;
}
/***************************************/
/******** Flex Box *********************/
/***************************************/
.flexContainerRow {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
}

.flexContainerRowWrap {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
}

.flexItemCol1 {
    flex: 1;
}

.flexItemCol2 {
    flex: 2;
}

.flexItemCol3 {
    flex: 3;
}

.flexGrow0 {
    flex-grow: 0;
    white-space: nowrap;
}
/***************************************/
/******** Customize Item ***************/
/***************************************/
.dia_CUSTITM {
    padding: 0px;
    width: 95vw;
    overflow-y: hidden;
}

.div_CUSTITM_Whole {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.custItem {
    display: block;
}

    .custItem > div:last-child {
        display: none;
    }

    .custItem > div:first-child > div:first-child {
        display: none;
    }

    .custItem > div:first-child > div:nth-child(2) > div:first-child > div {
        display: block;
    }

.custItemHalfHalf {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

    .custItemHalfHalf > div:last-child {
        display: block;
    }

    .custItemHalfHalf > div:first-child > div:first-child {
        display: block;
    }

    .custItemHalfHalf > div:first-child > div:nth-child(2) > div:first-child > div {
        display: none;
    }


    .custItemHalfHalf .modifier {
        grid-template-columns: 1fr 1fr;
    }

.custHeader {
    display: grid !important;
    grid-template-columns: minmax(min-content, max-content) 3fr;
    grid-gap: 1rem;
}

    .custHeader > div:first-child {
        -ms-grid-column: 1;
        grid-column: 1;
    }

        .custHeader > div:first-child > div > div {
            display: none;
            font: var(--fontMenuItemName);
            text-transform: uppercase;
            text-align: center;
            padding: var(--padding);
            color: var(--colorThemeBg);
            font-size: 1.1rem;
        }

        .custHeader > div:first-child > div > img {
            width: 100%;
            height: auto;
            max-width: 300px;
        }

    .custHeader > div:last-child {
        -ms-grid-column: 2;
        grid-column: 2;
    }

    .custHeader > div:nth-child(2) > div {
        display: grid;
        grid-template-columns: minmax(4rem,1fr) 6fr;
        grid-gap: 1rem;
        margin-bottom: 0.5rem;
    }

        .custHeader > div:nth-child(2) > div > label {
            -ms-grid-column: 1;
            grid-column: 1;
        }

        .custHeader > div:nth-child(2) > div > div {
            -ms-grid-column: 2;
            grid-column: 2;
            display: flex;
        }

            .custHeader > div:nth-child(2) > div > div > select:first-child {
                flex: 1.5;
                margin-left: 5px;
            }

            .custHeader > div:nth-child(2) > div > div > select:last-child {
                flex: 3;
                margin-left: 5px;
            }
.halfSelector {
    position: fixed;
    top: 0;
    background-color: var(--colorBgCard);
    z-index: 4;
    display: none;
    width: 100%;
    height: 3rem;
    max-height: 3rem;
}

.custHeaderHalf {
    position: sticky;
    top: 0;
    background-color: var(--colorBgCard);
    z-index: 3;
}

    .custHeaderHalf > div:first-child {
        display: grid !important;
        grid-template-columns: minmax(220px,220px) 1fr;
        grid-gap: 1rem;
    }

        .custHeaderHalf > div:first-child > div:first-child {
            -ms-grid-column: 1;
            grid-column: 1;
        }

            .custHeaderHalf > div:first-child > div:first-child > img {
                max-height: 10rem;
                margin: 0.5rem 1.5rem;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
            }

        .custHeaderHalf > div:first-child > div:last-child {
            -ms-grid-column: 2;
            grid-column: 2;
            margin: 3.5rem 2rem 0.5rem 2rem;
        }

            .custHeaderHalf > div:first-child > div:last-child > div  {
                margin-top: 1rem;
            }

                .custHeaderHalf > div:first-child > div:last-child > div  > select {
                    font-weight: bold;
                }

    .custHeaderHalf > div:last-child {
        min-height: 6rem;
        position: absolute;
        bottom: 0;
        left: 0.5rem;
        right: 0.5rem;
        background-color: var(--btnColorBg);
        z-index: -1;
        border-radius: var(--radius);
    }

.close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    opacity: 0.6;
    background: none;
    border-radius: 50%;
    z-index:5;
}

    .close:hover {
        opacity: 1;
        background: none;
    }

    .close:before, .close:after {
        position: absolute;
        left: 15px;
        top: 0;
        content: ' ';
        height: 33px;
        width: 4px;
        background-color: var(--colorText);
    }

    .close:before {
        transform: rotate(45deg);
    }

    .close:after {
        transform: rotate(-45deg);
    }

.dialogContent {
    /*    max-height: 95vh;
    height: 95vh;*/
    overflow-y: auto;
}

    .dialogContent > div:first-child {
        max-height: calc(95vh - 4rem);
        /*height: 95vh;*/
        overflow-y: auto;
    }

        .dialogContent > div:first-child .CIFooter {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: white;
            padding: 0.5rem;
            z-index: 2;
            /*text-align:right;
   border-top:1px solid var(--colorThemeBg);*/
        }

.orderDiv {
    position: fixed;
    margin-top: 0;
}

#diaRedeemableItems {
    width: 75vw !important;
}

.table {
    font: var(--fontInput);
    background: var(--colorBgCard);
    width: 100%;
}

    .table > thead > tr > th {
        font: var(--fontTitle2);
        text-align: center;
        padding: 1rem;
    }

table > tbody > tr > td {
    padding: 0.5rem;
}

table > tbody > tr:nth-child(even) {
    background-color: var(--colorBg);
}


.boxTopperContainer {
    box-shadow: var(--shadow);
    position: sticky;
    top: var(--hedHeight);
    background: var(--colorBg);
    z-index: 1;
}

.boxTopper {
    border: 3px solid var(--colorThemeSecondary);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}

.boxTopperStamp {
    transform: rotate(-25deg);
    white-space: nowrap;
    position: absolute;
    width: 100%;
    top: 25%;
    text-align: center;
}

.boxTopperStampLabel {
    color: var(--colorWarning);
    border: 3px solid var(--colorWarning);
    padding: 1rem;
    border-radius: var(--radius);
    font: var(--fontTitle1);
}

.noneMobileBottom {
    padding-bottom: 5rem !important;
}

@media (max-width: 576px) {
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .vMenuItems {
        grid-template-columns: 1fr;
        margin: 0;
    }

    .vMenuItem > div:last-of-type {
        grid-template-columns: auto auto;
    }


    .dialogContent > div:first-child {
        max-height: calc(var(--vh, 1vh) * 100 - 4rem);
    }

    .CHKOUT_Tip {
        width: 100% !important;
        min-width: unset !important;
    }

    :root {
        --ordWidth: 100vw !important;
    }

    .halfArrowBtn {
        display: block !important;
    }

    .custHeader > div:first-child > div > div {
        display: block;
    }

    .custHeader > div:first-child > div > img {
        max-width: unset;
    }

    .widthMinMobile {
        min-width: 250px !important;
    }

    .hMenuItem > button {
        margin: var(--margin) 0px;
        border-radius: var(--radius);
        border: var(--itmBorder);
        background-color: var(--itmColorBG);
        color: var(--colorText);
        display: flex;
        padding: 0;
        text-align: left;
        width: 100%;
    }

    .hMenuItems {
        grid-template-columns: repeat(auto-fit, minmax(var(--itmvWidth),1fr));
    }

    .lang {
        top: 0;
    }

    /*    .noneMobileBottom {
        padding-bottom: 0px !important;
    }

    .mobileBottom {
        padding-bottom: 10rem !important;
    }*/

    .callCenterStore {
        grid-gap: 0px;
        margin-top: 4rem;
        width: 100%;
        max-width: calc(100vw - 3rem);
        min-width: calc(100vw - 3rem);
    }

        .callCenterStore input[type="radio"] + label::before,
        .callCenterStore label img {
            width: 8rem !important;
        }

        .callCenterStore label span {
            margin-left: 9rem;
            width: auto;
        }

        .callCenterStore input[type="radio"] + label::after {
        }

    .checkOut_Dialog {
        width: 100vw !important;
    }

    #diaRedeemableItems {
        width: 100vw !important;
    }

    .orderDiv {
        position: initial;
        margin-top: unset;
    }

    .dia_CUSTITM {
        padding: 0px;
        width: 100vw;
    }

    .modifier {
        grid-template-columns: 1fr !important;
    }

    .modifierCheck input:nth-child(1) + label > span {
        width: auto;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: auto;
    }

    /*    .dialogContent {
        max-height: 100vh;
        height: 100vh;
    }

        .dialogContent > div:first-child {
            max-height: 100vh;
            height: 100vh;
        }

            .dialogContent > div:first-child .CIFooter {
                position: initial;
                background-color: transparent;
            }*/

    .custHeader {
        display: block !important;
    }
    .halfSelector{
        display:block;
    }
    .custHeaderHalf {
        top: 3rem !important;
    }
    .custHeaderHalf > div:first-child {
        display: grid !important;
        grid-template-columns: 7.5rem 1fr;
        grid-gap: 0;
        padding:0 0.5rem;
    }

        .custHeaderHalf > div:first-child > div:first-child > img {
            max-height: 5rem;
            margin: 0 0.5rem;
        }

        .custHeaderHalf > div:first-child > div:last-child {
            margin: 0;
        }

            .custHeaderHalf > div:first-child > div:last-child > label {
                color: var(--btnColor);
            }
            .custHeaderHalf > div:first-child > div:last-child > button {
                color: var(--btnColor);
            }
            .custHeaderHalf > div:first-child > div:last-child > div {
                margin-top: 0;
            }

    .custHeaderHalf > div:last-child {
        min-height: 6rem;
        left: 0;
        right: 0;
        border-radius: 0;
    }

    .custItemHalfHalf {
        grid-template-columns: 1fr;
    }

    .header {
        -ms-grid-columns: auto auto 1fr auto !important;
        grid-template-columns: auto auto 1fr auto !important;
    }

        .header .logo > img {
            max-height: 5rem;
            width: 20vw;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
            object-fit: contain;
        }

        .header .custom {
            display: none;
        }

        .header .cart {
            display: block;
            -ms-grid-column: 4;
            grid-column: 4;
        }

        .header .storeInfoAddr {
            display: block;
            padding: 0px;
            margin: 0px;
            font-size: clamp(0.85rem, 2.5vw, 1.25rem);
            white-space: nowrap;
            overflow: hidden;
        }

    .containerTopCat {
        margin-top: calc(var(--hedHeight) + 3.5rem);
    }

    .categoriesTopCat {
        width: 100%;
        display: block;
        height: 4rem;
        position: fixed;
        top: var(--hedHeight);
        z-index: 1;
    }

    .categoryItemsTopCat {
        display: block;
        position: relative;
        top: 0;
        box-shadow: var(--shadow);
        align-items: stretch;
        overflow-y: hidden;
        overflow-x: auto;
    }


        .categoryItemsTopCat a {
            color: var(--textColor);
            background-color: var(--colorBg) !important;
            height: 0px;
            overflow: hidden;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
            border: none;
            vertical-align: middle;
            display: block !important;
        }

        .categoryItemsTopCat .active {
            background: var(--btnColorBg) !important;
            color: var(--btnColor);
            height: auto;
        }


        .categoryItemsTopCat .expand {
            height: 3.5rem !important;
            transition: height 0.5s ease-out;
            border-bottom: 1px dotted var(--btnColorBg);
        }

    #divCategoriesArrow {
        padding-top: 1rem;
        display: block !important;
    }

    .containerTopCat .items_Order {
        margin-top: calc(var(--hedHeight) + 4rem);
    }

    .container {
        display: block;
        margin-top: calc(var(--hedHeight) + 3.5rem);
    }

        .container .categories {
            width: 100%;
            display: block;
            /*height: 4rem;*/
            overflow-y: auto;
            overflow-x: hidden;
            position: fixed;
            top: var(--hedHeight);
            max-height: calc(100vh - var(--hedHeight));
            z-index: 1;
        }

            .container .categories > div {
                position: inherit;
                top: inherit;
                bottom: inherit;
                overflow-y: unset;
                width: 100%;
            }

            .container .categories a {
                color: var(--textColor);
                background-color: var(--colorBg) !important;
                height: 0px;
                overflow: hidden;
                text-align: center;
                font-weight: bold;
                text-transform: uppercase;
                width: 100vw;
                min-width: 100vw;
                border: none;
                vertical-align: middle;
                display: block !important;
            }

            .container .categories .active {
                background: var(--btnColorBg) !important;
                color: var(--btnColor);
                height: auto;
            }

        .container .items_Order {
            display: block;
        }

        .container .categories .expand {
            height: 3.5rem !important;
            transition: height 0.5s ease-out;
            border-bottom: 1px dotted var(--btnColorBg);
        }

        .container .items_Order {
            margin-top: calc(var(--hedHeight) + 4rem);
        }

    .orderItems {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 0px 1fr;
        grid-template-columns: 0px 1fr;
    }

        .orderItems.hideItems {
            -ms-grid-columns: 1fr 0px !important;
            grid-template-columns: 1fr 0px !important;
        }

    .itemsOrder {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 0px;
        grid-template-columns: 1fr 0px;
    }

        .itemsOrder.hideItems {
            -ms-grid-columns: 0px 1fr !important;
            grid-template-columns: 0px 1fr !important;
        }

    .orderBackrgound {
        min-width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
    }
    /*        .orderBackrgound.hideOrder {
           display:none;
        }*/

    .hideOrder {
        display: none;
    }

    .hideItems #divItems {
        display: none;
    }



    /*vvvvvvvvvvvvv*/
    .login {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        top: 0px;
    }

    .loginCustGuest {
        display: block;
    }

    .orLine {
        height: 0;
        width: 100%;
    }

    .orLineSpan {
        margin-top: 0px;
        margin-left: 0px;
        position: absolute;
        left: calc(50% - 1.5rem);
        top: 0;
        padding: 0 0.5rem;
    }

    .orderTypeRadio {
        display: block;
        margin-right: var(--margin);
        width: auto;
    }

    .gridColsAuto1x_resp,
    .gridCols1x1x_resp {
        display: block;
    }

    dialog {
        top: 0;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100vh;
        max-width: 100vw;
        margin: 0;
        width: 100vw;
        border-radius: 0;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }



    .boxTopper {
        position: initial !important;
    }

    .width100_resp {
        width: 100%;
    }

    .width75_resp {
        width: 100%;
    }

    .widthMinMobile {
        min-width: 250px !important;
    }

    .CHKOUT_Tip {
        width: 100%;
        min-width: unset;
        margin: auto;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .halfArrowBtn {
        display: block !important;
    }

    html {
        font-size: 16px;
    }

    .header {
        -ms-grid-columns: auto minmax(auto,250px) 1fr !important;
        grid-template-columns: auto minmax(auto,250px) 1fr !important;
    }

    dialog {
        max-width: 95vw;
    }

    .dia_CUSTITM {
        padding: 0px;
        width: 100vw !important;
        max-width: 100vw !important;
        /* top: 0;*/
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modifier {
        grid-template-columns: 1fr;
    }

    .modifierCheck input:nth-child(1) + label > span {
        width: auto;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: auto;
    }

    .custItemHalfHalf .modifier {
        grid-template-columns: 1fr;
    }

    .custHeader {
        display: block !important;
    }

    .custItemHalfHalf {
        grid-template-columns: 1fr;
    }

    .checkOut_Dialog {
        width: 100vw !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    html {
        font-size: 16px;
    }

    dialog {
        max-width: 85vw;
    }

    .dia_CUSTITM {
        padding: 0px;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .modifier {
        grid-template-columns: 1fr 1fr;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: auto;
    }

    .custItemHalfHalf .modifier {
        grid-template-columns: 1fr;
    }

    .custHeader {
        grid-template-columns: minmax(min-content, max-content) 3fr;
    }

    .custHeaderNoImage {
        grid-template-columns: minmax(min-content, max-content) 3fr !important;
    }

    .custHeaderHalf > div:first-child {
        display: grid !important;
        grid-template-columns: 9rem 1fr;
        grid-gap: 1rem;
    }

        .custHeaderHalf > div:first-child > div:first-child > img {
            max-height: 7rem;
            margin: 0.5rem 1rem;
        }

        .custHeaderHalf > div:first-child > div:last-child {
            margin: 2rem 2rem 1rem 2rem;
        }

            .custHeaderHalf > div:first-child > div:last-child > div {
                margin-top: 0;
            }

    .custHeaderHalf > div:last-child {
        min-height: 4.8rem;
    }

    .checkOut_Dialog {
        width: 95vw !important;
    }
}

@media (min-width: 992px) and (max-width: 1280px) {

    html {
        font-size: 16px;
    }

    dialog {
        max-width: 75vw;
    }

    .dia_CUSTITM {
        padding: 0px;
        width: 95vw !important;
        max-width: 95vw !important;
    }

    .modifier {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .modifierCheck input:nth-child(1) + label > span {
        width: 18vw;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: 18vw;
    }

    .custItemHalfHalf .modifier {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1280px) and (max-width: 1400px) {
    .modifierCheck input:nth-child(1) + label > span {
        width: 12vw;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: 12vw;
    }
}

@media (min-width: 1400px) and (max-width: 1550px) {
    .modifierCheck input:nth-child(1) + label > span {
        width: 13vw;
    }

    .modifierCheckNoImg input:nth-child(1) + label > span {
        width: 13vw;
    }
}

.CHKOUT_Tip {
    width: 50%;
    min-width: 420px;
    margin: auto;
}



.giftcard {
    width: 250px;
    max-width: 450px;
    padding: var(--padding) var(--padding2);
    border: var(--diBorder);
    border-radius: var(--radius);
    margin: var(--margin);
    display: inline-block;
    background-color: var(--colorBg);
    font: var(--fontBody);
}

.giftcard_Number {
    text-align: center;
    font-size: smaller;
    margin-bottom: var(--margin);
}

.giftcard_Amount {
    text-align: right;
    font: var(--font);
}

.giftcard_Label {
    text-align: right;
    font-size: smaller;
}

.giftcard_Remove {
    margin-top: var(--margin);
    text-align: right;
    font-size: smaller;
}

#chk_CHKOUT_Gift_Card ~ div {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

#chk_CHKOUT_Gift_Card:checked ~ div {
    max-height: 1500px;
    transition: max-height 0.5s ease-in;
}

#chk_CHKOUT_Gift_Card + label:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f078";
    color: var(--colorThemeBg);
    float: right;
}

#chk_CHKOUT_Gift_Card:checked + label:after {
    content: "\f077";
}

.halfArrowBtn {
    margin-bottom: var(--margin);
    display: none;
}

.halfCircle {
    fill: none;
    stroke: var(--colorThemeBg);
    stroke-width: 20;
    stroke-miterlimit: 10;
}

.halfArrow {
    fill: var(--colorThemeBg);
}

.halfArrowText {
    font-family: var(--fontTitle1);
    font-size: 200px;
    fill: var(--colorThemeBg);
}
#div_CI_Whole {
    margin-top: 3rem !important;
}
#div_CI_Whole > div {
    
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: minmax(6rem,1fr) 4fr;
    grid-template-columns: minmax(6rem,1fr) 4fr;
}

    #div_CI_Whole > div > label {
        -ms-grid-column: 1;
        grid-column: 1;
    }

#btn_CI_Point_Half1,
#btn_CI_Point_Half2 {
    padding-top: 5px;
}

    #btn_CI_Point_Half1:after {
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        content: "1";
        background-color: var(--btnColorBg);
        color: var(--btnColor);
        padding: 5px;
        float: right;
        margin-top: -5px;
    }
    #btn_CI_Point_Half2:before {
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        content: "2";
        background-color: var(--btnColorBg);
        color: var(--btnColor);
        padding: 5px;
        float: left;
        margin-top: -5px;
    }