:root {
    --percent: 0.9;
    --icon-height: 35px;
    --icon-width: 35px;
    --icon-margin-left: 0px;
    --icon-margin-right: 10px;
    --icon-margin-top: 4px;
}

.word-wrap {
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.navbar-shadow {
    -webkit-box-shadow: 0 8px 6px -6px #ddd;
    -moz-box-shadow: 0 8px 6px -6px #ddd;
    box-shadow: 0 8px 6px -6px #ddd;
}

.navbar-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-color {
    background-color: #fff;
}

/*remove the scroll bar*/
nav::-webkit-scrollbar {
    display: none;
}

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

.limit-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*sweet alert*/
.swal-button--confirm { /*cancel button*/
    background: #808080;
    color: #fff; /*font color*/
    border-color: #696969;
}

.swal-button--confirm:hover, .swal-button--confirm:focus {
    opacity: 0.7;
    background: #808080 !important;
    color: #fff;
}

.swal-button--cancel {
    background: #FF6550;
    color: #fff; /*text color*/
    border-color: #E21405;
}

.swal-button--cancel:hover, .swal-button--cancel:focus {
    opacity: 0.7;
    background: #FF6550;
    color: #fff;
}

/*force red and force grey is used by swal's yes no button*/
.force-grey-btn { /*cancel button*/
    background: #808080 !important;
    color: #fff !important; /*font color*/
    border-color: #696969 !important;
}

.force-grey-btn:hover, .force-grey-btn:focus {
    opacity: 0.7;
    background-color: #808080 !important; /*hover over the button*/
    color: #fff;
}

.force-grey-background {
    background: #808080 !important;
    color: #fff !important; /*font color*/
    border-color: #696969 !important;
}

.force-red-btn {
    background: #FF6550 !important;
    color: #fff !important; /*text color*/
    border-color: #E21405 !important;
}

.force-red-btn:hover, .force-red-btn:focus {
    opacity: 0.7;
    background-color: #FF6550 !important;
    color: #fff;
}

.swal-button:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(40, 40, 40, .29); /*the focus outline for the no button */
}

.swal-button--danger {
    background: #eee;
}

.swal-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
}

.swal-button {
    font-size: 1rem;
    font-weight: 400;
}

.swal-footer {
    text-align: center;
}

/*.swal-button--confirm:active {
        background: #eee;
    }*/
.swal-button:focus {
    box-shadow: none;
}

/*end sweet alert*/

/*the menu button hover */
.hover-div:not(#cutlery_row, .upsell-item-box, .cart-category-header-color, .questionnaire_row, #takeaway_div), .hover-div-bordered:not(.fa-pencil, .selected-product-color) {
    background: #fff;
    cursor: pointer;
}

.hover-div:hover:not(#cutlery_row, .questionnaire_row, #takeaway_div), .hover-div-bordered:hover:not(.fa-pencil) {
    background-color: #f5f5f5;
}

/* need to seperate out questionnair cause the bg color and hover color haywire */
.hover-div-bg {
    cursor: pointer;
}

.hover-div-bg:hover {
    background-color: #f5f5f5;
}

.fake-hover {
    background-color: #f5f5f5 !important;
}

.fake-disabled {
    background: #e9ecef !important;
}

.hover-div-bordered {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    /* transition: background-color .4s ease-out; */
}

.radius-25 {
    border-radius: .25rem;
}

input[type="text"]:disabled {
    background: #fff;
    cursor: default;
}

.text-disabled-bg {
    background-color: #e9ecef !important;
    opacity: 1;
}

.no-side-margin {
    margin-right: 0;
    margin-left: 0;
}

.no-side-padding {
    padding-right: 0;
    padding-left: 0;
}

.no-padding {
    padding: 0 0 0 0;
}

.no-padding-important {
    padding: 0 0 0 0 !important;
}

.add-padding {
    padding: 5px;
}

.position-fixed {
    position: fixed;
    /*display: inline-block;*/
    /*margin-bottom: 20%;*/
    top: 0;
    z-index: 1000;
}

.fixed-top {
    position: sticky !important;
}

/* .gc-fixed-top { */
/*     position: fixed !important; */
/* } */

.nav-position {
    position: sticky !important;
}

.reward-nav-position {
    position: fixed !important;
}

/* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
#map {
    height: 100%;
    position: relative; /* to make the spinner be in correct place before map is init */
}

.custom-map-control-button {
    appearance: button;
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 10px;
    padding: 9px;
    height: 40px;
    width: 40px;
    font: 400 18px Roboto, Arial, sans-serif;
    overflow: hidden;
}

.customer-location-icon-btn {
    padding: 4px 0 0 0 !important;
    height: 18px;
    width: 16px;
    margin-right: 2px;
}

.border-top {
    border-top: 1px solid rgba(0, 0, 0, .125);
}

.border-btm {
    border-bottom: solid 1px;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.order-force-first {
    order: -1;
}

.top-margin-negative-2 {
    margin-top: -2px !important;
}

.top-margin-negative-8 {
    margin-top: -8px !important;
}

.top-margin-negative-5 {
    margin-top: -5px !important;
}

.top-margin-negative-10 {
    margin-top: -10px !important;
}

.top-margin-negative-13 {
    margin-top: -13px !important;
}

.top-margin-1 {
    margin-top: 1px !important;
}

.top-margin-3 {
    margin-top: 3px !important;
}

.top-margin-5 {
    margin-top: 5px !important;
}

.top-margin-7 {
    margin-top: 7px !important;
}

.top-margin-10 {
    margin-top: 10px !important;
}

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

.top-margin-25 {
    margin-top: 25px;
}

.top-margin-40 {
    margin-top: 40px !important;
}

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

.right-margin-40 {
    margin-right: 40px !important;
}

.right-margin-25 {
    margin-right: 25px;
}

.margin-15 {
    margin: 15px;
}

.cat-a-padding {
    padding: 10px 5px 10px 10px;
}

.add-order-div {
    padding-top: 0;
}

.add-order-leftright-pad {
    padding-left: 10px;
    padding-right: 10px;
}

.add-order-topbtm-pad {
    padding-top: 10px;
    padding-bottom: 10px;
}

.change-password-top-pad {
    padding-top: 5px;
    padding-bottom: 2.5px;
}

.change-password-bot-pad {
    padding-bottom: 5px;
}

#password-eye {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.mt-leftorcenter {
    text-align: left;
}

body {
    font-size: 1rem;
    position: relative;
    min-height: 100vh;
}

h4 {
    font-size: 1.5rem;
    color: #444;
}

h5 {
    font-size: 1.25rem;
    color: #444;
}

h6 {
    font-size: 1rem;
    color: #444;
}

h7 {
    font-size: 0.875rem;
}

.small-text {
    font-size: 0.8rem;
}

/*a{color:#444;}*/

.cutlery-label::before, .cutlery-label::after {
    top: 0.25rem !important;
    left: -1.58rem !important;
}

.tnc-label::before, .tnc-label::after {
    top: 0.16rem !important;
    left: -1.58rem !important;
}

/* make large checkbox */
.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.2rem;
    left: -2rem;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
}

.custom-control-lg .custom-control-label-with-discount::before,
.custom-control-lg .custom-control-label-with-discount::after {
    top: 0.95rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
}

/* end make large checkbox */

.fs-static {
    font-size: 1rem !important;
}

/* font size static*/
.fs-static2 {
    font-size: 2rem !important;
}

.hide-this {
    display: none !important;
}

.vsm-hide {
}

.vsm-show {
    display: none;
}

.vsm-flex {
    display: none;
}

.vsm-inline-block {
    display: none;
}

.mod-qty-padding {
    padding-top: 2px;
}

.qty-mt-center {
    text-indent: 45px;
    text-align: left !important;
}

.input-mt-center {
    text-indent: 54px;
    text-align: left !important;
}

.flex-one {
    flex: 1;
}

/*.qty-mt-center{text-indent: 50px;text-align:left !important;}*/
/*.input-mt-center{text-indent: 59px;text-align:left !important;}*/
.nav-right {
    width: calc(100% - 156px);
    /*right: 156px;*/
}

.nav-right-reward {
    width: calc(100% - 10px);
}

.sub-cat-indent {
    display: inline-block;
}

@media (min-width: 1400px) {
    .screen-max-width {
        max-width: 1400px;
        margin-left: calc((100% - 1400px) / 2);
    }
}

@media (max-width: 384px) {
    .vsm-hide {
        display: none;
    }

    /* hide title when its too small */
    .vsm-show {
        display: block;
    }

    .vsm-flex {
        display: flex;
    }

    .vsm-inline-block {
        display: inline-block !important;
    }

    .reward-header-flex {
        display: flex;
    }

    /*.qty-mt-center{text-indent: 0px;text-align:center !important;}*/
    /*.input-mt-center{text-indent: 0px;text-align:center !important;}*/
}

.remove-reward-initial-css {
    padding: 0;
    border: 0;
}

.account_deets_hr {
    margin: 5px 0;
}

@media (max-width: 574px) {
    .reward-card-hr-margin {
        margin-top: 2.5px;
    }
}

@media (min-width: 575px) {
    .left-pad-5-big {
        padding-left: 5px !important;
    }

    .select_outlet_btn {
        bottom: 10px !important;
        right: 10px !important;
    }

    .add-order-leftright-pad {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cart-sent-orders-style {
        left: 10px !important;
    }

    .add-order-topbtm-pad {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .change-password-top-pad {
        padding-top: 10px;
        padding-bottom: 5px;
    }

    .change-password-bot-pad {
        padding-bottom: 10px;
    }

    /*.mt-leftorcenter{text-align:center;} moved to 768*/
    .modal-margin-top {
        margin-top: 100px !important;
    }

    #hide_store_message_btn {
        top: 6px !important;
        right: 10px !important;
    }

    #store_message_div {
        padding-left: calc(2em + 10px) !important;
        padding-right: calc(2em + 10px) !important;
    }

    #store_message_exclamation {
        top: 6px !important;
        left: 10px !important;
    }

    .table-pax-header-div {
        height: 38px !important;
    }

    .account_deets_hr {
        margin: 10px 0;
    }

    .store_op_hour_align_right {
        text-align: right;
    }

    .cart-footer-span-style {
        align-items: baseline;
    }
}

.sign-up-input-pad {
    padding: 0 5px 10px 10px;
}

.compressed_image_description {
    min-height: 200px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.cart-description-class > :last-child {
    /*so that there will be some spacing before the X button*/
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    /* under 575px, or col-*/
    .button-inline {
        display: inline !important;
    }

    .remove-left-right-pad {
        padding-left: 0;
        padding-right: 0;
    }

    .no-leftright-devicepad { /* only small device no padding */
        padding-left: 0;
        padding-right: 0;
    }

    .add-order-div {
        padding-top: 10px;
    }

    .info-dialog {
        margin-left: 35px !important;
        margin-right: 35px !important;
        max-width: 500px !important;
        min-width: 200px !important;
    }

    .mod-qty-padding {
        padding-top: 0;
    }

    .cart-trash-text {
        display: none !important;
    }

    .cart-trash-text-small {
        display: block !important;
    }

    .search_top {
        top: 3px !important;
    }

    .small-pad {
        padding-bottom: 15px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .small-width-50 {
        width: 50% !important;
    }

    .small-width-50.width-70 {
        padding-left: 5px;
    }

    .left-pad-33 {
        padding-left: calc(33% - 1px) !important;
    }

    .left-pad-16 {
        padding-left: calc(33% - 0px) !important;
    }

    .mt-center-small {
        text-align: center !important;
    }

    .small-left-pad-2 {
        padding-left: 2px !important;
    }

    .small-right-pad-3 {
        padding-right: 3px !important
    }

    .input-right-pad {
        padding: 0 5px 5px 5px !important;
    }

    .input-left-pad {
        padding: 0 5px 5px 5px !important;
    }

    /*.login-modal-content{height: 805px !important;}  without footer 770px, with footer 805px !important; */
    .xs-width-100 {
        width: 100%;
    }

    .xs-top-pad-10 {
        padding-top: 10px !important;
    }

    .sub-cat-indent {
        display: none;
    }

    .xs-order-last {
        order: 13;
    }

    .mobile-modal-vh {
        /* bootstrap by default uses 100vh, we use 100dvh instead. */
        max-height: calc(100dvh - 1rem) !important;
    }

    .w-xs-100 {
        width: 100%;
    }

    .w-xs-50 {
        width: 50%;
    }

    .small-width-none {
        display: none !important;
    }

    .small-visibility-none {
        visibility: hidden !important;
    }

    #order_modal_image {
        object-fit: cover;
        width: 95vw;
        height: 30vh;
        cursor: pointer;
    }

    .full-image-height {
        height: auto !important;
    }

    .compressed_image_description {
        object-fit: cover;
        /* width: 90vw; */
        height: 30vh;
        cursor: pointer;
    }

    #item_image_content {
        overflow: hidden;
    }

    #promo_description_div {
        margin-top: 5px;
    }

    .small-order-1 {
        order: 1;
    }

    .small-order-2 {
        order: 2;
    }

    .small-order-3 {
        order: 3;
    }

    .small-order-4 {
        order: 4;
    }

    .small-order-5 {
        order: 5;
    }

    .small-order-6 {
        order: 6;
    }

    .small-order-7 {
        order: 7;
    }

    .small-order-8 {
        order: 8;
    }

    .small-order-9 {
        order: 9;
    }

    .small-order-10 {
        order: 10;
    }

    .small-order-11 {
        order: 11;
    }

    .small-order-12 {
        order: 12;
    }

    .small-order-13 {
        order: 13;
    }

    /*when small, left right pad is 5. when big is 10*/
    .plus-minus-total-width {
        max-width: 117px !important;
        min-width: 117px !important;
    }

    .receipt-item-max-width {
        max-width: calc(100% - 50px) !important;
        min-width: calc(100% - 50px) !important;
    }

    .receipt-qty-max-width {
        max-width: 50px !important;
        min-width: 50px !important;
    }

    .footer-small-font {
        font-size: 3vw;
        margin-top: auto;
        /*margin-bottom: auto;*/
    }

    .upsell-item-box {
        width: 230px !important;
    }

    .mobile-w-100 {
        width: 100%;
    }

    .cart-footer-btn {
        padding-top: 1px; /** push the button down to center it abit. */
    }

    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices */
        /*on iOS safari, there's a white line when scrolling. below is the fix to "hide" it.*/
        .nav-position, .reward-nav-position {
            top: -1px;
        }

        .search-div-style {
            top: 49px !important;
        }

        #nav_scroll_spy2 {
            top: 140px !important;
        }

        .horizontal-scrollspy-style {
            top: 92px !important;
        }
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .modal-lg, .modal-xl {
        min-width: 90%;
        max-width: 90%;
    }

    .add-order-div {
        padding-top: 10px;
    }

    .search_top {
        top: 3px !important;
    }

    .small-order-last {
        order: 13;
    }
}

@media (max-width: 351px) {
    .store-closed-style {
        width: 50%;
        margin-left: 25%;
    }
}

.modifier-checkbox-style {
    display: block;
    padding-left: calc(33% - 4px);
}

.modifier-img-checkbox-style {
    display: block;
    padding-left: calc(100% - 5px);
}

.modifier-na-style {
    bottom: 5px;
    padding: 2px !important;
    font-size: 14px;
    height: 28px;
    width: 28px;
    display: flex;
}

.kiosk-mod-na-style {
    font-size: 0.9rem !important;
}

@media (max-width: 350px) {
    :root {
        --percent: 0.8; /* special case like iPhone SE */
    }

    .modifier-checkbox-style {
        display: block;
        padding-left: calc(33% - 0px) !important;
    }

    .modifier-img-checkbox-style {
        padding-left: calc(100% + 1px) !important;
    }
}

