:root {
    --cp-font-family         : 'Source Sans 3';
    --cp-dark-text-color     : #333333;
    --cp-light-text-color    : #f5f5f5;
    --cp-toolbar-background  : #020202;
    --cp-body-background     : #fafafa;
    --b2c-body-background    : #272727;
    --b2c-panel-background   : var(--cp-body-background);
    --cp-primary-50          : #f5f5f5;
    --cp-primary-100         : #e9e9e9;
    --cp-primary-200         : #dadada;
    --cp-primary-300         : #c5c5c5;
    --cp-primary-400         : #272727;
    --cp-primary-500         : #020202;
    --cp-primary-600         : #020202;
    --cp-primary-700         : #020202;
    --cp-primary-800         : #020202;
    --cp-primary-900         : #000000;
    --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-dark-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           : #fffde7;
    --cp-accent-100          : #fff9c4;
    --cp-accent-200          : #fff59d;
    --cp-accent-300          : #fef075;
    --cp-accent-400          : #fceb55;
    --cp-accent-500          : #ffeb3b;
    --cp-accent-600          : #fdd835;
    --cp-accent-700          : #fbc02d;
    --cp-accent-800          : #f9a825;
    --cp-accent-900          : #f57f16;
    --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-dark-text-color);
    --cp-accent-contrast-600 : var(--cp-dark-text-color);
    --cp-accent-contrast-700 : var(--cp-dark-text-color);
    --cp-accent-contrast-800 : var(--cp-dark-text-color);
    --cp-accent-contrast-900 : var(--cp-dark-text-color);
}

.mat-toolbar {
    border-bottom: 1px solid #4d4d4d;
}

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

.navbar-header-item-selected {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color           : var(--cp-accent-500) !important;
}

.mdc-button.mat-primary:hover {
    color: var(--cp-accent-500) !important;
}

:root {
    --mat-stepper-header-selected-state-icon-foreground-color: var(--cp-accent-500);
}