@igo2/core/theming/prebuilt-themes/teal-theme.css

IGO Library

/**
 * Most of the code is inspired or from @angular/material
 * https://github.com/angular/components/tree/main/src/material/core/tokens/_token-utils.scss
 */
html .teal-theme {
  --sdg-font-size-root-percent: 87.5%;
  --igo-font-family-text: var(--sdg-font-family-text, ('Roboto', sans-serif));
  --sdg-palette-blue-100: #dae6f0;
  --sdg-palette-blue-150: #c6dbee;
  --sdg-palette-blue-200: #adcdeb;
  --sdg-palette-blue-300: #72b2eb;
  --sdg-palette-blue-350: #4a98d9;
  --sdg-palette-blue-400: #3b95e1;
  --sdg-palette-blue-500: #0078cc;
  --sdg-palette-blue-550: #1472bf;
  --sdg-palette-blue-600: #095797;
  --sdg-palette-blue-650: #19406c;
  --sdg-palette-blue-700: #223654;
  --sdg-palette-blue-800: #162b47;
  --sdg-palette-grey-100: #f1f1f2;
  --sdg-palette-grey-150: #d7d8dd;
  --sdg-palette-grey-200: #c5cad2;
  --sdg-palette-grey-300: #a7acbc;
  --sdg-palette-grey-350: #8893a2;
  --sdg-palette-grey-400: #8590a8;
  --sdg-palette-grey-450: #6b778a;
  --sdg-palette-grey-500: #6a7688;
  --sdg-palette-grey-600: #4e5662;
  --sdg-palette-grey-700: #3b424c;
  --sdg-palette-grey-850: #1c2025;
  --sdg-palette-grey-900: #121519;
  --sdg-palette-red-50: #ffdbd6;
  --sdg-palette-red-200: #f3bcb6;
  --sdg-palette-red-300: #e58271;
  --sdg-palette-red-350: #f17b6c;
  --sdg-palette-red-400: #f26049;
  --sdg-palette-red-500: #cb381f;
  --sdg-palette-red-550: #bb3a23;
  --sdg-palette-red-700: #692519;
  --sdg-palette-red-800: #4f180e;
  --sdg-palette-green-100: #d7f0bb;
  --sdg-palette-green-200: #b0d493;
  --sdg-palette-green-400: #6e9c57;
  --sdg-palette-green-500: #4f813d;
  --sdg-palette-green-600: #2c4024;
  --sdg-palette-green-800: #1e2f17;
  --sdg-palette-yellow-100: #f8e69a;
  --sdg-palette-yellow-400: #e0ad03;
  --sdg-palette-yellow-450: #ac7900;
  --sdg-palette-yellow-600: #ad781c;
  --sdg-palette-yellow-650: #6d4512;
  --sdg-palette-yellow-800: #3f240c;
  --sdg-palette-violet-300: #b3a5d4;
  --sdg-palette-violet-500: #6b4fa1;
  --sdg-color-blue-pale: #dae6f0;
  --sdg-color-blue-light: #4a98d9;
  --sdg-color-blue-normal: #1472bf;
  --sdg-color-blue-piv: #095797;
  --sdg-color-blue-medium: #19406c;
  --sdg-color-blue-dark: #223654;
  --sdg-color-grey-pale: #f1f1f2;
  --sdg-color-grey-light: #c5cad2;
  --sdg-color-grey-normal: #8893a2;
  --sdg-color-grey-medium: #6b778a;
  --sdg-color-grey-dark: #4e5662;
  --sdg-color-pink-pale: #ffdbd6;
  --sdg-color-pink-normal: #e58271;
  --sdg-color-red-normal: #cb381f;
  --sdg-color-red-dark: #4f180e;
  --sdg-color-green-pale: #d7f0bb;
  --sdg-color-green-normal: #4f813d;
  --sdg-color-green-dark: #2c4024;
  --sdg-color-yellow-pale: #f8e69a;
  --sdg-color-yellow-normal: #e0ad03;
  --sdg-color-yellow-dark: #ad781c;
  --sdg-color-violet-normal: #6b4fa1;
  --sdg-color-white: #ffffff;
  --sdg-color-black: #000000;
  --sdg-color-accent: #e58271;
  --sdg-color-text: var(--sdg-color-blue-dark);
  --sdg-color-background: var(--sdg-color-white);
  --sdg-font-family-text: Open Sans, sans-serif;
  --sdg-font-family-title: Roboto, sans-serif;
  --sdg-font-size-root-percent: 100%;
  --sdg-font-size-h6: 1rem;
  --sdg-font-size-h5: 1.1875rem;
  --sdg-font-size-h4: 1.3125rem;
  --sdg-font-size-h3: 1.75rem;
  --sdg-font-size-h2: 2.25rem;
  --sdg-font-size-h1: 3rem;
  --sdg-font-size-80: 0.75rem;
  --sdg-font-size-90: 0.875rem;
  --sdg-font-size-100: 1rem;
  --sdg-font-size-120: 1.125rem;
  --sdg-font-size-200: 1.375rem;
  --sdg-font-size-xs: var(--sdg-font-size-80);
  --sdg-font-size-sm: var(--sdg-font-size-90);
  --sdg-font-size-md: var(--sdg-font-size-100);
  --sdg-font-size-lg: var(--sdg-font-size-120);
  --sdg-font-size-xl: var(--sdg-font-size-200);
  --sdg-font-size-content: var(--sdg-font-size-md);
  --sdg-font-weight-regular: 400;
  --sdg-font-weight-medium: 500;
  --sdg-font-weight-semi-bold: 600;
  --sdg-font-weight-bold: 700;
  --sdg-line-height-h6: 1.25rem;
  --sdg-line-height-h5: 1.5rem;
  --sdg-line-height-h4: 1.5rem;
  --sdg-line-height-h3: 2rem;
  --sdg-line-height-h2: 2.5rem;
  --sdg-line-height-h1: 3.5rem;
  --sdg-line-height-90: 1.25rem;
  --sdg-line-height-100: 1.5rem;
  --sdg-line-height-120: 1.75rem;
  --sdg-line-height-200: 2rem;
  --sdg-line-height-sm: var(--sdg-line-height-90);
  --sdg-line-height-md: var(--sdg-line-height-100);
  --sdg-line-height-lg: var(--sdg-line-height-120);
  --sdg-line-height-xl: var(--sdg-line-height-200);
  --sdg-title-margin-h1-mt: var(--sdg-spacer-72);
  --sdg-title-margin-h1-mb: var(--sdg-spacer-32);
  --sdg-title-margin-h2-mt: var(--sdg-spacer-lg);
  --sdg-title-margin-h2-mb: var(--sdg-spacer-sm);
  --sdg-title-margin-h3-mt: var(--sdg-spacer-md);
  --sdg-title-margin-h3-mb: var(--sdg-spacer-sm);
  --sdg-title-margin-h4-mt: var(--sdg-spacer-md);
  --sdg-title-margin-h4-mb: var(--sdg-spacer-xs);
  --sdg-title-margin-h5-mt: var(--sdg-spacer-sm);
  --sdg-title-margin-h5-mb: 0;
  --sdg-title-margin-h6-mt: var(--sdg-spacer-sm);
  --sdg-title-margin-h6-mb: 0;
  --sdg-mobile-font-size-h3: 1.5625rem;
  --sdg-mobile-font-size-h2: 1.75rem;
  --sdg-mobile-font-size-h1: 2.25rem;
  --sdg-mobile-line-height-h2: 2.5rem;
  --sdg-mobile-line-height-h1: 3.5rem;
  --sdg-max-content-width: 825px;
  --sdg-spacer-8: 0.5rem;
  --sdg-spacer-16: 1rem;
  --sdg-spacer-24: 1.5rem;
  --sdg-spacer-32: 2rem;
  --sdg-spacer-48: 3rem;
  --sdg-spacer-72: 4.5rem;
  --sdg-spacer-96: 6rem;
  --sdg-spacer-xs: var(--sdg-spacer-8);
  --sdg-spacer-sm: var(--sdg-spacer-16);
  --sdg-spacer-md: var(--sdg-spacer-24);
  --sdg-spacer-lg: var(--sdg-spacer-48);
  --sdg-spacer-xl: var(--sdg-spacer-96);
  --sdg-grid-min-width-sm: 0;
  --sdg-grid-max-width-sm: 575px;
  --sdg-grid-container-max-width-sm: container-max-width("mobile");
  --sdg-grid-columns-sm: 4;
  --sdg-grid-spacing-sm: 16px;
  --sdg-grid-margins-sm: 8px;
  --sdg-grid-min-width-md: 576px;
  --sdg-grid-max-width-md: 767px;
  --sdg-grid-container-max-width-md: container-max-width("mobile-landscape");
  --sdg-grid-columns-md: 4;
  --sdg-grid-spacing-md: 16px;
  --sdg-grid-margins-md: 8px;
  --sdg-grid-min-width-lg: 768px;
  --sdg-grid-max-width-lg: 991px;
  --sdg-grid-container-max-width-lg: container-max-width("tablet");
  --sdg-grid-columns-lg: 12;
  --sdg-grid-spacing-lg: 24px;
  --sdg-grid-margins-lg: 12px;
  --sdg-grid-min-width-xl: 992px;
  --sdg-grid-max-width-xl: 1199px;
  --sdg-grid-container-max-width-xl: container-max-width("laptop");
  --sdg-grid-columns-xl: 12;
  --sdg-grid-spacing-xl: 24px;
  --sdg-grid-margins-xl: 12px;
  --sdg-grid-min-width-max: 1200px;
  --sdg-grid-max-width-max: 9999px;
  --sdg-grid-container-max-width-max: container-max-width("desktop");
  --sdg-grid-columns-max: 12;
  --sdg-grid-spacing-max: 32px;
  --sdg-grid-margins-max: 16px;
  --sdg-elevation-0: 0px 0px 0px 0px rgba(34, 54, 84, 0.24);
  --sdg-elevation-1: 0px 1px 4px 0px  rgba(34, 54, 84, 0.24);
  --sdg-elevation-2: 0px 2px 8px 0px rgba(34, 54, 84, 0.24);
  --sdg-elevation-3: 0px 4px 16px 0px rgba(34, 54, 84, 0.24);
  --sdg-elevation-4: 0px 6px 24px 0px rgba(34, 54, 84, 0.24);
}
html .teal-theme .igo-collapsed {
  display: none !important;
}
html .teal-theme mat-icon[igocollapse]:hover {
  cursor: pointer;
}
html .teal-theme mat-icon[igocollapse].igo-chevron {
  width: auto !important;
  transform: rotateZ(0deg);
  transition: 300ms ease-in-out;
}
html .teal-theme mat-icon[igocollapse].igo-chevron.collapsed {
  transform: rotateZ(180deg);
  transition: 300ms ease-in-out;
}
html .teal-theme .toastr-message-title {
  font-size: var(--sdg-font-size-h5);
}
html .teal-theme {
  --mat-sys-background: light-dark(#f6faf8, #0f1413);
  --mat-sys-error: light-dark(#f44336, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#edf2ef, #2c3130);
  --mat-sys-inverse-primary: light-dark(#26a69a, #00897b);
  --mat-sys-inverse-surface: light-dark(#2c3130, #dfe4e1);
  --mat-sys-on-background: light-dark(#171d1b, #dfe4e1);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #003731);
  --mat-sys-on-primary-container: light-dark(#00897b, #b2dfdb);
  --mat-sys-on-primary-fixed: light-dark(#00201c, #00201c);
  --mat-sys-on-primary-fixed-variant: light-dark(#00897b, #00897b);
  --mat-sys-on-secondary: light-dark(#ffffff, #103631);
  --mat-sys-on-secondary-container: light-dark(#00897b, #b2dfdb);
  --mat-sys-on-secondary-fixed: light-dark(#00201c, #00201c);
  --mat-sys-on-secondary-fixed-variant: light-dark(#00897b, #00897b);
  --mat-sys-on-surface: light-dark(#171d1b, #dfe4e1);
  --mat-sys-on-surface-variant: light-dark(#3d4946, #d8e5e1);
  --mat-sys-on-tertiary: light-dark(#ffffff, #003731);
  --mat-sys-on-tertiary-container: light-dark(#00897b, #b2dfdb);
  --mat-sys-on-tertiary-fixed: light-dark(#00201c, #00201c);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#00897b, #00897b);
  --mat-sys-outline: light-dark(#6d7a77, #879390);
  --mat-sys-outline-variant: light-dark(#bcc9c5, #3d4946);
  --mat-sys-primary: light-dark(#00897b, #26a69a);
  --mat-sys-primary-container: light-dark(#b2dfdb, #00897b);
  --mat-sys-primary-fixed: light-dark(#b2dfdb, #b2dfdb);
  --mat-sys-primary-fixed-dim: light-dark(#26a69a, #26a69a);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#00897b, #26a69a);
  --mat-sys-secondary-container: light-dark(#b2dfdb, #00897b);
  --mat-sys-secondary-fixed: light-dark(#b2dfdb, #b2dfdb);
  --mat-sys-secondary-fixed-dim: light-dark(#26a69a, #26a69a);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#f6faf8, #0f1413);
  --mat-sys-surface-bright: light-dark(#f6faf8, #353a39);
  --mat-sys-surface-container: light-dark(#eaefec, #1b211f);
  --mat-sys-surface-container-high: light-dark(#e4e9e7, #262b2a);
  --mat-sys-surface-container-highest: light-dark(#dfe4e1, #313634);
  --mat-sys-surface-container-low: light-dark(#f0f5f2, #171d1b);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0a0f0e);
  --mat-sys-surface-dim: light-dark(#d6dbd9, #0f1413);
  --mat-sys-surface-tint: light-dark(#00897b, #26a69a);
  --mat-sys-surface-variant: light-dark(#d8e5e1, #3d4946);
  --mat-sys-tertiary: light-dark(#00897b, #26a69a);
  --mat-sys-tertiary-container: light-dark(#b2dfdb, #00897b);
  --mat-sys-tertiary-fixed: light-dark(#b2dfdb, #b2dfdb);
  --mat-sys-tertiary-fixed-dim: light-dark(#26a69a, #26a69a);
  --mat-sys-neutral-variant20: #273330;
  --mat-sys-neutral10: #171d1b;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-large-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-medium-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-medium-line-height: 1.25rem;
  --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.75rem / 1rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-small-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-display-large-font: var(--igo-font-family-text, "Roboto", 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 var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-display-medium-font: var(--igo-font-family-text, "Roboto", 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 var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-display-small-font: var(--igo-font-family-text, "Roboto", 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: 400 2rem / 2.5rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-large-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-medium-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-small-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-large-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-medium-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-small-font: var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-title-large-font: var(--igo-font-family-text, "Roboto", 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 var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-title-medium-font: var(--igo-font-family-text, "Roboto", 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 var(--igo-font-family-text, "Roboto", sans-serif);
  --mat-sys-title-small-font: var(--igo-font-family-text, "Roboto", 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-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
html .teal-theme .mat-primary {
  --mat-stepper-container-color: #f6faf8;
  --mat-stepper-header-done-state-icon-background-color: #00897b;
  --mat-stepper-header-done-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-edit-state-icon-background-color: #00897b;
  --mat-stepper-header-edit-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, #171d1b 8%, transparent);
  --mat-stepper-header-icon-background-color: #3d4946;
  --mat-stepper-header-icon-foreground-color: #f6faf8;
  --mat-stepper-header-label-text-color: #3d4946;
  --mat-stepper-header-optional-label-text-color: #3d4946;
  --mat-stepper-header-selected-state-icon-background-color: #00897b;
  --mat-stepper-header-selected-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-selected-state-label-text-color: #3d4946;
  --mat-stepper-line-color: #6d7a77;
}
html .teal-theme .mat-primary.mat-icon {
  --mat-icon-color: #00897b;
}
html .teal-theme .mat-primary.mat-mdc-tab-group, html .teal-theme .mat-primary.mat-mdc-tab-nav-bar {
  --mat-tab-active-focus-indicator-color: #00897b;
  --mat-tab-active-focus-label-text-color: #171d1b;
  --mat-tab-active-hover-indicator-color: #00897b;
  --mat-tab-active-hover-label-text-color: #171d1b;
  --mat-tab-active-indicator-color: #00897b;
  --mat-tab-active-label-text-color: #171d1b;
  --mat-tab-active-ripple-color: #171d1b;
  --mat-tab-divider-color: #d8e5e1;
  --mat-tab-inactive-focus-label-text-color: #171d1b;
  --mat-tab-inactive-hover-label-text-color: #171d1b;
  --mat-tab-inactive-label-text-color: #171d1b;
  --mat-tab-inactive-ripple-color: #171d1b;
  --mat-tab-pagination-icon-color: #171d1b;
  --mat-tab-disabled-ripple-color: #3d4946;
}
html .teal-theme .mat-primary.mat-mdc-slide-toggle {
  --mat-slide-toggle-disabled-label-text-color: #171d1b;
  --mat-slide-toggle-disabled-selected-handle-color: #f6faf8;
  --mat-slide-toggle-disabled-selected-icon-color: #171d1b;
  --mat-slide-toggle-disabled-selected-track-color: #171d1b;
  --mat-slide-toggle-disabled-unselected-handle-color: #171d1b;
  --mat-slide-toggle-disabled-unselected-icon-color: #d8e5e1;
  --mat-slide-toggle-disabled-unselected-track-color: #d8e5e1;
  --mat-slide-toggle-disabled-unselected-track-outline-color: #171d1b;
  --mat-slide-toggle-label-text-color: #171d1b;
  --mat-slide-toggle-selected-focus-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-focus-state-layer-color: #00897b;
  --mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-focus-track-color: #00897b;
  --mat-slide-toggle-selected-handle-color: #ffffff;
  --mat-slide-toggle-selected-hover-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-hover-state-layer-color: #00897b;
  --mat-slide-toggle-selected-hover-state-layer-opacity: 0.08;
  --mat-slide-toggle-selected-hover-track-color: #00897b;
  --mat-slide-toggle-selected-icon-color: #00897b;
  --mat-slide-toggle-selected-pressed-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-pressed-state-layer-color: #00897b;
  --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-pressed-track-color: #00897b;
  --mat-slide-toggle-selected-track-color: #00897b;
  --mat-slide-toggle-track-outline-color: #6d7a77;
  --mat-slide-toggle-unselected-focus-handle-color: #3d4946;
  --mat-slide-toggle-unselected-focus-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-focus-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-handle-color: #6d7a77;
  --mat-slide-toggle-unselected-hover-handle-color: #3d4946;
  --mat-slide-toggle-unselected-hover-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.08;
  --mat-slide-toggle-unselected-hover-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-icon-color: #d8e5e1;
  --mat-slide-toggle-unselected-pressed-handle-color: #3d4946;
  --mat-slide-toggle-unselected-pressed-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-pressed-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-track-color: #d8e5e1;
}
html .teal-theme .mat-primary.mat-datepicker-content {
  --mat-datepicker-calendar-body-label-text-color: #171d1b;
  --mat-datepicker-calendar-container-background-color: #e4e9e7;
  --mat-datepicker-calendar-container-text-color: #171d1b;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #171d1b 8%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #00897b;
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-in-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-preview-state-outline-color: #00897b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-selected-state-background-color: #00897b;
  --mat-datepicker-calendar-date-selected-state-text-color: #ffffff;
  --mat-datepicker-calendar-date-text-color: #171d1b;
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-today-outline-color: #00897b;
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #00897b;
  --mat-datepicker-calendar-header-divider-color: transparent;
  --mat-datepicker-calendar-header-text-color: #3d4946;
  --mat-datepicker-calendar-navigation-button-icon-color: #3d4946;
  --mat-datepicker-calendar-period-button-icon-color: #3d4946;
  --mat-datepicker-calendar-period-button-text-color: #3d4946;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-range-input-separator-color: #171d1b;
  --mat-datepicker-toggle-active-state-icon-color: #00897b;
  --mat-datepicker-toggle-icon-color: #3d4946;
}
html .teal-theme .mat-primary.mat-mdc-button-base {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: #00897b;
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.08;
  --mat-icon-button-icon-color: #00897b;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-icon-button-state-layer-color: #00897b;
}
html .teal-theme .mat-badge {
  --mat-badge-background-color: #00897b;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, #00897b 38%, transparent);
  --mat-badge-disabled-state-text-color: #ffffff;
  --mat-badge-text-color: #ffffff;
}
html .teal-theme .mat-accent {
  --mat-option-focus-state-layer-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-option-hover-state-layer-color: color-mix(in srgb, #171d1b 8%, transparent);
  --mat-option-label-text-color: #171d1b;
  --mat-option-selected-state-label-text-color: #00897b;
  --mat-option-selected-state-layer-color: #b2dfdb;
}
html .teal-theme .mat-accent {
  --mat-progress-spinner-active-indicator-color: #00897b;
}
html .teal-theme .mat-accent {
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #f6faf8;
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-pseudo-checkbox-full-selected-checkmark-color: #ffffff;
  --mat-pseudo-checkbox-full-selected-icon-color: #00897b;
  --mat-pseudo-checkbox-full-unselected-icon-color: #3d4946;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #00897b;
}
html .teal-theme .mat-accent {
  --mat-stepper-container-color: #f6faf8;
  --mat-stepper-header-done-state-icon-background-color: #00897b;
  --mat-stepper-header-done-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-edit-state-icon-background-color: #00897b;
  --mat-stepper-header-edit-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, #171d1b 8%, transparent);
  --mat-stepper-header-icon-background-color: #3d4946;
  --mat-stepper-header-icon-foreground-color: #f6faf8;
  --mat-stepper-header-label-text-color: #3d4946;
  --mat-stepper-header-optional-label-text-color: #3d4946;
  --mat-stepper-header-selected-state-icon-background-color: #00897b;
  --mat-stepper-header-selected-state-icon-foreground-color: #ffffff;
  --mat-stepper-header-selected-state-label-text-color: #3d4946;
  --mat-stepper-line-color: #6d7a77;
}
html .teal-theme .mat-accent.mat-icon {
  --mat-icon-color: #00897b;
}
html .teal-theme .mat-accent.mat-mdc-checkbox {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-disabled-selected-checkmark-color: #f6faf8;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-label-text-color: #171d1b;
  --mat-checkbox-selected-checkmark-color: #ffffff;
  --mat-checkbox-selected-focus-icon-color: #00897b;
  --mat-checkbox-selected-focus-state-layer-color: #00897b;
  --mat-checkbox-selected-hover-icon-color: #00897b;
  --mat-checkbox-selected-hover-state-layer-color: #00897b;
  --mat-checkbox-selected-icon-color: #00897b;
  --mat-checkbox-selected-pressed-icon-color: #00897b;
  --mat-checkbox-selected-pressed-state-layer-color: #171d1b;
  --mat-checkbox-unselected-focus-icon-color: #171d1b;
  --mat-checkbox-unselected-focus-state-layer-color: #171d1b;
  --mat-checkbox-unselected-hover-icon-color: #171d1b;
  --mat-checkbox-unselected-hover-state-layer-color: #171d1b;
  --mat-checkbox-unselected-icon-color: #3d4946;
  --mat-checkbox-unselected-pressed-state-layer-color: #00897b;
}
html .teal-theme .mat-accent.mat-mdc-slider {
  --mat-slider-active-track-color: #00897b;
  --mat-slider-active-track-shape: 9999px;
  --mat-slider-disabled-active-track-color: #171d1b;
  --mat-slider-disabled-handle-color: #171d1b;
  --mat-slider-disabled-inactive-track-color: #171d1b;
  --mat-slider-focus-handle-color: #00897b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #00897b 20%, transparent);
  --mat-slider-handle-color: #00897b;
  --mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-handle-shape: 9999px;
  --mat-slider-hover-handle-color: #00897b;
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #00897b 5%, transparent);
  --mat-slider-inactive-track-color: #d8e5e1;
  --mat-slider-inactive-track-shape: 9999px;
  --mat-slider-label-container-color: #00897b;
  --mat-slider-label-label-text-color: #ffffff;
  --mat-slider-ripple-color: #00897b;
  --mat-slider-with-overlap-handle-outline-color: #ffffff;
  --mat-slider-with-tick-marks-active-container-color: #ffffff;
  --mat-slider-with-tick-marks-container-shape: 9999px;
  --mat-slider-with-tick-marks-disabled-container-color: #171d1b;
  --mat-slider-with-tick-marks-inactive-container-color: #3d4946;
}
html .teal-theme .mat-accent.mat-mdc-tab-group, html .teal-theme .mat-accent.mat-mdc-tab-nav-bar {
  --mat-tab-active-focus-indicator-color: #00897b;
  --mat-tab-active-focus-label-text-color: #171d1b;
  --mat-tab-active-hover-indicator-color: #00897b;
  --mat-tab-active-hover-label-text-color: #171d1b;
  --mat-tab-active-indicator-color: #00897b;
  --mat-tab-active-label-text-color: #171d1b;
  --mat-tab-active-ripple-color: #171d1b;
  --mat-tab-divider-color: #d8e5e1;
  --mat-tab-inactive-focus-label-text-color: #171d1b;
  --mat-tab-inactive-hover-label-text-color: #171d1b;
  --mat-tab-inactive-label-text-color: #171d1b;
  --mat-tab-inactive-ripple-color: #171d1b;
  --mat-tab-pagination-icon-color: #171d1b;
  --mat-tab-disabled-ripple-color: #3d4946;
}
html .teal-theme .mat-accent.mat-mdc-slide-toggle {
  --mat-slide-toggle-disabled-label-text-color: #171d1b;
  --mat-slide-toggle-disabled-selected-handle-color: #f6faf8;
  --mat-slide-toggle-disabled-selected-icon-color: #171d1b;
  --mat-slide-toggle-disabled-selected-track-color: #171d1b;
  --mat-slide-toggle-disabled-unselected-handle-color: #171d1b;
  --mat-slide-toggle-disabled-unselected-icon-color: #d8e5e1;
  --mat-slide-toggle-disabled-unselected-track-color: #d8e5e1;
  --mat-slide-toggle-disabled-unselected-track-outline-color: #171d1b;
  --mat-slide-toggle-label-text-color: #171d1b;
  --mat-slide-toggle-selected-focus-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-focus-state-layer-color: #00897b;
  --mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-focus-track-color: #00897b;
  --mat-slide-toggle-selected-handle-color: #ffffff;
  --mat-slide-toggle-selected-hover-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-hover-state-layer-color: #00897b;
  --mat-slide-toggle-selected-hover-state-layer-opacity: 0.08;
  --mat-slide-toggle-selected-hover-track-color: #00897b;
  --mat-slide-toggle-selected-icon-color: #00897b;
  --mat-slide-toggle-selected-pressed-handle-color: #b2dfdb;
  --mat-slide-toggle-selected-pressed-state-layer-color: #00897b;
  --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-pressed-track-color: #00897b;
  --mat-slide-toggle-selected-track-color: #00897b;
  --mat-slide-toggle-track-outline-color: #6d7a77;
  --mat-slide-toggle-unselected-focus-handle-color: #3d4946;
  --mat-slide-toggle-unselected-focus-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-focus-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-handle-color: #6d7a77;
  --mat-slide-toggle-unselected-hover-handle-color: #3d4946;
  --mat-slide-toggle-unselected-hover-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.08;
  --mat-slide-toggle-unselected-hover-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-icon-color: #d8e5e1;
  --mat-slide-toggle-unselected-pressed-handle-color: #3d4946;
  --mat-slide-toggle-unselected-pressed-state-layer-color: #171d1b;
  --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-pressed-track-color: #d8e5e1;
  --mat-slide-toggle-unselected-track-color: #d8e5e1;
}
html .teal-theme .mat-accent.mat-mdc-form-field {
  --mat-select-panel-background-color: #eaefec;
  --mat-select-enabled-trigger-text-color: #171d1b;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-select-placeholder-text-color: #3d4946;
  --mat-select-enabled-arrow-color: #3d4946;
  --mat-select-disabled-arrow-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-select-focused-arrow-color: #00897b;
  --mat-select-invalid-arrow-color: #f44336;
}
html .teal-theme .mat-accent.mat-mdc-radio-button {
  --mat-radio-checked-ripple-color: #00897b;
  --mat-radio-disabled-label-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-radio-disabled-selected-icon-color: #171d1b;
  --mat-radio-disabled-unselected-icon-color: #171d1b;
  --mat-radio-label-text-color: #171d1b;
  --mat-radio-ripple-color: #171d1b;
  --mat-radio-selected-focus-icon-color: #00897b;
  --mat-radio-selected-hover-icon-color: #00897b;
  --mat-radio-selected-icon-color: #00897b;
  --mat-radio-selected-pressed-icon-color: #00897b;
  --mat-radio-unselected-focus-icon-color: #171d1b;
  --mat-radio-unselected-hover-icon-color: #171d1b;
  --mat-radio-unselected-pressed-icon-color: #171d1b;
}
html .teal-theme .mat-accent.mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #00897b;
  --mat-progress-bar-track-color: #d8e5e1;
}
html .teal-theme .mat-accent.mat-mdc-form-field {
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-disabled-leading-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-disabled-trailing-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-enabled-select-arrow-color: #3d4946;
  --mat-form-field-error-focus-trailing-icon-color: #f44336;
  --mat-form-field-error-hover-trailing-icon-color: #93000a;
  --mat-form-field-error-text-color: #f44336;
  --mat-form-field-error-trailing-icon-color: #f44336;
  --mat-form-field-filled-active-indicator-color: #3d4946;
  --mat-form-field-filled-caret-color: #00897b;
  --mat-form-field-filled-container-color: #d8e5e1;
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, #171d1b 4%, transparent);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-filled-error-active-indicator-color: #f44336;
  --mat-form-field-filled-error-caret-color: #f44336;
  --mat-form-field-filled-error-focus-active-indicator-color: #f44336;
  --mat-form-field-filled-error-focus-label-text-color: #f44336;
  --mat-form-field-filled-error-hover-active-indicator-color: #93000a;
  --mat-form-field-filled-error-hover-label-text-color: #93000a;
  --mat-form-field-filled-error-label-text-color: #f44336;
  --mat-form-field-filled-focus-active-indicator-color: #00897b;
  --mat-form-field-filled-focus-label-text-color: #00897b;
  --mat-form-field-filled-hover-active-indicator-color: #171d1b;
  --mat-form-field-filled-hover-label-text-color: #3d4946;
  --mat-form-field-filled-input-text-color: #171d1b;
  --mat-form-field-filled-input-text-placeholder-color: #3d4946;
  --mat-form-field-filled-label-text-color: #3d4946;
  --mat-form-field-focus-select-arrow-color: #00897b;
  --mat-form-field-focus-state-layer-opacity: 0;
  --mat-form-field-hover-state-layer-opacity: 0.08;
  --mat-form-field-leading-icon-color: #3d4946;
  --mat-form-field-outlined-caret-color: #00897b;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-form-field-outlined-error-caret-color: #f44336;
  --mat-form-field-outlined-error-focus-label-text-color: #f44336;
  --mat-form-field-outlined-error-focus-outline-color: #f44336;
  --mat-form-field-outlined-error-hover-label-text-color: #93000a;
  --mat-form-field-outlined-error-hover-outline-color: #93000a;
  --mat-form-field-outlined-error-label-text-color: #f44336;
  --mat-form-field-outlined-error-outline-color: #f44336;
  --mat-form-field-outlined-focus-label-text-color: #00897b;
  --mat-form-field-outlined-focus-outline-color: #00897b;
  --mat-form-field-outlined-hover-label-text-color: #171d1b;
  --mat-form-field-outlined-hover-outline-color: #171d1b;
  --mat-form-field-outlined-input-text-color: #171d1b;
  --mat-form-field-outlined-input-text-placeholder-color: #3d4946;
  --mat-form-field-outlined-label-text-color: #3d4946;
  --mat-form-field-outlined-outline-color: #6d7a77;
  --mat-form-field-select-disabled-option-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-form-field-select-option-text-color: #171d1b;
  --mat-form-field-state-layer-color: #171d1b;
  --mat-form-field-trailing-icon-color: #3d4946;
}
html .teal-theme .mat-accent.mat-datepicker-content {
  --mat-datepicker-calendar-body-label-text-color: #171d1b;
  --mat-datepicker-calendar-container-background-color: #e4e9e7;
  --mat-datepicker-calendar-container-text-color: #171d1b;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #171d1b 8%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #00897b;
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-in-range-state-background-color: #b2dfdb;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-preview-state-outline-color: #00897b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-selected-state-background-color: #00897b;
  --mat-datepicker-calendar-date-selected-state-text-color: #ffffff;
  --mat-datepicker-calendar-date-text-color: #171d1b;
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-calendar-date-today-outline-color: #00897b;
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #00897b;
  --mat-datepicker-calendar-header-divider-color: transparent;
  --mat-datepicker-calendar-header-text-color: #3d4946;
  --mat-datepicker-calendar-navigation-button-icon-color: #3d4946;
  --mat-datepicker-calendar-period-button-icon-color: #3d4946;
  --mat-datepicker-calendar-period-button-text-color: #3d4946;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-datepicker-range-input-separator-color: #171d1b;
  --mat-datepicker-toggle-active-state-icon-color: #00897b;
  --mat-datepicker-toggle-icon-color: #3d4946;
}
html .teal-theme .mat-accent.mat-mdc-button-base {
  --mat-button-filled-container-color: #00897b;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: #3d4946;
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.08;
  --mat-button-filled-label-text-color: #ffffff;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, #ffffff 12%, transparent);
  --mat-button-filled-state-layer-color: #ffffff;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-button-outlined-disabled-outline-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-button-outlined-disabled-state-layer-color: #3d4946;
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.08;
  --mat-button-outlined-label-text-color: #00897b;
  --mat-button-outlined-outline-color: #6d7a77;
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-button-outlined-state-layer-color: #00897b;
  --mat-button-protected-container-color: #f6faf8;
  --mat-button-protected-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-disabled-container-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: #3d4946;
  --mat-button-protected-focus-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-hover-state-layer-opacity: 0.08;
  --mat-button-protected-label-text-color: #00897b;
  --mat-button-protected-pressed-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-button-protected-state-layer-color: #00897b;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-button-text-disabled-state-layer-color: #3d4946;
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.08;
  --mat-button-text-label-text-color: #00897b;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-button-text-state-layer-color: #00897b;
  --mat-button-tonal-container-color: #b2dfdb;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: #3d4946;
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.08;
  --mat-button-tonal-label-text-color: #00897b;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-button-tonal-state-layer-color: #00897b;
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: #00897b;
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.08;
  --mat-icon-button-icon-color: #00897b;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, #00897b 12%, transparent);
  --mat-icon-button-state-layer-color: #00897b;
}
html .teal-theme .mat-accent.mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-chip-disabled-outline-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-chip-elevated-selected-container-color: #b2dfdb;
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-chip-focus-outline-color: #3d4946;
  --mat-chip-focus-state-layer-color: #3d4946;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: #3d4946;
  --mat-chip-hover-state-layer-opacity: 0.08;
  --mat-chip-label-text-color: #3d4946;
  --mat-chip-outline-color: #6d7a77;
  --mat-chip-selected-disabled-trailing-icon-color: #171d1b;
  --mat-chip-selected-focus-state-layer-color: #00897b;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: #00897b;
  --mat-chip-selected-hover-state-layer-opacity: 0.08;
  --mat-chip-selected-label-text-color: #00897b;
  --mat-chip-selected-trailing-action-state-layer-color: #00897b;
  --mat-chip-selected-trailing-icon-color: #00897b;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0.12;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0.08;
  --mat-chip-trailing-action-state-layer-color: #3d4946;
  --mat-chip-with-icon-disabled-icon-color: #171d1b;
  --mat-chip-with-icon-icon-color: #3d4946;
  --mat-chip-with-icon-selected-icon-color: #00897b;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #171d1b;
  --mat-chip-with-trailing-icon-trailing-icon-color: #3d4946;
}
html .teal-theme .mat-accent .mdc-list-item__start,
html .teal-theme .mat-accent .mdc-list-item__end {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-disabled-selected-checkmark-color: #f6faf8;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-checkbox-label-text-color: #171d1b;
  --mat-checkbox-selected-checkmark-color: #ffffff;
  --mat-checkbox-selected-focus-icon-color: #00897b;
  --mat-checkbox-selected-focus-state-layer-color: #00897b;
  --mat-checkbox-selected-hover-icon-color: #00897b;
  --mat-checkbox-selected-hover-state-layer-color: #00897b;
  --mat-checkbox-selected-icon-color: #00897b;
  --mat-checkbox-selected-pressed-icon-color: #00897b;
  --mat-checkbox-selected-pressed-state-layer-color: #171d1b;
  --mat-checkbox-unselected-focus-icon-color: #171d1b;
  --mat-checkbox-unselected-focus-state-layer-color: #171d1b;
  --mat-checkbox-unselected-hover-icon-color: #171d1b;
  --mat-checkbox-unselected-hover-state-layer-color: #171d1b;
  --mat-checkbox-unselected-icon-color: #3d4946;
  --mat-checkbox-unselected-pressed-state-layer-color: #00897b;
  --mat-radio-checked-ripple-color: #00897b;
  --mat-radio-disabled-label-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-radio-disabled-selected-icon-color: #171d1b;
  --mat-radio-disabled-unselected-icon-color: #171d1b;
  --mat-radio-label-text-color: #171d1b;
  --mat-radio-ripple-color: #171d1b;
  --mat-radio-selected-focus-icon-color: #00897b;
  --mat-radio-selected-hover-icon-color: #00897b;
  --mat-radio-selected-icon-color: #00897b;
  --mat-radio-selected-pressed-icon-color: #00897b;
  --mat-radio-unselected-focus-icon-color: #171d1b;
  --mat-radio-unselected-hover-icon-color: #171d1b;
  --mat-radio-unselected-pressed-icon-color: #171d1b;
}
html .teal-theme .mat-accent.mat-mdc-fab, html .teal-theme .mat-accent.mat-mdc-mini-fab {
  --mat-fab-container-color: #b2dfdb;
  --mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-disabled-state-container-color: color-mix(in srgb, #171d1b 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, #171d1b 38%, transparent);
  --mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-pressed-container-elevation-shadow: 6;
  --mat-fab-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: #00897b;
  --mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-hover-state-layer-opacity: 0.08;
  --mat-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple