@covalent/core 4.0.0-beta.2 → 4.1.0-develop.10

package/README.md

@@ -4,7 +4,6 @@ Core Teradata UI Platform for layouts, icons, custom components and themes. This
 
 The core will have custom components that enforce standards and best practices through built-in design patterns.
 
-
 ## Installation
 
 This component can be installed as npm package.
@@ -13,7 +12,6 @@ This component can be installed as npm package.
 npm i -save @covalent/core
 ```
 
-
 ## Setup
 
 Import the modules from `@covalent/core` as needed in your NgModule:
@@ -33,9 +31,12 @@ import { CovalentStepsModule  } from '@covalent/core/steps';
 export class MyModule {}
 ```
 
-
 ## Styles, Icons and Theming
 
 See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info
 
-Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons). 
+Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons).
+
+## Running unit tests
+
+Run `nx test angular` to execute the unit tests.

package/breadcrumbs/README.md

@@ -1,23 +1,23 @@
 # td-breadcrumbs
 
-`td-breadcrumbs` element generates breadcrumbs for navigation.  Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
+`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
 
 ## API Summary
 
 #### Inputs
 
-+ separatorIcon?: string
-  + Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
+- separatorIcon?: string
+  - Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
 
 #### Methods
 
-+ count: number
-  + The total count of individual breadcrumbs (read only)
+- count: number
+  - The total count of individual breadcrumbs (read only)
 
 #### Attributes
 
-+ hiddenBreadcrumbs: TdBreadcrumbComponent[]
-  + Array of currently hidden breadcrumbs (responsive)
+- hiddenBreadcrumbs: TdBreadcrumbComponent[]
+  - Array of currently hidden breadcrumbs (responsive)
 
 # td-breadcrumb
 
@@ -27,10 +27,10 @@
 
 #### Methods
 
-+ displayCrumb: boolean 
-  + Whether to display the individual breadcrumb or not
-+ width: number 
-  + The current width of the individual breadcrumb (read only)
+- displayCrumb: boolean
+  - Whether to display the individual breadcrumb or not
+- width: number
+  - The current width of the individual breadcrumb (read only)
 
 ## Setup
 
@@ -62,7 +62,7 @@ Basic Example:
 </td-breadcrumbs>
 ```
 
