/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                 BASE VARIABLES                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
:root {
    /* Colors */
    --white: #ffffff; /* White */
    --black: #000000; /* Black */
    --primaryColor: #FFFFFF; /* White */
    --secondaryColor: #e1aa21; /* Gold */
    --accentColor: #000000; /* Black */
    --ambientColor: #F0F0F0; /* Light Gray */
    /* Background Colors*/
    --lightBgColor: #808080; /* Light Gray */
    --medBgColor: #4B4A4A; /* Gray */
    --darkBgColor: #000000; /* Black */
    --accentBgColor: var(--secondaryColor);
    /* Text Colors*/
    --textColorLight: #F0F0F0;
    --textColorMedium: rgba(255,255,255,.8);
    --textColorDark: #000000;
    --textColorAccent: var(--secondaryColor);
    --textColorRequired: var(--secondaryColor);
    /* System Colors - Mainly Toast Backgrounds */
    --successColor: #28a745; /* Green */
    --errorColor: #DC3545; /* Red */
    --warningColor: #ffc107; /* Yellow */
    --infoColor: #0E3F87; /* Blue */
    --loaderIconColor: var(--textColorLight);
    --loaderTextColor: var(--textColorLight);
    --loaderBackgroundColor: rgba(0,0,0,.5);
    /* Global */
    --bodyBgColor: var(--darkBgColor);
    --bodyTextColor: var(--textColorLight);
    --horizontalPagePadding: 1.25em;
    /* Scrollbar Settings */
    --scrollbar-color-thumb: rgba(0,0,0,.35);
    --scrollbar-color-track: rgba(0,0,0,.05);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
    /* Border Settings */
    --borderThickness: 2px;
    --borderThicknessThick: 3px;
    --borderThicknessThin: 1px;
    --borderRadius: 8px;
    --borderRadiusLarge: 11px;
    --borderRadiusSmall: 5px;
    /* Fonts */
    --fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightBold: 700;
    --fontSizeBase: 16px;
    --fontSizeExtraLarge: 2rem;
    --fontSizeLarge: 1.6rem;
    --fontSizeMedium: 1.25rem;
    --fontSizeSmall: 0.8rem;
    --fontSizeExtraSmall: 0.7rem;
    /* Heading & Page Title */
    --headingColor: var(--textColorLight);
    --headingFontFamily: var(--fontFamily);
    --headingFontSize: var(--fontSizeExtraLarge);
    --headingFontWeight: var(--fontWeightBold);
    --headingFontAlignment: center;
    --headingFontTransform: uppercase;
    /* HR Settings */
    --hrBg: rgba(255,255,255,.85);
    --hrBorder: none;
    --hrBorderRadius: var(--borderRadius);
    --hrHeight: 4px !important;
    --hrWidth: 60%;
    /* Buttons */
    --btnFontFamily: var(--headingFontFamily);
    --btnBorderRadius: var(--borderRadius);
    --btnBorderWidth: var(--borderThickness);
    --btnPrimaryBg: var(--secondaryColor);
    --btnPrimaryBorderColor: var(--secondaryColor);
    --btnPrimaryFontFamily: var(--btnFontFamily);
    --btnPrimaryFontColor: var(--textColorDark);
    --btnPrimaryFontWeight: var(--fontWeightBold);
    --btnSecondaryBg: transparent;
    --btnSecondaryBorderColor: var(--secondaryColor);
    --btnSecondaryFontColor: var(--textColorLight);
    --btnSecondaryFontFamily: var(--btnFontFamily);
    --btnSecondaryFontWeight: var(--fontWeightBold);
    --btnTertiaryBg: transparent;
    --btnTertiaryBorderColor: rgba(255,255,255,.6);
    --btnTertiaryFontFamily: var(--btnFontFamily);
    --btnTertiaryFontColor: rgba(255,255,255,.6);
    --btnTertiaryFontWeight: var(--fontWeightBold);
    --btnActiveBg: var(--secondaryColor);
    --btnActiveBorderColor: var(--secondaryColor);
    --btnActiveTextColor: var(--textColorDark);
    /* Button Sizes */
    --btnLargeFontSize: var(--fontSizeMedium);
    --btnLargeMinWidth: 80vw;
    --btnLargePadding: .5em 0;
    --btnLargeMargin: 0 auto;
    --btnMediumFontSize: var(--fontSizeMedium);
    --btnMediumMinWidth: 80vw;  
    --btnMediumPadding: .5em;
    --btnMediumMargin: 0 auto;
    --btnSmallFontSize: var(--fontSizeSmall);
    --btnSmallPadding: .75em;
    --btnSmallMargin: 0 auto;
    /* Plus Minus Buttons */
    --plusMinusIconBackground: transparent;
    --plusMinusIconColor: var(--textColorMedium);
    --plusMinusFontSize: var(--fontSizeMedium);
    --plusMinusIconWeight: var(--fontWeightBold);
    --plusMinusInputColor: var(--textColorMedium);
    --plusMinusInputFontSize: var(--fontSizeMedium);
    --plusMinusInputWeight: var(--fontWeightBold);
    --plusMinusSmallIconBackground: transparent;
    --plusMinusSmallIconColor: var(--textColorMedium);
    --plusMinusSmallFontSize: var(--fontSizeMedium);
    --plusMinusSmallIconWeight: var(--fontWeightBold);
    /* Inputs */
    --inputColor: var(--textColorLight);
    --inputBg: transparent;
    --inputTextColor: var(--bodyTextColor);
    --inputBorder: var(--borderThickness) solid var(--lightBgColor);
    --inputBorderRadius: var(--btnBorderRadius);
    --inputFontSize: var(--fontSizeSmall);
    --inputPadding: .75em .75em;
    /* Modal */
    --modalBg: var(--bodyBgColor);
    --modalCloseBtnBackground: rgba(2552,255,255,.1);
    --modalCloseBtnColor: var(--textColorMedium);
    --modalIntroColor: var(--bodyTextColor);
    --modalIntroFontSize: var(--fontSizeMedium);
    --modalIntroLineHeight: var(--fontSizeMedium);
    --modalIntroWeight: var(--fontWeightBold);
    --modalFooterBg: var(--modalBg);
    --modalFooterBorder: var(--borderThicknessThick) solid var(--secondaryColor);
    --modalSmallBg: var(--medBgColor);
    --modalSmallPadding: 1.5em;
    /* Toast */
    --toastSuccessColor: var(--textColorDark);
    /* Header */
    --headerBgColor: var(--darkBgColor);
    --headerLogoWidth: 300px;
    /* Bottom Nav */
    --bottomNavBg: var(--secondaryColor);
    --bottomNavTextColor: var(--textColorDark);
    --bottomNavTextSize: var(--fontSizeExtraSmall);
    --bottomNavTextWeight: var(--fontWeightRegular);
    --bottomNavCartItemsBg: var(--accentColor);
    --bottomNavCartItemsColor: var(--textColorLight);
    --bottomNavCartItemsFontSize: var(--fontSizeSmall);
    --bottomNavCartItemsWeight: var(--fontWeightBold);
    /* Collections Nav */
    --collectionsNavBg: var(--bodyBgColor);
    --collectionsNavHorizontalPadding: .5em;
    --collectionsNavVerticalPadding: .5em;
    /* Collection List */
    --collectionListBorder: 1px solid var(--ambientColor);
    --collectionListChildItemBorder: .25em solid var(--secondaryColor);
    --collectionListItemHeaderBg: var(--bodyBgColor);
    --collectionListItemHeaderBorder: var(--borderThickness) solid rgba(255,255,255, 0.25);
    --collectionListItemHeaderPadding: 1em var(--horizontalPagePadding);
    --collectionListItemHeaderColor: var(--textColorLight);
    --collectionListItemHeaderFontSize: var(--fontSizeBase);
    --collectionListItemHeaderFontWeight: var(--fontWeightRegular);
    --collectionListChildItemHeader: rgba(255,255,255,.17);
    --collectionListItemExpandedBg: var(--btnActiveBg);
    --collectionListItemExpandedColor: var(--textColorDark);
    --collectionListChildItemExpandedBg: rgba(255,255,255,.17);
    --collectionListChildItemExpandedColor: var(--collectionListItemHeaderColor);
    --collectionListSecondaryChildItemHeader: rgba(255, 255, 255, .1);
    --collectionListSecondaryChildItemBorderColor: var(--medBgColor);
    /* Collection Item */
    --collectionItemBorderRadius: var(--borderRadius);
    --collectionItemWidth: 150px;
    --collectionItemMargin: 1em 5px 5px 5px;
    --collectionItemImageBg: var(--medBgColor);
    --collectionItemImageHeight: 110px;
    --collectionItemImageWidth: var(--collectionItemWidth);
    --collectionItemEmptyImageColor: var(--textColorMedium);
    --collectionItemEmptyImageFontSize: var(--fontSizeSmall);
    --collectionItemEmptyImageFontWeight: var(--fontWeightBold);
    --collectionItemTitleBg: var(--secondaryColor);
    --collectionItemTitleColor: var(--textColorDark);
    --collectionItemTitleFontSize: var(--fontSizeSmall);
    --collectionItemTitleFontWeight: var(--fontWeightBold);
    --collectionItemTitleHeight: 3.5em;
    --collectionItemTitlePadding: .35em 5px;
    --collectionItemPriceBg: rgba(0,0,0,.5);
    --collectionItemPriceBorderRadius: var(--borderRadiusSmall);
    --collectionItemPriceColor: var(--textColorMedium);
    --collectionItemPriceWeight: var(--fontWeightBold);
    --collectionItemDescriptionColor: var(--textColorMedium);
    --collectionItemDescriptionFontSize: var(--fontSizeSmall);
    /* Collection Vertical List */
    --collectionItemVertBg: var(--secondaryColor);
    --collectionItemVertOptionsBorder: var(--borderThickness) solid rgba(255,255,255, 0.25);
    --collectionItemVertBorderRadius: var(--borderRadius);
    --collectionItemVertBorder: var(--borderThicknessThin) solid rgba(255,255,255, 0.25);
    --collectionItemVertPadding: 0 1em .5em 1em;
    --collectionItemVertTitleBg: transparent;
    --collectionItemVertTitleColor: var(--textColorLight);
    --collectionItemVertTitleFontSize: var(--fontSizeBase);
    --collectionItemVertTitleFontWeight: var(--fontWeightBold);
    /* View Item & Item Select */
    --viewItemWrpBg: var(--lightBgColor);
    --viewItemBodyBg: var(--darkBgColor);
    --viewItemWrpBorderRadius: 0 0 var(--borderRadius) var(--borderRadius);
    --viewitemImageBg: var(--darkBgColor);
    --viewitemImageHeight: 20dvh;
    --viewItemNoImageBottomBorder: var(--borderThickness) solid var(--lightPrimaryColor);
    --viewItemHeaderInfoBg: rgba(0,0,0, 0.25);
    --viewItemHeaderTextColor: var(--textColorLight);
    --viewItemHeaderTextSize: var(--fontSizeBase);
    --viewItemHeaderTextWeight: var(--fontWeightBold);
    --viewItemHeaderPadding: .25em var(--horizontalPagePadding);
    --viewItemTextColor: var(--textColorLight);
    --viewItemDescriptionColor: var(--textColorMedium);
    --viewItemDescriptionFontSize: var(--fontSizeSmall);
    --itemSelectSeatLabelColor: var(--textColorDark);
    --itemSelectSeatBg: #4B4A4A;
    --itemSelectSeatBorderColor: #4B4A4A;
    --itemSelectSeatTextColor: var(--textColorMedium);
    --itemSelectSeatTextSize: var(--fontSizeBase);
    --itemSelectSeatSVGColor: var(--secondaryColor);
    --itemSelectSeatSVGSize: 20px;
    --itemSelectSeatSelected: var(--secondaryColor);
    --itemSelectSeatSelectedTextColor: var(--textColorDark);
    --itemSelectSeatSelectedSVGColor: var(--textColorDark);
    --itemSelectFooterTitleColor: var(--textColorLight);
    /* Modifiers */
    --modifierListBg: var(--medBgColor);
    --modifierListBorderRadius: var(--borderRadius);
    --modifierHeaderBorder: var(--borderThicknessThin) solid rgba(255,255,255, 0.35);
    --modifierHeaderColor: var(--textColorLight);
    --modifierHeaderFontSize: var(--fontSizeBase);
    --modifierHeaderFontWeight: var(--fontWeightBold);
    --modifierCheckBoxBorder: var(--borderThicknessThin) solid rgba(255,255,255, 0.25);
    --modifierCheckBoxSelectedColor: var(--btnPrimaryBorderColor);
    --modifierCheckBorder: var(--btnBorderWidth) solid var(--textColorMedium);
    --modifierCheckBorderRadius: var(--borderRadiusSmall);
    --modifierGroupPlusMinusInputBg: transparent;
    --modifierGroupPlusMinusInputBorder: none;
    --modifierGroupInputColor: var(--textColorMedium);
    --modifierGroupInputFontSize: var(--fontSizeBase);
    --modifierGroupInputFontWeight: var(--fontWeightBold);
    --modifierGroupLabelColor: var(--textColorMedium);
    --modifierGroupLabelFontSize: var(--fontSizeBase);
    --modifierItemChildBg: rgba(0,0,0,.25);
    --modifierPlusMinusBorder: var(--borderThickness) solid var(--medBgColor);
    --modifierPlusMinusBorderRadius: var(--btnBorderRadius);
    --modifierBtnBg: transparent;
    --modifierBtnBorder: 1.5px solid var(--secondaryColor);
    --modifierBtnColor: var(--bodyTextColor);
    --modifierBtnSelectedBg: var(--secondaryColor);
    --modifierBtnSelectedBorder: 1.5px solid var(--secondaryColor);
    --modifierBtnSelectedColor: var(--textColorDark);
    /* Home */
    --homeImage: url("https://cdn.theatertoolkit.com/media/flixbrewhouse/images/theater.jpg");
    --homeImageOpacity: .65;
    --homeTitleWrpBg: rgba(0,0,0, 0.25);
    --homeTitleWrpBlur: blur(10px);
    --homeTitleMarginTop: 4em;
    --hometitleFontFamily: var(--headingFontFamily);
    --homeTitleColor: var(--textColorLight);
    --homeTitleFontSize: var(--headingFontSize);
    --homeTitleFontWeight: var(--fontWeightBold);
    --homeTitleAlign: center;
    --homeTitleTransform: uppercase;
    --homeReorderBg: var(--darkBgColor);
    --homeReorderPadding: .5em var(--horizontalPagePadding);
    --homeReorderTitleColor: var(--textColorMedium);
    --homeReorderTitleFontSize: var(--fontSizeMedium);
    --homeReorderTitleWeight: var(--fontWeightBold);
    /* Confirm Seats */
    --confirmSeatsListBg: var(--lightBgColor);
    --confirmSeatsListBorderRadius: var(--borderRadius);
    --confirmSeatsListHeaderColor: var(--textDarkColor);
    --confirmSeatsListHeaderFontWeight: var(--fontWeightMedium);
    --confirmSeatsItemBg: var(--medBgColor);
    --confirmSeatsItemBorderRadius: var(--btnBorderRadius);
    --confirmSeatsItemColor: var(--textColorMedium);
    --confirmSeatsItemFontSize: var(--fontSizeMedium);
    --confirmSeatsItemFontWeight: var(--fontWeightBold);
    --confirmSeatsItemSVGColor: var(--textColorLight);
    --confirmSeatsItemSVGSize: 32px;
    --confirmSeatsItemCheckBoxSize: 32px;
    --confirmSeatsItemCheckBoxBorder: var(--btnPrimaryBorderColor) solid var(--btnBorderWidth);
    --confirmSeatsItemCheckBoxBorderRadius: var(--borderRadiusSmall);
    --confirmSeatsItemCheckBoxMarkColor: var(--btnPrimaryBorderColor);
    /* View Cart */
    --viewCartDetailsBgColor: var(--medBgColor);
    --viewCartDetailsBorder: none;
    --viewCartDetailsBgBorderRadius: var(--borderRadius);
    --viewCartDetailsColor: var(--textColorMedium);
    --viewCartDetailsFontSize: var(--fontSizeMedium);
    --viewCartDetailsFontWeight: normal;
    --viewCartDetailsHeight: 50px;
    --viewCartDetailsHeaderColor: var(--viewCartDetailsColor);
    --viewCartDetailsHeaderFontWeight: var(--fontWeightBold);
    --viewCartSeatNameColor: var(--textColorLight);
    --viewCartSeatNameFontSize: var(--fontSizeMedium);
    --viewCartSeatNameFontWeight: var(--fontWeightBold);
    --viewCartSeatNameSVGColor: var(--textColorLight);
    --viewCartSeatNameSVGSize: 20px;
    --viewCartItemDetailsColor: var(--textColorMedium);
    --viewCartItemDetailsFontSize: var(--fontSizeSmall);
    --viewCartItemBottomBorder: var(--borderThicknessThin) solid rgba(255,255,255,.15);
    --viewCartItemDetailsLinkFontSize: var(--fontSizeSmall);
    --viewCartItemDetailsItemFontSize: var(--fontSizeExtraSmall);
    --viewCartItemDetailsLinkColor: var(--textColorMedium);
    --viewCartItemDetailsPlusMinusInputBg: transparent;
    --viewCartItemDetailsPlusMinusInputColor: var(--textColorMedium);
    --viewCartItemDetailsPlusMinusIconBg: rgba(0,0,0,.2);
    --viewCartItemDetailsPlusMinusIconBorderRadius: var(--borderRadiusSmall);
    --viewCartItemDetailsPlusMinusIconFontSize: 1.35rem;
    --viewCartItemDetailsPlusMinusIconSize: 30px;
    --viewCartGratuityTitleColor: var(--primaryColor);
    --viewCartGratuityTitleFontSize: var(--fontSizeMedium);
    --viewCartGratuityTitleFontWeight: var(--fontWeightBold);
    --viewCartGratuityTitleTextTransform: uppercase;
    --viewCartGratuityGridBg: var(--accentColor);
    --viewCartGratuityGridBorder: var(--borderThickness) solid var(--medBgColor);
    --viewCartGratuityGridBorderRadius: var(--borderRadius);
    --viewCartGratuityOptionColor: var(--textColorMedium);
    --viewCartGratuityOptionFontSize: var(--fontSizeBase);
    --viewCartGratuityOptionFontWeight: var(--fontWeightBold);
    --viewCartGratuitySelectedOptionBg: var(--btnPrimaryBg);
    --viewCartGratuitySelectedOptionBorderRadius: var(--borderRadius);
    --viewCartGratuitySelectedOptionColor: var(--textColorMedium);
    --viewCartGratuitySelectedOptionFontWeight: var(--fontWeightBold);
    --viewCartTotalWrpBg: transparent;
    --viewCartTotalWrpBorder: none;
    --viewCartTotalWrpBorderRadius: var(--borderRadius);
    --viewCartTotalItemBottomBorder: var(--borderThickness) solid rgba(255,255,255,.15);
    --viewCartTotalItemColor: var(--textColorMedium);
    --viewCartTotalBg: var(--secondColor);
    --viewCartTotalColor: var(--textColorMedium);
    --viewCartTotalFontWeight: var(--fontWeightBold);
    /* Add Payment */
    --paymentSectionTitleColor: var(--textColorLight);
    --paymentSectionTitleFontFamily: var(--headingFontFamily);
    --paymentSectionTitleFontSize: var(--fontSizeLarge);
    --paymentSubSectionTitleColor: var(--textColorMedium);
    --paymentSubSectionTitleFontFamily: var(--headingFontFamily);
    --paymentSubSectionTitleFontSize: var(--fontSizeMedium);
    --paymentSubSectionTitleNumberColor: var(--textColorAccent);
}

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

