: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: #fafafa;
    --b2c-body-background: #fff;
    --b2c-panel-background: #fafafa;
    --cp-primary-50: #efefef;
    --cp-primary-100: #d8d9d9;
    --cp-primary-200: #b9c0c3;
    --cp-primary-300: #9aa8ac;
    --cp-primary-400: #83959b;
    --cp-primary-500: #6b828a;
    --cp-primary-600: #5f7379;
    --cp-primary-700: #505f63;
    --cp-primary-800: #414b4f;
    --cp-primary-900: #303638;

    --cp-primary-contrast-50: var(--cp-dark-text-color);
    --cp-primary-contrast-100: var(--cp-dark-text-color);
    --cp-primary-contrast-200: var(--cp-light-text-color);
    --cp-primary-contrast-300: var(--cp-light-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: #fff7e0;
    --cp-accent-100: #feeab0;
    --cp-accent-200: #fedc7e;
    --cp-accent-300: #fdd048;
    --cp-accent-400: #fdc41b;
    --cp-accent-500: #fcba00;
    --cp-accent-600: #fcac00;
    --cp-accent-700: #fc9900;
    --cp-accent-800: #fc8800;
    --cp-accent-900: #fc6700;

    --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);
}

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

.navbar-header-item-selected {
    background-color: var(--cp-primary-100) !important;
}
 .entry .entry-item input[type=email], .entry .entry-item input[type=password] {width: 370px;} 

     .mat-toolbar .mdc-button { --cp-primary-contrast-500: var(--cp-primary-500); }