/* ===============  PRODUCT THEME CSS =====================

        MASTER CSS FOR KIOSK & ONLINE/MOBILE
        Customer: NDV
        Production Theme: Classic

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

/* ========================================================
              ***     FONTS SECTION     ***
=========================================================== */
@font-face {
    font-family: 'FAB';
    src: url('../fonts/fa/fa-brands-400.svg');
    src: url('../fonts/fa/fa-brands-400.eot');
    src: url('../fonts/fa/fa-brands-400.eot?#iefix') format('embedded-opentype'), url('../fonts/fa/fa-brands-400.ttf') format('truetype');
}

@font-face {
    font-family: 'FAS';
    src: url('../fonts/fa/fa-solid-900.svg');
    src: url('../fonts/fa/fa-solid-900.eot');
    src: url('../fonts/fa/fa-solid-900.woff') format('embedded-opentype'), url('../fonts/fa/fa-solid-900.ttf') format('truetype');
}

@font-face {
    font-family: 'FAL';
    src: url('../fonts/fa/fa-light-300.svg');
    src: url('../fonts/fa/fa-light-300.eot');
    src: url('../fonts/fa/fa-light-300.eot?#iefix') format('embedded-opentype'), url('../fonts/fa/fa-light-300.ttf') format('truetype');
}

@font-face {
    font-family: 'FAR';
    src: url('../fonts/fa/fa-regular-400.svg');
    src: url('../fonts/fa/fa-regular-400.eot');
    src: url('../fonts/fa/fa-regular-400.eot?#iefix') format('embedded-opentype'), url('../fonts/fa/fa-regular-400.ttf') format('truetype');
}

@font-face {
    font-family: 'FAD';
    src: url('../fonts/fa/fa-duotone-900.svg');
    src: url('../fonts/fa/fa-duotone-900.eot');
    src: url('../fonts/fa/fa-duotone-900.eot?#iefix') format('embedded-opentype'), url('../fonts/fa/fa-duotone-900.ttf') format('truetype');
}


@font-face {
    font-family: 'Kalam';
    src: url('../fonts/Kalam-Bold.eot');
    src: url('../fonts/Kalam-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Kalam-Bold.woff2') format('woff2'), url('../fonts/Kalam-Bold.woff') format('woff'), url('../fonts/Kalam-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalam';
    src: url('../fonts/Kalam-Light.eot');
    src: url('../fonts/Kalam-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Kalam-Light.woff2') format('woff2'), url('../fonts/Kalam-Light.woff') format('woff'), url('../fonts/Kalam-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalam';
    src: url('../fonts/Kalam-Regular.eot');
    src: url('../fonts/Kalam-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Kalam-Regular.woff2') format('woff2'), url('../fonts/Kalam-Regular.woff') format('woff'), url('../fonts/Kalam-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-BoldItalic.eot');
    src: url('../fonts/Merriweather-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Merriweather-BoldItalic.woff2') format('woff2'), url('../fonts/Merriweather-BoldItalic.woff') format('woff'), url('../fonts/Merriweather-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Bold.eot');
    src: url('../fonts/Merriweather-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Merriweather-Bold.woff2') format('woff2'), url('../fonts/Merriweather-Bold.woff') format('woff'), url('../fonts/Merriweather-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Black.eot');
    src: url('../fonts/Merriweather-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Merriweather-Black.woff2') format('woff2'), url('../fonts/Merriweather-Black.woff') format('woff'), url('../fonts/Merriweather-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Light.eot');
    src: url('../fonts/Merriweather-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Merriweather-Light.woff2') format('woff2'), url('../fonts/Merriweather-Light.woff') format('woff'), url('../fonts/Merriweather-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Regular.eot');
    src: url('../fonts/Merriweather-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Merriweather-Regular.woff2') format('woff2'), url('../fonts/Merriweather-Regular.woff') format('woff'), url('../fonts/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
    ***     BUILT IN OPTIONS - VARIABLES SECTION     ***
============================================================ */
:root {
    /*  LOGO  */
    --LogoFit: contain;
    --LogoWidth: 120px;
    --LogoSpacing: 20px;
    /* TOP / BOTTOM TOOLBARS */
    --TopToolbarBackground: #AD1015;
    --TopToolbarHeight: 80px;
    --BottomToolbarBackground: var(--TertiaryColor);
    --BottomToolbarHeight: 60px;
    --ControlBtnHeight: 40px;
    /*  COLORS  */
    --AccentColor: #AD1015;
    --AccentColor2: #002D62;
    --PrimaryColor: #333333;
    --ControlBtnColor: #AD1015;
    --SecondaryColor: #002D62;
    --TertiaryColor: #FFFFFF;
    --BGColor: #F8F8F8;
    /*  BOX ELEMENTS  */
    --Border: 1px solid #E8E8E8;
    --BoxShadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    --Curve: 25px;
    --ItemContentHeight: 120px;
    /*  TYPOGRAPHY  */
    --PrimaryRegFontFamily: 'Merriweather', sans-serif;
    --PrimarySemiBoldFontFamily: 'Merriweather', sans-serif;
    --PrimaryBoldFontFamily: 'Merriweather', sans-serif;
    --SecondaryFontFamily: 'Kalam', sans-serif;
    --SecondaryBoldFontFamily: 'Kalam', sans-serif;
    --HeaderSize: 26px;
    --HeaderSize2: 24px;
    --SubHeaderSize: 20px;
    --ItemTitleSize: 25px;
    --DescTextSize: 16px;
    --DetailsTextSize: 16px;
    --MessageTextSize: 30px;
    --PriceCalSize: 16px;
    --ButtonTextSize: 18px;
    --ControlButtonSize: 20px;
    /* DYNAMIC SPLASH SCREEN */
    --SplashEntranceAnimation: bounceInRight 1s;
    --SplashExitAnimation: bounceOutLeft 1s;
    --SplashStaticBackground: none;
    --SplashDisplayVideo: none;
    --SplashGuestVideo: none;
    --SplashDisplayLogo: none;
    --SplashDisplayNumber: none;
    --SplashColor: white;
    --SplashSize: 80px;
    --SplashWeight: normal;
    /* FEATURE TOGGLES (Use 'block' or 'none') */
    --SpecialInstrutionsOrderReview: none;
    --GuestLogin: block;
    --OfflineLogo: block;
    --AddItemBtn: none;
}


/* =========================================================
        ***     OVERRIDES FOR OUTSIDE CSS FILES     ***
============================================================ */
a:hover, a:focus {
    color: var(--PrimaryColor);
    text-decoration: none;
    outline: none;
}

a.nex-button:hover, a.nex-button:focus {
    color: var(--AccentColor);
}

.btn:focus {
    outline: none;
}

a:focus {
    outline: none;
    outline: 0 auto -webkit-focus-ring-color;
    outline-offset: 0px;
}


/* =========================================================
          ***     KIOSK THEME ELEMENTS STYLING     ***
============================================================ */
body,
#wrap,
.kiosk-content,
.kiosk-content #content,
.kiosk-content #targets,
.kiosk-content #targets > div:not(#popups) {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

    body[data-language='kvi'] #BGV {
        display: none;
    }

    .kiosk-content #clip-template,
    .paymentclip,
    .kiosk-content #clip-repeatorders,
    .kiosk-content #clip-orders {
        position: relative;
        height: calc(100% - var(--TopToolbarHeight) - var(--BottomToolbarHeight));
    }

    .kiosk-content #template,
    .carousel,
    .carousel-inner,
    .slide,
    .item {
        width: 100%;
        height: 100%;
    }

#ordering {
    background-image: none !important;
    background-size: cover;
    background-position: center center;
}

/* KIOSK MAIN BACKGROUND IMAGE */
#wrap {
    background-image: url('../images/');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--BGColor);
    width: 100% !important;
    position: fixed !important;
    left: 0 !important;
}

.box {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--TertiaryColor);
    border-radius: var(--Curve);
    color: var(--PrimaryColor);
    box-shadow: var(--BoxShadow);
}

.kiosk-content .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
}

/* inline styling that was removed from html */
#previousorder,
#previousOrderItem,
.previousItemsArea,
#itemDescriptionContent,
#repeatOrderPrompt,
#repeatOrderHeader,
#repeatOrderOptions,
#facePopup,
#cardSwipePopup,
#phonePopup,
#gotoReceipt,
#orderinstore {
    display: none; /* must have for JS to work */
}

#clip-choices #button1,
#clip-choices #button2 {
    display: block;
}

#clip-templatebuttons #buttons {
    display: none;
}

.displayNone { /* <- use for specific items that need display none */
    display: none;
}

.visibilityHidden {
    visibility: hidden;
}
/* <- use for specific items that need display none */


/* =========================================================
                  ***     BUTTONS     ***
============================================================ */
/* button shape */
.btn {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    background-image: none;
    border: 0;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ButtonTextSize);
    border-radius: var(--Curve);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: var(--AccentColor);
    color: var(--TertiaryColor);
    border-color: var(--AccentColor);
}

.btn-default,
.btn-primary,
.btn-action,
.btn-takeover {
    border: 0px;
    min-width: 150px;
    height: 40px;
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--AccentColor);
    color: var(--TertiaryColor);
    border-radius: var(--Curve);
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ButtonTextSize);
}

    .btn-action:focus,
    .btn-action:active,
    .btn-takeover:focus,
    .btn-takeover:active {
        background: var(--AccentColor);
        color: var(--TertiaryColor);
    }

#mfa-email-enable-button, #mfa-email-factor-status, #mfa-sms-enable-button, #mfa-sms-factor-status {
    margin-top: 10px;
    margin-left: 0px;
}

a.nex-button:hover, a.nex-button:focus {
    color: var(--TertiaryColor);
}

.nex-button,
#languageSwitcher {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ButtonTextSize);
    background: var(--AccentColor);
    color: var(--TertiaryColor);
    border-radius: var(--Curve);
    border: 0;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .nex-button:before,
    #languageSwitcher:before,
    .fa:before,
    #bicon:before {
        font-family: 'FAL';
        display: block;
    }

.item.active,
.item.next,
.item.prev {
    height: 100%;
    display: flex;
    align-items: center;
    transition: 0.25s;
}


/* =========================================================
                  ***     HEADER     ***
============================================================ */
.logo,
#logoOff {
    background-image: url('../images/Patriots-logo.png');
    background-size: var(--LogoFit);
    background-position: center center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.logo,
.kiosk-content .logo {
    height: 100%;
    width: var(--LogoWidth);
    margin-left: var(--LogoSpacing);
    margin-right: 10px;
    background-size: var(--LogoFit);
}

.logo { /* needed for OLO */
    margin-right: var(--LogoSpacing);
    margin-left: 0;
}

#logoOff {
    height: 200px;
    width: 200px;
    background-color: var(--TopToolbarBackground);
    background-size: 50%;
    border-radius: 50%;
    margin: 20px auto;
    display: var(--OfflineLogo);
}

#clip-header {
    display: flex;
    flex-flow: row-reverse;
    height: var(--TopToolbarHeight);
    color: var(--PrimaryColor);
    background: var(--TopToolbarBackground);
    width: 100%;
    padding: 0 5px;
}

    #clip-header::before {
        width: 100%;
        height: 2px;
        content: '';
        background-color: #59586B;
        position: absolute;
        top: 76px;
        left: 0px;
    }

    #clip-header::after {
        width: 100%;
        height: 15px;
        content: '';
        background-color: #002D62;
        position: absolute;
        top: 80px;
        left: 0px;
    }


.header-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: var(--TopToolbarHeight);
    justify-content: center;
    align-items: flex-start;
    color: var(--TertiaryColor);
    width: calc(100% - calc(var(--LogoWidth) + var(--LogoSpacing)));
    position: absolute;
    left: 0;
    padding: 0 20px;
    z-index: 100;
    background-image: none !important;
}

#header-text {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: bold;
    font-size: var(--HeaderSize);
    line-height: calc(var(--HeaderSize) + 6px);
}

#menuDescription {
    position: relative;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}



/* =========================================================
                  ***     FOOTER     ***
============================================================ */
#clip-footer {
    display: flex;
    flex-flow: column;
    height: var(--BottomToolbarHeight);
    width: 100%;
    padding: 0 20px;
    background: var(--BottomToolbarBackground);
    z-index: 6;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.29);
}

.footer-top {
    display: flex;
    font-size: var(--DescTextSize);
}

.footer-left,
.footer-right {
    width: 50%;
    margin-bottom: calc(0px - var(--BottomToolbarHeight));
    display: flex;
    align-items: center;
}

.footer-left {
    justify-content: flex-start;
    font-family: var(--PrimaryRegFontFamily);
}

.footer-right {
    justify-content: flex-end;
    font-family: var(--PrimaryBoldFontFamily);
    color: var(--AccentColor2);
    font-weight: bold;
}

#controlbuttons {
    display: flex;
    align-items: center;
    width: 50%;
    margin: auto;
    padding: 10px;
    overflow: hidden;
}

    #controlbuttons > div {
        width: 33.33%;
        text-align: center;
        padding: 0 5px;
    }

.control-button {
    width: 100%;
    height: var(--ControlBtnHeight);
    padding: 0 20px 0 30px;
    border: 3px solid var(--ControlBtnColor);
    background: var(--TertiaryColor);
    border-radius: 30px;
    color: var(--PrimaryColor);
    font-family: var(--PrimaryBoldFontFamily);
    font-size: var(--ControlButtonSize);
    font-weight: bold;
}

.control-button-orderreview {
    padding: 0 0 0 28px;
    line-height: calc(var(--ControlButtonSize) - 4px);
}

    .control-button-orderreview:before,
    .control-button-additem:before,
    .control-button-back:before,
    .control-button-cancel:before,
    .control-button-continue:before,
    .control-button-done:before,
    .control-button-submit:before {
        font-family: 'FAL';
        z-index: 10;
        position: absolute;
        background: var(--BottomToolbarBackground);
        top: -3px;
        left: 0;
        border-radius: 50%;
        font-size: var(--ControlBtnHeight);
        height: calc(var(--ControlBtnHeight) + 6px);
        width: calc(var(--ControlBtnHeight) + 6px);
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--ControlBtnColor);
    }

.control-button-additem:before {
    content: '\f055';
}

.control-button-back:before {
    content: '\f137';
}

.control-button-cancel:before {
    content: '\f057';
}

.control-button-orderreview:before,
.control-button-continue:before {
    content: '\f138';
    color: white !important;
    height: var(--ControlBtnHeight);
    background: var(--ControlBtnColor);
    width: var(--ControlBtnHeight) !important;
    font-size: calc(var(--ControlBtnHeight) + 4px);
    top: 0px;
}

.control-button-submit:before,
.control-button-done:before {
    content: '\f058';
    color: white !important;
    height: var(--ControlBtnHeight);
    background: var(--ControlBtnColor);
    width: var(--ControlBtnHeight) !important;
    font-size: calc(var(--ControlBtnHeight) + 4px);
    top: 0px;
}

#payment #receipt {
    visibility: visible !important;
}

#receipt {
    padding: 5px 10px 5px 10px;
    border: 3px solid var(--ControlBtnColor);
    border-radius: 30px;
    background-color: white;
}

/* =========================================================
          ***     UNIVERSAL MENU BUTTONS     ***
============================================================ */
.itemContent {
    padding: 10px 15px;
}

.caption {
    text-align: left;
    display: block;
}

#btext {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
    font-family: var(--SecondaryBoldFontFamily);
    font-weight: bold;
    font-size: var(--ItemTitleSize);
    line-height: calc(var(--ItemTitleSize) + 8px);
    color: var(--AccentColor);
}

#textDesc {
    width: 100%;
    position: relative;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

.overlaycontainer {
    height: 25px;
    margin: 5px 0;
    display: block;
    overflow: hidden;
}

    .overlaycontainer .overlay {
        display: inline-flex;
        position: relative;
        height: 25px;
        width: 25px;
        margin-right: 8px;
    }

    .overlaycontainer:empty,
    #price:empty,
    .details:empty,
    #calories:empty,
    .text-button #textDesc:empty,
    .modal-content #descriptionText:empty,
    :empty + .dot-leader,
    #menuDescription:empty {
        display: none;
    }

.details {
    display: flex;
    align-items: baseline;
}

#price {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--PriceCalSize);
    line-height: calc(var(--PriceCalSize) + 10px);
    margin-right: 30px;
}

    #price:before {
        content: '$';
    }

#calories {
    font-family: var(--PrimaryRegFontFamily);
    font-weight: normal;
    font-size: var(--PriceCalSize);
    line-height: calc(var(--PriceCalSize) + 10px);
}

    #calories:after {
        content: ' cal.';
    }

.dot-leader {
    flex-grow: 1;
    border-bottom: 2px dotted #E8E8E8;
    margin: 0 3px;
}

.ibutton {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 15px;
    bottom: 10px;
    background: transparent;
}

    .ibutton:before {
        content: '\f141';
        font-family: 'FAR';
        color: var(--AccentColor);
    }

/*Classic Fix*/
#check {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 38px;
    line-height: 52px;
    visibility: visible;
    position: absolute;
    top: calc(50% - 40px);
    color: transparent;
}

.image-button #check {
    right: 0;
    left: 0;
    top: 25%;
    margin: auto;
    background: transparent;
}

#check:before {
    content: '\f00c';
    font-family: 'FAL';
}

