/* 
  https://m3.material.io
*/
html {
    --color-primary: #0d6efd;
    --color-on-primary: #ffffff;
    --color-primary-variant: #003D8F;
    --color-on-primary-variant: #ffffff;
    --color-primary-container: #d7e3ff;
    --color-on-primary-container: #001b3f;
    --color-secondary: #000000;
    --color-on-secondary: #ffffff;
    --color-tertiary: transparent;
    --color-on-tertiary: #000000;
    --color-inverse-primary: #000;
    --color-inverse-on-primary: #ffffff;
    --color-success: #1aa51a;
    --color-on-success: #ffffff;
    --color-success-variant: #397f34;
    --color-on-success-variant: #ffffff;
    --color-warning: #f05423;
    --color-on-warning: #ffffff;
    --color-error: #ff412a;
    --color-on-error: #ffffff;
    --color-error-variant: #ff6453;
    --color-error-container: #ffc7c2;
    --color-on-error-container: #1a1b1f;
    --color-pending: #edbe00;
    --color-outline: #74777f;
    --color-outline-variant: #74777f;
    --color-outline-variant-transparent: #ffffff;
    --color-shadow: #00000033;
    --color-surface-tint: #000;
    --color-scrim: #000;
    --color-header: #FFFFFF;
    --color-header-invert: #000000;
    --color-header-variant: #FFFFFF;
    --color-on-header: #000;
    --color-on-header-invert: #FFFFFF;
    --color-header-scrolled-mobile: #000000CC;
    --color-on-header-scrolled-mobile: #FFFFFF;
    --color-footer: #222222;
    --color-on-footer: #ffffff;
    --color-surface: #ffffff;
    --color-on-surface: #1a1b1f;
    --color-surface-variant: #F0F1F1;
    --color-on-surface-variant: #000;
    --color-dark-surface: #222222;
    --color-on-dark-surface: #FFFFFF;
    --color-inverse-surface: #000;
    --color-inverse-on-surface: #ffffff;
    --color-surface-container: #ffffff;
    --color-on-surface-container: #212121;
    --color-surface-container-lowest: #222222;
    --color-on-surface-container-lowest: #FFFFFF;
    --color-surface-container-low: #ffffff;
    --color-on-surface-container-low: #000;
    --color-surface-container-high: #ffffff;
    --color-on-surface-container-high: #000;
    --color-surface-container-highest: #ffffff;
    --color-on-surface-container-highest: #000;
    --color-highlight-negative: #DB0030;
    --color-highlight-positive: #3f9d3c;
    --color-invest: #57414E;
    --color-passive: #595F67;
    --color-passive-variant: #ADB5BD;
    --color-table-header: #222222;
    --color-on-table-header: #ffffff;
    --color-table-row: #ffffff;
    --color-table-row-hover: #ebebeb;

    --color-button: #000;
    --color-button-text: #ffffff;
    --color-button-hover: #242424;

    --color-nav-hover: #FFFFFF0D;

    --color-login-option-border: #ADB5BD;
    --color-login-option-background: #ffffff;

    --color-option-button: #F0F1F1;
    --color-on-option-button: #000;
    --color-option-button-active: #595F67;
    --color-on-option-button-active: #ffffff;
    --color-option-button-hover: #CCCCCC;

    --color-select-option-background: #ffffff;
    --color-select-option-background-hover: #F0F1F1;

    --color-video-play-button: #ffffff;
    --color-video-play-button-hover: #eaeaea;
    --color-video-control-button: #ffffff;

    --color-carousel-nav: #222222;
    --color-on-carousel-nav: #FFFFFF;

    --color-select-pill: #FFFFFF;
    --color-on-select-pill: #000000;
    --color-select-pill-active: #000000;
    --color-on-select-pill-active: #FFFFFF;

    --color-tooltip: #000000;
    --color-on-tooltip: #FFFFFF;

    
    --color-primary-hover: #0A55C8;
    --color-secondary-hover: #333333;
    --color-tertiary-hover: #ADB5BD;
    --color-success-hover: #2f652c;
    --color-warning-hover: #c74c27;

    --color-header-white-hover: #ADB5BD;
    --color-header-black-hover: #595F67;

    --color-login-option-hover: #F2F2F2;
    --color-login-option-border-hover: #595F67;

    --color-select-pill-hover: #ECECEC;
    --color-select-pill-active-hover: #333333;

    --color-faq-button-hover: #E1E1E1;

    --color-simple-select-trigger-hover: #000000;
}

