:root {
    --typography-body1-font-family: "Roboto", Helvetica;
    --typography-body1-font-weight: 400;
    --typography-body1-font-size: 16px;
    --typography-body1-letter-spacing: 0.15000000596046448px;
    --typography-body1-line-height: 150%;
    --typography-body1-font-style: normal;
    --typography-caption-font-family: "Roboto", Helvetica;
    --typography-caption-font-weight: 400;
    --typography-caption-font-size: 12px;
    --typography-caption-letter-spacing: 0.4000000059604645px;
    --typography-caption-line-height: 165.9999966621399%;
    --typography-caption-font-style: normal;
    --button-small-font-family: "Roboto", Helvetica;
    --button-small-font-weight: 500;
    --button-small-font-size: 13px;
    --button-small-letter-spacing: 0px;
    --button-small-line-height: 22px;
    --button-small-font-style: normal;
    --extended-text-label-lg-med-font-family: "Roboto", Helvetica;
    --extended-text-label-lg-med-font-weight: 500;
    --extended-text-label-lg-med-font-size: 16px;
    --extended-text-label-lg-med-letter-spacing: 0px;
    --extended-text-label-lg-med-line-height: 20px;
    --extended-text-label-lg-med-font-style: normal;
    --typography-body2-font-family: "Roboto", Helvetica;
    --typography-body2-font-weight: 400;
    --typography-body2-font-size: 14px;
    --typography-body2-letter-spacing: 0.17000000178813934px;
    --typography-body2-line-height: 142.99999475479126%;
    --typography-body2-font-style: normal;
    --input-value-font-family: "Roboto", Helvetica;
    --input-value-font-weight: 400;
    --input-value-font-size: 16px;
    --input-value-letter-spacing: 0.15000000596046448px;
    --input-value-line-height: 24px;
    --input-value-font-style: normal;
    --input-label-font-family: "Roboto", Helvetica;
    --input-label-font-weight: 400;
    --input-label-font-size: 12px;
    --input-label-letter-spacing: 0.15000000596046448px;
    --input-label-line-height: 15px;
    --input-label-font-style: normal;
    --button-large-font-family: "Roboto", Helvetica;
    --button-large-font-weight: 500;
    --button-large-font-size: 15px;
    --button-large-letter-spacing: 0px;
    --button-large-line-height: 26px;
    --button-large-font-style: normal;
    --input-helper-font-family: "Roboto", Helvetica;
    --input-helper-font-weight: 400;
    --input-helper-font-size: 12px;
    --input-helper-letter-spacing: 0.4000000059604645px;
    --input-helper-line-height: 165.9999966621399%;
    --input-helper-font-style: normal;
    --palette-text-secondary: rgba(0, 0, 0, 0.6);
    --palette-text-primary: rgba(0, 0, 0, 0.9);
    --palette-error-main: var(--materialcolors-red-500);
    --palette-text-reverse: rgba(255, 255, 255, 0.9);
    --palette-text-disabled: rgba(0, 0, 0, 0.25);
    --palette-primary-main: var(--materialcolors-blue-500);
    --palette-extended-palette-text-label-contrast: var(--materialcolors-bluegrey-200);
    --palette-primary-contrast: rgba(255, 255, 255, 1);
    --palette-background-paper-elevation-0: rgba(255, 255, 255, 1);
    --palette-common-white-background: rgba(255, 255, 255, 0.75);
    --palette-components-input-outlined-enabledborder: rgba(0, 0, 0, 0.23);
    --palette-common-black-background: rgba(0, 0, 0, 0.75);
    --palette-background-paper-elevation-3: rgba(255, 255, 255, 1);
    --palette-divider: rgba(0, 0, 0, 0.2);
    --palette-primary-outlinedborder: rgba(24, 122, 226, 0.5);
    --palette-primary-dark: var(--materialcolors-blue-600);
    --palette-primary-hover: rgba(24, 122, 226, 0.04);
    --palette-success-hover: rgba(36, 194, 70, 0.04);
    --palette-components-input-outlined-hoverborder: rgba(0, 0, 0, 1);
    --materialcolors-red-500: rgba(235, 0, 20, 1);
    --materialcolors-blue-500: rgba(24, 122, 226, 1);
    --materialcolors-bluegrey-200: rgba(176, 190, 197, 1);
    --materialcolors-blue-400: rgba(67, 148, 235, 1);
    --materialcolors-red-400: rgba(255, 35, 53, 1);
    --materialcolors-os-grey-800-warm-darker: rgba(88, 80, 86, 1);
    --materialcolors-blue-600: rgba(21, 109, 204, 1);
    --materialcolors-blue-a200: rgba(114, 175, 240, 1);
    --shape-borderradiussmall: 4px;
    --shape-borderradiuslarge: 12px;
    --shape-borderradiusmedium: 8px;
    --shape-borderradiusxlarge: 16px;
    --sizing-x0: 4px;
    --sizing-x1: 8px;
    --sizing-x1a: 12px;
    --sizing-x2: 16px;
    --sizing-x3: 24px;
    --sizing-x4: 32px;
    --sizing-x5: 40px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-palette-mode="light">
        <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-palette-mode="light"] {
    --palette-text-secondary: rgba(0, 0, 0, 0.6);
    --palette-text-primary: rgba(0, 0, 0, 0.9);
    --palette-text-reverse: rgba(255, 255, 255, 0.9);
    --palette-text-disabled: rgba(0, 0, 0, 0.25);
    --palette-primary-main: var(--materialcolors-blue-500);
    --palette-extended-palette-text-label-contrast: var(--materialcolors-bluegrey-200);
    --palette-background-paper-elevation-0: rgba(255, 255, 255, 1);
    --palette-common-white-background: rgba(255, 255, 255, 0.75);
    --palette-components-input-outlined-enabledborder: rgba(0, 0, 0, 0.23);
    --palette-common-black-background: rgba(0, 0, 0, 0.75);
    --palette-background-paper-elevation-3: rgba(255, 255, 255, 1);
    --palette-divider: rgba(0, 0, 0, 0.2);
    --palette-primary-dark: var(--materialcolors-blue-600);
    --palette-primary-hover: rgba(24, 122, 226, 0.04);
    --palette-success-hover: rgba(36, 194, 70, 0.04);
    --palette-components-input-outlined-hoverborder: rgba(0, 0, 0, 1);
    --palette-error-main: var(--materialcolors-red-500);
    --palette-primary-outlinedborder: rgba(24, 122, 226, 0.5);
}