html,
body {
    background-color: var(--bodyBgColor);
    color: var(--bodyTextColor);
    font-family: var(--fontFamily);
    font-size: var(--fontSizeBase);
    padding: 0;
    margin: 0;
}

*,
a,
button,
input {
    -webkit-tap-highlight-color: transparent;
}

/* Scroll Bar Settings */
@supports (scrollbar-width: auto) {
    body,
    .bm-container,
    .collectionsNav__list,
    .collectionItem__list,
    .itemSelect__body,
    .confirmSeats__list,
    .viewCart__wrp {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(-webkit-scrollbar) {
    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }

    ::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }

    ::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

/*-- System Colors --*/
.bg-success {
    background: var(--successColor) !important;
}

.bg-danger {
    background: var(--errorColor) !important;
}

.bg-warning {
    background-color: var(--warningColor) !important;
}

.bg-info {
    background-color: var(--infoColor) !important;
}

/*-- Loading Icon --*/

.spinner-container {
    position: fixed !important;
    top: 0;
    z-index: 8000;
    margin-left: auto;
    width: 100%;
    font-size: larger;
    text-align: center;
    vertical-align: middle;
    background: var(--loaderBackgroundColor);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 100vh;
}
.spinnerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 8100;
    width: 100%;
}
.spinnerContent__text {
    display: block;
    color: var(--loaderTextColor);
    font-size: var(--fontSizeBase);
    width: 90%;
    margin: 1em auto;
}
.sk-circle {
    margin: 0 auto !important;
}
.sk-circle .sk-child:before{
    background-color: var(--loaderIconColor) !important;
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                     INPUTS                       //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
.input__text {
    color: var(--inputTextColor);
    background: var(--inputBg);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRadius);
    font-size: var(--inputFontSize);
    width: 100%;
    padding: var(--inputPadding);
    margin-bottom: 1em;
}
input:focus-visible{
    border-color: var(--secondaryColor);
    outline:none;
}

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                    TYPOGRAPHY                    //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
h1 {
    color: var(--headingColor);
    font-family: var(--headingFontFamily);
    font-size: var(--headingFontSize);
    font-weight: var(--headingFontWeight);
    text-align: var(--headingFontAlignment);
    text-transform: var(--headingFontTransform);
    margin: .5em 0;
}
    h1:focus {
        outline: none;
    }