.category-a-vertical-style {
    display: flex;
    align-items: center;
}

.nav-extra-bot-margin {
    margin-bottom: 10px;
}

.nav-drop-down-mobile {
    display: none;
}

.nav-drop-down-big {
    display: flex;
}

.required-msg {
    color: #FF3F26;
    font-size: 0.875rem;
    font-weight: 300;
}

@media (max-width: 767px) {
    .nav-drop-down-mobile {
        display: flex;
    }

    .nav-drop-down-big {
        display: none;
    }

    .nav-extra-bot-margin {
        margin-bottom: 30px;
    }

    /*    input[type=text]{font-size:calc(1.0rem*var(--percent));}     input alone doesn't work'*/
    textarea[type=text] {
        /* font-size: calc(1.0rem * var(--percent)); */
        font-size: 1rem;
    }

    button[type=button]:not(.plus-minus-button) {
        font-size: calc(1.1rem);
    }

    /* maintain original size */
    /* body { */
    /*     font-size: calc(1.0rem * var(--percent)); */
    /* } */

    /* h4 { */
    /*     font-size: calc(1.5rem * var(--percent)); */
    /* } */

    /* h5 { */
    /*     font-size: calc(1.25rem * var(--percent)); */
    /* } */

    /* h6 { */
    /*     font-size: calc(1.0rem * var(--percent)); */
    /* } */

    /* h7 { */
    /*     font-size: calc(0.875rem * var(--percent)); */
    /*     !* font-size: 0.875rem; *! */
    /* } */

    /* input.int-only { */
    /*     font-size: calc(1.0rem * var(--percent)); */
    /* } */

    /* .font-rem-110 { */
    /*     font-size: calc(1.1rem * var(--percent)) !important; */
    /* } */

    .custom-control-lg .custom-control-label::before,
    .custom-control-lg .custom-control-label::after {
        top: 0.2rem;
        left: -2rem !important;
        width: calc(1.8rem * var(--percent));
        height: calc(1.8rem * var(--percent));
    }

    .custom-control-lg .custom-control-label {
        margin-left: 0.5rem !important;
        font-size: calc(1.0rem * var(--percent)) !important;
    }

    .info-dialog {
        max-width: 500px !important;
        min-width: 200px !important;
    }

    .small-align-right {
        text-align: right;
    }

    .cart-trash-btn {
        padding-top: 5px !important;
    }

    .left-pad-33 {
        padding-left: calc(33% - 0px);
    }

    .left-pad-16 {
        padding-left: calc(16% - 0px) !important;
    }

    .small-text-font {
        /* is the same as 14px */
        font-size: 0.875rem;
    }

    .floating-label {
        transform: translate(0.75rem, -2.35rem) !important;
        font-size: calc(1.0rem * var(--percent)) !important;
    }

    .floating-label-input-field:-webkit-autofill + .floating-label {
        transform: translate(0.75rem, -3rem) !important;
        font-size: calc(0.75rem * var(--percent)) !important;
    }

    .floating-label-input-field:focus + .floating-label {
        transform: translate(0.75rem, -3rem) !important;
        font-size: calc(0.75rem * var(--percent)) !important;
    }

    .floating-label-input-field:not(:placeholder-shown) + .floating-label {
        transform: translate(0.75rem, -3rem) !important;
        font-size: calc(0.75rem * var(--percent)) !important;
    }

    .modifier-checkbox-style {
        display: block;
        padding-left: calc(33% - 1px);
    }

    .modifier-img-checkbox-style {
        padding-left: calc(100% - 2px);
    }

    .modifier-na-style {
        padding: 1px !important;
    }

    .cart-clear-font-account {
        padding-top: 1px !important;
    }

    .margin-top-2-small {
        margin-top: 2px !important;
    }

    .small-pad-btm-5 {
        padding-bottom: 5px !important;
    }

    .tnc_alignment {
        text-align: center;
    }

    .tnc_block {
        display: block;
    }

    #dollar_sign {
        right: 10px;
    }

    .collapse-pencil-box {
        padding: 12px !important;
    }

    .disabled-mod-qty-btn-style {
        padding: 1px 5px 3px !important;
        height: 25px !important;
        width: 25px !important;
    }

    .disabled-mod-qty-style {
        height: 25px !important;
        width: 25px !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    }

    .info-dialog {
        max-width: 800px !important;
    }

}

@media (min-width: 992px) and (max-width: 1200px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    }

    .info-dialog {
        max-width: 800px !important;
    }

    .h5-lg-h6-md {
        font-size: 1.25rem !important;
    }

    .text-right-big {
        text-align: right !important;
    }

    .left-pad-big {
        padding-left: 55px !important;
    }
}

@media (min-width: 1200px) {
    /*above 1200 */
    .modal-lg, .modal-xl {
        max-width: 800px;
    }

    .info-dialog {
        max-width: 800px !important;
    }

    .h5-lg-h6-md {
        font-size: 1.25rem !important;
    }

    .text-right-big {
        text-align: right !important;
    }

    .left-pad-big {
        padding-left: 55px !important;
    }
}

@media (min-width: 1250px) {
    .lg-btn-div-3-btn {
        width: 140px !important;
    }

    .lg-btn-div-4-btn {
        width: 140px !important;
    }

    .lg-btn-div-5-btn {
        width: 140px !important;
    }

    #login_lg_div {
        width: auto !important;
        padding: 0 10px !important;
    }

    #dropdown_menu_btn_div {
        padding: 0 15px !important;
    }

    .nav-right-small-4-btn {
        width: 50%;
    }
}

.h5-lg-h6-md {
    font-size: 1rem;
}

.myt-valign-center {
    vertical-align: middle !important;
}

.small_language_font_size {
    font-size: 0.95rem;
}

.flex-valign-center {
    align-items: center;
}

/*if it's in flex display & maybe row */

.top-nav-background {
    background-color: white;
}

.mt-green {
    color: #27ae60;
}

.mt-orange {
    color: #e16800;
}

.mt-xs-center {
    text-align: center;
}

.mt-center {
    text-align: center;
}

.mt-right {
    text-align: right;
}

.mt-left-important {
    text-align: left !important;
}

.mt-right-important {
    text-align: right !important;
}

.mt-left {
    text-align: left;
}

.mt-white {
    color: white;
}

.mt-black {
    color: black;
}

.mt-darkpurple {
    color: #7e68ab
}

.mt-darkgrey {
    color: #606060;
}

.mt-grey {
    color: #737373;
}

/* light grey #DDD */
.mt-grey-important {
    color: #737373 !important;
}

/* light grey #DDD */
.mt-light-grey {
    color: #a5a5a5;
}

/* light grey #DDD */
.mt-red {
    color: #FF3F26;
}

.light-grey-bg {
    background-color: #f6f6f6;
}

.light-purple-border {
    border: 1px solid #7e68ab;
}

.grey-bg {
    background-color: #737373;
}

.alt-grey-bg {
    background-color: #f6f6f6;
}

.white-bg {
    background-color: white;
}

.black-bg {
    background-color: black;
}

.light-red-bg {
    background-color: #fef3fa;
}

.mt-mobired {
    color: #FF6550
}

.mt-smalltext {
    font-size: 14px;
    color: black;
}

.font17 {
    font-size: 17px;
}

.font30 {
    font-size: 30px !important;
}

.font60 {
    font-size: 60px !important;
}

.font2rem {
    font-size: 2rem !important;
}

.mt-underline {
    text-decoration: underline;
}

.mt-deco-none {
    text-decoration: none;
}

.reward-tnc-text:hover {
    text-decoration: underline;
}

.my-a:hover {
    color: #606060;
    cursor: pointer;
}

/*beside each modifier group*/
.optional-background {
    background-color: #F6F6F6;
}

.optional-text {
    color: #737373;
}

.required-background {
    background-color: #fef3fa;
}

.required-text {
    color: #FF6550;
}

.discount-background {
    background-color: #f1edfa;
}

.discount-text {
    color: #7e68ab;
}

.maxChoice-background {
    background-color: rgba(43, 132, 231, 0.1);
}

.maxChoice-text {
    color: #2b84e7;
}

.optional-header-bg {
    background-color: white;
    outline: 1px solid #737373;
}

.red-btn:focus, .red-btn:active:focus {
    outline: none;
    color: #fff;
}

.red-btn:disabled, .red-btn.disabled-css {
    border-color: rgba(226, 20, 5, 0.4); /* this is the rgb of #E21405 */
    opacity: 0.65 !important;
}

.grey-btn:focus, .grey-btn:active:focus {
    outline: none;
    color: #fff;
}

.red-transparent-btn {
    background-color: #fff;
    color: #FF6550;
    border-color: #FF6550;
}

.red-transparent-btn:hover {
    opacity: 0.7;
    color: #FF6550;
}

.red-transparent-btn:focus, .red-transparent-btn:active:focus {
    outline: none;
    color: #FF6550;
}

/* remove blue border when selecting*/

.grey-transparent-btn {
    background-color: #fff;
    color: #aaa;
    border-color: #aaa;
}

.grey-transparent-btn:hover {
    color: #111;
    border-color: #111;
}

.grey-transparent-btn:focus, .grey-transparent-btn:active:focus {
    outline: none;
    color: #111;
}

.darkgrey-transparent-btn {
    /*background-color: #fff;*/
    color: #6f6f6f;
    border-color: #6f6f6f;
}

.darkgrey-transparent-btn:hover {
    opacity: 0.7;
    color: #6f6f6f;
}

.darkgrey-transparent-btn:focus, .grey-transparent-btn:active:focus {
    outline: none;
    color: #111;
}

.black-transparent-btn {
    background-color: #fff;
    color: #696969;
    border-color: #696969;
}

.black-transparent-btn:hover {
    opacity: 0.7;
    color: #696969;
}

.black-transparent-btn:focus, .grey-transparent-btn:active:focus {
    outline: none;
    color: #696969;
}

.pos-abs {
    position: absolute;
}

.hundredheight {
    height: 100%;
}

.mbox {
    border: 1px solid #DDD;
}

.product-pad {
    /* padding: 3px; */
    padding-right: 5px;
    padding-bottom: 5px;
}

.no-topbtm-pad {
    padding-top: 0;
    padding-bottom: 0;
}

.no-leftright-pad {
    padding-left: 0;
    padding-right: 0;
}

