:root {
    /***********************************
        DXP and SLDS Variable Overrides
        & Custom Defined Variables
    ************************************/

    /******* Site Spacing *******/
    --container_default: 100%;
    --container_s: 100%; /* 540px */
    --container_m: 100%; /* 720px */
    --container_l: 960px;
    --container_xl: 1140px;
    --container_xxl: 1320px;
    --container_xxxl: 1500px;
    --gutter-main: 1rem;

    --dxp-c-component-wrapper-spacer-size-mobile: 0;
    --dxp-s-component-wrapper-spacer-size-mobile: 0;

    /******* Colors *******/
    /* Primary */
    --cc-red: #f40000;
    --cc-black: #000;
    --cc-white: #fff;
    --cc-green: #78e6a0;
    --cc-yellow: #ffb400;
    --cc-blue: #82e1ff;

    --gray-08: #0a0a0a;
    --gray-07: #313131;
    --gray-06: #4f4f4f;
    --gray-05: #5c5c5c;
    --gray-04: #949494;
    --gray-03: #e1e1e1;
    --gray-02: #f2f2f2;
    --gray-01: #f6f6f6;
    --gray-00: #fdfdfd;

    --cc-green-hover: #7fcead;
    --cc-green-active: #1bc482;
    --cc-red-hover: #fff6f2;
    --cc-red-active: #fdcccc;
    --error-red: #b30000;
    --focus-red: #ad1010;
    --active-red: #ad1010;

    --positive: #c4f68a;
    --attention: #ffef63;
    --exclusivity: #ecd59a;
    --savings: #00bcc8;
    --in-progress: #ffa046;
    --unavailability: #f2f2f2;
    --rep-added: #9ac7fc;
    --order-smart: #7291ff;
    --contracted: #e0aeff;
    --agent-added: #ff8cc3;

    --neutral: #f2f2f2;
    --progress-bg: rgba(130, 225, 255, 0.1);
    --success-bg: rgba(120, 230, 160, 0.1);
    --warning-bg: rgba(255, 180, 0, 0.1);
    --critical-bg: rgba(244, 0, 0, 0.1);
    --progress-border: rgb(130, 225, 255);
    --success-border: rgb(120, 230, 160);
    --warning-border: rgb(255, 180, 0);
    --critical-border: rgb(244, 0, 0);
    --focus: #f2f2f2;
    --critical-bg-hover: rgba(255, 246, 242, 1);
    --critical-bg-active: rgba(253, 204, 204, 1);

    /* Alert/Dot Colors */
    --dot-neutral: var(--gray-04);
    --dot-progress: #5dc8e9;
    --dot-success: #13a247;
    --dot-warning: #ffb400;
    --dot-critical: #eb0000;
    --dot-focus: var(--gray-04);

    --dot-neutral-bg: var(--gray-02);
    --dot-success-bg: rgba(120, 230, 160, 0.1);
    --dot-courtesy-bg: rgba(93, 200, 233, 0.1);
    --dot-noncritical-bg: rgba(255, 180, 0, 0.1);
    --dot-critical-bg: rgba(244, 0, 0, 0.1);
    --dot-success-border: rgb(120, 230, 160);
    --dot-courtesy-border: rgb(93, 200, 233);
    --dot-noncritical-border: rgb(255, 180, 0);
    --dot-critical-border: rgb(244, 0, 0);

    /* Scrim/Fill */
    --scrim-fill: rgba(10, 10, 10, 0.5);

    /* Functional */
    --error-bg: #ffdddc;
    --selection: #c4defe;
    --border-secondary-color: #dddbda;
    --white-text: #fdfdfd;
    --black-text: #0a0a0a;
    --disabled-grey: #f2f2f2;
    --disabled-grey-text: #949494;

    --cc-white-text: #fdfdfd;
    --cc-black-text: #0a0a0a;

    /* Secondary */
    --diet-cc-silver: #b3b3b3;
    --diet-cc-gold: #d6cda0;
    --alt-silver: #eaeaea;
    --off-white: #f8f8f8;
    --hover-grey: #4f4f4f;
    --hover-light-grey: #e1e1e1;

    /* Tertiary */
    --cc-cherry: #7c154b;
    --cc-vanilla: #c6966a;
    --cc-lime: #6baf25;
    --cc-lemon: #f5c735;
    --cc-raspberry: #c0144b;
    --cc-orange: #ef7f00;
    --cc-cinnamon: #852526;
    --cc-gingerlime: #729026;
    --cc-fiestycherry: #6a1826;
    --cc-strawberryguava: #e95773;
    --cc-twistedmango: #f59e07;
    --cc-blueberryacai: #211c48;

    /******* Notifications *******/
    --notification-green-border: var(--success-border);
    --notification-green-background: var(--success-bg);
    --notification-yellow-border: var(--warning-border);
    --notification-yellow-background: var(--warning-bg);
    --notification-blue-border: var(--progress-border);
    --notification-blue-background: var(--progress-bg);
    --notification-red-border: var(--critical-border);
    --notification-red-background: var(--critical-bg);

    /* Body Colors */
    --dxp-g-root: var(--alt-silver);
    --dxp-g-root-contrast: #1c1c1c;

    /******* Cards *******/
    --card-border-radius: 0.5rem;
    --card-border-radius-top: 0.5rem 0.5rem 0 0;
    --card-border-radius-bottom: 0 0 0.5rem 0.5rem;
    --card-border-radius-left: 0.5rem 0 0 0.5rem;
    --card-border-radius-right: 0 0.5rem 0.5rem 0;

    /******* Fonts / Text *******/
    --dxp-s-link-text-color-hover: var(--hover-grey) !important;
    --dxp-s-link-text-color-focus: var(--cc-black-text) !important;
    --dxp-c-link-text-color-hover: var(--hover-grey) !important;
    --dxp-c-link-text-color-focus: var(--cc-black-text) !important;
    --dxp-s-link-text-decoration-hover: var(--cc-red) underline;
    --dxp-c-link-transition: color 100ms ease-in;
    --dxp-c-link-color-outline-focus: var(--cc-black);
    --dxp-s-button-color-focus: var(--cc-black) !important;

    /******* Box shadows *******/
    --cc-box-shadow: 0.125rem 0.125rem 0.5rem 0 rgba(22, 26, 29, 0.1);
    --sds-c-button-shadow-focus: 0 0 0 2px var(--cc-black);

    /******* Tags *******/
    --tag-pink-background: #ff8cc3;
    --tag-green-background: #c4f68a;
    --tag-yellow-background: #ffef63;
    --tag-brown-background: #ecd59a;
    --tag-teal-background: #00bcc8;
    --tag-orange-background: #ffa046;
    --tag-grey-background: #f2f2f2;
    --tag-blue-background: #7291ff;
    --tag-purple-background: #e0aeff;
    --tag-light-blue-background: #9ac7fc;

    /******* Headings *******/

    /******* Input elements *******/
    --slds-c-checkbox-color-border: var(--cc-black);
    --slds-c-checkbox-color-background: var(--cc-white);
    --slds-c-checkbox-color-background-checked: var(--cc-white);
    --slds-c-checkbox-mark-color-foreground: var(--cc-red);
    --slds-c-checkbox-radius-border: 0.25rem;
    --dxp-s-form-checkbox-radius-border: 0.25rem;

    --dxp-s-form-element-color-background: var(--cc-white);
    --_slds-g-shadow-outline-focus: var(--cc-black);
    --_slds-g-shadow-inset-focus: var(--cc-black);
    --slds-g-shadow-inset-focus-1: 0 0 0 1px var(--cc-red) inset, 0 0 0 1px var(--cc-red) inset;
    --dxp-s-dropdown-color-background: white;
    --dxp-s-dropdown-color-background-hover: var(--hover-light-grey);

    /******* Spinner *******/
    --dxp-c-spinner-color-foreground: var(--cc-red);

    /******* MessagingConversationButton *******/
    --eswButtonBottom: 70px !important;
    --eswButtonRight: 25px !important;

    --font-family-unity-headline: 'TCCC-UnityHeadline', 'Inter', sans-serif;
    --font-family-unity-text: 'TCCC-UnityText', 'Inter', sans-serif;
    /* uncomment this when we enable the font family in the theme */
    /* --dxp-s-button-font-family: var(--font-family-unity-text);
    --dxp-s-form-element-label-font-family: var(--font-family-unity-text); */
}

