@covalent/core 3.1.2 → 4.0.0-beta.2

package/breadcrumbs/breadcrumb/breadcrumb.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdBreadcrumbComponent implements AfterViewInit {
     private _elementRef;
     private _changeDetectorRef;
@@ -29,4 +30,6 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
      * Stop click propagation when clicking on icon
      */
     _handleIconClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdBreadcrumbComponent, "td-breadcrumb, a[td-breadcrumb]", never, {}, {}, never, ["*"]>;
 }

package/breadcrumbs/breadcrumb/breadcrumb.component.scss

@@ -7,14 +7,17 @@
     align-content: center;
     max-width: 100%;
     justify-content: flex-end;
+
     ::ng-deep > * {
       margin: 0 10px;
     }
   }
+
   .td-breadcrumb-separator-icon {
     display: inline-flex;
     vertical-align: middle;
   }
+
   &.mat-button {
     min-width: 0;
     padding: 0;

package/breadcrumbs/breadcrumbs.component.d.ts

@@ -1,5 +1,6 @@
 import { QueryList, OnInit, OnDestroy, AfterContentInit, DoCheck, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import * as i0 from "@angular/core";
 export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterContentInit, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
@@ -30,4 +31,6 @@ export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterCon
      */
     private setCrumbIcons;
     private _calculateVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdBreadcrumbsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdBreadcrumbsComponent, "td-breadcrumbs", never, { "separatorIcon": "separatorIcon"; }, {}, ["_breadcrumbs"], ["*"]>;
 }

package/breadcrumbs/breadcrumbs.component.scss

@@ -1,6 +1,7 @@
 :host {
   display: block;
   width: 100%;
+
   &.td-breadcrumbs {
     white-space: nowrap;
   }

package/breadcrumbs/breadcrumbs.module.d.ts

@@ -1,2 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumbs.component";
+import * as i2 from "./breadcrumb/breadcrumb.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/icon";
 export declare class CovalentBreadcrumbsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentBreadcrumbsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentBreadcrumbsModule, [typeof i1.TdBreadcrumbsComponent, typeof i2.TdBreadcrumbComponent], [typeof i3.CommonModule, typeof i4.MatIconModule], [typeof i1.TdBreadcrumbsComponent, typeof i2.TdBreadcrumbComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentBreadcrumbsModule>;
 }

package/breadcrumbs/covalent-core-breadcrumbs.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@covalent/core/breadcrumbs" />
 export * from './index';

package/breadcrumbs/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-breadcrumbs.umd.js",
-  "module": "../fesm2015/covalent-core-breadcrumbs.js",
-  "es2015": "../fesm2015/covalent-core-breadcrumbs.js",
-  "esm2015": "../esm2015/breadcrumbs/covalent-core-breadcrumbs.js",
-  "fesm2015": "../fesm2015/covalent-core-breadcrumbs.js",
+  "module": "../fesm2015/covalent-core-breadcrumbs.mjs",
+  "es2020": "../fesm2020/covalent-core-breadcrumbs.mjs",
+  "esm2020": "../esm2020/breadcrumbs/covalent-core-breadcrumbs.mjs",
+  "fesm2020": "../fesm2020/covalent-core-breadcrumbs.mjs",
+  "fesm2015": "../fesm2015/covalent-core-breadcrumbs.mjs",
   "typings": "covalent-core-breadcrumbs.d.ts",
-  "metadata": "covalent-core-breadcrumbs.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/breadcrumbs"
-}
+}

package/common/_common-theme.scss

@@ -9,11 +9,13 @@
   .mat-list-item-content {
     mat-icon {
       color: mat-color($foreground, icon);
+
       &[matListAvatar] {
         background-color: mat-color($background, hover);
       }
     }
   }
+
   .mat-list-text {
     p {
       color: mat-color($foreground, disabled);

package/common/common.module.d.ts

@@ -1,2 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./forms/auto-trim/auto-trim.directive";
+import * as i2 from "./directives/fullscreen/fullscreen.directive";
+import * as i3 from "./pipes/time-ago/time-ago.pipe";
+import * as i4 from "./pipes/time-difference/time-difference.pipe";
+import * as i5 from "./pipes/time-until/time-until.pipe";
+import * as i6 from "./pipes/bytes/bytes.pipe";
+import * as i7 from "./pipes/decimal-bytes/decimal-bytes.pipe";
+import * as i8 from "./pipes/digits/digits.pipe";
+import * as i9 from "./pipes/truncate/truncate.pipe";
+import * as i10 from "@angular/forms";
+import * as i11 from "@angular/common";
 export declare class CovalentCommonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentCommonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentCommonModule, [typeof i1.TdAutoTrimDirective, typeof i2.TdFullscreenDirective, typeof i3.TdTimeAgoPipe, typeof i4.TdTimeDifferencePipe, typeof i5.TdTimeUntilPipe, typeof i6.TdBytesPipe, typeof i7.TdDecimalBytesPipe, typeof i8.TdDigitsPipe, typeof i9.TdTruncatePipe], [typeof i10.FormsModule, typeof i11.CommonModule], [typeof i10.FormsModule, typeof i11.CommonModule, typeof i1.TdAutoTrimDirective, typeof i2.TdFullscreenDirective, typeof i3.TdTimeAgoPipe, typeof i4.TdTimeDifferencePipe, typeof i5.TdTimeUntilPipe, typeof i6.TdBytesPipe, typeof i7.TdDecimalBytesPipe, typeof i8.TdDigitsPipe, typeof i9.TdTruncatePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentCommonModule>;
 }

package/common/covalent-core-common.d.ts

@@ -1,6 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@covalent/core/common" />
 export * from './index';
-export { IconService as ɵb } from './services/icon.service';
-export { RouterPathService as ɵa } from './services/router-path.service';

package/common/directives/fullscreen/fullscreen.directive.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
 interface IFsDocument extends HTMLDocument {
     fullscreenElement: Element;
     webkitFullscreenElement: Element;
@@ -18,5 +19,7 @@ export declare class TdFullscreenDirective {
     enterFullScreen(): void;
     exitFullScreen(): void;
     private _getFullScreenElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdFullscreenDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdFullscreenDirective, "[tdFullScreen]", ["tdFullScreen"], {}, {}, never>;
 }
 export {};

package/common/forms/auto-trim/auto-trim.directive.d.ts

@@ -1,4 +1,5 @@
 import { NgModel } from '@angular/forms';
+import * as i0 from "@angular/core";
 export declare class TdAutoTrimDirective {
     private _model;
     constructor(_model: NgModel);
@@ -6,4 +7,6 @@ export declare class TdAutoTrimDirective {
      * Listens to host's (blur) event and trims value.
      */
     onBlur(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdAutoTrimDirective, [{ optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdAutoTrimDirective, "[tdAutoTrim]", never, {}, {}, never>;
 }

package/common/material-icons.css

@@ -17,17 +17,22 @@
     margin: 0;
     width: 100%;
     min-height: 100%;
-    height: 100%; } }
-
+    height: 100%;
+  }
+}
+/* stylelint-disable selector-class-pattern */
+/* stylelint-enable selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-enable selector-class-pattern */
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: url("styles/font/MaterialIcons-Regular-v48.woff2") format("woff2"); }
-
+  src: url("styles/font/MaterialIcons-Regular-v48.woff2") format("woff2");
+}
 .material-icons {
   /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -48,51 +53,59 @@
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
-  -webkit-font-feature-settings: 'liga';
-          font-feature-settings: 'liga'; }
+  font-feature-settings: "liga";
+}
 
 mat-icon.material-icons, mat-icon.material-icons.mat-icon {
   width: 1em;
-  height: 1em; }
+  height: 1em;
+}
 
 .material-icons.md-18,
 .material-icons.mat-18 {
   font-size: 18px;
   height: 18px;
-  width: 18px; }
+  width: 18px;
+}
 
 .material-icons.md-24,
 .material-icons.mat-24 {
   font-size: 24px;
   height: 24px;
-  width: 24px; }
+  width: 24px;
+}
 
 .material-icons.md-36,
 .material-icons.mat-36 {
   font-size: 36px;
   height: 36px;
-  width: 36px; }
+  width: 36px;
+}
 
 .material-icons.md-48,
 .material-icons.mat-48 {
   font-size: 48px;
   height: 48px;
-  width: 48px; }
+  width: 48px;
+}
 
 .material-icons.md-dark,
 .material-icons.mat-dark {
-  color: rgba(0, 0, 0, 0.54); }
+  color: rgba(0, 0, 0, 0.54);
+}
 
 .material-icons.md-dark.md-inactive,
 .material-icons.mat-dark.mat-inactive {
-  color: rgba(0, 0, 0, 0.26); }
+  color: rgba(0, 0, 0, 0.26);
+}
 
 .material-icons.md-light,
 .material-icons.mat-light {
-  color: white; }
+  color: white;
+}
 
 .material-icons.md-light.md-inactive,
 .material-icons.mat-light.mat-inactive {
-  color: rgba(255, 255, 255, 0.3); }
-
+  color: rgba(255, 255, 255, 0.3);
+}
 /*# sourceMappingURL=material-icons.css.map */

package/common/material-icons.css.map

