/**
  Default Variables used by all templates
  These should be overridden in individual template folders variables.css file.
  Anything a theme can customize should be a variable (with the exception of downloaded fonts),
  and all class definitions should be defined in customer_theme/theme.css

  Todo: change styles.css to a scss file and cleanup
 */
:root {
    /*========= PRIMARY VARIABLES ========= */
    /*
    These are the base variables that define the colour schemes
    for each theme file.
    The variables in this file are the fallback variables
    if the whitelabel variables.css don't have them defined.
    They are referenced by the common variables
    listed below.
     */
    --stripe-height: 78px;
    --content-columns: 10;
    --gutter-columns: 4;
    --device-scale: 0.26;
    --remotek-scale: 0.55;

    --default-font: Roboto, Open Sans, sans-serif;
    --secondary-font: DINAlternate, sans-serif;
    --tertiary-font: DINProLight, sans-serif;

    --primary-color: #0a95d6;

    --accent_color_1: #ED1651;
    --accent_color_2: #1D388F;
    --accent_color_3: #52BECC;

    --success-color: #00a03c;

    --dark_main_hover: #9BE3F5;


    --button_color: var(--primary-color);

    --light_font_color: #FFF;
    --dark_font_color: #212B36;

    --desktop_background: url(desktop_background.jpg);
    --mobile_background: url(mobile_background.jpg);

    /*========= COMMON VARIABLES ========= */
    /*
    These are common between all variable.css files.
    They are linked to individual classes. When creating
    a new class in theme.css, create it's variables
    here.
     */

    --header-height: 60px;
    --header-background-color: transparent;
    --header-box-shadow: none;

    --switchTable-color: var(--accent_color_1);

    --titleTextWhite-margin-bottom: 14px;
    --titleTextWhite-font-size: 42px;
    --titleTextWhite-font: var(--secondary-font);

    --alert-add-item-success-background-color: #9BE3F5;
    --alert-add-item-success-border-color: #82DBF3;
    --alert-add-item-success-color: #027DA4;

    --noLocation_background_color: #000;

    --headertext-color: var(--accent_color_2);

    --btn-pd-color: #7c7c7c;
    --btn-pd-background-color: #fff;
    --btn-pd-border-color: var(--accent_color_1);

    --btn-pd-dark-background-color: var(--primary-color);
    --btn-pd-dark-border-color: var(--primary-color);

    --notificationBar-background-color: var(--accent_color_1);;

    --quickOrderBar-background-color: var(--accent_color_1);

    --loadingBorder-border-left-color: #00b4e9;

    --signin-color: var(--primary-color);

    --btn-secondary-color-background-color: #9765ab;

    --cartBtn-background-color: var(--accent_color_1);

    --prettyOrange-color: #000000;

    --btn-custom-tenant-background-color: var(--accent_color_1);

    --btn-sign-custom-hover-background-color: var(--accent_color_1);

    --btn-inverted-custom-border-color: #000;

    --btn-sign-text-alert-background: #9765ab;
    --btn-sign-text-alert-hover: #563663;

    --radio-checkbox-hover-border-color: var(--accent_color_1);

    --radio-checkbox-checked-border-color: var(--accent_color_1);
    --radio-checkbox-checked-background-color: var(--accent_color_1);

    --cusItemHeader-font: var(--primary-font);
    --cusItemHeader-font-weight: normal;
    --cusItemHeader-color: #000;

    --bbotInstructionsToPatron-background-color: white;

    --menubackground-background-color: #f7f7f7;

    --consumerLpLogo-width: 101px;
    --consumerLpLogo-max-width: none;
    --consumerLpLogo-margin-top: 0px;

    --menuLogo-width: 61px;


    --menuLogo-margin-top: 0px;

    --menuLogo-padding-top: 0px;

    --customFont1-font: var(--default-font);

    --customColor2-color: #fff;

    --price-font: var(--secondary-font);

    --name-font: var(--default-font);

    --changeadd-color: var(--accent_color_1);

    --addItemPrice-color: var(--accent_color_1);

    --btn-link-color: var(--accent_color_1);

    --active-color: white !important;
    --active-background-color: var(--accent_color_1)!important;

    --button-text-line-height: 30px!important;

    --main-body-height: 110vh;

    --hero-bg-wl-background-color: var(--accent_color_2);

    --bgb-background-color: #FFF !important;
    --bgb-color: #000 !important;

    --shoppingSvg-stroke: #FFF;

    --stripecard-background-color: var(--accent_color_1);;

    --headerLogo-margin-top: 11px;
    --headerLogo-margin-left: 20px;

    --textMute-font: var(--default-font);
    --notificationBar-font: var(--default-font);
    --quickOrderBar-font: var(--default-font);

    /* Post-refactor variables */

    --titleTextWhite-color: #FFF;
    --titleTextWhite-font-weight: bold;
    --titleTextWhite-text-transform: uppercase;

    --landing-page-account-font: inherit;
    --landing-page-account-font-size: inherit;

    --location-button-font: var(--tertiary-font);
    --location-button-font-size: inherit;

    --companyLogoPosition-display: inherit;

    --main-menu-button-background-color: inherit;
    --main-menu-button-font: inherit;
    --main-menu-button-font-size: inherit;

    --submenu_link-font: inherit;
    --submenu_link-font-size: inherit;

    --menu-item-heading-font: inherit;
    --menu-item-heading-font-size: inherit;

    --textMute-font-size: inherit;

    --itemTitle-font: inherit;

    --btn-quantity-wl-font: inherit;
    --btn-quantity-wl-font-size: inherit;

    --modifier-group-header-background-color: #efefef;
    --modifier-group-header-title-color: inherit;
    --modifier-group-header-subtitle-color: inherit;

    --btn-sign-custom-font: inherit;

    --checkout-item-font: inherit;

    --totalText-font: inherit;
    --totalText-font-size: 16px;

    --totalPrice-font: inherit;
    --totalPrice-font-size: 16px;

    --changeadd-font: inherit;
    --changeadd-font-size: inherit;
    --footerWhiteLabel-opacity: 1;

    --alert-info-background-color: var(--accent_color_2);

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

    /* ====== FAB Button Defaults ===== */
    --fab_scale: 1.3;
    --fab_btn_color: #ccc;
    --fab_btn_text: #fff;

    --fab_btn_opacity: 0.8;

    --fab_i18n_color: #ccc;
    --fab_i18n_text: var(--dark_font_color);

    --fab_lang_color: #ccc;
    --fab_lang_text: var(--dark_font_color);

    --fab_party_color: #000;
    --fab_party_text: var(--light_font_color);

    /*  Input Variables */
    --input-text__border-width: 1px;
    --input-text__border-style: solid;
    --input-text__border-color: #767676;
    --input-text__border-radius: 0px;

    --input-text-focus__border-width: 1px;
    --input-text-focus__border-style: solid;
    --input-text-focus__border-color: #767676;


    /* Oder-Menu-Container Defaults */
    --order-menu-container__background-color: none;
    --order-menu-container__border-radius: 5px;
    --order-menu-container__padding: 40px;

    /*  Order-Form Defaults */
    --wl-input__height: 44px !important;
    --wl-input__font-size: 18px !important;
    --wl-input__font-family: DIN-light;
    --wl-input__border-radius: 5px;
    --wl-input__border-color: none;
    --wl-input__border-style: none;
    --wl-input__border-width: none;
    --wl-input__padding: 6px 16px;
    --wl-input__box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);

    /* Order Button Defaults */
    --wl-order-btn__border-radius: 100px;
    --wl-order-btn__border-color: none;
    --wl-order-btn__border-style: none;
    --wl-order-btn__border-width: none;
    --wl-order-btn__padding: 0px 14px;
    --wl-order-btn__height: 44px;
    --wl-order-btn__width: 150px;
    --wl-order-btn__font-size: 16px;
    --wl-order-btn__box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    --wl-order-btn__min-width: 150px;
    --wl-order-btn__min-width: 100%;
    --wl-order-btn__text-transform: none;
    --wl-order-btn__font-weight: normal;
    --wl-order-btn__margin-top: 33px;

    /*  Pick-Up-Delivery-Button Variables */
    --wl-pickup-delivery-btn__height: 44px;
    --wl-pickup-delivery-btn__padding: 0 14px;
    --wl-pickup-delivery-btn__text-color: #FFF;
    --wl-pickup-delivery-btn__font-weight: 400;
    --wl-pickup-delivery-btn__box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    --wl-pickup-delivery-btn__box-shadow__hover: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);

    /*  Pick-Up-Delivery Map Variables */
    --lb-background-color: #FFF;
    --lb-main-font-color: var(--accent_color_1);
    --lb-padding-top-desktop: 0px;
    --lb-padding-top-mobile: 100px;
    --lb-margin-top-mobile: 120px;
    --lb-selected-pu-button-bg: var(--accent_color_1);
    --lb-selected-pu-button-color: var(--accent_color_1);
    --lb-main-border-color: var(--accent_color_1);
}