cmat 0.0.31 → 0.0.33

package/styles/themes.scss

@@ -1,165 +1,2032 @@
 @use 'sass:map';
-@use '@angular/material' as mat;
-@use 'user-themes' as userThemes;
-
-/* Set the base colors for light themes */
-$light-base: (
-    foreground: (
-        base: #000000,
-        divider: #E2E8F0, /* slate.200 */
-        dividers: #E2E8F0, /* slate.200 */
-        disabled: #94A3B8, /* slate.400 */
-        disabled-button: #94A3B8, /* slate.400 */
-        disabled-text: #94A3B8, /* slate.400 */
-        elevation: #000000,
-        hint-text: #94A3B8, /* slate.400 */
-        secondary-text: #64748B, /* slate.500 */
-        icon: #64748B, /* slate.500 */
-        icons: #64748B, /* slate.500 */
-        mat-icon: #64748B, /* slate.500 */
-        text: #1E293B, /* slate.800 */
-        slider-min: #1E293B, /* slate.800 */
-        slider-off: #CBD5E1, /* slate.300 */
-        slider-off-active: #94A3B8 /* slate.400 */
-    ),
-    background: (
-        status-bar: #CBD5E1, /* slate.300 */
-        app-bar: #FFFFFF,
-        background: #F1F5F9, /* slate.100 */
-        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
-        card: #FFFFFF,
-        dialog: #FFFFFF,
-        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
-        raised-button: #FFFFFF,
-        focused-button: #64748B, /* slate.500 */
-        selected-button: #E2E8F0, /* slate.200 */
-        selected-disabled-button: #E2E8F0, /* slate.200 */
-        disabled-button-toggle: #CBD5E1, /* slate.300 */
-        unselected-chip: #E2E8F0, /* slate.200 */
-        disabled-list-option: #CBD5E1, /* slate.300 */
-        tooltip: #1E293B /* slate.800 */
-    )
-);
-
-/* Set the base colors for dark themes */
-$dark-base: (
-    foreground: (
-        base: #FFFFFF,
-        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-        disabled: #E2E8F0, /* slate.200 */
-        disabled-button: #cbd5e1, /* slate.300 */
-        disabled-text: #E2E8F0, /* slate.200 */
-        elevation: #000000,
-        hint-text: #64748B, /* slate.500 */
-        secondary-text: #94A3B8, /* slate.400 */
-        icon: #F1F5F9, /* slate.100 */
-        icons: #F1F5F9, /* slate.100 */
-        mat-icon: #94A3B8, /* slate.400 */
-        text: #FFFFFF,
-        slider-min: #FFFFFF,
-        slider-off: #64748B, /* slate.500 */
-        slider-off-active: #94A3B8 /* slate.400 */
-    ),
-    background: (
-        status-bar: #0F172A, /* slate.900 */
-        app-bar: #0F172A, /* slate.900 */
-        background: #0F172A, /* slate.900 */
-        hover: rgba(255, 255, 255, 0.05),
-        card: #1E293B, /* slate.800 */
-        dialog: #1E293B, /* slate.800 */
-        disabled-button: rgba(71, 85, 105, 0.38), /* slate.600 + opacity */
-        raised-button: #cbd5e1, /* slate.300 */
-        focused-button: #E2E8F0, /* slate.200 */
-        selected-button: rgba(255, 255, 255, 0.05),
-        selected-disabled-button: #64748B, /* slate.500 */
-        disabled-button-toggle: #1E293B, /* slate.800 */
-        unselected-chip: #475569, /* slate.600 */
-        disabled-list-option: #E2E8F0, /* slate.200 */
-        tooltip: #64748B /* slate.500 */
-    )
-);
-
-/* Include the core Angular Material styles */
-@include mat.elevation-classes();
-@include mat.app-background();
-
-/* Create a base theme without any color to set the density and typography */
-@include mat.all-component-themes((
-    color: null,
-    density: 0,
-    typography: mat.m2-define-typography-config(
-        $font-family: theme('fontFamily.sans'),
-        $headline-1: mat.m2-define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
-        $headline-2: mat.m2-define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
-        $headline-3: mat.m2-define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
-        $headline-4: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-        $headline-5: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $headline-6: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $subtitle-1: mat.m2-define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
-        $subtitle-2: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
-        $body-1: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $body-2: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
-        $caption: mat.m2-define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
-        $button: mat.m2-define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
-        $overline: mat.m2-define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
-    )
-));
+@use '@angular/material'as mat;
+@use 'user-themes'as userThemes;
 