@@ -1 +1 @@
-{"version":3,"sources":["common/styles/core/_button.scss","common/styles/_layout.scss","common/material-icons.css","common/styles/font/_font.scss"],"names":[],"mappings":"AAwBA,gGAAA;ACxBA,kEAAA;AAEA;;;;;;;;;;;CCWC;ADaD;ECXE;IDaE,SAAS;IACT,WAAW;IACX,gBAAgB;IAChB,YAAY,EAAA,EACb;;AE7BD;EACE,6BAA6B;EAC7B,kBAAkB;EAClB,gBAAgB;EAChB,uEAA2E,EAAA;;AAE7E;EACE,8EAAA;EACA,6BAA6B;EAC7B,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EAAE,wBAAA;EACjB,qBAAqB;EACrB,UAAU;EACV,WAAW;EACX,cAAc;EACd,oBAAoB;EACpB,sBAAsB;EACtB,iBAAiB;EACjB,mBAAmB;EACnB,cAAc;EAEd,qCAAA;EACA,mCAAmC;EAEnC,mCAAA;EACA,kCAAkC;EAElC,yBAAA;EACA,kCAAkC;EAElC,oBAAA;EACA,qCAA6B;UAA7B,6BAA6B,EAAA;;AAI/B;EAGI,UAAU;EACV,WAAW,EAAA;;AAKf;;EAEE,eAAe;EACf,YAAY;EACZ,WAAW,EAAA;;AAEb;;EAEE,eAAe;EACf,YAAY;EACZ,WAAW,EAAA;;AAEb;;EAEE,eAAe;EACf,YAAY;EACZ,WAAW,EAAA;;AAEb;;EAEE,eAAe;EACf,YAAY;EACZ,WAAW,EAAA;;AAIb;;EAEE,0BAA0B,EAAA;;AAE5B;;EAEE,0BAA0B,EAAA;;AAI5B;;EAEE,YAA6B,EAAA;;AAE/B;;EAEE,+BAA+B,EAAA","file":"material-icons.css","sourcesContent":["@import '../theme-functions';\n@import '../rtl';\n\n// Standard button sizing.\n$mat-button-padding: 0 rem(0.6) !default;\n$mat-button-min-width: rem(8.8) !default;\n$mat-button-margin: rem(0.6) rem(0.8) !default;\n$mat-button-line-height: rem(3.6) !default;\n$mat-button-border-radius: 3px !default;\n\n// FAB sizing.\n$mat-fab-border-radius: 50%;\n$mat-fab-size: rem(5.6) !default;\n$mat-fab-line-height: rem(5.6) !default;\n$mat-fab-padding: rem(1.6) !default;\n$mat-fab-mini-size: rem(4) !default;\n$mat-fab-mini-line-height: rem(4) !default;\n\n// Icon button sizing.\n$mat-icon-button-height: rem(4) !default;\n$mat-icon-button-width: rem(4) !default;\n$mat-icon-button-margin: rem(0.6) !default;\n$mat-icon-border-radius: $mat-fab-border-radius;\n\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {\n  [mat-fab].mat-fab-position-#{$spot},\n  .mat-fab.mat-fab-position-#{$spot},\n  [mat-fab].mat-fab-#{$spot},\n  .mat-fab.mat-fab-#{$spot} {\n    top: $top;\n    @include rtl(right, $right, $left);\n    @include rtl(left, $left, $right);\n\n    bottom: $bottom;\n    position: absolute;\n    &.fixed {\n      position: fixed;\n    }\n  }\n}\n\n@mixin td-button-utilities() {\n  $mat-fab-pos-offset: ($mat-fab-size - $mat-fab-padding) / 2;\n  @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);\n  @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);\n  @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);\n  @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);\n\n  button {\n    &[mat-icon-button] {\n      &.mat-icon-button-mini {\n        height: 24px;\n        line-height: 24px;\n        width: 24px;\n      }\n    }\n  }\n}\n","/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n\n/*\n*\n*  Responsive attributes\n*\n*  References:\n*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n*  2) https://css-tricks.com/almanac/properties/f/flex/\n*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n*  5) http://godban.com.ua/projects/flexgrid\n*\n*/\n\n// Layout\n// ------------------------------\n\n$baseline-grid: 8px !default;\n$layout-gutter-width: ($baseline-grid * 2) !default;\n\n$layout-breakpoint-xs: 600px !default;\n$layout-breakpoint-sm: 960px !default;\n$layout-breakpoint-md: 1280px !default;\n$layout-breakpoint-lg: 1920px !default;\n\n@-moz-document url-prefix() {\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n  }\n}\n\n@mixin flex-order-for-name($sizes: null) {\n  @if $sizes == null {\n    $sizes: '';\n\n    [flex-order] {\n      order: 0;\n    }\n  }\n\n  @for $i from -20 through 20 {\n    $order: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $order: '[flex-order#{$suffix}]';\n    }\n\n    #{$order} {\n      order: #{$i};\n    }\n  }\n}\n\n@mixin offset-for-name($sizes: null) {\n  @if $sizes == null {\n    $sizes: '';\n  }\n\n  @for $i from 0 through 19 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i * 5}\"';\n      } @else {\n        $suffix: '=\"#{$i * 5}\"';\n      }\n\n      $offsets: $offsets + '[flex-offset#{$suffix}], ';\n    }\n\n    #{$offsets} {\n      margin-left: #{$i * 5 + '%'};\n    }\n  }\n\n  @each $i in 33 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $offsets: '[flex-offset#{$suffix}], ';\n    }\n\n    #{$offsets} {\n      margin-left: calc(100% / 3);\n    }\n  }\n\n  @each $i in 66 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $offsets: '[flex-offset#{$suffix}]';\n    }\n\n    #{$offsets} {\n      margin-left: calc(200% / 3);\n    }\n  }\n}\n\n@mixin layout-for-name($name: null) {\n  @if $name == null {\n    $name: '';\n  }\n  @if $name != '' {\n    $name: '-#{$name}';\n  }\n\n  [layout#{$name}],\n  [layout#{$name}='column'],\n  [layout#{$name}='row'] {\n    box-sizing: border-box;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -moz-box;\n    display: -ms-flexbox;\n    display: flex;\n  }\n  [layout#{$name}='column'] {\n    flex-direction: column;\n  }\n  [layout#{$name}='row'] {\n    flex-direction: row;\n  }\n}\n\n@mixin flex-properties-for-name($name: null) {\n  $flexName: 'flex';\n  @if $name != null {\n    $flexName: 'flex-#{$name}';\n    $name: '-#{$name}';\n  } @else {\n    $name: '';\n  }\n\n  [#{$flexName}] {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  // === flex: 1 1 0%;\n\n  // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values\n  // Details:\n  // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.\n  // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).\n  // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px\n  @media screen\\0 {\n    [#{$flexName}] {\n      flex: 1 1 0%;\n    }\n  }\n\n  [#{$flexName}='grow'],\n  [#{$flexName}-grow] {\n    flex: 1 1 100%;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='initial'],\n  [#{$flexName}-initial] {\n    flex: 0 1 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='auto'],\n  [#{$flexName}-auto] {\n    flex: 1 1 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='none'],\n  [#{$flexName}-none] {\n    flex: 0 0 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='noshrink'],\n  [#{$flexName}-noshrink] {\n    flex: 1 0 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='nogrow'],\n  [#{$flexName}-nogrow] {\n    flex: 0 1 auto;\n    box-sizing: border-box;\n  }\n\n  // (1-20) * 5 = 0-100%\n  @for $i from 0 through 20 {\n    $value: #{$i * 5 + '%'};\n\n    [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: #{$value};\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n\n    [layout='row'] > [#{$flexName}='#{$i * 5}'],\n    [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: #{$value};\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n\n    [layout='column'] > [#{$flexName}='#{$i * 5}'],\n    [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: 100%;\n      max-height: #{$value};\n      box-sizing: border-box;\n    }\n  }\n\n  [layout='row'],\n  [layout#{$name}='row'] {\n    > [#{$flexName}='33'],\n    > [#{$flexName}='33'] {\n      flex: 1 1 33%;\n      max-width: calc(100% / 3);\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='34'],\n    > [#{$flexName}='34'] {\n      flex: 1 1 34%;\n      max-width: 34%;\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='66'],\n    > [#{$flexName}='66'] {\n      flex: 1 1 66%;\n      max-width: calc(200% / 3);\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='67'],\n    > [#{$flexName}='67'] {\n      flex: 1 1 67%;\n      max-width: 67%;\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n  }\n  [layout='column'],\n  [layout#{$name}='column'] {\n    > [#{$flexName}='33'],\n    > [#{$flexName}='33'] {\n      flex: 1 1 33%;\n      max-width: 100%;\n      max-height: calc(100% / 3);\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='34'],\n    > [#{$flexName}='34'] {\n      flex: 1 1 34%;\n      max-width: 100%;\n      max-height: 34%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='66'],\n    > [#{$flexName}='66'] {\n      flex: 1 1 66%;\n      max-width: 100%;\n      max-height: calc(200% / 3);\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='67'],\n    > [#{$flexName}='67'] {\n      flex: 1 1 67%;\n      max-width: 100%;\n      max-height: 67%;\n      box-sizing: border-box;\n    }\n  }\n}\n\n@mixin layout-align-for-name($suffix: null) {\n  // Alignment attributes for layout containers' children\n  // Arrange on the Main Axis\n  // center, start, end, space-between, space-around\n  // flex-start is the default for justify-content\n  // ------------------------------\n\n  $name: 'layout-align';\n  @if $suffix != null {\n    $name: 'layout-align-#{$suffix}';\n  }\n\n  [#{$name}],\n  [#{$name}=\"start stretch\"] // defaults\n  {\n    justify-content: flex-start;\n    align-content: stretch;\n    align-items: stretch;\n  }\n  // Main Axis Center\n  [#{$name}='start'],\n  [#{$name}='start start'],\n  [#{$name}='start center'],\n  [#{$name}='start end'],\n  [#{$name}='start stretch'] {\n    justify-content: flex-start;\n  }\n\n  // Main Axis Center\n  [#{$name}='center'],\n  [#{$name}='center start'],\n  [#{$name}='center center'],\n  [#{$name}='center end'],\n  [#{$name}='center stretch'] {\n    justify-content: center;\n  }\n\n  // Main Axis End\n  [#{$name}=\"end\"], //stretch\n  [#{$name}=\"end center\"],\n  [#{$name}=\"end start\"],\n  [#{$name}=\"end end\"],\n  [#{$name}=\"end stretch\"] {\n    justify-content: flex-end;\n  }\n\n  // Main Axis Space Around\n  [#{$name}=\"space-around\"], //stretch\n  [#{$name}=\"space-around center\"],\n  [#{$name}=\"space-around start\"],\n  [#{$name}=\"space-around end\"],\n  [#{$name}=\"space-around stretch\"] {\n    justify-content: space-around;\n  }\n\n  // Main Axis Space Between\n  [#{$name}=\"space-between\"], //stretch\n  [#{$name}=\"space-between center\"],\n  [#{$name}=\"space-between start\"],\n  [#{$name}=\"space-between end\"],\n  [#{$name}=\"space-between stretch\"] {\n    justify-content: space-between;\n  }\n\n  // Arrange on the Cross Axis\n  // center, start, end\n  // stretch is the default for align-items\n  // ------------------------------\n\n  // Cross Axis Start\n  [#{$name}='start start'],\n  [#{$name}='center start'],\n  [#{$name}='end start'],\n  [#{$name}='space-between start'],\n  [#{$name}='space-around start'] {\n    align-items: flex-start;\n    align-content: flex-start;\n  }\n\n  // Cross Axis Center\n  [#{$name}='start center'],\n  [#{$name}='center center'],\n  [#{$name}='end center'],\n  [#{$name}='space-between center'],\n  [#{$name}='space-around center'] {\n    align-items: center;\n    align-content: center;\n    max-width: 100%;\n\n    // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container\n    & > * {\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n  }\n\n  // Cross Axis Center IE overflow fix\n  [#{$name}='start center'] > *,\n  [#{$name}='center center'] > *,\n  [#{$name}='end center'] > *,\n  [#{$name}='space-between center'] > *,\n  [#{$name}='space-around center'] > * {\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  // Cross Axis End\n  [#{$name}='start end'],\n  [#{$name}='center end'],\n  [#{$name}='end end'],\n  [#{$name}='space-between end'],\n  [#{$name}='space-around end'] {\n    align-items: flex-end;\n    align-content: flex-end;\n  }\n\n  // Cross Axis  stretch\n  [#{$name}='start stretch'],\n  [#{$name}='center stretch'],\n  [#{$name}='end stretch'],\n  [#{$name}='space-between stretch'],\n  [#{$name}='space-around stretch'] {\n    align-items: stretch;\n    align-content: stretch;\n  }\n}\n\n@mixin layout-padding-margin() {\n  [layout-padding] > [flex-sm],\n  [layout-padding] > [flex-lt-md] {\n    padding: $layout-gutter-width / 4;\n  }\n  [layout-padding],\n  [layout-padding] > [flex],\n  [layout-padding] > [flex-gt-sm],\n  [layout-padding] > [flex-md],\n  [layout-padding] > [flex-lt-lg] {\n    padding: $layout-gutter-width / 2;\n  }\n  [layout-padding] > [flex-gt-md],\n  [layout-padding] > [flex-lg] {\n    padding: $layout-gutter-width / 1;\n  }\n\n  [layout-margin] > [flex-sm],\n  [layout-margin] > [flex-lt-md] {\n    margin: $layout-gutter-width / 4;\n  }\n\n  [layout-margin],\n  [layout-margin] > [flex],\n  [layout-margin] > [flex-gt-sm],\n  [layout-margin] > [flex-md],\n  [layout-margin] > [flex-lt-lg] {\n    margin: $layout-gutter-width / 2;\n  }\n\n  [layout-margin] > [flex-gt-md],\n  [layout-margin] > [flex-lg] {\n    margin: $layout-gutter-width / 1;\n  }\n\n  [layout-wrap] {\n    flex-wrap: wrap;\n  }\n\n  [layout-nowrap] {\n    flex-wrap: nowrap;\n  }\n\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n  }\n}\n\n@mixin layouts_for_breakpoint($name: null) {\n  @include flex-order-for-name($name);\n  @include offset-for-name($name);\n  @include layout-align-for-name($name);\n\n  @include flex-properties-for-name($name);\n  @include layout-for-name($name);\n}\n\n@mixin covalent-layout() {\n  /*\n  *  Apply Mixins to create Layout/Flexbox styles\n  *\n  */\n\n  @include layouts_for_breakpoint();\n  @include layout-padding-margin();\n\n  /**\n  * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px\n  * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px\n  * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`\n  *\n  *  hide means hide everywhere\n  *  Sizes:\n  *         $layout-breakpoint-xs:     600px !default;\n  *         $layout-breakpoint-sm:     960px !default;\n  *         $layout-breakpoint-md:     1280px !default;\n  *         $layout-breakpoint-lg:     1920px !default;\n  */\n\n  @media (max-width: $layout-breakpoint-xs - 1) {\n    // Xtra-SMALL  SCREEN\n    [hide-xs],\n    [hide] {\n      &:not([show-xs]):not([show]) {\n        display: none;\n      }\n    }\n    @include layouts_for_breakpoint(xs);\n  }\n\n  @media (min-width: $layout-breakpoint-xs) {\n    // BIGGER THAN Xtra-SMALL SCREEN\n    @include layouts_for_breakpoint(gt-xs);\n  }\n\n  @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {\n    // SMALL SCREEN\n    [hide-sm],\n    [hide-gt-xs] {\n      &:not([show-gt-xs]):not([show-sm]):not([show]) {\n        display: none;\n      }\n    }\n    [hide-sm]:not([show-sm]):not([show]) {\n      display: none;\n    }\n    @include layouts_for_breakpoint(sm);\n  }\n\n  @media (min-width: $layout-breakpoint-sm) {\n    // BIGGER THAN SMALL SCREEN\n    @include layouts_for_breakpoint(gt-sm);\n  }\n\n  @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {\n    // MEDIUM SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {\n        display: none;\n      }\n    }\n    [hide-md]:not([show-md]):not([show]) {\n      display: none;\n    }\n    @include layouts_for_breakpoint(md);\n  }\n\n  @media (min-width: $layout-breakpoint-md) {\n    // BIGGER THAN MEDIUM SCREEN\n    @include layouts_for_breakpoint(gt-md);\n  }\n\n  @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {\n    // LARGE SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm],\n    [hide-gt-md] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {\n        display: none;\n      }\n    }\n    [hide-lg]:not([show-lg]):not([show]) {\n      display: none;\n    }\n\n    @include layouts_for_breakpoint(lg);\n  }\n\n  @media (min-width: $layout-breakpoint-lg) {\n    // BIGGER THAN LARGE SCREEN\n    @include layouts_for_breakpoint(gt-lg);\n    @include layouts_for_breakpoint(xl);\n\n    // BIGGER THAN LARGE SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm],\n    [hide-gt-md],\n    [hide-gt-lg] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {\n        display: none;\n      }\n    }\n    [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {\n      display: none;\n    }\n  }\n}\n","/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n/*\n*\n*  Responsive attributes\n*\n*  References:\n*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n*  2) https://css-tricks.com/almanac/properties/f/flex/\n*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n*  5) http://godban.com.ua/projects/flexgrid\n*\n*/\n@-moz-document url-prefix() {\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%; } }\n\n@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: url(\"styles/font/MaterialIcons-Regular-v48.woff2\") format(\"woff2\"); }\n\n.material-icons {\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  /* Preferred icon size */\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n  /* Support for IE. */\n  font-feature-settings: 'liga'; }\n\nmat-icon.material-icons, mat-icon.material-icons.mat-icon {\n  width: 1em;\n  height: 1em; }\n\n.material-icons.md-18,\n.material-icons.mat-18 {\n  font-size: 18px;\n  height: 18px;\n  width: 18px; }\n\n.material-icons.md-24,\n.material-icons.mat-24 {\n  font-size: 24px;\n  height: 24px;\n  width: 24px; }\n\n.material-icons.md-36,\n.material-icons.mat-36 {\n  font-size: 36px;\n  height: 36px;\n  width: 36px; }\n\n.material-icons.md-48,\n.material-icons.mat-48 {\n  font-size: 48px;\n  height: 48px;\n  width: 48px; }\n\n.material-icons.md-dark,\n.material-icons.mat-dark {\n  color: rgba(0, 0, 0, 0.54); }\n\n.material-icons.md-dark.md-inactive,\n.material-icons.mat-dark.mat-inactive {\n  color: rgba(0, 0, 0, 0.26); }\n\n.material-icons.md-light,\n.material-icons.mat-light {\n  color: white; }\n\n.material-icons.md-light.md-inactive,\n.material-icons.mat-light.mat-inactive {\n  color: rgba(255, 255, 255, 0.3); }\n","$mat-font-url: 'styles/font/' !default;\n\n@mixin covalent-material-icons() {\n  @font-face {\n    font-family: 'Material Icons';\n    font-style: normal;\n    font-weight: 400;\n    src: url($mat-font-url + 'MaterialIcons-Regular-v48.woff2') format('woff2');\n  }\n  .material-icons {\n    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    font-size: 24px; /* Preferred icon size */\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    text-transform: none;\n    letter-spacing: normal;\n    word-wrap: normal;\n    white-space: nowrap;\n    direction: ltr;\n\n    /* Support for all WebKit browsers. */\n    -webkit-font-smoothing: antialiased;\n\n    /* Support for Safari and Chrome. */\n    text-rendering: optimizeLegibility;\n\n    /* Support for Firefox. */\n    -moz-osx-font-smoothing: grayscale;\n\n    /* Support for IE. */\n    font-feature-settings: 'liga';\n  }\n\n  // Ensure our size prevails over material\n  mat-icon.material-icons {\n    &,\n    &.mat-icon {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  // Rules for sizing the icon.\n  .material-icons.md-18,\n  .material-icons.mat-18 {\n    font-size: 18px;\n    height: 18px;\n    width: 18px;\n  }\n  .material-icons.md-24,\n  .material-icons.mat-24 {\n    font-size: 24px;\n    height: 24px;\n    width: 24px;\n  }\n  .material-icons.md-36,\n  .material-icons.mat-36 {\n    font-size: 36px;\n    height: 36px;\n    width: 36px;\n  }\n  .material-icons.md-48,\n  .material-icons.mat-48 {\n    font-size: 48px;\n    height: 48px;\n    width: 48px;\n  }\n\n  // Rules for using icons as black on a light background.\n  .material-icons.md-dark,\n  .material-icons.mat-dark {\n    color: rgba(0, 0, 0, 0.54);\n  }\n  .material-icons.md-dark.md-inactive,\n  .material-icons.mat-dark.mat-inactive {\n    color: rgba(0, 0, 0, 0.26);\n  }\n\n  // Rules for using icons as white on a dark background.\n  .material-icons.md-light,\n  .material-icons.mat-light {\n    color: rgba(255, 255, 255, 1);\n  }\n  .material-icons.md-light.md-inactive,\n  .material-icons.mat-light.mat-inactive {\n    color: rgba(255, 255, 255, 0.3);\n  }\n}\n"]}
+{"version":3,"sources":["common/styles/core/_button.scss","common/styles/_layout.scss","common/material-icons.css","common/styles/colors/_colors-dark.scss","common/styles/colors/_colors-light.scss","common/styles/font/_font.scss"],"names":[],"mappings":"AAwBA,gGAAA;ACxBA,kEAAA;AAEA;;;;;;;;;;;CAAA;AAwBA;EACE;IACE,SAAA;IACA,WAAA;IACA,gBAAA;IACA,YAAA;ECXF;AACF;ACrBA,6CAAA;AAs3CA,4CAAA;ACt3CA,6CAAA;AAkqGA,4CAAA;AC/pGE;EACE,6BAAA;EACA,kBAAA;EACA,gBAAA;EACA,uEAAA;AHwBJ;AGrBE;EACE,8EAAA;EACA,6BAAA;EACA,mBAAA;EACA,kBAAA;EACA,eAAA;EAAiB,wBAAA;EACjB,qBAAA;EACA,UAAA;EACA,WAAA;EACA,cAAA;EACA,oBAAA;EACA,sBAAA;EACA,iBAAA;EACA,mBAAA;EACA,cAAA;EAEA,qCAAA;EACA,mCAAA;EAEA,mCAAA;EACA,kCAAA;EAEA,yBAAA;EACA,kCAAA;EAEA,oBAAA;EACA,6BAAA;AHoBJ;;AGfI;EAEE,UAAA;EACA,WAAA;AHiBN;;AGZE;;EAEE,eAAA;EACA,YAAA;EACA,WAAA;AHeJ;;AGZE;;EAEE,eAAA;EACA,YAAA;EACA,WAAA;AHeJ;;AGZE;;EAEE,eAAA;EACA,YAAA;EACA,WAAA;AHeJ;;AGZE;;EAEE,eAAA;EACA,YAAA;EACA,WAAA;AHeJ;;AGXE;;EAEE,0BAAA;AHcJ;;AGXE;;EAEE,0BAAA;AHcJ;;AGVE;;EAEE,YAAA;AHaJ;;AGVE;;EAEE,+BAAA;AHaJ","file":"material-icons.css","sourcesContent":["@import '../theme-functions';\n@import '../rtl';\n\n// Standard button sizing.\n$mat-button-padding: 0 rem(0.6) !default;\n$mat-button-min-width: rem(8.8) !default;\n$mat-button-margin: rem(0.6) rem(0.8) !default;\n$mat-button-line-height: rem(3.6) !default;\n$mat-button-border-radius: 3px !default;\n\n// FAB sizing.\n$mat-fab-border-radius: 50%;\n$mat-fab-size: rem(5.6) !default;\n$mat-fab-line-height: rem(5.6) !default;\n$mat-fab-padding: rem(1.6) !default;\n$mat-fab-mini-size: rem(4) !default;\n$mat-fab-mini-line-height: rem(4) !default;\n\n// Icon button sizing.\n$mat-icon-button-height: rem(4) !default;\n$mat-icon-button-width: rem(4) !default;\n$mat-icon-button-margin: rem(0.6) !default;\n$mat-icon-border-radius: $mat-fab-border-radius;\n\n/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {\n  [mat-fab].mat-fab-position-#{$spot},\n  .mat-fab.mat-fab-position-#{$spot},\n  [mat-fab].mat-fab-#{$spot},\n  .mat-fab.mat-fab-#{$spot} {\n    top: $top;\n    @include rtl(right, $right, $left);\n    @include rtl(left, $left, $right);\n\n    bottom: $bottom;\n    position: absolute;\n\n    &.fixed {\n      position: fixed;\n    }\n  }\n}\n\n@mixin td-button-utilities() {\n  $mat-fab-pos-offset: calc(($mat-fab-size - $mat-fab-padding) / 2);\n  @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);\n  @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);\n  @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);\n  @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);\n\n  button {\n    &[mat-icon-button] {\n      &.mat-icon-button-mini {\n        height: 24px;\n        line-height: 24px;\n        width: 24px;\n      }\n    }\n  }\n}\n","/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n\n/*\n*\n*  Responsive attributes\n*\n*  References:\n*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n*  2) https://css-tricks.com/almanac/properties/f/flex/\n*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n*  5) http://godban.com.ua/projects/flexgrid\n*\n*/\n\n// Layout\n// ------------------------------\n\n$baseline-grid: 8px !default;\n$layout-gutter-width: ($baseline-grid * 2) !default;\n\n$layout-breakpoint-xs: 600px !default;\n$layout-breakpoint-sm: 960px !default;\n$layout-breakpoint-md: 1280px !default;\n$layout-breakpoint-lg: 1920px !default;\n\n@-moz-document url-prefix() {\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n  }\n}\n\n@mixin flex-order-for-name($sizes: null) {\n  @if $sizes == null {\n    $sizes: '';\n\n    [flex-order] {\n      order: 0;\n    }\n  }\n\n  @for $i from -20 through 20 {\n    $order: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $order: '[flex-order#{$suffix}]';\n    }\n\n    #{$order} {\n      order: #{$i};\n    }\n  }\n}\n\n@mixin offset-for-name($sizes: null) {\n  @if $sizes == null {\n    $sizes: '';\n  }\n\n  @for $i from 0 through 19 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i * 5}\"';\n      } @else {\n        $suffix: '=\"#{$i * 5}\"';\n      }\n\n      $offsets: $offsets + '[flex-offset#{$suffix}], ';\n    }\n\n    #{$offsets} {\n      margin-left: #{$i * 5 + '%'};\n    }\n  }\n\n  @each $i in 33 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $offsets: '[flex-offset#{$suffix}], ';\n    }\n\n    #{$offsets} {\n      margin-left: calc(100% / 3);\n    }\n  }\n\n  @each $i in 66 {\n    $offsets: '';\n    $suffix: '';\n\n    @each $s in $sizes {\n      @if $s != '' {\n        $suffix: '-#{$s}=\"#{$i}\"';\n      } @else {\n        $suffix: '=\"#{$i}\"';\n      }\n\n      $offsets: '[flex-offset#{$suffix}]';\n    }\n\n    #{$offsets} {\n      margin-left: calc(200% / 3);\n    }\n  }\n}\n\n@mixin layout-for-name($name: null) {\n  @if $name == null {\n    $name: '';\n  }\n  @if $name != '' {\n    $name: '-#{$name}';\n  }\n\n  [layout#{$name}],\n  [layout#{$name}='column'],\n  [layout#{$name}='row'] {\n    box-sizing: border-box;\n    display: flex;\n  }\n  [layout#{$name}='column'] {\n    flex-direction: column;\n  }\n  [layout#{$name}='row'] {\n    flex-direction: row;\n  }\n}\n\n@mixin flex-properties-for-name($name: null) {\n  $flexName: 'flex';\n  @if $name != null {\n    $flexName: 'flex-#{$name}';\n    $name: '-#{$name}';\n  } @else {\n    $name: '';\n  }\n\n  [#{$flexName}] {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  // === flex: 1 1 0%;\n\n  // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values\n  // Details:\n  // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.\n  // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).\n  // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px\n  @media screen\\0 {\n    [#{$flexName}] {\n      flex: 1 1 0%;\n    }\n  }\n\n  [#{$flexName}='grow'],\n  [#{$flexName}-grow] {\n    flex: 1 1 100%;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='initial'],\n  [#{$flexName}-initial] {\n    flex: 0 1 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='auto'],\n  [#{$flexName}-auto] {\n    flex: 1 1 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='none'],\n  [#{$flexName}-none] {\n    flex: 0 0 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='noshrink'],\n  [#{$flexName}-noshrink] {\n    flex: 1 0 auto;\n    box-sizing: border-box;\n  }\n  [#{$flexName}='nogrow'],\n  [#{$flexName}-nogrow] {\n    flex: 0 1 auto;\n    box-sizing: border-box;\n  }\n\n  // (1-20) * 5 = 0-100%\n  @for $i from 0 through 20 {\n    $value: #{$i * 5 + '%'};\n\n    [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: #{$value};\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n\n    [layout='row'] > [#{$flexName}='#{$i * 5}'],\n    [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: #{$value};\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n\n    [layout='column'] > [#{$flexName}='#{$i * 5}'],\n    [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {\n      flex: 1 1 #{$value};\n      max-width: 100%;\n      max-height: #{$value};\n      box-sizing: border-box;\n    }\n  }\n\n  [layout='row'],\n  [layout#{$name}='row'] {\n    > [#{$flexName}='33'],\n    > [#{$flexName}='33'] {\n      flex: 1 1 33%;\n      max-width: calc(100% / 3);\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='34'],\n    > [#{$flexName}='34'] {\n      flex: 1 1 34%;\n      max-width: 34%;\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='66'],\n    > [#{$flexName}='66'] {\n      flex: 1 1 66%;\n      max-width: calc(200% / 3);\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='67'],\n    > [#{$flexName}='67'] {\n      flex: 1 1 67%;\n      max-width: 67%;\n      max-height: 100%;\n      box-sizing: border-box;\n    }\n  }\n  [layout='column'],\n  [layout#{$name}='column'] {\n    > [#{$flexName}='33'],\n    > [#{$flexName}='33'] {\n      flex: 1 1 33%;\n      max-width: 100%;\n      max-height: calc(100% / 3);\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='34'],\n    > [#{$flexName}='34'] {\n      flex: 1 1 34%;\n      max-width: 100%;\n      max-height: 34%;\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='66'],\n    > [#{$flexName}='66'] {\n      flex: 1 1 66%;\n      max-width: 100%;\n      max-height: calc(200% / 3);\n      box-sizing: border-box;\n    }\n    > [#{$flexName}='67'],\n    > [#{$flexName}='67'] {\n      flex: 1 1 67%;\n      max-width: 100%;\n      max-height: 67%;\n      box-sizing: border-box;\n    }\n  }\n}\n\n@mixin layout-align-for-name($suffix: null) {\n  // Alignment attributes for layout containers' children\n  // Arrange on the Main Axis\n  // center, start, end, space-between, space-around\n  // flex-start is the default for justify-content\n  // ------------------------------\n\n  $name: 'layout-align';\n  @if $suffix != null {\n    $name: 'layout-align-#{$suffix}';\n  }\n\n  [#{$name}],\n  [#{$name}=\"start stretch\"] // defaults\n  {\n    justify-content: flex-start;\n    align-content: stretch;\n    align-items: stretch;\n  }\n  // Main Axis Center\n  [#{$name}='start'],\n  [#{$name}='start start'],\n  [#{$name}='start center'],\n  [#{$name}='start end'],\n  [#{$name}='start stretch'] {\n    justify-content: flex-start;\n  }\n\n  // Main Axis Center\n  [#{$name}='center'],\n  [#{$name}='center start'],\n  [#{$name}='center center'],\n  [#{$name}='center end'],\n  [#{$name}='center stretch'] {\n    justify-content: center;\n  }\n\n  // Main Axis End\n  [#{$name}=\"end\"], //stretch\n  [#{$name}=\"end center\"],\n  [#{$name}=\"end start\"],\n  [#{$name}=\"end end\"],\n  [#{$name}=\"end stretch\"] {\n    justify-content: flex-end;\n  }\n\n  // Main Axis Space Around\n  [#{$name}=\"space-around\"], //stretch\n  [#{$name}=\"space-around center\"],\n  [#{$name}=\"space-around start\"],\n  [#{$name}=\"space-around end\"],\n  [#{$name}=\"space-around stretch\"] {\n    justify-content: space-around;\n  }\n\n  // Main Axis Space Between\n  [#{$name}=\"space-between\"], //stretch\n  [#{$name}=\"space-between center\"],\n  [#{$name}=\"space-between start\"],\n  [#{$name}=\"space-between end\"],\n  [#{$name}=\"space-between stretch\"] {\n    justify-content: space-between;\n  }\n\n  // Arrange on the Cross Axis\n  // center, start, end\n  // stretch is the default for align-items\n  // ------------------------------\n\n  // Cross Axis Start\n  [#{$name}='start start'],\n  [#{$name}='center start'],\n  [#{$name}='end start'],\n  [#{$name}='space-between start'],\n  [#{$name}='space-around start'] {\n    align-items: flex-start;\n    align-content: flex-start;\n  }\n\n  // Cross Axis Center\n  [#{$name}='start center'],\n  [#{$name}='center center'],\n  [#{$name}='end center'],\n  [#{$name}='space-between center'],\n  [#{$name}='space-around center'] {\n    align-items: center;\n    align-content: center;\n    max-width: 100%;\n\n    // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container\n    & > * {\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n  }\n\n  // Cross Axis Center IE overflow fix\n  [#{$name}='start center'] > *,\n  [#{$name}='center center'] > *,\n  [#{$name}='end center'] > *,\n  [#{$name}='space-between center'] > *,\n  [#{$name}='space-around center'] > * {\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  // Cross Axis End\n  [#{$name}='start end'],\n  [#{$name}='center end'],\n  [#{$name}='end end'],\n  [#{$name}='space-between end'],\n  [#{$name}='space-around end'] {\n    align-items: flex-end;\n    align-content: flex-end;\n  }\n\n  // Cross Axis  stretch\n  [#{$name}='start stretch'],\n  [#{$name}='center stretch'],\n  [#{$name}='end stretch'],\n  [#{$name}='space-between stretch'],\n  [#{$name}='space-around stretch'] {\n    align-items: stretch;\n    align-content: stretch;\n  }\n}\n\n@mixin layout-padding-margin() {\n  [layout-padding] > [flex-sm],\n  [layout-padding] > [flex-lt-md] {\n    padding: calc($layout-gutter-width / 4);\n  }\n\n  [layout-padding],\n  [layout-padding] > [flex],\n  [layout-padding] > [flex-gt-sm],\n  [layout-padding] > [flex-md],\n  [layout-padding] > [flex-lt-lg] {\n    padding: calc($layout-gutter-width / 2);\n  }\n\n  [layout-padding] > [flex-gt-md],\n  [layout-padding] > [flex-lg] {\n    padding: calc($layout-gutter-width / 1);\n  }\n\n  [layout-margin] > [flex-sm],\n  [layout-margin] > [flex-lt-md] {\n    margin: calc($layout-gutter-width / 4);\n  }\n\n  [layout-margin],\n  [layout-margin] > [flex],\n  [layout-margin] > [flex-gt-sm],\n  [layout-margin] > [flex-md],\n  [layout-margin] > [flex-lt-lg] {\n    margin: calc($layout-gutter-width / 2);\n  }\n\n  [layout-margin] > [flex-gt-md],\n  [layout-margin] > [flex-lg] {\n    margin: calc($layout-gutter-width / 1);\n  }\n\n  [layout-wrap] {\n    flex-wrap: wrap;\n  }\n\n  [layout-nowrap] {\n    flex-wrap: nowrap;\n  }\n\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n  }\n}\n\n@mixin layouts_for_breakpoint($name: null) {\n  @include flex-order-for-name($name);\n  @include offset-for-name($name);\n  @include layout-align-for-name($name);\n\n  @include flex-properties-for-name($name);\n  @include layout-for-name($name);\n}\n\n@mixin covalent-layout() {\n  /*\n  *  Apply Mixins to create Layout/Flexbox styles\n  *\n  */\n\n  @include layouts_for_breakpoint();\n  @include layout-padding-margin();\n\n  /**\n  * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px\n  * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px\n  * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`\n  *\n  *  hide means hide everywhere\n  *  Sizes:\n  *         $layout-breakpoint-xs:     600px !default;\n  *         $layout-breakpoint-sm:     960px !default;\n  *         $layout-breakpoint-md:     1280px !default;\n  *         $layout-breakpoint-lg:     1920px !default;\n  */\n\n  @media (max-width: $layout-breakpoint-xs - 1) {\n    // Xtra-SMALL  SCREEN\n    [hide-xs],\n    [hide] {\n      &:not([show-xs]):not([show]) {\n        display: none;\n      }\n    }\n    @include layouts_for_breakpoint(xs);\n  }\n\n  @media (min-width: $layout-breakpoint-xs) {\n    // BIGGER THAN Xtra-SMALL SCREEN\n    @include layouts_for_breakpoint(gt-xs);\n  }\n\n  @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {\n    // SMALL SCREEN\n    [hide-sm],\n    [hide-gt-xs] {\n      &:not([show-gt-xs]):not([show-sm]):not([show]) {\n        display: none;\n      }\n    }\n\n    [hide-sm]:not([show-sm]):not([show]) {\n      display: none;\n    }\n    @include layouts_for_breakpoint(sm);\n  }\n\n  @media (min-width: $layout-breakpoint-sm) {\n    // BIGGER THAN SMALL SCREEN\n    @include layouts_for_breakpoint(gt-sm);\n  }\n\n  @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {\n    // MEDIUM SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {\n        display: none;\n      }\n    }\n\n    [hide-md]:not([show-md]):not([show]) {\n      display: none;\n    }\n    @include layouts_for_breakpoint(md);\n  }\n\n  @media (min-width: $layout-breakpoint-md) {\n    // BIGGER THAN MEDIUM SCREEN\n    @include layouts_for_breakpoint(gt-md);\n  }\n\n  @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {\n    // LARGE SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm],\n    [hide-gt-md] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {\n        display: none;\n      }\n    }\n\n    [hide-lg]:not([show-lg]):not([show]) {\n      display: none;\n    }\n\n    @include layouts_for_breakpoint(lg);\n  }\n\n  @media (min-width: $layout-breakpoint-lg) {\n    // BIGGER THAN LARGE SCREEN\n    @include layouts_for_breakpoint(gt-lg);\n    @include layouts_for_breakpoint(xl);\n\n    // BIGGER THAN LARGE SCREEN\n    [hide],\n    [hide-gt-xs],\n    [hide-gt-sm],\n    [hide-gt-md],\n    [hide-gt-lg] {\n      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {\n        display: none;\n      }\n    }\n\n    [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {\n      display: none;\n    }\n  }\n}\n","/** Mixin to create distinct classes for fab positions, e.g. \".mat-fab-position-bottom-right\". */\n/* stylelint-disable function-url-quotes, no-duplicate-selectors */\n/*\n*\n*  Responsive attributes\n*\n*  References:\n*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex\n*  2) https://css-tricks.com/almanac/properties/f/flex/\n*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n*  5) http://godban.com.ua/projects/flexgrid\n*\n*/\n@-moz-document url-prefix() {\n  [layout-fill] {\n    margin: 0;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n  }\n}\n/* stylelint-disable selector-class-pattern */\n/* stylelint-enable selector-class-pattern */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-enable selector-class-pattern */\n@font-face {\n  font-family: \"Material Icons\";\n  font-style: normal;\n  font-weight: 400;\n  src: url(\"styles/font/MaterialIcons-Regular-v48.woff2\") format(\"woff2\");\n}\n.material-icons {\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: \"Material Icons\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  /* Preferred icon size */\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n  /* Support for IE. */\n  font-feature-settings: \"liga\";\n}\n\nmat-icon.material-icons, mat-icon.material-icons.mat-icon {\n  width: 1em;\n  height: 1em;\n}\n\n.material-icons.md-18,\n.material-icons.mat-18 {\n  font-size: 18px;\n  height: 18px;\n  width: 18px;\n}\n\n.material-icons.md-24,\n.material-icons.mat-24 {\n  font-size: 24px;\n  height: 24px;\n  width: 24px;\n}\n\n.material-icons.md-36,\n.material-icons.mat-36 {\n  font-size: 36px;\n  height: 36px;\n  width: 36px;\n}\n\n.material-icons.md-48,\n.material-icons.mat-48 {\n  font-size: 48px;\n  height: 48px;\n  width: 48px;\n}\n\n.material-icons.md-dark,\n.material-icons.mat-dark {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.material-icons.md-dark.md-inactive,\n.material-icons.mat-dark.mat-inactive {\n  color: rgba(0, 0, 0, 0.26);\n}\n\n.material-icons.md-light,\n.material-icons.mat-light {\n  color: white;\n}\n\n.material-icons.md-light.md-inactive,\n.material-icons.mat-light.mat-inactive {\n  color: rgba(255, 255, 255, 0.3);\n}","/* stylelint-disable selector-class-pattern */\n\n@import '../theme-functions';\n@import '../palette-dark';\n\n@mixin td-colors-dark() {\n  // Text color\n\n  // 500\n  .tc-dark-red-500 {\n    color: mat-color($mat-dark-red, 500) !important;\n  }\n\n  .tc-dark-pink-500 {\n    color: mat-color($mat-dark-pink, 500) !important;\n  }\n\n  .tc-dark-purple-500 {\n    color: mat-color($mat-dark-purple, 500) !important;\n  }\n\n  .tc-dark-deep-purple-500 {\n    color: mat-color($mat-dark-deep-purple, 500) !important;\n  }\n\n  .tc-dark-indigo-500 {\n    color: mat-color($mat-dark-indigo, 500) !important;\n  }\n\n  .tc-dark-blue-500 {\n    color: mat-color($mat-dark-blue, 500) !important;\n  }\n\n  .tc-dark-light-blue-500 {\n    color: mat-color($mat-dark-light-blue, 500) !important;\n  }\n\n  .tc-dark-cyan-500 {\n    color: mat-color($mat-dark-cyan, 500) !important;\n  }\n\n  .tc-dark-teal-500 {\n    color: mat-color($mat-dark-teal, 500) !important;\n  }\n\n  .tc-dark-green-500 {\n    color: mat-color($mat-dark-green, 500) !important;\n  }\n\n  .tc-dark-light-green-500 {\n    color: mat-color($mat-dark-light-green, 500) !important;\n  }\n\n  .tc-dark-lime-500 {\n    color: mat-color($mat-dark-lime, 500) !important;\n  }\n\n  .tc-dark-yellow-500 {\n    color: mat-color($mat-dark-yellow, 500) !important;\n  }\n\n  .tc-dark-amber-500 {\n    color: mat-color($mat-dark-amber, 500) !important;\n  }\n\n  .tc-dark-orange-500 {\n    color: mat-color($mat-dark-orange, 500) !important;\n  }\n\n  .tc-dark-deep-orange-500 {\n    color: mat-color($mat-dark-deep-orange, 500) !important;\n  }\n\n  .tc-dark-brown-500 {\n    color: mat-color($mat-dark-brown, 500) !important;\n  }\n\n  .tc-dark-grey-500 {\n    color: mat-color($mat-dark-grey, 500) !important;\n  }\n\n  .tc-dark-blue-grey-500 {\n    color: mat-color($mat-dark-blue-grey, 500) !important;\n  }\n\n  // B100\n  .tc-dark-red-B100 {\n    color: mat-color($mat-dark-red, B100) !important;\n  }\n\n  .tc-dark-pink-B100 {\n    color: mat-color($mat-dark-pink, B100) !important;\n  }\n\n  .tc-dark-purple-B100 {\n    color: mat-color($mat-dark-purple, B100) !important;\n  }\n\n  .tc-dark-deep-purple-B100 {\n    color: mat-color($mat-dark-deep-purple, B100) !important;\n  }\n\n  .tc-dark-indigo-B100 {\n    color: mat-color($mat-dark-indigo, B100) !important;\n  }\n\n  .tc-dark-blue-B100 {\n    color: mat-color($mat-dark-blue, B100) !important;\n  }\n\n  .tc-dark-light-blue-B100 {\n    color: mat-color($mat-dark-light-blue, B100) !important;\n  }\n\n  .tc-dark-cyan-B100 {\n    color: mat-color($mat-dark-cyan, B100) !important;\n  }\n\n  .tc-dark-teal-B100 {\n    color: mat-color($mat-dark-teal, B100) !important;\n  }\n\n  .tc-dark-green-B100 {\n    color: mat-color($mat-dark-green, B100) !important;\n  }\n\n  .tc-dark-light-green-B100 {\n    color: mat-color($mat-dark-light-green, B100) !important;\n  }\n\n  .tc-dark-lime-B100 {\n    color: mat-color($mat-dark-lime, B100) !important;\n  }\n\n  .tc-dark-yellow-B100 {\n    color: mat-color($mat-dark-yellow, B100) !important;\n  }\n\n  .tc-dark-amber-B100 {\n    color: mat-color($mat-dark-amber, B100) !important;\n  }\n\n  .tc-dark-orange-B100 {\n    color: mat-color($mat-dark-orange, B100) !important;\n  }\n\n  .tc-dark-deep-orange-B100 {\n    color: mat-color($mat-dark-deep-orange, B100) !important;\n  }\n\n  .tc-dark-brown-B100 {\n    color: mat-color($mat-dark-brown, B100) !important;\n  }\n\n  .tc-dark-grey-B100 {\n    color: mat-color($mat-dark-grey, B100) !important;\n  }\n\n  .tc-dark-blue-grey-B100 {\n    color: mat-color($mat-dark-blue-grey, B100) !important;\n  }\n\n  // B65\n  .tc-dark-red-B65 {\n    color: mat-color($mat-dark-red, B65) !important;\n  }\n\n  .tc-dark-pink-B65 {\n    color: mat-color($mat-dark-pink, B65) !important;\n  }\n\n  .tc-dark-purple-B65 {\n    color: mat-color($mat-dark-purple, B65) !important;\n  }\n\n  .tc-dark-deep-purple-B65 {\n    color: mat-color($mat-dark-deep-purple, B65) !important;\n  }\n\n  .tc-dark-indigo-B65 {\n    color: mat-color($mat-dark-indigo, B65) !important;\n  }\n\n  .tc-dark-blue-B65 {\n    color: mat-color($mat-dark-blue, B65) !important;\n  }\n\n  .tc-dark-light-blue-B65 {\n    color: mat-color($mat-dark-light-blue, B65) !important;\n  }\n\n  .tc-dark-cyan-B65 {\n    color: mat-color($mat-dark-cyan, B65) !important;\n  }\n\n  .tc-dark-teal-B65 {\n    color: mat-color($mat-dark-teal, B65) !important;\n  }\n\n  .tc-dark-green-B65 {\n    color: mat-color($mat-dark-green, B65) !important;\n  }\n\n  .tc-dark-light-green-B65 {\n    color: mat-color($mat-dark-light-green, B65) !important;\n  }\n\n  .tc-dark-lime-B65 {\n    color: mat-color($mat-dark-lime, B65) !important;\n  }\n\n  .tc-dark-yellow-B65 {\n    color: mat-color($mat-dark-yellow, B65) !important;\n  }\n\n  .tc-dark-amber-B65 {\n    color: mat-color($mat-dark-amber, B65) !important;\n  }\n\n  .tc-dark-orange-B65 {\n    color: mat-color($mat-dark-orange, B65) !important;\n  }\n\n  .tc-dark-deep-orange-B65 {\n    color: mat-color($mat-dark-deep-orange, B65) !important;\n  }\n\n  .tc-dark-brown-B65 {\n    color: mat-color($mat-dark-brown, B65) !important;\n  }\n\n  .tc-dark-grey-B65 {\n    color: mat-color($mat-dark-grey, B65) !important;\n  }\n\n  .tc-dark-blue-grey-B65 {\n    color: mat-color($mat-dark-blue-grey, B65) !important;\n  }\n\n  // B40\n  .tc-dark-red-B40 {\n    color: mat-color($mat-dark-red, B40) !important;\n  }\n\n  .tc-dark-pink-B40 {\n    color: mat-color($mat-dark-pink, B40) !important;\n  }\n\n  .tc-dark-purple-B40 {\n    color: mat-color($mat-dark-purple, B40) !important;\n  }\n\n  .tc-dark-deep-purple-B40 {\n    color: mat-color($mat-dark-deep-purple, B40) !important;\n  }\n\n  .tc-dark-indigo-B40 {\n    color: mat-color($mat-dark-indigo, B40) !important;\n  }\n\n  .tc-dark-blue-B40 {\n    color: mat-color($mat-dark-blue, B40) !important;\n  }\n\n  .tc-dark-light-blue-B40 {\n    color: mat-color($mat-dark-light-blue, B40) !important;\n  }\n\n  .tc-dark-cyan-B40 {\n    color: mat-color($mat-dark-cyan, B40) !important;\n  }\n\n  .tc-dark-teal-B40 {\n    color: mat-color($mat-dark-teal, B40) !important;\n  }\n\n  .tc-dark-green-B40 {\n    color: mat-color($mat-dark-green, B40) !important;\n  }\n\n  .tc-dark-light-green-B40 {\n    color: mat-color($mat-dark-light-green, B40) !important;\n  }\n\n  .tc-dark-lime-B40 {\n    color: mat-color($mat-dark-lime, B40) !important;\n  }\n\n  .tc-dark-yellow-B40 {\n    color: mat-color($mat-dark-yellow, B40) !important;\n  }\n\n  .tc-dark-amber-B40 {\n    color: mat-color($mat-dark-amber, B40) !important;\n  }\n\n  .tc-dark-orange-B40 {\n    color: mat-color($mat-dark-orange, B40) !important;\n  }\n\n  .tc-dark-deep-orange-B40 {\n    color: mat-color($mat-dark-deep-orange, B40) !important;\n  }\n\n  .tc-dark-brown-B40 {\n    color: mat-color($mat-dark-brown, B40) !important;\n  }\n\n  .tc-dark-grey-B40 {\n    color: mat-color($mat-dark-grey, B40) !important;\n  }\n\n  .tc-dark-blue-grey-B40 {\n    color: mat-color($mat-dark-blue-grey, B40) !important;\n  }\n\n  // B30\n  .tc-dark-red-B30 {\n    color: mat-color($mat-dark-red, B30) !important;\n  }\n\n  .tc-dark-pink-B30 {\n    color: mat-color($mat-dark-pink, B30) !important;\n  }\n\n  .tc-dark-purple-B30 {\n    color: mat-color($mat-dark-purple, B30) !important;\n  }\n\n  .tc-dark-deep-purple-B30 {\n    color: mat-color($mat-dark-deep-purple, B30) !important;\n  }\n\n  .tc-dark-indigo-B30 {\n    color: mat-color($mat-dark-indigo, B30) !important;\n  }\n\n  .tc-dark-blue-B30 {\n    color: mat-color($mat-dark-blue, B30) !important;\n  }\n\n  .tc-dark-light-blue-B30 {\n    color: mat-color($mat-dark-light-blue, B30) !important;\n  }\n\n  .tc-dark-cyan-B30 {\n    color: mat-color($mat-dark-cyan, B30) !important;\n  }\n\n  .tc-dark-teal-B30 {\n    color: mat-color($mat-dark-teal, B30) !important;\n  }\n\n  .tc-dark-green-B30 {\n    color: mat-color($mat-dark-green, B30) !important;\n  }\n\n  .tc-dark-light-green-B30 {\n    color: mat-color($mat-dark-light-green, B30) !important;\n  }\n\n  .tc-dark-lime-B30 {\n    color: mat-color($mat-dark-lime, B30) !important;\n  }\n\n  .tc-dark-yellow-B30 {\n    color: mat-color($mat-dark-yellow, B30) !important;\n  }\n\n  .tc-dark-amber-B30 {\n    color: mat-color($mat-dark-amber, B30) !important;\n  }\n\n  .tc-dark-orange-B30 {\n    color: mat-color($mat-dark-orange, B30) !important;\n  }\n\n  .tc-dark-deep-orange-B30 {\n    color: mat-color($mat-dark-deep-orange, B30) !important;\n  }\n\n  .tc-dark-brown-B30 {\n    color: mat-color($mat-dark-brown, B30) !important;\n  }\n\n  .tc-dark-grey-B30 {\n    color: mat-color($mat-dark-grey, B30) !important;\n  }\n\n  .tc-dark-blue-grey-B30 {\n    color: mat-color($mat-dark-blue-grey, B30) !important;\n  }\n\n  // B15\n  .tc-dark-red-B15 {\n    color: mat-color($mat-dark-red, B15) !important;\n  }\n\n  .tc-dark-pink-B15 {\n    color: mat-color($mat-dark-pink, B15) !important;\n  }\n\n  .tc-dark-purple-B15 {\n    color: mat-color($mat-dark-purple, B15) !important;\n  }\n\n  .tc-dark-deep-purple-B15 {\n    color: mat-color($mat-dark-deep-purple, B15) !important;\n  }\n\n  .tc-dark-indigo-B15 {\n    color: mat-color($mat-dark-indigo, B15) !important;\n  }\n\n  .tc-dark-blue-B15 {\n    color: mat-color($mat-dark-blue, B15) !important;\n  }\n\n  .tc-dark-light-blue-B15 {\n    color: mat-color($mat-dark-light-blue, B15) !important;\n  }\n\n  .tc-dark-cyan-B15 {\n    color: mat-color($mat-dark-cyan, B15) !important;\n  }\n\n  .tc-dark-teal-B15 {\n    color: mat-color($mat-dark-teal, B15) !important;\n  }\n\n  .tc-dark-green-B15 {\n    color: mat-color($mat-dark-green, B15) !important;\n  }\n\n  .tc-dark-light-green-B15 {\n    color: mat-color($mat-dark-light-green, B15) !important;\n  }\n\n  .tc-dark-lime-B15 {\n    color: mat-color($mat-dark-lime, B15) !important;\n  }\n\n  .tc-dark-yellow-B15 {\n    color: mat-color($mat-dark-yellow, B15) !important;\n  }\n\n  .tc-dark-amber-B15 {\n    color: mat-color($mat-dark-amber, B15) !important;\n  }\n\n  .tc-dark-orange-B15 {\n    color: mat-color($mat-dark-orange, B15) !important;\n  }\n\n  .tc-dark-deep-orange-B15 {\n    color: mat-color($mat-dark-deep-orange, B15) !important;\n  }\n\n  .tc-dark-brown-B15 {\n    color: mat-color($mat-dark-brown, B15) !important;\n  }\n\n  .tc-dark-grey-B15 {\n    color: mat-color($mat-dark-grey, B15) !important;\n  }\n\n  .tc-dark-blue-grey-B15 {\n    color: mat-color($mat-dark-blue-grey, B15) !important;\n  }\n\n  // Background color\n\n  // 500\n  .bgc-dark-red-500 {\n    background-color: mat-color($mat-dark-red, 500) !important;\n  }\n\n  .bgc-dark-pink-500 {\n    background-color: mat-color($mat-dark-pink, 500) !important;\n  }\n\n  .bgc-dark-purple-500 {\n    background-color: mat-color($mat-dark-purple, 500) !important;\n  }\n\n  .bgc-dark-deep-purple-500 {\n    background-color: mat-color($mat-dark-deep-purple, 500) !important;\n  }\n\n  .bgc-dark-indigo-500 {\n    background-color: mat-color($mat-dark-indigo, 500) !important;\n  }\n\n  .bgc-dark-blue-500 {\n    background-color: mat-color($mat-dark-blue, 500) !important;\n  }\n\n  .bgc-dark-light-blue-500 {\n    background-color: mat-color($mat-dark-light-blue, 500) !important;\n  }\n\n  .bgc-dark-cyan-500 {\n    background-color: mat-color($mat-dark-cyan, 500) !important;\n  }\n\n  .bgc-dark-teal-500 {\n    background-color: mat-color($mat-dark-teal, 500) !important;\n  }\n\n  .bgc-dark-green-500 {\n    background-color: mat-color($mat-dark-green, 500) !important;\n  }\n\n  .bgc-dark-light-green-500 {\n    background-color: mat-color($mat-dark-light-green, 500) !important;\n  }\n\n  .bgc-dark-lime-500 {\n    background-color: mat-color($mat-dark-lime, 500) !important;\n  }\n\n  .bgc-dark-yellow-500 {\n    background-color: mat-color($mat-dark-yellow, 500) !important;\n  }\n\n  .bgc-dark-amber-500 {\n    background-color: mat-color($mat-dark-amber, 500) !important;\n  }\n\n  .bgc-dark-orange-500 {\n    background-color: mat-color($mat-dark-orange, 500) !important;\n  }\n\n  .bgc-dark-deep-orange-500 {\n    background-color: mat-color($mat-dark-deep-orange, 500) !important;\n  }\n\n  .bgc-dark-brown-500 {\n    background-color: mat-color($mat-dark-brown, 500) !important;\n  }\n\n  .bgc-dark-grey-500 {\n    background-color: mat-color($mat-dark-grey, 500) !important;\n  }\n\n  .bgc-dark-blue-grey-500 {\n    background-color: mat-color($mat-dark-blue-grey, 500) !important;\n  }\n\n  // B100\n  .bgc-dark-red-B100 {\n    background-color: mat-color($mat-dark-red, B100) !important;\n  }\n\n  .bgc-dark-pink-B100 {\n    background-color: mat-color($mat-dark-pink, B100) !important;\n  }\n\n  .bgc-dark-purple-B100 {\n    background-color: mat-color($mat-dark-purple, B100) !important;\n  }\n\n  .bgc-dark-deep-purple-B100 {\n    background-color: mat-color($mat-dark-deep-purple, B100) !important;\n  }\n\n  .bgc-dark-indigo-B100 {\n    background-color: mat-color($mat-dark-indigo, B100) !important;\n  }\n\n  .bgc-dark-blue-B100 {\n    background-color: mat-color($mat-dark-blue, B100) !important;\n  }\n\n  .bgc-dark-light-blue-B100 {\n    background-color: mat-color($mat-dark-light-blue, B100) !important;\n  }\n\n  .bgc-dark-cyan-B100 {\n    background-color: mat-color($mat-dark-cyan, B100) !important;\n  }\n\n  .bgc-dark-teal-B100 {\n    background-color: mat-color($mat-dark-teal, B100) !important;\n  }\n\n  .bgc-dark-green-B100 {\n    background-color: mat-color($mat-dark-green, B100) !important;\n  }\n\n  .bgc-dark-light-green-B100 {\n    background-color: mat-color($mat-dark-light-green, B100) !important;\n  }\n\n  .bgc-dark-lime-B100 {\n    background-color: mat-color($mat-dark-lime, B100) !important;\n  }\n\n  .bgc-dark-yellow-B100 {\n    background-color: mat-color($mat-dark-yellow, B100) !important;\n  }\n\n  .bgc-dark-amber-B100 {\n    background-color: mat-color($mat-dark-amber, B100) !important;\n  }\n\n  .bgc-dark-orange-B100 {\n    background-color: mat-color($mat-dark-orange, B100) !important;\n  }\n\n  .bgc-dark-deep-orange-B100 {\n    background-color: mat-color($mat-dark-deep-orange, B100) !important;\n  }\n\n  .bgc-dark-brown-B100 {\n    background-color: mat-color($mat-dark-brown, B100) !important;\n  }\n\n  .bgc-dark-grey-B100 {\n    background-color: mat-color($mat-dark-grey, B100) !important;\n  }\n\n  .bgc-dark-blue-grey-B100 {\n    background-color: mat-color($mat-dark-blue-grey, B100) !important;\n  }\n\n  // B65\n  .bgc-dark-red-B65 {\n    background-color: mat-color($mat-dark-red, B65) !important;\n  }\n\n  .bgc-dark-pink-B65 {\n    background-color: mat-color($mat-dark-pink, B65) !important;\n  }\n\n  .bgc-dark-purple-B65 {\n    background-color: mat-color($mat-dark-purple, B65) !important;\n  }\n\n  .bgc-dark-deep-purple-B65 {\n    background-color: mat-color($mat-dark-deep-purple, B65) !important;\n  }\n\n  .bgc-dark-indigo-B65 {\n    background-color: mat-color($mat-dark-indigo, B65) !important;\n  }\n\n  .bgc-dark-blue-B65 {\n    background-color: mat-color($mat-dark-blue, B65) !important;\n  }\n\n  .bgc-dark-light-blue-B65 {\n    background-color: mat-color($mat-dark-light-blue, B65) !important;\n  }\n\n  .bgc-dark-cyan-B65 {\n    background-color: mat-color($mat-dark-cyan, B65) !important;\n  }\n\n  .bgc-dark-teal-B65 {\n    background-color: mat-color($mat-dark-teal, B65) !important;\n  }\n\n  .bgc-dark-green-B65 {\n    background-color: mat-color($mat-dark-green, B65) !important;\n  }\n\n  .bgc-dark-light-green-B65 {\n    background-color: mat-color($mat-dark-light-green, B65) !important;\n  }\n\n  .bgc-dark-lime-B65 {\n    background-color: mat-color($mat-dark-lime, B65) !important;\n  }\n\n  .bgc-dark-yellow-B65 {\n    background-color: mat-color($mat-dark-yellow, B65) !important;\n  }\n\n  .bgc-dark-amber-B65 {\n    background-color: mat-color($mat-dark-amber, B65) !important;\n  }\n\n  .bgc-dark-orange-B65 {\n    background-color: mat-color($mat-dark-orange, B65) !important;\n  }\n\n  .bgc-dark-deep-orange-B65 {\n    background-color: mat-color($mat-dark-deep-orange, B65) !important;\n  }\n\n  .bgc-dark-brown-B65 {\n    background-color: mat-color($mat-dark-brown, B65) !important;\n  }\n\n  .bgc-dark-grey-B65 {\n    background-color: mat-color($mat-dark-grey, B65) !important;\n  }\n\n  .bgc-dark-blue-grey-B65 {\n    background-color: mat-color($mat-dark-blue-grey, B65) !important;\n  }\n\n  // B40\n  .bgc-dark-red-B40 {\n    background-color: mat-color($mat-dark-red, B40) !important;\n  }\n\n  .bgc-dark-pink-B40 {\n    background-color: mat-color($mat-dark-pink, B40) !important;\n  }\n\n  .bgc-dark-purple-B40 {\n    background-color: mat-color($mat-dark-purple, B40) !important;\n  }\n\n  .bgc-dark-deep-purple-B40 {\n    background-color: mat-color($mat-dark-deep-purple, B40) !important;\n  }\n\n  .bgc-dark-indigo-B40 {\n    background-color: mat-color($mat-dark-indigo, B40) !important;\n  }\n\n  .bgc-dark-blue-B40 {\n    background-color: mat-color($mat-dark-blue, B40) !important;\n  }\n\n  .bgc-dark-light-blue-B40 {\n    background-color: mat-color($mat-dark-light-blue, B40) !important;\n  }\n\n  .bgc-dark-cyan-B40 {\n    background-color: mat-color($mat-dark-cyan, B40) !important;\n  }\n\n  .bgc-dark-teal-B40 {\n    background-color: mat-color($mat-dark-teal, B40) !important;\n  }\n\n  .bgc-dark-green-B40 {\n    background-color: mat-color($mat-dark-green, B40) !important;\n  }\n\n  .bgc-dark-light-green-B40 {\n    background-color: mat-color($mat-dark-light-green, B40) !important;\n  }\n\n  .bgc-dark-lime-B40 {\n    background-color: mat-color($mat-dark-lime, B40) !important;\n  }\n\n  .bgc-dark-yellow-B40 {\n    background-color: mat-color($mat-dark-yellow, B40) !important;\n  }\n\n  .bgc-dark-amber-B40 {\n    background-color: mat-color($mat-dark-amber, B40) !important;\n  }\n\n  .bgc-dark-orange-B40 {\n    background-color: mat-color($mat-dark-orange, B40) !important;\n  }\n\n  .bgc-dark-deep-orange-B40 {\n    background-color: mat-color($mat-dark-deep-orange, B40) !important;\n  }\n\n  .bgc-dark-brown-B40 {\n    background-color: mat-color($mat-dark-brown, B40) !important;\n  }\n\n  .bgc-dark-grey-B40 {\n    background-color: mat-color($mat-dark-grey, B40) !important;\n  }\n\n  .bgc-dark-blue-grey-B40 {\n    background-color: mat-color($mat-dark-blue-grey, B40) !important;\n  }\n\n  // B30\n  .bgc-dark-red-B30 {\n    background-color: mat-color($mat-dark-red, B30) !important;\n  }\n\n  .bgc-dark-pink-B30 {\n    background-color: mat-color($mat-dark-pink, B30) !important;\n  }\n\n  .bgc-dark-purple-B30 {\n    background-color: mat-color($mat-dark-purple, B30) !important;\n  }\n\n  .bgc-dark-deep-purple-B30 {\n    background-color: mat-color($mat-dark-deep-purple, B30) !important;\n  }\n\n  .bgc-dark-indigo-B30 {\n    background-color: mat-color($mat-dark-indigo, B30) !important;\n  }\n\n  .bgc-dark-blue-B30 {\n    background-color: mat-color($mat-dark-blue, B30) !important;\n  }\n\n  .bgc-dark-light-blue-B30 {\n    background-color: mat-color($mat-dark-light-blue, B30) !important;\n  }\n\n  .bgc-dark-cyan-B30 {\n    background-color: mat-color($mat-dark-cyan, B30) !important;\n  }\n\n  .bgc-dark-teal-B30 {\n    background-color: mat-color($mat-dark-teal, B30) !important;\n  }\n\n  .bgc-dark-green-B30 {\n    background-color: mat-color($mat-dark-green, B30) !important;\n  }\n\n  .bgc-dark-light-green-B30 {\n    background-color: mat-color($mat-dark-light-green, B30) !important;\n  }\n\n  .bgc-dark-lime-B30 {\n    background-color: mat-color($mat-dark-lime, B30) !important;\n  }\n\n  .bgc-dark-yellow-B30 {\n    background-color: mat-color($mat-dark-yellow, B30) !important;\n  }\n\n  .bgc-dark-amber-B30 {\n    background-color: mat-color($mat-dark-amber, B30) !important;\n  }\n\n  .bgc-dark-orange-B30 {\n    background-color: mat-color($mat-dark-orange, B30) !important;\n  }\n\n  .bgc-dark-deep-orange-B30 {\n    background-color: mat-color($mat-dark-deep-orange, B30) !important;\n  }\n\n  .bgc-dark-brown-B30 {\n    background-color: mat-color($mat-dark-brown, B30) !important;\n  }\n\n  .bgc-dark-grey-B30 {\n    background-color: mat-color($mat-dark-grey, B30) !important;\n  }\n\n  .bgc-dark-blue-grey-B30 {\n    background-color: mat-color($mat-dark-blue-grey, B30) !important;\n  }\n\n  // B15\n  .bgc-dark-red-B15 {\n    background-color: mat-color($mat-dark-red, B15) !important;\n  }\n\n  .bgc-dark-pink-B15 {\n    background-color: mat-color($mat-dark-pink, B15) !important;\n  }\n\n  .bgc-dark-purple-B15 {\n    background-color: mat-color($mat-dark-purple, B15) !important;\n  }\n\n  .bgc-dark-deep-purple-B15 {\n    background-color: mat-color($mat-dark-deep-purple, B15) !important;\n  }\n\n  .bgc-dark-indigo-B15 {\n    background-color: mat-color($mat-dark-indigo, B15) !important;\n  }\n\n  .bgc-dark-blue-B15 {\n    background-color: mat-color($mat-dark-blue, B15) !important;\n  }\n\n  .bgc-dark-light-blue-B15 {\n    background-color: mat-color($mat-dark-light-blue, B15) !important;\n  }\n\n  .bgc-dark-cyan-B15 {\n    background-color: mat-color($mat-dark-cyan, B15) !important;\n  }\n\n  .bgc-dark-teal-B15 {\n    background-color: mat-color($mat-dark-teal, B15) !important;\n  }\n\n  .bgc-dark-green-B15 {\n    background-color: mat-color($mat-dark-green, B15) !important;\n  }\n\n  .bgc-dark-light-green-B15 {\n    background-color: mat-color($mat-dark-light-green, B15) !important;\n  }\n\n  .bgc-dark-lime-B15 {\n    background-color: mat-color($mat-dark-lime, B15) !important;\n  }\n\n  .bgc-dark-yellow-B15 {\n    background-color: mat-color($mat-dark-yellow, B15) !important;\n  }\n\n  .bgc-dark-amber-B15 {\n    background-color: mat-color($mat-dark-amber, B15) !important;\n  }\n\n  .bgc-dark-orange-B15 {\n    background-color: mat-color($mat-dark-orange, B15) !important;\n  }\n\n  .bgc-dark-deep-orange-B15 {\n    background-color: mat-color($mat-dark-deep-orange, B15) !important;\n  }\n\n  .bgc-dark-brown-B15 {\n    background-color: mat-color($mat-dark-brown, B15) !important;\n  }\n\n  .bgc-dark-grey-B15 {\n    background-color: mat-color($mat-dark-grey, B15) !important;\n  }\n\n  .bgc-dark-blue-grey-B15 {\n    background-color: mat-color($mat-dark-blue-grey, B15) !important;\n  }\n\n  // Fill color\n\n  // 500\n  .fill-red-500 {\n    fill: mat-color($mat-dark-red, 500) !important;\n  }\n\n  .fill-pink-500 {\n    fill: mat-color($mat-dark-pink, 500) !important;\n  }\n\n  .fill-purple-500 {\n    fill: mat-color($mat-dark-purple, 500) !important;\n  }\n\n  .fill-deep-purple-500 {\n    fill: mat-color($mat-dark-deep-purple, 500) !important;\n  }\n\n  .fill-indigo-500 {\n    fill: mat-color($mat-dark-indigo, 500) !important;\n  }\n\n  .fill-blue-500 {\n    fill: mat-color($mat-dark-blue, 500) !important;\n  }\n\n  .fill-light-blue-500 {\n    fill: mat-color($mat-dark-light-blue, 500) !important;\n  }\n\n  .fill-cyan-500 {\n    fill: mat-color($mat-dark-cyan, 500) !important;\n  }\n\n  .fill-teal-500 {\n    fill: mat-color($mat-dark-teal, 500) !important;\n  }\n\n  .fill-green-500 {\n    fill: mat-color($mat-dark-green, 500) !important;\n  }\n\n  .fill-light-green-500 {\n    fill: mat-color($mat-dark-light-green, 500) !important;\n  }\n\n  .fill-lime-500 {\n    fill: mat-color($mat-dark-lime, 500) !important;\n  }\n\n  .fill-yellow-500 {\n    fill: mat-color($mat-dark-yellow, 500) !important;\n  }\n\n  .fill-amber-500 {\n    fill: mat-color($mat-dark-amber, 500) !important;\n  }\n\n  .fill-orange-500 {\n    fill: mat-color($mat-dark-orange, 500) !important;\n  }\n\n  .fill-deep-orange-500 {\n    fill: mat-color($mat-dark-deep-orange, 500) !important;\n  }\n\n  .fill-brown-500 {\n    fill: mat-color($mat-dark-brown, 500) !important;\n  }\n\n  .fill-grey-500 {\n    fill: mat-color($mat-dark-grey, 500) !important;\n  }\n\n  .fill-blue-grey-500 {\n    fill: mat-color($mat-dark-blue-grey, 500) !important;\n  }\n\n  // B100\n  .fill-red-B100 {\n    fill: mat-color($mat-dark-red, B100) !important;\n  }\n\n  .fill-pink-B100 {\n    fill: mat-color($mat-dark-pink, B100) !important;\n  }\n\n  .fill-purple-B100 {\n    fill: mat-color($mat-dark-purple, B100) !important;\n  }\n\n  .fill-deep-purple-B100 {\n    fill: mat-color($mat-dark-deep-purple, B100) !important;\n  }\n\n  .fill-indigo-B100 {\n    fill: mat-color($mat-dark-indigo, B100) !important;\n  }\n\n  .fill-blue-B100 {\n    fill: mat-color($mat-dark-blue, B100) !important;\n  }\n\n  .fill-light-blue-B100 {\n    fill: mat-color($mat-dark-light-blue, B100) !important;\n  }\n\n  .fill-cyan-B100 {\n    fill: mat-color($mat-dark-cyan, B100) !important;\n  }\n\n  .fill-teal-B100 {\n    fill: mat-color($mat-dark-teal, B100) !important;\n  }\n\n  .fill-green-B100 {\n    fill: mat-color($mat-dark-green, B100) !important;\n  }\n\n  .fill-light-green-B100 {\n    fill: mat-color($mat-dark-light-green, B100) !important;\n  }\n\n  .fill-lime-B100 {\n    fill: mat-color($mat-dark-lime, B100) !important;\n  }\n\n  .fill-yellow-B100 {\n    fill: mat-color($mat-dark-yellow, B100) !important;\n  }\n\n  .fill-amber-B100 {\n    fill: mat-color($mat-dark-amber, B100) !important;\n  }\n\n  .fill-orange-B100 {\n    fill: mat-color($mat-dark-orange, B100) !important;\n  }\n\n  .fill-deep-orange-B100 {\n    fill: mat-color($mat-dark-deep-orange, B100) !important;\n  }\n\n  .fill-brown-B100 {\n    fill: mat-color($mat-dark-brown, B100) !important;\n  }\n\n  .fill-grey-B100 {\n    fill: mat-color($mat-dark-grey, B100) !important;\n  }\n\n  .fill-blue-grey-B100 {\n    fill: mat-color($mat-dark-blue-grey, B100) !important;\n  }\n\n  // B65\n  .fill-red-B65 {\n    fill: mat-color($mat-dark-red, B65) !important;\n  }\n\n  .fill-pink-B65 {\n    fill: mat-color($mat-dark-pink, B65) !important;\n  }\n\n  .fill-purple-B65 {\n    fill: mat-color($mat-dark-purple, B65) !important;\n  }\n\n  .fill-deep-purple-B65 {\n    fill: mat-color($mat-dark-deep-purple, B65) !important;\n  }\n\n  .fill-indigo-B65 {\n    fill: mat-color($mat-dark-indigo, B65) !important;\n  }\n\n  .fill-blue-B65 {\n    fill: mat-color($mat-dark-blue, B65) !important;\n  }\n\n  .fill-light-blue-B65 {\n    fill: mat-color($mat-dark-light-blue, B65) !important;\n  }\n\n  .fill-cyan-B65 {\n    fill: mat-color($mat-dark-cyan, B65) !important;\n  }\n\n  .fill-teal-B65 {\n    fill: mat-color($mat-dark-teal, B65) !important;\n  }\n\n  .fill-green-B65 {\n    fill: mat-color($mat-dark-green, B65) !important;\n  }\n\n  .fill-light-green-B65 {\n    fill: mat-color($mat-dark-light-green, B65) !important;\n  }\n\n  .fill-lime-B65 {\n    fill: mat-color($mat-dark-lime, B65) !important;\n  }\n\n  .fill-yellow-B65 {\n    fill: mat-color($mat-dark-yellow, B65) !important;\n  }\n\n  .fill-amber-B65 {\n    fill: mat-color($mat-dark-amber, B65) !important;\n  }\n\n  .fill-orange-B65 {\n    fill: mat-color($mat-dark-orange, B65) !important;\n  }\n\n  .fill-deep-orange-B65 {\n    fill: mat-color($mat-dark-deep-orange, B65) !important;\n  }\n\n  .fill-brown-B65 {\n    fill: mat-color($mat-dark-brown, B65) !important;\n  }\n\n  .fill-grey-B65 {\n    fill: mat-color($mat-dark-grey, B65) !important;\n  }\n\n  .fill-blue-grey-B65 {\n    fill: mat-color($mat-dark-blue-grey, B65) !important;\n  }\n\n  // B40\n  .fill-red-B40 {\n    fill: mat-color($mat-dark-red, B40) !important;\n  }\n\n  .fill-pink-B40 {\n    fill: mat-color($mat-dark-pink, B40) !important;\n  }\n\n  .fill-purple-B40 {\n    fill: mat-color($mat-dark-purple, B40) !important;\n  }\n\n  .fill-deep-purple-B40 {\n    fill: mat-color($mat-dark-deep-purple, B40) !important;\n  }\n\n  .fill-indigo-B40 {\n    fill: mat-color($mat-dark-indigo, B40) !important;\n  }\n\n  .fill-blue-B40 {\n    fill: mat-color($mat-dark-blue, B40) !important;\n  }\n\n  .fill-light-blue-B40 {\n    fill: mat-color($mat-dark-light-blue, B40) !important;\n  }\n\n  .fill-cyan-B40 {\n    fill: mat-color($mat-dark-cyan, B40) !important;\n  }\n\n  .fill-teal-B40 {\n    fill: mat-color($mat-dark-teal, B40) !important;\n  }\n\n  .fill-green-B40 {\n    fill: mat-color($mat-dark-green, B40) !important;\n  }\n\n  .fill-light-green-B40 {\n    fill: mat-color($mat-dark-light-green, B40) !important;\n  }\n\n  .fill-lime-B40 {\n    fill: mat-color($mat-dark-lime, B40) !important;\n  }\n\n  .fill-yellow-B40 {\n    fill: mat-color($mat-dark-yellow, B40) !important;\n  }\n\n  .fill-amber-B40 {\n    fill: mat-color($mat-dark-amber, B40) !important;\n  }\n\n  .fill-orange-B40 {\n    fill: mat-color($mat-dark-orange, B40) !important;\n  }\n\n  .fill-deep-orange-B40 {\n    fill: mat-color($mat-dark-deep-orange, B40) !important;\n  }\n\n  .fill-brown-B40 {\n    fill: mat-color($mat-dark-brown, B40) !important;\n  }\n\n  .fill-grey-B40 {\n    fill: mat-color($mat-dark-grey, B40) !important;\n  }\n\n  .fill-blue-grey-B40 {\n    fill: mat-color($mat-dark-blue-grey, B40) !important;\n  }\n\n  // B30\n  .fill-red-B30 {\n    fill: mat-color($mat-dark-red, B30) !important;\n  }\n\n  .fill-pink-B30 {\n    fill: mat-color($mat-dark-pink, B30) !important;\n  }\n\n  .fill-purple-B30 {\n    fill: mat-color($mat-dark-purple, B30) !important;\n  }\n\n  .fill-deep-purple-B30 {\n    fill: mat-color($mat-dark-deep-purple, B30) !important;\n  }\n\n  .fill-indigo-B30 {\n    fill: mat-color($mat-dark-indigo, B30) !important;\n  }\n\n  .fill-blue-B30 {\n    fill: mat-color($mat-dark-blue, B30) !important;\n  }\n\n  .fill-light-blue-B30 {\n    fill: mat-color($mat-dark-light-blue, B30) !important;\n  }\n\n  .fill-cyan-B30 {\n    fill: mat-color($mat-dark-cyan, B30) !important;\n  }\n\n  .fill-teal-B30 {\n    fill: mat-color($mat-dark-teal, B30) !important;\n  }\n\n  .fill-green-B30 {\n    fill: mat-color($mat-dark-green, B30) !important;\n  }\n\n  .fill-light-green-B30 {\n    fill: mat-color($mat-dark-light-green, B30) !important;\n  }\n\n  .fill-lime-B30 {\n    fill: mat-color($mat-dark-lime, B30) !important;\n  }\n\n  .fill-yellow-B30 {\n    fill: mat-color($mat-dark-yellow, B30) !important;\n  }\n\n  .fill-amber-B30 {\n    fill: mat-color($mat-dark-amber, B30) !important;\n  }\n\n  .fill-orange-B30 {\n    fill: mat-color($mat-dark-orange, B30) !important;\n  }\n\n  .fill-deep-orange-B30 {\n    fill: mat-color($mat-dark-deep-orange, B30) !important;\n  }\n\n  .fill-brown-B30 {\n    fill: mat-color($mat-dark-brown, B30) !important;\n  }\n\n  .fill-grey-B30 {\n    fill: mat-color($mat-dark-grey, B30) !important;\n  }\n\n  .fill-blue-grey-B30 {\n    fill: mat-color($mat-dark-blue-grey, B30) !important;\n  }\n\n  // B15\n  .fill-red-B15 {\n    fill: mat-color($mat-dark-red, B15) !important;\n  }\n\n  .fill-pink-B15 {\n    fill: mat-color($mat-dark-pink, B15) !important;\n  }\n\n  .fill-purple-B15 {\n    fill: mat-color($mat-dark-purple, B15) !important;\n  }\n\n  .fill-deep-purple-B15 {\n    fill: mat-color($mat-dark-deep-purple, B15) !important;\n  }\n\n  .fill-indigo-B15 {\n    fill: mat-color($mat-dark-indigo, B15) !important;\n  }\n\n  .fill-blue-B15 {\n    fill: mat-color($mat-dark-blue, B15) !important;\n  }\n\n  .fill-light-blue-B15 {\n    fill: mat-color($mat-dark-light-blue, B15) !important;\n  }\n\n  .fill-cyan-B15 {\n    fill: mat-color($mat-dark-cyan, B15) !important;\n  }\n\n  .fill-teal-B15 {\n    fill: mat-color($mat-dark-teal, B15) !important;\n  }\n\n  .fill-green-B15 {\n    fill: mat-color($mat-dark-green, B15) !important;\n  }\n\n  .fill-light-green-B15 {\n    fill: mat-color($mat-dark-light-green, B15) !important;\n  }\n\n  .fill-lime-B15 {\n    fill: mat-color($mat-dark-lime, B15) !important;\n  }\n\n  .fill-yellow-B15 {\n    fill: mat-color($mat-dark-yellow, B15) !important;\n  }\n\n  .fill-amber-B15 {\n    fill: mat-color($mat-dark-amber, B15) !important;\n  }\n\n  .fill-orange-B15 {\n    fill: mat-color($mat-dark-orange, B15) !important;\n  }\n\n  .fill-deep-orange-B15 {\n    fill: mat-color($mat-dark-deep-orange, B15) !important;\n  }\n\n  .fill-brown-B15 {\n    fill: mat-color($mat-dark-brown, B15) !important;\n  }\n\n  .fill-grey-B15 {\n    fill: mat-color($mat-dark-grey, B15) !important;\n  }\n\n  .fill-blue-grey-B15 {\n    fill: mat-color($mat-dark-blue-grey, B15) !important;\n  }\n}\n/* stylelint-enable selector-class-pattern */\n","/* stylelint-disable selector-class-pattern */\n\n@import '../theme-functions';\n@import '../palette-light';\n\n@mixin td-colors-light() {\n  // Text color\n\n  // Inherit\n  .tc-inherit {\n    color: inherit !important;\n  }\n\n  // 50\n  .tc-red-50 {\n    color: mat-color($mat-red, 50) !important;\n  }\n\n  .tc-pink-50 {\n    color: mat-color($mat-pink, 50) !important;\n  }\n\n  .tc-purple-50 {\n    color: mat-color($mat-purple, 50) !important;\n  }\n\n  .tc-deep-purple-50 {\n    color: mat-color($mat-deep-purple, 50) !important;\n  }\n\n  .tc-indigo-50 {\n    color: mat-color($mat-indigo, 50) !important;\n  }\n\n  .tc-blue-50 {\n    color: mat-color($mat-blue, 50) !important;\n  }\n\n  .tc-light-blue-50 {\n    color: mat-color($mat-light-blue, 50) !important;\n  }\n\n  .tc-cyan-50 {\n    color: mat-color($mat-cyan, 50) !important;\n  }\n\n  .tc-teal-50 {\n    color: mat-color($mat-teal, 50) !important;\n  }\n\n  .tc-green-50 {\n    color: mat-color($mat-green, 50) !important;\n  }\n\n  .tc-light-green-50 {\n    color: mat-color($mat-light-green, 50) !important;\n  }\n\n  .tc-lime-50 {\n    color: mat-color($mat-lime, 50) !important;\n  }\n\n  .tc-yellow-50 {\n    color: mat-color($mat-yellow, 50) !important;\n  }\n\n  .tc-amber-50 {\n    color: mat-color($mat-amber, 50) !important;\n  }\n\n  .tc-orange-50 {\n    color: mat-color($mat-orange, 50) !important;\n  }\n\n  .tc-deep-orange-50 {\n    color: mat-color($mat-deep-orange, 50) !important;\n  }\n\n  .tc-brown-50 {\n    color: mat-color($mat-brown, 50) !important;\n  }\n\n  .tc-grey-50 {\n    color: mat-color($mat-grey, 50) !important;\n  }\n\n  .tc-blue-grey-50 {\n    color: mat-color($mat-blue-grey, 50) !important;\n  }\n\n  // 100\n  .tc-red-100 {\n    color: mat-color($mat-red, 100) !important;\n  }\n\n  .tc-pink-100 {\n    color: mat-color($mat-pink, 100) !important;\n  }\n\n  .tc-purple-100 {\n    color: mat-color($mat-purple, 100) !important;\n  }\n\n  .tc-deep-purple-100 {\n    color: mat-color($mat-deep-purple, 100) !important;\n  }\n\n  .tc-indigo-100 {\n    color: mat-color($mat-indigo, 100) !important;\n  }\n\n  .tc-blue-100 {\n    color: mat-color($mat-blue, 100) !important;\n  }\n\n  .tc-light-blue-100 {\n    color: mat-color($mat-light-blue, 100) !important;\n  }\n\n  .tc-cyan-100 {\n    color: mat-color($mat-cyan, 100) !important;\n  }\n\n  .tc-teal-100 {\n    color: mat-color($mat-teal, 100) !important;\n  }\n\n  .tc-green-100 {\n    color: mat-color($mat-green, 100) !important;\n  }\n\n  .tc-light-green-100 {\n    color: mat-color($mat-light-green, 100) !important;\n  }\n\n  .tc-lime-100 {\n    color: mat-color($mat-lime, 100) !important;\n  }\n\n  .tc-yellow-100 {\n    color: mat-color($mat-yellow, 100) !important;\n  }\n\n  .tc-amber-100 {\n    color: mat-color($mat-amber, 100) !important;\n  }\n\n  .tc-orange-100 {\n    color: mat-color($mat-orange, 100) !important;\n  }\n\n  .tc-deep-orange-100 {\n    color: mat-color($mat-deep-orange, 100) !important;\n  }\n\n  .tc-brown-100 {\n    color: mat-color($mat-brown, 100) !important;\n  }\n\n  .tc-grey-100 {\n    color: mat-color($mat-grey, 100) !important;\n  }\n\n  .tc-blue-grey-100 {\n    color: mat-color($mat-blue-grey, 100) !important;\n  }\n\n  // 200\n  .tc-red-200 {\n    color: mat-color($mat-red, 200) !important;\n  }\n\n  .tc-pink-200 {\n    color: mat-color($mat-pink, 200) !important;\n  }\n\n  .tc-purple-200 {\n    color: mat-color($mat-purple, 200) !important;\n  }\n\n  .tc-deep-purple-200 {\n    color: mat-color($mat-deep-purple, 200) !important;\n  }\n\n  .tc-indigo-200 {\n    color: mat-color($mat-indigo, 200) !important;\n  }\n\n  .tc-blue-200 {\n    color: mat-color($mat-blue, 200) !important;\n  }\n\n  .tc-light-blue-200 {\n    color: mat-color($mat-light-blue, 200) !important;\n  }\n\n  .tc-cyan-200 {\n    color: mat-color($mat-cyan, 200) !important;\n  }\n\n  .tc-teal-200 {\n    color: mat-color($mat-teal, 200) !important;\n  }\n\n  .tc-green-200 {\n    color: mat-color($mat-green, 200) !important;\n  }\n\n  .tc-light-green-200 {\n    color: mat-color($mat-light-green, 200) !important;\n  }\n\n  .tc-lime-200 {\n    color: mat-color($mat-lime, 200) !important;\n  }\n\n  .tc-yellow-200 {\n    color: mat-color($mat-yellow, 200) !important;\n  }\n\n  .tc-amber-200 {\n    color: mat-color($mat-amber, 200) !important;\n  }\n\n  .tc-orange-200 {\n    color: mat-color($mat-orange, 200) !important;\n  }\n\n  .tc-deep-orange-200 {\n    color: mat-color($mat-deep-orange, 200) !important;\n  }\n\n  .tc-brown-200 {\n    color: mat-color($mat-brown, 200) !important;\n  }\n\n  .tc-grey-200 {\n    color: mat-color($mat-grey, 200) !important;\n  }\n\n  .tc-blue-grey-200 {\n    color: mat-color($mat-blue-grey, 200) !important;\n  }\n\n  // 300\n  .tc-red-300 {\n    color: mat-color($mat-red, 300) !important;\n  }\n\n  .tc-pink-300 {\n    color: mat-color($mat-pink, 300) !important;\n  }\n\n  .tc-purple-300 {\n    color: mat-color($mat-purple, 300) !important;\n  }\n\n  .tc-deep-purple-300 {\n    color: mat-color($mat-deep-purple, 300) !important;\n  }\n\n  .tc-indigo-300 {\n    color: mat-color($mat-indigo, 300) !important;\n  }\n\n  .tc-blue-300 {\n    color: mat-color($mat-blue, 300) !important;\n  }\n\n  .tc-light-blue-300 {\n    color: mat-color($mat-light-blue, 300) !important;\n  }\n\n  .tc-cyan-300 {\n    color: mat-color($mat-cyan, 300) !important;\n  }\n\n  .tc-teal-300 {\n    color: mat-color($mat-teal, 300) !important;\n  }\n\n  .tc-green-300 {\n    color: mat-color($mat-green, 300) !important;\n  }\n\n  .tc-light-green-300 {\n    color: mat-color($mat-light-green, 300) !important;\n  }\n\n  .tc-lime-300 {\n    color: mat-color($mat-lime, 300) !important;\n  }\n\n  .tc-yellow-300 {\n    color: mat-color($mat-yellow, 300) !important;\n  }\n\n  .tc-amber-300 {\n    color: mat-color($mat-amber, 300) !important;\n  }\n\n  .tc-orange-300 {\n    color: mat-color($mat-orange, 300) !important;\n  }\n\n  .tc-deep-orange-300 {\n    color: mat-color($mat-deep-orange, 300) !important;\n  }\n\n  .tc-brown-300 {\n    color: mat-color($mat-brown, 300) !important;\n  }\n\n  .tc-grey-300 {\n    color: mat-color($mat-grey, 300) !important;\n  }\n\n  .tc-blue-grey-300 {\n    color: mat-color($mat-blue-grey, 300) !important;\n  }\n\n  // 400\n  .tc-red-400 {\n    color: mat-color($mat-red, 400) !important;\n  }\n\n  .tc-pink-400 {\n    color: mat-color($mat-pink, 400) !important;\n  }\n\n  .tc-purple-400 {\n    color: mat-color($mat-purple, 400) !important;\n  }\n\n  .tc-deep-purple-400 {\n    color: mat-color($mat-deep-purple, 400) !important;\n  }\n\n  .tc-indigo-400 {\n    color: mat-color($mat-indigo, 400) !important;\n  }\n\n  .tc-blue-400 {\n    color: mat-color($mat-blue, 400) !important;\n  }\n\n  .tc-light-blue-400 {\n    color: mat-color($mat-light-blue, 400) !important;\n  }\n\n  .tc-cyan-400 {\n    color: mat-color($mat-cyan, 400) !important;\n  }\n\n  .tc-teal-400 {\n    color: mat-color($mat-teal, 400) !important;\n  }\n\n  .tc-green-400 {\n    color: mat-color($mat-green, 400) !important;\n  }\n\n  .tc-light-green-400 {\n    color: mat-color($mat-light-green, 400) !important;\n  }\n\n  .tc-lime-400 {\n    color: mat-color($mat-lime, 400) !important;\n  }\n\n  .tc-yellow-400 {\n    color: mat-color($mat-yellow, 400) !important;\n  }\n\n  .tc-amber-400 {\n    color: mat-color($mat-amber, 400) !important;\n  }\n\n  .tc-orange-400 {\n    color: mat-color($mat-orange, 400) !important;\n  }\n\n  .tc-deep-orange-400 {\n    color: mat-color($mat-deep-orange, 400) !important;\n  }\n\n  .tc-brown-400 {\n    color: mat-color($mat-brown, 400) !important;\n  }\n\n  .tc-grey-400 {\n    color: mat-color($mat-grey, 400) !important;\n  }\n\n  .tc-blue-grey-400 {\n    color: mat-color($mat-blue-grey, 400) !important;\n  }\n\n  // 500\n  .tc-red-500 {\n    color: mat-color($mat-red, 500) !important;\n  }\n\n  .tc-pink-500 {\n    color: mat-color($mat-pink, 500) !important;\n  }\n\n  .tc-purple-500 {\n    color: mat-color($mat-purple, 500) !important;\n  }\n\n  .tc-deep-purple-500 {\n    color: mat-color($mat-deep-purple, 500) !important;\n  }\n\n  .tc-indigo-500 {\n    color: mat-color($mat-indigo, 500) !important;\n  }\n\n  .tc-blue-500 {\n    color: mat-color($mat-blue, 500) !important;\n  }\n\n  .tc-light-blue-500 {\n    color: mat-color($mat-light-blue, 500) !important;\n  }\n\n  .tc-cyan-500 {\n    color: mat-color($mat-cyan, 500) !important;\n  }\n\n  .tc-teal-500 {\n    color: mat-color($mat-teal, 500) !important;\n  }\n\n  .tc-green-500 {\n    color: mat-color($mat-green, 500) !important;\n  }\n\n  .tc-light-green-500 {\n    color: mat-color($mat-light-green, 500) !important;\n  }\n\n  .tc-lime-500 {\n    color: mat-color($mat-lime, 500) !important;\n  }\n\n  .tc-yellow-500 {\n    color: mat-color($mat-yellow, 500) !important;\n  }\n\n  .tc-amber-500 {\n    color: mat-color($mat-amber, 500) !important;\n  }\n\n  .tc-orange-500 {\n    color: mat-color($mat-orange, 500) !important;\n  }\n\n  .tc-deep-orange-500 {\n    color: mat-color($mat-deep-orange, 500) !important;\n  }\n\n  .tc-brown-500 {\n    color: mat-color($mat-brown, 500) !important;\n  }\n\n  .tc-grey-500 {\n    color: mat-color($mat-grey, 500) !important;\n  }\n\n  .tc-blue-grey-500 {\n    color: mat-color($mat-blue-grey, 500) !important;\n  }\n\n  // 600\n  .tc-red-600 {\n    color: mat-color($mat-red, 600) !important;\n  }\n\n  .tc-pink-600 {\n    color: mat-color($mat-pink, 600) !important;\n  }\n\n  .tc-purple-600 {\n    color: mat-color($mat-purple, 600) !important;\n  }\n\n  .tc-deep-purple-600 {\n    color: mat-color($mat-deep-purple, 600) !important;\n  }\n\n  .tc-indigo-600 {\n    color: mat-color($mat-indigo, 600) !important;\n  }\n\n  .tc-blue-600 {\n    color: mat-color($mat-blue, 600) !important;\n  }\n\n  .tc-light-blue-600 {\n    color: mat-color($mat-light-blue, 600) !important;\n  }\n\n  .tc-cyan-600 {\n    color: mat-color($mat-cyan, 600) !important;\n  }\n\n  .tc-teal-600 {\n    color: mat-color($mat-teal, 600) !important;\n  }\n\n  .tc-green-600 {\n    color: mat-color($mat-green, 600) !important;\n  }\n\n  .tc-light-green-600 {\n    color: mat-color($mat-light-green, 600) !important;\n  }\n\n  .tc-lime-600 {\n    color: mat-color($mat-lime, 600) !important;\n  }\n\n  .tc-yellow-600 {\n    color: mat-color($mat-yellow, 600) !important;\n  }\n\n  .tc-amber-600 {\n    color: mat-color($mat-amber, 600) !important;\n  }\n\n  .tc-orange-600 {\n    color: mat-color($mat-orange, 600) !important;\n  }\n\n  .tc-deep-orange-600 {\n    color: mat-color($mat-deep-orange, 600) !important;\n  }\n\n  .tc-brown-600 {\n    color: mat-color($mat-brown, 600) !important;\n  }\n\n  .tc-grey-600 {\n    color: mat-color($mat-grey, 600) !important;\n  }\n\n  .tc-blue-grey-600 {\n    color: mat-color($mat-blue-grey, 600) !important;\n  }\n\n  // 700\n  .tc-red-700 {\n    color: mat-color($mat-red, 700) !important;\n  }\n\n  .tc-pink-700 {\n    color: mat-color($mat-pink, 700) !important;\n  }\n\n  .tc-purple-700 {\n    color: mat-color($mat-purple, 700) !important;\n  }\n\n  .tc-deep-purple-700 {\n    color: mat-color($mat-deep-purple, 700) !important;\n  }\n\n  .tc-indigo-700 {\n    color: mat-color($mat-indigo, 700) !important;\n  }\n\n  .tc-blue-700 {\n    color: mat-color($mat-blue, 700) !important;\n  }\n\n  .tc-light-blue-700 {\n    color: mat-color($mat-light-blue, 700) !important;\n  }\n\n  .tc-cyan-700 {\n    color: mat-color($mat-cyan, 700) !important;\n  }\n\n  .tc-teal-700 {\n    color: mat-color($mat-teal, 700) !important;\n  }\n\n  .tc-green-700 {\n    color: mat-color($mat-green, 700) !important;\n  }\n\n  .tc-light-green-700 {\n    color: mat-color($mat-light-green, 700) !important;\n  }\n\n  .tc-lime-700 {\n    color: mat-color($mat-lime, 700) !important;\n  }\n\n  .tc-yellow-700 {\n    color: mat-color($mat-yellow, 700) !important;\n  }\n\n  .tc-amber-700 {\n    color: mat-color($mat-amber, 700) !important;\n  }\n\n  .tc-orange-700 {\n    color: mat-color($mat-orange, 700) !important;\n  }\n\n  .tc-deep-orange-700 {\n    color: mat-color($mat-deep-orange, 700) !important;\n  }\n\n  .tc-brown-700 {\n    color: mat-color($mat-brown, 700) !important;\n  }\n\n  .tc-grey-700 {\n    color: mat-color($mat-grey, 700) !important;\n  }\n\n  .tc-blue-grey-700 {\n    color: mat-color($mat-blue-grey, 700) !important;\n  }\n\n  // 800\n  .tc-red-800 {\n    color: mat-color($mat-red, 800) !important;\n  }\n\n  .tc-pink-800 {\n    color: mat-color($mat-pink, 800) !important;\n  }\n\n  .tc-purple-800 {\n    color: mat-color($mat-purple, 800) !important;\n  }\n\n  .tc-deep-purple-800 {\n    color: mat-color($mat-deep-purple, 800) !important;\n  }\n\n  .tc-indigo-800 {\n    color: mat-color($mat-indigo, 800) !important;\n  }\n\n  .tc-blue-800 {\n    color: mat-color($mat-blue, 800) !important;\n  }\n\n  .tc-light-blue-800 {\n    color: mat-color($mat-light-blue, 800) !important;\n  }\n\n  .tc-cyan-800 {\n    color: mat-color($mat-cyan, 800) !important;\n  }\n\n  .tc-teal-800 {\n    color: mat-color($mat-teal, 800) !important;\n  }\n\n  .tc-green-800 {\n    color: mat-color($mat-green, 800) !important;\n  }\n\n  .tc-light-green-800 {\n    color: mat-color($mat-light-green, 800) !important;\n  }\n\n  .tc-lime-800 {\n    color: mat-color($mat-lime, 800) !important;\n  }\n\n  .tc-yellow-800 {\n    color: mat-color($mat-yellow, 800) !important;\n  }\n\n  .tc-amber-800 {\n    color: mat-color($mat-amber, 800) !important;\n  }\n\n  .tc-orange-800 {\n    color: mat-color($mat-orange, 800) !important;\n  }\n\n  .tc-deep-orange-800 {\n    color: mat-color($mat-deep-orange, 800) !important;\n  }\n\n  .tc-brown-800 {\n    color: mat-color($mat-brown, 800) !important;\n  }\n\n  .tc-grey-800 {\n    color: mat-color($mat-grey, 800) !important;\n  }\n\n  .tc-blue-grey-800 {\n    color: mat-color($mat-blue-grey, 800) !important;\n  }\n\n  // 900\n  .tc-red-900 {\n    color: mat-color($mat-red, 900) !important;\n  }\n\n  .tc-pink-900 {\n    color: mat-color($mat-pink, 900) !important;\n  }\n\n  .tc-purple-900 {\n    color: mat-color($mat-purple, 900) !important;\n  }\n\n  .tc-deep-purple-900 {\n    color: mat-color($mat-deep-purple, 900) !important;\n  }\n\n  .tc-indigo-900 {\n    color: mat-color($mat-indigo, 900) !important;\n  }\n\n  .tc-blue-900 {\n    color: mat-color($mat-blue, 900) !important;\n  }\n\n  .tc-light-blue-900 {\n    color: mat-color($mat-light-blue, 900) !important;\n  }\n\n  .tc-cyan-900 {\n    color: mat-color($mat-cyan, 900) !important;\n  }\n\n  .tc-teal-900 {\n    color: mat-color($mat-teal, 900) !important;\n  }\n\n  .tc-green-900 {\n    color: mat-color($mat-green, 900) !important;\n  }\n\n  .tc-light-green-900 {\n    color: mat-color($mat-light-green, 900) !important;\n  }\n\n  .tc-lime-900 {\n    color: mat-color($mat-lime, 900) !important;\n  }\n\n  .tc-yellow-900 {\n    color: mat-color($mat-yellow, 900) !important;\n  }\n\n  .tc-amber-900 {\n    color: mat-color($mat-amber, 900) !important;\n  }\n\n  .tc-orange-900 {\n    color: mat-color($mat-orange, 900) !important;\n  }\n\n  .tc-deep-orange-900 {\n    color: mat-color($mat-deep-orange, 900) !important;\n  }\n\n  .tc-brown-900 {\n    color: mat-color($mat-brown, 900) !important;\n  }\n\n  .tc-grey-900 {\n    color: mat-color($mat-grey, 900) !important;\n  }\n\n  .tc-blue-grey-900 {\n    color: mat-color($mat-blue-grey, 900) !important;\n  }\n\n  // A100\n  .tc-red-A100 {\n    color: mat-color($mat-red, A100) !important;\n  }\n\n  .tc-pink-A100 {\n    color: mat-color($mat-pink, A100) !important;\n  }\n\n  .tc-purple-A100 {\n    color: mat-color($mat-purple, A100) !important;\n  }\n\n  .tc-deep-purple-A100 {\n    color: mat-color($mat-deep-purple, A100) !important;\n  }\n\n  .tc-indigo-A100 {\n    color: mat-color($mat-indigo, A100) !important;\n  }\n\n  .tc-blue-A100 {\n    color: mat-color($mat-blue, A100) !important;\n  }\n\n  .tc-light-blue-A100 {\n    color: mat-color($mat-light-blue, A100) !important;\n  }\n\n  .tc-cyan-A100 {\n    color: mat-color($mat-cyan, A100) !important;\n  }\n\n  .tc-teal-A100 {\n    color: mat-color($mat-teal, A100) !important;\n  }\n\n  .tc-green-A100 {\n    color: mat-color($mat-green, A100) !important;\n  }\n\n  .tc-light-green-A100 {\n    color: mat-color($mat-light-green, A100) !important;\n  }\n\n  .tc-lime-A100 {\n    color: mat-color($mat-lime, A100) !important;\n  }\n\n  .tc-yellow-A100 {\n    color: mat-color($mat-yellow, A100) !important;\n  }\n\n  .tc-amber-A100 {\n    color: mat-color($mat-amber, A100) !important;\n  }\n\n  .tc-orange-A100 {\n    color: mat-color($mat-orange, A100) !important;\n  }\n\n  .tc-deep-orange-A100 {\n    color: mat-color($mat-deep-orange, A100) !important;\n  }\n\n  // A200\n  .tc-red-A200 {\n    color: mat-color($mat-red, A200) !important;\n  }\n\n  .tc-pink-A200 {\n    color: mat-color($mat-pink, A200) !important;\n  }\n\n  .tc-purple-A200 {\n    color: mat-color($mat-purple, A200) !important;\n  }\n\n  .tc-deep-purple-A200 {\n    color: mat-color($mat-deep-purple, A200) !important;\n  }\n\n  .tc-indigo-A200 {\n    color: mat-color($mat-indigo, A200) !important;\n  }\n\n  .tc-blue-A200 {\n    color: mat-color($mat-blue, A200) !important;\n  }\n\n  .tc-light-blue-A200 {\n    color: mat-color($mat-light-blue, A200) !important;\n  }\n\n  .tc-cyan-A200 {\n    color: mat-color($mat-cyan, A200) !important;\n  }\n\n  .tc-teal-A200 {\n    color: mat-color($mat-teal, A200) !important;\n  }\n\n  .tc-green-A200 {\n    color: mat-color($mat-green, A200) !important;\n  }\n\n  .tc-light-green-A200 {\n    color: mat-color($mat-light-green, A200) !important;\n  }\n\n  .tc-lime-A200 {\n    color: mat-color($mat-lime, A200) !important;\n  }\n\n  .tc-yellow-A200 {\n    color: mat-color($mat-yellow, A200) !important;\n  }\n\n  .tc-amber-A200 {\n    color: mat-color($mat-amber, A200) !important;\n  }\n\n  .tc-orange-A200 {\n    color: mat-color($mat-orange, A200) !important;\n  }\n\n  .tc-deep-orange-A200 {\n    color: mat-color($mat-deep-orange, A200) !important;\n  }\n\n  // A400\n  .tc-red-A400 {\n    color: mat-color($mat-red, A400) !important;\n  }\n\n  .tc-pink-A400 {\n    color: mat-color($mat-pink, A400) !important;\n  }\n\n  .tc-purple-A400 {\n    color: mat-color($mat-purple, A400) !important;\n  }\n\n  .tc-deep-purple-A400 {\n    color: mat-color($mat-deep-purple, A400) !important;\n  }\n\n  .tc-indigo-A400 {\n    color: mat-color($mat-indigo, A400) !important;\n  }\n\n  .tc-blue-A400 {\n    color: mat-color($mat-blue, A400) !important;\n  }\n\n  .tc-light-blue-A400 {\n    color: mat-color($mat-light-blue, A400) !important;\n  }\n\n  .tc-cyan-A400 {\n    color: mat-color($mat-cyan, A400) !important;\n  }\n\n  .tc-teal-A400 {\n    color: mat-color($mat-teal, A400) !important;\n  }\n\n  .tc-green-A400 {\n    color: mat-color($mat-green, A400) !important;\n  }\n\n  .tc-light-green-A400 {\n    color: mat-color($mat-light-green, A400) !important;\n  }\n\n  .tc-lime-A400 {\n    color: mat-color($mat-lime, A400) !important;\n  }\n\n  .tc-yellow-A400 {\n    color: mat-color($mat-yellow, A400) !important;\n  }\n\n  .tc-amber-A400 {\n    color: mat-color($mat-amber, A400) !important;\n  }\n\n  .tc-orange-A400 {\n    color: mat-color($mat-orange, A400) !important;\n  }\n\n  .tc-deep-orange-A400 {\n    color: mat-color($mat-deep-orange, A400) !important;\n  }\n\n  // A700\n  .tc-red-A700 {\n    color: mat-color($mat-red, A700) !important;\n  }\n\n  .tc-pink-A700 {\n    color: mat-color($mat-pink, A700) !important;\n  }\n\n  .tc-purple-A700 {\n    color: mat-color($mat-purple, A700) !important;\n  }\n\n  .tc-deep-purple-A700 {\n    color: mat-color($mat-deep-purple, A700) !important;\n  }\n\n  .tc-indigo-A700 {\n    color: mat-color($mat-indigo, A700) !important;\n  }\n\n  .tc-blue-A700 {\n    color: mat-color($mat-blue, A700) !important;\n  }\n\n  .tc-light-blue-A700 {\n    color: mat-color($mat-light-blue, A700) !important;\n  }\n\n  .tc-cyan-A700 {\n    color: mat-color($mat-cyan, A700) !important;\n  }\n\n  .tc-teal-A700 {\n    color: mat-color($mat-teal, A700) !important;\n  }\n\n  .tc-green-A700 {\n    color: mat-color($mat-green, A700) !important;\n  }\n\n  .tc-light-green-A700 {\n    color: mat-color($mat-light-green, A700) !important;\n  }\n\n  .tc-lime-A700 {\n    color: mat-color($mat-lime, A700) !important;\n  }\n\n  .tc-yellow-A700 {\n    color: mat-color($mat-yellow, A700) !important;\n  }\n\n  .tc-amber-A700 {\n    color: mat-color($mat-amber, A700) !important;\n  }\n\n  .tc-orange-A700 {\n    color: mat-color($mat-orange, A700) !important;\n  }\n\n  .tc-deep-orange-A700 {\n    color: mat-color($mat-deep-orange, A700) !important;\n  }\n\n  // Black\n  .tc-black {\n    color: rgba(black, 87) !important;\n  }\n\n  .tc-black-1 {\n    color: rgba(black, 54) !important;\n  }\n\n  .tc-black-2 {\n    color: rgba(black, 38) !important;\n  }\n\n  .tc-black-3 {\n    color: rgba(black, 0.12) !important;\n  }\n\n  .tc-black-4 {\n    color: black !important;\n  }\n\n  // White\n  .tc-white {\n    color: rgba(white, 0.7) !important;\n  }\n\n  .tc-white-1 {\n    color: rgba(white, 0.3) !important;\n  }\n\n  .tc-white-2 {\n    color: rgba(white, 0.3) !important;\n  }\n\n  .tc-white-3 {\n    color: rgba(white, 0.12) !important;\n  }\n\n  .tc-white-4 {\n    color: white !important;\n  }\n\n  // Background color\n\n  // 50\n  .bgc-red-50 {\n    background-color: mat-color($mat-red, 50) !important;\n  }\n\n  .bgc-pink-50 {\n    background-color: mat-color($mat-pink, 50) !important;\n  }\n\n  .bgc-purple-50 {\n    background-color: mat-color($mat-purple, 50) !important;\n  }\n\n  .bgc-deep-purple-50 {\n    background-color: mat-color($mat-deep-purple, 50) !important;\n  }\n\n  .bgc-indigo-50 {\n    background-color: mat-color($mat-indigo, 50) !important;\n  }\n\n  .bgc-blue-50 {\n    background-color: mat-color($mat-blue, 50) !important;\n  }\n\n  .bgc-light-blue-50 {\n    background-color: mat-color($mat-light-blue, 50) !important;\n  }\n\n  .bgc-cyan-50 {\n    background-color: mat-color($mat-cyan, 50) !important;\n  }\n\n  .bgc-teal-50 {\n    background-color: mat-color($mat-teal, 50) !important;\n  }\n\n  .bgc-green-50 {\n    background-color: mat-color($mat-green, 50) !important;\n  }\n\n  .bgc-light-green-50 {\n    background-color: mat-color($mat-light-green, 50) !important;\n  }\n\n  .bgc-lime-50 {\n    background-color: mat-color($mat-lime, 50) !important;\n  }\n\n  .bgc-yellow-50 {\n    background-color: mat-color($mat-yellow, 50) !important;\n  }\n\n  .bgc-amber-50 {\n    background-color: mat-color($mat-amber, 50) !important;\n  }\n\n  .bgc-orange-50 {\n    background-color: mat-color($mat-orange, 50) !important;\n  }\n\n  .bgc-deep-orange-50 {\n    background-color: mat-color($mat-deep-orange, 50) !important;\n  }\n\n  .bgc-brown-50 {\n    background-color: mat-color($mat-brown, 50) !important;\n  }\n\n  .bgc-grey-50 {\n    background-color: mat-color($mat-grey, 50) !important;\n  }\n\n  .bgc-blue-grey-50 {\n    background-color: mat-color($mat-blue-grey, 50) !important;\n  }\n\n  // 100\n  .bgc-red-100 {\n    background-color: mat-color($mat-red, 100) !important;\n  }\n\n  .bgc-pink-100 {\n    background-color: mat-color($mat-pink, 100) !important;\n  }\n\n  .bgc-purple-100 {\n    background-color: mat-color($mat-purple, 100) !important;\n  }\n\n  .bgc-deep-purple-100 {\n    background-color: mat-color($mat-deep-purple, 100) !important;\n  }\n\n  .bgc-indigo-100 {\n    background-color: mat-color($mat-indigo, 100) !important;\n  }\n\n  .bgc-blue-100 {\n    background-color: mat-color($mat-blue, 100) !important;\n  }\n\n  .bgc-light-blue-100 {\n    background-color: mat-color($mat-light-blue, 100) !important;\n  }\n\n  .bgc-cyan-100 {\n    background-color: mat-color($mat-cyan, 100) !important;\n  }\n\n  .bgc-teal-100 {\n    background-color: mat-color($mat-teal, 100) !important;\n  }\n\n  .bgc-green-100 {\n    background-color: mat-color($mat-green, 100) !important;\n  }\n\n  .bgc-light-green-100 {\n    background-color: mat-color($mat-light-green, 100) !important;\n  }\n\n  .bgc-lime-100 {\n    background-color: mat-color($mat-lime, 100) !important;\n  }\n\n  .bgc-yellow-100 {\n    background-color: mat-color($mat-yellow, 100) !important;\n  }\n\n  .bgc-amber-100 {\n    background-color: mat-color($mat-amber, 100) !important;\n  }\n\n  .bgc-orange-100 {\n    background-color: mat-color($mat-orange, 100) !important;\n  }\n\n  .bgc-deep-orange-100 {\n    background-color: mat-color($mat-deep-orange, 100) !important;\n  }\n\n  .bgc-brown-100 {\n    background-color: mat-color($mat-brown, 100) !important;\n  }\n\n  .bgc-grey-100 {\n    background-color: mat-color($mat-grey, 100) !important;\n  }\n\n  .bgc-blue-grey-100 {\n    background-color: mat-color($mat-blue-grey, 100) !important;\n  }\n\n  // 200\n  .bgc-red-200 {\n    background-color: mat-color($mat-red, 200) !important;\n  }\n\n  .bgc-pink-200 {\n    background-color: mat-color($mat-pink, 200) !important;\n  }\n\n  .bgc-purple-200 {\n    background-color: mat-color($mat-purple, 200) !important;\n  }\n\n  .bgc-deep-purple-200 {\n    background-color: mat-color($mat-deep-purple, 200) !important;\n  }\n\n  .bgc-indigo-200 {\n    background-color: mat-color($mat-indigo, 200) !important;\n  }\n\n  .bgc-blue-200 {\n    background-color: mat-color($mat-blue, 200) !important;\n  }\n\n  .bgc-light-blue-200 {\n    background-color: mat-color($mat-light-blue, 200) !important;\n  }\n\n  .bgc-cyan-200 {\n    background-color: mat-color($mat-cyan, 200) !important;\n  }\n\n  .bgc-teal-200 {\n    background-color: mat-color($mat-teal, 200) !important;\n  }\n\n  .bgc-green-200 {\n    background-color: mat-color($mat-green, 200) !important;\n  }\n\n  .bgc-light-green-200 {\n    background-color: mat-color($mat-light-green, 200) !important;\n  }\n\n  .bgc-lime-200 {\n    background-color: mat-color($mat-lime, 200) !important;\n  }\n\n  .bgc-yellow-200 {\n    background-color: mat-color($mat-yellow, 200) !important;\n  }\n\n  .bgc-amber-200 {\n    background-color: mat-color($mat-amber, 200) !important;\n  }\n\n  .bgc-orange-200 {\n    background-color: mat-color($mat-orange, 200) !important;\n  }\n\n  .bgc-deep-orange-200 {\n    background-color: mat-color($mat-deep-orange, 200) !important;\n  }\n\n  .bgc-brown-200 {\n    background-color: mat-color($mat-brown, 200) !important;\n  }\n\n  .bgc-grey-200 {\n    background-color: mat-color($mat-grey, 200) !important;\n  }\n\n  .bgc-blue-grey-200 {\n    background-color: mat-color($mat-blue-grey, 200) !important;\n  }\n\n  // 300\n  .bgc-red-300 {\n    background-color: mat-color($mat-red, 300) !important;\n  }\n\n  .bgc-pink-300 {\n    background-color: mat-color($mat-pink, 300) !important;\n  }\n\n  .bgc-purple-300 {\n    background-color: mat-color($mat-purple, 300) !important;\n  }\n\n  .bgc-deep-purple-300 {\n    background-color: mat-color($mat-deep-purple, 300) !important;\n  }\n\n  .bgc-indigo-300 {\n    background-color: mat-color($mat-indigo, 300) !important;\n  }\n\n  .bgc-blue-300 {\n    background-color: mat-color($mat-blue, 300) !important;\n  }\n\n  .bgc-light-blue-300 {\n    background-color: mat-color($mat-light-blue, 300) !important;\n  }\n\n  .bgc-cyan-300 {\n    background-color: mat-color($mat-cyan, 300) !important;\n  }\n\n  .bgc-teal-300 {\n    background-color: mat-color($mat-teal, 300) !important;\n  }\n\n  .bgc-green-300 {\n    background-color: mat-color($mat-green, 300) !important;\n  }\n\n  .bgc-light-green-300 {\n    background-color: mat-color($mat-light-green, 300) !important;\n  }\n\n  .bgc-lime-300 {\n    background-color: mat-color($mat-lime, 300) !important;\n  }\n\n  .bgc-yellow-300 {\n    background-color: mat-color($mat-yellow, 300) !important;\n  }\n\n  .bgc-amber-300 {\n    background-color: mat-color($mat-amber, 300) !important;\n  }\n\n  .bgc-orange-300 {\n    background-color: mat-color($mat-orange, 300) !important;\n  }\n\n  .bgc-deep-orange-300 {\n    background-color: mat-color($mat-deep-orange, 300) !important;\n  }\n\n  .bgc-brown-300 {\n    background-color: mat-color($mat-brown, 300) !important;\n  }\n\n  .bgc-grey-300 {\n    background-color: mat-color($mat-grey, 300) !important;\n  }\n\n  .bgc-blue-grey-300 {\n    background-color: mat-color($mat-blue-grey, 300) !important;\n  }\n\n  // 400\n  .bgc-red-400 {\n    background-color: mat-color($mat-red, 400) !important;\n  }\n\n  .bgc-pink-400 {\n    background-color: mat-color($mat-pink, 400) !important;\n  }\n\n  .bgc-purple-400 {\n    background-color: mat-color($mat-purple, 400) !important;\n  }\n\n  .bgc-deep-purple-400 {\n    background-color: mat-color($mat-deep-purple, 400) !important;\n  }\n\n  .bgc-indigo-400 {\n    background-color: mat-color($mat-indigo, 400) !important;\n  }\n\n  .bgc-blue-400 {\n    background-color: mat-color($mat-blue, 400) !important;\n  }\n\n  .bgc-light-blue-400 {\n    background-color: mat-color($mat-light-blue, 400) !important;\n  }\n\n  .bgc-cyan-400 {\n    background-color: mat-color($mat-cyan, 400) !important;\n  }\n\n  .bgc-teal-400 {\n    background-color: mat-color($mat-teal, 400) !important;\n  }\n\n  .bgc-green-400 {\n    background-color: mat-color($mat-green, 400) !important;\n  }\n\n  .bgc-light-green-400 {\n    background-color: mat-color($mat-light-green, 400) !important;\n  }\n\n  .bgc-lime-400 {\n    background-color: mat-color($mat-lime, 400) !important;\n  }\n\n  .bgc-yellow-400 {\n    background-color: mat-color($mat-yellow, 400) !important;\n  }\n\n  .bgc-amber-400 {\n    background-color: mat-color($mat-amber, 400) !important;\n  }\n\n  .bgc-orange-400 {\n    background-color: mat-color($mat-orange, 400) !important;\n  }\n\n  .bgc-deep-orange-400 {\n    background-color: mat-color($mat-deep-orange, 400) !important;\n  }\n\n  .bgc-brown-400 {\n    background-color: mat-color($mat-brown, 400) !important;\n  }\n\n  .bgc-grey-400 {\n    background-color: mat-color($mat-grey, 400) !important;\n  }\n\n  .bgc-blue-grey-400 {\n    background-color: mat-color($mat-blue-grey, 400) !important;\n  }\n\n  // 500\n  .bgc-red-500 {\n    background-color: mat-color($mat-red, 500) !important;\n  }\n\n  .bgc-pink-500 {\n    background-color: mat-color($mat-pink, 500) !important;\n  }\n\n  .bgc-purple-500 {\n    background-color: mat-color($mat-purple, 500) !important;\n  }\n\n  .bgc-deep-purple-500 {\n    background-color: mat-color($mat-deep-purple, 500) !important;\n  }\n\n  .bgc-indigo-500 {\n    background-color: mat-color($mat-indigo, 500) !important;\n  }\n\n  .bgc-blue-500 {\n    background-color: mat-color($mat-blue, 500) !important;\n  }\n\n  .bgc-light-blue-500 {\n    background-color: mat-color($mat-light-blue, 500) !important;\n  }\n\n  .bgc-cyan-500 {\n    background-color: mat-color($mat-cyan, 500) !important;\n  }\n\n  .bgc-teal-500 {\n    background-color: mat-color($mat-teal, 500) !important;\n  }\n\n  .bgc-green-500 {\n    background-color: mat-color($mat-green, 500) !important;\n  }\n\n  .bgc-light-green-500 {\n    background-color: mat-color($mat-light-green, 500) !important;\n  }\n\n  .bgc-lime-500 {\n    background-color: mat-color($mat-lime, 500) !important;\n  }\n\n  .bgc-yellow-500 {\n    background-color: mat-color($mat-yellow, 500) !important;\n  }\n\n  .bgc-amber-500 {\n    background-color: mat-color($mat-amber, 500) !important;\n  }\n\n  .bgc-orange-500 {\n    background-color: mat-color($mat-orange, 500) !important;\n  }\n\n  .bgc-deep-orange-500 {\n    background-color: mat-color($mat-deep-orange, 500) !important;\n  }\n\n  .bgc-brown-500 {\n    background-color: mat-color($mat-brown, 500) !important;\n  }\n\n  .bgc-grey-500 {\n    background-color: mat-color($mat-grey, 500) !important;\n  }\n\n  .bgc-blue-grey-500 {\n    background-color: mat-color($mat-blue-grey, 500) !important;\n  }\n\n  // 600\n  .bgc-red-600 {\n    background-color: mat-color($mat-red, 600) !important;\n  }\n\n  .bgc-pink-600 {\n    background-color: mat-color($mat-pink, 600) !important;\n  }\n\n  .bgc-purple-600 {\n    background-color: mat-color($mat-purple, 600) !important;\n  }\n\n  .bgc-deep-purple-600 {\n    background-color: mat-color($mat-deep-purple, 600) !important;\n  }\n\n  .bgc-indigo-600 {\n    background-color: mat-color($mat-indigo, 600) !important;\n  }\n\n  .bgc-blue-600 {\n    background-color: mat-color($mat-blue, 600) !important;\n  }\n\n  .bgc-light-blue-600 {\n    background-color: mat-color($mat-light-blue, 600) !important;\n  }\n\n  .bgc-cyan-600 {\n    background-color: mat-color($mat-cyan, 600) !important;\n  }\n\n  .bgc-teal-600 {\n    background-color: mat-color($mat-teal, 600) !important;\n  }\n\n  .bgc-green-600 {\n    background-color: mat-color($mat-green, 600) !important;\n  }\n\n  .bgc-light-green-600 {\n    background-color: mat-color($mat-light-green, 600) !important;\n  }\n\n  .bgc-lime-600 {\n    background-color: mat-color($mat-lime, 600) !important;\n  }\n\n  .bgc-yellow-600 {\n    background-color: mat-color($mat-yellow, 600) !important;\n  }\n\n  .bgc-amber-600 {\n    background-color: mat-color($mat-amber, 600) !important;\n  }\n\n  .bgc-orange-600 {\n    background-color: mat-color($mat-orange, 600) !important;\n  }\n\n  .bgc-deep-orange-600 {\n    background-color: mat-color($mat-deep-orange, 600) !important;\n  }\n\n  .bgc-brown-600 {\n    background-color: mat-color($mat-brown, 600) !important;\n  }\n\n  .bgc-grey-600 {\n    background-color: mat-color($mat-grey, 600) !important;\n  }\n\n  .bgc-blue-grey-600 {\n    background-color: mat-color($mat-blue-grey, 600) !important;\n  }\n\n  // 700\n  .bgc-red-700 {\n    background-color: mat-color($mat-red, 700) !important;\n  }\n\n  .bgc-pink-700 {\n    background-color: mat-color($mat-pink, 700) !important;\n  }\n\n  .bgc-purple-700 {\n    background-color: mat-color($mat-purple, 700) !important;\n  }\n\n  .bgc-deep-purple-700 {\n    background-color: mat-color($mat-deep-purple, 700) !important;\n  }\n\n  .bgc-indigo-700 {\n    background-color: mat-color($mat-indigo, 700) !important;\n  }\n\n  .bgc-blue-700 {\n    background-color: mat-color($mat-blue, 700) !important;\n  }\n\n  .bgc-light-blue-700 {\n    background-color: mat-color($mat-light-blue, 700) !important;\n  }\n\n  .bgc-cyan-700 {\n    background-color: mat-color($mat-cyan, 700) !important;\n  }\n\n  .bgc-teal-700 {\n    background-color: mat-color($mat-teal, 700) !important;\n  }\n\n  .bgc-green-700 {\n    background-color: mat-color($mat-green, 700) !important;\n  }\n\n  .bgc-light-green-700 {\n    background-color: mat-color($mat-light-green, 700) !important;\n  }\n\n  .bgc-lime-700 {\n    background-color: mat-color($mat-lime, 700) !important;\n  }\n\n  .bgc-yellow-700 {\n    background-color: mat-color($mat-yellow, 700) !important;\n  }\n\n  .bgc-amber-700 {\n    background-color: mat-color($mat-amber, 700) !important;\n  }\n\n  .bgc-orange-700 {\n    background-color: mat-color($mat-orange, 700) !important;\n  }\n\n  .bgc-deep-orange-700 {\n    background-color: mat-color($mat-deep-orange, 700) !important;\n  }\n\n  .bgc-brown-700 {\n    background-color: mat-color($mat-brown, 700) !important;\n  }\n\n  .bgc-grey-700 {\n    background-color: mat-color($mat-grey, 700) !important;\n  }\n\n  .bgc-blue-grey-700 {\n    background-color: mat-color($mat-blue-grey, 700) !important;\n  }\n\n  // 800\n  .bgc-red-800 {\n    background-color: mat-color($mat-red, 800) !important;\n  }\n\n  .bgc-pink-800 {\n    background-color: mat-color($mat-pink, 800) !important;\n  }\n\n  .bgc-purple-800 {\n    background-color: mat-color($mat-purple, 800) !important;\n  }\n\n  .bgc-deep-purple-800 {\n    background-color: mat-color($mat-deep-purple, 800) !important;\n  }\n\n  .bgc-indigo-800 {\n    background-color: mat-color($mat-indigo, 800) !important;\n  }\n\n  .bgc-blue-800 {\n    background-color: mat-color($mat-blue, 800) !important;\n  }\n\n  .bgc-light-blue-800 {\n    background-color: mat-color($mat-light-blue, 800) !important;\n  }\n\n  .bgc-cyan-800 {\n    background-color: mat-color($mat-cyan, 800) !important;\n  }\n\n  .bgc-teal-800 {\n    background-color: mat-color($mat-teal, 800) !important;\n  }\n\n  .bgc-green-800 {\n    background-color: mat-color($mat-green, 800) !important;\n  }\n\n  .bgc-light-green-800 {\n    background-color: mat-color($mat-light-green, 800) !important;\n  }\n\n  .bgc-lime-800 {\n    background-color: mat-color($mat-lime, 800) !important;\n  }\n\n  .bgc-yellow-800 {\n    background-color: mat-color($mat-yellow, 800) !important;\n  }\n\n  .bgc-amber-800 {\n    background-color: mat-color($mat-amber, 800) !important;\n  }\n\n  .bgc-orange-800 {\n    background-color: mat-color($mat-orange, 800) !important;\n  }\n\n  .bgc-deep-orange-800 {\n    background-color: mat-color($mat-deep-orange, 800) !important;\n  }\n\n  .bgc-brown-800 {\n    background-color: mat-color($mat-brown, 800) !important;\n  }\n\n  .bgc-grey-800 {\n    background-color: mat-color($mat-grey, 800) !important;\n  }\n\n  .bgc-blue-grey-800 {\n    background-color: mat-color($mat-blue-grey, 800) !important;\n  }\n\n  // 900\n  .bgc-red-900 {\n    background-color: mat-color($mat-red, 900) !important;\n  }\n\n  .bgc-pink-900 {\n    background-color: mat-color($mat-pink, 900) !important;\n  }\n\n  .bgc-purple-900 {\n    background-color: mat-color($mat-purple, 900) !important;\n  }\n\n  .bgc-deep-purple-900 {\n    background-color: mat-color($mat-deep-purple, 900) !important;\n  }\n\n  .bgc-indigo-900 {\n    background-color: mat-color($mat-indigo, 900) !important;\n  }\n\n  .bgc-blue-900 {\n    background-color: mat-color($mat-blue, 900) !important;\n  }\n\n  .bgc-light-blue-900 {\n    background-color: mat-color($mat-light-blue, 900) !important;\n  }\n\n  .bgc-cyan-900 {\n    background-color: mat-color($mat-cyan, 900) !important;\n  }\n\n  .bgc-teal-900 {\n    background-color: mat-color($mat-teal, 900) !important;\n  }\n\n  .bgc-green-900 {\n    background-color: mat-color($mat-green, 900) !important;\n  }\n\n  .bgc-light-green-900 {\n    background-color: mat-color($mat-light-green, 900) !important;\n  }\n\n  .bgc-lime-900 {\n    background-color: mat-color($mat-lime, 900) !important;\n  }\n\n  .bgc-yellow-900 {\n    background-color: mat-color($mat-yellow, 900) !important;\n  }\n\n  .bgc-amber-900 {\n    background-color: mat-color($mat-amber, 900) !important;\n  }\n\n  .bgc-orange-900 {\n    background-color: mat-color($mat-orange, 900) !important;\n  }\n\n  .bgc-deep-orange-900 {\n    background-color: mat-color($mat-deep-orange, 900) !important;\n  }\n\n  .bgc-brown-900 {\n    background-color: mat-color($mat-brown, 900) !important;\n  }\n\n  .bgc-grey-900 {\n    background-color: mat-color($mat-grey, 900) !important;\n  }\n\n  .bgc-blue-grey-900 {\n    background-color: mat-color($mat-blue-grey, 900) !important;\n  }\n\n  // A100\n  .bgc-red-A100 {\n    background-color: mat-color($mat-red, A100) !important;\n  }\n\n  .bgc-pink-A100 {\n    background-color: mat-color($mat-pink, A100) !important;\n  }\n\n  .bgc-purple-A100 {\n    background-color: mat-color($mat-purple, A100) !important;\n  }\n\n  .bgc-deep-purple-A100 {\n    background-color: mat-color($mat-deep-purple, A100) !important;\n  }\n\n  .bgc-indigo-A100 {\n    background-color: mat-color($mat-indigo, A100) !important;\n  }\n\n  .bgc-blue-A100 {\n    background-color: mat-color($mat-blue, A100) !important;\n  }\n\n  .bgc-light-blue-A100 {\n    background-color: mat-color($mat-light-blue, A100) !important;\n  }\n\n  .bgc-cyan-A100 {\n    background-color: mat-color($mat-cyan, A100) !important;\n  }\n\n  .bgc-teal-A100 {\n    background-color: mat-color($mat-teal, A100) !important;\n  }\n\n  .bgc-green-A100 {\n    background-color: mat-color($mat-green, A100) !important;\n  }\n\n  .bgc-light-green-A100 {\n    background-color: mat-color($mat-light-green, A100) !important;\n  }\n\n  .bgc-lime-A100 {\n    background-color: mat-color($mat-lime, A100) !important;\n  }\n\n  .bgc-yellow-A100 {\n    background-color: mat-color($mat-yellow, A100) !important;\n  }\n\n  .bgc-amber-A100 {\n    background-color: mat-color($mat-amber, A100) !important;\n  }\n\n  .bgc-orange-A100 {\n    background-color: mat-color($mat-orange, A100) !important;\n  }\n\n  .bgc-deep-orange-A100 {\n    background-color: mat-color($mat-deep-orange, A100) !important;\n  }\n\n  // A200\n  .bgc-red-A200 {\n    background-color: mat-color($mat-red, A200) !important;\n  }\n\n  .bgc-pink-A200 {\n    background-color: mat-color($mat-pink, A200) !important;\n  }\n\n  .bgc-purple-A200 {\n    background-color: mat-color($mat-purple, A200) !important;\n  }\n\n  .bgc-deep-purple-A200 {\n    background-color: mat-color($mat-deep-purple, A200) !important;\n  }\n\n  .bgc-indigo-A200 {\n    background-color: mat-color($mat-indigo, A200) !important;\n  }\n\n  .bgc-blue-A200 {\n    background-color: mat-color($mat-blue, A200) !important;\n  }\n\n  .bgc-light-blue-A200 {\n    background-color: mat-color($mat-light-blue, A200) !important;\n  }\n\n  .bgc-cyan-A200 {\n    background-color: mat-color($mat-cyan, A200) !important;\n  }\n\n  .bgc-teal-A200 {\n    background-color: mat-color($mat-teal, A200) !important;\n  }\n\n  .bgc-green-A200 {\n    background-color: mat-color($mat-green, A200) !important;\n  }\n\n  .bgc-light-green-A200 {\n    background-color: mat-color($mat-light-green, A200) !important;\n  }\n\n  .bgc-lime-A200 {\n    background-color: mat-color($mat-lime, A200) !important;\n  }\n\n  .bgc-yellow-A200 {\n    background-color: mat-color($mat-yellow, A200) !important;\n  }\n\n  .bgc-amber-A200 {\n    background-color: mat-color($mat-amber, A200) !important;\n  }\n\n  .bgc-orange-A200 {\n    background-color: mat-color($mat-orange, A200) !important;\n  }\n\n  .bgc-deep-orange-A200 {\n    background-color: mat-color($mat-deep-orange, A200) !important;\n  }\n\n  // A400\n  .bgc-red-A400 {\n    background-color: mat-color($mat-red, A400) !important;\n  }\n\n  .bgc-pink-A400 {\n    background-color: mat-color($mat-pink, A400) !important;\n  }\n\n  .bgc-purple-A400 {\n    background-color: mat-color($mat-purple, A400) !important;\n  }\n\n  .bgc-deep-purple-A400 {\n    background-color: mat-color($mat-deep-purple, A400) !important;\n  }\n\n  .bgc-indigo-A400 {\n    background-color: mat-color($mat-indigo, A400) !important;\n  }\n\n  .bgc-blue-A400 {\n    background-color: mat-color($mat-blue, A400) !important;\n  }\n\n  .bgc-light-blue-A400 {\n    background-color: mat-color($mat-light-blue, A400) !important;\n  }\n\n  .bgc-cyan-A400 {\n    background-color: mat-color($mat-cyan, A400) !important;\n  }\n\n  .bgc-teal-A400 {\n    background-color: mat-color($mat-teal, A400) !important;\n  }\n\n  .bgc-green-A400 {\n    background-color: mat-color($mat-green, A400) !important;\n  }\n\n  .bgc-light-green-A400 {\n    background-color: mat-color($mat-light-green, A400) !important;\n  }\n\n  .bgc-lime-A400 {\n    background-color: mat-color($mat-lime, A400) !important;\n  }\n\n  .bgc-yellow-A400 {\n    background-color: mat-color($mat-yellow, A400) !important;\n  }\n\n  .bgc-amber-A400 {\n    background-color: mat-color($mat-amber, A400) !important;\n  }\n\n  .bgc-orange-A400 {\n    background-color: mat-color($mat-orange, A400) !important;\n  }\n\n  .bgc-deep-orange-A400 {\n    background-color: mat-color($mat-deep-orange, A400) !important;\n  }\n\n  // A700\n  .bgc-red-A700 {\n    background-color: mat-color($mat-red, A700) !important;\n  }\n\n  .bgc-pink-A700 {\n    background-color: mat-color($mat-pink, A700) !important;\n  }\n\n  .bgc-purple-A700 {\n    background-color: mat-color($mat-purple, A700) !important;\n  }\n\n  .bgc-deep-purple-A700 {\n    background-color: mat-color($mat-deep-purple, A700) !important;\n  }\n\n  .bgc-indigo-A700 {\n    background-color: mat-color($mat-indigo, A700) !important;\n  }\n\n  .bgc-blue-A700 {\n    background-color: mat-color($mat-blue, A700) !important;\n  }\n\n  .bgc-light-blue-A700 {\n    background-color: mat-color($mat-light-blue, A700) !important;\n  }\n\n  .bgc-cyan-A700 {\n    background-color: mat-color($mat-cyan, A700) !important;\n  }\n\n  .bgc-teal-A700 {\n    background-color: mat-color($mat-teal, A700) !important;\n  }\n\n  .bgc-green-A700 {\n    background-color: mat-color($mat-green, A700) !important;\n  }\n\n  .bgc-light-green-A700 {\n    background-color: mat-color($mat-light-green, A700) !important;\n  }\n\n  .bgc-lime-A700 {\n    background-color: mat-color($mat-lime, A700) !important;\n  }\n\n  .bgc-yellow-A700 {\n    background-color: mat-color($mat-yellow, A700) !important;\n  }\n\n  .bgc-amber-A700 {\n    background-color: mat-color($mat-amber, A700) !important;\n  }\n\n  .bgc-orange-A700 {\n    background-color: mat-color($mat-orange, A700) !important;\n  }\n\n  .bgc-deep-orange-A700 {\n    background-color: mat-color($mat-deep-orange, A700) !important;\n  }\n\n  // Black\n  .bgc-black {\n    background-color: rgba(black, 87) !important;\n  }\n\n  .bgc-black-1 {\n    background-color: rgba(black, 54) !important;\n  }\n\n  .bgc-black-2 {\n    background-color: rgba(black, 38) !important;\n  }\n\n  .bgc-black-3 {\n    background-color: rgba(black, 0.12) !important;\n  }\n\n  .bgc-black-4 {\n    background-color: black !important;\n  }\n\n  // White\n  .bgc-white {\n    background-color: rgba(white, 0.7) !important;\n  }\n\n  .bgc-white-1 {\n    background-color: rgba(white, 0.3) !important;\n  }\n\n  .bgc-white-2 {\n    background-color: rgba(white, 0.3) !important;\n  }\n\n  .bgc-white-3 {\n    background-color: rgba(white, 0.12) !important;\n  }\n\n  .bgc-white-4 {\n    background-color: white !important;\n  }\n\n  // Fill color\n\n  // 50\n  .fill-red-50 {\n    fill: mat-color($mat-red, 50) !important;\n  }\n\n  .fill-pink-50 {\n    fill: mat-color($mat-pink, 50) !important;\n  }\n\n  .fill-purple-50 {\n    fill: mat-color($mat-purple, 50) !important;\n  }\n\n  .fill-deep-purple-50 {\n    fill: mat-color($mat-deep-purple, 50) !important;\n  }\n\n  .fill-indigo-50 {\n    fill: mat-color($mat-indigo, 50) !important;\n  }\n\n  .fill-blue-50 {\n    fill: mat-color($mat-blue, 50) !important;\n  }\n\n  .fill-light-blue-50 {\n    fill: mat-color($mat-light-blue, 50) !important;\n  }\n\n  .fill-cyan-50 {\n    fill: mat-color($mat-cyan, 50) !important;\n  }\n\n  .fill-teal-50 {\n    fill: mat-color($mat-teal, 50) !important;\n  }\n\n  .fill-green-50 {\n    fill: mat-color($mat-green, 50) !important;\n  }\n\n  .fill-light-green-50 {\n    fill: mat-color($mat-light-green, 50) !important;\n  }\n\n  .fill-lime-50 {\n    fill: mat-color($mat-lime, 50) !important;\n  }\n\n  .fill-yellow-50 {\n    fill: mat-color($mat-yellow, 50) !important;\n  }\n\n  .fill-amber-50 {\n    fill: mat-color($mat-amber, 50) !important;\n  }\n\n  .fill-orange-50 {\n    fill: mat-color($mat-orange, 50) !important;\n  }\n\n  .fill-deep-orange-50 {\n    fill: mat-color($mat-deep-orange, 50) !important;\n  }\n\n  .fill-brown-50 {\n    fill: mat-color($mat-brown, 50) !important;\n  }\n\n  .fill-grey-50 {\n    fill: mat-color($mat-grey, 50) !important;\n  }\n\n  .fill-blue-grey-50 {\n    fill: mat-color($mat-blue-grey, 50) !important;\n  }\n\n  // 100\n  .fill-red-100 {\n    fill: mat-color($mat-red, 100) !important;\n  }\n\n  .fill-pink-100 {\n    fill: mat-color($mat-pink, 100) !important;\n  }\n\n  .fill-purple-100 {\n    fill: mat-color($mat-purple, 100) !important;\n  }\n\n  .fill-deep-purple-100 {\n    fill: mat-color($mat-deep-purple, 100) !important;\n  }\n\n  .fill-indigo-100 {\n    fill: mat-color($mat-indigo, 100) !important;\n  }\n\n  .fill-blue-100 {\n    fill: mat-color($mat-blue, 100) !important;\n  }\n\n  .fill-light-blue-100 {\n    fill: mat-color($mat-light-blue, 100) !important;\n  }\n\n  .fill-cyan-100 {\n    fill: mat-color($mat-cyan, 100) !important;\n  }\n\n  .fill-teal-100 {\n    fill: mat-color($mat-teal, 100) !important;\n  }\n\n  .fill-green-100 {\n    fill: mat-color($mat-green, 100) !important;\n  }\n\n  .fill-light-green-100 {\n    fill: mat-color($mat-light-green, 100) !important;\n  }\n\n  .fill-lime-100 {\n    fill: mat-color($mat-lime, 100) !important;\n  }\n\n  .fill-yellow-100 {\n    fill: mat-color($mat-yellow, 100) !important;\n  }\n\n  .fill-amber-100 {\n    fill: mat-color($mat-amber, 100) !important;\n  }\n\n  .fill-orange-100 {\n    fill: mat-color($mat-orange, 100) !important;\n  }\n\n  .fill-deep-orange-100 {\n    fill: mat-color($mat-deep-orange, 100) !important;\n  }\n\n  .fill-brown-100 {\n    fill: mat-color($mat-brown, 100) !important;\n  }\n\n  .fill-grey-100 {\n    fill: mat-color($mat-grey, 100) !important;\n  }\n\n  .fill-blue-grey-100 {\n    fill: mat-color($mat-blue-grey, 100) !important;\n  }\n\n  // 200\n  .fill-red-200 {\n    fill: mat-color($mat-red, 200) !important;\n  }\n\n  .fill-pink-200 {\n    fill: mat-color($mat-pink, 200) !important;\n  }\n\n  .fill-purple-200 {\n    fill: mat-color($mat-purple, 200) !important;\n  }\n\n  .fill-deep-purple-200 {\n    fill: mat-color($mat-deep-purple, 200) !important;\n  }\n\n  .fill-indigo-200 {\n    fill: mat-color($mat-indigo, 200) !important;\n  }\n\n  .fill-blue-200 {\n    fill: mat-color($mat-blue, 200) !important;\n  }\n\n  .fill-light-blue-200 {\n    fill: mat-color($mat-light-blue, 200) !important;\n  }\n\n  .fill-cyan-200 {\n    fill: mat-color($mat-cyan, 200) !important;\n  }\n\n  .fill-teal-200 {\n    fill: mat-color($mat-teal, 200) !important;\n  }\n\n  .fill-green-200 {\n    fill: mat-color($mat-green, 200) !important;\n  }\n\n  .fill-light-green-200 {\n    fill: mat-color($mat-light-green, 200) !important;\n  }\n\n  .fill-lime-200 {\n    fill: mat-color($mat-lime, 200) !important;\n  }\n\n  .fill-yellow-200 {\n    fill: mat-color($mat-yellow, 200) !important;\n  }\n\n  .fill-amber-200 {\n    fill: mat-color($mat-amber, 200) !important;\n  }\n\n  .fill-orange-200 {\n    fill: mat-color($mat-orange, 200) !important;\n  }\n\n  .fill-deep-orange-200 {\n    fill: mat-color($mat-deep-orange, 200) !important;\n  }\n\n  .fill-brown-200 {\n    fill: mat-color($mat-brown, 200) !important;\n  }\n\n  .fill-grey-200 {\n    fill: mat-color($mat-grey, 200) !important;\n  }\n\n  .fill-blue-grey-200 {\n    fill: mat-color($mat-blue-grey, 200) !important;\n  }\n\n  // 300\n  .fill-red-300 {\n    fill: mat-color($mat-red, 300) !important;\n  }\n\n  .fill-pink-300 {\n    fill: mat-color($mat-pink, 300) !important;\n  }\n\n  .fill-purple-300 {\n    fill: mat-color($mat-purple, 300) !important;\n  }\n\n  .fill-deep-purple-300 {\n    fill: mat-color($mat-deep-purple, 300) !important;\n  }\n\n  .fill-indigo-300 {\n    fill: mat-color($mat-indigo, 300) !important;\n  }\n\n  .fill-blue-300 {\n    fill: mat-color($mat-blue, 300) !important;\n  }\n\n  .fill-light-blue-300 {\n    fill: mat-color($mat-light-blue, 300) !important;\n  }\n\n  .fill-cyan-300 {\n    fill: mat-color($mat-cyan, 300) !important;\n  }\n\n  .fill-teal-300 {\n    fill: mat-color($mat-teal, 300) !important;\n  }\n\n  .fill-green-300 {\n    fill: mat-color($mat-green, 300) !important;\n  }\n\n  .fill-light-green-300 {\n    fill: mat-color($mat-light-green, 300) !important;\n  }\n\n  .fill-lime-300 {\n    fill: mat-color($mat-lime, 300) !important;\n  }\n\n  .fill-yellow-300 {\n    fill: mat-color($mat-yellow, 300) !important;\n  }\n\n  .fill-amber-300 {\n    fill: mat-color($mat-amber, 300) !important;\n  }\n\n  .fill-orange-300 {\n    fill: mat-color($mat-orange, 300) !important;\n  }\n\n  .fill-deep-orange-300 {\n    fill: mat-color($mat-deep-orange, 300) !important;\n  }\n\n  .fill-brown-300 {\n    fill: mat-color($mat-brown, 300) !important;\n  }\n\n  .fill-grey-300 {\n    fill: mat-color($mat-grey, 300) !important;\n  }\n\n  .fill-blue-grey-300 {\n    fill: mat-color($mat-blue-grey, 300) !important;\n  }\n\n  // 400\n  .fill-red-400 {\n    fill: mat-color($mat-red, 400) !important;\n  }\n\n  .fill-pink-400 {\n    fill: mat-color($mat-pink, 400) !important;\n  }\n\n  .fill-purple-400 {\n    fill: mat-color($mat-purple, 400) !important;\n  }\n\n  .fill-deep-purple-400 {\n    fill: mat-color($mat-deep-purple, 400) !important;\n  }\n\n  .fill-indigo-400 {\n    fill: mat-color($mat-indigo, 400) !important;\n  }\n\n  .fill-blue-400 {\n    fill: mat-color($mat-blue, 400) !important;\n  }\n\n  .fill-light-blue-400 {\n    fill: mat-color($mat-light-blue, 400) !important;\n  }\n\n  .fill-cyan-400 {\n    fill: mat-color($mat-cyan, 400) !important;\n  }\n\n  .fill-teal-400 {\n    fill: mat-color($mat-teal, 400) !important;\n  }\n\n  .fill-green-400 {\n    fill: mat-color($mat-green, 400) !important;\n  }\n\n  .fill-light-green-400 {\n    fill: mat-color($mat-light-green, 400) !important;\n  }\n\n  .fill-lime-400 {\n    fill: mat-color($mat-lime, 400) !important;\n  }\n\n  .fill-yellow-400 {\n    fill: mat-color($mat-yellow, 400) !important;\n  }\n\n  .fill-amber-400 {\n    fill: mat-color($mat-amber, 400) !important;\n  }\n\n  .fill-orange-400 {\n    fill: mat-color($mat-orange, 400) !important;\n  }\n\n  .fill-deep-orange-400 {\n    fill: mat-color($mat-deep-orange, 400) !important;\n  }\n\n  .fill-brown-400 {\n    fill: mat-color($mat-brown, 400) !important;\n  }\n\n  .fill-grey-400 {\n    fill: mat-color($mat-grey, 400) !important;\n  }\n\n  .fill-blue-grey-400 {\n    fill: mat-color($mat-blue-grey, 400) !important;\n  }\n\n  // 500\n  .fill-red-500 {\n    fill: mat-color($mat-red, 500) !important;\n  }\n\n  .fill-pink-500 {\n    fill: mat-color($mat-pink, 500) !important;\n  }\n\n  .fill-purple-500 {\n    fill: mat-color($mat-purple, 500) !important;\n  }\n\n  .fill-deep-purple-500 {\n    fill: mat-color($mat-deep-purple, 500) !important;\n  }\n\n  .fill-indigo-500 {\n    fill: mat-color($mat-indigo, 500) !important;\n  }\n\n  .fill-blue-500 {\n    fill: mat-color($mat-blue, 500) !important;\n  }\n\n  .fill-light-blue-500 {\n    fill: mat-color($mat-light-blue, 500) !important;\n  }\n\n  .fill-cyan-500 {\n    fill: mat-color($mat-cyan, 500) !important;\n  }\n\n  .fill-teal-500 {\n    fill: mat-color($mat-teal, 500) !important;\n  }\n\n  .fill-green-500 {\n    fill: mat-color($mat-green, 500) !important;\n  }\n\n  .fill-light-green-500 {\n    fill: mat-color($mat-light-green, 500) !important;\n  }\n\n  .fill-lime-500 {\n    fill: mat-color($mat-lime, 500) !important;\n  }\n\n  .fill-yellow-500 {\n    fill: mat-color($mat-yellow, 500) !important;\n  }\n\n  .fill-amber-500 {\n    fill: mat-color($mat-amber, 500) !important;\n  }\n\n  .fill-orange-500 {\n    fill: mat-color($mat-orange, 500) !important;\n  }\n\n  .fill-deep-orange-500 {\n    fill: mat-color($mat-deep-orange, 500) !important;\n  }\n\n  .fill-brown-500 {\n    fill: mat-color($mat-brown, 500) !important;\n  }\n\n  .fill-grey-500 {\n    fill: mat-color($mat-grey, 500) !important;\n  }\n\n  .fill-blue-grey-500 {\n    fill: mat-color($mat-blue-grey, 500) !important;\n  }\n\n  // 600\n  .fill-red-600 {\n    fill: mat-color($mat-red, 600) !important;\n  }\n\n  .fill-pink-600 {\n    fill: mat-color($mat-pink, 600) !important;\n  }\n\n  .fill-purple-600 {\n    fill: mat-color($mat-purple, 600) !important;\n  }\n\n  .fill-deep-purple-600 {\n    fill: mat-color($mat-deep-purple, 600) !important;\n  }\n\n  .fill-indigo-600 {\n    fill: mat-color($mat-indigo, 600) !important;\n  }\n\n  .fill-blue-600 {\n    fill: mat-color($mat-blue, 600) !important;\n  }\n\n  .fill-light-blue-600 {\n    fill: mat-color($mat-light-blue, 600) !important;\n  }\n\n  .fill-cyan-600 {\n    fill: mat-color($mat-cyan, 600) !important;\n  }\n\n  .fill-teal-600 {\n    fill: mat-color($mat-teal, 600) !important;\n  }\n\n  .fill-green-600 {\n    fill: mat-color($mat-green, 600) !important;\n  }\n\n  .fill-light-green-600 {\n    fill: mat-color($mat-light-green, 600) !important;\n  }\n\n  .fill-lime-600 {\n    fill: mat-color($mat-lime, 600) !important;\n  }\n\n  .fill-yellow-600 {\n    fill: mat-color($mat-yellow, 600) !important;\n  }\n\n  .fill-amber-600 {\n    fill: mat-color($mat-amber, 600) !important;\n  }\n\n  .fill-orange-600 {\n    fill: mat-color($mat-orange, 600) !important;\n  }\n\n  .fill-deep-orange-600 {\n    fill: mat-color($mat-deep-orange, 600) !important;\n  }\n\n  .fill-brown-600 {\n    fill: mat-color($mat-brown, 600) !important;\n  }\n\n  .fill-grey-600 {\n    fill: mat-color($mat-grey, 600) !important;\n  }\n\n  .fill-blue-grey-600 {\n    fill: mat-color($mat-blue-grey, 600) !important;\n  }\n\n  // 700\n  .fill-red-700 {\n    fill: mat-color($mat-red, 700) !important;\n  }\n\n  .fill-pink-700 {\n    fill: mat-color($mat-pink, 700) !important;\n  }\n\n  .fill-purple-700 {\n    fill: mat-color($mat-purple, 700) !important;\n  }\n\n  .fill-deep-purple-700 {\n    fill: mat-color($mat-deep-purple, 700) !important;\n  }\n\n  .fill-indigo-700 {\n    fill: mat-color($mat-indigo, 700) !important;\n  }\n\n  .fill-blue-700 {\n    fill: mat-color($mat-blue, 700) !important;\n  }\n\n  .fill-light-blue-700 {\n    fill: mat-color($mat-light-blue, 700) !important;\n  }\n\n  .fill-cyan-700 {\n    fill: mat-color($mat-cyan, 700) !important;\n  }\n\n  .fill-teal-700 {\n    fill: mat-color($mat-teal, 700) !important;\n  }\n\n  .fill-green-700 {\n    fill: mat-color($mat-green, 700) !important;\n  }\n\n  .fill-light-green-700 {\n    fill: mat-color($mat-light-green, 700) !important;\n  }\n\n  .fill-lime-700 {\n    fill: mat-color($mat-lime, 700) !important;\n  }\n\n  .fill-yellow-700 {\n    fill: mat-color($mat-yellow, 700) !important;\n  }\n\n  .fill-amber-700 {\n    fill: mat-color($mat-amber, 700) !important;\n  }\n\n  .fill-orange-700 {\n    fill: mat-color($mat-orange, 700) !important;\n  }\n\n  .fill-deep-orange-700 {\n    fill: mat-color($mat-deep-orange, 700) !important;\n  }\n\n  .fill-brown-700 {\n    fill: mat-color($mat-brown, 700) !important;\n  }\n\n  .fill-grey-700 {\n    fill: mat-color($mat-grey, 700) !important;\n  }\n\n  .fill-blue-grey-700 {\n    fill: mat-color($mat-blue-grey, 700) !important;\n  }\n\n  // 800\n  .fill-red-800 {\n    fill: mat-color($mat-red, 800) !important;\n  }\n\n  .fill-pink-800 {\n    fill: mat-color($mat-pink, 800) !important;\n  }\n\n  .fill-purple-800 {\n    fill: mat-color($mat-purple, 800) !important;\n  }\n\n  .fill-deep-purple-800 {\n    fill: mat-color($mat-deep-purple, 800) !important;\n  }\n\n  .fill-indigo-800 {\n    fill: mat-color($mat-indigo, 800) !important;\n  }\n\n  .fill-blue-800 {\n    fill: mat-color($mat-blue, 800) !important;\n  }\n\n  .fill-light-blue-800 {\n    fill: mat-color($mat-light-blue, 800) !important;\n  }\n\n  .fill-cyan-800 {\n    fill: mat-color($mat-cyan, 800) !important;\n  }\n\n  .fill-teal-800 {\n    fill: mat-color($mat-teal, 800) !important;\n  }\n\n  .fill-green-800 {\n    fill: mat-color($mat-green, 800) !important;\n  }\n\n  .fill-light-green-800 {\n    fill: mat-color($mat-light-green, 800) !important;\n  }\n\n  .fill-lime-800 {\n    fill: mat-color($mat-lime, 800) !important;\n  }\n\n  .fill-yellow-800 {\n    fill: mat-color($mat-yellow, 800) !important;\n  }\n\n  .fill-amber-800 {\n    fill: mat-color($mat-amber, 800) !important;\n  }\n\n  .fill-orange-800 {\n    fill: mat-color($mat-orange, 800) !important;\n  }\n\n  .fill-deep-orange-800 {\n    fill: mat-color($mat-deep-orange, 800) !important;\n  }\n\n  .fill-brown-800 {\n    fill: mat-color($mat-brown, 800) !important;\n  }\n\n  .fill-grey-800 {\n    fill: mat-color($mat-grey, 800) !important;\n  }\n\n  .fill-blue-grey-800 {\n    fill: mat-color($mat-blue-grey, 800) !important;\n  }\n\n  // 900\n  .fill-red-900 {\n    fill: mat-color($mat-red, 900) !important;\n  }\n\n  .fill-pink-900 {\n    fill: mat-color($mat-pink, 900) !important;\n  }\n\n  .fill-purple-900 {\n    fill: mat-color($mat-purple, 900) !important;\n  }\n\n  .fill-deep-purple-900 {\n    fill: mat-color($mat-deep-purple, 900) !important;\n  }\n\n  .fill-indigo-900 {\n    fill: mat-color($mat-indigo, 900) !important;\n  }\n\n  .fill-blue-900 {\n    fill: mat-color($mat-blue, 900) !important;\n  }\n\n  .fill-light-blue-900 {\n    fill: mat-color($mat-light-blue, 900) !important;\n  }\n\n  .fill-cyan-900 {\n    fill: mat-color($mat-cyan, 900) !important;\n  }\n\n  .fill-teal-900 {\n    fill: mat-color($mat-teal, 900) !important;\n  }\n\n  .fill-green-900 {\n    fill: mat-color($mat-green, 900) !important;\n  }\n\n  .fill-light-green-900 {\n    fill: mat-color($mat-light-green, 900) !important;\n  }\n\n  .fill-lime-900 {\n    fill: mat-color($mat-lime, 900) !important;\n  }\n\n  .fill-yellow-900 {\n    fill: mat-color($mat-yellow, 900) !important;\n  }\n\n  .fill-amber-900 {\n    fill: mat-color($mat-amber, 900) !important;\n  }\n\n  .fill-orange-900 {\n    fill: mat-color($mat-orange, 900) !important;\n  }\n\n  .fill-deep-orange-900 {\n    fill: mat-color($mat-deep-orange, 900) !important;\n  }\n\n  .fill-brown-900 {\n    fill: mat-color($mat-brown, 900) !important;\n  }\n\n  .fill-grey-900 {\n    fill: mat-color($mat-grey, 900) !important;\n  }\n\n  .fill-blue-grey-900 {\n    fill: mat-color($mat-blue-grey, 900) !important;\n  }\n\n  // A100\n  .fill-red-A100 {\n    fill: mat-color($mat-red, A100) !important;\n  }\n\n  .fill-pink-A100 {\n    fill: mat-color($mat-pink, A100) !important;\n  }\n\n  .fill-purple-A100 {\n    fill: mat-color($mat-purple, A100) !important;\n  }\n\n  .fill-deep-purple-A100 {\n    fill: mat-color($mat-deep-purple, A100) !important;\n  }\n\n  .fill-indigo-A100 {\n    fill: mat-color($mat-indigo, A100) !important;\n  }\n\n  .fill-blue-A100 {\n    fill: mat-color($mat-blue, A100) !important;\n  }\n\n  .fill-light-blue-A100 {\n    fill: mat-color($mat-light-blue, A100) !important;\n  }\n\n  .fill-cyan-A100 {\n    fill: mat-color($mat-cyan, A100) !important;\n  }\n\n  .fill-teal-A100 {\n    fill: mat-color($mat-teal, A100) !important;\n  }\n\n  .fill-green-A100 {\n    fill: mat-color($mat-green, A100) !important;\n  }\n\n  .fill-light-green-A100 {\n    fill: mat-color($mat-light-green, A100) !important;\n  }\n\n  .fill-lime-A100 {\n    fill: mat-color($mat-lime, A100) !important;\n  }\n\n  .fill-yellow-A100 {\n    fill: mat-color($mat-yellow, A100) !important;\n  }\n\n  .fill-amber-A100 {\n    fill: mat-color($mat-amber, A100) !important;\n  }\n\n  .fill-orange-A100 {\n    fill: mat-color($mat-orange, A100) !important;\n  }\n\n  .fill-deep-orange-A100 {\n    fill: mat-color($mat-deep-orange, A100) !important;\n  }\n\n  // A200\n  .fill-red-A200 {\n    fill: mat-color($mat-red, A200) !important;\n  }\n\n  .fill-pink-A200 {\n    fill: mat-color($mat-pink, A200) !important;\n  }\n\n  .fill-purple-A200 {\n    fill: mat-color($mat-purple, A200) !important;\n  }\n\n  .fill-deep-purple-A200 {\n    fill: mat-color($mat-deep-purple, A200) !important;\n  }\n\n  .fill-indigo-A200 {\n    fill: mat-color($mat-indigo, A200) !important;\n  }\n\n  .fill-blue-A200 {\n    fill: mat-color($mat-blue, A200) !important;\n  }\n\n  .fill-light-blue-A200 {\n    fill: mat-color($mat-light-blue, A200) !important;\n  }\n\n  .fill-cyan-A200 {\n    fill: mat-color($mat-cyan, A200) !important;\n  }\n\n  .fill-teal-A200 {\n    fill: mat-color($mat-teal, A200) !important;\n  }\n\n  .fill-green-A200 {\n    fill: mat-color($mat-green, A200) !important;\n  }\n\n  .fill-light-green-A200 {\n    fill: mat-color($mat-light-green, A200) !important;\n  }\n\n  .fill-lime-A200 {\n    fill: mat-color($mat-lime, A200) !important;\n  }\n\n  .fill-yellow-A200 {\n    fill: mat-color($mat-yellow, A200) !important;\n  }\n\n  .fill-amber-A200 {\n    fill: mat-color($mat-amber, A200) !important;\n  }\n\n  .fill-orange-A200 {\n    fill: mat-color($mat-orange, A200) !important;\n  }\n\n  .fill-deep-orange-A200 {\n    fill: mat-color($mat-deep-orange, A200) !important;\n  }\n\n  // A400\n  .fill-red-A400 {\n    fill: mat-color($mat-red, A400) !important;\n  }\n\n  .fill-pink-A400 {\n    fill: mat-color($mat-pink, A400) !important;\n  }\n\n  .fill-purple-A400 {\n    fill: mat-color($mat-purple, A400) !important;\n  }\n\n  .fill-deep-purple-A400 {\n    fill: mat-color($mat-deep-purple, A400) !important;\n  }\n\n  .fill-indigo-A400 {\n    fill: mat-color($mat-indigo, A400) !important;\n  }\n\n  .fill-blue-A400 {\n    fill: mat-color($mat-blue, A400) !important;\n  }\n\n  .fill-light-blue-A400 {\n    fill: mat-color($mat-light-blue, A400) !important;\n  }\n\n  .fill-cyan-A400 {\n    fill: mat-color($mat-cyan, A400) !important;\n  }\n\n  .fill-teal-A400 {\n    fill: mat-color($mat-teal, A400) !important;\n  }\n\n  .fill-green-A400 {\n    fill: mat-color($mat-green, A400) !important;\n  }\n\n  .fill-light-green-A400 {\n    fill: mat-color($mat-light-green, A400) !important;\n  }\n\n  .fill-lime-A400 {\n    fill: mat-color($mat-lime, A400) !important;\n  }\n\n  .fill-yellow-A400 {\n    fill: mat-color($mat-yellow, A400) !important;\n  }\n\n  .fill-amber-A400 {\n    fill: mat-color($mat-amber, A400) !important;\n  }\n\n  .fill-orange-A400 {\n    fill: mat-color($mat-orange, A400) !important;\n  }\n\n  .fill-deep-orange-A400 {\n    fill: mat-color($mat-deep-orange, A400) !important;\n  }\n\n  // A700\n  .fill-red-A700 {\n    fill: mat-color($mat-red, A700) !important;\n  }\n\n  .fill-pink-A700 {\n    fill: mat-color($mat-pink, A700) !important;\n  }\n\n  .fill-purple-A700 {\n    fill: mat-color($mat-purple, A700) !important;\n  }\n\n  .fill-deep-purple-A700 {\n    fill: mat-color($mat-deep-purple, A700) !important;\n  }\n\n  .fill-indigo-A700 {\n    fill: mat-color($mat-indigo, A700) !important;\n  }\n\n  .fill-blue-A700 {\n    fill: mat-color($mat-blue, A700) !important;\n  }\n\n  .fill-light-blue-A700 {\n    fill: mat-color($mat-light-blue, A700) !important;\n  }\n\n  .fill-cyan-A700 {\n    fill: mat-color($mat-cyan, A700) !important;\n  }\n\n  .fill-teal-A700 {\n    fill: mat-color($mat-teal, A700) !important;\n  }\n\n  .fill-green-A700 {\n    fill: mat-color($mat-green, A700) !important;\n  }\n\n  .fill-light-green-A700 {\n    fill: mat-color($mat-light-green, A700) !important;\n  }\n\n  .fill-lime-A700 {\n    fill: mat-color($mat-lime, A700) !important;\n  }\n\n  .fill-yellow-A700 {\n    fill: mat-color($mat-yellow, A700) !important;\n  }\n\n  .fill-amber-A700 {\n    fill: mat-color($mat-amber, A700) !important;\n  }\n\n  .fill-orange-A700 {\n    fill: mat-color($mat-orange, A700) !important;\n  }\n\n  .fill-deep-orange-A700 {\n    fill: mat-color($mat-deep-orange, A700) !important;\n  }\n\n  // Black\n  .fill-black {\n    fill: rgba(black, 87) !important;\n  }\n\n  .fill-black-1 {\n    fill: rgba(black, 54) !important;\n  }\n\n  .fill-black-2 {\n    fill: rgba(black, 38) !important;\n  }\n\n  .fill-black-3 {\n    fill: rgba(black, 0.12) !important;\n  }\n\n  .fill-black-4 {\n    fill: black !important;\n  }\n\n  // White\n  .fill-white {\n    fill: rgba(white, 0.7) !important;\n  }\n\n  .fill-white-1 {\n    fill: rgba(white, 0.3) !important;\n  }\n\n  .fill-white-2 {\n    fill: rgba(white, 0.3) !important;\n  }\n\n  .fill-white-3 {\n    fill: rgba(white, 0.12) !important;\n  }\n\n  .fill-white-4 {\n    fill: white !important;\n  }\n}\n\n/* stylelint-enable selector-class-pattern */\n","$mat-font-url: 'styles/font/' !default;\n\n@mixin covalent-material-icons() {\n  @font-face {\n    font-family: 'Material Icons';\n    font-style: normal;\n    font-weight: 400;\n    src: url($mat-font-url + 'MaterialIcons-Regular-v48.woff2') format('woff2');\n  }\n\n  .material-icons {\n    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    font-size: 24px; /* Preferred icon size */\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    text-transform: none;\n    letter-spacing: normal;\n    word-wrap: normal;\n    white-space: nowrap;\n    direction: ltr;\n\n    /* Support for all WebKit browsers. */\n    -webkit-font-smoothing: antialiased;\n\n    /* Support for Safari and Chrome. */\n    text-rendering: optimizeLegibility;\n\n    /* Support for Firefox. */\n    -moz-osx-font-smoothing: grayscale;\n\n    /* Support for IE. */\n    font-feature-settings: 'liga';\n  }\n\n  // Ensure our size prevails over material\n  mat-icon.material-icons {\n    &,\n    &.mat-icon {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  // Rules for sizing the icon.\n  .material-icons.md-18,\n  .material-icons.mat-18 {\n    font-size: 18px;\n    height: 18px;\n    width: 18px;\n  }\n\n  .material-icons.md-24,\n  .material-icons.mat-24 {\n    font-size: 24px;\n    height: 24px;\n    width: 24px;\n  }\n\n  .material-icons.md-36,\n  .material-icons.mat-36 {\n    font-size: 36px;\n    height: 36px;\n    width: 36px;\n  }\n\n  .material-icons.md-48,\n  .material-icons.mat-48 {\n    font-size: 48px;\n    height: 48px;\n    width: 48px;\n  }\n\n  // Rules for using icons as black on a light background.\n  .material-icons.md-dark,\n  .material-icons.mat-dark {\n    color: rgba(0, 0, 0, 54%);\n  }\n\n  .material-icons.md-dark.md-inactive,\n  .material-icons.mat-dark.mat-inactive {\n    color: rgba(0, 0, 0, 26%);\n  }\n\n  // Rules for using icons as white on a dark background.\n  .material-icons.md-light,\n  .material-icons.mat-light {\n    color: rgba(255, 255, 255, 100%);\n  }\n\n  .material-icons.md-light.md-inactive,\n  .material-icons.mat-light.mat-inactive {\n    color: rgba(255, 255, 255, 30%);\n  }\n}\n"]}