/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                  LAYOUT ELEMENTS                 //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

/*===========================
    Page
===========================*/
.page {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.page--padding {
    padding: 0 var(--horizontalPagePadding);
}

/*===========================
    Header
===========================*/
.header__fb {
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--headerBgColor);
    width: 100%;
}

.header__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: .5em;
}
    .header__brand  .header__logo {
        width: 100%;
        max-width: var(--headerLogoWidth);
    }
/*===========================
    Main
===========================*/
main {
    flex: 1;
    overflow: auto;
}

footer {
    bottom: 0px;
    width: 100%;
    position: sticky;
}

/*===========================
    Bottom Nav
===========================*/
.bottomNav {
    position: sticky;
    bottom: 40px;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: var(--bottomNavBg);
    width: 100%;
    padding: 0 .75em;
}

.bottomNav__inner {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.bottomNav__link {
    color: var(--bottomNavTextColor);
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    line-height: 1em !important;
    padding: .5rem 1rem;
    text-align: center;
    text-decoration: none;
}
    .bottomNav__link:hover {
        color: var(--bottomNavTextColor);
    }

.bottomNav__icon {
    font-size: 1.25em;
}

.bottomNav__text {
    font-size: var(--bottomNavTextSize);
    font-weight: var(--bottomNavTextWeight);
    text-transform: uppercase;
    margin-top: 5px;
}

.bottomNav__cart {
    position: relative;
}

.bottomNav__cartTotal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: .25em;
    top: 2px;
    background: var(--bottomNavCartItemsBg);
    border: solid .25em var(--bottomNavCartItemsBg);
    border-radius: 50%;
    min-height: 20px;
    min-width: 20px;
    aspect-ratio: 1 / 1;
    color: var(--bottomNavCartItemsColor);
    font-size: var(--bottomNavCartItemsFontSize);
    font-weight: var(--bottomNavCartItemsWeight);
    text-align: center;
}

/*===========================
    Search Bar
===========================*/
.searchBar {
    border: var(--inputBorder);
    border-radius: var(--borderRadius);
    padding: 0 0 0 .5em;
}
.searchBar__wrapper {
    background: var(--collectionsNavBg);
    padding: 0 .5em .5em .5em;
}