-/* Loop through user themes and generate Angular Material themes */
-@each $name, $theme in userThemes.$user-themes {
-
-    /* Generate the palettes */
-    $palettes: ();
-    @each $name in (primary, accent, warn) {
-
-        /* Define the Angular Material theme */
-        $palette: mat.m2-define-palette(map.get($theme, $name));
-
-        /* Replace the default colors on the defined Material palette */
-        $palette: map.merge($palette, (
-            default: map.get(map.get($theme, $name), DEFAULT),
-            lighter: map.get(map.get($theme, $name), 100),
-            darker: map.get(map.get($theme, $name), 700),
-            text: map.get(map.get($theme, $name), DEFAULT),
-            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
-            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
-            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
-        ));
-
-        $palettes: map.merge($palettes, (#{$name}: $palette));
-    }
-
-    /* Define a light & dark Angular Material theme with the generated palettes */
-    $light-theme: mat.m2-define-light-theme((
-        color: ($palettes)
-    ));
-
-    $dark-theme: mat.m2-define-dark-theme((
-        color: ($palettes)
-    ));
-
-    /* Merge the custom base colors with the generated themes */
-    $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
-    $light-theme: map.merge(
-            (color: $light-theme-colors),
-            $light-theme-colors
-    );
-
-    $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
-    $dark-theme: map.merge(
-            (color: $dark-theme-colors),
-            $dark-theme-colors
-    );
-
-    /* Generate and encapsulate Angular Material themes */
-    #{map.get($theme, selector)} .light,
-    #{map.get($theme, selector)}.light {
-        @include mat.all-component-colors($light-theme);
-    }
-
-    #{map.get($theme, selector)} .dark,
-    #{map.get($theme, selector)}.dark {
-        @include mat.all-component-colors($dark-theme);
-    }
+
+html {
+        --mat-sys-body-large: 400 0.875rem/1.5rem AliPuHuiTi, sans-serif;
+        --mat-sys-body-large-font: AliPuHuiTi, sans-serif;
+        --mat-sys-body-large-line-height: 1.5rem;
+        --mat-sys-body-large-size: 0.875rem;
+        --mat-sys-body-large-tracking: 0.031rem;
+        --mat-sys-body-large-weight: 400;
+        --mat-sys-body-medium: 400 0.875rem/1.5rem AliPuHuiTi, sans-serif;
+        --mat-sys-body-medium-font: AliPuHuiTi, sans-serif;
+        --mat-sys-body-medium-line-height: 1.6rem;
+        --mat-sys-body-medium-size: 0.875rem;
+        --mat-sys-body-medium-tracking: 0.016rem;
+        --mat-sys-body-medium-weight: 400;
+        --mat-sys-body-small: 400 0.875rem/1.5rem AliPuHuiTi, sans-serif;
+        --mat-sys-body-small-font: AliPuHuiTi, sans-serif;
+        --mat-sys-body-small-line-height: 1.5rem;
+        --mat-sys-body-small-size: 0.875rem;
+        --mat-sys-body-small-tracking: 0.025rem;
+        --mat-sys-body-small-weight: 400;
+
+        --mat-sys-display-large: 400 3.562rem / 4rem AliPuHuiTi, sans-serif;
+        --mat-sys-display-large-font: AliPuHuiTi, sans-serif;
+        --mat-sys-display-large-line-height: 4rem;
+        --mat-sys-display-large-size: 3.562rem;
+        --mat-sys-display-large-tracking: -0.016rem;
+        --mat-sys-display-large-weight: 400;
+        --mat-sys-display-medium: 400 2.812rem / 3.25rem AliPuHuiTi, sans-serif;
+        --mat-sys-display-medium-font: AliPuHuiTi, sans-serif;
+        --mat-sys-display-medium-line-height: 3.25rem;
+        --mat-sys-display-medium-size: 2.812rem;
+        --mat-sys-display-medium-tracking: 0;
+        --mat-sys-display-medium-weight: 400;
+        --mat-sys-display-small: 400 2.25rem / 2.75rem AliPuHuiTi, sans-serif;
+        --mat-sys-display-small-font: AliPuHuiTi, sans-serif;
+        --mat-sys-display-small-line-height: 2.75rem;
+        --mat-sys-display-small-size: 2.25rem;
+        --mat-sys-display-small-tracking: 0;
+        --mat-sys-display-small-weight: 400;
+
+        --mat-sys-headline-large: 700 1.875rem/2.25rem AliPuHuiTi, sans-serif;
+        --mat-sys-headline-large-font: AliPuHuiTi, sans-serif;
+        --mat-sys-headline-large-line-height: 2.25rem;
+        --mat-sys-headline-large-size: 1.875rem;
+        --mat-sys-headline-large-tracking: 0;
+        --mat-sys-headline-large-weight: 700;
+        --mat-sys-headline-medium: 600 1.125rem/1.75rem AliPuHuiTi, sans-serif;
+        --mat-sys-headline-medium-font: AliPuHuiTi, sans-serif;
+        --mat-sys-headline-medium-line-height: 1.75rem;
+        --mat-sys-headline-medium-size: 1.125rem;
+        --mat-sys-headline-medium-tracking: 0;
+        --mat-sys-headline-medium-weight: 600;
+        --mat-sys-headline-small: 400 0.875rem/1.5rem AliPuHuiTi, sans-serif;
+        --mat-sys-headline-small-font: AliPuHuiTi, sans-serif;
+        --mat-sys-headline-small-line-height: 1.5rem;
+        --mat-sys-headline-small-size: 0.875rem;
+        --mat-sys-headline-small-tracking: 0;
+        --mat-sys-headline-small-weight: 400;
+
+        --mat-sys-label-large: 400 1rem/1.75rem AliPuHuiTi, sans-serif;
+        --mat-sys-label-large-font: AliPuHuiTi, sans-serif;
+        --mat-sys-label-large-line-height: 1.75rem;
+        --mat-sys-label-large-size: 1rem;
+        --mat-sys-label-large-tracking: 0.006rem;
+        --mat-sys-label-large-weight: 400;
+        --mat-sys-label-large-weight-prominent: 700;
+        --mat-sys-label-medium: 600 0.875rem/1.25rem AliPuHuiTi, sans-serif;
+        --mat-sys-label-medium-font: AliPuHuiTi, sans-serif;
+        --mat-sys-label-medium-line-height: 1.25rem;
+        --mat-sys-label-medium-size: 0.875rem;
+        --mat-sys-label-medium-tracking: 0.031rem;
+        --mat-sys-label-medium-weight: 600;
+        --mat-sys-label-medium-weight-prominent: 700;
+        --mat-sys-label-small: 500 0.75rem/1rem AliPuHuiTi, sans-serif;
+        --mat-sys-label-small-font: AliPuHuiTi, sans-serif;
+        --mat-sys-label-small-line-height: 1rem;
+        --mat-sys-label-small-size: 0.75rem;
+        --mat-sys-label-small-tracking: 0.031rem;
+        --mat-sys-label-small-weight: 500;
+
+        --mat-sys-title-large: 400 1.375rem / 1.75rem AliPuHuiTi, sans-serif;
+        --mat-sys-title-large-font: AliPuHuiTi, sans-serif;
+        --mat-sys-title-large-line-height: 1.75rem;
+        --mat-sys-title-large-size: 1.375rem;
+        --mat-sys-title-large-tracking: 0;
+        --mat-sys-title-large-weight: 400;
+        --mat-sys-title-medium: 500 1rem / 1.5rem AliPuHuiTi, sans-serif;
+        --mat-sys-title-medium-font: AliPuHuiTi, sans-serif;
+        --mat-sys-title-medium-line-height: 1.5rem;
+        --mat-sys-title-medium-size: 1rem;
+        --mat-sys-title-medium-tracking: 0.009rem;
+        --mat-sys-title-medium-weight: 500;
+        --mat-sys-title-small: 500 0.875rem / 1.25rem AliPuHuiTi, sans-serif;
+        --mat-sys-title-small-font: AliPuHuiTi, sans-serif;
+        --mat-sys-title-small-line-height: 1.25rem;
+        --mat-sys-title-small-size: 0.875rem;
+        --mat-sys-title-small-tracking: 0.006rem;
+        --mat-sys-title-small-weight: 500;
+
+        --mat-option-label-text-line-height: 1.5rem;
+        --mat-option-label-text-size: 0.875rem;
+        --mat-option-label-text-tracking: normal;
+        --mat-option-label-text-weight: 400;
+        --mat-optgroup-label-text-line-height: 1.5rem;
+        --mat-optgroup-label-text-size: 0.875rem;
+        --mat-optgroup-label-text-tracking: normal;
+        --mat-optgroup-label-text-weight: 400;
+
+        --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px #0003, 0px 0px 0px 0px #00000024, 0px 0px 0px 0px #0000001f;
+        --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px #0003, 0px 1px 1px 0px #00000024, 0px 1px 3px 0px #0000001f;
+        --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px #0003, 0px 2px 2px 0px #00000024, 0px 1px 5px 0px #0000001f;
+        --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px #0003, 0px 3px 4px 0px #00000024, 0px 1px 8px 0px #0000001f;
+        --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px #0003, 0px 4px 5px 0px #00000024, 0px 1px 10px 0px #0000001f;
+        --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px #0003, 0px 5px 8px 0px #00000024, 0px 1px 14px 0px #0000001f;
+        --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px #0003, 0px 6px 10px 0px #00000024, 0px 1px 18px 0px #0000001f;
+        --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px #0003, 0px 7px 10px 1px #00000024, 0px 2px 16px 1px #0000001f;
+        --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px #0003, 0px 8px 10px 1px #00000024, 0px 3px 14px 2px #0000001f;
+        --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px #0003, 0px 9px 12px 1px #00000024, 0px 3px 16px 2px #0000001f;
+        --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px #0003, 0px 10px 14px 1px #00000024, 0px 4px 18px 3px #0000001f;
+        --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px #0003, 0px 11px 15px 1px #00000024, 0px 4px 20px 3px #0000001f;
+        --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px #0003, 0px 12px 17px 2px #00000024, 0px 5px 22px 4px #0000001f;
+        --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px #0003, 0px 13px 19px 2px #00000024, 0px 5px 24px 4px #0000001f;
+        --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px #0003, 0px 14px 21px 2px #00000024, 0px 5px 26px 4px #0000001f;
+        --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px #0003, 0px 15px 22px 2px #00000024, 0px 6px 28px 5px #0000001f;
+        --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px #0003, 0px 16px 24px 2px #00000024, 0px 6px 30px 5px #0000001f;
+        --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px #0003, 0px 17px 26px 2px #00000024, 0px 6px 32px 5px #0000001f;
+        --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px #0003, 0px 18px 28px 2px #00000024, 0px 7px 34px 6px #0000001f;
+        --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px #0003, 0px 19px 29px 2px #00000024, 0px 7px 36px 6px #0000001f;
+        --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px #0003, 0px 20px 31px 3px #00000024, 0px 8px 38px 7px #0000001f;
+        --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px #0003, 0px 21px 33px 3px #00000024, 0px 8px 40px 7px #0000001f;
+        --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px #0003, 0px 22px 35px 3px #00000024, 0px 8px 42px 7px #0000001f;
+        --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px #0003, 0px 23px 36px 3px #00000024, 0px 9px 44px 8px #0000001f;
+        --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px #0003, 0px 24px 38px 3px #00000024, 0px 9px 46px 8px #0000001f;
+
+
+        @include mat.card-overrides((elevated-container-shape:4px,
+                        outlined-container-shape:4px,
+                        outlined-outline-width:1px,
+                        title-text-line-height:1.5rem,
+                        title-text-size:0.875rem,
+                        title-text-tracking: normal,
+                        title-text-weight:400,
+                        subtitle-text-line-height:1.25rem,
+                        subtitle-text-size:0.875rem,
+                        subtitle-text-tracking: normal,
+                        subtitle-text-weight: 600,
+                        elevated-container-elevation: var(--mat-app-elevation-shadow-level-1),
+                        outlined-container-elevation:var(--mat-app-elevation-shadow-level-0)));
+
+        @include mat.form-field-overrides((filled-active-indicator-height:1px,
+                        filled-focus-active-indicator-height:2px,
+                        filled-container-shape:4px,
+                        outlined-outline-width:1px,
+                        outlined-focus-outline-width:2px,
+                        outlined-container-shape:4px,
+                        container-height:56px,
+                        filled-label-display:block,
+                        container-vertical-padding:16px,
+                        filled-with-label-container-padding-top:24px,
+                        filled-with-label-container-padding-bottom:8px,
+                        filled-label-text-size:0.875rem,
+                        filled-label-text-tracking:normal,
+                        filled-label-text-weight:400,
+                        outlined-label-text-size:0.875rem,
+                        outlined-label-text-tracking:normal,
+                        outlined-label-text-weight:400,
+                        container-text-line-height:1.5rem,
+                        container-text-size:0.875rem,
+                        container-text-tracking:normal,
+                        container-text-weight:400,
+                        outlined-label-text-populated-size: 0.875rem,
+                        subscript-text-line-height:1rem,
+                        subscript-text-size: 0.75rem,
+                        subscript-text-tracking: normal,
+                        subscript-text-weight: 400,
+                        leading-icon-color: unset,
+                        disabled-leading-icon-color: unset,
+                        trailing-icon-color: unset,
+                        disabled-trailing-icon-color: unset,
+                        error-focus-trailing-icon-color: unset,
+                        error-hover-trailing-icon-color: unset,
+                        error-trailing-icon-color: unset));
+
+        @include mat.select-overrides((container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        arrow-transform: translateY(-8px),
+                        trigger-text-line-height: 1.5rem,
+                        trigger-text-size: 0.875rem,
+                        trigger-text-tracking: normal,
+                        trigger-text-weight: 400));
+
+        @include mat.autocomplete-overrides((container-shape:4px,
+                        container-elevation-shadow: var(--mat-app-elevation-shadow-level-8)));
+
+        @include mat.dialog-overrides((container-shape: 4px,
+                        container-elevation-shadow: var(--mat-app-elevation-shadow-level-24),
+                        container-max-width: 80vw,
+                        container-small-max-width: 80vw,
+                        container-min-width: 0,
+                        actions-alignment: start,
+                        actions-padding: 8px,
+                        content-padding: 20px 24px,
+                        with-actions-content-padding: 20px 24px,
+                        headline-padding: 0 24px 9px,
+                        subhead-line-height: 1.5rem,
+                        subhead-size: 0.875rem,
+                        subhead-weight: 400,
+                        subhead-tracking: normal,
+                        supporting-text-line-height: 1.5rem,
+                        supporting-text-size: 0.875rem,
+                        supporting-text-weight: 400,
+                        supporting-text-tracking: normal));
+
+        @include mat.chips-overrides((container-shape-radius: 16px,
+                        with-avatar-avatar-shape-radius: 14px,
+                        with-avatar-avatar-size: 28px,
+                        with-icon-icon-size: 18px,
+                        outline-width: 0,
+                        outline-color: #0000,
+                        disabled-outline-color: #0000,
+                        focus-outline-color: #0000,
+                        hover-state-layer-opacity: 0.04,
+                        with-avatar-disabled-avatar-opacity: 1,
+                        flat-selected-outline-width: 0,
+                        selected-hover-state-layer-opacity: 0.04,
+                        with-trailing-icon-disabled-trailing-icon-opacity: 1,
+                        with-icon-disabled-icon-opacity: 1,
+                        disabled-container-opacity: 0.4,
+                        trailing-action-opacity: 0.54,
+                        trailing-action-focus-opacity: 1,
+                        trailing-action-state-layer-color: #0000,
+                        selected-trailing-action-state-layer-color: #0000,
+                        trailing-action-hover-state-layer-opacity: 0,
+                        trailing-action-focus-state-layer-opacity: 0,
+                        container-height: 32px,
+                        label-text-line-height: 1.5rem,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-weight: 400,
+                        focus-state-layer-opacity:0.12,
+                        selected-focus-state-layer-opacity: 0.12));
+
+        @include mat.slide-toggle-overrides((disabled-selected-icon-opacity: 0.38,
+                        disabled-track-opacity: 0.12,
+                        disabled-unselected-icon-opacity: 0.38,
+                        handle-height: 20px,
+                        handle-shape: 10px,
+                        handle-width: 20px,
+                        selected-icon-size: 18px,
+                        track-height: 14px,
+                        track-shape: 7px,
+                        track-width: 36px,
+                        unselected-icon-size: 18px,
+                        selected-focus-state-layer-opacity: 0.12,
+                        selected-hover-state-layer-opacity: 0.04,
+                        selected-pressed-state-layer-opacity: 0.1,
+                        unselected-focus-state-layer-opacity: 0.12,
+                        unselected-hover-state-layer-opacity: 0.04,
+                        unselected-pressed-state-layer-opacity: 0.1,
+                        disabled-selected-handle-opacity:0.38,
+                        disabled-unselected-handle-opacity:0.38,
+                        unselected-handle-size: 20px,
+                        selected-handle-size: 20px,
+                        pressed-handle-size: 20px,
+                        with-icon-handle-size: 20px,
+                        selected-handle-horizontal-margin: 0,
+                        selected-with-icon-handle-horizontal-margin: 0,
+                        selected-pressed-handle-horizontal-margin: 0,
+                        unselected-handle-horizontal-margin: 0,
+                        unselected-with-icon-handle-horizontal-margin: 0,
+                        unselected-pressed-handle-horizontal-margin: 0,
+                        visible-track-opacity: 1,
+                        hidden-track-opacity: 1,
+                        visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
+                        hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
+                        track-outline-width: 1px,
+                        track-outline-color: #0000,
+                        selected-track-outline-width: 1px,
+                        selected-track-outline-color: #0000,
+                        disabled-unselected-track-outline-width: 1px,
+                        disabled-unselected-track-outline-color: #0000,
+                        state-layer-size: 40px,
+                        label-text-line-height: 1.5rem,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-weight: 400,
+                        handle-elevation-shadow:var(--mat-app-elevation-shadow-level-1),
+                        disabled-handle-elevation-shadow:var(--mat-app-elevation-shadow-level-1)));
+
+        @include mat.radio-overrides((disabled-selected-icon-opacity: 0.38,
+                        disabled-unselected-icon-opacity: 0.38,
+                        state-layer-size: 40px,
+                        touch-target-display: block,
+                        label-text-line-height: 1.5rem,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-weight: 400,
+                ));
+
+        @include mat.slider-overrides((active-track-height: 6px,
+                        active-track-shape: 9999px,
+                        handle-height: 20px,
+                        handle-shape: 50%,
+                        handle-width: 20px,
+                        inactive-track-height: 4px,
+                        inactive-track-shape: 9999px,
+                        with-overlap-handle-outline-width: 1px,
+                        with-tick-marks-active-container-opacity: 0.6,
+                        with-tick-marks-container-shape: 50%,
+                        with-tick-marks-container-size: 2px,
+                        with-tick-marks-inactive-container-opacity: 0.6,
+                        handle-elevation: var(--mat-app-elevation-shadow-level-1),
+                        value-indicator-width: auto,
+                        value-indicator-height: 32px,
+                        value-indicator-caret-display: block,
+                        value-indicator-border-radius: 4px,
+                        value-indicator-padding: 0 12px,
+                        value-indicator-text-transform: none,
+                        value-indicator-container-transform: translateX(-50%),
+                        label-label-text-size: 0.875rem,
+                        label-label-text-line-height: 1.25rem,
+                        label-label-text-tracking: normal,
+                        label-label-text-weight: 600));
+
+        @include mat.menu-overrides((container-shape: 4px,
+                        divider-bottom-spacing: 0,
+                        divider-top-spacing: 0,
+                        item-spacing: 16px,
+                        item-icon-size: 24px,
+                        item-leading-spacing: 16px,
+                        item-trailing-spacing: 16px,
+                        item-with-icon-leading-spacing: 16px,
+                        item-with-icon-trailing-spacing: 16px,
+                        container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        item-label-text-size: 0.875rem,
+                        item-label-text-tracking: normal,
+                        item-label-text-line-height: 1.5rem,
+                        item-label-text-weight: 400));
+
+        @include mat.list-overrides((list-item-container-shape: 0,
+                        list-item-leading-avatar-shape: 50%,
+                        list-item-container-color: #0000,
+                        list-item-selected-container-color: #0000,
+                        list-item-leading-avatar-color: #0000,
+                        list-item-leading-icon-size: 24px,
+                        list-item-leading-avatar-size: 40px,
+                        list-item-trailing-icon-size: 24px,
+                        list-item-disabled-state-layer-color: #0000,
+                        list-item-disabled-state-layer-opacity: 0,
+                        list-item-disabled-label-text-opacity: 0.38,
+                        list-item-disabled-leading-icon-opacity: 0.38,
+                        list-item-disabled-trailing-icon-opacity: 0.38,
+                        active-indicator-color: #0000,
+                        active-indicator-shape: 4px,
+                        list-item-one-line-container-height: 48px,
+                        list-item-two-line-container-height: 64px,
+                        list-item-three-line-container-height: 88px,
+                        list-item-leading-icon-start-space: 16px,
+                        list-item-leading-icon-end-space: 32px,
+                        list-item-label-text-line-height: 1.5rem,
+                        list-item-label-text-size: 0.875rem,
+                        list-item-label-text-tracking: normal,
+                        list-item-label-text-weight: 400,
+                        list-item-supporting-text-line-height: 1.5rem,
+                        list-item-supporting-text-size: 0.875rem,
+                        list-item-supporting-text-tracking: normal,
+                        list-item-supporting-text-weight: 400,
+                        list-item-trailing-supporting-text-size: 0.75rem,
+                        list-item-trailing-supporting-text-tracking: normal,
+                        list-item-trailing-supporting-text-weight: 400,
+                        list-item-hover-state-layer-opacity: 0.08,
+                        list-item-focus-state-layer-opacity: 0.24));
+
+        @include mat.paginator-overrides((container-size: 56px,
+                        form-field-container-height: 40px,
+                        form-field-container-vertical-padding: 8px,
+                        touch-target-display: block,
+                        container-text-line-height: 1rem,
+                        container-text-size: 0.75rem,
+                        container-text-tracking: normal,
+                        container-text-weight: 400,
+                        select-trigger-text-size: 0.75rem,
+                ));
+
+
+        @include mat.tabs-overrides((divider-height: 0,
+                        divider-color: #0000,
+                        container-height:48px,
+                        active-indicator-height: 2px,
+                        active-indicator-shape: 0,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-line-height: 0.875rem,
+                        label-text-weight: 500));
+
+        @include mat.checkbox-overrides((disabled-selected-checkmark-color: #fff,
+                        selected-focus-state-layer-opacity: 0.16,
+                        selected-hover-state-layer-opacity: 0.04,
+                        selected-pressed-state-layer-opacity: 0.16,
+                        unselected-focus-state-layer-opacity: 0.16,
+                        unselected-hover-state-layer-opacity: 0.04,
+                        unselected-pressed-state-layer-opacity: 0.16,
+                        state-layer-size: 40px,
+                        touch-target-display: block,
+                        label-text-line-height: 1.5rem,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-weight: 400,
+                ));
+
+        @include mat.button-overrides((text-container-shape:4px,
+                        text-touch-target-display:block,
+                        filled-container-shape:4px,
+                        filled-touch-target-display:block,
+                        protected-container-shape:4px,
+                        protected-container-elevation-shadow:var(--mat-app-elevation-shadow-level-2),
+                        protected-disabled-container-elevation-shadow:var(--mat-app-elevation-shadow-level-0),
+                        protected-focus-container-elevation-shadow:var(--mat-app-elevation-shadow-level-4),
+                        protected-hover-container-elevation-shadow:var(--mat-app-elevation-shadow-level-4),
+                        protected-pressed-container-elevation-shadow:var(--mat-app-elevation-shadow-level-8),
+                        outlined-touch-target-display:block,
+                        outlined-outline-width:1px,
+                        outlined-container-shape:4px,
+                        text-horizontal-padding:8px,
+                        text-with-icon-horizontal-padding:8px,
+                        text-icon-spacing:8px,
+                        text-icon-offset:0,
+                        filled-horizontal-padding:16px,
+                        filled-icon-spacing:8px,
+                        filled-icon-offset:-4px,
+                        protected-horizontal-padding:16px,
+                        protected-icon-spacing:8px,
+                        protected-icon-offset:-4px,
+                        outlined-horizontal-padding:15px,
+                        outlined-icon-spacing:8px,
+                        outlined-icon-offset:-4px,
+                        text-container-height:36px,
+                        filled-container-height:36px,
+                        protected-container-height:36px,
+                        outlined-container-height:36px,
+                        protected-touch-target-display:block,
+                        text-label-text-size:0.875rem,
+                        text-label-text-tracking:normal,
+                        text-label-text-weight:500,
+                        text-label-text-transform:none,
+                        filled-label-text-size:0.875rem,
+                        filled-label-text-tracking:normal,
+                        filled-label-text-weight:500,
+                        filled-label-text-transform:none,
+                        protected-label-text-size:0.875rem,
+                        protected-label-text-tracking:normal,
+                        protected-label-text-weight:500,
+                        protected-label-text-transform:none,
+                        outlined-label-text-size:0.875rem,
+                        outlined-label-text-tracking:normal,
+                        outlined-label-text-weight:500,
+                        outlined-label-text-transform:none,
+                        text-hover-state-layer-opacity:0.04,
+                        text-focus-state-layer-opacity:0.12,
+                        text-pressed-state-layer-opacity: 0.12,
+                        filled-hover-state-layer-opacity:0.04,
+                        filled-focus-state-layer-opacity:0.12,
+                        filled-pressed-state-layer-opacity: 0.12,
+                        protected-hover-state-layer-opacity:0.04,
+                        protected-focus-state-layer-opacity:0.12,
+                        protected-pressed-state-layer-opacity: 0.12,
+                        outlined-hover-state-layer-opacity:0.04,
+                        outlined-focus-state-layer-opacity:0.12,
+                        outlined-pressed-state-layer-opacity: 0.12));
+
+        @include mat.icon-button-overrides((icon-size:24px,
+                        touch-target-display:block,
+                        icon-color: inherit,
+                        hover-state-layer-opacity:0.04,
+                        focus-state-layer-opacity: 0.12,
+                        pressed-state-layer-opacity: 0.12));
+
+        @include mat.fab-overrides((container-shape: 50%,
+                        container-elevation-shadow:var(--mat-app-elevation-shadow-level-6),
+                        focus-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        hover-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        pressed-container-elevation-shadow: var(--mat-app-elevation-shadow-level-12),
+                        small-container-shape: 50%,
+                        small-container-elevation-shadow: var(--mat-app-elevation-shadow-level-6),
+                        small-focus-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        small-hover-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        small-pressed-container-elevation-shadow: var(--mat-app-elevation-shadow-level-12),
+                        extended-container-height: 48px,
+                        extended-container-shape: 24px,
+                        extended-container-elevation-shadow: var(--mat-app-elevation-shadow-level-6),
+                        extended-focus-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        extended-hover-container-elevation-shadow: var(--mat-app-elevation-shadow-level-8),
+                        extended-pressed-container-elevation-shadow: var(--mat-app-elevation-shadow-level-12),
+                        touch-target-display:block,
+                        small-touch-target-display: block,
+                        extended-label-text-size: 0.875rem,
+                        extended-label-text-tracking: normal,
+                        extended-label-text-weight: 500));
+
+        @include mat.snack-bar-overrides((container-shape: 4px,
+                        supporting-text-line-height: 1.5rem,
+                        supporting-text-size: 0.875rem,
+                        supporting-text-weight: 400));
+
+        @include mat.table-overrides((row-item-outline-width: 1px,
+                        header-container-height: 56px,
+                        footer-container-height: 52px,
+                        row-item-container-height: 52px,
+                        header-headline-line-height: 1.25rem,
+                        header-headline-size: 0.875rem,
+                        header-headline-weight: 600,
+                        header-headline-tracking: normal,
+                        row-item-label-text-line-height: 1.5rem,
+                        row-item-label-text-size: 0.875rem,
+                        row-item-label-text-weight: 400,
+                        row-item-label-text-tracking: normal,
+                        footer-supporting-text-line-height: 1.5rem,
+                        footer-supporting-text-size: 0.875rem,
+                        footer-supporting-text-weight: 400,
+                        footer-supporting-text-tracking: normal));
+
+        @include mat.progress-spinner-overrides((active-indicator-width:4px,
+                        size:48px));
+
+        @include mat.badge-overrides((container-shape: 50%,
+                        container-size: unset,
+                        small-size-container-size: unset,
+                        large-size-container-size: unset,
+                        legacy-container-size: 22px,
+                        legacy-small-size-container-size: 16px,
+                        legacy-large-size-container-size: 28px,
+                        container-offset: -11px 0,
+                        small-size-container-offset: -8px 0,
+                        large-size-container-offset: -14px 0,
+                        container-overlap-offset: -11px,
+                        small-size-container-overlap-offset: -8px,
+                        large-size-container-overlap-offset: -14px,
+                        container-padding: 0,
+                        small-size-container-padding: 0,
+                        large-size-container-padding: 0,
+                        line-height: 22px,
+                        text-size: 12px,
+                        text-weight: 600,
+                        small-size-text-size: 9px,
+                        small-size-line-height: 16px,
+                        large-size-text-size: 24px,
+                        large-size-line-height: 28px));
+
+        @include mat.bottom-sheet-overrides((container-shape: 4px,
+                        container-text-line-height: 1.5rem,
+                        container-text-size: 0.875rem,
+                        container-text-tracking: normal,
+                        container-text-weight: 400));
+
+        @include mat.button-toggle-overrides((legacy-shape: 2px,
+                        legacy-height: 36px,
+                        legacy-focus-state-layer-opacity: 1,
+                        shape:4px,
+                        hover-state-layer-opacity:0.04,
+                        focus-state-layer-opacity: 0.12,
+                        height: 48px,
+                        legacy-label-text-line-height:1.5rem,
+                        legacy-label-text-size: 0.875rem,
+                        legacy-label-text-tracking: normal,
+                        legacy-label-text-weight: 400,
+                        label-text-line-height:1.5rem,
+                        label-text-size: 0.875rem,
+                        label-text-tracking: normal,
+                        label-text-weight: 400));
+
+        @include mat.datepicker-overrides((calendar-container-shape: 4px,
+                        calendar-container-touch-shape: 4px,
+                        calendar-container-elevation-shadow: var(--mat-app-elevation-shadow-level-4),
+                        calendar-container-touch-elevation-shadow: var(--mat-app-elevation-shadow-level-24),
+                        calendar-text-size: 13px,
+                        calendar-body-label-text-size: 0.875rem,
+                        calendar-body-label-text-weight: 500,
+                        calendar-period-button-text-size: 0.875rem,
+                        calendar-period-button-text-weight: 500,
+                        calendar-header-text-size: 11px,
+                        calendar-header-text-weight: 400));
+
+        @include mat.divider-overrides((width: 1px));
+
+        @include mat.expansion-overrides((container-shape: 4px,
+                        legacy-header-indicator-display: inline-block,
+                        header-indicator-display: none,
+                        header-collapsed-state-height: 48px,
+                        header-expanded-state-height: 64px,
+                        header-text-size: 0.875rem,
+                        header-text-weight: 600,
+                        header-text-line-height: inherit,
+                        header-text-tracking: inherit,
+                        container-text-line-height: 1.5rem,
+                        container-text-size: 0.875rem,
+                        container-text-tracking: normal,
+                        container-text-weight: 400));
+
+        @include mat.grid-list-overrides((tile-header-primary-text-size: 0.875rem,
+                        tile-header-secondary-text-size: 0.75rem,
+                        tile-footer-primary-text-size: 0.875re,
+                        tile-footer-secondary-text-size: 0.75rem));
+
+        @include mat.sidenav-overrides((container-shape: 0,
+                        container-elevation-shadow: var(--mat-app-elevation-shadow-level-16),
+                        container-width: auto));
+
+        @include mat.stepper-overrides((header-height: 72px,
+                        header-label-text-size: 0.875rem,
+                        header-label-text-weight: 400,
+                        header-error-state-label-text-size: 0.875rem,
+                        header-selected-state-label-text-size: 0.875rem,
+                        header-selected-state-label-text-weight: 400));
+
+        @include mat.toolbar-overrides((standard-height: 64px,
+                        mobile-height: 56px,
+                        title-text-line-height: 1.5rem,
+                        title-text-size: 0.875rem,
+                        title-text-tracking: normal,
+                        title-text-weight: 400));
+
+        @include mat.tree-overrides((node-min-height: 48px,
+                        node-text-size: 0.875rem,
+                        node-text-weight: 400));
+
+        @include mat.timepicker-overrides((container-shape: 4px,
+                        container-elevation-shadow: var(--mat-app-elevation-shadow-level-8)));
+
+        @include mat.progress-bar-overrides((active-indicator-height:4px,
+                        track-height:4px,
+                        track-shape: 0));
+
+        @include mat.tooltip-overrides((container-shape: 4px,
+                        supporting-text-line-height: 16px,
+                        supporting-text-size: 0.75rem,
+                        supporting-text-weight: 400,
+                        supporting-text-tracking: normal));
 }
+
+/* Loop through user themes and generate Angular Material themes */
+@each $name,
+$theme in userThemes.$user-themes {
+        $light-theme: (primary: map.get(map.get($theme, primary), DEFAULT),
+                        on-primary:map.get(map.get(map.get($theme, primary), contrast), DEFAULT),
+                        inverse-primary: map.get(map.get($theme, primary), 300),
+                        secondary: #64748B,
+                        inverse-secondary: map.get(map.get($theme, accent), 300),
+                        on-secondary: map.get(map.get(map.get($theme, accent), contrast), DEFAULT),
+                        surface: #FFFFFF,
+                        error: map.get(map.get($theme, warn), DEFAULT),
+                        on-error: map.get(map.get(map.get($theme, warn), contrast), DEFAULT),
+                        inverse-error: map.get(map.get($theme, warn), 300),
+                        background: #F1F5F9,
+                        on-surface: #1E293B,
+                        shadow: black,
+                        inverse-surface: #1E293B,
+                        inverse-on-surface: #FFFFFF,
+                        outline:#E2E8F0,
+                        outline-variant: #CBD5E1,
+                        surface-variant: #F1F5F9,
+                        surface-container: #FFFFFF,
+                        secondary-container: rgba(148, 163, 184, 0.12),
+                        neutral: #94A3B8,
+                        neutral-variant: #E2E8F0,
+                        tertiary: map.get(map.get($theme, accent), DEFAULT),
+                        corner-large:0,
+                        hover-state-layer-opacity:0.04,
+                        focus-state-layer-opacity:0.12,
+                        pressed-state-layer-opacity:0.12);
+
+        $dark-theme: (primary: map.get(map.get($theme, primary), DEFAULT),
+                        on-primary: map.get(map.get(map.get($theme, primary), contrast), DEFAULT),
+                        inverse-primary: map.get(map.get($theme, primary), 600),
+                        secondary: #94A3B8,
+                        inverse-secondary: map.get(map.get($theme, accent), 600),
+                        on-secondary: map.get(map.get(map.get($theme, accent), contrast), DEFAULT),
+                        surface: #1E293B,
+                        error: map.get(map.get($theme, warn), DEFAULT),
+                        on-error: map.get(map.get(map.get($theme, warn), contrast), DEFAULT),
+                        inverse-error: map.get(map.get($theme, accent), 600),
+                        background: #0F172A,
+                        on-surface: #FFFFFF,
+                        shadow: black,
+                        inverse-surface: #FFFFFF,
+                        inverse-on-surface: #1E293B,
+                        outline: rgba(241, 245, 249, 0.12),
+                        outline-variant: rgba(241, 245, 249, 0.08),
+                        surface-variant: #334155,
+                        surface-container: #1E293B,
+                        secondary-container: rgba(255, 255, 255, 0.05),
+                        neutral: #475569,
+                        neutral-variant: #334155,
+                        tertiary: map.get(map.get($theme, accent), DEFAULT),
+                        corner-large:0,
+                        hover-state-layer-opacity:0.04,
+                        focus-state-layer-opacity:0.12,
+                        pressed-state-layer-opacity:0.12);
+
+
+        /* Generate and encapsulate Angular Material themes */
+        #{map.get($theme, selector)} .light,
+        #{map.get($theme, selector)}.light {
+                @include mat.theme-overrides($light-theme);
+
+                @include mat.slider-overrides((disabled-active-track-color: #000,
+                                disabled-handle-color: #000,
+                                disabled-inactive-track-color: #000,
+                                label-container-color: #000,
+                                label-label-text-color: #fff,
+                                with-overlap-handle-outline-color: #fff,
+                                with-tick-marks-disabled-container-color: #000,
+                                value-indicator-opacity: 0.6));
+
+                @include mat.tooltip-overrides((container-color:#1E293B,
+                                supporting-text-color:#FFFFFF));
+
+                @include mat.select-overrides((panel-background-color: #FFFFFF,
+                                enabled-trigger-text-color: #1e293bde,
+                                disabled-trigger-text-color: #94a3b861,
+                                placeholder-text-color: #1e293b99,
+                                enabled-arrow-color: #e2e8f08a,
+                                disabled-arrow-color: #1e293b61));
+
+                @include mat.menu-overrides((divider-color: #e2e8f0,
+                                item-label-text-color: #1e293b,
+                                item-icon-color: #1e293b,
+                                item-hover-state-layer-color: #0000000a,
+                                item-focus-state-layer-color: #0000000a,
+                                container-color: #fff));
+
+
+                @include mat.button-overrides((text-label-text-color:#1e293b,
+                                text-disabled-label-text-color: #94a3b861,
+                                text-state-layer-color: #000,
+                                text-disabled-state-layer-color: #000,
+                                text-ripple-color: #0000001a,
+                                filled-container-color: #fff,
+                                filled-label-text-color: #1e293b,
+                                filled-disabled-container-color: #94a3b81f,
+                                filled-disabled-label-text-color: #94a3b861,
+                                filled-state-layer-color: #000,
+                                filled-disabled-state-layer-color: #000,
+                                filled-ripple-color: #0000001a,
+                                protected-container-color: #fff,
+                                protected-label-text-color: #1e293b,
+                                protected-disabled-container-color: #94a3b81f,
+                                protected-disabled-label-text-color: #94a3b861,
+                                protected-state-layer-color: #000,
+                                protected-disabled-state-layer-color: #000,
+                                protected-ripple-color: #0000001a,
+                                outlined-disabled-outline-color: #e2e8f0,
+                                outlined-disabled-label-text-color: #94a3b861,
+                                outlined-label-text-color: #1e293b,
+                                outlined-outline-color: #e2e8f0,
+                                outlined-state-layer-color: #000,
+                                outlined-disabled-state-layer-color: #000,
+                                outlined-ripple-color: #0000001a));
+
+                @include mat.button-toggle-overrides((divider-color: #e2e8f0,
+                                selected-state-text-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+
+                @include mat.datepicker-overrides((toggle-icon-color: #64748b,
+                                calendar-body-label-text-color: #64748b,
+                                calendar-period-button-text-color: #1e293b,
+                                calendar-period-button-icon-color: #64748b,
+                                calendar-navigation-button-icon-color: #64748b,
+                                calendar-header-divider-color:#e2e8f0,
+                                calendar-header-text-color: #64748b,
+                                calendar-date-today-outline-color: #94a3b8,
+                                calendar-date-today-disabled-state-outline-color: #94a3b8cc,
+                                calendar-date-text-color: #1e293b,
+                                calendar-date-outline-color: #0000,
+                                calendar-date-disabled-state-text-color: #94a3b8,
+                                calendar-date-preview-state-outline-color: #e2e8f0,
+                                range-input-separator-color: #1e293b,
+                                range-input-disabled-state-separator-color: #94a3b8,
+                                range-input-disabled-state-text-color: #94a3b8,
+                                calendar-container-background-color: #fff,
+                                calendar-container-text-color: #1e293b));
+
+                @include mat.expansion-overrides((container-background-color: #fff,
+                                container-text-color: #1e293b,
+                                actions-divider-color:#e2e8f0,
+                                header-hover-state-layer-color: #94a3b81f,
+                                header-focus-state-layer-color: #94a3b81f,
+                                header-disabled-state-text-color: #94a3b8,
+                                header-text-color: #1e293b,
+                                header-description-color: #64748b,
+                                header-indicator-color: #64748b));
+
+                @include mat.sidenav-overrides((container-divider-color: #e2e8f0,
+                                container-background-color: #fff,
+                                container-text-color: #1e293b,
+                                content-background-color: #f1f5f9,
+                                content-text-color: #1e293b,
+                                scrim-color: #0009));
+
+                @include mat.card-overrides((elevated-container-color: #FFFFFF,
+                                filled-container-color: #FFFFFF,
+                                outlined-container-color: #FFFFFF,
+                                outlined-outline-color:#0000001f,
+                                subtitle-text-color:#64748b));
+
+                @include mat.form-field-overrides((filled-container-color: #f5f5f5,
+                                filled-disabled-container-color: #fafafa,
+                                filled-label-text-color: #1e293b99,
+                                filled-hover-label-text-color: #1e293b99,
+                                filled-disabled-label-text-color: #94a3b861,
+                                filled-input-text-color: #1e293bde,
+                                filled-disabled-input-text-color: #94a3b861,
+                                filled-input-text-placeholder-color: #1e293b99,
+                                filled-active-indicator-color: #e2e8f06b,
+                                filled-disabled-active-indicator-color: #e2e8f00f,
+                                filled-hover-active-indicator-color: #e2e8f0de,
+                                outlined-label-text-color: #1e293b99,
+                                outlined-hover-label-text-color: #1e293b99,
+                                outlined-disabled-label-text-color: #94a3b861,
+                                outlined-input-text-color: #1e293bde,
+                                outlined-disabled-input-text-color: #94a3b861,
+                                outlined-input-text-placeholder-color: #1e293b99,
+                                outlined-outline-color: #e2e8f061,
+                                outlined-disabled-outline-color: #e2e8f00f,
+                                outlined-hover-outline-color: #e2e8f0de,
+                                disabled-input-text-placeholder-color: #64748b61,
+                                state-layer-color: #000000de,
+                                select-option-text-color: inherit,
+                                select-disabled-option-text-color: GrayText,
+                                enabled-select-arrow-color: #64748b8a,
+                                disabled-select-arrow-color: #64748b61,
+                                hover-state-layer-opacity: 0.04,
+                                focus-state-layer-opacity: 0.08));
+
+                @include mat.autocomplete-overrides((background-color: #fff));
+
+                @include mat.dialog-overrides((container-color: #fff,
+                                subhead-color: #1e293bde,
+                                supporting-text-color: #1e293b99));
+
+                @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, primary), 600)},
+                                selected-handle-color:#{ map.get(map.get($theme, primary), 600)},
+                                selected-hover-state-layer-color:#{ map.get(map.get($theme, primary), 600)},
+                                selected-pressed-state-layer-color:#{ map.get(map.get($theme, primary), 600)},
+                                selected-focus-handle-color: #{ map.get(map.get($theme, primary), 900)},
+                                selected-hover-handle-color: #{ map.get(map.get($theme, primary), 900)},
+                                selected-pressed-handle-color: #{ map.get(map.get($theme, primary), 900)},
+                                selected-focus-track-color:#{ map.get(map.get($theme, primary), 300)},
+                                selected-hover-track-color: #{ map.get(map.get($theme, primary), 300)},
+                                selected-pressed-track-color: #{ map.get(map.get($theme, primary), 300)},
+                                selected-track-color: #{ map.get(map.get($theme, primary), 300)},
+
+                                disabled-selected-handle-color: #424242,
+                                disabled-selected-icon-color: #fff,
+                                disabled-selected-track-color: #424242,
+                                disabled-unselected-handle-color: #424242,
+                                disabled-unselected-icon-color: #fff,
+                                disabled-unselected-track-color: #424242,
+                                handle-surface-color: #fff,
+                                selected-icon-color: #fff,
+                                unselected-focus-handle-color: #212121,
+                                unselected-focus-state-layer-color: #424242,
+                                unselected-focus-track-color: #e0e0e0,
+                                unselected-handle-color: #616161,
+                                unselected-hover-handle-color: #212121,
+                                unselected-hover-state-layer-color: #424242,
+                                unselected-hover-track-color: #e0e0e0,
+                                unselected-icon-color: #fff,
+                                unselected-pressed-handle-color: #212121,
+                                unselected-pressed-state-layer-color: #424242,
+                                unselected-pressed-track-color: #e0e0e0,
+                                unselected-track-color: #e0e0e0,
+                                disabled-label-text-color: #94a3b8,
+                                label-text-color: #1e293b));
+
+                @include mat.radio-overrides((disabled-selected-icon-color: #64748b,
+                                disabled-unselected-icon-color: #64748b,
+                                unselected-hover-icon-color: #212121,
+                                unselected-focus-icon-color: #212121,
+                                unselected-icon-color: #64748b8a,
+                                unselected-pressed-icon-color: #64748b8a,
+                                ripple-color: #000,
+                                disabled-label-color: #94a3b8,
+                                label-text-color: #1e293b));
+
+
+                @include mat.icon-button-overrides((disabled-icon-color: #00000061,
+                                icon-color:inherit,
+                                state-layer-color:#000,
+                                disabled-state-layer-color: #000,
+                                ripple-color: #0000001a));
+
+                @include mat.checkbox-overrides((disabled-selected-icon-color: #00000061,
+                                disabled-unselected-icon-color: #00000061,
+                                unselected-focus-icon-color: #212121,
+                                unselected-hover-icon-color: #212121,
+                                unselected-icon-color: #0000008a,
+                                unselected-focus-state-layer-color: #000,
+                                unselected-hover-state-layer-color: #000,
+                                unselected-pressed-state-layer-color: #000,
+                                disabled-label-color: #94a3b8,
+                                label-text-color: #1e293b));
+
+                @include mat.paginator-overrides((container-text-color: #000000de,
+                                container-background-color: #fff,
+                                enabled-icon-color: #0000008a,
+                                disabled-icon-color: #0000001f));
+
+                @include mat.tabs-overrides((disabled-ripple-color: #94a3b8,
+                                pagination-icon-color: #64748b,
+                                inactive-label-text-color: #1e293b99,
+                                inactive-focus-label-text-color: #1e293b99,
+                                inactive-hover-label-text-color: #1e293b99));
+
+                @include mat.list-overrides((list-item-label-text-color: #1e293b,
+                                list-item-supporting-text-color: #64748b,
+                                list-item-leading-icon-color: #00000061,
+                                list-item-trailing-supporting-text-color: #94a3b8,
+                                list-item-trailing-icon-color: #00000061,
+                                list-item-selected-trailing-icon-color: #00000061,
+                                list-item-disabled-label-text-color: #000,
+                                list-item-disabled-leading-icon-color: #000,
+                                list-item-disabled-trailing-icon-color: #000,
+                                list-item-hover-label-text-color: #1e293b,
+                                list-item-hover-leading-icon-color: #00000061,
+                                list-item-hover-trailing-icon-color: #00000061,
+                                list-item-focus-label-text-color: #1e293b,
+                                list-item-hover-state-layer-color: #000,
+                                list-item-focus-state-layer-color: #000));
+
+                @include mat.fab-overrides((container-color: #fff,
+                                foreground-color: #000,
+                                state-layer-color: #000,
+                                disabled-state-layer-color: #000,
+                                ripple-color: #0000001a,
+                                hover-state-layer-opacity: 0.04,
+                                focus-state-layer-opacity: 0.12,
+                                pressed-state-layer-opacity: 0.12,
+                                disabled-state-container-color: #94a3b81f,
+                                disabled-state-foreground-color: #94a3b861,
+                                small-container-color: #fff,
+                                small-foreground-color: #000,
+                                small-state-layer-color: #000,
+                                small-disabled-state-layer-color: #000,
+                                small-ripple-color: #0000001a,
+                                small-hover-state-layer-opacity: 0.04,
+                                small-focus-state-layer-opacity: 0.12,
+                                small-pressed-state-layer-opacity: 0.12,
+                                small-disabled-state-container-color: #94a3b81f,
+                                small-disabled-state-foreground-color: #94a3b861));
+
+                @include mat.snack-bar-overrides((container-color: #333,
+                                supporting-text-color: #ffffffde,
+                                button-color: #{ map.get(map.get($theme, primary), 100)}));
+
+                @include mat.table-overrides((background-color: #fff,
+                                header-headline-color: #1e293b,
+                                row-item-label-text-color: #1e293b,
+                                row-item-outline-color: #e2e8f0));
+
+                @include mat.badge-overrides((disabled-state-background-color: #94a3b8,
+                                disabled-state-text-color: #94a3b8));
+
+                @include mat.bottom-sheet-overrides((container-text-color: #1e293b,
+                                container-background-color: #fff));
+
+                @include mat.button-toggle-overrides((legacy-text-color: #94a3b8,
+                                legacy-state-layer-color: #64748b,
+                                legacy-selected-state-text-color: #64748b,
+                                legacy-selected-state-background-color: #e2e8f0,
+                                legacy-disabled-state-text-color: #94a3b8,
+                                legacy-disabled-state-background-color: #cbd5e1,
+                                legacy-disabled-selected-state-background-color: #e2e8f0,
+                                text-color: #1e293b,
+                                background-color: #fff,
+                                state-layer-color: #64748b,
+                                selected-state-background-color: #e2e8f0,
+                                selected-state-text-color: #1e293b,
+                                disabled-state-text-color: #94a3b8,
+                                disabled-state-background-color: #fff,
+                                disabled-selected-state-text-color: #1e293b,
+                                disabled-selected-state-background-color: #e2e8f0,
+                                divider-color: #e2e8f0));
+
+                @include mat.stepper-overrides((container-color: #fff,
+                                line-color: #e2e8f0,
+                                header-hover-state-layer-color: #94a3b81f,
+                                header-focus-state-layer-color: #94a3b81f,
+                                header-label-text-color: #64748b,
+                                header-optional-label-text-color: #64748b,
+                                header-selected-state-label-text-color: #1e293b,
+                                header-icon-background-color: #64748b,
+                                header-error-state-icon-background-color: #0000));
+
+                @include mat.toolbar-overrides((container-background-color: #fff,
+                                container-text-color: #1e293b));
+
+                @include mat.tree-overrides((container-background-color: #fff,
+                                node-text-color: #1e293b));
+
+                @include mat.timepicker-overrides((container-background-color: #fff));
+
+                --mat-ripple-color: #0000001a;
+                --mat-option-label-text-color: #1e293b;
+                --mat-option-hover-state-layer-color: #0000000a;
+                --mat-option-focus-state-layer-color: #0000000a;
+                --mat-option-selected-state-layer-color: #0000000a;
+                --mat-optgroup-label-text-color: #1e293b;
+                --mat-pseudo-checkbox-full-selected-checkmark-color: #f1f5f9;
+                --mat-pseudo-checkbox-full-unselected-icon-color: #64748b;
+                --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #f1f5f9;
+                --mat-pseudo-checkbox-full-disabled-unselected-icon-color: #b0b0b0;
+                --mat-pseudo-checkbox-full-disabled-selected-icon-color: #b0b0b0;
+                --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #b0b0b0;
+                --mat-app-background-color: #f1f5f9;
+                --mat-app-text-color: #1e293b;
+                --mat-sort-arrow-color: #64748b;
+
+                & .mat-mdc-slide-toggle.mat-accent {
+                        @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, accent), 600)},
+                                        selected-handle-color:#{ map.get(map.get($theme, accent), 600)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, accent), 600)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, accent), 600)},
+                                        selected-focus-handle-color: #{ map.get(map.get($theme, accent), 900)},
+                                        selected-hover-handle-color: #{ map.get(map.get($theme, accent), 900)},
+                                        selected-pressed-handle-color: #{ map.get(map.get($theme, accent), 900)},
+                                        selected-focus-track-color:#{ map.get(map.get($theme, accent), 300)},
+                                        selected-hover-track-color: #{ map.get(map.get($theme, accent), 300)},
+                                        selected-pressed-track-color: #{ map.get(map.get($theme, accent), 300)},
+                                        selected-track-color: #{ map.get(map.get($theme, accent), 300)}));
+                }
+
+                & .mat-mdc-slide-toggle.mat-warn {
+                        @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, warn), 600)},
+                                        selected-handle-color:#{ map.get(map.get($theme, warn), 600)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, warn), 600)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, warn), 600)},
+                                        selected-focus-handle-color: #{ map.get(map.get($theme, warn), 900)},
+                                        selected-hover-handle-color: #{ map.get(map.get($theme, warn), 900)},
+                                        selected-pressed-handle-color: #{ map.get(map.get($theme, warn), 900)},
+                                        selected-focus-track-color:#{ map.get(map.get($theme, warn), 300)},
+                                        selected-hover-track-color: #{ map.get(map.get($theme, warn), 300)},
+                                        selected-pressed-track-color: #{ map.get(map.get($theme, warn), 300)},
+                                        selected-track-color: #{ map.get(map.get($theme, warn), 300)}));
+                }
+
+                & .mat-mdc-standard-chip {
+                        @include mat.chips-overrides((elevated-container-color:#E0E0E0,
+                                        elevated-selected-container-color: #e0e0e0,
+                                        elevated-disabled-container-color: #e0e0e0,
+                                        flat-disabled-selected-container-color: #e0e0e0,
+                                        focus-state-layer-color: #000,
+                                        hover-state-layer-color: #000,
+                                        selected-hover-state-layer-color: #000,
+                                        selected-focus-state-layer-color: #000,
+                                        label-text-color:#212121,
+                                        disabled-label-text-color: #212121,
+                                        selected-label-text-color: #212121,
+                                        with-icon-icon-color: #212121,
+                                        with-icon-disabled-icon-color: #212121,
+                                        with-icon-selected-icon-color: #212121,
+                                        with-trailing-icon-disabled-trailing-icon-color: #212121,
+                                        with-trailing-icon-trailing-icon-color: #212121,
+                                        selected-disabled-trailing-icon-color: #212121,
+                                        selected-trailing-icon-color: #212121));
+                }
+        }
+
+        #{map.get($theme, selector)} .dark,
+        #{map.get($theme, selector)}.dark {
+                @include mat.theme-overrides($dark-theme);
+
+                @include mat.slider-overrides((disabled-active-track-color: #fff,
+                                disabled-handle-color: #fff,
+                                disabled-inactive-track-color: #fff,
+                                label-container-color: #fff,
+                                label-label-text-color: #000,
+                                with-overlap-handle-outline-color: #fff,
+                                with-tick-marks-disabled-container-color: #fff,
+                                value-indicator-opacity: 0.9));
+
+                @include mat.tooltip-overrides((container-color:#64748b,
+                                supporting-text-color:#FFFFFF));
+
+                @include mat.select-overrides((panel-background-color: #1E293B,
+                                enabled-trigger-text-color: #ffffffde,
+                                disabled-trigger-text-color: #e2e8f061,
+                                placeholder-text-color: #fff9,
+                                enabled-arrow-color: #f1f5f98a,
+                                disabled-arrow-color: #ffffff61));
+
+                @include mat.menu-overrides((divider-color: #f1f5f91f,
+                                item-label-text-color: #fff,
+                                item-icon-color: #fff,
+                                item-hover-state-layer-color: #ffffff14,
+                                item-focus-state-layer-color: #ffffff14,
+                                container-color: #1e293b));
+
+                @include mat.button-overrides((text-label-text-color:#fff,
+                                text-disabled-label-text-color: #cbd5e180,
+                                text-state-layer-color: #fff,
+                                text-disabled-state-layer-color: #fff,
+                                text-ripple-color: #ffffff1a,
+                                filled-container-color: #1e293b,
+                                filled-label-text-color: #fff,
+                                filled-disabled-container-color: #cbd5e11f,
+                                filled-disabled-label-text-color: #cbd5e180,
+                                filled-state-layer-color: #fff,
+                                filled-disabled-state-layer-color: #fff,
+                                filled-ripple-color: #ffffff1a,
+                                protected-container-color: #1e293b,
+                                protected-label-text-color: #fff,
+                                protected-disabled-container-color: #cbd5e11f,
+                                protected-disabled-label-text-color: #cbd5e180,
+                                protected-state-layer-color: #fff,
+                                protected-disabled-state-layer-color: #fff,
+                                protected-ripple-color: #ffffff1a,
+                                outlined-disabled-outline-color: #f1f5f91f,
+                                outlined-disabled-label-text-color: #cbd5e180,
+                                outlined-label-text-color: #fff,
+                                outlined-outline-color: #f1f5f91f,
+                                outlined-state-layer-color: #fff,
+                                outlined-disabled-state-layer-color: #fff,
+                                outlined-ripple-color: #ffffff1a));
+
+                @include mat.button-toggle-overrides((divider-color: #374152,
+                                selected-state-text-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+
+                @include mat.datepicker-overrides((toggle-icon-color: #f1f5f9,
+                                calendar-body-label-text-color: #94a3b8,
+                                calendar-period-button-text-color: #fff,
+                                calendar-period-button-icon-color: #f1f5f9,
+                                calendar-navigation-button-icon-color: #f1f5f9,
+                                calendar-header-divider-color:#f1f5f91f,
+                                calendar-header-text-color: #94a3b8,
+                                calendar-date-today-outline-color: #64748b,
+                                calendar-date-today-disabled-state-outline-color: #64748bcc,
+                                calendar-date-text-color: #fff,
+                                calendar-date-outline-color: #0000,
+                                calendar-date-disabled-state-text-color: #e2e8f0,
+                                calendar-date-preview-state-outline-color: #f1f5f93d,
+                                range-input-separator-color: #fff,
+                                range-input-disabled-state-separator-color: #e2e8f0,
+                                range-input-disabled-state-text-color: #e2e8f0,
+                                calendar-container-background-color: #1e293b,
+                                calendar-container-text-color: #fff));
+
+                @include mat.expansion-overrides((container-background-color: #1e293b,
+                                container-text-color: #fff,
+                                actions-divider-color:#f1f5f91f,
+                                header-hover-state-layer-color: #ffffff0d,
+                                header-focus-state-layer-color: #ffffff0d,
+                                header-disabled-state-text-color: #cbd5e1,
+                                header-text-color: #fff,
+                                header-description-color: #94a3b8,
+                                header-indicator-color: #94a3b8));
+
+                @include mat.sidenav-overrides((container-divider-color: #f1f5f91f,
+                                container-background-color: #1e293b,
+                                container-text-color: #fff,
+                                content-background-color: #0f172a,
+                                content-text-color: #fff,
+                                scrim-color: #e1d6c499));
+
+                @include mat.card-overrides((elevated-container-color: #1e293b,
+                                filled-container-color: #1e293b,
+                                outlined-container-color: #1e293b,
+                                outlined-outline-color:#ffffff1f,
+                                subtitle-text-color:#94a3b8));
+
+                @include mat.form-field-overrides((filled-container-color: #273243,
+                                filled-disabled-container-color: #232d3f,
+                                filled-label-text-color: #fff9,
+                                filled-hover-label-text-color: #fff9,
+                                filled-disabled-label-text-color: #e2e8f061,
+                                filled-input-text-color: #ffffffde,
+                                filled-disabled-input-text-color: #e2e8f061,
+                                filled-input-text-placeholder-color: #fff9,
+                                filled-active-indicator-color: #e2e8f06b,
+                                filled-disabled-active-indicator-color: #f1f5f96b,
+                                filled-hover-active-indicator-color: #f1f5f9de,
+                                outlined-label-text-color: #fff9,
+                                outlined-hover-label-text-color: #fff9,
+                                outlined-disabled-label-text-color: #e2e8f061,
+                                outlined-input-text-color: #ffffffde,
+                                outlined-disabled-input-text-color: #e2e8f061,
+                                outlined-input-text-placeholder-color: #fff9,
+                                outlined-outline-color: #e2e8f061,
+                                outlined-disabled-outline-color: #f1f5f96b,
+                                outlined-hover-outline-color: #f1f5f9de,
+                                disabled-input-text-placeholder-color: #f1f5f961,
+                                state-layer-color: #ffffffde,
+                                select-option-text-color: #000000de,
+                                select-disabled-option-text-color: #00000061,
+                                enabled-select-arrow-color: #f1f5f98a,
+                                disabled-select-arrow-color: #f1f5f961,
+                                hover-state-layer-opacity: 0.08,
+                                focus-state-layer-opacity: 0.24));
+
+                @include mat.autocomplete-overrides((background-color: #1e293b));
+
+                @include mat.dialog-overrides((container-color: #1e293b,
+                                subhead-color: #ffffffde,
+                                supporting-text-color: #fff9));
+
+                @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, primary), 300)},
+                                selected-handle-color:#{ map.get(map.get($theme, primary), 300)},
+                                selected-hover-state-layer-color:#{ map.get(map.get($theme, primary), 300)},
+                                selected-pressed-state-layer-color:#{ map.get(map.get($theme, primary), 300)},
+                                selected-focus-handle-color: #{ map.get(map.get($theme, primary), 200)},
+                                selected-hover-handle-color: #{ map.get(map.get($theme, primary), 200)},
+                                selected-pressed-handle-color: #{ map.get(map.get($theme, primary), 200)},
+                                selected-focus-track-color:#{ map.get(map.get($theme, primary), 600)},
+                                selected-hover-track-color: #{ map.get(map.get($theme, primary), 600)},
+                                selected-pressed-track-color: #{ map.get(map.get($theme, primary), 600)},
+                                selected-track-color: #{ map.get(map.get($theme, primary), 600)},
+
+                                disabled-selected-handle-color: #000,
+                                disabled-selected-icon-color: #212121,
+                                disabled-selected-track-color: #f5f5f5,
+                                disabled-unselected-handle-color: #000,
+                                disabled-unselected-icon-color: #212121,
+                                disabled-unselected-track-color: #f5f5f5,
+                                handle-surface-color: #fff,
+                                selected-icon-color: #212121,
+                                unselected-focus-handle-color: #fafafa,
+                                unselected-focus-state-layer-color: #f5f5f5,
+                                unselected-focus-track-color: #616161,
+                                unselected-handle-color: #9e9e9e,
+                                unselected-hover-handle-color: #fafafa,
+                                unselected-hover-state-layer-color: #f5f5f5,
+                                unselected-hover-track-color: #616161,
+                                unselected-icon-color: #212121,
+                                unselected-pressed-handle-color: #fafafa,
+                                unselected-pressed-state-layer-color: #f5f5f5,
+                                unselected-pressed-track-color: #616161,
+                                unselected-track-color: #616161,
+                                disabled-label-text-color: #e2e8f0,
+                                label-text-color: #fff));
+
+                @include mat.radio-overrides((disabled-selected-icon-color: #f1f5f9,
+                                disabled-unselected-icon-color: #f1f5f9,
+                                unselected-hover-icon-color: #eee,
+                                unselected-focus-icon-color: #eee,
+                                unselected-icon-color: #f1f5f98a,
+                                unselected-pressed-icon-color: #f1f5f98a,
+                                ripple-color: #fff,
+                                disabled-label-color: #e2e8f0,
+                                label-text-color: #fff));
+
+                @include mat.icon-button-overrides((disabled-icon-color: #ffffff80,
+                                icon-color:inherit,
+                                state-layer-color:#fff,
+                                disabled-state-layer-color: #fff,
+                                ripple-color: #ffffff1a));
+
+                @include mat.checkbox-overrides((disabled-selected-icon-color: #ffffff61,
+                                disabled-unselected-icon-color: #ffffff61,
+                                unselected-focus-icon-color: #eee,
+                                unselected-hover-icon-color: #eee,
+                                unselected-icon-color: #ffffff8a,
+                                unselected-focus-state-layer-color: #fff,
+                                unselected-hover-state-layer-color: #fff,
+                                unselected-pressed-state-layer-color: #fff,
+                                disabled-label-color: #e2e8f0,
+                                label-text-color: #fff));
+
+                @include mat.paginator-overrides((container-text-color: #ffffffde,
+                                container-background-color: #1e293b,
+                                enabled-icon-color: #ffffff8a,
+                                disabled-icon-color: #ffffff1f));
+
+                @include mat.tabs-overrides((disabled-ripple-color: #e2e8f0,
+                                pagination-icon-color: #f1f5f9,
+                                inactive-label-text-color: #fff9,
+                                inactive-focus-label-text-color: #fff9,
+                                inactive-hover-label-text-color: #fff9));
+
+                @include mat.list-overrides((list-item-label-text-color: #fff,
+                                list-item-supporting-text-color: #94a3b8,
+                                list-item-leading-icon-color: #ffffff80,
+                                list-item-trailing-supporting-text-color: #64748b,
+                                list-item-trailing-icon-color: #ffffff80,
+                                list-item-selected-trailing-icon-color: #ffffff80,
+                                list-item-disabled-label-text-color: #fff,
+                                list-item-disabled-leading-icon-color: #fff,
+                                list-item-disabled-trailing-icon-color: #fff,
+                                list-item-hover-label-text-color: #fff,
+                                list-item-hover-leading-icon-color: #ffffff80,
+                                list-item-hover-trailing-icon-color: #ffffff80,
+                                list-item-focus-label-text-color: #fff,
+                                list-item-hover-state-layer-color: #fff,
+                                list-item-focus-state-layer-color: #fff));
+
+                @include mat.fab-overrides((container-color: #1e293b,
+                                foreground-color: #fff,
+                                state-layer-color: #fff,
+                                disabled-state-layer-color: #fff,
+                                ripple-color: #ffffff1a,
+                                hover-state-layer-opacity: 0.08,
+                                focus-state-layer-opacity: 0.24,
+                                pressed-state-layer-opacity: 0.24,
+                                disabled-state-container-color: #4755691f,
+                                disabled-state-foreground-color: #cbd5e180,
+                                small-container-color: #1e293b,
+                                small-foreground-color: #fff,
+                                small-state-layer-color: #fff,
+                                small-disabled-state-layer-color: #fff,
+                                small-ripple-color: #ffffff1a,
+                                small-hover-state-layer-opacity: 0.08,
+                                small-focus-state-layer-opacity: 0.24,
+                                small-pressed-state-layer-opacity:0.24,
+                                small-disabled-state-container-color: #4755691f,
+                                small-disabled-state-foreground-color: #cbd5e180));
+
+                @include mat.snack-bar-overrides((container-color: #d2d4d8,
+                                supporting-text-color: #1e293bde,
+                                button-color: #{ map.get(map.get($theme, primary), DEFAULT)}));
+
+                @include mat.table-overrides((background-color: #1e293b,
+                                header-headline-color: #fff,
+                                row-item-label-text-color: #fff,
+                                row-item-outline-color: #f1f5f91f));
+
+                @include mat.badge-overrides((disabled-state-background-color: #cbd5e1,
+                                disabled-state-text-color: #e2e8f0));
+
+                @include mat.bottom-sheet-overrides((container-text-color: #fff,
+                                container-background-color: #1e293b));
+
+                @include mat.button-toggle-overrides((legacy-text-color: #64748b,
+                                legacy-state-layer-color: #e2e8f0,
+                                legacy-selected-state-text-color: #94a3b8,
+                                legacy-selected-state-background-color: #ffffff0d,
+                                legacy-disabled-state-text-color: #cbd5e1,
+                                legacy-disabled-state-background-color: #1e293b,
+                                legacy-disabled-selected-state-background-color: #64748b,
+                                text-color: #fff,
+                                background-color: #1e293b,
+                                state-layer-color: #e2e8f0,
+                                selected-state-background-color: #ffffff0d,
+                                selected-state-text-color: #fff,
+                                disabled-state-text-color: #cbd5e1,
+                                disabled-state-background-color: #1e293b,
+                                disabled-selected-state-text-color: #fff,
+                                disabled-selected-state-background-color: #64748b,
+                                divider-color: #374152));
+
+                @include mat.stepper-overrides((container-color: #1e293b,
+                                line-color: #f1f5f91f,
+                                header-hover-state-layer-color: #ffffff0d,
+                                header-focus-state-layer-color: #ffffff0d,
+                                header-label-text-color: #94a3b8,
+                                header-optional-label-text-color: #94a3b8,
+                                header-selected-state-label-text-color: #fff,
+                                header-icon-background-color: #94a3b8,
+                                header-error-state-icon-background-color: #0000));
+
+                @include mat.toolbar-overrides((container-background-color: #0f172a,
+                                container-text-color: #fff));
+
+                @include mat.tree-overrides((container-background-color: #1e293b,
+                                node-text-color: #fff));
+
+                @include mat.timepicker-overrides((container-background-color: #1e293b));
+
+                --mat-ripple-color: #ffffff1a;
+                --mat-option-label-text-color: #fff;
+                --mat-option-hover-state-layer-color: #ffffff14;
+                --mat-option-focus-state-layer-color: #ffffff14;
+                --mat-option-selected-state-layer-color: #ffffff14;
+                --mat-optgroup-label-text-color: #fff;
+                --mat-pseudo-checkbox-full-selected-checkmark-color: #0f172a;
+                --mat-pseudo-checkbox-full-unselected-icon-color: #94a3b8;
+                --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #0f172a;
+                --mat-pseudo-checkbox-full-disabled-unselected-icon-color: #686868;
+                --mat-pseudo-checkbox-full-disabled-selected-icon-color: #686868;
+                --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #686868;
+                --mat-app-background-color: #0f172a;
+                --mat-app-text-color: #fff;
+                --mat-sort-arrow-color: #94a3b8;
+
+                & .mat-mdc-slide-toggle.mat-accent {
+                        @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, accent), 300)},
+                                        selected-handle-color:#{ map.get(map.get($theme, accent), 300)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, accent), 300)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, accent), 300)},
+                                        selected-focus-handle-color: #{ map.get(map.get($theme, accent), 200)},
+                                        selected-hover-handle-color: #{ map.get(map.get($theme, accent), 200)},
+                                        selected-pressed-handle-color: #{ map.get(map.get($theme, accent), 200)},
+                                        selected-focus-track-color:#{ map.get(map.get($theme, accent), 600)},
+                                        selected-hover-track-color: #{ map.get(map.get($theme, accent), 600)},
+                                        selected-pressed-track-color: #{ map.get(map.get($theme, accent), 600)},
+                                        selected-track-color: #{ map.get(map.get($theme, accent), 600)}));
+                }
+
+                & .mat-mdc-slide-toggle.mat-warn {
+                        @include mat.slide-toggle-overrides((selected-focus-state-layer-color:#{ map.get(map.get($theme, warn), 300)},
+                                        selected-handle-color:#{ map.get(map.get($theme, warn), 300)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, warn), 300)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, warn), 300)},
+                                        selected-focus-handle-color: #{ map.get(map.get($theme, warn), 200)},
+                                        selected-hover-handle-color: #{ map.get(map.get($theme, warn), 200)},
+                                        selected-pressed-handle-color: #{ map.get(map.get($theme, warn), 200)},
+                                        selected-focus-track-color:#{ map.get(map.get($theme, warn), 600)},
+                                        selected-hover-track-color: #{ map.get(map.get($theme, warn), 600)},
+                                        selected-pressed-track-color: #{ map.get(map.get($theme, warn), 600)},
+                                        selected-track-color: #{ map.get(map.get($theme, warn), 600)}));
+                }
+
+                & .mat-mdc-standard-chip {
+                        @include mat.chips-overrides((elevated-container-color:#394353,
+                                        elevated-selected-container-color: #394353,
+                                        elevated-disabled-container-color: #394353,
+                                        flat-disabled-selected-container-color: #394353,
+                                        focus-state-layer-color: #fff,
+                                        hover-state-layer-color: #fff,
+                                        selected-hover-state-layer-color: #fff,
+                                        selected-focus-state-layer-color: #fff,
+                                        label-text-color:#fafafa,
+                                        disabled-label-text-color: #fafafa,
+                                        selected-label-text-color: #fafafa,
+                                        with-icon-icon-color: #fafafa,
+                                        with-icon-disabled-icon-color: #fafafa,
+                                        with-icon-selected-icon-color: #fafafa,
+                                        with-trailing-icon-disabled-trailing-icon-color: #fafafa,
+                                        with-trailing-icon-trailing-icon-color: #fafafa,
+                                        selected-disabled-trailing-icon-color: #fafafa,
+                                        selected-trailing-icon-color: #fafafa));
+                }
+        }
+
+        #{map.get($theme, selector)} {
+                @include mat.checkbox-overrides((selected-icon-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-checkmark-color: #fff,
+                                selected-focus-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-hover-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-pressed-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-focus-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-hover-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                selected-pressed-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+
+
+                @include mat.select-overrides((invalid-arrow-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                focused-arrow-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+
+                @include mat.form-field-overrides((filled-caret-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                filled-focus-active-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                filled-focus-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)}de,
+                                filled-error-hover-label-text-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-focus-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-caret-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-active-indicator-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-focus-active-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                filled-error-hover-active-indicator-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-caret-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                outlined-focus-outline-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                outlined-focus-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)}de,
+                                outlined-error-caret-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-focus-label-text-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-label-text-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-hover-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-focus-outline-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-hover-outline-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                outlined-error-outline-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                focus-select-arrow-color:#{ map.get(map.get($theme, primary), DEFAULT)}de,
+                                error-text-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+
+                @include mat.slider-overrides((handle-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                focus-handle-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                hover-handle-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                active-track-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                inactive-track-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                with-tick-marks-inactive-container-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                with-tick-marks-active-container-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                hover-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)}0d,
+                                focus-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)}33));
+
+                @include mat.progress-spinner-overrides((active-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+
+                @include mat.badge-overrides((background-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}));
+
+                @include mat.datepicker-overrides((calendar-date-selected-state-text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                calendar-date-selected-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                calendar-date-selected-disabled-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}66,
+                                calendar-date-today-selected-state-outline-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                calendar-date-focus-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}4d,
+                                calendar-date-hover-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}4d,
+                                toggle-active-state-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                calendar-date-in-range-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}33,
+                                calendar-date-in-comparison-range-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}33,
+                                calendar-date-in-overlap-range-state-background-color:#a8dab5,
+                                calendar-date-in-overlap-range-selected-state-background-color:#46a35e));
+
+                @include mat.stepper-overrides((header-icon-foreground-color:#{ map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                header-selected-state-icon-background-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                header-selected-state-icon-foreground-color:#{ map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                header-done-state-icon-background-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                header-done-state-icon-foreground-color:#{ map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                header-edit-state-icon-background-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                header-edit-state-icon-foreground-color:#{ map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                header-error-state-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                header-error-state-icon-foreground-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+
+                --mat-option-selected-state-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)};
+                --mat-pseudo-checkbox-full-selected-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)};
+                --mat-pseudo-checkbox-minimal-selected-checkmark-color:#{ map.get(map.get($theme, accent), DEFAULT)};
+                --mat-icon-color: inherit;
+
+                .mat-primary {
+                        --mat-pseudo-checkbox-full-selected-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)};
+                        --mat-pseudo-checkbox-minimal-selected-checkmark-color:#{ map.get(map.get($theme, primary), DEFAULT)};
+                }
+
+                .mat-accent {
+                        --mat-pseudo-checkbox-full-selected-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)};
+                        --mat-pseudo-checkbox-minimal-selected-checkmark-color:#{ map.get(map.get($theme, accent), DEFAULT)};
+                        --mat-option-selected-state-label-text-color: #{map.get(map.get($theme, accent), DEFAULT)};
+
+                        @include mat.slider-overrides((handle-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        focus-handle-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        hover-handle-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-track-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        inactive-track-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        with-tick-marks-inactive-container-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        with-tick-marks-active-container-color:#{map.get(map.get(map.get($theme, accent), contrast), DEFAULT)},
+                                        ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        hover-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)}0d,
+                                        focus-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)}33));
+
+                        @include mat.progress-spinner-overrides((active-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+                }
+
+                .mat-warn {
+                        --mat-pseudo-checkbox-full-selected-icon-color: #{map.get(map.get($theme, warn), DEFAULT)};
+                        --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{map.get(map.get($theme, warn), DEFAULT)};
+                        --mat-option-selected-state-label-text-color: #{map.get(map.get($theme, warn), DEFAULT)};
+
+                        @include mat.slider-overrides((handle-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        focus-handle-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        hover-handle-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-track-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        inactive-track-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        with-tick-marks-inactive-container-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        with-tick-marks-active-container-color:#{map.get(map.get(map.get($theme, warn), contrast), DEFAULT)},
+                                        ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        hover-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)}0d,
+                                        focus-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)}33));
+
+                        @include mat.progress-spinner-overrides((active-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+
+                .mat-icon.mat-primary {
+                        --mat-icon-color: #{ map.get(map.get($theme, primary), DEFAULT)};
+                }
+
+                .mat-icon.mat-accent {
+                        --mat-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)};
+                }
+
+                .mat-icon.mat-warn {
+                        --mat-icon-color: #{ map.get(map.get($theme, warn), DEFAULT)};
+                }
+
+                .mdc-button.mat-accent {
+                        background-color: #{map.get(map.get($theme, accent), DEFAULT)} !important;
+                }
+
+                .mdc-button.mat-warn {
+                        background-color: #{map.get(map.get($theme, warn), DEFAULT)} !important;
+                }
+
+                .mat-mdc-list-option {
+                        @include mat.checkbox-overrides((selected-checkmark-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        selected-focus-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-hover-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-focus-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+                }
+
+                .mat-mdc-list-option.mat-accent {
+                        @include mat.checkbox-overrides((selected-checkmark-color: #{map.get(map.get(map.get($theme, accent), contrast), DEFAULT)},
+                                        selected-focus-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-hover-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-focus-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                ));
+                }
+
+                .mat-mdc-list-option.mat-warn {
+                        @include mat.checkbox-overrides((selected-checkmark-color: #{map.get(map.get(map.get($theme, warn), contrast), DEFAULT)},
+                                        selected-focus-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-hover-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-focus-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                ));
+                }
+
+                .mat-mdc-tab-group,
+                .mat-mdc-tab-nav-bar,
+                .mat-mdc-tab-group,
+                .mat-mdc-tab-nav-bar {
+                        @include mat.tabs-overrides((active-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        inactive-ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-focus-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-hover-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-focus-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        active-hover-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+                }
+
+                .mat-mdc-tab-group.mat-accent,
+                .mat-mdc-tab-nav-bar.mat-accent,
+                .mat-mdc-tab-group.mat-accent,
+                .mat-mdc-tab-nav-bar.mat-accent {
+                        @include mat.tabs-overrides((active-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        inactive-ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-focus-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-hover-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-focus-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        active-hover-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+                }
+
+                .mat-mdc-tab-group.mat-warn,
+                .mat-mdc-tab-nav-bar.mat-warn,
+                .mat-mdc-tab-group.mat-warn,
+                .mat-mdc-tab-nav-bar.mat-warn {
+                        @include mat.tabs-overrides((active-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        inactive-ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-focus-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-hover-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-focus-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        active-hover-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+                .mat-mdc-tab-group.mat-background-primary,
+                .mat-mdc-tab-nav-bar.mat-background-primary,
+                .mat-mdc-tab-group.mat-background-primary,
+                .mat-mdc-tab-nav-bar.mat-background-primary {
+                        --mat-tab-header-with-background-background-color: #{ map.get(map.get($theme, primary), DEFAULT)};
+                        --mat-tab-header-with-background-foreground-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)};
+                }
+
+                .mat-mdc-tab-group.mat-background-accent,
+                .mat-mdc-tab-nav-bar.mat-background-accent,
+                .mat-mdc-tab-group.mat-background-accent,
+                .mat-mdc-tab-nav-bar.mat-background-accent {
+                        --mat-tab-header-with-background-background-color: #{ map.get(map.get($theme, accent), DEFAULT)};
+                        --mat-tab-header-with-background-foreground-color: #fff;
+                }
+
+                .mat-mdc-tab-group.mat-background-warn,
+                .mat-mdc-tab-nav-bar.mat-background-warn,
+                .mat-mdc-tab-group.mat-background-warn,
+                .mat-mdc-tab-nav-bar.mat-background-warn {
+                        --mat-tab-header-with-background-background-color: #{ map.get(map.get($theme, warn), DEFAULT)};
+                        --mat-tab-header-with-background-foreground-color: #fff;
+                }
+
+                .mat-mdc-button.mat-primary {
+                        @include mat.button-overrides((text-label-text-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                        text-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        text-ripple-color: #{ map.get(map.get($theme, primary), DEFAULT)}1a));
+                }
+
+                .mat-mdc-button.mat-accent {
+                        @include mat.button-overrides((text-label-text-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        text-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        text-ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)}1a));
+                }
+
+                .mat-mdc-button.mat-warn {
+                        @include mat.button-overrides((text-label-text-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        text-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        text-ripple-color: #{ map.get(map.get($theme, warn), DEFAULT)}1a));
+                }
+
+                .mat-mdc-unelevated-button.mat-primary {
+                        @include mat.button-overrides((filled-container-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                        filled-label-text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        filled-state-layer-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        filled-ripple-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}1a));
+                }
+
+                .mat-mdc-unelevated-button.mat-accent {
+                        @include mat.button-overrides((filled-container-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        filled-label-text-color:#fff,
+                                        filled-state-layer-color:#fff,
+                                        filled-ripple-color:ffffff1a));
+                }
+
+                .mat-mdc-unelevated-button.mat-warn {
+                        @include mat.button-overrides((filled-container-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        filled-label-text-color:#fff,
+                                        filled-state-layer-color:#fff,
+                                        filled-ripple-color:#ffffff1a));
+                }
+
+                .mat-mdc-raised-button.mat-primary {
+                        @include mat.button-overrides((protected-container-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        protected-label-text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        protected-state-layer-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        protected-ripple-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}1a));
+                }
+
+                .mat-mdc-raised-button.mat-accent {
+                        @include mat.button-overrides((filled-container-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        filled-label-text-color:#fff,
+                                        filled-state-layer-color:#fff,
+                                        filled-ripple-color:ffffff1a));
+                }
+
+                .mat-mdc-raised-button.mat-warn {
+                        @include mat.button-overrides((filled-container-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        filled-label-text-color:#fff,
+                                        filled-state-layer-color:#fff,
+                                        filled-ripple-color:#ffffff1a));
+                }
+
+                .mat-mdc-outlined-button.mat-primary {
+                        @include mat.button-overrides((outlined-label-text-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        outlined-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        outlined-ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)}1a));
+                }
+
+                .mat-mdc-outlined-button.mat-accent {
+                        @include mat.button-overrides((outlined-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        outlined-state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        outlined-ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)}1a));
+                }
+
+                .mat-mdc-outlined-button.mat-warn {
+                        @include mat.button-overrides((outlined-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        outlined-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        outlined-ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)}1a));
+                }
+
+                .mat-mdc-fab.mat-primary {
+                        @include mat.fab-overrides((container-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        foreground-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        state-layer-color :#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        ripple-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}1a));
+                }
+
+                .mat-mdc-fab.mat-accent {
+                        @include mat.fab-overrides((container-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        foreground-color:#fff,
+                                        state-layer-color :#fff,
+                                        ripple-color: #ffffff1a));
+                }
+
+                .mat-mdc-fab.mat-warn {
+                        @include mat.fab-overrides((container-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        foreground-color:#fff,
+                                        state-layer-color :#fff,
+                                        ripple-color: #ffffff1a));
+                }
+
+                .mat-mdc-mini-fab.mat-primary {
+                        @include mat.fab-overrides((small-container-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        small-foreground-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        small-state-layer-color :#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        small-ripple-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}1a));
+                }
+
+                .mat-mdc-mini-fab.mat-accent {
+                        @include mat.fab-overrides((small-container-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        small-foreground-color:#fff,
+                                        small-state-layer-color :#fff,
+                                        small-ripple-color: #ffffff1a));
+                }
+
+                .mat-mdc-mini-fab.mat-warn {
+                        @include mat.fab-overrides((small-container-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        small-foreground-color:#fff,
+                                        small-state-layer-color :#fff,
+                                        small-ripple-color: #ffffff1a));
+                }
+
+                .mat-datepicker-content.mat-accent {
+                        @include mat.datepicker-overrides((calendar-date-selected-state-text-color:#fff,
+                                        calendar-date-selected-state-background-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        calendar-date-selected-disabled-state-background-color:#{ map.get(map.get($theme, accent), DEFAULT)}66,
+                                        calendar-date-today-selected-state-outline-color:#fff,
+                                        calendar-date-focus-state-background-color:#{ map.get(map.get($theme, accent), DEFAULT)}4d,
+                                        calendar-date-hover-state-background-color:#{ map.get(map.get($theme, accent), DEFAULT)}4d,
+                                        calendar-date-in-range-state-background-color:#{ map.get(map.get($theme, accent), DEFAULT)}33,
+                                        calendar-date-in-comparison-range-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}33,
+                                        calendar-date-in-overlap-range-state-background-color:#a8dab5,
+                                        calendar-date-in-overlap-range-selected-state-background-color:#46a35e));
+                }
+
+                .mat-datepicker-content.mat-warn {
+                        @include mat.datepicker-overrides((calendar-date-selected-state-text-color:#fff,
+                                        calendar-date-selected-state-background-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        calendar-date-selected-disabled-state-background-color:#{ map.get(map.get($theme, warn), DEFAULT)}66,
+                                        calendar-date-today-selected-state-outline-color:#fff,
+                                        calendar-date-focus-state-background-color:#{ map.get(map.get($theme, warn), DEFAULT)}4d,
+                                        calendar-date-hover-state-background-color:#{ map.get(map.get($theme, warn), DEFAULT)}4d,
+                                        calendar-date-in-range-state-background-color:#{ map.get(map.get($theme, warn), DEFAULT)}33,
+                                        calendar-date-in-comparison-range-state-background-color:#{ map.get(map.get($theme, primary), DEFAULT)}33,
+                                        calendar-date-in-overlap-range-state-background-color:#a8dab5,
+                                        calendar-date-in-overlap-range-selected-state-background-color:#46a35e));
+                }
+
+                .mat-datepicker-toggle-active.mat-accent {
+                        @include mat.datepicker-overrides((toggle-active-state-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+                }
+
+                .mat-datepicker-toggle-active.mat-warn {
+                        @include mat.datepicker-overrides((toggle-active-state-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+                .mat-step-header.mat-accent {
+                        @include mat.stepper-overrides((header-icon-foreground-color:#fff,
+                                        header-selected-state-icon-background-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        header-selected-state-icon-foreground-color:#fff,
+                                        header-done-state-icon-background-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        header-done-state-icon-foreground-color:#fff,
+                                        header-edit-state-icon-background-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        header-edit-state-icon-foreground-color:#fff));
+                }
+
+                .mat-step-header.mat-warn {
+                        @include mat.stepper-overrides((header-icon-foreground-color:#fff,
+                                        header-selected-state-icon-background-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        header-selected-state-icon-foreground-color:#fff,
+                                        header-done-state-icon-background-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        header-done-state-icon-foreground-color:#fff,
+                                        header-edit-state-icon-background-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        header-edit-state-icon-foreground-color:#fff));
+                }
+
+                .mat-toolbar.mat-primary {
+                        @include mat.toolbar-overrides((container-background-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        container-text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}));
+                }
+
+                .mat-toolbar.mat-accent {
+                        @include mat.toolbar-overrides((container-background-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        container-text-color:#fff));
+                }
+
+                .mat-toolbar.mat-warn {
+                        @include mat.toolbar-overrides((container-background-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        container-text-color:#fff));
+                }
+
+                .mat-mdc-progress-bar {
+                        @include mat.progress-bar-overrides((active-indicator-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        track-color:#{ map.get(map.get($theme, primary), DEFAULT)}40));
+                }
+
+                .mat-mdc-progress-bar.mat-accent {
+                        @include mat.progress-bar-overrides((active-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        track-color:#{ map.get(map.get($theme, accent), DEFAULT)}40));
+                }
+
+                .mat-mdc-progress-bar.mat-warn {
+                        @include mat.progress-bar-overrides((active-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        track-color:#{ map.get(map.get($theme, warn), DEFAULT)}40));
+                }
+
+                .mat-mdc-form-field.mat-accent {
+                        @include mat.form-field-overrides((filled-caret-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        filled-focus-active-indicator-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        filled-focus-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)}de,
+                                        outlined-caret-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        outlined-focus-outline-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        outlined-focus-label-text-color:#{ map.get(map.get($theme, accent), DEFAULT)}de,
+                                        focus-select-arrow-color:#{ map.get(map.get($theme, accent), DEFAULT)}de));
+
+                        @include mat.select-overrides((focused-arrow-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+                }
+
+                .mat-mdc-form-field.mat-warn {
+                        @include mat.form-field-overrides((filled-caret-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        filled-focus-active-indicator-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        filled-focus-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)}de,
+                                        outlined-caret-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        outlined-focus-outline-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        outlined-focus-label-text-color:#{ map.get(map.get($theme, warn), DEFAULT)}de,
+                                        focus-select-arrow-color:#{ map.get(map.get($theme, warn), DEFAULT)}de));
+
+                        @include mat.select-overrides((focused-arrow-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary {
+                        @include mat.chips-overrides((label-text-color:#{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        disabled-label-text-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        selected-label-text-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        with-icon-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        with-icon-disabled-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        with-icon-selected-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        with-trailing-icon-disabled-trailing-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        with-trailing-icon-trailing-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        selected-disabled-trailing-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)},
+                                        selected-trailing-icon-color: #{map.get(map.get(map.get($theme, primary), contrast), DEFAULT)}));
+                }
+
+
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent {
+                        @include mat.chips-overrides((label-text-color:#fff,
+                                        disabled-label-text-color: #fff,
+                                        selected-label-text-color: #fff,
+                                        with-icon-icon-color: #fff,
+                                        with-icon-disabled-icon-color: #fff,
+                                        with-icon-selected-icon-color: #fff,
+                                        with-trailing-icon-disabled-trailing-icon-color: #fff,
+                                        with-trailing-icon-trailing-icon-color: #fff,
+                                        selected-disabled-trailing-icon-color: #fff,
+                                        selected-trailing-icon-color: #fff));
+                }
+
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
+                .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
+                .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn {
+                        @include mat.chips-overrides((label-text-color:#fff,
+                                        disabled-label-text-color: #fff,
+                                        selected-label-text-color: #fff,
+                                        with-icon-icon-color: #fff,
+                                        with-icon-disabled-icon-color: #fff,
+                                        with-icon-selected-icon-color: #fff,
+                                        with-trailing-icon-disabled-trailing-icon-color: #fff,
+                                        with-trailing-icon-trailing-icon-color: #fff,
+                                        selected-disabled-trailing-icon-color: #fff,
+                                        selected-trailing-icon-color: #fff));
+                }
+
+                .mat-mdc-radio-button.mat-primary {
+                        @include mat.radio-overrides((selected-focus-icon-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-hover-icon-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        checked-ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+                }
+
+                .mat-mdc-radio-button.mat-accent {
+                        @include mat.radio-overrides((selected-focus-icon-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-hover-icon-color: #{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        checked-ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)}));
+                }
+
+                .mat-mdc-radio-button.mat-warn {
+                        @include mat.radio-overrides((selected-focus-icon-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-hover-icon-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        checked-ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+                .mat-mdc-icon-button.mat-primary {
+                        @include mat.icon-button-overrides((icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        ripple-color:#{ map.get(map.get($theme, primary), DEFAULT)}1a,
+                                ));
+                }
+
+                .mat-mdc-icon-button.mat-accent {
+                        @include mat.icon-button-overrides((icon-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        state-layer-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        ripple-color:#{ map.get(map.get($theme, accent), DEFAULT)}1a,
+                                ));
+                }
+
+                .mat-mdc-icon-button.mat-warn {
+                        @include mat.icon-button-overrides((icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        ripple-color:#{ map.get(map.get($theme, warn), DEFAULT)}1a,
+                                ));
+                }
+
+                .mat-mdc-checkbox.mat-primary {
+                        @include mat.checkbox-overrides((selected-icon-color: #{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-focus-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-hover-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-focus-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, primary), DEFAULT)}));
+                }
+
+                .mat-mdc-checkbox.mat-warn {
+                        @include mat.checkbox-overrides((selected-icon-color: #{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-checkmark-color: #fff,
+                                        selected-focus-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-hover-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-pressed-icon-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-focus-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-hover-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        selected-pressed-state-layer-color:#{ map.get(map.get($theme, warn), DEFAULT)}));
+                }
+
+                .mat-badge-accent {
+                        @include mat.badge-overrides((background-color:#{ map.get(map.get($theme, accent), DEFAULT)},
+                                        text-color:#fff));
+                }
+
+                .mat-badge-warn {
+                        @include mat.badge-overrides((background-color:#{ map.get(map.get($theme, warn), DEFAULT)},
+                                        text-color:#fff));
+                }
+        }
+}