light-theme.css.map

{"version":3,"sources":["./node_modules/@angular/material/legacy-button/_button-theme.scss","./src/styles/custom-themes/light-theme.scss","./node_modules/@angular/material/core/style/_elevation.scss","./node_modules/@material/theme/_css.scss","./node_modules/@angular/material/button/_button-theme.scss","./node_modules/@angular/material/button/_button-theme-private.scss","./node_modules/@angular/material/button/_icon-button-theme.scss","./node_modules/@angular/material/legacy-core/option/_option-theme.scss","./node_modules/@angular/material/legacy-core/option/_optgroup-theme.scss","./node_modules/@angular/material/core/ripple/_ripple-theme.scss","./node_modules/@angular/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss","./node_modules/@angular/material/legacy-core/_core-theme.scss","./node_modules/@angular/material/legacy-card/_card-theme.scss","./node_modules/@angular/material/legacy-progress-bar/_progress-bar-theme.scss","./node_modules/@angular/material/legacy-progress-spinner/_progress-spinner-theme.scss","./node_modules/@angular/material/legacy-tooltip/_tooltip-theme.scss","./node_modules/@angular/material/legacy-input/_input-theme.scss","./node_modules/@angular/material/core/style/_vendor-prefixes.scss","./node_modules/@angular/material/legacy-form-field/_form-field-theme.scss","./node_modules/@angular/material/legacy-form-field/_form-field-legacy-theme.scss","./node_modules/@angular/material/core/style/_form-common.scss","./node_modules/@angular/material/legacy-form-field/_form-field-standard-theme.scss","./node_modules/@angular/material/legacy-form-field/_form-field-fill-theme.scss","./node_modules/@angular/material/legacy-form-field/_form-field-outline-theme.scss","./node_modules/@angular/material/legacy-select/_select-theme.scss","./node_modules/@angular/material/legacy-checkbox/_checkbox-theme.scss","./node_modules/@angular/material/legacy-autocomplete/_autocomplete-theme.scss","./node_modules/@angular/material/legacy-dialog/_dialog-theme.scss","./node_modules/@angular/material/legacy-chips/_chips-theme.scss","./node_modules/@angular/material/legacy-slide-toggle/_slide-toggle-theme.scss","./node_modules/@angular/material/legacy-radio/_radio-theme.scss","./node_modules/@angular/material/legacy-slider/_slider-theme.scss","./node_modules/@angular/material/legacy-menu/_menu-theme.scss","./node_modules/@angular/material/legacy-list/_list-theme.scss","./node_modules/@angular/material/legacy-paginator/_paginator-theme.scss","./node_modules/@angular/material/legacy-tabs/_tabs-theme.scss","./node_modules/@angular/material/legacy-snack-bar/_snack-bar-theme.scss","./node_modules/@angular/material/legacy-table/_table-theme.scss","./node_modules/@angular/material/badge/_badge-theme.scss","./node_modules/@angular/cdk/a11y/_index.scss","./node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.scss","./node_modules/@angular/material/button-toggle/_button-toggle-theme.scss","./node_modules/@angular/material/datepicker/_datepicker-theme.scss","./node_modules/@angular/material/divider/_divider-theme.scss","./node_modules/@angular/material/expansion/_expansion-theme.scss","./node_modules/@angular/material/expansion/_expansion-mixins.scss","./node_modules/@angular/material/icon/_icon-theme.scss","./node_modules/@angular/material/sidenav/_sidenav-theme.scss","./node_modules/@angular/material/stepper/_stepper-theme.scss","./node_modules/@angular/material/sort/_sort-theme.scss","./node_modules/@angular/material/toolbar/_toolbar-theme.scss","./node_modules/@angular/material/tree/_tree-theme.scss","./src/styles/0-base/_typography-theme.scss","./src/styles/_constants.scss","./src/styles/1-layouts/footer/_footer-theme.scss","./src/styles/1-layouts/layout-global/_layout-global-theme.scss","./src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss","./src/styles/1-layouts/not-found/_not-found-theme.scss","./src/styles/1-layouts/sidenav/_sidenav-theme.scss","./src/styles/1-layouts/top-menu/_top-menu-theme.scss","./src/styles/_mixins.scss","./src/styles/2-modules/alert/_alert-theme.scss","./src/styles/2-modules/api-list/_api-list-theme.scss","./src/styles/2-modules/api-symbols/_api-symbols-theme.scss","./src/styles/2-modules/buttons/_buttons-theme.scss","./src/styles/2-modules/callout/_callout-theme.scss","./src/styles/2-modules/card/_card-theme.scss","./src/styles/2-modules/code/_code-theme.scss","./src/styles/2-modules/contributor/_contributor-theme.scss","./src/styles/2-modules/cookies-popup/_cookies-popup-theme.scss","./src/styles/2-modules/deploy-theme/_deploy-theme.scss","./src/styles/2-modules/details/_details-theme.scss","./src/styles/2-modules/errors/_errors-theme.scss","./src/styles/2-modules/filetree/_filetree-theme.scss","./src/styles/2-modules/guides/_guides-theme.scss","./src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss","./src/styles/2-modules/hr/_hr-theme.scss","./src/styles/2-modules/images/_images-theme.scss","./src/styles/2-modules/label/_label-theme.scss","./src/styles/2-modules/notification/_notification-theme.scss","./src/styles/2-modules/presskit/_presskit-theme.scss","./src/styles/2-modules/resources/_resources-theme.scss","./src/styles/2-modules/roadmap/_roadmap-theme.scss","./src/styles/2-modules/search-results/_search-results-theme.scss","./src/styles/2-modules/select-menu/_select-menu-theme.scss","./src/styles/2-modules/table/_table-theme.scss","./src/styles/2-modules/toc/_toc-theme.scss"],"sourcesContent":["@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../datepicker/datepicker-legacy-compat';\n\n$_ripple-opacity: 0.1;\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _focus-overlay-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  &.mat-primary .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($primary);\n  }\n\n  &.mat-accent .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($accent);\n  }\n\n  &.mat-warn .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($warn);\n  }\n\n  &.mat-button-disabled .mat-button-focus-overlay {\n    background-color: transparent;\n  }\n}\n\n// Applies the background color for a ripple. If the value provided is not a Sass color,\n// we assume that we've been given a CSS variable. Since we can't perform alpha-blending\n// on a CSS variable, we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $hue, $opacity) {\n  $background-color: theming.get-color-from-palette($palette, $hue, $opacity);\n  background-color: $background-color;\n  @if (meta.type-of($background-color) != color) {\n    opacity: $opacity;\n  }\n}\n\n@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {\n  $primary: map.get($theme, primary);\n  $accent: map.get($theme, accent);\n  $warn: map.get($theme, warn);\n\n  &.mat-primary .mat-ripple-element {\n    @include _ripple-background($primary, $hue, $opacity);\n  }\n\n  &.mat-accent .mat-ripple-element {\n    @include _ripple-background($accent, $hue, $opacity);\n  }\n\n  &.mat-warn .mat-ripple-element {\n    @include _ripple-background($warn, $hue, $opacity);\n  }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _theme-property($theme, $property, $hue) {\n  $primary: map.get($theme, primary);\n  $accent: map.get($theme, accent);\n  $warn: map.get($theme, warn);\n  $background: map.get($theme, background);\n  $foreground: map.get($theme, foreground);\n\n  &.mat-primary {\n    #{$property}: theming.get-color-from-palette($primary, $hue);\n  }\n  &.mat-accent {\n    #{$property}: theming.get-color-from-palette($accent, $hue);\n  }\n  &.mat-warn {\n    #{$property}: theming.get-color-from-palette($warn, $hue);\n  }\n\n  &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {\n    &.mat-button-disabled {\n      $palette: if($property == 'color', $foreground, $background);\n      #{$property}: theming.get-color-from-palette($palette, disabled-button);\n    }\n  }\n}\n\n/// @deprecated Use `mat.button-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-button, .mat-icon-button, .mat-stroked-button {\n    // Buttons without a background color should inherit the font color. This is necessary to\n    // ensure that the button is readable on custom background colors. It's wrong to always assume\n    // that those buttons are always placed inside of containers with the default background\n    // color of the theme (e.g. themed toolbars).\n    color: inherit;\n    background: transparent;\n\n    @include _theme-property($config, 'color', text);\n    @include _focus-overlay-color($config);\n\n    // Setup the ripple color to be based on the text color. This ensures that the ripples\n    // are matching with the current theme palette and are in contrast to the background color\n    // (e.g in themed toolbars).\n    .mat-ripple-element {\n      opacity: $_ripple-opacity;\n      background-color: currentColor;\n    }\n  }\n\n  .mat-button-focus-overlay {\n    background: map.get($foreground, base);\n  }\n\n  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion\n  // order of the theme styles and the button reset may end up resetting this as well.\n  .mat-stroked-button:not(.mat-button-disabled) {\n    border-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n    // Default font and background color when not using any color palette.\n    color: theming.get-color-from-palette($foreground, text);\n    background-color: theming.get-color-from-palette($background, raised-button);\n\n    @include _theme-property($config, 'color', default-contrast);\n    @include _theme-property($config, 'background-color', default);\n    @include _ripple-color($config, default-contrast);\n  }\n\n  .mat-stroked-button, .mat-flat-button {\n    @include private.private-theme-overridable-elevation(0, $config);\n  }\n\n  .mat-raised-button {\n    @include private.private-theme-overridable-elevation(2, $config);\n\n    &:not(.mat-button-disabled):active {\n      @include private.private-theme-overridable-elevation(8, $config);\n    }\n\n    &.mat-button-disabled {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n\n  .mat-fab, .mat-mini-fab {\n    @include private.private-theme-overridable-elevation(6, $config);\n\n    &:not(.mat-button-disabled):active {\n      @include private.private-theme-overridable-elevation(12, $config);\n    }\n\n    &.mat-button-disabled {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n\n  @include datepicker-legacy-compat.legacy-button-compat-theme((\n      color: $config,\n      typography: null,\n      density: null,\n  ));\n}\n\n/// @deprecated Use `mat.button-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,\n  .mat-flat-button, .mat-fab, .mat-mini-fab {\n    font: {\n      family: typography-utils.font-family($config, button);\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n\n  @include datepicker-legacy-compat.legacy-button-compat-theme((\n      color: null,\n      typography: $config,\n      density: null,\n  ));\n}\n\n@mixin _density($config-or-theme) {\n  @include datepicker-legacy-compat.legacy-button-compat-theme((\n      color: null,\n      typography: null,\n      density: theming.get-density-config($config-or-theme)\n  ));\n}\n\n/// @deprecated Use `mat.button-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-button') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n",".mat-button, .mat-icon-button, .mat-stroked-button {\n  color: inherit;\n  background: transparent;\n}\n.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {\n  color: #1976d2;\n}\n.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {\n  color: #d32f2f;\n}\n.mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {\n  color: #f44336;\n}\n.mat-button.mat-primary.mat-button-disabled, .mat-button.mat-accent.mat-button-disabled, .mat-button.mat-warn.mat-button-disabled, .mat-button.mat-button-disabled.mat-button-disabled, .mat-icon-button.mat-primary.mat-button-disabled, .mat-icon-button.mat-accent.mat-button-disabled, .mat-icon-button.mat-warn.mat-button-disabled, .mat-icon-button.mat-button-disabled.mat-button-disabled, .mat-stroked-button.mat-primary.mat-button-disabled, .mat-stroked-button.mat-accent.mat-button-disabled, .mat-stroked-button.mat-warn.mat-button-disabled, .mat-stroked-button.mat-button-disabled.mat-button-disabled {\n  color: rgba(0, 0, 0, 0.26);\n}\n.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay {\n  background-color: #1976d2;\n}\n.mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay, .mat-stroked-button.mat-accent .mat-button-focus-overlay {\n  background-color: #d32f2f;\n}\n.mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay, .mat-stroked-button.mat-warn .mat-button-focus-overlay {\n  background-color: #f44336;\n}\n.mat-button.mat-button-disabled .mat-button-focus-overlay, .mat-icon-button.mat-button-disabled .mat-button-focus-overlay, .mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {\n  background-color: transparent;\n}\n.mat-button .mat-ripple-element, .mat-icon-button .mat-ripple-element, .mat-stroked-button .mat-ripple-element {\n  opacity: 0.1;\n  background-color: currentColor;\n}\n\n.mat-button-focus-overlay {\n  background: black;\n}\n\n.mat-stroked-button:not(.mat-button-disabled) {\n  border-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: white;\n}\n.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n  color: white;\n}\n.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n  color: white;\n}\n.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n  color: white;\n}\n.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {\n  color: rgba(0, 0, 0, 0.26);\n}\n.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n  background-color: #1976d2;\n}\n.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n  background-color: #d32f2f;\n}\n.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n  background-color: #f44336;\n}\n.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n.mat-flat-button.mat-primary .mat-ripple-element, .mat-raised-button.mat-primary .mat-ripple-element, .mat-fab.mat-primary .mat-ripple-element, .mat-mini-fab.mat-primary .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-flat-button.mat-accent .mat-ripple-element, .mat-raised-button.mat-accent .mat-ripple-element, .mat-fab.mat-accent .mat-ripple-element, .mat-mini-fab.mat-accent .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-flat-button.mat-warn .mat-ripple-element, .mat-raised-button.mat-warn .mat-ripple-element, .mat-fab.mat-warn .mat-ripple-element, .mat-mini-fab.mat-warn .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.mat-stroked-button:not([class*=mat-elevation-z]), .mat-flat-button:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-raised-button:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]), .mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);\n}\n.mat-fab.mat-button-disabled:not([class*=mat-elevation-z]), .mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-datepicker-content .mat-mdc-button.mat-unthemed {\n  --mdc-text-button-label-text-color: #000;\n}\n.mat-datepicker-content .mat-mdc-button.mat-primary {\n  --mdc-text-button-label-text-color: #1976d2;\n}\n.mat-datepicker-content .mat-mdc-button.mat-accent {\n  --mdc-text-button-label-text-color: #d32f2f;\n}\n.mat-datepicker-content .mat-mdc-button.mat-warn {\n  --mdc-text-button-label-text-color: #f44336;\n}\n.mat-datepicker-content .mat-mdc-button[disabled][disabled] {\n  --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-text-button-label-text-color: rgba(0, 0, 0, 0.38);\n}\n.mat-datepicker-content .mat-mdc-unelevated-button.mat-unthemed {\n  --mdc-filled-button-container-color: #fff;\n  --mdc-filled-button-label-text-color: #000;\n}\n.mat-datepicker-content .mat-mdc-unelevated-button.mat-primary {\n  --mdc-filled-button-container-color: #1976d2;\n  --mdc-filled-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-unelevated-button.mat-accent {\n  --mdc-filled-button-container-color: #d32f2f;\n  --mdc-filled-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-unelevated-button.mat-warn {\n  --mdc-filled-button-container-color: #f44336;\n  --mdc-filled-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-unelevated-button[disabled][disabled] {\n  --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12);\n  --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-filled-button-container-color: rgba(0, 0, 0, 0.12);\n  --mdc-filled-button-label-text-color: rgba(0, 0, 0, 0.38);\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-unthemed {\n  --mdc-protected-button-container-color: #fff;\n  --mdc-protected-button-label-text-color: #000;\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-primary {\n  --mdc-protected-button-container-color: #1976d2;\n  --mdc-protected-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-accent {\n  --mdc-protected-button-container-color: #d32f2f;\n  --mdc-protected-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-warn {\n  --mdc-protected-button-container-color: #f44336;\n  --mdc-protected-button-label-text-color: #fff;\n}\n.mat-datepicker-content .mat-mdc-raised-button[disabled][disabled] {\n  --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12);\n  --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-protected-button-container-color: rgba(0, 0, 0, 0.12);\n  --mdc-protected-button-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-protected-button-container-elevation: 0;\n}\n.mat-datepicker-content .mat-mdc-outlined-button {\n  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);\n}\n.mat-datepicker-content .mat-mdc-outlined-button.mat-unthemed {\n  --mdc-outlined-button-label-text-color: #000;\n}\n.mat-datepicker-content .mat-mdc-outlined-button.mat-primary {\n  --mdc-outlined-button-label-text-color: #1976d2;\n}\n.mat-datepicker-content .mat-mdc-outlined-button.mat-accent {\n  --mdc-outlined-button-label-text-color: #d32f2f;\n}\n.mat-datepicker-content .mat-mdc-outlined-button.mat-warn {\n  --mdc-outlined-button-label-text-color: #f44336;\n}\n.mat-datepicker-content .mat-mdc-outlined-button[disabled][disabled] {\n  --mdc-outlined-button-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);\n  --mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);\n  --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12);\n}\n.mat-datepicker-content .mat-mdc-button, .mat-datepicker-content .mat-mdc-outlined-button {\n  --mat-mdc-button-persistent-ripple-color: #000;\n  --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);\n}\n.mat-datepicker-content .mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.04;\n}\n.mat-datepicker-content .mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-button:active .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-button.mat-primary, .mat-datepicker-content .mat-mdc-outlined-button.mat-primary {\n  --mat-mdc-button-persistent-ripple-color: #1976d2;\n  --mat-mdc-button-ripple-color: rgba(25, 118, 210, 0.1);\n}\n.mat-datepicker-content .mat-mdc-button.mat-accent, .mat-datepicker-content .mat-mdc-outlined-button.mat-accent {\n  --mat-mdc-button-persistent-ripple-color: #d32f2f;\n  --mat-mdc-button-ripple-color: rgba(211, 47, 47, 0.1);\n}\n.mat-datepicker-content .mat-mdc-button.mat-warn, .mat-datepicker-content .mat-mdc-outlined-button.mat-warn {\n  --mat-mdc-button-persistent-ripple-color: #f44336;\n  --mat-mdc-button-ripple-color: rgba(244, 67, 54, 0.1);\n}\n.mat-datepicker-content .mat-mdc-raised-button, .mat-datepicker-content .mat-mdc-unelevated-button {\n  --mat-mdc-button-persistent-ripple-color: #000;\n  --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);\n}\n.mat-datepicker-content .mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.04;\n}\n.mat-datepicker-content .mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-primary, .mat-datepicker-content .mat-mdc-unelevated-button.mat-primary {\n  --mat-mdc-button-persistent-ripple-color: #fff;\n  --mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1);\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-accent, .mat-datepicker-content .mat-mdc-unelevated-button.mat-accent {\n  --mat-mdc-button-persistent-ripple-color: #fff;\n  --mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1);\n}\n.mat-datepicker-content .mat-mdc-raised-button.mat-warn, .mat-datepicker-content .mat-mdc-unelevated-button.mat-warn {\n  --mat-mdc-button-persistent-ripple-color: #fff;\n  --mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button {\n  --mat-mdc-button-persistent-ripple-color: #000;\n  --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);\n  --mdc-icon-button-icon-color: inherit;\n  --mat-mdc-button-persistent-ripple-color: #000;\n  --mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.04;\n}\n.mat-datepicker-content .mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple::before {\n  opacity: 0.12;\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-primary {\n  --mat-mdc-button-persistent-ripple-color: #6200ee;\n  --mat-mdc-button-ripple-color: rgba(98, 0, 238, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-accent {\n  --mat-mdc-button-persistent-ripple-color: #018786;\n  --mat-mdc-button-ripple-color: rgba(1, 135, 134, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-warn {\n  --mat-mdc-button-persistent-ripple-color: #b00020;\n  --mat-mdc-button-ripple-color: rgba(176, 0, 32, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-primary {\n  --mdc-icon-button-icon-color: #1976d2;\n  --mat-mdc-button-persistent-ripple-color: #1976d2;\n  --mat-mdc-button-ripple-color: rgba(25, 118, 210, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-accent {\n  --mdc-icon-button-icon-color: #d32f2f;\n  --mat-mdc-button-persistent-ripple-color: #d32f2f;\n  --mat-mdc-button-ripple-color: rgba(211, 47, 47, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-warn {\n  --mdc-icon-button-icon-color: #f44336;\n  --mat-mdc-button-persistent-ripple-color: #f44336;\n  --mat-mdc-button-ripple-color: rgba(244, 67, 54, 0.1);\n}\n.mat-datepicker-content .mat-mdc-icon-button[disabled][disabled] {\n  --mdc-icon-button-icon-color: rgba(0, 0, 0, 0.38);\n  --mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-datepicker-content .mat-mdc-button.mat-mdc-button-base,\n.mat-datepicker-content .mat-mdc-raised-button.mat-mdc-button-base,\n.mat-datepicker-content .mat-mdc-unelevated-button.mat-mdc-button-base,\n.mat-datepicker-content .mat-mdc-outlined-button.mat-mdc-button-base {\n  height: 36px;\n}\n.mat-datepicker-content .mat-mdc-icon-button.mat-mdc-button-base {\n  --mdc-icon-button-state-layer-size: 48px;\n  width: var(--mdc-icon-button-state-layer-size);\n  height: var(--mdc-icon-button-state-layer-size);\n  padding: 12px;\n}\n\n.mat-option {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n  background: rgba(0, 0, 0, 0.04);\n}\n.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n  background: rgba(0, 0, 0, 0.04);\n}\n.mat-option.mat-active {\n  background: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-option.mat-option-disabled {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n  color: #1976d2;\n}\n\n.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n  color: #d32f2f;\n}\n\n.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n  color: #f44336;\n}\n\n.mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-optgroup-disabled .mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.mat-pseudo-checkbox-full {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-disabled {\n  color: #b0b0b0;\n}\n\n.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,\n.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {\n  color: #1976d2;\n}\n.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,\n.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {\n  background: #1976d2;\n}\n.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,\n.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {\n  color: #fafafa;\n}\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {\n  color: #d32f2f;\n}\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {\n  background: #d32f2f;\n}\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {\n  color: #fafafa;\n}\n\n.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,\n.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {\n  color: #d32f2f;\n}\n.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,\n.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {\n  background: #d32f2f;\n}\n.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,\n.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {\n  color: #fafafa;\n}\n\n.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,\n.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {\n  color: #f44336;\n}\n.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,\n.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {\n  background: #f44336;\n}\n.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,\n.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {\n  color: #fafafa;\n}\n\n.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,\n.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {\n  color: #b0b0b0;\n}\n.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,\n.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {\n  background: #b0b0b0;\n}\n\n.mat-app-background {\n  background-color: #fafafa;\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-elevation-z0 {\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z1 {\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z2 {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z3 {\n  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z4 {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z5 {\n  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z6 {\n  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z7 {\n  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z8 {\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z9 {\n  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z10 {\n  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z11 {\n  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z12 {\n  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z13 {\n  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z14 {\n  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z15 {\n  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z16 {\n  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z17 {\n  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z18 {\n  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z19 {\n  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z20 {\n  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z21 {\n  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z22 {\n  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z23 {\n  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-elevation-z24 {\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-theme-loaded-marker {\n  display: none;\n}\n\n.mat-card {\n  background: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-card:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-card.mat-card-flat:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-card-subtitle {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-progress-bar-background {\n  fill: #c2d9f0;\n}\n\n.mat-progress-bar-buffer {\n  background-color: #c2d9f0;\n}\n\n.mat-progress-bar-fill::after {\n  background-color: #1976d2;\n}\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n  fill: #f0c7c7;\n}\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n  background-color: #f0c7c7;\n}\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n  background-color: #d32f2f;\n}\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n  fill: #f9ccc9;\n}\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n  background-color: #f9ccc9;\n}\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n  background-color: #f44336;\n}\n\n.mat-progress-spinner circle, .mat-spinner circle {\n  stroke: #1976d2;\n}\n.mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle {\n  stroke: #d32f2f;\n}\n.mat-progress-spinner.mat-warn circle, .mat-spinner.mat-warn circle {\n  stroke: #f44336;\n}\n\n.mat-tooltip {\n  background: rgba(97, 97, 97, 0.9);\n}\n\n.mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-input-element:disabled,\n.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-input-element {\n  caret-color: #1976d2;\n}\n.mat-input-element::placeholder {\n  color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element::-moz-placeholder {\n  color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element::-webkit-input-placeholder {\n  color: rgba(0, 0, 0, 0.42);\n}\n.mat-input-element:-ms-input-placeholder {\n  color: rgba(0, 0, 0, 0.42);\n}\n\n.mat-form-field.mat-accent .mat-input-element {\n  caret-color: #d32f2f;\n}\n\n.mat-form-field.mat-warn .mat-input-element,\n.mat-form-field-invalid .mat-input-element {\n  caret-color: #f44336;\n}\n\n.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n  color: #f44336;\n}\n\n.mat-form-field-disabled .mat-form-field-prefix,\n.mat-form-field-disabled .mat-form-field-suffix {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-form-field-label {\n  color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-hint {\n  color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-form-field.mat-focused .mat-form-field-label {\n  color: #1976d2;\n}\n.mat-form-field.mat-focused .mat-form-field-label.mat-accent {\n  color: #d32f2f;\n}\n.mat-form-field.mat-focused .mat-form-field-label.mat-warn {\n  color: #f44336;\n}\n\n.mat-focused .mat-form-field-required-marker {\n  color: #d32f2f;\n}\n\n.mat-form-field-ripple {\n  background-color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-form-field.mat-focused .mat-form-field-ripple {\n  background-color: #1976d2;\n}\n.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {\n  background-color: #d32f2f;\n}\n.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {\n  background-color: #f44336;\n}\n\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {\n  color: #1976d2;\n}\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {\n  color: #d32f2f;\n}\n.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after {\n  color: #f44336;\n}\n\n.mat-form-field.mat-form-field-invalid .mat-form-field-label {\n  color: #f44336;\n}\n.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,\n.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {\n  color: #f44336;\n}\n.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,\n.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {\n  background-color: #f44336;\n}\n\n.mat-error {\n  color: #f44336;\n}\n\n.mat-form-field-appearance-legacy .mat-form-field-label {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-form-field-appearance-legacy .mat-hint {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-form-field-appearance-legacy .mat-form-field-underline {\n  background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);\n  background-size: 4px 100%;\n  background-repeat: repeat-x;\n}\n\n.mat-form-field-appearance-standard .mat-form-field-underline {\n  background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);\n  background-size: 4px 100%;\n  background-repeat: repeat-x;\n}\n\n.mat-form-field-appearance-fill .mat-form-field-flex {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n.mat-form-field-appearance-fill .mat-form-field-underline::before {\n  background-color: rgba(0, 0, 0, 0.42);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {\n  background-color: transparent;\n}\n\n.mat-form-field-appearance-outline .mat-form-field-outline {\n  color: rgba(0, 0, 0, 0.12);\n}\n.mat-form-field-appearance-outline .mat-form-field-outline-thick {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {\n  color: #1976d2;\n}\n.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {\n  color: #d32f2f;\n}\n.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick {\n  color: #f44336;\n}\n.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {\n  color: #f44336;\n}\n.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {\n  color: rgba(0, 0, 0, 0.06);\n}\n\n.mat-select-value {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-select-placeholder {\n  color: rgba(0, 0, 0, 0.42);\n}\n\n.mat-select-disabled .mat-select-value {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-select-arrow {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-select-panel {\n  background: white;\n}\n.mat-select-panel:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-form-field.mat-focused.mat-primary .mat-select-arrow {\n  color: #1976d2;\n}\n.mat-form-field.mat-focused.mat-accent .mat-select-arrow {\n  color: #d32f2f;\n}\n.mat-form-field.mat-focused.mat-warn .mat-select-arrow {\n  color: #f44336;\n}\n.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {\n  color: #f44336;\n}\n.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-checkbox-frame {\n  border-color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-checkbox-checkmark {\n  fill: #fafafa;\n}\n\n.mat-checkbox-checkmark-path {\n  stroke: #fafafa !important;\n}\n\n.mat-checkbox-mixedmark {\n  background-color: #fafafa;\n}\n\n.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {\n  background-color: #1976d2;\n}\n.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {\n  background-color: #d32f2f;\n}\n.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background, .mat-checkbox-checked.mat-warn .mat-checkbox-background {\n  background-color: #f44336;\n}\n\n.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {\n  background-color: #b0b0b0;\n}\n.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {\n  border-color: #b0b0b0;\n}\n.mat-checkbox-disabled .mat-checkbox-label {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-checkbox .mat-ripple-element {\n  background-color: black;\n}\n\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {\n  background: #1976d2;\n}\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {\n  background: #d32f2f;\n}\n.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,\n.mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {\n  background: #f44336;\n}\n\n.mat-autocomplete-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-autocomplete-panel:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n  background: white;\n}\n.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-dialog-container {\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n  background: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-chip.mat-standard-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-chip.mat-standard-chip .mat-chip-remove {\n  color: rgba(0, 0, 0, 0.87);\n  opacity: 0.4;\n}\n.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {\n  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);\n}\n.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {\n  opacity: 0.54;\n}\n.mat-chip.mat-standard-chip.mat-chip-disabled {\n  opacity: 0.4;\n}\n.mat-chip.mat-standard-chip::after {\n  background: black;\n}\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {\n  background-color: #1976d2;\n  color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n  color: white;\n  opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {\n  background-color: #f44336;\n  color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n  color: white;\n  opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {\n  background-color: #d32f2f;\n  color: white;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n  color: white;\n  opacity: 0.4;\n}\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {\n  background-color: #d32f2f;\n}\n.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {\n  background-color: rgba(211, 47, 47, 0.54);\n}\n.mat-slide-toggle.mat-checked .mat-ripple-element {\n  background-color: #d32f2f;\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {\n  background-color: #1976d2;\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {\n  background-color: rgba(25, 118, 210, 0.54);\n}\n.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {\n  background-color: #1976d2;\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {\n  background-color: #f44336;\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {\n  background-color: rgba(244, 67, 54, 0.54);\n}\n.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {\n  background-color: #f44336;\n}\n.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {\n  background-color: black;\n}\n\n.mat-slide-toggle-thumb {\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  background-color: #fafafa;\n}\n\n.mat-slide-toggle-bar {\n  background-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {\n  border-color: #1976d2;\n}\n.mat-radio-button.mat-primary .mat-radio-inner-circle,\n.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {\n  background-color: #1976d2;\n}\n.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {\n  border-color: #d32f2f;\n}\n.mat-radio-button.mat-accent .mat-radio-inner-circle,\n.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {\n  background-color: #d32f2f;\n}\n.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {\n  border-color: #f44336;\n}\n.mat-radio-button.mat-warn .mat-radio-inner-circle,\n.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {\n  background-color: #f44336;\n}\n.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,\n.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,\n.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {\n  background-color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button.mat-radio-disabled .mat-radio-label-content {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mat-radio-button .mat-ripple-element {\n  background-color: black;\n}\n\n.mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider.mat-primary .mat-slider-track-fill,\n.mat-slider.mat-primary .mat-slider-thumb,\n.mat-slider.mat-primary .mat-slider-thumb-label {\n  background-color: #1976d2;\n}\n.mat-slider.mat-primary .mat-slider-thumb-label-text {\n  color: white;\n}\n.mat-slider.mat-primary .mat-slider-focus-ring {\n  background-color: rgba(25, 118, 210, 0.2);\n}\n.mat-slider.mat-accent .mat-slider-track-fill,\n.mat-slider.mat-accent .mat-slider-thumb,\n.mat-slider.mat-accent .mat-slider-thumb-label {\n  background-color: #d32f2f;\n}\n.mat-slider.mat-accent .mat-slider-thumb-label-text {\n  color: white;\n}\n.mat-slider.mat-accent .mat-slider-focus-ring {\n  background-color: rgba(211, 47, 47, 0.2);\n}\n.mat-slider.mat-warn .mat-slider-track-fill,\n.mat-slider.mat-warn .mat-slider-thumb,\n.mat-slider.mat-warn .mat-slider-thumb-label {\n  background-color: #f44336;\n}\n.mat-slider.mat-warn .mat-slider-thumb-label-text {\n  color: white;\n}\n.mat-slider.mat-warn .mat-slider-focus-ring {\n  background-color: rgba(244, 67, 54, 0.2);\n}\n\n.mat-slider:hover .mat-slider-track-background,\n.mat-slider.cdk-focused .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-slider.mat-slider-disabled .mat-slider-track-background,\n.mat-slider.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider.mat-slider-disabled .mat-slider-thumb {\n  background-color: rgba(0, 0, 0, 0.26);\n}\n.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider.mat-slider-min-value .mat-slider-focus-ring {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {\n  background-color: rgba(0, 0, 0, 0.87);\n}\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {\n  background-color: rgba(0, 0, 0, 0.26);\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {\n  border-color: rgba(0, 0, 0, 0.26);\n  background-color: transparent;\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {\n  border-color: rgba(0, 0, 0, 0.26);\n}\n\n.mat-slider-has-ticks .mat-slider-wrapper::after {\n  border-color: rgba(0, 0, 0, 0.7);\n}\n\n.mat-slider-horizontal .mat-slider-ticks {\n  background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n  background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n}\n\n.mat-slider-vertical .mat-slider-ticks {\n  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);\n}\n\n.mat-menu-panel {\n  background: white;\n}\n.mat-menu-panel:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-menu-item {\n  background: transparent;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-menu-item[disabled],\n.mat-menu-item[disabled] .mat-menu-submenu-icon,\n.mat-menu-item[disabled] .mat-icon-no-color {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-menu-item .mat-icon-no-color,\n.mat-menu-submenu-icon {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-menu-item:hover:not([disabled]),\n.mat-menu-item.cdk-program-focused:not([disabled]),\n.mat-menu-item.cdk-keyboard-focused:not([disabled]),\n.mat-menu-item-highlighted:not([disabled]) {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.mat-list-base .mat-list-item {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-list-base .mat-list-option {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-list-base .mat-subheader {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-list-base .mat-list-item-disabled {\n  background-color: #eeeeee;\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-list-option:hover, .mat-list-option:focus,\n.mat-nav-list .mat-list-item:hover,\n.mat-nav-list .mat-list-item:focus,\n.mat-action-list .mat-list-item:hover,\n.mat-action-list .mat-list-item:focus {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.mat-list-single-selected-option, .mat-list-single-selected-option:hover, .mat-list-single-selected-option:focus {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-paginator {\n  background: white;\n}\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-paginator-decrement,\n.mat-paginator-increment {\n  border-top: 2px solid rgba(0, 0, 0, 0.54);\n  border-right: 2px solid rgba(0, 0, 0, 0.54);\n}\n\n.mat-paginator-first,\n.mat-paginator-last {\n  border-top: 2px solid rgba(0, 0, 0, 0.54);\n}\n\n.mat-icon-button[disabled] .mat-paginator-decrement,\n.mat-icon-button[disabled] .mat-paginator-increment,\n.mat-icon-button[disabled] .mat-paginator-first,\n.mat-icon-button[disabled] .mat-paginator-last {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-paginator-container {\n  min-height: 56px;\n}\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.mat-tab-group-inverted-header .mat-tab-nav-bar,\n.mat-tab-group-inverted-header .mat-tab-header {\n  border-top: 1px solid rgba(0, 0, 0, 0.12);\n  border-bottom: none;\n}\n\n.mat-tab-label, .mat-tab-link {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-tab-group[class*=mat-background-] > .mat-tab-header,\n.mat-tab-nav-bar[class*=mat-background-] {\n  border-bottom: none;\n  border-top: none;\n}\n\n.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused {\n  background-color: rgba(30, 136, 229, 0.3);\n}\n.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {\n  background-color: #1976d2;\n}\n.mat-tab-group.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar {\n  background-color: white;\n}\n.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused {\n  background-color: rgba(229, 57, 53, 0.3);\n}\n.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar {\n  background-color: #d32f2f;\n}\n.mat-tab-group.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar {\n  background-color: white;\n}\n.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused {\n  background-color: rgba(255, 205, 210, 0.3);\n}\n.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar {\n  background-color: #f44336;\n}\n.mat-tab-group.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar {\n  background-color: white;\n}\n.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused {\n  background-color: rgba(30, 136, 229, 0.3);\n}\n.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header, .mat-tab-group.mat-background-primary > .mat-tab-link-container, .mat-tab-group.mat-background-primary > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination {\n  background-color: #1976d2;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link {\n  color: white;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n  color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-focus-indicator::before {\n  border-color: white;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: white;\n  opacity: 0.4;\n}\n.mat-tab-group.mat-background-primary > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element {\n  background-color: white;\n  opacity: 0.12;\n}\n.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused {\n  background-color: rgba(229, 57, 53, 0.3);\n}\n.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header, .mat-tab-group.mat-background-accent > .mat-tab-link-container, .mat-tab-group.mat-background-accent > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination {\n  background-color: #d32f2f;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link {\n  color: white;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n  color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-focus-indicator::before {\n  border-color: white;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: white;\n  opacity: 0.4;\n}\n.mat-tab-group.mat-background-accent > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element {\n  background-color: white;\n  opacity: 0.12;\n}\n.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused,\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused,\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused,\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused {\n  background-color: rgba(255, 205, 210, 0.3);\n}\n.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,\n.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header, .mat-tab-group.mat-background-warn > .mat-tab-link-container, .mat-tab-group.mat-background-warn > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination {\n  background-color: #f44336;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link {\n  color: white;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {\n  color: rgba(255, 255, 255, 0.4);\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-focus-indicator::before {\n  border-color: white;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: white;\n  opacity: 0.4;\n}\n.mat-tab-group.mat-background-warn > .mat-tab-header .mat-ripple-element,\n.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-ripple-element,\n.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element {\n  background-color: white;\n  opacity: 0.12;\n}\n\n.mat-snack-bar-container {\n  color: rgba(255, 255, 255, 0.7);\n  background: #323232;\n  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-simple-snackbar-action {\n  color: #d32f2f;\n}\n\n.mat-table {\n  background: white;\n}\n\n.mat-table thead, .mat-table tbody, .mat-table tfoot,\nmat-header-row, mat-row, mat-footer-row,\n[mat-header-row], [mat-row], [mat-footer-row],\n.mat-table-sticky {\n  background: inherit;\n}\n\nmat-row, mat-header-row, mat-footer-row,\nth.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n  border-bottom-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-header-cell {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-cell, .mat-footer-cell {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-badge {\n  position: relative;\n}\n\n.mat-badge.mat-badge {\n  overflow: visible;\n}\n\n.mat-badge-hidden .mat-badge-content {\n  display: none;\n}\n\n.mat-badge-content {\n  position: absolute;\n  text-align: center;\n  display: inline-block;\n  border-radius: 50%;\n  transition: transform 200ms ease-in-out;\n  transform: scale(0.6);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n.ng-animate-disabled .mat-badge-content,\n.mat-badge-content._mat-animation-noopable {\n  transition: none;\n}\n\n.mat-badge-content.mat-badge-active {\n  transform: none;\n}\n\n.mat-badge-small .mat-badge-content {\n  width: 16px;\n  height: 16px;\n  line-height: 16px;\n}\n.mat-badge-small.mat-badge-above .mat-badge-content {\n  top: -8px;\n}\n.mat-badge-small.mat-badge-below .mat-badge-content {\n  bottom: -8px;\n}\n.mat-badge-small.mat-badge-before .mat-badge-content {\n  left: -16px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -16px;\n}\n.mat-badge-small.mat-badge-after .mat-badge-content {\n  right: -16px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -16px;\n}\n.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: -8px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -8px;\n}\n.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: -8px;\n}\n[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -8px;\n}\n\n.mat-badge-medium .mat-badge-content {\n  width: 22px;\n  height: 22px;\n  line-height: 22px;\n}\n.mat-badge-medium.mat-badge-above .mat-badge-content {\n  top: -11px;\n}\n.mat-badge-medium.mat-badge-below .mat-badge-content {\n  bottom: -11px;\n}\n.mat-badge-medium.mat-badge-before .mat-badge-content {\n  left: -22px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -22px;\n}\n.mat-badge-medium.mat-badge-after .mat-badge-content {\n  right: -22px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -22px;\n}\n.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: -11px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -11px;\n}\n.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: -11px;\n}\n[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -11px;\n}\n\n.mat-badge-large .mat-badge-content {\n  width: 28px;\n  height: 28px;\n  line-height: 28px;\n}\n.mat-badge-large.mat-badge-above .mat-badge-content {\n  top: -14px;\n}\n.mat-badge-large.mat-badge-below .mat-badge-content {\n  bottom: -14px;\n}\n.mat-badge-large.mat-badge-before .mat-badge-content {\n  left: -28px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -28px;\n}\n.mat-badge-large.mat-badge-after .mat-badge-content {\n  right: -28px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -28px;\n}\n.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: -14px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {\n  left: auto;\n  right: -14px;\n}\n.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: -14px;\n}\n[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {\n  right: auto;\n  left: -14px;\n}\n\n.mat-badge-content {\n  color: white;\n  background: #1976d2;\n}\n.cdk-high-contrast-active .mat-badge-content {\n  outline: solid 1px;\n  border-radius: 0;\n}\n\n.mat-badge-accent .mat-badge-content {\n  background: #d32f2f;\n  color: white;\n}\n\n.mat-badge-warn .mat-badge-content {\n  color: white;\n  background: #f44336;\n}\n\n.mat-badge-disabled .mat-badge-content {\n  background: #b9b9b9;\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-bottom-sheet-container {\n  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n  background: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-button-toggle-standalone:not([class*=mat-elevation-z]),\n.mat-button-toggle-group:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*=mat-elevation-z]),\n.mat-button-toggle-group-appearance-standard:not([class*=mat-elevation-z]) {\n  box-shadow: none;\n}\n\n.mat-button-toggle {\n  color: rgba(0, 0, 0, 0.38);\n}\n.mat-button-toggle .mat-button-toggle-focus-overlay {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-button-toggle-appearance-standard {\n  color: rgba(0, 0, 0, 0.87);\n  background: white;\n}\n.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {\n  background-color: black;\n}\n\n.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n  border-left: solid 1px #e0e0e0;\n}\n\n[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n  border-left: none;\n  border-right: solid 1px #e0e0e0;\n}\n\n.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle + .mat-button-toggle {\n  border-left: none;\n  border-right: none;\n  border-top: solid 1px #e0e0e0;\n}\n\n.mat-button-toggle-checked {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-button-toggle-checked.mat-button-toggle-appearance-standard {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-button-toggle-disabled {\n  color: rgba(0, 0, 0, 0.26);\n  background-color: #eeeeee;\n}\n.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {\n  background: white;\n}\n.mat-button-toggle-disabled.mat-button-toggle-checked {\n  background-color: #bdbdbd;\n}\n\n.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n.mat-button-toggle-group-appearance-standard {\n  border: solid 1px #e0e0e0;\n}\n\n.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n  line-height: 48px;\n}\n\n.mat-calendar-arrow {\n  fill: rgba(0, 0, 0, 0.54);\n}\n\n.mat-datepicker-toggle,\n.mat-datepicker-content .mat-calendar-next-button,\n.mat-datepicker-content .mat-calendar-previous-button {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-calendar-table-header-divider::after {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.mat-calendar-table-header,\n.mat-calendar-body-label {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-calendar-body-cell-content,\n.mat-date-range-input-separator {\n  color: rgba(0, 0, 0, 0.87);\n  border-color: transparent;\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-form-field-disabled .mat-date-range-input-separator {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-calendar-body-in-preview {\n  color: rgba(0, 0, 0, 0.24);\n}\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: rgba(0, 0, 0, 0.18);\n}\n\n.mat-calendar-body-in-range::before {\n  background: rgba(25, 118, 210, 0.2);\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n  background: rgba(249, 171, 0, 0.2);\n}\n\n.mat-calendar-body-comparison-bridge-start::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n  background: linear-gradient(to right, rgba(25, 118, 210, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n\n.mat-calendar-body-comparison-bridge-end::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n  background: linear-gradient(to left, rgba(25, 118, 210, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n\n.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n  background: #a8dab5;\n}\n\n.mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n  background: #46a35e;\n}\n\n.mat-calendar-body-selected {\n  background-color: #1976d2;\n  color: white;\n}\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: rgba(25, 118, 210, 0.4);\n}\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n  box-shadow: inset 0 0 0 1px white;\n}\n\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  background-color: rgba(25, 118, 210, 0.3);\n}\n\n@media (hover: hover) {\n  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    background-color: rgba(25, 118, 210, 0.3);\n  }\n}\n.mat-datepicker-content {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {\n  background: rgba(211, 47, 47, 0.2);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range::before {\n  background: rgba(249, 171, 0, 0.2);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start::before,\n.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n  background: linear-gradient(to right, rgba(211, 47, 47, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end::before,\n.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n  background: linear-gradient(to left, rgba(211, 47, 47, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n  background: #a8dab5;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n  background: #46a35e;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-selected {\n  background-color: #d32f2f;\n  color: white;\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: rgba(211, 47, 47, 0.4);\n}\n.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {\n  box-shadow: inset 0 0 0 1px white;\n}\n.mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  background-color: rgba(211, 47, 47, 0.3);\n}\n@media (hover: hover) {\n  .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    background-color: rgba(211, 47, 47, 0.3);\n  }\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before {\n  background: rgba(244, 67, 54, 0.2);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range::before {\n  background: rgba(249, 171, 0, 0.2);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start::before,\n.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n  background: linear-gradient(to right, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end::before,\n.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n  background: linear-gradient(to left, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n  background: #a8dab5;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n  background: #46a35e;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-selected {\n  background-color: #f44336;\n  color: white;\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: rgba(244, 67, 54, 0.4);\n}\n.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {\n  box-shadow: inset 0 0 0 1px white;\n}\n.mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),\n.mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  background-color: rgba(244, 67, 54, 0.3);\n}\n@media (hover: hover) {\n  .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    background-color: rgba(244, 67, 54, 0.3);\n  }\n}\n\n.mat-datepicker-content-touch {\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mat-datepicker-toggle-active {\n  color: #1976d2;\n}\n.mat-datepicker-toggle-active.mat-accent {\n  color: #d32f2f;\n}\n.mat-datepicker-toggle-active.mat-warn {\n  color: #f44336;\n}\n\n.mat-date-range-input-inner[disabled] {\n  color: rgba(0, 0, 0, 0.38);\n}\n\n.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {\n  --mdc-icon-button-state-layer-size: 40px;\n  width: var(--mdc-icon-button-state-layer-size);\n  height: var(--mdc-icon-button-state-layer-size);\n  padding: 8px;\n}\n.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target {\n  display: none;\n}\n\n.mat-divider {\n  border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-divider-vertical {\n  border-right-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-expansion-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-expansion-panel:not([class*=mat-elevation-z]) {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mat-action-row {\n  border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]), .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]), .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n@media (hover: none) {\n  .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {\n    background: white;\n  }\n}\n.mat-expansion-panel-header-title {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n  color: rgba(0, 0, 0, 0.54);\n}\n\n.mat-expansion-panel-header[aria-disabled=true] {\n  color: rgba(0, 0, 0, 0.26);\n}\n.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title,\n.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description {\n  color: inherit;\n}\n\n.mat-expansion-panel-header {\n  height: 48px;\n}\n.mat-expansion-panel-header.mat-expanded {\n  height: 64px;\n}\n\n.mat-icon.mat-primary {\n  color: #1976d2;\n}\n.mat-icon.mat-accent {\n  color: #d32f2f;\n}\n.mat-icon.mat-warn {\n  color: #f44336;\n}\n\n.mat-drawer-container {\n  background-color: #fafafa;\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-drawer {\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-drawer.mat-drawer-push {\n  background-color: white;\n}\n.mat-drawer:not(.mat-drawer-side) {\n  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n}\n\n.mat-drawer-side {\n  border-right: solid 1px rgba(0, 0, 0, 0.12);\n}\n.mat-drawer-side.mat-drawer-end {\n  border-left: solid 1px rgba(0, 0, 0, 0.12);\n  border-right: none;\n}\n\n[dir=rtl] .mat-drawer-side {\n  border-left: solid 1px rgba(0, 0, 0, 0.12);\n  border-right: none;\n}\n[dir=rtl] .mat-drawer-side.mat-drawer-end {\n  border-left: none;\n  border-right: solid 1px rgba(0, 0, 0, 0.12);\n}\n\n.mat-drawer-backdrop.mat-drawer-shown {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover:not([aria-disabled]), .mat-step-header:hover[aria-disabled=false] {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.mat-step-header:hover[aria-disabled=true] {\n  cursor: default;\n}\n@media (hover: none) {\n  .mat-step-header:hover {\n    background: none;\n  }\n}\n.mat-step-header .mat-step-label,\n.mat-step-header .mat-step-optional {\n  color: rgba(0, 0, 0, 0.54);\n}\n.mat-step-header .mat-step-icon {\n  background-color: rgba(0, 0, 0, 0.54);\n  color: white;\n}\n.mat-step-header .mat-step-icon-selected,\n.mat-step-header .mat-step-icon-state-done,\n.mat-step-header .mat-step-icon-state-edit {\n  background-color: #1976d2;\n  color: white;\n}\n.mat-step-header.mat-accent .mat-step-icon {\n  color: white;\n}\n.mat-step-header.mat-accent .mat-step-icon-selected,\n.mat-step-header.mat-accent .mat-step-icon-state-done,\n.mat-step-header.mat-accent .mat-step-icon-state-edit {\n  background-color: #d32f2f;\n  color: white;\n}\n.mat-step-header.mat-warn .mat-step-icon {\n  color: white;\n}\n.mat-step-header.mat-warn .mat-step-icon-selected,\n.mat-step-header.mat-warn .mat-step-icon-state-done,\n.mat-step-header.mat-warn .mat-step-icon-state-edit {\n  background-color: #f44336;\n  color: white;\n}\n.mat-step-header .mat-step-icon-state-error {\n  background-color: transparent;\n  color: #f44336;\n}\n.mat-step-header .mat-step-label.mat-step-label-active {\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-step-header .mat-step-label.mat-step-label-error {\n  color: #f44336;\n}\n\n.mat-stepper-horizontal, .mat-stepper-vertical {\n  background-color: white;\n}\n\n.mat-stepper-vertical-line::before {\n  border-left-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-horizontal-stepper-header::before,\n.mat-horizontal-stepper-header::after,\n.mat-stepper-horizontal-line {\n  border-top-color: rgba(0, 0, 0, 0.12);\n}\n\n.mat-horizontal-stepper-header {\n  height: 72px;\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n.mat-vertical-stepper-header {\n  padding: 24px 24px;\n}\n\n.mat-stepper-vertical-line::before {\n  top: -16px;\n  bottom: -16px;\n}\n\n.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before {\n  top: 36px;\n}\n\n.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n  top: 36px;\n}\n\n.mat-sort-header-arrow {\n  color: #757575;\n}\n\n.mat-toolbar {\n  background: whitesmoke;\n  color: rgba(0, 0, 0, 0.87);\n}\n.mat-toolbar.mat-primary {\n  background: #1976d2;\n  color: white;\n}\n.mat-toolbar.mat-accent {\n  background: #d32f2f;\n  color: white;\n}\n.mat-toolbar.mat-warn {\n  background: #f44336;\n  color: white;\n}\n.mat-toolbar .mat-form-field-underline,\n.mat-toolbar .mat-form-field-ripple,\n.mat-toolbar .mat-focused .mat-form-field-ripple {\n  background-color: currentColor;\n}\n.mat-toolbar .mat-form-field-label,\n.mat-toolbar .mat-focused .mat-form-field-label,\n.mat-toolbar .mat-select-value,\n.mat-toolbar .mat-select-arrow,\n.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {\n  color: inherit;\n}\n.mat-toolbar .mat-input-element {\n  caret-color: currentColor;\n}\n\n.mat-toolbar-multiple-rows {\n  min-height: 64px;\n}\n\n.mat-toolbar-row, .mat-toolbar-single-row {\n  height: 64px;\n}\n\n@media (max-width: 599px) {\n  .mat-toolbar-multiple-rows {\n    min-height: 56px;\n  }\n  .mat-toolbar-row, .mat-toolbar-single-row {\n    height: 56px;\n  }\n}\n.mat-tree {\n  background: white;\n}\n\n.mat-tree-node,\n.mat-nested-tree-node {\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.mat-tree-node {\n  min-height: 48px;\n}\n\nbody {\n  color: #444444;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  color: #333333;\n}\n\nh2 {\n  border-top: 1px solid #DBDBDB;\n}\n\nh6 {\n  color: #6E6E6E;\n}\n\np,\nol,\nul,\nli,\ninput,\na {\n  color: #444444;\n}\n\n.app-toolbar a {\n  color: #FFFFFF;\n}\n\ncode {\n  color: #444444;\n}\n\n.sidenav-content a {\n  color: #1976D2;\n}\n\n.error-text {\n  color: #DD0031;\n}\n\nfooter {\n  background-color: #1976d2;\n}\nfooter aio-footer > * {\n  color: #FFFFFF;\n}\nfooter aio-footer a {\n  color: #FFFFFF;\n}\nfooter aio-footer h3 {\n  color: #FFFFFF;\n}\n\nhtml,\nbody,\n.content {\n  background: #FFFFFF;\n}\n\n.background-sky {\n  background: linear-gradient(145deg, #0d47a1, #42a5f5);\n  color: rgba(0, 0, 0, 0.87);\n}\n\nsection#intro {\n  color: #FFFFFF;\n}\n\n.announcement-bar {\n  background-color: #FFFFFF;\n}\n.announcement-bar .button {\n  color: #FFFFFF;\n  background-color: #1976D2;\n}\n.announcement-bar .button:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.home-row .card {\n  background-color: #FFFFFF;\n}\n.home-row .card .card-text-container p {\n  color: #444444;\n}\n.home-row .card:hover h2 {\n  color: #1976D2;\n}\n\n.button.hero-cta {\n  background-color: #FFFFFF;\n}\n\n.cta-bar .hero-cta {\n  color: #1976D2;\n}\n\n.text-headline {\n  color: #1976D2;\n}\n\n.marketing-banner {\n  background-color: #1e88e5;\n}\n.marketing-banner .banner-headline {\n  color: #FFFFFF;\n}\n\n.nf-response h1 {\n  color: #1976D2;\n}\n\n.nf-icon.material-icons {\n  color: #1976D2;\n}\n\nmat-sidenav-container.sidenav-container {\n  background-color: #FFFFFF;\n}\nmat-sidenav-container.sidenav-container mat-sidenav.sidenav {\n  background-color: #F2F2F2;\n  border-right: 1px solid #DBDBDB;\n}\nmat-sidenav-container.sidenav-container mat-sidenav.sidenav .doc-version {\n  border-top: 1px solid #DBDBDB;\n}\n\naio-nav-menu aio-nav-item .vertical-menu-item {\n  color: #444444;\n}\naio-nav-menu aio-nav-item .vertical-menu-item:hover {\n  background-color: #DBDBDB;\n  color: #1976D2;\n  text-shadow: 0 0 5px #FFFFFF;\n}\naio-nav-menu aio-nav-item .vertical-menu-item:hover.selected {\n  color: #1669bb;\n}\naio-nav-menu aio-nav-item .vertical-menu-item.selected {\n  color: #1669bb;\n}\n\n.page-home mat-toolbar.app-toolbar {\n  background: #1976D2;\n}\nmat-toolbar.app-toolbar mat-icon {\n  color: #FFFFFF;\n}\nmat-toolbar.app-toolbar .hamburger:hover {\n  color: #FAFAFA;\n}\nmat-toolbar.app-toolbar .hamburger .mat-icon {\n  color: #FFFFFF;\n}\nmat-toolbar.app-toolbar .nav-link.home:focus {\n  outline: 1px solid rgba(255, 255, 255, 0.8);\n}\nmat-toolbar.app-toolbar aio-top-menu ul li a.nav-link .nav-link-inner:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\nmat-toolbar.app-toolbar aio-top-menu ul li a.nav-link:focus .nav-link-inner {\n  background: rgba(255, 255, 255, 0.15);\n  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.8);\n}\nmat-toolbar.app-toolbar aio-top-menu ul li a.nav-link:active .nav-link-inner {\n  background: rgba(255, 255, 255, 0.15);\n}\nmat-toolbar.app-toolbar aio-top-menu ul li.selected a.nav-link .nav-link-inner {\n  background: rgba(255, 255, 255, 0.15);\n}\nmat-toolbar.app-toolbar aio-search-box.search-container input {\n  color: #444444;\n  background-color: #FFFFFF;\n}\nmat-toolbar.app-toolbar aio-search-box.search-container input:-ms-input-placeholder {\n  color: #6E6E6E;\n}\nmat-toolbar.app-toolbar aio-search-box.search-container input::-ms-input-placeholder {\n  color: #6E6E6E;\n}\nmat-toolbar.app-toolbar aio-search-box.search-container input::-webkit-input-placeholder {\n  color: #6E6E6E;\n}\nmat-toolbar.app-toolbar aio-search-box.search-container input::placeholder {\n  color: #6E6E6E;\n}\nmat-toolbar.app-toolbar aio-search-box.search-container .search-box-shortcut {\n  border-color: #6E6E6E;\n  color: #6E6E6E;\n}\n@media screen and (min-width: 351px) {\n  mat-toolbar.app-toolbar aio-theme-toggle {\n    border-right: 1px solid #FFFFFF;\n  }\n}\n\n.alert {\n  color: #444444;\n}\n.alert.is-critical {\n  border-left: 8px solid #DD0031;\n  background-color: rgba(221, 0, 49, 0.05);\n}\n.alert.is-critical h1,\n.alert.is-critical h2,\n.alert.is-critical h3,\n.alert.is-critical h4,\n.alert.is-critical h5,\n.alert.is-critical h6 {\n  color: #DD0031;\n}\n.alert.is-important {\n  border-left: 8px solid #FF9800;\n  background-color: rgba(255, 152, 0, 0.05);\n}\n.alert.is-important h1,\n.alert.is-important h2,\n.alert.is-important h3,\n.alert.is-important h4,\n.alert.is-important h5,\n.alert.is-important h6 {\n  color: #FF9800;\n}\n.alert.is-helpful {\n  border-left: 8px solid #1976D2;\n  background-color: rgba(25, 118, 210, 0.05);\n}\n.alert.is-helpful h1,\n.alert.is-helpful h2,\n.alert.is-helpful h3,\n.alert.is-helpful h4,\n.alert.is-helpful h5,\n.alert.is-helpful h6 {\n  color: #1976D2;\n}\n.alert.archive-warning {\n  background-color: #C3002F;\n}\n.alert.archive-warning * {\n  color: #FFFFFF;\n}\n.alert.archive-warning a {\n  color: #FFFFFF;\n}\n\naio-api-list .api-filter .form-search input {\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  border: 1px solid #FFFFFF;\n  background-color: #FFFFFF;\n  color: #444444;\n}\naio-api-list .api-filter .form-search input:-ms-input-placeholder {\n  color: #6E6E6E;\n}\naio-api-list .api-filter .form-search input::-ms-input-placeholder {\n  color: #6E6E6E;\n}\naio-api-list .api-filter .form-search input::-webkit-input-placeholder {\n  color: #6E6E6E;\n}\naio-api-list .api-filter .form-search input::placeholder {\n  color: #6E6E6E;\n}\naio-api-list .api-filter .form-search input:focus {\n  border: 1px solid #42A5F5;\n  box-shadow: 0 2px 2px rgba(66, 165, 245, 0.24), 0 0 2px rgba(66, 165, 245, 0.12);\n}\naio-api-list .api-filter .form-search .material-icons {\n  color: #546E7A;\n}\naio-api-list .api-list-container a {\n  color: #1976D2;\n}\naio-api-list .api-list-container .api-list li a {\n  color: #546E7A;\n}\naio-api-list .api-list-container .api-list li a:hover {\n  background: #ECEFF1;\n  color: #2196F3;\n}\n\n.symbol {\n  box-shadow: 0 1px 2px rgba(10, 16, 20, 0.24);\n  color: #FFFFFF;\n}\n.symbol.all {\n  background: #FFFFFF;\n}\n.symbol.all:before {\n  content: \" \";\n}\n.symbol.class {\n  background: #2196F3;\n}\n.symbol.class:before {\n  content: \"C\";\n}\n.symbol.const {\n  background: #6E6E6E;\n}\n.symbol.const:before {\n  content: \"K\";\n}\n.symbol.decorator {\n  background: #1565C0;\n}\n.symbol.decorator:before {\n  content: \"@\";\n}\n.symbol.directive {\n  background: #D81B60;\n}\n.symbol.directive:before {\n  content: \"D\";\n}\n.symbol.enum {\n  background: #FFA000;\n}\n.symbol.enum:before {\n  content: \"E\";\n}\n.symbol.function {\n  background: #4CAF50;\n}\n.symbol.function:before {\n  content: \"F\";\n}\n.symbol.interface {\n  background: #009688;\n}\n.symbol.interface:before {\n  content: \"I\";\n}\n.symbol.let {\n  background: #6E6E6E;\n}\n.symbol.let:before {\n  content: \"K\";\n}\n.symbol.ngmodule {\n  background: #940;\n}\n.symbol.ngmodule:before {\n  content: \"M\";\n}\n.symbol.package {\n  background: #8E24AA;\n}\n.symbol.package:before {\n  content: \"Pk\";\n}\n.symbol.pipe {\n  background: #546E7A;\n}\n.symbol.pipe:before {\n  content: \"P\";\n}\n.symbol.element {\n  background: #AA3000;\n}\n.symbol.element:before {\n  content: \"El\";\n}\n.symbol.type-alias {\n  background: #7CB342;\n}\n.symbol.type-alias:before {\n  content: \"T\";\n}\n.symbol.var {\n  background: #6E6E6E;\n}\n.symbol.var:before {\n  content: \"K\";\n}\n\na.button.mat-button.button-secondary,\n.button.button-secondary {\n  background: #6E6E6E;\n  color: rgba(255, 255, 255, 0.87);\n}\na.button.mat-button.button-plain,\n.button.button-plain {\n  background: #FFFFFF;\n  color: rgba(68, 68, 68, 0.87);\n}\na.button.mat-button.button-subtle,\n.button.button-subtle {\n  background: #6E6E6E;\n  color: #e1e1e1;\n}\na.button.mat-button.button-subtle:hover,\n.button.button-subtle:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\na.button.mat-button.button-blue,\n.button.button-blue {\n  background: #1976D2;\n  color: rgba(255, 255, 255, 0.87);\n}\na.button.mat-button.button-blue:hover,\n.button.button-blue:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\na.button.mat-button.button-banner,\n.button.button-banner {\n  background: #444444;\n  color: rgba(255, 255, 255, 0.87);\n}\n\n.cta-bar .button:hover {\n  color: #FAFAFA;\n}\n\n.group-buttons button.button.mat-button.filter-button {\n  background-color: rgba(25, 118, 210, 0.2);\n}\n.group-buttons button.button.mat-button.filter-button.selected {\n  background-color: #1976D2;\n  color: #FFFFFF;\n}\n.group-buttons button.button.mat-button.filter-button:focus, .group-buttons button.button.mat-button.filter-button:hover {\n  background-color: rgba(25, 118, 210, 0.7);\n  color: #FFFFFF;\n}\n\n.callout header {\n  color: #FFFFFF;\n}\n.callout.is-critical {\n  border-color: #DD0031;\n  background: rgba(221, 0, 49, 0.05);\n}\n.callout.is-critical header {\n  background: #DD0031;\n}\n.callout.is-important {\n  border-color: #FF9800;\n  background: rgba(255, 152, 0, 0.05);\n}\n.callout.is-important header {\n  background: #FFA000;\n}\n.callout.is-helpful {\n  border-color: #1976D2;\n  background: rgba(25, 118, 210, 0.05);\n}\n.callout.is-helpful header {\n  background: #1976D2;\n}\n\n.card-container .docs-card {\n  background-color: #FFFFFF;\n}\n.card-container .docs-card section {\n  color: #1976D2;\n}\n.card-container .docs-card p {\n  color: #444444;\n}\n.card-container .docs-card .card-footer {\n  color: #1669bb;\n  background-color: rgba(25, 118, 210, 0.1);\n  border-top: 0.5px solid #DBDBDB;\n}\n.card-container .docs-card .card-footer a {\n  color: #6E6E6E;\n}\n\ncode-example:not(.no-box) {\n  background-color: rgba(241, 241, 241, 0.2);\n  border: 0.5px solid #DBDBDB;\n  color: #444444;\n}\ncode-example[language=shell], code-example[language=sh], code-example[language=bash] {\n  background-color: #444444;\n}\ncode-example header {\n  background-color: #1E88E5;\n  color: #FAFAFA;\n}\n\ncode-tabs .code-tab-group .mat-tab-label:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\ncode-example.avoid header,\ncode-example.avoidFile header {\n  border: 2px solid #DD0031;\n  background: #DD0031;\n}\n\ncode-example.avoid,\ncode-example.avoidFile,\ncode-tabs.avoid mat-tab-body,\ncode-tabs.avoidFile mat-tab-body {\n  border: 0.5px solid #DD0031;\n}\n\naio-code pre.prettyprint code ol.linenums {\n  color: #aeaeae;\n}\naio-code pre.prettyprint code ol.linenums li::marker {\n  color: #aeaeae;\n}\naio-code pre.prettyprint code .code-missing {\n  color: #C3002F;\n}\naio-code pre.prettyprint.lang-sh .copy-button, aio-code pre.prettyprint.lang-bash .copy-button {\n  color: #DBDBDB;\n}\naio-code pre.prettyprint.lang-sh .copy-button:hover, aio-code pre.prettyprint.lang-bash .copy-button:hover {\n  color: #F2F2F2;\n}\naio-code .copy-button {\n  color: #1669bb;\n}\n\n.sidenav-content code a,\n.sidenav-content a > code {\n  color: #1669bb;\n}\n.sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) > code {\n  background-color: rgba(219, 219, 219, 0.3);\n}\n.sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(a) > code {\n  color: #444444;\n}\n\n/* PRETTY PRINTING STYLES for prettify.js. */\n/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/\n/* SPAN elements with the classes below are added by prettyprint. */\n.pln {\n  color: #000;\n} /* plain text */\n@media screen {\n  .str {\n    color: #800;\n  } /* string content */\n  .kwd {\n    color: #00f;\n  } /* a keyword */\n  .com {\n    color: #060;\n  } /* a comment */\n  .typ {\n    color: red;\n  } /* a type name */\n  .lit {\n    color: #08c;\n  } /* a literal value */\n  /* punctuation, lisp open bracket, lisp close bracket */\n  .pun,\n  .opn,\n  .clo {\n    color: #660;\n  }\n  .tag {\n    color: #008;\n  } /* a markup tag name */\n  .atn {\n    color: #606;\n  } /* a markup attribute name */\n  .atv {\n    color: #800;\n  } /* a markup attribute value */\n  .dec,\n  .var {\n    color: #606;\n  } /* a declaration; a variable name */\n  .fun {\n    color: red;\n  } /* a function name */\n}\n/* Use higher contrast and text-weight for printable form. */\n@media print, projection {\n  .str {\n    color: #060;\n  }\n  .kwd {\n    color: #006;\n    font-weight: bold;\n  }\n  .com {\n    color: #600;\n    font-style: italic;\n  }\n  .typ {\n    color: #404;\n    font-weight: bold;\n  }\n  .lit {\n    color: #044;\n  }\n  .pun,\n  .opn,\n  .clo {\n    color: #440;\n  }\n  .tag {\n    color: #006;\n    font-weight: bold;\n  }\n  .atn {\n    color: #404;\n  }\n  .atv {\n    color: #060;\n  }\n}\n/* SHELL / TERMINAL CODE BLOCKS */\ncode-example[language=shell] .pnk,\ncode-example[language=shell] .blk,\ncode-example[language=shell] .pln,\ncode-example[language=shell] .otl,\ncode-example[language=shell] .kwd,\ncode-example[language=shell] .typ,\ncode-example[language=shell] .tag,\ncode-example[language=shell] .str,\ncode-example[language=shell] .atv,\ncode-example[language=shell] .atn,\ncode-example[language=shell] .com,\ncode-example[language=shell] .lit,\ncode-example[language=shell] .pun,\ncode-example[language=shell] .dec, code-example[language=sh] .pnk,\ncode-example[language=sh] .blk,\ncode-example[language=sh] .pln,\ncode-example[language=sh] .otl,\ncode-example[language=sh] .kwd,\ncode-example[language=sh] .typ,\ncode-example[language=sh] .tag,\ncode-example[language=sh] .str,\ncode-example[language=sh] .atv,\ncode-example[language=sh] .atn,\ncode-example[language=sh] .com,\ncode-example[language=sh] .lit,\ncode-example[language=sh] .pun,\ncode-example[language=sh] .dec, code-example[language=bash] .pnk,\ncode-example[language=bash] .blk,\ncode-example[language=bash] .pln,\ncode-example[language=bash] .otl,\ncode-example[language=bash] .kwd,\ncode-example[language=bash] .typ,\ncode-example[language=bash] .tag,\ncode-example[language=bash] .str,\ncode-example[language=bash] .atv,\ncode-example[language=bash] .atn,\ncode-example[language=bash] .com,\ncode-example[language=bash] .lit,\ncode-example[language=bash] .pun,\ncode-example[language=bash] .dec {\n  color: #17ff0b;\n}\ncode-example[language=shell] .copy-button, code-example[language=sh] .copy-button, code-example[language=bash] .copy-button {\n  color: #B0BEC5;\n}\n\naio-contributor .contributor-card {\n  background: #FAFAFA;\n  box-shadow: 0px 1px 6px 1px #6E6E6E;\n}\naio-contributor .contributor-image-wrapper {\n  background-color: #333333;\n}\n\naio-cookies-popup .cookies-popup {\n  background: #252525;\n  color: rgba(255, 255, 255, 0.7);\n}\naio-cookies-popup .cookies-popup .actions .mat-button {\n  color: #7fc9ff;\n}\naio-cookies-popup .cookies-popup .actions .mat-button .mat-button-focus-overlay {\n  background: #FFFFFF;\n}\n\naio-shell.mode-archive .mat-toolbar.mat-primary, aio-shell.mode-archive footer {\n  background: linear-gradient(145deg, #263238, #78909C);\n}\naio-shell.mode-archive .vertical-menu-item.selected, aio-shell.mode-archive .vertical-menu-item:hover {\n  color: #263238;\n}\naio-shell.mode-archive .toc-inner ul.toc-list li.active a {\n  color: #263238;\n}\naio-shell.mode-archive .toc-inner ul.toc-list li.active a:before {\n  background-color: #263238;\n}\naio-shell.mode-archive .toc-inner ul.toc-list li:hover a {\n  color: #263238;\n}\n\naio-shell.mode-next .mat-toolbar.mat-primary, aio-shell.mode-next footer {\n  background: linear-gradient(145deg, #DD0031, #C3002F);\n}\naio-shell.mode-next .vertical-menu-item.selected, aio-shell.mode-next .vertical-menu-item:hover {\n  color: #DD0031;\n}\naio-shell.mode-next .toc-inner ul.toc-list li.active a {\n  color: #DD0031;\n}\naio-shell.mode-next .toc-inner ul.toc-list li.active a:before {\n  background-color: #DD0031;\n}\naio-shell.mode-next .toc-inner ul.toc-list li:hover a {\n  color: #DD0031;\n}\n\naio-shell.mode-rc .mat-toolbar.mat-primary, aio-shell.mode-rc footer {\n  background: linear-gradient(145deg, #DDA302, #C3A300);\n}\naio-shell.mode-rc .vertical-menu-item.selected, aio-shell.mode-rc .vertical-menu-item:hover {\n  color: #DDA302;\n}\naio-shell.mode-rc .toc-inner ul.toc-list li.active a {\n  color: #DDA302;\n}\naio-shell.mode-rc .toc-inner ul.toc-list li.active a:before {\n  background-color: #DDA302;\n}\naio-shell.mode-rc .toc-inner ul.toc-list li:hover a {\n  color: #DDA302;\n}\n\ndetails {\n  box-shadow: 0 1px 4px 0 rgba(10, 16, 20, 0.37);\n}\n\n.error-list li .symbol.runtime {\n  background: #4CAF50;\n}\n.error-list li .symbol.compiler {\n  background: #2196F3;\n}\n.error-list li a {\n  color: #546E7A;\n}\n.error-list li a:hover {\n  background: #ECEFF1;\n  color: #2196F3;\n}\n\n.filetree {\n  background: #FFFFFF;\n  border: 4px solid #DBDBDB;\n}\n.filetree .file {\n  color: #444444;\n}\n.filetree .children .file:before {\n  border-color: #DBDBDB;\n}\n\n.reviewed {\n  color: #5e5e5e;\n}\n\n.sidenav-content h1 .header-link,\n.sidenav-content h2 .header-link,\n.sidenav-content h3 .header-link,\n.sidenav-content h4 .header-link,\n.sidenav-content h5 .header-link,\n.sidenav-content h6 .header-link {\n  color: #6E6E6E;\n}\n\nhr {\n  background: #DBDBDB;\n}\n\n.content .lightbox {\n  border: 1px solid #DBDBDB;\n  background-color: #EBEBEB;\n}\n.content .lightbox img {\n  background-color: #FFFFFF;\n}\n\n.api-header label {\n  color: #FFFFFF;\n}\n\nlabel.api-status-label {\n  color: #FFFFFF;\n  background-color: #6E6E6E;\n}\nlabel.api-status-label.deprecated, label.api-status-label.security, label.api-status-label.impure-pipe, label.api-status-label.dev-preview {\n  background-color: #DD0031;\n}\nlabel.api-status-label a {\n  color: inherit;\n  line-height: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n}\nlabel.api-type-label {\n  color: #FFFFFF;\n  background-color: #1E88E5;\n}\nlabel.api-type-label.all {\n  background: #FFFFFF;\n}\nlabel.api-type-label.class {\n  background: #2196F3;\n}\nlabel.api-type-label.const {\n  background: #6E6E6E;\n}\nlabel.api-type-label.decorator {\n  background: #1565C0;\n}\nlabel.api-type-label.directive {\n  background: #D81B60;\n}\nlabel.api-type-label.enum {\n  background: #FFA000;\n}\nlabel.api-type-label.function {\n  background: #4CAF50;\n}\nlabel.api-type-label.interface {\n  background: #009688;\n}\nlabel.api-type-label.let {\n  background: #6E6E6E;\n}\nlabel.api-type-label.ngmodule {\n  background: #940;\n}\nlabel.api-type-label.package {\n  background: #8E24AA;\n}\nlabel.api-type-label.pipe {\n  background: #546E7A;\n}\nlabel.api-type-label.element {\n  background: #AA3000;\n}\nlabel.api-type-label.type-alias {\n  background: #7CB342;\n}\nlabel.api-type-label.var {\n  background: #6E6E6E;\n}\nlabel.page-label {\n  color: #FFFFFF;\n  background-color: #ECEFF1;\n  color: #6E6E6E;\n}\nlabel.property-type-label {\n  color: #FFFFFF;\n  background-color: #444444;\n  color: #FFFFFF;\n}\n\naio-notification {\n  background: #444444;\n}\naio-notification .close-button {\n  background: #444444;\n}\naio-notification .content {\n  background: #444444;\n}\naio-notification .content .action-button {\n  background: #DD0031;\n}\n\n.presskit-container .presskit-section:not(:first-child) {\n  border-top: 1px solid #DBDBDB;\n}\n.presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img {\n  background-color: #FFFFFF;\n}\n.presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img-inverse {\n  background-color: #333333;\n}\n\naio-resource-list .subcategory-title {\n  background-color: #ECEFF1;\n}\naio-resource-list .resource-row-link {\n  background-color: #FFFFFF;\n}\naio-resource-list .resource-row-link:hover {\n  border-color: rgba(25, 118, 210, 0.5);\n  box-shadow: 0 8px 8px rgba(1, 131, 163, 0.24), 0 0 8px rgba(1, 67, 163, 0.12), 0 6px 18px rgba(43, 133, 231, 0.12);\n}\n\n.page-guide-roadmap .completed-details {\n  border-top: 1px solid #DBDBDB;\n}\n\naio-search-results .search-results {\n  background-color: #444444;\n  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n}\naio-search-results .search-results .search-area .search-section-header {\n  color: #FFFFFF;\n}\naio-search-results .search-results .search-area ul .search-result-item {\n  color: #FAFAFA;\n}\naio-search-results .search-results .search-area ul .search-result-item:hover {\n  color: #FFFFFF;\n}\naio-search-results .search-results .no-results {\n  color: #FFFFFF;\n}\naio-search-results .search-results a {\n  color: rgba(0, 0, 0, 0.87);\n}\naio-search-results .search-results .close-button {\n  color: #FAFAFA;\n}\naio-search-results.embedded .search-results .search-area .search-section-header {\n  color: #444444;\n}\naio-search-results.embedded .search-results .search-area .search-result-item {\n  color: #5e5e5e;\n}\naio-search-results.embedded .search-results .search-area .search-result-item:hover {\n  color: #1E88E5;\n}\naio-search-results.embedded .search-results .no-results {\n  color: rgba(0, 0, 0, 0.87);\n}\naio-search-results.embedded .search-results a {\n  color: #1976D2;\n}\n\naio-select .form-select-button {\n  background: #FFFFFF;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  border: 1px solid #FFFFFF;\n  color: #546E7A;\n}\naio-select .form-select-button:focus {\n  border: 1px solid #42A5F5;\n  box-shadow: 0 2px 2px rgba(66, 165, 245, 0.24), 0 0 2px rgba(66, 165, 245, 0.12);\n}\naio-select .form-select-button.disabled {\n  color: lightgrey;\n}\naio-select .form-select-dropdown {\n  background: #fafafa;\n  box-shadow: 0 16px 16px rgba(10, 16, 20, 0.24), 0 0 16px rgba(10, 16, 20, 0.12);\n}\naio-select .form-select-dropdown li:hover, aio-select .form-select-dropdown li.current {\n  background-color: #ECEFF1;\n  color: f(false, #78909C, #607D8B);\n}\naio-select .form-select-dropdown li.selected {\n  background-color: #CFD8DC;\n}\n\ntable {\n  min-width: 100%;\n  box-shadow: 0 2px 2px rgba(110, 110, 110, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  background-color: #FFFFFF;\n}\ntable thead > tr > th {\n  background: rgba(219, 219, 219, 0.2);\n  border-bottom: 1px solid #DBDBDB;\n  color: #444444;\n}\ntable tbody > tr > th,\ntable tbody > tr > td {\n  border-bottom: 1px solid #DBDBDB;\n}\n@media (max-width: 480px) {\n  table tbody > tr > td tr td:first-child {\n    background-color: #DBDBDB;\n  }\n}\ntable tbody > tr > th {\n  background: rgba(219, 219, 219, 0.2);\n}\ntable tbody > tr > th:not(:last-child) {\n  border-right: 1px solid #DBDBDB;\n}\n@media (max-width: 480px) {\n  table tbody > tr:last-child td {\n    border-bottom: 1px solid #DBDBDB;\n  }\n}\n\naio-toc .toc-inner .toc-heading.secondary:hover {\n  color: #1E88E5;\n}\naio-toc .toc-inner button.toc-heading.embedded:focus, aio-toc .toc-inner button.toc-more-items.embedded:focus {\n  background: #DBDBDB;\n  color: #6E6E6E;\n}\naio-toc .toc-inner button.toc-heading:hover:not(.embedded) {\n  color: #1E88E5;\n}\naio-toc .toc-inner button.toc-more-items {\n  color: #6E6E6E;\n}\naio-toc .toc-inner button.toc-more-items:hover {\n  color: #1E88E5;\n}\naio-toc .toc-inner ul.toc-list li.h1:after {\n  background: #DBDBDB;\n}\naio-toc .toc-inner ul.toc-list li a {\n  color: #5e5e5e;\n}\naio-toc .toc-inner ul.toc-list li:hover * {\n  color: #1E88E5;\n}\naio-toc .toc-inner ul.toc-list li.active * {\n  color: #1976D2;\n}\naio-toc .toc-inner ul.toc-list li.active a:before {\n  background: #1976D2;\n}\naio-toc .toc-inner ul.toc-list:not(.embedded) li:before {\n  border-left-color: #DBDBDB;\n}\naio-toc .toc-inner ul.toc-list:not(.embedded) li:not(.active):hover a:before {\n  background: #DBDBDB;\n}\naio-toc.embedded .toc-inner .toc-heading.secondary {\n  color: rgba(0, 0, 0, 0.87);\n}","@use 'sass:map';\n@use 'sass:meta';\n@use 'variables';\n@use '@material/elevation/elevation-theme' as mdc-elevation;\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://material.io/design/environment/elevation.html\n// Examples:\n//\n//\n// .mat-foo {\n//   @include $mat-elevation(2);\n//\n//   &:active {\n//     @include $mat-elevation(8);\n//   }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: variables.$fast-out-slow-in-timing-function;\n\n// The default color for elevation shadows.\n$color: black !default;\n\n// Prefix for elevation-related selectors.\n$prefix: 'mat-elevation-z';\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin elevation($zValue, $color: $color, $opacity: null) {\n  @if meta.type-of($color) == color and $opacity == null {\n    @include mdc-elevation.elevation($zValue, $color);\n  }\n  @else {\n    // Copied from @material/elevation/_elevation-theme.scss#_box-shadow\n    // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.\n    $shadow-color:\n      if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color);\n    $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);\n    $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);\n    $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);\n    $box-shadow: (\n      #{'#{$umbra-z-value} #{$shadow-color}'},\n      #{'#{$penumbra-z-value} #{$shadow-color}'},\n      #{$ambient-z-value} $shadow-color\n    );\n    @include mdc-elevation.shadow($box-shadow);\n  }\n}\n\n// Applies the elevation to an element in a manner that allows\n// consumers to override it via the Material elevation classes.\n@mixin overridable-elevation($zValue, $color: $color) {\n  &:not([class*='#{$prefix}']) {\n    @include elevation($zValue, $color);\n  }\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// }\n@function private-transition-property-value(\n    $duration: $transition-duration,\n    $easing: $transition-timing-function) {\n  @return box-shadow #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin elevation-transition(\n    $duration: $transition-duration,\n    $easing: $transition-timing-function) {\n  transition: private-transition-property-value($duration, $easing);\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n///     resolved by other theme functions first (i.e. custom property Maps and\n///     Material theme keys are not supported in this mixin). If the value is\n///     null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n///     provided, a second property/value declaration will be added before the\n///     main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n  $property,\n  $value,\n  $fallback-value: null,\n  $gss: (),\n  $important: false\n) {\n  // Normally setting a null value to a property will not emit CSS, so mixins\n  // wouldn't need to check this. However, Sass will throw an error if the\n  // interpolated property is a custom property.\n  @if $value != null {\n    $important-rule: if($important, ' !important', '');\n\n    @if $fallback-value and $enable-fallback-declarations {\n      @include gss.annotate($gss);\n      #{$property}: #{$fallback-value} #{$important-rule};\n\n      // Add @alternate to annotations.\n      $gss: map.merge(\n        $gss,\n        (\n          alternate: true,\n        )\n      );\n    }\n\n    @include gss.annotate($gss);\n    #{$property}: #{$value}#{$important-rule};\n  }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n  @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n    @return $value $value $value $value;\n  } @else if list.length($value) == 4 {\n    @return $value;\n  } @else if list.length($value) == 3 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n      list.nth($value, 2);\n  } @else if list.length($value) == 2 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n      list.nth($value, 2);\n  }\n\n  @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","@use 'sass:map';\n@use '@material/button/button' as mdc-button;\n@use '@material/button/button-theme' as mdc-button-theme;\n@use '@material/button/button-text-theme' as mdc-button-text-theme;\n@use '@material/button/button-filled-theme' as mdc-button-filled-theme;\n@use '@material/button/button-protected-theme' as mdc-button-protected-theme;\n@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;\n@use '@material/theme/theme-color' as mdc-theme-color;\n\n@use './button-theme-private';\n@use '../core/mdc-helpers/mdc-helpers';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n\n@mixin _button-variant($color) {\n  @include mdc-button-text-theme.theme((\n    label-text-color: $color,\n  ));\n}\n\n@mixin _unelevated-button-variant($foreground, $background) {\n  @include mdc-button-filled-theme.theme((\n    container-color: $background,\n    label-text-color: $foreground,\n  ));\n}\n\n@mixin _raised-button-variant($foreground, $background) {\n  @include mdc-button-protected-theme.theme((\n    container-color: $background,\n    label-text-color: $foreground,\n  ));\n}\n\n@mixin _outlined-button-variant($color) {\n  @include mdc-button-outlined-theme.theme((\n    label-text-color: $color,\n  ));\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  @include mdc-helpers.using-mdc-theme($config) {\n    $is-dark: map.get($config, is-dark);\n    $on-surface: mdc-theme-color.prop-value(on-surface);\n    $surface: mdc-theme-color.prop-value(surface);\n    $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));\n    $disabled-container-color: rgba($on-surface, 0.12);\n    $primary: mdc-theme-color.prop-value(primary);\n    $on-primary: mdc-theme-color.prop-value(on-primary);\n    $secondary: mdc-theme-color.prop-value(secondary);\n    $on-secondary: mdc-theme-color.prop-value(on-secondary);\n    $error: mdc-theme-color.prop-value(error);\n    $on-error: mdc-theme-color.prop-value(on-error);\n\n    .mat-mdc-button {\n      &.mat-unthemed {\n        @include _button-variant($on-surface);\n      }\n\n      &.mat-primary {\n        @include _button-variant($primary);\n      }\n\n      &.mat-accent {\n        @include _button-variant($secondary);\n      }\n\n      &.mat-warn {\n        @include _button-variant($error);\n      }\n\n      @include button-theme-private.apply-disabled-style() {\n        @include mdc-button-text-theme.theme((\n          // We need to pass both the disabled and enabled values, because the enabled\n          // ones apply to anchors while the disabled ones are for buttons.\n          disabled-label-text-color: $disabled-ink-color,\n          label-text-color: $disabled-ink-color\n        ));\n      }\n    }\n\n    .mat-mdc-unelevated-button {\n      &.mat-unthemed {\n        @include _unelevated-button-variant($on-surface, $surface);\n      }\n\n      &.mat-primary {\n        @include _unelevated-button-variant($on-primary, $primary);\n      }\n\n      &.mat-accent {\n        @include _unelevated-button-variant($on-secondary, $secondary);\n      }\n\n      &.mat-warn {\n        @include _unelevated-button-variant($on-error, $error);\n      }\n\n      @include button-theme-private.apply-disabled-style() {\n        @include mdc-button-filled-theme.theme((\n          // We need to pass both the disabled and enabled values, because the enabled\n          // ones apply to anchors while the disabled ones are for buttons.\n          disabled-container-color: $disabled-container-color,\n          disabled-label-text-color: $disabled-ink-color,\n          container-color: $disabled-container-color,\n          label-text-color: $disabled-ink-color,\n        ));\n      }\n    }\n\n    .mat-mdc-raised-button {\n      &.mat-unthemed {\n        @include _raised-button-variant($on-surface, $surface);\n      }\n\n      &.mat-primary {\n        @include _raised-button-variant($on-primary, $primary);\n      }\n\n      &.mat-accent {\n        @include _raised-button-variant($on-secondary, $secondary);\n      }\n\n      &.mat-warn {\n        @include _raised-button-variant($on-error, $error);\n      }\n\n      @include button-theme-private.apply-disabled-style() {\n        @include mdc-button-protected-theme.theme((\n          // We need to pass both the disabled and enabled values, because the enabled\n          // ones apply to anchors while the disabled ones are for buttons.\n          disabled-container-color: $disabled-container-color,\n          disabled-label-text-color: $disabled-ink-color,\n          container-color: $disabled-container-color,\n          label-text-color: $disabled-ink-color,\n          container-elevation: 0,\n        ));\n      }\n    }\n\n    .mat-mdc-outlined-button {\n      @include mdc-button-outlined-theme.theme((\n        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)\n      ));\n\n      &.mat-unthemed {\n        @include _outlined-button-variant($on-surface);\n      }\n\n      &.mat-primary {\n        @include _outlined-button-variant($primary);\n      }\n\n      &.mat-accent {\n        @include _outlined-button-variant($secondary);\n      }\n\n      &.mat-warn {\n        @include _outlined-button-variant($error);\n      }\n\n      @include button-theme-private.apply-disabled-style() {\n        @include mdc-button-outlined-theme.theme((\n          // We need to pass both the disabled and enabled values, because the enabled\n          // ones apply to anchors while the disabled ones are for buttons.\n          label-text-color: $disabled-ink-color,\n          disabled-label-text-color: $disabled-ink-color,\n          outline-color: rgba($on-surface, 0.12),\n          disabled-outline-color: rgba($on-surface, 0.12),\n        ));\n      }\n    }\n\n    // Ripple colors\n    .mat-mdc-button, .mat-mdc-outlined-button {\n      @include button-theme-private.ripple-theme-styles($config, false);\n    }\n\n    .mat-mdc-raised-button, .mat-mdc-unelevated-button {\n      @include button-theme-private.ripple-theme-styles($config, true);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2018-config(\n    theming.get-typography-config($config-or-theme));\n  @include mdc-helpers.using-mdc-typography($config) {\n    @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  .mat-mdc-button,\n  .mat-mdc-raised-button,\n  .mat-mdc-unelevated-button,\n  .mat-mdc-outlined-button {\n    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.\n    &.mat-mdc-button-base {\n      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);\n      @include button-theme-private.touch-target-density($density-scale);\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '@material/ripple/ripple-theme' as mdc-ripple-theme;\n@use '@material/theme/theme-color' as mdc-theme-color;\n\n@use '../core/mdc-helpers/mdc-helpers';\n\n@mixin _ripple-color($color) {\n  --mat-mdc-button-persistent-ripple-color: #{$color};\n  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};\n}\n\n@mixin ripple-theme-styles($config, $is-filled) {\n  $opacities: if(map.get($config, is-dark),\n    mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);\n\n  // Ideally these styles would be structural, but MDC bases some of the opacities on the theme.\n  &:hover .mat-mdc-button-persistent-ripple::before {\n    opacity: map.get($opacities, hover);\n  }\n\n  &.cdk-program-focused,\n  &.cdk-keyboard-focused {\n    .mat-mdc-button-persistent-ripple::before {\n      opacity: map.get($opacities, focus);\n    }\n  }\n\n  &:active .mat-mdc-button-persistent-ripple::before {\n    opacity: map.get($opacities, press);\n  }\n\n  @include _ripple-color(mdc-theme-color.prop-value(on-surface));\n\n  &.mat-primary {\n    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-primary, primary)));\n  }\n\n  &.mat-accent {\n    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-secondary, secondary)));\n  }\n\n  &.mat-warn {\n    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-error, error)));\n  }\n}\n\n// Wraps the content style in a selector for the disabled state.\n// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not\n// override this, neither will it apply to anchor tags. This needs to override the\n// previously set theme color, so it must be ordered after the theme styles.\n// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by\n// manually styling disabled buttons with a [disabled] selector.\n@mixin apply-disabled-style() {\n  &[disabled][disabled] {\n    @content;\n  }\n}\n\n// Hides the touch target on lower densities.\n@mixin touch-target-density($scale) {\n  @include mdc-helpers.if-touch-targets-unsupported($scale) {\n    .mat-mdc-button-touch-target {\n      display: none;\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '@material/density/functions' as mdc-density-functions;\n@use '@material/icon-button/mixins' as mdc-icon-button;\n@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;\n@use '@material/theme/theme-color' as mdc-theme-color;\n@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;\n\n@use './button-theme-private';\n@use '../core/theming/theming';\n\n$_icon-size: 24px;\n\n@mixin _ripple-color($color) {\n  --mat-mdc-button-persistent-ripple-color: #{$color};\n  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};\n}\n\n@function _variable-safe-contrast-tone($value, $is-dark) {\n  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {\n    @return mdc-theme-color.contrast-tone($value);\n  }\n\n  @return if($is-dark, 'light', 'dark');\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $color-tokens: tokens-mdc-icon-button.get-color-tokens($config);\n  $background-palette: map.get($config, background);\n  $surface: theming.get-color-from-palette($background-palette, card);\n  $is-dark: map.get($config, is-dark);\n  $on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);\n\n  .mat-mdc-icon-button {\n    @include button-theme-private.ripple-theme-styles($config, false);\n    @include mdc-icon-button-theme.theme($color-tokens);\n    @include _ripple-color($on-surface);\n\n    &.mat-primary {\n      $color: theming.get-color-from-palette(map.get($config, primary));\n      @include mdc-icon-button-theme.theme((icon-color: $color));\n      @include _ripple-color($color);\n    }\n\n    &.mat-accent {\n      $color: theming.get-color-from-palette(map.get($config, accent));\n      @include mdc-icon-button-theme.theme((icon-color: $color));\n      @include _ripple-color($color);\n    }\n\n    &.mat-warn {\n      $color: theming.get-color-from-palette(map.get($config, warn));\n      @include mdc-icon-button-theme.theme((icon-color: $color));\n      @include _ripple-color($color);\n    }\n\n    @include button-theme-private.apply-disabled-style() {\n      $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));\n      @include mdc-icon-button-theme.theme((\n        icon-color: $disabled-color,\n        disabled-icon-color: $disabled-color,\n      ));\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  // Manually apply the expected density theming, and include the padding\n  // as it was applied before\n  $calculated-size: mdc-density-functions.prop-value(\n    $density-config: (\n      size: (\n        default: 48px,\n        maximum: 48px,\n        minimum: 28px,\n      ),\n    ),\n    $density-scale: $density-scale,\n    $property-name: size,\n  );\n\n  // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.\n  .mat-mdc-icon-button.mat-mdc-button-base {\n    // Match the styles that used to be present. This is necessary for backwards\n    // compat to match the previous implementations selector count (two classes).\n    @include mdc-icon-button-theme.theme((\n      state-layer-size: $calculated-size,\n    ));\n\n    // TODO: Switch calculated-size to \"var(--mdc-icon-button-state-layer-size)\"\n    // Currently fails validation because the variable is \"undefined\"\n    // in the sass stack.\n    // TODO: Switch icon-size to \"var(--mdc-icon-button-icon-size)\". Currently\n    // fails validation because the variable is \"undefined\" in the sass stack.\n    width: var(--mdc-icon-button-state-layer-size);\n    height: var(--mdc-icon-button-state-layer-size);\n    padding: math.div($calculated-size - $_icon-size, 2);\n\n    @include button-theme-private.touch-target-density($density-scale);\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../core/theming/theming';\n@use '../../core/typography/typography';\n@use '../../core/typography/typography-utils';\n\n/// @deprecated Use `mat.option-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-option {\n    color: theming.get-color-from-palette($foreground, text);\n\n    &:hover:not(.mat-option-disabled),\n    &:focus:not(.mat-option-disabled) {\n      background: theming.get-color-from-palette($background, hover);\n    }\n\n    // In multiple mode there is a checkbox to show that the option is selected.\n    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n      background: theming.get-color-from-palette($background, hover);\n    }\n\n    &.mat-active {\n      background: theming.get-color-from-palette($background, hover);\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    &.mat-option-disabled {\n      color: theming.get-color-from-palette($foreground, hint-text);\n    }\n  }\n\n  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($primary, text);\n  }\n\n  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($accent, text);\n  }\n\n  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($warn, text);\n  }\n}\n\n/// @deprecated Use `mat.option-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-option {\n    font: {\n      family: typography-utils.font-family($config);\n      size: typography-utils.font-size($config, subheading-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.option-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-option') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../core/theming/theming';\n@use '../../core/typography/typography';\n@use '../../core/typography/typography-utils';\n\n/// @deprecated Use `mat.optgroup-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n\n  .mat-optgroup-label {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-optgroup-disabled .mat-optgroup-label {\n    color: theming.get-color-from-palette($foreground, hint-text);\n  }\n}\n\n/// @deprecated Use `mat.optgroup-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-optgroup-label {\n    @include typography-utils.typography-level($config, body-2);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.optgroup-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-optgroup') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../theming/theming';\n\n// Colors for the ripple elements.\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $foreground-base: map.get($foreground, base);\n  $color-opacity: 0.1;\n\n  .mat-ripple-element {\n    // If the ripple color is resolves to a color *type*, we can use it directly, otherwise\n    // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.\n    @if (meta.type-of($foreground-base) == color) {\n      background-color: rgba($foreground-base, $color-opacity);\n    }\n    @else {\n      background-color: $foreground-base;\n      opacity: $color-opacity;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {\n    $color: theming.get-color-config($theme);\n    @if $color != null {\n      @include color($color);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../theming/theming';\n\n@mixin _psuedo-checkbox-styles-with-color($text-color, $background) {\n  .mat-pseudo-checkbox-checked,\n  .mat-pseudo-checkbox-indeterminate {\n    &.mat-pseudo-checkbox-minimal::after {\n      color: $text-color;\n    }\n\n    // Full (checkbox) appearance inverts colors of text and background.\n    &.mat-pseudo-checkbox-full {\n      &::after {\n        color: $background;\n      }\n\n      background: $text-color;\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $primary: theming.get-color-from-palette(map.get($config, primary));\n  $accent: theming.get-color-from-palette(map.get($config, accent));\n  $warn: theming.get-color-from-palette(map.get($config, warn));\n  $background: theming.get-color-from-palette(map.get($config, background), background);\n  $secondary-text: theming.get-color-from-palette(map.get($config, foreground), secondary-text);\n\n  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n  // this does not work well with elements layered on top of one another. To get around this we\n  // blend the colors together based on the base color and the theme background.\n  $white-30pct-opacity-on-dark: #686868;\n  $black-26pct-opacity-on-light: #b0b0b0;\n  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';\n\n  .mat-pseudo-checkbox-full {\n    color: $secondary-text;\n    &.mat-pseudo-checkbox-disabled {\n      color: $disabled-color;\n    }\n  }\n\n  .mat-primary {\n    @include _psuedo-checkbox-styles-with-color($primary, $background);\n  }\n\n  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the\n  // theme from their parent, rather than implementing their own theming, which is why we\n  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`\n  // in order to allow for the color to be overwritten if the checkbox is inside a parent that\n  // has `mat-accent` and is placed inside another parent that has `mat-primary`.\n  @include _psuedo-checkbox-styles-with-color($accent, $background);\n  .mat-accent {\n    @include _psuedo-checkbox-styles-with-color($accent, $background);\n  }\n\n  .mat-warn {\n    @include _psuedo-checkbox-styles-with-color($warn, $background);\n  }\n\n  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked,\n  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate {\n    &.mat-pseudo-checkbox-minimal::after {\n      color: $disabled-color;\n    }\n\n    &.mat-pseudo-checkbox-full {\n      background: $disabled-color;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/ripple/ripple-theme';\n@use '../core/selection/pseudo-checkbox/pseudo-checkbox-theme';\n@use './option/option-theme';\n@use './option/optgroup-theme';\n@use '../core/style/elevation';\n@use '../core/style/private';\n\n/// @deprecated Use `mat.core-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n\n  // Wrapper element that provides the theme background when the user's content isn't\n  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand\n  // selector in case the mixin is included at the top level.\n  .mat-app-background#{if(&, ', &.mat-app-background', '')} {\n    $background: map.get($config, background);\n    $foreground: map.get($config, foreground);\n\n    background-color: theming.get-color-from-palette($background, background);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  // Provides external CSS classes for each elevation value. Each CSS class is formatted as\n  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is\n  // elevated.\n  @for $zValue from 0 through 24 {\n    .#{elevation.$prefix}#{$zValue} {\n      @include private.private-theme-elevation($zValue, $config);\n    }\n  }\n\n  // Marker that is used to determine whether the user has added a theme to their page.\n  @at-root {\n    .mat-theme-loaded-marker {\n      display: none;\n    }\n  }\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n/// @deprecated Use `mat.core-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that\n  // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then\n  // the imported themes (such as `mat-ripple-theme`) should not report again.\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-core') {\n    // Legacy-specific themes.\n    @include option-theme.theme($theme);\n    @include optgroup-theme.theme($theme);\n\n    // Non-legacy themes that are forwarded.\n    @include ripple-theme.theme($theme);\n    @include pseudo-checkbox-theme.theme($theme);\n\n    $color: theming.get-color-config($theme);\n    @if $color != null {\n      @include color($color);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n/// @deprecated Use `mat.card-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-card {\n    @include private.private-theme-overridable-elevation(1, $config);\n    background: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n\n    // Needs extra specificity to be able to override the elevation selectors.\n    &.mat-card-flat {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n\n  .mat-card-subtitle {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n}\n\n/// @deprecated Use `mat.card-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-card {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-card-title {\n    font: {\n      size: typography-utils.font-size($config, headline);\n      weight: typography-utils.font-weight($config, title);\n    }\n  }\n\n  .mat-card-header .mat-card-title {\n    font-size: typography-utils.font-size($config, title);\n  }\n\n  .mat-card-subtitle,\n  .mat-card-content {\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.card-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-card') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:color';\n@use '../core/theming/theming';\n\n// Approximates the correct buffer color by using a mix between the theme color\n// and the theme's background color.\n@function _get-buffer-color($theme, $background) {\n  $theme-color: theming.get-color-from-palette($theme);\n  // Return fallback color if the theme uses variables to define colors.\n  @if (meta.type-of($theme-color) != 'color' or meta.type-of($background) != 'color') {\n    @return theming.get-color-from-palette($theme, lighter);\n  }\n  @return color.mix($theme-color, $background, $weight: 25%);\n}\n\n/// @deprecated Use `mat.progress-bar-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get(map.get($config, background), background);\n\n  .mat-progress-bar-background {\n    fill: _get-buffer-color($primary, $background);\n  }\n\n  .mat-progress-bar-buffer {\n    background-color: _get-buffer-color($primary, $background);\n  }\n\n  .mat-progress-bar-fill::after {\n    background-color: theming.get-color-from-palette($primary);\n  }\n\n  .mat-progress-bar.mat-accent {\n    .mat-progress-bar-background {\n      fill: _get-buffer-color($accent, $background);\n    }\n\n    .mat-progress-bar-buffer {\n      background-color: _get-buffer-color($accent, $background);\n    }\n\n    .mat-progress-bar-fill::after {\n      background-color: theming.get-color-from-palette($accent);\n    }\n  }\n\n  .mat-progress-bar.mat-warn {\n    .mat-progress-bar-background {\n      fill: _get-buffer-color($warn, $background);\n    }\n\n    .mat-progress-bar-buffer {\n      background-color: _get-buffer-color($warn, $background);\n    }\n\n    .mat-progress-bar-fill::after {\n      background-color: theming.get-color-from-palette($warn);\n    }\n  }\n}\n\n/// @deprecated Use `mat.progress-bar-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.progress-bar-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-progress-bar') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n/// @deprecated Use `mat.progress-spinner-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-progress-spinner, .mat-spinner {\n    circle {\n      stroke: theming.get-color-from-palette($primary);\n    }\n\n    &.mat-accent circle {\n      stroke: theming.get-color-from-palette($accent);\n    }\n\n    &.mat-warn circle {\n      stroke: theming.get-color-from-palette($warn);\n    }\n  }\n}\n\n/// @deprecated Use `mat.progress-spinner-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.progress-spinner-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-progress-spinner') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$target-height: 22px;\n$font-size: 10px;\n$vertical-padding: math.div($target-height - $font-size, 2);\n\n$handset-target-height: 30px;\n$handset-font-size: 14px;\n$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);\n\n/// @deprecated Use `mat.tooltip-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n\n  .mat-tooltip {\n    background: theming.get-color-from-palette($background, tooltip, 0.9);\n  }\n}\n\n/// @deprecated Use `mat.tooltip-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tooltip {\n    font-family: typography-utils.font-family($config);\n    font-size: $font-size;\n    padding-top: $vertical-padding;\n    padding-bottom: $vertical-padding;\n  }\n\n  .mat-tooltip-handset {\n    font-size: $handset-font-size;\n    padding-top: $handset-vertical-padding;\n    padding-bottom: $handset-vertical-padding;\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.tooltip-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-tooltip') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/vendor-prefixes';\n\n\n/// @deprecated Use `mat.input-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $foreground: map.get($config, foreground);\n\n  .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-input-element:disabled,\n  .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  .mat-input-element {\n    caret-color: theming.get-color-from-palette($primary, text);\n\n    @include vendor-prefixes.input-placeholder {\n      color: form-common.private-control-placeholder-color($config);\n    }\n\n    // On dark themes we set the native `select` color to some shade of white,\n    // however the color propagates to all of the `option` elements, which are\n    // always on a white background inside the dropdown, causing them to blend in.\n    // Since we can't change background of the dropdown, we need to explicitly\n    // reset the color of the options to something dark.\n    @if (map.get($config, is-dark)) {\n      &:not(.mat-native-select-inline) {\n        option {\n          color: palette.$dark-primary-text;\n        }\n\n        option:disabled {\n          color: palette.$dark-disabled-text;\n        }\n      }\n    }\n  }\n\n  .mat-form-field.mat-accent .mat-input-element {\n    caret-color: theming.get-color-from-palette($accent, text);\n  }\n\n  .mat-form-field.mat-warn .mat-input-element,\n  .mat-form-field-invalid .mat-input-element {\n    caret-color: theming.get-color-from-palette($warn, text);\n  }\n\n  .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($warn, text);\n  }\n\n  .mat-form-field-disabled {\n    .mat-form-field-prefix,\n    .mat-form-field-suffix {\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n}\n\n/// @deprecated Use `mat.input-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  // The amount of space between the top of the line and the top of the actual text\n  // (as a fraction of the font-size).\n  $line-spacing: math.div($line-height - 1, 2);\n\n  // <input> elements seem to have their height set slightly too large on Safari causing the text to\n  // be misaligned w.r.t. the placeholder. Adding this margin corrects it.\n  input.mat-input-element {\n    margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.input-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-input') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","// stylelint-disable material/no-prefixes\n@mixin user-select($value) {\n  -webkit-user-select: $value;\n  user-select: $value;\n}\n\n@mixin input-placeholder {\n  &::placeholder {\n    @content;\n  }\n\n  &::-moz-placeholder {\n    @content;\n  }\n\n  &::-webkit-input-placeholder {\n    @content;\n  }\n\n  // Note: this isn't necessary anymore since we don't support\n  // IE, but it caused some presubmit failures in #23416.\n  &:-ms-input-placeholder {\n    @content;\n  }\n}\n\n@mixin backface-visibility($value) {\n  -webkit-backface-visibility: $value;\n  backface-visibility: $value;\n}\n\n@mixin color-adjust($value) {\n  -webkit-print-color-adjust: $value;\n  color-adjust: $value;\n}\n\n@mixin private-background-clip($value) {\n  -webkit-background-clip: $value;\n  background-clip: $value;\n}\n\n@mixin clip-path($value) {\n  -webkit-clip-path: $value;\n  clip-path: $value;\n}\n// stylelint-enable\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@use './form-field-fill-theme.scss';\n@use './form-field-legacy-theme.scss';\n@use './form-field-outline-theme.scss';\n@use './form-field-standard-theme.scss';\n\n// Color styles that apply to all appearances of the form-field.\n/// @deprecated Use `mat.form-field-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  // Label colors. Required is used for the `*` star shown in the label.\n  $label-color:\n    theming.get-color-from-palette($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n  $focused-label-color: theming.get-color-from-palette($primary, text);\n  $required-label-color: theming.get-color-from-palette($accent, text);\n\n  // Underline colors.\n  $underline-color-base:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n  $underline-color-accent: theming.get-color-from-palette($accent, text);\n  $underline-color-warn: theming.get-color-from-palette($warn, text);\n  $underline-focused-color: theming.get-color-from-palette($primary, text);\n\n  .mat-form-field-label {\n    color: $label-color;\n  }\n\n  .mat-hint {\n    color: $label-color;\n  }\n\n  .mat-form-field.mat-focused .mat-form-field-label {\n    color: $focused-label-color;\n\n    &.mat-accent {\n      color: $underline-color-accent;\n    }\n\n    &.mat-warn {\n      color: $underline-color-warn;\n    }\n  }\n\n  .mat-focused .mat-form-field-required-marker {\n    color: $required-label-color;\n  }\n\n  .mat-form-field-ripple {\n    background-color: $underline-color-base;\n  }\n\n  .mat-form-field.mat-focused {\n    .mat-form-field-ripple {\n      background-color: $underline-focused-color;\n\n      &.mat-accent {\n        background-color: $underline-color-accent;\n      }\n\n      &.mat-warn {\n        background-color: $underline-color-warn;\n      }\n    }\n  }\n\n  .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {\n    .mat-form-field-infix::after {\n      color: $underline-focused-color;\n    }\n\n    &.mat-accent .mat-form-field-infix::after {\n      color: $underline-color-accent;\n    }\n\n    &.mat-warn .mat-form-field-infix::after {\n      color: $underline-color-warn;\n    }\n  }\n\n  // Styling for the error state of the form field. Note that while the same can be\n  // achieved with the ng-* classes, we use this approach in order to ensure that the same\n  // logic is used to style the error state and to show the error messages.\n  .mat-form-field.mat-form-field-invalid {\n    .mat-form-field-label {\n      color: $underline-color-warn;\n\n      &.mat-accent,\n      .mat-form-field-required-marker {\n        color: $underline-color-warn;\n      }\n    }\n\n    .mat-form-field-ripple,\n    .mat-form-field-ripple.mat-accent {\n      background-color: $underline-color-warn;\n    }\n  }\n\n  .mat-error {\n    color: $underline-color-warn;\n  }\n\n  @include form-field-legacy-theme.legacy-color($config);\n  @include form-field-standard-theme.standard-color($config);\n  @include form-field-fill-theme.fill-color($config);\n  @include form-field-outline-theme.outline-color($config);\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)\n             scale($font-scale);\n  width: math.div(100%, $font-scale) + $dedupe;\n\n  $dedupe: $dedupe + 0.00001 !global;\n}\n\n/// @deprecated Use `mat.form-field-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The amount to scale the font for the prefix and suffix icons.\n  $prefix-suffix-icon-font-scale: 1.5;\n\n  // The padding on the infix. Mocks show half of the text size.\n  $infix-padding: 0.5em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  // If the line-height is given as a unitless number, coerce it to `em`.\n  $infix-margin-top: $subscript-font-scale *\n      typography-utils.private-coerce-unitless-to-em($line-height);\n  // Font size to use for the label and subscript text.\n  $subscript-font-size: $subscript-font-scale * 100%;\n  // Font size to use for the for the prefix and suffix icons.\n  $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n  .mat-form-field {\n    @include typography-utils.typography-level($config, input);\n  }\n\n  .mat-form-field-wrapper {\n    padding-bottom: $wrapper-padding-bottom;\n  }\n\n  .mat-form-field-prefix,\n  .mat-form-field-suffix {\n    // Allow icons in a prefix or suffix to adapt to the correct size.\n    .mat-icon {\n      font-size: $prefix-suffix-icon-font-size;\n      line-height: $line-height;\n    }\n\n    // Allow icon buttons in a prefix or suffix to adapt to the correct size.\n    .mat-icon-button {\n      height: $prefix-suffix-icon-font-scale * 1em;\n      width: $prefix-suffix-icon-font-scale * 1em;\n\n      .mat-icon {\n        height: typography-utils.private-coerce-unitless-to-em($line-height);\n        line-height: $line-height;\n      }\n    }\n  }\n\n  .mat-form-field-infix {\n    padding: $infix-padding 0;\n    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.\n    border-top: $infix-margin-top solid transparent;\n  }\n\n  .mat-form-field-can-float {\n    &.mat-form-field-should-float .mat-form-field-label,\n    .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n      @include _label-floating(\n              $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n\n    // Server-side rendered matInput with a label attribute but label not shown\n    // (used as a pure CSS stand-in for mat-form-field-should-float).\n    .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {\n      @include _label-floating(\n              $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n  }\n\n  .mat-form-field-label-wrapper {\n    top: -$infix-margin-top;\n    padding-top: $infix-margin-top;\n  }\n\n  .mat-form-field-label {\n    top: $infix-margin-top + $infix-padding;\n  }\n\n  .mat-form-field-underline {\n    // We want the underline to start at the end of the content box, not the padding box,\n    // so we move it up by the padding amount.\n    bottom: $wrapper-padding-bottom;\n  }\n\n  .mat-form-field-subscript-wrapper {\n    font-size: $subscript-font-size;\n    margin-top: $subscript-margin-top;\n\n    // We want the subscript to start at the end of the content box, not the padding box,\n    // so we move it up by the padding amount (adjusted for the smaller font size);\n    top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n  }\n\n  @include form-field-legacy-theme.legacy-typography($config);\n  @include form-field-standard-theme.standard-typography($config);\n  @include form-field-fill-theme.fill-typography($config);\n  @include form-field-outline-theme.outline-typography($config);\n}\n\n/// @deprecated Use `mat.form-field-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  @include form-field-legacy-theme.private-form-field-legacy-density($density-scale);\n  @include form-field-standard-theme.private-form-field-standard-density($density-scale);\n  @include form-field-fill-theme.private-form-field-fill-density($density-scale);\n  @include form-field-outline-theme.private-form-field-outline-density($density-scale);\n}\n\n/// @deprecated Use `mat.form-field-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-form-field') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n/// @deprecated Use `mat.form-field-legacy-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin legacy-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $label-color: theming.get-color-from-palette($foreground, secondary-text);\n  $underline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n  .mat-form-field-appearance-legacy {\n    .mat-form-field-label {\n      color: $label-color;\n    }\n\n    .mat-hint {\n      color: $label-color;\n    }\n\n    .mat-form-field-underline {\n      background-color: $underline-color;\n    }\n\n    &.mat-form-field-disabled .mat-form-field-underline {\n      @include form-common.private-control-disabled-underline($underline-color);\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  // We use perspective to fix the text blurriness as described here:\n  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/\n  // This results in a small jitter after the label floats on Firefox, which the\n  // translateZ fixes.\n  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)\n  translateZ(0.001px + $legacy-dedupe);\n  width: math.div(100%, $font-scale) + $legacy-dedupe;\n\n  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {\n  // This results in a small jitter after the label floats on Firefox, which the\n  // translateZ fixes.\n  transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)\n                  scale($font-scale);\n  // The tricks above used to smooth out the animation on chrome and firefox actually make things\n  // worse on IE, so we don't include them in the IE version.\n  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n/// @deprecated Use `mat.form-field-legacy-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin legacy-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The amount of space between the top of the line and the top of the actual text\n  // (as a fraction of the font-size).\n  $line-spacing: math.div($line-height - 1, 2);\n  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge\n  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.\n  $infix-padding: 0.5em - $line-spacing;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  // If the line-height is given as a unitless number, coerce it to `em`.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the\n  // text, not the  edge of the line.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n  .mat-form-field-appearance-legacy {\n    .mat-form-field-wrapper {\n      padding-bottom: $wrapper-padding-bottom;\n    }\n\n    .mat-form-field-infix {\n      padding: $infix-padding 0;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n\n      // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n      .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding;\n    }\n\n    .mat-form-field-underline {\n      // We want the underline to start at the end of the content box, not the padding box,\n      // so we move it up by the padding amount.\n      bottom: $wrapper-padding-bottom;\n    }\n\n    .mat-form-field-subscript-wrapper {\n      margin-top: $subscript-margin-top;\n\n      // We want the subscript to start at the end of the content box, not the padding box,\n      // so we move it up by the padding amount (adjusted for the smaller font size);\n      top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n    }\n  }\n\n  // translateZ causes the label to not appear while printing, so we override it to not\n  // apply translateZ while printing\n  @media print {\n    .mat-form-field-appearance-legacy {\n      &.mat-form-field-can-float {\n        &.mat-form-field-should-float .mat-form-field-label,\n        .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n\n        // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n        .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n        .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n\n        // Server-side rendered matInput with a label attribute but label not shown\n        // (used as a pure CSS stand-in for mat-form-field-should-float).\n        .mat-input-server[label] + .mat-form-field-label-wrapper\n        .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n      }\n    }\n  }\n}\n\n/// @deprecated Use `mat.form-field-private-form-field-legacy-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin private-form-field-legacy-density($config-or-theme) {}\n\n/// @deprecated Use `mat.form-field-legacy-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin legacy-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include legacy-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-legacy-density($density);\n    }\n    @if $typography != null {\n      @include legacy-typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n\n// Renders a gradient for showing the dashed line when the input is disabled.\n// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line\n// to match the Material Design spec.\n@mixin private-control-disabled-underline($color) {\n  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);\n  background-size: 4px 100%;\n  background-repeat: repeat-x;\n}\n\n// Figures out the color of the placeholder for a form control.\n// Used primarily to prevent the various form controls from\n// becoming out of sync since these colors aren't in a palette.\n@function private-control-placeholder-color($config) {\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n  @return theming.get-color-from-palette($foreground, secondary-text,\n    if($is-dark-theme, 0.5, 0.42));\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n/// @deprecated Use `mat.form-field-standard-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin standard-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n  $underline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n  .mat-form-field-appearance-standard {\n    .mat-form-field-underline {\n      background-color: $underline-color;\n    }\n\n    &.mat-form-field-disabled .mat-form-field-underline {\n      @include form-common.private-control-disabled-underline($underline-color);\n    }\n  }\n}\n\n/// @deprecated Use `mat.form-field-standard-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin standard-typography($config-or-theme) {}\n\n/// @deprecated Use `mat.form-field-private-form-field-standard-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin private-form-field-standard-density($config-or-theme) {}\n\n/// @deprecated Use `mat.form-field-standard-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin standard-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include standard-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-standard-density($density);\n    }\n    @if $typography != null {\n      @include standard-typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n/// @deprecated Use `mat.form-field-fill-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin fill-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $fill-background:\n    theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04));\n  $fill-disabled-background:\n    theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));\n  $underline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n  $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n  .mat-form-field-appearance-fill {\n    .mat-form-field-flex {\n      background-color: $fill-background;\n    }\n\n    &.mat-form-field-disabled .mat-form-field-flex {\n      background-color: $fill-disabled-background;\n    }\n\n    .mat-form-field-underline::before {\n      background-color: $underline-color;\n    }\n\n    &.mat-form-field-disabled {\n      .mat-form-field-label {\n        color: $label-disabled-color;\n      }\n\n      .mat-form-field-underline::before {\n        background-color: transparent;\n      }\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)\n             scale($font-scale);\n  width: math.div(100%, $font-scale) + $fill-dedupe;\n\n  $fill-dedupe: $fill-dedupe + 0.00001 !global;\n}\n\n/// @deprecated Use `mat.form-field-fill-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin fill-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The padding on top of the infix.\n  $infix-padding-top: 0.25em;\n  // The padding below the infix.\n  $infix-padding-bottom: 0.75em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The amount we offset the label from the input text in the fill appearance.\n  $fill-appearance-label-offset: -0.5em;\n\n  .mat-form-field-appearance-fill {\n    .mat-form-field-infix {\n      padding: $infix-padding-top 0 $infix-padding-bottom 0;\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding-top;\n      margin-top: $fill-appearance-label-offset;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n                $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n                $infix-margin-top);\n      }\n    }\n  }\n}\n\n/// @deprecated Use `mat.form-field-private-form-field-fill-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin private-form-field-fill-density($config-or-theme) {}\n\n/// @deprecated Use `mat.form-field-fill-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin fill-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include fill-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-fill-density($density);\n    }\n    @if $typography != null {\n      @include fill-typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n/// @deprecated Use `mat.form-field-outline-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin outline-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n  $outline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n  $outline-color-hover:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n  $outline-color-primary: theming.get-color-from-palette($primary);\n  $outline-color-accent: theming.get-color-from-palette($accent);\n  $outline-color-warn: theming.get-color-from-palette($warn);\n  $outline-color-disabled:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06));\n\n  .mat-form-field-appearance-outline {\n    .mat-form-field-outline {\n      color: $outline-color;\n    }\n\n    .mat-form-field-outline-thick {\n      color: $outline-color-hover;\n    }\n\n    &.mat-focused {\n      .mat-form-field-outline-thick {\n        color: $outline-color-primary;\n      }\n\n      &.mat-accent .mat-form-field-outline-thick {\n        color: $outline-color-accent;\n      }\n\n      &.mat-warn .mat-form-field-outline-thick {\n        color: $outline-color-warn;\n      }\n    }\n\n    // Class repeated so that rule is specific enough to override focused accent color case.\n    &.mat-form-field-invalid.mat-form-field-invalid {\n      .mat-form-field-outline-thick {\n        color: $outline-color-warn;\n      }\n    }\n\n    &.mat-form-field-disabled {\n      .mat-form-field-label {\n        color: $label-disabled-color;\n      }\n\n      .mat-form-field-outline {\n        color: $outline-color-disabled;\n      }\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)\n  scale($font-scale);\n  width: math.div(100%, $font-scale) + $outline-dedupe;\n\n  $outline-dedupe: $outline-dedupe + 0.00001 !global;\n}\n\n/// @deprecated Use `mat.form-field-outline-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin outline-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The padding above and below the infix.\n  $infix-padding: 1em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n  // The amount we offset the label from the input text in the outline appearance.\n  $outline-appearance-label-offset: -0.25em;\n\n  .mat-form-field-appearance-outline {\n    .mat-form-field-infix {\n      padding: $infix-padding 0 $infix-padding 0;\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding;\n      margin-top: $outline-appearance-label-offset;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n                $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n                $infix-margin-top);\n      }\n    }\n  }\n}\n\n/// @deprecated Use `mat.form-field-private-form-field-outline-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin private-form-field-outline-density($config-or-theme) {}\n\n/// @deprecated Use `mat.form-field-outline-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin outline-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include outline-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-outline-density($density);\n    }\n    @if $typography != null {\n      @include outline-typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n/// @deprecated Use `mat.select-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-select-value {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-select-placeholder {\n    color: form-common.private-control-placeholder-color($config);\n  }\n\n  .mat-select-disabled .mat-select-value {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  .mat-select-arrow {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-select-panel {\n    background: theming.get-color-from-palette($background, card);\n    @include private.private-theme-overridable-elevation(4, $config);\n\n    .mat-option.mat-selected:not(.mat-option-multiple) {\n      background: theming.get-color-from-palette($background, hover, 0.12);\n    }\n  }\n\n  .mat-form-field {\n    &.mat-focused {\n      &.mat-primary .mat-select-arrow {\n        color: theming.get-color-from-palette($primary, text);\n      }\n\n      &.mat-accent .mat-select-arrow {\n        color: theming.get-color-from-palette($accent, text);\n      }\n\n      &.mat-warn .mat-select-arrow {\n        color: theming.get-color-from-palette($warn, text);\n      }\n    }\n\n    .mat-select.mat-select-invalid .mat-select-arrow {\n      color: theming.get-color-from-palette($warn, text);\n    }\n\n    .mat-select.mat-select-disabled .mat-select-arrow {\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n}\n\n/// @deprecated Use `mat.select-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  .mat-select {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-select-trigger {\n    height: typography-utils.private-coerce-unitless-to-em($line-height);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.select-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-select') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n/// @deprecated Use `mat.checkbox-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n\n  // The color of the checkbox's checkmark / mixedmark.\n  $checkbox-mark-color: theming.get-color-from-palette($background, background);\n\n  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n  // this does not work well with elements layered on top of one another. To get around this we\n  // blend the colors together based on the base color and the theme background.\n  $white-30pct-opacity-on-dark: #686868;\n  $black-26pct-opacity-on-light: #b0b0b0;\n  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n\n  .mat-checkbox-frame {\n    border-color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-checkbox-checkmark {\n    fill: $checkbox-mark-color;\n  }\n\n  .mat-checkbox-checkmark-path {\n    // !important is needed here because a stroke must be set as an\n    // attribute on the SVG in order for line animation to work properly.\n    stroke: $checkbox-mark-color !important;\n  }\n\n  .mat-checkbox-mixedmark {\n    background-color: $checkbox-mark-color;\n  }\n\n  .mat-checkbox-indeterminate, .mat-checkbox-checked {\n    &.mat-primary .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($primary);\n    }\n\n    &.mat-accent .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($accent);\n    }\n\n    &.mat-warn .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($warn);\n    }\n  }\n\n  .mat-checkbox-disabled {\n    &.mat-checkbox-checked,\n    &.mat-checkbox-indeterminate {\n      .mat-checkbox-background {\n        background-color: $disabled-color;\n      }\n    }\n\n    &:not(.mat-checkbox-checked) {\n      .mat-checkbox-frame {\n        border-color: $disabled-color;\n      }\n    }\n\n    .mat-checkbox-label {\n      color: theming.get-color-from-palette($foreground, disabled);\n    }\n  }\n\n  // Switch this to a solid color since we're using `opacity`\n  // to control how opaque the ripple should be.\n  .mat-checkbox .mat-ripple-element {\n    background-color: map.get(map.get($config, foreground), base);\n  }\n\n  .mat-checkbox-checked:not(.mat-checkbox-disabled),\n  .mat-checkbox:active:not(.mat-checkbox-disabled) {\n    &.mat-primary .mat-ripple-element {\n      background: theming.get-color-from-palette($primary);\n    }\n\n    &.mat-accent .mat-ripple-element {\n      background: theming.get-color-from-palette($accent);\n    }\n\n    &.mat-warn .mat-ripple-element {\n      background: theming.get-color-from-palette($warn);\n    }\n  }\n}\n\n/// @deprecated Use `mat.checkbox-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-checkbox {\n    font-family: typography-utils.font-family($config);\n  }\n\n  // TODO(kara): Remove this style when fixing vertical baseline\n  .mat-checkbox-layout .mat-checkbox-label {\n    line-height: typography-utils.line-height($config, body-2);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.checkbox-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-checkbox') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n/// @deprecated Use `mat.autocomplete-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n\n  .mat-autocomplete-panel {\n    @include private.private-theme-overridable-elevation(4, $config);\n    background: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n\n    // Selected options in autocompletes should not be gray, but we\n    // only want to override the background for selected options if\n    // they are *not* in hover or focus state. This change has to be\n    // made here because base option styles are shared between the\n    // autocomplete and the select.\n    .mat-option.mat-selected:not(.mat-active):not(:hover) {\n      background: theming.get-color-from-palette($background, card);\n\n      &:not(.mat-option-disabled) {\n        color: theming.get-color-from-palette($foreground, text);\n      }\n    }\n  }\n}\n\n/// @deprecated Use `mat.autocomplete-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.autocomplete-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-autocomplete') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n/// @deprecated Use `mat.dialog-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-dialog-container {\n    @include private.private-theme-elevation(24, $config);\n    background: theming.get-color-from-palette($background, dialog);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n/// @deprecated Use `mat.dialog-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-dialog-title {\n    @include typography-utils.typography-level($config, title);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.dialog-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-dialog') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$chip-remove-font-size: 18px;\n\n@mixin _element-color($foreground, $background) {\n  background-color: $background;\n  color: $foreground;\n\n  .mat-chip-remove {\n    color: $foreground;\n    opacity: 0.4;\n  }\n}\n\n\n// Applies the background color for a ripple element.\n// If the color value provided is not a Sass color,\n// we assume that we've been given a CSS variable.\n// Since we can't perform alpha-blending on a CSS variable,\n// we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $default-contrast, $opacity) {\n  $background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity);\n  background-color: $background-color;\n  @if (meta.type-of($background-color) != color) {\n    opacity: $opacity;\n  }\n}\n\n@mixin _palette-styles($palette) {\n  @include _element-color(theming.get-color-from-palette($palette, default-contrast),\n    theming.get-color-from-palette($palette));\n\n  .mat-ripple-element {\n    @include _ripple-background($palette, default-contrast, 0.1);\n  }\n}\n\n/// @deprecated Use `mat.chips-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  $unselected-background: theming.get-color-from-palette($background, unselected-chip);\n  $unselected-foreground: theming.get-color-from-palette($foreground, text);\n\n  .mat-chip.mat-standard-chip {\n    @include _element-color($unselected-foreground, $unselected-background);\n\n    &:not(.mat-chip-disabled) {\n      &:active {\n        @include private.private-theme-elevation(3, $config);\n      }\n\n      .mat-chip-remove:hover {\n        opacity: 0.54;\n      }\n    }\n\n    &.mat-chip-disabled {\n      opacity: 0.4;\n    }\n\n    &::after {\n      background: map.get($foreground, base);\n    }\n  }\n\n  .mat-chip.mat-standard-chip.mat-chip-selected {\n    &.mat-primary {\n      @include _palette-styles($primary);\n    }\n\n    &.mat-warn {\n      @include _palette-styles($warn);\n    }\n\n    &.mat-accent {\n      @include _palette-styles($accent);\n    }\n  }\n}\n\n/// @deprecated Use `mat.chips-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-chip {\n    font-size: typography-utils.font-size($config, body-2);\n    font-weight: typography-utils.font-weight($config, body-2);\n\n    .mat-chip-trailing-icon.mat-icon,\n    .mat-chip-remove.mat-icon {\n      font-size: $chip-remove-font-size;\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.chips-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-chips') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _checked-color($palette, $thumb-checked-hue) {\n  &.mat-checked {\n    .mat-slide-toggle-thumb {\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n    }\n\n    .mat-slide-toggle-bar {\n      // Opacity is determined from the specs for the selection controls.\n      // See: https://material.io/design/components/selection-controls.html#specs\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue, 0.54);\n    }\n\n    .mat-ripple-element {\n      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n    }\n  }\n}\n\n/// @deprecated Use `mat.slide-toggle-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  // Color hues are based on the specs which briefly show the hues that are applied to a switch.\n  // The 2018 specs no longer describe how dark switches should look like. Due to the lack of\n  // information for dark themed switches, we partially keep the old behavior that is based on\n  // the previous specifications. For the checked color we always use the `default` hue because\n  // that follows MDC and also makes it easier for people to create a custom theme without needing\n  // to specify each hue individually.\n  $thumb-unchecked-hue: if($is-dark, 400, 50);\n  $thumb-checked-hue: default;\n\n  $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);\n  $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);\n\n  .mat-slide-toggle {\n    @include _checked-color($accent, $thumb-checked-hue);\n\n    &.mat-primary {\n      @include _checked-color($primary, $thumb-checked-hue);\n    }\n\n    &.mat-warn {\n      @include _checked-color($warn, $thumb-checked-hue);\n    }\n\n    &:not(.mat-checked) .mat-ripple-element {\n      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n      background-color: $ripple-unchecked-color;\n    }\n  }\n\n  .mat-slide-toggle-thumb {\n    @include private.private-theme-elevation(1, $config);\n    background-color: theming.get-color-from-palette(palette.$grey-palette, $thumb-unchecked-hue);\n  }\n\n  .mat-slide-toggle-bar {\n    background-color: $bar-unchecked-color;\n  }\n}\n\n/// @deprecated Use `mat.slide-toggle-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-slide-toggle-content {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.slide-toggle-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-slide-toggle') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _color($palette) {\n  &.mat-radio-checked .mat-radio-outer-circle {\n    border-color: theming.get-color-from-palette($palette);\n  }\n\n  .mat-radio-inner-circle,\n  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),\n  &.mat-radio-checked .mat-radio-persistent-ripple,\n  &:active .mat-radio-persistent-ripple {\n    background-color: theming.get-color-from-palette($palette);\n  }\n}\n\n/// @deprecated Use `mat.radio-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-radio-outer-circle {\n    border-color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-radio-button {\n    &.mat-primary {\n      @include _color($primary);\n    }\n\n    &.mat-accent {\n      @include _color($accent);\n    }\n\n    &.mat-warn {\n      @include _color($warn);\n    }\n\n    // This needs extra specificity, because the classes above are combined\n    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.\n    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).\n    &.mat-radio-disabled {\n      &.mat-radio-checked .mat-radio-outer-circle,\n      .mat-radio-outer-circle {\n        border-color: theming.get-color-from-palette($foreground, disabled);\n      }\n\n      .mat-radio-ripple .mat-ripple-element,\n      .mat-radio-inner-circle {\n        background-color: theming.get-color-from-palette($foreground, disabled);\n      }\n\n      .mat-radio-label-content {\n        color: theming.get-color-from-palette($foreground, disabled);\n      }\n    }\n\n    // Switch this to a solid color since we're using `opacity`\n    // to control how opaque the ripple should be.\n    .mat-ripple-element {\n      background-color: map.get($foreground, base);\n    }\n  }\n}\n\n/// @deprecated Use `mat.radio-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-radio-button {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.radio-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-radio') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _inner-content-theme($palette) {\n  .mat-slider-track-fill,\n  .mat-slider-thumb,\n  .mat-slider-thumb-label {\n    background-color: theming.get-color-from-palette($palette);\n  }\n\n  .mat-slider-thumb-label-text {\n    color: theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .mat-slider-focus-ring {\n    $opacity: 0.2;\n    $color: theming.get-color-from-palette($palette, default, $opacity);\n    background-color: $color;\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($color) != color) {\n      opacity: $opacity;\n    }\n  }\n}\n\n/// @deprecated Use `mat.slider-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active);\n  $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-labeled-min-value-thumb-color:\n    theming.get-color-from-palette($foreground, slider-min);\n  $mat-slider-labeled-min-value-thumb-label-color:\n    theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-tick-opacity: 0.7;\n  $mat-slider-tick-color:\n    theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity);\n  $mat-slider-tick-size: 2px;\n\n  .mat-slider-track-background {\n    background-color: $mat-slider-off-color;\n  }\n\n  .mat-slider {\n    &.mat-primary {\n      @include _inner-content-theme($primary);\n    }\n\n    &.mat-accent {\n      @include _inner-content-theme($accent);\n    }\n\n    &.mat-warn {\n      @include _inner-content-theme($warn);\n    }\n  }\n\n  .mat-slider:hover,\n  .mat-slider.cdk-focused {\n    .mat-slider-track-background {\n      background-color: $mat-slider-off-focused-color;\n    }\n  }\n\n  .mat-slider.mat-slider-disabled {\n    .mat-slider-track-background,\n    .mat-slider-track-fill,\n    .mat-slider-thumb {\n      background-color: $mat-slider-disabled-color;\n    }\n\n    &:hover {\n      .mat-slider-track-background {\n        background-color: $mat-slider-disabled-color;\n      }\n    }\n  }\n\n  .mat-slider.mat-slider-min-value {\n    .mat-slider-focus-ring {\n      $opacity: 0.12;\n      $color: theming.get-color-from-palette($foreground, base, $opacity);\n      background-color: $color;\n\n      // `mat-color` uses `rgba` for the opacity which won't work with\n      // CSS variables so we need to use `opacity` as a fallback.\n      @if (meta.type-of($color) != color) {\n        opacity: $opacity;\n      }\n    }\n\n    &.mat-slider-thumb-label-showing {\n      .mat-slider-thumb,\n      .mat-slider-thumb-label {\n        background-color: $mat-slider-labeled-min-value-thumb-color;\n      }\n\n      &.cdk-focused {\n        .mat-slider-thumb,\n        .mat-slider-thumb-label {\n          background-color: $mat-slider-labeled-min-value-thumb-label-color;\n        }\n      }\n    }\n\n    &:not(.mat-slider-thumb-label-showing) {\n      .mat-slider-thumb {\n        border-color: $mat-slider-off-color;\n        background-color: transparent;\n      }\n\n      &:hover,\n      &.cdk-focused {\n        .mat-slider-thumb {\n          border-color: $mat-slider-off-focused-color;\n        }\n\n        &.mat-slider-disabled .mat-slider-thumb {\n          border-color: $mat-slider-disabled-color;\n        }\n      }\n    }\n  }\n\n  .mat-slider-has-ticks .mat-slider-wrapper::after {\n    border-color: $mat-slider-tick-color;\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n\n  .mat-slider-horizontal .mat-slider-ticks {\n    background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n    // Firefox doesn't draw the gradient correctly with 'to right'\n    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).\n    background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n\n  .mat-slider-vertical .mat-slider-ticks {\n    background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n}\n\n/// @deprecated Use `mat.slider-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-slider-thumb-label-text {\n    font: {\n      family: typography-utils.font-family($config);\n      size: typography-utils.font-size($config, caption);\n      weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.slider-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-slider') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n/// @deprecated Use `mat.menu-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-menu-panel {\n    @include private.private-theme-overridable-elevation(4, $config);\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-menu-item {\n    background: transparent;\n    color: theming.get-color-from-palette($foreground, 'text');\n\n    &[disabled] {\n      &,\n      .mat-menu-submenu-icon,\n      .mat-icon-no-color {\n        color: theming.get-color-from-palette($foreground, 'disabled');\n      }\n    }\n  }\n\n  .mat-menu-item .mat-icon-no-color,\n  .mat-menu-submenu-icon {\n    color: theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-menu-item:hover,\n  .mat-menu-item.cdk-program-focused,\n  .mat-menu-item.cdk-keyboard-focused,\n  .mat-menu-item-highlighted {\n    &:not([disabled]) {\n      background: theming.get-color-from-palette($background, 'hover');\n    }\n  }\n}\n\n/// @deprecated Use `mat.menu-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-menu-item {\n    font: {\n      family: typography-utils.font-family($config, body-1);\n      size: typography-utils.font-size($config, body-1);\n      weight: typography-utils.font-weight($config, body-1);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.menu-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-menu') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n/// @deprecated Use `mat.list-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-list-base {\n    .mat-list-item {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-list-option {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-subheader {\n      color: theming.get-color-from-palette($foreground, secondary-text);\n    }\n\n    .mat-list-item-disabled {\n      background-color: theming.get-color-from-palette($background, disabled-list-option);\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n\n  .mat-list-option,\n  .mat-nav-list .mat-list-item,\n  .mat-action-list .mat-list-item {\n    &:hover, &:focus {\n      background: theming.get-color-from-palette($background, 'hover');\n    }\n  }\n\n  .mat-list-single-selected-option {\n    &, &:hover, &:focus {\n      background: theming.get-color-from-palette($background, hover, 0.12);\n    }\n  }\n}\n\n/// @deprecated Use `mat.list-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  $font-family: typography-utils.font-family($config);\n\n  .mat-list-item {\n    font-family: $font-family;\n  }\n\n  .mat-list-option {\n    font-family: $font-family;\n  }\n\n  // Default list\n  .mat-list-base {\n    .mat-list-item {\n      font-size: typography-utils.font-size($config, subheading-2);\n      @include list-common.base(typography-utils.font-size($config, body-1));\n    }\n\n    .mat-list-option {\n      font-size: typography-utils.font-size($config, subheading-2);\n      @include list-common.base(typography-utils.font-size($config, body-1));\n    }\n\n    .mat-subheader {\n      font-family: typography-utils.font-family($config, body-2);\n      font-size: typography-utils.font-size($config, body-2);\n      font-weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n\n  // Dense list\n  .mat-list-base[dense] {\n    .mat-list-item {\n      font-size: typography-utils.font-size($config, caption);\n      @include list-common.base(typography-utils.font-size($config, caption));\n    }\n\n    .mat-list-option {\n      font-size: typography-utils.font-size($config, caption);\n      @include list-common.base(typography-utils.font-size($config, caption));\n    }\n\n    .mat-subheader {\n      font-family: $font-family;\n      font-size: typography-utils.font-size($config, caption);\n      font-weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.list-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-list') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './paginator-variables';\n\n/// @deprecated Use `mat.paginator-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n\n  .mat-paginator {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-paginator-decrement,\n  .mat-paginator-increment {\n    border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n    border-right: 2px solid theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-paginator-first,\n  .mat-paginator-last {\n    border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-icon-button[disabled] {\n    .mat-paginator-decrement,\n    .mat-paginator-increment,\n    .mat-paginator-first,\n    .mat-paginator-last {\n      border-color: theming.get-color-from-palette($foreground, 'disabled');\n    }\n  }\n}\n\n/// @deprecated Use `mat.paginator-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    font: {\n      family: typography-utils.font-family($config, caption);\n      size: typography-utils.font-size($config, caption);\n    }\n  }\n}\n\n/// @deprecated Use `mat.paginator-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(paginator-variables.$density-config,\n    $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-paginator-container {\n      min-height: $height;\n    }\n  }\n}\n\n/// @deprecated Use `mat.paginator-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-paginator') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n/// @deprecated Use `mat.tabs-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n  $header-border: 1px solid theming.get-color-from-palette($foreground, divider);\n\n  .mat-tab-nav-bar,\n  .mat-tab-header {\n    border-bottom: $header-border;\n  }\n\n  .mat-tab-group-inverted-header {\n    .mat-tab-nav-bar,\n    .mat-tab-header {\n      border-top: $header-border;\n      border-bottom: none;\n    }\n  }\n\n  .mat-tab-label, .mat-tab-link {\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-tab-disabled {\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n\n  .mat-tab-header-pagination-chevron {\n    border-color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    border-color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  // Remove header border when there is a background color\n  .mat-tab-group[class*='mat-background-'] > .mat-tab-header,\n  .mat-tab-nav-bar[class*='mat-background-'] {\n    border-bottom: none;\n    border-top: none;\n  }\n\n  .mat-tab-group, .mat-tab-nav-bar {\n    $theme-colors: (\n      primary: $primary,\n      accent: $accent,\n      warn: $warn\n    );\n\n    @each $name, $color in $theme-colors {\n      // Set the foreground color of the tabs\n      &.mat-#{$name} {\n        @include _label-focus-color($foreground, $color);\n        @include _ink-bar-color($color);\n\n        // Override ink bar when background color is the same\n        &.mat-background-#{$name} {\n          > .mat-tab-header, > .mat-tab-link-container {\n            @include _ink-bar-color($color, default-contrast);\n          }\n        }\n      }\n    }\n\n    @each $name, $color in $theme-colors {\n      // Set background color of the tabs and override focus color\n      &.mat-background-#{$name} {\n        @include _label-focus-color($foreground, $color);\n        @include _tabs-background($color);\n      }\n    }\n  }\n}\n\n@mixin _ink-bar-color($color, $hue: default) {\n  .mat-ink-bar {\n    background-color: theming.get-color-from-palette($color, $hue);\n  }\n}\n\n@mixin _label-focus-color($foreground, $tab-focus-color) {\n  .mat-tab-label,\n  .mat-tab-link {\n    &.cdk-keyboard-focused,\n    &.cdk-program-focused {\n      background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3);\n\n      &.mat-tab-disabled {\n        background-color: theming.get-color-from-palette($foreground, disabled, 0.1);\n      }\n    }\n  }\n}\n\n@mixin _tabs-background($background-color) {\n  // Note that these selectors target direct descendants so\n  // that the styles don't apply to any nested tab groups.\n\n  // Set background color for the tab group\n  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {\n    background-color: theming.get-color-from-palette($background-color);\n  }\n\n  // Set labels to contrast against background\n  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {\n    color: theming.get-color-from-palette($background-color, default-contrast);\n\n    &.mat-tab-disabled {\n      color: theming.get-color-from-palette($background-color, default-contrast, 0.4);\n    }\n  }\n\n  // Set pagination chevrons to contrast background\n  > .mat-tab-header .mat-tab-header-pagination-chevron,\n  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n  > .mat-tab-link-container .mat-focus-indicator::before,\n  > .mat-tab-header .mat-focus-indicator::before {\n    border-color: theming.get-color-from-palette($background-color, default-contrast);\n  }\n\n  > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n  > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n    border-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n    opacity: 0.4;\n  }\n\n  // Set ripples color to be the contrast color of the new background. Otherwise the ripple\n  // color will be based on the app background color.\n  > .mat-tab-header .mat-ripple-element,\n  > .mat-tab-link-container .mat-ripple-element,\n  > .mat-tab-header-pagination .mat-ripple-element {\n    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n    background-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n    opacity: 0.12;\n  }\n}\n\n/// @deprecated Use `mat.tabs-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tab-group {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-tab-label, .mat-tab-link {\n    font: {\n      family: typography-utils.font-family($config, button);\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.tabs-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-tabs') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n@use '../core/theming/palette';\n@use '../core/style/private';\n\n/// @deprecated Use `mat.snack-bar-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $accent: map.get($config, accent);\n\n  .mat-snack-bar-container {\n    // Use the primary text on the dark theme, even though the lighter one uses\n    // a secondary, because the contrast on the light primary text is poor.\n    color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text);\n    background: if($is-dark-theme, map.get(palette.$grey-palette, 50), #323232);\n\n    @include private.private-theme-elevation(6, $config);\n  }\n\n  .mat-simple-snackbar-action {\n    color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));\n  }\n}\n\n/// @deprecated Use `mat.snack-bar-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-simple-snackbar {\n    font: {\n      family: typography-utils.font-family($config, body-1);\n      size: typography-utils.font-size($config, body-1);\n    }\n  }\n\n  .mat-simple-snackbar-action {\n    line-height: 1;\n    font: {\n      family: inherit;\n      size: inherit;\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.snack-bar-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-snack-bar') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n/// @deprecated Use `mat.table-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-table {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-table thead, .mat-table tbody, .mat-table tfoot,\n  mat-header-row, mat-row, mat-footer-row,\n  [mat-header-row], [mat-row], [mat-footer-row],\n  .mat-table-sticky {\n    background: inherit;\n  }\n\n  mat-row, mat-header-row, mat-footer-row,\n  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n    border-bottom-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-header-cell {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-cell, .mat-footer-cell {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n/// @deprecated Use `mat.table-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-table {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-header-cell {\n    font-size: typography-utils.font-size($config, caption);\n    font-weight: typography-utils.font-weight($config, body-2);\n  }\n\n  .mat-cell, .mat-footer-cell {\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n/// @deprecated Use `mat.table-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n/// @breaking-change 17.0.0\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-table') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","// This contains all of the styles for the badge\n// rather than just the color/theme because of\n// no style sheet support for directives.\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '@angular/cdk';\n\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$font-size: 12px;\n$font-weight: 600;\n$default-size: 22px !default;\n$small-size: $default-size - 6;\n$large-size: $default-size + 6;\n$_badge-structure-emitted: false !default;\n\n// Mixin for building offset given different sizes\n@mixin _badge-size($size) {\n  // This mixin isn't used in the context of a theme so we can disable the ampersand check.\n  // stylelint-disable material/no-ampersand-beyond-selector-start\n  .mat-badge-content {\n    width: $size;\n    height: $size;\n    line-height: $size;\n  }\n\n  &.mat-badge-above {\n    .mat-badge-content {\n      top: math.div(-$size, 2);\n    }\n  }\n\n  &.mat-badge-below {\n    .mat-badge-content {\n      bottom: math.div(-$size, 2);\n    }\n  }\n\n  &.mat-badge-before {\n    .mat-badge-content {\n      left: -$size;\n    }\n  }\n\n  [dir='rtl'] &.mat-badge-before {\n    .mat-badge-content {\n      left: auto;\n      right: -$size;\n    }\n  }\n\n  &.mat-badge-after {\n    .mat-badge-content {\n      right: -$size;\n    }\n  }\n\n  [dir='rtl'] &.mat-badge-after {\n    .mat-badge-content {\n      right: auto;\n      left: -$size;\n    }\n  }\n\n  &.mat-badge-overlap {\n    &.mat-badge-before {\n      .mat-badge-content {\n        left: math.div(-$size, 2);\n      }\n    }\n\n    [dir='rtl'] &.mat-badge-before {\n      .mat-badge-content {\n        left: auto;\n        right: math.div(-$size, 2);\n      }\n    }\n\n    &.mat-badge-after {\n      .mat-badge-content {\n        right: math.div(-$size, 2);\n      }\n    }\n\n    [dir='rtl'] &.mat-badge-after {\n      .mat-badge-content {\n        right: auto;\n        left: math.div(-$size, 2);\n      }\n    }\n  }\n  // stylelint-enable\n}\n\n// Structural styles for the badge. They have to be included as a part of the theme,\n// because the badge is a directive and we have no other way of attaching styles to it.\n@mixin _badge-structure {\n  .mat-badge {\n    position: relative;\n  }\n\n  // The badge should make sure its host is overflow visible so that the badge content\n  // can be rendered outside of the element. Some components such as <mat-icon> explicitly\n  // style `overflow: hidden` so this requires extra specificity so that it does not\n  // depend on style load order.\n  .mat-badge.mat-badge {\n    overflow: visible;\n  }\n\n  .mat-badge-hidden {\n    .mat-badge-content {\n      display: none;\n    }\n  }\n\n  .mat-badge-content {\n    position: absolute;\n    text-align: center;\n    display: inline-block;\n    border-radius: 50%;\n    transition: transform 200ms ease-in-out;\n    transform: scale(0.6);\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    pointer-events: none;\n  }\n\n  .ng-animate-disabled .mat-badge-content,\n  .mat-badge-content._mat-animation-noopable {\n    transition: none;\n  }\n\n  // The active class is added after the element is added\n  // so it can animate scale to default\n  .mat-badge-content.mat-badge-active {\n    // Scale to `none` instead of `1` to avoid blurry text in some browsers.\n    transform: none;\n  }\n\n  .mat-badge-small {\n    @include _badge-size($small-size);\n  }\n\n  .mat-badge-medium {\n    @include _badge-size($default-size);\n  }\n\n  .mat-badge-large {\n    @include _badge-size($large-size);\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $primary: map.get($config, primary);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-badge-content {\n    color: theming.get-color-from-palette($primary, default-contrast);\n    background: theming.get-color-from-palette($primary);\n\n    @include cdk.high-contrast(active, off) {\n      outline: solid 1px;\n      border-radius: 0;\n    }\n  }\n\n  .mat-badge-accent {\n    .mat-badge-content {\n      background: theming.get-color-from-palette($accent);\n      color: theming.get-color-from-palette($accent, default-contrast);\n    }\n  }\n\n  .mat-badge-warn {\n    .mat-badge-content {\n      color: theming.get-color-from-palette($warn, default-contrast);\n      background: theming.get-color-from-palette($warn);\n    }\n  }\n\n  .mat-badge-disabled {\n    .mat-badge-content {\n      $app-background: theming.get-color-from-palette($background, 'background');\n      $badge-color: theming.get-color-from-palette($foreground, disabled-button);\n\n      // The disabled color usually has some kind of opacity, but because the badge is overlayed\n      // on top of something else, it won't look good if it's opaque. If it is a color *type*,\n      // we convert it into a solid color by taking the opacity from the rgba value and using\n      // the value to determine the percentage of the background to put into foreground when\n      // mixing the colors together.\n      @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {\n        $badge-opacity: opacity($badge-color);\n        background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n      }\n      @else {\n        background: $badge-color;\n      }\n\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-badge-content {\n    font-weight: $font-weight;\n    font-size: $font-size;\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-badge-small .mat-badge-content {\n    // Set the font size to 75% of the original.\n    font-size: $font-size * 0.75;\n  }\n\n  .mat-badge-large .mat-badge-content {\n    font-size: $font-size * 2;\n  }\n}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    // Try to reduce the number of times that the structural styles are emitted.\n    @if not $_badge-structure-emitted {\n      @include _badge-structure;\n\n      // Only flip the flag if the mixin is included at the top level. Otherwise the first\n      // inclusion might be inside of a theme class which will exclude the structural styles\n      // from all other themes.\n      @if not & {\n        $_badge-structure-emitted: true !global;\n      }\n    }\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element\n/// to make that element visually hidden while remaining available to assistive technology.\n@mixin a11y-visually-hidden() {\n  .cdk-visually-hidden {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n\n    // This works around a Chrome bug that can cause the tab to crash when large amounts of\n    // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444\n    white-space: nowrap;\n\n    // Avoid browsers rendering the focus ring in some cases.\n    outline: 0;\n\n    // Avoid some cases where the browser will still render the native controls (see #9049).\n    -webkit-appearance: none;\n    -moz-appearance: none;\n\n    // We need at least one of top/bottom/left/right in order to prevent cases where the\n    // absolute-positioned element is pushed down and can affect scrolling (see #24597).\n    // `left` was chosen here, because it's the least likely to break overrides where the\n    // element might have been positioned (e.g. `mat-checkbox`).\n    left: 0;\n\n    [dir='rtl'] & {\n      left: auto;\n      right: 0;\n    }\n  }\n}\n\n/// @deprecated Use `a11y-visually-hidden`.\n@mixin a11y() {\n  @include a11y-visually-hidden;\n}\n\n/// Emits the mixin's content nested under `$selector-context` if `$selector-context`\n/// is non-empty.\n/// @param {String} selector-context The selector under which to nest the mixin's content.\n@mixin _optionally-nest-content($selector-context) {\n  @if ($selector-context == '') {\n    @content;\n  }\n  @else {\n    #{$selector-context} {\n      @content;\n    }\n  }\n}\n\n/// Applies styles for users in high contrast mode. Note that this only applies\n/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n/// attribute, however Chrome handles high contrast differently.\n///\n/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be\n///     `white-on-black` or `black-on-white`.\n/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:\n///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`\n///     * `off` - works for `None`\n///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).\n@mixin high-contrast($target: active, $encapsulation: 'any') {\n  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {\n    @error 'Unknown cdk-high-contrast value \"#{$target}\" provided. ' +\n           'Allowed values are \"active\", \"black-on-white\", and \"white-on-black\"';\n  }\n\n  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {\n    @error 'Unknown cdk-high-contrast encapsulation \"#{$encapsulation}\" provided. ' +\n           'Allowed values are \"on\", \"off\", and \"any\"';\n  }\n\n  // If the selector context has multiple parts, such as `.section, .region`, just doing\n  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the\n  // context. We address this by nesting the selector context under .cdk-high-contrast.\n  @at-root {\n    $selector-context: #{&};\n\n    @if ($encapsulation != 'on') {\n      // Note that if this selector is updated, the same change has to be made inside\n      // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.\n      .cdk-high-contrast-#{$target} {\n        @include _optionally-nest-content($selector-context) {\n          @content;\n        }\n      }\n    }\n\n    @if ($encapsulation != 'off') {\n      .cdk-high-contrast-#{$target} :host {\n        @include _optionally-nest-content($selector-context) {\n          @content;\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-bottom-sheet-container {\n    @include private.private-theme-elevation(16, $config);\n    background: theming.get-color-from-palette($background, dialog);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-bottom-sheet-container {\n    @include typography-utils.typography-level($config, body-1);\n  }\n}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './button-toggle-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $divider-color: theming.get-color-from-palette($foreground, divider);\n  $theme-divider-color: map.get($foreground, divider);\n\n  // By default the theme usually has an rgba color for the dividers, which can\n  // stack up with the background of a button toggle. This can cause the border\n  // of a selected toggle to look different from an deselected one. We use a solid\n  // color to ensure that the border always stays the same.\n  $divider-color: if(type-of($theme-divider-color) == color,\n    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),\n    $theme-divider-color\n  );\n\n  .mat-button-toggle-standalone,\n  .mat-button-toggle-group {\n    @include private.private-theme-overridable-elevation(2, $config);\n  }\n\n  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n  .mat-button-toggle-group-appearance-standard {\n    &:not([class*='mat-elevation-z']) {\n      box-shadow: none;\n    }\n  }\n\n  .mat-button-toggle {\n    color: theming.get-color-from-palette($foreground, hint-text);\n\n    .mat-button-toggle-focus-overlay {\n      background-color: theming.get-color-from-palette($background, focused-button);\n    }\n  }\n\n  .mat-button-toggle-appearance-standard {\n    color: theming.get-color-from-palette($foreground, text);\n    background: theming.get-color-from-palette($background, card);\n\n    .mat-button-toggle-focus-overlay {\n      background-color: theming.get-color-from-palette($background, focused-button, 1);\n    }\n  }\n\n  .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n    border-left: solid 1px $divider-color;\n  }\n\n  [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n    border-left: none;\n    border-right: solid 1px $divider-color;\n  }\n\n  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {\n    .mat-button-toggle + .mat-button-toggle {\n      border-left: none;\n      border-right: none;\n      border-top: solid 1px $divider-color;\n    }\n  }\n\n  .mat-button-toggle-checked {\n    background-color: theming.get-color-from-palette($background, selected-button);\n    color: theming.get-color-from-palette($foreground, secondary-text);\n\n    &.mat-button-toggle-appearance-standard {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n  }\n\n  .mat-button-toggle-disabled {\n    color: theming.get-color-from-palette($foreground, disabled-button);\n    background-color: theming.get-color-from-palette($background, disabled-button-toggle);\n\n    &.mat-button-toggle-appearance-standard {\n      background: theming.get-color-from-palette($background, card);\n    }\n\n    &.mat-button-toggle-checked {\n      background-color: theming.get-color-from-palette($background, selected-disabled-button);\n    }\n  }\n\n  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n  .mat-button-toggle-group-appearance-standard {\n    border: solid 1px $divider-color;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-button-toggle {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $standard-height: compatibility.private-density-prop-value(\n      button-toggle-variables.$standard-density-config, $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n      line-height: $standard-height;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../button/icon-button-theme';\n\n$selected-today-box-shadow-width: 1px;\n$selected-fade-amount: 0.6;\n$range-fade-amount: 0.2;\n$today-fade-amount: 0.2;\n$calendar-body-font-size: 13px !default;\n$calendar-weekday-table-font-size: 11px !default;\n\n@mixin _color($palette) {\n  @include date-range-colors(\n    theming.get-color-from-palette($palette, default, $range-fade-amount));\n\n  .mat-calendar-body-selected {\n    background-color: theming.get-color-from-palette($palette);\n    color: theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-selected {\n    $background: theming.get-color-from-palette($palette);\n\n    @if (meta.type-of($background) == color) {\n      background-color: color.adjust($background, $alpha: -$selected-fade-amount);\n    }\n    @else {\n      // If we couldn't resolve to background to a color (e.g. it's a CSS variable),\n      // fall back to fading the content out via `opacity`.\n      opacity: $today-fade-amount;\n    }\n  }\n\n  .mat-calendar-body-today.mat-calendar-body-selected {\n    box-shadow: inset 0 0 0 $selected-today-box-shadow-width\n                theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .cdk-keyboard-focused .mat-calendar-body-active,\n  .cdk-program-focused .mat-calendar-body-active {\n    @include _highlighted-cell($palette);\n  }\n\n  @media (hover: hover) {\n    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {\n      @include _highlighted-cell($palette);\n    }\n  }\n}\n\n// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.\n@mixin _unselected-cell {\n  &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    @content;\n  }\n}\n\n// Styles for a highlighted calendar cell (e.g. hovered or focused).\n@mixin _highlighted-cell($palette) {\n  & > .mat-calendar-body-cell-content {\n    @include _unselected-cell {\n      background-color: theming.get-color-from-palette($palette, 0.3);\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n  .mat-calendar-arrow {\n    fill: theming.get-color-from-palette($foreground, icon);\n  }\n\n  // The prev/next buttons need a bit more specificity to\n  // avoid being overwritten by the .mat-icon-button.\n  .mat-datepicker-toggle,\n  .mat-datepicker-content .mat-calendar-next-button,\n  .mat-datepicker-content .mat-calendar-previous-button {\n    color: theming.get-color-from-palette($foreground, icon);\n  }\n\n  .mat-calendar-table-header-divider::after {\n    background: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-calendar-table-header,\n  .mat-calendar-body-label {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-calendar-body-cell-content,\n  .mat-date-range-input-separator {\n    color: theming.get-color-from-palette($foreground, text);\n    border-color: transparent;\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-cell-content {\n    @include _unselected-cell {\n      color: $disabled-color;\n    }\n  }\n\n  .mat-form-field-disabled .mat-date-range-input-separator {\n    color: $disabled-color;\n  }\n\n  .mat-calendar-body-in-preview {\n    $divider-color: theming.get-color-from-palette($foreground, divider);\n\n    @if meta.type-of($divider-color) == color {\n      // The divider color is set under the assumption that it'll be used\n      // for a solid border, but because we're using a dashed border for the\n      // preview range, we need to bump its opacity to ensure that it's visible.\n      color: rgba($divider-color, math.min(opacity($divider-color) * 2, 1));\n    }\n    @else {\n      color: $divider-color;\n    }\n  }\n\n  .mat-calendar-body-today {\n    @include _unselected-cell {\n      // Note: though it's not text, the border is a hint about the fact that this is today's date,\n      // so we use the hint color.\n      border-color: theming.get-color-from-palette($foreground, hint-text);\n    }\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-today {\n    @include _unselected-cell {\n      $color: theming.get-color-from-palette($foreground, hint-text);\n\n      @if (meta.type-of($color) == color) {\n        border-color: color.adjust($color, $alpha: -$today-fade-amount);\n      }\n      @else {\n        // If the color didn't resolve to a color value, but something like a CSS variable, we can't\n        // fade it out so we fall back to reducing the element opacity. Note that we don't use the\n        // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied\n        // to it already and we don't want them to stack on top of each other.\n        opacity: 0.5;\n      }\n    }\n  }\n\n  @include _color(map.get($config, primary));\n\n  .mat-datepicker-content {\n    @include private.private-theme-elevation(4, $config);\n    background-color: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-accent {\n      @include _color(map.get($config, accent));\n    }\n\n    &.mat-warn {\n      @include _color(map.get($config, warn));\n    }\n  }\n\n  .mat-datepicker-content-touch {\n    @include private.private-theme-elevation(24, $config);\n  }\n\n  .mat-datepicker-toggle-active {\n    color: theming.get-color-from-palette(map.get($config, primary), text);\n\n    &.mat-accent {\n      color: theming.get-color-from-palette(map.get($config, accent), text);\n    }\n\n    &.mat-warn {\n      color: theming.get-color-from-palette(map.get($config, warn), text);\n    }\n  }\n\n  .mat-date-range-input-inner[disabled] {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-calendar {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-calendar-body {\n    font-size: $calendar-body-font-size;\n  }\n\n  .mat-calendar-body-label,\n  .mat-calendar-period-button {\n    font: {\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n\n  .mat-calendar-table-header th {\n    font: {\n      size: $calendar-weekday-table-font-size;\n      weight: typography-utils.font-weight($config, body-1);\n    }\n  }\n}\n\n@mixin date-range-colors(\n  $range-color,\n  $comparison-color: rgba(#f9ab00, $range-fade-amount),\n  $overlap-color: #a8dab5,\n  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)) {\n\n  .mat-calendar-body-in-range::before {\n    background: $range-color;\n  }\n\n  .mat-calendar-body-comparison-identical,\n  .mat-calendar-body-in-comparison-range::before {\n    background: $comparison-color;\n  }\n\n  .mat-calendar-body-comparison-bridge-start::before,\n  [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {\n    background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);\n  }\n\n  .mat-calendar-body-comparison-bridge-end::before,\n  [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {\n    background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);\n  }\n\n  .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n    background: $overlap-color;\n  }\n\n  .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n  .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n    background: $overlap-selected-color;\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n\n  // Regardless of the user-passed density, we want the calendar previous/next buttons to remain at\n  // density -2\n  .mat-calendar-controls {\n    @include icon-button-theme.density(-2);\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n\n  .mat-divider {\n    border-top-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-divider-vertical {\n    border-right-color: theming.get-color-from-palette($foreground, divider);\n  }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './expansion-variables';\n@use './expansion-mixins';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-expansion-panel {\n    @include private.private-theme-overridable-elevation(2, $config);\n    background: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-action-row {\n    border-top-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  @include expansion-mixins.private-expansion-focus {\n    background: theming.get-color-from-palette($background, hover);\n  }\n\n  // Disable the hover on touch devices since it can appear like it is stuck. We can't use\n  // `@media (hover)` above, because the desktop support browser support isn't great.\n  @media (hover: none) {\n    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n      .mat-expansion-panel-header:hover {\n      background: theming.get-color-from-palette($background, card);\n    }\n  }\n\n  .mat-expansion-panel-header-title {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-expansion-panel-header-description,\n  .mat-expansion-indicator::after {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-expansion-panel-header[aria-disabled='true'] {\n    color: theming.get-color-from-palette($foreground, disabled-button);\n\n    .mat-expansion-panel-header-title,\n    .mat-expansion-panel-header-description {\n      color: inherit;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-expansion-panel-header {\n    font: {\n      family: typography-utils.font-family($config, subheading-1);\n      size: typography-utils.font-size($config, subheading-1);\n      weight: typography-utils.font-weight($config, subheading-1);\n    }\n  }\n\n  .mat-expansion-panel-content {\n    @include typography-utils.typography-level($config, body-1);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $expanded-height: compatibility.private-density-prop-value(\n        expansion-variables.$header-density-config, $density-scale, expanded-height);\n  $collapsed-height: compatibility.private-density-prop-value(\n      expansion-variables.$header-density-config, $density-scale, collapsed-height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-expansion-panel-header {\n      height: $collapsed-height;\n\n      &.mat-expanded {\n        height: $expanded-height;\n      }\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@mixin private-expansion-focus {\n  .mat-expansion-panel {\n    & .mat-expansion-panel-header.cdk-keyboard-focused,\n    & .mat-expansion-panel-header.cdk-program-focused,\n    &:not(.mat-expanded) .mat-expansion-panel-header:hover {\n      &:not([aria-disabled='true']) {\n        @content;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-icon {\n    &.mat-primary {\n      color: theming.get-color-from-palette($primary, text);\n    }\n\n    &.mat-accent {\n      color: theming.get-color-from-palette($accent, text);\n    }\n\n    &.mat-warn {\n      color: theming.get-color-from-palette($warn, text);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  $drawer-background-color: theming.get-color-from-palette($background, dialog);\n  $drawer-container-background-color:  theming.get-color-from-palette($background, background);\n  $drawer-push-background-color: theming.get-color-from-palette($background, dialog);\n  $drawer-side-border: solid 1px theming.get-color-from-palette($foreground, divider);\n\n  .mat-drawer-container {\n    background-color: $drawer-container-background-color;\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-drawer {\n    background-color: $drawer-background-color;\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-drawer-push {\n      background-color: $drawer-push-background-color;\n    }\n\n    &:not(.mat-drawer-side) {\n      // The elevation of z-16 is noted in the design specifications.\n      // See https://material.io/design/components/navigation-drawer.html\n      @include private.private-theme-elevation(16, $config);\n    }\n  }\n\n  .mat-drawer-side {\n    border-right: $drawer-side-border;\n\n    &.mat-drawer-end {\n      border-left: $drawer-side-border;\n      border-right: none;\n    }\n  }\n\n  [dir='rtl'] .mat-drawer-side {\n    border-left: $drawer-side-border;\n    border-right: none;\n\n    &.mat-drawer-end {\n      border-left: none;\n      border-right: $drawer-side-border;\n    }\n  }\n\n  .mat-drawer-backdrop.mat-drawer-shown {\n    $opacity: 0.6;\n    $backdrop-color: theming.get-color-from-palette($background, card, $opacity);\n\n    @if (meta.type-of($backdrop-color) == color) {\n      // We use invert() here to have the darken the background color expected to be used. If the\n      // background is light, we use a dark backdrop. If the background is dark,\n      // we use a light backdrop.\n      background-color: color.invert($backdrop-color);\n    }\n    @else {\n      // If we couldn't resolve the backdrop color to a color value, fall back to using\n      // `opacity` to make it opaque since its end value could be a solid color.\n      background-color: $backdrop-color;\n      opacity: $opacity;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './stepper-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-step-header {\n    &.cdk-keyboard-focused,\n    &.cdk-program-focused,\n    &:hover:not([aria-disabled]),\n    &:hover[aria-disabled='false'] {\n      background-color: theming.get-color-from-palette($background, hover);\n    }\n\n    &:hover[aria-disabled='true'] {\n      cursor: default;\n    }\n\n    // On touch devices the :hover state will linger on the element after a tap.\n    // Reset it via `@media` after the declaration, because the media query isn't\n    // supported by all browsers yet.\n    @media (hover: none) {\n      &:hover {\n        background: none;\n      }\n    }\n\n    .mat-step-label,\n    .mat-step-optional {\n      // TODO(josephperrott): Update to using a corrected disabled-text contrast\n      // instead of secondary-text.\n      color: theming.get-color-from-palette($foreground, secondary-text);\n    }\n\n    .mat-step-icon {\n      // TODO(josephperrott): Update to using a corrected disabled-text contrast\n      // instead of secondary-text.\n      background-color: theming.get-color-from-palette($foreground, secondary-text);\n      color: theming.get-color-from-palette($primary, default-contrast);\n    }\n\n    .mat-step-icon-selected,\n    .mat-step-icon-state-done,\n    .mat-step-icon-state-edit {\n      background-color: theming.get-color-from-palette($primary);\n      color: theming.get-color-from-palette($primary, default-contrast);\n    }\n\n    &.mat-accent {\n      .mat-step-icon {\n        color: theming.get-color-from-palette($accent, default-contrast);\n      }\n\n      .mat-step-icon-selected,\n      .mat-step-icon-state-done,\n      .mat-step-icon-state-edit {\n        background-color: theming.get-color-from-palette($accent);\n        color: theming.get-color-from-palette($accent, default-contrast);\n      }\n    }\n\n    &.mat-warn {\n      .mat-step-icon {\n        color: theming.get-color-from-palette($warn, default-contrast);\n      }\n\n      .mat-step-icon-selected,\n      .mat-step-icon-state-done,\n      .mat-step-icon-state-edit {\n        background-color: theming.get-color-from-palette($warn);\n        color: theming.get-color-from-palette($warn, default-contrast);\n      }\n    }\n\n    .mat-step-icon-state-error {\n      background-color: transparent;\n      color: theming.get-color-from-palette($warn, text);\n    }\n\n    .mat-step-label.mat-step-label-active {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-step-label.mat-step-label-error {\n      color: theming.get-color-from-palette($warn, text);\n    }\n  }\n\n  .mat-stepper-horizontal, .mat-stepper-vertical {\n    background-color: theming.get-color-from-palette($background, card);\n  }\n\n  .mat-stepper-vertical-line::before {\n    border-left-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-horizontal-stepper-header::before,\n  .mat-horizontal-stepper-header::after,\n  .mat-stepper-horizontal-line {\n    border-top-color: theming.get-color-from-palette($foreground, divider);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-stepper-vertical, .mat-stepper-horizontal {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-step-label {\n    font: {\n      size: typography-utils.font-size($config, body-1);\n      weight: typography-utils.font-weight($config, body-1);\n    };\n  }\n\n  .mat-step-sub-label-error {\n    font-weight: normal;\n  }\n\n  .mat-step-label-error {\n    font-size: typography-utils.font-size($config, body-2);\n  }\n\n  .mat-step-label-selected {\n    font: {\n      size: typography-utils.font-size($config, body-2);\n      weight: typography-utils.font-weight($config, body-2);\n    };\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(stepper-variables.$density-config,\n    $density-scale, height);\n  $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-horizontal-stepper-header {\n      height: $height;\n    }\n\n    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n    .mat-vertical-stepper-header {\n      padding: $vertical-padding stepper-variables.$side-gap;\n    }\n\n    // Ensures that the vertical lines for the step content exceed into the step\n    // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.\n    .mat-stepper-vertical-line::before {\n      top: stepper-variables.$line-gap - $vertical-padding;\n      bottom: stepper-variables.$line-gap - $vertical-padding;\n    }\n\n    // Ensures that the horizontal lines for the step header are centered vertically.\n    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n      &::after, &::before {\n        top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n      }\n    }\n\n    // Ensures that the horizontal line for the step content is aligned centered vertically.\n    .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n      top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-sort-header-arrow {\n    $table-background: theming.get-color-from-palette($background, 'card');\n    $text-color: theming.get-color-from-palette($foreground, secondary-text);\n\n    // Because the arrow is made up of multiple elements that are stacked on top of each other,\n    // we can't use the semi-transparent color from the theme directly. If the value is a color\n    // *type*, we convert it into a solid color by taking the opacity from the rgba value and\n    // using the value to determine the percentage of the background to put into foreground\n    // when mixing the colors together. Otherwise, if it resolves to something different\n    // (e.g. it resolves to a CSS variable), we use the color directly.\n    @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {\n      $text-opacity: opacity($text-color);\n      color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);\n    }\n    @else {\n      color: $text-color;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {}\n\n@mixin density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/style/variables';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './toolbar-variables';\n\n@mixin _height($height) {\n  .mat-toolbar-multiple-rows {\n    min-height: $height;\n  }\n  .mat-toolbar-row, .mat-toolbar-single-row {\n    height: $height;\n  }\n}\n\n@mixin _palette-styles($palette) {\n  background: theming.get-color-from-palette($palette);\n  color: theming.get-color-from-palette($palette, default-contrast);\n}\n\n@mixin _form-field-overrides {\n  .mat-form-field-underline,\n  .mat-form-field-ripple,\n  .mat-focused .mat-form-field-ripple {\n    background-color: currentColor;\n  }\n\n  .mat-form-field-label,\n  .mat-focused .mat-form-field-label,\n  .mat-select-value,\n  .mat-select-arrow,\n  .mat-form-field.mat-focused .mat-select-arrow {\n    color: inherit;\n  }\n\n  .mat-input-element {\n    caret-color: currentColor;\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-toolbar {\n    background: theming.get-color-from-palette($background, app-bar);\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-primary {\n      @include _palette-styles($primary);\n    }\n\n    &.mat-accent {\n      @include _palette-styles($accent);\n    }\n\n    &.mat-warn {\n      @include _palette-styles($warn);\n    }\n\n    @include _form-field-overrides;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-toolbar,\n  .mat-toolbar h1,\n  .mat-toolbar h2,\n  .mat-toolbar h3,\n  .mat-toolbar h4,\n  .mat-toolbar h5,\n  .mat-toolbar h6 {\n    @include typography-utils.typography-level($config, title);\n    margin: 0;\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height-desktop: compatibility.private-density-prop-value(\n      toolbar-variables.$desktop-density-config, $density-scale, height);\n  $height-mobile: compatibility.private-density-prop-value(\n      toolbar-variables.$mobile-density-config, $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    // Set the default height for the toolbar.\n    @include _height($height-desktop);\n\n    // As per specs, toolbars should have a different height in mobile devices. This has been\n    // specified in the old guidelines and is still observable in the new specifications by\n    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy\n    @media (variables.$xsmall) {\n      @include _height($height-mobile);\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './tree-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-tree {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-tree-node,\n  .mat-nested-tree-node {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tree {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-tree-node,\n  .mat-nested-tree-node {\n    font-weight: typography-utils.font-weight($config, body-1);\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(tree-variables.$density-config,\n    $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-tree-node {\n      min-height: $height;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  body {\n    color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: if($is-dark-theme, constants.$offwhite, constants.$deepgray);\n  }\n\n  h2 {\n    border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);\n  }\n\n  h6 {\n    color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);\n  }\n\n  p,\n  ol,\n  ul,\n  li,\n  input,\n  a {\n    color: if($is-dark-theme, constants.$white, constants.$darkgray);\n  }\n\n  .app-toolbar a {\n    color: constants.$white;\n  }\n\n  code {\n    color: if($is-dark-theme, constants.$white, constants.$darkgray);\n  }\n\n  .sidenav-content a {\n    color: if($is-dark-theme, constants.$lightblue, constants.$blue);\n  }\n\n  .error-text {\n    color: constants.$brightred;\n  }\n}\n","// TYPOGRAPHY\n$main-font: \"Roboto\",\"Helvetica Neue Light\",\"Helvetica Neue\",Helvetica,Arial,\"Lucida Grande\",sans-serif;\n$code-font: \"Roboto Mono\", monospace;\n\n// Z-LAYER\n$layer-1: 1;\n$layer-2: 2;\n$layer-3: 3;\n$layer-4: 4;\n$layer-5: 5;\n\n// COLOR PALETTE\n$cyan: #39d0ff;\n$powderblue: #bae0ff;\n$lightblue: #7fc9ff;\n$blue: #1976D2;\n$warmblue: #7491ff;\n$coldblue: #8ccade;\n$darkblue: #1669bb;\n$accentblue: #1E88E5;\n$brightred: #DD0031;\n$darkred: #C3002F;\n$white: #FFFFFF;\n$offwhite: #FAFAFA;\n$tangerine: #DDA302;\n$darkgoldenrod: #C3A300;\n$backgroundgray: #F1F1F1;\n$superlightgray: #F2F2F2;\n$lightgray: #DBDBDB;\n$lightboxgray: #EBEBEB;\n$mist: #ECEFF1;\n$mediumgray: #6E6E6E;\n$darkgray: #444444;\n$deepgray: #333333;\n$black: #0A1014;\n$orange: #FF9800;\n$darkorange: #940;\n$anti-pattern: $brightred;\n\n// API & CODE COLORS\n$amber-200: #AA3000;\n$amber-700: #FFA000;\n$blue-400: #42A5F5;\n$blue-500: #2196F3;\n$blue-600: #1E88E5;\n$blue-800: #1565C0;\n$blue-900: #0D47A1;\n$blue-grey-50: #ECEFF1;\n$blue-grey-100: #CFD8DC;\n$blue-grey-200: #B0BEC5;\n$blue-grey-300: #90A4AE;\n$blue-grey-400: #78909C;\n$blue-grey-500: #607D8B;\n$blue-grey-600: #546E7A;\n$blue-grey-700: #455A64;\n$blue-grey-800: #37474F;\n$blue-grey-900: #263238;\n$codegreen: #17ff0b;\n$green-500: #4CAF50;\n$green-800: #2E7D32;\n$light-green-600: #7CB342;\n$pink-600: #D81B60;\n$purple-600: #8E24AA;\n$teal-500: #009688;\n$lightgrey: #F5F6F7;\n\n// STATE COLORS\n$focus-outline-ondark: rgba($white, 0.8);\n$focus-outline-onlight: $accentblue;\n\n// GRADIENTS\n$bluegradient: linear-gradient(145deg,$blue-900,$blue-400);\n$redgradient: linear-gradient(145deg,$darkred,$brightred);\n\n// API LABEL COLOR AND SYMBOLS MAP\n$api-symbols: (\n  all: (\n    content: ' ',\n    background: $white\n  ),\n  class: (\n    content: 'C',\n    background: $blue-500\n  ),\n  const: (\n    content: 'K',\n    background: $mediumgray\n  ),\n  decorator: (\n    content: '@',\n    background: $blue-800\n  ),\n  directive: (\n    content: 'D',\n    background: $pink-600\n  ),\n  enum: (\n    content: 'E',\n    background: $amber-700\n  ),\n  function: (\n    content: 'F',\n    background: $green-500\n  ),\n  interface: (\n    content: 'I',\n    background: $teal-500\n  ),\n  let: (\n    content: 'K',\n    background: $mediumgray\n  ),\n  ngmodule: (\n    content: 'M',\n    background: $darkorange\n  ),\n  package: (\n    content: 'Pk',\n    background: $purple-600\n  ),\n  pipe: (\n    content: 'P',\n    background: $blue-grey-600\n  ),\n  element: (\n    content: 'El',\n    background: $amber-200\n  ),\n  type-alias: (\n    content: 'T',\n    background: $light-green-600\n  ),\n  var: (\n    content: 'K',\n    background: $mediumgray\n  ),\n);\n\n// OTHER\n$small-breakpoint-width: 840px;\n$phone-breakpoint: 480px;\n$tablet-breakpoint: 800px;\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $primary: map.get($theme, primary);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  footer {\n    // Because the footer background is always the same color in both light and dark mode, there is no need to specify a foreground color\n    background-color: mat.get-color-from-palette($primary, if($is-dark-theme, 900, 700));\n\n    aio-footer {\n      & > * {\n        color: constants.$white;\n      }\n\n      a {\n        color: constants.$white;\n      }\n\n      h3 {\n        color: constants.$white;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $background: map.get($theme, background);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  html,\n  body,\n  .content {\n    background: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);\n  }\n\n  @if $is-dark-theme {\n    :root {\n      color-scheme: dark;\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $primary: map.get($theme, primary);\n  $foreground: map.get($theme, foreground);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .background-sky {\n    background: linear-gradient(145deg, mat.get-color-from-palette($primary, 900), if($is-dark-theme, mat.get-color-from-palette($primary, 700), #42a5f5));\n    color: mat.get-color-from-palette($foreground, text);\n  }\n\n  section#intro {\n    color: constants.$white;\n  }\n\n  .announcement-bar {\n    background-color: constants.$white;\n\n    .button {\n      color: constants.$white;\n      background-color: constants.$blue;\n\n      &:hover {\n        color: rgba(constants.$white, 0.7);\n      }\n    }\n  }\n\n  .home-row .card {\n    background-color: if($is-dark-theme, constants.$darkgray, constants.$white);\n\n    .card-text-container {\n      p {\n        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n      }\n    }\n\n    &:hover {\n      h2 {\n        color: if($is-dark-theme, constants.$cyan, constants.$blue);\n      }\n    }\n  }\n\n  .button.hero-cta {\n    background-color: if($is-dark-theme, constants.$darkgray, constants.$white);\n  }\n\n  .cta-bar {\n    .hero-cta {\n      color: if($is-dark-theme, constants.$cyan, constants.$blue);\n    }\n  }\n\n  .text-headline {\n    color: if($is-dark-theme, constants.$lightblue, constants.$blue);\n  }\n\n  .marketing-banner {\n    background-color: if($is-dark-theme, mat.get-color-from-palette($primary, 800), mat.get-color-from-palette($primary, 600));\n\n    .banner-headline {\n      color: constants.$white;\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .nf-response {\n    h1 {\n      color: if($is-dark-theme, constants.$lightblue, constants.$blue);\n    }\n  }\n\n  .nf-icon.material-icons {\n    color: constants.$blue;\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $background: map.get($theme, background);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  mat-sidenav-container.sidenav-container {\n    background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);\n\n    mat-sidenav.sidenav {\n      background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray);\n      border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n\n      .doc-version {\n        border-top: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n      }\n    }\n  }\n\n  aio-nav-menu {\n    aio-nav-item {\n      .vertical-menu-item {\n        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n\n        &:hover {\n          background-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n          color: if($is-dark-theme, constants.$powderblue, constants.$blue);\n          text-shadow: 0 0 5px if($is-dark-theme, constants.$black, constants.$white);\n\n          &.selected {\n            color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);\n          }\n        }\n\n        &.selected {\n          color: if($is-dark-theme, constants.$lightblue, constants.$darkblue);\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '../../mixins';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $primary: map.get($theme, primary);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  mat-toolbar.app-toolbar {\n    @if $is-dark-theme {\n      &.mat-primary {\n        background: mat.get-color-from-palette($primary, darker)\n      }\n    }\n\n    // HOME PAGE OVERRIDE: TOPNAV TOOLBAR\n    .page-home & {\n      background: if($is-dark-theme, mat.get-color-from-palette($primary, darker), constants.$blue);\n    }\n\n    mat-icon {\n      color: constants.$white;\n    }\n\n    // HAMBURGER BUTTON\n    .hamburger {\n      &:hover {\n        color: constants.$offwhite;\n      }\n\n      & .mat-icon {\n        color: constants.$white;\n      }\n    }\n\n    // HOME NAV-LINK\n    .nav-link.home {\n      &:focus {\n        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.\n        outline: 1px solid constants.$focus-outline-ondark;\n      }\n    }\n\n    // TOP MENU\n    aio-top-menu {\n      ul {\n        li {\n          a.nav-link {\n            .nav-link-inner {\n              &:hover {\n                background: rgba(constants.$white, 0.15);\n              }\n            }\n\n            &:focus {\n              .nav-link-inner {\n                background: rgba(constants.$white, 0.15);\n                box-shadow: 0 0 1px 2px constants.$focus-outline-ondark;\n              }\n            }\n\n            &:active {\n              .nav-link-inner {\n                background: rgba(constants.$white, 0.15);\n              }\n            }\n          }\n\n          &.selected {\n            a.nav-link {\n              .nav-link-inner {\n                background: rgba(constants.$white, 0.15);\n              }\n            }\n          }\n        }\n      }\n    }\n\n    // SEARCH BOX\n    aio-search-box.search-container {\n      input {\n        color: constants.$darkgray;\n        background-color: constants.$white;\n\n        @include mixins.placeholder {\n          color: constants.$mediumgray;\n        }\n      }\n\n      .search-box-shortcut {\n        border-color: constants.$mediumgray;\n        color: constants.$mediumgray;\n      }\n    }\n\n    aio-theme-toggle {\n      @media screen and (min-width: 351px) {\n        border-right: 1px solid constants.$white;\n      }\n    }\n  }\n}\n","@use 'sass:list';\n@use 'sass:math';\n@use 'sass:selector';\n@use './constants';\n\n// REM Font Adjustments\n@mixin font-size($sizeValue) {\n  font-size: ($sizeValue) + px;\n  font-size: math.div($sizeValue, 10) + rem;\n}\n\n@mixin letter-spacing($spacingValue) {\n  letter-spacing: ($spacingValue) + px;\n  letter-spacing: math.div($spacingValue, 10) + rem;\n}\n\n@mixin line-height($heightValue) {\n  line-height: ($heightValue) + px;\n  line-height: math.div($heightValue, 10) + rem;\n}\n\n// PLACEHOLDER\n// NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown\n//       selector will invalidate the whole block.\n@mixin placeholder {\n  &:-ms-input-placeholder      { @content; }  // IE\n  &::-ms-input-placeholder     { @content; }  // Edge\n  &::-webkit-input-placeholder { @content; }  // QQ Browser\n  &::placeholder               { @content; }  // Chrome/Firefox/Safari\n}\n\n@mixin rotate($degrees) {\n  -moz-transform: rotate($degrees);\n  -webkit-transform: rotate($degrees);\n  -o-transform: rotate($degrees);\n  -ms-transform: rotate($degrees);\n  transform: rotate($degrees);\n  transition: transform 150ms;\n  transition-timing-function: ease-in-out;\n}\n\n@mixin codeblock($bgcolor) {\n    background-color: $bgcolor;\n    border-radius: 5px;\n    padding: 20px;\n    margin: 0 auto; // was 24\n    border: 0.5px solid constants.$lightgray;\n}\n\n// INFO CARD SKELETON\n@mixin card($width) {\n  width: $width;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);\n  box-sizing: border-box;\n  transition: box-shadow .5s;\n\n  &:hover {\n    box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);\n    text-decoration: none;\n  }\n}\n\n@mixin deploy-theme($mainColor, $gradientTargetColor, $textColor) {\n  .mat-toolbar.mat-primary, footer {\n    background: linear-gradient(145deg, $mainColor, $gradientTargetColor);\n  }\n\n  .vertical-menu-item {\n    &.selected, &:hover {\n      color: $textColor;\n    }\n  }\n\n  .toc-inner ul.toc-list li {\n    &.active a {\n      color: $textColor;\n\n      &:before {\n        background-color: $mainColor;\n      }\n    }\n\n    &:hover a {\n      color: $textColor;\n    }\n  }\n}\n\n/// Define some styles for docs (i.e. non-marketing) pages.\n///\n/// @example scss - Example SCSS:\n///   .foo {\n///     @include docs-pages {\n///       .bar {\n///         color: orange;\n///       }\n///     }\n///   }\n///\n///   .baz {\n///     @include docs-pages($nestParentSelector: true) {\n///       .qux {\n///         color: orange;\n///       }\n///     }\n///   }\n///\n/// @example css - Output CSS:\n///   .foo .folder-api .bar, .foo .folder-cli .bar, ... {\n///     color: orange;\n///   }\n///\n///   .folder-api .baz .qux, .folder-cli .baz .qux, ... {\n///     color: orange;\n///   }\n///\n/// @param {boolean} $nestParentSelector\n///   If true, the parent selector (`&`) is nested inside the docs pages selectors.\n@mixin docs-pages($nestParentSelector: false) {\n  $selectors: (\n    '.folder-api',\n    '.folder-cli',\n    '.folder-docs',\n    '.folder-errors',\n    '.folder-extended-diagnostics',\n    '.folder-guide',\n    '.folder-start',\n    '.folder-tutorial',\n  );\n\n  @if $nestParentSelector and & {\n    @at-root #{selector.nest(#{$selectors}, &)} {\n      @content;\n    }\n  } @else {\n    #{$selectors} {\n      @content;\n    }\n  }\n}\n\n/// Define some styles for marketing (i.e. non-docs) pages.\n///\n/// @example scss - Example SCSS:\n///   .foo {\n///     @include marketing-pages {\n///       .bar {\n///         color: orange;\n///       }\n///     }\n///   }\n///\n///   .baz {\n///     @include marketing-pages($extraSelectors: ('.other-page'), $nestParentSelector: true) {\n///       .qux {\n///         color: orange;\n///       }\n///     }\n///   }\n///\n/// @example css - Output CSS:\n///   .foo .page-about .bar, .foo .page-contribute .bar, ... {\n///     color: orange;\n///   }\n///\n///   .page-about .baz .qux, .page-contribute .baz .qux, ..., .other-page .baz .qux {\n///     color: orange;\n///   }\n///\n/// @param {string[]} $extraSelectors\n///   A list of additional page selectors to apply the styles to.\n/// @param {boolean} $nestParentSelector\n///   If true, the parent selector (`&`) is nested inside the marketing pages selectors.\n@mixin marketing-pages($extraSelectors: (), $nestParentSelector: false) {\n  $marketingPagesSelectors: (\n    '.page-about',\n    '.page-contribute',\n    '.page-events',\n    '.page-features',\n    '.page-home',\n    '.page-presskit',\n    '.page-resources',\n  );\n  $selectors: list.join($marketingPagesSelectors, $extraSelectors, $separator: comma);\n\n  @if $nestParentSelector and & {\n    @at-root #{selector.nest(#{$selectors}, &)} {\n      @content;\n    }\n  } @else {\n    #{$selectors} {\n      @content;\n    }\n  }\n}\n\n@mixin external-link-with-icon() {\n  display: inline-flex;\n  align-items: center;\n\n  &::after {\n    content: \"\\e89e\"; // codepoint for \"open_in_new\"\n    font-family: \"Material Icons\";\n    margin-left: 0.3rem;\n    // Note: float: right is used so that the icon doesn't inherit text underlines\n    float: right;\n    display: flex;\n    align-items: center;\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .alert {\n    color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n\n    &.is-critical {\n      border-left: 8px solid constants.$brightred;\n      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$brightred, 0.05));\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: constants.$brightred;\n      }\n    }\n\n    &.is-important {\n      border-left: 8px solid constants.$orange;\n      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$orange, 0.05));\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: constants.$orange;\n      }\n    }\n\n    &.is-helpful {\n      border-left: 8px solid constants.$blue;\n      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$blue, 0.05));\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: constants.$blue;\n      }\n    }\n\n    &.archive-warning {\n      background-color: if($is-dark-theme, constants.$deepgray, constants.$darkred);\n\n      * {\n        color: constants.$white;\n      }\n\n      a {\n        color: constants.$white;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '../../mixins';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-api-list {\n    .api-filter {\n      .form-search {\n        input {\n          box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);\n          border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);\n          background-color: if($is-dark-theme, constants.$darkgray, constants.$white);\n          color: if($is-dark-theme, constants.$white, constants.$darkgray);\n\n          @include mixins.placeholder {\n            color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);\n          }\n\n          &:focus {\n            border: 1px solid constants.$blue-400;\n            box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);\n          }\n        }\n\n        .material-icons {\n          color: if($is-dark-theme, constants.$lightblue, constants.$blue-grey-600);\n        }\n      }\n    }\n\n    .api-list-container {\n\n      a {\n        color: if($is-dark-theme, constants.$warmblue, constants.$blue);\n      }\n\n      .api-list {\n        li {\n          a {\n            color: if($is-dark-theme, constants.$coldblue, constants.$blue-grey-600);\n\n            &:hover {\n              background: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);\n              color: if($is-dark-theme, constants.$offwhite, constants.$blue-500);\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  .symbol {\n    box-shadow: 0 1px 2px rgba(constants.$black, 0.24);\n    color: constants.$white;\n\n    // SYMBOL TYPES\n    // Symbol mapping variables in *constants*\n    @each $name, $symbol in constants.$api-symbols {\n      &.#{$name} {\n        background: map.get($symbol, background);\n\n        &:before {\n          content: map.get($symbol, content);\n        }\n      }\n    }\n  }\n}\n","@use 'sass:color';\n@use '../../constants';\n\n@mixin theme($theme) {\n  // This rule overrides some Angular Material styles defined for `.mat-button`\n  // (hence we include `.mat-button` in the selector).\n  a.button.mat-button,\n  .button {\n    // COLORS\n\n    &.button-secondary {\n      background: constants.$mediumgray;\n      color: rgba(constants.$white, 0.87);\n    }\n\n    &.button-plain {\n      background: constants.$white;\n      color: rgba(constants.$darkgray, 0.87);\n    }\n\n    &.button-subtle {\n      background: constants.$mediumgray;\n      color: color.adjust(constants.$offwhite, $lightness: -10%);\n\n      &:hover {\n        color: rgba(constants.$white, 0.7);\n      }\n    }\n\n    &.button-blue {\n      background: constants.$blue;\n      color: rgba(constants.$white, 0.87);\n\n      &:hover {\n        color: rgba(constants.$white, 0.7);\n      }\n    }\n\n    &.button-banner {\n      background: constants.$darkgray;\n      color: rgba(constants.$white, 0.87);\n    }\n  }\n\n  .cta-bar {\n    .button {\n      &:hover {\n        color: constants.$offwhite;\n      }\n    }\n  }\n\n  .group-buttons {\n    // This rule overrides some Angular Material styles defined for `.mat-button`\n    // (hence we include `.mat-button` in the selector).\n    button.button.mat-button.filter-button {\n      background-color: rgba(constants.$blue, 0.2);\n\n      &.selected {\n        background-color: constants.$blue;\n        color: constants.$white;\n      }\n\n      &:focus,\n      &:hover {\n        background-color: rgba(constants.$blue, 0.7);\n        color: constants.$white;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .callout {\n    header {\n      color: constants.$white;\n    }\n\n    &.is-critical {\n      border-color: constants.$brightred;\n      background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05));\n\n      header {\n        background: constants.$brightred;\n      }\n    }\n\n    &.is-important {\n      border-color: constants.$orange;\n      background: rgba(constants.$orange,if($is-dark-theme, 0.1, 0.05));\n\n      header {\n        background: constants.$amber-700;\n      }\n    }\n\n    &.is-helpful {\n      border-color: constants.$blue;\n      background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05));\n\n      header {\n        background: constants.$blue;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .card-container {\n    .docs-card {\n      background-color: if($is-dark-theme, constants.$deepgray, constants.$white);\n\n      section {\n        color: if($is-dark-theme, constants.$cyan, constants.$blue);\n      }\n\n      p {\n        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n      }\n\n      .card-footer {\n        color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);\n        background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$blue, 0.1));\n        border-top: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n\n        a {\n          color: constants.$mediumgray;\n        }\n      }\n    }\n  }\n\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  code-example {\n    &:not(.no-box) {\n      background-color: if($is-dark-theme, constants.$deepgray, rgb(constants.$backgroundgray, 0.2));\n      border: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n      color: constants.$darkgray;\n    }\n\n    // TERMINAL / SHELL TEXT STYLES\n    &[language=\"shell\"],\n    &[language=\"sh\"],\n    &[language=\"bash\"] {\n      background-color: constants.$darkgray;\n    }\n\n    header {\n      background-color: constants.$accentblue;\n      color: constants.$offwhite;\n    }\n  }\n\n  code-tabs {\n    .code-tab-group {\n      .mat-tab-label {\n        &:hover {\n          background: rgba(black, 0.04);\n        }\n      }\n    }\n  }\n\n  code-example.avoid header,\n  code-example.avoidFile header {\n    border: 2px solid constants.$anti-pattern;\n    background: constants.$anti-pattern;\n  }\n\n  code-example.avoid,\n  code-example.avoidFile,\n  code-tabs.avoid mat-tab-body,\n  code-tabs.avoidFile mat-tab-body {\n    border: 0.5px solid constants.$anti-pattern;\n  }\n\n  aio-code {\n    pre.prettyprint {\n      code {\n        ol.linenums {\n          color: color.adjust(constants.$mediumgray, $lightness: 25%);\n\n          li {\n            &::marker {\n              color: color.adjust(constants.$mediumgray, $lightness: 25%);\n            }\n          }\n        }\n\n        .code-missing {\n          color: constants.$darkred;\n        }\n      }\n\n      &.lang-sh,\n      &.lang-bash {\n        .copy-button {\n          color: if($is-dark-theme, constants.$blue-grey-200, constants.$lightgray);\n\n          &:hover {\n            color: if($is-dark-theme, constants.$blue-grey-300, constants.$superlightgray);\n          }\n        }\n      }\n    }\n\n    .copy-button {\n      color: if($is-dark-theme, constants.$blue-grey-200, constants.$darkblue);\n    }\n  }\n\n  .sidenav-content {\n    code a,\n    a > code {\n      color: if($is-dark-theme, constants.$cyan, constants.$darkblue);\n    }\n\n    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {\n      > code {\n        background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.3));\n      }\n\n      &:not(a) > code {\n        color: if($is-dark-theme, constants.$white, constants.$darkgray);\n      }\n    }\n  }\n\n  // Dark Mode Code Palette\n  $code-lightteal: #17d3ff;\n  $code-lightred: #ffb0b0;\n  $code-lightgreen: #c3e88d;\n  $code-lightpurple: #d1b4ff;\n  $code-lightorange: #ffd779;\n  $code-lightblue: #98caff;\n  $code-grey: rgba(255, 255, 255, 0.7);\n\n  /* PRETTY PRINTING STYLES for prettify.js. */\n\n  /* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/\n\n  /* SPAN elements with the classes below are added by prettyprint. */\n  .pln {\n    color: if($is-dark-theme, constants.$white, #000);\n  } /* plain text */\n\n  @media screen {\n    .str {\n      color: if($is-dark-theme, $code-lightgreen, #800);\n    } /* string content */\n    .kwd {\n      color: if($is-dark-theme, $code-lightteal, #00f);\n    } /* a keyword */\n    .com {\n      color: if($is-dark-theme, $code-grey, #060);\n    } /* a comment */\n    .typ {\n      color: if($is-dark-theme, $code-lightred, red);\n    } /* a type name */\n    .lit {\n      color: if($is-dark-theme, $code-lightpurple, #08c);\n    } /* a literal value */\n    /* punctuation, lisp open bracket, lisp close bracket */\n    .pun,\n    .opn,\n    .clo {\n      color: if($is-dark-theme, $code-lightorange, #660);\n    }\n    .tag {\n      color: if($is-dark-theme, $code-lightblue, #008);\n    } /* a markup tag name */\n    .atn {\n      color: if($is-dark-theme, $code-lightpurple, #606);\n    } /* a markup attribute name */\n    .atv {\n      color: if($is-dark-theme, $code-lightorange, #800);\n    } /* a markup attribute value */\n    .dec,\n    .var {\n      color: if($is-dark-theme, $code-lightpurple, #606);\n    } /* a declaration; a variable name */\n    .fun {\n      color: if($is-dark-theme, $code-lightred, red);\n    } /* a function name */\n  }\n\n  /* Use higher contrast and text-weight for printable form. */\n  @media print, projection {\n    .str {\n      color: #060;\n    }\n    .kwd {\n      color: #006;\n      font-weight: bold;\n    }\n    .com {\n      color: #600;\n      font-style: italic;\n    }\n    .typ {\n      color: #404;\n      font-weight: bold;\n    }\n    .lit {\n      color: #044;\n    }\n    .pun,\n    .opn,\n    .clo {\n      color: #440;\n    }\n    .tag {\n      color: #006;\n      font-weight: bold;\n    }\n    .atn {\n      color: #404;\n    }\n    .atv {\n      color: #060;\n    }\n  }\n\n  /* SHELL / TERMINAL CODE BLOCKS */\n\n  code-example {\n    &[language=\"shell\"],\n    &[language=\"sh\"],\n    &[language=\"bash\"] {\n      .pnk,\n      .blk,\n      .pln,\n      .otl,\n      .kwd,\n      .typ,\n      .tag,\n      .str,\n      .atv,\n      .atn,\n      .com,\n      .lit,\n      .pun,\n      .dec {\n        color: constants.$codegreen;\n      }\n      .copy-button {\n        color: constants.$blue-grey-200;\n      }\n    }\n\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-contributor {\n    .contributor-card {\n      background: if($is-dark-theme, constants.$deepgray, constants.$offwhite);\n      box-shadow: 0px 1px 6px 1px constants.$mediumgray;\n    }\n\n    .contributor-image-wrapper {\n      background-color: if($is-dark-theme, constants.$lightgray, constants.$deepgray);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants' as c;\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-cookies-popup {\n    .cookies-popup {\n      background: if($is-dark-theme, map.get(mat.$grey-palette, 50), #252525);\n      color: if($is-dark-theme,\n        map.get(map.get(mat.$grey-palette, contrast), 50),\n        map.get(mat.$dark-theme-foreground-palette, secondary-text)\n      );\n\n      .actions {\n        .mat-button {\n          color: if($is-dark-theme, c.$blue, c.$lightblue);\n\n          .mat-button-focus-overlay {\n            background: if($is-dark-theme, c.$black, c.$white);\n          }\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '../../mixins';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-shell.mode-archive {\n    @include mixins.deploy-theme(constants.$blue-grey-900, constants.$blue-grey-400, if($is-dark-theme, constants.$powderblue, constants.$blue-grey-900));\n  }\n\n  aio-shell.mode-next {\n    @include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred));\n  }\n\n  aio-shell.mode-rc {\n    @include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine));\n  }\n}\n","@use '../../constants';\n\n@mixin theme($theme) {\n  details {\n    box-shadow: 0 1px 4px 0 rgba(constants.$black, 0.37);\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .error-list {\n    li {\n      .symbol {\n        &.runtime {\n          background: constants.$green-500;\n        }\n\n        &.compiler {\n          background: constants.$blue-500;\n        }\n      }\n\n      a {\n        color: constants.$blue-grey-600;\n\n        &:hover {\n          background: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);\n          color: constants.$blue-500;\n        }\n      }\n    }\n  }\n}\n","@use '../../constants';\n\n@mixin theme($theme) {\n  .filetree {\n    background: constants.$white;\n    border: 4px solid constants.$lightgray;\n\n    .file {\n      color: constants.$darkgray;\n    }\n\n    .children {\n      .file {\n        &:before {\n          border-color: constants.$lightgray;\n        }\n      }\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .reviewed {\n    color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));\n  }\n}\n","@use '../../constants';\n\n@mixin theme($theme) {\n  .sidenav-content {\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      .header-link {\n        color: constants.$mediumgray;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  hr {\n    background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .content {\n    .lightbox {\n      border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n      background-color: if($is-dark-theme, constants.$deepgray, constants.$lightboxgray);\n\n      img {\n        background-color: constants.$white;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  .api-header label {\n    color: constants.$white;\n  }\n\n  label {\n    &.api-status-label {\n      color: constants.$white;\n      background-color: constants.$mediumgray;\n\n      &.deprecated,\n      &.security,\n      &.impure-pipe,\n      &.dev-preview {\n        background-color: constants.$brightred;\n      }\n\n      a {\n        color: inherit;\n        line-height: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n      }\n    }\n\n    &.api-type-label {\n      color: constants.$white;\n      background-color: constants.$accentblue;\n\n      @each $name, $symbol in constants.$api-symbols {\n        &.#{$name} {\n          background: map.get($symbol, background);\n        }\n      }\n    }\n\n    &.page-label {\n      color: constants.$white;\n      background-color: constants.$mist;\n      color: constants.$mediumgray;\n    }\n\n    &.property-type-label {\n      color: constants.$white;\n      background-color: constants.$darkgray;\n      color: constants.$white;\n    }\n  }\n}\n","@use '../../constants';\n\n@mixin theme($theme) {\n  aio-notification {\n    background: constants.$darkgray;\n\n    .close-button {\n      background: constants.$darkgray;\n    }\n\n    .content {\n      background: constants.$darkgray;\n\n      .action-button {\n        background: constants.$brightred;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $background: map.get($theme, background);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .presskit-container {\n    .presskit-section {\n      &:not(:first-child) {\n        border-top: 1px solid constants.$lightgray;\n      }\n\n      .presskit-icon-group {\n        .presskit-icon-item {\n          .presskit-image-container {\n            .transparent-img {\n              background-color: constants.$white;\n\n              &-inverse {\n                background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$deepgray);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-resource-list {\n    .subcategory-title {\n      background-color: if($is-dark-theme, constants.$deepgray, constants.$mist);\n    }\n\n    .resource-row-link {\n      background-color: if($is-dark-theme, constants.$darkgray, constants.$white);\n\n      &:hover {\n        border-color: if($is-dark-theme, rgba(constants.$lightblue, 0.5), rgba(constants.$blue, 0.5));\n        box-shadow: 0 8px 8px rgb(1 131 163 / 24%), 0 0 8px rgb(1 67 163 / 12%), 0 6px 18px rgb(43 133 231 / 12%);\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n\n@mixin theme($theme) {\n  $is-dark-theme: map.get($theme, is-dark);\n\n  .page-guide-roadmap {\n    .completed-details {\n      border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $foreground: map.get($theme, foreground);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-search-results {\n    .search-results {\n      background-color: constants.$darkgray;\n      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n\n      $item-color: if($is-dark-theme, constants.$lightgray, constants.$offwhite);\n\n      .search-area {\n        .search-section-header {\n          color: constants.$white;\n        }\n\n        ul {\n          .search-result-item {\n            color: $item-color;\n\n            &:hover {\n              color: constants.$white;\n            }\n          }\n        }\n      }\n\n      .no-results {\n        color: constants.$white;\n      }\n\n      a {\n        color: mat.get-color-from-palette($foreground, text);\n      }\n\n      .close-button {\n        color: $item-color;\n      }\n    }\n\n    &.embedded {\n      .search-results {\n        .search-area {\n          .search-section-header {\n            color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);\n          }\n\n          .search-result-item {\n            color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));\n\n            &:hover {\n              color: constants.$accentblue;\n            }\n          }\n        }\n\n        .no-results {\n          color: mat.get-color-from-palette($foreground, text);\n        }\n\n        a {\n          color: constants.$blue;\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $background: map.get($theme, background);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-select {\n    .form-select-button {\n      background: if($is-dark-theme, constants.$darkgray, constants.$white);\n      box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);\n      border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);\n      color: if($is-dark-theme, constants.$blue-grey-200, constants.$blue-grey-600);\n\n      &:focus {\n        border: 1px solid constants.$blue-400;\n        box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);\n      }\n\n      &.disabled {\n        color: lightgrey;\n      }\n    }\n\n    .form-select-dropdown {\n      background: mat.get-color-from-palette($background, background);\n      box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$black, 0.12);\n\n      li {\n        &:hover, &.current {\n          background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);\n          color: f($is-dark-theme, constants.$blue-grey-400, constants.$blue-grey-500);\n        }\n\n        &.selected {\n          background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-100);\n        }\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $background: map.get($theme, background);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  table {\n    min-width: 100%;\n    box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12);\n    background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);\n\n    thead > {\n      tr > th {\n        background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));\n        border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n        color: if($is-dark-theme, constants.$white, constants.$darkgray);\n      }\n    }\n\n    tbody > tr > {\n      th,\n      td {\n        border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n      }\n\n      td {\n        tr td:first-child {\n          @media (max-width: 480px) {\n            background-color: constants.$lightgray;\n          }\n        }\n      }\n\n      th {\n        background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));\n        &:not(:last-child) {\n          border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n        }\n      }\n    }\n\n    tbody > tr {\n      &:last-child td {\n        @media (max-width: 480px) {\n          border-bottom: 1px solid if($is-dark-theme, constants.$deepgray, constants.$lightgray);\n        }\n      }\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use '../../constants';\n@use '@angular/material' as mat;\n\n@mixin theme($theme) {\n  $foreground: map.get($theme, foreground);\n  $is-dark-theme: map.get($theme, is-dark);\n\n  aio-toc {\n    .toc-inner {\n      .toc-heading {\n        &.secondary {\n          &:hover {\n            color: constants.$accentblue;\n          }\n        }\n      }\n\n      button {\n        &.toc-heading,\n        &.toc-more-items {\n          &.embedded:focus {\n            background: if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n            color: if($is-dark-theme, constants.$white, constants.$mediumgray);\n          }\n        }\n\n        &.toc-heading {\n          &:hover:not(.embedded) {\n            color: constants.$accentblue;\n          }\n        }\n\n        &.toc-more-items {\n          color: if($is-dark-theme, constants.$lightgray, constants.$mediumgray);\n\n          &:hover {\n            color: constants.$accentblue;\n          }\n        }\n      }\n\n      ul.toc-list {\n        li {\n          &.h1:after {\n            background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);\n          }\n\n          a {\n            color: if($is-dark-theme, constants.$white, color.adjust(constants.$darkgray, $lightness: 10%));\n          }\n\n          &:hover {\n            * {\n              color: if($is-dark-theme, constants.$lightblue, constants.$accentblue);\n            }\n          }\n\n          &.active {\n            * {\n              color: if($is-dark-theme, constants.$cyan, constants.$blue);\n            }\n\n            a:before {\n              background: if($is-dark-theme, constants.$cyan, constants.$blue);\n            }\n          }\n        }\n\n        &:not(.embedded) li {\n          &:before {\n            border-left-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);\n          }\n\n          &:not(.active):hover {\n            a:before {\n              background: constants.$lightgray;\n            }\n          }\n        }\n      }\n    }\n\n    &.embedded {\n      .toc-inner {\n        .toc-heading {\n          &.secondary {\n            color: mat.get-color-from-palette($foreground, text);\n          }\n        }\n      }\n    }\n  }\n}\n"],"mappings":"AAmGE,iDAKE,cACA,uBAlCF,qFACE,cAEF,kFACE,cAEF,4EACE,cAIA,glBAEE,gBAnEJ,mKACE,yBAGF,gKACE,yBAGF,0JACE,yBAGF,2LACE,6BAmFA,6GACE,WACA,8BAIJ,0BACE,iBAKF,8CACE,uBAGF,2DAEE,gBACA,sBA7DF,iTACE,WAUA,4vBAEE,gBAbJ,2GACE,yBAEF,uGACE,yBAEF,+FACE,yBAIA,4vBAEE,2BAlCJ,iiBAXA,2BEuBA,iGCgBE,iDDhBF,iDCgBE,wEDhBF,kFCgBE,kFDhBF,qECgBE,iDDhBF,mFCgBE,0EDhBF,qJCgBE,mFDhBF,2HCgBE,iDCtBE,qDDsBF,yCClBE,oDDkBF,4CCdE,mDDcF,4CCVE,iDDUF,4CEzBF,4DFyBE,gEAAA,uDCKE,gEDLF,0CAAA,2CCSE,+DDTF,6CAAA,2CCaE,8DDbF,6CAAA,2CCiBE,4DDjBF,6CAAA,2CEzBF,uEFyBE,iEAAA,kEAAA,wDAAA,yDCkCE,4DDlCF,6CAAA,8CCsCE,2DDtCF,gDAAA,8CC0CE,0DD1CF,gDAAA,8CC8CE,wDD9CF,gDAAA,8CEzBF,mEFyBE,oEAAA,qEAAA,2DAAA,4DAAA,8CC+DA,iDD/DA,wDCoEE,8DDpEF,6CCwEE,6DDxEF,gDC4EE,4DD5EF,gDCgFE,0DDhFF,gDEzBF,qEFyBE,2DAAA,oEAAA,wDAAA,iECiGA,yFCxKF,+CACA,iDAQA,uLACE,YAKA,waACE,YAIJ,yLACE,YAKF,iHA1BA,kDACA,sDA6BA,+GA9BA,kDACA,qDAiCA,2GAlCA,kDACA,qDD2KE,kGC5KF,+CACA,iDAQA,gMACE,YAKA,0bACE,YAIJ,kMACE,YAKF,sWA1BA,+CACA,uDC0BA,6CH4CE,sCGhEF,+CACA,iDDCA,4FACE,YAKA,qNACE,YAIJ,6FACE,YAKF,yDA1BA,kDACA,oDA6BA,wDA9BA,kDACA,qDAiCA,sDAlCA,kDACA,oDC+BE,yDHuCA,sCGhEF,kDACA,sDA8BE,wDHiCA,sCGhEF,kDACA,qDAoCE,sDH2BA,sCGhEF,kDACA,qDDsCA,iEFyBE,iDAAA,0DC0HA,2QD1HA,YGSF,iEHTE,yCGqBA,8CACA,+CNDF,aOpFA,YACE,gBAEA,wFAEE,2BAIF,6EACE,2BAGF,uBACE,2BACA,gBAGF,gCACE,gBAIJ,gEACE,cAGF,+DACE,cAGF,6DACE,cCpCF,oBACE,gBAGF,2CACE,gBCLF,oBAII,2BCwBJ,0BACE,gBACA,uDACE,cApCF,8JACE,cAIF,4IAKE,mBAJA,wJACE,cAPJ,oIACE,cAIF,kHAKE,mBAJA,8HACE,cAPJ,4JACE,cAIF,0IAKE,mBAJA,sJACE,cAPJ,wJACE,cAIF,sIAKE,mBAJA,kJACE,cAqDJ,8LACE,cAGF,4KACE,mBCtDJ,oBAIE,yBACA,gBAOA,kBRiDA,iDQjDA,kBRiDA,wEQjDA,kBRiDA,wEQjDA,kBRiDA,wEQjDA,kBRiDA,yEQjDA,kBRiDA,yEQjDA,kBRiDA,0EQjDA,kBRiDA,kFQjDA,kBRiDA,kFQjDA,kBRiDA,kFQjDA,mBRiDA,mFQjDA,mBRiDA,mFQjDA,mBRiDA,mFQjDA,mBRiDA,mFQjDA,mBRiDA,mFQjDA,mBRiDA,mFQjDA,mBRiDA,oFQjDA,mBRiDA,oFQjDA,mBRiDA,oFQjDA,mBRiDA,oFQjDA,mBRiDA,qFQjDA,mBRiDA,qFQjDA,mBRiDA,qFQjDA,mBRiDA,qFQjDA,mBRiDA,qFQ1CA,yBACE,aCvBJ,UAEE,iBACA,gBV6CF,wCCgBE,wEDhBF,sDCgBE,iDSrDF,mBACE,gBCDF,6BACE,aAGF,yBACE,yBAGF,6BACE,yBAIA,0DACE,aAGF,sDACE,yBAGF,0DACE,yBAKF,wDACE,aAGF,oDACE,yBAGF,wDACE,yBCjDF,iDACE,eAGF,uEACE,eAGF,mEACE,eCDJ,aACE,6BCFF,mEACE,gBAGF,uHAEE,gBAGF,mBACE,oBCtBF,gCDyBI,gBCrBJ,qCDqBI,gBCjBJ,8CDiBI,gBCXJ,yCDWI,gBAqBJ,8CACE,oBAGF,uFAEE,oBAGF,0FACE,cAIA,gGAEE,gBEjCJ,gCACE,YAOF,kDACE,cAEA,6DACE,cAGF,2DACE,cAIJ,6CACE,cAGF,uBACE,2BAIA,mDACE,yBAEA,8DACE,yBAGF,4DACE,yBAMJ,4GACE,cAGF,uHACE,cAGF,qHACE,cAQF,kOACE,cAQF,uIAEE,yBAIJ,WACE,cC1FA,oGACE,gBAOF,4DACE,2BAGF,oFC3BF,iGACA,yBACA,2BCQE,8DACE,2BAGF,sFDdF,iGACA,yBACA,2BEgBE,qDACE,2BAGF,6EACE,2BAGF,iEACE,2BAIA,8EACE,gBAGF,yFACE,6BCZJ,2DACE,gBAGF,iEACE,gBAIA,6EACE,cAGF,wFACE,cAGF,qMACE,cAYF,iFACE,gBAGF,mFACE,gBChDN,kBACE,gBAGF,wBACE,gBAGF,uCACE,gBAGF,kBACE,gBAGF,kBACE,iBtB2BF,gDCgBE,yEqBxCA,qEACE,2BAMA,0DACE,cAGF,yDACE,cAGF,wHACE,cAQJ,kEACE,gBCnCJ,oBACE,uBAGF,wBACE,aAGF,6BAGE,yBAGF,wBACE,yBAIA,4HACE,yBAGF,0HACE,yBAGF,sHACE,yBAOA,gJACE,yBAKF,sEACE,qBAIJ,2CACE,gBAMJ,kCACE,sBAKA,mKACE,mBAGF,iKACE,mBAGF,6JACE,mBCrFJ,wBAEE,iBACA,gBxBgDF,sDCgBE,yEuBzDA,8EACE,iBAEA,wGACE,gBCXN,sBxBgEE,qFwB9DA,iBACA,gBCuCF,4BA9CA,yBACA,gBAEA,6CACE,gBACA,WA6CE,2DzBkBF,wEyBdE,2EACE,YAIJ,8CACE,WAGF,kCACE,iBAKF,0DArEF,yBACA,WAEA,2EACE,WACA,WAsBF,8EAVA,2BAwDE,uDAzEF,yBACA,WAEA,wEACE,WACA,WAsBF,2EAVA,2BA4DE,yDA7EF,yBACA,WAEA,0EACE,WACA,WAsBF,6EAVA,2BClBE,sDACE,yBAGF,oDAGE,2BAGF,kDAGE,yBAbF,kEACE,yBAGF,gEAGE,2BAGF,8DAGE,yBAbF,+DACE,yBAGF,6DAGE,2BAGF,2DAGE,yBAuCF,wDAGE,sBAIJ,wB1BUE,wE0BRA,yBAGF,sBACE,2BC9CF,wBACE,uBAvBF,wEACE,qBAGF,2SAIE,yBARF,uEACE,qBAGF,uSAIE,yBARF,qEACE,qBAGF,+RAIE,yBAmCE,4IAEE,uBAGF,wIAEE,2BAGF,8DACE,gBAMJ,sCACE,sBCfJ,6BACE,2BA9CF,yIAGE,yBAGF,qDACE,WAGF,+CAGE,2BAbF,sIAGE,yBAGF,oDACE,WAGF,8CAGE,2BAbF,gIAGE,yBAGF,kDACE,WAGF,4CAGE,2BAoDA,oGACE,2BAKF,yOAGE,2BAWF,wDAGE,2BAUA,0KAEE,2BAIA,kMAEE,2BAMJ,wFACE,uBACA,6BAKA,kMACE,uBAGF,0OACE,uBAMR,gDACE,uBASF,yCACE,iHAIA,sHAUF,uCACE,kHCrJF,gBAEE,iB9B8CF,8CCgBE,yE6B3DF,eACE,uBACA,gBAGE,qHAGE,gBAKN,yDAEE,gBAOA,uLACE,2BC3BF,8DACE,gBAOF,8BACE,gBAGF,uCACE,sBACA,gBAOF,gMACE,2BAKF,+GACE,2BC7BJ,eACE,iBAGF,4DAEE,gBAGF,kDAEE,qCACA,uCAGF,yCAEE,qCAIA,uMAIE,uBA2BF,yBACE,gBCnDJ,iCAEE,wCAIA,+FAEE,qCACA,mBAIJ,6BACE,gBAEA,+DACE,gBAIJ,mCACE,uBAGF,uEACE,uBAIF,gGAEE,mBACA,gBA4CA,wfAEE,2BAEA,goBACE,2BAbN,kFACE,yBADF,gVACE,sBAOA,gfAEE,2BAEA,wnBACE,2BAbN,gFACE,yBADF,wUACE,sBAOA,geAEE,2BAEA,wmBACE,2BAbN,4EACE,yBADF,wTACE,sBAOA,glBAEE,2BAEA,wtBACE,2BAWN,gXACE,yBAIF,sSACE,WAEA,0WACE,YAKJ,0tBAIE,kBAGF,wdAGE,kBACA,WAKF,weAIE,sBACA,YAnDA,wkBAEE,2BAEA,gtBACE,2BAWN,0WACE,yBAIF,kSACE,WAEA,sWACE,YAKJ,ktBAIE,kBAGF,odAGE,kBACA,WAKF,keAIE,sBACA,YAnDA,wjBAEE,2BAEA,gsBACE,2BAWN,8VACE,yBAIF,0RACE,WAEA,8VACE,YAKJ,ksBAIE,kBAGF,4cAGE,kBACA,WAKF,sdAIE,sBACA,YClIF,yBAGE,gBACA,mBjC4DA,0EiCvDF,4BACE,cCZF,WACE,iBAGF,uJAIE,mBAGF,wFAEE,8BAGF,iBACE,gBAGF,2BACE,gBCoEF,WACE,kBAOF,qBACE,iBAIA,qCACE,aAIJ,mBACE,kBACA,kBACA,qBtCvBF,kBsCyBE,qCACA,oBACA,gBACA,mBACA,uBACA,oBAGF,mFAEE,gBAKF,oCAEE,eArHF,oCACE,WACA,YACA,iBAIA,oDACE,SAKF,oDACE,YAKF,qDACE,WAKF,+DACE,UACA,YAKF,oDACE,YAKF,8DACE,WACA,WAMA,uEACE,UAKF,iFACE,UACA,WAKF,sEACE,WAKF,gFACE,WACA,UAnEN,qCACE,WACA,YACA,iBAIA,qDACE,UAKF,qDACE,aAKF,sDACE,WAKF,gEACE,UACA,YAKF,qDACE,YAKF,+DACE,WACA,WAMA,wEACE,WAKF,kFACE,UACA,YAKF,uEACE,YAKF,iFACE,WACA,WAnEN,oCACE,WACA,YACA,iBAIA,oDACE,UAKF,oDACE,aAKF,qDACE,WAKF,+DACE,UACA,YAKF,oDACE,YAKF,8DACE,WACA,WAMA,uEACE,WAKF,iFACE,UACA,YAKF,sEACE,YAKF,gFACE,WACA,WA0EN,mBACE,WACA,mBCrHA,6CDwHE,kBtCvEJ,gBsC6EE,qCACE,mBACA,WAKF,mCACE,WACA,mBAKF,uCAWI,mBAMF,gBEpMJ,4BrCmEE,oFqCjEA,iBACA,gBtCgDF,mHCgBE,wEsC/CA,6KACE,gBAIJ,mBACE,gBAEA,oDACE,2BAIJ,uCACE,gBACA,iBAEA,wEACE,sBAIJ,mFACE,8BAGF,6FACE,iBACA,+BAIA,8GACE,iBACA,kBACA,6BAIJ,2BACE,yBACA,gBAEA,iEACE,gBAIJ,4BACE,gBACA,sBAEA,kEACE,iBAGF,sDACE,yBAIJ,iHAEE,yBAkBA,wEACE,iBCnCJ,oBACE,eAKF,+HAGE,gBAGF,yCACE,2BAGF,oDAEE,gBAGF,gEAEE,gBACA,yBA5CF,0IAiDI,gBAIJ,yDACE,gBAGF,8BAOI,gBAhEJ,uGA2EI,uBA3EJ,mIAoFM,uBAkFN,mCACE,+BAGF,sFAEE,8BAGF,4GAEE,oFAGF,4GAEE,mFAGF,4IAEE,mBAGF,sIAEE,mBArOF,4BACE,yBACA,WAGF,wDAII,2BASJ,oDACE,gCAkBF,2TASI,2BAlBJ,sBASA,6KASI,4BAyFJ,wBvC9EE,yEuCgFA,sBACA,gBAiEF,sEACE,8BAGF,4JAEE,8BAGF,kLAEE,mFAGF,kLAEE,kFAGF,kNAEE,mBAGF,4MAEE,mBArOF,+DACE,yBACA,WAGF,2FAII,2BASJ,uFACE,gCAkBF,iYASI,2BAlBJ,sBASA,gNASI,4BA6JJ,oEACE,8BAGF,wJAEE,8BAGF,8KAEE,mFAGF,8KAEE,kFAGF,8MAEE,mBAGF,wMAEE,mBArOF,6DACE,yBACA,WAGF,yFAII,2BASJ,qFACE,gCAkBF,6XASI,2BAlBJ,sBASA,8MASI,4BAuGJ,8BvC5FE,qFuCgGF,8BACE,cAEA,yCACE,cAGF,uCACE,cAIJ,sCACE,gBpCpGF,gEHTE,yCGqBA,8CACA,+CNDF,YKtCE,6FACE,asCvDJ,aACE,2BAGF,sBACE,6BCEF,qBAEE,iBACA,gB1C6CF,mDCgBE,wEyC1DF,gBACE,2BChBE,mSDoBF,2BAKF,qBACE,oGAEE,kBAIJ,kCACE,gBAGF,uEAEE,gBAGF,gDACE,gBAEA,0KAEE,cA6BF,4BACE,YAEA,yCACE,YExEJ,sBACE,cAGF,qBACE,cAGF,mBACE,cCFJ,sBACE,yBACA,gBAGF,YACE,sBACA,gBAEA,4BACE,sBAGF,kC5C8CA,oF4CvCF,iBACE,uCAEA,2DACE,sCACA,kBAQF,0CACE,iBACA,uCAIJ,sCAQI,uBCjDF,mKAIE,2BAGF,2CACE,eAMF,qBACE,uBACE,iBAIJ,qEAIE,gBAGF,gCAGE,2BACA,WAGF,+HAGE,yBACA,WAIA,2CACE,WAGF,gKAGE,yBACA,WAKF,yCACE,WAGF,0JAGE,yBACA,WAIJ,4CACE,6BACA,cAGF,uDACE,gBAGF,sDACE,cAIJ,8CACE,sBAGF,kCACE,4BAGF,wGAGE,2BAyCA,+BACE,YAGF,+FhDvDF,agD8DE,kCACE,UACA,aAKA,iJACE,SAKJ,gEACE,SCrKJ,uBAYI,cC4BJ,aACE,sBACA,gBAEA,yBApCF,mBACA,WAuCE,wBAxCF,mBACA,WA2CE,sBA5CF,mBACA,WAIA,4HAGE,8BAGF,4MAKE,cAGF,gCACE,yBA7BF,2BACE,gBAEF,yCACE,YAsFA,0BA1FF,2BACE,gBAEF,yCACE,aCDF,UACE,iBAGF,qCAEE,gBAwBA,eACE,gBCrCJ,KACE,WAGF,kBAME,WAGF,GACE,6BAGF,GACE,cAGF,mBAME,WAGF,eACE,WAGF,KACE,WAGF,mBACE,cAGF,YACE,cEzCF,OAEE,yBAGE,oBACE,WAGF,oBACE,WAGF,qBACE,WCdN,mBAGE,mBCFF,gBACE,mDACA,gBAGF,cACE,WAGF,kBACE,sBAEA,0BACE,WACA,yBAEA,gCACE,gBAKN,gBACE,sBAGE,uCACE,WAKF,yBACE,cAKN,iBACE,sBAIA,kCACE,cAQJ,kBACE,yBAEA,mCACE,WC1DF,wCACE,cCAJ,wCACE,sBAEA,4DACE,yBACA,+BAEA,yEACE,6BAOF,8CACE,WAEA,oDACE,yBACA,cACA,4BAEA,6DACE,cAIJ,uDACE,cCpBN,mCACE,mBAGF,iCACE,WAKA,yCACE,cAGF,6CACE,WAMF,6CAEE,uCAUM,4EACE,iCAKF,4EACE,iCACA,6BAKF,6EACE,iCAOF,+EACE,iCAUV,8DACE,WACA,sBCxDN,2ED2DQ,cAIJ,6EACE,qBACA,cAKF,qCADF,yCAEI,gCE7FN,OACE,WAEA,mBACE,8BACA,2BAEA,oIAME,cAIJ,oBACE,8BACA,2BAEA,0IAME,cAIJ,kBACE,8BACA,2BAEA,8HAME,cAIJ,uBACE,yBAEA,kDACE,WC7CA,4CACE,iDACA,yBACA,sBACA,WFcR,yDEXU,cAGF,kDACE,yBACA,iDAIJ,sDACE,cAOJ,mCACE,cAKE,gDACE,cAEA,sDACE,mBACA,cCzCZ,QACE,+BACA,WAKE,YACE,mBAEA,mBACE,YAJJ,cACE,mBAEA,qBACE,YAJJ,cACE,mBAEA,qBACE,YAJJ,kBACE,mBAEA,yBACE,YAJJ,kBACE,mBAEA,yBACE,YAJJ,aACE,mBAEA,oBACE,YAJJ,iBACE,mBAEA,wBACE,YAJJ,kBACE,mBAEA,yBACE,YAJJ,YACE,mBAEA,mBACE,YAJJ,iBACE,gBAEA,wBACE,YAJJ,gBACE,mBAEA,uBACE,aAJJ,aACE,mBAEA,oBACE,YAJJ,gBACE,mBAEA,uBACE,aAJJ,mBACE,mBAEA,0BACE,YAJJ,YACE,mBAEA,mBACE,YCLN,8DACE,mBACA,gBAGF,sDACE,mBACA,gBAGF,wDACE,mBACA,cAEA,oEACE,gBAIJ,oDACE,mBACA,gBAEA,gEACE,gBAIJ,wDACE,mBACA,gBAMA,uBACE,cAQJ,sDACE,2BAEA,+DACE,yBACA,WAGF,wHAEE,2BACA,WC3DJ,gBACE,WAGF,qBACE,qBACA,8BAEA,4BACE,mBAIJ,sBACE,qBACA,+BAEA,6BACE,mBAIJ,oBACE,qBACA,gCAEA,2BACE,mBC3BJ,2BACE,sBAEA,mCACE,cAGF,6BACE,WAGF,wCACE,cACA,2BACA,8BAEA,0CACE,cChBN,0BACE,2BACA,0BACA,WAIF,mFAGE,sBAGF,oBACE,yBACA,cAOE,+CACE,2BAMR,wDAEE,yBACA,mBAGF,wGAIE,0BAMI,0CACE,cAGE,qDACE,cAKN,4CACE,cAMF,8FACE,cAEA,0GACE,cAMR,sBACE,cAKF,gDAEE,cAIA,gFACE,2BAGF,uFACE,WAmBN,KACE,WAGF,cACE,KACE,WAEF,KACE,WAEF,KACE,WAEF,KACE,UAEF,KACE,WAGF,eAGE,WAEF,KACE,WAEF,KACE,WAEF,KACE,WAEF,UAEE,WAEF,KACE,WAKJ,wBACE,KACE,WAEF,KACE,WACA,gBAEF,KACE,WACA,kBAEF,KACE,WACA,gBAEF,KACE,WAEF,eAGE,WAEF,KACE,WACA,gBAEF,KACE,WAEF,KACE,YAUA,41CAcE,cAEF,0HACE,cCpNJ,kCACE,mBACA,iCAGF,2CACE,sBCNF,iCACE,mBACA,gBAME,sDACE,cAEA,gFACE,mBT4CV,8EACE,mDAIA,qGACE,cAKF,0DACE,cAEA,iEACE,yBAIJ,yDACE,cApBJ,wEACE,mDAIA,+FACE,cAKF,uDACE,cAEA,8DACE,yBAIJ,sDACE,cApBJ,oEACE,mDAIA,2FACE,cAKF,qDACE,cAEA,4DACE,yBAIJ,oDACE,cWjFJ,QACE,+BCKI,+BACE,mBAGF,gCACE,mBAIJ,iBACE,cAEA,uBACE,mBACA,cCpBR,UACE,mBACA,yBAEA,gBACE,WAKE,iCACE,qBCPR,UACE,cCEE,sMACE,cCLN,GACE,mBCAA,mBACE,yBACA,yBAEA,uBACE,sBCRN,kBACE,WAIA,uBACE,WACA,yBAEA,wIAIE,yBAGF,yBACE,cACA,oBACA,kBACA,oBAIJ,qBACE,WACA,yBAGE,yBACE,mBADF,2BACE,mBADF,2BACE,mBADF,+BACE,mBADF,+BACE,mBADF,0BACE,mBADF,8BACE,mBADF,+BACE,mBADF,yBACE,mBADF,8BACE,gBADF,6BACE,mBADF,0BACE,mBADF,6BACE,mBADF,gCACE,mBADF,yBACE,mBAKN,iBACE,WACA,yBACA,cAGF,0BAEE,sBACA,WC7CJ,iBACE,mBAEA,+BACE,mBAGF,0BACE,mBAEA,yCACE,mBCJF,wDACE,6BAMI,0HACE,sBAEA,kIACE,sBCdZ,qCACE,yBAGF,qCACE,sBAEA,2CACE,uBACA,sECTJ,uCACE,6BCEF,mCACE,sBACA,+BAKE,uEACE,WAIA,uEACE,cAEA,6EACE,WAMR,+CACE,WAGF,qCACE,gBAGF,iDACE,cAOE,gFACE,WAGF,6EACE,cAEA,mFACE,cAKN,wDACE,gBAGF,8CACE,cCzDN,+BACE,mBACA,iDACA,yBACA,cAEA,qCACE,yBACA,iDAGF,wCACE,cAIJ,iCACE,mBACA,oDAGE,sFACE,yBACA,+BAGF,6CACE,yBC5BR,MACE,eACA,iDACA,sBAGE,kBACE,gCACA,gCACA,WAKF,oCAEE,gCAKE,0BADF,oCAEI,0BAKN,kBACE,gCACA,mCACE,+BAOF,0BADF,6BAEI,iCCjCA,gDACE,cAQF,6GACE,mBACA,cAKF,2DACE,cAIJ,yCACE,cAEA,+CACE,cAOF,2CACE,mBAGF,oCACE,cAIA,0CACE,cAKF,2CACE,cAGF,kDACE,mBAMJ,wDACE,0BAIA,6EACE,mBAUJ,mDACE","names":[],"sourceRoot":"webpack:///","file":"light-theme.css","x_google_ignoreList":[0,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51]}