.no-leftright-pad-imp {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-sm-leftright-pad {
    padding-left: 0;
    padding-right: 0;
}

.half-opac {
    opacity: 0.5
}

.opac-60 {
    opacity: 0.6
}

.opac-80 {
    opacity: 0.8
}

.list-group-item.active .opac-60 {
    opacity: 1;
}

.no-left-pad {
    padding-left: 0;
}

.no-right-pad {
    padding-right: 0;
}

.no-left-pad-imp {
    padding-left: 0 !important;
}

.no-top-pad {
    padding-top: 0;
}

.no-top-pad-imp {
    padding-top: 0 !important;
}

.no-btm-pad {
    padding-bottom: 0;
}

.no-btm-pad-imp {
    padding-bottom: 0 !important;
}

.left-pad-3 {
    padding-left: 3px;
}

.left-pad-5 {
    padding-left: 5px;
}

.left-pad-5-imp {
    padding-left: 5px !important;
}

.left-pad-15 {
    padding-left: 15px;
}

.left-pad-30 {
    padding-left: 30px;
}

.right-pad-5 {
    padding-right: 5px;
}

.right-pad-5-imp {
    padding-right: 5px !important;
}

.right-pad-8 {
    padding-right: 8px;
}

.left-pad-10 {
    padding-left: 10px;
}

.left-pad-10-imp {
    padding-left: 10px !important;
}

.right-pad-10 {
    padding-right: 10px;
}

.right-pad-15 {
    padding-right: 15px;
}

.topbtmpad-2-leftrightpad-5 {
    padding: 2px 5px;
}

.topbtmpad-8-leftrightpad-4 {
    padding: 8px 4px;
}

.pad-15 {
    padding: 15px;
}

.pad-10 {
    padding: 10px;
}

.pad-5 {
    padding: 5px;
}

.pad-5-imp {
    padding: 5px !important;
}

.pad-3 {
    padding: 3px;
}

.pad-2 {
    padding: 2px;
}

.pad-8 {
    padding: 8px;
}

.pad-right-8 {
    padding-right: 8px;
}

.pad-btm-44 {
    padding-bottom: 44px;
}

.pad-btm-49 {
    padding-bottom: 49px;
}

.pad-btm-25 {
    padding-bottom: 25px;
}

.pad-btm-20 {
    padding-bottom: 20px;
}

.pad-btm-15 {
    padding-bottom: 15px;
}

.pad-btm-10 {
    padding-bottom: 10px;
}

.pad-btm-8 {
    padding-bottom: 8px;
}

.pad-btm-5 {
    padding-bottom: 5px;
}

.pad-btm-3 {
    padding-bottom: 3px;
}

.pad-top-1rem {
    padding: 1rem 0 0 0;
}

.pad-top-25 {
    padding-top: 25px;
}

.pad-top-20 {
    padding-top: 20px;
}

.pad-top-15 {
    padding-top: 15px;
}

.pad-top-10 {
    padding-top: 10px;
}

.pad-top-10-imp {
    padding-top: 10px !important;
}

.pad-top-8 {
    padding-top: 8px;
}

.pad-top-7 {
    padding-top: 7px;
}

.pad-top-5 {
    padding-top: 5px;
}

.pad-top-2 {
    padding-top: 2px;
}

.pad-top-2-imp {
    padding-top: 2px !important;
}

.pad-top-btm-2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.pad-top-btm-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pad-top-btm-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pad-top-btm-15-imp {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.pad-top-btm-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pad-left-right-2 {
    padding-left: 2px;
    padding-right: 2px;
}

.pad-1-2 {
    padding: 1px 2px;
}

.pad-right8-left0 {
    padding-right: 8px;
    padding-left: 0;
}

.no-margin-btm {
    margin-bottom: 0;
}

.no-margin-btm-important {
    margin-bottom: 0 !important;
}

.no-margin-top {
    margin-top: 0;
}

.no-margin-top-important {
    margin-top: 0 !important;
}

.no-margin {
    margin: 0;
}

.margin-btm-50 {
    margin-bottom: 50px;
}

.margin-btm-44 {
    margin-bottom: 44px;
}

.margin-btm-20 {
    margin-bottom: 20px;
}

.margin-btm-15 {
    margin-bottom: 15px;
}

.margin-btm-10 {
    margin-bottom: 10px;
}

.margin-btm-5 {
    margin-bottom: 5px !important;
}

/*to overwrite alerth margin*/
.margin-btm-2 {
    margin-bottom: 2px;
}

.margin-btm-negative-5 {
    margin-bottom: -5px;
}

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

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

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-top--3 {
    margin-top: -3px;
}

.margin-top--5 {
    margin-top: -5px;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-7-5 {
    margin-top: 7.5px;
}

.margin-top-negative-5 {
    margin-top: -5px !important;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-right-8 {
    margin-right: 8px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-top-btm-3 {
    margin-top: 3px;
    margin-bottom: 3px;
}

.margin-top-btm-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.margin-top-btm-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.margin-top-btm-7 {
    margin-top: 7px;
    margin-bottom: 7px;
}

.margin-top-btm-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margin-top-btm-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

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

.margin-left-neg-10 {
    margin-left: -10px;
}

.margin-left-3 {
    margin-left: 3px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-8 {
    margin-left: 8px !important;
}

.margin-left-46 {
    margin-left: 46px !important;
}

.margin-left-20 {
    margin-left: 20px;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-10 {
    margin: 10px !important;
}

.no-pad {
    padding: 0;
}

.no-pad-imp {
    padding: 0 !important;
}

.no-pad-margin {
    margin: 0;
    padding: 0;
}

.no-top-pad-margin {
    margin-top: 0;
    padding-top: 0;
}

.no-btm {
    bottom: 0;
}

.height-20 {
    height: 20px;
}

.height-35 {
    height: 35px;
}

.height-55 {
    height: 55px;
}

.height-100 {
    height: 100%;
}

.height-auto {
    height: auto;
}

.height-auto-imp {
    height: auto !important;
}

.min-height-17 {
    min-height: 17px;
}

.minheight-18 {
    min-height: 18px;
}

.minheight-35 {
    min-height: 35px
}

.minheight-45 {
    min-height: 45px
}

.minheight-69 {
    /* for image modal, item name go 2 row will have jumping effect */
    min-height: 69px;
}

.minheight-70 {
    min-height: 70px;
}

.minheight-100 {
    min-height: 100%;
}

.minheight-250 {
    min-height: 250px;
}

.maxheight-90vh {
    max-height: 90vh;
}

.giftcard-amt-width {
    min-width: 20%;
}

@media (max-width: 500px) {
    .giftcard-amt-width {
        width: 100%;
    }

    .giftcard-amt-extra-pad-top {
        padding-top: 10px;
    }
}

.width-10 {
    width: 10%;
}

.width-20 {
    width: 20%;
}

.width-30 {
    width: 30%;
}

.width-50 {
    width: 50%;
}

.width-70 {
    width: 70%;
}

.width-100 {
    width: 100%;
}

.width-100-important {
    width: 100% !important;
}

.width-100px {
    width: 100px;
}

.width-110px {
    width: 110px;
}

.width-150px {
    width: 150px;
}

.maxwidth-50 {
    max-width: 50px;
}

.maxwidth-72 {
    max-width: 72px;
}

.maxwidth-90vw {
    max-width: 90vw;
}

.maxwidth-200 {
    max-width: 200px;
}

.minwidth-150 {
    min-width: 150px;
}

.minwidth-200 {
    min-width: 200px;
}

.minwidth-200-imp {
    min-width: 200px !important;
}

.minwidth-250 {
    min-width: 250px;
}

.width-height-92 {
    width: 92px;
    height: 92px;
}

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

.reminder-msg {
    color: #FF3F26;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 7px;
}

.questionnaire-receipt-response {
    color: grey;
    font-size: 14px;
}

.disp-flex-width-auto {
    display: flex;
    width: auto;
}

.disp-inline {
    display: inline;
}

.disp-inlineblock {
    display: inline-block;
}

.disp-inlineblock-important {
    display: inline-block !important;
}

.disp-block {
    display: block;
}

.disp-none {
    display: none;
}

.disp-none-important {
    display: none !important;
}

.disp-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.disp-flex-imp {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
}

.flex-no-wrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.justify-end {
    justify-content: end;
}

.inline-max-content-imp {
    inline-size: max-content !important;
}

.no-border-top {
    border-top: none !important;
}

.no-border-btm {
    border-bottom: none !important;
}

.fa-shopping-cart-size {
    font-size: 2.4rem;
    height: 3.29rem;
    width: 2.75rem;
}

.fa-shopping-basket-size {
    font-size: 1.9rem;
    width: 45px;
    height: 2.9rem;
}

.fa-info-circle-size {
    font-size: 2.3rem;
    height: 3.1rem;
    width: 2.859rem;
}

.fa-search-icon {
    position: absolute;
    left: 5px;
    top: 2px;
    padding: 11px;
    cursor: pointer;
}

.fa-times-span {
    display: none;
    position: absolute;
    right: 5px;
    top: 2px;
    padding: 11px;
    cursor: pointer;
}

.fa-width {
    width: 15px;
}

.dropdown-menu-ul {
    padding: 0;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 300px;
}

.search-result-null-style1 {
    display: none;
    position: sticky;
    top: 90px;
    margin: 0;
    padding: 30px 0 0;
}

.search-result-null-style2 {
    display: none;
    position: sticky;
    top: 120px;
    margin: 0;
    padding: 0;
    align-content: center;
}

.search-result-null-h5 {
    font-weight: 450;
    text-align: center;
    font-size: 1.25rem;
}

@media (max-width: 500px) {
    .search-result-null-h5 {
        font-size: 1rem;
    }
}

.sign-up-pw-error-text {
    color: grey;
    font-size: 12px;
    margin: 0;
}

.promo-close-btn-style {
    z-index: 999;
    position: absolute;
    right: 10px;
    top: 10px;
}

.fa-chevron-left-style {
    transform: translate(-60%, 40%);
    position: absolute;
}

.fa-chevron-right-style {
    transform: translate(-40%, 40%);
    position: absolute;
}

.font-07 {
    font-size: 0.7rem;
}

.font-08 {
    font-size: 0.8rem;
}

.font-085 {
    font-size: 0.85rem;
}

.font-09 {
    font-size: 0.9rem;
}

.font-09-imp {
    font-size: 0.9rem !important;
}

.font-12 {
    font-size: 12px;
}

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

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

.font-16 {
    font-size: 16px;
}

.font-16-imp {
    font-size: 16px !important;
}

.font-rem-125 {
    font-size: 1.25rem !important;
}

.font-rem-110 {
    font-size: 1.1rem;
}

.font-rem-200 {
    font-size: 2rem;
}

.wrap-breakword {
    word-wrap: break-word;
}

.wrap-breakall {
    word-break: break-all
}

.map-style {
    min-height: 250px;
    min-width: 200px;
}

.align-self-start {
    align-self: self-start;
}

.pointer {
    cursor: pointer;
}

.default-cursor {
    cursor: default;
}

.box-pad {
    padding-bottom: 10px;
}

.image-80 {
    width: 100%;
}

.items-center {
    align-items: center;
}

.content-center {
    align-content: center;
}

.just-cont-flex-start {
    justify-content: flex-start;
}

.just-cont-flex-end {
    justify-content: flex-end;
}

.just-cont-right {
    justify-content: right;
}

.vert-align-middle {
    vertical-align: middle;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-hidden {
    overflow: hidden;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/*cart number */
.cart_count {
    font-family: "Helvetica Neue";
    font-size: 16px;
    background: #ff0000;
    color: #fff;
    padding: 1px 5px; /* up right down left */
    vertical-align: top;
    margin-left: -18px;
    cursor: pointer;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    position: absolute !important;
}

/*cart number */
.cart-empty-text {
    min-height: 100px;
    height: calc(100% - .5rem);
    /* height: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapse-header:hover {
    /* default */
    background-color: rgba(108, 117, 125, 0.4);
}

@keyframes hover-div-mobile {
    0%, 100% {
        background-color: #f5f5f5;
    }
}

.hover-div.active:not(.questionnaire_row) {
    background-color: white;
    animation: hover-div-mobile 150ms;
    -webkit-animation: hover-div-mobile 150ms;
}

/*check box color*/
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #FF6550 !important;
    border-color: #E21405;
    outline: none; /* make after clicking focus will be gone */
    box-shadow: none;
}

.custom-control-input {
    width: 0;
}

/*check box color*/

.btn:focus {
    outline: none; /* make after clicking focus will be gone */
    box-shadow: none;
}

.info-border {
    padding-bottom: 0;
    border-bottom: 1px solid #e0dede;
}

.spinner-body {
    min-height: 150px;
}

.form-control::-webkit-input-placeholder {
    color: #aaa;
    font-weight: 100;
}

.text {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 300;
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}

.no-ellipsis-text {
    /*margin-bottom: 15px;*/
    font-size: 14px;
    font-weight: 300;
    line-height: 17px;
}


/*collapse*/
.card-body {
    padding: 0;
}

.card {
    border: none;
}

.collapse-box {
    cursor: pointer;
    padding: 15px 0;
    /* border: 1px none rgba(0, 0, 0, .125); */
    /* border-top-style: solid; */
    /* padding-top: 5px; */
    /* padding-bottom: 5px; */
}

.collapse-box:not(.collapse-top-border-color):hover {
    /*i only want the hover effect when its collapsed. when expanded, it's not clickable, dont give hover effect*/
    /*when expanded, it will have an extra collapse-top-border-color class applied to it*/
    background-color: #f5f5f5;
}

@media (hover: none) {
    .collapse-box:hover {
        background-color: transparent;
    }
}

.collapse-pencil-box {
    /*margin-top: 2px;*/
    /*padding: 15px;*/
    /*Oct 2023 changes, now side padding is 10px, no longer 5px.*/
    padding: 10px;
    margin-top: 5px;
}

.mt-collapse {
    font-size: 1.1rem;
    color: #444;
}

.collapse-preview-box {
    display: block;
    margin: 0;
    padding-bottom: 5px;
}

.no-transition {
    -webkit-transition: height 0.01s !important;
    -moz-transition: height 0.01s !important;
    -ms-transition: height 0.01s !important;
    -o-transition: height 0.01s !important;
    transition: height 0.01s !important;
}

.collapse-top-margin {
    margin-top: 10px;
}

.collapse-btm-margin {
    margin-bottom: 7px;
}

.collapse-arrow-style {
    font-weight: bold;
    background-color: grey;
    color: white;
    min-width: 30px;
    font-size: 18px;
    border-radius: 25px;
    /* border-radius: 0.25rem; */
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapse-arrow-style.fa-chevron-up {
    /*chevron up that time, need 1px more*/
    padding-bottom: 1px;
}

.collapse-header {
    cursor: pointer;
}

/*end collapse*/

.operating_hours_table td {
    vertical-align: top;
}

.modifiers_hr {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.modifier_span {
    border-radius: 5px;
    position: absolute;
    right: 0;
    bottom: 2px;
    font-size: 14px;
}

.pre-order-date-list {
    text-align: left;
    display: block;
    /*overflow-x: scroll;*/
    /*overflow-y: hidden;*/
    white-space: nowrap !important;
    padding-bottom: 10px;
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

.order-date {
    width: 70px;
    margin-right: 6px;
}

.pre-order-datetime-preview {
    text-align: right;
    display: block;
}

.pre-order-btn {
    padding: 2px 0 5px 0;
    display: inline;
    font-size: 0.8rem;
}

/*total width of each box is 47, + 14px then just nice*/
.dine-in-nav-right {
    width: calc(100% - 108px);
}

.dine-in-nav-right-small {
    width: calc(100% - 242px);
}

.img-modal {
    max-width: 562px !important;
}

.scaling-img {
    width: 100%;
    height: auto;
    max-height: 542px !important;
    max-width: 542px !important;
}

@media (min-width: 768px) {
    .scaling-img {
        min-height: 542px !important;
        min-width: 542px !important;
    }

    .md-overflow-visible {
        overflow: visible !important;
    }

    .md-margin-btm-25 {
        margin-bottom: 25px !important;
    }

    .mt-leftorcenter {
        text-align: center;
    }

    .tnc_float {
        float: right;
    }

    .tnc_seperation_line {
        display: none;
    }

    .footer-style {
        /*below this width, footer will become text align center and it becomes 2 lines. no need padding*/
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .collapse-arrow-style {
        margin-top: 2px;
    }
}

.item-box-img {
    min-height: 122px;
    max-height: 122px;
    min-width: 122px;
    max-width: 122px;
}

.item-box-img-div {
    height: 100%;
    left: 130px;
    width: calc(100% - 130px) !important;
}

.item-box-no-img-div {
    min-height: 132px;
    max-height: 132px;
}

.big-item-box-img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.item-box-img-style {
    z-index: 10;
    pointer-events: all;
    max-width: 105px;
}

.mod-box-img-style {
    z-index: 10;
    pointer-events: all;
    width: 60px;
    padding: 5px 5px 0 0;
    height: 70px;
}

.mod-box-img {
    width: 60px;
}

.mod-box-img-div {
    height: 100%;
    left: 60px;
    width: calc(100% - 60px) !important;
}

@media (max-width: 550px) {
    /* under 575px, or col- */
    .item-box-img {
        min-height: 102px;
        max-height: 102px;
        min-width: 102px;
        max-width: 102px;
    }

    .item-box-img-div {
        height: 100%;
        left: 110px;
        width: calc(100% - 110px) !important;
    }

    .item-box-no-img-div {
        min-height: 110px;
        max-height: 110px;
    }

    .text {
        -webkit-line-clamp: 2;
    }

    .swal-modal {
        width: calc(100% - 60px);
    }
}

.cart-trash-div {
    width: fit-content;
    cursor: pointer;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    top: 8px;
}

.cart-trash-btn {
    padding: 4px 4px 4px 0;
    border: none;
    display: contents;
}

.cart-trash-btn:hover {
    opacity: 0.7 !important;
}

.cart-clear-font {
    padding-top: 1px;
    /* font-size: 0.75rem; */
}

.cart-clear-font-account {
    font-size: 0.85rem;
}

.cart-clear-contact-div {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}

.cart-clear-address-div {
    width: fit-content;
    cursor: pointer;
}

.cart-use-current-location-div {
    width: fit-content;
    cursor: pointer;
}

.tool {
    width: 47px;
    height: 47px;
}

.tool-no-width {
    height: 47px;
}

.tooltip-inner {
    background: #6c757d !important;
}

.tooltip .arrow:before {
    border-bottom-color: #6c757d !important;
    border-top-color: #6c757d !important;
}

.hover-opacity:hover {
    opacity: 0.7 !important;
}

.hover-div-bordered:hover .image-hover-effect {
    filter: brightness(0.95);
}

.search_field:focus {
    box-shadow: none !important;
    border-color: #DDD;
}

.scrollbar::-webkit-scrollbar {
    display: none;
}

.scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.paper-menu-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: -13px;
}

.paper-menu-container {
    width: 50%;
    min-height: 50px;
    background-color: #fff;
    -webkit-transition: background-color .4s ease-out;
    transition: background-color .4s ease-out;
    cursor: pointer;
}

.paper-menu {
    margin-left: 15px;
    margin-right: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 5px;
}

@media (min-width: 801px) {
    .paper-menu {
        padding: 10px 0;
    }
}

.paper-menu-info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

.link-text {
    color: #007bff;
    background-color: transparent;
    cursor: pointer;
}

.link-text:hover {
    text-decoration: underline;
}

.form-signin {
    width: 100%;
    text-align: left;
}


.floating-label-input-field {
    height: 55px;
    padding-top: 18px;
    padding-bottom: 0;
}

.floating-label {
    font-size: 1rem;
    color: #bfbfbf;
    transform: translate(0.75rem, -2.5rem);
    transition: all 0.2s ease-out;
    cursor: text;
    position: absolute;
}

.remove-active.active { /* when modal active, scrollspy still moving. this is to cancel off the scrollspy highlight */
    border-left: 1px solid rgba(0, 0, 0, .125) !important;
    background-color: white !important;
    font-weight: normal !important;
}

/*floating label css cannot merge using ",", else firefox not working*/
.floating-label-input-field:focus + .floating-label {
    color: #b3b3b3;
    font-size: 0.75rem;
    transform: translate(0.75rem, -3rem);
}

.floating-label-input-field:not(:placeholder-shown) + .floating-label {
    color: #b3b3b3;
    font-size: 0.75rem;
    transform: translate(0.75rem, -3rem);
}

.floating-label-input-field:-webkit-autofill + .floating-label {
    color: #b3b3b3;
    font-size: 0.75rem;
    transform: translate(0.75rem, -3rem);
}

.input-right-pad {
    padding: 0 5px 5px 10px;
}

.input-left-pad {
    padding: 0 10px 5px 5px;
}

.grey-input {
    background-color: #f8f9fa !important;
}

.scan-btn-input {
    width: calc(100% - 60px)
}


.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
    background-color: #f6f6f6;
}

.dropdown-item {
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
}

.dropdown-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-select-none {
    /*below css is to prevent auto highlight on fast double click*/
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    /* when touch-action: manipulation; is applied to an element, the browser will disable scrolling and panning for that element when the user performs a touch action on it */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    gesture-zoom: none;
}

.left-right-arrow {
    position: absolute;
    color: white;
    font-size: 30px !important;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgb(190, 190, 190);
    top: 48%;
}

.left-arrow-position {
    left: -100px;
}

.right-arrow-position {
    right: -100px;
}

.left-right-arrow:hover {
    box-shadow: 0 0 5px rgba(50, 50, 50, 0.75);
}

.reverse-column-flex {
    flex-direction: column-reverse;
}

.dropdown-menu-btn-div-default {
    font-size: 2.2rem;
    width: 46px;
    height: 48px;
    max-width: 46px;
    padding: 0;
}

.dropdown-menu-btn-div {
    font-size: 1.0rem;
    height: 34px;
    /* width: 180px; */
    width: auto;
    min-width: 46px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu-btn-div-small-default {
    font-size: 2.2rem;
    width: 46px;
    height: 48px;
}

.dropdown-menu-btn-div-small {
    font-size: 1.4rem;
    width: 46px;
    height: 39px;
}

.btn-outline-secondary:focus {
    box-shadow: none !important;
}

.promotion-img-style {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.discount-button-style {
    font-weight: bold;
    bottom: 5px;
    font-size: 14px;
    pointer-events: none;
}

.img-max-width-height {
    width: 66px;
    height: 66px;
}

.error-message-style {
    display: block;
    content: "";
    margin-top: 16px;
}

.order-mode-2-style {
    font-size: 1.0rem;
}

.order-mode-1-style {
    font-size: 0.825rem;
    padding: 10px 6px 4px 3px;
}

.category-product-box-margin {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    /* margin-bottom: 5px; */
    /* margin-right: 3px; */
}

.item-list-style {
    margin-left: 3px;
    margin-right: 3px;
}

.category-header-style {
    margin-left: 3px;
    margin-right: 1px;
}

.category-header-text-style {
    padding-left: 10px;
    margin-top: -1px;
    margin-bottom: 0;
}

.item-box-button-style {
    cursor: pointer;
    right: 4px;
    bottom: 5px;
    position: absolute;
    padding: 0 5px;
    font-size: 14px;
    opacity: 1;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 8px !important;
}

.image-box-style {
    position: relative;
    pointer-events: all;
    cursor: pointer;
}

.big-item-box-product-style {
    display: grid;
    grid-template-rows: 40px;
}

.item-name-style {
    -webkit-line-clamp: 4 !important;
}

.item-availability-style {
    bottom: 2px;
    right: 5px;
    padding: 0 5px;
    font-size: 14px;
    margin-bottom: 2px;
}

.item-paper-availability-style {
    padding: 0 5px;
    font-size: 14px;
    margin-bottom: 0;
}

.item-paper-oos-style {
    padding: 0 5px;
    font-size: 14px;
    margin-bottom: 2px;
}

.item-popup-description-style {
    font-size: 14px;
    font-weight: 300;
    line-height: 15px;
}

.modifier-optional-flag {
    font-weight: bold;
    bottom: 5px;
    padding: 2px 5px 2px 5px;
    font-size: 14px;
    pointer-events: none;
}

.modifier-header-style {
    min-height: 32px;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* padding-top: 5px; */
.modifier-header-text-style {
    padding-top: 2px;
    display: inline-block;
    font-size: 1.3rem;
}

.remarks-header {
    font-size: 1.3rem;
}

/*small screen plus button is different size*/
.disabled-mod-qty-style {
    display: block;
    height: 30px;
    width: 32.58px;
}

.disabled-mod-qty-btn-style {
    /* padding: 3px 7px; */
    padding: 0 !important;
    height: 30px;
    /* width: 32.58px; */
    width: 30px;
}

.kiosk-mod-qtt-btn {
    height: 35px !important;
    width: 35px !important;
}

.disabled-mod-qty-text-style {
    width: 40px;
    max-width: 40px;
    max-height: 30px;
    padding-top: 4px;
    padding-left: 6px;
    padding-right: 6px;
    /* border-color: transparent; */
    background: transparent;
    border: none !important;
}

.row-top-border {
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.category-ul-left-style {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1001;
    padding: 8px 3px 3px 0;
    cursor: pointer;
}

.category-ul-right-style {
    display: none;
    position: absolute;
    right: 2px;
    z-index: 1001;
    padding: 8px 7px 3px 5px;
    cursor: pointer;
}

.category-top-no-border {
    border-radius: 0 !important;
}

/*google map*/ /*i prevent google from adding styles, so I add myself*/
.gm-control-active > img {
    box-sizing: content-box;
    display: none;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.gm-control-active > img:nth-child(1) {
    display: block
}

.gm-control-active:hover > img:nth-child(1), .gm-control-active:active > img:nth-child(1) {
    display: none
}

.gm-control-active:hover > img:nth-child(2), .gm-control-active:active > img:nth-child(3) {
    display: block
}

.gm-ui-hover-effect {
    opacity: .6
}

.gm-ui-hover-effect:hover {
    opacity: 1
}

@media print {
    .gm-style .gmnoprint, .gmnoprint {
        display: none
    }
}

@media screen {
    .gm-style .gmnoscreen, .gmnoscreen {
        display: none
    }
}

.gm-style img {
    max-width: none;
}

.gm-style {
    font: 400 11px Roboto, Arial, sans-serif;
    text-decoration: none;
}

.gm-style-moc {
    background-color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    text-align: center;
    transition: opacity ease-in-out
}

.gm-style-mot {
    color: white;
    font-family: Roboto, Arial, sans-serif;
    font-size: 22px;
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

/*google map*/

.grecaptcha-badge {
    visibility: hidden;
}

.info-receipt-height {
    min-height: 140px;
}

.transaction-listing-height {
    min-height: 280px;
}

.pad-right-10 {
    padding-right: 9px !important;
}

.signin-box {
    max-width: 350px;
    padding: 9px 19px 19px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.item_count_text_class {
    color: #FF3F26;
}

.big_img-thumbnail {
    /* padding: .25rem; */
    background-color: #fff;
    border-width: 0 0 1px 0;
    border-color: rgba(0, 0, 0, .125);
    border-style: solid;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
}

.img-thumbnail {
    padding: 0;
    background-color: #fff;
    border-width: 1px;
    border-color: rgba(0, 0, 0, .125);
    border-style: solid;
    border-radius: 0.25rem;
    max-width: 100%;
    max-height: 100%;
}

#navbar_top_css {
    /* min-height: 100vh; */
}

.badge-style-login {
    right: 198px !important;
}

#dropdown_menu_btn {
    text-transform: capitalize;
}

/*phone style css*/
@media (max-width: 992px) {
    .nav-right-small {
        width: calc(100% - 290px);
    }

    .banner-style {
        text-align: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        padding-left: 5px;
        padding-right: 10px;
    }

    .menu-content-style {
        position: relative;
    }

    .navbar-height {
        height: 55px;
    }

    .navbar-logo-style {
        max-width: 46px;
        max-height: 46px;
        cursor: pointer;
    }

    .navbar-logo-width-offset {
        width: calc(100% - 65px);
    }
}

.page-full-view-height {
    min-height: calc(100vh - 114px); /* 44 footer, 50 nav bar, 60 back button*/
}

/*browser style css*/
@media (min-width: 992px) {
    .page-full-view-height {
        min-height: calc(100vh - 110px); /* 44 footer, 70 nav bar, 60 back button*/
    }

    .banner-style {
        text-align: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        padding-left: 5px;
        padding-right: 10px;
    }

    .menu-content-style {
        position: relative;
    }

    .lg-height-100 {
        height: 100%;
    }

    .lg-height-50 {
        height: 50%;
    }

    .lg-btn-div {
        font-size: 0.85rem;
        height: 34px;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-btn-pads {
        padding: 0 15px;
    }

    .lg-btn-div-2-btn {
        width: 140px;
    }

    .lg-btn-div-3-btn {
        width: 120px;
    }

    .lg-btn-div-4-btn {
        width: 110px;
    }

    .lg-btn-div-5-btn {
        width: 100px !important;
    }

    .btn-lg-override {
        margin: 0 !important;
        border-color: transparent !important;
    }

    #lg_login_signup_span {
        padding-left: 5px;
        padding-right: 5px;
    }

    /*icon button is 50, text button is 130*/
    .nav-right-small {
        width: 50%;
    }

    .nav-right-small-4-btn {
        width: 45%;
    }

    .nav-right-small-5-btn {
        width: 40%;
    }

    .lg-badge {
        right: 12px !important;
        top: 5px !important;
        font-size: 14px;
    }

    .lg_font_size {
        font-size: 1.25em;
    }

    #fa-cart-lg {
        font-size: 2.1rem;
        height: 3rem;
        width: 2.75rem;
    }

    .account-nav-right {
        right: 156px !important;
    }

    .lg-margin-top-6 {
        margin-top: 6px;
    }

    #pre-order-text-big {
        margin-bottom: 10px;
    }

    .lg-store-closed-btn {
        margin-bottom: 9px;
    }

    #dropdown_menu_btn_div {
        width: auto !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    #login_lg_div {
        width: 125px;
    }

    .navbar-height {
        height: 75px;
    }

    .navbar-logo-style {
        max-width: 66px;
        max-height: 66px;
        cursor: pointer;
    }

    .navbar-logo-width-offset {
        width: calc(100% - 85px);
    }

    .info_size_big {
        min-width: 650px !important;
    }
}

.category-li-vertical-style {
    width: 100%;
}

.category-li-horizontal-style {
    height: 100%;
    white-space: nowrap;
}

.category-a-vertical-style {
    color: inherit;
    text-decoration: none;
}

.category-a-horizontal-style {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
    border-radius: 0 !important;
    border: hidden !important;
    padding-left: 20px;
    padding-right: 20px;
}

.category-ul-horizontal-style {
    flex-wrap: nowrap;
    overflow-x: scroll;
    height: 100%;
}

.footer-filter-style {
    position: absolute;
    bottom: 0;
}

.footer-style {
    display: flex;
    flex-flow: wrap;
}

.cat_img_style {
    padding: 3px 3px 0 3px;
    max-height: 350px; /* max width/4 */
    max-width: 1400px; /* the max width of content */
    height: 25vw;
    width: 100%;
}

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

.cat_img_center {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.promo_banner_center {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#promo_modal {
    text-align: center;
    padding: 0 !important;
}

#promo_modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.promo-modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    align-content: center;
    max-width: 95vw !important;
    max-height: 95vh;
    margin-left: auto;
    margin-right: auto;
}

.visibility-hidden {
    visibility: hidden;
}

#post_order_remove_unavailable_item_btn {
    margin-right: 10px;
}

.modifier_image_text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px; /* the item name is being cut off at the bottom */
}

.font-size-initial {
    font-size: initial !important;
}

.modal-backdrop + .modal-backdrop {
    /*when you open 2 modal, the darkness increases. this is to reset it*/
    opacity: 0;
}

#history_body, #history_info_body {
    min-height: 300px;
}

#transaction_div > #transaction_listing_wrapper > .row > .col-sm-12 {
    padding: 0 !important;
}

#transaction_listing_filter > label, #credit_list_filter > label {
    margin-top: 0.5rem;
}

.skip_plus_minus_left_pad {
    padding-left: calc(99% - 4px);
}

#history_search_btn {
    height: 55px;
    display: block;
    width: 100%
}

.text-absolute-bottom {
    position: absolute;
    bottom: -5px;
    right: 0;
}

.pad-topbtm-10 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


@media (min-width: 768px) and (max-width: 818px) {
    .modal-xl {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

.plus-minus-max-width {
    width: 38px;
    max-width: 38px;
}

/*below css classes is for cart*/
.cart-plus-minus-max-width {
    width: 30px;
    height: 30px;
    /* padding: 5px 0 0 0; */
    padding: 0;
}

.cart-edit-btn-max-width {
    width: 30px;
    height: 30px;
    padding: 2px 0 0 2px;
}

.cart-qty-text-max-width {
    width: 35px;
}

.cart-qty-text-height {
    height: 100%;
}

.cart-qty-bold {
    font-weight: 550;
    opacity: 1;
}

.plus-minus-total-width {
    max-width: 122px;
    min-width: 122px;
}

.cart-past-order-img-class {
    float: left;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-right: 8px;
    width: 36px;
    height: 36px;
}

.cart-item-img-class {
    float: left;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    /* outline doesn't work with radius in safari. so use box-shadow instead. */
    /* outline: 1px solid rgba(0, 0, 0, .2); */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    background-color: #fff;
}

.cart-mod-img-class {
    float: right; /* its smaller than parent, align it to the right */
    width: 36px;
    height: 36px;
    border-radius: 5px;
    /* outline doesn't work with radius in safari. so use box-shadow instead. */
    /* outline: 1px solid rgba(0, 0, 0, .2); */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    background-color: #fff;
}

.img-item-box {
    min-width: 72px;
    margin-right: 0.5rem;
}

.cart_border_class {
    border: 1px solid rgba(0, 0, 0, .2);
}

.no-border-imp {
    border: none !important;
}

.cart-top-border-radius-class {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: 10px;
}

.cart-bottom-border-radius-class {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 15px;
}

.cart-child-border-class {
    border-top: none;
    border-bottom: none;
}

.item-name-bold {
    font-weight: 500;
}

.modifier-name-bold {
    font-weight: 300;
}

.receipt-item-max-width {
    /*38px x 3 + 10padding right*/
    max-width: calc(100% - 122px);
    min-width: calc(100% - 122px);
}

.receipt-qty-max-width {
    max-width: 122px;
    min-width: 122px;
}

/*end of css classes for cart*/

#store_message {
    overflow: hidden;
    position: sticky;
    padding-bottom: 5px;
    background-color: #4f4a4a;
    color: white;
    /*padding-left: 5px;*/
    min-height: 42px;
}

#store_message.temporary_closure_message {
    background-color: rgb(255, 200, 67);
    color: black;
}

#hide_store_message_btn {
    position: absolute;
    top: 9px;
    right: 5px;
    cursor: pointer;
    z-index: 999;
}

#store_message_exclamation {
    display: none;
    position: absolute;
    top: 9px;
    left: 5px;
    z-index: 999;
}

#store_message.temporary_closure_message > #store_message_exclamation {
    display: block;
}

#store_message_div {
    text-align: center !important;
    padding-right: calc(2em + 5px);
    padding-left: calc(2em + 5px);
    padding-top: 5px;
}

#store_message_text {
    margin: 0;
    width: 100%;
    line-height: 1.3;
}

.flex-end {
    align-items: flex-end;
}

.swal-margin-padding-top-none {
    padding-top: 0;
    margin-top: 0;
}

.fb-btn {
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: inline-block;
    background: #3A5A97;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 20, .4);
    text-decoration: none;
    position: relative;
    min-height: 44px;
    border-radius: 0.45rem;
}

.fb-btn-connect:before {
    display: inline-block;
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAKzGlDQ1BJQ0MgUHJvZmlsZQAASA2tlndUU8kXx+e99EZLqFJCb9JbAOk19I5gIySBhBJjIIjYEFlcgbUgIgKKIEtVcC2ArAURxcKi2FBBF2RRUNfFgg2V3wOWuOd3fvvfb96Zmc+7c+fOnTkz53wBIPeyhMIUWAaAVEG6KMzHnb40JpaOewwgQADSQBVQWew0oVtISAD41/L+HuKNlNsms7H+1e1/D8hyuGlsAKAQZDiek8ZORfjkbGULRekAoHiIXXttunCWCxGmiZAEET40y4nzjPgDWvw8X5nziQjzQHyGAMCTWSxRIgCkccROz2AnInHIeITNBRy+AGEGws5sHouDcCbCi1NTV89yDcIG8f+Ik/gPZrHiJTFZrEQJz+8FmYks7MlPE6aw1s39/D+b1BQxcl5zRRNpyTyRbxjSKyFnVpG82l/Cgvig4AU7H9nRAvPEvpELzE7zQM5yfi6H5em/wOLkSLcFZokQ+tuHn86MWGDR6jBJfEFK0Oz9mMuBx2VKmJvmFb5gT+B7Mxc4ixcRvcAZ/KigBU5LDpfkkMXzkNhF4jBJzgkib8keU9OQmX+vy2Z9XyudF+G7YOdwPb0WmCuIlOQjTHeXxBGmzN3vufy5KT4Se1pGuGRuuihCYk9i+c3e1zl/YXqI5EyAJ/ACAchHB5bAGpgDBogG3iAknZuJ3DsAPFYL14n4ibx0uhvyUrh0poBtuphuaW5hDcDsu5v1AeDt/bn3BCngv9uqKgAIsEIGB7/bzHYAUO2EXP0d3226RwCQ3QXA2W62WJQxFw6gZzsMICLvmQaUgTrQBgbABMnQFjgCVyRjPxAMIkAMWAnYgAdSgQisBRvAFpAHCsAusBeUgUpwGNSDo+A4aANnwAVwGVwHN8FdMAiGwRh4ASbBezANQRAOokBUSBnSgHQhY8gSYkDOkBcUAIVBMVAclAgJIDG0AdoKFUBFUBlUBTVAv0CnoQvQVagfegCNQBPQG+gzjILJMA1Wg/VgM5gBu8H+cAS8Ak6E18BZcC68Ay6Fq+EjcCt8Ab4O34WH4RfwFAqgSCgFlCbKBMVAeaCCUbGoBJQItQmVjypBVaOaUR2oHtRt1DDqJeoTGoumouloE7Qj2hcdiWaj16A3oQvRZeh6dCu6G30bPYKeRH/DUDCqGGOMA4aJWYpJxKzF5GFKMLWYU5hLmLuYMcx7LBargNXH2mF9sTHYJOx6bCH2ALYF24ntx45ip3A4nDLOGOeEC8axcOm4PNx+3BHcedwt3BjuI56E18Bb4r3xsXgBPgdfgm/En8Pfwj/DTxNkCLoEB0IwgUNYR9hJqCF0EG4QxgjTRFmiPtGJGEFMIm4hlhKbiZeIQ8S3JBJJi2RPCiXxSdmkUtIx0hXSCOkTWY5sRPYgLyeLyTvIdeRO8gPyWwqFokdxpcRS0ik7KA2Ui5THlI9SVClTKaYUR2qzVLlUq9QtqVfSBGldaTfpldJZ0iXSJ6RvSL+UIcjoyXjIsGQ2yZTLnJYZkJmSpcpayAbLpsoWyjbKXpUdl8PJ6cl5yXHkcuUOy12UG6WiqNpUDyqbupVaQ71EHaNhafo0Ji2JVkA7SuujTcrLyVvLR8lnypfLn5UfVkAp6CkwFVIUdiocV7in8FlRTdFNkau4XbFZ8ZbiB6VFSq5KXKV8pRalu0qflenKXsrJyruV25QfqaBVjFRCVdaqHFS5pPJyEW2R4yL2ovxFxxc9VIVVjVTDVNerHlbtVZ1SU1fzUROq7Ve7qPZSXUHdVT1JvVj9nPqEBlXDWYOvUaxxXuM5XZ7uRk+hl9K76ZOaqpq+mmLNKs0+zWktfa1IrRytFq1H2kRthnaCdrF2l/akjoZOoM4GnSadh7oEXYYuT3efbo/uBz19vWi9bXpteuP6SvpM/Sz9Jv0hA4qBi8Eag2qDO4ZYQ4ZhsuEBw5tGsJGNEc+o3OiGMWxsa8w3PmDcvxiz2H6xYHH14gETsombSYZJk8mIqYJpgGmOaZvpKzMds1iz3WY9Zt/MbcxTzGvMBy3kLPwsciw6LN5YGlmyLcst71hRrLytNlu1W722NrbmWh+0vm9DtQm02WbTZfPV1s5WZNtsO2GnYxdnV2E3wKAxQhiFjCv2GHt3+832Z+w/Odg6pDscd/jL0cQx2bHRcXyJ/hLukpolo05aTiynKqdhZ7pznPMh52EXTReWS7XLE1dtV45rreszN0O3JLcjbq/czd1F7qfcP3g4eGz06PREefp45nv2ecl5RXqVeT321vJO9G7ynvSx8Vnv0+mL8fX33e07wFRjspkNzEk/O7+Nft3+ZP9w/zL/JwFGAaKAjkA40C9wT+BQkG6QIKgtGAQzg/cEPwrRD1kT8msoNjQktDz0aZhF2IawnnBq+KrwxvD3Ee4ROyMGIw0ixZFdUdJRy6Maoj5Ee0YXRQ8vNVu6cen1GJUYfkx7LC42KrY2dmqZ17K9y8aW2yzPW35vhf6KzBVXV6qsTFl5dpX0KtaqE3GYuOi4xrgvrGBWNWsqnhlfET/J9mDvY7/guHKKORNcJ24R91mCU0JRwniiU+KexAmeC6+E95LvwS/jv07yTapM+pAcnFyXPJMSndKSik+NSz0tkBMkC7pXq6/OXN0vNBbmCYfXOKzZu2ZS5C+qTYPSVqS1p9MQgdMrNhD/IB7JcM4oz/i4NmrtiUzZTEFm7zqjddvXPcvyzvp5PXo9e33XBs0NWzaMbHTbWLUJ2hS/qWuz9ubczWPZPtn1W4hbkrf8lmOeU5Tzbmv01o5ctdzs3NEffH5oypPKE+UNbHPcVvkj+kf+j33brbbv3/4tn5N/rcC8oKTgSyG78NpPFj+V/jSzI2FH307bnQd3YXcJdt3b7bK7vki2KKtodE/gntZienF+8bu9q/ZeLbEuqdxH3CfeN1waUNq+X2f/rv1fynhld8vdy1sqVCu2V3w4wDlw66DrweZKtcqCys+H+IfuV/lUtVbrVZccxh7OOPy0Jqqm52fGzw21KrUFtV/rBHXD9WH13Q12DQ2Nqo07m+AmcdPEkeVHbh71PNrebNJc1aLQUnAMHBMfe/5L3C/3jvsf7zrBONF8UvdkxSnqqfxWqHVd62Qbr224Paa9/7Tf6a4Ox45Tv5r+WndG80z5WfmzO88Rz+WemzmfdX6qU9j58kLihdGuVV2DF5devNMd2t13yf/Slcvely/2uPWcv+J05cxVh6unrzGutV23vd7aa9N76jeb30712fa13rC70X7T/mZH/5L+c7dcbl247Xn78h3mnet3g+7234u8d39g+cDwfc798QcpD14/zHg4PZg9hBnKfyTzqOSx6uPq3w1/bxm2HT474jnS+yT8yeAoe/TFH2l/fBnLfUp5WvJM41nDuOX4mQnviZvPlz0feyF8Mf0y70/ZPyteGbw6+ZfrX72TSyfHXotez7wpfKv8tu6d9buuqZCpx+9T309/yP+o/LH+E+NTz+foz8+m137BfSn9avi145v/t6GZ1JkZIUvEmtMCKKSFExIAeFMHACUGAOpNAIhS87p4zgOa1/IIQ3/XWfN/8bx2nh1ANAQ4kg1AaCciqZHfk0ivh/Qy2QCEuAIQ4QpgKytJRUZmS1qCleUcQKQ2RJqUzMy8RfQgzhCArwMzM9NtMzNfaxH9/hCAzvfzenzWWwbRNoeMrDw9w7sVjbPn5v+j+Q+WawDovrJFEQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAdVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4xPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPjI8L3RpZmY6UGhvdG9tZXRyaWNJbnRlcnByZXRhdGlvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjl0tmoAAAEMSURBVDgRY8hu3Pj/xevP/ykFIDNAZjE+ffnxv5QYHwM1wLNXnxgYQS4jx7C/f/8xMDMzYWhlwRDBI/DyzReGWatOMRw5+5Dh6/dfDOxsLAyiQtwMK/oi4LqINvDFm88MqTXrGd5/+g7X/PPXH4YnLz7C+SAG0QbOXnUaxTBhAS4GYUEuBl4udvIMPHnpMVxjY64Lg7OlMpyPzMAMVWRZJPaHTz/gPFyGgRQQbSDcNAIMvMnGJmomAe0MDAJ8HAxbZsTD1VHsQgVpQbhhIAbFBirKCKEYiNfLyCqRvX9kWTqyFAqbYheimAbkjBqIHiKk85lAhSK1AMgsprYZBxhevf1CsZnPX39mAJkFAN8bnc6Q9Jq4AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: 0 2px;
    text-indent: -9999px;
    text-align: center;
    width: 29px;
    margin: -8px 7px -7px -30px;
    content: "f";
}

.fb-btn:hover {
    /*overwrite default button hover style, to be same as log in button*/
    opacity: 0.7;
    background: #3A5A97;
    color: #fff;
}


/* Chrome, Safari, Edge, Opera */
#open_weight_input input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.font-1-rem {
    font-size: 1rem;
}

