ngx-material-drawer
Version:
A dynamic, configurable Angular Material drawer with dashboard capabilities
386 lines (380 loc) • 697 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, ViewChild, Input, Component, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
import { VERSION, MatRippleModule } from '@angular/material/core';
import { Subject, ReplaySubject, BehaviorSubject, fromEvent } from 'rxjs';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5$1 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import * as i6$2 from '@angular/material/sidenav';
import { MatSidenavModule } from '@angular/material/sidenav';
import * as i7$1 from '@angular/flex-layout/extended';
import { trigger, state, transition, style, animate } from '@angular/animations';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i7 from '@angular/flex-layout/flex';
import * as i5$2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i6 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i8 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i10 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i6$1 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule } from '@angular/material/card';
import * as i5$3 from '@angular/material/grid-list';
import { MatGridListModule } from '@angular/material/grid-list';
import { startWith, map, distinctUntilChanged, shareReplay } from 'rxjs/operators';
class NgxMaterialDrawerEventEmitter {
constructor() {
this.onMatDrawerInit = new Subject();
this.onMatDrawerAfterViewInit = new Subject();
this.onNavStateChange = new Subject();
this.onDataChange = new ReplaySubject(1);
this.onGridDataChange = new ReplaySubject(1);
this.onSideNavOpen = new Subject();
this.onSideNavClosed = new Subject();
this.onMinVarientChange = new Subject();
this.onSideNavItemClick = new Subject();
this.onSideNavItemExpanded = new Subject();
this.onSideNavItemCollapsed = new Subject();
this.onMenuItemClick = new Subject();
this.onMenuItemExpanded = new Subject();
this.onMenuItemCollapsed = new Subject();
this.onSearchValueChange = new Subject();
this.onSerachFocusIn = new Subject();
this.onSerachFocusOut = new Subject();
this.onSerachInputOpen = new Subject();
this.onSerachInputClosed = new Subject();
this.onFabExpanded = new Subject();
this.onFabCollapsed = new Subject();
this.onMainFabButtonClick = new Subject();
this.onFabButtonClick = new Subject();
}
/**
* Material drawer Main component life cycle
* @param event json
*/
matDrawerInit(event) {
this.onMatDrawerInit.next(event);
}
/**
* Material drawer Main component life cycle
* @param event json
*/
matDrawerAfterViewInit(event) {
this.onMatDrawerAfterViewInit.next(event);
}
/**
* using on side nav toggle
* @param event json
*/
navStateChange(event) {
this.onNavStateChange.next(event);
}
/**
* On Search value change
* @param searchObject containing value and input search object
*/
searchValueChange(searchObject) {
this.onSearchValueChange.next(searchObject);
}
/**
* On Search focusin
* @param searchObject containing value and input search object
*/
serachFocusIn(searchObject) {
this.onSerachFocusIn.next(searchObject);
}
/**
* On Search focusout
* @param searchObject containing value and input search object
*/
serachFocusOut(searchObject) {
this.onSerachFocusOut.next(searchObject);
}
/**
* On Search focusout
* @param searchObject containing value and input search object
*/
serachInputOpen(searchObject) {
this.onSerachInputOpen.next(searchObject);
}
/**
* On Search focusout
* @param searchObject containing value and input search object
*/
serachInputClosed(searchObject) {
this.onSerachInputClosed.next(searchObject);
}
/**
* on data chamge
* @param event new json
*/
dataChange(event) {
this.onDataChange.next(event);
}
/**
* on data chamge
* @param event new json
*/
gridDataChange(event) {
this.onGridDataChange.next(event);
}
/**
* using on side nav open
* @param event json
*/
sideNavOpen(event) {
this.onSideNavOpen.next(event);
}
/**
* using on side nav closed
* @param event json
*/
sideNavClosed(event) {
this.onSideNavClosed.next(event);
}
/**
* Not using currently
* @param event json
*/
minVarientChange(event) {
this.onMinVarientChange.next(event);
}
/**
* using in side nav item
* @param event json
*/
sideNavItemClick(event) {
this.onSideNavItemClick.next(event);
}
/**
* using in side nav item
* @param event json
*/
sideNavItemExpanded(event) {
this.onSideNavItemExpanded.next(event);
}
/**
* using in side nav item
* @param event json
*/
sideNavItemCollapsed(event) {
this.onSideNavItemCollapsed.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
menuItemClick(event) {
this.onMenuItemClick.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
menuItemExpanded(event) {
this.onMenuItemExpanded.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
menuItemCollapsed(event) {
this.onMenuItemCollapsed.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
fabExpanded(event) {
this.onFabExpanded.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
fabCollapsed(event) {
this.onFabCollapsed.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
mainFabButtonClick(event) {
this.onMainFabButtonClick.next(event);
}
/**
* using in toolbar menu
* @param event json
*/
fabButtonClick(event) {
this.onFabButtonClick.next(event);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxMaterialDrawerEventEmitter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxMaterialDrawerEventEmitter, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxMaterialDrawerEventEmitter, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: () => [] });
class NgxNavService {
constructor(matEventEmitterService) {
this.matEventEmitterService = matEventEmitterService;
this.isOpened = false;
this.currentUrl = new BehaviorSubject("");
this.isDrawerOpened = false;
}
closeNav() {
if (!this.isMiniVarient) {
this.appDrawer.close();
}
this.isOpened = false;
this.matEventEmitterService.sideNavClosed(this.getData(this.isOpened));
}
openNav() {
if (!this.isMiniVarient) {
this.appDrawer.open();
}
this.isOpened = true;
this.matEventEmitterService.sideNavOpen(this.getData(this.isOpened));
}
toggleNav() {
if (!this.isMiniVarient) {
this.appDrawer.toggle();
}
this.isOpened = !this.isOpened;
if (this.isOpened) {
this.matEventEmitterService.sideNavOpen(this.getData(this.isOpened));
}
else {
this.matEventEmitterService.sideNavClosed(this.getData(this.isOpened));
}
this.matEventEmitterService.navStateChange(this.getData(this.isOpened));
}
getData(b) {
return {
drawer: this.appDrawer,
isOpened: b,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNavService, deps: [{ token: NgxMaterialDrawerEventEmitter }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNavService, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNavService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: () => [{ type: NgxMaterialDrawerEventEmitter }] });
class NgxUtilsService {
constructor() { }
get componentInstance() {
return this.instance;
}
set componentInstance(instance) {
this.instance = { ...this.instance, ...instance };
}
getExtendedData(card) {
let compDetail = this.componentInstance[card.component];
let detail = { ...card, ...compDetail };
return detail;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxUtilsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class CardDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: CardDirective, selector: "[card-host]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardDirective, decorators: [{
type: Directive,
args: [{
selector: '[card-host]'
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class CardHolderComponent {
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
}
ngOnInit() {
this.cardHost && this.cardData && this.loadComponent();
}
ngAfterViewInit() { }
loadComponent() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.cardData.component);
const viewContainerRef = this.cardHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
componentRef.instance.data = this.cardData.data;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHolderComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardHolderComponent, selector: "lib-card-holder", inputs: { cardData: "cardData" }, viewQueries: [{ propertyName: "cardHost", first: true, predicate: CardDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"ngx-card-holder\">\n <ng-template card-host></ng-template>\n</div>", styles: [":host{height:100%;width:100%}:host .ngx-card-holder{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: CardDirective, selector: "[card-host]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHolderComponent, decorators: [{
type: Component,
args: [{ selector: "lib-card-holder", template: "<div class=\"ngx-card-holder\">\n <ng-template card-host></ng-template>\n</div>", styles: [":host{height:100%;width:100%}:host .ngx-card-holder{height:inherit;width:inherit}\n"] }]
}], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { cardData: [{
type: Input
}], cardHost: [{
type: ViewChild,
args: [CardDirective, { static: true }]
}] } });
class NgxNavListItemComponent {
constructor(navService, matEventEmitterService, ngxUtilsService) {
this.navService = navService;
this.matEventEmitterService = matEventEmitterService;
this.ngxUtilsService = ngxUtilsService;
this.expanded = false;
this.ariaExpanded = this.expanded;
this.depth = 0;
if (this.depth === undefined) {
this.depth = 0;
}
}
ngOnInit() {
this.navService.currentUrl.subscribe((url) => {
if (this.item.route && url) {
// console.log(`Checking '/${this.item.route}' against '${url}'`);
this.expanded = url.indexOf(`/${this.item.route}`) === 0;
this.ariaExpanded = this.expanded;
// console.log(`${this.item.route} is expanded: ${this.expanded}`);
}
});
}
onItemSelected(item) {
if (!item.children || !item.children.length) {
if (item.onClickClose) {
this.navService.closeNav();
}
this.matEventEmitterService.sideNavItemClick(item);
}
if (item.children && item.children.length) {
this.expanded = !this.expanded;
if (this.expanded) {
this.matEventEmitterService.sideNavItemExpanded(item);
}
else {
this.matEventEmitterService.sideNavItemCollapsed(item);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxNavListItemComponent, deps: [{ token: NgxNavService }, { token: NgxMaterialDrawerEventEmitter }, { token: NgxUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxNavListItemComponent, selector: "lib-nav-list-item", inputs: { item: "item", depth: "depth" }, host: { properties: { "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0, template: "<a\n mat-list-item\n [style.padding-left]=\"(depth * 5) + 'px'\"\n [ngStyle]=\"item.style? item.style : ''\"\n (click)=\"onItemSelected(item)\"\n class=\"menu-list-item\"\n>\n <ng-container *ngIf=\"item.component; else elseBlock\">\n <lib-card-holder [cardData]=\"ngxUtilsService.getExtendedData(item.component)\"></lib-card-holder>\n </ng-container>\n <ng-template #elseBlock>\n <mat-icon class=\"routeIcon\">{{item.iconName}}</mat-icon>\n <span>{{item.displayName}}</span>\n <span\n fxFlex\n *ngIf=\"item.children && item.children.length\"\n >\n <span fxFlex></span>\n <mat-icon [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\">expand_more</mat-icon>\n </span>\n </ng-template>\n\n\n\n</a>\n<div *ngIf=\"expanded\">\n <lib-nav-list-item\n *ngFor=\"let child of item.children\"\n [item]=\"child\"\n [depth]=\"depth+1\"\n >\n </lib-nav-list-item>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons\";.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0,0,.2,1);transform:scale3d(0,0,0);background-color:var(--mat-ripple-color, rgba(0, 0, 0, .1))}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0!important;box-sizing:content-box!important;height:auto!important;overflow:hidden!important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0!important;box-sizing:content-box!important;height:0!important}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-mdc-focus-indicator-display, none);border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.mat-app-background{background-color:var(--mat-app-background-color, transparent);color:var(--mat-app-text-color, inherit)}html{--mat-ripple-color: rgba(0, 0, 0, .1)}html{--mat-option-selected-state-label-text-color: #3f51b5;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-accent{--mat-option-selected-state-label-text-color: #4caf50;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, .87)}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color: #3f51b5;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color: #3f51b5;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html,.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color: #4caf50;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color: #4caf50;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color: #f44336;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, .87)}.mat-elevation-z0,.mat-mdc-elevation-specific.mat-elevation-z0{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f}.mat-elevation-z1,.mat-mdc-elevation-specific.mat-elevation-z1{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.mat-elevation-z2,.mat-mdc-elevation-specific.mat-elevation-z2{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mat-elevation-z3,.mat-mdc-elevation-specific.mat-elevation-z3{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-elevation-z4,.mat-mdc-elevation-specific.mat-elevation-z4{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.mat-elevation-z5,.mat-mdc-elevation-specific.mat-elevation-z5{box-shadow:0 3px 5px -1px #0003,0 5px 8px #00000024,0 1px 14px #0000001f}.mat-elevation-z6,.mat-mdc-elevation-specific.mat-elevation-z6{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.mat-elevation-z7,.mat-mdc-elevation-specific.mat-elevation-z7{box-shadow:0 4px 5px -2px #0003,0 7px 10px 1px #00000024,0 2px 16px 1px #0000001f}.mat-elevation-z8,.mat-mdc-elevation-specific.mat-elevation-z8{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.mat-elevation-z9,.mat-mdc-elevation-specific.mat-elevation-z9{box-shadow:0 5px 6px -3px #0003,0 9px 12px 1px #00000024,0 3px 16px 2px #0000001f}.mat-elevation-z10,.mat-mdc-elevation-specific.mat-elevation-z10{box-shadow:0 6px 6px -3px #0003,0 10px 14px 1px #00000024,0 4px 18px 3px #0000001f}.mat-elevation-z11,.mat-mdc-elevation-specific.mat-elevation-z11{box-shadow:0 6px 7px -4px #0003,0 11px 15px 1px #00000024,0 4px 20px 3px #0000001f}.mat-elevation-z12,.mat-mdc-elevation-specific.mat-elevation-z12{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f}.mat-elevation-z13,.mat-mdc-elevation-specific.mat-elevation-z13{box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.mat-elevation-z14,.mat-mdc-elevation-specific.mat-elevation-z14{box-shadow:0 7px 9px -4px #0003,0 14px 21px 2px #00000024,0 5px 26px 4px #0000001f}.mat-elevation-z15,.mat-mdc-elevation-specific.mat-elevation-z15{box-shadow:0 8px 9px -5px #0003,0 15px 22px 2px #00000024,0 6px 28px 5px #0000001f}.mat-elevation-z16,.mat-mdc-elevation-specific.mat-elevation-z16{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}.mat-elevation-z17,.mat-mdc-elevation-specific.mat-elevation-z17{box-shadow:0 8px 11px -5px #0003,0 17px 26px 2px #00000024,0 6px 32px 5px #0000001f}.mat-elevation-z18,.mat-mdc-elevation-specific.mat-elevation-z18{box-shadow:0 9px 11px -5px #0003,0 18px 28px 2px #00000024,0 7px 34px 6px #0000001f}.mat-elevation-z19,.mat-mdc-elevation-specific.mat-elevation-z19{box-shadow:0 9px 12px -6px #0003,0 19px 29px 2px #00000024,0 7px 36px 6px #0000001f}.mat-elevation-z20,.mat-mdc-elevation-specific.mat-elevation-z20{box-shadow:0 10px 13px -6px #0003,0 20px 31px 3px #00000024,0 8px 38px 7px #0000001f}.mat-elevation-z21,.mat-mdc-elevation-specific.mat-elevation-z21{box-shadow:0 10px 13px -6px #0003,0 21px 33px 3px #00000024,0 8px 40px 7px #0000001f}.mat-elevation-z22,.mat-mdc-elevation-specific.mat-elevation-z22{box-shadow:0 10px 14px -6px #0003,0 22px 35px 3px #00000024,0 8px 42px 7px #0000001f}.mat-elevation-z23,.mat-mdc-elevation-specific.mat-elevation-z23{box-shadow:0 11px 14px -7px #0003,0 23px 36px 3px #00000024,0 9px 44px 8px #0000001f}.mat-elevation-z24,.mat-mdc-elevation-specific.mat-elevation-z24{box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-theme-loaded-marker{display:none}html{--mdc-elevated-card-container-shape: 4px;--mdc-outlined-card-container-shape: 4px;--mdc-outlined-card-outline-width: 1px}html{--mdc-elevated-card-container-color: white;--mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-outlined-card-container-color: white;--mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-card-subtitle-text-color: rgba(0, 0, 0, .54)}html{--mdc-linear-progress-active-indicator-height: 4px;--mdc-linear-progress-track-height: 4px;--mdc-linear-progress-track-shape: 0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: #3f51b5;--mdc-linear-progress-track-color: rgba(63, 81, 181, .25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color: #4caf50;--mdc-linear-progress-track-color: rgba(76, 175, 80, .25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color: #f44336;--mdc-linear-progress-track-color: rgba(244, 67, 54, .25)}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-filled-text-field-active-indicator-height: 1px;--mdc-filled-text-field-focus-active-indicator-height: 2px;--mdc-filled-text-field-container-shape: 4px;--mdc-outlined-text-field-outline-width: 1px;--mdc-outlined-text-field-focus-outline-width: 2px;--mdc-outlined-text-field-container-shape: 4px}html{--mdc-filled-text-field-caret-color: #3f51b5;--mdc-filled-text-field-focus-active-indicator-color: #3f51b5;--mdc-filled-text-field-focus-label-text-color: rgba(63, 81, 181, .87);--mdc-filled-text-field-container-color: whitesmoke;--mdc-filled-text-field-disabled-container-color: #fafafa;--mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-error-hover-label-text-color: #f44336;--mdc-filled-text-field-error-focus-label-text-color: #f44336;--mdc-filled-text-field-error-label-text-color: #f44336;--mdc-filled-text-field-error-caret-color: #f44336;--mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);--mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);--mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-error-active-indicator-color: #f44336;--mdc-filled-text-field-error-focus-active-indicator-color: #f44336;--mdc-filled-text-field-error-hover-active-indicator-color: #f44336;--mdc-outlined-text-field-caret-color: #3f51b5;--mdc-outlined-text-field-focus-outline-color: #3f51b5;--mdc-outlined-text-field-focus-label-text-color: rgba(63, 81, 181, .87);--mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-error-caret-color: #f44336;--mdc-outlined-text-field-error-focus-label-text-color: #f44336;--mdc-outlined-text-field-error-label-text-color: #f44336;--mdc-outlined-text-field-error-hover-label-text-color: #f44336;--mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);--mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-error-focus-outline-color: #f44336;--mdc-outlined-text-field-error-hover-outline-color: #f44336;--mdc-outlined-text-field-error-outline-color: #f44336;--mat-form-field-focus-select-arrow-color: rgba(63, 81, 181, .87);--mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38);--mat-form-field-state-layer-color: rgba(0, 0, 0, .87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);--mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, .38);--mat-form-field-hover-state-layer-opacity: .04;--mat-form-field-focus-state-layer-opacity: .08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color: #4caf50;--mdc-filled-text-field-focus-active-indicator-color: #4caf50;--mdc-filled-text-field-focus-label-text-color: rgba(76, 175, 80, .87);--mdc-outlined-text-field-caret-color: #4caf50;--mdc-outlined-text-field-focus-outline-color: #4caf50;--mdc-outlined-text-field-focus-label-text-color: rgba(76, 175, 80, .87);--mat-form-field-focus-select-arrow-color: rgba(76, 175, 80, .87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color: #f44336;--mdc-filled-text-field-focus-active-indicator-color: #f44336;--mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87);--mdc-outlined-text-field-caret-color: #f44336;--mdc-outlined-text-field-focus-outline-color: #f44336;--mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87);--mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(63, 81, 181, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(76, 175, 80, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(244, 67, 54, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-autocomplete-background-color: white}html{--mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--mdc-dialog-container-shadow-color: #000;--mdc-dialog-container-shape: 4px;--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mdc-dialog-container-color: white;--mdc-dialog-subhead-color: rgba(0, 0, 0, .87);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .6)}.mat-mdc-standard-chip{--mdc-chip-container-shape-family: rounded;--mdc-chip-container-shape-radius: 16px 16px 16px 16px;--mdc-chip-with-avatar-avatar-shape-family: rounded;--mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;--mdc-chip-with-avatar-avatar-size: 28px;--mdc-chip-with-icon-icon-size: 18px;--mdc-chip-outline-width: 0;--mdc-chip-outline-color: transparent;--mdc-chip-disabled-outline-color: transparent;--mdc-chip-focus-outline-color: transparent;--mdc-chip-hover-state-layer-opacity: .04;--mdc-chip-with-avatar-disabled-avatar-opacity: 1;--mdc-chip-flat-selected-outline-width: 0;--mdc-chip-selected-hover-state-layer-opacity: .04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;--mdc-chip-with-icon-disabled-icon-opacity: 1;--mat-chip-disabled-container-opacity: .4;--mat-chip-trailing-action-opacity: .54;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-focus-state-layer-opacity: 0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color: #212121;--mdc-chip-elevated-container-color: #e0e0e0;--mdc-chip-elevated-selected-container-color: #e0e0e0;--mdc-chip-elevated-disabled-container-color: #e0e0e0;--mdc-chip-flat-disabled-selected-container-color: #e0e0e0;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: #212121;--mdc-chip-selected-label-text-color: #212121;--mdc-chip-with-icon-icon-color: #212121;--mdc-chip-with-icon-disabled-icon-color: #212121;--mdc-chip-with-icon-selected-icon-color: #212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;--mdc-chip-with-trailing-icon-trailing-icon-color: #212121;--mat-chip-selected-disabled-trailing-icon-color: #212121;--mat-chip-selected-trailing-icon-color: #212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #3f51b5;--mdc-chip-elevated-selected-container-color: #3f51b5;--mdc-chip-elevated-disabled-container-color: #3f51b5;--mdc-chip-flat-disabled-selected-container-color: #3f51b5;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white;--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color: rgba(0, 0, 0, .87);--mdc-chip-elevated-container-color: #4caf50;--mdc-chip-elevated-selected-container-color: #4caf50;--mdc-chip-elevated-disabled-container-color: #4caf50;--mdc-chip-flat-disabled-selected-container-color: #4caf50;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: rgba(0, 0, 0, .87);--mdc-chip-selected-label-text-color: rgba(0, 0, 0, .87);--mdc-chip-with-icon-icon-color: rgba(0, 0, 0, .87);--mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, .87);--mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, .87);--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, .87);--mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, .87);--mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, .87);--mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, .87)}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #f44336;--mdc-chip-elevated-selected-container-color: #f44336;--mdc-chip-elevated-disabled-container-color: #f44336;--mdc-chip-flat-disabled-selected-container-color: #f44336;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white;--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 32px}html{--mdc-switch-disabled-selected-icon-opacity: .38;--mdc-switch-disabled-track-opacity: .12;--mdc-switch-disabled-unselected-icon-opacity: .38;--mdc-switch-handle-height: 20px;--mdc-switch-handle-shape: 10px;--mdc-switch-handle-width: 20px;--mdc-switch-selected-icon-size: 18px;--mdc-switch-track-height: 14px;--mdc-switch-track-shape: 7px;--mdc-switch-track-width: 36px;--mdc-switch-unselected-icon-size: 18px;--mdc-switch-selected-focus-state-layer-opacity: .12;--mdc-switch-selected-hover-state-layer-opacity: .04;--mdc-switch-selected-pressed-state-layer-opacity: .1;--mdc-switch-unselected-focus-state-layer-opacity: .12;--mdc-switch-unselected-hover-state-layer-opacity: .04;--mdc-switch-unselected-pressed-state-layer-opacity: .1;--mat-switch-disabled-selected-handle-opacity: .38;--mat-switch-disabled-unselected-handle-opacity: .38;--mat-switch-unselected-handle-size: 20px;--mat-switch-selected-handle-size: 20px;--mat-switch-pressed-handle-size: 20px;--mat-switch-with-icon-handle-size: 20px;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-with-icon-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0;--mat-switch-unselected-with-icon-handle-horizontal-margin: 0;--mat-switch-unselected-pressed-handle-horizontal-margin: 0;--mat-switch-visible-track-opacity: 1;--mat-switch-hidden-track-opacity: 1;--mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);--mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);--mat-switch-track-outline-width: 1px;--mat-switch-track-outline-color: transparent;--mat-switch-selected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-color: transparent}html{--mdc-switch-selected-focus-state-layer-color: #3949ab;--mdc-switch-selected-handle-color: #3949ab;--mdc-switch-selected-hover-state-layer-color: #3949ab;--mdc-switch-selected-pressed-state-layer-color: #3949ab;--mdc-switch-selected-focus-handle-color: #1a237e;--mdc-switch-selected-hover-handle-color: #1a237e;--mdc-switch-selected-pressed-handle-color: #1a237e;--mdc-switch-selected-focus-track-color: #7986cb;--mdc-switch-selected-hover-track-color: #7986cb;--mdc-switch-selected-pressed-track-color: #7986cb;--mdc-switch-selected-track-color: #7986cb;--mdc-switch-disabled-selected-handle-color: #424242;--mdc-switch-disabled-selected-icon-color: #fff;--mdc-switch-disabled-selected-track-color: #424242;--mdc-switch-disabled-unselected-handle-color: #424242;--mdc-switch-disabled-unselected-icon-color: #fff;--mdc-switch-disabled-unselected-track-color: #424242;--mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);--mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-switch-handle-shadow-color: black;--mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mdc-switch-selected-icon-color: #fff;--mdc-switch-unselected-focus-handle-color: #212121;--mdc-switch-unselected-focus-state-layer-color: #424242;--mdc-switch-unselected-focus-track-color: #e0e0e0;--mdc-switch-unselected-handle-color: #616161;--mdc-switch-unselected-hover-handle-color: #212121;--mdc-switch-unselected-hover-state-layer-color: #424242;--mdc-switch-unselected-hover-track-color: #e0e0e0;--mdc-switch-unselected-icon-color: #fff;--mdc-switch-unselected-pressed-handle-color: #212121;--mdc-switch-unselected-pressed-state-layer-color: #424242;--mdc-switch-unselected-pressed-track-color: #e0e0e0;--mdc-switch-unselected-track-color: #e0e0e0;--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, .38)}html .mat-mdc-slide-toggle{--mdc-form-field-label-text-color: rgba(0, 0, 0, .87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color: #43a047;--mdc-switch-selected-handle-color: #43a047;--mdc-switch-selected-hover-state-layer-color: #43a047;--mdc-switch-selected-pressed-state-layer-color: #43a047;--mdc-switch-selected-focus-handle-color: #1b5e20;--mdc-switch-selected-hover-handle-color: #1b5e20;--mdc-switch-selected-pressed-handle-color: #1b5e20;--mdc-switch-selected-focus-track-color: #81c784;--mdc-switch-selected-hover-track-color: #81c784;--mdc-switch-selected-pressed-track-color: #81c784;--mdc-switch-selected-track-color: #81c784}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color: #e53935;--mdc-switch-selected-handle-color: #e53935;--mdc-switch-selected-hover-state-layer-color: #e53935;--mdc-switch-selected-pressed-state-layer-color: #e53935;--mdc-switch-selected-focus-handle-color: #b71c1c;--mdc-switch-selected-hover-handle-color: #b71c1c;--mdc-switch-selected-pressed-handle-color: #b71c1c;--mdc-switch-selected-focus-track-color: #e57373;--mdc-switch-selected-hover-track-color: #e57373;--mdc-switch-selected-pressed-track-color: #e57373;--mdc-switch-selected-track-color: #e57373}html{--mdc-switch-state-layer-size: 40px}html{--mdc-radio-disabled-selected-icon-opacity: .38;--mdc-radio-disabled-unselected-icon-opacity: .38;--mdc-radio-state-layer-size: 40px}.mat-mdc-radio-button{--mdc-form-field-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #3f51b5;--mdc-radio-selected-hover-icon-color: #3f51b5;--mdc-radio-selected-icon-color: #3f51b5;--mdc-radio-selected-pressed-icon-color: #3f51b5;--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #3f51b5;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #4caf50;--mdc-radio-selected-hover-icon-color: #4caf50;--mdc-radio-selected-icon-color: #4caf50;--mdc-radio-selected-pressed-icon-color: #4caf50;--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #4caf50;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336;--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38)}html{--mdc-radio-state-layer-size: 40px;--mat-radio-touch-target-display: block}html{--mat-slider-value-indicator-width: auto;--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-container-transform: translateX(-50%);--mdc-slider-active-track-height: 6px;--mdc-slider-active-track-shape: 9999px;--mdc-slider-handle-height: 20px;--mdc-slider-handle-shape: 50%;--mdc-slider-handle-width: 20px;--mdc-slider-inactive-track-height: 4px;--mdc-slider-inactive-track-shape: 9999px;--mdc-slider-with-overlap-handle-outline-width: 1px;--mdc-slider-with-tick-marks-active-container-opacity: .6;--mdc-slider-with-tick-marks-container-shape: 50%;--mdc-slider-with-tick-marks-container-size: 2px;--mdc-slider-with-tick-marks-inactive-container-opacity: .6}html{--mdc-slider-handle-color: #3f51b5;--mdc-slider-focus-handle-color: #3f51b5;--mdc-slider-hover-handle-color: #3f51b5;--mdc-slider-active-track-color: #3f51b5;--mdc-slider-inactive-track-color: #3f51b5;--mdc-slider-with-tick-marks-inactive-container-color: #3f51b5;--mdc-slider-with-tick-marks-active-container-color: white;--mdc-slider-disabled-active-track-color: #000;--mdc-slider-disabled-handle-color: #000;--mdc-slider-disabled-inactive-track-color: #000;--mdc-slider-label-container-color: #000;--mdc-slider-label-label-text-color: #fff;--mdc-slider-with-overlap-handle-outline-color: #fff;--mdc-slider-with-tick-marks-disabled-container-color: #000;--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-slider-ripple-color: #3f51b5;--mat-slider-hover-state-layer-color: rgba(63, 81, 181, .05);--mat-slider-focus-state-layer-color: rgba(63, 81, 181, .2);--