/**************************
         General
 ***************************/
input[type='text'],
input[type='tel'] {
    text-align: left !important;
}

.slds-input_faux:not(.slds-combobox__input-value) {
    color: var(--cc-black);
}

a:focus:not(.slds-button, .slds-dropdown__item) {
    outline-offset: 3px !important;
}

a:focus {
    --dxp-s-link-text-color-focus: var(--cc-black) !important;
    --dxp-c-link-text-color-focus: var(--cc-black) !important;
}

.component-wrapper-no-spacing {
    --dxp-c-component-wrapper-spacer-size-tablet: 0;
    --dxp-c-component-wrapper-spacer-size-mobile: 0;
    --dxp-c-component-wrapper-spacer-size: 0;
}

lightning-combobox.hide-combobox-icon lightning-icon {
    --sds-c-icon-color-foreground-default: var(--cc-red);
    display: inline-block;
}
lightning-combobox.hide-combobox-icon lightning-icon.slds-input__icon_right {
    display: none !important;
}

::selection {
    color: var(--cc-black);
    background: var(--selection);
}
::-moz-selection {
    /* Code for Firefox */
    color: var(--cc-black);
    background: var(--selection);
}
.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* Spinners (SLDS override) */
.slds-spinner--brand .slds-spinner__dot-a:after,
.slds-spinner--brand .slds-spinner__dot-a:before,
.slds-spinner--brand .slds-spinner__dot-b:after,
.slds-spinner--brand .slds-spinner__dot-b:before,
.slds-spinner--brand.slds-spinner:after,
.slds-spinner--brand.slds-spinner:before,
.slds-spinner_brand .slds-spinner__dot-a:after,
.slds-spinner_brand .slds-spinner__dot-a:before,
.slds-spinner_brand .slds-spinner__dot-b:after,
.slds-spinner_brand .slds-spinner__dot-b:before,
.slds-spinner_brand.slds-spinner:after,
.slds-spinner_brand.slds-spinner:before {
    background-color: var(--cc-red);
}