.dis_table {
    display: table;
}

.subcat-font-color {
    /*grey*/
    /* color: #737373 !important; */
    text-shadow: none !important;
    font-weight: 300;
    opacity: 0.5 !important;
}
.subcat-font-color.active {
    opacity: 1 !important;
}

#table_services_reply_div {
    min-height: 140px;
}

.buttons {
    /*width: 100%;*/
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
}

.services_btn {
    width: 100%;
    margin-top: 25px;
    font-size: large !important;
}

.font-weight-400 {
    font-weight: 400;
}

.cutlery_font {
    margin-top: -2px;
    margin-bottom: 0;
}

#cutlery_row {
    /*padding-top: 6px;*/
}

/* datepicker start */
.ui-datepicker {
    width: auto;
}

.ui-datepicker table {
    width: 100%;
    margin: 0;
}

.ui-datepicker-header {
    background: #fff;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
}

.ui-datepicker-title {
    text-align: center;
    font-size: 16px;
}

.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    background-image: none;
}

.ui-datepicker .ui-datepicker-prev:before {
    display: block;
    padding: 3px 0 0 7px;
    font-family: "FontAwesome";
    content: "\f053";
}

.ui-datepicker .ui-datepicker-next:before {
    display: block;
    padding: 3px 0 0 10px;
    font-family: "FontAwesome";
    content: "\f054";
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 4px;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    padding: 0;
}