/*===========================
    Clock
===========================*/
.clock {
    background: var(--medBgColor);
    color: var(--textColorLight);
    text-align: center;
    font-weight: bold;
    padding: .25em 0;
    margin-bottom: 1em;
}


/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                     COMPONENTS                   //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

/*===========================
    Buttons
===========================*/

.btn--primary {
    background: var(--btnPrimaryBg);
    border-color: var(--btnPrimaryBorderColor);
    border-width: var(--btnBorderWidth);
    border-radius: var(--btnBorderRadius);
    border-style: solid;
    color: var(--btnPrimaryFontColor);
    font-family: var(--btnPrimaryFontFamily);
    font-weight: var(--btnPrimaryFontWeight);
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
}

.btn--secondary {
    background: var(--btnSecondaryBg);
    border-color: var(--btnSecondaryBorderColor);
    border-width: var(--btnBorderWidth);
    border-radius: var(--btnBorderRadius);
    border-style: solid;
    color: var(--btnSecondaryFontColor);
    font-family: var(--btnSecondaryFontFamily);
    font-weight: var(--btnSecondaryFontWeight);
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
}


.btn--tertiary {
    background: var(--btnTertiaryBg);
    border-color: var(--btnTertiaryBorderColor);
    border-width: var(--btnBorderWidth);
    border-radius: var(--btnBorderRadius);
    border-style: solid;
    color: var(--btnTertiaryFontColor);
    font-family: var(--btnSecondaryFontFamily);
    font-weight: var(--btnTertiaryFontWeight);
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
}

    .btn--primary:active,
    .btn--primary:focus,
    .btn--primary:hover,
    .btn--secondary:active,
    .btn--secondary:focus,
    .btn--secondary:hover,
    .btn--tertiary:active,
    .btn--tertiary:focus,
    .btn--tertiary:hover {
        background: var(--btnActiveBg);
        border-color: var(--btnActiveBorderColor);
        color: var(--btnActiveTextColor);
    }

.btn--bgBlur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn--large {
    font-size: var(--btnLargeFontSize);
    min-width: var(--btnLargeMinWidth);
    width: 100%;
    padding: var(--btnLargePadding);
    margin: var(--btnLargeMargin);
}

.btn--medium {
    font-size: var(--btnMediumSize);
    min-width: var(--btnMediumMinWidth);
    width: 100%;
    padding: var(--btnMediumPadding);
    margin: var(--btnMediumMargin);
}

.btn--small {
    font-size: var(--btnSmallFontSize);
    padding: var(--btnSmallPadding);
    margin: var(--btnSmallMargin);
}
.plusMinusButtons{
    display: flex;
    flex-direction: row;
    align-items: center;
}
    .plusMinusButtons .minus,
    .plusMinusButtons .plus {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--plusMinusIconBackground);
        color: var(--plusMinusIconColor);
        font-size: var(--plusMinusFontSize);
        font-weight: var(--plusMinusIconWeight);
        width: 32px;
        height: 32px;
    }
    .plusMinusButtons .minus {
        font-size: 1.75em;
    }
    .plusMinusButtons .modifierGroup__input {
        background: transparent;
        border: none;
        color: var(--plusMinusInputColor);
        font-size: var(--plusMinusInputFontSize);
        font-weight: var(--plusMinusInputWeight);
        text-align: center;
        width: 100px;
    }

/*===========================
    Icons
===========================*/
.icn:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none !important;
    line-height: inherit;
    font-size: inherit;
    font-style: normal;
    margin-right: 5px;
}

.icn--food:before {
    content: "\f805";
}
.icn--service:before {
    content: "\f562";
}
.icn--loyalty:before {
    content: "\f559";
}

/*===========================
    Blazor Modal
===========================*/
.blazored-modal {
    position: relative;
    display: block;
    background: var(--modalBg) !important;
    border: none !important;
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    box-shadow: none;
    height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
}

.bm-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh !important;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

.bm-header {
    padding: 0 !important;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.bm-close {
    background: var(--modalCloseBtnBackground) !important;
    border-radius: 0 0 0 var(--borderRadiusSmall) !important;
    font-size: 2rem !important;
    outline: none !important;
    border: none !important;
    line-height: 1 !important;
    margin: 0 !important;
}
    .bm-close span {
        color: var(--modalCloseBtnColor) !important;
    }

.modal__wrp {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.modal__header{
    margin-top: 1em;
}
.modal__body {
    flex: 1;
    overflow: auto;
    padding: 0 var(--horizontalPagePadding) .5em var(--horizontalPagePadding);
}
.modal__intro {
    color: var(--modalIntroColor);
    font-size: var(--modalIntroFontSize);
    line-height: var(--modalIntroLineHeight);
    font-weight: var(--modalIntroWeight);
    margin-bottom: 1em;
}
.modal__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--modalFooterBg);
    border-top: var(--modalFooterBorder);
    padding: 1em var(--horizontalPagePadding);
}
    .modal__footer .btn--large,
    .modal__footer .btn--medium {
        max-width: 80%;
    }

.blazored-modal.size-small {
    position: absolute;
    top: 5em;
    left: 0;
    right: 0;
    background: var(--modalSmallBg) !important;
    border-radius: var(--borderRadius) !important;
    height: auto !important;
    max-width: 80vw !important;
    width: 100% !important;
    padding: var(--modalSmallPadding) !important;
    margin: auto !important;
}

/*===========================
    CS TOAST
===========================*/
.cs-toast {
    display: none;
    z-index: 999;
    position: fixed;
    top: 2rem;
    left: 0;
    right: 0;
    border-radius: var(--borderRadius);
    width: 90%;
    margin: auto;
    color: var(--textColorDark);
}


.cs-toast-body {
    padding: 1em 1.5rem;
}

    .cs-toast-body p {
        margin: 0;
    }

.cs-toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}
.cs-toast-visible {
    display: block;
    animation: fadein .5s;
}

.cs-toast.bg-success {
    color: var(--toastSuccessColor);
}


/*===========================
    COLLECTIONS NAV
===========================*/
.collectionsNav {
    position: sticky;
    display: flex;
    justify-content: center;
    z-index: 10;
    background: var(--collectionsNavBg);
    padding: var(--collectionsNavVerticalPadding) var(--collectionsNavHorizontalPadding) var(--collectionsNavVerticalPadding) var(--collectionsNavHorizontalPadding);
}
.collectionsNav__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    padding: 0 0 .75em 0;
    margin: 0;
}
.collectionsNav__item {
    margin: 0 10px 0 0;
}
.collectionsNav__link {
    display: block;
    white-space: nowrap;
    text-decoration: none;
}


/*===========================
    COLLECTIONS LIST
===========================*/
.collectionList {
    padding: 0;
    margin: 0 auto 2em auto;
}

.collectionList__wrp {
    overflow: hidden;
}

    .collectionList__wrp:last-child {
        border-bottom: none;
        padding: 0;
    }
.collectionList__item {
    padding: 0;
    margin: 0 0 0 0;
}
.collectionList__header {
    position: relative;
    transition: all .3s ease;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    background: var(--collectionListItemHeaderBg);
    border-bottom: var(--collectionListItemHeaderBorder);
    color: var(--collectionListItemHeaderColor);
    font-size: var(--collectionListItemHeaderFontSize);
    font-weight: var(--collectionListItemHeaderFontWeight);
    padding: var(--collectionListItemHeaderPadding);
}
.collectionList__bar{
    display: none;
}
.collectionList__headerExpanded {
    background: var(--collectionListItemExpandedBg);
    color: var(--collectionListItemExpandedColor);
    font-weight: 700;
}

.collectionList__options {
    display: none;
    transform: translateY(-175%);
    height: 0;
    opacity: 0;
    transition: all .3s ease;
}

.collectionList__optionsActive {
    display: block;
    transform: translateX(0);
    height: auto;
    opacity: 1;
}
.collectionList__children .collectionList{
    margin: 0;
}
.collectionList__children .collectionList__header {
    background: var(--collectionListChildItemHeader);
    border-left: var(--collectionListChildItemBorder);
}
.collectionList__children .collectionList__headerExpanded {
    background: var(--collectionListChildItemExpandedBg);
    color: var(--collectionListChildItemExpandedColor);
}

.collectionList__children .collectionList__children .collectionList__header {
    background: var(--collectionListSecondaryChildItemHeader);
    border-left-color: var(--collectionListSecondaryChildItemBorderColor);
}

