:root {
    --cp-font-family       : 'Source Sans 3';
    --cp-dark-text-color   : rgba(0, 0, 0, 0.87);
    --cp-light-text-color  : white;
    --cp-toolbar-text-color : var(--cp-dark-text-color);
    --cp-toolbar-background: white;
    --cp-body-background   : var(--cp-primary-50);
    --b2c-panel-background : white;
    --b2c-body-background  : var(--cp-primary-50);

    --cp-primary-50 : #e6f0f8;
    --cp-primary-100: #c2e2fb;
    --cp-primary-200: #79bef6;
    --cp-primary-300: #50a2f2;
    --cp-primary-400: #4281d1;
    --cp-primary-500: #31529f;
    --cp-primary-600: #30529d;
    --cp-primary-700: #264991;
    --cp-primary-800: #1f3f85;
    --cp-primary-900: #0c2e71;

    --cp-primary-contrast-50 : var(--cp-dark-text-color);
    --cp-primary-contrast-100: var(--cp-dark-text-color);
    --cp-primary-contrast-200: var(--cp-dark-text-color);
    --cp-primary-contrast-300: var(--cp-dark-text-color);
    --cp-primary-contrast-400: var(--cp-light-text-color);
    --cp-primary-contrast-500: var(--cp-light-text-color);
    --cp-primary-contrast-600: var(--cp-light-text-color);
    --cp-primary-contrast-700: var(--cp-light-text-color);
    --cp-primary-contrast-800: var(--cp-light-text-color);
    --cp-primary-contrast-900: var(--cp-light-text-color);

    --cp-accent-50 : #eef9f7;
    --cp-accent-100: #e0f4f1;
    --cp-accent-200: #b3e3db;
    --cp-accent-300: #81d1c4;
    --cp-accent-400: #4dbeac;
    --cp-accent-500: #20af99;
    --cp-accent-600: #00a088;
    --cp-accent-700: #00826b;
    --cp-accent-800: #00725c;
    --cp-accent-900: #005641;

    --cp-accent-contrast-50 : var(--cp-dark-text-color);
    --cp-accent-contrast-100: var(--cp-dark-text-color);
    --cp-accent-contrast-200: var(--cp-dark-text-color);
    --cp-accent-contrast-300: var(--cp-dark-text-color);
    --cp-accent-contrast-400: var(--cp-dark-text-color);
    --cp-accent-contrast-500: var(--cp-light-text-color);
    --cp-accent-contrast-600: var(--cp-light-text-color);
    --cp-accent-contrast-700: var(--cp-light-text-color);
    --cp-accent-contrast-800: var(--cp-light-text-color);
    --cp-accent-contrast-900: var(--cp-light-text-color);
}

.mdc-linear-progress__bar-inner {
    border-image-source: linear-gradient(90deg, rgb(254, 232, 0) 0%, rgb(139, 196, 125) 33%, rgb(31, 155, 163) 66%, rgb(47, 86, 161) 100%) !important;
    border-image-slice : 1;
}

.mat-toolbar.mat-primary {
    color     : var(--cp-dark-text-color) !important;
}

.navbar-header-item-selected {
    background-color: var(--cp-primary-100) !important;
}
 .mat-toolbar .mdc-button { --cp-primary-contrast-500: var(--cp-primary-500); }