.text-button #check {
    right: 18px;
    top: 27%;
    background: transparent;
}

.checkbutton-text .caption {
    margin-right: 40px;
}

/*Classic Fix*/
.button-down-state #check {
    visibility: visible;
    color: white;
    background: var(--AccentColor);
    border: var(--Border);
}

.button-down-state #subButtons {
    visibility: visible;
    background: var(--AccentColor2);
}

[class*='Quantity'] .lnm,
[class*='Qty'] .lnm,
[class*='LNM'] .qty {
    display: none;
}

#subButtons {
    visibility: hidden;
}

#subButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}

.image-button #subButtons {
    top: 0;
    bottom: var(--ItemContentHeight); /* should match image-button .itemContent height */
    justify-content: center;
    background: rgba(255, 255, 255, .80);
}

.text-button #subButtons {
    justify-content: flex-end;
    right: 15px;
    background: rgba(255, 255, 255, .80);
    height: 100%;
    bottom: 0;
}

.qty-text {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    border: 0;
    font-weight: bold;
    color: var(--AccentColor2);
}

.qty-button {
    width: 50px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    border-radius: 50%;
    color: var(--AccentColor);
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .qty-button:before {
        font-family: 'FAL';
        display: block;
    }

.lnm {
    font-family: var(--BodyFontFamily);
    font-size: 13px;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0 3px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: var(--AccentColor2);
    background: var(--TertiaryColor);
    border: 2px solid var(--AccentColor2);
}

/*Classic Fix*/
#txtQuantity.qty-button {
    border: 0;
    font-size: 30px;
    background: transparent;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: bold;
    color: var(--SecondaryColor);
}

/* Order Review SubButtons */
.order-review-quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.order-review-quantity-text {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    border-radius: 10px;
    margin: 0 5px;
    font-weight: bold;
    color: var(--SecondaryColor);
    background: transparent;
}

.order-review-quantity-button,
.order-review-remove-combo {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    border-radius: 50%;
    color: var(--AccentColor);
    background: transparent;
}

.order-review-remove-combo {
    z-index: 1;
    position: absolute;
    right: 18px;
}

    .order-review-remove-combo:after {
        content: '\f057';
        font-family: 'FAL';
    }

#minusButton:before,
#quantMinus:before {
    content: '\f056';
}

#plusButton:before,
#quantPlus:before {
    content: '\f055';
}

.button-down-state #plusButton,
.button-down-state #quantPlus {
    visibility: visible;
}

#plusButton[style='visibility: hidden;'],
#quantPlus[style='visibility: hidden;'] {
    opacity: 0.5;
}

.sub-button-down-state {
    background: var(--AccentColor2);
    color: var(--TertiaryColor);
}

.button-down-state #subButtons {
    visibility: visible;
}

.gray-out {
    pointer-events: none;
    opacity: 0.5;
}



/* =========================================================
       ***     BUTTONS: TEXT BUTTONS PILL SHAPES     ***
============================================================ */
/* To make mod buttons pill shape */
.Select-One-Item---Text---NoIButton-buttons .box,
.Select-Many-Items---Quantity---Dragalong-buttons .box,
.Select-One-Modifier---Text-buttons .box,
.Select-One-Modifier---Upsell---Text-buttons .box,
.Select-One-Modifier---AsIsCustom---Dragalong-buttons .box,
.Select-One-Modifier---Dragalong-buttons .box,
.Select-One-Modifier---Upsell---Dragalong-buttons .box,
.Select-Many-Modifiers---Text-buttons .box,
.Select-Many-Modifiers---Dragalong-buttons .box,
.Select-Many-Modifiers---Limited---Text-buttons .box,
.Select-Many-Modifiers---Quantity---Text-buttons .box,
.Select-Many-Modifiers---Quantity---Dragalong-buttons .box,
.Select-Many-Modifiers---Upsell---Dragalong-buttons .box,
.Select-Many-Modifiers---LNM---Text-buttons .box,
.Select-Many-Modifiers---Limited---Dragalong-buttons .box,
.Select-Many-Modifiers---LNM---Dragalong-buttons .box
/*.Main-Menu-buttons .image-button .box,
.Main-Menu-Text-buttons .text-button .box*/ {
    border-radius: 55px;
}

.Select-One-Item---Text---NoIButton-buttons .itemContent,
.Select-Many-Items---Quantity---Dragalong-buttons .itemContent,
.Select-One-Modifier---Text-buttons .itemContent,
.Select-One-Modifier---Upsell---Text-buttons .itemContent,
.Select-One-Modifier---AsIsCustom---Dragalong-buttons .itemContent,
.Select-One-Modifier---Dragalong-buttons .itemContent,
.Select-One-Modifier---Upsell---Dragalong-buttons .itemContent,
.Select-Many-Modifiers---Text-buttons .itemContent,
.Select-Many-Modifiers---Limited---Text-buttons .itemContent,
.Select-Many-Modifiers---Dragalong-buttons .itemContent,
.Select-Many-Modifiers---Quantity---Text-buttons .itemContent,
.Select-Many-Modifiers---Quantity---Dragalong-buttons .itemContent,
.Select-Many-Modifiers---Upsell---Dragalong-buttons .itemContent,
.Select-Many-Modifiers---LNM---Text-buttons .itemContent,
.Select-Many-Modifiers---Limited---Dragalong-buttons .itemContent,
.Select-Many-Modifiers---LNM---Dragalong-buttons .itemContent {
    padding: 10px 35px;
    min-height: 105px !important;
}



/* =========================================================
       ***     TEMPLATE: IMAGE / TEXT BUTTONS     ***
============================================================ */
.image-button,
.text-button {
    padding: 10px;
}

.order-review-item {
    padding: 10px 18px;
}

.image-button .itemContent {
    min-height: var(--ItemContentHeight);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.text-button .itemContent {
    min-height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.image-button .box {
    border: 0px;
    overflow: hidden;
}

.image-button #bimage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    margin: 0;
    height: 0; /* KEEP */
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) KEEP */
}

.image-button .overlaycontainer {
    display: none;
}

.text-button .caption {
    display: flex;
    justify-content: space-evenly;
    flex-flow: column;
}

.text-button .overlaycontainer {
    display: none;
}

/*  SPECIFIC TEMPLATE STYLES  */
.Select-Many-Modifiers---Text-buttons .text-button #textDesc {
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}



/* =========================================================
          ***    TEMPLATE: MAIN MENU BUTTONS     ***
============================================================ */

/*.Main-Menu-buttons .image-button .box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
}*/

/*.Main-Menu-buttons .image-button {
  padding: 0px 0px 0px 0px !important;
}*/

/*.Main-Menu-buttons .image-button #bimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 0;
  padding: 0;
}*/

/*.Main-Menu-buttons .image-button #btext {
  margin-bottom: 0px;
  -webkit-line-clamp: 2;
}*/

/*.Main-Menu-buttons .image-button .caption {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}*/

/*.Main-Menu-buttons .image-button .itemContent {
  min-height: auto;
  padding: 0 15px 0 15px;
  width: 80%;
}*/

/*.Main-Menu-buttons .image-button #textDesc {
  margin-bottom: 0;
  font-family: var(--SecondaryFontFamily);
  font-weight: normal;
  font-size: var(--DetailsTextSize);
  line-height: calc(var(--DescTextSize) + 4px);
}*/


/*    MAIN MENU TEXT BUTTONS    */

/*.Main-Menu-Text-buttons .box {
  height: 90px;
  display: flex;
}*/

/*.Main-Menu-Text-buttons #btext {
  font-family: var(--PrimarySemiBoldFontFamily);
  font-weight: normal;
  font-size: var(--ItemTitleSize);
  line-height: 24px;
}*/

/*.Main-Menu-Text-buttons .itemContent {
  min-height: auto;
  padding: 10px 35px;
}*/

/*.Main-Menu-Text-buttons #textDesc {
  margin-bottom: 0;
  -webkit-line-clamp: 1;
  font-family: var(--SecondaryFontFamily);
  font-weight: normal;
  font-size: var(--DetailsTextSize);
  line-height: calc(var(--DescTextSize) + 4px);
}*/


/* =========================================================
            ***     TEMPLATE: DRAGALONGS     ***
============================================================ */
.dragalong {
    padding-top: calc(56.25% / 2.2);
    width: 40%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    background-color: var(--TertiaryColor);
    margin: 0;
    position: absolute;
    z-index: 6;
    border: none;
    box-shadow: var(--BoxShadow);
}

#dragalongtext {
    padding: 20px 40px 5px 40px;
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--ItemTitleSize);
    line-height: calc(var(--ItemTitleSize) + 8px);
}

#dragalongdesc {
    padding: 5px 40px;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

#dragalong + #buttonscarousel .row {
    justify-content: flex-start;
    flex-flow: wrap;
    margin-left: 41%;
    padding: 0 60px 0 0px;
}

#dragalong + #buttonscarousel #buttons .text-button {
    width: 50%;
}


@media only screen and (width: 1080px) and (height: 1920px) {
    .dragalong {
        position: relative;
        margin: 0px auto 0 auto;
        width: 100%;
        padding-top: 56.25%;
        height: 46%;
    }

        .dragalong + #buttonscarousel #buttons .item.active,
        .dragalong + #buttonscarousel #buttons .item.next,
        .dragalong + #buttonscarousel #buttons .item.prev {
            align-items: flex-start;
        }

    #dragalong + #buttonscarousel .row {
        justify-content: center;
        flex-flow: wrap;
        margin: 25px auto;
        padding: 0 60px;
    }

    #dragalong + #buttonscarousel #buttons .text-button {
        width: 45%
    }

    #dragalongtext {
        padding: 20px 0px 5px 120px;
        font-size: 30px;
    }

    #dragalongdesc {
        padding: 5px 0 0px 120px;
        font-size: 20px;
    }
}

/* Online Ordering Dragalong */
.iorderfast-content #dragalong {
    left: 0;
    position: fixed;
}

    .iorderfast-content #dragalong + #buttons .row {
        justify-content: flex-start;
        flex-flow: wrap;
        margin-left: 46.5%;
    }

    .iorderfast-content #dragalong + #buttons .text-button {
        width: 50%;
    }

@media only screen and (max-width: 767px) and (orientation: portrait) {
    .iorderfast-content .dragalong {
        position: relative !important;
        margin: 0px auto 0 auto;
        width: 100%;
        padding-top: 56.25%;
    }

    .iorderfast-content #dragalong + #buttonscarousel .row {
        padding: 0 30px;
    }
    /* .iorderfast-content #dragalong + #buttons .text-button {
    width: 100%
  } */
    .iorderfast-content #dragalong + #buttons .row {
        margin-left: 0;
    }

    .iorderfast-content #dragalongtext {
        padding: 20px 0px 0px 20px;
    }

    .iorderfast-content #dragalongdesc {
        padding: 5px 0 25px 20px;
    }
}



/* =========================================================
              ***     DATA BUTTON COUNT      ***
                    applies to kiosk only
============================================================ */
/***  ITEM BUTTS COUNTS ***/
/* Item Image: 1 to 9 */
.kiosk-content .image-button {
    width: 25%;
}
/* Specific Mod: 5 */
.kiosk-content [data-button-count='5'] .image-button.menubutton {
    margin: 0 1px;
}
/* Specific Mod: 6 */
.kiosk-content [data-button-count='6'] .image-button.menubutton {
    width: 26%;
}
/* Item Image: 9 to 15+ */
.kiosk-content [data-button-count='9'] .image-button.menubutton,
.kiosk-content [data-button-count='10'] .image-button.menubutton,
.kiosk-content [data-button-count='11'] .image-button.menubutton,
.kiosk-content [data-button-count='12'] .image-button.menubutton,
.kiosk-content [data-button-count='13'] .image-button.menubutton,
.kiosk-content [data-button-count='14'] .image-button.menubutton,
.kiosk-content [data-button-count='15'] .image-button.menubutton {
    width: 20%;
}

/* Item Text & Main Menu: all */
.kiosk-content .text-button {
    width: 33.33%;
}

/*.kiosk-content .image-button.mainmenubutton {
    width: 33.33%;
}*/


/* =========================================================
              ***    GENERAL TAKEOVER     ***
============================================================ */
.takeover-container {
    width: 60%;
    background: #FFFFFF;
    padding: 20px;
    border-radius: var(--Curve);
    color: var(--PrimaryColor);
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

.takeover-header {
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    border-bottom: var(--Border);
}

.takeover-content {
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}
    /* Hide scrollbar for Chrome, Safari and Opera */
    .takeover-content::-webkit-scrollbar {
        display: none;
    }
/* Hide scrollbar for IE, Edge and Firefox */
.takeover-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.takeover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0;
    margin-top: 10px;
}

.takeover-title {
    width: 85%;
    font-family: var(--PrimaryBoldFontFamily) !important;
    font-weight: normal !important;
    font-size: var(--HeaderSize2) !important;
    line-height: 40px !important;
    text-align: left !important;
}

.takeover-description {
    width: 85%;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

.takeover-subtitle {
    padding-bottom: 10px;
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--SubHeaderSize);
    line-height: calc(var(--SubHeaderSize) + 4px);
}

.takeover-price {
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    line-height: calc(var(--PriceCalSize) + 10px);
    font-size: 20px;
}

.takeover-close {
    border-radius: 50%;
    color: var(--AccentColor);
    background-color: transparent;
    font-size: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    float: right;
    text-align: center;
    padding: 0px;
}

    .takeover-close:after {
        content: '\f057';
        font-family: 'FAL';
        font-size: 40px;
    }



/* =========================================================
          ***    ORDER DETAILS TAKEOVER     ***
============================================================ */
#popup-orderdetails .takeover-content {
    max-height: 500px;
    display: flex;
    flex-direction: row;
}

#popup-orderdetails .receipt-item-template {
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: var(--Border);
}

#popup-orderdetails #receipt-item-template {
    border-bottom: none !important;
}

#popup-orderdetails .receipt-item-text {
    width: 65%;
    font-family: var(--SecondaryBoldFontFamily);
    color: var(--AccentColor);
    font-weight: bold;
    font-size: var(--ItemTitleSize);
    line-height: calc(var(--ItemTitleSize) + 8px);
}

#popup-orderdetails .receipt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#popup-orderdetails .receipt-qty {
    font-size: 14px;
    font-family: var( --PrimaryRegFontFamily);
}

#popup-orderdetails .receipt-mod {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-left: 8px;
}

#popup-orderdetails .receipt-item, #popup-orderdetails .receipt-mod {
    padding-top: 0;
}

#popup-orderdetails .receipt-mod-symbol {
    display: inline-flex;
    padding-left: 0px;
    padding-right: 7px;
}

    #popup-orderdetails .receipt-mod-symbol:after {
        content: none;
        font-family: 'FAL';
        font-size: 10px;
    }

/* QTY buttons */
#popup-orderdetails .receipt-qty-btn-group {
    display: flex;
}

#popup-orderdetails .receipt-qty-btn {
    width: 30px;
    height: 30px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#popup-orderdetails #receipt-qty-txtQuantity.receipt-qty-btn {
    font-size: 18px;
    width: 25px;
}
/* will be programatically applied when max quantity has been reached*/
#popup-orderdetails .receipt-qty-btn-diabled {
    opacity: .5
}

#popup-orderdetails .receipt-qty-plus-btn:before {
    content: '\f055';
    font-family: 'FAL';
}

#popup-orderdetails .receipt-qty-minus-btn:before {
    content: '\f056';
    font-family: 'FAL';
}

#popup-orderdetails .receipt-mod-text {
    padding: 5px 25px 0 0;
    font-family: var(--PrimaryRegFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

#popup-orderdetails .receipt-mod-amount {
    font-family: var(--PrimaryRegFontFamily);
}


#popup-orderdetails .receipt-item-amount {
    font-size: 14px;
    font-family: var( --PrimaryRegFontFamily);
}

#popup-orderdetails [class*='receipt'][class*='amount'] {
    order: 1;
}

#popup-orderdetails .disabled {
    visibility: hidden;
}

#popup-orderdetails .NutritionsInfoContainer {
    width: 55%;
    margin-left: 65px;
}

#popup-orderdetails .nutritionContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: flex-start;
}

#popup-orderdetails .nutritionBox {
    margin: 0 0 8px 0;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

#popup-orderdetails .NutritionsText {
    font-family: var(--SecondaryFontFamily);
    font-weight: bold;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
    color: var(--PrimaryColor);
}

#popup-orderdetails .NutritionsLabel {
    font-family: var(--SecondaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
}

#popup-orderdetails .nutritionIndent .NutritionsLabel {
    padding: 0 0 0 10px;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

#popup-orderdetails .nutritionSubBox {
    display: flex;
    justify-content: center;
}

#popup-orderdetails .NutritionsUOM {
    margin-left: 2px;
    font-size: 14px;
    text-transform: lowercase;
    font-weight: bold;
    text-align: right;
}

#popup-orderdetails #caloriesUOM {
    display: none; /* turn off to have cal show after Calories */
}

/* keep */
#popup-orderdetails #totalFat:after,
#popup-orderdetails #transFat:after,
#popup-orderdetails #totalCarbs:after,
#popup-orderdetails #sugars:after,
#popup-orderdetails #protein:after,
#popup-orderdetails #satFat:after,
#popup-orderdetails #fiber:after,
#popup-orderdetails #cholesterol:after,
#popup-orderdetails #sodium:after,
#popup-orderdetails #calories:after {
    display: none;
}

@media only screen and (max-width: 1024px) {
    #popup-orderdetails .receipt-item-text {
        width: 55%;
    }
}

/* MOBILE STYLING FOR ORDER DETAILS TAKEOVER */
@media only screen and (max-width: 767px) {
    #popup-orderdetails .takeover-container {
        padding: 15px;
        width: 90%;
    }

    #popup-orderdetails .takeover-content {
        flex-direction: column;
    }

    #popup-orderdetails .takeover-title {
        line-height: 30px;
        width: 90%;
    }

    #popup-orderdetails .receipt-item-text {
        font-size: 18px;
        line-height: 25px;
    }

    #popup-orderdetails .receipt-mod-text {
        font-size: 14px;
    }

    #popup-orderdetails #receipt-item-template {
        margin-right: 0px;
        margin-bottom: 0;
    }

    #popup-orderdetails .NutritionsInfoContainer {
        width: 100%;
        margin-left: 0;
    }
}


/* =========================================================
          ***     I-BUTTON POPUP TAKEOVER     ***
============================================================ */
#popup-ibutton .takeover-content {
    max-height: 500px;
    margin: 15px 0;
    display: flex;
    flex-direction: row;
}

#popup-ibutton .DietaryContainer {
    width: 100%;
    margin-right: 65px;
}

#popup-ibutton .NutritionsInfoContainer {
    width: 100%;
}

#popup-ibutton #overlayContainer,
#popup-ibutton #allergenUnMatchedContainer,
#popup-ibutton #allergenMatchedContainer {
    display: flex;
    flex-flow: row wrap;
}

#popup-ibutton .allergenMatchedInfo,
#popup-ibutton .allergenUnMatchedInfo {
    margin-bottom: 20px;
}

#popup-ibutton #allergenMatchedTitle,
#popup-ibutton #allergenUnMatchedTitle,
#popup-ibutton #overlayTitle {
    margin-bottom: 5px;
    font-size: var(--DetailsTextSize);
}

/* Dynamically Applied! */
#popup-ibutton .AllergenContainer,
#popup-ibutton .OverlayContainer {
    margin-right: 15px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 50px;
}

/* Dynamically applied! */
#popup-ibutton .AllergyImage,
#popup-ibutton .OverlayImage {
    height: 50px;
    min-width: 50px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Dynamically applied! */
#popup-ibutton .allergyText,
#popup-ibutton .AllergyText,
#popup-ibutton .OverlayText {
    font-size: 12px;
    text-transform: capitalize;
}

/* Dynamically applied WARNING on allergy overlay */
#popup-ibutton .hasAllergy:after {
    content: '\f06a';
    font-family: 'FAS';
    font-size: 20px;
    color: red;
    margin-right: -50px;
}

#popup-ibutton .nutritionContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: flex-start;
}

#popup-ibutton .nutritionBox {
    margin: 0 0 8px 0;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

#popup-ibutton .nutritionSubBox {
    display: flex;
    justify-content: center;
}

#popup-ibutton .NutritionsText {
    font-family: var(--SecondaryFontFamily);
    font-weight: bold;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
    color: var(--PrimaryColor);
}

/* unit of measurement */
#popup-ibutton .NutritionsUOM {
    margin-left: 2px;
    font-size: 14px;
    text-transform: lowercase;
    font-weight: bold;
}

#popup-ibutton #caloriesUOM {
    display: none; /* turn off to have cal show after Calories */
}

#popup-ibutton .NutritionsLabel {
    text-align: center;
    font-family: var(--SecondaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: var(--DescTextSize);
}

#popup-ibutton .nutritionIndent .NutritionsLabel {
    padding: 0 0 0 10px;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

/* keep */
#popup-ibutton #totalFat:after,
#popup-ibutton #transFat:after,
#popup-ibutton #totalCarbs:after,
#popup-ibutton #sugars:after,
#popup-ibutton #protein:after,
#popup-ibutton #satFat:after,
#popup-ibutton #fiber:after,
#popup-ibutton #cholesterol:after,
#popup-ibutton #sodium:after,
#popup-ibutton #calories:after {
    display: none;
}

/* MOBILE STYLING FOR I-BUTTON TAKEOVER */
@media only screen and (max-width: 767px) {
    #popup-ibutton .takeover-container {
        padding: 15px;
        width: 90%;
    }

    #popup-ibutton .takeover-content {
        flex-direction: column;
    }

    #popup-ibutton .takeover-title {
        line-height: 30px;
        width: 90%;
    }

    #popup-ibutton .NutritionsInfoContainer {
        margin-right: 0px;
        padding-top: 15px;
    }

    #popup-ibutton .nutritionContent {
        max-height: 275px;
        overflow: scroll;
    }
}


/* =========================================================
          ***     REASON CODE POPUP     ***
============================================================ */
#reasoncodecontainer {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

.reasoncodelistitem {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 70px;
    min-width: 200px;
}

#reasoncodecountcontainer {
    display: flex;
    justify-content: center;
}

.reasoncodebutton {
    background-color: var(--AccentColor);
    color: white;
}



/* =========================================================
      ***    AVAILABLE TENDERS LOYALTY TENDERS     ***
============================================================ */
#popup-available-tenders .takeover-container {
    width: 70%;
}

#popup-available-tenders .takeover-content {
    max-height: 675px;
}

#popup-available-tenders #noTender {
    font-size: 35px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

#popup-available-tenders #amountText {
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    line-height: calc(var(--PriceCalSize) + 10px);
    font-size: 20px;
}

#popup-available-tenders .tenderContainer {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
}

#popup-available-tenders .tender {
    margin: 10px;
    width: 45%;
    min-height: 115px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#popup-available-tenders .tender-item {
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    transition-delay: 0s;
    padding: 15px 0px 15px 15px;
    margin-bottom: 0;
    width: calc(100% - 65px);
}

#popup-available-tenders .check-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 38px;
    line-height: 50px;
    visibility: visible;
    border: var(--Border);
    display: flex;
    color: transparent;
    align-content: center;
    justify-content: center;
}

    #popup-available-tenders .check-circle:before {
        content: '\f00c';
        padding-top: 4px;
        font-family: 'FAL';
        margin: -2px 0 0 12px;
    }

#popup-available-tenders .tender.tenderSelected {
    transition: 0.15s;
}

    #popup-available-tenders .tender.tenderSelected .check-circle {
        background: var(--AccentColor);
        color: var(--TertiaryColor);
    }

#popup-available-tenders input[type="checkbox"] {
    visibility: hidden;
}

#popup-available-tenders #tenderText {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: 100%;
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--ItemTitleSize);
    line-height: calc(var(--ItemTitleSize) + 8px);
}

#popup-available-tenders #tenderDiscount {
    width: 100%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
}

#popup-available-tenders #tenderAmount {
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--PriceCalSize);
    line-height: calc(var(--PriceCalSize) + 10px);
}

#popup-available-tenders #check_select {
    display: none;
}

#popup-available-tenders .modal-footer .btn {
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    #popup-available-tenders .tender {
        width: 100%;
    }
}
/* MOBILE STYLING FOR ORDER DETAILS TAKEOVER */
@media only screen and (max-width: 767px) {
    #popup-available-tenders #amountText {
        font-size: 16px;
    }

    #popup-available-tenders .takeover-container {
        width: 90%;
    }
}


/* =========================================================
      ***    KIOSK FUTURE ORDER POPUP TAKEOVER     ***
============================================================ */
/* FO Button on Splash Screen */
#splash #futureOrderContainer {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 0px;
    z-index: 3;
}

    #splash #futureOrderContainer #futureOrderText {
        width: 40%;
        height: 60px;
        padding: 0 20px;
        line-height: 60px;
        background: var(--AccentColor2);
        color: #FFF;
        font-size: 30px;
        font-family: var(--PrimarySemiBoldFontFamily);
        text-align: center;
        border-bottom-left-radius: var(--Curve);
        border-bottom-right-radius: var(--Curve);
    }

        #splash #futureOrderContainer #futureOrderText:before {
            content: '\f017';
            font-family: 'FAL';
            font-size: 30px;
            padding-right: 20px;
        }
/* FO Button on Header */
#menu-header #futureOrderContainer {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 0px;
    z-index: 3;
}

    #menu-header #futureOrderContainer #futureOrderText {
        width: 40%;
        height: 60px;
        padding: 0 20px;
        line-height: 60px;
        background: var(--AccentColor2);
        color: #FFF;
        font-size: 30px;
        font-family: var(--PrimarySemiBoldFontFamily);
        text-align: center;
        border-bottom-left-radius: var(--Curve);
        border-bottom-right-radius: var(--Curve);
    }

        #menu-header #futureOrderContainer #futureOrderText:before {
            content: '\f017';
            font-family: 'FAL';
            font-size: 30px;
            padding-right: 20px;
        }

@media only screen and (width: 1080px) and (height: 1920px) {
    #futureOrderContainer #futureOrderText {
        width: 45%;
        height: 80px;
        line-height: 80px;
        font-size: 35px;
    }

        #futureOrderContainer #futureOrderText:before {
            font-size: 35px;
        }
}

#popup-futureorders .takeover-content {
    max-height: 100%;
    overflow-y: visible;
    overflow-x: visible;
    height: 80%;
}

#popup-futureorders .takeover-container {
    width: 80%;
}

#popup-futureorders .takeover-subtitle {
    margin-top: 30px;
}

#popup-futureorders .selectDay,
#popup-futureorders .selectTime {
    visibility: hidden;
}

#popup-futureorders .selectOrderOpts,
#popup-futureorders .selectDayOpts {
    display: flex;
    justify-content: flex-start;
    padding: 5px 0;
    flex-flow: row wrap;
}

#popup-futureorders .orderMethodBtn:focus,
#popup-futureorders .orderMethodBtn.selected,
#popup-futureorders .selectDayBtn:focus,
#popup-futureorders .selectDayBtn.selected,
#popup-futureorders .selectTimeBtn:focus,
#popup-futureorders .selectTimeBtn.selected {
    background: var(--AccentColor);
    color: #FFF;
}

#popup-futureorders button:disabled,
#popup-futureorders button[disabled] {
    color: #e6e6e6;
}

#popup-futureorders .selectOrderOpts .orderMethodBtn {
    margin-right: 22px;
    margin-bottom: 10px;
    height: 70px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#popup-futureorders .selectDayOpts .selectDayBtn {
    margin-right: 20px;
    width: 100px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#popup-futureorders .selectDayBtn .FOday {
    font-size: 28px;
    line-height: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

#popup-futureorders .selectDayBtn .FOdate {
    font-size: 16px;
}

#popup-futureorders .selectTimeContainer {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    flex-flow: row;
    margin-left: -15px;
}

#popup-futureorders .selectTimeOpts {
    width: 95%;
    display: flex;
    align-content: flex-start;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: justify;
    flex-flow: row wrap;
}

    #popup-futureorders .selectTimeOpts .selectTimeBtn {
        margin: 15px;
        border-radius: 30px;
        font-size: 18px;
        width: 110px;
        height: 40px;
    }

#popup-futureorders .selectTimeArrows {
    width: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

#popup-futureorders .upArrow,
#popup-futureorders .downArrow {
    background-color: var(--AccentColor2);
    border-radius: 50%;
    color: #FFF;
    font-family: 'FAL';
    font-size: 28px;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--BoxShadow);
    border: 0;
    margin: 20px 0;
}

    #popup-futureorders .upArrow:after {
        content: '\f077';
    }

    #popup-futureorders .downArrow:after {
        content: '\f078';
    }

#popup-futureorders .box {
    color: var(--PrimaryColor);
    padding: 8px;
    font-family: Helvetica, Tahoma, sans-serif;
    text-align: center;
    background: var(--TertiaryColor);
    border: var(--Border);
    border-radius: var(--Curve);
    box-shadow: var(--BoxShadow);
    font-size: 18px;
}

#popup-futureorders .futureOrdersOkBtn {
    font-size: 22px;
    border: 0px;
    min-width: 150px;
    height: 50px;
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--TertiaryColor);
    color: var(--AccentColor);
    border-radius: var(--Curve);
    font-family: var(--SecondaryFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
    cursor: pointer;
}

/* Text displaying in header of ordering screen for date eg: Ordering for February 1 @ 4:45 PM*/
#futureOrderTextContainer {
    z-index: 3;
    position: absolute;
    right: 25px;
    top: 80px;
    border: 0px;
    border-radius: var(--Curve);
    padding: 5px 10px;
    background: red;
    color: #FFFFFF;
    font-family: Helvetica, Tahoma, sans-serif;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .25);
}
    /* WSH Added: For the text displaying in header of ordering screen for date eg: Ordering for February 1 @ 4:45 PM*/
    #futureOrderTextContainer .futureOrderDateText {
        background: var(--TertiaryColor);
        color: var(--AccentColor);
        font-family: var(--SecondaryFontFamily);
        font-weight: normal;
        font-size: var(--DescTextSize);
        line-height: calc(var(--DescTextSize) + 4px);
    }

@media only screen and (min-width: 1366px) and (min-height: 768px), screen and (orientation: landscape) {
    #popup-futureorders .takeover-content {
        display: flex;
        justify-content: flex-start;
        max-height: 100%;
        overflow-y: visible;
        overflow-x: visible;
    }

    #popup-futureorders .selectOrder,
    #popup-futureorders .selectDay {
        /* max-height: 350px; */
        width: 30%;
        margin-top: 0;
        padding-right: 15px;
    }

    #popup-futureorders .selectTimeContainer {
        margin-left: -10px;
    }

    #popup-futureorders .selectTime {
        width: 75%;
        margin-top: 0;
    }

    #popup-futureorders .selectOrderOpts,
    #popup-futureorders .selectDayOpts {
        flex-flow: column;
        padding: 0;
    }

    #popup-futureorders .selectTimeOpts {
        width: 90%;
        height: 400px;
    }

    #popup-futureorders .selectTimeArrows {
        width: 10%;
    }

    #popup-futureorders .takeover-subtitle {
        margin: 10px 0;
        font-size: 20px;
    }

    #popup-futureorders .selectDayOpts .selectDayBtn {
        margin: 10px 0;
        width: 180px;
        height: 40px;
        flex-direction: row;
    }

    #popup-futureorders .selectOrderOpts .orderMethodBtn {
        margin: 8px 0;
        height: 40px;
        width: 180px;
        font-size: 16px;
        font-weight: bold;
    }

    #popup-futureorders .selectDayBtn .FOday {
        font-size: 20px;
    }

    #popup-futureorders .selectDayBtn .FOdate {
        font-size: 18px;
        padding: 0 0 0 8px;
    }

    #popup-futureorders .selectTimeOpts .selectTimeBtn {
        width: 85px;
        margin: 10px 10px 25px 10px;
        height: 30px;
        font-size: 16px;
        line-height: 16px;
    }
}


/* =========================================================
          ***     SCAN ELEMENTS STYLES     ***
============================================================ */
#scanItems {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scan-current-item-prompt {
    display: none;
}

.scan-total {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-top: 1px solid var(--SecondaryColor);
}

.scan-items-wrapper {
    height: 350px;
    width: 45vw;
    padding: 20px;
    overflow-y: scroll;
}

#scan-items {
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

    #scan-items:empty {
        align-items: center;
        justify-content: center;
    }

        #scan-items:empty:before {
            content: '\f02a';
            font-family: 'FAL';
            font-size: 150px;
        }

.scan-item-wrapper {
    display: flex;
    margin-bottom: 0.25em;
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--ItemTitleSize);
    line-height: calc(var(--ItemTitleSize) + 8px);
}

#scan-item-description {
    flex-grow: 1;
}

.running-total {
    border-radius: 10px;
    width: 50%;
    position: relative;
}

    .running-total .total-label,
    .running-total .description-text {
        width: 25%;
    }

    .running-total #scan-item-total {
        width: 50%;
    }

#previewer .previewer-only {
    display: block;
}

.previewer-only {
    display: none;
}

#fakeScan {
    position: absolute;
    top: -100px;
    width: 20vw;
    background: red;
    height: 40px;
    line-height: 40px;
}

#scan-to-pay-message {
    display: none;
}

    #scan-to-pay-message.showing-scan-to-pay-message {
        display: block;
        position: absolute;
        width: 100%;
        bottom: 100px;
        left: 0;
        right: 0;
        text-align: center;
        font-family: var(--PrimaryBoldFontFamily);
        font-weight: normal;
        font-size: var(--HeaderSize2);
        line-height: calc(var(--HeaderSize) + 4px);
    }


/* =========================================================
          ***     MOBILE SCANNING     ***
============================================================ */
.kiosk-content #clip-orderinstore {
    display: none;
}

.iorderfast-content #scanItemsForm {
    padding: 20px;
}

.mobileScan .scannerForm {
    height: 100%;
}

.mobileScan .iorderfast-content #clip-template {
    display: none;
}

.iorderfast-content #scanItemsForm .control-button {
    background: var(--AccentColor);
    color: var(--TertiaryColor);
    height: 60px;
}

    .iorderfast-content #scanItemsForm .control-button:last-child {
        margin-top: 20px;
    }

.mobileScan #orderinstore,
.mobileScan #orderinstore a { /* keep to override main-bs.css */
    color: var(--AccentColor);
}

    .mobileScan #orderinstore .form.box {
        max-width: 100%;
    }

    .mobileScan #orderinstore .scanTop {
        height: 40%;
    }

    .mobileScan #orderinstore #scanner-container {
        height: 180px !important;
        width: 100% !important;
    }

    .mobileScan #orderinstore .scanItemsHeader {
        text-transform: uppercase;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 0px;
        text-align: center;
    }

    .mobileScan #orderinstore .yourOrderHeader {
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 5px;
    }

.mobileScan #scanningHeader {
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    padding: 0 20px;
    color: forestgreen;
    font-weight: bold;
}

.mobileScan #orderinstore #scanningError {
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    padding: 0px 30px;
    color: red;
    font-weight: bold;
}

.mobileScan #orderinstore .scanOrder.form.box {
    overflow: scroll;
    height: 100vh;
    border: none;
    padding: 15px 0;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.mobileScan #orderinstore .scanOrder .scannedItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--SecondaryColor);
    background: rgba(225,225,225,.5);
}

.mobileScan #orderinstore #scannedItemDesc {
    width: 60%;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
}

.mobileScan #orderinstore #scannedItemPrice {
    width: 20%;
    font-size: 15px;
}

.mobileScan #orderinstore .scanLessMore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    font-size: 18px;
}

.mobileScan #orderinstore .quantMinus,
.mobileScan #orderinstore .quantPlus {
    margin: 0 10px;
}

#quantMinusScannedItem,
#quantPlusScannedItem {
    font-size: 0;
}

.mobileScan #orderinstore #quantPlusScannedItem:after {
    content: '\f055';
    font-family: 'FAR';
    font-size: 22px;
}

.mobileScan #orderinstore #quantMinusScannedItem:after {
    content: '\f056';
    font-family: 'FAR';
    font-size: 22px;
}

.mobileScan #orderinstore .scan-total .total-label {
    padding-right: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.mobileScan #orderinstore .running-total {
    width: 100%;
    padding-top: 10px;
}

.mobileScan #orderinstore .scan-total {
    height: 50px;
    border-top: 0;
    text-align: right;
    font-size: 16px;
    padding: 0 20px;
}

.mobileScan #controlbuttons > div {
    width: 100%;
}

/* animations for mobile scan. pls keep */
.scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

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

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

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




/* =========================================================
          ***     WEIGH ELEMENTS STYLES     ***
============================================================ */
#weighItem {
    height: 100%;
    width: 100%;
    background: url('../images/scale.png') center center no-repeat;
    filter: drop-shadow(0 0 10px black);
}

.WeighItems #buttons {
    height: 100%;
}


/* =========================================================
          ***     KIOSK ORDER REVIEW ELEMENTS STYLES     ***
============================================================ */
.kiosk-content #buttons.order-review-buttons {
    display: block;
    margin: 0 0 0 7%;
    padding: 30px 5px;
    height: 100%;
    overflow-y: scroll !important;
    background: transparent;
}

    .kiosk-content #buttons.order-review-buttons::-webkit-scrollbar {
        width: 70px;
    }

    .kiosk-content #buttons.order-review-buttons::-webkit-scrollbar-track {
        box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.33);
        border: solid 30px transparent;
        border-radius: 5px;
        border-radius: 10px;
    }

    .kiosk-content #buttons.order-review-buttons::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.75);
        border: solid 30px transparent;
    }

/* ============================================================
    ***     ORDER REVIEW     ***
============================================================ */
#orderreview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: var(--ItemBorder);
}

    #orderreview:not(:last-of-type) {
        margin-bottom: 20px;
    }

.order-review-buttons:last-child {
    margin-bottom: 80px;
}

#orderreview:last-of-type {
    border-bottom: var(--ItemBorder);
}

.order-review-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 5px 0;
}

.order-review-amount-text {
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: bold;
    font-size: var(--PriceCalSize);
    line-height: calc(var(--PriceCalSize) + 10px);
}

#modtext {
    font-family: var(--PrimaryRegFontFamily);
    font-weight: normal;
    font-size: var(--DetailsTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
    padding-top: 5px;
}

.order-review-modtext:empty {
    display: none;
}

.order-review-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-review-special-instructions #comment {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 5px;
    border-radius: 0;
    border-bottom: 0;
    border-top: var(--ItemBorder);
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    display: var(--SpecialInstrutionsOrderReview);
}

#receipttext {
    flex-grow: 1;
    font-family: var(--SecondaryBoldFontFamily);
    font-weight: bold;
    font-size: var(--SubHeaderSize);
    line-height: calc(var(--SubHeaderSize) + 4px);
    color: var(--AccentColor);
}

#receipt:after {
    font-family: 'FAS';
    content: '\f290';
    margin-left: 5px;
}

#txtTotalLabel {
    display: none;
}

#payment #receipt:after,
.order-review #receipt:after {
    display: none;
}

/* Removes icons from control buttons on payment screen - need */
#payment .control-button-orderreview:before,
#payment .control-button-additem:before,
#payment .control-button-back:before,
#payment .control-button-cancel:before,
#payment .control-button-continue:before,
#payment .control-button-done:before,
#payment .control-button-submit:before {
    display: none;
}


/* =========================================================
          ***     PAGINATION ELEMENTS STYLES     ***
============================================================ */
.kiosk-content .row {
    padding: 0 60px;
}

.carousel-control-prev,
.carousel-control-next {
    position: fixed;
    top: calc(50% - 55px);
    right: 15px;
    width: 40px;
    border-radius: 20px;
    font-size: 40px;
    background: transparent;
    color: var(--AccentColor);
    font-weight: normal;
}

.carousel-control-prev {
    margin-top: 70px;
}

    .carousel-control-prev:before {
        content: '\f0a8';
    }

.carousel-control-next:before {
    content: '\f0a9';
}


/* =========================================================
    ***     PAYMENT / TENDER / UTILITY SCREEN      ***
============================================================ */
.paymentclip,
#repeatOrderPhase,
#previousorders-form,
#orders,
#greenreceipt,
#complete-hitarea,
#clip-offline-kiosk {
    display: flex;
    justify-content: center;
    align-items: center;
}

.offlinemessage {
    text-align: center;
    font-size: 24pt;
}

#clip-choices,
#previousorders-form,
#clip-offline-kiosk,
#accountmanagement {
    width: 100%;
    height: 100%;
}

#previousorders-form {
    overflow: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.previous-order::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.previous-order {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

#paymentclip-select .row {
    height: auto;
    display: flex !important;
}

#repeatOrderPrompt {
    animation: fadeInRight 0.25s; /* test this */
}

#repeatOrderPhase {
    height: 100%;
}

.payment-button,
.repeatOrderPromptButton,
.repeatOrderButton {
    display: inline-block;
    border: var(--ItemBorder);
    margin: 10px;
    padding: 0;
    overflow: hidden;
    width: 200px;
}

    .payment-button #btext,
    .repeatOrderPromptButton #btext,
    .repeatOrderButton #btext {
        border-top: var(--ItemBorder);
        height: 2.5em;
        line-height: 1em;
        font-size: 20px;
        -webkit-line-clamp: 2;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
    }

.payment-media-wrapper {
    position: relative;
    z-index: 1;
}

    .payment-media-wrapper #bicon {
        z-index: -1;
        font-family: 'FAL';
    }

.payment-button #bimage,
.payment-button #bicon,
.repeatOrderPromptButton #bicon,
.repeatOrderButton #bicon {
    display: flex;
    height: 126px;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 75px;
}

.payment-button #bimage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

/* universal tender fit for tender builder */
#bimage img {
    object-fit: contain;
    width: 175px;
    height: 175px;
}

.paymentclip img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid white;
}

[id*='newOrder'] #bicon:before {
    content: '\f067';
}

[id*='repeatButton'] #bicon:before {
    content: '\f2f9';
}

[id*='PinButton'] #bicon:before {
    content: '\f00a';
}

[id*='cancel'] #bicon:before,
.cancel #bicon:before {
    content: '\f00d';
}

.phone #bicon:before {
    content: '\f10b';
}

.credit #bicon:before {
    content: '\f09d';
}

.face #bicon:before {
    content: '\f4fc';
}

.payment-container,
#ordercomplete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 600px;
}

#selectPaymentMessage {
    position: absolute;
    top: 15%;
    width: 100%;
    text-align: center;
}

.payment-message {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--HeaderSize2);
    line-height: calc(var(--HeaderSize) + 4px);
    color: var(--PrimaryColor);
}

.accepted-card-types {
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--SubHeaderSize);
    line-height: calc(var(--SubHeaderSize) + 4px);
    color: var(--SecondaryColor);
}

.payment-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 200px;
    margin-bottom: 30px;
}

#swipeImageCredit,
#swipeImage {
    background: url('../images/tenders/promptImage_Swipe.png') no-repeat;
    background-position: center center;
    background-size: contain;
}

#swipeImage2 {
    background: url('../images/tenders/Swipe_2.png') no-repeat;
    background-position: center center;
    background-size: contain;
}

#credit-form .payment-message {
    margin-bottom: 30px;
}

.card-image {
    display: inline;
    font-family: 'FAB';
    font-size: 40px;
    margin: 0 5px;
}

.visa:before {
    content: '\f1f0';
}

.mastercard:before {
    content: '\f1f1';
}

.amex:before {
    content: '\f1f3';
}

.discover:before {
    content: '\f1f2';
}

.diners:before {
    content: '\f24c';
}

.jcb:before {
    content: '\f24b';
}

#testpayment {
    display: none;
}


/* =========================================================
              ***     SURVEY ELEMENTS      ***
============================================================ */
#survey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    #survey .survey-question.rate {
        margin-bottom: 15px;
    }

    #survey .survey-answer-list {
        padding: 15px 0;
    }

        #survey .survey-answer-list .survey-button {
            padding: 15px;
            margin: 10px auto;
            text-align: center;
            width: 50%;
        }

    #survey .survey-selected {
        background: rgba(0, 0, 0, 0.20);
    }


/* =========================================================
  ***     PREVIOUS ORDERS & MY AVAILABLE FAVORITES      ***
============================================================ */
.page-header {
    position: absolute;
    top: -190px;
    text-align: center;
    width: 100%;
    font-size: 45px;
    font-family: var(--BodyFontFamily);
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: none;
}

#welcome {
    width: 100%;
    position: absolute;
    /*top: 2%;*/
    font-size: 18px;
    line-height: 18px;
    font-family: var(--BodyFontFamily);
    text-align: center;
    margin: 25px auto 0;
    color: var(--PrimaryColor);
}

.previous-orders-welcome {
    font-size: 24px;
    font-weight: bold;
    padding: 0px 0px;
}

.previous-orders-instructions {
    padding: 10px 0;
    font-size: 16px;
}

.previous-order {
    margin: 15px;
    width: 325px;
    height: 425px;
    overflow: scroll;
    padding: 0;
    font-family: var(--BodyFontFamily);
    color: var(--PrimaryColor);
    background: var(--TertiaryColor);
}

.item-header {
    margin-bottom: 15px;
    width: 100%;
    padding: 15px 15px 5px 15px;
    top: 0;
    left: 0;
    z-index: 5;
    border-bottom: var(--Border);
    position: sticky;
    background: white;
}

#orderdate {
    font-size: 16px;
    margin: 0;
    font-family: var(--BoldFontFamily);
}

#totalPreviousOrder {
    font-size: 12px;
    font-style: italic;
    margin: 0 0 5px 0;
}

.previousorder-button {
    font-weight: bold;
    position: absolute;
    overflow: auto;
    top: 10px;
    right: 10px;
}

.previous-order-item {
    background: white;
    padding: 0 0 10px 0;
    margin: 10px 15px;
    border-bottom: var(--Border);
    display: flex;
    font-size: 16px;
    line-height: 16px;
}

    .previous-order-item a {
        color: var(--SecondaryColor);
        width: 100%;
    }

    .previous-order-item.remove {
        opacity: 0.5;
    }

    .previous-order-item .previous-order-itemtext,
    .previous-order-item .previous-order-pricetext {
        display: inline-block;
    }

    .previous-order-item .previous-order-itemtext {
        width: 75%;
        color: var(--PrimaryColor);
        font-size: var(--ItemTitleFontSize) !important;
    }

    .previous-order-item .previous-order-pricetext {
        float: right;
        font-family: var(--PrimaryBoldFontFamily);
        color: var(--PrimaryColor);
    }

    .previous-order-item #modtext {
        width: 75%;
        color: var(--SecondaryColor);
    }

.previous-order-addremovebutton {
    background: var(--AccentColor);
    border-radius: 5px;
    font-size: 10px;
    color: white;
    position: relative;
    float: right;
    border: 0;
    margin-top: -10px;
}

#loadOrder > div {
    color: white;
    width: 100%;
    text-align: center;
}

#previousItemsPopOut .previous-order {
    text-align: left;
    background: var(--BGColor);
}

.previous-order:nth-child(n + 7) {
    display: none;
}

.previous-orders #items {
    padding: 0;
}

#previousorders .previousorder-button .popup-button,
#previousorders .previousorder-button .popup-button:hover,
#previousItemsPopOut .previousorder-button .popup-button,
#previousItemsPopOut .previousorder-button .popup-button:hover {
    background: transparent !important;
    color: var(--PrimaryColor) !important;
    border-radius: 25px !important;
    width: 100%;
    height: 35px !important;
    font-size: 14px;
    border: 0;
    min-width: 60px !important;
}

.previousItemsArea {
    position: absolute;
    right: 2%;
    top: 16%;
}

#popOutButton {
    color: var(--TertiaryColor);
    background: var(--AccentColor);
    font-size: 18px;
    padding: 10px 20px;
}

    #popOutButton:after {
        content: '\f004';
        font-family: 'FAS';
        padding-left: 8px;
    }


/*  Online Ordering Styling for Previous Orders */
.iorderfast-content #previousorders #welcome {
    position: relative;
}

.iorderfast-content #previousorders-form {
    overflow: auto;
    margin-bottom: 150px !important;
}

    .iorderfast-content #previousorders-form #orders {
        flex-flow: wrap;
    }

    .iorderfast-content #previousorders-form .previous-order {
        overflow-y: scroll;
    }


.wider {
    width: 100%;
    height: 75%
}

.load-order-btn,
.load-order-btn:hover {
    text-align: center;
    width: 100%;
    display: inline-block !important;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 11pt;
    line-height: 1.42857143;
    border: 2px solid white;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.modal-content .load-order-btn {
    display: block;
}

#clip-complete,
#complete-hitarea {
    height: 100%;
}

#ordercomplete > div:not(:empty) {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--HeaderSize2);
    line-height: calc(var(--HeaderSize) + 4px);
    text-align: center;
    margin: 10px 0;
}

#ordercomplete > #ordernumber:not(:empty) {
    font-size: 5em;
    line-height: 1em;
}


/* =========================================================
              ***     SPLASH SCREEN      ***
============================================================ */
#splash {
    background: var(--SplashStaticBackground);
}

#dynamicsplashvideo {
    display: var(--SplashDisplayVideo);
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
}

#splashGuestVideoTarget {
    display: var(--SplashGuestVideo);
    position: fixed;
    top: calc(100% - 30px - 240px);
    left: calc(100% - 15px - 340px);
    border-radius: 30px;
    overflow: hidden;
    border: 3px solid var(--AccentColor);
    background: dimgray;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.66);
}

    #splashGuestVideoTarget > img {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        border: none;
        background-color: transparent;
    }

#splashInstructionsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
}

#splashLogo {
    display: var(--SplashDisplayLogo);
    height: 200px;
    width: 200px;
    background: var(--LogoImage) no-repeat center center;
    background-size: contain;
    margin-bottom: 20px;
}

#splashInstructionHeader {
    display: none;
}

#splashInstructions {
    width: 100%;
    height: calc(2 * var(--SplashSize));
}

.splashInstruction {
    width: 100%;
    opacity: 0;
    position: absolute;
    line-height: 1em;
    padding: 0 15%;
    text-align: center;
    color: var(--SplashColor);
    font-size: var(--SplashSize);
    font-weight: var(--SplashWeight);
}

.splashMessage {
    display: inline-block;
}

.splashSequence {
    display: var(--SplashDisplayNumber);
}

    .splashSequence:after {
        content: '.';
    }

.splash-in {
    /*animation: var(--SplashEntranceAnimation);*/
    opacity: 1;
}

.splash-out {
    /*animation: var(--SplashExitAnimation);*/
    opacity: 0;
}

#languageSwitcher {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    font-size: 30px;
}

.splash-language-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 0;
}

.alternateLanguageToStart {
    position: initial;
    bottom: initial;
    left: initial;
    width: initial;
    padding: 0 20px;
    margin-left: initial;
    height: 60px;
    line-height: 60px;
    background: black;
    font-size: 24px;
    font-weight: bold;
    border: initial;
    border-top-left-radius: var(--Curve);
    border-top-right-radius: var(--Curve);
}

    .alternateLanguageToStart:before {
        content: none;
    }

.lang-icon:before {
    font-family: 'FAL';
    content: '\f06e';
    font-weight: 400;
    margin-right: 15px;
}

#splashvideo {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#languageSwitcher:before {
    content: '\f0ac';
    display: none;
}

#languageSwitcher {
    background: none !important;
}

#statusMessageContainer {
    position: relative;
    color: var(--PrimaryColor);
}

    #statusMessageContainer > div {
        line-height: 2em;
        padding: 0 1em;
        text-align: center;
    }

#splashGuestVideoTarget {
    position: fixed;
    top: 30px;
    left: 30px;
}

    #splashGuestVideoTarget > img {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        border: none;
        background-color: transparent;
    }



/* =========================================================
            ***     ACCOUNT MANAGEMENT      ***
============================================================ */
/* ACCOUNT MANAGEMENT SPLASH BUTTON */
#accountManContainer {
    position: absolute;
    z-index: 1050;
    top: 30px;
    right: 10px;
    border-radius: 50px;
    background: var(--SecondaryColor);
    color: #FFF;
    height: 60px;
    width: 175px;
    padding: 8px;
}

    #accountManContainer #accountManText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 175px;
        height: 45px;
        font-size: 13px;
        line-height: 14px;
        text-transform: uppercase;
    }

        #accountManContainer #accountManText:before {
            content: '\f4fe';
            font-family: 'FAL';
            font-size: 25px;
            line-height: 25px;
            color: var(--SecondaryColor);
            background: #FFF;
            padding: 10px 6px 10px 10px;
            border-radius: 50%;
            margin-right: 8px;
        }

#AccountchangeMfa-Container .box {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 35px 0;
}


/* ACCOUNT MANAGEMENT PAGES */
#account-info,
#account-credit-form,
#account-management-complete {
    height: calc(100vh - var(--BottomToolbarHeight) - var(--TopToolbarHeight));
    display: flex;
    align-items: center;
    justify-content: center;
}

.accountgeneric {
    height: calc(100vh - var(--BottomToolbarHeight) - var(--TopToolbarHeight));
    display: flex;
    align-items: center;
    justify-content: center;
}

.accountManBtn {
    display: flex;
    justify-content: center;
}

.accountManageInner {
    flex-flow: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

#modalCreateAccount .modal-content,
#modalDeactivateAccount .modal-content,
#modalTransferFunds .modal-content {
    width: 50%;
}

#modalCreateAccount .modal-body,
#modalDeactivateAccount .modal-body,
#modalTransferFunds .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#modalCreateAccount .modal-body,
#modalTransferFunds .modal-body {
    align-items: flex-start;
    margin-left: 20px
}

.activity-wrapper,
.account-wrapper {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 25px;
    margin-bottom: 25px;
    border-top: var(--Border);
}

.greyOutAccount {
    background: rgba(0, 0, 0, 0.4);
}

#accountmanagement #header-text {
    color: white;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--HeaderSize2);
    line-height: calc(var(--HeaderSize) + 4px);
    text-align: center;
}

#accountmanagement #controlbuttons {
    justify-content: center;
    width: 100%;
}

    #accountmanagement #controlbuttons > button {
        width: 20%;
    }

#accountmanagement #swipeImageCredit,
#accountmanagement #swipeImage {
    margin-top: 25px;
}

.swipeCardCreditContainer {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: var(--PrimaryColor);
    padding: 50px 25px 25px 25px;
}

#swipeCardCreditAmount {
    font-weight: bold;
    font-size: 28px;
}

#accountmanagement .btnTenderGeneric #bicon:before {
    background: url('../images/tenders/declining-balance.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    content: '';
}

#accountManagementCompleteMessage {
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: bold;
}

#previousBalanceAmount,
#fundedAmount,
#newBalanceAmount {
    padding: 5px;
}


/* ACCOUNT MANAGEMENT POPUP */
.popup-button.fundbutton,
.popup-button.fundbutton:hover,
.popup-button.fundbutton:active,
.popup-button.fundbutton:focus {
    margin: 5px 0;
    min-width: 125px;
    width: 100%;
}

/* AUTO FUNDING PORTAL */
.account-row,
.account-footer {
    max-width: 450px;
    display: flex;
    justify-content: space-between;
    margin: 5px auto;
}

.account-information .account-footer {
    flex-flow: column;
}

.account-row span:first-of-type {
    font-weight: bold !important;
    font-family: var(--ItemTitle);
}

.account-footer,
.add-credit-card {
    margin-top: 20px;
}

.account-limit span:nth-child(2):before,
.account-balance span:nth-child(2):before {
    content: '$';
}

.auto-funding-form .toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding-right: 10px;
}

#removeCard, #addCard {
    color: var(--AccentColor);
}

#auto-funding-form .toggle-component {
    display: flex;
    justify-content: center;
    padding: 10px 25px;
}

.local-account-activity,
.local-account-funding,
.local-account-autofund,
#btnAddFunding {
    margin: 5px 0 !important;
    width: 100%;
}

a.btn.local-account-autofund.nex-button,
a.btn.local-account-funding.nex-button,
a.btn.local-account-activity.nex-button {
    color: white;
}

.local-account-management {
    margin: 5px 0;
    width: 100%;
    max-width: 450px;
}

span.fa.fa-minus:before {
    content: "\f068";
    font-family: 'FAL';
}

span.fa.fa-plus:before {
    content: "\f067";
    font-family: 'FAL';
}

/* enable auto funding toggle switch */
.toggle-component {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    margin: 30px 0;
    position: relative;
}

    .toggle-component [type="checkbox"]:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
    }

.toggle-wrapper {
    position: relative;
    height: 30px;
    width: 50px;
    margin-right: 15px;
}

.toggle {
    height: 20px;
    width: 50px;
    background: #888;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: -5px;
    pointer-events: none;
}

.toggle-slider {
    position: absolute;
    left: 0;
    top: -5px;
    height: 30px;
    width: 30px;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    pointer-events: none;
}

.toggle-component [type="checkbox"]:checked + .toggle .toggle-slider {
    right: -5px;
    left: auto;
    background: var(--AccentColor);
}

.toggle-component label {
    margin: 0;
}

    .toggle-component label:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

#enabled[type='checkbox'] {
    margin-right: 5px;
}

.rewards-links {
    display: flex;
    display: none;
    background: black;
    width: 360px;
    position: absolute;
    left: calc(50% - 180px);
    padding: 10px;
    margin-top: -30px;
    justify-content: space-evenly;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

    .rewards-links a {
        color: white;
        font-size: 12px;
    }

form #myModal .btn {
    background: white;
    color: black;
    line-height: initial;
}

.help-block {
    position: relative;
    top: -8px;
}

.save-payment-div,
.save-payment-state {
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px dotted dimgray;
    margin: 5px 0;
}

.save-payment-state {
    border-bottom: 2px solid;
}

.glyphicon-remove:before {
    content: '\f00d';
    color: #bb0000;
}


/* =========================================================
          ***     MODALS & POPUP ELEMENTS      ***
============================================================ */
.modal-backdrop {
    display: none;
}

.modal-header {
    border-bottom: 0px;
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100% !important;
    zoom: initial !important;
    margin: 0;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(4pt);
    -webkit-backdrop-filter: blur(4pt);
}

.modal-content {
    background: rgba(255, 255, 255, .9);
    border: var(--Border);
    border-radius: var(--Curve);
    font-family: var(--PrimarySemiBoldFontFamily);
    font-weight: normal;
    font-size: var(--DescTextSize);
    line-height: calc(var(--DescTextSize) + 4px);
    color: var(--PrimaryColor);
    min-width: 40%;
    max-width: 80%;
}

    .modal-content > *:nth-child(1) {
        border-top: 0;
    }


/* PopUp Title */
#headerText {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--MessageTextSize);
    line-height: calc(var(--MessageTextSize) + 4px);
    text-align: center;
}

#messageText {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--MessageTextSize);
    line-height: calc(var(--MessageTextSize) + 4px);
    text-align: center;
}

#receiptText {
    margin: 0;
    text-align: center;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--MessageTextSize);
    line-height: calc(var(--MessageTextSize) + 4px);
}

.popupMessage {
    font-size: 14px;
    padding: 15px 0 0 0;
}

.modal-content #descriptionText {
    max-width: 90%;
    margin: 10px auto 20px auto;
    padding: 0;
    text-align: center;
    font-size: 16px;
}

.popup-button,
.popup-button:hover,
.popup-button:active,
.popup-button:focus,
.btn-default[disabled] {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ButtonTextSize);
    background: transparent !important;
    color: var(--PrimaryColor) !important;
    margin: 0;
    border: 2px solid var(--PrimaryColor) !important;
    border-radius: 25px !important;
    height: 50px !important;
    min-width: 150px !important;
}

    .popup-button[disabled] {
        color: rgba(0,0,0,0.75);
        background: rgba(255, 255, 255, 0.75);
    }

    .popup-button.btn-action {
        background: var(--PrimaryColor) !important;
        color: var(--TertiaryColor) !important;
    }

.modal-footer .btn + .btn {
    margin: 15px 0 0 0;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 15px;
    border-top: 0;
}

div.numpadOutput,
div.phonepadOutput {
    overflow: hidden;
    width: 60% !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
}

    div.phonepadOutput > * {
        text-align: center;
    }

    div.phonepadOutput > span {
        font-family: Helvetica, Tahoma, sans-serif;
        position: relative;
        top: -1px;
        margin: 0 -4px;
    }

.numpadTextOut,
.phonepadTextOut,
.pagerpadTextOut {
    width: 100%;
    text-align: center;
    height: calc(2 * 24px);
    border: 0;
    margin: 0;
}

input.phonepadPhone1, input.phonepadPhone2, input.phonepadPhone3 {
    margin-bottom: 0px;
}

input.phonepadPhone2 {
    margin-left: 10px;
}

ul.numpadInput,
ul.phonepadInput {
    width: 216px !important;
    padding: 0;
    margin-bottom: 20px;
}

    ul.numpadInput li,
    ul.phonepadInput li {
        margin: 6px !important;
        height: 60px !important;
        width: 60px !important;
        line-height: 60px !important;
        text-align: center;
        border-radius: 30px !important;
        border: 0 !important;
        font-size: 30px;
    }

.phonehidden {
    visibility: hidden;
}

.delete:before {
    content: '\f060';
    font-family: 'FAL';
    font-size: 30px;
}

.tip-wrapper {
    display: flex;
    padding: 10px;
}

    .tip-wrapper .btn {
        margin: 10px;
        width: 25%;
    }

#popup-tip-other .numpadOutput {
    position: relative;
}

    #popup-tip-other .numpadOutput:before {
        content: '$';
        position: absolute;
        left: 10px;
    }

#popup-need-more-time svg {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    transform: rotate(-90deg);
    left: calc(50% - 125px);
    position: relative;
    margin-top: 30px;
}

#popup-need-more-time circle {
    fill: transparent;
    stroke: yellow;
    stroke-width: 5;
    stroke-dasharray: 0 100;
    animation: border-timer 4s linear;
}

#popup-need-more-time .modal-content {
    display: block;
}

#popup-need-more-time #messageText:after {
    content: '3';
    display: block;
    position: absolute;
    top: -170px;
    left: calc(50% - 50px);
    width: 100px;
    font-size: 60px;
    text-align: center;
    animation: countdown linear 4s;
}

.offer {
    width: calc(100% - 40px);
    margin: 0 20px 20px 20px;
    padding: 0px 10px 0px 45px;
    height: 50px;
    line-height: 50px;
    background: white;
    color: black;
    border-radius: 60px;
    overflow: hidden;
    position: relative;
}

    .offer .check {
        position: relative;
        left: -100px;
    }

    .offer label {
        margin: 0;
    }

    .offer .check:before {
        content: '\f00c';
        font-family: 'FAL';
        display: block;
        position: absolute;
        overflow: hidden;
        padding-top: 40px;
        height: 40px;
        width: 40px;
        left: 60px;
        top: -15px;
        text-align: center;
        line-height: 40px;
        background: var(--AccentColor);
        color: var(--TertiaryColor);
        border-radius: 20px;
        transition: 0.25s;
    }

    .offer .check:checked:before {
        padding-top: 0;
    }

    .offer label:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        right: 0;
    }

#popup-lookupvideo .modal-content {
    min-width: unset;
}

#popup-keyboard .modal-content,
#popup-email .modal-content,
#popup-name .modal-content {
    width: 800px;
}

/*  ***     POPUP PAGER KEYBOARD OR NUMPAD      ***
    Setting for SSP's needs. Allows the popup-name to use a Keyboard or Numpad
    Swap block/none on these two to turn on/off in CustomerTheme. KEEP it PUnameKeyboard as BLOCK for ProductTheme. */
.PUnameKeyboard {
    display: block !important;
}

.PUnameNumpad {
    display: none !important;
}

div#keyboardContainer {
    padding: 0 20px 20px 20px;
    margin: 0;
    width: 100%;
    height: auto;
}

#keyboardContainer .write {
    padding: 0;
    margin: 0;
    width: 100%;
    height: calc(2 * 24px);
    line-height: calc(2 * 24px);
    border-radius: 10px;
    text-align: center;
    font-family: var(--BoldFontFamily);
}

#keyboard {
    margin-top: 20px !important;
    width: 100%;
}

    #keyboard > div {
        display: flex;
        width: 100%;
    }

    #keyboard li {
        flex-grow: 1;
        padding: 0;
        margin: 3px 3px !important;
        border-radius: 0 !important;
        font-family: var(--BoldFontFamily);
        font-size: 16px;
        height: 45px;
        line-height: 45px;
    }

    #keyboard .delete:before {
        content: '\f55a';
        font-size: 18px;
    }

#keyboardContainer + .modal-footer {
    flex-direction: row;
}

    #keyboardContainer + .modal-footer .btn {
        flex-grow: 1;
    }

        #keyboardContainer + .modal-footer .btn + .btn {
            margin: 0 0 0 20px;
            flex-grow: 1;
        }

#popup-nutrition .modal-content {
    width: 300px;
    min-width: 300px;
    background: white;
    color: black;
    border-radius: 0;
    border: 3px solid black;
    font-family: var(--BoldFontFamily);
    text-transform: initial;
}

.nutrition-header {
    font-weight: bold;
    border-bottom: 1px solid var(--SecondaryColor);
    padding: 20px;
    text-align: center;
    font-size: 40px;
}

#popup-nutrition .popup-button {
    background: black;
    color: white;
}

.nutrition-info:not(:last-of-type) {
    border-bottom: 2px solid black;
}

.nutrition-info:nth-child(2) {
    font-size: 24px;
}

.nutrition-divider {
    height: 4px;
    background: black;
    margin-bottom: 10px;
}

.nutrition-amount {
    display: flex;
    font-weight: bold;
}

    .nutrition-amount span:first-of-type {
        flex-grow: 1;
    }

.nutrition-info:nth-child(1n + 3) .nutrition-amount span:last-of-type:after {
    content: 'g';
}

#cholesterol:after,
#sodium:after {
    content: 'mg';
}

#serving:empty:after {
    content: 'Unspecified';
}

.nutrition-info span.indent {
    margin-left: 15px;
    font-weight: normal;
}

#receipt + .popover,
#receipt + .popover .popover-content {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    height: 100%;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
}

#receiptContent {
    position: absolute;
    overflow: hidden;
    top: 20%;
    left: 25%;
    height: 60%;
    width: 50%;
    overflow-y: scroll;
    padding: 15px 25px;
    border-radius: var(--Curve);
    background: white;
    color: black;
    font-family: var(--BoldFontFamily);
    animation: none;
    animation: zoomIn -0.25s 0.5s;
}

.receipt-item,
.receipt-mod {
    display: flex;
    justify-content: flex-start;
    line-height: 1em;
    padding-top: 20px;
}

.receipt-mod {
    padding: 10px 0 0 15px;
    font-size: 15px;
}

#receiptMurderizer {
    display: none;
    justify-content: center;
    position: fixed;
    top: calc(20% - 25px);
    right: calc(25% - 25px);
    height: 60px;
    width: 60px;
    z-index: 1024;
    border-radius: 50%;
    background: var(--AccentColor);
    color: var(--TertiaryColor);
    font-size: 30px;
    animation: zoomIn 0.5s;
}

    #receiptMurderizer:before {
        content: '\f00d';
    }

.popover + #receiptMurderizer {
    display: flex;
}

#popup-charity-yes-no #descriptionText {
    margin-bottom: 1em;
}




/* =========================================================
            ***     POPUP DICO ELEMENTS      ***
============================================================ */
#popup-dico .modal-content {
    max-height: 95vh;
    overflow: hidden;
}

#popup-dico .modal-footer {
    flex-direction: row;
    flex-wrap: wrap;
}

#popup-dico .popup-button {
    width: 100%;
    margin: 10px auto;
}



/* =========================================================
          ***     ONLINE / MOBILE ELEMENTS      ***
============================================================ */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    border: 0;
}

.iorderfast-content .carousel-buttons,
.order-review .carousel-fixedbuttons,
.iorderfast-content #clip-header {
    display: none;
}

.iorderfast-content {
    position: absolute;
    left: 0;
    top: var(--TopToolbarHeight);
    bottom: 0px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .iorderfast-content #template {
        margin: auto;
        max-width: 1200px;
    }

    .iorderfast-content #buttons:not(.order-review-buttons) {
        text-align: center;
    }

    .iorderfast-content #buttons .row,
    .iorderfast-content .order-review-buttons {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        padding: 15px;
        margin: 0;
    }

    .iorderfast-content .image-button {
        display: inline-flex;
    }

    .iorderfast-content .text-button {
        display: inline-flex;
    }

        .iorderfast-content .image-button .box,
        .iorderfast-content .text-button .box {
            width: 100%;
        }

    .iorderfast-content .details > div {
        padding: 0 0 !important;
        flex-grow: 0 !important;
        border-top: none !important;
    }

    .iorderfast-content #calories:after {
        margin-right: 12px;
    }

    .iorderfast-content .privacy-policy {
        font-size: 14px;
        line-height: 18px;
        padding: 0 0 0 0;
    }

    /* Removes icons from control buttons on front screen - need */
    .iorderfast-content #futureorder .control-button-orderreview:before,
    .iorderfast-content #futureorder .control-button-additem:before,
    .iorderfast-content #futureorder .control-button-back:before,
    .iorderfast-content #futureorder .control-button-cancel:before,
    .iorderfast-content #futureorder .control-button-continue:before,
    .iorderfast-content #futureorder .control-button-done:before,
    .iorderfast-content #futureorder .control-button-submit:before {
        display: none;
    }

/* Fixes padding when icons are removed on certain screens - need */
#futureorder .control-button,
#previousorders .control-button,
#checkout-tender .control-button,
#clip-payment-info .control-button,
#clip-complete .control-button,
#orderinstore .control-button {
    padding: 0;
}

/* Removes icons from control buttons on previous orders screen - need */
#previousorders .control-button-orderreview:before,
#previousorders .control-button-additem:before,
#previousorders .control-button-back:before,
#previousorders .control-button-cancel:before,
#previousorders .control-button-continue:before,
#previousorders .control-button-done:before,
#previousorders .control-button-submit:before {
    display: none;
}

/* Removes icons from control buttons on front screen - need */
.iorderfast-content #checkout-tender .control-button-orderreview:before,
.iorderfast-content #checkout-tender .control-button-additem:before,
.iorderfast-content #checkout-tender .control-button-back:before,
.iorderfast-content #checkout-tender .control-button-cancel:before,
.iorderfast-content #checkout-tender .control-button-continue:before,
.iorderfast-content #checkout-tender .control-button-done:before,
.iorderfast-content #checkout-tender .control-button-submit:before {
    display: none;
}


/* Removes icons from control buttons on mobile scanning screen - need */
.iorderfast-content #orderinstore .control-button-orderreview:before,
.iorderfast-content #orderinstore .control-button-additem:before,
.iorderfast-content #orderinstore .control-button-back:before,
.iorderfast-content #orderinstore .control-button-cancel:before,
.iorderfast-content #orderinstore .control-button-continue:before,
.iorderfast-content #orderinstore .control-button-done:before,
.iorderfast-content #orderinstore .control-button-submit:before {
    display: none;
}


/* =========================================================
          ***     ONLINE / MOBILE NAVIGATION      ***
============================================================ */
#navMobile {
    display: flex;
}

.navbar .header-wrapper {
    width: auto;
    left: calc(var(--LogoWidth) + var(--LogoSpacing));
}

.navbar {
    display: flex;
    height: var(--TopToolbarHeight);
    background: var(--TopToolbarBackground);
    padding: 0 20px;
    border-bottom: 1px solid var(--SecondaryColor);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.navbar-fixed-top {
    position: absolute !important;
    -webkit-backface-visibility: 0;
    backface-visibility: 0;
}

.navbar-fixed-top {
    position: absolute;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 200px;
    position: absolute;
    right: 20px;
    height: var(--TopToolbarHeight);
    flex-shrink: 0;
}

.navbar-scan-items {
    margin: 0 5px;
    background: transparent !important;
    border: 0;
    padding: 0;
}

    .navbar-scan-items .scan-items-icon {
        color: white;
    }

.navbar-toggle {
    margin: 0;
    background: transparent !important;
    border: 0;
    padding: 0;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--TertiaryColor);
    height: 3px;
}

.navbar-collapse {
    padding: 0;
}

#navDesktop .navbar-nav {
    display: flex;
}

.navbar-default .navbar-nav > li > a,
.dropdown:nth-child(1) {
    color: var(--TertiaryColor);
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    padding: 0 0 0 20px;
}

.dropdown .fa:before {
    font-size: 24px;
    display: inline-block !important;
    width: 30px !important;
}

#navScanItems .fa:before {
    content: '\f02a';
    font-size: 22px;
}

#navChangeAccount .fa:before {
    content: '\f2bd';
}

#navChangePassword:before {
    content: '\f084';
    font-size: 22px;
}

#navLogout:before {
    content: '\f2f5';
    font-size: 28px;
}

.nav-label {
    display: none;
}

.iorderfast-content #clip-receipt {
    pointer-events: auto; /* set to NONE to disable receipt popover on mobile */
}


/* =========================================================
      ***     ONLINE / MOBILE FORM ELEMENTS      ***
============================================================ */
.form {
    margin: 0 auto 10px auto;
    padding: 15px;
    text-align: center;
}

    .form.container {
        margin-top: 60px;
    }

    .form.box {
        width: 500px;
        max-width: calc(100vw - 60px);
        margin: 20px auto;
        padding: 20px;
    }

.form-header {
    width: 100%;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--HeaderSize2);
    line-height: calc(var(--HeaderSize) + 4px);
    margin-bottom: 20px;
}

form a {
    color: var(--AccentColor);
}

.form .btn:not(.popup-button):not(.control-button) {
    border-radius: 10px;
    padding: 0 20px;
    margin: auto;
    border: 0;
    line-height: 40px;
    text-align: center;
    background: var(--AccentColor) !important;
}

.form-group.amountdue.table-responsive.form {
    width: 30%;
    text-align: left;
    ;
}

#checkout-tender-form,
#checkout-service-form {
    display: flex;
}

    #checkout-tender-form .form-header {
        text-align: left;
    }

.submit-form {
    line-height: 40px;
}

#guestLogin {
    display: var(--GuestLogin);
}

.remember-wrapper {
    float: left;
}

.forget-pass {
    float: right;
}

.create-wrapper {
    clear: both;
    padding-top: 1px;
}

#btnLogin, #customerCreate, #guestLogin {
    width: 100%;
    height: 50px;
    margin: 20px 0;
    color: var(--TertiaryColor) !important;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ControlButtonSize);
}

.privacy-policy {
    font-size: 14px;
    line-height: 14px;
}

.privacy-policy-link {
    padding-right: 5px;
}

input,
select,
textarea {
    margin-bottom: 10px;
}

label {
    font-weight: normal;
}

/* input box styling */
textarea.input-sm {
    height: 40px !important;
    font-family: var(--SecondaryFontFamily) !important;
    font-weight: normal !important;
    font-size: var(--DescTextSize) !important;
    line-height: calc(var(--DescTextSize) + 4px) !important;
}

select.input-sm {
    height: 40px !important;
    /*  line-height: 25px !important; */
}

.form-control:focus {
    border-color: #F8F8F8 !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(248 248 248 / 60%) !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(248 248 248 / 60%) !important;
}

.form-control {
    width: 100% !important;
    height: 31pt !important;
    padding: 0px 10px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: var(--PrimaryColor) !important;
    vertical-align: middle !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid #E8E8E8 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.file-preview-frame {
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    margin: 0 0 20px 0;
}

.avatar-container {
    width: auto !important;
    display: flex;
    justify-content: center;
}

.file-input {
    margin: 0 auto;
}

#preferredDate:after {
    content: 'Order Date';
}

#copyright {
    display: none;
}

hr {
    border-top: 1px solid var(--SecondaryColor);
}

.amount-due {
    width: 100%;
    margin-bottom: 20px;
    font-family: var(--PrimarySemiBoldFontFamily);
}

.payment-totals-label {
    float: left;
    font-family: var(--SecondaryFontFamily) !important;
    font-weight: normal !important;
    font-size: var(--DescTextSize) !important;
    line-height: calc(var(--DescTextSize) + 4px) !important;
}

.payment-totals {
    float: right;
    font-family: var(--SecondaryFontFamily) !important;
    font-weight: normal !important;
    font-size: var(--DescTextSize) !important;
    line-height: calc(var(--DescTextSize) + 4px) !important;
}

.iorderfast-content #ordercomplete {
    height: auto;
    margin: 60px 20px 0 20px;
    padding: 0 10px;
}

.glyphicon:before {
    font-family: 'FAL';
    position: relative;
    top: -2px;
}


/* SCROLL MARGIN */
.iorderfast-content #template,
.form.container,
.iorderfast-content #orderreview:last-of-type {
    margin-bottom: 150px !important;
}


/* =========================================================
      ***     GENERAL PHONE/MOBILE & TABLET STYLES      ***
============================================================ */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    :root {
        --ControlButtonSize: 18px;
    }

    .iorderfast-content .takeover-container {
        width: 80%;
    }

    .iorderfast-content .image-button,
    .iorderfast-content .text-button {
        padding: 10px;
    }

    .modal-content {
        min-width: 80%;
    }

    .iorderfast-content #controlbuttons {
        width: 65%;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --LogoWidth: 60px !important;
        --LogoSpacing: 10px !important;
        --TopToolbarHeight: 110px !important;
        --ControlButtonSize: 16px !important;
        --HeaderSize: 22px !important;
    }

    .navbar {
        padding: 0 10px;
    }

    .iorderfast-content .takeover-container {
        width: 90%;
    }

    body {
        font-size: 14px;
    }

    .header-wrapper {
        padding: 0 10px;
    }

    .iorderfast-content #buttons .row {
        display: block;
    }

    .iorderfast-content .modal-content {
        min-width: 90%;
    }

    .iorderfast-content #controlbuttons {
        width: 65%;
    }

    .iorderfast-content .takeover-close {
        margin: 0;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

        .iorderfast-content .takeover-close:after {
            font-size: 30px;
        }

    .iorderfast-content .image-button,
    .iorderfast-content .text-button {
        border-bottom: none;
    }

    .iorderfast-content .order-review-quantity-button,
    .iorderfast-content .order-review-remove-combo {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 30px;
    }

    .iorderfast-content .order-review-quantity-text {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 25px;
    }

    .overlaycontainer {
        display: block;
    }

    .site-nav-collapse {
        position: fixed;
        top: var(--TopToolbarHeight);
        left: 0;
        width: 100vw;
        height: 244px !important;
        overflow: hidden;
    }

    .iorderfast-content .order-review-row {
        flex-direction: column;
        height: auto;
    }

    .iorderfast-content .ibutton-showing {
        position: fixed;
        top: calc(25% - 10px);
        right: 5px;
        z-index: 4;
    }

    /*  .iorderfast-content .Main-Menu-buttons .image-button .itemContent {
    padding: 0 10px 0 10px;
  }*/

    .iorderfast-content #clip-footer {
        flex-direction: column-reverse;
        height: auto;
        padding: 0 0 7px 0;
    }

    .iorderfast-content .footer-left,
    .iorderfast-content .footer-right {
        height: 40px;
        justify-content: center;
        margin-bottom: 0;
    }

    .iorderfast-content #controlbuttons {
        width: 100%;
        border: 0;
        box-shadow: none;
    }

    .iorderfast-content .control-button-orderreview {
        padding: 0 10px 0 25px;
        line-height: 15px;
    }

    .iorderfast-content .control-button-additem {
        padding: 0 10px 0 35px;
    }

    [class*='footer-'] {
        width: 100%;
        text-align: center;
        line-height: 40px;
    }

    .iorderfast-content #receipt,
    .iorderfast-content #nutritionSummary {
        text-align: center;
        pointer-events: auto; /* set to NONE to disable receipt popover on mobile */
        height: 40px !important;
    }

    #receipt[style*='hidden'] {
        display: none;
    }

    .iorderfast-content .popover.top {
        position: fixed;
        z-index: 3;
        height: 50%;
        top: 25% !important;
        box-shadow: 0 0 0 75vh rgba(0, 0, 0, 0.5);
        transition: 0.5s;
    }

    /* NAV */
    .navbar-nav {
        flex-direction: column;
        background: white;
        margin: 0 0;
    }

    .dropdown {
        border-bottom: 1px solid var(--SecondaryColor);
    }

    .nav-label {
        display: inline;
        margin-left: 15px;
        line-height: 60px;
    }

    .navbar-default .navbar-nav > li > a {
        color: black !important;
    }

    .dropdown:nth-child(1) {
        color: black !important;
        font-size: 24px;
    }

    /* online ordering checkout pages */
    #checkout-tender-form, #checkout-service-form {
        display: block;
    }

    .form-group.amountdue.table-responsive.form {
        width: 90%;
        text-align: left;
    }

    .form.container {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 480px) {
    :root {
        --HeaderSize: 22px;
        --SubHeaderSize: 18px;
        --HeaderSize2: 20px;
        --DescTextSize: 14px;
        --ControlButtonSize: 14px !important;
        --ItemTitleSize: 20px;
    }

    .iorderfast-content .control-button {
        padding: 0 0 0 20px !important;
        font-size: 10px;
    }

    #header-text {
        font-size: 18px;
    }
}



/* =========================================================
      ***     DEVICE SPECIFIC MEDIA QUERIES      ***
============================================================ */
/***  DEVICE: TD15 - ML ***/
@media only screen and (width: 1024px) and (height: 768px) {
    :root {
        --ControlButtonSize: 16px;
        --HeaderSize: 24px;
        --HeaderSize2: 22px;
        --SubHeaderSize: 20px;
        --ItemTitleSize: 18px;
        --MessageTextSize: 26px;
        --ButtonTextSize: 16px;
    }

    .kiosk-content .row {
        padding: 0px 20px;
    }

    /***  ITEM BUTTONS COUNTS ***/
    /* Item Image: 9 to 16 */
    .kiosk-content [data-button-count='9'] .image-button.menubutton,
    .kiosk-content [data-button-count='10'] .image-button.menubutton,
    .kiosk-content [data-button-count='11'] .image-button.menubutton,
    .kiosk-content [data-button-count='12'] .image-button.menubutton,
    .kiosk-content [data-button-count='13'] .image-button.menubutton,
    .kiosk-content [data-button-count='14'] .image-button.menubutton,
    .kiosk-content [data-button-count='15'] .image-button.menubutton,
    .kiosk-content [data-button-count='16'] .image-button.menubutton {
        width: 20%;
        padding: 10px 3px;
    }

    /***  MAIN MENU BUTTONS COUNTS ***/
    /* Main Menu: 1 to 12 */
    /*  .kiosk-content .image-button.mainmenubutton,
  .kiosk-content .text-button.mainmenubutton-text { 
    width: 45%;
  }*/

    /* Main Menu: 13+ */
    /*  .kiosk-content [data-button-count='11'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='12'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='13'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='14'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='15'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='11'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='12'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='13'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='14'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='15'] .text-button.mainmenubutton-text {
    width: 33.33%;
  }*/

    /* Main Menu Margins: 9+ */
    /*  .kiosk-content [data-button-count='9'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='10'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='11'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='12'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='13'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='14'] .image-button.mainmenubutton .box,
  .kiosk-content [data-button-count='15'] .image-button.mainmenubutton .box {
    margin: 5px 10px;
  }*/

    /*  .Main-Menu-buttons .image-button #btext {
    margin-bottom: 0px;
    -webkit-line-clamp: 1;
  }*/

    .carousel-control-prev {
        top: 75%;
    }

    .carousel-control-next {
        top: calc(20% - 55px);
    }

    .dragalong {
        width: 35%;
    }

    #dragalong + #buttonscarousel .row {
        margin-left: 35.5%;
    }

    #floating-controlbuttons {
        top: 50%;
    }

    #orders {
        justify-content: flex-start;
    }

    #previousorders #header-text {
        font-size: 36px;
    }

    #previousItemsPopOut .previous-order #pricetext, #previousItemsPopOut .previous-order #receipttext {
        font-size: 14px;
        line-height: 14px;
    }

    #previousItemsPopOut #totalPreviousOrder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(91% - 60px);
    }

    .modal-content .load-order-btn {
        font-size: 8pt;
    }

    .takeover-content {
        max-height: 500px;
    }

    #price {
        margin-right: 15px;
    }
}


/***  DEVICE: TD18 ***/
@media only screen and (width: 1366px) and (height: 768px) {
    .kiosk-content #buttons.order-review-buttons {
        margin: 0 0 0 5%;
    }

    #orders {
        justify-content: flex-start;
    }

    .takeover-content {
        max-height: 400px;
    }
}



