/* CustomerColor => customer [ Helvetic - 2024  ]  */

body {
    /* # Main brand colors */
    /* ## Primary - Primary brand color */
    --cw-color-primary: #e3032c;
    --cw-color-on-primary: #ffffff;
    --cw-color-primary-container: #ffd6de;
    --cw-color-on-primary-container: #731224;
    --cw-color-primary-variant: #CB042A;
    --cw-color-on-primary-variant: #ffffff;
    /* For creating opacity with rgba */
    --cw-color-primary-rgb-values: 227, 3, 44;
    /* ## Secondary - Secondary brand color */
    --cw-color-secondary: #878786;
    --cw-color-on-secondary: #ffffff;
    --cw-color-secondary-container: #c3c0c0;
    --cw-color-on-secondary-container: #1c1c1c;
    /* # Status Colors */
    /* ## Error - Used to indicate errors or problems */
    --cw-color-error: #Aa1a1a;
    --cw-color-on-error: #ffffff;
    --cw-color-error-container: #ffdad6;
    --cw-color-on-error-container: #410002;
    /* ## Info - To indicate information relevant to user actions */
    --cw-color-info: #7695d2;
    --cw-color-on-info: #ffffff;
    --cw-color-info-container: #d3ebff;
    --cw-color-on-info-container: #202040;
    /* ## Warning - Used to indicate warnings before a user action */
    --cw-color-warn: #ff8c00;
    --cw-color-on-warn: #402a20;
    --cw-color-warn-container: #ffe0b2;
    --cw-color-on-warn-container: #402a20;
    /* ## Success - To indicate a success event */
    --cw-color-success: #45a859;
    --cw-color-on-success: #ffffff;
    --cw-color-success-container: #b4e1ba;
    --cw-color-on-success-container: #0d2310;
    /* # Surface Colors */
    /* ## Surface - Main background colors */
    --cw-color-surface-bright: #ffffff;
    --cw-color-surface: #e8e8f1;
    --cw-color-surface-dim: #d9d9e0;
    /* ## On Surface - Color for glyphs (text, icons...) on top of backgrounds */
    --cw-color-on-surface-variant: #666666;
    --cw-color-on-surface: #333333;
    /* ## Containers - Background colors of containers of different heights in the z axis */
    --cw-color-surface-container-highest: #d6d6eb;
    --cw-color-surface-container-high: #e0e0e0;
    --cw-color-surface-container: #eeeeee;
    --cw-color-surface-container-low: #fafafa;
    --cw-color-surface-container-lowest: #ffffff;
    /* # Decoration Colors */
    /* ## Outline - For surfaces that need emphasis */
    --cw-color-outline: #878786;
    --cw-color-outline-variant: #c3c0c0;
    /* ## Shadows - Dropdown shadow color for adding extra depth and contrast */
    --cw-color-scrim: #04040c20;
    --cw-color-shadow: #06050c40;
    /* # Inverse Colors */

    --cw-color-inverse-surface: #2e3036;
    --cw-color-inverse-on-surface: #f0f0f7;
    --cw-color-inverse-primary: #ffd6de;
    /* # Specific Layout */
    /* ## Sidebar and navbar */
    --cw-color-layout-navbar: var(--cw-color-surface-container);
    --cw-color-on-layout-navbar: var(--cw-color-on-surface-variant);
    --cw-color-layout-sidebar: var(--cw-color-surface-container);
    --cw-color-on-layout-sidebar: var(--cw-color-on-surface-variant);
    --cw-color-layout-accent: var(--cw-color-primary-variant);
    --cw-color-on-layout-accent: var(--cw-color-on-primary-variant);
    --cw-color-layout-sidebar-container: var(--cw-color-surface-container-low);
    /* ## Buttons and icons */
    --cw-color-icons: var(--cw-color-on-surface-variant);
    --cw-color-icons-variant: var(--cw-color-on-surface);
    --cw-color-button-background: var(--cw-color-primary);
    --cw-color-button-content: var(--cw-color-on-primary);
    --cw-color-button-hover-background: var(--cw-color-primary-variant);
    --cw-color-button-hover-content: var(--cw-color-on-primary-variant);
    /* ## Tables */
    --cw-color-layout-table-headers: var(--cw-color-secondary);
    --cw-color-layout-on-table-headers: var(--cw-color-on-secondary);
    --cw-color-layout-table-row-selected: var(--cw-color-primary-container);
    --cw-color-layout-on-table-row-selected: var(--cw-color-on-primary-container);
}




/* This client custom CSS */

#CBLpageLoginMVC {
    --cw-color-primary-rgb-values: 214, 227, 233;
    --cw-color-primary-opacity-70: rgba(214, 227, 233, 0.7);
    --cw-color-primary-opacity-50: rgba(214, 227, 233, 0.5);
    --cw-color-primary-opacity-30: rgba(214, 227, 233, 0.3);
}

    #CBLpageLoginMVC .circle-logo {
        --cw-color-primary-rgb-values: 214, 227, 233;
        --cw-color-primary-opacity-70: rgba(214, 227, 233, 0.7);
        --cw-color-primary-opacity-50: rgba(214, 227, 233, 0.5);
        --cw-color-primary-opacity-30: rgba(214, 227, 233, 0.3);
    }

#LeftBoxAspx .cbl-leftBoxAspx-overlay {
    background: var(--cw-color-primary-opacity-70)!important;
}