:root {
    --color-background-main: #ffffff; /* NEW -- White */
    --color-background-main-hover: #6ac4ef; /* Sanctuary Spa Color */
    --color-background-primary: #0D3E85;  /* NEW -- Directoire Blue */
    --color-background-primary-hover: #6ac4ef; /* Sanctuary Spa Color */
    --color-background-secondary: #e7e7e7;  /* Snowflake Grey */
    --color-background-secondary-hover: #6ac4ef; /* Sanctuary Spa Color, Allow Cookies Decline, Payment Button */
    --color-background-tertiary: #447eeC;  /* Button Blue Color */
    --color-background-tertiary-hover: #6ac4ef; /* Sanctuary Spa Color, Sign In, Customize Item Add */
    --color-background-quarternary: #f0f0f0; /* Snowflake Color, Locations Address Field */
    --color-background-quarternary-hover: #e1e1e1; /* Jupiter Color */
    --colorActive: #2a93d6; /* Kahu Blue Color, Button Click Color */
    --color-error: #e3310d; /* Dynamite Red Color, Button Click Color */
    --color-border-default: #717171; /* Dull Color, Promo Code, Fundraiser Code, Store Locator */
    --color-border-secondary: #717171; /* Dull Color, For Secondary Buttons */

    /* Accent */
    --color-accent: var(--color-background-primary); /* Directoire Blue */
    --color-accent-hover: #6ac4ef; /* Sanctuary Spa Color, Order Type Store Locator Hover */

    /* Text */
    --color-text-primary: #000000; /* NEW -- Black Color */
    --color-text-secondary: #717171; /* Dull Color */
    --color-text-tertiary: #000000;  /* Black Color */
    --color-text-tertiary-hover: #6ac4ef;  /* Chromis Damsel Blue Color */
    --color-text-quaternary: #FFFFFF; /* NEW -- White Color, Selected Button Color */
    --color-text-quinary: #FFFFFF;  /* White Color */
    --color-text-senary: #447EEC;  /* Directoire Blue Color */
    --color-text-main-header: #FFFFFF; /* White Color, Text colors for Title's */

    /* Button */
    --color-button-text: #FFFFFF; /* White Color */
    --color-button-background: var(--color-background-primary); /* Directoire Blue */
    --color-button-background-hover: #9ad7fe; /* Shiva Blue Color, Allow Cookies Accept, Sign In, Customize Item Add */
    --color-button-border: #717171; /* Dull Color */
    --color-button-border-secondary: #FFFFFF; /* White Color */

    /* Other */
    --color-deal-builder-bar: var(--color-accent);
    --color-deal-builder-bar-light: #4d4a48;

    --shadow:  0px 4px 2px rgba(0, 0, 0, 0.18);

    --hover-transition: all 0.1s ease;
    --hover-shadow: 0 4px 2px rgba(0, 0, 0, 0.5);
    --hover-transform: scale(1.02)
}

/* Header */
.header {
	--header-background-color: var(--color-background-primary);
    --header-text-color: var(--color-text-main-header);
	--header-icon-color: var(--color-text-quinary);
    --header-cart-items-background-color: var(--color-text-primary);
    --header-cart-items-color: var(--color-text-quinary);
}

/* Landing */
.location-info-btn {
    color: var(--color-text-primary);
}

/* Deliver To/Store Location Bar Color */
#div_header_location_bar > .location-info-bar {
    color:White;
}

/* Landing Page Dine In/Take Out Location */
#div_landing_location > .location-info-bar {
    color:Black;
}

/* Segmented Button, Order Type Selection */
.segmented-button {
    --segmented-button-bg-color: var(--color-background-secondary);
    --segmented-button-active-text-color: var(--color-background-secondary);
    --segmented-button-border-color: var(--color-button-border);
}

    .segmented-button > button {
        color: var(--color-text-primary);
    }

    .segmented-button > button.active {
        color: var(--color-text-quaternary);
        background-color: var(--color-background-tertiary);
    }

/* Locations */
.locations-main-container {
    --border: 1px solid var(--color-border-default);
    --locations-card-bg-color: var(--color-background-secondary);
    --locations-card-bg-color-active: var(--color-background-quarternary);
}