-Example with all inputs/outputs: 
+Example with all inputs/outputs:
 
 ```html
 <td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
@@ -73,13 +73,17 @@ Example with all inputs/outputs:
   <td-breadcrumb>Manage List</td-breadcrumb>
 </td-breadcrumbs>
 <mat-divider></mat-divider>
+<div>Total Breadcrumbs Count: {{breadcrumbs.count}}</div>
 <div>
-  Total Breadcrumbs Count: {{breadcrumbs.count}}
+  Hidden Breadcrumbs Count (shrink window to see):
+  {{breadcrumbs.hiddenBreadcrumbs.length}}
 </div>
-<div>
-  Hidden Breadcrumbs Count (shrink window to see): {{breadcrumbs.hiddenBreadcrumbs.length}}
-</div>
-<ng-template let-breadcrumb let-index="index" ngFor [ngForOf]="breadcrumbs.hiddenBreadcrumbs">
+<ng-template
+  let-breadcrumb
+  let-index="index"
+  ngFor
+  [ngForOf]="breadcrumbs.hiddenBreadcrumbs"
+>
   <div>
     <p>Breadcrumb Number: {{index}}</p>
     <p>Breadcrumb Width: {{breadcrumb?.width}}</p>

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

@@ -7,6 +7,8 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     private _width;
     private _displayIcon;
     private _separatorIcon;
+    matButtonClass: boolean;
+    tdBreadCrumbClass: boolean;
     get separatorIcon(): string;
     set separatorIcon(separatorIcon: string);
     get displayIcon(): boolean;
@@ -23,7 +25,7 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     /**
      * Gets the display style of the crumb
      */
-    get displayBinding(): string;
+    get displayBinding(): string | undefined;
     constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     /**

package/breadcrumbs/breadcrumbs.component.d.ts

@@ -1,14 +1,14 @@
-import { QueryList, OnInit, OnDestroy, AfterContentInit, DoCheck, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { QueryList, OnInit, OnDestroy, AfterContentInit, 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 {
+export declare class TdBreadcrumbsComponent implements OnInit, AfterContentInit, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
     private _resizeSubscription;
-    private _widthSubject;
     private _contentChildrenSub;
     private _resizing;
     private _separatorIcon;
+    tdBreadCrumbsClass: boolean;
     _breadcrumbs: QueryList<TdBreadcrumbComponent>;
     hiddenBreadcrumbs: TdBreadcrumbComponent[];
     /**
@@ -18,7 +18,6 @@ export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterCon
     get separatorIcon(): string;
     constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
-    ngDoCheck(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     get nativeElementWidth(): number;

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

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

package/common/README.md

@@ -0,0 +1,3 @@
+# @covalent/core/common
+
+Secondary entry point of `@covalent/core`. It can be used by importing from `@covalent/core/common`.

package/common/_common-theme.scss

@@ -1,4 +1,4 @@
-@import './styles/theme-functions';
+@import 'styles/theme-functions';
 
 @mixin td-common-theme($theme) {
   $warn: map-get($theme, warn);

package/common/behaviors/disable-ripple.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisableRipple {
     onDisableRippleChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisableRipple<T extends Constructor<{}>>(base: T): Constructor<ICanDisableRipple> & T;
+export declare function mixinDisableRipple<T extends Constructor<Record<string, unknown>>>(base: T): Constructor<ICanDisableRipple> & T;
 export {};

package/common/behaviors/disabled.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisable {
     onDisabledChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<ICanDisable> & T;
+export declare function mixinDisabled<T extends Constructor<any>>(base: T): Constructor<ICanDisable> & T;
 export {};

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

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

package/common/material-icons.css

@@ -1,111 +1 @@
-/** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */
-/* stylelint-disable function-url-quotes, no-duplicate-selectors */
-/*
-*
-*  Responsive attributes
-*
-*  References:
-*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
-*  2) https://css-tricks.com/almanac/properties/f/flex/
-*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
-*  5) http://godban.com.ua/projects/flexgrid
-*
-*/
-@-moz-document url-prefix() {
-  [layout-fill] {
-    margin: 0;
-    width: 100%;
-    min-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-style: normal;
-  font-weight: 400;
-  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-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  /* Preferred icon size */
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
-  font-feature-settings: "liga";
-}
-
-mat-icon.material-icons, mat-icon.material-icons.mat-icon {
-  width: 1em;
-  height: 1em;
-}
-
-.material-icons.md-18,
-.material-icons.mat-18 {
-  font-size: 18px;
-  height: 18px;
-  width: 18px;
-}
-
-.material-icons.md-24,
-.material-icons.mat-24 {
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
-}
-
-.material-icons.md-36,
-.material-icons.mat-36 {
-  font-size: 36px;
-  height: 36px;
-  width: 36px;
-}
-
-.material-icons.md-48,
-.material-icons.mat-48 {
-  font-size: 48px;
-  height: 48px;
-  width: 48px;
-}
-
-.material-icons.md-dark,
-.material-icons.mat-dark {
-  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);
-}
-
-.material-icons.md-light,
-.material-icons.mat-light {
-  color: white;
-}
-
-.material-icons.md-light.md-inactive,
-.material-icons.mat-light.mat-inactive {
-  color: rgba(255, 255, 255, 0.3);
-}
-/*# sourceMappingURL=material-icons.css.map */
+@-moz-document url-prefix(){[layout-fill]{margin:0;width:100%;min-height:100%;height:100%}}@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;src:url("styles/font/MaterialIcons-Regular-v48.woff2") format("woff2")}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}mat-icon.material-icons,mat-icon.material-icons.mat-icon{width:1em;height:1em}.material-icons.md-18,.material-icons.mat-18{font-size:18px;height:18px;width:18px}.material-icons.md-24,.material-icons.mat-24{font-size:24px;height:24px;width:24px}.material-icons.md-36,.material-icons.mat-36{font-size:36px;height:36px;width:36px}.material-icons.md-48,.material-icons.mat-48{font-size:48px;height:48px;width:48px}.material-icons.md-dark,.material-icons.mat-dark{color:rgba(0,0,0,.54)}.material-icons.md-dark.md-inactive,.material-icons.mat-dark.mat-inactive{color:rgba(0,0,0,.26)}.material-icons.md-light,.material-icons.mat-light{color:#fff}.material-icons.md-light.md-inactive,.material-icons.mat-light.mat-inactive{color:rgba(255,255,255,.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/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"]}
+{"version":3,"sourceRoot":"","sources":["../../../../libs/angular/common/styles/_layout.scss","../../../../libs/angular/common/styles/font/_font.scss"],"names":[],"mappings":"AA0BA,4BACE,cACE,SACA,WACA,gBACA,aC5BF,WACE,6BACA,kBACA,gBACA,uEAGF,gBAEE,6BACA,mBACA,kBACA,eACA,qBACA,UACA,WACA,cACA,oBACA,sBACA,iBACA,mBACA,cAGA,mCAGA,kCAGA,kCAGA,6BAKA,yDAEE,UACA,WAKJ,6CAEE,eACA,YACA,WAGF,6CAEE,eACA,YACA,WAGF,6CAEE,eACA,YACA,WAGF,6CAEE,eACA,YACA,WAIF,iDAEE,sBAGF,0EAEE,sBAIF,mDAEE,WAGF,4EAEE","file":"material-icons.css"}

package/common/pipes/truncate/truncate.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TdTruncatePipe implements PipeTransform {
-    transform(text: any, length: number): string;
+    transform(text: any, length?: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdTruncatePipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TdTruncatePipe, "truncate">;
 }