:root {
    /* FONTS */
    --dxp-g-root-font-family: 'MyriadPro', 'Arial', 'Helvetica', sans-serif;
    --dxp-g-heading-font-family: 'MyriadPro', 'Arial', 'Helvetica', sans-serif;

    /* FORM */
    --b2b-input-label-color-error: rgb(167, 5, 2); /* #A70502 */
    --b2b-input-color-border-error: rgb(167, 5, 2); /* #A70502 */
    --b2b-input-color-border-hover: rgba(89, 158, 216); /* #599ED8 */
    --b2b-input-color-box-shadow-hover: rgb(232, 244, 253); /* #E8F4FD */
    --b2b-input-box-shadow-hover: 
        -2px -2px 0px 0px var(--b2b-input-color-box-shadow-hover, rgb(232, 244, 253)),
        2px -2px 0px 0px var(--b2b-input-color-box-shadow-hover, rgb(232, 244, 253)),
        2px 2px 0px 0px var(--b2b-input-color-box-shadow-hover, rgb(232, 244, 253)),
        -2px 2px 0px 0px var(--b2b-input-color-box-shadow-hover, rgb(232, 244, 253));
    --b2b-input-color-text-disabled: rgb(167, 169, 172); /* #A7A9AC */
    --b2b-input-color-border-disabled: rgb(221, 221, 221); /* #DDDDDD */
    --b2b-input-color-background-disabled: rgb(237, 237, 237); /* #EDEDED */
    --b2b-input-text-color-error: rgb(167, 5, 2); /* #A70502 */
    --b2b-input-text-color-placeholder: rgb(167, 169, 172); /* #A7A9AC */

    /* COLORS */
    --b2b-color-black: rgb(0, 0, 0); /* #000000 */
    --b2b-color-white: rgb(255, 255, 255); /* #FFFFFF */
    --b2b-color-black-90: rgb(68, 68, 69); /* #444445 */
    --b2b-color-main-blue: rgb(14, 77, 140); /* #0E4D8C */
    --b2b-color-button: rgb(47, 81, 136); /* #2F5188 */
    --b2b-color-button-hover: rgb(5, 27, 63); /* #051B3F */
    --b2b-color-secondary-blue: rgb(89, 158, 216); /* #599ED8 */
    --b2b-color-background-blue: rgb(238, 249, 254); /* #EEF9FE */
    --b2b-color-grey: rgb(167, 169, 172); /* #A7A9AC */
    --b2b-color-grey-field: rgb(221, 221, 221); /* #DDDDDD */

    /* ORASURE */
    --b2b-orasure-primary-color: #1D1D1E;
    --b2b-orasure-hoover-color: #114A66;
    --b2b-orasure-secondary-color: #12284C;
    --b2b-orasure-blue-color: #6BC4E8;
    --b2b-orasure-icons-color: #005A7A;
    --b2b-orasure-black-color: #000;
    --b2b-orasure-black-90-color: #444445;
    --b2b-orasure-gray-90-color: #3B3F42;
    --b2b-orasure-gray-80-color: #818080;
    --b2b-orasure-gray-60-color: #C3C3C3;
    --b2b-orasure-gray-50-color: #D1D1D1;
    --b2b-orasure-gray-30-color: #E6E7E8;
    --b2b-orasure-white-color: #FFF;
    --b2b-orasure-primary-orange: #D0461D;
    --b2b-orasure-alert-color: #C82127;
    --b2b-orasure-font-family: 'MyriadPro', sans-serif;
    --dxp-g-destructive: var(--b2b-input-text-color-error);

    /* LINKS */
    --dxp-s-link-text-color: var(--b2b-orasure-secondary-color);
    --dxp-s-link-text-color-hover: var(--b2b-orasure-hoover-color);

    /* FOOTER */
    --b2b-footer-backgroundColor: var(--b2b-orasure-black-90-color);

    /* SPACING */
    --b2b-theme-containerMaxWidth: var(--dxp-s-section-columns-max-width, 100%);
    --b2b-theme-contentVerticalPaddings: var(--dxp-s-section-content-spacing-block-start, 0);
    --b2b-theme-contentHorizontalPaddings: var(--dxp-s-section-content-spacing-inline-start, 0);

    /* BUTTON BRAND */
    /* --sds-c-button-brand-text-color: var(--b2b-orasure-white-color);
    --sds-c-button-brand-text-color-hover: var(--b2b-orasure-white-color);
    --sds-c-button-brand-text-color-focus: var(--b2b-orasure-white-color);
    --sds-c-button-brand-text-color-active: var(--b2b-orasure-white-color);
    --dxp-c-button-brand-transition: color 0.15s linear, border-color 0.15s linear, background-color 0.15s linear; */

    /* BUTTON NEUTRAL */
    /* --b2b-button-neutral-text-color: rgb(0, 0, 0); */

    /* BUTTON OUTLINE */
    /* --sds-c-button-outline-brand-text-color-hover: var(--b2b-orasure-primary-color);
    --sds-c-button-outline-brand-text-color-focus: var(--b2b-orasure-primary-color);
    --sds-c-button-outline-brand-text-color-active: var(--b2b-orasure-primary-color);
    --sds-c-button-outline-brand-color-background-hover: var(--b2b-orasure-white-color);
    --sds-c-button-outline-brand-color-background-focus: var(--b2b-orasure-white-color);
    --sds-c-button-outline-brand-color-background-active: var(--b2b-orasure-white-color);
    --dxp-c-button-outline-brand-transition: color 0.15s linear, border-color 0.15s linear, background-color 0.15s linear; */

    /* ACTIONS */
    --b2b-button-action-font-size: 0.875rem;
    --b2b-button-action-line-height: 1.875rem;
    --b2b-button-action-font-weight: 700;
    --b2b-button-action-text-decoration: underline;
    --b2b-button-action-text-transform: none;

    /* SOCIAL COLOR */
    --b2b-color-twitter: var(--b2b-orasure-hoover-color);
    --b2b-color-facebook: var(--b2b-orasure-hoover-color);
    --b2b-color-linkedin: var(--b2b-orasure-hoover-color);
    --b2b-color-instagram: var(--b2b-orasure-hoover-color);
    --b2b-color-youtube: var(--b2b-orasure-hoover-color);
    --b2b-color-yelp: var(--b2b-orasure-hoover-color);
    --b2b-color-tiktok: var(--b2b-orasure-hoover-color);
    --b2b-color-pinterest: var(--b2b-orasure-hoover-color);

    /* FORM */
    /* --dxp-c-input-text-color-disabled: rgb(118, 113, 107); */

    /* MY ACCOUNT */
    --b2b-theme-layoutMyAccountSidebarWidth: 360px;
    --b2b-theme-layoutMyAccountSidebarBackgroundColor: #F3F3F3;

    /* SPINNER */
    --dxp-c-spinner-color-background: rgba(255, 255, 255, 0.75);
    --dxp-c-spinner-color-foreground: var(--dxp-g-neutral-2);
}