/* reCAPTCHA Badge */
.grecaptcha-badge {
    bottom: 45px !important;
}

/**************************
        Messaging
***************************/
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton {
    bottom: var(--eswButtonBottom, 70px) !important;
    right: var(--eswButtonRight, 25px) !important;
}

/**************************
        Theme Layout
***************************/
.theme-container {
    max-width: var(--container_default);
    margin-top: 2rem;
    margin-bottom: 6.25rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.theme-container-fluid {
    max-width: var(--container_default);
    margin-top: 2rem;
    margin-bottom: 4rem;
    width: 100%;
}

/* Header */
.custom-header {
    background-color: #fff;
    min-height: 3rem;
    width: 100%;
    z-index: 999;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/**************************
    DXP Builder Layout Overrides
***************************/
@media (max-width: 800px) {
    .main-content-container .main-content {
        width: 100% !important; /*fixes content width in mobile */
    }
}
/**************************
       DXP Class Overrides
***************************/
.dxp-block-two-column-container {
    overflow: hidden !important;
    border-radius: 8px;
}
/**************************
       SLDS Class Overrides
***************************/
.slds-datepicker tbody > tr > td.slds-is-selected > .slds-day {
    background: var(--cc-red);
}

[data-close-button] {
    visibility: hidden !important;
    display: none !important;
}

.slds-modal__close {
    visibility: hidden !important;
    display: none !important;
}
/**************************
       PLP / PDP
***************************/
.productsSection .productItemSection:first-child .productCard.listView {
    border-radius: var(--card-border-radius-top);
}
.productsSection .productItemSection:last-child .productCard.listView {
    border-radius: var(--card-border-radius-bottom);
}
@media (max-width: 768px) {
    .productsSection .productItemSection:first-child .productCard.listView,
    .productsSection .productItemSection:last-child .productCard.listView {
        border-radius: var(--card-border-radius);
    }
}
@media (min-width: 768px) {
    .productsSection .productItemSection:last-child .productCard.listView {
        border: 0;
    }
}
/**************************
       Checkout
***************************/
/* Makes promo area 100% width since no CTA buttons */
.checkoutPageLayout .summary-cta-container > div {
    width: 100%;
}

/**************************
        Media Queries
***************************/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .theme-container {
        max-width: var(--container_s);
        padding-right: var(--gutter-main, 1rem);
        padding-left: var(--gutter-main, 1rem);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .theme-container {
        max-width: var(--container_m);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .theme-container {
        max-width: var(--container_l);
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .theme-container {
        max-width: var(--container_xl);
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .theme-container {
        max-width: var(--container_xxl);
    }
}

/* XXX-Large Monitors */
@media (min-width: 1920px) {
    .theme-container-fluid {
        max-width: var(--container_xxxl);
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }
}

.h1 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 4.25rem;
    line-height: 4.6875rem;
}

.h2 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 2.625rem;
    line-height: 3.125rem;
}

.h3 {
    font-family: var(--font-family-unity-headline);
    font-weight: normal;
    font-size: 2.125rem;
    line-height: 2.75rem;
}

.h4 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 1.6875rem;
    line-height: 2.25rem;
}

.h5 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.h6 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.h7 {
    font-family: var(--font-family-unity-headline);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
}

.s1 {
    font-family: var(--font-family-unity-text);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.s2 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.s3 {
    font-family: var(--font-family-unity-headline);
    font-weight: normal;
    font-size: 1.375rem;
    line-height: 1.75rem;
}

.b1 {
    font-family: var(--font-family-unity-headline);
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.p1 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.p2 {
    font-family: var(--font-family-unity-text);
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.p3 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.c1 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.l1 {
    font-family: var(--font-family-unity-text);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
}

.l2 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.t1 {
    font-family: var(--font-family-unity-headline);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
}

.link-1 {
    font-family: var(--font-family-unity-headline);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.link-2 {
    font-family: var(--font-family-unity-headline);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
}

.link-3 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.link-4 {
    font-family: var(--font-family-unity-text);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1rem;
}