@kato-lee/components 1.1.4 → 3.0.0

package/README.md

@@ -4,4 +4,4 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Versions
 
-`1x` Use `@kato-lee/cdk@14.2.7` & `@kato-lee/material@14.2.7`.
+`1x` Use `@angular/cdk@20.2.14` & `@angular/material@20.2.14`.

package/assets/_fields.scss

@@ -1,3 +1,28 @@
+.mat-mdc-form-field.mat-form-field-appearance-fill {
+  .mat-mdc-text-field-wrapper {
+    height: 48px !important;
+  }
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+    top: 30px !important;
+  }
+}
+
+.mdc-notched-outline:not(.mdc-notched-outline--notched) {
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__trailing,
+  .mdc-notched-outline__notch {
+    border-color: rgb(182, 182, 182) !important;
+  }
+}
+.mat-mdc-form-field-type-mat-select:not(.mat-focused) .mdc-notched-outline * {
+  border-color: rgb(182, 182, 182) !important;
+}
+
+.mdc-text-field--filled,
+.mat-mdc-form-field-focus-overlay {
+  background-color: transparent !important;
+}
+
 .tak {
   &-custom-error {
     font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -15,7 +40,7 @@
     }
     &__field-container {
       margin-top: -18px;
-      & .mat-form-field {
+      & .mat-mdc-form-field {
         visibility: hidden;
         width: 1px !important;
         font-size: 1px !important;
@@ -26,40 +51,75 @@
     mat-form-field {
       width: calc(100% - 10px);
     }
-    .money-input {
-      font-weight: bolder !important;
-    }
     .mat-form-field-invalid {
-      .tak-hint {
-        color: var(--tak-form-field-error-color) !important;
-      }
-      .mat-text-field-wrapper {
-        .mat-floating-label,
-        .mat-floating-label:hover,
-        .mat-form-field-icon-suffix,
-        .mat-text-field,
-        .mat-text-field__input,
-        .mat-button-ripple {
+      .mat-mdc-text-field-wrapper {
+        .mat-mdc-floating-label
+        /* .mat-mdc-form-field-icon-suffix,
+        .mat-mdc-text-field,
+        .mat-mdc-text-field__input,
+        .mat-mdc-button-ripple */ {
           color: var(--tak-form-field-error-color) !important;
         }
-        & .mat-form-field-flex .mat-datepicker-toggle .mat-icon-button {
+        /* & .mat-mdc-form-field-flex .mat-mdc-datepicker-toggle .mat-icon-button {
           color: var(--tak-form-field-error-color) !important;
-        }
+        } */
       }
-      .mat-text-field--filled:not(.mat-text-field--disabled) {
-        .mat-line-ripple::before,
-        .mat-line-ripple::after,
-        .mat-line-ripple:hover {
+      /* .mat-mdc-text-field--filled:not(.mat-mdc-text-field--disabled) {
+        .mat-mdc-line-ripple::before,
+        .mat-mdc-line-ripple::after,
+        .mat-mdc-line-ripple:hover {
           border-bottom-color: var(--tak-form-field-error-color) !important;
         }
+      } */
+      .mat-mdc-input-element {
+        color: var(--tak-form-field-error-color) !important;
+      }
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing,
+        .mdc-notched-outline__notch {
+          border-color: var(--tak-form-field-error-color) !important;
+        }
+      }
+      .mdc-notched-outline {
+        .mat-mdc-notch-piece {
+          &.mdc-notched-outline__leading {
+            border-left: 1px solid var(--tak-form-field-error-color);
+            border-top: 1px solid var(--tak-form-field-error-color);
+            border-bottom: 1px solid var(--tak-form-field-error-color);
+          }
+          &.mdc-notched-outline__notch {
+            border-bottom: 1px solid var(--tak-form-field-error-color);
+          }
+          &.mdc-notched-outline__trailing {
+            border-bottom: 1px solid var(--tak-form-field-error-color);
+            border-right: 1px solid var(--tak-form-field-error-color);
+            border-top: 1px solid var(--tak-form-field-error-color);
+          }
+          & .mdc-floating-label--float-above {
+            color: var(--tak-form-field-error-color);
+          }
+        }
+        &:not(.mdc-notched-outline--notched) {
+          .mat-mdc-notch-piece.mdc-notched-outline__notch {
+            border-top: 1px solid var(--tak-form-field-error-color);
+          }
+        }
+      }
+      .tak-hint {
+        color: var(--tak-form-field-error-color) !important;
       }
     }
+    .money-input {
+      font-weight: bolder !important;
+    }
   }
+
   &-autocomplete-not-records {
     color: var(--tak-form-field-error-color);
   }
 }
-
+/* 
 .mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label,
 .mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused
   .mat-floating-label--float-above {
@@ -74,3 +134,4 @@
   .mat-icon-button {
   color: var(--tak-form-field-error-color) !important;
 }
+ */

package/assets/_grids.scss

@@ -1,3 +1,11 @@
+$SM_RESOLUTION: 361px;
+$MD_RESOLUTION: 641px;
+$LG_RESOLUTION: 721px;
+$XL_RESOLUTION: 961px;
+$XXL_RESOLUTION: 1201px;
+
+$MOBILE_RESOLUTION: 900px;
+
 * > .container,
 * > .container-fluid {
   -webkit-box-sizing: border-box;

package/assets/assets.scss

@@ -0,0 +1,4 @@
+@use 'grids';
+@use 'fields';
+@use 'fade-in';
+@use 'components/main';

package/assets/bundle.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/icon?family=Material+Icons";html{--tak-primary-100: rgb(120, 203, 211);--tak-primary-500: rgb(10, 161, 174);--tak-primary-700: rgb(8, 119, 129);--tak-primary-constrant-100: rgb(140, 238, 247);--tak-primary-constrant-500: rgb(14, 187, 202);--tak-primary-constrant-700: rgb(15, 163, 177);--tak-primary-opacity-100: rgb(120, 203, 211, .3);--tak-primary-opacity-500: rgb(10, 161, 174, .3);--tak-primary-opacity-700: rgb(8, 119, 129, .3);--tak-accent-100: rgb(30, 233, 148);--tak-accent-500: rgb(24, 182, 116);--tak-accent-700: rgb(29, 139, 110);--tak-accent-opacity-100: rgb(30, 233, 148, .3);--tak-accent-opacity-500: rgb(24, 182, 116, .3);--tak-accent-opacity-700: rgb(29, 139, 110, .3);--tak-accent-constrant-100: rgb(177, 243, 214);--tak-accent-constrant-500: rgb(70, 221, 158);--tak-accent-constrant-700: rgb(65, 185, 135);--tak-warn-100: rgb(255, 55, 55);--tak-warn-500: rgb(255, 0, 0);--tak-warn-700: rgb(168, 0, 0);--tak-warn-opacity-100: rgb(255, 55, 55, .3);--tak-warn-opacity-500: rgb(255, 0, 0, .3);--tak-warn-opacity-700: rgb(168, 0, 0, .3);--tak-warn-constrant-100: rgb(254, 191, 191);--tak-warn-constrant-500: rgb(255, 128, 128);--tak-warn-constrant-700: rgb(191, 96, 96)}html{--mat-sys-background: light-dark(#f7faf9, #101414);--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);--mat-sys-error-container: light-dark(#ffdad6, #93000a);--mat-sys-inverse-on-surface: light-dark(#eff1f0, #2d3131);--mat-sys-inverse-primary: light-dark(#00dddd, #006a6a);--mat-sys-inverse-surface: light-dark(#2d3131, #e0e3e2);--mat-sys-on-background: light-dark(#191c1c, #e0e3e2);--mat-sys-on-error: light-dark(#ffffff, #690005);--mat-sys-on-error-container: light-dark(#93000a, #ffdad6);--mat-sys-on-primary: light-dark(#ffffff, #003737);--mat-sys-on-primary-container: light-dark(#004f4f, #00fbfb);--mat-sys-on-primary-fixed: light-dark(#002020, #002020);--mat-sys-on-primary-fixed-variant: light-dark(#004f4f, #004f4f);--mat-sys-on-secondary: light-dark(#ffffff, #1b3534);--mat-sys-on-secondary-container: light-dark(#324b4b, #cce8e7);--mat-sys-on-secondary-fixed: light-dark(#051f1f, #051f1f);--mat-sys-on-secondary-fixed-variant: light-dark(#324b4b, #324b4b);--mat-sys-on-surface: light-dark(#191c1c, #e0e3e2);--mat-sys-on-surface-variant: light-dark(#3f4948, #dae5e4);--mat-sys-on-tertiary: light-dark(#ffffff, #003737);--mat-sys-on-tertiary-container: light-dark(#004f4f, #00fbfb);--mat-sys-on-tertiary-fixed: light-dark(#002020, #002020);--mat-sys-on-tertiary-fixed-variant: light-dark(#004f4f, #004f4f);--mat-sys-outline: light-dark(#6f7979, #889392);--mat-sys-outline-variant: light-dark(#bec9c8, #3f4948);--mat-sys-primary: light-dark(#006a6a, #00dddd);--mat-sys-primary-container: light-dark(#00fbfb, #004f4f);--mat-sys-primary-fixed: light-dark(#00fbfb, #00fbfb);--mat-sys-primary-fixed-dim: light-dark(#00dddd, #00dddd);--mat-sys-scrim: light-dark(#000000, #000000);--mat-sys-secondary: light-dark(#4a6363, #b0cccb);--mat-sys-secondary-container: light-dark(#cce8e7, #324b4b);--mat-sys-secondary-fixed: light-dark(#cce8e7, #cce8e7);--mat-sys-secondary-fixed-dim: light-dark(#b0cccb, #b0cccb);--mat-sys-shadow: light-dark(#000000, #000000);--mat-sys-surface: light-dark(#f7faf9, #101414);--mat-sys-surface-bright: light-dark(#f7faf9, #363a39);--mat-sys-surface-container: light-dark(#ebefed, #1c2020);--mat-sys-surface-container-high: light-dark(#e6e9e7, #272b2a);--mat-sys-surface-container-highest: light-dark(#e0e3e2, #313635);--mat-sys-surface-container-low: light-dark(#f1f4f3, #191c1c);--mat-sys-surface-container-lowest: light-dark(#ffffff, #0b0f0e);--mat-sys-surface-dim: light-dark(#d7dbd9, #101414);--mat-sys-surface-tint: light-dark(#006a6a, #00dddd);--mat-sys-surface-variant: light-dark(#dae5e4, #3f4948);--mat-sys-tertiary: light-dark(#006a6a, #00dddd);--mat-sys-tertiary-container: light-dark(#00fbfb, #004f4f);--mat-sys-tertiary-fixed: light-dark(#00fbfb, #00fbfb);--mat-sys-tertiary-fixed-dim: light-dark(#00dddd, #00dddd);--mat-sys-neutral-variant20: #293232;--mat-sys-neutral10: #191c1c;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--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: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}[color=no-theme]{--mat-button-filled-container-shape: 9999px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-icon-offset: -8px;--mat-button-filled-icon-spacing: 8px;--mat-button-filled-touch-target-size: 48px;--mat-button-outlined-container-shape: 9999px;--mat-button-outlined-horizontal-padding: 24px;--mat-button-outlined-icon-offset: -8px;--mat-button-outlined-icon-spacing: 8px;--mat-button-outlined-outline-width: 1px;--mat-button-outlined-touch-target-size: 48px;--mat-button-protected-container-shape: 9999px;--mat-button-protected-horizontal-padding: 24px;--mat-button-protected-icon-offset: -8px;--mat-button-protected-icon-spacing: 8px;--mat-button-protected-touch-target-size: 48px;--mat-button-text-container-shape: 9999px;--mat-button-text-horizontal-padding: 12px;--mat-button-text-icon-offset: -4px;--mat-button-text-icon-spacing: 8px;--mat-button-text-with-icon-horizontal-padding: 16px;--mat-button-text-touch-target-size: 48px;--mat-button-tonal-container-shape: 9999px;--mat-button-tonal-horizontal-padding: 24px;--mat-button-tonal-icon-offset: -8px;--mat-button-tonal-icon-spacing: 8px;--mat-button-tonal-touch-target-size: 48px;--mat-button-filled-container-color: #006a6a;--mat-button-filled-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-filled-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-filled-disabled-state-layer-color: #3f4948;--mat-button-filled-focus-state-layer-opacity: .12;--mat-button-filled-hover-state-layer-opacity: .08;--mat-button-filled-label-text-color: #ffffff;--mat-button-filled-pressed-state-layer-opacity: .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, #191c1c 38%, transparent);--mat-button-outlined-disabled-outline-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-outlined-disabled-state-layer-color: #3f4948;--mat-button-outlined-focus-state-layer-opacity: .12;--mat-button-outlined-hover-state-layer-opacity: .08;--mat-button-outlined-label-text-color: #006a6a;--mat-button-outlined-outline-color: #6f7979;--mat-button-outlined-pressed-state-layer-opacity: .12;--mat-button-outlined-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-outlined-state-layer-color: #006a6a;--mat-button-protected-container-color: #f7faf9;--mat-button-protected-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-protected-disabled-state-layer-color: #3f4948;--mat-button-protected-focus-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-focus-state-layer-opacity: .12;--mat-button-protected-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-button-protected-hover-state-layer-opacity: .08;--mat-button-protected-label-text-color: #006a6a;--mat-button-protected-pressed-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-pressed-state-layer-opacity: .12;--mat-button-protected-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-protected-state-layer-color: #006a6a;--mat-button-text-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-text-disabled-state-layer-color: #3f4948;--mat-button-text-focus-state-layer-opacity: .12;--mat-button-text-hover-state-layer-opacity: .08;--mat-button-text-label-text-color: #006a6a;--mat-button-text-pressed-state-layer-opacity: .12;--mat-button-text-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-text-state-layer-color: #006a6a;--mat-button-tonal-container-color: #00fbfb;--mat-button-tonal-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-tonal-disabled-state-layer-color: #3f4948;--mat-button-tonal-focus-state-layer-opacity: .12;--mat-button-tonal-hover-state-layer-opacity: .08;--mat-button-tonal-label-text-color: #004f4f;--mat-button-tonal-pressed-state-layer-opacity: .12;--mat-button-tonal-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-button-tonal-state-layer-color: #004f4f;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 40px;--mat-button-outlined-container-height: 40px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 40px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 40px;--mat-button-tonal-container-height: 40px;--mat-button-tonal-touch-target-display: block;--mat-button-filled-label-text-font: Roboto, sans-serif;--mat-button-filled-label-text-size: .875rem;--mat-button-filled-label-text-tracking: .006rem;--mat-button-filled-label-text-weight: 500;--mat-button-outlined-label-text-font: Roboto, sans-serif;--mat-button-outlined-label-text-size: .875rem;--mat-button-outlined-label-text-tracking: .006rem;--mat-button-outlined-label-text-weight: 500;--mat-button-protected-label-text-font: Roboto, sans-serif;--mat-button-protected-label-text-size: .875rem;--mat-button-protected-label-text-tracking: .006rem;--mat-button-protected-label-text-weight: 500;--mat-button-text-label-text-font: Roboto, sans-serif;--mat-button-text-label-text-size: .875rem;--mat-button-text-label-text-tracking: .006rem;--mat-button-text-label-text-weight: 500;--mat-button-tonal-label-text-font: Roboto, sans-serif;--mat-button-tonal-label-text-size: .875rem;--mat-button-tonal-label-text-tracking: .006rem;--mat-button-tonal-label-text-weight: 500;--mat-icon-button-icon-size: 24px;--mat-icon-button-container-shape: 9999px;--mat-icon-button-touch-target-size: 48px;--mat-icon-button-disabled-icon-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-icon-button-disabled-state-layer-color: #006a6a;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-hover-state-layer-opacity: .08;--mat-icon-button-icon-color: #006a6a;--mat-icon-button-pressed-state-layer-opacity: .12;--mat-icon-button-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-icon-button-state-layer-color: #006a6a;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 40px;--mat-fab-container-shape: 16px;--mat-fab-extended-container-height: 56px;--mat-fab-extended-container-shape: 16px;--mat-fab-small-container-shape: 12px;--mat-fab-touch-target-size: 48px;--mat-fab-small-touch-target-size: 48px;--mat-fab-container-color: #00fbfb;--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(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, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-focus-state-layer-opacity: .12;--mat-fab-foreground-color: #004f4f;--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-hover-state-layer-opacity: .08;--mat-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-fab-small-container-color: #00fbfb;--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-foreground-color: #004f4f;--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-small-hover-state-layer-opacity: .08;--mat-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-fab-small-state-layer-color: #004f4f;--mat-fab-state-layer-color: #004f4f;--mat-fab-touch-target-display: block;--mat-fab-extended-label-text-font: Roboto, sans-serif;--mat-fab-extended-label-text-size: .875rem;--mat-fab-extended-label-text-tracking: .006rem;--mat-fab-extended-label-text-weight: 500;color:#000!important}[color=primary]{--mat-button-filled-container-shape: 9999px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-icon-offset: -8px;--mat-button-filled-icon-spacing: 8px;--mat-button-filled-touch-target-size: 48px;--mat-button-outlined-container-shape: 9999px;--mat-button-outlined-horizontal-padding: 24px;--mat-button-outlined-icon-offset: -8px;--mat-button-outlined-icon-spacing: 8px;--mat-button-outlined-outline-width: 1px;--mat-button-outlined-touch-target-size: 48px;--mat-button-protected-container-shape: 9999px;--mat-button-protected-horizontal-padding: 24px;--mat-button-protected-icon-offset: -8px;--mat-button-protected-icon-spacing: 8px;--mat-button-protected-touch-target-size: 48px;--mat-button-text-container-shape: 9999px;--mat-button-text-horizontal-padding: 12px;--mat-button-text-icon-offset: -4px;--mat-button-text-icon-spacing: 8px;--mat-button-text-with-icon-horizontal-padding: 16px;--mat-button-text-touch-target-size: 48px;--mat-button-tonal-container-shape: 9999px;--mat-button-tonal-horizontal-padding: 24px;--mat-button-tonal-icon-offset: -8px;--mat-button-tonal-icon-spacing: 8px;--mat-button-tonal-touch-target-size: 48px;--mat-button-filled-container-color: #006a6a;--mat-button-filled-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-filled-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-filled-disabled-state-layer-color: #3f4948;--mat-button-filled-focus-state-layer-opacity: .12;--mat-button-filled-hover-state-layer-opacity: .08;--mat-button-filled-label-text-color: #ffffff;--mat-button-filled-pressed-state-layer-opacity: .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, #191c1c 38%, transparent);--mat-button-outlined-disabled-outline-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-outlined-disabled-state-layer-color: #3f4948;--mat-button-outlined-focus-state-layer-opacity: .12;--mat-button-outlined-hover-state-layer-opacity: .08;--mat-button-outlined-label-text-color: #006a6a;--mat-button-outlined-outline-color: #6f7979;--mat-button-outlined-pressed-state-layer-opacity: .12;--mat-button-outlined-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-outlined-state-layer-color: #006a6a;--mat-button-protected-container-color: #f7faf9;--mat-button-protected-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-protected-disabled-state-layer-color: #3f4948;--mat-button-protected-focus-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-focus-state-layer-opacity: .12;--mat-button-protected-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-button-protected-hover-state-layer-opacity: .08;--mat-button-protected-label-text-color: #006a6a;--mat-button-protected-pressed-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-pressed-state-layer-opacity: .12;--mat-button-protected-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-protected-state-layer-color: #006a6a;--mat-button-text-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-text-disabled-state-layer-color: #3f4948;--mat-button-text-focus-state-layer-opacity: .12;--mat-button-text-hover-state-layer-opacity: .08;--mat-button-text-label-text-color: #006a6a;--mat-button-text-pressed-state-layer-opacity: .12;--mat-button-text-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-button-text-state-layer-color: #006a6a;--mat-button-tonal-container-color: #00fbfb;--mat-button-tonal-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-tonal-disabled-state-layer-color: #3f4948;--mat-button-tonal-focus-state-layer-opacity: .12;--mat-button-tonal-hover-state-layer-opacity: .08;--mat-button-tonal-label-text-color: #004f4f;--mat-button-tonal-pressed-state-layer-opacity: .12;--mat-button-tonal-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-button-tonal-state-layer-color: #004f4f;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 40px;--mat-button-outlined-container-height: 40px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 40px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 40px;--mat-button-tonal-container-height: 40px;--mat-button-tonal-touch-target-display: block;--mat-button-filled-label-text-font: Roboto, sans-serif;--mat-button-filled-label-text-size: .875rem;--mat-button-filled-label-text-tracking: .006rem;--mat-button-filled-label-text-weight: 500;--mat-button-outlined-label-text-font: Roboto, sans-serif;--mat-button-outlined-label-text-size: .875rem;--mat-button-outlined-label-text-tracking: .006rem;--mat-button-outlined-label-text-weight: 500;--mat-button-protected-label-text-font: Roboto, sans-serif;--mat-button-protected-label-text-size: .875rem;--mat-button-protected-label-text-tracking: .006rem;--mat-button-protected-label-text-weight: 500;--mat-button-text-label-text-font: Roboto, sans-serif;--mat-button-text-label-text-size: .875rem;--mat-button-text-label-text-tracking: .006rem;--mat-button-text-label-text-weight: 500;--mat-button-tonal-label-text-font: Roboto, sans-serif;--mat-button-tonal-label-text-size: .875rem;--mat-button-tonal-label-text-tracking: .006rem;--mat-button-tonal-label-text-weight: 500;--mat-icon-button-icon-size: 24px;--mat-icon-button-container-shape: 9999px;--mat-icon-button-touch-target-size: 48px;--mat-icon-button-disabled-icon-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-icon-button-disabled-state-layer-color: #006a6a;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-hover-state-layer-opacity: .08;--mat-icon-button-icon-color: #006a6a;--mat-icon-button-pressed-state-layer-opacity: .12;--mat-icon-button-ripple-color: color-mix(in srgb, #006a6a 12%, transparent);--mat-icon-button-state-layer-color: #006a6a;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 40px;--mat-fab-container-shape: 16px;--mat-fab-extended-container-height: 56px;--mat-fab-extended-container-shape: 16px;--mat-fab-small-container-shape: 12px;--mat-fab-touch-target-size: 48px;--mat-fab-small-touch-target-size: 48px;--mat-fab-container-color: #00fbfb;--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(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, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-focus-state-layer-opacity: .12;--mat-fab-foreground-color: #004f4f;--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-hover-state-layer-opacity: .08;--mat-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-fab-small-container-color: #00fbfb;--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-foreground-color: #004f4f;--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-small-hover-state-layer-opacity: .08;--mat-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-ripple-color: color-mix(in srgb, #004f4f 12%, transparent);--mat-fab-small-state-layer-color: #004f4f;--mat-fab-state-layer-color: #004f4f;--mat-fab-touch-target-display: block;--mat-fab-extended-label-text-font: Roboto, sans-serif;--mat-fab-extended-label-text-size: .875rem;--mat-fab-extended-label-text-tracking: .006rem;--mat-fab-extended-label-text-weight: 500}[color=accent]{--mat-button-filled-container-shape: 9999px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-icon-offset: -8px;--mat-button-filled-icon-spacing: 8px;--mat-button-filled-touch-target-size: 48px;--mat-button-outlined-container-shape: 9999px;--mat-button-outlined-horizontal-padding: 24px;--mat-button-outlined-icon-offset: -8px;--mat-button-outlined-icon-spacing: 8px;--mat-button-outlined-outline-width: 1px;--mat-button-outlined-touch-target-size: 48px;--mat-button-protected-container-shape: 9999px;--mat-button-protected-horizontal-padding: 24px;--mat-button-protected-icon-offset: -8px;--mat-button-protected-icon-spacing: 8px;--mat-button-protected-touch-target-size: 48px;--mat-button-text-container-shape: 9999px;--mat-button-text-horizontal-padding: 12px;--mat-button-text-icon-offset: -4px;--mat-button-text-icon-spacing: 8px;--mat-button-text-with-icon-horizontal-padding: 16px;--mat-button-text-touch-target-size: 48px;--mat-button-tonal-container-shape: 9999px;--mat-button-tonal-horizontal-padding: 24px;--mat-button-tonal-icon-offset: -8px;--mat-button-tonal-icon-spacing: 8px;--mat-button-tonal-touch-target-size: 48px;--mat-button-filled-container-color: #026e00;--mat-button-filled-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-filled-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-filled-disabled-state-layer-color: #3f4948;--mat-button-filled-focus-state-layer-opacity: .12;--mat-button-filled-hover-state-layer-opacity: .08;--mat-button-filled-label-text-color: #ffffff;--mat-button-filled-pressed-state-layer-opacity: .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, #191c1c 38%, transparent);--mat-button-outlined-disabled-outline-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-outlined-disabled-state-layer-color: #3f4948;--mat-button-outlined-focus-state-layer-opacity: .12;--mat-button-outlined-hover-state-layer-opacity: .08;--mat-button-outlined-label-text-color: #026e00;--mat-button-outlined-outline-color: #6f7979;--mat-button-outlined-pressed-state-layer-opacity: .12;--mat-button-outlined-ripple-color: color-mix(in srgb, #026e00 12%, transparent);--mat-button-outlined-state-layer-color: #026e00;--mat-button-protected-container-color: #f7faf9;--mat-button-protected-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-protected-disabled-state-layer-color: #3f4948;--mat-button-protected-focus-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-focus-state-layer-opacity: .12;--mat-button-protected-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-button-protected-hover-state-layer-opacity: .08;--mat-button-protected-label-text-color: #026e00;--mat-button-protected-pressed-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-pressed-state-layer-opacity: .12;--mat-button-protected-ripple-color: color-mix(in srgb, #026e00 12%, transparent);--mat-button-protected-state-layer-color: #026e00;--mat-button-text-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-text-disabled-state-layer-color: #3f4948;--mat-button-text-focus-state-layer-opacity: .12;--mat-button-text-hover-state-layer-opacity: .08;--mat-button-text-label-text-color: #026e00;--mat-button-text-pressed-state-layer-opacity: .12;--mat-button-text-ripple-color: color-mix(in srgb, #026e00 12%, transparent);--mat-button-text-state-layer-color: #026e00;--mat-button-tonal-container-color: #77ff61;--mat-button-tonal-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-tonal-disabled-state-layer-color: #3f4948;--mat-button-tonal-focus-state-layer-opacity: .12;--mat-button-tonal-hover-state-layer-opacity: .08;--mat-button-tonal-label-text-color: #015300;--mat-button-tonal-pressed-state-layer-opacity: .12;--mat-button-tonal-ripple-color: color-mix(in srgb, #015300 12%, transparent);--mat-button-tonal-state-layer-color: #015300;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 40px;--mat-button-outlined-container-height: 40px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 40px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 40px;--mat-button-tonal-container-height: 40px;--mat-button-tonal-touch-target-display: block;--mat-button-filled-label-text-font: Roboto, sans-serif;--mat-button-filled-label-text-size: .875rem;--mat-button-filled-label-text-tracking: .006rem;--mat-button-filled-label-text-weight: 500;--mat-button-outlined-label-text-font: Roboto, sans-serif;--mat-button-outlined-label-text-size: .875rem;--mat-button-outlined-label-text-tracking: .006rem;--mat-button-outlined-label-text-weight: 500;--mat-button-protected-label-text-font: Roboto, sans-serif;--mat-button-protected-label-text-size: .875rem;--mat-button-protected-label-text-tracking: .006rem;--mat-button-protected-label-text-weight: 500;--mat-button-text-label-text-font: Roboto, sans-serif;--mat-button-text-label-text-size: .875rem;--mat-button-text-label-text-tracking: .006rem;--mat-button-text-label-text-weight: 500;--mat-button-tonal-label-text-font: Roboto, sans-serif;--mat-button-tonal-label-text-size: .875rem;--mat-button-tonal-label-text-tracking: .006rem;--mat-button-tonal-label-text-weight: 500;--mat-icon-button-icon-size: 24px;--mat-icon-button-container-shape: 9999px;--mat-icon-button-touch-target-size: 48px;--mat-icon-button-disabled-icon-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-icon-button-disabled-state-layer-color: #026e00;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-hover-state-layer-opacity: .08;--mat-icon-button-icon-color: #026e00;--mat-icon-button-pressed-state-layer-opacity: .12;--mat-icon-button-ripple-color: color-mix(in srgb, #026e00 12%, transparent);--mat-icon-button-state-layer-color: #026e00;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 40px;--mat-fab-container-shape: 16px;--mat-fab-extended-container-height: 56px;--mat-fab-extended-container-shape: 16px;--mat-fab-small-container-shape: 12px;--mat-fab-touch-target-size: 48px;--mat-fab-small-touch-target-size: 48px;--mat-fab-container-color: #77ff61;--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(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, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-focus-state-layer-opacity: .12;--mat-fab-foreground-color: #015300;--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-hover-state-layer-opacity: .08;--mat-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-ripple-color: color-mix(in srgb, #015300 12%, transparent);--mat-fab-small-container-color: #77ff61;--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-foreground-color: #015300;--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-small-hover-state-layer-opacity: .08;--mat-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-ripple-color: color-mix(in srgb, #015300 12%, transparent);--mat-fab-small-state-layer-color: #015300;--mat-fab-state-layer-color: #015300;--mat-fab-touch-target-display: block;--mat-fab-extended-label-text-font: Roboto, sans-serif;--mat-fab-extended-label-text-size: .875rem;--mat-fab-extended-label-text-tracking: .006rem;--mat-fab-extended-label-text-weight: 500}[color=warn]{--mat-button-filled-container-shape: 9999px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-icon-offset: -8px;--mat-button-filled-icon-spacing: 8px;--mat-button-filled-touch-target-size: 48px;--mat-button-outlined-container-shape: 9999px;--mat-button-outlined-horizontal-padding: 24px;--mat-button-outlined-icon-offset: -8px;--mat-button-outlined-icon-spacing: 8px;--mat-button-outlined-outline-width: 1px;--mat-button-outlined-touch-target-size: 48px;--mat-button-protected-container-shape: 9999px;--mat-button-protected-horizontal-padding: 24px;--mat-button-protected-icon-offset: -8px;--mat-button-protected-icon-spacing: 8px;--mat-button-protected-touch-target-size: 48px;--mat-button-text-container-shape: 9999px;--mat-button-text-horizontal-padding: 12px;--mat-button-text-icon-offset: -4px;--mat-button-text-icon-spacing: 8px;--mat-button-text-with-icon-horizontal-padding: 16px;--mat-button-text-touch-target-size: 48px;--mat-button-tonal-container-shape: 9999px;--mat-button-tonal-horizontal-padding: 24px;--mat-button-tonal-icon-offset: -8px;--mat-button-tonal-icon-spacing: 8px;--mat-button-tonal-touch-target-size: 48px;--mat-button-filled-container-color: #ba1a1a;--mat-button-filled-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-filled-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-filled-disabled-state-layer-color: #3f4948;--mat-button-filled-focus-state-layer-opacity: .12;--mat-button-filled-hover-state-layer-opacity: .08;--mat-button-filled-label-text-color: #ffffff;--mat-button-filled-pressed-state-layer-opacity: .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, #191c1c 38%, transparent);--mat-button-outlined-disabled-outline-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-outlined-disabled-state-layer-color: #3f4948;--mat-button-outlined-focus-state-layer-opacity: .12;--mat-button-outlined-hover-state-layer-opacity: .08;--mat-button-outlined-label-text-color: #ba1a1a;--mat-button-outlined-outline-color: #6f7979;--mat-button-outlined-pressed-state-layer-opacity: .12;--mat-button-outlined-ripple-color: color-mix(in srgb, #ba1a1a 12%, transparent);--mat-button-outlined-state-layer-color: #ba1a1a;--mat-button-protected-container-color: #f7faf9;--mat-button-protected-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-button-protected-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-protected-disabled-state-layer-color: #3f4948;--mat-button-protected-focus-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-focus-state-layer-opacity: .12;--mat-button-protected-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-button-protected-hover-state-layer-opacity: .08;--mat-button-protected-label-text-color: #ba1a1a;--mat-button-protected-pressed-container-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-button-protected-pressed-state-layer-opacity: .12;--mat-button-protected-ripple-color: color-mix(in srgb, #ba1a1a 12%, transparent);--mat-button-protected-state-layer-color: #ba1a1a;--mat-button-text-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-text-disabled-state-layer-color: #3f4948;--mat-button-text-focus-state-layer-opacity: .12;--mat-button-text-hover-state-layer-opacity: .08;--mat-button-text-label-text-color: #ba1a1a;--mat-button-text-pressed-state-layer-opacity: .12;--mat-button-text-ripple-color: color-mix(in srgb, #ba1a1a 12%, transparent);--mat-button-text-state-layer-color: #ba1a1a;--mat-button-tonal-container-color: #ffdad6;--mat-button-tonal-disabled-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-button-tonal-disabled-state-layer-color: #3f4948;--mat-button-tonal-focus-state-layer-opacity: .12;--mat-button-tonal-hover-state-layer-opacity: .08;--mat-button-tonal-label-text-color: #93000a;--mat-button-tonal-pressed-state-layer-opacity: .12;--mat-button-tonal-ripple-color: color-mix(in srgb, #93000a 12%, transparent);--mat-button-tonal-state-layer-color: #93000a;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 40px;--mat-button-outlined-container-height: 40px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 40px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 40px;--mat-button-tonal-container-height: 40px;--mat-button-tonal-touch-target-display: block;--mat-button-filled-label-text-font: Roboto, sans-serif;--mat-button-filled-label-text-size: .875rem;--mat-button-filled-label-text-tracking: .006rem;--mat-button-filled-label-text-weight: 500;--mat-button-outlined-label-text-font: Roboto, sans-serif;--mat-button-outlined-label-text-size: .875rem;--mat-button-outlined-label-text-tracking: .006rem;--mat-button-outlined-label-text-weight: 500;--mat-button-protected-label-text-font: Roboto, sans-serif;--mat-button-protected-label-text-size: .875rem;--mat-button-protected-label-text-tracking: .006rem;--mat-button-protected-label-text-weight: 500;--mat-button-text-label-text-font: Roboto, sans-serif;--mat-button-text-label-text-size: .875rem;--mat-button-text-label-text-tracking: .006rem;--mat-button-text-label-text-weight: 500;--mat-button-tonal-label-text-font: Roboto, sans-serif;--mat-button-tonal-label-text-size: .875rem;--mat-button-tonal-label-text-tracking: .006rem;--mat-button-tonal-label-text-weight: 500;--mat-icon-button-icon-size: 24px;--mat-icon-button-container-shape: 9999px;--mat-icon-button-touch-target-size: 48px;--mat-icon-button-disabled-icon-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-icon-button-disabled-state-layer-color: #ba1a1a;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-hover-state-layer-opacity: .08;--mat-icon-button-icon-color: #ba1a1a;--mat-icon-button-pressed-state-layer-opacity: .12;--mat-icon-button-ripple-color: color-mix(in srgb, #ba1a1a 12%, transparent);--mat-icon-button-state-layer-color: #ba1a1a;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 40px;--mat-fab-container-shape: 16px;--mat-fab-extended-container-height: 56px;--mat-fab-extended-container-shape: 16px;--mat-fab-small-container-shape: 12px;--mat-fab-touch-target-size: 48px;--mat-fab-small-touch-target-size: 48px;--mat-fab-container-color: #ffdad6;--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(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, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-focus-state-layer-opacity: .12;--mat-fab-foreground-color: #93000a;--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-hover-state-layer-opacity: .08;--mat-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-ripple-color: color-mix(in srgb, #93000a 12%, transparent);--mat-fab-small-container-color: #ffdad6;--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-container-color: color-mix(in srgb, #191c1c 12%, transparent);--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, #191c1c 38%, transparent);--mat-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-foreground-color: #93000a;--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-fab-small-hover-state-layer-opacity: .08;--mat-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-ripple-color: color-mix(in srgb, #93000a 12%, transparent);--mat-fab-small-state-layer-color: #93000a;--mat-fab-state-layer-color: #93000a;--mat-fab-touch-target-display: block;--mat-fab-extended-label-text-font: Roboto, sans-serif;--mat-fab-extended-label-text-size: .875rem;--mat-fab-extended-label-text-tracking: .006rem;--mat-fab-extended-label-text-weight: 500}*>.container,*>.container-fluid{box-sizing:border-box}*>.container:before,*>.container:after,*>.container-fluid:before,*>.container-fluid:after{box-sizing:border-box}.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{display:table;content:" "}.container:after,.container-fluid:after,.row:after{clear:both}.container,.container-fluid{width:100%;padding-right:var(--bs-gutter-x, .75rem);padding-left:var(--bs-gutter-x, .75rem);margin-right:auto;margin-left:auto}.row{--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.row.no-padding [class*=col-]{padding:0}.col-0{width:0%!important}.col-2-5{width:2.5%!important}.col-5{width:5%!important}.col-7-5{width:7.5%!important}.col-10{width:10%!important}.col-12-5{width:12.5%!important}.col-15{width:15%!important}.col-17-5{width:17.5%!important}.col-20{width:20%!important}.col-22-5{width:22.5%!important}.col-25{width:25%!important}.col-27-5{width:27.5%!important}.col-30{width:30%!important}.col-32-5{width:32.5%!important}.col-35{width:35%!important}.col-37-5{width:37.5%!important}.col-40{width:40%!important}.col-42-5{width:42.5%!important}.col-45{width:45%!important}.col-47-5{width:47.5%!important}.col-50{width:50%!important}.col-52-5{width:52.5%!important}.col-55{width:55%!important}.col-57-5{width:57.5%!important}.col-60{width:60%!important}.col-62-5{width:62.5%!important}.col-65{width:65%!important}.col-67-5{width:67.5%!important}.col-70{width:70%!important}.col-72-5{width:72.5%!important}.col-75{width:75%!important}.col-77-5{width:77.5%!important}.col-80{width:80%!important}.col-82-5{width:82.5%!important}.col-85{width:85%!important}.col-87-5{width:87.5%!important}.col-90{width:90%!important}.col-92-5{width:92.5%!important}.col-95{width:95%!important}.col-97-5{width:97.5%!important}.col-100{width:100%!important}.col-bt-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-3{width:25%!important;flex:0 0 auto}.col-bt-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-6{width:50%!important;flex:0 0 auto}.col-bt-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-9{width:75%!important;flex:0 0 auto}.col-bt-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-12{width:100%!important;flex:0 0 auto}.d-none{display:none!important}.d-block{display:block!important}@media only screen and (min-width: 361px){.col-sm-0{width:0%!important}.col-sm-2-5{width:2.5%!important}.col-sm-5{width:5%!important}.col-sm-7-5{width:7.5%!important}.col-sm-10{width:10%!important}.col-sm-12-5{width:12.5%!important}.col-sm-15{width:15%!important}.col-sm-17-5{width:17.5%!important}.col-sm-20{width:20%!important}.col-sm-22-5{width:22.5%!important}.col-sm-25{width:25%!important}.col-sm-27-5{width:27.5%!important}.col-sm-30{width:30%!important}.col-sm-32-5{width:32.5%!important}.col-sm-35{width:35%!important}.col-sm-37-5{width:37.5%!important}.col-sm-40{width:40%!important}.col-sm-42-5{width:42.5%!important}.col-sm-45{width:45%!important}.col-sm-47-5{width:47.5%!important}.col-sm-50{width:50%!important}.col-sm-52-5{width:52.5%!important}.col-sm-55{width:55%!important}.col-sm-57-5{width:57.5%!important}.col-sm-60{width:60%!important}.col-sm-62-5{width:62.5%!important}.col-sm-65{width:65%!important}.col-sm-67-5{width:67.5%!important}.col-sm-70{width:70%!important}.col-sm-72-5{width:72.5%!important}.col-sm-75{width:75%!important}.col-sm-77-5{width:77.5%!important}.col-sm-80{width:80%!important}.col-sm-82-5{width:82.5%!important}.col-sm-85{width:85%!important}.col-sm-87-5{width:87.5%!important}.col-sm-90{width:90%!important}.col-sm-92-5{width:92.5%!important}.col-sm-95{width:95%!important}.col-sm-97-5{width:97.5%!important}.col-sm-100{width:100%!important}.col-bt-sm-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-sm-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-sm-3{width:25%!important;flex:0 0 auto}.col-bt-sm-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-sm-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-sm-6{width:50%!important;flex:0 0 auto}.col-bt-sm-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-sm-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-sm-9{width:75%!important;flex:0 0 auto}.col-bt-sm-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-sm-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-sm-12{width:100%!important;flex:0 0 auto}.d-sm-none{display:none!important}.d-sm-block{display:block!important}}@media only screen and (min-width: 641px){.col-md-0{width:0%!important}.col-md-2-5{width:2.5%!important}.col-md-5{width:5%!important}.col-md-7-5{width:7.5%!important}.col-md-10{width:10%!important}.col-md-12-5{width:12.5%!important}.col-md-15{width:15%!important}.col-md-17-5{width:17.5%!important}.col-md-20{width:20%!important}.col-md-22-5{width:22.5%!important}.col-md-25{width:25%!important}.col-md-27-5{width:27.5%!important}.col-md-30{width:30%!important}.col-md-32-5{width:32.5%!important}.col-md-35{width:35%!important}.col-md-37-5{width:37.5%!important}.col-md-40{width:40%!important}.col-md-42-5{width:42.5%!important}.col-md-45{width:45%!important}.col-md-47-5{width:47.5%!important}.col-md-50{width:50%!important}.col-md-52-5{width:52.5%!important}.col-md-55{width:55%!important}.col-md-57-5{width:57.5%!important}.col-md-60{width:60%!important}.col-md-62-5{width:62.5%!important}.col-md-65{width:65%!important}.col-md-67-5{width:67.5%!important}.col-md-70{width:70%!important}.col-md-72-5{width:72.5%!important}.col-md-75{width:75%!important}.col-md-77-5{width:77.5%!important}.col-md-80{width:80%!important}.col-md-82-5{width:82.5%!important}.col-md-85{width:85%!important}.col-md-87-5{width:87.5%!important}.col-md-90{width:90%!important}.col-md-92-5{width:92.5%!important}.col-md-95{width:95%!important}.col-md-97-5{width:97.5%!important}.col-md-100{width:100%!important}.col-bt-md-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-md-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-md-3{width:25%!important;flex:0 0 auto}.col-bt-md-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-md-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-md-6{width:50%!important;flex:0 0 auto}.col-bt-md-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-md-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-md-9{width:75%!important;flex:0 0 auto}.col-bt-md-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-md-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-md-12{width:100%!important;flex:0 0 auto}.d-md-none{display:none!important}.d-md-block{display:block!important}}@media only screen and (min-width: 721px){.col-lg-0{width:0%!important}.col-lg-2-5{width:2.5%!important}.col-lg-5{width:5%!important}.col-lg-7-5{width:7.5%!important}.col-lg-10{width:10%!important}.col-lg-12-5{width:12.5%!important}.col-lg-15{width:15%!important}.col-lg-17-5{width:17.5%!important}.col-lg-20{width:20%!important}.col-lg-22-5{width:22.5%!important}.col-lg-25{width:25%!important}.col-lg-27-5{width:27.5%!important}.col-lg-30{width:30%!important}.col-lg-32-5{width:32.5%!important}.col-lg-35{width:35%!important}.col-lg-37-5{width:37.5%!important}.col-lg-40{width:40%!important}.col-lg-42-5{width:42.5%!important}.col-lg-45{width:45%!important}.col-lg-47-5{width:47.5%!important}.col-lg-50{width:50%!important}.col-lg-52-5{width:52.5%!important}.col-lg-55{width:55%!important}.col-lg-57-5{width:57.5%!important}.col-lg-60{width:60%!important}.col-lg-62-5{width:62.5%!important}.col-lg-65{width:65%!important}.col-lg-67-5{width:67.5%!important}.col-lg-70{width:70%!important}.col-lg-72-5{width:72.5%!important}.col-lg-75{width:75%!important}.col-lg-77-5{width:77.5%!important}.col-lg-80{width:80%!important}.col-lg-82-5{width:82.5%!important}.col-lg-85{width:85%!important}.col-lg-87-5{width:87.5%!important}.col-lg-90{width:90%!important}.col-lg-92-5{width:92.5%!important}.col-lg-95{width:95%!important}.col-lg-97-5{width:97.5%!important}.col-lg-100{width:100%!important}.col-bt-lg-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-lg-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-lg-3{width:25%!important;flex:0 0 auto}.col-bt-lg-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-lg-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-lg-6{width:50%!important;flex:0 0 auto}.col-bt-lg-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-lg-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-lg-9{width:75%!important;flex:0 0 auto}.col-bt-lg-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-lg-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-lg-12{width:100%!important;flex:0 0 auto}.d-lg-none{display:none!important}.d-lg-block{display:block!important}}@media only screen and (min-width: 961px){.col-xl-0{width:0%!important}.col-xl-2-5{width:2.5%!important}.col-xl-5{width:5%!important}.col-xl-7-5{width:7.5%!important}.col-xl-10{width:10%!important}.col-xl-12-5{width:12.5%!important}.col-xl-15{width:15%!important}.col-xl-17-5{width:17.5%!important}.col-xl-20{width:20%!important}.col-xl-22-5{width:22.5%!important}.col-xl-25{width:25%!important}.col-xl-27-5{width:27.5%!important}.col-xl-30{width:30%!important}.col-xl-32-5{width:32.5%!important}.col-xl-35{width:35%!important}.col-xl-37-5{width:37.5%!important}.col-xl-40{width:40%!important}.col-xl-42-5{width:42.5%!important}.col-xl-45{width:45%!important}.col-xl-47-5{width:47.5%!important}.col-xl-50{width:50%!important}.col-xl-52-5{width:52.5%!important}.col-xl-55{width:55%!important}.col-xl-57-5{width:57.5%!important}.col-xl-60{width:60%!important}.col-xl-62-5{width:62.5%!important}.col-xl-65{width:65%!important}.col-xl-67-5{width:67.5%!important}.col-xl-70{width:70%!important}.col-xl-72-5{width:72.5%!important}.col-xl-75{width:75%!important}.col-xl-77-5{width:77.5%!important}.col-xl-80{width:80%!important}.col-xl-82-5{width:82.5%!important}.col-xl-85{width:85%!important}.col-xl-87-5{width:87.5%!important}.col-xl-90{width:90%!important}.col-xl-92-5{width:92.5%!important}.col-xl-95{width:95%!important}.col-xl-97-5{width:97.5%!important}.col-xl-100{width:100%!important}.col-bt-xl-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-xl-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-xl-3{width:25%!important;flex:0 0 auto}.col-bt-xl-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-xl-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-xl-6{width:50%!important;flex:0 0 auto}.col-bt-xl-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-xl-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-xl-9{width:75%!important;flex:0 0 auto}.col-bt-xl-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-xl-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-xl-12{width:100%!important;flex:0 0 auto}.d-xl-none{display:none!important}.d-xl-block{display:block!important}}@media only screen and (min-width: 1201px){.col-xxl-0{width:0%!important}.col-xxl-2-5{width:2.5%!important}.col-xxl-5{width:5%!important}.col-xxl-7-5{width:7.5%!important}.col-xxl-10{width:10%!important}.col-xxl-12-5{width:12.5%!important}.col-xxl-15{width:15%!important}.col-xxl-17-5{width:17.5%!important}.col-xxl-20{width:20%!important}.col-xxl-22-5{width:22.5%!important}.col-xxl-25{width:25%!important}.col-xxl-27-5{width:27.5%!important}.col-xxl-30{width:30%!important}.col-xxl-32-5{width:32.5%!important}.col-xxl-35{width:35%!important}.col-xxl-37-5{width:37.5%!important}.col-xxl-40{width:40%!important}.col-xxl-42-5{width:42.5%!important}.col-xxl-45{width:45%!important}.col-xxl-47-5{width:47.5%!important}.col-xxl-50{width:50%!important}.col-xxl-52-5{width:52.5%!important}.col-xxl-55{width:55%!important}.col-xxl-57-5{width:57.5%!important}.col-xxl-60{width:60%!important}.col-xxl-62-5{width:62.5%!important}.col-xxl-65{width:65%!important}.col-xxl-67-5{width:67.5%!important}.col-xxl-70{width:70%!important}.col-xxl-72-5{width:72.5%!important}.col-xxl-75{width:75%!important}.col-xxl-77-5{width:77.5%!important}.col-xxl-80{width:80%!important}.col-xxl-82-5{width:82.5%!important}.col-xxl-85{width:85%!important}.col-xxl-87-5{width:87.5%!important}.col-xxl-90{width:90%!important}.col-xxl-92-5{width:92.5%!important}.col-xxl-95{width:95%!important}.col-xxl-97-5{width:97.5%!important}.col-xxl-100{width:100%!important}.col-bt-xxl-1{width:8.33333333%!important;flex:0 0 auto}.col-bt-xxl-2{width:16.66666667%!important;flex:0 0 auto}.col-bt-xxl-3{width:25%!important;flex:0 0 auto}.col-bt-xxl-4{width:33.33333333%!important;flex:0 0 auto}.col-bt-xxl-5{width:41.66666667%!important;flex:0 0 auto}.col-bt-xxl-6{width:50%!important;flex:0 0 auto}.col-bt-xxl-7{width:58.33333333%!important;flex:0 0 auto}.col-bt-xxl-8{width:66.66666667%!important;flex:0 0 auto}.col-bt-xxl-9{width:75%!important;flex:0 0 auto}.col-bt-xxl-10{width:83.33333333%!important;flex:0 0 auto}.col-bt-xxl-11{width:91.66666667%!important;flex:0 0 auto}.col-bt-xxl-12{width:100%!important;flex:0 0 auto}.d-xxl-none{display:none!important}.d-xxl-block{display:block!important}}.mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper{height:48px!important}.mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:30px!important}.mdc-notched-outline:not(.mdc-notched-outline--notched) .mdc-notched-outline__leading,.mdc-notched-outline:not(.mdc-notched-outline--notched) .mdc-notched-outline__trailing,.mdc-notched-outline:not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{border-color:#b6b6b6!important}.mat-mdc-form-field-type-mat-select:not(.mat-focused) .mdc-notched-outline *{border-color:#b6b6b6!important}.mdc-text-field--filled,.mat-mdc-form-field-focus-overlay{background-color:transparent!important}.tak-custom-error{font-family:Roboto,Open Sans,Helvetica Neue,sans-serif;color:var(--tak-form-field-error-color)}.tak__date-not-input__field-container .mat-mdc-form-field{visibility:hidden;width:1px!important;font-size:1px!important}.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mat-mdc-floating-label,.tak-form-container .mat-form-field-invalid .mat-mdc-input-element{color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mdc-notched-outline__leading,.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mdc-notched-outline__trailing,.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mat-mdc-notch-piece.mdc-notched-outline__leading{border-left:1px solid var(--tak-form-field-error-color);border-top:1px solid var(--tak-form-field-error-color);border-bottom:1px solid var(--tak-form-field-error-color)}.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mat-mdc-notch-piece.mdc-notched-outline__notch{border-bottom:1px solid var(--tak-form-field-error-color)}.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mat-mdc-notch-piece.mdc-notched-outline__trailing{border-bottom:1px solid var(--tak-form-field-error-color);border-right:1px solid var(--tak-form-field-error-color);border-top:1px solid var(--tak-form-field-error-color)}.tak-form-container .mat-form-field-invalid .mdc-notched-outline .mat-mdc-notch-piece .mdc-floating-label--float-above{color:var(--tak-form-field-error-color)}.tak-form-container .mat-form-field-invalid .mdc-notched-outline:not(.mdc-notched-outline--notched) .mat-mdc-notch-piece.mdc-notched-outline__notch{border-top:1px solid var(--tak-form-field-error-color)}.tak-form-container .mat-form-field-invalid .tak-hint{color:var(--tak-form-field-error-color)!important}@keyframes takFadeIn{0%{opacity:0}to{opacity:1}}.tak-fade-in--300ms{animation:takFadeIn ease .3s;-webkit-animation:takFadeIn ease .3s;-moz-animation:takFadeIn ease .3s;-o-animation:takFadeIn ease .3s;-ms-animation:takFadeIn ease .3s}.tak-fade-in--500ms{animation:takFadeIn ease .5s;-webkit-animation:takFadeIn ease .5s;-moz-animation:takFadeIn ease .5s;-o-animation:takFadeIn ease .5s;-ms-animation:takFadeIn ease .5s}.tak-fade-in--800ms{animation:takFadeIn ease .8s;-webkit-animation:takFadeIn ease .8s;-moz-animation:takFadeIn ease .8s;-o-animation:takFadeIn ease .8s;-ms-animation:takFadeIn ease .8s}button[mat-button]{font-weight:bolder}.tak-simple-card{border-bottom:solid 1px var(--tak-card-border-color);border-right:solid 1px var(--tak-card-border-color);border-left:solid 1px var(--tak-card-border-color);box-shadow:var(--tak-card-box-shadow);background-color:var(--tak-card-background-color);border-radius:0 0 5px 5px;text-overflow:ellipsis;margin-bottom:10px;overflow:hidden;min-height:20px;padding:10px}.tak-simple-card--topline{border-right:solid 1px var(--tak-card-border-color);border-left:solid 1px var(--tak-card-border-color);border-top:solid 1px var(--tak-card-border-color);box-shadow:var(--tak-card-box-shadow);background-color:var(--tak-card-default-top-color);border-radius:5px 5px 0 0;padding:3px}.tak-simple-card.no-card-topline{border-radius:5px!important;border-top:1px solid var(--tak-card-border-color)!important}.tak-custom-checkbox .mat-mdc-checkbox{line-height:16px!important;margin-bottom:4px!important}.tak-custom-checkbox .mdc-checkbox{padding:4px!important;margin-top:-15px!important;margin-right:2px!important}.tak-modal__top-container--custom{padding:10px;display:flex;align-items:center;justify-content:space-between}.tak-modal__top-container--custom--title{font-family:Roboto,sans-serif;font-weight:400;font-size:20px}.mat-form-field-invalid.tak__date-not-input__picker-container .mat-datepicker-toggle>button{color:var(--tak-form-field-error-color)!important}.tak-custom-error{text-align:left;margin-left:5px;font-family:Roboto,Open Sans,Helvetica Neue,sans-serif;color:var(--tak-form-field-error-color);font-size:12px}.tak-hint{color:var(--tak-form-field-hint-color)}.tak__date-not-input input{display:none!important}.tak__date-not-input__picker-container{margin-top:5px}.tak__date-not-input__field-container{margin-top:-18px}.tak__date-not-input__field-container .mat-form-field{visibility:hidden;width:1px!important;font-size:1px!important}.tak-form-container mat-form-field{width:calc(100% - 10px)}.tak-form-container .money-input{font-weight:bolder!important}.tak-form-container .mat-form-field-invalid .mat-datepicker-toggle>button{color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before,.tak-form-container .mat-form-field-invalid .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .tak-hint,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix button,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mat-floating-label,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-floating-label:hover,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-form-field-icon-suffix,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-text-field,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-text-field__input,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-button-ripple{color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mat-mdc-text-field--filled:not(.mat-mdc-text-field--disabled) .mdc-line-ripple:before,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field--filled:not(.mat-mdc-text-field--disabled) .mdc-line-ripple:after,.tak-form-container .mat-form-field-invalid .mat-mdc-text-field--filled:not(.mat-mdc-text-field--disabled) .mdc-line-ripple:hover{border-bottom-color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mat-notched-outline__leading{border-color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mat-notched-outline__notch{border-top-color:var(--tak-form-field-error-color)!important;border-bottom-color:var(--tak-form-field-error-color)!important}.tak-form-container .mat-form-field-invalid .mat-notched-outline__trailing{border-color:var(--tak-form-field-error-color)!important}.tak-autocomplete-not-records{color:var(--tak-form-field-error-color)}.tak-option-span-extra{color:gray}.tak-option-span-extra:before{content:"\a";white-space:pre}.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label .mat-form-field-required-marker,.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label .tak-field__danger-x,.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label--float-above .mat-form-field-required-marker,.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label--float-above .tak-field__danger-x{color:var(--tak-form-field-error-color)!important}.tak__date-not-input__picker-container.mat-form-field-invalid .mat-datepicker-toggle .mat-icon-button{color:var(--tak-form-field-error-color)!important}mat-option{line-height:20px!important}mat-form-field{width:100%}.mat-option-text{font-size:14px}.mat-mdc-select-panel,.mat-mdc-autocomplete-panel,.mat-calendar{background-color:#fff!important}.mat-calendar{border:1px solid rgba(0,0,0,.12);border-radius:10px}.mat-mdc-select-panel .mat-mdc-option{height:30px!important;font-size:14px;line-height:17px;min-height:36px}.mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}.mat-mdc-option .mat-list-item__primary-text{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}.tak-pretty-box--header{width:100%;overflow:hidden;overflow-y:auto;border:1px solid var(--tak-pretty-box-border-color);border-bottom:0px transparent;border-top-left-radius:10px;border-top-right-radius:10px}.tak-pretty-box--scroll{width:100%;overflow:hidden;overflow-y:auto;border:1px solid var(--tak-pretty-box-border-color)}.tak-pretty-box--footer{width:100%;overflow:hidden;overflow-y:auto;border:1px solid var(--tak-pretty-box-border-color);border-top:0px transparent;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.tak-pretty-box-border-top{border-top-left-radius:10px;border-top-right-radius:10px}.tak-pretty-box-border-bottom{border-bottom-left-radius:10px;border-bottom-right-radius:10px}[tak-pretty-box-header],[tak-pretty-box-content],[tak-pretty-box-footer]{padding:0 10px;text-overflow:ellipsis;overflow:hidden}@media only screen and (min-width: 900px){.tak-admin-layout>.tak-container::-webkit-scrollbar,.tak-sidebar__container::-webkit-scrollbar,.tak-box-form__scroll::-webkit-scrollbar,.tak-table__content::-webkit-scrollbar,.tak-pretty-box--scroll::-webkit-scrollbar,.tak-pretty-box--header::-webkit-scrollbar,.tak-pretty-box--footer::-webkit-scrollbar,.mat-select-panel::-webkit-scrollbar,.mat-autocomplete-panel::-webkit-scrollbar,textarea::-webkit-scrollbar,.mat-dialog-content::-webkit-scrollbar{background-color:#c0c0c012;width:8px;height:8px}.tak-admin-layout>.tak-container::-webkit-scrollbar-thumb,.tak-sidebar__container::-webkit-scrollbar-thumb,.tak-box-form__scroll::-webkit-scrollbar-thumb,.tak-table__content::-webkit-scrollbar-thumb,.tak-pretty-box--scroll::-webkit-scrollbar-thumb,.tak-pretty-box--header::-webkit-scrollbar-thumb,.tak-pretty-box--footer::-webkit-scrollbar-thumb,.mat-select-panel::-webkit-scrollbar-thumb,.mat-autocomplete-panel::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb,.mat-dialog-content::-webkit-scrollbar-thumb{background-color:#c0c0c08f;border-radius:10px}}.tak-snackbar-success .mat-mdc-button:not(:disabled){color:var(--tak-snackbar-success-action-color)!important}.tak-snackbar-success .mat-mdc-snackbar-surface,.tak-snackbar-success .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label{color:var(--tak-snackbar-success-color)!important;background-color:var(--tak-snackbar-success-background-color)!important}.tak-snackbar-danger .mat-mdc-button:not(:disabled){color:var(--tak-snackbar-danger-action-color)!important}.tak-snackbar-danger .mat-mdc-snackbar-surface,.tak-snackbar-danger .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label{color:var(--tak-snackbar-danger-color)!important;background-color:var(--tak-snackbar-danger-background-color)!important}.tak-snackbar-notification .mat-mdc-snackbar-surface,.tak-snackbar-notification .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label{background-color:var(--tak-snackbar-notification-background-color)!important}.mat-tab-label.mat-tab-disabled{color:var(--tak-dark-color-700)!important}.tak-disabled-tab .mat-tab-group .mat-ink-bar,.mat-tab-group.not-ink-bar .mat-ink-bar{background-color:transparent!important}.cdk-overlay-dark-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.mat-menu-panel{color:var(--tak-layout-dark-color)}.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]),.mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]),.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:transparent}html{--tak-snackbar-notification-color: rgb(39, 39, 39);--tak-snackbar-notification-action-color: #004646;--tak-snackbar-notification-background-color: rgba(27, 27, 27, .925);--tak-snackbar-success-color: rgb(39, 39, 39);--tak-snackbar-success-action-color: #004646;--tak-snackbar-success-background-color: rgba(223, 246, 234, .925);--tak-snackbar-danger-color: rgb(39, 39, 39);--tak-snackbar-danger-action-color: #fd2626;--tak-snackbar-danger-background-color: rgba(255, 156, 156, .925);--tak-form-field-error-color: rgb(255, 0, 0);--tak-form-field-hint-color: rgb(128, 128, 128);--tak-box-form-title-color: rgb(10, 161, 174);--tak-box-form-subtitle-color: rgb(120, 203, 211);--tak-table-header-color: rgb(255, 255, 255);--tak-table-header-background-color: rgb(25, 27, 60);--tak-table-row-subcontent-color: rgb(128, 128, 128);--tak-table-selectable-hover-color: rgba(0, 0, 0, .12);--tak-table-container-box-shadow: rgba(50, 50, 93, .25) 0px 2px 5px -1px, rgba(0, 0, 0, .3) 0px 1px 3px -1px;--tak-table-container-border-color: none;--tak-paginator-container-background-color: rgb(255, 255, 255);--tak-paginator-range-label-color: rgb(128, 128, 128);--tak-pretty-box-border-color: rgba(0, 0, 0, .12);--tak-card-border-color: rgba(0, 0, 0, .12);--tak-card-box-shadow: rgba(50, 50, 93, .25) 0px 2px 5px -1px, rgba(0, 0, 0, .3) 0px 1px 3px -1px;--tak-card-background-color: rgb(255, 255, 255);--tak-card-default-top-color: rgb(10, 161, 174);--mat-select-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12)}body,.default-title-font,.default-body-font{font-family:Roboto,Helvetica Neue,sans-serif!important}body{font-family:Roboto,Helvetica Neue,sans-serif;min-height:100svh;min-width:100svw;-webkit-font-smoothing:antialiased;position:fixed;margin:0}body{font-family:Roboto,Helvetica Neue,sans-serif;min-height:100svh;min-width:100svw;-webkit-font-smoothing:antialiased;position:fixed}

package/assets/{themes/_default.scss → colors.scss}

@@ -16,17 +16,18 @@ html {
   --tak-table-header-background-color: rgb(25, 27, 60);
   --tak-table-row-subcontent-color: rgb(128, 128, 128);
   --tak-table-selectable-hover-color: rgba(0, 0, 0, 0.12);
-  --tak-table-container-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
-    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  --tak-table-container-box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   --tak-table-container-border-color: none;
   --tak-paginator-container-background-color: rgb(255, 255, 255);
   --tak-paginator-range-label-color: rgb(128, 128, 128);
   --tak-pretty-box-border-color: rgba(0, 0, 0, 0.12);
   --tak-card-border-color: rgba(0, 0, 0, 0.12);
-  --tak-card-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
-    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  --tak-card-box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   --tak-card-background-color: rgb(255, 255, 255);
   --tak-card-default-top-color: rgb(10, 161, 174);
-  --mat-select-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --mat-select-container-elevation-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }

package/assets/components/_checkbox.scss

@@ -0,0 +1,11 @@
+.tak-custom-checkbox {
+  .mat-mdc-checkbox {
+    line-height: 16px !important;
+    margin-bottom: 4px !important;
+  }
+  .mdc-checkbox {
+    padding: 4px !important;
+    margin-top: -15px !important;
+    margin-right: 2px !important;
+  }
+}

package/assets/components/_fields.scss

@@ -1,3 +1,10 @@
+.mat-form-field-invalid {
+  &.tak__date-not-input__picker-container {
+    .mat-datepicker-toggle > button {
+      color: var(--tak-form-field-error-color) !important;
+    }
+  }
+}
 .tak {
   &-custom-error {
     text-align: left;
@@ -33,27 +40,36 @@
     .money-input {
       font-weight: bolder !important;
     }
+
     .mat-form-field-invalid {
+      .mat-datepicker-toggle > button {
+        color: var(--tak-form-field-error-color) !important;
+      }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before,
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
+        border-bottom-color: var(--tak-form-field-error-color) !important;
+      }
       .tak-hint {
         color: var(--tak-form-field-error-color) !important;
       }
-      .mat-text-field-wrapper {
-        .mat-floating-label,
-        .mat-floating-label:hover,
-        .mat-form-field-icon-suffix,
-        .mat-text-field,
-        .mat-text-field__input,
-        .mat-button-ripple {
+      .mat-mdc-text-field-wrapper {
+        .mat-mdc-form-field-icon-suffix button {
           color: var(--tak-form-field-error-color) !important;
         }
-        & .mat-form-field-flex .mat-datepicker-toggle .mat-icon-button {
+
+        .mat-floating-label,
+        .mdc-floating-label:hover,
+        .mdc-form-field-icon-suffix,
+        .mdc-text-field,
+        .mdc-text-field__input,
+        .mdc-button-ripple {
           color: var(--tak-form-field-error-color) !important;
         }
       }
-      .mat-text-field--filled:not(.mat-text-field--disabled) {
-        .mat-line-ripple::before,
-        .mat-line-ripple::after,
-        .mat-line-ripple:hover {
+      .mat-mdc-text-field--filled:not(.mat-mdc-text-field--disabled) {
+        .mdc-line-ripple::before,
+        .mdc-line-ripple::after,
+        .mdc-line-ripple:hover {
           border-bottom-color: var(--tak-form-field-error-color) !important;
         }
       }
@@ -105,6 +121,30 @@ mat-form-field {
 .mat-option-text {
   font-size: 14px;
 }
-.mat-select-panel .mat-option {
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel,
+.mat-calendar {
+  background-color: white !important;
+}
+
+.mat-calendar {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 10px;
+}
+
+.mat-mdc-select-panel .mat-mdc-option {
   height: 30px !important;
+  font-size: 14px;
+  line-height: 17px;
+  min-height: 36px;
+}
+.mat-mdc-option {
+  .mat-pseudo-checkbox-minimal {
+    display: none !important;
+  }
+  .mat-list-item__primary-text {
+    white-space: nowrap !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

package/assets/components/_scroll-bar.scss

@@ -1,3 +1,11 @@
+$SM_RESOLUTION: 361px;
+$MD_RESOLUTION: 641px;
+$LG_RESOLUTION: 721px;
+$XL_RESOLUTION: 961px;
+$XXL_RESOLUTION: 1201px;
+
+$MOBILE_RESOLUTION: 900px;
+
 @media only screen and (min-width: calc($MOBILE_RESOLUTION)) {
   .tak-admin-layout > .tak-container,
   .tak-sidebar__container,

package/assets/components/_snack-bar.scss

@@ -1,17 +1,28 @@
-.tak-snackbar-notification {
-  background-color: var(--tak-snackbar-notification-background-color) !important;
+.tak-snackbar-success {
+  .mat-mdc-button:not(:disabled) {
+    color: var(--tak-snackbar-success-action-color) !important;
+  }
+  .mat-mdc-snackbar-surface,
+  .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label {
+    color: var(--tak-snackbar-success-color) !important;
+    background-color: var(--tak-snackbar-success-background-color) !important;
+  }
 }
+
 .tak-snackbar-danger {
-  .mat-button:not(:disabled) {
+  .mat-mdc-button:not(:disabled) {
     color: var(--tak-snackbar-danger-action-color) !important;
   }
-  color: var(--tak-snackbar-danger-color) !important;
-  background-color: var(--tak-snackbar-danger-background-color) !important;
+  .mat-mdc-snackbar-surface,
+  .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label {
+    color: var(--tak-snackbar-danger-color) !important;
+    background-color: var(--tak-snackbar-danger-background-color) !important;
+  }
 }
-.tak-snackbar-success {
-  .mat-button:not(:disabled) {
-    color: var(--tak-snackbar-success-action-color) !important;
+
+.tak-snackbar-notification {
+  .mat-mdc-snackbar-surface,
+  .tak-snackbar-notification .mat-mdc-snack-bar-label .mdc-snackbar__label {
+    background-color: var(--tak-snackbar-notification-background-color) !important;
   }
-  color: var(--tak-snackbar-success-color) !important;
-  background-color: var(--tak-snackbar-success-background-color) !important;
 }