.ui-state-hover, ui-widget-content .ui-state-hover, ui-widget-header .ui-state-hover {
    background: #fff;
    color: #111;
    border: 1px solid #fff;
    border-radius: 5px;
}

.ui-datepicker th {
    background: #fff;
    color: #111;
    border: 1px solid #fff;
    border-radius: 5px;
    font-weight: 100;
    padding: 0;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.ui-datepicker-calendar .ui-state-default {
    background: #fff;
    color: #111;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 40px;
    width: 40px;
}

.ui-datepicker-calendar .ui-state-hover, .ui-datepicker-calendar .ui-state-active {
    background: #fff;
    color: #111; /*color: #27ae60;*/
    border: 1px solid #111; /*border: 1px solid #27ae60;*/
    border-radius: 5px;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #fff;
    color: #aaa;
    border: 1px solid #fff;
    border-radius: 5px;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    background: #fff;
    color: #111;
    border: 1px solid #aaa;
    border-radius: 5px;
    height: 30px;
}

.ui-datepicker select.ui-datepicker-month {
    margin-right: 2px;
}

.ui-datepicker select.ui-datepicker-year {
    margin-left: 2px;
}

/* datepicker end */

.img_overlay {
    color: white;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.8;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.img_text {
    width: 100%;
    font-size: xx-large;
}

.carousel_chevron_class {
    display: inline-block;
    border: 9px solid rgb(190, 190, 190);
    font-size: 29px;
    border-radius: 50%;
    background: rgb(190, 190, 190);
}

.carousel_chevron_class:before {
    background: rgb(190, 190, 190);
}

.fa-chevron-right.carousel_chevron_class {
    padding-left: 5px;
    margin-right: 20px;
}

.fa-chevron-left.carousel_chevron_class {
    padding-right: 5px;
    margin-left: 20px;
}

@media (max-width: 370px) {
    .img_text {
        font-size: x-large;
    }
}

.select_outlet_btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.select_outlet_hr {
    margin: 0 !important;
}

.select_outlet_div {
    cursor: pointer;
}

.select_outlet_div:hover {
    background-color: #f5f5f5;
}

.outlet_selected_tick {
    font-size: 2rem;
    color: rgb(39, 164, 90);
}

.highlight {
    background: #f5f5f5 !important;
}

.plus-minus-button {
    /* below css is used to prevent zoom when click fast fast on phone*/
    touch-action: manipulation;
}

.is_hidden {
    display: none;
}

/*big google map css*/
.gm-style .controls {
    background: none rgb(255, 255, 255);
    border: 0;
    margin: 10px;
    padding: 0;
    text-transform: none;
    appearance: none;
    position: absolute;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0 1px 4px -1px;
    overflow: hidden;
    top: 0;
    right: 0;
}

.gm-style .controls.info-fullscreen-control button {
    border: 0;
    background-color: white;
}

.gm-style .controls.map-fullscreen-control button {
    border: 0;
    background-color: white;
}

.gm-style .controls.map2-fullscreen-control button {
    border: 0;
    background-color: white;
}

.gm-style .controls button img {
    height: 18px;
    width: 18px;
    box-sizing: content-box;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.big_map_height {
    height: 85vh;
}

.min-100vh {
    min-height: 100vh;
}

.big_map_modal {
    width: 97vw;
    max-width: 97vw;
}

/*end of big google map css*/

.menu-view-class {
    align-self: center;
}

.self-align-center {
    align-self: center;
}

.menu-view-opacity {
    opacity: 0.5;
    cursor: pointer;
}

.menu-view-opacity.active {
    opacity: 1;
}

.menu-view-opacity:hover {
    opacity: 1;
}

#sm-menu-view {
    cursor: pointer;
}

#search {
    border: none;
}

.border-top {
    border-top: 1px solid #ced4da;
}

#menu-view-text {
    font-size: 1rem;
    position: absolute;
    right: 141px;
    top: 10px;
}

#sm-menu-view.fa.fa-bars {
    font-size: 31px;
    margin-top: 6.5px;
    transform: scaleY(1.2);
    padding-right: 10px;
}

#sm-menu-view.fa.fa-th-list {
    font-size: 26px;
    margin-top: 10.5px;
    transform: scale(1.02, 1.32);
    padding-right: 10px;
}

#sm-menu-view.fa.fa-th-large {
    font-size: 28px;
    margin-top: 9.5px;
    transform: scale(1.02, 1.22);
    padding-right: 10px;
}

#menu-view-paper-div {
    font-size: 1rem;
    transform: scale(1.02, 1.225);
    margin-top: 7px;
}

#menu-view-small-div {
    padding-left: 18px;
    font-size: 1rem;
    transform: scale(0.87, 1.11);
    margin-top: 8px;
}

#menu-view-big-div {
    padding-left: 15px;
    padding-right: 1px;
    font-size: 1rem;
    transform: scale(0.945, 1.115);
    margin-top: 8px;
}

#banner_img {
    border-bottom: 1px solid #dee2e6 !important;
}

/* below css exists because sorella uses their own html for item description.
    inside safari, word clamp doesn't work on whole div but individual <p> and <h> tags instead, so it ruins the word clamp format.
    no choice but to cap the height and cut off some when using safari */
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .text {
    max-height: 65px;
}