.collectionList__children .collectionList__children .collectionList__header.collectionList__headerDisableCollapse {
    background: var(--collectionListSecondaryChildItemHeader);
    border: none;
    padding-bottom: 0;
    margin-bottom: -.8em;
}
/*===========================
    COLLECTION ITEM
===========================*/
.collectionItem__list {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    padding: 0;
    margin: 0;
}
.collectionList__optionsActive .collectionItem__list {
    display: flex;    
    margin-bottom: .5em;
}

.collectionItem__item {
    position: relative;
    display: block;
    border-radius: var(--collectionItemBorderRadius);
    width: var(--collectionItemWidth);
    margin: var(--collectionItemMargin);
    text-decoration: none;
}
    .collectionItem__item:first-of-type {
        padding-left: 0;
        margin-left: var(--horizontalPagePadding);
    }
    .collectionItem__item:last-of-type {
        padding-right: 0;
        margin-right: var(--horizontalPagePadding);
    }
.collectionItem__image {
    background: var(--collectionItemImageBg);
    border-radius: var(--collectionItemBorderRadius) var(--collectionItemBorderRadius) 0 0;
    height: var(--collectionItemImageHeight);
    width: var(--collectionItemImageWidth);
    overflow: hidden;
}
    .collectionItem__image img {
        display: block;
        border-radius: var(--collectionItemBorderRadius) var(--collectionItemBorderRadius) 0 0;
        width: 100%;
        height: auto;
        min-height: var(--collectionItemImageHeight);
        margin-left: auto;
        margin-right: auto;
    }

.collectionItem__titleWrp {
    background: var(--collectionItemTitleBg);
    border-radius: 0 0 var(--collectionItemBorderRadius) var(--collectionItemBorderRadius);
    color: var(--collectionItemTitleColor);
    font-size: var(--collectionItemTitleFontSize);
    font-weight: var(--collectionItemTitleFontWeight);
    text-align: center;
    height: var(--collectionItemTitleHeight);
    padding: var(--collectionItemTitlePadding);
    overflow: hidden;
}
.collectionItem__price {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
    background: var(--collectionItemPriceBg);
    border-radius: var(--collectionItemPriceBorderRadius);
    color: var(--collectionItemPriceColor);
    font-weight: var(--collectionItemPriceWeight);
    padding: .25em;
}
.collectionItem__imageEmpty {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--collectionItemEmptyImageFontSize);
    font-weight: var(--collectionItemEmptyImageFontWeight);
    width: var(--collectionItemImageWidth);
    height: var(--collectionItemImageHeight);
    padding: 1em;
}

.collectionItem__desciption {
    color: var(--collectionItemDescriptionColor);
    font-size: var(--collectionItemDescriptionFontSize);
}
/*===========================
    VERTICAL COLLECTION
===========================*/
.collectionsListVrt .collectionList__optionsActive {
    border-bottom: var(--collectionItemVertOptionsBorder);
}
.collectionItem__listVrt {
    flex-direction: column;
    background: var(--collectionItemVertBg);
    border-radius: var(--collectionItemVertBorderRadius);
    overflow: unset;
    margin: 1em var(--horizontalPagePadding);
}
.collectionsListVrt:last-of-type{
    padding-bottom: 4em;
}
.collectionItem__listVrt .collectionItem__item {
    border-bottom: var(--collectionItemVertBorder);
    border-radius: 0;
    width: 100%;
    padding: var(--collectionItemVertPadding);
    margin: .5em 0;
}
    .collectionItem__listVrt .collectionItem__item:first-of-type{
        margin-left: 0;
    }
        .collectionItem__listVrt .collectionItem__item:last-of-type {
            border-width: 0;
            padding-bottom: 0;
            margin-right: 0;
        }
    .collectionItem__listVrt .collectionItem__image{
        background: transparent;
        border: none;
        width: auto;
        height: auto;
    }
    .collectionItem__listVrt .collectionItem__titleWrp {
        background: var(--collectionItemVertTitleBg);
        border-radius: unset;
        color: var(--primaryColor);
        font-size: var(--collectionItemVertTitleFontSize);
        font-weight: var(--collectionItemVertTitleFontWeight);
        text-align: left;
        height: auto;
        padding: 0;
    }

/*===========================
    ITEM SELECT
===========================*/
.itemSelect__header {
    position: relative;
    margin-top: 0;
}

.itemSelect__image {
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: var(--viewitemImageBg);
}
    .itemSelect__image img {
        display: block;
        height: var(--viewitemImageHeight);
    }
.itemSelect__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background: var(--viewItemHeaderInfoBg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(6px);
    color: var(--viewItemHeaderTextColor);
    font-size: var(--viewItemHeaderTextSize);
    font-weight: var(--viewItemHeaderTextWeight);
    padding: var(--viewItemHeaderPadding);
}

.itemSelect__description {
    color: var(--viewItemDescriptionColor);
    font-size: var(--viewItemDescriptionFontSize);
}

.itemSelect__instructions {
    margin: 0em .5em 1em 0em;
    width: 100%;
}

    .itemSelect__instructions textarea,
    .itemSelect__instructions textarea:focus {
        color: var(--inputColor);
        background-color: var(--inputBg);
        box-shadow: none;
        border: var(--inputBorder);
        border-radius: var(--inputBorderRadius);
        margin-top: .5em;
    }


.itemSelect__quantity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.itemSelect__quantityLabelWrp{
    display: none;
}
.itemSelect__seatSelection{
    width: 100%;
}
.itemSelect__seatGrid {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: .8em;
}
.itemSelect__footerTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--itemSelectFooterTitleColor);
    margin: 0 0 .5em 0;
}
    .itemSelect__footerTitle svg {
        fill: var(--itemSelectSeatSVGColor);
        width: var(--itemSelectSeatSVGSize);
        height: var(--itemSelectSeatSVGSize);
        margin-right: 10px;
    }


/*.itemSelect__seat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: var(--itemSelectSeatBg);
    color: var(--itemSelectSeatTextColor);
    font-size: var(--itemSelectSeatTextSize);
    margin-bottom: .5em;
    min-width: 0;
    padding: .5em;
}

    .itemSelect__seat .confirmSeats__seat svg {
        fill: var(--itemSelectSeatSVGColor);
        width: var(--itemSelectSeatSVGSize);
        height: var(--itemSelectSeatSVGSize);
        margin-right: 10px;
        margin-left: .5em;
    }

    .itemSelect__seat.active{
        background: var(--itemSelectSeatSelected);
        border-color: var(--itemSelectSeatSelected);
        color: var(--textColorDark);
    }

.itemSelect__seat.active svg{
    fill: var(--itemSelectSeatSelectedSVGColor);
}

.itemSelect__seatLabel {
    color: var(--itemSelectSeatLabelColor);
    padding-bottom: .25em;
}

    .itemSelect__seatLabel svg {
        fill: var(--itemSelectSeatSVGColor);
        width: var(--itemSelectSeatSVGSize);
        height: var(--itemSelectSeatSVGSize);
        margin: 0 .25em;
    }*/

.itemSelect__noImage .itemSelect__header {
    margin-top: 3em;
    margin-bottom: .5em;
}
.itemSelect__noImage .itemSelect__image {
    display: none;
    height: auto;
    overflow: unset;
}

    .itemSelect__noImage .itemSelect__image img {
        display: none;
    }

.itemSelect__noImage .itemSelect__info {
    position: relative;
    background: transparent;
    border-bottom: var(--viewItemNoImageBottomBorder);
    margin: 2em 0 0 0;
}
.itemSelect__noImage .itemSelect__body{
    height: 98vh;
}
.itemSelect__noImage .itemSelect__description{
    margin-bottom: .5em;
}


.itemSelect__body > .plusMinusButtons .modifierGroup__input {
    color: var(--plusMinusIconColor);
    font-size: var(--plusMinusFontSize);
    font-weight: var(--plusMinusIconWeight);
}
/*===========================
    MODIFIERS
===========================*/
/*-- List --*/
.modifierList__wrp {
    background-color: var(--modifierListBg);
    border-radius: var(--modifierListBorderRadius);
    overflow: hidden;
    margin: 1em 0;
}