/***  DEVICE: X22 ***/
@media only screen and (width: 1080px) and (height: 1920px) {
    :root {
        --TopToolbarHeight: 160px;
        --BottomToolbarHeight: 140px;
        --ControlBtnHeight: 60px;
        --LogoWidth: 180px;
        --LogoSpacing: 0px;
        --ItemContentHeight: 155px;
        /*   FONT - VARIABLES   */
        --HeaderSize: 40px;
        --HeaderSize2: 32px;
        --SubHeaderSize: 24px;
        --ItemTitleSize: 26px;
        --DescTextSize: 22px;
        --DetailsTextSize: 20px;
        --PriceCalSize: 22px;
        --ButtonTextSize: 24px;
        --ControlButtonSize: 26px;
        --MessageTextSize: 36px;
    }

    #clip-header::before {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #59586B;
        position: absolute;
        top: 152px;
        left: 0px;
    }

    #clip-header::after {
        width: 100%;
        height: 30px;
        content: '';
        background-color: #002D62;
        position: absolute;
        top: 160px;
        left: 0px;
    }

    .kiosk-content .text-button {
        width: 45%;
        margin: 15px 0;
    }

    .kiosk-content .image-button {
        width: 40%;
    }

    .kiosk-content [data-button-count='6'] .image-button.menubutton {
        width: 40%;
    }
    /* Button Count: 9 to 16 */
    .kiosk-content [data-button-count='9'] .image-button.menubutton,
    .kiosk-content [data-button-count='10'] .image-button.menubutton,
    .kiosk-content [data-button-count='11'] .image-button.menubutton,
    .kiosk-content [data-button-count='12'] .image-button.menubutton,
    .kiosk-content [data-button-count='13'] .image-button.menubutton,
    .kiosk-content [data-button-count='14'] .image-button.menubutton,
    .kiosk-content [data-button-count='15'] .image-button.menubutton,
    .kiosk-content [data-button-count='16'] .image-button.menubutton {
        width: 33%;
    }

    /* MAIN MENU BUTTON COUNT */
    /* Button Count: 1 to 10 */
    /*  .kiosk-content .image-button.mainmenubutton,
  .kiosk-content .text-button.mainmenubutton-text {
    width: 65%;
    margin: 5px 0;
  }*/

    /* Button Count: 11+ */
    /*  .kiosk-content [data-button-count='11'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='12'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='13'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='14'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='15'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='16'] .image-button.mainmenubutton,
  .kiosk-content [data-button-count='11'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='12'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='13'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='14'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='15'] .text-button.mainmenubutton-text,
  .kiosk-content [data-button-count='16'] .text-button.mainmenubutton-text {
    width: 49%;
    margin: 10px 0;
  }*/

    /*  .Main-Menu-buttons .image-button #bimage {
    height: 125px;
    width: 125px;
  }*/

    /*  .Main-Menu-buttons .image-button .box,
  .Main-Menu-Text-buttons .text-button .box {
    border-radius: 65px;
  }*/

    /*  .Main-Menu-Text-buttons .text-button .itemContent {
    min-height: 105px !important;
  }*/

    /*  .Main-Menu-Text-buttons .box {
    height: 105px;
  } */

    .text-button #check {
        right: 18px;
    }

    .lnm {
        width: 55px;
        height: 55px;
        line-height: 55px;
    }

    .takeover-container {
        width: 80%;
    }

    .ibutton {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: fixed;
        top: calc(50% - 20px);
        width: 50px;
        font-size: 50px;
    }

    .carousel-control-prev {
        left: 15px;
        margin-top: 0;
    }

    #controlbuttons {
        width: 85%;
        padding: 5px 0 0 0;
    }


    .control-button {
        border: 4px solid var(--AccentColor);
    }

    #selectPaymentMessage {
        top: 36%;
    }

    .image-button .itemContent {
        min-height: var(--ItemContentHeight);
    }

    #clip-footer {
        flex-flow: column;
        padding: 0;
    }

    .footer-top {
        margin: 0px auto;
        width: 85%;
        padding: 0 5px;
    }

    .footer-left, .footer-right {
        margin-bottom: 10px;
        font-size: 24px;
    }

    .btn-default, .btn-primary, .btn-action, .btn-takeover {
        font-size: var(--ButtonTextSize);
        min-width: 180px !important;
        height: 60px !important;
        border-radius: 38px;
    }

        .popup-button, .popup-button:hover, .popup-button:active,
        .popup-button:focus, .btn-default[disabled] {
            border: 3px solid var(--AccentColor) !important;
            border-radius: 30px !important;
            height: 60px !important;
            min-width: 180px !important;
        }

    #popup-ibutton .OverlayText {
        font-size: 14px;
    }

    #modtext {
        font-family: var(--PrimaryRegFontFamily);
        font-weight: normal;
        font-size: var(--DescTextSize);
        line-height: calc(var(--DescTextSize) + 4px);
        padding-top: 8px;
    }

    #popup-orderdetails .receipt-qty {
        font-size: 16px;
    }

    #popup-orderdetails .receipt-mod {
        font-size: 16px;
        padding: 0 0 0 10px;
    }

    #popup-orderdetails .receipt-mod-symbol:after {
        content: '\f101';
        font-family: 'FAL';
        font-size: 12px;
    }

    #previousItemsPopOut .previous-order-addremovebutton {
        font-size: 14px;
        left: 92%;
    }

    #previousorders #welcome {
        font-size: 22px !important;
        line-height: 22px;
        text-align: center;
    }

    #previousorders-form,
    #orders {
        display: block;
    }

    .previous-order, .previous-order:hover {
        margin: 0;
        width: 100%;
        height: 300px;
        margin-bottom: 5%;
    }

    .previous-orders {
        padding-top: 10%;
        padding-left: 2%;
        padding-right: 2%;
    }

    .previous-order-addremovebutton {
        font-size: 14px;
        left: 93%;
    }

    #popup-previousOrders .modal-content {
        width: 90%;
    }

    #clip-receipt {
        margin-top: -85px;
    }


    #check {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        font-size: 60px;
        line-height: 52px;
        visibility: visible;
        position: absolute;
        top: calc(50% - 40px);
        color: transparent;
    }
}
/* /end x22 styling */


/* OVERRIDES FOR X22 LANDSCAPE */
@media only screen and (width: 1920px) and (height: 1080px) {
    :root {
        --TopToolbarHeight: 150px;
        --BottomToolbarHeight: 90px;
        --ControlBtnHeight: 60px;
        --LogoWidth: 100px;
        --LogoSpacing: 0px;
        --ItemContentHeight: 155px;
        /*   FONT - VARIABLES   */
        --HeaderSize: 40px;
        --HeaderSize2: 32px;
        --SubHeaderSize: 24px;
        --ItemTitleSize: 26px;
        --DescTextSize: 22px;
        --DetailsTextSize: 20px;
        --PriceCalSize: 22px;
        --ButtonTextSize: 24px;
        --ControlButtonSize: 26px;
        --MessageTextSize: 36px;
    }

    .btn-default, .btn-primary, .btn-action, .btn-takeover {
        font-size: var(--ButtonTextSize);
        min-width: 180px !important;
        height: 60px !important;
        border-radius: 38px;
    }

        .popup-button, .popup-button:hover, .popup-button:active, .popup-button:focus, .btn-default[disabled] {
            border: 3px solid var(--PrimaryColor) !important;
            border-radius: 30px !important;
            height: 60px !important;
            min-width: 180px !important;
        }

    /*  .Main-Menu-buttons .image-button #bimage {
    height: 110px;
    width: 110px;
  }*/

    .text-button #check {
        right: 20px;
        top: 28%;
    }

    .kiosk-content [data-button-count='5'] .image-button.menubutton {
        width: 25%;
    }

    .kiosk-content .image-button {
        width: 22%;
    }

    .image-button, .text-button {
        padding: 15px;
    }

    .lnm {
        width: 55px;
        height: 55px;
        line-height: 55px;
    }

    .ibutton {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 15px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: fixed;
        top: calc(50% - 20px);
        width: 50px;
        font-size: 50px;
    }

    .carousel-control-prev {
        right: 15px;
        margin-top: 70px;
    }

    #controlbuttons {
        padding: 5px 0 0 0;
    }

        #controlbuttons > div {
            margin: 0 10px;
            left: 15px;
        }

    .control-button {
        border: 4px solid var(--AccentColor);
    }

    #selectPaymentMessage {
        top: 30%;
    }

    .image-button .itemContent {
        min-height: var(--ItemContentHeight);
    }

    .text-button .itemContent {
        min-height: 150px;
    }

    #dragalong + #buttonscarousel #buttons .text-button {
        width: 45%;
    }

    /*  .Main-Menu-Text-buttons .text-button .itemContent {
    min-height: 105px !important;
  }*/

    /*  .Main-Menu-Text-buttons .box {
    height: 105px;
  }*/

    #modtext {
        font-family: var(--SecondaryFontFamily);
        font-weight: normal;
        font-size: var(--DescTextSize);
        padding-top: 8px;
    }

    #popup-ibutton .OverlayText {
        font-size: 14px;
    }

    #popup-ibutton .takeover-content,
    #popup-orderdetails .takeover-content {
        min-height: 300px;
    }

    #popup-orderdetails .receipt-qty {
        font-size: var(--DescTextSize);
    }

    #popup-orderdetails .receipt-mod {
        font-size: 16px;
        padding: 0 0 0 10px;
    }

    #popup-orderdetails .receipt-mod-symbol:after {
        content: '\f101';
        font-family: 'FAL';
        font-size: 16px;
    }

    #previousorders-form #loadOrder {
        height: 40px !important;
        min-width: 120px !important;
    }
}
/* /end x22 Landscape styling */

@media (orientation: landscape) {
    #wrap {
        min-height: 100%;
        top: 0 !important;
    }
}


/* =========================================================
     ***     ADJUSTABLE HEIGHT MOVE UP/DOWN   .reachmode  ***
============================================================ */
/* MoveUp MoveDown X22 & DT5*/
@media only screen and (width: 1080px) and (height: 1920px) {
    :root {
        /* ADJUSTABLE HEIGHT */
        --AdjustableHeight: none; /* OFF = none | ON = block */
        --AdjustableHeightSize: 100%; /* OFF = 100% | ON = 1080px */
    }

    #wrap,
    .hardwaretype_X22 #wrap {
        height: var(--AdjustableHeightSize) !important;
    }

    #moveUp,
    #moveDown,
    .hardwaretype_X22 #moveUp,
    .hardwaretype_X22 #moveDown {
        display: var(--AdjustableHeight) !important;
        position: relative !important;
        height: calc(var(--AdjustableHeightSize) - var(--BottomToolbarHeight)) !important;
        background: rgba(0, 0, 0, .15);
        color: var(--PrimaryColor);
        text-align: center;
        line-height: 80px;
        font-size: 35px;
    }

    #moveUp,
    .hardwaretype_X22 #moveUp {
        top: calc(var(--BottomToolbarHeight) - var(--AdjustableHeightSize)) !important;
    }

    #moveDown,
    .hardwaretype_X22 #moveDown {
        top: var(--BottomToolbarHeight) !important;
    }

        #moveUp:after,
        #moveDown:after,
        .hardwaretype_X22 #moveUp:after,
        .hardwaretype_X22 #moveDown:after {
            font-family: 'FAR', Arial, Helvetica, sans-serif;
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
        }

    #moveUp:after,
    .hardwaretype_X22 #moveUp:after {
        content: '\f0aa  TAP TO MOVE';
        bottom: 0px;
    }

    #moveDown:after,
    .hardwaretype_X22 #moveDown:after {
        content: 'TAP TO MOVE  \f0ab';
        top: 0px;
    }
    /* .kiosk-content [data-button-count='11'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='12'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='13'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='14'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='15'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='16'] .image-button.mainmenubutton, 
  .kiosk-content [data-button-count='11'] .text-button.mainmenubutton-text, 
  .kiosk-content [data-button-count='12'] .text-button.mainmenubutton-text, 
  .kiosk-content [data-button-count='13'] .text-button.mainmenubutton-text, 
  .kiosk-content [data-button-count='14'] .text-button.mainmenubutton-text, 
  .kiosk-content [data-button-count='15'] .text-button.mainmenubutton-text, 
  .kiosk-content [data-button-count='16'] .text-button.mainmenubutton-text {
    margin: 0px;
  }
  .kiosk-content .image-button.mainmenubutton,
  .kiosk-content .text-button.mainmenubutton-text {
    width: 49%;
    margin: 0;
  }
  .kiosk-content .text-button {
    width: 40%;
    margin: 15px 0;
  }
  .kiosk-content .image-button {
    width: 33%;
  } */
}


/* DRIVE THRU DT */
@media only screen and (width: 768px) and (height: 1280px) {
    :root {
        /* ADJUSTABLE HEIGHT */
        --AdjustableHeight: none; /* OFF = none | ON = block */
        --AdjustableHeightSize: 100%; /* OFF = 100% | ON = 700px */
    }

    #wrap,
    .hardwaretype_DT #wrap {
        height: var(--AdjustableHeightSize) !important;
    }

    #moveUp,
    #moveDown,
    .hardwaretype_DT #moveUp,
    .hardwaretype_DT #moveDown {
        display: var(--AdjustableHeight) !important;
        position: relative !important;
        height: calc(var(--AdjustableHeightSize) - var(--BottomToolbarHeight)) !important;
        background: rgba(0, 0, 0, .15);
        color: var(--PrimaryColor);
        text-align: center;
        line-height: 60px;
        font-size: 25px;
    }

    #moveUp,
    .hardwaretype_DT #moveUp {
        top: calc(var(--BottomToolbarHeight) - var(--AdjustableHeightSize)) !important;
    }

    #moveDown,
    .hardwaretype_DT #moveDown {
        top: var(--BottomToolbarHeight) !important;
    }

        #moveUp:after,
        #moveDown:after,
        .hardwaretype_DT #moveUp:after,
        .hardwaretype_DT #moveDown:after {
            font-family: 'FAR', Arial, Helvetica, sans-serif;
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
        }

    #moveUp:after,
    .hardwaretype_DT #moveUp:after {
        content: '\f0aa  TAP TO MOVE';
        bottom: 0px;
    }

    #moveDown:after,
    .hardwaretype_DT #moveDown:after {
        content: 'TAP TO MOVE  \f0ab';
        top: 0px;
    }
}



/* =========================================================
              ***     BUNDLE BUTTON      ***
============================================================ */
#template.showingBundleButton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.showingBundleButton #buttons {
    width: 50% !important;
    align-items: flex-end;
    justify-content: center;
    flex-flow: column;
}

    .showingBundleButton #buttons.order-review-buttons {
        width: 90% !important;
    }

    .showingBundleButton #buttons .row {
        padding: 0;
    }

.showingBundleButton .text-button {
    width: 75% !important;
    max-width: 75% !important;
}

.bundle-unselected #check {
    display: none;
}

.bundle-selected #check {
    display: block;
    visibility: visible;
    background-color: var(--AccentColor);
    border: 0;
}

#bundle.image-button .itemContent {
    min-height: calc(var(--ItemContentHeight) - 30px);
}

/* X22 Bundle Button */
@media only screen and (orientation: portrait), only screen and (width: 1080px) and (height: 1920px) {
    #template.showingBundleButton {
        flex-flow: column;
    }

    #bundle.image-button {
        width: 45%;
    }

    .showingBundleButton #bundle {
        margin: 20px 40px;
    }
}

/* TD15 */
@media only screen and (width: 1024px) and (height: 768px) {
    #bundle.image-button {
        width: 35%;
    }
}

/* ONLINE ORDERING FOR BUNDLE BUTTON */
.iorderfast-content .showingBundleButton #buttons .row {
    flex-flow: column;
    width: 100%;
}

.iorderfast-content .bundle-selected #check {
    left: 0;
    right: 0;
    top: 28%;
    margin: auto;
}

.iorderfast-content .showingBundleButton .text-button {
    width: 100% !important;
    max-width: 100% !important;
}

@media only screen and (max-width: 1023px) {
    .iorderfast-content .showingBundleButton #buttons:not(.order-review-buttons) {
        margin: auto;
        width: 90% !important;
    }

    .iorderfast-content #bundle.image-button {
        margin: 25px 0;
        width: 75%;
    }

    .iorderfast-content .showingBundleButton .text-button {
        margin: 8px 0;
    }
}




/* =========================================================
  ***  FLOATING ADD ITEM BUTTON - updated 1.20.2021   ***
============================================================ */
#floating-controlbuttons {
    top: 71%;
    right: 0;
    z-index: 0;
    position: absolute;
}

.floating-control-button-additem:before {
    content: '+';
    font-size: 75px;
    padding-bottom: 20px;
}

.floating-control-button-additem {
    width: 170px !important;
    height: 230px !important;
    margin-top: 5%;
    border: 0;
    border-radius: 150px 0 0 150px;
    z-index: 2;
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--HeaderSize);
    line-height: calc(var(--HeaderSize) + 4px);
    color: var(--AccentColor);
    background-color: var(--BGColor);
    box-shadow: var(--BoxShadow);
    display: var(--AddItemBtn);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 20px;
}

.floating-controlbuttons-hidden {
    /*-- visibility: hidden; --*/
    z-index: -1;
    display: none;
}

@media screen and (min-width: 1366px) {
    #floating-controlbuttons {
        top: 25%;
    }
}

.iorderfast-content #floating-controlbuttons {
    display: none;
}


/* =========================================================
  ***  DISABLE TOUCHLESS BUTTON - updated 10.27.2020   ***
============================================================ */
/* X22 Positioning */
@media only screen and (max-width: 1080px) and (max-height: 1920px) {
    #touchlesswrapper {
        right: 10px;
        bottom: 160px;
    }
}
/* TD18, XN18 Positioning */
@media only screen and (min-width: 1366px) and (min-height: 768px), screen and (orientation: landscape) {
    #touchlesswrapper {
        right: 10px;
        bottom: 75px;
    }
}

#touchlesswrapper {
    position: fixed;
    display: flex;
    z-index: 10;
    bottom: 75px;
    right: 10px;
}

#disabletouchlessimg {
    display: inline-flex;
    height: 60px;
    width: 60px;
    padding: 8px;
    content: url('../../html/images/touchless_icon_ON_02.svg');
    background: var(--SecondaryColor);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