[data-palette-mode="dark"] {
    --palette-text-secondary: rgba(255, 255, 255, 0.6);
    --palette-text-primary: rgba(255, 255, 255, 0.9);
    --palette-text-reverse: rgba(0, 0, 0, 0.9);
    --palette-text-disabled: rgba(255, 255, 255, 0.35);
    --palette-primary-main: var(--materialcolors-blue-400);
    --palette-extended-palette-text-label-contrast: var(--materialcolors-os-grey-800-warm-darker);
    --palette-background-paper-elevation-0: rgba(18, 18, 18, 1);
    --palette-common-white-background: rgba(0, 0, 0, 0.75);
    --palette-components-input-outlined-enabledborder: rgba(255, 255, 255, 0.23);
    --palette-common-black-background: rgba(255, 255, 255, 0.75);
    --palette-background-paper-elevation-3: rgba(37, 37, 37, 1);
    --palette-divider: rgba(255, 255, 255, 0.2);
    --palette-primary-dark: var(--materialcolors-blue-a200);
    --palette-primary-hover: rgba(24, 122, 226, 0.08);
    --palette-success-hover: rgba(65, 220, 99, 0.08);
    --palette-components-input-outlined-hoverborder: rgba(255, 255, 255, 1);
    --palette-error-main: var(--materialcolors-red-400);
    --palette-primary-outlinedborder: rgba(24, 122, 226, 0.7);
}



/* =============================
   Responsive media (v8) — styleguide.css
   - Tokens used by responsive rules
   ============================= */
:root {
    --breakpoint-sm: 600px;
    --breakpoint-md: 1024px;
    --container-max-width: 1440px;
    --header-height: 70px;
}