.modifierList__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--modifierHeaderColor);
    padding: .5em .5em .25em .5em;
    margin: 0 0 .5em 0;
}

.modifierList__title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    color: var(--modifierHeaderColor);
    font-weight: var(--modifierHeaderFontWeight);
}

.modifierList__title--required {
    color: var(--textColorRequired);
    font-size: .7em;
    padding-left: .5em;
}

.modifierGroup__checkBoxWrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: var(--modifierCheckBoxBorder);
    padding: .5em .5em 0 .5em;
    margin: .5em 0 0 0;
}
    .modifierGroup__checkBoxWrp:last-of-type{
        margin-bottom: 1em;
    }
.modifierGroup__checkBox{
    position: relative;
    width: 24px;
    height: 24px;
}

    .modifierGroup__checkBox input[type="checkbox"] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        cursor: pointer;
        display: block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        line-height: 0;
    }

.modifierGroup__check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--modifierCheckBorder);
    border-radius: var(--modifierCheckBorderRadius);
    width: 100%;
    height: 100%;
}
.modifierGroup__checkBox input[type="checkbox"]:checked ~ .modifierGroup__check {
    border-color: var(--modifierCheckBoxSelectedColor);
}
    .modifierGroup__checkBox input[type="checkbox"]:checked ~ .modifierGroup__check:before {
        color: var(--modifierCheckBoxSelectedColor);
        font-family: "Font Awesome 6 Free";
        font-weight: var(--fontWeightBold);
        content: '\f00c';
        text-decoration: none !important;
        line-height: inherit;
        font-size: inherit;
        font-style: normal;
    }

.modifierGroup__label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-left: 10px;
    color: var(--modifierGroupLabelColor);
    font-size: var(--modifierGroupLabelFontSize);
    text-transform: capitalize;
}
.modifierGroup__labelName {
    text-transform: capitalize;
} 

.modifierItem__childModifier{
    background: var(--modifierItemChildBg);
    border-radius: var(--borderRadius);
    padding: .1em 1em;
    margin-bottom: 1em;
}

/*-- Plus Minus --*/
.modifierGroup__plusMinus {
    border: var(--modifierPlusMinusBorder);
    border-radius: var(--modifierPlusMinusBorderRadius);
    padding: .25em;
    margin: 1em 0;
}

.modifierGroup__plusMinusItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: var(--modifierCheckBoxBorder);
    padding: .5em 0 0 0;
    margin: .5em 0 0 0;
}

.modifierGroup__plusMinusLabel{
    width: 60%;
}

.modifierGroup__plusMinusLabel label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: .5em;
}
.modifierGroup__plusMinusName {
    color: var(--modifierGroupLabelColor);
    margin-right: 10px;
}
.modifierGroup__plusMinusItem .modifierGroup__plusMinus{
    margin: .25em .5em .25em 0;
}
    .modifierGroup__plusMinusItem .modifierGroup__plusMinus input {
        background: var(--modifierGroupPlusMinusInputBg);
        border: var(--modifierGroupPlusMinusInputBorder);
        color: var(--modifierGroupInputColor);
        font-size: var(--modifierGroupInputFontSize);
        font-weight: var(--modifierGroupInputFontWeight);
        text-align: center;
        width: 25px;
        margin: 0 5px;
    }


/* =================================
    NEEDS TO BE REVIEWED 
================================= */
/* Modifier Button */
.modifierButton__wrp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.modifierButton__btn input {
    margin-right: 100px;
}

.modifierButton__btn {
    flex: 1;
    padding: .5em;
    max-width: 50%;
    font-size: .9em;
}
.modifierButton__btn:last-of-type{
    margin-right: 0;
}

.modifierButton__btn label {
    color: var(--textColorDark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modifierButton__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--modifierBtnBg);
    border: var(--modifierBtnBorder);
    border-radius: var(--btnBorderRadius);
    width: 100%;
    padding: var(--btnMediumPadding);
    color: var(--modifierBtnColor);
}
    .modifierButton__info span {
        display: inline-block;
        white-space: nowrap;
    }

    .modifierButton__info .modifierButton__price {
        padding-left: .25em;
    }

.modifierButton__btn label:has(:checked) {
}

            .modifierButton__btn label:has(:checked) span {

            }

        

        .modifierButton__btn label input {
            position: absolute;
            display: none;
        }

/* This will declare how a selected input will look giving generic properties
    .modifierButton__btn input:checked + span {
        color: var(--catInputCheckedColor);
        text-shadow: 0 0 6px var(--textshadowColor);
    } */

/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and changes the background color of the span element.
*/

/*.action input:checked + span {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--catInputCheckedColor);
}

.modifierButton__btn input:checked {
    background: var(--modifierBtnSelectedBg);
    border: var(--modifierBtnSelectedBorder);
    color: var(--modifierBtnSelectedColor);
}   */

    .modifierButton__btn input:checked + .modifierButton__info {
        background: var(--modifierBtnSelectedBg);
        border: var(--modifierBtnSelectedBorder);
        color: var(--modifierBtnSelectedColor);
    }


/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                      PAGES                       //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
/*===========================
    HOME PAGE
===========================*/
.home {
    position: fixed;
    height: calc(100vh - 60px);
    width: 100vw;
    top: 60px;
    }
    .home:before {
        background-image: var(--homeImage);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: var(--homeImageOpacity);
        z-index: 0;
    }

.home__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: calc(100dvh - 10%);
    z-index: 1;
}

.home__titleWrp {
    background: var(--homeTitleWrpBg);
    -webkit-backdrop-filter: var(--homeTitleWrpBlur);
    backdrop-filter: var(--homeTitleWrpBlur);
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--homeTitleMarginTop);
    padding: 1em;
}

.home__title {
    color: var(--primaryColor);
    font-family: var(--hometitleFontFamily);
    font-size: var(--homeTitleFontSize);
    font-weight: var(--homeTitleFontWeight);
    text-align: var(--homeTitleAlign);
    text-transform: var(--homeTitleTransform);
}

.home__options {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1em;
}

.home__option{
    margin-bottom: 24px; 
}

.home__reorder {
    background: var(--homeReorderBg);
    width: 100%;
    padding: var(--homeReorderPadding);
}
.home__reorderTitle {
    color: var(--homeReorderTitleColor);
    font-size: var(--homeReorderTitleFontSize);
    font-weight: var(--homeReorderTitleWeight);
}
.home__reorder .collectionItem__list {
    display: flex;
}

/*===========================
   Confirm Seats
===========================*/
/*.c_orderConfirmSeats{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.c_orderConfirmSeats .modal__body{
    flex-grow: 1;
    min-height: 0;
}*/
/* Confirm Seats Modal */
.confirmSeats__list {
    background: var(--confirmSeatsListBg);
    border-radius: var(--confirmSeatsListBorderRadius);
    max-height: 85%;
    overflow-y: scroll;
    padding: 1em;
    margin: 1em 0 2em 0;
}

.confirmSeats__listRow{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}
.confirmSeats__listRow--header{
    margin-bottom: .5em;
}
.confirmSeats__listRowLabel {
    color: var(--confirmSeatsListHeaderColor);
    font-weight: var(--confirmSeatsListHeaderFontWeight);
}
.confirmSeats__item {
    position: relative;
    background: var(--confirmSeatsItemBg);
    border-radius: var(--confirmSeatsItemBorderRadius);
    font-size: var(--confirmSeatsItemFontSize);
    font-weight: var(--confirmSeatsItemFontWeight);
    width: 100%;
    padding: .5em;
    margin-bottom: .5em;
}
.confirmSeats__item:last-of-type{
    margin-bottom: 0;
}

.confirmSeats__seat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--confirmSeatsItemColor);
    font-family: var(--btnFontFamily);
    font-size: var(--confirmSeatsItemFontSize);
    font-weight: var(--confirmSeatsItemFontWeight);
}
    .confirmSeats__seat svg {
        fill: var( --confirmSeatsItemSVGColor);
        width: var(--confirmSeatsItemSVGSize);
        height: var(--confirmSeatsItemSVGSize);
        margin-right: 10px;
    }