@media (max-width: 1023.98px) {
    :root {
        /* SPACING */
        --b2b-theme-containerMaxWidth: var(--dxp-s-section-columns-max-width-tablet, 100%);
        --b2b-theme-contentVerticalPaddings: var(--dxp-s-section-content-spacing-block-start-tablet, 1.5rem);
        --b2b-theme-contentHorizontalPaddings: var(--dxp-s-section-content-spacing-inline-start-tablet, 1.5rem);
    }
}

@media (max-width: 767.98px) {
    :root {
        /* HEADING */
        --dxp-s-text-heading-extra-large-font-size: 2rem;

        /* SPACING */
        --b2b-theme-containerMaxWidth: var(--dxp-s-section-columns-max-width-mobile, 100%);
        --b2b-theme-contentVerticalPaddings: var(--dxp-s-section-content-spacing-block-start-mobile, 1rem);
        --b2b-theme-contentHorizontalPaddings: var(--dxp-s-section-content-spacing-inline-start-mobile, 0.75rem);
    }
}

/* OLDEST CSS VAR */
:root {
    /* THEME COLORS */
    --b2b-colorText: var(--dxp-g-root-contrast, rgba(51, 51, 51, 1));
    --b2b-colorDetailText: var(--dxp-g-root-contrast-1, rgba(105, 105, 105, 1));
    --b2b-colorAction: var(--dxp-g-brand, rgba(37, 116, 169, 1));
    --b2b-colorActionDarker: var(--dxp-g-brand-1, rgba(19, 95, 144, 1));
    --b2b-colorLink: var(--dxp-g-brand, rgba(37, 116, 169, 1));
    --b2b-colorLinkDarker: var(--dxp-g-brand-1, rgba(19, 95, 144, 1));
    --b2b-colorTextInverse: var(--dxp-g-brand-contrast, rgba(255, 255, 255, 1));
    --b2b-colorBorder: var(--dxp-s-form-element-color-border, rgba(212, 212, 212, 1));
    --b2b-colorLoginBackground: var(--lwc-LoginBackgroundColor, rgba(244, 244, 244, 1));
    --b2b-colorLoginContainerBackground: var(--lwc-CardBackgroundColor, rgba(255, 255, 255, 0));
    --b2b-imageLoginBackground: var(--lwc-LoginBackgroundImage);
    --b2b-fontFamily: var(--dxp-g-root-font-family);
    --b2b-fontFamilyHeader: var(--dxp-g-heading-font-family);

    /* COLORS */
    --b2b-colorTextInverseDarker: var(--lwc-colorTextInverse, rgba(238, 238, 238, 1));
    --b2b-colorTextPlaceholder: var(--lwc-colorTextPlaceholder, rgba(105, 105, 105, 1));
    --b2b-colorButtonBrandText: var(--lwc-colorTextButtonBrand, rgba(255, 255, 255, 1));
    --b2b-colorButtonBrandBackground: var(--lwc-colorBackgroundButtonBrand, var(--b2b-colorAction));
    --b2b-colorButtonBrandBackgroundHover: var(--lwc-colorBackgroundButtonBrandHover, var(--b2b-colorActionDarker));
    --b2b-colorCode: rgba(214, 51, 132, 1);
    --b2b-colorWhite: var(--dxp-g-brand-contrast);
    --b2b-colorBlueLight: rgb(19, 156, 216);
    --b2b-colorGrey: rgb(107, 107, 107);
    --b2b-colorGreyLight: rgb(230, 230, 230);
    --b2b-colorError: rgb(213, 88, 59);
    --b2b-colorBlueDark: rgb(17, 38, 60);
    --b2b-gradientMain: radial-gradient(76.68% 146.15% at 49.34% -20.07%, rgb(0, 112, 176) 0%, rgb(0, 79, 127) 31%, rgb(0, 34, 59) 78%, rgb(0, 16, 32) 100%);
    --b2b-tableTh-backgroundColor: rgb(243, 243, 243);
    --b2b-tableTd-backgroundColor: rgb(243, 243, 243);
    --b2b-colorDisabledLight: rgb(243, 243, 243);
    --b2b-colorDisabled: rgb(201, 201, 201);
    --b2b-colorDisabledDark: rgb(116, 116, 116);

    --b2b-shadowCard: 0px 2px 15px rgba(0, 0, 0, 0.06);
    --b2b-checkout-contentMaxWidth: 1250px;
}

:root {
    --text-color-gray-1: rgba(0, 0, 0, 0.5);
    --text-color-gray-2: rgba(109, 110, 113, 1);

    --background-gray-1: rgba(112, 110, 107, 1);
    --background-gray-2: rgba(214, 217, 219, 1);
    --background-gray-3: rgba(46, 54, 58, 1);
    --background-gray-4: rgba(109, 110, 113, 1);

    --background-blue-1: rgba(0, 58, 105, 1);
}