.color-primary {
    background-color: var(--color-primary);
}

.color-primary-text {
    color: var(--color-primary);
}

.color-on-primary {
    background-color: var(--color-on-primary);
}

.color-on-primary-text {
    color: var(--color-on-primary);
}

.color-primary-variant {
    background-color: var(--color-primary-variant);
}

.color-primary-variant-text {
    color: var(--color-primary-variant);
}

.color-on-primary-variant {
    background-color: var(--color-on-primary-variant);
}

.color-on-primary-variant-text {
    color: var(--color-on-primary-variant);
}

.color-primary-container {
    background-color: var(--color-primary-container);
}

.color-primary-container-text {
    color: var(--color-primary-container);
}

.color-on-primary-container {
    background-color: var(--color-on-primary-container);
}

.color-on-primary-container-text {
    color: var(--color-on-primary-container);
}

.color-secondary {
    background-color: var(--color-secondary);
}

.color-secondary-text {
    color: var(--color-secondary);
}

.color-on-secondary {
    background-color: var(--color-on-secondary);
}

.color-on-secondary-text {
    color: var(--color-on-secondary);
}

.color-tertiary {
    background-color: var(--color-tertiary);
}

.color-tertiary-text {
    color: var(--color-tertiary);
}

.color-on-tertiary {
    background-color: var(--color-on-tertiary);
}

.color-on-tertiary-text {
    color: var(--color-on-tertiary);
}

.color-success {
    background-color: var(--color-success);
}

.color-success-text {
    color: var(--color-success);
}

.color-success-variant {
    background-color: var(--color-success-variant);
}

.color-success-variant-text {
    color: var(--color-success-variant);
}

.color-warning {
    background-color: var(--color-warning);
}

.color-warning-text {
    color: var(--color-warning);
}

.color-error {
    background-color: var(--color-error);
}

.color-error-text {
    color: var(--color-error);
}

.color-error-variant {
    background-color: var(--color-error-variant);
}

.color-error-variant-text {
    color: var(--color-error-variant);
}

.color-on-error {
    background-color: var(--color-on-error);
}

.color-on-error-text {
    color: var(--color-on-error);
}

.color-error-container {
    background-color: var(--color-error-container);
}

.color-error-container-text {
    color: var(--color-error-container);
}

.color-on-error-container {
    background-color: var(--color-on-error-container);
}

.color-on-error-container-text {
    color: var(--color-on-error-container);
}

.color-outline {
    background-color: var(--color-outline);
}

.color-outline-text {
    color: var(--color-outline);
}

.color-outline-variant {
    background-color: var(--color-outline-variant);
}

.color-outline-variant-text {
    color: var(--color-outline-variant);
}

.color-shadow {
    background-color: var(--color-shadow);
}

.color-shadow-text {
    color: var(--color-shadow);
}

.color-scrim {
    background-color: var(--color-scrim);
}

.color-scrim-text {
    color: var(--color-scrim);
}

.color-header {
    background-color: var(--color-header);
}

.color-header-text {
    color: var(--color-header);
}

.color-on-header {
    background-color: var(--color-on-header);
}

.color-on-header-text {
    color: var(--color-on-header);
}

.color-footer {
    background-color: var(--color-footer);
}

.color-footer-text {
    color: var(--color-footer);
}