.search-container {
    background-color: var(--color-background-secondary);
}

.store-address.active {
    background-color: var(--color-background-primary);
    color: #FFFFFF;
    --locations-card-secondary-text-color: var(--color-text-quinary);
}

/* Pill Bar */
.pill-bar-container {
    --pill-bar-background-color: var(--color-background-secondary);
    --pill-bar-text-color-active: var(--color-text-quaternary);
    --pill-bar-background-color-active: var(--color-background-tertiary);
}

.segmented-button > button:not(.active):hover {
  color: var(--color-text-quaternary);
}

/* Menu */
.menu-item-card-small {
    --menu-item-card-bg-color: var(--color-background-secondary);
    --menu-item-card-bg-color-hover: var(--color-background-secondary-hover);
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.menu-item-cart-card-actions .item-quantity {
	background-color: #d5d5d5;
}

.menu-item-card-small:not(.selected):hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
    background-color: var(--color-background-secondary);
}

.meal-deal-card {
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.meal-deal-card:hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
    background-color: var(--color-background-secondary);
    --meal-deal-card-border-color: var(--color-button-border-secondary);
}

@media (max-width: 700px) {
    .menu-parent-wrapper .menu-item-card-parent {
        padding: 9px 15px;
    }
}

/* Navbar */
#nav_bottom {
    --navbar-background-color: var(--color-background-secondary);
    --navbar-icon-color: var(--color-text-primary);
    --navbar-icon-active-color: var(--color-background-secondary);
}

/* Fancy Title */
.fancy-title {
    --fancy-title-first-color: var(--color-text-primary);
}

.fancy-title > :first-child {
  color: Black;
}

/* Hamburger */
#modal_hamburger {
    --hamburger-ellipse-bg-color: var(--color-background-main);
    background-color: var(--color-background-secondary);
}

#modal_hamburger .fancy-title {
    --fancy-title-first-color: var(--color-accent);
    --fancy-title-alt-color: var(--color-accent);
}

#hamburger_signup {
    color: var(--color-accent);
}

#hamburger_ellipse {
    box-shadow: var(--shadow);
}

#hamburger_language select {
    background-color: var(--color-background-secondary);
}

/* Customize Item */
.customize-item-container {
    --customize-item-section-header-bg-color: var(--color-background-secondary);
    --customize-item-footer-bg-color: var(--color-background-secondary);
    --customize-item-footer-quantity-bg-color: var(--color-background-secondary);
    --customize-item-footer-quantity-border-color: var(--color-border-default);
    --customize-item-footer-quantity-bg-color-hover: var(--color-background-secondary-hover);
    box-shadow: var(--shadow);
}

.item-section-header {
    box-shadow: var(--shadow);
}

.quantity-selector button {
    color: var(--color-text-primary);
}

/*Favorite Icon Color */
.icon-favorites {
    --modal-background-color: #2598e3;
}

.icon-heart-filled {
    --modal-background-color: #2598e3;
}

/* Check-Radio */
.custom-radio {
    --rad-chk-bg-color: var(--color-background-main);
    --rad-chk-checked-bg-color: var(--color-background-tertiary);
}

/* Quantity Buttons, Black Color*/
.quantity-btn > .icon-subtract {
    color:Black;
}

.quantity-btn > .icon-plus {
    color:Black;
}

/* Buttons -- Sign In, Customize Item */
button {
    --colorActive: #2a93d6; /* Button Click Color */
    --button-color: #FFFFFF;
    --color: #000000;
    --button-bg-color: var(--color-background-tertiary);
    --button-bg-color-secondary: var(--color-background-secondary);
    --button-bg-color-secondary-hover: var(--color-background-quarternary-hover);
}

/* Secondary Buttons -- Add More Items */
button.secondary {
    color: var(--color-text-senary);
    background-color: #FFFFFF;
    border: 2px solid var(--color-border-secondary);
}


/* Favorites */
.favorite-container {
    --favorite-card-icon-background-color: var(--color-background-secondary);
    --favorite-card-icon-color: var(--color-accent);
}

