styles.f7cf323c214ad4ca8102.bundle.css.map

{"version":3,"sources":["/home/wzc/dev/angular/angular/aio/src/styles.scss","/home/wzc/dev/angular/angular/aio/node_modules/@angular/material/_theming.scss","/home/wzc/dev/angular/angular/aio/src/styles/_mixins.scss","/home/wzc/dev/angular/angular/aio/src/styles/0-base/_base-dir.scss","/home/wzc/dev/angular/angular/aio/src/styles/0-base/_typography.scss","/home/wzc/dev/angular/angular/aio/src/styles/_constants.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_layouts-dir.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_api-page.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_content-layout.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_doc-viewer.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_footer.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_layout-global.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_marketing-layout.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_not-found.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_sidenav.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_table-of-contents.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_top-menu.scss","/home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_print-layout.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_modules-dir.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_alert.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_api-pages.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_api-list.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_banner.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_buttons.scss","/home/wzc/dev/angular/angular/aio/styles.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_callout.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_card.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_code.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_contribute.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_contributor.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_details.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_edit-page-cta.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_features.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_filetree.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_heading-anchors.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_hr.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_images.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_progress-bar.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_table.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_presskit.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_resources.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_scrollbar.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_search-results.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_subsection.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_toc.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_select-menu.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_deploy-theme.scss","/home/wzc/dev/angular/angular/aio/src/styles/2-modules/_notification.scss"],"names":[],"mappings":"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","file":"styles.f7cf323c214ad4ca8102.bundle.css","sourcesContent":["/* You can add global styles to this file, and also import other style files */\n@import './styles/ng-io-theme';\n@import './styles/main.scss';\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles.scss","// Import all the theming functionality.\n// We can use relative imports for imports from the cdk because we bundle everything\n// up into a single flat scss file for material.\n// We want overlays to always appear over user content, so set a baseline\n// very high z-index for the overlay container, which is where we create the new\n// stacking context for all overlays.\n$cdk-z-index-overlay-container: 1000;\n$cdk-z-index-overlay: 1000;\n$cdk-z-index-overlay-backdrop: 1000;\n\n// Background color for all of the backdrops\n$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);\n\n// Default backdrop animation is based on the Material Design swift-ease-out.\n$backdrop-animation-duration: 400ms !default;\n$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n\n\n@mixin cdk-overlay() {\n  .cdk-overlay-container, .cdk-global-overlay-wrapper {\n    // Disable events from being captured on the overlay container.\n    pointer-events: none;\n\n    // The container should be the size of the viewport.\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n\n  // The overlay-container is an invisible element which contains all individual overlays.\n  .cdk-overlay-container {\n    position: fixed;\n    z-index: $cdk-z-index-overlay-container;\n  }\n\n  // We use an extra wrapper element in order to use make the overlay itself a flex item.\n  // This makes centering the overlay easy without running into the subpixel rendering\n  // problems tied to using `transform` and without interfering with the other position\n  // strategies.\n  .cdk-global-overlay-wrapper {\n    display: flex;\n    position: absolute;\n    z-index: $cdk-z-index-overlay;\n  }\n\n  // A single overlay pane.\n  .cdk-overlay-pane {\n    position: absolute;\n    pointer-events: auto;\n    box-sizing: border-box;\n    z-index: $cdk-z-index-overlay;\n  }\n\n  .cdk-overlay-backdrop {\n    // TODO(jelbourn): reuse sidenav fullscreen mixin.\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    z-index: $cdk-z-index-overlay-backdrop;\n    pointer-events: auto;\n    -webkit-tap-highlight-color: transparent;\n    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;\n    opacity: 0;\n\n    &.cdk-overlay-backdrop-showing {\n      opacity: 0.48;\n    }\n  }\n\n  .cdk-overlay-dark-backdrop {\n    background: $cdk-overlay-dark-backdrop-background;\n  }\n\n  .cdk-overlay-transparent-backdrop {\n    background: none;\n  }\n\n  // Used when disabling global scrolling.\n  .cdk-global-scrollblock {\n    position: fixed;\n\n    // Necessary for the content not to lose its width. Note that we're using 100%, instead of\n    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width\n    // that the element had before we made it `fixed`.\n    width: 100%;\n\n    // Note: this will always add a scrollbar to whatever element it is on, which can\n    // potentially result in double scrollbars. It shouldn't be an issue, because we won't\n    // block scrolling on a page that doesn't have a scrollbar in the first place.\n    overflow-y: scroll;\n  }\n}\n\n@mixin cdk-a11y {\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}\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@mixin cdk-high-contrast {\n  @media screen and (-ms-high-contrast: active) {\n    @content;\n  }\n}\n\n\n// Core styles that can be used to apply material design treatments to any element.\n// Media queries\n// TODO: Find a way to respect media query ranges.\n// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.\n$mat-xsmall: 'max-width: 600px';\n$mat-small: 'max-width: 960px';\n\n// TODO(crisbeto): this isn't being used anywhere within Material. keeping for backwards compat.\n$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$mat-toggle-padding: 8px !default;\n// Width and height of input toggles\n$mat-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.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// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n$_umbra-color: rgba(black, 0.2);\n$_penumbra-color: rgba(black, 0.14);\n$_ambient-color: rgba(black, 0.12);\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n$_umbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_umbra-color}',\n  1: '0px 2px 1px -1px #{$_umbra-color}',\n  2: '0px 3px 1px -2px #{$_umbra-color}',\n  3: '0px 3px 3px -2px #{$_umbra-color}',\n  4: '0px 2px 4px -1px #{$_umbra-color}',\n  5: '0px 3px 5px -1px #{$_umbra-color}',\n  6: '0px 3px 5px -1px #{$_umbra-color}',\n  7: '0px 4px 5px -2px #{$_umbra-color}',\n  8: '0px 5px 5px -3px #{$_umbra-color}',\n  9: '0px 5px 6px -3px #{$_umbra-color}',\n  10: '0px 6px 6px -3px #{$_umbra-color}',\n  11: '0px 6px 7px -4px #{$_umbra-color}',\n  12: '0px 7px 8px -4px #{$_umbra-color}',\n  13: '0px 7px 8px -4px #{$_umbra-color}',\n  14: '0px 7px 9px -4px #{$_umbra-color}',\n  15: '0px 8px 9px -5px #{$_umbra-color}',\n  16: '0px 8px 10px -5px #{$_umbra-color}',\n  17: '0px 8px 11px -5px #{$_umbra-color}',\n  18: '0px 9px 11px -5px #{$_umbra-color}',\n  19: '0px 9px 12px -6px #{$_umbra-color}',\n  20: '0px 10px 13px -6px #{$_umbra-color}',\n  21: '0px 10px 13px -6px #{$_umbra-color}',\n  22: '0px 10px 14px -6px #{$_umbra-color}',\n  23: '0px 11px 14px -7px #{$_umbra-color}',\n  24: '0px 11px 15px -7px #{$_umbra-color}'\n);\n\n$_penumbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_penumbra-color}',\n  1: '0px 1px 1px 0px #{$_penumbra-color}',\n  2: '0px 2px 2px 0px #{$_penumbra-color}',\n  3: '0px 3px 4px 0px #{$_penumbra-color}',\n  4: '0px 4px 5px 0px #{$_penumbra-color}',\n  5: '0px 5px 8px 0px #{$_penumbra-color}',\n  6: '0px 6px 10px 0px #{$_penumbra-color}',\n  7: '0px 7px 10px 1px #{$_penumbra-color}',\n  8: '0px 8px 10px 1px #{$_penumbra-color}',\n  9: '0px 9px 12px 1px #{$_penumbra-color}',\n  10: '0px 10px 14px 1px #{$_penumbra-color}',\n  11: '0px 11px 15px 1px #{$_penumbra-color}',\n  12: '0px 12px 17px 2px #{$_penumbra-color}',\n  13: '0px 13px 19px 2px #{$_penumbra-color}',\n  14: '0px 14px 21px 2px #{$_penumbra-color}',\n  15: '0px 15px 22px 2px #{$_penumbra-color}',\n  16: '0px 16px 24px 2px #{$_penumbra-color}',\n  17: '0px 17px 26px 2px #{$_penumbra-color}',\n  18: '0px 18px 28px 2px #{$_penumbra-color}',\n  19: '0px 19px 29px 2px #{$_penumbra-color}',\n  20: '0px 20px 31px 3px #{$_penumbra-color}',\n  21: '0px 21px 33px 3px #{$_penumbra-color}',\n  22: '0px 22px 35px 3px #{$_penumbra-color}',\n  23: '0px 23px 36px 3px #{$_penumbra-color}',\n  24: '0px 24px 38px 3px #{$_penumbra-color}'\n);\n\n$_ambient-elevation-map: (\n  0: '0px 0px 0px 0px #{$_ambient-color}',\n  1: '0px 1px 3px 0px #{$_ambient-color}',\n  2: '0px 1px 5px 0px #{$_ambient-color}',\n  3: '0px 1px 8px 0px #{$_ambient-color}',\n  4: '0px 1px 10px 0px #{$_ambient-color}',\n  5: '0px 1px 14px 0px #{$_ambient-color}',\n  6: '0px 1px 18px 0px #{$_ambient-color}',\n  7: '0px 2px 16px 1px #{$_ambient-color}',\n  8: '0px 3px 14px 2px #{$_ambient-color}',\n  9: '0px 3px 16px 2px #{$_ambient-color}',\n  10: '0px 4px 18px 3px #{$_ambient-color}',\n  11: '0px 4px 20px 3px #{$_ambient-color}',\n  12: '0px 5px 22px 4px #{$_ambient-color}',\n  13: '0px 5px 24px 4px #{$_ambient-color}',\n  14: '0px 5px 26px 4px #{$_ambient-color}',\n  15: '0px 6px 28px 5px #{$_ambient-color}',\n  16: '0px 6px 30px 5px #{$_ambient-color}',\n  17: '0px 6px 32px 5px #{$_ambient-color}',\n  18: '0px 7px 34px 6px #{$_ambient-color}',\n  19: '0px 7px 36px 6px #{$_ambient-color}',\n  20: '0px 8px 38px 7px #{$_ambient-color}',\n  21: '0px 8px 40px 7px #{$_ambient-color}',\n  22: '0px 8px 42px 7px #{$_ambient-color}',\n  23: '0px 9px 44px 8px #{$_ambient-color}',\n  24: '0px 9px 46px 8px #{$_ambient-color}'\n);\n\n\n// The default duration value for elevation transitions.\n$mat-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;\n\n// Prefix for elevation-related selectors.\n$_mat-elevation-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 mat-elevation($zValue) {\n  @if type-of($zValue) != number or not unitless($zValue) {\n    @error '$zValue must be a unitless number';\n  }\n  @if $zValue < 0 or $zValue > 24 {\n    @error '$zValue must be between 0 and 24';\n  }\n\n  box-shadow: #{map-get($_umbra-elevation-map, $zValue)},\n              #{map-get($_penumbra-elevation-map, $zValue)},\n              #{map-get($_ambient-elevation-map, $zValue)};\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 mat-overridable-elevation($zValue) {\n  &:not([class*='#{$_mat-elevation-prefix}']) {\n    @include mat-elevation($zValue);\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 mat-elevation-transition-property-value(\n    $duration: $mat-elevation-transition-duration,\n    $easing: $mat-elevation-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 mat-elevation-transition(\n    $duration: $mat-elevation-transition-duration,\n    $easing: $mat-elevation-transition-timing-function) {\n  transition: mat-elevation-transition-property-value($duration, $easing);\n}\n\n// Color palettes from the Material Design spec.\n// See https://www.google.com/design/spec/style/color.html\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\n\n\n$black-87-opacity: rgba(black, 0.87);\n$white-87-opacity: rgba(white, 0.87);\n$black-12-opacity: rgba(black, 0.12);\n$white-12-opacity: rgba(white, 0.12);\n$black-6-opacity: rgba(black, 0.06);\n$white-6-opacity: rgba(white, 0.06);\n\n$mat-red: (\n  50: #ffebee,\n  100: #ffcdd2,\n  200: #ef9a9a,\n  300: #e57373,\n  400: #ef5350,\n  500: #f44336,\n  600: #e53935,\n  700: #d32f2f,\n  800: #c62828,\n  900: #b71c1c,\n  A100: #ff8a80,\n  A200: #ff5252,\n  A400: #ff1744,\n  A700: #d50000,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: white,\n    A700: white,\n  )\n);\n\n$mat-pink: (\n  50: #fce4ec,\n  100: #f8bbd0,\n  200: #f48fb1,\n  300: #f06292,\n  400: #ec407a,\n  500: #e91e63,\n  600: #d81b60,\n  700: #c2185b,\n  800: #ad1457,\n  900: #880e4f,\n  A100: #ff80ab,\n  A200: #ff4081,\n  A400: #f50057,\n  A700: #c51162,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: white,\n    A700: white,\n  )\n);\n\n$mat-purple: (\n  50: #f3e5f5,\n  100: #e1bee7,\n  200: #ce93d8,\n  300: #ba68c8,\n  400: #ab47bc,\n  500: #9c27b0,\n  600: #8e24aa,\n  700: #7b1fa2,\n  800: #6a1b9a,\n  900: #4a148c,\n  A100: #ea80fc,\n  A200: #e040fb,\n  A400: #d500f9,\n  A700: #aa00ff,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: white,\n    400: white,\n    500: $white-87-opacity,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: white,\n    A700: white,\n  )\n);\n\n$mat-deep-purple: (\n  50: #ede7f6,\n  100: #d1c4e9,\n  200: #b39ddb,\n  300: #9575cd,\n  400: #7e57c2,\n  500: #673ab7,\n  600: #5e35b1,\n  700: #512da8,\n  800: #4527a0,\n  900: #311b92,\n  A100: #b388ff,\n  A200: #7c4dff,\n  A400: #651fff,\n  A700: #6200ea,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: white,\n    400: white,\n    500: $white-87-opacity,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: $white-87-opacity,\n    A700: $white-87-opacity,\n  )\n);\n\n$mat-indigo: (\n  50: #e8eaf6,\n  100: #c5cae9,\n  200: #9fa8da,\n  300: #7986cb,\n  400: #5c6bc0,\n  500: #3f51b5,\n  600: #3949ab,\n  700: #303f9f,\n  800: #283593,\n  900: #1a237e,\n  A100: #8c9eff,\n  A200: #536dfe,\n  A400: #3d5afe,\n  A700: #304ffe,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: white,\n    400: white,\n    500: $white-87-opacity,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: white,\n    A700: $white-87-opacity,\n  )\n);\n\n$mat-blue: (\n  50: #e3f2fd,\n  100: #bbdefb,\n  200: #90caf9,\n  300: #64b5f6,\n  400: #42a5f5,\n  500: #2196f3,\n  600: #1e88e5,\n  700: #1976d2,\n  800: #1565c0,\n  900: #0d47a1,\n  A100: #82b1ff,\n  A200: #448aff,\n  A400: #2979ff,\n  A700: #2962ff,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: white,\n    A400: white,\n    A700: white,\n  )\n);\n\n$mat-light-blue: (\n  50: #e1f5fe,\n  100: #b3e5fc,\n  200: #81d4fa,\n  300: #4fc3f7,\n  400: #29b6f6,\n  500: #03a9f4,\n  600: #039be5,\n  700: #0288d1,\n  800: #0277bd,\n  900: #01579b,\n  A100: #80d8ff,\n  A200: #40c4ff,\n  A400: #00b0ff,\n  A700: #0091ea,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: white,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: white,\n  )\n);\n\n$mat-cyan: (\n  50: #e0f7fa,\n  100: #b2ebf2,\n  200: #80deea,\n  300: #4dd0e1,\n  400: #26c6da,\n  500: #00bcd4,\n  600: #00acc1,\n  700: #0097a7,\n  800: #00838f,\n  900: #006064,\n  A100: #84ffff,\n  A200: #18ffff,\n  A400: #00e5ff,\n  A700: #00b8d4,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: white,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-teal: (\n  50: #e0f2f1,\n  100: #b2dfdb,\n  200: #80cbc4,\n  300: #4db6ac,\n  400: #26a69a,\n  500: #009688,\n  600: #00897b,\n  700: #00796b,\n  800: #00695c,\n  900: #004d40,\n  A100: #a7ffeb,\n  A200: #64ffda,\n  A400: #1de9b6,\n  A700: #00bfa5,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-green: (\n  50: #e8f5e9,\n  100: #c8e6c9,\n  200: #a5d6a7,\n  300: #81c784,\n  400: #66bb6a,\n  500: #4caf50,\n  600: #43a047,\n  700: #388e3c,\n  800: #2e7d32,\n  900: #1b5e20,\n  A100: #b9f6ca,\n  A200: #69f0ae,\n  A400: #00e676,\n  A700: #00c853,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: white,\n    700: white,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-light-green: (\n  50: #f1f8e9,\n  100: #dcedc8,\n  200: #c5e1a5,\n  300: #aed581,\n  400: #9ccc65,\n  500: #8bc34a,\n  600: #7cb342,\n  700: #689f38,\n  800: #558b2f,\n  900: #33691e,\n  A100: #ccff90,\n  A200: #b2ff59,\n  A400: #76ff03,\n  A700: #64dd17,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $black-87-opacity,\n    700: white,\n    800: white,\n    900: white,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-lime: (\n  50: #f9fbe7,\n  100: #f0f4c3,\n  200: #e6ee9c,\n  300: #dce775,\n  400: #d4e157,\n  500: #cddc39,\n  600: #c0ca33,\n  700: #afb42b,\n  800: #9e9d24,\n  900: #827717,\n  A100: #f4ff81,\n  A200: #eeff41,\n  A400: #c6ff00,\n  A700: #aeea00,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $black-87-opacity,\n    700: $black-87-opacity,\n    800: $black-87-opacity,\n    900: white,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-yellow: (\n  50: #fffde7,\n  100: #fff9c4,\n  200: #fff59d,\n  300: #fff176,\n  400: #ffee58,\n  500: #ffeb3b,\n  600: #fdd835,\n  700: #fbc02d,\n  800: #f9a825,\n  900: #f57f17,\n  A100: #ffff8d,\n  A200: #ffff00,\n  A400: #ffea00,\n  A700: #ffd600,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $black-87-opacity,\n    700: $black-87-opacity,\n    800: $black-87-opacity,\n    900: $black-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-amber: (\n  50: #fff8e1,\n  100: #ffecb3,\n  200: #ffe082,\n  300: #ffd54f,\n  400: #ffca28,\n  500: #ffc107,\n  600: #ffb300,\n  700: #ffa000,\n  800: #ff8f00,\n  900: #ff6f00,\n  A100: #ffe57f,\n  A200: #ffd740,\n  A400: #ffc400,\n  A700: #ffab00,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $black-87-opacity,\n    700: $black-87-opacity,\n    800: $black-87-opacity,\n    900: $black-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $black-87-opacity,\n  )\n);\n\n$mat-orange: (\n  50: #fff3e0,\n  100: #ffe0b2,\n  200: #ffcc80,\n  300: #ffb74d,\n  400: #ffa726,\n  500: #ff9800,\n  600: #fb8c00,\n  700: #f57c00,\n  800: #ef6c00,\n  900: #e65100,\n  A100: #ffd180,\n  A200: #ffab40,\n  A400: #ff9100,\n  A700: #ff6d00,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $black-87-opacity,\n    700: $black-87-opacity,\n    800: white,\n    900: white,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: black,\n  )\n);\n\n$mat-deep-orange: (\n  50: #fbe9e7,\n  100: #ffccbc,\n  200: #ffab91,\n  300: #ff8a65,\n  400: #ff7043,\n  500: #ff5722,\n  600: #f4511e,\n  700: #e64a19,\n  800: #d84315,\n  900: #bf360c,\n  A100: #ff9e80,\n  A200: #ff6e40,\n  A400: #ff3d00,\n  A700: #dd2c00,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: white,\n    600: white,\n    700: white,\n    800: white,\n    900: white,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: white,\n    A700: white,\n  )\n);\n\n$mat-brown: (\n  50: #efebe9,\n  100: #d7ccc8,\n  200: #bcaaa4,\n  300: #a1887f,\n  400: #8d6e63,\n  500: #795548,\n  600: #6d4c41,\n  700: #5d4037,\n  800: #4e342e,\n  900: #3e2723,\n  A100: #d7ccc8,\n  A200: #bcaaa4,\n  A400: #8d6e63,\n  A700: #5d4037,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: white,\n    400: white,\n    500: $white-87-opacity,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: white,\n    A700: $white-87-opacity,\n  )\n);\n\n$mat-grey: (\n  50: #fafafa,\n  100: #f5f5f5,\n  200: #eeeeee,\n  300: #e0e0e0,\n  400: #bdbdbd,\n  500: #9e9e9e,\n  600: #757575,\n  700: #616161,\n  800: #424242,\n  900: #212121,\n  A100: #ffffff,\n  A200: #eeeeee,\n  A400: #bdbdbd,\n  A700: #616161,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: $black-87-opacity,\n    500: $black-87-opacity,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: $black-87-opacity,\n    A700: $white-87-opacity,\n  )\n);\n\n$mat-blue-grey: (\n  50: #eceff1,\n  100: #cfd8dc,\n  200: #b0bec5,\n  300: #90a4ae,\n  400: #78909c,\n  500: #607d8b,\n  600: #546e7a,\n  700: #455a64,\n  800: #37474f,\n  900: #263238,\n  A100: #cfd8dc,\n  A200: #b0bec5,\n  A400: #78909c,\n  A700: #455a64,\n  contrast: (\n    50: $black-87-opacity,\n    100: $black-87-opacity,\n    200: $black-87-opacity,\n    300: $black-87-opacity,\n    400: white,\n    500: white,\n    600: $white-87-opacity,\n    700: $white-87-opacity,\n    800: $white-87-opacity,\n    900: $white-87-opacity,\n    A100: $black-87-opacity,\n    A200: $black-87-opacity,\n    A400: white,\n    A700: $white-87-opacity,\n  )\n);\n\n\n// Background palette for light themes.\n$mat-light-theme-background: (\n  status-bar: map_get($mat-grey, 300),\n  app-bar:    map_get($mat-grey, 100),\n  background: map_get($mat-grey, 50),\n  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n  card:       white,\n  dialog:     white,\n  disabled-button: $black-12-opacity,\n  raised-button: white,\n  focused-button: $black-6-opacity,\n  selected-button: map_get($mat-grey, 300),\n  selected-disabled-button: map_get($mat-grey, 400),\n  disabled-button-toggle: map_get($mat-grey, 200),\n  unselected-chip: map_get($mat-grey, 300),\n  disabled-list-option: map_get($mat-grey, 200),\n);\n\n// Background palette for dark themes.\n$mat-dark-theme-background: (\n  status-bar: black,\n  app-bar:    map_get($mat-grey, 900),\n  background: #303030,\n  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n  card:       map_get($mat-grey, 800),\n  dialog:     map_get($mat-grey, 800),\n  disabled-button: $white-12-opacity,\n  raised-button: map-get($mat-grey, 800),\n  focused-button: $white-6-opacity,\n  selected-button: map_get($mat-grey, 900),\n  selected-disabled-button: map_get($mat-grey, 800),\n  disabled-button-toggle: black,\n  unselected-chip: map_get($mat-grey, 700),\n  disabled-list-option: black,\n);\n\n// Foreground palette for light themes.\n$mat-light-theme-foreground: (\n  base:              black,\n  divider:           $black-12-opacity,\n  dividers:          $black-12-opacity,\n  disabled:          rgba(black, 0.38),\n  disabled-button:   rgba(black, 0.38),\n  disabled-text:     rgba(black, 0.38),\n  hint-text:         rgba(black, 0.38),\n  secondary-text:    rgba(black, 0.54),\n  icon:              rgba(black, 0.54),\n  icons:             rgba(black, 0.54),\n  text:              rgba(black, 0.87),\n  slider-min:        rgba(black, 0.87),\n  slider-off:        rgba(black, 0.26),\n  slider-off-active: rgba(black, 0.38),\n);\n\n// Foreground palette for dark themes.\n$mat-dark-theme-foreground: (\n  base:              white,\n  divider:           $white-12-opacity,\n  dividers:          $white-12-opacity,\n  disabled:          rgba(white, 0.3),\n  disabled-button:   rgba(white, 0.3),\n  disabled-text:     rgba(white, 0.3),\n  hint-text:         rgba(white, 0.3),\n  secondary-text:    rgba(white, 0.7),\n  icon:              white,\n  icons:             white,\n  text:              white,\n  slider-min:        white,\n  slider-off:        rgba(white, 0.3),\n  slider-off-active: rgba(white, 0.3),\n);\n\n\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n// @param $color-map\n// @param $hue\n@function mat-contrast($palette, $hue) {\n  @return map-get(map-get($palette, contrast), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\n// of the Material Design hues.\n// @param $color-map\n// @param $primary\n// @param $lighter\n@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\n  $result: map_merge($base-palette, (\n    default: map-get($base-palette, $default),\n    lighter: map-get($base-palette, $lighter),\n    darker: map-get($base-palette, $darker),\n\n    default-contrast: mat-contrast($base-palette, $default),\n    lighter-contrast: mat-contrast($base-palette, $lighter),\n    darker-contrast: mat-contrast($base-palette, $darker)\n  ));\n\n  // For each hue in the palette, add a \"-contrast\" color to the map.\n  @each $hue, $color in $base-palette {\n    $result: map_merge($result, (\n      '#{$hue}-contrast': mat-contrast($base-palette, $hue)\n    ));\n  }\n\n  @return $result;\n}\n\n\n// Gets a color from a theme palette (the output of mat-palette).\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\n//\n// @param $color-map The theme palette (output of mat-palette).\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\n//     be treated as opacity.\n// @param $opacity The alpha channel value for the color.\n@function mat-color($palette, $hue: default, $opacity: null) {\n  // If hueKey is a number between zero and one, then it actually contains an\n  // opacity value, so recall this function with the default hue and that given opacity.\n  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\n    @return mat-color($palette, default, $hue);\n  }\n\n  $color: map-get($palette, $hue);\n  $opacity: if($opacity == null, opacity($color), $opacity);\n\n  @return rgba($color, $opacity);\n}\n\n\n// Creates a container object for a light theme to be given to individual component theme mixins.\n@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n  @return (\n    primary: $primary,\n    accent: $accent,\n    warn: $warn,\n    is-dark: false,\n    foreground: $mat-light-theme-foreground,\n    background: $mat-light-theme-background,\n  );\n}\n\n\n// Creates a container object for a dark theme to be given to individual component theme mixins.\n@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n  @return (\n    primary: $primary,\n    accent: $accent,\n    warn: $warn,\n    is-dark: true,\n    foreground: $mat-dark-theme-foreground,\n    background: $mat-dark-theme-background,\n  );\n}\n\n\n\n$mat-ripple-color-opacity: 0.1;\n\n@mixin mat-ripple() {\n  // The host element of an mat-ripple directive should always have a position of \"absolute\" or\n  // \"relative\" so that the ripple divs it creates inside itself are correctly positioned.\n  .mat-ripple {\n    overflow: hidden;\n\n    // In high contrast mode the ripple is opaque, causing it to obstruct the content.\n    @include cdk-high-contrast {\n      display: none;\n    }\n  }\n\n  .mat-ripple.mat-ripple-unbounded {\n    overflow: visible;\n  }\n\n  .mat-ripple-element {\n    position: absolute;\n    border-radius: 50%;\n    pointer-events: none;\n\n    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n    transform: scale(0);\n  }\n}\n\n/* Theme for the ripple elements.*/\n@mixin mat-ripple-theme($theme) {\n  $foreground: map_get($theme, foreground);\n  $foreground-base: map_get($foreground, base);\n\n  .mat-ripple-element {\n    background-color: rgba($foreground-base, $mat-ripple-color-opacity);\n  }\n}\n\n\n\n// This mixin will ensure that lines that overflow the container will hide the overflow and\n// truncate neatly with an ellipsis.\n@mixin mat-truncate-line() {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n// Mixin to provide all mat-line styles, changing secondary font size based on whether the list\n// is in dense mode.\n@mixin mat-line-base($secondary-font-size) {\n  .mat-line {\n    @include mat-truncate-line();\n    display: block;\n    box-sizing: border-box;\n\n    // all lines but the top line should have smaller text\n    &:nth-child(n+2) {\n      font-size: $secondary-font-size;\n    }\n  }\n}\n\n// This mixin normalizes default element styles, e.g. font weight for heading text.\n@mixin mat-normalize-text() {\n  & > * {\n    margin: 0;\n    padding: 0;\n    font-weight: normal;\n    font-size: inherit;\n  }\n}\n\n// This mixin provides base styles for the wrapper around mat-line elements in a list.\n@mixin mat-line-wrapper-base() {\n  @include mat-normalize-text();\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  // Must remove wrapper when lines are empty or it takes up horizontal\n  // space and pushes other elements to the right.\n  &:empty {\n    display: none;\n  }\n}\n\n\n/** The mixins below are shared between mat-menu and mat-select */\n\n// menu width must be a multiple of 56px\n$mat-menu-overlay-min-width: 112px !default;   // 56 * 2\n$mat-menu-overlay-max-width: 280px !default;   // 56 * 5\n\n$mat-menu-item-height: 48px !default;\n$mat-menu-side-padding: 16px !default;\n$mat-menu-icon-margin: 16px !default;\n\n\n@mixin mat-menu-base($default-elevation) {\n  @include mat-overridable-elevation($default-elevation);\n  min-width: $mat-menu-overlay-min-width;\n  max-width: $mat-menu-overlay-max-width;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile\n}\n\n@mixin mat-menu-item-base() {\n  @include mat-truncate-line();\n\n  // Needs to be a block for the ellipsis to work.\n  display: block;\n  line-height: $mat-menu-item-height;\n  height: $mat-menu-item-height;\n  padding: 0 $mat-menu-side-padding;\n\n  text-align: left;\n  text-decoration: none;   // necessary to reset anchor tags\n\n  &[disabled] {\n    cursor: default;\n  }\n\n  [dir='rtl'] & {\n    text-align: right;\n  }\n\n  .mat-icon {\n    margin-right: $mat-menu-icon-margin;\n\n    [dir='rtl'] & {\n      margin-left: $mat-menu-icon-margin;\n      margin-right: 0;\n    }\n  }\n}\n\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n@mixin mat-menu-positions() {\n  &.mat-menu-after.mat-menu-below {\n    transform-origin: left top;\n  }\n\n  &.mat-menu-after.mat-menu-above {\n    transform-origin: left bottom;\n  }\n\n  &.mat-menu-before.mat-menu-below {\n    transform-origin: right top;\n  }\n\n  &.mat-menu-before.mat-menu-above {\n    transform-origin: right bottom;\n  }\n\n  [dir='rtl'] & {\n    &.mat-menu-after.mat-menu-below {\n      transform-origin: right top;\n    }\n\n    &.mat-menu-after.mat-menu-above {\n      transform-origin: right bottom;\n    }\n\n    &.mat-menu-before.mat-menu-below {\n      transform-origin: left top;\n    }\n\n    &.mat-menu-before.mat-menu-above {\n      transform-origin: left bottom;\n    }\n  }\n}\n\n/* stylelint-disable material/no-prefixes */\n@mixin user-select($value) {\n  -webkit-user-select: $value;\n  -moz-user-select: $value;\n  -ms-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  &:-ms-input-placeholder {\n    @content;\n  }\n}\n\n@mixin cursor-grab {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n\n@mixin cursor-grabbing {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n\n@mixin backface-visibility($value) {\n  -webkit-backface-visibility: $value;\n  backface-visibility: $value;\n}\n/* stylelint-enable */\n\n// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.\n@mixin mat-fill {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n}\n\n\n\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\n */\n@mixin mat-option() {\n  .mat-option {\n    @include mat-menu-item-base();\n    position: relative;\n    cursor: pointer;\n    outline: none;\n\n    &[aria-disabled='true'] {\n      @include user-select(none);\n      cursor: default;\n    }\n\n    .mat-optgroup &:not(.mat-option-multiple) {\n      padding-left: $mat-menu-side-padding * 2;\n\n      [dir='rtl'] & {\n        padding-left: $mat-menu-side-padding;\n        padding-right: $mat-menu-side-padding * 2;\n      }\n    }\n  }\n\n  // Collapses unwanted whitespace created by newlines in code like the following:\n  // <mat-option>\n  //   {{value}}\n  // </mat-option>\n  .mat-option-text {\n    display: inline-block;\n  }\n\n  .mat-option-ripple {\n    @include mat-fill;\n\n    // Disable pointer events for the ripple container because the container will overlay the\n    // user content and we don't want to disable mouse events on the user content.\n    // Pointer events can be safely disabled because the ripple trigger element is the host element.\n    pointer-events: none;\n\n    // Prevents the ripple from completely covering the option in high contrast mode.\n    @include cdk-high-contrast {\n      opacity: 0.5;\n    }\n  }\n\n  .mat-option-pseudo-checkbox {\n    $margin: $mat-menu-side-padding / 2;\n    margin-right: $margin;\n\n    [dir='rtl'] & {\n      margin-left: $margin;\n      margin-right: 0;\n    }\n  }\n}\n\n\n\n\n// Utility for fetching a nested value from a typography config.\n@function _mat-get-type-value($config, $level, $name) {\n  @return map-get(map-get($config, $level), $name);\n}\n\n// Gets the font size for a level inside a typography config.\n@function mat-font-size($config, $level) {\n  @return _mat-get-type-value($config, $level, font-size);\n}\n\n// Gets the line height for a level inside a typography config.\n@function mat-line-height($config, $level) {\n  @return _mat-get-type-value($config, $level, line-height);\n}\n\n// Gets the font weight for a level inside a typography config.\n@function mat-font-weight($config, $level) {\n  @return _mat-get-type-value($config, $level, font-weight);\n}\n\n// Gets the font-family from a typography config and removes the quotes around it.\n@function mat-font-family($config, $level: null) {\n  $font-family: map-get($config, font-family);\n\n  @if $level != null {\n    $font-family: _mat-get-type-value($config, $level, font-family);\n  }\n\n  @return unquote($font-family);\n}\n\n// Converts a typography level into CSS styles.\n@mixin mat-typography-level-to-styles($config, $level) {\n  $font-size: mat-font-size($config, $level);\n  $font-weight: mat-font-weight($config, $level);\n  $line-height: mat-line-height($config, $level);\n  $font-family: mat-font-family($config, $level);\n\n  // Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that\n  // we need to use interpolation for `font-size/line-height` in order to prevent SASS from dividing\n  // the two values.\n  font: $font-weight #{$font-size}/#{$line-height} $font-family;\n}\n\n\n@mixin mat-option-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n  $primary: map-get($theme, primary);\n  $accent: map-get($theme, accent);\n  $warn: map-get($theme, warn);\n\n  .mat-option {\n    color: mat-color($foreground, text);\n\n    &:hover:not(.mat-option-disabled),\n    &:focus:not(.mat-option-disabled) {\n      background: mat-color($background, hover);\n    }\n\n    .mat-primary &.mat-selected:not(.mat-option-disabled) {\n      color: mat-color($primary);\n    }\n\n    .mat-accent &.mat-selected:not(.mat-option-disabled) {\n      color: mat-color($accent);\n    }\n\n    .mat-warn &.mat-selected:not(.mat-option-disabled) {\n      color: mat-color($warn);\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: mat-color($background, hover);\n    }\n\n    &.mat-active {\n      background: mat-color($background, hover);\n      color: mat-color($foreground, text);\n    }\n\n    &.mat-option-disabled {\n      color: mat-color($foreground, hint-text);\n    }\n  }\n}\n\n@mixin mat-option-typography($config) {\n  .mat-option {\n    font: {\n      family: mat-font-family($config, subheading-2);\n      size: mat-font-size($config, subheading-2);\n    }\n  }\n}\n\n\n\n\n@mixin mat-optgroup() {\n  .mat-optgroup-label {\n    @include mat-menu-item-base();\n    @include user-select(none);\n    cursor: default;\n  }\n}\n\n\n\n\n\n@mixin mat-optgroup-theme($theme) {\n  $foreground: map-get($theme, foreground);\n\n  .mat-optgroup-label {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-optgroup-disabled .mat-optgroup-label {\n    color: mat-color($foreground, hint-text);\n  }\n}\n\n@mixin mat-optgroup-typography($config) {\n  .mat-optgroup-label {\n    @include mat-typography-level-to-styles($config, body-2);\n  }\n}\n\n\n\n@mixin mat-pseudo-checkbox-theme($theme) {\n  $is-dark-theme: map-get($theme, is-dark);\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\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 {\n    color: mat-color(map-get($theme, foreground), secondary-text);\n\n    &::after {\n      color: mat-color($background, background);\n    }\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.\n  .mat-pseudo-checkbox-checked,\n  .mat-pseudo-checkbox-indeterminate,\n  .mat-accent .mat-pseudo-checkbox-checked,\n  .mat-accent .mat-pseudo-checkbox-indeterminate {\n    background: mat-color(map-get($theme, accent));\n  }\n\n  .mat-primary .mat-pseudo-checkbox-checked,\n  .mat-primary .mat-pseudo-checkbox-indeterminate {\n    background: mat-color(map-get($theme, primary));\n  }\n\n  .mat-warn .mat-pseudo-checkbox-checked,\n  .mat-warn .mat-pseudo-checkbox-indeterminate {\n    background: mat-color(map-get($theme, warn));\n  }\n\n  .mat-pseudo-checkbox-checked,\n  .mat-pseudo-checkbox-indeterminate {\n    &.mat-pseudo-checkbox-disabled {\n      background: $disabled-color;\n    }\n  }\n}\n\n\n\n// Represents a typography level from the Material design spec.\n@function mat-typography-level(\n  $font-size,\n  $line-height: $font-size,\n  $font-weight: 400,\n  $font-family: null) {\n\n  @return (\n    font-size: $font-size,\n    line-height: $line-height,\n    font-weight: $font-weight,\n    font-family: $font-family\n  );\n}\n\n// Represents a collection of typography levels.\n// Defaults come from https://material.io/guidelines/style/typography.html\n@function mat-typography-config(\n  $font-family:   'Roboto, \"Helvetica Neue\", sans-serif',\n  $display-4:     mat-typography-level(112px, 112px, 300),\n  $display-3:     mat-typography-level(56px, 56px, 400),\n  $display-2:     mat-typography-level(45px, 48px, 400),\n  $display-1:     mat-typography-level(34px, 40px, 400),\n  $headline:      mat-typography-level(24px, 32px, 400),\n  $title:         mat-typography-level(20px, 32px, 500),\n  $subheading-2:  mat-typography-level(16px, 28px, 400),\n  $subheading-1:  mat-typography-level(15px, 24px, 400),\n  $body-2:        mat-typography-level(14px, 24px, 500),\n  $body-1:        mat-typography-level(14px, 20px, 400),\n  $caption:       mat-typography-level(12px, 20px, 400),\n  $button:        mat-typography-level(14px, 14px, 500),\n  // Line-height must be unit-less fraction of the font-size.\n  $input:         mat-typography-level(16px, 1.125, 400)\n) {\n\n  // Declare an initial map with all of the levels.\n  $config: (\n    display-4:      $display-4,\n    display-3:      $display-3,\n    display-2:      $display-2,\n    display-1:      $display-1,\n    headline:       $headline,\n    title:          $title,\n    subheading-2:   $subheading-2,\n    subheading-1:   $subheading-1,\n    body-2:         $body-2,\n    body-1:         $body-1,\n    caption:        $caption,\n    button:         $button,\n    input:          $input,\n  );\n\n  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.\n  // Note that SASS can't modify maps in place, which means that we need to merge and re-assign.\n  @each $key, $level in $config {\n    @if map-get($level, font-family) == null {\n      $new-level: map-merge($level, (font-family: $font-family));\n      $config: map-merge($config, ($key: $new-level));\n    }\n  }\n\n  // Add the base font family to the config.\n  @return map-merge($config, (font-family: $font-family));\n}\n\n// Adds the base typography styles, based on a config.\n@mixin mat-base-typography($config, $selector: '.mat-typography') {\n  .mat-h1, .mat-headline, #{$selector} h1 {\n    @include mat-typography-level-to-styles($config, headline);\n    margin: 0 0 16px;\n  }\n\n  .mat-h2, .mat-title, #{$selector} h2 {\n    @include mat-typography-level-to-styles($config, title);\n    margin: 0 0 16px;\n  }\n\n  .mat-h3, .mat-subheading-2, #{$selector} h3 {\n    @include mat-typography-level-to-styles($config, subheading-2);\n    margin: 0 0 16px;\n  }\n\n  .mat-h4, .mat-subheading-1, #{$selector} h4 {\n    @include mat-typography-level-to-styles($config, subheading-1);\n    margin: 0 0 16px;\n  }\n\n  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for\n  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em\n  // and h6 at 0.67em.\n  .mat-h5, #{$selector} h5 {\n    font-size: mat-font-size($config, body-1) * 0.83;\n    font-weight: mat-font-weight($config, body-1);\n    font-family: mat-font-family($config, body-1);\n    line-height: mat-line-height($config, body-1);\n    margin: 0 0 12px;\n  }\n\n  .mat-h6, #{$selector} h6 {\n    font-size: mat-font-size($config, body-1) * 0.67;\n    font-weight: mat-font-weight($config, body-1);\n    font-family: mat-font-family($config, body-1);\n    line-height: mat-line-height($config, body-1);\n    margin: 0 0 12px;\n  }\n\n  .mat-body-strong, .mat-body-2 {\n    @include mat-typography-level-to-styles($config, body-2);\n  }\n\n  .mat-body, .mat-body-1, #{$selector} {\n    @include mat-typography-level-to-styles($config, body-1);\n\n    p {\n      margin: 0 0 12px;\n    }\n  }\n\n  .mat-small, .mat-caption {\n    @include mat-typography-level-to-styles($config, caption);\n  }\n\n  // Note: The spec doesn't mention letter spacing. The value comes from\n  // eyeballing it until it looked exactly like the spec examples.\n  .mat-display-4, #{$selector} .mat-display-4 {\n    @include mat-typography-level-to-styles($config, display-4);\n    margin: 0 0 56px;\n    letter-spacing: -0.05em;\n  }\n\n  .mat-display-3, #{$selector} .mat-display-3 {\n    @include mat-typography-level-to-styles($config, display-3);\n    margin: 0 0 64px;\n    letter-spacing: -0.02em;\n  }\n\n  .mat-display-2, #{$selector} .mat-display-2 {\n    @include mat-typography-level-to-styles($config, display-2);\n    margin: 0 0 64px;\n    letter-spacing: -0.005em;\n  }\n\n  .mat-display-1, #{$selector} .mat-display-1 {\n    @include mat-typography-level-to-styles($config, display-1);\n    margin: 0 0 64px;\n  }\n}\n\n\n\n@mixin mat-autocomplete-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n\n  .mat-autocomplete-panel {\n    background: mat-color($background, card);\n    color: mat-color($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: mat-color($background, card);\n\n      &:not(.mat-option-disabled) {\n        color: mat-color($foreground, text);\n      }\n    }\n  }\n\n}\n\n@mixin mat-autocomplete-typography($config) { }\n\n\n\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _mat-button-focus-color($theme) {\n  $primary: map-get($theme, primary);\n  $accent: map-get($theme, accent);\n  $warn: map-get($theme, warn);\n\n  &.mat-primary .mat-button-focus-overlay {\n    background-color: mat-color($primary, 0.12);\n  }\n\n  &.mat-accent .mat-button-focus-overlay {\n    background-color: mat-color($accent, 0.12);\n  }\n\n  &.mat-warn .mat-button-focus-overlay {\n    background-color: mat-color($warn, 0.12);\n  }\n\n  &[disabled] .mat-button-focus-overlay {\n    background-color: transparent;\n  }\n}\n\n@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {\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    background-color: mat-color($primary, $hue, $opacity);\n  }\n\n  &.mat-accent .mat-ripple-element {\n    background-color: mat-color($accent, $hue, $opacity);\n  }\n\n  &.mat-warn .mat-ripple-element {\n    background-color: mat-color($warn, $hue, $opacity);\n  }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _mat-button-theme-color($theme, $property, $color: 'default') {\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}: mat-color($primary, $color);\n  }\n  &.mat-accent {\n    #{$property}: mat-color($accent, $color);\n  }\n  &.mat-warn {\n    #{$property}: mat-color($warn, $color);\n  }\n\n  &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {\n    &[disabled] {\n      $palette: if($property == 'color', $foreground, $background);\n      #{$property}: mat-color($palette, disabled-button);\n    }\n  }\n}\n\n@mixin mat-button-theme($theme) {\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-button, .mat-icon-button {\n    background: transparent;\n\n    @include _mat-button-focus-color($theme);\n    @include _mat-button-theme-color($theme, 'color');\n  }\n\n  .mat-raised-button, .mat-fab, .mat-mini-fab {\n    // Default properties when not using any [color] value.\n    color: mat-color($foreground, text);\n    background-color: mat-color($background, raised-button);\n\n    @include _mat-button-theme-color($theme, 'color', default-contrast);\n    @include _mat-button-theme-color($theme, 'background-color');\n\n    // Add ripple effect with contrast color to buttons that don't have a focus overlay.\n    @include _mat-button-ripple-color($theme, default-contrast);\n  }\n\n  // Add ripple effect with default color to flat buttons, which also have a focus overlay.\n  .mat-button {\n    @include _mat-button-ripple-color($theme, default, 0.1);\n  }\n\n  // Add ripple effect with default color to the icon button. Ripple color needs to be stronger\n  // since the icon button doesn't have a focus overlay.\n  .mat-icon-button {\n    @include _mat-button-ripple-color($theme, default);\n  }\n}\n\n@mixin mat-button-typography($config) {\n  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {\n    font: {\n      family: mat-font-family($config, button);\n      size: mat-font-size($config, button);\n      weight: mat-font-weight($config, button);\n    }\n  }\n}\n\n\n\n\n\n// Applies a focus style to an mat-button-toggle element for each of the supported palettes.\n@mixin _mat-button-toggle-focus-color($theme) {\n  $background: map-get($theme, background);\n\n  .mat-button-toggle-focus-overlay {\n    background-color: mat-color($background, focused-button);\n  }\n}\n\n@mixin mat-button-toggle-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n\n  .mat-button-toggle {\n    color: mat-color($foreground, hint-text);\n\n    &.cdk-focused {\n      @include _mat-button-toggle-focus-color($theme);\n    }\n  }\n\n  .mat-button-toggle-checked {\n    background-color: mat-color($background, selected-button);\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-button-toggle-disabled {\n    background-color: mat-color($background, disabled-button-toggle);\n    color: mat-color($foreground, disabled-button);\n\n    &.mat-button-toggle-checked {\n      background-color: mat-color($background, selected-disabled-button);\n    }\n  }\n}\n\n@mixin mat-button-toggle-typography($config) {\n  .mat-button-toggle {\n    font-family: mat-font-family($config);\n  }\n}\n\n\n\n\n\n\n@mixin mat-card-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-card {\n    background: mat-color($background, card);\n    color: mat-color($foreground, text);\n  }\n\n  .mat-card-subtitle {\n    color: mat-color($foreground, secondary-text);\n  }\n}\n\n@mixin mat-card-typography($config) {\n  .mat-card {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-card-title {\n    font: {\n      size: mat-font-size($config, headline);\n      weight: mat-font-weight($config, headline);\n    }\n  }\n\n  .mat-card-subtitle,\n  .mat-card-content,\n  .mat-card-header .mat-card-title {\n    font-size: mat-font-size($config, body-1);\n  }\n}\n\n\n\n\n\n@mixin mat-checkbox-theme($theme) {\n  $is-dark-theme: map-get($theme, is-dark);\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\n\n  // The color of the checkbox's checkmark / mixedmark.\n  $checkbox-mark-color: mat-color($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: mat-color(map-get($theme, 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 attribute on the SVG in order\n    // 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: mat-color($primary);\n    }\n\n    &.mat-accent .mat-checkbox-background {\n      background-color: mat-color($accent);\n    }\n\n    &.mat-warn .mat-checkbox-background {\n      background-color: mat-color($warn);\n    }\n  }\n\n  .mat-checkbox-disabled {\n    &.mat-checkbox-checked, &.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: $disabled-color;\n    }\n  }\n\n  .mat-checkbox:not(.mat-checkbox-disabled) {\n    &.mat-primary .mat-checkbox-ripple .mat-ripple-element {\n      background-color: mat-color($primary, 0.26);\n    }\n\n    &.mat-accent .mat-checkbox-ripple .mat-ripple-element {\n      background-color: mat-color($accent, 0.26);\n    }\n\n    &.mat-warn .mat-checkbox-ripple .mat-ripple-element {\n      background-color: mat-color($warn, 0.26);\n    }\n  }\n}\n\n@mixin mat-checkbox-typography($config) {\n  .mat-checkbox {\n    font-family: mat-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: mat-line-height($config, body-2);\n  }\n}\n\n\n\n\n\n// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.\n$mat-chip-font-size: 13px;\n$mat-chip-line-height: 18px;\n$mat-chip-remove-font-size: 18px;\n\n@mixin mat-chips-theme-color($color) {\n  @include mat-chips-color(mat-color($color, default-contrast), mat-color($color));\n}\n\n@mixin mat-chips-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  .mat-chip-remove:hover {\n    opacity: 0.54;\n  }\n}\n\n@mixin mat-chips-theme($theme) {\n  $is-dark-theme: map-get($theme, is-dark);\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  $unselected-background: mat-color($background, unselected-chip);\n  $unselected-foreground: mat-color($foreground, text);\n\n\n  .mat-chip:not(.mat-basic-chip) {\n    @include mat-chips-color($unselected-foreground, $unselected-background);\n  }\n\n  .mat-chip.mat-chip-selected {\n\n    &.mat-primary {\n      @include mat-chips-theme-color($primary);\n    }\n\n    &.mat-warn {\n      @include mat-chips-theme-color($warn);\n    }\n\n    &.mat-accent {\n      @include mat-chips-theme-color($accent);\n    }\n  }\n}\n\n@mixin mat-chips-typography($config) {\n  .mat-chip {\n    font-size: $mat-chip-font-size;\n    line-height: $mat-chip-line-height;\n\n    .mat-chip-remove.mat-icon {\n      font-size: $mat-chip-remove-font-size;\n    }\n  }\n}\n\n\n\n\n\n@mixin mat-table-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-table {\n    background: mat-color($background, 'card');\n  }\n\n  .mat-row, .mat-header-row {\n    border-bottom-color: mat-color($foreground, divider);\n  }\n\n  .mat-header-cell {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-cell {\n    color: mat-color($foreground, text);\n  }\n}\n\n@mixin mat-table-typography($config) {\n  .mat-table {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-header-cell {\n    font-size: mat-font-size($config, caption);\n    font-weight: mat-font-weight($config, body-2);\n  }\n\n  .mat-cell {\n    font-size: mat-font-size($config, body-1);\n  }\n}\n\n\n\n\n\n\n$mat-calendar-body-font-size: 13px !default;\n$mat-calendar-weekday-table-font-size: 11px !default;\n\n\n@mixin mat-datepicker-theme($theme) {\n  $primary: map-get($theme, primary);\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n\n  $mat-datepicker-selected-today-box-shadow-width: 1px;\n  $mat-datepicker-selected-fade-amount: 0.6;\n  $mat-datepicker-today-fade-amount: 0.2;\n\n  .mat-datepicker-content {\n    background-color: mat-color($background, card);\n    color: mat-color($foreground, text);\n  }\n\n  .mat-calendar-arrow {\n    border-top-color: mat-color($foreground, icon);\n  }\n\n  .mat-calendar-next-button,\n  .mat-calendar-previous-button {\n    color: mat-color($foreground, icon);\n  }\n\n  .mat-calendar-table-header {\n    color: mat-color($foreground, hint-text);\n  }\n\n  .mat-calendar-table-header-divider::after {\n    background: mat-color($foreground, divider);\n  }\n\n  .mat-calendar-body-label {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-calendar-body-cell-content {\n    color: mat-color($foreground, text);\n    border-color: transparent;\n\n    .mat-calendar-body-disabled > &:not(.mat-calendar-body-selected) {\n      color: mat-color($foreground, disabled-text);\n    }\n  }\n\n  :not(.mat-calendar-body-disabled):hover,\n  .cdk-keyboard-focused .mat-calendar-body-active,\n  .cdk-program-focused .mat-calendar-body-active {\n    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n      background-color: mat-color($background, hover);\n    }\n  }\n\n  .mat-calendar-body-selected {\n    background-color: mat-color($primary);\n    color: mat-color($primary, default-contrast);\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-selected {\n    background-color: fade-out(mat-color($primary), $mat-datepicker-selected-fade-amount);\n  }\n\n  .mat-calendar-body-today {\n    &:not(.mat-calendar-body-selected) {\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: mat-color($foreground, hint-text);\n    }\n\n    &.mat-calendar-body-selected {\n      box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width\n                  mat-color($primary, default-contrast);\n    }\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n    border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);\n  }\n}\n\n@mixin mat-datepicker-typography($config) {\n  .mat-calendar {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-calendar-body {\n    font-size: $mat-calendar-body-font-size;\n  }\n\n  .mat-calendar-body-label,\n  .mat-calendar-period-button {\n    font: {\n      size: mat-font-size($config, button);\n      weight: mat-font-weight($config, button);\n    }\n  }\n\n  .mat-calendar-table-header th {\n    font: {\n      size: $mat-calendar-weekday-table-font-size;\n      weight: mat-font-weight($config, body-1);\n    }\n  }\n}\n\n\n\n\n\n\n@mixin mat-dialog-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-dialog-container {\n    background: mat-color($background, dialog);\n    color: mat-color($foreground, text);\n  }\n}\n\n@mixin mat-dialog-typography($config) {\n  .mat-dialog-title {\n    @include mat-typography-level-to-styles($config, title);\n  }\n}\n\n\n\n\n\n@mixin mat-expansion-panel-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-expansion-panel {\n    background: mat-color($background, card);\n    color: mat-color($foreground, text);\n  }\n\n  .mat-action-row {\n    border-top-color: mat-color($foreground, divider);\n  }\n\n  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {\n    &:not([aria-disabled='true']) {\n      &.cdk-keyboard-focused,\n      &.cdk-program-focused,\n      &:hover {\n        background: mat-color($background, hover);\n      }\n    }\n  }\n\n  .mat-expansion-panel-header-title {\n    color: mat-color($foreground, text);\n  }\n\n  .mat-expansion-panel-header-description,\n  .mat-expansion-indicator::after {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-expansion-panel-header[aria-disabled='true'] {\n    color: mat-color($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 mat-expansion-panel-typography($config) {\n  .mat-expansion-panel-header {\n    font: {\n      family: mat-font-family($config, subheading-1);\n      size: mat-font-size($config, subheading-1);\n      weight: mat-font-weight($config, subheading-1);\n    }\n  }\n\n  .mat-expansion-panel-content {\n    @include mat-typography-level-to-styles($config, body-1);\n  }\n}\n\n\n\n\n\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-grid-list-theme($theme) { }\n\n@mixin mat-grid-list-typography($config) {\n  .mat-grid-tile-header,\n  .mat-grid-tile-footer {\n    @include mat-line-base(mat-font-size($config, caption));\n    font-size: mat-font-size($config, body-1);\n  }\n}\n\n\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-icon-theme($theme) {\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-icon {\n    &.mat-primary {\n      color: mat-color($primary);\n    }\n\n    &.mat-accent {\n      color: mat-color($accent);\n    }\n\n    &.mat-warn {\n      color: mat-color($warn);\n    }\n  }\n}\n\n@mixin mat-icon-typography($config) { }\n\n\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 mat-control-disabled-underline($color) {\n  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);\n  background-size: 4px 1px;\n  background-repeat: repeat-x;\n}\n\n\n\n\n@mixin mat-input-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $is-dark-theme: map-get($theme, is-dark);\n\n  .mat-input-element:disabled {\n    color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));\n  }\n}\n\n@mixin mat-input-typography($config) {\n  // The unit-less line-height from the font config.\n  $line-height: mat-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: ($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: -$line-spacing * 1em;\n  }\n}\n\n\n\n\n\n\n\n@mixin mat-list-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-list, .mat-nav-list, .mat-selection-list {\n    .mat-list-item {\n      color: mat-color($foreground, text);\n    }\n\n    .mat-list-option {\n      color: mat-color($foreground, text);\n    }\n\n    .mat-subheader {\n      color: mat-color($foreground, secondary-text);\n    }\n  }\n\n  .mat-list-item-disabled {\n    background-color: mat-color($background, disabled-list-option);\n  }\n\n  .mat-divider {\n    border-top-color: mat-color($foreground, divider);\n  }\n\n  .mat-nav-list .mat-list-item {\n    outline: none;\n\n    &:hover, &.mat-list-item-focus {\n      background: mat-color($background, 'hover');\n    }\n  }\n\n  .mat-list-option {\n    outline: none;\n\n    &:hover, &.mat-list-item-focus {\n      background: mat-color($background, 'hover');\n    }\n  }\n}\n\n@mixin mat-list-typography($config) {\n  $font-family: mat-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, .mat-nav-list, .mat-selection-list {\n    .mat-list-item {\n      font-size: mat-font-size($config, subheading-2);\n      @include mat-line-base(mat-font-size($config, body-1));\n    }\n\n    .mat-list-option {\n      font-size: mat-font-size($config, subheading-2);\n      @include mat-line-base(mat-font-size($config, body-1));\n    }\n\n    .mat-subheader {\n      font-family: mat-font-family($config, body-2);\n      font-size: mat-font-size($config, body-2);\n      font-weight: mat-font-weight($config, body-2);\n    }\n  }\n\n  // Dense list\n  .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {\n    .mat-list-item {\n      font-size: mat-font-size($config, caption);\n      @include mat-line-base(mat-font-size($config, caption));\n    }\n\n    .mat-list-option {\n      font-size: mat-font-size($config, caption);\n      @include mat-line-base(mat-font-size($config, caption));\n    }\n\n    .mat-subheader {\n      font-family: $font-family;\n      font-size: mat-font-size($config, caption);\n      font-weight: mat-font-weight($config, body-2);\n    }\n  }\n}\n\n\n\n\n\n\n@mixin mat-menu-theme($theme) {\n  $background: map-get($theme, background);\n  $foreground: map-get($theme, foreground);\n\n  .mat-menu-panel {\n    background: mat-color($background, 'card');\n  }\n\n  .mat-menu-item {\n    background: transparent;\n    color: mat-color($foreground, 'text');\n\n    &[disabled] {\n      color: mat-color($foreground, 'disabled');\n    }\n  }\n\n  .mat-menu-item .mat-icon,\n  .mat-menu-item-submenu-trigger::after {\n    color: mat-color($foreground, 'icon');\n  }\n\n  .mat-menu-item:hover,\n  .mat-menu-item:focus,\n  .mat-menu-item-highlighted {\n    &:not([disabled]) {\n      background: mat-color($background, 'hover');\n    }\n  }\n}\n\n@mixin mat-menu-typography($config) {\n  .mat-menu-item {\n    font: {\n      family: mat-font-family($config, subheading-2);\n      size: mat-font-size($config, subheading-2);\n      weight: mat-font-weight($config, subheading-2);\n    }\n  }\n}\n\n\n\n\n\n\n@mixin mat-paginator-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n\n  .mat-paginator {\n    background: mat-color($background, 'card');\n  }\n\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-paginator-increment,\n  .mat-paginator-decrement {\n    border-top: 2px solid mat-color($foreground, 'icon');\n    border-right: 2px solid mat-color($foreground, 'icon');\n  }\n\n  .mat-icon-button[disabled] {\n    .mat-paginator-increment,\n    .mat-paginator-decrement {\n      border-color: mat-color($foreground, 'disabled');\n    }\n  }\n}\n\n@mixin mat-paginator-typography($config) {\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    font: {\n      family: mat-font-family($config, caption);\n      size: mat-font-size($config, caption);\n    }\n  }\n}\n\n\n\n\n\n@mixin mat-progress-bar-theme($theme) {\n  $primary: map-get($theme, primary);\n  $accent: map-get($theme, accent);\n  $warn: map-get($theme, warn);\n\n  .mat-progress-bar-background {\n    background-image: #{_mat-progress-bar-buffer($primary, lighter)};\n  }\n\n  .mat-progress-bar-buffer {\n    background-color: mat-color($primary, lighter);\n  }\n\n  .mat-progress-bar-fill::after {\n    background-color: mat-color($primary);\n  }\n\n  .mat-progress-bar.mat-accent {\n    .mat-progress-bar-background {\n      background-image: #{_mat-progress-bar-buffer($accent, lighter)};\n    }\n\n    .mat-progress-bar-buffer {\n      background-color: mat-color($accent, lighter);\n    }\n\n    .mat-progress-bar-fill::after {\n      background-color: mat-color($accent);\n    }\n  }\n\n  .mat-progress-bar.mat-warn {\n    .mat-progress-bar-background {\n      background-image: #{_mat-progress-bar-buffer($warn, lighter)};\n    }\n\n    .mat-progress-bar-buffer {\n      background-color: mat-color($warn, lighter);\n    }\n\n    .mat-progress-bar-fill::after {\n      background-color: mat-color($warn);\n    }\n  }\n}\n\n@mixin mat-progress-bar-typography($config) { }\n\n// TODO(josephperrott): Find better way to inline svgs.\n// In buffer mode a repeated SVG object is used as a background.\n// Each of the following defines the SVG object for each of the class defined colors.\n//\n// The string is a URL encoded version of:\n//\n// <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n//      version=\"1.1\" x=\"0px\" y=\"0px\" enable-background=\"new 0 0 5 2\"\n//      xml:space=\"preserve\" viewBox=\"0 0 5 2\" preserveAspectRatio=\"none slice\">\n//   <circle cx=\"1\" cy=\"1\" r=\"1\" fill=\"{INJECTED_COLOR}\"/>\n// </svg>\n@function _mat-progress-bar-buffer($palette, $hue) {\n  $color: mat-color($palette, $hue) + '';\n\n  // We also need to escape the hash in hex colors,\n  // otherwise IE will throw an XML error.\n  @if str-index($color, '#') == 1 {\n    $color: '%23' + str-slice($color, 2);\n  }\n\n  $result: '' +\n    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +\n    'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +\n    '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +\n    '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +\n    '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +\n    $color + '%27%2F%3E%3C%2Fsvg%3E';\n\n  @return url($result);\n}\n\n\n\n\n\n@mixin mat-progress-spinner-theme($theme) {\n  $primary: map-get($theme, primary);\n  $accent: map-get($theme, accent);\n  $warn: map-get($theme, warn);\n\n  .mat-progress-spinner, .mat-spinner {\n    circle {\n      stroke: mat-color($primary);\n    }\n\n    &.mat-accent circle {\n      stroke: mat-color($accent);\n    }\n\n    &.mat-warn circle {\n      stroke: mat-color($warn);\n    }\n  }\n}\n\n@mixin mat-progress-spinner-typography($config) { }\n\n\n\n\n\n@mixin mat-radio-color($palette) {\n  &.mat-radio-checked .mat-radio-outer-circle {\n    border-color: mat-color($palette);\n  }\n\n  .mat-radio-inner-circle {\n    background-color: mat-color($palette);\n  }\n\n  .mat-radio-ripple .mat-ripple-element {\n    background-color: mat-color($palette, 0.26);\n  }\n}\n\n@mixin mat-radio-theme($theme) {\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-radio-outer-circle {\n    border-color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-radio-disabled .mat-radio-outer-circle {\n    border-color: mat-color($foreground, disabled);\n  }\n\n  .mat-radio-disabled {\n    .mat-radio-ripple .mat-ripple-element, .mat-radio-inner-circle {\n      background-color: mat-color($foreground, disabled);\n    }\n\n    .mat-radio-label-content {\n      color: mat-color($foreground, disabled);\n    }\n  }\n\n  .mat-radio-button {\n    &.mat-primary {\n      @include mat-radio-color($primary);\n    }\n\n    &.mat-accent {\n      @include mat-radio-color($accent);\n    }\n\n    &.mat-warn {\n      @include mat-radio-color($warn);\n    }\n  }\n}\n\n@mixin mat-radio-typography($config) {\n  .mat-radio-button {\n    font-family: mat-font-family($config);\n  }\n}\n\n\n\n\n\n\n\n@mixin mat-select-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n  $primary: map-get($theme, primary);\n  $accent: map-get($theme, accent);\n  $warn: map-get($theme, warn);\n  $is-dark-theme: map-get($theme, is-dark);\n\n  .mat-select-disabled .mat-select-value,\n  .mat-select-arrow {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-select-content, .mat-select-panel-done-animating {\n    background: mat-color($background, card);\n  }\n\n  .mat-select-value {\n    color: mat-color($foreground, text);\n  }\n\n  .mat-select-panel {\n    .mat-option.mat-selected:not(.mat-option-multiple) {\n      background: mat-color($background, hover, 0.12);\n    }\n  }\n\n  .mat-form-field {\n    &.mat-focused {\n      &.mat-primary .mat-select-arrow {\n        color: mat-color($primary);\n      }\n\n      &.mat-accent .mat-select-arrow {\n        color: mat-color($accent);\n      }\n\n      &.mat-warn .mat-select-arrow {\n        color: mat-color($warn);\n      }\n    }\n\n    .mat-select.mat-select-invalid .mat-select-arrow {\n      color: mat-color($warn);\n    }\n\n    .mat-select.mat-select-disabled .mat-select-arrow {\n      color: mat-color($foreground, secondary-text);\n    }\n  }\n\n  .mat-select.mat-select-disabled .mat-select-arrow {\n    color: mat-color($warn);\n  }\n}\n\n@mixin mat-select-typography($config) {\n  // The unit-less line-height from the font config.\n  $line-height: mat-line-height($config, input);\n\n  .mat-select {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-select-trigger {\n    height: $line-height * 1em;\n  }\n}\n\n\n\n\n\n@mixin mat-sidenav-theme($theme) {\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  // 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  $drawer-backdrop-color: invert(mat-color($background, card, 0.6)) !default;\n  $drawer-background-color: mat-color($background, dialog) !default;\n  $drawer-container-background-color:  mat-color($background, background) !default;\n  $drawer-push-background-color: mat-color($background, dialog) !default;\n\n  .mat-drawer-container {\n    background-color: $drawer-container-background-color;\n    color: mat-color($foreground, text);\n  }\n\n  .mat-drawer {\n    background-color: $drawer-background-color;\n    color: mat-color($foreground, text);\n\n    &.mat-drawer-push {\n      background-color: $drawer-push-background-color;\n    }\n  }\n\n  .mat-drawer-backdrop.mat-drawer-shown {\n    background-color: $drawer-backdrop-color;\n  }\n}\n\n@mixin mat-sidenav-typography($config) { }\n\n\n\n\n\n@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {\n  // Do not apply the checked colors if the toggle is disabled, because the\n  // specificity would be to high for the disabled styles.\n  &.mat-checked:not(.mat-disabled) {\n    .mat-slide-toggle-thumb {\n      background-color: mat-color($palette, $thumb-checked-hue);\n    }\n\n    .mat-slide-toggle-bar {\n      background-color: mat-color($palette, $thumb-checked-hue, 0.5);\n    }\n  }\n}\n\n// Applies the specified colors to the slide-toggle ripple elements.\n@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {\n  &:not(.mat-checked) .mat-ripple-element {\n    background-color: $ripple-unchecked-color;\n  }\n  .mat-ripple-element {\n    background-color: $ripple-checked-color;\n  }\n}\n\n@mixin mat-slide-toggle-theme($theme) {\n  $is-dark: map_get($theme, is-dark);\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  // Color hues based on the specs, which prescribe different hues for dark and light themes\n  // https://material.google.com/components/selection-controls.html#selection-controls-switch\n  $thumb-normal-hue: if($is-dark, 400, 50);\n  $thumb-checked-hue: if($is-dark, 200, 500);\n  $thumb-disabled-hue: if($is-dark, 800, 400);\n\n  $bar-normal-color: mat-color($foreground, disabled);\n  $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));\n\n  // Ripple colors are based on the current palette and the state of the slide-toggle.\n  // See https://material.google.com/components/selection-controls.html#selection-controls-switch\n  $ripple-checked-opacity: 0.12;\n  $ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06));\n  $ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity);\n  $ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity);\n  $ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity);\n\n  .mat-slide-toggle {\n    @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);\n    @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);\n\n    &.mat-primary {\n      @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);\n      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);\n    }\n\n    &.mat-warn {\n      @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);\n      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);\n    }\n\n  }\n\n  .mat-disabled {\n    .mat-slide-toggle-thumb {\n      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark\n      // or light themes. Since this is very specific to the slide-toggle component, we're not\n      // providing it in the background palette.\n      background-color: mat-color($mat-grey, $thumb-disabled-hue);\n    }\n    .mat-slide-toggle-bar {\n      background-color: $bar-disabled-color;\n    }\n  }\n\n  .mat-slide-toggle-thumb {\n    background-color: mat-color($mat-grey, $thumb-normal-hue);\n  }\n\n  .mat-slide-toggle-bar {\n    background-color: $bar-normal-color;\n  }\n}\n\n@mixin mat-slide-toggle-typography($config) {\n  .mat-slide-toggle-content {\n    @include mat-typography-level-to-styles($config, body-1);\n  }\n}\n\n\n\n\n\n@mixin _mat-slider-inner-content-theme($palette) {\n  .mat-slider-track-fill,\n  .mat-slider-thumb,\n  .mat-slider-thumb-label {\n    background-color: mat-color($palette);\n  }\n\n  .mat-slider-thumb-label-text {\n    color: mat-color($palette, default-contrast);\n  }\n}\n\n@mixin mat-slider-theme($theme) {\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-slider-off-color: mat-color($foreground, slider-off);\n  $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);\n  $mat-slider-disabled-color: mat-color($foreground, slider-off);\n  $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);\n  $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);\n  $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);\n  $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);\n  $mat-slider-tick-color: mat-color($foreground, base, 0.7);\n  $mat-slider-tick-size: 2px;\n\n  .mat-slider-track-background {\n    background-color: $mat-slider-off-color;\n  }\n\n  .mat-primary {\n    @include _mat-slider-inner-content-theme($primary);\n  }\n\n  .mat-accent {\n    @include _mat-slider-inner-content-theme($accent);\n  }\n\n  .mat-warn {\n    @include _mat-slider-inner-content-theme($warn);\n  }\n\n  .mat-slider-focus-ring {\n    background-color: $mat-slider-focus-ring-color;\n  }\n\n  .mat-slider:hover,\n  .cdk-focused {\n    .mat-slider-track-background {\n      background-color: $mat-slider-off-focused-color;\n    }\n  }\n\n  .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-min-value {\n    .mat-slider-focus-ring {\n      background-color: $mat-slider-focus-ring-min-value-color;\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\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\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}\n\n@mixin mat-slider-typography($config) {\n  .mat-slider-thumb-label-text {\n    font: {\n      family: mat-font-family($config);\n      size: mat-font-size($config, caption);\n      weight: mat-font-weight($config, body-2);\n    }\n  }\n}\n\n\n\n\n\n@mixin mat-stepper-theme($theme) {\n  $foreground: map-get($theme, foreground);\n  $background: map-get($theme, background);\n  $primary: map-get($theme, primary);\n\n  .mat-step-header {\n    &.cdk-keyboard-focused,\n    &.cdk-program-focused,\n    &:hover {\n      background-color: mat-color($background, hover);\n    }\n\n    .mat-step-label,\n    .mat-step-optional {\n      color: mat-color($foreground, disabled-text);\n    }\n\n    .mat-step-icon {\n      background-color: mat-color($primary);\n      color: mat-color($primary, default-contrast);\n    }\n\n    .mat-step-icon-not-touched {\n      background-color: mat-color($foreground, disabled-text);\n      color: mat-color($primary, default-contrast);\n    }\n\n    .mat-step-label.mat-step-label-active {\n      color: mat-color($foreground, text);\n    }\n  }\n\n  .mat-stepper-horizontal, .mat-stepper-vertical {\n    background-color: mat-color($background, card);\n  }\n\n  .mat-stepper-vertical-line::before {\n    border-left-color: mat-color($foreground, divider);\n  }\n\n  .mat-stepper-horizontal-line {\n    border-top-color: mat-color($foreground, divider);\n  }\n}\n\n@mixin mat-stepper-typography($config) {\n  .mat-stepper-vertical, .mat-stepper-horizontal {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-step-label {\n    font: {\n      size: mat-font-size($config, body-1);\n      weight: mat-font-weight($config, body-1);\n    };\n  }\n\n  .mat-step-label-selected {\n    font: {\n      size: mat-font-size($config, body-2);\n      weight: mat-font-weight($config, body-2);\n    };\n  }\n}\n\n\n\n\n\n@mixin mat-tabs-theme($theme) {\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  $header-border: 1px solid mat-color($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: mat-color($foreground, text);\n\n    &.mat-tab-disabled {\n      color: mat-color($foreground, disabled-text);\n    }\n  }\n\n  .mat-tab-header-pagination-chevron {\n    border-color: mat-color($foreground, text);\n  }\n\n  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    border-color: mat-color($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 _mat-tab-label-focus($color);\n        @include _mat-ink-bar($color);\n\n        // Override ink bar when background color is the same\n        &.mat-background-#{$name} {\n          @include _mat-ink-bar($color, default-contrast);\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 _mat-tab-label-focus($color);\n        @include _mat-tabs-background($color);\n      }\n    }\n  }\n}\n\n@mixin _mat-ink-bar($color, $hue: default) {\n  .mat-ink-bar {\n    background-color: mat-color($color, $hue);\n  }\n}\n\n@mixin _mat-tab-label-focus($tab-focus-color) {\n  .mat-tab-label:focus, .mat-tab-link:focus {\n    background-color: mat-color($tab-focus-color, lighter, 0.3);\n  }\n}\n\n@mixin _mat-tabs-background($background-color) {\n  // Set background color for the tab group\n  .mat-tab-header, .mat-tab-links {\n    background-color: mat-color($background-color);\n  }\n\n  // Set labels to contrast against background\n  .mat-tab-label, .mat-tab-link {\n    color: mat-color($background-color, default-contrast);\n\n    &.mat-tab-disabled {\n      color: mat-color($background-color, default-contrast, 0.4);\n    }\n  }\n\n  // Set pagination chevrons to contrast background\n  .mat-tab-header-pagination-chevron {\n    border-color: mat-color($background-color, default-contrast);\n  }\n\n  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    border-color: mat-color($background-color, default-contrast, 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-ripple-element {\n    background-color: mat-color($background-color, default-contrast, 0.12);\n  }\n}\n\n@mixin mat-tabs-typography($config) {\n  .mat-tab-group {\n    font-family: mat-font-family($config);\n  }\n\n  .mat-tab-label, .mat-tab-link {\n    font: {\n      family: mat-font-family($config, button);\n      size: mat-font-size($config, button);\n      weight: mat-font-weight($config, button);\n    }\n  }\n}\n\n\n\n\n\n\n@mixin _mat-toolbar-color($palette) {\n  background: mat-color($palette);\n  color: mat-color($palette, default-contrast);\n}\n\n@mixin mat-toolbar-theme($theme) {\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-toolbar {\n    background: mat-color($background, app-bar);\n    color: mat-color($foreground, text);\n\n    &.mat-primary {\n      @include _mat-toolbar-color($primary);\n    }\n\n    &.mat-accent {\n      @include _mat-toolbar-color($accent);\n    }\n\n    &.mat-warn {\n      @include _mat-toolbar-color($warn);\n    }\n  }\n}\n\n@mixin mat-toolbar-typography($config) {\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 mat-typography-level-to-styles($config, title);\n    margin: 0;\n  }\n}\n\n\n\n\n\n// TODO(crisbeto): these doesn't correspond to any typography levels\n// and the width/height appear to be off from the spec.\n$mat-tooltip-target-height: 22px;\n$mat-tooltip-font-size: 10px;\n$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;\n\n@mixin mat-tooltip-theme($theme) {\n  .mat-tooltip {\n    background: mat-color($mat-grey, 700, 0.9);\n  }\n}\n\n@mixin mat-tooltip-typography($config) {\n  .mat-tooltip {\n    font-family: mat-font-family($config);\n    font-size: $mat-tooltip-font-size;\n    padding-top: $mat-tooltip-vertical-padding;\n    padding-bottom: $mat-tooltip-vertical-padding;\n  }\n}\n\n\n\n\n@mixin mat-snack-bar-theme($theme) {\n  $is-dark-theme: map-get($theme, is-dark);\n  $accent: map-get($theme, accent);\n\n  .mat-snack-bar-container {\n    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);\n    color: if($is-dark-theme, $black-87-opacity, white);\n  }\n\n  .mat-simple-snackbar-action {\n    color: if($is-dark-theme, inherit, mat-color($accent));\n  }\n}\n\n@mixin mat-snack-bar-typography($config) {\n  .mat-simple-snackbar {\n    font: {\n      family: mat-font-family($config, body-1);\n      size: mat-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: mat-font-weight($config, button);\n    }\n  }\n}\n\n\n\n\n\n\n\n\n\n@mixin mat-form-field-theme($theme) {\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  $is-dark-theme: map-get($theme, is-dark);\n\n  // Placeholder colors. Required is used for the `*` star shown in the placeholder.\n  $placeholder-color: mat-color($foreground, secondary-text);\n  $focused-placeholder-color: mat-color($primary);\n  $required-placeholder-color: mat-color($accent);\n\n  // Underline colors.\n  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n  $underline-color-accent: mat-color($accent);\n  $underline-color-warn: mat-color($warn);\n  $underline-focused-color: mat-color($primary);\n\n  .mat-form-field-placeholder {\n    color: $placeholder-color;\n  }\n\n  .mat-hint {\n    color: mat-color($foreground, secondary-text);\n  }\n\n  .mat-focused .mat-form-field-placeholder {\n    color: $focused-placeholder-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-placeholder-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 mat-control-disabled-underline($underline-color);\n  }\n\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  // 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-invalid {\n    .mat-form-field-placeholder {\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      background-color: $underline-color-warn;\n    }\n  }\n\n  .mat-error {\n    color: $underline-color-warn;\n  }\n}\n\n// Applies a floating placeholder above the form field control itself.\n@mixin _mat-form-field-placeholder-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);\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  -ms-transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale);\n\n  width: 100% / $font-scale;\n}\n\n// This is a total duplicate of the mixin above with insignificant values added to the rules.\n// This exists because the mixin is used in two places. When Google's CSS Optimizer runs over this\n// css (after compiling from sass), it combines those two declarations into one. However, one of\n// those places uses `:-webkit-autofill`. When Firefox encounters this unknown pseuedo-class,\n// it ignores the entire rule. To work around this, we force one of the delcarations to be\n// technically different but still render the same by adding a tiny value to the transform / width.\n@mixin _mat-form-field-placeholder-float-nodedupe($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)\n             translateZ(0.002px);\n  -ms-transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale);\n  width: (100% / $font-scale) + 0.0001;\n}\n\n@mixin mat-form-field-typography($config) {\n  // The unit-less line-height from the font config.\n  $line-height: mat-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 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: ($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  $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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. 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: 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 {\n    font-family: mat-font-family($config);\n    font-size: inherit;\n    font-weight: mat-font-weight($config, input);\n    line-height: mat-line-height($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: $line-height * 1em;\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-placeholder {\n      @include _mat-form-field-placeholder-floating(\n          $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n\n    .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper\n        .mat-form-field-placeholder {\n      @include _mat-form-field-placeholder-float-nodedupe(\n              $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n  }\n\n  .mat-form-field-placeholder-wrapper {\n    top: -$infix-margin-top;\n    padding-top: $infix-margin-top;\n  }\n\n  .mat-form-field-placeholder {\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% - #{$wrapper-padding-bottom / $subscript-font-scale});\n  }\n}\n\n\n\n// Includes all of the typographic styles.\n@mixin angular-material-typography($config: null) {\n  @if $config == null {\n    $config: mat-typography-config();\n  }\n\n  @include mat-base-typography($config);\n  @include mat-autocomplete-typography($config);\n  @include mat-button-typography($config);\n  @include mat-button-toggle-typography($config);\n  @include mat-card-typography($config);\n  @include mat-checkbox-typography($config);\n  @include mat-chips-typography($config);\n  @include mat-table-typography($config);\n  @include mat-datepicker-typography($config);\n  @include mat-dialog-typography($config);\n  @include mat-expansion-panel-typography($config);\n  @include mat-form-field-typography($config);\n  @include mat-grid-list-typography($config);\n  @include mat-icon-typography($config);\n  @include mat-input-typography($config);\n  @include mat-menu-typography($config);\n  @include mat-paginator-typography($config);\n  @include mat-progress-bar-typography($config);\n  @include mat-progress-spinner-typography($config);\n  @include mat-radio-typography($config);\n  @include mat-select-typography($config);\n  @include mat-sidenav-typography($config);\n  @include mat-slide-toggle-typography($config);\n  @include mat-slider-typography($config);\n  @include mat-stepper-typography($config);\n  @include mat-tabs-typography($config);\n  @include mat-toolbar-typography($config);\n  @include mat-tooltip-typography($config);\n  @include mat-list-typography($config);\n  @include mat-option-typography($config);\n  @include mat-optgroup-typography($config);\n  @include mat-snack-bar-typography($config);\n}\n\n\n// Mixin that renders all of the core styles that are not theme-dependent.\n@mixin mat-core($typography-config: null) {\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    .#{$_mat-elevation-prefix}#{$zValue} {\n      @include mat-elevation($zValue);\n    }\n  }\n\n  @include angular-material-typography($typography-config);\n  @include mat-ripple();\n  @include mat-option();\n  @include mat-optgroup();\n  @include cdk-a11y();\n  @include cdk-overlay();\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin mat-core-theme($theme) {\n  @include mat-ripple-theme($theme);\n  @include mat-option-theme($theme);\n  @include mat-optgroup-theme($theme);\n  @include mat-pseudo-checkbox-theme($theme);\n\n  // Wrapper element that provides the theme background when the\n  // user's content isn't inside of a `mat-sidenav-container`.\n  .mat-app-background {\n    $background: map-get($theme, background);\n    background-color: mat-color($background, background);\n  }\n\n  // Marker that is used to determine whether the user has added a theme to their page.\n  .mat-theme-loaded-marker {\n    display: none;\n  }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Create a theme.\n@mixin angular-material-theme($theme) {\n  @include mat-core-theme($theme);\n  @include mat-autocomplete-theme($theme);\n  @include mat-button-theme($theme);\n  @include mat-button-toggle-theme($theme);\n  @include mat-card-theme($theme);\n  @include mat-checkbox-theme($theme);\n  @include mat-chips-theme($theme);\n  @include mat-table-theme($theme);\n  @include mat-datepicker-theme($theme);\n  @include mat-dialog-theme($theme);\n  @include mat-expansion-panel-theme($theme);\n  @include mat-form-field-theme($theme);\n  @include mat-grid-list-theme($theme);\n  @include mat-icon-theme($theme);\n  @include mat-input-theme($theme);\n  @include mat-list-theme($theme);\n  @include mat-menu-theme($theme);\n  @include mat-paginator-theme($theme);\n  @include mat-progress-bar-theme($theme);\n  @include mat-progress-spinner-theme($theme);\n  @include mat-radio-theme($theme);\n  @include mat-select-theme($theme);\n  @include mat-sidenav-theme($theme);\n  @include mat-slide-toggle-theme($theme);\n  @include mat-slider-theme($theme);\n  @include mat-stepper-theme($theme);\n  @include mat-tabs-theme($theme);\n  @include mat-toolbar-theme($theme);\n  @include mat-tooltip-theme($theme);\n  @include mat-snack-bar-theme($theme);\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/node_modules/@angular/material/_theming.scss","/************************************\n\n             Media queries\n\n To use these, put this snippet in the appropriate selector:\n\n     @include bp(tiny) {\n         background-color: purple;\n     }\n\n     Replace \"tiny\" with \"medium\" or \"big\" as necessary.\n*************************************/\n\n@mixin bp($point) {\n\n  $bp-xsmall: \"(min-width: 320px)\";\n  $bp-teeny: \"(min-width: 480px)\";\n  $bp-tiny: \"(min-width: 600px)\";\n  $bp-small: \"(min-width: 650px)\";\n  $bp-medium: \"(min-width: 800px)\";\n  $bp-big: \"(min-width: 1000px)\";\n\n  @if $point == big {\n    @media #{$bp-big} { @content; }\n  }\n  @else if $point == medium {\n    @media #{$bp-medium} { @content; }\n  }\n  @else if $point == small {\n    @media #{$bp-small}  { @content; }\n  }\n  @else if $point == tiny {\n    @media #{$bp-tiny}  { @content; }\n  }\n  @else if $point == teeny {\n    @media #{$bp-teeny}  { @content; }\n  }\n  @else if $point == xsmall {\n    @media #{$bp-xsmall}  { @content; }\n  }\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 $lightgray;\n}\n\n// INFO CARD SKELETON\n@mixin card($height, $width) {\n  height: $height;\n  width: $width;\n  background-color: $white;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n  box-sizing: border-box;\n  transition: box-shadow .5s;\n\n  &:hover {\n    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);\n    text-decoration: none;\n  }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/_mixins.scss","/* ==============================\n   BASE STYLES\n   ============================== */\n\n@import 'typography';\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/0-base/_base-dir.scss","body {\n  font-family: $main-font;\n  margin: 0;\n  color: $darkgray;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nh1 {\n  display: inline-block;\n  font-size: 24px;\n  font-weight: 500;\n  margin: 8px 0px;\n}\n\nh1:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  width: 40%;\n  margin: 24px 0px 10px;\n  background: $lightgray;\n  clear: both;\n}\n\nh2 {\n  font-size: 22px;\n  font-weight: 500;\n  margin: 32px 0px 24px;\n  clear: both;\n}\n\nh3 {\n  font-size: 20px;\n  font-weight: 400;\n  margin: 24px 0px;\n  clear: both;\n}\n\nh4 {\n  font-size: 18px;\n  font-weight: 400;\n  margin: 8px 0px;\n  clear: both;\n}\n\nh5 {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 8px 0px;\n  clear: both;\n}\n\nh6 {\n  color: $mediumgray;\n  font-size: 16px;\n  font-weight: 500;\n  margin: 8px 0px;\n  clear: both;\n}\n\nh1 {\n  @media screen and (max-width: 600px) {\n    margin: 0;\n  }\n}\n\nh1:after, h2, h3, h4, h5, h6 {\n  @media screen and (max-width: 600px) {\n    margin: 8px 0;\n  }\n}\n\n.mat-tab-body-wrapper h2 {\n  margin-top: 0;\n}\n\np, ol, ul, ol, li, input, a  {\n  font-size: 14px;\n  line-height: 24px;\n  letter-spacing: 0.30px;\n  font-weight: 400;\n  & > em {\n    letter-spacing: 0.30px;\n  }\n}\n\nol {\n  li, p {\n    margin: 4px 0;\n  }\n}\n\nli p {\n  margin: 0;\n}\n\na {\n  text-decoration: none;\n}\n\n.app-toolbar a {\n  font-size: 16px;\n  font-weight: 400;\n  color: white;\n  font-family: $main-font;\n  text-transform: uppercase;\n  padding: 21px 0;\n}\n\nstrong {\n  font-weight: 500;\n}\n\ntable {\n  border-collapse: collapse;\n  border-radius: 2px;\n  border-spacing: 0;\n  margin: 0 0 32px 0;\n}\n\ntable tbody th {\n  max-width: 100px;\n  padding: 13px 32px;\n  text-align: left;\n}\n\ntd {\n  font-weight: 400;\n  padding: 8px 30px;\n  letter-spacing: 0.30px;\n\n  p {\n    margin: 0;\n  }\n}\n\nth {\n  font-size: 16px;\n  font-weight: 500;\n  padding: 13px 32px;\n  text-align: left;\n}\n\np > code, li > code, table code {\n  font-family: $code-font;\n  font-size: 85%;\n  color: $darkgray;\n  letter-spacing: 0;\n  line-height: 1;\n  padding: 2px 6px;\n  background-color: $backgroundgray;\n  border-radius: 4px;\n}\n\ncode {\n  font-family: $code-font;\n  font-size: 90%;\n}\n\n.sidenav-content a {\n  color: $blue;\n  &:hover {\n    color: $mediumgray;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/0-base/_typography.scss","// TYPOGRAPHY\n$main-font: \"Roboto\",\"Helvetica Neue Light\",\"Helvetica Neue\",Helvetica,Arial,\"Lucida Grande\",sans-serif;\n$code-font: \"Droid Sans 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$blue: #1976D2;\n$accentblue: #1E88E5;\n$brightred: #DD0031;\n$darkred: #C3002F;\n$white: #FFFFFF;\n$offwhite: #FAFAFA;\n$backgroundgray: #F1F1F1;\n$lightgray: #DBDBDB;\n$mist: #ECEFF1;\n$mediumgray: #6e6e6e;\n$darkgray: #333;\n$black: #0A1014;\n$orange: #FF9800;\n$anti-pattern: $brightred;\n\n// API & CODE COLORS\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// GRADIENTS\n$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);\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  decorator: (\n    content: '@',\n    background: $blue-800\n  ),\n  directive: (\n    content: 'D',\n    background: $pink-600\n  ),\n  pipe: (\n    content: 'P',\n    background: $blue-grey-600\n  ),\n  class: (\n    content: 'C',\n    background: $blue-500\n  ),\n  interface: (\n    content: 'I',\n    background: $teal-500\n  ),\n  function: (\n    content: 'F',\n    background: $green-500\n  ),\n  enum: (\n    content: 'E',\n    background: $amber-700\n  ),\n  const: (\n    content: 'K',\n    background: $mediumgray\n  ),\n  let: (\n    content: 'K',\n    background: $mediumgray\n  ),\n  var: (\n    content: 'K',\n    background: $mediumgray\n  ),\n  type-alias: (\n    content: 'T',\n    background: $light-green-600\n  ),\n  module: (\n    content: 'Pk',\n    background: $purple-600\n  )\n);\n\n// OTHER\n$small-breakpoint-width: 840px;\n$phone-breakpoint: 480px;\n$tablet-breakpoint: 800px;\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/_constants.scss","/* ==============================\n   LAYOUT STYLES\n   ============================== */\n\n@import 'api-page';\n@import 'content-layout';\n@import 'doc-viewer';\n@import 'footer';\n@import 'layout-global';\n@import 'marketing-layout';\n@import 'not-found';\n@import 'sidenav';\n@import 'table-of-contents';\n@import 'top-menu';\n@import 'print-layout';\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_layouts-dir.scss",".api-section {\n    position: relative;\n\n    pre {\n        white-space: pre-wrap;\n    }\n\n    table.api-table {\n        min-width: 680px;\n\n        thead th {\n            color: white;\n            font-size: 16px;\n            background-color: $blue;\n            border-radius: 4px 4px 0 0;\n            text-transform: none;\n            padding: 8px 24px;\n        }\n        \n        tbody {\n            pre {\n                white-space: normal;\n                margin: 4px;\n                padding: 4px 16px;\n            }\n\n            td, th {\n                padding: 0;\n            }\n\n            th {\n                max-width: 150px;\n            }\n        }\n\n    }\n}\n\n\n.api-header label {\n    border-radius: 4px;\n    padding: 4px 16px;\n    display: inline;\n    font-size: 14px;\n    color: white;\n    margin: 0 8px 0 16px;\n    font-weight: 500;\n    text-transform: uppercase;\n    \n    @media screen and (max-width: 600px) {\n        display: block;\n        margin: 8px 0;\n    }\n\n    &.api-status-label {\n        background-color: $mediumgray;\n    }\n\n    &.api-type-label {\n        background-color: $accentblue;\n\n        @each $name, $symbol in $api-symbols {\n            &.#{$name} {\n                background: map-get($symbol, background);\n            }\n        }\n\n    }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_api-page.scss","aio-shell.page-docs {\n  .sidenav-content {\n    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES\n    margin: auto;\n  }\n}\n\n.sidenav-content {\n  min-height: 100vh;\n  padding: 80px 3rem 1rem;\n}\n\n@media (max-width: 600px) {\n  aio-menu {\n    display: none;\n  }\n\n  .sidenav-content {\n    min-height: 450px;\n    padding: 80px 1rem 1rem;\n  }\n}\n\n.sidenav-container {\n  width: 100%;\n  height: 100vh;\n}\n\n.sidenav-content button {\n  min-width: 50px;\n}\n\n#guide-change-log h2::before {\n  content: \"\";\n  display: block;\n  height: 1px;\n  margin: 24px 0px;\n  background: $lightgray;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_content-layout.scss",".no-animations aio-doc-viewer > * {\n  // Disable view transition animations.\n  transition: none !important;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_doc-viewer.scss","footer {\n  position: relative;\n  line-height: 24px;\n  flex: 1;\n  padding: 48px;\n  z-index: 0;\n  background-color: $blue;\n  color: $offwhite;\n  font-weight: 300;\n\n  aio-footer {\n    position: relative;\n    z-index: 0;\n  }\n\n  .footer-block {\n    margin: 0 24px;\n    vertical-align: top;\n  }\n\n  a {\n      color: $offwhite;\n      font-weight: 300;\n      text-decoration: none;\n      z-index: 20;\n      position: relative;\n      &:hover {\n        text-decoration: underline;\n      }\n      &:visited {\n        text-decoration: none;\n      }\n  }\n  a.action {\n    cursor: pointer;\n  }\n  h3 {\n    font-size: 16px;\n    text-transform: uppercase;\n    font-weight: 400;\n    margin: 0 0 16px;\n  }\n  p {\n    text-align: center;\n    margin: 10px 0px 5px;\n\n    @media (max-width: 480px) {\n      text-align: left;\n    }\n  }\n\n  div.grid-fluid {\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n\n    justify-content: center;\n\n    text-align: left;\n    margin: 0 0 40px;\n\n    ul {\n      list-style-position: inside;\n      padding: 0px;\n      margin: 0px;\n\n      li {\n        list-style-type: none;\n        padding: 0px;\n        text-align: left;\n      }\n    }\n\n    @media (max-width: 480px) {\n      flex-direction: column;\n      .footer-block {\n        margin: 8px 24px;\n      }\n    }\n  }\n\n\n\n\n  @media (max-width: 700px) {\n    h3 {\n      font-size: 110%;\n    }\n  }\n  @media (max-width: 600px) {\n    h3 {\n      font-size: 100%;\n    }\n  }\n}\n\nfooter::after {\n    content: \"\";\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background:\n        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,\n        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;\n    opacity: 0.05;\n    background-size: 320px auto;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_footer.scss","html, body {\n    height: 100%;\n}\n\nbody {\n    background-color: $offwhite;\n}\n\n.clearfix {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n\n.clear {\n    clear: both;\n}\n\n.l-clearfix:after, .clearfix:after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n\n.is-visible {\n    display: block!important;\n}\n\n.l-flex-wrap {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.flex-center {\n    display: flex;\n    justify-content: center;\n}\n\n.center {\n    text-align: center;\n}\n\n.visually-hidden {\n    position: absolute !important;\n    top: -9999px !important;\n    left: -9999px !important;\n}\n\n.text-uppercase {\n  text-transform: uppercase;\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_layout-global.scss",".hero {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  min-height: 480px;\n  height: 80vh;\n  max-height: 560px;\n  box-sizing: border-box;\n  padding: 48px 48px 32px 48px;\n  overflow: hidden;\n  transform: skewY(8deg);\n  transform-origin: 100%;\n\n  @media (max-width: 480px) {\n    max-height: 486px;\n    padding-top: 40px;\n    transform: none;\n  }\n\n  h1:after {\n   content: none;\n  }\n\n  .hero-title {\n    display: inline-block;\n    font-size: 28px;\n    font-weight: 400;\n    line-height: 48px;\n    margin: 0 8px 0 0;\n    text-transform: uppercase;\n\n    &.is-standard-case {\n      text-transform: none;\n    }\n  }\n}\n\nsection#intro {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 900px;\n  height: 480px;\n  margin: 0 auto -32px;\n  padding: 48px 0 0;\n  color: white;\n\n  @media (max-width: 780px) {\n    flex-direction: column;\n    justify-content: center;\n    width: 100%;\n    max-width: 100vw;\n    padding: 40px 0 32px;\n\n    button {\n      margin: 0;\n      height: 60px;\n    }\n  }\n\n  .homepage-container {\n    width: 100%;\n    max-width: 1040px;\n    margin: 0 auto;\n    margin-top: -7%;\n    padding-top: 0;\n    padding-bottom: 0;\n\n    @media  (max-width: 780px) {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      width: 100%;\n      max-width: 100%;\n      padding: 0;\n    }\n  }\n\n  .hero-headline {\n    font-size: 40px;\n    line-height: 64px;\n    font-weight: 500;\n    margin: 32px 0;\n\n    &:after {\n      display: none;\n    }\n\n    @media (max-width: 780px) {\n      text-align: center;\n    }\n\n    @media (max-width: 575px) {\n      font-size: 32px;\n      line-height: 50px;\n    }\n  }\n\n  .hero-logo {\n    display: flex;\n    width: 400px;\n\n    @media (max-width: 780px) {\n      justify-content: center;\n    }\n\n    img {\n      width: 400px;\n      height: 400px;\n      margin-bottom: 8px;\n      padding: 0;\n      filter: drop-shadow(0 2px 2px rgba($black, 0.24));\n\n      @media (max-width: 780px) {\n        width: 250px;\n        height: 250px;\n      }\n    }\n  }\n}\n\n.announcement-bar {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-around;\n  align-items: center;\n  max-width: 50vw;\n  margin: 0 auto;\n  padding: 16px;\n  background-color: $white;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n  box-sizing: border-box;\n  transition: all 0.3s ease-in;\n\n  @media (max-width: 992px) {\n    flex-direction: column;\n    text-align: center;\n    padding: 32px 16px;\n  }\n\n  @media (max-width: 768px) {\n    width: 100%;\n    max-width: none;\n  }\n\n  & > * {\n    margin: 8px;\n  }\n\n  .button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    min-width: 160px;\n    font-size: 16px;\n    color: $white;\n    background-color: $blue;\n    border-radius: 48px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    &:hover {\n      color: rgba($white, 0.7);\n    }\n  }\n\n  .material-icons {\n    display: none;\n    right: 0;\n    position: static;\n    transition: all 0.3s ease-in;\n    font-size: 16px;\n  }\n\n  p {\n    font-size: 16px;\n    margin: 8px;\n    text-align: center;\n  }\n}\n\n// ANGULAR LINE\n.background-sky {\n  background-color: $blue;\n  background: $bluegradient;\n  color: $white;\n}\n\n.home-row .card {\n  @include card(70%, auto);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n  width: 70%;\n  min-width: 350px;\n  height: auto;\n  margin: auto;\n  padding: 24px;\n  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);\n\n  @media (max-width: 600px) {\n    margin: 16px auto 0;\n\n    h2 {\n      margin: 0;\n    }\n\n    img {\n      max-width: none;\n      height: 70px;\n    }\n  }\n\n  @media (max-width: 1300px) {\n    img {\n      height: 70px;\n      max-width: none;\n    }\n  }\n\n  img {\n    margin: 16px ;\n  }\n\n  .card-text-container {\n    margin: 0 16px;\n\n    p {\n      text-align: left;\n      color: $darkgray;\n      margin: 0;\n      padding: 8px 0;\n    }\n  }\n\n\n  &:hover {\n    h2 {\n      color: $blue;\n    }\n  }\n}\n\n.button.hero-cta {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 184px;\n  height: 40px;\n  padding: 0 24px;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 40px;\n  background-color: $white;\n  border-radius: 48px;\n  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  box-sizing: border-box;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.9;\n  }\n}\n\naio-shell {\n  &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {\n    section {\n      padding: 0rem 0rem 3rem;\n    }\n  }\n\n  &.page-home {\n    section {\n      padding: 0;\n    }\n  }\n\n  &.page-home, &.page-resources, &.page-events, &.page-contribute {\n    article {\n      padding: 32px;\n\n      @media (max-width: 800px) {\n        padding: 24px;\n      }\n    }\n  }\n\n  &.page-features {\n    article {\n      padding: 0 3rem;\n    }\n  }\n\n  &.page-home, &.page-resources, &.page-events, &.page-features {\n\n    .content img {\n      @media (max-width: 1300px) {\n        max-width: none;\n      }\n    }\n\n    .feature-section img {\n      max-width: 70px;\n    }\n\n    @media (max-width: 600px) {\n      mat-sidenav-container.sidenav-container {\n        padding-top: 0;\n      }\n    }\n  }\n\n  .cta-bar .hero-cta {\n    color: $blue;\n  }\n}\n\n.cta-bar.announcement-bar {\n  background: none;\n  box-shadow: none;\n}\n\n.text-headline {\n  font-size: 20px;\n  font-weight: 500;\n  color: $blue;\n  margin-top: 10px;\n  text-transform: uppercase;\n}\n\naio-shell:not(.view-SideNav) {\n  mat-sidenav-container.sidenav-container {\n    max-width: none;\n  }\n}\n\ndiv[layout=row]{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n\n    @media (max-width: 480px) {\n      display: block;\n  }\n}\n\n.layout-row {\n    flex-direction: row;\n}\n\n.home-rows {\n    overflow: hidden;\n    @media (max-width: 600px) {\n      margin: 0;\n    }\n}\n\n.background-superhero-paper {\n    background-size: 100%;\n    background-blend-mode: multiply;\n}\n\n.home-row {\n  max-width: 920px;\n  margin: 32px auto;\n\n  .promo-img-container, .text-container {\n    max-width: 50%;\n\n    @media(max-width: 480px) {\n      max-width: 100%;\n      text-align: center;\n\n      &:nth-child(even) {\n        flex-direction: column-reverse;\n      }\n    }\n  }\n\n  .text-block {\n    padding-right: 15%;\n\n    @media(max-width: 600px) {\n      padding: 0;\n    }\n  }\n\n  .promo-img-container {\n\n    img {\n      max-width: 90% !important;\n    }\n\n    p {\n      margin: 0 20px;\n    }\n\n    img {\n      max-width: 90%;\n\n\n      @media (max-width: 599px) {\n        max-width: 100%;\n        float: initial !important;\n      }\n    }\n  }\n}\n\n.marketing-banner {\n  background-color: lighten($blue, 10);\n  margin-top: 64px;\n  padding: 32px;\n\n  @media (max-width: 600px) {\n    margin-top: 56px;\n    padding: 18px;\n  }\n\n  .banner-headline {\n    text-transform: uppercase;\n    font-size: 24px;\n    font-weight: 300;\n    color: white;\n    margin: 0;\n    -webkit-margin-before: 0;\n    -webkit-margin-after: 0;\n\n    @media (max-width: 600px) {\n      font-size: 18px;\n      font-weight: 400;\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n}\n.page-features .marketing-banner {\n  margin-bottom: 20px;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_marketing-layout.scss","#file-not-found {\n    padding: 3rem 3rem 3rem;\n}\n\n.nf-container {\n    align-items: center;\n    padding: 32px;\n}\n\n.nf-response {\n    margin: 32px;\n    height: 100%;\n    flex-direction: column;\n\n    h1 {\n        font-size: 48px;\n        color: $blue;\n        text-transform: uppercase;\n        margin: 8px 0;\n    }\n}\n\n.nf-icon.material-icons {\n    color: $blue;\n    font-size: 100px;\n    position: static;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_not-found.scss","// Disable sidenav animations for the initial render.\n.starting.mat-drawer-transition .mat-drawer-content {\n  transition: none;\n}\n\naio-nav-menu {\n  display: block;\n  margin: 0 auto;\n  font-size: 13px;\n  ul, a {\n    padding: 0;\n    margin: 0;\n  }\n\n  &:first-child {\n    margin-top: 16px;\n  }\n\n  aio-nav-item div a {\n    padding-left: 6px;\n  }\n}\n\nmat-sidenav.mat-sidenav.sidenav {\n  position: fixed;\n  top: 64px;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  min-width: 260px;\n  background-color: $offwhite;\n  box-shadow: 6px 0 6px rgba(0,0,0,0.10);\n\n  &.collapsed {\n    top: 56px;\n  }\n}\n\nmat-sidenav-container.sidenav-container {\n  min-height: 100%;\n  height: auto !important;\n  max-width: 100%;\n  margin: 0;\n  transform: none;\n\n  &.has-floating-toc {\n    max-width: 82%;\n  }\n}\n\nmat-sidenav-container div.mat-sidenav-content {\n  height: auto;\n}\n\n.vertical-menu-item {\n  box-sizing: border-box;\n  color: $darkgray;\n  cursor: pointer;\n  display: block;\n  max-width: 260px;\n  overflow-wrap: break-word;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  text-decoration: none;\n  text-align: left;\n  width: 93%;\n  word-wrap: break-word;\n\n  &:hover {\n    background-color: $lightgray;\n    color: $blue;\n    text-shadow: 0 0 5px #ffffff;\n  }\n\n  &:focus {\n    outline: $accentblue auto 2px;\n  }\n\n  //icons _within_ nav\n  .mat-icon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 4px;\n  }\n}\n\n.vertical-menu-item.selected {\n  color: $blue;\n}\n\nbutton.vertical-menu-item {\n  border: none;\n  background-color: transparent;\n  margin-right: 0;\n  padding-left: 6px;\n  padding-top: 8px;\n  padding-bottom: 10px;\n}\n\n.heading {\n  color: $darkgray;\n  cursor: pointer;\n  position: relative;\n  text-transform: uppercase;\n}\n\n.heading-children.expanded {\n  visibility: visible;\n  opacity: 1;\n  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.\n  transition: visibility 500ms, opacity 500ms, max-height 500ms;\n  -webkit-transition-timing-function: ease-in-out;\n  transition-timing-function: ease-in-out;\n}\n\n.heading-children.collapsed {\n  visibility: hidden;\n  opacity: 0;\n  max-height: 1px; // Must have measurement to transition height.\n  transition: visibility 275ms, opacity 275ms, max-height 280ms;\n  -webkit-transition-timing-function: ease-out;\n  transition-timing-function: ease-out;\n}\n\n.no-animations {\n  .heading-children.expanded, .heading-children.collapsed {\n    transition: none! important;\n  }\n}\n\n.level-1 {\n  font-family: $main-font;\n  font-size: 14px;\n  font-weight: 400;\n  margin-left: 14px;\n  transition: background-color 0.2s;\n  text-transform: uppercase;\n}\n\n.level-2 {\n  color: $mediumgray;\n  font-family: $main-font;\n  font-size: 14px;\n  font-weight: 400;\n  margin-left: 12px;\n  text-transform: none;\n}\n\n.level-3 {\n  color: $mediumgray;\n  font-family: $main-font;\n  font-size: 14px;\n  margin-left: 10px;\n}\n\n.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {\n  @include rotate(90deg);\n}\n\n.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {\n  @include rotate(0deg);\n}\n\naio-nav-menu.top-menu {\n  padding: 24px 0 0;\n\n  aio-nav-item:last-child div {\n    border-bottom: 1px solid rgba($mediumgray, 0.5);\n  }\n\n  aio-nav-item:first-child div {\n    border-top: 1px solid rgba($mediumgray, 0.5);\n  }\n}\n\n// Angular Version Selector\nmat-sidenav .doc-version {\n  padding: 8px;\n  border-top: 1px solid $lightgray;\n\n  select {\n    outline: none;\n    width: 100%;\n    background: rgba($lightgray, 0.5);\n    height: 32px;\n    border: 1px solid $lightgray;\n    color: $darkgray;\n\n    option {\n      font-family: $main-font;\n      font-size: 14px;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_sidenav.scss","nav#main-table-of-contents {\n    width: 200px;\n    height: 900px;\n    position: fixed;\n    right: 0;\n    top: 50px;\n    bottom: 100px;\n    margin-left: 32px;\n    background-color: $blue;\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_table-of-contents.scss","// VARIABLES\n$hamburgerShownMargin: 0;\n$hamburgerHiddenMargin: 0 24px 0 -88px;\n\n\n// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED\nmat-toolbar.mat-toolbar {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);\n\n  mat-toolbar-row {\n    padding: 0 16px 0 0;\n  }\n\n  mat-icon {\n    color: $white;\n  }\n}\n\n\n// HOME PAGE OVERRIDE: TOPNAV TOOLBAR\naio-shell.page-home mat-toolbar.mat-toolbar {\n  background-color: $blue;\n\n  @media (min-width: 481px) {\n    &:not(.transitioning) {\n      background-color: transparent;\n      transition: background-color .2s linear;\n    }\n  }\n}\n\n\n// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER\naio-shell.page-home mat-toolbar.mat-toolbar,\naio-shell.page-features mat-toolbar.mat-toolbar,\naio-shell.page-events mat-toolbar.mat-toolbar,\naio-shell.page-resources mat-toolbar.mat-toolbar {\n  box-shadow: none;\n\n  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE\n  @media (min-width: 481px) {\n    position: absolute;\n  }\n}\n\n\n// DOCS PAGES OVERRIDE: HAMBURGER\naio-shell.folder-api mat-toolbar.mat-toolbar,\naio-shell.folder-docs mat-toolbar.mat-toolbar,\naio-shell.folder-guide mat-toolbar.mat-toolbar,\naio-shell.folder-tutorial mat-toolbar.mat-toolbar {\n  @media (min-width: 992px) {\n    .hamburger.mat-button {\n      // Hamburger shown on non-marketing pages on large screens.\n      margin: $hamburgerShownMargin;\n    }\n  }\n}\n\n\n// HAMBURGER BUTTON\n.hamburger.mat-button {\n  height: 100%;\n  margin: $hamburgerShownMargin;\n  padding: 0;\n\n  &:not(.starting) {\n    transition-duration: .4s;\n    transition-property: color, margin;\n    transition-timing-function: cubic-bezier(.25, .8, .25, 1);\n  }\n\n  @media (min-width: 992px) {\n    // Hamburger hidden by default on large screens.\n    // (Will be shown per doc.)\n    margin: $hamburgerHiddenMargin;\n  }\n\n  &:hover {\n    color: $offwhite;\n  }\n\n  & .mat-icon {\n    color: white;\n    position: inherit;\n  }\n}\n\n\n// HOME NAV-LINK\n.nav-link.home img {\n  position: relative;\n  margin-top: -21px;\n  margin-right: 20px;\n  top: 12px;\n  height: 40px;\n\n  @media(max-width: 992px) {\n    &:hover {\n      transform: scale(1.1);\n    }\n  }\n}\n\n\n// TOP MENU\naio-top-menu {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 80%;\n\n  ul {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    list-style-position: inside;\n    padding: 0px;\n    margin: 0px;\n\n    li {\n      padding-bottom: 2px;\n      list-style-type: none;\n      cursor: pointer;\n\n      &:hover {\n        opacity: 0.7;\n      }\n\n      &:focus {\n        background-color: $accentblue;\n        outline: none;\n      }\n    }\n  }\n\n  a.nav-link {\n    margin: 0;\n    padding: 24px 16px;\n    cursor: pointer;\n\n    &:focus {\n      background: rgba($white, 0.15);\n      border-radius: 4px;\n      outline: none;\n      padding: 8px 16px;\n    }\n  }\n}\n\n\n// SEARCH BOX\naio-search-box.search-container {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  min-width: 150px;\n  height: 100%;\n\n  input {\n    color: $darkgray;\n    border: none;\n    border-radius: 100px;\n    background-color: $offwhite;\n    padding: 5px 16px;\n    margin-left: 8px;\n    width: 180px;\n    max-width: 240px;\n    height: 50%;\n    -webkit-appearance: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    @include bp(big) {\n      transition: width 0.4s ease-in-out;\n\n      &:focus {\n        width: 50%;\n      }\n    }\n    @media (max-width: 480px) {\n      width: 150px;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_top-menu.scss","@media print {\n\n    // General Adjustments\n    * {\n        box-shadow: none !important;\n    }\n\n    h1 {\n        height: 40px !important;\n        color: $darkgray !important;\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        page-break-after: avoid;\n    }\n\n    ul, ol, img, code-example, table, tr, .alert, .l-subsection, .feature {\n        page-break-inside: avoid;\n    }   \n\n    table tbody tr:last-child td {\n        border-bottom: 1px solid $lightgray !important;\n    }\n\n    img {\n        max-width: 100% !important;\n    }\n\n    p {\n        widows: 4;\n    }\n\n    p > code, li > code, table code {\n        color: $blue !important;\n    }\n\n    // No Print Class\n    .no-print {\n        display: none !important;\n    }\n\n    // Custom No Print for Sidenav Menu\n    mat-sidenav.sidenav.mat-sidenav {\n        display: none !important;\n    }\n\n    // Custom No Print Element Adjustments\n    .mat-sidenav-content {\n        margin: 0 !important;\n    }\n\n    mat-sidenav-container.sidenav-container {\n        min-width: 100vw;\n    }\n\n    .sidenav-content {\n        overflow: visible;\n    }\n\n    .filetree {\n        max-width: 100%;\n    }\n\n    aio-code code {\n        border: none !important;\n    }\n\n    code-example {\n        pre.lang-bash code span {\n            color: $mediumgray !important;\n        }\n\n        pre.lang-sh code span {\n            color: $darkgray !important;\n        }\n\n        header {\n            border: 0.5px solid $lightgray;\n            color: $darkgray;\n        }\n    }\n\n    .content code { \n        border: 0.5px solid $lightgray;\n    }\n\n    .mat-tab-labels {\n        div.mat-tab-label {\n            &:not(.mat-tab-label-active) span {\n                font-style: italic;\n            }\n\n            &.mat-tab-label-active span {\n                font-weight: bold;\n            }\n        }\n    }\n\n    .api-header label { \n        color: $darkgray !important;\n        font-weight: bold !important;\n        margin: 2px !important;\n        padding: 0 !important;\n        display: block !important;\n    }\n\n    .feature-section img {\n        max-width: 70px !important;\n    }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/1-layouts/_print-layout.scss","/* ==============================\n   MODULE STYLES\n   ============================== */\n\n   @import 'alert';\n   @import 'api-pages';\n   @import 'api-list';\n   @import 'banner';\n   @import 'buttons';\n   @import 'callout';\n   @import 'card';\n   @import 'code';\n   @import 'contribute';\n   @import 'contributor';\n   @import 'details';\n   @import 'edit-page-cta';\n   @import 'features';\n   @import 'filetree';\n   @import 'heading-anchors';\n   @import 'hr';\n   @import 'images';\n   @import 'progress-bar';\n   @import 'table';\n   @import 'presskit';\n   @import 'resources';\n   @import 'scrollbar';\n   @import 'search-results';\n   @import 'subsection';\n   @import 'toc';\n   @import 'select-menu';\n   @import 'deploy-theme';\n   @import 'notification';\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_modules-dir.scss",".alert {\n    padding: 16px;\n    margin: 24px 0px;\n    font-size: 14px;\n    color: $darkgray;\n    width: 100%;\n    box-sizing: border-box;\n\n    &.is-critical {\n        border-left: 10px solid $brightred;\n        background-color: rgba($brightred, 0.05);\n\n        h1, h2, h3, h4, h5, h6 {\n            color: $brightred;\n        }\n    }\n\n    &.is-important {\n        border-left: 10px solid $orange;\n        background-color: rgba($orange, 0.05);\n\n        h1, h2, h3, h4, h5, h6 {\n            color: $orange;\n        }\n    }\n\n    &.is-helpful {\n        border-left: 10px solid $blue;\n        background-color: rgba($blue, 0.05);\n\n        h1, h2, h3, h4, h5, h6 {\n            color: $blue;\n        }\n    }\n\n    > * {\n        margin: 0;\n        padding: 8px 16px;\n    }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_alert.scss",".api-info-bar {\n  max-width: 800px;\n  text-align: left;\n\n  span {\n    margin: 0 16px 0 0;\n\n    @media screen and (max-width: 600px) {\n      display: block;\n    }\n\n  }\n}\n\n.api-heading {\n  margin-top: 24px;\n  margin-bottom: 18px;\n  font-size: 16px;\n}\n\n.overloads .detail-contents {\n  padding-top: 0;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_api-pages.scss","/* API EDIT ICON */\n#api {\n  .api-filter .material-icons {\n    right: 48px;\n  }\n}\n\n/* API LIST STYLES */\n\naio-api-list {\n    div.form-search i.material-icons {\n        width: 20px;\n        pointer-events: none;\n    }\n\n    .form-search input {\n        width: 182px;\n    }\n\n    .api-list-container {\n      display: flex;\n      flex-direction: column;\n      margin: 0 auto;\n\n      h2 {\n        margin-top: 16px;\n      }\n    }\n}\n\n.api-filter {\n  display: flex;\n  margin: 0 auto;\n\n  @media (max-width: 600px) {\n      flex-direction: column;\n      margin: 16px auto;\n  }\n\n  .form-select-menu, .form-search {\n      margin: 8px;\n  }\n}\n\n/* LAYOUT */\n\n.docs-content {\n  position: relative;\n}\n\n.l-content-small {\n  padding: 16px;\n  max-width: 1100px;\n  margin: 0;\n\n  @media handheld and (max-width: $phone-breakpoint),\n  screen and (max-device-width: $phone-breakpoint),\n  screen and (max-width: $tablet-breakpoint) {\n    padding: 24px 0 0;\n  }\n}\n\n/* SEARCH BAR */\n\n.form-search {\n  position: relative;\n\n  input {\n    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n    box-sizing: border-box;\n    border: 1px solid $white;\n    color: $blue-600;\n    font-size: 16px;\n    height: 32px;\n    line-height: 32px;\n    outline: none;\n    padding: 0 16px 0 32px;\n    transition: all .2s;\n\n    // PLACEHOLDER TEXT\n    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n      color: $blue-grey-100;\n      font-size: 14px;\n    }\n    &::-moz-placeholder { /* Firefox 19+ */\n      color: $blue-grey-100;\n      font-size: 14px;\n    }\n    &:-ms-input-placeholder { /* IE 10+ */\n      color: $blue-grey-100;\n      font-size: 14px;\n    }\n    &:-moz-placeholder { /* Firefox 18- */\n      color: $blue-grey-100;\n      font-size: 14px;\n    }\n\n    &:focus {\n      border: 1px solid $blue-400;\n      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);\n    }\n  }\n\n  .material-icons {\n    color: $blue-grey-100;\n    font-size: 20px;\n    left: 8px;\n    position: absolute;\n    top: 6px;\n    z-index: $layer-1;\n  }\n}\n\n/* API SYMBOLS */\n\n/* SYMBOL CLASS */\n\n.symbol {\n  border-radius: 2px;\n  box-shadow: 0 1px 2px rgba($black, .24);\n  color: $white;\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  width: 16px;\n\n  // SYMBOL TYPES\n  // Symbol mapping variables in *constants*\n  @each $name, $symbol in $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/* API HOMEE PAGE */\n\n/* API FILTER MENU */\n\n.api-filter {\n  aio-select {\n    width: 200px;\n\n    .symbol {\n      margin-right: 8px;\n    }\n  }\n\n  .form-search {\n    float: left;\n  }\n}\n\n/* API CLASS LIST */\n\n.docs-content .api-list {\n  list-style: none;\n  margin: 0 0 32px -8px;\n  padding: 0;\n  overflow: hidden;\n\n  @media screen and (max-width: 600px) {\n        margin: 0 0 0 -8px;\n    }\n\n  li {\n    font-size: 14px;\n    margin: 8px 0;\n    line-height: 14px;\n    padding: 0;\n    float: left;\n    width: 33%;\n    overflow: hidden;\n    min-width: 220px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    .symbol {\n      margin-right: 8px;\n    }\n    a {\n      color: $blue-grey-600;\n      display: inline-block;\n      line-height: 16px;\n      padding: 0 16px 0;\n      text-decoration: none;\n      transition: all .3s;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &:hover {\n        background: $blue-grey-50;\n        color: $blue-500;\n      }\n    }\n  }\n}\n\n.docs-content .h2-api-docs,\n.docs-content .h2-api-docs:first-of-type {\n  font-size: 18px;\n  line-height: 24px;\n  margin-top: 0;\n}\n\n.code-links {\n  a {\n    code, .api-doc-code {\n      color: #1E88E5 !important;\n    }\n  }\n}\n\n.openParens {\n  margin-top: 15px;\n}\n\n.endParens {\n  margin-bottom: 20px !important;\n}\n\np {\n\n  &.selector {\n    margin: 0;\n  }\n\n  &.location-badge {\n    margin: 0 0 16px 16px !important;\n  }\n\n  .api-doc-code {\n    border-bottom: 0;\n\n    :hover {\n      border-bottom: none;\n    }\n  }\n}\n\n.row-margin {\n  margin-bottom: 36px;\n  h2 {\n    line-height: 28px;\n  }\n}\n\n.code-margin {\n  margin-bottom: 8px;\n}\n\n.no-bg {\n  background: none;\n  padding: 0;\n}\n\n.no-bg-with-indent {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-left: 16px;\n  margin-top: 6px;\n  margin-bottom: 0;\n  background: none;\n}\n\n.code-background {\n  padding: 0 5px 0;\n\n  span.pln {\n    color: #1E88E5 !important;\n  }\n}\n\n.code-anchor {\n  cursor: pointer;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n.api-doc-code {\n  font-size: 14px;\n  color: #1a2326;\n\n  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.\n  &.no-pln {\n    .pln:last-child {\n      display: none;\n    }\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .docs-content {\n    // Overrides display flex from angular material.\n    // This was added because Safari doesn't play nice with layout=\"column\".\n    // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.\n    .layout-xs-column {\n      display: block !important;\n    }\n  }\n\n  .api-doc-code {\n    font-size: 12px;\n  }\n\n  p.location-badge {\n    position: relative;\n    font-size: 11px;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_api-list.scss","/* BANNER */\n\n.info-banner {\n    margin: 16px 0;\n    justify-content: center;\n    background: $white;\n    border: 1px solid rgba($lightgray, 0.5);\n    border-radius: 4px;\n    box-sizing: border-box;\n    padding: 16px;\n    background: $white;\n    height: auto;\n    overflow: visible;\n\n    @media screen and (max-width: 600px) {\n        text-align: center;\n    }\n\n    p, .text-body {\n        color: $darkgray;\n        line-height: 32px;\n        margin: 0;\n        text-align: center;\n    }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_banner.scss","/* Button Styles */\n\n.button,\na.button.mat-button {\n  display: inline-block;\n  line-height: 32px;\n  padding: 0px 16px;\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 3px;\n  text-decoration: none;\n  text-transform: uppercase;\n  overflow: hidden;\n  border: none;\n\n  // SIZES\n  &.button-small {\n    font-size: 12px;\n    line-height: 24px;\n    padding: 0px 8px;\n  }\n\n  &.button-large {\n    font-size: 15px;\n    line-height: 48px;\n    padding: 0px 24px;\n  }\n\n  &.button-x-large {\n    font-size: 16px;\n    line-height: 56px;\n    padding: 0px 24px;\n  }\n\n\n  // COLORS\n\n  &.button-secondary {\n    background: $mediumgray;\n    color: rgba($white, .87);\n  }\n\n  &.button-plain {\n    background: $white;\n    color: rgba($darkgray, .87);\n  }\n\n  &.button-subtle {\n    background: $mediumgray;\n    color: darken($offwhite, 10%);\n  }\n\n  &.button-navy {\n    background: $blue;\n    color: rgba($white, .87);\n  }\n\n  &.button-banner {\n    background: $darkgray;\n    color: rgba($white, .87);\n  }\n\n  &.button-shield,\n  &.button-shield.mat-button {\n    background-color: $blue;\n    background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;\n    color: rgba($white, .87);\n    padding-left: 54px;\n    background-size: 22px 22px;\n\n    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {\n      background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;\n      background-size: 22px 22px;\n\n    }\n  }\n}\n\n.cta-bar {\n  text-align: center;\n\n  .button {\n    margin: 0px 8px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n    transition: all .2s ease-in-out;\n    &:hover {\n        transform: scale(1.1);\n        color: $offwhite;\n    }\n  }\n}\n\na.filter-button {\n  width: 140px;\n  font-size: 14px;\n  padding: 0px 16px;\n  margin: 8px;\n  line-height: 48px;\n  border: 2px solid $blue;\n  border-radius: 4px;\n\n  &:hover {\n    background-color: $blue;\n    color: white;\n  }\n}\n\n[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {\n  text-transform: uppercase;\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_buttons.scss","/* You can add global styles to this file, and also import other style files */\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/* Theme for the ripple elements.*/\n/** The mixins below are shared between mat-menu and mat-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.mat-h1, .mat-headline, .mat-typography h1 {\n  font: 400 24px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h2, .mat-title, .mat-typography h2 {\n  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h3, .mat-subheading-2, .mat-typography h3 {\n  font: 400 16px/28px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h4, .mat-subheading-1, .mat-typography h4 {\n  font: 400 15px/24px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h5, .mat-typography h5 {\n  font-size: 11.62px;\n  font-weight: 400;\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  line-height: 20px;\n  margin: 0 0 12px; }\n\n.mat-h6, .mat-typography h6 {\n  font-size: 9.38px;\n  font-weight: 400;\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  line-height: 20px;\n  margin: 0 0 12px; }\n\n.mat-body-strong, .mat-body-2 {\n  font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-body, .mat-body-1, .mat-typography {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n  .mat-body p, .mat-body-1 p, .mat-typography p {\n    margin: 0 0 12px; }\n\n.mat-small, .mat-caption {\n  font: 400 12px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-display-4, .mat-typography .mat-display-4 {\n  font: 300 112px/112px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 56px;\n  letter-spacing: -0.05em; }\n\n.mat-display-3, .mat-typography .mat-display-3 {\n  font: 400 56px/56px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px;\n  letter-spacing: -0.02em; }\n\n.mat-display-2, .mat-typography .mat-display-2 {\n  font: 400 45px/48px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px;\n  letter-spacing: -0.005em; }\n\n.mat-display-1, .mat-typography .mat-display-1 {\n  font: 400 34px/40px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px; }\n\n.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-button-toggle {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card-title {\n  font-size: 24px;\n  font-weight: 400; }\n\n.mat-card-subtitle,\n.mat-card-content,\n.mat-card-header .mat-card-title {\n  font-size: 14px; }\n\n.mat-checkbox {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-checkbox-layout .mat-checkbox-label {\n  line-height: 24px; }\n\n.mat-chip {\n  font-size: 13px;\n  line-height: 18px; }\n  .mat-chip .mat-chip-remove.mat-icon {\n    font-size: 18px; }\n\n.mat-table {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-header-cell {\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-cell {\n  font-size: 14px; }\n\n.mat-calendar {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-calendar-body {\n  font-size: 13px; }\n\n.mat-calendar-body-label,\n.mat-calendar-period-button {\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-calendar-table-header th {\n  font-size: 11px;\n  font-weight: 400; }\n\n.mat-dialog-title {\n  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-expansion-panel-header {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 15px;\n  font-weight: 400; }\n\n.mat-expansion-panel-content {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-form-field {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: inherit;\n  font-weight: 400;\n  line-height: 1.125; }\n\n.mat-form-field-wrapper {\n  padding-bottom: 1.25em; }\n\n.mat-form-field-prefix .mat-icon,\n.mat-form-field-suffix .mat-icon {\n  font-size: 150%;\n  line-height: 1.125; }\n\n.mat-form-field-prefix .mat-icon-button,\n.mat-form-field-suffix .mat-icon-button {\n  height: 1.5em;\n  width: 1.5em; }\n  .mat-form-field-prefix .mat-icon-button .mat-icon,\n  .mat-form-field-suffix .mat-icon-button .mat-icon {\n    height: 1.125em;\n    line-height: 1.125; }\n\n.mat-form-field-infix {\n  padding: 0.4375em 0;\n  border-top: 0.84375em solid transparent; }\n\n.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {\n  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);\n  -ms-transform: translateY(-1.28125em) scale(0.75);\n  width: 133.33333333%; }\n\n.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder {\n  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.002px);\n  -ms-transform: translateY(-1.28125em) scale(0.75);\n  width: 133.33343333%; }\n\n.mat-form-field-placeholder-wrapper {\n  top: -0.84375em;\n  padding-top: 0.84375em; }\n\n.mat-form-field-placeholder {\n  top: 1.28125em; }\n\n.mat-form-field-underline {\n  bottom: 1.25em; }\n\n.mat-form-field-subscript-wrapper {\n  font-size: 75%;\n  margin-top: 0.54166667em;\n  top: calc(100% - 1.66666667em); }\n\n.mat-grid-tile-header,\n.mat-grid-tile-footer {\n  font-size: 14px; }\n  .mat-grid-tile-header .mat-line,\n  .mat-grid-tile-footer .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-grid-tile-header .mat-line:nth-child(n+2),\n    .mat-grid-tile-footer .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\ninput.mat-input-element {\n  margin-top: -0.0625em; }\n\n.mat-menu-item {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 16px;\n  font-weight: 400; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px; }\n\n.mat-radio-button {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select-trigger {\n  height: 1.125em; }\n\n.mat-slide-toggle-content {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-slider-thumb-label-text {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-stepper-vertical, .mat-stepper-horizontal {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-step-label {\n  font-size: 14px;\n  font-weight: 400; }\n\n.mat-step-label-selected {\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-tab-group {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-tab-label, .mat-tab-link {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\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  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0; }\n\n.mat-tooltip {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 10px;\n  padding-top: 6px;\n  padding-bottom: 6px; }\n\n.mat-list-item {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list-option {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n  font-size: 16px; }\n  .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) {\n      font-size: 14px; }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n  font-size: 16px; }\n  .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) {\n      font-size: 14px; }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item {\n  font-size: 12px; }\n  .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\n.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option {\n  font-size: 12px; }\n  .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\n.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-option {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 16px; }\n\n.mat-optgroup-label {\n  font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-simple-snackbar {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px; }\n\n.mat-simple-snackbar-action {\n  line-height: 1;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: 500; }\n\n.mat-ripple {\n  overflow: hidden; }\n  @media screen and (-ms-high-contrast: active) {\n    .mat-ripple {\n      display: none; } }\n\n.mat-ripple.mat-ripple-unbounded {\n  overflow: visible; }\n\n.mat-ripple-element {\n  position: absolute;\n  border-radius: 50%;\n  pointer-events: none;\n  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n  transform: scale(0); }\n\n.mat-option {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  line-height: 48px;\n  height: 48px;\n  padding: 0 16px;\n  text-align: left;\n  text-decoration: none;\n  position: relative;\n  cursor: pointer;\n  outline: none; }\n  .mat-option[disabled] {\n    cursor: default; }\n  [dir='rtl'] .mat-option {\n    text-align: right; }\n  .mat-option .mat-icon {\n    margin-right: 16px; }\n    [dir='rtl'] .mat-option .mat-icon {\n      margin-left: 16px;\n      margin-right: 0; }\n  .mat-option[aria-disabled='true'] {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    cursor: default; }\n  .mat-optgroup .mat-option:not(.mat-option-multiple) {\n    padding-left: 32px; }\n    [dir='rtl'] .mat-optgroup .mat-option:not(.mat-option-multiple) {\n      padding-left: 16px;\n      padding-right: 32px; }\n\n.mat-option-text {\n  display: inline-block; }\n\n.mat-option-ripple {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  pointer-events: none; }\n  @media screen and (-ms-high-contrast: active) {\n    .mat-option-ripple {\n      opacity: 0.5; } }\n\n.mat-option-pseudo-checkbox {\n  margin-right: 8px; }\n  [dir='rtl'] .mat-option-pseudo-checkbox {\n    margin-left: 8px;\n    margin-right: 0; }\n\n.mat-optgroup-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  line-height: 48px;\n  height: 48px;\n  padding: 0 16px;\n  text-align: left;\n  text-decoration: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: default; }\n  .mat-optgroup-label[disabled] {\n    cursor: default; }\n  [dir='rtl'] .mat-optgroup-label {\n    text-align: right; }\n  .mat-optgroup-label .mat-icon {\n    margin-right: 16px; }\n    [dir='rtl'] .mat-optgroup-label .mat-icon {\n      margin-left: 16px;\n      margin-right: 0; }\n\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.cdk-overlay-container, .cdk-global-overlay-wrapper {\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%; }\n\n.cdk-overlay-container {\n  position: fixed;\n  z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n  display: flex;\n  position: absolute;\n  z-index: 1000; }\n\n.cdk-overlay-pane {\n  position: absolute;\n  pointer-events: auto;\n  box-sizing: border-box;\n  z-index: 1000; }\n\n.cdk-overlay-backdrop {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  pointer-events: auto;\n  -webkit-tap-highlight-color: transparent;\n  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n  opacity: 0; }\n  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n    opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n  background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n  background: none; }\n\n.cdk-global-scrollblock {\n  position: fixed;\n  width: 100%;\n  overflow-y: scroll; }\n\n.mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-option {\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n    background: rgba(0, 0, 0, 0.04); }\n  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #1976d2; }\n  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #d32f2f; }\n  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #f44336; }\n  .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n    background: rgba(0, 0, 0, 0.04); }\n  .mat-option.mat-active {\n    background: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.87); }\n  .mat-option.mat-option-disabled {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-optgroup-disabled .mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-pseudo-checkbox {\n  color: rgba(0, 0, 0, 0.54); }\n  .mat-pseudo-checkbox::after {\n    color: #fafafa; }\n\n.mat-pseudo-checkbox-checked,\n.mat-pseudo-checkbox-indeterminate,\n.mat-accent .mat-pseudo-checkbox-checked,\n.mat-accent .mat-pseudo-checkbox-indeterminate {\n  background: #d32f2f; }\n\n.mat-primary .mat-pseudo-checkbox-checked,\n.mat-primary .mat-pseudo-checkbox-indeterminate {\n  background: #1976d2; }\n\n.mat-warn .mat-pseudo-checkbox-checked,\n.mat-warn .mat-pseudo-checkbox-indeterminate {\n  background: #f44336; }\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n  background: #b0b0b0; }\n\n.mat-app-background {\n  background-color: #fafafa; }\n\n.mat-theme-loaded-marker {\n  display: none; }\n\n.mat-autocomplete-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n    background: white; }\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.mat-button, .mat-icon-button {\n  background: transparent; }\n  .mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay {\n    background-color: rgba(25, 118, 210, 0.12); }\n  .mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay {\n    background-color: rgba(211, 47, 47, 0.12); }\n  .mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay {\n    background-color: rgba(244, 67, 54, 0.12); }\n  .mat-button[disabled] .mat-button-focus-overlay, .mat-icon-button[disabled] .mat-button-focus-overlay {\n    background-color: transparent; }\n  .mat-button.mat-primary, .mat-icon-button.mat-primary {\n    color: #1976d2; }\n  .mat-button.mat-accent, .mat-icon-button.mat-accent {\n    color: #d32f2f; }\n  .mat-button.mat-warn, .mat-icon-button.mat-warn {\n    color: #f44336; }\n  .mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-raised-button, .mat-fab, .mat-mini-fab {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: white; }\n  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n    color: white; }\n  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n    color: white; }\n  .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n    color: white; }\n  .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n    background-color: #1976d2; }\n  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n    background-color: #d32f2f; }\n  .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n    background-color: #f44336; }\n  .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n    background-color: rgba(0, 0, 0, 0.12); }\n  .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.2); }\n  .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.2); }\n  .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.2); }\n\n.mat-button.mat-primary .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.1); }\n\n.mat-button.mat-accent .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.1); }\n\n.mat-button.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.1); }\n\n.mat-icon-button.mat-primary .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.2); }\n\n.mat-icon-button.mat-accent .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.2); }\n\n.mat-icon-button.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.2); }\n\n.mat-button-toggle {\n  color: rgba(0, 0, 0, 0.38); }\n  .mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {\n    background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-button-toggle-checked {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-button-toggle-disabled {\n  background-color: #eeeeee;\n  color: rgba(0, 0, 0, 0.38); }\n  .mat-button-toggle-disabled.mat-button-toggle-checked {\n    background-color: #bdbdbd; }\n\n.mat-card {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-card-subtitle {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-frame {\n  border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-checkmark {\n  fill: #fafafa; }\n\n.mat-checkbox-checkmark-path {\n  stroke: #fafafa !important; }\n\n.mat-checkbox-mixedmark {\n  background-color: #fafafa; }\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.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: #b0b0b0; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.26); }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.26); }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.26); }\n\n.mat-chip:not(.mat-basic-chip) {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-chip:not(.mat-basic-chip) .mat-chip-remove {\n    color: rgba(0, 0, 0, 0.87);\n    opacity: 0.4; }\n  .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-primary {\n  background-color: #1976d2;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-warn {\n  background-color: #f44336;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-accent {\n  background-color: #d32f2f;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-table {\n  background: white; }\n\n.mat-row, .mat-header-row {\n  border-bottom-color: rgba(0, 0, 0, 0.12); }\n\n.mat-header-cell {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-cell {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-datepicker-content {\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-calendar-arrow {\n  border-top-color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-next-button,\n.mat-calendar-previous-button {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-table-header {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-table-header-divider::after {\n  background: rgba(0, 0, 0, 0.12); }\n\n.mat-calendar-body-label {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-body-cell-content {\n  color: rgba(0, 0, 0, 0.87);\n  border-color: transparent; }\n  .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n    color: rgba(0, 0, 0, 0.38); }\n\n:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n  background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-calendar-body-selected {\n  background-color: #1976d2;\n  color: white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: rgba(25, 118, 210, 0.4); }\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected) {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n  box-shadow: inset 0 0 0 1px white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n  border-color: rgba(0, 0, 0, 0.18); }\n\n.mat-dialog-container {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-action-row {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {\n  background: rgba(0, 0, 0, 0.04); }\n\n.mat-expansion-panel-header-title {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-expansion-panel-header[aria-disabled='true'] {\n  color: rgba(0, 0, 0, 0.38); }\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.mat-form-field-placeholder {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-hint {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-focused .mat-form-field-placeholder {\n  color: #1976d2; }\n  .mat-focused .mat-form-field-placeholder.mat-accent {\n    color: #d32f2f; }\n  .mat-focused .mat-form-field-placeholder.mat-warn {\n    color: #f44336; }\n\n.mat-focused .mat-form-field-required-marker {\n  color: #d32f2f; }\n\n.mat-form-field-underline {\n  background-color: rgba(0, 0, 0, 0.42); }\n\n.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 1px;\n  background-repeat: repeat-x; }\n\n.mat-form-field-ripple {\n  background-color: #1976d2; }\n  .mat-form-field-ripple.mat-accent {\n    background-color: #d32f2f; }\n  .mat-form-field-ripple.mat-warn {\n    background-color: #f44336; }\n\n.mat-form-field-invalid .mat-form-field-placeholder {\n  color: #f44336; }\n  .mat-form-field-invalid .mat-form-field-placeholder.mat-accent,\n  .mat-form-field-invalid .mat-form-field-placeholder .mat-form-field-required-marker {\n    color: #f44336; }\n\n.mat-form-field-invalid .mat-form-field-ripple {\n  background-color: #f44336; }\n\n.mat-error {\n  color: #f44336; }\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.mat-input-element:disabled {\n  color: rgba(0, 0, 0, 0.42); }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-list-item-disabled {\n  background-color: #eeeeee; }\n\n.mat-divider {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-nav-list .mat-list-item {\n  outline: none; }\n  .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus {\n    background: rgba(0, 0, 0, 0.04); }\n\n.mat-list-option {\n  outline: none; }\n  .mat-list-option:hover, .mat-list-option.mat-list-item-focus {\n    background: rgba(0, 0, 0, 0.04); }\n\n.mat-menu-panel {\n  background: white; }\n\n.mat-menu-item {\n  background: transparent;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-menu-item[disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-menu-item .mat-icon,\n.mat-menu-item-submenu-trigger::after {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-menu-item:hover:not([disabled]),\n.mat-menu-item:focus:not([disabled]),\n.mat-menu-item-highlighted:not([disabled]) {\n  background: rgba(0, 0, 0, 0.04); }\n\n.mat-paginator {\n  background: white; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-paginator-increment,\n.mat-paginator-decrement {\n  border-top: 2px solid rgba(0, 0, 0, 0.54);\n  border-right: 2px solid rgba(0, 0, 0, 0.54); }\n\n.mat-icon-button[disabled] .mat-paginator-increment,\n.mat-icon-button[disabled] .mat-paginator-decrement {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%231e88e5%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar-buffer {\n  background-color: #1e88e5; }\n\n.mat-progress-bar-fill::after {\n  background-color: #1976d2; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23e53935%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n  background-color: #e53935; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n  background-color: #d32f2f; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23ffcdd2%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n  background-color: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n  background-color: #f44336; }\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.mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-radio-disabled .mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-radio-disabled .mat-radio-ripple .mat-ripple-element, .mat-radio-disabled .mat-radio-inner-circle {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-radio-disabled .mat-radio-label-content {\n  color: rgba(0, 0, 0, 0.38); }\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  background-color: #1976d2; }\n\n.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.26); }\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  background-color: #d32f2f; }\n\n.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.26); }\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  background-color: #f44336; }\n\n.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.26); }\n\n.mat-select-disabled .mat-select-value,\n.mat-select-arrow {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-select-content, .mat-select-panel-done-animating {\n  background: white; }\n\n.mat-select-value {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n  background: rgba(0, 0, 0, 0.12); }\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.54); }\n\n.mat-select.mat-select-disabled .mat-select-arrow {\n  color: #f44336; }\n\n.mat-drawer-container {\n  background-color: #fafafa;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-drawer {\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-drawer.mat-drawer-push {\n    background-color: white; }\n\n.mat-drawer-backdrop.mat-drawer-shown {\n  background-color: rgba(0, 0, 0, 0.6); }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #f44336; }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(244, 67, 54, 0.5); }\n\n.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.12); }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #2196f3; }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(33, 150, 243, 0.5); }\n\n.mat-slide-toggle.mat-primary:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle.mat-primary .mat-ripple-element {\n  background-color: rgba(33, 150, 243, 0.12); }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #f44336; }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(244, 67, 54, 0.5); }\n\n.mat-slide-toggle.mat-warn:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.12); }\n\n.mat-disabled .mat-slide-toggle-thumb {\n  background-color: #bdbdbd; }\n\n.mat-disabled .mat-slide-toggle-bar {\n  background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-slide-toggle-thumb {\n  background-color: #fafafa; }\n\n.mat-slide-toggle-bar {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-primary .mat-slider-track-fill,\n.mat-primary .mat-slider-thumb,\n.mat-primary .mat-slider-thumb-label {\n  background-color: #1976d2; }\n\n.mat-primary .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-accent .mat-slider-track-fill,\n.mat-accent .mat-slider-thumb,\n.mat-accent .mat-slider-thumb-label {\n  background-color: #d32f2f; }\n\n.mat-accent .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-warn .mat-slider-track-fill,\n.mat-warn .mat-slider-thumb,\n.mat-warn .mat-slider-thumb-label {\n  background-color: #f44336; }\n\n.mat-warn .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-slider-focus-ring {\n  background-color: rgba(211, 47, 47, 0.2); }\n\n.mat-slider:hover .mat-slider-track-background,\n.cdk-focused .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-disabled .mat-slider-track-background,\n.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider-disabled .mat-slider-thumb {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-disabled:hover .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-min-value .mat-slider-focus-ring {\n  background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.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-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.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-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-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .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-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .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.mat-slider-has-ticks .mat-slider-wrapper::after {\n  border-color: rgba(0, 0, 0, 0.7); }\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.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.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {\n  background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-step-header .mat-step-label,\n.mat-step-header .mat-step-optional {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-step-header .mat-step-icon {\n  background-color: #1976d2;\n  color: white; }\n\n.mat-step-header .mat-step-icon-not-touched {\n  background-color: rgba(0, 0, 0, 0.38);\n  color: white; }\n\n.mat-step-header .mat-step-label.mat-step-label-active {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-stepper-horizontal, .mat-stepper-vertical {\n  background-color: white; }\n\n.mat-stepper-vertical-line::before {\n  border-left-color: rgba(0, 0, 0, 0.12); }\n\n.mat-stepper-horizontal-line {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\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.mat-tab-label, .mat-tab-link {\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.87); }\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.38); }\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.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {\n  background-color: rgba(30, 136, 229, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus {\n  background-color: rgba(229, 57, 53, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus {\n  background-color: rgba(255, 205, 210, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus {\n  background-color: rgba(30, 136, 229, 0.3); }\n\n.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links {\n  background-color: #1976d2; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .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-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-primary .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus {\n  background-color: rgba(229, 57, 53, 0.3); }\n\n.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links {\n  background-color: #d32f2f; }\n\n.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .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-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-accent .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus {\n  background-color: rgba(255, 205, 210, 0.3); }\n\n.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links {\n  background-color: #f44336; }\n\n.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .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-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-warn .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-toolbar {\n  background: whitesmoke;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-toolbar.mat-primary {\n    background: #1976d2;\n    color: white; }\n  .mat-toolbar.mat-accent {\n    background: #d32f2f;\n    color: white; }\n  .mat-toolbar.mat-warn {\n    background: #f44336;\n    color: white; }\n\n.mat-tooltip {\n  background: rgba(97, 97, 97, 0.9); }\n\n.mat-snack-bar-container {\n  background: #323232;\n  color: white; }\n\n.mat-simple-snackbar-action {\n  color: #d32f2f; }\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/* Theme for the ripple elements.*/\n/** The mixins below are shared between mat-menu and mat-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\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/* Theme for the ripple elements.*/\n/** The mixins below are shared between mat-menu and mat-select */\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n/* stylelint-disable material/no-prefixes */\n/* stylelint-enable */\n/**\n * This mixin contains shared option styles between the select and\n * autocomplete components.\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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.mat-h1, .mat-headline, .mat-typography h1 {\n  font: 400 24px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h2, .mat-title, .mat-typography h2 {\n  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h3, .mat-subheading-2, .mat-typography h3 {\n  font: 400 16px/28px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h4, .mat-subheading-1, .mat-typography h4 {\n  font: 400 15px/24px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 16px; }\n\n.mat-h5, .mat-typography h5 {\n  font-size: 11.62px;\n  font-weight: 400;\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  line-height: 20px;\n  margin: 0 0 12px; }\n\n.mat-h6, .mat-typography h6 {\n  font-size: 9.38px;\n  font-weight: 400;\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  line-height: 20px;\n  margin: 0 0 12px; }\n\n.mat-body-strong, .mat-body-2 {\n  font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-body, .mat-body-1, .mat-typography {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n  .mat-body p, .mat-body-1 p, .mat-typography p {\n    margin: 0 0 12px; }\n\n.mat-small, .mat-caption {\n  font: 400 12px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-display-4, .mat-typography .mat-display-4 {\n  font: 300 112px/112px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 56px;\n  letter-spacing: -0.05em; }\n\n.mat-display-3, .mat-typography .mat-display-3 {\n  font: 400 56px/56px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px;\n  letter-spacing: -0.02em; }\n\n.mat-display-2, .mat-typography .mat-display-2 {\n  font: 400 45px/48px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px;\n  letter-spacing: -0.005em; }\n\n.mat-display-1, .mat-typography .mat-display-1 {\n  font: 400 34px/40px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0 0 64px; }\n\n.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-button-toggle {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-card-title {\n  font-size: 24px;\n  font-weight: 400; }\n\n.mat-card-subtitle,\n.mat-card-content,\n.mat-card-header .mat-card-title {\n  font-size: 14px; }\n\n.mat-checkbox {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-checkbox-layout .mat-checkbox-label {\n  line-height: 24px; }\n\n.mat-chip {\n  font-size: 13px;\n  line-height: 18px; }\n  .mat-chip .mat-chip-remove.mat-icon {\n    font-size: 18px; }\n\n.mat-table {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-header-cell {\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-cell {\n  font-size: 14px; }\n\n.mat-calendar {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-calendar-body {\n  font-size: 13px; }\n\n.mat-calendar-body-label,\n.mat-calendar-period-button {\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-calendar-table-header th {\n  font-size: 11px;\n  font-weight: 400; }\n\n.mat-dialog-title {\n  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-expansion-panel-header {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 15px;\n  font-weight: 400; }\n\n.mat-expansion-panel-content {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-form-field {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: inherit;\n  font-weight: 400;\n  line-height: 1.125; }\n\n.mat-form-field-wrapper {\n  padding-bottom: 1.25em; }\n\n.mat-form-field-prefix .mat-icon,\n.mat-form-field-suffix .mat-icon {\n  font-size: 150%;\n  line-height: 1.125; }\n\n.mat-form-field-prefix .mat-icon-button,\n.mat-form-field-suffix .mat-icon-button {\n  height: 1.5em;\n  width: 1.5em; }\n  .mat-form-field-prefix .mat-icon-button .mat-icon,\n  .mat-form-field-suffix .mat-icon-button .mat-icon {\n    height: 1.125em;\n    line-height: 1.125; }\n\n.mat-form-field-infix {\n  padding: 0.4375em 0;\n  border-top: 0.84375em solid transparent; }\n\n.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {\n  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);\n  -ms-transform: translateY(-1.28125em) scale(0.75);\n  width: 133.33333333%; }\n\n.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder {\n  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.002px);\n  -ms-transform: translateY(-1.28125em) scale(0.75);\n  width: 133.33343333%; }\n\n.mat-form-field-placeholder-wrapper {\n  top: -0.84375em;\n  padding-top: 0.84375em; }\n\n.mat-form-field-placeholder {\n  top: 1.28125em; }\n\n.mat-form-field-underline {\n  bottom: 1.25em; }\n\n.mat-form-field-subscript-wrapper {\n  font-size: 75%;\n  margin-top: 0.54166667em;\n  top: calc(100% - 1.66666667em); }\n\n.mat-grid-tile-header,\n.mat-grid-tile-footer {\n  font-size: 14px; }\n  .mat-grid-tile-header .mat-line,\n  .mat-grid-tile-footer .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-grid-tile-header .mat-line:nth-child(n+2),\n    .mat-grid-tile-footer .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\ninput.mat-input-element {\n  margin-top: -0.0625em; }\n\n.mat-menu-item {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 16px;\n  font-weight: 400; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px; }\n\n.mat-radio-button {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-select-trigger {\n  height: 1.125em; }\n\n.mat-slide-toggle-content {\n  font: 400 14px/20px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-slider-thumb-label-text {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-stepper-vertical, .mat-stepper-horizontal {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-step-label {\n  font-size: 14px;\n  font-weight: 400; }\n\n.mat-step-label-selected {\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-tab-group {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-tab-label, .mat-tab-link {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\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  font: 500 20px/32px Roboto, \"Helvetica Neue\", sans-serif;\n  margin: 0; }\n\n.mat-tooltip {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 10px;\n  padding-top: 6px;\n  padding-bottom: 6px; }\n\n.mat-list-item {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list-option {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n  font-size: 16px; }\n  .mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line, .mat-selection-list .mat-list-item .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list .mat-list-item .mat-line:nth-child(n+2) {\n      font-size: 14px; }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n  font-size: 16px; }\n  .mat-list .mat-list-option .mat-line, .mat-nav-list .mat-list-option .mat-line, .mat-selection-list .mat-list-option .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list .mat-list-option .mat-line:nth-child(n+2) {\n      font-size: 14px; }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px;\n  font-weight: 500; }\n\n.mat-list[dense] .mat-list-item, .mat-nav-list[dense] .mat-list-item, .mat-selection-list[dense] .mat-list-item {\n  font-size: 12px; }\n  .mat-list[dense] .mat-list-item .mat-line, .mat-nav-list[dense] .mat-list-item .mat-line, .mat-selection-list[dense] .mat-list-item .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\n.mat-list[dense] .mat-list-option, .mat-nav-list[dense] .mat-list-option, .mat-selection-list[dense] .mat-list-option {\n  font-size: 12px; }\n  .mat-list[dense] .mat-list-option .mat-line, .mat-nav-list[dense] .mat-list-option .mat-line, .mat-selection-list[dense] .mat-list-option .mat-line {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    box-sizing: border-box; }\n    .mat-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2), .mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) {\n      font-size: 12px; }\n\n.mat-list[dense] .mat-subheader, .mat-nav-list[dense] .mat-subheader, .mat-selection-list[dense] .mat-subheader {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 12px;\n  font-weight: 500; }\n\n.mat-option {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 16px; }\n\n.mat-optgroup-label {\n  font: 500 14px/24px Roboto, \"Helvetica Neue\", sans-serif; }\n\n.mat-simple-snackbar {\n  font-family: Roboto, \"Helvetica Neue\", sans-serif;\n  font-size: 14px; }\n\n.mat-simple-snackbar-action {\n  line-height: 1;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: 500; }\n\n.mat-ripple {\n  overflow: hidden; }\n  @media screen and (-ms-high-contrast: active) {\n    .mat-ripple {\n      display: none; } }\n\n.mat-ripple.mat-ripple-unbounded {\n  overflow: visible; }\n\n.mat-ripple-element {\n  position: absolute;\n  border-radius: 50%;\n  pointer-events: none;\n  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n  transform: scale(0); }\n\n.mat-option {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  line-height: 48px;\n  height: 48px;\n  padding: 0 16px;\n  text-align: left;\n  text-decoration: none;\n  position: relative;\n  cursor: pointer;\n  outline: none; }\n  .mat-option[disabled] {\n    cursor: default; }\n  [dir='rtl'] .mat-option {\n    text-align: right; }\n  .mat-option .mat-icon {\n    margin-right: 16px; }\n    [dir='rtl'] .mat-option .mat-icon {\n      margin-left: 16px;\n      margin-right: 0; }\n  .mat-option[aria-disabled='true'] {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    cursor: default; }\n  .mat-optgroup .mat-option:not(.mat-option-multiple) {\n    padding-left: 32px; }\n    [dir='rtl'] .mat-optgroup .mat-option:not(.mat-option-multiple) {\n      padding-left: 16px;\n      padding-right: 32px; }\n\n.mat-option-text {\n  display: inline-block; }\n\n.mat-option-ripple {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  pointer-events: none; }\n  @media screen and (-ms-high-contrast: active) {\n    .mat-option-ripple {\n      opacity: 0.5; } }\n\n.mat-option-pseudo-checkbox {\n  margin-right: 8px; }\n  [dir='rtl'] .mat-option-pseudo-checkbox {\n    margin-left: 8px;\n    margin-right: 0; }\n\n.mat-optgroup-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  line-height: 48px;\n  height: 48px;\n  padding: 0 16px;\n  text-align: left;\n  text-decoration: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: default; }\n  .mat-optgroup-label[disabled] {\n    cursor: default; }\n  [dir='rtl'] .mat-optgroup-label {\n    text-align: right; }\n  .mat-optgroup-label .mat-icon {\n    margin-right: 16px; }\n    [dir='rtl'] .mat-optgroup-label .mat-icon {\n      margin-left: 16px;\n      margin-right: 0; }\n\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.cdk-overlay-container, .cdk-global-overlay-wrapper {\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%; }\n\n.cdk-overlay-container {\n  position: fixed;\n  z-index: 1000; }\n\n.cdk-global-overlay-wrapper {\n  display: flex;\n  position: absolute;\n  z-index: 1000; }\n\n.cdk-overlay-pane {\n  position: absolute;\n  pointer-events: auto;\n  box-sizing: border-box;\n  z-index: 1000; }\n\n.cdk-overlay-backdrop {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  pointer-events: auto;\n  -webkit-tap-highlight-color: transparent;\n  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n  opacity: 0; }\n  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n    opacity: 0.48; }\n\n.cdk-overlay-dark-backdrop {\n  background: rgba(0, 0, 0, 0.6); }\n\n.cdk-overlay-transparent-backdrop {\n  background: none; }\n\n.cdk-global-scrollblock {\n  position: fixed;\n  width: 100%;\n  overflow-y: scroll; }\n\n.mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-option {\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {\n    background: rgba(0, 0, 0, 0.04); }\n  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #1976d2; }\n  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #d32f2f; }\n  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: #f44336; }\n  .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n    background: rgba(0, 0, 0, 0.04); }\n  .mat-option.mat-active {\n    background: rgba(0, 0, 0, 0.04);\n    color: rgba(0, 0, 0, 0.87); }\n  .mat-option.mat-option-disabled {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-optgroup-disabled .mat-optgroup-label {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-pseudo-checkbox {\n  color: rgba(0, 0, 0, 0.54); }\n  .mat-pseudo-checkbox::after {\n    color: #fafafa; }\n\n.mat-pseudo-checkbox-checked,\n.mat-pseudo-checkbox-indeterminate,\n.mat-accent .mat-pseudo-checkbox-checked,\n.mat-accent .mat-pseudo-checkbox-indeterminate {\n  background: #d32f2f; }\n\n.mat-primary .mat-pseudo-checkbox-checked,\n.mat-primary .mat-pseudo-checkbox-indeterminate {\n  background: #1976d2; }\n\n.mat-warn .mat-pseudo-checkbox-checked,\n.mat-warn .mat-pseudo-checkbox-indeterminate {\n  background: #f44336; }\n\n.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,\n.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n  background: #b0b0b0; }\n\n.mat-app-background {\n  background-color: #fafafa; }\n\n.mat-theme-loaded-marker {\n  display: none; }\n\n.mat-autocomplete-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {\n    background: white; }\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.mat-button, .mat-icon-button {\n  background: transparent; }\n  .mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay {\n    background-color: rgba(25, 118, 210, 0.12); }\n  .mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay {\n    background-color: rgba(211, 47, 47, 0.12); }\n  .mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay {\n    background-color: rgba(244, 67, 54, 0.12); }\n  .mat-button[disabled] .mat-button-focus-overlay, .mat-icon-button[disabled] .mat-button-focus-overlay {\n    background-color: transparent; }\n  .mat-button.mat-primary, .mat-icon-button.mat-primary {\n    color: #1976d2; }\n  .mat-button.mat-accent, .mat-icon-button.mat-accent {\n    color: #d32f2f; }\n  .mat-button.mat-warn, .mat-icon-button.mat-warn {\n    color: #f44336; }\n  .mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-raised-button, .mat-fab, .mat-mini-fab {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: white; }\n  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n    color: white; }\n  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n    color: white; }\n  .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n    color: white; }\n  .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {\n    background-color: #1976d2; }\n  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {\n    background-color: #d32f2f; }\n  .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {\n    background-color: #f44336; }\n  .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {\n    background-color: rgba(0, 0, 0, 0.12); }\n  .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.2); }\n  .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.2); }\n  .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.2); }\n\n.mat-button.mat-primary .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.1); }\n\n.mat-button.mat-accent .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.1); }\n\n.mat-button.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.1); }\n\n.mat-icon-button.mat-primary .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.2); }\n\n.mat-icon-button.mat-accent .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.2); }\n\n.mat-icon-button.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.2); }\n\n.mat-button-toggle {\n  color: rgba(0, 0, 0, 0.38); }\n  .mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {\n    background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-button-toggle-checked {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-button-toggle-disabled {\n  background-color: #eeeeee;\n  color: rgba(0, 0, 0, 0.38); }\n  .mat-button-toggle-disabled.mat-button-toggle-checked {\n    background-color: #bdbdbd; }\n\n.mat-card {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-card-subtitle {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-frame {\n  border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-checkbox-checkmark {\n  fill: #fafafa; }\n\n.mat-checkbox-checkmark-path {\n  stroke: #fafafa !important; }\n\n.mat-checkbox-mixedmark {\n  background-color: #fafafa; }\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.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: #b0b0b0; }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.26); }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.26); }\n\n.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.26); }\n\n.mat-chip:not(.mat-basic-chip) {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-chip:not(.mat-basic-chip) .mat-chip-remove {\n    color: rgba(0, 0, 0, 0.87);\n    opacity: 0.4; }\n  .mat-chip:not(.mat-basic-chip) .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-primary {\n  background-color: #1976d2;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-warn {\n  background-color: #f44336;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-chip.mat-chip-selected.mat-accent {\n  background-color: #d32f2f;\n  color: white; }\n  .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove {\n    color: white;\n    opacity: 0.4; }\n  .mat-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover {\n    opacity: 0.54; }\n\n.mat-table {\n  background: white; }\n\n.mat-row, .mat-header-row {\n  border-bottom-color: rgba(0, 0, 0, 0.12); }\n\n.mat-header-cell {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-cell {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-datepicker-content {\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-calendar-arrow {\n  border-top-color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-next-button,\n.mat-calendar-previous-button {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-table-header {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-table-header-divider::after {\n  background: rgba(0, 0, 0, 0.12); }\n\n.mat-calendar-body-label {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-calendar-body-cell-content {\n  color: rgba(0, 0, 0, 0.87);\n  border-color: transparent; }\n  .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n    color: rgba(0, 0, 0, 0.38); }\n\n:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),\n.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n  background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-calendar-body-selected {\n  background-color: #1976d2;\n  color: white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: rgba(25, 118, 210, 0.4); }\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected) {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-calendar-body-today.mat-calendar-body-selected {\n  box-shadow: inset 0 0 0 1px white; }\n\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n  border-color: rgba(0, 0, 0, 0.18); }\n\n.mat-dialog-container {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel {\n  background: white;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-action-row {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused, .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {\n  background: rgba(0, 0, 0, 0.04); }\n\n.mat-expansion-panel-header-title {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-expansion-panel-header-description,\n.mat-expansion-indicator::after {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-expansion-panel-header[aria-disabled='true'] {\n  color: rgba(0, 0, 0, 0.38); }\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.mat-form-field-placeholder {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-hint {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-focused .mat-form-field-placeholder {\n  color: #1976d2; }\n  .mat-focused .mat-form-field-placeholder.mat-accent {\n    color: #d32f2f; }\n  .mat-focused .mat-form-field-placeholder.mat-warn {\n    color: #f44336; }\n\n.mat-focused .mat-form-field-required-marker {\n  color: #d32f2f; }\n\n.mat-form-field-underline {\n  background-color: rgba(0, 0, 0, 0.42); }\n\n.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 1px;\n  background-repeat: repeat-x; }\n\n.mat-form-field-ripple {\n  background-color: #1976d2; }\n  .mat-form-field-ripple.mat-accent {\n    background-color: #d32f2f; }\n  .mat-form-field-ripple.mat-warn {\n    background-color: #f44336; }\n\n.mat-form-field-invalid .mat-form-field-placeholder {\n  color: #f44336; }\n  .mat-form-field-invalid .mat-form-field-placeholder.mat-accent,\n  .mat-form-field-invalid .mat-form-field-placeholder .mat-form-field-required-marker {\n    color: #f44336; }\n\n.mat-form-field-invalid .mat-form-field-ripple {\n  background-color: #f44336; }\n\n.mat-error {\n  color: #f44336; }\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.mat-input-element:disabled {\n  color: rgba(0, 0, 0, 0.42); }\n\n.mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-list-option, .mat-nav-list .mat-list-option, .mat-selection-list .mat-list-option {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-list .mat-subheader, .mat-nav-list .mat-subheader, .mat-selection-list .mat-subheader {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-list-item-disabled {\n  background-color: #eeeeee; }\n\n.mat-divider {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-nav-list .mat-list-item {\n  outline: none; }\n  .mat-nav-list .mat-list-item:hover, .mat-nav-list .mat-list-item.mat-list-item-focus {\n    background: rgba(0, 0, 0, 0.04); }\n\n.mat-list-option {\n  outline: none; }\n  .mat-list-option:hover, .mat-list-option.mat-list-item-focus {\n    background: rgba(0, 0, 0, 0.04); }\n\n.mat-menu-panel {\n  background: white; }\n\n.mat-menu-item {\n  background: transparent;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-menu-item[disabled] {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-menu-item .mat-icon,\n.mat-menu-item-submenu-trigger::after {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-menu-item:hover:not([disabled]),\n.mat-menu-item:focus:not([disabled]),\n.mat-menu-item-highlighted:not([disabled]) {\n  background: rgba(0, 0, 0, 0.04); }\n\n.mat-paginator {\n  background: white; }\n\n.mat-paginator,\n.mat-paginator-page-size .mat-select-trigger {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-paginator-increment,\n.mat-paginator-decrement {\n  border-top: 2px solid rgba(0, 0, 0, 0.54);\n  border-right: 2px solid rgba(0, 0, 0, 0.54); }\n\n.mat-icon-button[disabled] .mat-paginator-increment,\n.mat-icon-button[disabled] .mat-paginator-decrement {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%231e88e5%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar-buffer {\n  background-color: #1e88e5; }\n\n.mat-progress-bar-fill::after {\n  background-color: #1976d2; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23e53935%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-buffer {\n  background-color: #e53935; }\n\n.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {\n  background-color: #d32f2f; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-background {\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27%23ffcdd2%27%2F%3E%3C%2Fsvg%3E\"); }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-buffer {\n  background-color: #ffcdd2; }\n\n.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {\n  background-color: #f44336; }\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.mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.54); }\n\n.mat-radio-disabled .mat-radio-outer-circle {\n  border-color: rgba(0, 0, 0, 0.38); }\n\n.mat-radio-disabled .mat-radio-ripple .mat-ripple-element, .mat-radio-disabled .mat-radio-inner-circle {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-radio-disabled .mat-radio-label-content {\n  color: rgba(0, 0, 0, 0.38); }\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  background-color: #1976d2; }\n\n.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(25, 118, 210, 0.26); }\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  background-color: #d32f2f; }\n\n.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(211, 47, 47, 0.26); }\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  background-color: #f44336; }\n\n.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.26); }\n\n.mat-select-disabled .mat-select-value,\n.mat-select-arrow {\n  color: rgba(0, 0, 0, 0.54); }\n\n.mat-select-content, .mat-select-panel-done-animating {\n  background: white; }\n\n.mat-select-value {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {\n  background: rgba(0, 0, 0, 0.12); }\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.54); }\n\n.mat-select.mat-select-disabled .mat-select-arrow {\n  color: #f44336; }\n\n.mat-drawer-container {\n  background-color: #fafafa;\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-drawer {\n  background-color: white;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-drawer.mat-drawer-push {\n    background-color: white; }\n\n.mat-drawer-backdrop.mat-drawer-shown {\n  background-color: rgba(0, 0, 0, 0.6); }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #f44336; }\n\n.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(244, 67, 54, 0.5); }\n\n.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.12); }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #2196f3; }\n\n.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(33, 150, 243, 0.5); }\n\n.mat-slide-toggle.mat-primary:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle.mat-primary .mat-ripple-element {\n  background-color: rgba(33, 150, 243, 0.12); }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {\n  background-color: #f44336; }\n\n.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {\n  background-color: rgba(244, 67, 54, 0.5); }\n\n.mat-slide-toggle.mat-warn:not(.mat-checked) .mat-ripple-element {\n  background-color: rgba(0, 0, 0, 0.06); }\n\n.mat-slide-toggle.mat-warn .mat-ripple-element {\n  background-color: rgba(244, 67, 54, 0.12); }\n\n.mat-disabled .mat-slide-toggle-thumb {\n  background-color: #bdbdbd; }\n\n.mat-disabled .mat-slide-toggle-bar {\n  background-color: rgba(0, 0, 0, 0.1); }\n\n.mat-slide-toggle-thumb {\n  background-color: #fafafa; }\n\n.mat-slide-toggle-bar {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-primary .mat-slider-track-fill,\n.mat-primary .mat-slider-thumb,\n.mat-primary .mat-slider-thumb-label {\n  background-color: #1976d2; }\n\n.mat-primary .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-accent .mat-slider-track-fill,\n.mat-accent .mat-slider-thumb,\n.mat-accent .mat-slider-thumb-label {\n  background-color: #d32f2f; }\n\n.mat-accent .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-warn .mat-slider-track-fill,\n.mat-warn .mat-slider-thumb,\n.mat-warn .mat-slider-thumb-label {\n  background-color: #f44336; }\n\n.mat-warn .mat-slider-thumb-label-text {\n  color: white; }\n\n.mat-slider-focus-ring {\n  background-color: rgba(211, 47, 47, 0.2); }\n\n.mat-slider:hover .mat-slider-track-background,\n.cdk-focused .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.38); }\n\n.mat-slider-disabled .mat-slider-track-background,\n.mat-slider-disabled .mat-slider-track-fill,\n.mat-slider-disabled .mat-slider-thumb {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-disabled:hover .mat-slider-track-background {\n  background-color: rgba(0, 0, 0, 0.26); }\n\n.mat-slider-min-value .mat-slider-focus-ring {\n  background-color: rgba(0, 0, 0, 0.12); }\n\n.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,\n.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-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,\n.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-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-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .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-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .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.mat-slider-has-ticks .mat-slider-wrapper::after {\n  border-color: rgba(0, 0, 0, 0.7); }\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.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.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover {\n  background-color: rgba(0, 0, 0, 0.04); }\n\n.mat-step-header .mat-step-label,\n.mat-step-header .mat-step-optional {\n  color: rgba(0, 0, 0, 0.38); }\n\n.mat-step-header .mat-step-icon {\n  background-color: #1976d2;\n  color: white; }\n\n.mat-step-header .mat-step-icon-not-touched {\n  background-color: rgba(0, 0, 0, 0.38);\n  color: white; }\n\n.mat-step-header .mat-step-label.mat-step-label-active {\n  color: rgba(0, 0, 0, 0.87); }\n\n.mat-stepper-horizontal, .mat-stepper-vertical {\n  background-color: white; }\n\n.mat-stepper-vertical-line::before {\n  border-left-color: rgba(0, 0, 0, 0.12); }\n\n.mat-stepper-horizontal-line {\n  border-top-color: rgba(0, 0, 0, 0.12); }\n\n.mat-tab-nav-bar,\n.mat-tab-header {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }\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.mat-tab-label, .mat-tab-link {\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {\n    color: rgba(0, 0, 0, 0.38); }\n\n.mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.87); }\n\n.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(0, 0, 0, 0.38); }\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.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {\n  background-color: rgba(30, 136, 229, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-accent .mat-tab-label:focus, .mat-tab-group.mat-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-accent .mat-tab-link:focus {\n  background-color: rgba(229, 57, 53, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-warn .mat-tab-label:focus, .mat-tab-group.mat-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-warn .mat-tab-link:focus {\n  background-color: rgba(255, 205, 210, 0.3); }\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-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {\n  background-color: white; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label:focus, .mat-tab-group.mat-background-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-primary .mat-tab-link:focus {\n  background-color: rgba(30, 136, 229, 0.3); }\n\n.mat-tab-group.mat-background-primary .mat-tab-header, .mat-tab-group.mat-background-primary .mat-tab-links, .mat-tab-nav-bar.mat-background-primary .mat-tab-header, .mat-tab-nav-bar.mat-background-primary .mat-tab-links {\n  background-color: #1976d2; }\n\n.mat-tab-group.mat-background-primary .mat-tab-label, .mat-tab-group.mat-background-primary .mat-tab-link, .mat-tab-nav-bar.mat-background-primary .mat-tab-label, .mat-tab-nav-bar.mat-background-primary .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .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-pagination-chevron, .mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-primary .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-tab-group.mat-background-accent .mat-tab-label:focus, .mat-tab-group.mat-background-accent .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-accent .mat-tab-link:focus {\n  background-color: rgba(229, 57, 53, 0.3); }\n\n.mat-tab-group.mat-background-accent .mat-tab-header, .mat-tab-group.mat-background-accent .mat-tab-links, .mat-tab-nav-bar.mat-background-accent .mat-tab-header, .mat-tab-nav-bar.mat-background-accent .mat-tab-links {\n  background-color: #d32f2f; }\n\n.mat-tab-group.mat-background-accent .mat-tab-label, .mat-tab-group.mat-background-accent .mat-tab-link, .mat-tab-nav-bar.mat-background-accent .mat-tab-label, .mat-tab-nav-bar.mat-background-accent .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .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-pagination-chevron, .mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-accent .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-tab-group.mat-background-warn .mat-tab-label:focus, .mat-tab-group.mat-background-warn .mat-tab-link:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-label:focus, .mat-tab-nav-bar.mat-background-warn .mat-tab-link:focus {\n  background-color: rgba(255, 205, 210, 0.3); }\n\n.mat-tab-group.mat-background-warn .mat-tab-header, .mat-tab-group.mat-background-warn .mat-tab-links, .mat-tab-nav-bar.mat-background-warn .mat-tab-header, .mat-tab-nav-bar.mat-background-warn .mat-tab-links {\n  background-color: #f44336; }\n\n.mat-tab-group.mat-background-warn .mat-tab-label, .mat-tab-group.mat-background-warn .mat-tab-link, .mat-tab-nav-bar.mat-background-warn .mat-tab-label, .mat-tab-nav-bar.mat-background-warn .mat-tab-link {\n  color: white; }\n  .mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .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-pagination-chevron, .mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {\n  border-color: white; }\n\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-pagination-disabled .mat-tab-header-pagination-chevron {\n  border-color: rgba(255, 255, 255, 0.4); }\n\n.mat-tab-group.mat-background-warn .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn .mat-ripple-element {\n  background-color: rgba(255, 255, 255, 0.12); }\n\n.mat-toolbar {\n  background: whitesmoke;\n  color: rgba(0, 0, 0, 0.87); }\n  .mat-toolbar.mat-primary {\n    background: #1976d2;\n    color: white; }\n  .mat-toolbar.mat-accent {\n    background: #d32f2f;\n    color: white; }\n  .mat-toolbar.mat-warn {\n    background: #f44336;\n    color: white; }\n\n.mat-tooltip {\n  background: rgba(97, 97, 97, 0.9); }\n\n.mat-snack-bar-container {\n  background: #323232;\n  color: white; }\n\n.mat-simple-snackbar-action {\n  color: #d32f2f; }\n\n/************************************\n\n             Media queries\n\n To use these, put this snippet in the appropriate selector:\n\n     @include bp(tiny) {\n         background-color: purple;\n     }\n\n     Replace \"tiny\" with \"medium\" or \"big\" as necessary.\n*************************************/\n/* ==============================\n   BASE STYLES\n   ============================== */\nbody {\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  margin: 0;\n  color: #333;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\nh1 {\n  display: inline-block;\n  font-size: 24px;\n  font-weight: 500;\n  margin: 8px 0px; }\n\nh1:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  width: 40%;\n  margin: 24px 0px 10px;\n  background: #DBDBDB;\n  clear: both; }\n\nh2 {\n  font-size: 22px;\n  font-weight: 500;\n  margin: 32px 0px 24px;\n  clear: both; }\n\nh3 {\n  font-size: 20px;\n  font-weight: 400;\n  margin: 24px 0px;\n  clear: both; }\n\nh4 {\n  font-size: 18px;\n  font-weight: 400;\n  margin: 8px 0px;\n  clear: both; }\n\nh5 {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 8px 0px;\n  clear: both; }\n\nh6 {\n  color: #6e6e6e;\n  font-size: 16px;\n  font-weight: 500;\n  margin: 8px 0px;\n  clear: both; }\n\n@media screen and (max-width: 600px) {\n  h1 {\n    margin: 0; } }\n\n@media screen and (max-width: 600px) {\n  h1:after, h2, h3, h4, h5, h6 {\n    margin: 8px 0; } }\n\n.mat-tab-body-wrapper h2 {\n  margin-top: 0; }\n\np, ol, ul, ol, li, input, a {\n  font-size: 14px;\n  line-height: 24px;\n  letter-spacing: 0.30px;\n  font-weight: 400; }\n  p > em, ol > em, ul > em, ol > em, li > em, input > em, a > em {\n    letter-spacing: 0.30px; }\n\nol li, ol p {\n  margin: 4px 0; }\n\nli p {\n  margin: 0; }\n\na {\n  text-decoration: none; }\n\n.app-toolbar a {\n  font-size: 16px;\n  font-weight: 400;\n  color: white;\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  text-transform: uppercase;\n  padding: 21px 0; }\n\nstrong {\n  font-weight: 500; }\n\ntable {\n  border-collapse: collapse;\n  border-radius: 2px;\n  border-spacing: 0;\n  margin: 0 0 32px 0; }\n\ntable tbody th {\n  max-width: 100px;\n  padding: 13px 32px;\n  text-align: left; }\n\ntd {\n  font-weight: 400;\n  padding: 8px 30px;\n  letter-spacing: 0.30px; }\n  td p {\n    margin: 0; }\n\nth {\n  font-size: 16px;\n  font-weight: 500;\n  padding: 13px 32px;\n  text-align: left; }\n\np > code, li > code, table code {\n  font-family: \"Droid Sans Mono\", monospace;\n  font-size: 85%;\n  color: #333;\n  letter-spacing: 0;\n  line-height: 1;\n  padding: 2px 6px;\n  background-color: #F1F1F1;\n  border-radius: 4px; }\n\ncode {\n  font-family: \"Droid Sans Mono\", monospace;\n  font-size: 90%; }\n\n.sidenav-content a {\n  color: #1976D2; }\n  .sidenav-content a:hover {\n    color: #6e6e6e; }\n\n/* ==============================\n   LAYOUT STYLES\n   ============================== */\n.api-section {\n  position: relative; }\n  .api-section pre {\n    white-space: pre-wrap; }\n  .api-section table.api-table {\n    min-width: 680px; }\n    .api-section table.api-table thead th {\n      color: white;\n      font-size: 16px;\n      background-color: #1976D2;\n      border-radius: 4px 4px 0 0;\n      text-transform: none;\n      padding: 8px 24px; }\n    .api-section table.api-table tbody pre {\n      white-space: normal;\n      margin: 4px;\n      padding: 4px 16px; }\n    .api-section table.api-table tbody td, .api-section table.api-table tbody th {\n      padding: 0; }\n    .api-section table.api-table tbody th {\n      max-width: 150px; }\n\n.api-header label {\n  border-radius: 4px;\n  padding: 4px 16px;\n  display: inline;\n  font-size: 14px;\n  color: white;\n  margin: 0 8px 0 16px;\n  font-weight: 500;\n  text-transform: uppercase; }\n  @media screen and (max-width: 600px) {\n    .api-header label {\n      display: block;\n      margin: 8px 0; } }\n  .api-header label.api-status-label {\n    background-color: #6e6e6e; }\n  .api-header label.api-type-label {\n    background-color: #1E88E5; }\n    .api-header label.api-type-label.all {\n      background: #FFFFFF; }\n    .api-header label.api-type-label.decorator {\n      background: #1565C0; }\n    .api-header label.api-type-label.directive {\n      background: #D81B60; }\n    .api-header label.api-type-label.pipe {\n      background: #546E7A; }\n    .api-header label.api-type-label.class {\n      background: #2196F3; }\n    .api-header label.api-type-label.interface {\n      background: #009688; }\n    .api-header label.api-type-label.function {\n      background: #4CAF50; }\n    .api-header label.api-type-label.enum {\n      background: #FFA000; }\n    .api-header label.api-type-label.const {\n      background: #6e6e6e; }\n    .api-header label.api-type-label.let {\n      background: #6e6e6e; }\n    .api-header label.api-type-label.var {\n      background: #6e6e6e; }\n    .api-header label.api-type-label.type-alias {\n      background: #7CB342; }\n    .api-header label.api-type-label.module {\n      background: #8E24AA; }\n\naio-shell.page-docs .sidenav-content {\n  margin: auto; }\n\n.sidenav-content {\n  min-height: 100vh;\n  padding: 80px 3rem 1rem; }\n\n@media (max-width: 600px) {\n  aio-menu {\n    display: none; }\n  .sidenav-content {\n    min-height: 450px;\n    padding: 80px 1rem 1rem; } }\n\n.sidenav-container {\n  width: 100%;\n  height: 100vh; }\n\n.sidenav-content button {\n  min-width: 50px; }\n\n#guide-change-log h2::before {\n  content: \"\";\n  display: block;\n  height: 1px;\n  margin: 24px 0px;\n  background: #DBDBDB; }\n\n.no-animations aio-doc-viewer > * {\n  transition: none !important; }\n\nfooter {\n  position: relative;\n  line-height: 24px;\n  flex: 1;\n  padding: 48px;\n  z-index: 0;\n  background-color: #1976D2;\n  color: #FAFAFA;\n  font-weight: 300; }\n  footer aio-footer {\n    position: relative;\n    z-index: 0; }\n  footer .footer-block {\n    margin: 0 24px;\n    vertical-align: top; }\n  footer a {\n    color: #FAFAFA;\n    font-weight: 300;\n    text-decoration: none;\n    z-index: 20;\n    position: relative; }\n    footer a:hover {\n      text-decoration: underline; }\n    footer a:visited {\n      text-decoration: none; }\n  footer a.action {\n    cursor: pointer; }\n  footer h3 {\n    font-size: 16px;\n    text-transform: uppercase;\n    font-weight: 400;\n    margin: 0 0 16px; }\n  footer p {\n    text-align: center;\n    margin: 10px 0px 5px; }\n    @media (max-width: 480px) {\n      footer p {\n        text-align: left; } }\n  footer div.grid-fluid {\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n    justify-content: center;\n    text-align: left;\n    margin: 0 0 40px; }\n    footer div.grid-fluid ul {\n      list-style-position: inside;\n      padding: 0px;\n      margin: 0px; }\n      footer div.grid-fluid ul li {\n        list-style-type: none;\n        padding: 0px;\n        text-align: left; }\n    @media (max-width: 480px) {\n      footer div.grid-fluid {\n        flex-direction: column; }\n        footer div.grid-fluid .footer-block {\n          margin: 8px 24px; } }\n  @media (max-width: 700px) {\n    footer h3 {\n      font-size: 110%; } }\n  @media (max-width: 600px) {\n    footer h3 {\n      font-size: 100%; } }\n\nfooter::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: url(\"../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png\") top 0 left 0 repeat, url(\"../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png\") top 80px left 160px repeat;\n  opacity: 0.05;\n  background-size: 320px auto; }\n\nhtml, body {\n  height: 100%; }\n\nbody {\n  background-color: #FAFAFA; }\n\n.clearfix {\n  content: \"\";\n  display: table;\n  clear: both; }\n\n.clear {\n  clear: both; }\n\n.l-clearfix:after, .clearfix:after {\n  content: \"\";\n  display: table;\n  clear: both; }\n\n.is-visible {\n  display: block !important; }\n\n.l-flex-wrap {\n  display: flex;\n  flex-wrap: wrap; }\n\n.flex-center {\n  display: flex;\n  justify-content: center; }\n\n.center {\n  text-align: center; }\n\n.visually-hidden {\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important; }\n\n.text-uppercase {\n  text-transform: uppercase; }\n\n.hero {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  min-height: 480px;\n  height: 80vh;\n  max-height: 560px;\n  box-sizing: border-box;\n  padding: 48px 48px 32px 48px;\n  overflow: hidden;\n  transform: skewY(8deg);\n  transform-origin: 100%; }\n  @media (max-width: 480px) {\n    .hero {\n      max-height: 486px;\n      padding-top: 40px;\n      transform: none; } }\n  .hero h1:after {\n    content: none; }\n  .hero .hero-title {\n    display: inline-block;\n    font-size: 28px;\n    font-weight: 400;\n    line-height: 48px;\n    margin: 0 8px 0 0;\n    text-transform: uppercase; }\n    .hero .hero-title.is-standard-case {\n      text-transform: none; }\n\nsection#intro {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 900px;\n  height: 480px;\n  margin: 0 auto -32px;\n  padding: 48px 0 0;\n  color: white; }\n  @media (max-width: 780px) {\n    section#intro {\n      flex-direction: column;\n      justify-content: center;\n      width: 100%;\n      max-width: 100vw;\n      padding: 40px 0 32px; }\n      section#intro button {\n        margin: 0;\n        height: 60px; } }\n  section#intro .homepage-container {\n    width: 100%;\n    max-width: 1040px;\n    margin: 0 auto;\n    margin-top: -7%;\n    padding-top: 0;\n    padding-bottom: 0; }\n    @media (max-width: 780px) {\n      section#intro .homepage-container {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        max-width: 100%;\n        padding: 0; } }\n  section#intro .hero-headline {\n    font-size: 40px;\n    line-height: 64px;\n    font-weight: 500;\n    margin: 32px 0; }\n    section#intro .hero-headline:after {\n      display: none; }\n    @media (max-width: 780px) {\n      section#intro .hero-headline {\n        text-align: center; } }\n    @media (max-width: 575px) {\n      section#intro .hero-headline {\n        font-size: 32px;\n        line-height: 50px; } }\n  section#intro .hero-logo {\n    display: flex;\n    width: 400px; }\n    @media (max-width: 780px) {\n      section#intro .hero-logo {\n        justify-content: center; } }\n    section#intro .hero-logo img {\n      width: 400px;\n      height: 400px;\n      margin-bottom: 8px;\n      padding: 0;\n      filter: drop-shadow(0 2px 2px rgba(10, 16, 20, 0.24)); }\n      @media (max-width: 780px) {\n        section#intro .hero-logo img {\n          width: 250px;\n          height: 250px; } }\n\n.announcement-bar {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-around;\n  align-items: center;\n  max-width: 50vw;\n  margin: 0 auto;\n  padding: 16px;\n  background-color: #FFFFFF;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  box-sizing: border-box;\n  transition: all 0.3s ease-in; }\n  @media (max-width: 992px) {\n    .announcement-bar {\n      flex-direction: column;\n      text-align: center;\n      padding: 32px 16px; } }\n  @media (max-width: 768px) {\n    .announcement-bar {\n      width: 100%;\n      max-width: none; } }\n  .announcement-bar > * {\n    margin: 8px; }\n  .announcement-bar .button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    min-width: 160px;\n    font-size: 16px;\n    color: #FFFFFF;\n    background-color: #1976D2;\n    border-radius: 48px;\n    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n    box-sizing: border-box;\n    cursor: pointer; }\n    .announcement-bar .button:hover {\n      color: rgba(255, 255, 255, 0.7); }\n  .announcement-bar .material-icons {\n    display: none;\n    right: 0;\n    position: static;\n    transition: all 0.3s ease-in;\n    font-size: 16px; }\n  .announcement-bar p {\n    font-size: 16px;\n    margin: 8px;\n    text-align: center; }\n\n.background-sky {\n  background-color: #1976D2;\n  background: linear-gradient(145deg, #0D47A1, #42A5F5);\n  color: #FFFFFF; }\n\n.home-row .card {\n  height: 70%;\n  width: auto;\n  background-color: #FFFFFF;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  box-sizing: border-box;\n  transition: box-shadow .5s;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n  width: 70%;\n  min-width: 350px;\n  height: auto;\n  margin: auto;\n  padding: 24px;\n  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12); }\n  .home-row .card:hover {\n    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);\n    text-decoration: none; }\n  @media (max-width: 600px) {\n    .home-row .card {\n      margin: 16px auto 0; }\n      .home-row .card h2 {\n        margin: 0; }\n      .home-row .card img {\n        max-width: none;\n        height: 70px; } }\n  @media (max-width: 1300px) {\n    .home-row .card img {\n      height: 70px;\n      max-width: none; } }\n  .home-row .card img {\n    margin: 16px; }\n  .home-row .card .card-text-container {\n    margin: 0 16px; }\n    .home-row .card .card-text-container p {\n      text-align: left;\n      color: #333;\n      margin: 0;\n      padding: 8px 0; }\n  .home-row .card:hover h2 {\n    color: #1976D2; }\n\n.button.hero-cta {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 184px;\n  height: 40px;\n  padding: 0 24px;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 40px;\n  background-color: #FFFFFF;\n  border-radius: 48px;\n  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n  box-sizing: border-box;\n  cursor: pointer; }\n  .button.hero-cta:hover {\n    opacity: 0.9; }\n\naio-shell.page-resources section, aio-shell.page-events section, aio-shell.page-features section, aio-shell.page-presskit section, aio-shell.page-contribute section {\n  padding: 0rem 0rem 3rem; }\n\naio-shell.page-home section {\n  padding: 0; }\n\naio-shell.page-home article, aio-shell.page-resources article, aio-shell.page-events article, aio-shell.page-contribute article {\n  padding: 32px; }\n  @media (max-width: 800px) {\n    aio-shell.page-home article, aio-shell.page-resources article, aio-shell.page-events article, aio-shell.page-contribute article {\n      padding: 24px; } }\n\naio-shell.page-features article {\n  padding: 0 3rem; }\n\n@media (max-width: 1300px) {\n  aio-shell.page-home .content img, aio-shell.page-resources .content img, aio-shell.page-events .content img, aio-shell.page-features .content img {\n    max-width: none; } }\n\naio-shell.page-home .feature-section img, aio-shell.page-resources .feature-section img, aio-shell.page-events .feature-section img, aio-shell.page-features .feature-section img {\n  max-width: 70px; }\n\n@media (max-width: 600px) {\n  aio-shell.page-home mat-sidenav-container.sidenav-container, aio-shell.page-resources mat-sidenav-container.sidenav-container, aio-shell.page-events mat-sidenav-container.sidenav-container, aio-shell.page-features mat-sidenav-container.sidenav-container {\n    padding-top: 0; } }\n\naio-shell .cta-bar .hero-cta {\n  color: #1976D2; }\n\n.cta-bar.announcement-bar {\n  background: none;\n  box-shadow: none; }\n\n.text-headline {\n  font-size: 20px;\n  font-weight: 500;\n  color: #1976D2;\n  margin-top: 10px;\n  text-transform: uppercase; }\n\naio-shell:not(.view-SideNav) mat-sidenav-container.sidenav-container {\n  max-width: none; }\n\ndiv[layout=row] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box; }\n  @media (max-width: 480px) {\n    div[layout=row] {\n      display: block; } }\n\n.layout-row {\n  flex-direction: row; }\n\n.home-rows {\n  overflow: hidden; }\n  @media (max-width: 600px) {\n    .home-rows {\n      margin: 0; } }\n\n.background-superhero-paper {\n  background-size: 100%;\n  background-blend-mode: multiply; }\n\n.home-row {\n  max-width: 920px;\n  margin: 32px auto; }\n  .home-row .promo-img-container, .home-row .text-container {\n    max-width: 50%; }\n    @media (max-width: 480px) {\n      .home-row .promo-img-container, .home-row .text-container {\n        max-width: 100%;\n        text-align: center; }\n        .home-row .promo-img-container:nth-child(even), .home-row .text-container:nth-child(even) {\n          flex-direction: column-reverse; } }\n  .home-row .text-block {\n    padding-right: 15%; }\n    @media (max-width: 600px) {\n      .home-row .text-block {\n        padding: 0; } }\n  .home-row .promo-img-container img {\n    max-width: 90% !important; }\n  .home-row .promo-img-container p {\n    margin: 0 20px; }\n  .home-row .promo-img-container img {\n    max-width: 90%; }\n    @media (max-width: 599px) {\n      .home-row .promo-img-container img {\n        max-width: 100%;\n        float: initial !important; } }\n\n.marketing-banner {\n  background-color: #378fe7;\n  margin-top: 64px;\n  padding: 32px; }\n  @media (max-width: 600px) {\n    .marketing-banner {\n      margin-top: 56px;\n      padding: 18px; } }\n  .marketing-banner .banner-headline {\n    text-transform: uppercase;\n    font-size: 24px;\n    font-weight: 300;\n    color: white;\n    margin: 0;\n    -webkit-margin-before: 0;\n    -webkit-margin-after: 0; }\n    @media (max-width: 600px) {\n      .marketing-banner .banner-headline {\n        font-size: 18px;\n        font-weight: 400; } }\n    .marketing-banner .banner-headline:after {\n      display: none; }\n\n.page-features .marketing-banner {\n  margin-bottom: 20px; }\n\n#file-not-found {\n  padding: 3rem 3rem 3rem; }\n\n.nf-container {\n  align-items: center;\n  padding: 32px; }\n\n.nf-response {\n  margin: 32px;\n  height: 100%;\n  flex-direction: column; }\n  .nf-response h1 {\n    font-size: 48px;\n    color: #1976D2;\n    text-transform: uppercase;\n    margin: 8px 0; }\n\n.nf-icon.material-icons {\n  color: #1976D2;\n  font-size: 100px;\n  position: static; }\n\n.starting.mat-drawer-transition .mat-drawer-content {\n  transition: none; }\n\naio-nav-menu {\n  display: block;\n  margin: 0 auto;\n  font-size: 13px; }\n  aio-nav-menu ul, aio-nav-menu a {\n    padding: 0;\n    margin: 0; }\n  aio-nav-menu:first-child {\n    margin-top: 16px; }\n  aio-nav-menu aio-nav-item div a {\n    padding-left: 6px; }\n\nmat-sidenav.mat-sidenav.sidenav {\n  position: fixed;\n  top: 64px;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  min-width: 260px;\n  background-color: #FAFAFA;\n  box-shadow: 6px 0 6px rgba(0, 0, 0, 0.1); }\n  mat-sidenav.mat-sidenav.sidenav.collapsed {\n    top: 56px; }\n\nmat-sidenav-container.sidenav-container {\n  min-height: 100%;\n  height: auto !important;\n  max-width: 100%;\n  margin: 0;\n  transform: none; }\n  mat-sidenav-container.sidenav-container.has-floating-toc {\n    max-width: 82%; }\n\nmat-sidenav-container div.mat-sidenav-content {\n  height: auto; }\n\n.vertical-menu-item {\n  box-sizing: border-box;\n  color: #333;\n  cursor: pointer;\n  display: block;\n  max-width: 260px;\n  overflow-wrap: break-word;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  text-decoration: none;\n  text-align: left;\n  width: 93%;\n  word-wrap: break-word; }\n  .vertical-menu-item:hover {\n    background-color: #DBDBDB;\n    color: #1976D2;\n    text-shadow: 0 0 5px #ffffff; }\n  .vertical-menu-item:focus {\n    outline: #1E88E5 auto 2px; }\n  .vertical-menu-item .mat-icon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 4px; }\n\n.vertical-menu-item.selected {\n  color: #1976D2; }\n\nbutton.vertical-menu-item {\n  border: none;\n  background-color: transparent;\n  margin-right: 0;\n  padding-left: 6px;\n  padding-top: 8px;\n  padding-bottom: 10px; }\n\n.heading {\n  color: #333;\n  cursor: pointer;\n  position: relative;\n  text-transform: uppercase; }\n\n.heading-children.expanded {\n  visibility: visible;\n  opacity: 1;\n  max-height: 4000px;\n  transition: visibility 500ms, opacity 500ms, max-height 500ms;\n  -webkit-transition-timing-function: ease-in-out;\n  transition-timing-function: ease-in-out; }\n\n.heading-children.collapsed {\n  visibility: hidden;\n  opacity: 0;\n  max-height: 1px;\n  transition: visibility 275ms, opacity 275ms, max-height 280ms;\n  -webkit-transition-timing-function: ease-out;\n  transition-timing-function: ease-out; }\n\n.no-animations .heading-children.expanded, .no-animations .heading-children.collapsed {\n  transition: none !important; }\n\n.level-1 {\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  margin-left: 14px;\n  transition: background-color 0.2s;\n  text-transform: uppercase; }\n\n.level-2 {\n  color: #6e6e6e;\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  margin-left: 12px;\n  text-transform: none; }\n\n.level-3 {\n  color: #6e6e6e;\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  font-size: 14px;\n  margin-left: 10px; }\n\n.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n  -ms-transform: rotate(90deg);\n  transform: rotate(90deg);\n  transition: transform 150ms;\n  transition-timing-function: ease-in-out; }\n\n.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {\n  -moz-transform: rotate(0deg);\n  -webkit-transform: rotate(0deg);\n  -o-transform: rotate(0deg);\n  -ms-transform: rotate(0deg);\n  transform: rotate(0deg);\n  transition: transform 150ms;\n  transition-timing-function: ease-in-out; }\n\naio-nav-menu.top-menu {\n  padding: 24px 0 0; }\n  aio-nav-menu.top-menu aio-nav-item:last-child div {\n    border-bottom: 1px solid rgba(110, 110, 110, 0.5); }\n  aio-nav-menu.top-menu aio-nav-item:first-child div {\n    border-top: 1px solid rgba(110, 110, 110, 0.5); }\n\nmat-sidenav .doc-version {\n  padding: 8px;\n  border-top: 1px solid #DBDBDB; }\n  mat-sidenav .doc-version select {\n    outline: none;\n    width: 100%;\n    background: rgba(219, 219, 219, 0.5);\n    height: 32px;\n    border: 1px solid #DBDBDB;\n    color: #333; }\n    mat-sidenav .doc-version select option {\n      font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n      font-size: 14px; }\n\nnav#main-table-of-contents {\n  width: 200px;\n  height: 900px;\n  position: fixed;\n  right: 0;\n  top: 50px;\n  bottom: 100px;\n  margin-left: 32px;\n  background-color: #1976D2; }\n\nmat-toolbar.mat-toolbar {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); }\n  mat-toolbar.mat-toolbar mat-toolbar-row {\n    padding: 0 16px 0 0; }\n  mat-toolbar.mat-toolbar mat-icon {\n    color: #FFFFFF; }\n\naio-shell.page-home mat-toolbar.mat-toolbar {\n  background-color: #1976D2; }\n  @media (min-width: 481px) {\n    aio-shell.page-home mat-toolbar.mat-toolbar:not(.transitioning) {\n      background-color: transparent;\n      transition: background-color .2s linear; } }\n\naio-shell.page-home mat-toolbar.mat-toolbar,\naio-shell.page-features mat-toolbar.mat-toolbar,\naio-shell.page-events mat-toolbar.mat-toolbar,\naio-shell.page-resources mat-toolbar.mat-toolbar {\n  box-shadow: none; }\n  @media (min-width: 481px) {\n    aio-shell.page-home mat-toolbar.mat-toolbar,\n    aio-shell.page-features mat-toolbar.mat-toolbar,\n    aio-shell.page-events mat-toolbar.mat-toolbar,\n    aio-shell.page-resources mat-toolbar.mat-toolbar {\n      position: absolute; } }\n\n@media (min-width: 992px) {\n  aio-shell.folder-api mat-toolbar.mat-toolbar .hamburger.mat-button,\n  aio-shell.folder-docs mat-toolbar.mat-toolbar .hamburger.mat-button,\n  aio-shell.folder-guide mat-toolbar.mat-toolbar .hamburger.mat-button,\n  aio-shell.folder-tutorial mat-toolbar.mat-toolbar .hamburger.mat-button {\n    margin: 0; } }\n\n.hamburger.mat-button {\n  height: 100%;\n  margin: 0;\n  padding: 0; }\n  .hamburger.mat-button:not(.starting) {\n    transition-duration: .4s;\n    transition-property: color, margin;\n    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }\n  @media (min-width: 992px) {\n    .hamburger.mat-button {\n      margin: 0 24px 0 -88px; } }\n  .hamburger.mat-button:hover {\n    color: #FAFAFA; }\n  .hamburger.mat-button .mat-icon {\n    color: white;\n    position: inherit; }\n\n.nav-link.home img {\n  position: relative;\n  margin-top: -21px;\n  margin-right: 20px;\n  top: 12px;\n  height: 40px; }\n  @media (max-width: 992px) {\n    .nav-link.home img:hover {\n      transform: scale(1.1); } }\n\naio-top-menu {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 80%; }\n  aio-top-menu ul {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    list-style-position: inside;\n    padding: 0px;\n    margin: 0px; }\n    aio-top-menu ul li {\n      padding-bottom: 2px;\n      list-style-type: none;\n      cursor: pointer; }\n      aio-top-menu ul li:hover {\n        opacity: 0.7; }\n      aio-top-menu ul li:focus {\n        background-color: #1E88E5;\n        outline: none; }\n  aio-top-menu a.nav-link {\n    margin: 0;\n    padding: 24px 16px;\n    cursor: pointer; }\n    aio-top-menu a.nav-link:focus {\n      background: rgba(255, 255, 255, 0.15);\n      border-radius: 4px;\n      outline: none;\n      padding: 8px 16px; }\n\naio-search-box.search-container {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  min-width: 150px;\n  height: 100%; }\n  aio-search-box.search-container input {\n    color: #333;\n    border: none;\n    border-radius: 100px;\n    background-color: #FAFAFA;\n    padding: 5px 16px;\n    margin-left: 8px;\n    width: 180px;\n    max-width: 240px;\n    height: 50%;\n    -webkit-appearance: none; }\n    aio-search-box.search-container input:focus {\n      outline: none; }\n    @media (min-width: 1000px) {\n      aio-search-box.search-container input {\n        transition: width 0.4s ease-in-out; }\n        aio-search-box.search-container input:focus {\n          width: 50%; } }\n    @media (max-width: 480px) {\n      aio-search-box.search-container input {\n        width: 150px; } }\n\n@media print {\n  * {\n    box-shadow: none !important; }\n  h1 {\n    height: 40px !important;\n    color: #333 !important; }\n  h1, h2, h3, h4, h5, h6 {\n    page-break-after: avoid; }\n  ul, ol, img, code-example, table, tr, .alert, .callout, .l-subsection, .feature {\n    page-break-inside: avoid; }\n  table tbody tr:last-child td {\n    border-bottom: 1px solid #DBDBDB !important; }\n  img {\n    max-width: 100% !important; }\n  p {\n    widows: 4; }\n  p > code, li > code, table code {\n    color: #1976D2 !important; }\n  .no-print {\n    display: none !important; }\n  mat-sidenav.sidenav.mat-sidenav {\n    display: none !important; }\n  .mat-sidenav-content {\n    margin: 0 !important; }\n  mat-sidenav-container.sidenav-container {\n    min-width: 100vw; }\n  .sidenav-content {\n    overflow: visible; }\n  .filetree {\n    max-width: 100%; }\n  aio-code code {\n    border: none !important; }\n  code-example pre.lang-bash code span {\n    color: #6e6e6e !important; }\n  code-example pre.lang-sh code span {\n    color: #333 !important; }\n  code-example header {\n    border: 0.5px solid #DBDBDB;\n    color: #333; }\n  .content code {\n    border: 0.5px solid #DBDBDB; }\n  .mat-tab-labels div.mat-tab-label:not(.mat-tab-label-active) span {\n    font-style: italic; }\n  .mat-tab-labels div.mat-tab-label.mat-tab-label-active span {\n    font-weight: bold; }\n  .api-header label {\n    color: #333 !important;\n    font-weight: bold !important;\n    margin: 2px !important;\n    padding: 0 !important;\n    display: block !important; }\n  .feature-section img {\n    max-width: 70px !important; } }\n\n/* ==============================\n   MODULE STYLES\n   ============================== */\n.alert, .callout {\n  padding: 16px;\n  margin: 24px 0px;\n  font-size: 14px;\n  color: #333;\n  width: 100%;\n  box-sizing: border-box; }\n  .alert.is-critical, .is-critical.callout {\n    border-left: 10px solid #DD0031;\n    background-color: rgba(221, 0, 49, 0.05); }\n    .alert.is-critical h1, .is-critical.callout h1, .alert.is-critical h2, .is-critical.callout h2, .alert.is-critical h3, .is-critical.callout h3, .alert.is-critical h4, .is-critical.callout h4, .alert.is-critical h5, .is-critical.callout h5, .alert.is-critical h6, .is-critical.callout h6 {\n      color: #DD0031; }\n  .alert.is-important, .is-important.callout {\n    border-left: 10px solid #FF9800;\n    background-color: rgba(255, 152, 0, 0.05); }\n    .alert.is-important h1, .is-important.callout h1, .alert.is-important h2, .is-important.callout h2, .alert.is-important h3, .is-important.callout h3, .alert.is-important h4, .is-important.callout h4, .alert.is-important h5, .is-important.callout h5, .alert.is-important h6, .is-important.callout h6 {\n      color: #FF9800; }\n  .alert.is-helpful, .is-helpful.callout {\n    border-left: 10px solid #1976D2;\n    background-color: rgba(25, 118, 210, 0.05); }\n    .alert.is-helpful h1, .is-helpful.callout h1, .alert.is-helpful h2, .is-helpful.callout h2, .alert.is-helpful h3, .is-helpful.callout h3, .alert.is-helpful h4, .is-helpful.callout h4, .alert.is-helpful h5, .is-helpful.callout h5, .alert.is-helpful h6, .is-helpful.callout h6 {\n      color: #1976D2; }\n  .alert > *, .callout > * {\n    margin: 0;\n    padding: 8px 16px; }\n\n.api-info-bar {\n  max-width: 800px;\n  text-align: left; }\n  .api-info-bar span {\n    margin: 0 16px 0 0; }\n    @media screen and (max-width: 600px) {\n      .api-info-bar span {\n        display: block; } }\n\n.api-heading {\n  margin-top: 24px;\n  margin-bottom: 18px;\n  font-size: 16px; }\n\n.overloads .detail-contents {\n  padding-top: 0; }\n\n/* API EDIT ICON */\n#api .api-filter .material-icons {\n  right: 48px; }\n\n/* API LIST STYLES */\naio-api-list div.form-search i.material-icons {\n  width: 20px;\n  pointer-events: none; }\n\naio-api-list .form-search input {\n  width: 182px; }\n\naio-api-list .api-list-container {\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto; }\n  aio-api-list .api-list-container h2 {\n    margin-top: 16px; }\n\n.api-filter {\n  display: flex;\n  margin: 0 auto; }\n  @media (max-width: 600px) {\n    .api-filter {\n      flex-direction: column;\n      margin: 16px auto; } }\n  .api-filter .form-select-menu, .api-filter .form-search {\n    margin: 8px; }\n\n/* LAYOUT */\n.docs-content {\n  position: relative; }\n\n.l-content-small {\n  padding: 16px;\n  max-width: 1100px;\n  margin: 0; }\n  @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 800px) {\n    .l-content-small {\n      padding: 24px 0 0; } }\n\n/* SEARCH BAR */\n.form-search {\n  position: relative; }\n  .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    box-sizing: border-box;\n    border: 1px solid #FFFFFF;\n    color: #1E88E5;\n    font-size: 16px;\n    height: 32px;\n    line-height: 32px;\n    outline: none;\n    padding: 0 16px 0 32px;\n    transition: all .2s; }\n    .form-search input::-webkit-input-placeholder {\n      /* Chrome/Opera/Safari */\n      color: #CFD8DC;\n      font-size: 14px; }\n    .form-search input::-moz-placeholder {\n      /* Firefox 19+ */\n      color: #CFD8DC;\n      font-size: 14px; }\n    .form-search input:-ms-input-placeholder {\n      /* IE 10+ */\n      color: #CFD8DC;\n      font-size: 14px; }\n    .form-search input:-moz-placeholder {\n      /* Firefox 18- */\n      color: #CFD8DC;\n      font-size: 14px; }\n    .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  .form-search .material-icons {\n    color: #CFD8DC;\n    font-size: 20px;\n    left: 8px;\n    position: absolute;\n    top: 6px;\n    z-index: 1; }\n\n/* API SYMBOLS */\n/* SYMBOL CLASS */\n.symbol {\n  border-radius: 2px;\n  box-shadow: 0 1px 2px rgba(10, 16, 20, 0.24);\n  color: #FFFFFF;\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  width: 16px; }\n  .symbol.all {\n    background: #FFFFFF; }\n    .symbol.all:before {\n      content: \" \"; }\n  .symbol.decorator {\n    background: #1565C0; }\n    .symbol.decorator:before {\n      content: \"@\"; }\n  .symbol.directive {\n    background: #D81B60; }\n    .symbol.directive:before {\n      content: \"D\"; }\n  .symbol.pipe {\n    background: #546E7A; }\n    .symbol.pipe:before {\n      content: \"P\"; }\n  .symbol.class {\n    background: #2196F3; }\n    .symbol.class:before {\n      content: \"C\"; }\n  .symbol.interface {\n    background: #009688; }\n    .symbol.interface:before {\n      content: \"I\"; }\n  .symbol.function {\n    background: #4CAF50; }\n    .symbol.function:before {\n      content: \"F\"; }\n  .symbol.enum {\n    background: #FFA000; }\n    .symbol.enum:before {\n      content: \"E\"; }\n  .symbol.const {\n    background: #6e6e6e; }\n    .symbol.const:before {\n      content: \"K\"; }\n  .symbol.let {\n    background: #6e6e6e; }\n    .symbol.let:before {\n      content: \"K\"; }\n  .symbol.var {\n    background: #6e6e6e; }\n    .symbol.var:before {\n      content: \"K\"; }\n  .symbol.type-alias {\n    background: #7CB342; }\n    .symbol.type-alias:before {\n      content: \"T\"; }\n  .symbol.module {\n    background: #8E24AA; }\n    .symbol.module:before {\n      content: \"Pk\"; }\n\n/* API HOMEE PAGE */\n/* API FILTER MENU */\n.api-filter aio-select {\n  width: 200px; }\n  .api-filter aio-select .symbol {\n    margin-right: 8px; }\n\n.api-filter .form-search {\n  float: left; }\n\n/* API CLASS LIST */\n.docs-content .api-list {\n  list-style: none;\n  margin: 0 0 32px -8px;\n  padding: 0;\n  overflow: hidden; }\n  @media screen and (max-width: 600px) {\n    .docs-content .api-list {\n      margin: 0 0 0 -8px; } }\n  .docs-content .api-list li {\n    font-size: 14px;\n    margin: 8px 0;\n    line-height: 14px;\n    padding: 0;\n    float: left;\n    width: 33%;\n    overflow: hidden;\n    min-width: 220px;\n    text-overflow: ellipsis;\n    white-space: nowrap; }\n    .docs-content .api-list li .symbol {\n      margin-right: 8px; }\n    .docs-content .api-list li a {\n      color: #546E7A;\n      display: inline-block;\n      line-height: 16px;\n      padding: 0 16px 0;\n      text-decoration: none;\n      transition: all .3s;\n      overflow: hidden;\n      text-overflow: ellipsis; }\n      .docs-content .api-list li a:hover {\n        background: #ECEFF1;\n        color: #2196F3; }\n\n.docs-content .h2-api-docs,\n.docs-content .h2-api-docs:first-of-type {\n  font-size: 18px;\n  line-height: 24px;\n  margin-top: 0; }\n\n.code-links a code, .code-links a .api-doc-code {\n  color: #1E88E5 !important; }\n\n.openParens {\n  margin-top: 15px; }\n\n.endParens {\n  margin-bottom: 20px !important; }\n\np.selector {\n  margin: 0; }\n\np.location-badge {\n  margin: 0 0 16px 16px !important; }\n\np .api-doc-code {\n  border-bottom: 0; }\n  p .api-doc-code :hover {\n    border-bottom: none; }\n\n.row-margin {\n  margin-bottom: 36px; }\n  .row-margin h2 {\n    line-height: 28px; }\n\n.code-margin {\n  margin-bottom: 8px; }\n\n.no-bg {\n  background: none;\n  padding: 0; }\n\n.no-bg-with-indent {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-left: 16px;\n  margin-top: 6px;\n  margin-bottom: 0;\n  background: none; }\n\n.code-background {\n  padding: 0 5px 0; }\n  .code-background span.pln {\n    color: #1E88E5 !important; }\n\n.code-anchor {\n  cursor: pointer;\n  text-decoration: none; }\n  .code-anchor:hover {\n    text-decoration: underline; }\n\n.api-doc-code {\n  font-size: 14px;\n  color: #1a2326; }\n  .api-doc-code.no-pln .pln:last-child {\n    display: none; }\n\n@media screen and (max-width: 600px) {\n  .docs-content .layout-xs-column {\n    display: block !important; }\n  .api-doc-code {\n    font-size: 12px; }\n  p.location-badge {\n    position: relative;\n    font-size: 11px; } }\n\n/* BANNER */\n.info-banner {\n  margin: 16px 0;\n  justify-content: center;\n  background: #FFFFFF;\n  border: 1px solid rgba(219, 219, 219, 0.5);\n  border-radius: 4px;\n  box-sizing: border-box;\n  padding: 16px;\n  background: #FFFFFF;\n  height: auto;\n  overflow: visible; }\n  @media screen and (max-width: 600px) {\n    .info-banner {\n      text-align: center; } }\n  .info-banner p, .info-banner .text-body {\n    color: #333;\n    line-height: 32px;\n    margin: 0;\n    text-align: center; }\n\n/* Button Styles */\n.button,\na.button.mat-button {\n  display: inline-block;\n  line-height: 32px;\n  padding: 0px 16px;\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 3px;\n  text-decoration: none;\n  text-transform: uppercase;\n  overflow: hidden;\n  border: none; }\n  .button.button-small,\n  a.button.mat-button.button-small {\n    font-size: 12px;\n    line-height: 24px;\n    padding: 0px 8px; }\n  .button.button-large,\n  a.button.mat-button.button-large {\n    font-size: 15px;\n    line-height: 48px;\n    padding: 0px 24px; }\n  .button.button-x-large,\n  a.button.mat-button.button-x-large {\n    font-size: 16px;\n    line-height: 56px;\n    padding: 0px 24px; }\n  .button.button-secondary,\n  a.button.mat-button.button-secondary {\n    background: #6e6e6e;\n    color: rgba(255, 255, 255, 0.87); }\n  .button.button-plain,\n  a.button.mat-button.button-plain {\n    background: #FFFFFF;\n    color: rgba(51, 51, 51, 0.87); }\n  .button.button-subtle,\n  a.button.mat-button.button-subtle {\n    background: #6e6e6e;\n    color: #e1e0e0; }\n  .button.button-navy,\n  a.button.mat-button.button-navy {\n    background: #1976D2;\n    color: rgba(255, 255, 255, 0.87); }\n  .button.button-banner,\n  a.button.mat-button.button-banner {\n    background: #333;\n    color: rgba(255, 255, 255, 0.87); }\n  .button.button-shield, .button.button-shield.mat-button,\n  a.button.mat-button.button-shield,\n  a.button.mat-button.button-shield.mat-button {\n    background-color: #1976D2;\n    background: #1976D2 url(\"assets/images/logos/angular/angular_whiteTransparent.svg\") 24px 13px no-repeat;\n    color: rgba(255, 255, 255, 0.87);\n    padding-left: 54px;\n    background-size: 22px 22px; }\n    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {\n      .button.button-shield, .button.button-shield.mat-button,\n      a.button.mat-button.button-shield,\n      a.button.mat-button.button-shield.mat-button {\n        background: #1976D2 url(\"assets/images/logos/angular/angular_whiteTransparent.svg\") 24px 13px no-repeat;\n        background-size: 22px 22px; } }\n\n.cta-bar {\n  text-align: center; }\n  .cta-bar .button {\n    margin: 0px 8px;\n    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n    transition: all .2s ease-in-out; }\n    .cta-bar .button:hover {\n      transform: scale(1.1);\n      color: #FAFAFA; }\n\na.filter-button {\n  width: 140px;\n  font-size: 14px;\n  padding: 0px 16px;\n  margin: 8px;\n  line-height: 48px;\n  border: 2px solid #1976D2;\n  border-radius: 4px; }\n  a.filter-button:hover {\n    background-color: #1976D2;\n    color: white; }\n\n[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {\n  text-transform: uppercase; }\n\n.callout {\n  padding: 0px;\n  border-left: none !important;\n  border-radius: 4px; }\n  .callout header {\n    color: #FFFFFF;\n    line-height: 24px;\n    font-weight: 500;\n    text-transform: uppercase;\n    border-radius: 4px 4px 0 0; }\n  .callout p {\n    padding: 16px;\n    margin: 0px;\n    font-size: 14px; }\n  .callout.is-critical {\n    border-color: #DD0031;\n    background: rgba(221, 0, 49, 0.05); }\n    .callout.is-critical header {\n      background: #DD0031; }\n  .callout.is-important {\n    border-color: #FF9800;\n    background: rgba(255, 152, 0, 0.05); }\n    .callout.is-important header {\n      background: #FFA000; }\n  .callout.is-helpful {\n    border-color: #1976D2;\n    background: rgba(25, 118, 210, 0.05); }\n    .callout.is-helpful header {\n      background: #1976D2; }\n\n.card-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: 24px 0; }\n\n.docs-card {\n  height: 194px;\n  width: 30%;\n  background-color: #FFFFFF;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  box-sizing: border-box;\n  transition: box-shadow .5s;\n  max-width: 340px;\n  min-width: 262px;\n  margin: 24px 8px;\n  padding-bottom: 48px;\n  position: relative; }\n  .docs-card:hover {\n    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);\n    text-decoration: none; }\n  .docs-card:hover {\n    text-decoration: none; }\n    .docs-card:hover section {\n      color: #1976D2; }\n    .docs-card:hover p {\n      color: #333;\n      padding: 0 16px; }\n    .docs-card:hover .card-footer {\n      line-height: 32px;\n      padding: 8px 16px;\n      background-color: rgba(25, 118, 210, 0.1);\n      color: #1976D2; }\n  .docs-card section {\n    color: #333;\n    font-size: 20px;\n    line-height: 24px;\n    margin: 0;\n    padding: 32px 0 24px;\n    text-transform: none;\n    text-align: center; }\n  .docs-card p {\n    color: #333;\n    font-size: 13px;\n    line-height: 24px;\n    padding: 0 16px;\n    margin: 0;\n    text-align: center; }\n  .docs-card .card-footer {\n    bottom: 0;\n    border-top: 0.5px solid #DBDBDB;\n    box-sizing: border-box;\n    line-height: 48px;\n    left: 0;\n    position: absolute;\n    right: 0;\n    text-align: right;\n    color: #6e6e6e; }\n    .docs-card .card-footer a {\n      color: #6e6e6e;\n      font-size: 13px; }\n  .docs-card .card-footer.center {\n    text-align: center; }\n\ncode-example, code-tabs {\n  clear: both;\n  display: block; }\n\ncode-example:not(.no-box),\ncode-tabs mat-tab-body:not(.no-box) {\n  background-color: rgba(241, 241, 241, 0.2);\n  border: 0.5px solid #DBDBDB;\n  border-radius: 5px;\n  color: #333;\n  margin: 16px auto; }\n\ncode-example.no-box pre,\ncode-tabs mat-tab-body.no-box pre {\n  margin: 0; }\n\ncode-example.no-box code,\ncode-tabs mat-tab-body.no-box code {\n  background-color: transparent; }\n\ncode-example code,\ncode-tabs mat-tab-body code {\n  overflow: auto; }\n\ncode-example.code-shell, code-example[language=sh], code-example[language=bash] {\n  background-color: #333; }\n\ncode-example header {\n  background-color: #1E88E5;\n  border-radius: 5px 5px 0 0;\n  color: #FAFAFA;\n  font-size: 16px;\n  padding: 8px 16px; }\n\ncode-example.avoid header,\ncode-example.avoidFile header {\n  border: 2px solid #DD0031;\n  background: #DD0031; }\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\ncode-tabs div .mat-tab-body-content {\n  height: auto; }\n\ncode-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {\n  overflow-y: hidden; }\n\ncode-tabs mat-tab-body-content .fadeIn {\n  animation: opacity 2s ease-in; }\n\naio-code pre {\n  display: flex;\n  min-height: 32px;\n  margin: 16px 32px;\n  white-space: pre-wrap;\n  align-items: center; }\n  aio-code pre code span {\n    line-height: 24px; }\n\n.code-missing {\n  color: #C3002F; }\n\n.copy-button {\n  position: absolute;\n  top: -8px;\n  right: -32px;\n  color: #B0BEC5;\n  background-color: transparent;\n  border: none;\n  cursor: pointer; }\n  .copy-button:hover {\n    color: #6e6e6e; }\n\n.lang-sh .copy-button, .lang-bash .copy-button {\n  color: #6e6e6e; }\n  .lang-sh .copy-button:hover, .lang-bash .copy-button:hover {\n    color: #DBDBDB; }\n\n.code-tab-group .mat-tab-label {\n  white-space: nowrap; }\n\n.code-tab-group .mat-tab-body-content {\n  height: auto;\n  transform: none; }\n\n[role=\"tabpanel\"] {\n  transition: none; }\n\n.sidenav-content code a {\n  color: inherit;\n  font-size: inherit; }\n\n/* PRETTY PRINTING STYLES for prettify.js. */\n.prettyprint {\n  position: relative; }\n\n/* Specify class=linenums on a pre to get line numbering */\nol.linenums {\n  margin: 0;\n  font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n  color: #B3B6B7; }\n  ol.linenums li {\n    margin: 0;\n    font-family: \"Droid Sans Mono\", monospace;\n    font-size: 90%;\n    line-height: 24px; }\n\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\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, .opn, .clo {\n    color: #660; }\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, .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  .kwd {\n    color: #006;\n    font-weight: bold; }\n  .com {\n    color: #600;\n    font-style: italic; }\n  .typ {\n    color: #404;\n    font-weight: bold; }\n  .lit {\n    color: #044; }\n  .pun, .opn, .clo {\n    color: #440; }\n  .tag {\n    color: #006;\n    font-weight: bold; }\n  .atn {\n    color: #404; }\n  .atv {\n    color: #060; } }\n\n/* SHELL / TERMINAL CODE BLOCKS */\ncode-example.code-shell .pnk, code-example.code-shell .blk, code-example.code-shell .pln, code-example.code-shell .otl, code-example.code-shell .kwd, code-example.code-shell .typ, code-example.code-shell .tag, code-example.code-shell .str, code-example.code-shell .atv, code-example.code-shell .atn, code-example.code-shell .com, code-example.code-shell .lit, code-example.code-shell .pun, code-example.code-shell .dec, code-example[language=sh] .pnk, code-example[language=sh] .blk, code-example[language=sh] .pln, code-example[language=sh] .otl, code-example[language=sh] .kwd, code-example[language=sh] .typ, code-example[language=sh] .tag, code-example[language=sh] .str, code-example[language=sh] .atv, code-example[language=sh] .atn, code-example[language=sh] .com, code-example[language=sh] .lit, code-example[language=sh] .pun, code-example[language=sh] .dec, code-example[language=bash] .pnk, code-example[language=bash] .blk, code-example[language=bash] .pln, code-example[language=bash] .otl, code-example[language=bash] .kwd, code-example[language=bash] .typ, code-example[language=bash] .tag, code-example[language=bash] .str, code-example[language=bash] .atv, code-example[language=bash] .atn, code-example[language=bash] .com, code-example[language=bash] .lit, code-example[language=bash] .pun, code-example[language=bash] .dec {\n  color: #17ff0b; }\n\n.contribute-container h2 {\n  margin: 0; }\n\n.contribute-container .l-sub-section {\n  width: 90%;\n  margin-bottom: 20px; }\n  .contribute-container .l-sub-section:last-child {\n    margin-bottom: 0; }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  aio-contributor-list .grid-fluid {\n    width: auto; } }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  aio-contributor-list .grid-fluid {\n    margin-left: 20px;\n    margin-right: 20px;\n    float: none;\n    display: block;\n    width: auto; } }\n\n.group-buttons {\n  margin: 32px auto; }\n  .group-buttons a.selected {\n    background-color: #1976D2;\n    color: white; }\n\n.contributor-group {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center; }\n\naio-contributor {\n  background: #FFFFFF;\n  margin: 8px;\n  position: relative;\n  cursor: pointer;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  transition: all .3s;\n  perspective: 800px; }\n  aio-contributor:hover {\n    transform: translate3d(0, -3px, 0);\n    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12); }\n    aio-contributor:hover .contributor-image {\n      transform: scale(1.05); }\n    aio-contributor:hover .contributor-info {\n      opacity: 1; }\n  aio-contributor .contributor-info {\n    background: rgba(51, 51, 51, 0.5);\n    height: 168px;\n    width: 168px;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    opacity: 0;\n    border-radius: 50%; }\n    aio-contributor .contributor-info [mat-button] {\n      color: #FFFFFF;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 8px;\n      padding: 0; }\n      aio-contributor .contributor-info [mat-button]:hover {\n        color: #DBDBDB; }\n      aio-contributor .contributor-info [mat-button].icon {\n        min-width: 20px;\n        width: 20px; }\n        aio-contributor .contributor-info [mat-button].icon .fa-2x {\n          font-size: 20px; }\n  aio-contributor div.contributor-card {\n    width: 250px;\n    height: 270px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    overflow: hidden;\n    border-radius: 4px;\n    transform-style: preserve-3d;\n    transition: transform ease 500ms; }\n    aio-contributor div.contributor-card h3 {\n      margin: 8px 0; }\n    aio-contributor div.contributor-card .card-front, aio-contributor div.contributor-card .card-back {\n      width: 100%;\n      height: 100%;\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box; }\n    aio-contributor div.contributor-card .card-front {\n      justify-content: center; }\n    aio-contributor div.contributor-card .card-back {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      padding: 16px 24px;\n      transform: rotateY(180deg); }\n      aio-contributor div.contributor-card .card-back section {\n        display: none; }\n      aio-contributor div.contributor-card .card-back p {\n        margin: 8px 0;\n        font-size: 12px;\n        line-height: 14px;\n        text-align: left; }\n    aio-contributor div.contributor-card.flipped {\n      transform: rotateY(180deg); }\n      aio-contributor div.contributor-card.flipped .card-front {\n        display: none; }\n  aio-contributor .contributor-image {\n    display: flex;\n    justify-content: center;\n    border-radius: 50%;\n    align-items: center;\n    height: 168px;\n    width: 168px;\n    background-size: cover;\n    background-position: center;\n    margin: 8px auto;\n    border: 2px solid #DBDBDB;\n    transition: all .2s ease-in-out; }\n  aio-contributor section {\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-transform: uppercase; }\n  aio-contributor p {\n    cursor: pointer;\n    font-size: 14px;\n    line-height: 18px;\n    margin: 8px 16px;\n    text-overflow: ellipsis;\n    overflow: scroll;\n    font-weight: 400; }\n\n/*\n * General styling to make detail/summary tags look a bit more material\n * To get the best out of it you should structure your usage like this:\n *\n * ```\n * <details>\n *   <summary>Some title</summary>\n *   <div class=\"details-content\">\n *     Some content\n *   </div>\n *  </details>\n *\n */\nsummary {\n  cursor: pointer;\n  font-size: 16px;\n  position: relative;\n  padding: 16px 24px;\n  color: #0A1014;\n  height: 16px;\n  display: block; }\n  summary::-webkit-details-marker {\n    display: none; }\n  summary::after {\n    content: '\\E5CE';\n    font-family: 'Material Icons';\n    font-size: 24px;\n    -webkit-font-smoothing: antialiased;\n    -moz-transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    transform: rotate(0deg);\n    transition: transform 150ms;\n    transition-timing-function: ease-in-out;\n    position: absolute;\n    top: 12px;\n    right: 22px; }\n\ndetails {\n  box-shadow: 0 1px 4px 0 rgba(10, 16, 20, 0.37); }\n  details .detail-contents {\n    padding: 16px 24px; }\n  details[open] > summary::after {\n    -moz-transform: rotate(180deg);\n    -webkit-transform: rotate(180deg);\n    -o-transform: rotate(180deg);\n    -ms-transform: rotate(180deg);\n    transform: rotate(180deg);\n    transition: transform 150ms;\n    transition-timing-function: ease-in-out; }\n\n.edit-page-cta {\n  font-weight: 400;\n  font-size: 14px;\n  color: #1976D2;\n  text-align: right;\n  margin-right: 32px;\n  display: block;\n  position: absolute;\n  right: 0; }\n\n.feature-section {\n  margin: 0 0 32px; }\n  .feature-section .feature-header, .feature-section .text-headline {\n    text-align: center; }\n  .feature-section .feature-header img {\n    margin: 16px; }\n  .feature-section .feature-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin: 8px 0px;\n    clear: both; }\n  .feature-section .feature-row {\n    display: flex;\n    flex-wrap: wrap; }\n    @media (max-width: 600px) {\n      .feature-section .feature-row {\n        flex-direction: column; } }\n    .feature-section .feature-row .feature {\n      max-width: 300px;\n      margin: 0 16px; }\n      @media (max-width: 768px) {\n        .feature-section .feature-row .feature {\n          max-width: 100%; } }\n\n.filetree {\n  background: #FAFAFA;\n  border: 4px solid #DBDBDB;\n  border-radius: 4px;\n  margin: 0 0 24px 0;\n  padding: 16px 32px; }\n  .filetree .file {\n    display: block;\n    font-family: \"Roboto\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n    letter-spacing: 0.3px;\n    line-height: 32px;\n    color: #333; }\n  .filetree .children {\n    padding-left: 24px;\n    position: relative;\n    overflow: hidden; }\n    .filetree .children .file {\n      position: relative; }\n      .filetree .children .file:before {\n        content: '';\n        left: -18px;\n        bottom: 16px;\n        width: 16px;\n        height: 9999px;\n        position: absolute;\n        border-width: 0 0 1px 1px;\n        border-style: solid;\n        border-color: #DBDBDB;\n        border-radius: 0 0 0 3px; }\n\n.sidenav-content h1.no-anchor .header-link, .sidenav-content h2.no-anchor .header-link, .sidenav-content h3.no-anchor .header-link, .sidenav-content h4.no-anchor .header-link, .sidenav-content h5.no-anchor .header-link, .sidenav-content h6.no-anchor .header-link {\n  display: none; }\n\n.sidenav-content h1 .header-link, .sidenav-content h2 .header-link, .sidenav-content h3 .header-link, .sidenav-content h4 .header-link, .sidenav-content h5 .header-link, .sidenav-content h6 .header-link {\n  box-sizing: border-box;\n  color: #6e6e6e;\n  display: inline-block;\n  margin-left: -42px;\n  padding: 0 8px;\n  text-decoration: none;\n  user-select: none;\n  vertical-align: middle;\n  visibility: hidden;\n  width: 40px; }\n  @media (max-width: 600px) {\n    .sidenav-content h1 .header-link, .sidenav-content h2 .header-link, .sidenav-content h3 .header-link, .sidenav-content h4 .header-link, .sidenav-content h5 .header-link, .sidenav-content h6 .header-link {\n      float: right;\n      margin-left: 0; } }\n\n.sidenav-content h1:hover .header-link, .sidenav-content h2:hover .header-link, .sidenav-content h3:hover .header-link, .sidenav-content h4:hover .header-link, .sidenav-content h5:hover .header-link, .sidenav-content h6:hover .header-link {\n  visibility: visible; }\n\n.sidenav-content .l-sub-section h1 a, .sidenav-content .l-sub-section h2 a, .sidenav-content .l-sub-section h3 a, .sidenav-content .l-sub-section h4 a, .sidenav-content .l-sub-section h5 a, .sidenav-content .l-sub-section h6 a {\n  padding-right: 64px;\n  margin-left: -74px; }\n\n.sidenav-content .alert h1 a, .sidenav-content .callout h1 a, .sidenav-content .alert h2 a, .sidenav-content .callout h2 a, .sidenav-content .alert h3 a, .sidenav-content .callout h3 a, .sidenav-content .alert h4 a, .sidenav-content .callout h4 a, .sidenav-content .alert h5 a, .sidenav-content .callout h5 a, .sidenav-content .alert h6 a, .sidenav-content .callout h6 a {\n  padding-right: 80px;\n  margin-left: -90px; }\n\nhr {\n  border: none;\n  background: #DBDBDB;\n  height: 1px; }\n\n.hr-margin {\n  display: block;\n  height: 1px;\n  border: 0;\n  margin-top: 16px;\n  margin-bottom: 16px;\n  padding: 0; }\n\n.content img.right {\n  clear: both;\n  float: right;\n  margin-left: 20px;\n  margin-bottom: 20px; }\n\n.content img.left {\n  clear: both;\n  float: left;\n  margin-right: 20px;\n  margin-bottom: 20px; }\n\n@media (max-width: 1300px) {\n  .content img {\n    max-width: 100%;\n    height: auto; } }\n\n@media (max-width: 600px) {\n  .content img {\n    float: none !important; }\n    .content img.right {\n      margin-left: 0; }\n    .content img.left {\n      margin-right: 0; } }\n\n.content figure {\n  border-radius: 4px;\n  background: #FFFFFF;\n  padding: 20px;\n  display: inline-block;\n  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);\n  margin: 0 0 14px 0; }\n  .content figure img {\n    border-radius: 4px; }\n\n.progress-bar-container {\n  height: 2px;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 11; }\n\ntable {\n  margin: 24px 0px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  border-radius: 2px;\n  background: #FAFAFA; }\n  table.is-full-width {\n    width: 100%; }\n  table.is-fixed-layout {\n    table-layout: fixed; }\n  table thead {\n    vertical-align: middle;\n    border-color: inherit; }\n    table thead tr {\n      vertical-align: inherit;\n      border-color: inherit; }\n    table thead th {\n      background: rgba(219, 219, 219, 0.2);\n      border-bottom: 1px solid #DBDBDB;\n      color: #333;\n      font-size: 12px;\n      font-weight: 500;\n      padding: 8px 32px;\n      text-align: left;\n      text-transform: uppercase;\n      line-height: 28px; }\n  table tbody th,\n  table tbody td {\n    border-bottom: 1px solid #DBDBDB;\n    padding: 16px;\n    text-align: left;\n    line-height: 24px;\n    vertical-align: top; }\n    @media (max-width: 480px) {\n      table tbody th:before,\n      table tbody td:before {\n        display: inline-block; } }\n  table tbody td {\n    letter-spacing: 0.30px; }\n    @media (max-width: 480px) {\n      table tbody td tr td:first-child {\n        background-color: #DBDBDB; } }\n  table tbody th {\n    background: rgba(219, 219, 219, 0.2);\n    border-right: 1px solid #DBDBDB;\n    font-weight: 600;\n    max-width: 100px; }\n  table tbody tr:last-child td {\n    border: none; }\n    @media (max-width: 480px) {\n      table tbody tr:last-child td {\n        border-bottom: 1px solid #DBDBDB; } }\n\n#cheatsheet table tbody td {\n  overflow: auto; }\n\n@media only screen and (max-width: 990px) {\n  #cheatsheet {\n    /* Force table to not be like tables anymore */ }\n    #cheatsheet table, #cheatsheet thead, #cheatsheet tbody, #cheatsheet tfoot, #cheatsheet tr, #cheatsheet th, #cheatsheet td {\n      display: block;\n      position: relative;\n      max-width: 100%; }\n      #cheatsheet table code, #cheatsheet thead code, #cheatsheet tbody code, #cheatsheet tfoot code, #cheatsheet tr code, #cheatsheet th code, #cheatsheet td code {\n        padding: 0;\n        background-color: inherit; }\n    #cheatsheet th {\n      border-right: none; }\n    #cheatsheet th:not(:last-child), #cheatsheet td:not(:last-child) {\n      border-bottom: none;\n      padding-bottom: 0px; } }\n\n.presskit-container {\n  padding: 0 32px 32px 32px; }\n  .presskit-container h2 {\n    color: #37474F; }\n  .presskit-container .l-space-left-3 {\n    margin-left: 24px; }\n  .presskit-container .cc-by-anchor {\n    text-decoration: underline;\n    color: grey !important; }\n  .presskit-container .presskit-row {\n    margin: 48px 0;\n    width: 100%; }\n    .presskit-container .presskit-row .presskit-inner {\n      display: flex;\n      align-items: center; }\n      @media (max-width: 599px) {\n        .presskit-container .presskit-row .presskit-inner {\n          flex-direction: column; } }\n      .presskit-container .presskit-row .presskit-inner h3 {\n        font-weight: 500;\n        margin-top: 0;\n        margin-bottom: 0;\n        color: #455A64; }\n        @media (max-width: 599px) {\n          .presskit-container .presskit-row .presskit-inner h3 {\n            padding-bottom: 16px; } }\n      .presskit-container .presskit-row .presskit-inner .transparent-img-bg {\n        margin-top: 10px;\n        border-radius: 4px;\n        width: 128px;\n        height: 128px;\n        background-color: #34474F; }\n      .presskit-container .presskit-row .presskit-inner ul {\n        padding: 0;\n        list-style-type: none; }\n        @media (max-width: 599px) {\n          .presskit-container .presskit-row .presskit-inner ul {\n            padding: 0 !important;\n            margin: 0 !important; } }\n        .presskit-container .presskit-row .presskit-inner ul li {\n          margin: 0 0 8px 0; }\n    @media (max-width: 599px) {\n      .presskit-container .presskit-row .presskit-image-container {\n        text-align: center; } }\n    .presskit-container .presskit-row .presskit-image-container img {\n      width: 128px;\n      height: 128px;\n      margin-bottom: 16px; }\n  .presskit-container .presskit-row:first-child {\n    margin-top: 0; }\n    @media (max-width: 599px) {\n      .presskit-container .presskit-row:first-child {\n        margin-top: 48px; } }\n\n.showcase {\n  width: 80%; }\n\n.c-resource-nav {\n  width: 20%; }\n\n.resources-container {\n  position: relative; }\n\n.grid-fixed:after, .grid-fixed:before {\n  content: '.';\n  clear: both;\n  display: block;\n  overflow: hidden;\n  visibility: hidden;\n  font-size: 0;\n  line-height: 0;\n  width: 0;\n  height: 0; }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  .grid-fixed {\n    width: auto; } }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  .grid-fixed .c3, .grid-fixed .c8 {\n    margin-left: 20px;\n    margin-right: 20px;\n    float: none;\n    display: block;\n    width: auto; } }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {\n  .grid-fixed .c3, .grid-fixed .c8 {\n    margin-left: 0px;\n    margin-right: 0px;\n    float: none;\n    display: block;\n    width: auto; } }\n\n@media handheld and (max-width: 900px), screen and (max-width: 900px) {\n  /* line 6, ../scss/_responsive.scss */\n  .grid-fixed {\n    margin: 0 auto;\n    *zoom: 1; }\n  .grid-fixed:after, .grid-fixed:before {\n    content: '.';\n    clear: both;\n    display: block;\n    overflow: hidden;\n    visibility: hidden;\n    font-size: 0;\n    line-height: 0;\n    width: 0;\n    height: 0; } }\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px) {\n  /* line 6, ../scss/_responsive.scss */\n  .grid-fixed {\n    margin: 0 auto;\n    *zoom: 1; }\n  .grid-fixed:after, .grid-fixed:before {\n    content: '.';\n    clear: both;\n    display: block;\n    overflow: hidden;\n    visibility: hidden;\n    font-size: 0;\n    line-height: 0;\n    width: 0;\n    height: 0; } }\n\naio-resource-list .shadow-1 {\n  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: 0 1px 4px 0 rgba(10, 16, 20, 0.37); }\n\naio-resource-list .showcase {\n  margin-bottom: 48px;\n  border-radius: 4px; }\n\naio-resource-list .c-resource h4 {\n  margin: 0;\n  line-height: 24px; }\n\naio-resource-list .c-resource p {\n  margin: 0; }\n\naio-resource-list .c-resource-nav {\n  position: fixed;\n  top: 142px;\n  right: 32px;\n  width: 160px;\n  z-index: 1;\n  background-color: #fff;\n  border-radius: 2px; }\n  aio-resource-list .c-resource-nav a {\n    color: #373E41;\n    text-decoration: none; }\n  aio-resource-list .c-resource-nav .category {\n    padding: 10px 0; }\n    aio-resource-list .c-resource-nav .category .category-link {\n      display: block;\n      margin: 2px 0;\n      padding: 3px 14px;\n      font-size: 18px !important; }\n      aio-resource-list .c-resource-nav .category .category-link:hover {\n        background: #edf0f2;\n        color: #2B85E7; }\n  aio-resource-list .c-resource-nav .subcategory .subcategory-link {\n    display: block;\n    margin: 2px 0;\n    padding: 4px 14px; }\n    aio-resource-list .c-resource-nav .subcategory .subcategory-link:hover {\n      background: #edf0f2;\n      color: #2B85E7; }\n\naio-resource-list .h-anchor-offset {\n  display: block;\n  position: relative;\n  top: -20px;\n  visibility: hidden; }\n\naio-resource-list .l-flex--column {\n  display: flex;\n  flex-direction: column; }\n\naio-resource-list .c-resource-header {\n  margin-bottom: 16px; }\n\naio-resource-list .c-contribute {\n  margin-bottom: 24px; }\n\naio-resource-list .c-resource-header h2 {\n  margin: 0; }\n\naio-resource-list .subcategory-title {\n  padding: 16px 23px;\n  margin: 0;\n  background-color: #ECEFF1;\n  color: #373E41; }\n\naio-resource-list .h-capitalize {\n  text-transform: capitalize; }\n\naio-resource-list .h-hide {\n  display: none; }\n\naio-resource-list .resource-row-link {\n  color: #1a2326;\n  border: transparent solid 1px;\n  margin: 0;\n  padding: 16px 23px 16px 23px;\n  position: relative;\n  text-decoration: none;\n  transition: all .3s; }\n\naio-resource-list .resource-row-link:hover {\n  color: #1a2326;\n  text-decoration: none;\n  border-color: #2B85E7;\n  border-radius: 4px;\n  box-shadow: 0 8px 8px rgba(1, 67, 163, 0.24), 0 0 8px rgba(1, 67, 163, 0.12), 0 6px 18px rgba(43, 133, 231, 0.12);\n  transform: translateY(-2px); }\n\n@media (max-width: 900px) {\n  aio-resource-list .c-resource-nav {\n    display: none; } }\n\nbody::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {\n  height: 6px;\n  width: 6px; }\n\nbody::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-track, .mat-sidenav-content::-webkit-scrollbar-track {\n  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }\n\nbody::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {\n  background-color: #6e6e6e;\n  outline: 1px solid #333; }\n\n.search-results::-webkit-scrollbar, .toc-container::-webkit-scrollbar {\n  height: 4px;\n  width: 4px; }\n\n.search-results::-webkit-scrollbar-track, .toc-container::-webkit-scrollbar-track {\n  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }\n\n.search-results::-webkit-scrollbar-thumb, .toc-container::-webkit-scrollbar-thumb {\n  background-color: #6e6e6e;\n  outline: 1px solid slategrey; }\n\naio-search-results {\n  z-index: 10; }\n\n.search-results {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  overflow: auto;\n  padding: 68px 32px 0;\n  color: #FAFAFA;\n  width: auto;\n  max-height: 95vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  background-color: #333;\n  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n  box-sizing: border-box; }\n  @media (max-width: 480px) {\n    .search-results {\n      display: block; }\n      .search-results .search-area {\n        display: block;\n        margin: 16px 16px; } }\n\naio-search-results.embedded .search-results {\n  padding: 0;\n  color: inherit;\n  width: auto;\n  max-height: 100%;\n  position: relative;\n  background-color: inherit;\n  box-shadow: none;\n  box-sizing: border-box; }\n  aio-search-results.embedded .search-results .search-area a {\n    color: #4d4c4c; }\n    aio-search-results.embedded .search-results .search-area a:hover {\n      color: #1E88E5; }\n\n.search-area {\n  display: flex;\n  flex-direction: column;\n  margin: 16px 16px;\n  height: 100%; }\n  .search-area h3 {\n    font-size: 16px;\n    font-weight: 400;\n    margin: 10px 0px 5px;\n    text-transform: uppercase; }\n  .search-area ul {\n    margin: 0;\n    padding: 0; }\n    .search-area ul li {\n      list-style: none; }\n  .search-area a {\n    font-size: 14px;\n    color: #DBDBDB;\n    text-decoration: none;\n    font-weight: normal; }\n    .search-area a:hover {\n      color: #FFFFFF; }\n    .search-area a:visited {\n      text-decoration: none; }\n    .search-area a span.symbol {\n      margin-right: 8px; }\n  .search-area .priority-pages {\n    padding: 0.5rem 0; }\n    .search-area .priority-pages a {\n      font-weight: bold; }\n  @media (min-width: 600px) {\n    .search-area {\n      display: block; } }\n\n.l-sub-section {\n  color: #333;\n  background-color: rgba(25, 118, 210, 0.05);\n  border-left: 8px solid #1976D2;\n  padding: 16px;\n  margin-bottom: 8px;\n  display: table;\n  clear: both;\n  width: 100%;\n  box-sizing: border-box; }\n  .l-sub-section h3 {\n    margin: 8px 0 0; }\n  .l-sub-section a:hover {\n    color: #1976D2;\n    text-decoration: underline; }\n\n.toc-container {\n  width: 18%;\n  position: fixed;\n  top: 76px;\n  right: 0;\n  bottom: 12px;\n  overflow-y: auto;\n  overflow-x: hidden; }\n\n@media (min-width: 801px) {\n  aio-toc.embedded {\n    display: none; } }\n\n.toc-inner {\n  font-size: 13px;\n  overflow-y: visible;\n  padding: 4px 0 0 10px; }\n  .toc-inner .toc-heading,\n  .toc-inner .toc-list .h1 {\n    font-size: 115%; }\n  .toc-inner .toc-heading {\n    font-weight: 500;\n    margin: 0 0 16px 8px;\n    padding: 0; }\n  .toc-inner .toc-heading.secondary {\n    position: relative;\n    top: -8px; }\n    .toc-inner .toc-heading.secondary:hover {\n      color: #1E88E5; }\n  .toc-inner button.toc-heading,\n  .toc-inner button.toc-more-items {\n    cursor: pointer;\n    display: inline-block;\n    background: 0;\n    background-color: transparent;\n    border: none;\n    box-shadow: none;\n    padding: 0;\n    text-align: start; }\n    .toc-inner button.toc-heading.embedded:focus,\n    .toc-inner button.toc-more-items.embedded:focus {\n      outline: none;\n      background: #DBDBDB; }\n  .toc-inner button.toc-heading mat-icon.rotating-icon {\n    height: 18px;\n    width: 18px;\n    position: relative;\n    left: -4px;\n    top: 5px; }\n  .toc-inner button.toc-heading:hover:not(.embedded) {\n    color: #1E88E5; }\n  .toc-inner button.toc-more-items {\n    color: #6e6e6e;\n    top: 10px;\n    position: relative; }\n    .toc-inner button.toc-more-items:hover {\n      color: #1E88E5; }\n  .toc-inner button.toc-more-items::after {\n    content: 'expand_less'; }\n  .toc-inner button.toc-more-items.collapsed::after {\n    content: 'more_horiz'; }\n  .toc-inner .mat-icon.collapsed {\n    -moz-transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    transform: rotate(0deg);\n    transition: transform 150ms;\n    transition-timing-function: ease-in-out; }\n  .toc-inner .mat-icon:not(.collapsed) {\n    -moz-transform: rotate(90deg);\n    -webkit-transform: rotate(90deg);\n    -o-transform: rotate(90deg);\n    -ms-transform: rotate(90deg);\n    transform: rotate(90deg);\n    transition: transform 150ms;\n    transition-timing-function: ease-in-out; }\n  .toc-inner ul.toc-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0 8px 0 0; }\n    @media (max-width: 800px) {\n      .toc-inner ul.toc-list {\n        width: auto; } }\n    .toc-inner ul.toc-list li {\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 16px;\n      padding: 3px 0 3px 12px;\n      position: relative;\n      transition: all 0.3s ease-in-out; }\n      .toc-inner ul.toc-list li.h1:after {\n        content: '';\n        display: block;\n        height: 1px;\n        width: 40%;\n        margin: 7px 0 4px 0;\n        background: #DBDBDB;\n        clear: both; }\n      .toc-inner ul.toc-list li.h3 {\n        padding-left: 24px; }\n      .toc-inner ul.toc-list li a {\n        font-size: inherit;\n        color: #4d4c4c;\n        display: table-cell;\n        overflow: visible;\n        font-size: 12px;\n        display: table-cell; }\n      .toc-inner ul.toc-list li:hover a {\n        color: #1E88E5; }\n      .toc-inner ul.toc-list li.active a {\n        color: #1976D2;\n        font-weight: 500; }\n        .toc-inner ul.toc-list li.active a:before {\n          content: '';\n          border-radius: 50%;\n          left: -3px;\n          top: 12px;\n          background: #1976D2;\n          position: absolute;\n          width: 6px;\n          height: 6px; }\n    .toc-inner ul.toc-list:not(.embedded) li:before {\n      border-left: 1px solid #DBDBDB;\n      bottom: 0;\n      content: '';\n      left: 0;\n      position: absolute;\n      top: 0; }\n    .toc-inner ul.toc-list:not(.embedded) li:first-child:before {\n      top: 13px; }\n    .toc-inner ul.toc-list:not(.embedded) li:last-child:before {\n      bottom: calc(100% - 14px); }\n    .toc-inner ul.toc-list:not(.embedded) li:not(.active):hover a:before {\n      content: '';\n      border-radius: 50%;\n      left: -3px;\n      top: 12px;\n      background: #DBDBDB;\n      position: absolute;\n      width: 6px;\n      height: 6px; }\n\naio-toc.embedded > div.collapsed li.secondary {\n  display: none; }\n\n/* SELECT MENU */\n.form-select-menu {\n  position: relative; }\n\n.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  box-sizing: border-box;\n  border: 1px solid #FFFFFF;\n  color: #546E7A;\n  font-size: 12px;\n  font-weight: 400;\n  height: 32px;\n  line-height: 32px;\n  outline: none;\n  padding: 0 16px;\n  text-align: left;\n  width: 100%;\n  cursor: pointer; }\n  .form-select-button strong {\n    font-weight: 600;\n    margin-right: 8px;\n    text-transform: uppercase; }\n  .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\n.form-select-dropdown {\n  background: #FFFFFF;\n  box-shadow: 0 16px 16px rgba(10, 16, 20, 0.24), 0 0 16px rgba(10, 16, 20, 0.12);\n  border-radius: 4px;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 2; }\n  .form-select-dropdown li {\n    cursor: pointer;\n    font-size: 14px;\n    line-height: 32px;\n    margin: 0;\n    padding: 0 16px 0 40px;\n    position: relative;\n    transition: all .2s; }\n    .form-select-dropdown li:hover {\n      background: #ECEFF1;\n      color: #2196F3; }\n    .form-select-dropdown li.selected {\n      background-color: #CFD8DC; }\n    .form-select-dropdown li .symbol {\n      left: 16px;\n      position: absolute;\n      top: 8px;\n      z-index: 5; }\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  aio-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\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  aio-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.mat-toolbar mat-toolbar-row.notification-container {\n  padding: 0;\n  height: auto;\n  overflow: hidden; }\n\naio-notification {\n  background: #333;\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 56px;\n  justify-content: center; }\n  @media (max-width: 430px) {\n    aio-notification {\n      justify-content: flex-start;\n      padding-left: 10px; } }\n  aio-notification .close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 56px;\n    height: 56px;\n    background: #333; }\n  aio-notification .content {\n    display: flex;\n    max-width: calc(100% - 56px);\n    text-transform: none;\n    padding: 0; }\n    aio-notification .content .icon {\n      margin-right: 10px; }\n      @media (max-width: 464px) {\n        aio-notification .content .icon {\n          display: none; } }\n    aio-notification .content .message {\n      overflow: hidden;\n      text-overflow: ellipsis; }\n    aio-notification .content .action-button {\n      margin-left: 10px;\n      background: #DD0031;\n      border-radius: 15px;\n      text-transform: uppercase;\n      padding: 0 10px;\n      font-size: 12px; }\n      @media (max-width: 780px) {\n        aio-notification .content .action-button {\n          display: none; } }\n\n.aio-notification-show .sidenav-content {\n  padding-top: 136px; }\n\n.aio-notification-show mat-sidenav.mat-sidenav.sidenav {\n  top: 112px; }\n  @media (max-width: 600px) {\n    .aio-notification-show mat-sidenav.mat-sidenav.sidenav {\n      top: 112px; } }\n\n.aio-notification-show .toc-container {\n  top: 132px; }\n\n.aio-notification-show .search-results {\n  padding-top: 124px; }\n\n.aio-notification-show.page-home section, .aio-notification-show.page-resources section, .aio-notification-show.page-events section, .aio-notification-show.page-features section, .aio-notification-show.page-presskit section, .aio-notification-show.page-contribute section {\n  padding-top: 56px; }\n\n.aio-notification-animating .sidenav-content {\n  transition: padding-top 250ms ease; }\n\n.aio-notification-animating mat-sidenav.mat-sidenav.sidenav, .aio-notification-animating .toc-container {\n  transition: top 250ms ease; }\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/styles.scss",".callout {\n  @extend .alert;\n  padding: 0px;\n  border-left: none !important;\n  border-radius: 4px;\n\n  header {\n    color: $white;\n    line-height: 24px;\n    font-weight: 500;\n    text-transform: uppercase;\n    border-radius: 4px 4px 0 0;\n  }\n\n  p {\n    padding: 16px;\n    margin: 0px;\n    font-size: 14px;\n  }\n\n  &.is-critical {\n    border-color: $brightred;\n    background: rgba($brightred, 0.05);\n\n    header {\n      background: $brightred;\n    }\n  }\n\n  &.is-important {\n    border-color: $orange;\n    background: rgba($orange, 0.05);\n\n    header {\n      background: $amber-700;\n    }\n  }\n\n  &.is-helpful {\n    border-color: $blue;\n    background: rgba($blue, 0.05);\n\n    header {\n      background: $blue;\n    }\n  }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_callout.scss",".card-container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin: 24px 0;\n}\n\n.docs-card {\n  @include card(194px, 30%);\n  max-width: 340px;\n  min-width: 262px;\n  margin: 24px 8px;\n  padding-bottom: 48px;\n  position: relative;\n\n  &:hover {\n    text-decoration: none;\n\n    section {\n      color: $blue;\n    }\n\n    p {\n      color: $darkgray;\n      padding: 0 16px;\n    }\n\n    .card-footer {\n      line-height: 32px;\n      padding: 8px 16px;\n      background-color: rgba($blue, 0.1);\n      color: $blue;\n    }\n  }\n\n\n  section {\n    color: $darkgray;\n    font-size: 20px;\n    line-height: 24px;\n    margin: 0;\n    padding: 32px 0 24px;\n    text-transform: none;\n    text-align: center;\n  }\n\n  p {\n    color: $darkgray;\n    font-size: 13px;\n    line-height: 24px;\n    padding: 0 16px;\n    margin: 0;\n    text-align: center;\n  }\n\n  .card-footer {\n    bottom: 0;\n    border-top: 0.5px solid $lightgray;\n    box-sizing: border-box;\n    line-height: 48px;\n    left: 0;\n    position: absolute;\n    right: 0;\n    text-align: right;\n    color: $mediumgray;\n\n    a {\n      color: $mediumgray;\n      font-size: 13px;\n    }\n  }\n  .card-footer.center {\n    text-align: center;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_card.scss","code-example, code-tabs {\n    clear: both;\n    display: block;\n}\n\ncode-example,\ncode-tabs mat-tab-body {\n  &:not(.no-box) {\n    background-color: rgba($backgroundgray, 0.2);\n    border: 0.5px solid $lightgray;\n    border-radius: 5px;\n    color: $darkgray;\n    margin: 16px auto;\n  }\n\n  &.no-box {\n    pre {\n      margin: 0;\n    }\n    code {\n      background-color: transparent;\n    }\n  }\n\n  code {\n    overflow: auto;\n  }\n}\n\n// TERMINAL / SHELL TEXT STYLES\n\ncode-example.code-shell, code-example[language=sh], code-example[language=bash] {\n  background-color: $darkgray;\n}\n\ncode-example header {\n  background-color: $accentblue;\n  border-radius: 5px 5px 0 0;\n  color: $offwhite;\n  font-size: 16px;\n  padding: 8px 16px;\n}\n\ncode-example.avoid header,\ncode-example.avoidFile header {\n  border: 2px solid $anti-pattern;\n  background: $anti-pattern;\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 $anti-pattern;\n}\n\ncode-tabs div .mat-tab-body-content {\n  height: auto;\n}\n\ncode-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {\n  overflow-y: hidden;\n}\n\ncode-tabs mat-tab-body-content .fadeIn {\n  animation: opacity 2s ease-in;\n}\n\naio-code pre {\n    display: flex;\n    min-height: 32px;\n    margin: 16px 32px;\n    white-space: pre-wrap;\n    align-items: center;\n\n    code span {\n      line-height: 24px;\n    }\n}\n\n\n.code-missing {\n  color: $darkred;\n}\n\n\n.copy-button {\n  position: absolute;\n  top: -8px;\n  right: -32px;\n\n  color: $blue-grey-200;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  &:hover {\n    color: $mediumgray;\n  }\n}\n\n.lang-sh .copy-button, .lang-bash .copy-button {\n  color: $mediumgray;\n  &:hover {\n    color: $lightgray;\n  }\n}\n\n.code-tab-group .mat-tab-label {\n  white-space: nowrap;\n}\n\n.code-tab-group .mat-tab-body-content {\n  height: auto;\n  transform: none;\n}\n\n\n[role=\"tabpanel\"] {\n    transition: none;\n}\n\n.sidenav-content code a {\n  color: inherit;\n  font-size: inherit;\n}\n\n/* PRETTY PRINTING STYLES for prettify.js. */\n\n.prettyprint {\n  position: relative;\n}\n\n/* Specify class=linenums on a pre to get line numbering */\nol.linenums {\n  margin: 0;\n  font-family: $main-font;\n  color: #B3B6B7;\n  li {\n    margin: 0;\n    font-family: $code-font;\n    font-size: 90%;\n    line-height: 24px;\n  }\n}\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 { color: #000 }  /* plain text */\n\n@media screen {\n  .str { color: #800 }  /* string content */\n  .kwd { color: #00f }  /* a keyword */\n  .com { color: #060 }  /* a comment */\n  .typ { color: red }  /* a type name */\n  .lit { color: #08c }  /* a literal value */\n  /* punctuation, lisp open bracket, lisp close bracket */\n  .pun, .opn, .clo { color: #660 }\n  .tag { color: #008 }  /* a markup tag name */\n  .atn { color: #606 }  /* a markup attribute name */\n  .atv { color: #800 }  /* a markup attribute value */\n  .dec, .var { color: #606 }  /* a declaration; a variable name */\n  .fun { color: red }  /* a function name */\n}\n\n/* Use higher contrast and text-weight for printable form. */\n@media print, projection {\n  .str { color: #060 }\n  .kwd { color: #006; font-weight: bold }\n  .com { color: #600; font-style: italic }\n  .typ { color: #404; font-weight: bold }\n  .lit { color: #044 }\n  .pun, .opn, .clo { color: #440 }\n  .tag { color: #006; font-weight: bold }\n  .atn { color: #404 }\n  .atv { color: #060 }\n}\n\n/* SHELL / TERMINAL CODE BLOCKS */\n\ncode-example.code-shell, code-example[language=sh], code-example[language=bash] {\n  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {\n    color: $codegreen;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_code.scss",".contribute-container {\n  h2 {\n    margin: 0;\n  }\n\n  .l-sub-section {\n    width: 90%;\n    margin-bottom: 20px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_contribute.scss","aio-contributor-list {\n  @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n    .grid-fluid{\n      width: auto;\n    }\n  }\n\n  @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n    .grid-fluid{\n      margin-left: 20px;\n      margin-right: 20px;\n      float: none;\n      display: block;\n      width: auto;\n    }\n  }\n}\n\n.group-buttons {\n  margin: 32px auto;\n\n  a {\n    &.selected {\n      background-color: $blue;\n      color: white;\n    }\n  }\n}\n\n.contributor-group {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\naio-contributor {\n  background: $white;\n  margin: 8px;\n  position: relative;\n  cursor: pointer;\n  border-radius: 4px;\n  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n  transition: all .3s;\n  perspective: 800px;\n\n  &:hover {\n    transform: translate3d(0,-3px,0);\n    box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);\n\n    .contributor-image {\n      transform: scale(1.05);\n    }\n\n    .contributor-info {\n      opacity: 1;\n    }\n  }\n\n  .contributor-info {\n    background: rgba($darkgray, 0.5);\n    height: 168px;\n    width: 168px;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    opacity: 0;\n    border-radius: 50%;\n\n    [mat-button] {\n      color: $white;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 8px;\n      padding: 0;\n\n      &:hover {\n        color: $lightgray;\n      }\n\n      &.icon {\n        min-width: 20px;\n        width: 20px;\n\n        .fa-2x {\n          font-size: 20px;\n        }\n      }\n    }\n  }\n\n  div.contributor-card {\n    width: 250px;\n    height: 270px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    overflow: hidden;\n    border-radius: 4px;\n    transform-style:preserve-3d;\n    transition:transform ease 500ms;\n\n    h3 {\n      margin: 8px 0;\n    }\n\n    .card-front, .card-back {\n      width: 100%;\n      height: 100%;\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box;\n    }\n\n    .card-front {\n      justify-content: center;\n    }\n\n    .card-back {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      padding: 16px 24px;\n      transform:rotateY(180deg);\n\n      section {\n        display: none;\n      }\n\n      p {\n        margin: 8px 0;\n        font-size: 12px;\n        line-height: 14px;\n        text-align: left;\n      }\n\n    }\n\n    &.flipped {\n      transform:rotateY(180deg);\n      .card-front {\n        display: none;\n      }\n    }\n  }\n\n  .contributor-image {\n    display: flex;\n    justify-content: center;\n    border-radius: 50%;\n    align-items: center;\n    height: 168px;\n    width: 168px;\n    background-size: cover;\n    background-position: center;\n    margin: 8px auto;\n    border: 2px solid $lightgray;\n    transition: all .2s ease-in-out;\n  }\n\n  section {\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n  }\n\n  p {\n    cursor: pointer;\n    font-size: 14px;\n    line-height: 18px;\n    margin: 8px 16px;\n    text-overflow: ellipsis;\n    overflow: scroll;\n    font-weight: 400;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_contributor.scss","/*\n * General styling to make detail/summary tags look a bit more material\n * To get the best out of it you should structure your usage like this:\n *\n * ```\n * <details>\n *   <summary>Some title</summary>\n *   <div class=\"details-content\">\n *     Some content\n *   </div>\n *  </details>\n *\n */\n\nsummary {\n  cursor: pointer;\n  font-size: 16px;\n  position: relative;\n  padding: 16px 24px;\n  color: $black;\n  height: 16px;\n  display: block; // Remove the built in details marker in FF\n\n  &::-webkit-details-marker {\n    display: none; // Remove the built in details marker in webkit\n  }\n\n  &::after {\n    content: '\\E5CE'; // See https://material.io/icons/#ic_expand_less\n    font-family: 'Material Icons';\n    font-size: 24px;\n    -webkit-font-smoothing: antialiased;\n    @include rotate(0deg); // We will rotate 180 degrees when details is open\n\n    position: absolute;\n    top: 12px;\n    right: 22px;\n  }\n}\n\ndetails {\n  box-shadow: 0 1px 4px 0 rgba($black, 0.37);\n\n  .detail-contents {\n    padding: 16px 24px;\n  }\n\n  &[open] > summary::after {\n    @include rotate(180deg); // Rotate the icon\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_details.scss",".edit-page-cta {\n    font-weight: 400;\n    font-size: 14px;\n    color: $blue;\n    text-align: right;\n    margin-right: 32px;\n    display: block;\n    position: absolute;\n    right: 0;\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_edit-page-cta.scss","// FEATURES MARKETING PAGE SPECIFIC STYLES\n\n.feature-section {\n  margin: 0 0 32px;\n\n  .feature-header, .text-headline {\n    text-align: center;\n  }\n\n  .feature-header img {\n    margin: 16px;\n  }\n\n  .feature-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin: 8px 0px;\n    clear: both;\n  }\n\n  .feature-row {\n    display: flex;\n    flex-wrap: wrap;\n\n    @media (max-width: 600px) {\n      flex-direction: column;\n    }\n\n    .feature {\n      max-width: 300px;\n      margin: 0 16px;  \n      \n      @media (max-width: 768px) {\n        max-width: 100%;\n      }\n    }\n  }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_features.scss",".filetree {\n  background: $offwhite;\n  border: 4px solid $lightgray;\n  border-radius: 4px;\n  margin: 0 0 24px 0;\n  padding: 16px 32px;\n\n  .file {\n    display: block;\n    font-family: $main-font;\n    letter-spacing: 0.3px;\n    line-height: 32px;\n    color: $darkgray;\n  }\n\n  .children {\n    padding-left: 24px;\n    position: relative;\n    overflow: hidden;\n\n    .file {\n      position: relative;\n\n      &:before {\n        content: '';\n        left: -18px;\n        bottom: 16px;\n        width: 16px;\n        height: 9999px;\n        position: absolute;\n        border-width: 0 0 1px 1px;\n        border-style: solid;\n        border-color: $lightgray;\n        border-radius: 0 0 0 3px;\n      }\n    }\n  }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_filetree.scss",".sidenav-content {\n  h1, h2, h3, h4, h5, h6 {\n\n    &.no-anchor .header-link {\n      display: none;\n    }\n\n    .header-link {\n      box-sizing: border-box;\n      color: $mediumgray;\n      display: inline-block;\n      margin-left: -42px;\n      padding: 0 8px;\n      text-decoration: none;\n      user-select: none;\n      vertical-align: middle;\n      visibility: hidden;\n      width: 40px;\n\n      @media (max-width: 600px) {\n        float: right;\n        margin-left: 0;\n      }\n    }\n\n    &:hover .header-link {\n      visibility: visible;\n    }\n  }\n\n  .l-sub-section {\n    h1, h2, h3, h4, h5, h6 {\n      a {\n        padding-right: 64px;\n        margin-left: -74px;\n      }\n    }\n  }\n\n  .alert {\n    h1, h2, h3, h4, h5, h6 {\n      a {\n        padding-right: 80px;\n        margin-left: -90px;\n      }\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_heading-anchors.scss","hr {\n    border: none;\n    background: $lightgray;\n    height: 1px;\n}\n\n.hr-margin {\n    display: block;\n    height: 1px;\n    border: 0;\n    margin-top: 16px;\n    margin-bottom: 16px;\n    padding: 0;\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_hr.scss",".content {\n  img {\n\n    &.right {\n      clear: both;\n      float: right;\n      margin-left: 20px;\n      margin-bottom: 20px;\n    }\n\n    &.left {\n      clear: both;\n      float: left;\n      margin-right: 20px;\n      margin-bottom: 20px;\n    }\n\n    @media (max-width: 1300px) {\n      max-width: 100%;\n      height: auto;\n    }\n\n    @media (max-width: 600px) {\n      float: none !important;\n      &.right {\n        margin-left: 0;\n      }\n      &.left {\n        margin-right: 0;\n      }\n    }\n  }\n\n  figure {\n    border-radius: 4px;\n    background: $white;\n    padding: 20px;\n    display: inline-block;\n    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);\n    margin: 0 0 14px 0;\n\n    img {\n      border-radius: 4px;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_images.scss",".progress-bar-container {\n  height: 2px;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 11;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_progress-bar.scss","table {\n  margin: 24px 0px;\n  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n  border-radius: 2px;\n  background: $offwhite;\n\n  &.is-full-width {\n    width: 100%;\n  }\n\n  &.is-fixed-layout {\n    table-layout: fixed;\n  }\n\n  thead {\n    vertical-align: middle;\n    border-color: inherit;\n\n    tr {\n      vertical-align: inherit;\n      border-color: inherit;\n    }\n\n    th {\n      background: rgba($lightgray, 0.2);\n      border-bottom: 1px solid $lightgray;\n      color: $darkgray;\n      font-size: 12px;\n      font-weight: 500;\n      padding: 8px 32px;\n      text-align: left;\n      text-transform: uppercase;\n      line-height: 28px;\n    }\n  }\n\n  tbody {\n    th,\n    td {\n      border-bottom: 1px solid $lightgray;\n      padding: 16px;\n      text-align: left;\n      line-height: 24px;\n      vertical-align: top;\n\n      @media (max-width: 480px) {\n        &:before {\n          // content: **ADD TABLE HEADER**;\n          display: inline-block;\n        }\n      }\n\n    }\n\n    td {\n      letter-spacing: 0.30px;\n\n    tr td:first-child {\n      @media (max-width: 480px) {\n        background-color: $lightgray;\n      }\n    }\n\n    }\n\n    th {\n      background: rgba($lightgray, 0.2);\n      border-right: 1px solid $lightgray;\n      font-weight: 600;\n      max-width: 100px;\n    }\n\n    tr:last-child td {\n      border: none;\n\n      @media (max-width: 480px) {\n        border-bottom: 1px solid $lightgray;\n      }\n    }\n  }\n}\n\n#cheatsheet {\n\n  table tbody td {\n    overflow: auto;\n  }\n\n  @media only screen and (max-width: 990px) {\n\n    /* Force table to not be like tables anymore */\n    table, thead, tbody, tfoot, tr, th, td {\n      display: block;\n      position: relative;\n      max-width: 100%;\n\n      code {\n        padding: 0;\n        background-color: inherit;\n      }\n    }\n\n    th {\n      border-right: none;\n    }\n\n    th, td {\n      &:not(:last-child) {\n        border-bottom: none;\n        padding-bottom: 0px;\n      }\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_table.scss",".presskit-container {\n  padding: 0 32px 32px 32px;\n\n  h2 {\n    color: #37474F;\n  }\n\n  .l-space-left-3 {\n    margin-left: 3 * 8px;\n  }\n\n  .cc-by-anchor {\n    text-decoration: underline;\n    color: grey !important;\n  }\n\n  .presskit-row {\n    margin: 48px 0;\n    width: 100%;\n\n    .presskit-inner {\n      display: flex;\n      align-items: center;\n\n      @media(max-width: 599px) {\n        flex-direction: column;\n      }\n\n      h3 {\n        font-weight: 500;\n        margin-top: 0;\n        margin-bottom: 0;\n        color: #455A64;\n\n        @media(max-width: 599px) {\n          padding-bottom: 16px;\n        }\n      }\n\n      .transparent-img-bg {\n        margin-top: 10px;\n        border-radius: 4px;\n        width: 128px;\n        height: 128px;\n        background-color: #34474F;\n      }\n\n      ul {\n        padding: 0;\n        list-style-type: none;\n\n        @media(max-width: 599px) {\n          padding: 0 !important;\n          margin: 0 !important;\n        }\n\n        li {\n          margin: 0 0 8px 0;\n        }\n      }\n    }\n\n    .presskit-image-container {\n\n      @media(max-width: 599px) {\n        text-align: center;\n      }\n\n      img {\n        width: 128px;\n        height: 128px;\n        margin-bottom: 8px * 2;\n      }\n    }\n  }\n\n  .presskit-row:first-child {\n    margin-top: 0;\n\n    @media(max-width: 599px) {\n      margin-top: 48px;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_presskit.scss",".showcase {\n  width: 80%;\n}\n\n.c-resource-nav {\n  width: 20%;\n}\n\n.resources-container {\n  position: relative;\n}\n\n.grid-fixed:after, .grid-fixed:before {\n  content: '.';\n  clear: both;\n  display: block;\n  overflow: hidden;\n  visibility: hidden;\n  font-size: 0;\n  line-height: 0;\n  width: 0;\n  height: 0;\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  .grid-fixed {\n    width: auto;\n  }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n  .grid-fixed .c3, .grid-fixed .c8 {\n    margin-left: 20px;\n    margin-right: 20px;\n    float: none;\n    display: block;\n    width: auto;\n  }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {\n  .grid-fixed .c3, .grid-fixed .c8 {\n    margin-left: 0px;\n    margin-right: 0px;\n    float: none;\n    display: block;\n    width: auto;\n  }\n}\n\n@media handheld and (max-width: 900px), screen and (max-width: 900px) {\n  /* line 6, ../scss/_responsive.scss */\n  .grid-fixed{\n    margin: 0 auto;\n    *zoom: 1;\n  }\n  .grid-fixed:after, .grid-fixed:before, {\n    content: '.';\n    clear: both;\n    display: block;\n    overflow: hidden;\n    visibility: hidden;\n    font-size: 0;\n    line-height: 0;\n    width: 0;\n    height: 0;\n  }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px) {\n  /* line 6, ../scss/_responsive.scss */\n  .grid-fixed {\n    margin: 0 auto;\n    *zoom: 1;\n  }\n  .grid-fixed:after, .grid-fixed:before {\n    content: '.';\n    clear: both;\n    display: block;\n    overflow: hidden;\n    visibility: hidden;\n    font-size: 0;\n    line-height: 0;\n    width: 0;\n    height: 0;\n  }\n}\n\naio-resource-list {\n\n  .shadow-1 {\n    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 1px 4px 0 rgba($black, 0.37);\n  }\n\n  .showcase {\n    margin-bottom: 8px * 6;\n    border-radius: 4px;\n  }\n\n  .c-resource {\n    h4 {\n      margin: 0;\n      line-height: 24px;\n    }\n\n    p {\n      margin: 0;\n    }\n  }\n\n  .c-resource-nav {\n    position: fixed;\n    top: 142px;\n    right: 32px;\n    width: 8px * 20;\n    z-index: 1;\n    background-color: #fff;\n    border-radius: 2px;\n\n    a {\n      color: #373E41;\n      text-decoration: none;\n    }\n\n    .category {\n      padding: 10px 0;\n\n      .category-link {\n        display: block;\n        margin: 2px 0;\n        padding: 3px 14px;\n        font-size: 18px !important;\n\n        &:hover {\n          background: #edf0f2;\n          color: #2B85E7;\n        }\n      }\n    }\n\n    .subcategory {\n      .subcategory-link {\n        display: block;\n        margin: 2px 0;\n        padding: 4px 14px;\n\n        &:hover {\n          background: #edf0f2;\n          color: #2B85E7;\n        }\n      }\n    }\n  }\n\n  .h-anchor-offset {\n    display: block;\n    position: relative;\n    top: -20px;\n    visibility: hidden;\n  }\n\n  .l-flex--column {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .c-resource-header {\n    margin-bottom: 16px;\n  }\n\n  .c-contribute {\n    margin-bottom: 24px;\n  }\n\n  .c-resource-header h2 {\n    margin: 0;\n  }\n\n  .subcategory-title {\n    padding: 16px 23px;\n    margin: 0;\n    background-color: $mist;\n    color: #373E41;\n  }\n\n  .h-capitalize {\n    text-transform: capitalize;\n  }\n\n  .h-hide {\n    display: none;\n  }\n\n  .resource-row-link {\n    color: #1a2326;\n    border: transparent solid 1px;\n    margin: 0;\n    padding: 16px 23px 16px 23px;\n    position: relative;\n    text-decoration: none;\n    transition: all .3s;\n  }\n\n  .resource-row-link:hover {\n    color: #1a2326;\n    text-decoration: none;\n    border-color: #2B85E7;\n    border-radius: 4px;\n    box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);\n    transform: translateY(-2px);\n  }\n\n  @media(max-width: 900px) {\n    .c-resource-nav {\n      display: none;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_resources.scss","body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {\n  height: 6px;\n  width: 6px;\n}\n\nbody::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-track, .mat-sidenav-content::-webkit-scrollbar-track {\n  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n}\n\nbody::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {\n  background-color: $mediumgray;\n  outline: 1px solid $darkgray;\n}\n\n.search-results::-webkit-scrollbar, .toc-container::-webkit-scrollbar {\n  height: 4px;\n  width: 4px;\n}\n\n.search-results::-webkit-scrollbar-track, .toc-container::-webkit-scrollbar-track {\n  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n}\n\n.search-results::-webkit-scrollbar-thumb, .toc-container::-webkit-scrollbar-thumb {\n  background-color: $mediumgray;\n  outline: 1px solid slategrey;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_scrollbar.scss","aio-search-results {\n    z-index: 10;\n}\n\n.search-results {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    overflow: auto;\n    padding: 68px 32px 0;\n    color: $offwhite;\n    width: auto;\n    max-height: 95vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 5;\n    background-color: $darkgray;\n    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n    box-sizing: border-box;\n\n    @media (max-width: 480px) {\n        display: block;\n        .search-area {\n            display: block;\n            margin: 16px 16px;\n        }\n    }\n}\n\naio-search-results.embedded .search-results {\n    padding: 0;\n    color: inherit;\n    width: auto;\n    max-height: 100%;\n    position: relative;\n    background-color: inherit;\n    box-shadow: none;\n    box-sizing: border-box;\n\n    .search-area a {\n        color: lighten($darkgray, 10);\n        &:hover {\n            color: $accentblue;\n        }\n    }\n}\n\n.search-area {\n    display: flex;\n    flex-direction: column;\n    margin: 16px 16px;\n    height: 100%;\n\n    h3 {\n        font-size: 16px;\n        font-weight: 400;\n        margin: 10px 0px 5px;\n        text-transform: uppercase;\n    }\n\n    ul {\n        margin: 0;\n        padding: 0;\n\n        li {\n            list-style: none;\n        }\n    }\n\n    a {\n        font-size: 14px;\n        color: $lightgray;\n        text-decoration: none;\n        font-weight: normal;\n        &:hover {\n            color: $white;\n        }\n        &:visited {\n          text-decoration: none;\n        }\n\n        span.symbol {\n          margin-right: 8px;\n        }\n    }\n\n    .priority-pages {\n        padding: 0.5rem 0;\n        a {\n            font-weight: bold;\n        }\n    }\n\n    @include bp(tiny) {\n        display: block;\n    }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_search-results.scss",".l-sub-section {\n    color: $darkgray;\n    background-color: rgba($blue, 0.05);\n    border-left: 8px solid $blue;\n    padding: 16px;\n    margin-bottom: 8px;\n    display: table;\n    clear: both;\n    width: 100%;\n    box-sizing: border-box;\n\n    h3 {\n        margin: 8px 0 0;\n    }\n\n    a:hover {\n        color: $blue;\n        text-decoration: underline;\n    }\n}\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_subsection.scss",".toc-container {\n  width: 18%;\n  position: fixed;\n  top: 76px;\n  right: 0;\n  bottom: 12px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\naio-toc {\n  &.embedded {\n    @media (min-width: 801px) {\n      display: none;\n    }\n  }\n}\n\n.toc-inner {\n  font-size: 13px;\n  overflow-y: visible;\n  padding: 4px 0 0 10px;\n\n  .toc-heading,\n  .toc-list .h1 {\n    font-size: 115%;\n  }\n\n  .toc-heading {\n    font-weight: 500;\n    margin: 0 0 16px 8px;\n    padding: 0;\n  }\n\n  .toc-heading.secondary {\n    position: relative;\n    top: -8px;\n\n    &:hover {\n      color: $accentblue;\n    }\n  }\n\n  button.toc-heading,\n  button.toc-more-items {\n    cursor: pointer;\n    display: inline-block;\n    background: 0;\n    background-color: transparent;\n    border: none;\n    box-shadow: none;\n    padding: 0;\n    text-align: start;\n\n    &.embedded:focus {\n      outline: none;\n      background: $lightgray;\n    }\n  }\n\n  button.toc-heading {\n    mat-icon.rotating-icon {\n      height: 18px;\n      width: 18px;\n      position: relative;\n      left: -4px;\n      top: 5px;\n    }\n\n    &:hover:not(.embedded) {\n      color: $accentblue;\n    }\n  }\n\n  button.toc-more-items {\n    color: $mediumgray;\n    top: 10px;\n    position: relative;\n\n    &:hover {\n      color: $accentblue;\n    }\n  }\n\n  button.toc-more-items::after {\n    content: 'expand_less';\n  }\n\n  button.toc-more-items.collapsed::after {\n    content: 'more_horiz';\n  }\n\n\n  .mat-icon.collapsed {\n    @include rotate(0deg);\n  }\n\n  .mat-icon:not(.collapsed) {\n    @include rotate(90deg);\n    // margin: 4px;\n  }\n\n  ul.toc-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0 8px 0 0;\n\n    @media (max-width: 800px) {\n      width: auto;\n    }\n\n    li {\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 16px;\n      padding: 3px 0 3px 12px;\n      position: relative;\n      transition: all 0.3s ease-in-out;\n\n      &.h1:after {\n        content: '';\n        display: block;\n        height: 1px;\n        width: 40%;\n        margin: 7px 0 4px 0;\n        background: #DBDBDB;\n        clear: both;\n      }\n\n      &.h3 {\n        padding-left: 24px;\n      }\n\n      a {\n        font-size: inherit;\n        color: lighten($darkgray, 10);\n        display:table-cell;\n        overflow: visible;\n        font-size: 12px;\n        display: table-cell;\n      }\n\n      &:hover a {\n        color: $accentblue;\n      }\n\n      &.active {\n        a {\n          color: $blue;\n          font-weight: 500;\n\n          &:before {\n            content: '';\n            border-radius: 50%;\n            left: -3px;\n            top: 12px;\n            background: $blue;\n            position: absolute;\n            width: 6px;\n            height: 6px;\n          }\n        }\n      }\n    }\n\n    &:not(.embedded) li {\n      &:before {\n        border-left: 1px solid $lightgray;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        top: 0;\n      }\n\n      &:first-child:before {\n        top: 13px;\n      }\n\n      &:last-child:before {\n        bottom: calc(100% - 14px);\n      }\n\n      &:not(.active):hover a:before {\n        content: '';\n        border-radius: 50%;\n        left: -3px;\n        top: 12px;\n        background: $lightgray;\n        position: absolute;\n        width: 6px;\n        height: 6px;\n      }\n    }\n  }\n\n}\n\naio-toc.embedded > div.collapsed li.secondary {\n  display: none;\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_toc.scss","/* SELECT MENU */\n\n.form-select-menu {\n  position: relative;\n}\n\n.form-select-button {\n  background: $white;\n  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n  box-sizing: border-box;\n  border: 1px solid $white;\n  color: $blue-grey-600;\n  font-size: 12px;\n  font-weight: 400;\n  height: 32px;\n  line-height: 32px;\n  outline: none;\n  padding: 0 16px;\n  text-align: left;\n  width: 100%;\n  cursor: pointer;\n\n  strong {\n    font-weight: 600;\n    margin-right: 8px;\n    text-transform: uppercase;\n  }\n\n  &:focus {\n    border: 1px solid $blue-400;\n    box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);\n  }\n}\n\n.form-select-dropdown {\n  background: $white;\n  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);\n  border-radius: 4px;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: $layer-2;\n\n  li {\n    cursor: pointer;\n    font-size: 14px;\n    line-height: 32px;\n    margin: 0;\n    padding: 0 16px 0 40px;\n    position: relative;\n    transition: all .2s;\n\n    &:hover {\n      background: $blue-grey-50;\n      color: $blue-500;\n    }\n\n    &.selected {\n      background-color: $blue-grey-100;\n    }\n\n    .symbol {\n      left: 16px;\n      position: absolute;\n      top: 8px;\n      z-index: $layer-5;\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_select-menu.scss","\naio-shell.mode-archive {\n\n  .mat-toolbar.mat-primary, footer {\n    background: linear-gradient(145deg,#263238,#78909C);\n  }\n\n  .vertical-menu-item {\n    &.selected, &:hover {\n      color: #263238;\n    }\n  }\n\n  .toc-inner ul.toc-list li.active a {\n    color: #263238;\n\n    &:before {\n      background-color: #263238;\n    }\n  }\n\n  .toc-inner ul.toc-list li:hover a {\n    color: #263238;\n  }\n}\n\naio-shell.mode-next {\n\n  .mat-toolbar.mat-primary, footer {\n    background: linear-gradient(145deg,#DD0031,#C3002F);\n  }\n\n  .vertical-menu-item {\n    &.selected, &:hover {\n      color: #DD0031;\n    }\n  }\n\n  .toc-inner ul.toc-list li.active a {\n    color: #DD0031;\n\n    &:before {\n      background-color: #DD0031;\n    }\n  }\n\n  .toc-inner ul.toc-list li:hover a {\n    color: #DD0031;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_deploy-theme.scss","$notificationHeight: 56px;\n\n// we need to override some of the toolbar styling\n.mat-toolbar mat-toolbar-row.notification-container {\n  padding: 0;\n  height: auto;\n  overflow: hidden;\n}\n\naio-notification {\n  background: $darkgray;\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: $notificationHeight;\n  justify-content: center;\n\n  @media (max-width: 430px) {\n    justify-content: flex-start;\n    padding-left: 10px;\n  }\n\n  .close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: $notificationHeight;\n    height: $notificationHeight;\n    background: $darkgray;\n  }\n\n  .content {\n    display: flex;\n    max-width: calc(100% - #{$notificationHeight});\n    text-transform: none;\n    padding: 0;\n\n    .icon {\n      margin-right: 10px;\n      @media (max-width: 464px) {\n        display: none;\n      }\n    }\n\n    .message {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .action-button {\n      margin-left: 10px;\n      background: $brightred;\n      border-radius: 15px;\n      text-transform: uppercase;\n      padding: 0 10px;\n      font-size: 12px;\n      @media (max-width: 780px) {\n        display: none;\n      }\n    }\n  }\n}\n\n// Here are all the hacks to make the content and sidebars the right height\n// when the notification is visible\n.aio-notification-show {\n  .sidenav-content {\n    padding-top: 80px + $notificationHeight;\n  }\n\n  mat-sidenav.mat-sidenav.sidenav {\n    top: 56px + $notificationHeight;\n\n    @media (max-width: 600px) {\n      top: 56px + $notificationHeight;\n    }\n  }\n\n  .toc-container {\n    top: 76px + $notificationHeight;\n  }\n\n  .search-results {\n    padding-top: 68px + $notificationHeight;\n  }\n\n  &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {\n    section {\n      padding-top: $notificationHeight;\n    }\n  }\n}\n\n// Animate the content when the notification bar is dismissed\n// this should be kept in sync with the animation durations in\n// - aio/src/app/layout/notification/notification.component.ts\n// - aio/src/app/app.component.ts : notificationDismissed()\n.aio-notification-animating {\n  .sidenav-content {\n    transition: padding-top 250ms ease;\n  }\n  mat-sidenav.mat-sidenav.sidenav, .toc-container {\n    transition: top 250ms ease;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// /home/wzc/dev/angular/angular/aio/src/styles/2-modules/_notification.scss"],"sourceRoot":"webpack:///"}