.confirmSeats__checkBox {
    width: var(--confirmSeatsItemCheckBoxSize);
    height: var(--confirmSeatsItemCheckBoxSize);
}
    .confirmSeats__checkBox input[type="checkbox"] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        cursor: pointer;
        display: block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        line-height: 0;
    }
.confirmSeats__check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--confirmSeatsItemCheckBoxBorder);
    border-radius: var(--confirmSeatsItemCheckBoxBorderRadius);
    width: 100%;
    height: 100%;
}
input[type="checkbox"]:checked ~ .confirmSeats__check:before {
    color: var(--confirmSeatsItemCheckBoxMarkColor);
    font-family: "Font Awesome 6 Free";
    font-weight: var(--fontWeightBold);
    content: '\f00c';
    text-decoration: none !important;
    line-height: inherit;
    font-size: inherit;
    font-style: normal;
}

/*===========================
   SEAT CONFRIMATION SCREEN
===========================*/
.seatGrid__introContent{
    padding: 0 .5em;
}
    .seatGrid__introContent p{
        margin-bottom: .25em;
    }
.seatGrid__seatList {
    background: var(--medBgColor);
    border-radius: var(--borderRadiusSmall);
    color: var(--textColorAccent);
    font-family: var( --headingFontFamily);
    font-weight: bold;
    padding: .5em;
    margin-bottom: .5em;
}
.seatGrid__wrapper {
    position: relative;
    z-index: 6;
    padding: 1em 1em 2em 1em;
}
.seatGrid__screen {
    perspective: 100px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: .5em 0;
    border-top: .35rem solid  var(--textColorLight);
    pointer-events: none;
    text-align: center;
    position: relative;
}
    .seatGrid__screen:before {
        display: block;
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        height: 60px;
        background: rgba(242, 242, 242, 0.25);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(242, 242, 242, 0.25)), to(rgba(242, 242, 242, 0)));
        background: linear-gradient(to bottom, rgba(242, 242, 242, 0.25) 0, rgba(242, 242, 242, 0) 100%);
        transform: rotateX(4deg);
    }
.seatGrid__text {
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
    position: relative;
    font-size: 1.4em;
    display: block;
    color:  var(--textColorLight);
    text-align: center;
}
.seatGrid__grid {
    overflow: auto;
}
.seatGrid__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    padding: .15em 0;
    position: relative;
    z-index: 1;
}
.seatGrid__col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    flex: 1 1 100%;
    max-width: 32px;
    margin: .25em 3px;
    position: relative;
    z-index: 1;
}
.seatGrid__rowLabel, 
.seatGrid__colLabel, 
.seatGrid__podLabel {
    display: block;
}
.seatGrid__rowLabel {
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
    position: relative;
    color: var(--textColorMedium);
}
    .seatGrid__rowLabel:first-child {
        margin-top: 0;
    }

.seatGrid__seat, 
.seatGrid__checkbox {
    z-index: 1;
}

.seatGrid__seat, 
.seatGrid__input, 
.seatGrid__checkbox {
    width: 100%;
    position: relative;
}
.seatGrid__input,
.seatGrid input[type=checkbox] {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    display: block;
    appearance: none;
    opacity: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    line-height: 0;
}
.seatGrid__colLabel {
    position: absolute;
    z-index: 2;
    top: 72%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    font-size: .65em;
    transition: all .3s ease;
}
.seatGrid__icon svg {
    fill: transparent;
    stroke:  var(--textColorLight);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    transition: all .3s ease;
    width: 100%;
    position: relative;
    z-index: 1;
}
    .seatGrid__icon svg * {
        fill: inherit;
        stroke: inherit;
        stroke-width: inherit;
    }
    .seatGrid__icon svg .handicap-icon-cls-1, 
    .seatGrid__icon svg .handicap-icon-st0 {
        stroke: none;
        stroke-width: 0;
        fill:  var(--textColorLight);
    }
    .seatGrid__icon svg .handicap-icon-cls-2 {
        fill: none;
        stroke:  var(--textColorLight);
        stroke-miterlimit: 10;
        stroke-width: 2px;
    }
.seatGrid__col--selected .seatGrid__colLabel {
    color:  var(--textColorDark);
}
.seatGrid__col--selected .seatGrid__icon svg {
    fill: var(--secondaryColor);
}
    .seatGrid__col--selected .seatGrid__icon svg .handicap-icon-cls-1,
    .seatGrid__col--selected .seatGrid__icon svg .handicap-icon-st0{
        stroke: var(--bodyBgColor);
        fill: none;
    }
    .seatGrid__col--selected .seatGrid__icon svg .handicap-icon-cls-2 {
        fill: var(--textColorLight);
        stroke: none;
    }

.seatGrid__zoomContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 5px;
}
.seatGrid__zoomLabel{
    display: inline-block;
}
.seatGrid__zoomIcon {
    background: 0;
    border: 0;
    color: var(--btnPrimaryBg);
    font-size: 1.5em;
    margin-left: .5em;
}
.seatGrid__zoomIcon--zoomIn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f055";
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none !important;
    line-height: inherit;
    font-size: inherit;
    color: inherit;
    font-style: normal;
}
.seatGrid__zoomIcon--zoomOut::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f056";
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none !important;
    line-height: inherit;
    font-size: inherit;
    color: inherit;
    font-style: normal;
}
/*===========================
   VIEW CART
===========================*/
.viewCart__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}
.viewCart__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 1em 0 .5em 0;
}
.viewCart__header h1{
    margin: 0;
}
.viewCart__header .btn--tertiary{
    margin: 0;
}
.viewCart__footer {
    display: block;
    border-top: none;
    padding-top: 0px;
}
.viewCart__footerButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em .5em;
    white-space: nowrap;
}
    .viewCart__footerButtons .viewCart__btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: var(--fontSizeBase);
        width: 33%;
        min-width: unset;
        max-width: unset;
        height: 42px;
        margin-left: 0;
        margin-right: 0;
    }
        .viewCart__footerButtons .viewCart__btn + .viewCart__btn {
            width: 64%;
        }

    .viewCart__footerButtons .viewCart__closedOrder {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        white-space: nowrap;
        width: 100%;
    }

    .viewCart__footerButtons .viewCart__closedOrder .viewCart__btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: var(--fontSizeBase);
        min-width: unset;
        max-width: unset;
        height: 42px;
        margin-left: 0;
        margin-right: 0;
/*        width: 47.5%;*/
        width: 100%;
    }

.viewCart__orderDetailsWrp {
    flex: 1;
    min-height: 0;
}

.viewCart__orderDetails {
    background: var(--viewCartDetailsBgColor);
    border: var(--viewCartDetailsBorder);
    border-radius: var(--viewCartDetailsBgBorderRadius);
    color: var(--viewCartDetailsColor);
    font-size: var(--viewCartDetailsFontSize);
    font-weight: var(--viewCartDetailsFontWeight);
    overflow: hidden;
    padding: 0 .5em;
}

.viewCart__orderDetailsHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--viewCartDetailsHeaderColor);
    font-weight: var(--viewCartDetailsHeaderFontWeight);
    padding: .5em 0;
}

.viewCart__orderDetailsList{
    display: none;
    visibility: hidden;
}

.viewCart__orderDetails--expanded {
    display: block;
    overflow-y: scroll;
    height: auto;
    max-height: 100%;
}
    .viewCart__orderDetails--expanded .viewCart__orderDetailsHeader .fa-chevron-down {
        transform: rotate(180deg);
    }
    .viewCart__orderDetails--expanded .viewCart__orderDetailsList {
        display: block;
        visibility: visible;
    }

    .viewCart__subGroup {
        margin-bottom: .75em;
    }

.viewCart__reorder {
    border-radius: var(--borderRadiusSmall);
    color: var(--textColorMedium);
    font-size: .8rem;
    font-weight: normal;
    text-transform: none;
    padding: .15em .5em;
}

.viewCart__updatePayment {
    font-size: 1rem;
    font-weight: normal;
    padding: .5em .5em;
    margin-bottom: 1em;
}

.viewCart__seatName {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--viewCartSeatNameColor);
    font-size: var(--viewCartSeatNameFontSize);
    font-weight: var(--viewCartSeatNameFontWeight);
}

    .viewCart__seatName svg {
        fill: var(--viewCartSeatNameSVGColor);
        width: var(--viewCartSeatNameSVGSize);
        height: var(--viewCartSeatNameSVGSize);
        margin-right: 10px
    }