_::-webkit-full-page-media, _:future, :root #menu-view-big-div {
    margin-top: 7.5px !important;
}

_::-webkit-full-page-media, _:future, :root #sm-menu-view.fa.fa-th-list {
    margin-top: 12.5px !important;
}

_::-webkit-full-page-media, _:future, :root select {
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat right 2px center;
    -webkit-appearance: none;
}

/* Safari 10.1+ */
@media not all and (min-resolution: .001dpcm) {
    /*the second media query, @media { ... }, has been added as a fallback for devices that do not support media queries.*/
    .text {
        max-height: 65px;
    }

    #menu-view-big-div {
        margin-top: 7.5px !important;
    }

    #sm-menu-view.fa.fa-th-list {
        margin-top: 12.5px !important;
    }

    select {
        background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat right 2px center;
        -webkit-appearance: none;
    }
}

.collapse-preview-box.text {
    max-height: -webkit-fit-content;
}

.top-grey-border-class {
    /* border-top: 1px solid #b3b3b3; */
    /* border-top: 1px solid rgba(0,0,0,.1); */
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
}

.btm-grey-border-class {
    border-bottom: 1px solid #b3b3b3;
    border-radius: 0;
}

.margin-auto {
    margin: auto;
}

.margin-right-negative-2 {
    margin-right: -2px;
}

.best-seller-btn {
    color: white !important;
    background-color: #ff9419 !important;
    border-color: #e67a00 !important;
    opacity: 1 !important;
}

.valign-texttop {
    vertical-align: text-top;
}

.carousel-control-width {
    width: 40% !important;
}

.cart-history-btn-size {
    font-size: 0.9rem !important;
}

.store_info_padding {
    padding-top: 10px;
    /*padding-bottom: 10px;*/
}

.font-weight-450 {
    font-weight: 450 !important;
}

#cart_click_into_promotion_div {
    cursor: pointer;
    font-weight: 400;
}

#cart_click_into_promotion_btn {
    padding-left: 2px;
}

.cart-footer-span-style {
    display: flex;
}

.cart-footer-btn {
    padding-left: 5px;
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
    0%, 20%, 100% {
        -webkit-transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-10px);
    }
}

@-moz-keyframes bounce {
    0%, 20%, 100% {
        -moz-transform: translateY(0);
    }
    10% {
        -moz-transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 20%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

.safari-input-remove-shadow {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

/* add to store_style and css_configuration */
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ui-datepicker-year {
    cursor: pointer;
}

.ui-datepicker-month {
    cursor: pointer;
}

#birthday_display, #sign_up_birthday {
    cursor: pointer;
    background-color: #fff;
}

.line-height-1point2 {
    line-height: 1.2;
}

.line-height-1 {
    line-height: 1;
}

#qr_code_size {
    height: 200px;
    width: 200px;
}

#qr_code_text {
    margin: 0;
    text-align: center;
}

.lang-height {
    max-height: 200px;
    overflow: auto;
}

#dollar_sign {
    position: absolute;
    right: 15px;
    top: 12px;
    border-radius: 50%;
    border: 1px solid grey;
    width: 32px;
    height: 32px;
    background-color: grey;
    color: white;
    cursor: pointer;
    text-align: center;
    padding-top: 5px;
    font-size: 21px;
}

.top_up_onclick {
    min-height: 60px;
}

/* dont want the modal header to jump if changing from 1 to 2 lines */
/* 3 lines only jump */
.fixed-order-modal-height {
    min-height: 84px;
}

#top_up_receipt_modal_div {
    min-height: 500px;
}

.toast-close.fa {
    opacity: 1;
    cursor: pointer;
    position: absolute;
    right: 3px;
    /* top: 15px; */
}

.no-border-radius {
    border-radius: 0;
}

.bor-rad-0-45-r {
    border-radius: 0.45rem;
}

.big-fa-btn {
    font-size: 2em;
}

#table_pax_input {
    font-size: 30px;
    font-weight: 550;
    width: 72px;
    border-left: 0 !important;
    border-right: 0 !important;
}

#order_qty {
    border-left: 0 !important;
    border-right: 0 !important;
}

.px-46px {
    padding-top: 46px;
    padding-bottom: 46px;
}

.pt-21px {
    padding-top: 21px;
}

.pb-16px {
    padding-bottom: 16px;
}

.width-70px {
    width: 70px !important;
}

.table-pax-header-div {
    height: 36px;
    display: flex;
    align-items: center;
}

#order_details_table_pax_input {
    font-size: 20px;
    width: 50px;
    height: 44px;
    border: none;
}

#order_details_table_pax_plus_btn, #order_details_table_pax_minus_btn {
    height: 38px;
    width: 38px;
}

.oa_checkout_message {
    text-align: initial;
}

.category-img-class {
    margin-right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .125);
}

@media (max-width: 425px) {
    .cat-list-mobile-view {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .category-img-class {
        margin-right: 0;
    }
}

.kiosk-category-img-class {
    width: 100px;
    height: 100px;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .125);
}

.cat-a-padding-with-img {
    padding: 6px 10px;
    border-left: 0 !important;
}

.no-scroll {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.img-modal-favourites-bg {
    z-index: 2;
    position: absolute;
    border-radius: 50%;
    color: white;
    top: 5px;
    right: 3px;
    background-color: #808080;
    font-size: 27px;
    cursor: pointer;
    width: 45px;
    height: 45px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.fa-img-modal-style {
    transform: translate(-46%, 42%);
    position: absolute;
}

.favourited {
    background-color: white !important;
    outline: 1px solid red !important;
    color: red !important;
}

.item-favourites-class {
    z-index: 2;
    position: absolute;
    background: #808080;
    cursor: pointer;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    font-size: 14px;
    color: white;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

.item-box-favourites-bg {
    right: 3px;
    top: 5px;
}

.big-item-box-favourites-bg {
    right: 5px;
    top: 5px;
}

.paper-menu-favourites-bg {
    right: 0;
}

.fa-item-box-style {
    transition: 1s;
    transform: translate(41%, 24%);
}

.fa-big-item-box-style {
    transition: 1s;
    transform: translate(44%, 23%);
}

.fa-paper-menu-style {
    transition: 1s;
    transform: translate(-38%, 23%);
}

.item-favourites-class:hover {
    opacity: 0.8;
}

.item-favourites-class:hover > .fa-item-box-style {
    transform: scale(1.2) translate(35%, 17%);
}

.item-favourites-class:hover > .fa-big-item-box-style {
    transform: scale(1.2) translate(35%, 20%);
}

.item-favourites-class:hover > .fa-paper-menu-style {
    transform: scale(1.2) translate(-30%, 20%);
}

#remove_favourites_btn {
    display: none;
    z-index: 2;
}

#pre_order {
    display: contents;
}

#pre_order[style*='display: block'], #post_order[style*='display: block'] {
    display: contents !important;
}

div[id^="collapse_"][id$="_preview"], div[id$="_collapse_title_div"] {
    cursor: pointer;
}

.btn:disabled {
    cursor: default;
}

.toast-fa-color {
    color: #737373 !important;
}

.item-border-class {
    border: 1px solid rgba(0, 0, 0, .1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/*need do this way so that the HR can be full width*/
.item-border-class > div {
    padding: 5px 10px;
}

.item-border-class:last-of-type {
    /* last one dont need so much margin. */
    /*
       last of type is meant for the last element with "this" class.
       last-child will work, but wont apply to first child if only got 1 item-border-class in this div
       child vs of type, child means siblings (regardless got this class or not), of type means siblings with this class only.
    */
    /* margin-bottom: 10px; */
}

.cloud_hist_search_input {
    display: inline-block;
    margin-left: 0.5em;
    width: auto;
}

.item-tag-margin-top {
    margin-top: 8px; /*only when got description, i want this.*/
}

.item-tag-margin-bottom {
    margin-bottom: 5px;
}

.item-tag-class {
    color: white;
    /* margin-right: 3px; */
    margin-right: 10px;
    padding: 0 3px;
    font-size: 14px;
}

.item-tag-class:hover {
    cursor: default;
    color: white;
}

.modal-header {
    /*on phone, scrollable making the border not so visible*/
    z-index: 1;
}

.sub_cat_image_indent {
    padding-left: 20px !important;
}

.carousel-arrow-hover-effect {
    opacity: 0.5;
    z-index: 999;
}

.carousel-arrow-hover-effect:hover {
    opacity: 1;
}

.carousel-promo-banner-item-left {
    left: 20px;
}

.carousel-promo-banner-item-right {
    right: 20px;
}

.carousel-promo-banner-item-control-div {
    height: 20%;
    width: 10% !important;
    top: 42%;
}

/*start of "tick" logo css*/
/*swal library already have this class, just need to tweak alittle*/
.swal-icon--success:before {
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px
}

.swal-icon--success__line--tip {
    -webkit-animation: animateSuccessTip 1s;
    animation: animateSuccessTip 1s
}

.swal-icon--success__line--long {
    -webkit-animation: animateSuccessLong 1s;
    animation: animateSuccessLong 1s
}

.swal-icon {
    margin: 25px auto 20px auto;
    margin-top: 20px !important;
}

.swal-icon--warning__dot {
    top: 62px;
    margin-left: -3px;
}

.swal-icon--warning__body {
    height: 45px;
}

/*end of "tick" logo css*/

#profile_pic {
    cursor: pointer;
}

#profile_pic_pencil {
    cursor: pointer;
    text-decoration: underline;
    margin: 0 auto;
}

.no-border {
    border: 0;
}

.force-disable-grey {
    /* customer login email address, when disabled remains white due to text:disabled css. but this time i want it to be grey (original) */
    background-color: #e9ecef !important;
}

.half-opacity {
    opacity: 0.5;
}

.disabled-css {
    opacity: .65;
}

@keyframes horizontal-shaking {
    0%, 100% {
        transform: translateX(0)
    }
    25%, 75% {
        transform: translateX(5px)
    }
    50% {
        transform: translateX(-5px)
    }
}

.horizontal-shake {
    animation: horizontal-shaking 0.35s infinite;
}

.upsell-item-div {
    display: flex;
    flex-direction: column;
}

.upsell-item-box {
    margin-left: 10px;
    padding: 10px;
    width: 300px;
    height: 94px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    flex-shrink: 0;
    cursor: pointer;
}

.upsell-item-box:first-child {
    margin-left: 0 !important;
}

.upsell-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2; /* ori is 1.5 */
    font-size: 1rem;
    font-weight: 500;
}

.upsell-item-price {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
    line-height: 1;
}

.flex-basis-0 {
    flex-basis: 0;
}

.no-touch {
    pointer-events: none;
}

#passes-div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    order: 999;
    margin-top: 9px;
}

.gift-card-wallet-pass {
    display: flex;
    justify-content: space-evenly;
}

.login_body_height {
    /* min-height: 370px; */
    align-content: baseline;
}

.border-rad-quarter-rem {
    border-radius: 0.25rem;
}

.pl-12 {
    padding-left: 12px;
}

.order-pending-class {
    text-align: initial;
}

.h3-class {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.default_image_thumbnail {
    margin: 0;
    height: 100px;
    width: 100px;
    min-width: 100px;
    color: white;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    white-space: nowrap;
    /* background-color: rgb(127, 140, 141); */
    border: none;
    font-size: 45px;
}

@media (max-width: 500px) {
    .default_image_thumbnail {
        font-size: 40px;
    }

    .post-order-home-width {
        width: 100%;
    }
}

#post_error {
    display: flex;
}

.name-font {
    font-size: 22px;
    font-weight: 600;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

@media (min-width: 800px) {
    .account-max-width {
        max-width: 800px;
        margin-left: calc((100% - 800px) / 2);
    }
}

.bread_crumbs_css:hover {
    text-decoration: underline;
    opacity: 0.8;
    cursor: pointer;
}

.black-transparent-btn {
    opacity: 0.8;
    color: #333;
    text-decoration: underline;
}

.black-transparent-btn:hover:not(.fa-list) {
    color: #333;
    cursor: pointer;
}

.black-transparent-btn:focus, .black-transparent-btn:active:focus {
    outline: none;
    color: #333;
}

.big_number_figures {
    font-size: 18pt;
    margin: 0;
}

.no-left-margin {
    margin-left: 0;
}

.no-left-margin-imp {
    margin-left: 0 !important;
}

.no-right-margin {
    margin-right: 0;
}

.no-right-margin-imp {
    margin-right: 0 !important;
}

.left-right-pad-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.left-right-pad-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.left-right-pad-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.card_css {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    height: fit-content;
}

.promo_date_validity_css {
    font-size: 12px;
    color: grey;
    white-space: nowrap;
}

.promo-unavailable-text {
    font-size: 13px;
    color: grey;
    margin: 0 0 -5px 0;
}

.circle-qr-modal {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 2px solid rgb(127, 140, 141);
    border-radius: 50%;
    font-size: 24px;
    color: rgb(127, 140, 141)
}

.qr-font-size {
    font-size: 40px; /* Inherit font-size from parent */
    padding-top: 10px;
}

.balance_card {
    min-height: 90px;
    border: 1px solid #E7E7E7;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 5px;
}

.balance_card:hover {
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.8;
}

.balance_card:focus, .balance_card:active:focus {
    outline: none;
}

.no-top-margin-card {
    margin-top: 0;
}

.text_grey {
    color: grey;
}

.redeem-btn-width {
    width: 100%;
}

@media (min-width: 501px) {
    .redeem-btn-width {
        width: auto;
        float: right;
    }
}

.cust_grp_disp {
    padding: 5px 10px;
    border-radius: 20px;
    cursor: default;
}

.grey-btn.cust_grp_disp:hover {
    opacity: 1;
}

.navbar-fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
}

.min-height-36 {
    min-height: 36px;
}


.oo_credit_css {
    display: table;
}

.others-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    color: black;
}

.others-row-card:hover {
    color: black;
    opacity: 0.7;
    text-decoration: underline;
}

.btn_container {
    display: flex;
    justify-content: space-between;
}

.card-box-shadow {
    box-shadow: rgb(0 0 0 / 10%) 0 2px 8px;
    background: white;
}

.card-box-shadow:hover {
    box-shadow: rgb(0 0 0 / 40%) 0 2px 8px;
}

.max-width-110 {
    max-width: 110px;
}

.border-radius-50 {
    border-radius: 50%;
}

.border-radius-10 {
    border-radius: 10px;
}

.acc-deets-l-height {
    line-height: 1.25
}

.other-box-css {
    border: 1px solid #E7E7E7;
    border-radius: 10px;
    padding: 0 5px;
}

.scroll-footer {
    background-color: #666;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 1; /* Ensure the scroll footer is below the fixed footer */
}

/*below is for show order info, in order pending view*/
#collapsible_heading {
    padding: 5px 10px;
    border-radius: 0;
}

/*to rotate the chevron without changing the class*/
#collapsible_heading:not(.collapsed) span#order_info_chevron_span {
    transform: rotate(180deg);
}

/*to swap the 'show order info' and 'hide order info' word*/
#collapsible_heading.collapsed span#hide_order_info_text {
    display: none;
}

#collapsible_heading:not(.collapsed) span#show_order_info_text {
    display: none;
}

/*end of show order info*/