.color-on-footer {
    background-color: var(--color-on-footer);
}

.color-on-footer-text {
    color: var(--color-on-footer);
}

.color-surface {
    background-color: var(--color-surface);
}

.color-surface-text {
    color: var(--color-surface);
}

.color-on-surface {
    background-color: var(--color-on-surface);
}

.color-on-surface-text {
    color: var(--color-on-surface);
}

.color-surface-variant {
    background-color: var(--color-surface-variant);
}

.color-surface-variant-text {
    color: var(--color-surface-variant);
}

.color-on-surface-variant {
    background-color: var(--color-on-surface-variant);
}

.color-on-surface-variant-text {
    color: var(--color-on-surface-variant);
}

.color-dark-surface {
    background-color: var(--color-dark-surface);
}

.color-dark-surface-text {
    color: var(--color-dark-surface);
}

.color-on-dark-surface {
    background-color: var(--color-on-dark-surface);
}

.color-on-dark-surface-text {
    color: var(--color-on-dark-surface);
}

.color-inverse-surface {
    background-color: var(--color-inverse-surface);
}

.color-inverse-surface-text {
    color: var(--color-inverse-surface);
}

.color-inverse-on-surface {
    background-color: var(--color-inverse-on-surface);
}

.color-inverse-on-surface-text {
    color: var(--color-inverse-on-surface);
}

.color-inverse-primary {
    background-color: var(--color-inverse-primary);
}

.color-inverse-primary-text {
    color: var(--color-inverse-primary);
}

.color-surface-container {
    background-color: var(--color-surface-container);
}

.color-surface-container-text {
    color: var(--color-surface-container);
}

.color-on-surface-container {
    background-color: var(--color-on-surface-container);
}

.color-on-surface-container-text {
    color: var(--color-on-surface-container);
}

.color-front-on-surface-container-text {
    color: var(--color-front-on-surface-container);
}

.color-surface-container-lowest {
    background-color: var(--color-surface-container-lowest);
}

.color-surface-container-lowest-text {
    color: var(--color-surface-container-lowest);
}

.color-on-surface-container-lowest {
    background-color: var(--color-on-surface-container-lowest);
}

.color-on-surface-container-lowest-text {
    color: var(--color-on-surface-container-lowest);
}

.color-surface-container-low {
    background-color: var(--color-surface-container-low);
}

.color-surface-container-low-text {
    color: var(--color-surface-container-low);
}

.color-on-surface-container-low {
    background-color: var(--color-on-surface-container-low);
}

.color-on-surface-container-low-text {
    color: var(--color-on-surface-container-low);
}

.color-surface-container-high {
    background-color: var(--color-surface-container-high);
}

.color-surface-container-high-text {
    color: var(--color-surface-container-high);
}

.color-on-surface-container-high {
    background-color: var(--color-on-surface-container-high);
}

.color-on-surface-container-high-text {
    color: var(--color-on-surface-container-high);
}

.color-surface-container-highest {
    background-color: var(--color-surface-container-highest);
}

.color-surface-container-highest-text {
    color: var(--color-surface-container-highest);
}

.color-on-surface-container-highest {
    background-color: var(--color-on-surface-container-highest);
}

.color-on-surface-container-highest-text {
    color: var(--color-on-surface-container-highest);
}

.color-highlight-negative {
    background-color: var(--color-highlight-negative);
}

.color-highlight-negative-text {
    color: var(--color-highlight-negative);
}

.color-highlight-positive {
    background-color: var(--color-highlight-positive);
}

.color-highlight-positive-text {
    color: var(--color-highlight-positive);
}

.color-passive {
    background-color: var(--color-passive);
}

.color-passive-variant {
    background-color: var(--color-passive-variant);
}

.color-passive-text {
    color: var(--color-passive);
}

.color-passive-variant-text {
    color: var(--color-passive-variant);
}