.icon-heart-filled.favorites {
    border: 1px solid var(--color-border-default);
}

.header_background {
    color: var(--color-text-quaternary);
    box-shadow: var(--shadow);
}

/* Modal */
.modal {
    --modal-header-color: var(--color-text-quaternary);
}

#modal_confirmation_delete{
    color: var(--color-text-quaternary);
}

/* Upsell */
.upsell-wrapper .upsell-card {
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.upsell-wrapper .upsell-card:hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
    background-color: var(--color-background-secondary);
}

/* Default */
.button-link {
    color: var(--color-background-primary);
}

.cta-button {
    box-shadow: var(--shadow);
}

/* Cart */
.menu-item-cart-card-actions .item-quantity {
    color: var(--color-text-tertiary);
}

.promo-input-container > button {
    background-color: var(--color-background-secondary);
}

.cart-reward-section {
    --cart-reward-card-bg-color: var(--color-background-main);
    --cart-reward-arrow-color: var(--color-background-secondary);
}

.cart-reward-cards {
    padding: 0.5rem 0.2rem;
}

.cart-reward-card {
    box-shadow: var(--shadow);
    transition: var(--hover-transition);
}

.cart-reward-card:hover {
    box-shadow: 0 8px 7px rgba(0, 0, 0, 0.2);
    transform: var(--hover-transform);
    background-color: var(--color-background-main);
}

.cart-no-items-heading, .cart-no-items-info {
	color: var(--color-text-quaternary);
}

.toggle-control div.active {
  color: var(--color-text-quaternary);
}

.menu-item-cart-card-actions .item-quantity .quantity-btn {
  background-color: unset;
  border: unset;
  flex: 1;
  padding: 5px 10px;
  font-size: 0.7rem;
  height: 100%;
  color: Black;
}

button:disabled {
  color: #313131;
}

/* Limited Time */
.limited-time {
    --limited-time-color-selected: var(--color-text-quaternary);
}

.limited-time > div > div > button {
    color: var(--color-text-primary);
}

.limited-time > div > div > button:hover {
    color: var(--color-text-quaternary) !important;
}

.limited-time > div > div > button.time-selected {
    border: 2px solid var(--limited-time-background-color-selected);
}

/* Deal Builder */
.deal-builder-container {
    --deal-builder-group-header-bg-color: var(--color-background-secondary);
    --deal-builder-group-header-added-color: var(--color-background-secondary);
    --customize-item-footer-bg-color: var(--color-background-secondary);
}

.deal-builder-container .deal-builder-header {
    background-color: var(--color-background-secondary);
}

.deal-builder-progress-bar.incomplete {
    background-color: #FFFFFF;
}

.deal-progress-header > h2 {
    color: var(--color-accent) !important;
}

.deal-builder-group-header {
    box-shadow: var(--shadow);
}

/* Meal Deal Item Section Card */
.menu-item-card-small.horizontal.selected {
    border: none;
    color: var(--color-text-quaternary);
}

.menu-item-card-small.horizontal.selected .button-link {
   color: var(--color-text-quaternary);
}

/* Button */
button:disabled {
    color: var(--button-color);
}

/* Recent Orders */
.recent-order-main-card {
    --recent-orders-card-order-status-text-color: var(--color-text-quaternary);
}

/* Account */
#page_account {
    --account-header-background-color: var(--color-background-secondary);
}

#page_account .section-header { 
    box-shadow: var(--shadow);
}

/* Rewards */
.page-rewards-body {
    --rewards-points-bar-color: var(--color-background-secondary);
    --rewards-points-bar-text-color: var(--color-text-primary);
    --rewards-header-bg-color: var(--color-background-secondary);
}

.rewards-section-header {
    box-shadow: var(--shadow);
}

.menu-item-card-small__pill--size {
  background-color: var(--color-background-main);
}

/* Radio Buttons -- Notifications, Save Credit Card, Remember Me, Privacy Policy */
.checkRadio > input:checked + label::before {
  background-color: var(--color-background-tertiary);
}

/* ----- Order Tracker Page ------ */
.header .header-center-subtext {
    color: White;
    font-size: small;
}