.limit-address-lines {
    /*used by list all stores, to limit address length*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.reward-description-height-fit {
    min-height: calc(100vh - 250px);
}

.reward-banner {
    width: 100%
}

.cursor-pointer {
    cursor: pointer;
}

.reward-modal-size {
    height: 90%;
    max-width: 700px;
}

.modal-body {
    align-content: baseline;
}

@media (min-width: 576px) {
    .mobile-up-margin {
        margin-top: -8px;
    }

    .big-screen-top-pad-10 {
        padding-top: 10px;
    }
}

.disabled-branch-selection {
    background-color: #e9ecef !important;
    pointer-events: none;
}

.guest-login-btn {
    border: 1px black solid;
    width: 100%;
}

#guest-login-div:hover {
    opacity: 0.5;
}

.card-info-img-border {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
}

.membership-card-width {
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 48%) 0 2px 8px;
}

.box-container {
    border: 1px solid #E7E7E7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: rgb(0 0 0 / 15%) 0 2px 8px;
}

.no-border-radius {
    border-radius: 0;
}

.small-screen-close-btn {
    display: none;
}

@media (max-width: 575px) {
    .big-screen-close-btn {
        display: none;
    }

    .small-screen-close-btn {
        display: block;
    }
}

#details_view {
    background: white;
}

.membership-qr-width {
    max-width: 60px;
}

.show-qr-text {
    font-size: 13px;
    padding-right: 3px;
    color: rgb(127, 140, 141);
    min-width: 61px;
}

.force-secondary-btn {
    background: #808080 !important;
    color: #fff !important;
    border-color: #696969 !important;
}

.force-secondary-btn:hover, .secondary-btn:focus {
    opacity: 0.7;
}

.invalid-member-group {
    background: #808080;
    color: #fff;
    border-color: #696969;
}

.invalid-member-group:hover {
    color: #fff;
}

.reward-progress-box {
    border: 1px solid #ccc;
}

.membership-card-div {
    flex-direction: column;
    align-content: center;
}

.membership-card-name {
    position: absolute;
    font-size: 18px;
    line-height: normal;
    overflow: hidden;
    white-space: nowrap;
}

.line-height-norm {
    line-height: normal;
}

.reward-page-message {
    display: inline-block;
    width: 100%;
    background: white;
    padding: 15px;
    border: 1px solid #E7E7E7;
    border-radius: 0.5vh;
}

#invalid-footer-btn:hover {
    pointer-events: none;
}

.view-store {
    font-size: 14px;
    line-height: 1;
    text-decoration: underline;
    margin-bottom: 0;
}

#just_browsing_text:hover {
    cursor: pointer;
    opacity: 0.7;
    background-color: initial !important;
}

.outlet-oo-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.justify-space-between {
    justify-content: space-between;
}

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

.flex-direct-col {
    display: flex;
    flex-direction: column;
}

.login-background-image-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    opacity: 0.7;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.width-1500 {
    max-width: 1500px;
}

.background-image-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    opacity: 0.7;
    position: fixed;
    max-width: 800px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.reward-bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    max-width: 800px;
    position: fixed;
}

.background-image {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.box-bg-color {
    background-color: white;
}

.width-800 {
    max-width: 800px;
}

.second-layer {
    z-index: 2;
}

.wrapper-for-bg-img {
    position: relative; /* so that footer wont get affected by background image with opacity 0.7 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* phone can scroll without this */
}

#order_mode_modal .modal-dialog-centered {
    min-height: 80vh;
}

#booking-widget-div {
    display: contents; /* so that it doesn't push the page. */
}

.card-info-icon {
    height: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.min-ht-90-vh {
    min-height: 90vh;
}

/*start of cart icon*/
.icon-img-class {
    float: left;
    height: var(--icon-height); /* 35px */
    width: var(--icon-width); /* 35px */
    margin-right: var(--icon-margin-right); /* 10px */
    margin-top: var(--icon-margin-top); /* 4px */
}

.icon-collection {
    height: calc(var(--icon-height) + 2px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 1px); /* var is 0 */
    margin-top: calc(var(--icon-margin-top) + 1px); /* var is 4px */
}

.icon-delivery {
    height: calc(var(--icon-height) + 4px); /* var is 35px */
    margin-top: calc(var(--icon-margin-top) + 1px); /* var is 4px */
}

.icon-table {
    margin-top: calc(var(--icon-margin-top) + 2px); /* var is 4px */
}

.icon-table-pax {
    height: calc(var(--icon-height) + 6px); /* var is 35px */
    width: calc(var(--icon-width) - 4px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) + 2px); /* var is 0 */
    margin-top: calc(var(--icon-margin-top) - 2px); /* var is 4px */
}

.icon-contact {
    height: calc(var(--icon-height) - 1px); /* var is 35px */
    width: calc(var(--icon-width) - 1px); /* var is 35px */
    margin-right: calc(var(--icon-margin-right) + 1px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 3px); /* var is 4px */
}

.icon-delivery-address {
    height: calc(var(--icon-height) + 2px); /* var is 35px */
    width: calc(var(--icon-width) - 1px); /* var is 35px */
    margin-top: calc(var(--icon-margin-top) + 2px); /* var is 4px */
}

.icon-reward-points {
    height: calc(var(--icon-height) + 2px); /* var is 35px */
    margin-right: calc(var(--icon-margin-right) - 1px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 2px); /* var is 4px */
}

.icon-customer-account {
    height: calc(var(--icon-height) + 6px); /* var is 35px */
    width: calc(var(--icon-width) + 3px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 2px); /* var is 0 */
    margin-right: calc(var(--icon-margin-right) - 2px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) - 1px); /* var is 4px */
}

.icon-gift-card {
    height: calc(var(--icon-height) + 3px); /* var is 35px */
}

.icon-payment-method {
    height: calc(var(--icon-height) + 3px); /* var is 35px */
}

.icon-order-date {
    width: calc(var(--icon-width) + 1px); /* var is 35px */
    margin-top: calc(var(--icon-margin-top) + 4px); /* var is 4px */
}

.icon-tips {
    height: calc(var(--icon-height) + 5px); /* var is 35px */
    width: calc(var(--icon-width) + 5px); /* var is 35px */
    margin-right: calc(var(--icon-margin-right) - 4px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) - 1px); /* var is 4px */
}

.icon-remarks {
    width: calc(var(--icon-width) + 2px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 2px); /* var is 0 */
    margin-top: calc(var(--icon-margin-top) + 3px); /* var is 4px */
}

.icon-promotion {
    height: calc(var(--icon-height) - 1px); /* var is 35px */
    width: calc(var(--icon-width) + 1px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 1px); /* var is 0 */
    margin-right: calc(var(--icon-margin-right) + 1px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 5px); /* var is 4px */
}

.icon-voucher {
    height: calc(var(--icon-height) - 1px); /* var is 35px */
    width: calc(var(--icon-width) + 1px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 1px); /* var is 0 */
    margin-right: calc(var(--icon-margin-right) + 1px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 5px); /* var is 4px */
}

.icon-buzzer {
    height: calc(var(--icon-height) - 2px); /* var is 35px */
    margin-top: calc(var(--icon-margin-top) + 5px); /* var is 4px */
}

.icon-questionnaire {
    width: calc(var(--icon-width) + 2px); /* var is 35px */
    margin-right: calc(var(--icon-margin-right) - 2px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 4px); /* var is 4px */
}

.icon-cutlery {
    width: calc(var(--icon-width) + 3px); /* var is 35px */
    margin-left: calc(var(--icon-margin-left) - 2px); /* var is 0 */
    margin-right: calc(var(--icon-margin-right) - 1px); /* var is 10px */
    margin-top: calc(var(--icon-margin-top) + 1px); /* var is 4px */
}

.table-cutlery-override {
    margin-top: calc(var(--icon-margin-top) + 2px); /* var is 4px */
}

.collapse-preview-box {
    padding-left: 0 !important;
    margin-left: 54px;
    width: 60%;
}

.mt-collapse-small {
    width: 60%;
    display: inline-block;
}

/*end of cart icon*/

.cart-description-font-size {
    font-size: 0.85rem;
}

.z-index-3 {
    z-index: 3 !important;
}

.reward-header-css {
    background: white;
    border-radius: 10px;
    padding: 0 5px;
}

.reward-login-btn:disabled:hover {
    opacity: 0.7;
}

.d-flex-grow {
    display: flex;
    flex-grow: 1;
}

.no-flex-grow {
    flex-grow: 0;
}

.icon-container {
    display: inline-block;
    width: 50px; /* Adjust the size as needed */
    height: 50px; /* Adjust the size as needed */
    border: 2px solid #444; /* Border properties */
    border-radius: 50%; /* Make it circular */
    text-align: center;
    line-height: 40px; /* Vertically center the icon */
    cursor: pointer;
}

.not-so-black {
    color: #444;
}

.fs-30 {
    font-size: 30px;
}

.fs-20 {
    font-size: 20px;
}

.fs-1-rem {
    font-size: 1rem;
}

.fs-1-2-rem {
    font-size: 1.2rem;
}

.fs-1-25-rem {
    font-size: 1.25rem;
}

.fs-1-75-rem {
    font-size: 1.75rem;
}

.gift-card-img-container {
    width: 60%;
}

@media (max-width: 800px) {
    .gift-card-img-container {
        height: 100%;
    }
}

.gift-card-img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    /* border: 1px solid black; */
}

.gc-img-container {
    width: calc(100% - 20px);
}

@media (max-width: 800px) {
    .gift-card-img {
        width: 50vw;
    }
}

.gift-card-box-img {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    cursor: pointer;
    margin: 5px;
    object-fit: cover;
}

.selected-gc-img {
    outline: 3px solid black;
}
.gc-tnc-footer {
    position: sticky;
    bottom: 0;
    flex-basis: auto;
}

.gift-card-content-container-flex {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#gift_card_content_view {
    height: 100vh;
}

.giftcard-img-carousel {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: center;
}

.giftcard-amount-container:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.giftcard-amount-container:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.giftcard-amount-container {
    border: 1px solid #E7E7E7;
}

@media (max-width: 500px) {
    .giftcard-amount-container:first-child {
        border-bottom-left-radius: 0;
        border-top-right-radius: 5px;
    }

    .giftcard-amount-container:last-child {
        border-top-right-radius: 0;
        border-bottom-left-radius: 5px;
    }

    .giftcard-amount-container:not(:first-child) {
        border-top: none;
    }
}

.giftcard-amount-container:hover {
    box-shadow: rgb(0 0 0 / 40%) 0 2px 8px;
}

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

.big-checkbox-size {
    transform: scale(1.2);
}

.gift-card-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.recipient-deets.disabled {
    background: #e9ecef;
    cursor: default;
    pointer-events: none;
}

.gift-card-icon {
    height: 100px;
}

.gift-card-info-img-size {
    width: 50%;
    min-width: 300px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.gift-card-receipt-img {
    width: 100px;
    height: 100px;
}

.gift-card-small-card-img {
    width: 80%;
    max-width: 300px;
    height: fit-content;
}

.no-stripe-checkout {
    opacity: 0.65;
    pointer-events: none;
}

.vh-80 {
    height: 80vh;
}

.max-vh-90 {
    max-height: 90vh;
}

.max-w-350 {
    max-width: 350px;
}

.receipt-content-max-height {
    max-height: calc(90vh - 120px);
}

.grey-scale-filter {
    filter: grayscale(100%); /* Applies a grayscale filter by default */
    transition: filter 0.2s; /* Add a transition for a smooth effect */
}

.grey-scale-filter:hover {
    filter: grayscale(0%);
}

.error-msg-style {
    color: red;
    font-size: 13px;
    margin: 0;
}

.color-red {
    color: red;
}

#tnc_div {
    align-self: end;
}

.giftcard-dropdown, .language-dropdown {
    top: 48px;
    right: 0;
    left: auto;
}

.payment-method-box {
    width: 100%;
    min-height: 60px;
}

.recipient-details:disabled {
    background-color: #ccc !important;
    opacity: 0.5;
}

/*style for customer loyalty*/

.claimed-label {
    outline: none;
    color: #fff;
    /*background-color: rgb(39, 174, 96);*/
    background: #808080 !important;
}

.unclaimed-label {
    outline: none;
    color: #fff;
    /*background-color: rgb(255, 0, 0);*/
    /*background-color: #d9534f;*/
}

.claimed-div {
    opacity: 0.5;
}

.min-cart-modal-height {
    /* min-height: 65px; !* btn 44px + 10 top + 10 btm + 1 border*! */
    min-height: 70px; /* btn 44px + 10 top + 10 btm + 1 border*/
}

.overflow-x-scroll {
    overflow-x: scroll;
}

/* start of gift card qr lib css */
#reader__scan_region video {
    width: 100% !important;
    margin-bottom: 15px;
}

.qr-reader {
    border: none !important;
}

/* end of gift card qr lib css */

.one-eight-opacity {
    opacity: 0.8;
}

#order_mode_content {
    align-content: center;
}

@media (min-height: 800px) {
    #order_mode_content {
        height: 300px;
    }
}

.green-fa-icon:before {
    color: #269E1B;
    margin-right: 15px;
    font-size: 1.5em;
}

.red-fa-icon:before {
    color: #ef5535;
    margin-right: 15px;
    font-size: 1.5em;
}

.toastify:before, .toast-close {
    /* overwritten by font-family: inherit. so need to apply back to get the icon */
    font-family: 'FontAwesome';
}

.course-header-class:first-of-type {
    margin-top: 10px;
}

.default-btn-css {
    min-height: 44px;
    min-width: 44px;
    border-radius: 0.45rem;
    /* border-width: 2px; */
    font-weight: 500;
}

.modal-content {
    border-radius: 20px;
    /* border-radius: 0.45rem; */
}

.som-button {
    border-radius: 0.45rem;
    border-width: 2px;
}

.justify-space-around {
    justify-content: space-around;
}

.tips-size-font {
    font-size: 0.9rem !important;
}

.tips-percentage-font {
    font-size: 1.2rem !important;
    font-weight: 500;
}

.tips-percentage {
    min-width: 90px;
    min-height: 100px;
    border-radius: 0.9rem;
}

#tips_currency {
    font-size: 1.5rem;
}

#tips_total {
    width: calc(100% - 20px);
    float: right;
    padding-right: 30px; /* so that the text is still aligned to center. */
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #606060;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    /* border-bottom: 1px solid #606060; */
}

.separator:not(:empty)::before {
    margin-right: .25em;
}

.separator:not(:empty)::after {
    margin-left: .25em;
}

.mx-10px {
    margin-top: 10px;
    margin-bottom: 10px;
}

.order-details-msg {
    color: #737373; /* same as mt-grey */
    font-size: 0.9rem;
}

.center-bg {
    background-position-x: center;
    background-position-y: center;
}

.mobile-big-image-class {
    object-fit: cover;
}

.mobile-big-image-item-box-pad {
    /*make 10px up down left right*/
    padding: 5px 2px 5px 7px !important;
}

.radius-45-rem {
    border-radius: 0.45rem;
}

.fw-normal {
    font-weight: normal;
}

.fw-bold {
    font-weight: bold;
}

.fw-bolder {
    font-weight: bolder;
}

.store-ft-bold {
    font-weight: bold;
}

.event-notice-card-body {
    display: inline-table;
    overflow-wrap: anywhere;
}

.force-no-click {
    box-shadow: rgb(0 0 0 / 10%) 0 2px 8px !important;
}

@media (max-width: 767px) {
    .mobile-hidden {
        display: none;
    }

    .cart-trash-div {
        top: 10px;
    }
    #rating_display_or_error, .char-count-grey {
        font-size: calc(12px * var(--percent)) !important;
    }

    .paper-menu-container {
        width: 100%;
    }

    .paper-menu {
        margin-left: 10px;
    }
    .modal-dialog {
        /* Force full height respecting the mobile browser bars */
        height: 97vh; /* Fallback */
        height: 97dvh;
    }
}

.full-modal {
    height: 97vh; /* Fallback */
    height: 97dvh;
}

.edit_cart_item {
    cursor: pointer;
}

.services_btn {
    color: #6c757d;
    border: 2px solid #6c757d;
    opacity: 0.7;
}

.services_btn:hover {
    opacity: 1;
}

.visibility-hidden-display-flex {
    visibility: hidden !important;
    display: flex !important;
}