.viewCart__details {
    color: var(--viewCartItemDetailsColor);
    font-size: var(--viewCartItemDetailsFontSize);
    margin-top: .5em;
}

.viewCart__item {
    display: flex;
    flex-direction: column;
    border-top: var(--viewCartItemBottomBorder);
    padding: .5em 0;
    margin: .5em 0;
}
.viewCart__itemDetails{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .25em;
}
.viewCart__showDetails{
    width: 100px;
}
.viewCart__itemDetails--left {
    display: flex;
    flex-direction: row;
}

.viewCart__qty {
    margin-right: 5px;
}

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

.viewCart__itemModifiers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    opacity: .8;
}

.viewCart__itemDetailslink {
    font-size: var(--viewCartItemDetailsLinkFontSize);
    color: var(--viewCartItemDetailsLinkColor);
}

.viewCart__modifierItem {
    font-size: var(--viewCartItemDetailsItemFontSize);
    margin-bottom: .25em;
}

.viewCart__plusMinus .modifierGroup__plusMinus {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    margin: 0;
}
    .viewCart__plusMinus .modifierGroup__plusMinus input {
        background: var(--viewCartItemDetailsPlusMinusInputBg);
        border: none;
        color: var(--viewCartItemDetailsPlusMinusInputColor);
        text-align: center;
        width: 25px;
        margin: 0 5px;
    }
.viewCart__plusMinus .minus,
.viewCart__plusMinus .plus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--viewCartItemDetailsPlusMinusIconBg);
    border-radius: var(--viewCartItemDetailsPlusMinusIconBorderRadius);
    font-size: var(--viewCartItemDetailsPlusMinusIconFontSize);
    width: var(--viewCartItemDetailsPlusMinusIconSize);
    height: var(--viewCartItemDetailsPlusMinusIconSize);
}

.viewCart__trashCan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--viewCartItemDetailsPlusMinusIconSize);
    height: var(--viewCartItemDetailsPlusMinusIconSize);
}

.viewCart__gratuityWrp {
    margin: 1em 0 1em 0;
}
.viewCart__gratuityTitleWrp {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.viewCart__gratuityTitle {
    color: var(--viewCartGratuityTitleColor);
    font-size: var(--viewCartGratuityTitleFontSize);
    font-weight: var(--viewCartGratuityTitleFontWeight);
    line-height: 1;
    text-transform: var(--viewCartGratuityTitleTextTransform);
}
.viewCart__gratuityTitle--small{
    font-size: .8rem;
}
.viewCart__gratuityGridWrp{
    margin: .5em 0 1em 0;
}

.viewCart__gratuityGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: var(--viewCartGratuityGridBg);
    border: var( --viewCartGratuityGridBorder);
    border-radius: var(--viewCartGratuityGridBorderRadius);
}

.viewCart__gratuityOption {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--viewCartGratuityOptionColor);
    font-size: var(--viewCartGratuityOptionFontSize);
    font-weight: var(--viewCartGratuityOptionFontWeight);
    height: 40px
}

    .viewCart__gratuityOption.active {
        background-color: var(--viewCartGratuitySelectedOptionBg);
        border-radius: var(--viewCartGratuitySelectedOptionBorderRadius);
        color: var(--viewCartGratuitySelectedOptionColor);
        font-weight: var(--viewCartGratuitySelectedOptionFontWeight);
    }

.viewCart__totalWrp {
    background: var(--viewCartTotalWrpBg);
    border: var(--viewCartTotalWrpBorder);
    border-radius: var(--viewCartTotalWrpBorderRadius);
    padding: .5em 0 0 0;
}
.viewCart__totals {
    margin: 0 0 0 0;
}
.viewCart__totalItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: var(--viewCartTotalItemBottomBorder);
    color: var(--viewCartTotalItemColor);
    font-size: .85rem;
    padding: 0 .5em .25em .5em;
    margin-bottom: .5em;
}

.viewCart__total {
    border-bottom: none;
    font-size: 1rem;
    font-weight: var(--viewCartTotalFontWeight);
    padding: 0 .5em;
    margin-bottom: 0;
}


/*===========================
   Add Payment Screen
===========================*/
.paymentScreen__hr {
    background: var(--hrBg);
    border: var(--hrBorder);
    border-radius: var(--hrBorderRadius);
    height: var(--hrHeight);
    width: var(--hrWidth);
    padding:0;
    margin: .5em auto 1em auto;
}
.paymentScreen__sectionTitle {
    color: var(--paymentSectionTitleColor);
    font-family: var(--paymentSectionTitleFontFamily);
    font-size: var(--paymentSectionTitleFontSize);
    margin-bottom: .25em;
}
.paymentScreen__subSection{
    margin-bottom: 1.25em;
}
.paymentScreen__subSectionTitle {
    color: var(--paymentSubSectionTitleColor);
    font-family: var(--paymentSubSectionTitleFontFamily);
    font-size: var(--paymentSubSectionTitleFontSize);
    margin: .5em 0 .25em 0;
}
    .paymentScreen__subSectionTitle--numb{
        display: inline-block;
        color: var(--paymentSubSectionTitleNumberColor);
        padding-right: 10px;
    }

.paymentScreen__input {
    color: var(--inputTextColor);
    background: var(--inputBg);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRadius);
    font-size: var(--inputFontSize);
    width: 100%;
    padding: var(--inputPadding);
    margin-bottom: 1em;
}
.paymentScreen__inputGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
}
.paymentScreen__inputGroup .paymentScreen__input{
    margin-bottom: 0;
    margin-right: .75em;
}
.paymentScreen__wrp {
    position: relative;
    background: var(--modalBg);
}
.paymentScreen__body {
    overflow: unset;
}
.paymentScreen__footer {
    position: relative;
}
.paymentScreen__loyaltyList{
    background: var(--medBgColor);
    border-radius: var(--borderRadiusSmall);
    width: 100%;
    margin-bottom: 1em;
}
.paymentScreen__loyaltyItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: .25em solid rgba(0, 0, 0, .5);
    padding: .75em;
}
    .paymentScreen__loyaltyItem:last-child {
        border-bottom: none;
    }
.paymentScreen__loyaltyName{
    flex: 1;
    font-size: var(--fontSizeSmall);
    margin-right: 10px;
}

/*===========================
   Add Payment Screen
===========================*/
.loyaltyScreen__login {
    margin-top: 3em;
    margin-bottom: .5em;
}
.loyaltyScreen__listItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(0, 0, 0, .25);
    padding-bottom: .5em;
    margin-bottom: .5em;
}

    .loyaltyScreen__listItem:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

.loyaltyScreen__name {
    flex: 1;
    font-size: var(--fontSizeSmall);
    margin-right: 10px;
}
.loyaltyScreen__valid {
    color: var(--textColorAccent);
    font-size: var(--fontSizeSmall);
    font-weight: bold;
}

.loyaltyScreen__footer a {
    text-decoration: underline !important;
}
/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                   MEDIA QUERIES                  //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/
@media only screen and (min-width:800px) {
    .blazored-modal {
        max-width: 800px;
        margin: 0 auto !important;
    }
    .modal__wrp{
        position: relative;
    }
    .modal__footer .btn--large,
    .modal__footer .btn--medium {
        min-width: unset;
    }

    .itemSelect__seatSelection {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .itemSelect__seat {
        min-width: unset;
    }
/*    .itemSelect__body {
        overflow: auto;
        height: 100%;
        padding-left: var(--horizontalPagePadding);
        padding-right: var(--horizontalPagePadding);
        margin-left: auto;
        margin-right: auto;
    }*/
    .itemSelect__header--firstRow {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        background: var(--viewitemImageBg);
    }
    .itemSelect__image {
        display: block;
        background: transparent;
    }
    .itemSelect__image img{
        height: 150px;
    }
    .itemSelect__info {
        position: relative;
        flex: 1;
        background: transparent;
    }
    .itemSelect__name{
        padding-left: .5em;
    }
}

@media only screen and (min-width:1200px) {
    .searchBar__wrapper,
    .clock,
    .collectionList,
    .bottomNav,
    .collectionsNav {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}