#disabletouchlesstext {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 14px;
    text-transform: uppercase;
    background: var(--SecondaryColor);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    color: #FFF;
    height: 60px;
    width: 115px;
    padding: 2px 0 0 0;
}



/* =========================================================
          ***     SPECIALS HIGHLIGHT     ***
============================================================ */
/* The ribbon */
.highlight-button .ribbon {
    width: 32px;
    height: 50px;
    background-color: white;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.28);
    position: absolute;
    right: 30px;
    top: -350px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: drop forwards 0.2s 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

    .highlight-button .ribbon:before {
        content: '';
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -11px;
        border-left: 16px solid white;
        border-right: 16px solid white;
        border-bottom: 12px solid transparent;
    }

    .highlight-button .ribbon .specials-icon {
        color: var(--AccentColor);
    }

        .highlight-button .ribbon .specials-icon:after {
            content: '\f005';
            font-family: 'FAS';
            font-size: 24px
        }

@keyframes drop {
    0% {
        top: -350px;
    }

    100% {
        top: 0;
    }
}

/* Text Button Ribbon Specials */
.text-button.highlight-button .ribbon {
    width: 32px;
    height: 50px;
    background-color: transparent;
    box-shadow: none;
    position: absolute;
    right: 50px;
    top: auto;
    bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: none;
}

    .text-button.highlight-button .ribbon:before {
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .text-button.highlight-button .ribbon .specials-icon {
        color: var(--AccentColor);
    }

        .text-button.highlight-button .ribbon .specials-icon:after {
            content: '\f005';
            font-family: 'FAS';
            font-size: 20px;
        }



/* =========================================================
      ***  SPLASH STYLES BUILT INTO THE KIOSK FILE  ***
============================================================ */
.splashPlaylistX22-p img,
.splashPlaylistTD18-p img {
    height: 100%;
    width: auto;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
}

.splashPlaylistX22-l img,
.splashPlaylistTD18-l img {
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
}


/* =========================================================
 ***  UPDATED SPLASH SCREEN ADVERTISEMENTS - 4.24.2020   ***
============================================================ */
#statusMessageContainer {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    color: rgb(192, 192, 192);
}

div#content {
    display: block;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

#dmd {
    position: absolute;
    height: 100vh;
    width: 100vw;
    left: 0px;
    top: 0px;
    background-size: cover;
    background-position: right 50px;
}

/*the to level div for all dmd layouts will have this class
  the layouts will be named layout0, layout1, layout2, etc
  you can address them by name to each layout a separate look
*/
.dmdLayout {
    height: 100%;
    width: 100%;
}

/*when there are multiple layouts this style is added before a layout is shown to animate in*/
.dmdLayoutHidden {
    top: -100vh;
    z-index: -1000;
}

/* used when a layout div is about to be replaced with a new layout div*/
.dmdLayoutHiding {
    z-index: -1;
}

/* used when a layout div is about to be shown over the existing layout div. the layout with this style will animate over the prior layout*/
.dmdLayoutShown {
    z-index: 1;
}

/* the top level div for all dmd sections will have this class.
  the sections will have ids of dmdSection0, dmdSection1, dmdSection2 etc
  you can address them by name to give each section a separate look
*/
.dmdSection {
    overflow: hidden;
}

/* all playlist background divs will have this class. a playlist create this div to load the assigned background image into*/
.dmdPlaylistSectionBackground {
    top: 0px;
    left: 0px;
    z-index: -1000;
}

/*
  STANDARD TRANSITION ANIMATION CLASSES AND KEYFRAMES FOR DMD PLAYLISTS
  the names "fadeIn", "fadeOut", etc are defined my mynextep.
*/

.dmdPlaylistAnimation_fadeIn {
    animation: fadeIn 1.5s;
    visibility: visible;
    opacity: 1;
}

.dmdPlaylistAnimation_fadeOut {
    animation: fadeOut 1.5s;
    visibility: hidden;
    opacity: 0;
}

.dmdPlaylistAnimation_slidettbIn {
    animation: slideTopToBottomIn 1.5s;
    top: 0;
}

.dmdPlaylistAnimation_slidettbOut {
    animation: slideTopToBottomOut 1.5s;
    top: -100vh;
}

.dmdLayoutTransition_slidettbIn {
    animation: slideTopToBottomIn 1.5s;
    top: 0;
}

.dmdLayoutTransition_slidettbOut {
    animation: slideTopToBottomOut 1.5s;
    top: -100vh;
}

.dmdPlaylistAnimation_slideltrIn {
    animation: slideLeftToRightIn 1.5s;
    left: 0;
}

.dmdPlaylistAnimation_slideltrOut {
    animation: slideLeftToRightOut 1.5s;
    left: -100vw;
}

.dmdPlaylistAnimation_slidertlIn {
    animation: slideRightToLeftIn 1.5s;
    left: 0;
}

.dmdPlaylistAnimation_slidertlOut {
    animation: slideRightToLeftOut 1.5s;
    left: -100vw;
}

.dmdPlaylistAnimation_zoomoutIn {
    animation: zoomIn 1.5s;
}

.dmdPlaylistAnimation_zoomoutOut {
    animation: zoomOut 1.5s;
}


/* =========================================================
    ***  MULTI REVENUE KIOSK SPLASH SCREEN TILES   ***
============================================================ */
#splashGuestVideoTarget {
    display: none;
}
/*--- ITEAM CAN BE REMOVED AFTER TAKEN OUT OF SPLASH ---*/
#locationscontainer {
    width: 50%;
    /*padding-top: 50%; */
    margin: 0 auto;
    text-align: center;
}

div[class^="location_"] {
    height: 400px;
    width: 400px;
    margin: 0 auto;
    background-color: #CCCCCC;
    border: solid 2px #AAAAAA;
    margin-bottom: 25px;
    padding: 200px;
}

.location {
    height: 400px;
    width: 400px;
    margin: 0 auto;
    background-color: #CCCCCC;
    border: solid 2px #AAAAAA;
    margin-bottom: 25px;
    padding: 200px;
}

.locationtitle {
    padding-left: 20px;
    padding-top: 175px;
    margin-left: -190px;
}

/* =========================================================
          ***     KIOSK ANIMATION STYLES      ***
============================================================ */
.paused circle {
    animation-play-state: paused;
}

@keyframes border-timer {
    to {
        stroke-dasharray: 101 100;
        stroke: red;
        stroke-width: 1;
    }
}

@keyframes countdown {
    0% {
        content: '3';
    }

    33% {
        content: '2';
    }

    66% {
        content: '1';
    }

    100% {
        content: '0';
    }
}


/* =========================================================
          ***     ALLERGY/PREFERENCES STYLES      ***
============================================================ */
.allergy {
    float: left;
    width: 47%;
    padding: 10px;
    height: 50px;
    border: 2px solid var(--PrimaryColor);
    border-radius: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.allergy-input {
    float: right;
}

.allergy-label {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
    font-size: var(--ButtonTextSize);
}

.allergy .allergy-input {
    position: relative;
    left: -10px;
}

    .allergy .allergy-input:before {
        content: '\f00c';
        font-size: 25px;
        font-family: 'FAL';
        font-weight: bold;
        display: block;
        position: absolute;
        overflow: hidden;
        padding-top: 40px;
        height: 40px;
        width: 40px;
        left: -10px;
        top: -11px;
        text-align: center;
        line-height: 40px;
        background: var(--AccentColor);
        color: var(--TertiaryColor);
        border-radius: 20px;
        transition: 0.25s;
    }

    .allergy .allergy-input:checked:before {
        padding-top: 0;
    }

@media only screen and (max-width: 767px) {
    .allergy {
        width: 100%;
        margin: 5px 0;
    }
}

/* Allergy Icon on Items */
.hasallergycontainer .itemContent .allergycontainer .allergy {
    border: none;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    margin: 0 4px;
    padding: 3px 0;
}

    .hasallergycontainer .itemContent .allergycontainer .allergy:first-of-type {
        margin-left: 0;
    }

    .hasallergycontainer .itemContent .allergycontainer .allergy:after {
        content: '\f06a';
        font-family: 'FAS';
        font-size: 10px;
        color: red;
        margin-left: 20px;
        position: absolute;
        margin-top: -6px;
    }
/* to make all buttons the same height, if not all buttons have icons */
.hasallergycontainer .allergycontainer {
    height: 25px;
    overflow: hidden;
}

/* to remove allergy container from modifier buttons */
.Select-One-Modifier---Text-buttons .allergycontainer,
.Select-One-Modifier---Upsell---Text-buttons .allergycontainer,
.Select-One-Modifier---AsIsCustom---Dragalong-buttons .allergycontainer,
.Select-One-Modifier---Dragalong-buttons .allergycontainer,
.Select-One-Modifier---Upsell---Dragalong-buttons .allergycontainer,
.Select-Many-Modifiers---Text-buttons .allergycontainer,
.Select-Many-Modifiers---Dragalong-buttons .allergycontainer,
.Select-Many-Modifiers---Limited---Text-buttons .allergycontainer,
.Select-Many-Modifiers---Quantity---Text-buttons .allergycontainer,
.Select-Many-Modifiers---Quantity---Dragalong-buttons .allergycontainer,
.Select-Many-Modifiers---Upsell---Dragalong-buttons .allergycontainer,
.Select-Many-Modifiers---LNM---Text-buttons .allergycontainer,
.Select-Many-Modifiers---Limited---Dragalong-buttons .allergycontainer,
.Select-Many-Modifiers---LNM---Dragalong-buttons .allergycontainer {
    display: none;
}



/* =========================================================
          ***     SCAN ITEMS STYLES      ***
============================================================ */
#scanItemsHeader,
#scanItemsMessageText,
#scanItemsMessageError,
.scandit-camera-upload p {
    font-family: var(--PrimaryBoldFontFamily);
    font-weight: normal;
}

#scanItemsHeader {
    font-size: 30px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.scandit-camera-upload p {
    font-size: 20px;
    line-height: 21px;
    color: #64E687 !important;
}

#scan-items-message {
    text-align: center;
    padding-top: 10px;
}

#scanItemsMessageText {
    font-size: 25px;
    color: #64E687 !important;
}

#scanItemsMessageError {
    font-size: 25px;
    color: red !important;
}

.scandit .scandit-camera-upload {
    height: 400px !important;
}

    .scandit .scandit-camera-upload,
    .scandit .scandit-camera-upload label {
        justify-content: space-evenly;
    }

.scandit-camera-upload svg {
    border-color: #64E687 !important;
    color: #64E687 !important;
    fill: #64E687 !important;
}

.scandit .radial-progress {
    border-color: #64E687 !important;
    color: #64E687 !important;
    fill: #64E687 !important;
}

.scandit .scandit-logo {
    right: 0 !important;
    left: 0;
    margin: auto;
}


/* =========================================================
            ***     TEMPLATE: SPECIAL BUTTONS     ***
============================================================ */
/* top fixed section structure */
#fixedbuttonscontainer {
    position: absolute;
    top: 0;
    background-color: #E8E8E8;
    height: 30%;
    box-shadow: var(--BoxShadow);
}

/* bottom fixed section structure */
.Select-One-Item-Special-Text-buttons [id^=row] {
    top: 30%;
    position: absolute;
    bottom: 0px;
    padding: 30px 60px;
}

.carousel {
    position: static;
}

.Specials-Carousel-Control .carousel-control-prev,
.Specials-Carousel-Control .carousel-control-next,
.carousel-fixedcontrol-prev,
.carousel-fixedcontrol-next {
    position: fixed;
    top: 15%;
    font-size: 70px;
    background: transparent;
    color: var(--SecondaryColor);
    font-weight: normal;
    font-family: 'FAL';
}

.Specials-Carousel-Control .carousel-control-prev,
.carousel-fixedcontrol-prev {
    left: 15px;
}

.Specials-Carousel-Control .carousel-control-next,
.carousel-fixedcontrol-next {
    right: 15px;
}

.carousel-fixedcontrol-prev:before,
.Specials-Carousel-Control .carousel-control-prev:before {
    content: '\f053';
}

.Specials-Carousel-Control .carousel-control-next:before,
.carousel-fixedcontrol-next:before {
    content: '\f054';
}

a.carousel-fixedcontrol-prev:hover, a.carousel-fixedcontrol-next:hover,
a.carousel-fixedcontrol-prev:focus, a.carousel-fixedcontrol-next:focus {
    color: var(--SecondaryColor);
}

/* bottom menu button control buttons */
.Specials-Carousel-Control .carousel-control-prev,
.Specials-Carousel-Control .carousel-control-next {
    top: 62%;
    margin-top: 0;
    color: var(--AccentColor);
}


/***    TOP SECTION     ***/
/* ***  FIXED SPECIAL BUTTONS  *** Modeled after Image Menu Item *** */
#fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px;
    background-color: var(--AccentColor);
    color: var(--TertiaryColor);
}

#fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button {
    width: 33.33%;
    padding: 0px 0px 0px 0px !important;
}


    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button #bimage:before {
        content: '\f005';
        font-family: 'FAS';
        font-size: 45px;
        padding: 5px 15px;
        color: white;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button #bimage {
        /* remove background-image: none in override css if they want image to show under star */
        background-image: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90px;
        width: 90px;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 0 0;
        padding: 0;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button #btext {
        margin-bottom: 0px;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button .caption {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button .itemContent {
        padding: 10px 10px 10px 0px;
        width: 80%;
        justify-content: center;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button #textDesc {
        margin-bottom: 0;
        font-family: var(--SecondaryFontFamily);
        font-weight: normal;
        font-size: var(--DescTextSize);
        line-height: calc(var(--DescTextSize) + 4px);
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button .ibutton:before {
        color: var(--TertiaryColor);
    }

#fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .highlight-button .ribbon {
    display: none;
}

/***    BOTTOM SECTION     ***/
/* ***  SPECIAL BUTTONS  *** Modeled after Main Menu Image Button *** */
#buttonscarousel .Select-One-Item-Special-Text-buttons .image-button .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px;
    border-radius: 55px;
}

#buttonscarousel .Select-One-Item-Special-Text-buttons .image-button {
    width: 33.33%;
    padding: 0px 0px 0px 0px !important;
}

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button #bimage {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 110px;
        width: 110px;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 0 0;
        padding: 0;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button #btext {
        margin-bottom: 0px;
        -webkit-line-clamp: 2;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button .caption {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button .itemContent {
        min-height: 110px;
        padding: 0 15px 0 15px;
        width: 80%;
        justify-content: center;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button #textDesc {
        margin-bottom: 0;
        font-family: var(--SecondaryFontFamily);
        font-weight: normal;
        font-size: var(--DetailsTextSize);
        line-height: calc(var(--DescTextSize) + 4px);
    }



/* @media for special buttons template */
@media only screen and (width: 1080px) and (height: 1920px) and (orientation: portrait) {
    #fixedbuttonscontainer {
        height: 30%;
    }

    .carousel-fixedcontrol-prev, .carousel-fixedcontrol-next {
        top: 17%;
    }

    .Select-One-Item-Special-Text-buttons [id^=row] {
        top: 0;
        position: relative;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button {
        width: 75%;
    }

    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button {
        width: 50%;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) and (orientation: landscape) {
    .carousel-fixedcontrol-prev, .carousel-fixedcontrol-next {
        top: 22%;
    }
}

@media only screen and (width: 1024px) and (height: 768px) and (orientation: landscape) {
    #fixedbuttonscontainer.Select-One-Item-Special-Text-buttons .image-button {
        width: 31%;
    }

    .Select-One-Item-Special-Text-buttons [id^=row] {
        padding: 30px;
    }

    #buttonscarousel .Select-One-Item-Special-Text-buttons .image-button {
        width: 50%;
    }
}

@media only screen and (height: 768px) and (height: 720px) and (orientation: landscape) {
    /* bottom menu button control buttons */
    .Specials-Carousel-Control .carousel-control-prev,
    .Specials-Carousel-Control .carousel-control-next {
        top: 60%;
    }
}



/* =========================================================
         ***     POPUP ORDER TIME ALTERNATE     ***
============================================================ */
#popup-ordertime-alternate-select .selectAlt {
    border-bottom: var(--Border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

    #popup-ordertime-alternate-select .selectAlt .btn-takeover {
        width: 125px;
        min-width: 125px;
        font-family: var(--SecondaryBoldFontFamily);
        font-size: 15px;
    }

#popup-ordertime-alternate-select .selectAltTimeOpts {
    display: flex;
    flex-flow: row;
    overflow-x: scroll;
    overflow-y: hidden;
}

#popup-ordertime-alternate-select .selectAltTimeBtn {
    margin: 8px 10px;
    padding: 10px 20px;
    min-width: 115px;
    text-align: center;
    font-family: var(--SecondaryBoldFontFamily);
}

    #popup-ordertime-alternate-select .selectAltTimeBtn:hover,
    #popup-ordertime-alternate-select .selectAltTimeBtn.selected {
        background: var(--AccentColor);
        color: var(--TertiaryColor);
    }

    .amountdue:after {
        content: 'If paying with cash or redeeming a coupon for this order, please select "Pay In Store" as your payment type and pull through to the drive thru window for pickup. A Patriot will help you complete your order!';
        display: block;
        margin-top: 25px;
        font-family: var(--SecondaryBoldFontFamily);
    }