#redeem_qr_src {
    min-height: 285px;
}

#map_info {
    overflow: hidden;
}

.scroll {
    overflow: scroll;
}

.firebase-provider-logo {
    background-color: white;
    border: 1px solid black;
    border-radius: 0.25rem;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    justify-content: center;
    width: 100%;
}

.auth-login-btn:hover {
    opacity: 0.5;
}

.continue-with-provider {
    color: black;
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

.google-logo-height {
    height: 20px;
}

.apple-logo-height {
    height: 25px;
}

.facebook-logo-height {
    height: 23px;
}

.oo-social-btn-rad {
    border-radius: 0.45rem;
}

#link_account_btn {
    text-decoration: underline;
    cursor: pointer;
}

#link_account_btn:hover {
    opacity: 0.7;
    text-decoration: none !important;

}

.selected-tick {
    background-color: #28a745;
    color: white;
    font-size: 15px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    bottom: -2.5px;
    margin-left: -2px;
}

.offset-tick {
    transform: translateY(-1px);
}

.customer-qr-btn {
    width: 110px;
    height: 100px;
    border-radius: 12px 12px 0 0 !important;
    background: white;
    border-color: lightgrey;
    border-bottom: none;
    transition: none;
    line-height: normal;
    padding: 0;
}

.customer-qr-btn:hover {
    opacity: 0.7;
    color: initial;
    background-color: white;
}

.offset-btm-120 {
    margin-bottom: 120px;
}

.scanner-dialog {
    max-width: 100%;
    justify-content: center;
}

#scanner_modal {
    z-index: 1100;
}

.ui-widget-header a {
    /*have to overwrite as bootstrap overwritten the colour*/
    /*this is datepicker's left right arrow*/
    color: #222222 !important;
}

.encrypted_auth_token {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.profile-pic-config-btn {
    margin: 7px 0;
    height: 50px;
    padding: 10px 24px;
}

#profile_pic_wrapper {
    position: relative;
    /*display: inline-block;*/
    height: 100px;
    width: 100px;
}

#default_pic_wrapper {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
}

.verified-status {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #80de04;
    color: white;
    border-radius: 50%;
    padding: 5px;
    width: 27px;
    height: 27px;
    font-size: 17px;
    text-align: center;
    line-height: 20px;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
    z-index: 5;
}

/*.verified-status .tooltip-inner {
    font-size: 12px;
    white-space: nowrap;
    max-width: none;
}*/

.tooltip.verified-tooltip .tooltip-inner {
    font-size: 12px;
    white-space: nowrap;
    max-width: none;
}

.tooltip .arrow.verified-arrow:before {
    border-left-color: #6c757d !important;
    border-right-color: #6c757d !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

#change_profile_pic_body {
    align-self: center;
}

.account-modal-background {
    background-color: rgba(0, 0, 0, 0.5);
}

#duplicate_customer_selection_div {
    max-height: 220px;
}

#duplicate_customer_selection {
    font-size: 14px;
}

#duplicate_customer_selection thead th,
#duplicate_customer_selection tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6; /* Bootstrap’s default gray */
}

.dup-customer-row:hover {
    cursor: pointer;
}

.dup-customer-row.active {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.item-category-parent-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media (max-width: 767px) {
    .item-category-parent-box {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
}

.cart-summary-sticky {
    position: sticky;
    bottom: 0;
}

/* checkbox */
.custom-control-label::before {
    border: 1px solid rgba(0, 0, 0, .125);
}

.field-verified-status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background-color: #80de04;
    border-radius: 50%;
}

.field-verified-status i {
    color: white;
    font-size: 9px;
}

.field-unverified-status {
   display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background-color: darkgrey;
    border-radius: 50%;
}

.field-unverified-status i {
    color: white;
    font-size: 9px;
}

.verification-field-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
}

@media (max-width: 450px) {
    .iti__selected-flag > .iti__flag {
        display: none;
    }
}

.hidden-ogc, .hidden-or {
    display: none !important;
}
#img_src_mobile_div {
    position: absolute;
    left: 0;
}

@media (max-width: 575px) {
    #img_src_mobile_div {
        height: calc(95vw - 15px);
        width: calc(95vw - 15px);
    }
}
.short-image-size {
    height: 30vh !important;
}

#item_left_right_carousel{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
}

.width15 {
    width: 15%;
}


/* new css ui */
.btn {
    border-radius: 15px;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 25px;
}

@media (max-width: 575px) {
    #item_qtt_div {
        justify-content: center;
    }

    .cart-trash-div {
        top: 5px;
    }
}

.top-button-color {
    border: none;
}

#order_qty {
    border: none;
}

.check-box-center {
    align-content: center;
}

.check-box-center .custom-control-label::before,
.check-box-center .custom-control-label::after {
    /* somehow when align content center its not really at the middle  */
    margin-top: -5px;
}

.mod-pricing-center {
    align-content: center;
    text-align: right;
}

.flex-1 {
    flex: 1;
}

.plus-minus-fit-width {
    width: 90px;
}

.kiosk-plus-minus-fit-width {
    width: 110px;
}

.tick-box-padding {
    padding-left: 0;
    padding-right: 0.5rem;
}

.offset-combo-item-preview {
    margin-left: 35px;
}

.offset-combo-item-preview-image {
    margin-left: 95px;
}

/* close button? dont do yet */
.icon-x {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: super;
}

.icon-x::before,
.icon-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.icon-x::before {
    transform: rotate(45deg);
}

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

@media (max-width: 575px) {
    .close-back-hidden-mobile {
        display: none;
    }
}

.collapse-pencil-box{
    border: none;
}

.overwrite-qr-btn-css {
    border:none !important;
    background-color: inherit !important;
    color:inherit !important;
}

.menu-font-weight {
    font-weight: 400 !important;
}

/* item name, price, modifier name  */
.product-font-size, .menu-font-size, .mod-name-div {
    font-size: 1.1rem !important;
}

/* 2 rows of item name takes about 63px */
.mod-select-row {
    min-height: 63px;
    margin: 2.5px 0 ;
}

.mod-name-div {
    /* font-size: 1rem !important; */
    align-content: center;
}

.description-text {
    margin-top: 5px;
    font-size: 1rem !important;
}

.line-height-1-2 {
    line-height: 1.2;
}

.item-remarks-header {
    background-color: #f6f6f6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 0;
    padding: 5px 10px;
}

.item-remarks-textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: 80px;
}

.big-view-full-width {
    width: 50%;
}
@media (max-width: 575px) {
    .item-qtt-row {
        justify-content: center;
        margin-top: 10px;
    }

    .error-msg-div {
        text-align: center;
        height: 20px;
    }

    .big-view-full-width {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .item-box-error {
        margin-top: 5px;
    }
}

@media (max-width: 767px) {
    .custom-control-lg .order-details-checkbox::before,
    .custom-control-lg .order-details-checkbox::after {
        /* to align the checkbox with the pencil. */
        left: -35px !important
    }
}

.order-details-box {
    margin: 10px;
    border-radius: 10px;
}

.receipt-float-box {
    padding: 10px;
}

.order-details-box, .receipt-float-box, .box-shadow, .order-details-inner-border {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
}
.box-shadow {
    padding: 5px 10px;
}

.remove-voucher-row {
    margin-right: 5px;
    cursor: pointer;
}

.category-text {
    font-size: 1.3rem;
    font-weight: bold;
}

/* above got *0.9 if less than a certain width, dont want the smaller size */
#order_summary {
    font-size: 1rem;
}

#oa_grandtotal {
    margin-bottom: 15px;
}

body {
    letter-spacing: 0.3px;
}

#order_item_name, .modal-header-fs, #store_info_header, #table_pax_header {
    font-size: 1.5rem;
}

#agree_tnc_content {
    border: 1px none rgba(0, 0, 0, .125);
    border-top-style: solid;
}

#select_tnc_row_1 {
    flex-direction: row;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
}

.grandttotal-line-gap {
    margin-top: 10px;
    padding-top: 10px;
}

/*
.customized-item-border{
    transition: transform 0.2s ease;
}
.customized-item-border:hover {
    transform: scale(1.1);
    z-index: 11;
    opacity: 1 !important;
}
.customized-item-border:hover img {
    transform: scale(1);
}
*/


.fa-shopping-cart-size {
    transform: scale(0.9);
}
#view_cart {
    position: absolute;
    right: 15px;
    top: -70px;
    /* background: #FF6550; */
    background: #E74C3C;
    color: white;
    font-size: 58px;

    width: 60px;
    height: 60px;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
}

@media (max-width: 991px) {
    /* give padding to that my cart button is not blocking any button */
    .cat-item-container:last-of-type {
        padding-bottom: 60px !important;
    }

    .badge-style {
        right: 22px !important;
        top: -63px;
    }
}

.border-none {
    border: none;
}

#dropdown_menu_btn_small, #dropdown_menu_btn {
    transform: translateY(-2px);
}

.cart-item-container {
    border-radius: 10px;
}

.flex1 {
    flex: 1;
}

#save_combo_btn{
    min-width: 100px;
}

#table_pax_input, #order_qty {
    border: none !important;
}

.order-details-hover:hover {
    border-radius: 10px;
}

.item-name-bold:hover, .edit_cart_children_item:hover {
    z-index: 1;
}
.item-name-bold {
    padding-top: .5rem !important;
    padding-bottom: .5rem!important;
}

.swal-modal {
    border-radius: 10px;
}

.swal-button {
    border-radius: 15px;
}

.fa-times {
    transform: scale(1.3);
}

#mobile_account_dropdown_btn {
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* to prevent the border radius to change */
}

.add-update-item-btn {
    flex: 1;
    margin-left: 15px;
}

@media (max-width: 767px) {
    .edit_cart_item.fa-pencil:before {
        /* somehow this is not align center, need to hack abit */
        display: inline-block;
        transform: translate(-1px, -1px);
    }
}

.item-list-header-border {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#item_summary_list {
    padding: 0;
    padding-bottom: 10px !important;
}

#next_to_customer_details_btn, #next_to_order_summary_btn, #modal_save_table_and_pax_btn, #checkout_btn {
    min-width: 180px;
    /* padding-left: 50px; */
    /* padding-right: 50px; */
}

button[type=button]:not(.plus-minus-button, .secondary-grey-btn) {
    font-size: 1.1rem;

}

@media (max-width: 575px) {
    #next_to_customer_details_btn, #next_to_order_summary_btn, #checkout_btn {
    /* #checkout_btn { */
        width: calc(100% - 15px);
    }
}

.item-box-error {
    font-size: 13px;
}

#cart_count_bottom {
    border: 1px solid white;
    border-radius: 20px;
}

#delivery_address_div {
    box-shadow: 0 0 10px #ddd;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    margin: 10px;
    padding: 10px;
}

#order_mode_customer_address {
    padding: 0 !important;
    padding-bottom: 15px !important;
}

.receipt-small-btn {
    border-radius: 10px;
}

.som-button {
    max-width: -webkit-fill-available;
}

/* make the non selected button to be lighter */
.som-button.grey-transparent-btn, .tips-percentage.grey-transparent-btn {
    opacity: 0.4;
}

.som-button.darkgrey-transparent-btn:hover,
.som-button.grey-transparent-btn:hover,
.tips-percentage.darkgrey-transparent-btn:hover,
.tips-percentage.grey-transparent-btn:hover {
    opacity: 0.7;
}

#scanner_container {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

#table_pax_plus_btn, #table_pax_minus_btn {
    padding-top: 10px; /* the content is not align middle */
    height: 72px;
    width: 72px;
}

.rem-1 {
    font-size: 1rem;
}

#order_details_table_pax_input{
    border: none;
}

#clear-tip-btn:before {
    margin-top: 3px;
}

@media (min-width: 992px)  {
    #cart_count_top {
        display: block;
    }
}

.badge:empty {
    display: none !important;
}

#order_detail_footer {
    /* prevent jumping */
    min-height: 64px;
}

.order-details-box.opac-80 {
    pointer-events: none;
    opacity: 0.7;  /* originally was 0.8, make it more disabled feel */
    box-shadow: none;
}

.modifier-optional-flag, .item-box-button-style {
    font-size: 0.9rem !important;
    /* font-size: 14px !important; */
}

@media (max-width: 991px) {
    #cart_count_top {
        display: none;
    }
}

.gc-header-style {
    width: 70%;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.flex-row-space {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#kiosk_qr_footer {
    position:absolute;
    top: -100px;
    right:30px;
}

.height-5 {
    height: 5px;
}

.fs-small {
    font-size: small;
}

#item_modal_close_btn_div {
    display: flex;
    width:100%;
    flex: 1;
    margin:0;
}

.collapse-top-border-color {
    padding-top: 0;
}

.order-details-box-focus {
    display: block;
    z-index: 2;
    position: relative;
}

.not-available-btn {
    border-color: #696969 !important;
}

.fs-14 {
    font-size: 14px;
}

.justify-center {
    justify-content: center;
}

.no-top-border-imp {
    border-top: none !important;
}

.receipt-category-header {
    font-size: 1rem;
}

.receipt-amount-col {
    min-width: 120px;
    text-align: right;
}

.modal-inner-backdrop::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    opacity: 0.4;
    background-color: #000;
}

#cart_spinner_body {
    /* this is for to prevent backdrop from overlapping */
    background-color: inherit;
    z-index: 10;
}

@media (max-width: 574px) {
    /* idk why jump */
    .order-list-order-history::before {
        transform: translateY(2px);
    }
}

.qtt-price-col {
    display: flex;
}

@media (max-width: 450px) {
    .mobile-plus-minus {
        width: 90px;
    }

    .qtt-price-col {
        flex-direction: column;
    }
}

@media (max-width: 766px) {
    #back_to_cart_order_btn, #back_to_customer_details_btn {
        padding-top: 8px;
        padding-left: 8px;
    }
}

#back_to_account_btn {
    min-width: auto;
}
@media (max-width: 767px) {
    #back_to_account_btn {
        padding-top: 7px;
    }
}

.item-tag-image {
    width: 24px;
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 5px;
}

.translate_y_1_up {
    transform: translateY(-1px)
}

.translate_y_2_up {
    transform: translateY(-2px)
}

/* not sure why touch screen devide the + -  sign is out of positiion */
@media (pointer: coarse) {
    .plus-minus-button:not(.cart-edit-btn-max-width)::before {
        display: block;
        transform: translateY(2px)

    }
}

.voucher-close-btn {
    transform: translateY(5px)
}

.scroll-down-arrow {
    height: 30px;
    width: 30px;
    position: sticky;
    left: calc( 50% - 15px);
    bottom: 0;
    border-radius: 50px;
    cursor: pointer;
    opacity: 0.5;
}
@media (min-width: 576px) {
    /* only show to mobile for now */
    /* .scroll-down-arrow { */
    /*     display: none !important; */
    /* } */
}

.scroll-down-arrow::before,
.scroll-down-arrow::after {
    opacity: 0;  /* start from 0 */
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    border: 2px solid black;
    height: 10px;
    width: 10px;
    transform: translate(-50%, -100%) rotate(45deg);
    border-top: transparent;
    border-left: transparent;
    animation: scroll-down-arrow 1.5s ease-in-out infinite;
}

.scroll-down-arrow::before{
    animation-delay: 0s;
}
.scroll-down-arrow::after{
    animation-delay: 0.75s;
}
@keyframes scroll-down-arrow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 75%;
    }
}

.selected-voucher-div {
    max-width: 150px;
}

.voucher-list-container {
    display: flex;
    flex-wrap: wrap;
}

#scan_from_photos_btn {
    width: 100%;
}

.no-drop-transform {
    transform: none;
}

.select_questionnaire_row_onclick, .select_payment_row_onclick {
    border-radius: 10px;
}

.order-details-inner-box {
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
}