html {
      font-size: 16px;
    }

    body {
      font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
      margin: 0;
      font-size: 1.6rem;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-bottom: 0;
      font-weight: 500
    }

    .nr {
      border-radius: 0 !important;
    }

    h1 {
      font-size: 4rem;
      display: inline-block;
      margin: 1.6rem 0
    }

    @media screen and (max-width: 600px) {
      h1 {
        margin-top: 0
      }
    }

    h2 {
      clear: both;
      font-size: 3.2rem;
      margin-top: 4rem;
      padding-top: 4rem
    }

    .page-about h2,
    .page-contribute h2,
    .page-events h2,
    .page-features h2,
    .page-home h2,
    .page-presskit h2,
    .page-resources h2,
    .page-api h2 {
      border-top: 0;
      margin-top: 2rem;
      padding-top: 0
    }

    h3 {
      font-size: 2.4rem;
      margin-top: 3rem;
      clear: both
    }

    h4 {
      font-size: 2rem;
      margin-top: 3rem;
      clear: both
    }

    h5 {
      font-size: 1.8rem;
      margin-top: 2rem;
      clear: both
    }

    h6 {
      font-size: 1.6rem;
      margin-top: 2rem;
      clear: both
    }

    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
      font-size: inherit
    }

    @media screen and (max-width: 600px) {

      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 8px 0
      }
    }

    .mat-tab-body-wrapper h2 {
      margin-top: 0
    }

    p,
    ol,
    ul,
    li,
    input,
    a {
      font-family: inherit;
      font-weight: 400
    }

    p>em,
    ol>em,
    ul>em,
    li>em,
    input>em,
    a>em {
      letter-spacing: .03rem
    }

    p {
      margin: 1em 0
    }

    p+ul {
      margin-top: 4px
    }

    ol li,
    ol p {
      margin: 4px 0
    }

    ol ol {
      list-style-type: lower-alpha
    }

    ol ol ol {
      list-style-type: lower-roman
    }

    li {
      padding-bottom: 8px;
      line-height: 2.4rem
    }

    li p {
      margin: 0
    }

    li a {
      line-height: inherit
    }

    a {
      text-decoration: none
    }

    .app-toolbar a {
      font-size: 1.6rem;
      font-weight: 400;
      font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
      text-transform: uppercase
    }

    strong {
      font-weight: 500
    }

    table {
      border-collapse: collapse;
      border-radius: 2px;
      border-spacing: 0;
      margin: 12px 0 32px
    }

    table tbody th {
      max-width: 100px;
      padding: 13px 32px;
      text-align: left
    }

    td {
      font-weight: 400;
      padding: 8px 30px
    }

    td>p:first-child,
    td ul:first-child {
      margin-top: 0
    }

    td>p:last-child,
    td ul:last-child {
      margin-bottom: 0
    }

    code {
      font-family: Roboto Mono, monospace;
      font-size: 90%
    }

    .sidenav-content a:hover {
      text-decoration: underline
    }

    .folder-api int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-api int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-cli int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-cli int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-docs int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-docs int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-errors int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-errors int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-extended-diagnostics int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-extended-diagnostics int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-guide int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-guide int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-start int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-start int-doc-viewer :not(.github-links)>a[href^="https:"],
    .folder-tutorial int-doc-viewer :not(.github-links)>a[href^="http:"],
    .folder-tutorial int-doc-viewer :not(.github-links)>a[href^="https:"] {
      display: inline-flex;
      align-items: center
    }

    .folder-api int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-api int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-cli int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-cli int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-docs int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-docs int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-errors int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-errors int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-extended-diagnostics int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-extended-diagnostics int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-guide int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-guide int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-start int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-start int-doc-viewer :not(.github-links)>a[href^="https:"]:after,
    .folder-tutorial int-doc-viewer :not(.github-links)>a[href^="http:"]:after,
    .folder-tutorial int-doc-viewer :not(.github-links)>a[href^="https:"]:after {
      content: "\e89e";
      font-family: Material Icons;
      margin-left: .3rem;
      float: right;
      display: flex;
      align-items: center
    }

    .sidenav-container {
      width: 100%;
    }

    .sidenav-content {
      min-height: 100vh;
      padding: 80px 0;
      /* max-width: 50em; */
      max-width: 100%;
      /* margin: 0 auto; */
      margin-left: 10px;
    }

    .breadcrumb-item.text-dark.active {
        font-weight: bold;
    }

    @media screen and (max-width: 600px) {
      .sidenav-content {
        min-height: 450px;
        padding: 80px 2rem 1rem
      }
    }

    @media screen and (max-width: 480px) {
      .sidenav-content {
        padding: 80px 1rem 1rem
      }
    }

    .page-about .sidenav-content,
    .page-contribute .sidenav-content,
    .page-events .sidenav-content,
    .page-features .sidenav-content,
    .page-home .sidenav-content,
    .page-presskit .sidenav-content,
    .page-resources .sidenav-content,
    .page-api .sidenav-content,
    .page-file-not-found .sidenav-content,
    .page-guide-cheatsheet .sidenav-content {
      max-width: none
    }

    .sidenav-content button {
      min-width: 24px
    }

    @media (max-width: 600px) {
      int-menu {
        display: none
      }
    }

    .no-animations int-doc-viewer>* {
      transition: none !important
    }

    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      margin: 20px 0
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }

    footer {
      position: relative;
      line-height: 2.4rem;
      flex: 1;
      padding: 48px 25px;
      z-index: 0;
      font-weight: 300
    }

    footer int-footer {
      display: block;
      position: relative;
      z-index: 0;
      overflow: auto
    }

    footer int-footer>* {
      max-width: 50em
    }

    footer int-footer .footer-block {
      margin: 0 .3rem
    }

    footer int-footer a {
      text-decoration: none;
      z-index: 20;
      position: relative
    }

    footer int-footer a:hover {
      text-decoration: underline
    }

    footer int-footer a:visited {
      text-decoration: none
    }

    footer int-footer a:focus {
      outline: 1px solid rgba(255, 255, 255, .8);
      outline-offset: 2px
    }

    footer int-footer .footer-block-heading {
      font-size: 1.6rem;
      text-transform: uppercase;
      font-weight: 400;
      margin: 8px 0 12px
    }

    @media (max-width: 600px) {
      footer int-footer .footer-block-heading {
        font-size: 1.4rem
      }
    }

    footer int-footer p {
      text-align: center;
      margin: 10px auto 5px
    }

    @media (max-width: 480px) {
      footer int-footer p {
        text-align: left
      }
    }

    footer int-footer div.grid-fluid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin: 0 auto 40px;
      justify-content: center
    }

    footer int-footer div.grid-fluid ul {
      list-style-position: inside;
      padding: 0;
      margin: 0
    }

    footer int-footer div.grid-fluid ul li {
      list-style-type: none;
      padding: 4px 0;
      text-align: left
    }

    @media (max-width: 45rem) {
      footer int-footer div.grid-fluid {
        grid-template-columns: repeat(2, calc(50% - 12px))
      }

      footer int-footer div.grid-fluid .footer-block {
        margin: 1.5rem 2.4rem .8rem 20%
      }
    }

    @media (max-width: 25rem) {
      footer int-footer div.grid-fluid .footer-block {
        margin-left: .3rem;
        margin-right: .3rem
      }
    }

    @media (max-width: 20rem) {
      footer int-footer div.grid-fluid {
        grid-template-columns: 1fr
      }
    }

    footer:after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        /*savepage-url=/assets/images/logos/angular/angular_whiteTransparent_withMargin.png*/
        var(--savepage-url-32) top 0 left 0 repeat,
        /*savepage-url=/assets/images/logos/angular/angular_whiteTransparent_withMargin.png*/
        var(--savepage-url-32) top 80px left 160px repeat;
      opacity: .05;
      background-size: 320px auto
    }

    html,
    body {
      height: 100%
    }

    .center-layout {
      margin: 0 auto;
      max-width: 62.5em
    }

    .center-layout-wide {
      margin: 0 auto;
      max-width: 84em
    }

    .github-links+.content h1 {
      max-width: 90%
    }

    .clear {
      clear: both
    }

    .l-flex-wrap {
      display: flex;
      flex-wrap: wrap
    }

    .flex-center {
      display: flex;
      justify-content: center
    }

    .center {
      text-align: center
    }

    .visually-hidden {
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important
    }

    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      min-height: 480px;
      height: 80vh;
      max-height: 560px;
      box-sizing: border-box;
      padding: 48px 48px 32px;
      overflow: hidden;
      transform: skewY(8deg);
      transform-origin: 100%
    }

    @media (max-width: 600px) {
      .hero {
        max-height: 486px;
        padding-top: 40px;
        transform: none
      }
    }

    .hero .hero-title {
      display: inline-block;
      font-size: 2.8rem;
      font-weight: 400;
      line-height: 4.8rem;
      margin: 0 8px 0 0;
      text-transform: uppercase
    }

    .hero .hero-title.is-standard-case {
      text-transform: none
    }

    section#intro {
      display: flex;
      align-items: center;
      position: relative;
      max-width: 900px;
      width: 100%;
      height: 480px;
      margin: 0 auto;
      padding: 48px 0 0
    }

    section#intro .hero-logo {
      background-image:
        /*savepage-url=/assets/images/logos/angular/angular.svg*/
        url()
    }

    @media (max-width: 65rem) {
      section#intro {
        flex-direction: column;
        justify-content: center;
        padding: 40px 0 32px
      }

      section#intro button {
        margin: 0;
        height: 60px
      }
    }

    section#intro .homepage-container {
      width: 50%;
      max-width: 1040px;
      margin: -7% auto 0;
      padding-top: 0;
      padding-bottom: 0
    }

    @media (max-width: 65rem) {
      section#intro .homepage-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0
      }
    }

    section#intro .hero-headline {
      font-size: 4rem;
      line-height: 6.4rem;
      font-weight: 500;
      margin: 32px 0;
      color: inherit
    }

    section#intro .hero-headline:after {
      display: none
    }

    @media (max-width: 65rem) {
      section#intro .hero-headline {
        text-align: center
      }
    }

    @media (max-width: 575px) {
      section#intro .hero-headline {
        font-size: 3.2rem;
        line-height: 5rem
      }
    }

    section#intro .hero-logo {
      display: flex;
      width: 50%;
      min-width: 250px;
      height: 400px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 8px
    }

    .announcement-bar {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      max-width: 50vw;
      margin: 0 auto;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      box-sizing: border-box;
      transition: all .3s ease-in
    }

    @media (max-width: 991px) {
      .announcement-bar {
        flex-direction: column;
        text-align: center;
        padding: 32px 16px
      }
    }

    @media (max-width: 768px) {
      .announcement-bar {
        width: 100%;
        max-width: none
      }
    }

    .announcement-bar>* {
      margin: 8px
    }

    .announcement-bar .button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      min-width: 160px;
      font-size: 1.6rem;
      border-radius: 48px;
      box-shadow: 0 2px 5px #00000042;
      box-sizing: border-box;
      cursor: pointer
    }

    .announcement-bar .material-icons {
      display: none;
      right: 0;
      position: static;
      transition: all .3s ease-in;
      font-size: 1.6rem
    }

    .announcement-bar p {
      font-size: 1.6rem;
      margin: 8px;
      text-align: center
    }

    .home-row .card {
      width: 70%;
      border-radius: 4px;
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      box-sizing: border-box;
      transition: box-shadow .5s;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      min-width: 350px;
      height: auto;
      margin: auto;
      padding: 24px;
      box-shadow: 0 6px 6px #0a101426, 0 0 52px #0a10141f
    }

    .home-row .card:hover {
      box-shadow: 0 8px 8px #0a10143d, 0 0 8px #0a10141f;
      text-decoration: none
    }

    @media (max-width: 600px) {
      .home-row .card {
        margin: 16px auto 0
      }

      .home-row .card h2 {
        margin: 0
      }

      .home-row .card img {
        max-width: none;
        height: 70px
      }
    }

    @media (max-width: 1300px) {
      .home-row .card img {
        height: 70px;
        max-width: none
      }
    }

    .home-row .card img {
      margin: 16px
    }

    .home-row .card .card-text-container {
      margin: 0 16px
    }

    .home-row .card .card-text-container p {
      text-align: left;
      margin: 0;
      padding: 8px 0
    }

    .cta-link {
      margin: auto
    }

    .button.hero-cta {
      padding: 2px 34px 0;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 4rem;
      border-radius: 48px;
      box-shadow: 0 2px 5px #00000080;
      box-sizing: border-box;
      cursor: pointer
    }

    .button.hero-cta:hover {
      opacity: .9
    }

    .page-about .sidenav-content,
    .page-contribute .sidenav-content,
    .page-events .sidenav-content,
    .page-features .sidenav-content,
    .page-home .sidenav-content,
    .page-presskit .sidenav-content,
    .page-resources .sidenav-content {
      padding: 0 0 3rem
    }

    .page-about article,
    .page-contribute article,
    .page-events article,
    .page-features article,
    .page-home article,
    .page-presskit article,
    .page-resources article {
      padding: 3rem;
      padding-top: 0
    }

    @media (max-width: 800px) {

      .page-about article,
      .page-contribute article,
      .page-events article,
      .page-features article,
      .page-home article,
      .page-presskit article,
      .page-resources article {
        padding: 2.2rem;
        padding-top: 0
      }
    }

    .page-home .sidenav-content {
      padding-bottom: 0
    }

    .cta-bar.announcement-bar {
      background: none;
      box-shadow: none
    }

    .text-headline {
      font-size: 2rem;
      font-weight: 500;
      margin-top: 10px;
      text-transform: uppercase
    }

    int-shell:not(.view-SideNav) mat-sidenav-container.sidenav-container {
      max-width: none
    }

    div[layout=row] {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box
    }

    @media (max-width: 600px) {
      div[layout=row] {
        display: block
      }
    }

    .layout-row {
      flex-direction: row
    }

    .home-rows {
      overflow: hidden
    }

    @media (max-width: 600px) {
      .home-rows {
        margin: 0
      }
    }

    .background-superhero-paper {
      background-size: 100%;
      background-blend-mode: multiply
    }

    .home-row {
      max-width: 920px;
      margin: 32px auto
    }

    .home-row .promo-img-container,
    .home-row .text-container {
      align-self: flex-start;
      min-width: 30%
    }

    @media (max-width: 600px) {

      .home-row .promo-img-container,
      .home-row .text-container {
        max-width: 100%;
        text-align: center
      }

      .home-row .promo-img-container:nth-child(2n),
      .home-row .text-container:nth-child(2n) {
        flex-direction: column-reverse
      }
    }

    .home-row .text-container:not(:last-child) {
      padding-right: 5%
    }

    @media (max-width: 600px) {
      .home-row .text-container:not(:last-child) {
        padding-right: 0
      }
    }

    .home-row .promo-img-container p {
      margin: 0 20px
    }

    .home-row .promo-img-container img {
      max-width: 90% !important
    }

    .marketing-banner {
      margin-top: 64px;
      padding: 32px
    }

    @media (max-width: 600px) {
      .marketing-banner {
        margin-top: 56px;
        padding: 18px
      }
    }

    .marketing-banner .banner-headline {
      text-transform: uppercase;
      font-size: 2.4rem;
      font-weight: 300;
      margin: 0;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0
    }

    @media (max-width: 600px) {
      .marketing-banner .banner-headline {
        font-size: 1.8rem;
        font-weight: 400
      }
    }

    .marketing-banner .banner-headline:after {
      display: none
    }

    .page-features .marketing-banner {
      margin-bottom: 20px
    }

    .nf-container {
      align-items: center;
      padding: 32px
    }

    .nf-response {
      margin: 32px;
      height: 100%;
      flex-direction: column
    }

    .nf-response h1 {
      font-size: 4.8rem;
      text-transform: uppercase;
      margin: 8px 0
    }

    .nf-icon.material-icons {
      font-size: 10rem;
      position: static
    }

    .no-animations.mat-drawer-transition .mat-drawer-content {
      transition: none
    }

    mat-sidenav-container.sidenav-container {
      min-height: 100%;
      height: auto !important;
      margin: 0;
      transform: none
    }

    mat-sidenav-container.sidenav-container.has-floating-toc .sidenav-content-container {
      padding-right: 18vw
    }

    mat-sidenav-container.sidenav-container .sidenav-content-container {
      height: auto
    }

    mat-sidenav-container.sidenav-container mat-sidenav.sidenav {
      position: fixed;
      top: 64px;
      bottom: 0;
      left: 0;
      min-width: 290px
    }

    @media (max-width: 599px) {
      mat-sidenav-container.sidenav-container mat-sidenav.sidenav {
        top: 56px
      }
    }

    int-nav-menu {
      display: block;
      margin: 0 2px;
      max-width: 268px
    }

    int-nav-menu:first-of-type {
      margin-top: 16px
    }

    int-nav-menu:last-of-type {
      margin-bottom: 16px
    }

    int-nav-menu ul,
    int-nav-menu a {
      margin: 0
    }

    int-nav-menu int-nav-item .vertical-menu-item {
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow-wrap: break-word;
      padding: 8px;
      text-decoration: none;
      text-align: left;
      width: 100%;
      word-wrap: break-word
    }

    int-nav-menu int-nav-item .vertical-menu-item:focus {
      outline: #1E88E5 auto 2px
    }

    int-nav-menu int-nav-item .vertical-menu-item span {
      padding-right: 32px
    }

    int-nav-menu int-nav-item .vertical-menu-item .mat-icon {
      flex: 0 0 2.4rem;
      display: flex;
      align-items: center
    }

    int-nav-menu int-nav-item a.vertical-menu-item[href^="http:"] .vertical-menu-item-text,
    int-nav-menu int-nav-item a.vertical-menu-item[href^="https:"] .vertical-menu-item-text {
      display: inline-flex;
      align-items: center
    }

    int-nav-menu int-nav-item button.vertical-menu-item {
      border: none;
      background-color: transparent;
      margin: 0;
      width: 100%;
      overflow: hidden
    }

    int-nav-menu int-nav-item .heading-children.expanded {
      visibility: visible;
      opacity: 1;
      padding-left: 0;
      transition: visibility .5s, opacity .5s, max-height .5s;
      transition-timing-function: ease-in-out
    }

    int-nav-menu int-nav-item .heading-children.collapsed {
      overflow: hidden;
      visibility: hidden;
      padding-left: 0;
      opacity: 0;
      max-height: 1px;
      transition: visibility 275ms, opacity 275ms, max-height .28s;
      transition-timing-function: ease-out
    }

    .no-animations int-nav-menu int-nav-item .heading-children.expanded,
    .no-animations int-nav-menu int-nav-item .heading-children.collapsed {
      transition: none !important
    }

    int-nav-menu int-nav-item .level-1 {
      font-size: 15px;
      line-height: 1.5rem;
      font-weight: 400;
      padding-left: 20px;
      margin: 0;
      transition: background-color .2s
    }

    int-nav-menu int-nav-item .level-2 {
      font-size: 14px;
      line-height: 1.5rem;
      font-weight: 400;
      margin: 0;
      padding-left: 36px
    }

    int-nav-menu int-nav-item .level-3 {
      font-size: 1.4rem;
      line-height: 2.4rem;
      margin: 0;
      padding-left: 44px
    }

    int-nav-menu int-nav-item .level-4 {
      font-size: 1.4rem;
      line-height: 2.4rem;
      margin: 0;
      padding-left: 52px
    }

    int-nav-menu int-nav-item .level-1.collapsed>.mat-icon,
    int-nav-menu int-nav-item .level-2.collapsed>.mat-icon,
    int-nav-menu int-nav-item .level-3.collapsed>.mat-icon {
      transform: rotate(0);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    int-nav-menu int-nav-item .level-1.expanded>.mat-icon,
    int-nav-menu int-nav-item .level-2.expanded>.mat-icon,
    int-nav-menu int-nav-item .level-3.expanded>.mat-icon {
      transform: rotate(90deg);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    mat-toolbar.app-toolbar {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 10;
      box-shadow: 0 2px 5px #0000004d
    }

    @media (min-width: 481px) {
      .page-home mat-toolbar.app-toolbar:not(.transitioning) {
        background-color: transparent;
        box-shadow: none;
        position: absolute;
        transition: background-color .2s linear
      }
    }

    @media (min-width: 1150px) {

      .folder-api mat-toolbar.app-toolbar .hamburger,
      .folder-cli mat-toolbar.app-toolbar .hamburger,
      .folder-docs mat-toolbar.app-toolbar .hamburger,
      .folder-errors mat-toolbar.app-toolbar .hamburger,
      .folder-extended-diagnostics mat-toolbar.app-toolbar .hamburger,
      .folder-guide mat-toolbar.app-toolbar .hamburger,
      .folder-start mat-toolbar.app-toolbar .hamburger,
      .folder-tutorial mat-toolbar.app-toolbar .hamburger {
        margin: 0 8px 0 0;
        visibility: visible
      }
    }

    mat-toolbar.app-toolbar mat-toolbar-row {
      padding: 0 16px 0 0
    }

    mat-toolbar.app-toolbar .hamburger {
      height: 100%;
      margin: 0 8px 0 0;
      padding: 0
    }

    @media (min-width: 1150px) {
      mat-toolbar.app-toolbar .hamburger {
        margin: 0 16px 0 -64px;
        visibility: hidden
      }
    }

    @media (max-width: 480px) {
      mat-toolbar.app-toolbar .hamburger {
        min-width: 15%
      }
    }

    mat-toolbar.app-toolbar .hamburger:not(.no-animations) {
      transition-duration: .4s;
      transition-property: color, margin;
      transition-timing-function: cubic-bezier(.25, .8, .25, 1)
    }

    mat-toolbar.app-toolbar .hamburger .mat-icon {
      position: inherit;
      width: 24px;
      height: 24px;
      margin: 0
    }

    mat-toolbar.app-toolbar .nav-link.home {
      cursor: pointer;
      margin: 0 16px 0 0;
      padding: 8px 0
    }

    mat-toolbar.app-toolbar .nav-link.home:focus {
      outline-offset: 4px
    }

    @media screen and (max-width: 1149px) {
      mat-toolbar.app-toolbar .nav-link.home {
        padding: 4px 0
      }
    }

    @media screen and (max-width: 480px) {
      mat-toolbar.app-toolbar .nav-link.home {
        margin-right: 8px
      }
    }

    mat-toolbar.app-toolbar .nav-link.home img {
      position: relative;
      margin-top: -21px;
      top: 12px;
      height: 40px
    }

    @media (max-width: 1149px) {
      mat-toolbar.app-toolbar .nav-link.home img:hover {
        transform: scale(1.1)
      }
    }

    mat-toolbar.app-toolbar int-top-menu ul {
      display: flex;
      padding: 0;
      margin: 0
    }

    mat-toolbar.app-toolbar int-top-menu ul li {
      display: flex;
      padding-bottom: 2px;
      cursor: pointer
    }

    mat-toolbar.app-toolbar int-top-menu ul li:focus {
      outline: none
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link {
      margin: 0 4px;
      padding: 0;
      cursor: pointer;
      display: flex
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link .nav-link-inner {
      border-radius: 4px;
      font-size: 1.3rem;
      font-size: clamp(10px, 1.6rem, 20px);
      padding: 8px 16px;
      padding: 8px clamp(5px, .7vw, 16px)
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link[href^="http:"] .nav-link-inner,
    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link[href^="https:"] .nav-link-inner {
      display: inline-flex;
      align-items: center
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link[href^="http:"] .nav-link-inner:after,
    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link[href^="https:"] .nav-link-inner:after {
      content: "\e89e";
      font-family: Material Icons;
      margin-left: .3rem;
      float: right;
      display: flex;
      align-items: center
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link:focus {
      outline: none
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link:focus .nav-link-inner {
      border-radius: 1px
    }

    mat-toolbar.app-toolbar int-search-box.search-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      min-width: 150px;
      height: 100%;
      margin-right: 16px;
      position: relative
    }

    mat-toolbar.app-toolbar int-search-box.search-container input {
      border: none;
      border-radius: 100px;
      padding: 5px 3rem 5px 16px;
      margin-left: 8px;
      width: 180px;
      max-width: 240px;
      line-height: normal;
      height: 50%;
      -webkit-appearance: none
    }

    mat-toolbar.app-toolbar int-search-box.search-container input:focus {
      outline: none
    }

    mat-toolbar.app-toolbar int-search-box.search-container input::placeholder {
      font-size: 1.4rem
    }

    @media (min-width: 1000px) {
      mat-toolbar.app-toolbar int-search-box.search-container input {
        transition: width .4s ease-in-out
      }

      mat-toolbar.app-toolbar int-search-box.search-container input:focus {
        width: 80%
      }
    }

    @media (max-width: 515px) {
      mat-toolbar.app-toolbar int-search-box.search-container input {
        width: 150px
      }
    }

    mat-toolbar.app-toolbar int-search-box.search-container input::-webkit-search-cancel-button {
      display: none
    }

    mat-toolbar.app-toolbar int-search-box.search-container input::-ms-clear {
      display: none
    }

    mat-toolbar.app-toolbar int-search-box.search-container input:not(:focus):not(:hover)+mat-icon:not(:hover):not(:focus) {
      display: none
    }

    mat-toolbar.app-toolbar int-search-box.search-container .search-box-shortcut {
      display: none;
      position: absolute;
      right: 16px;
      font-size: 1.2rem;
      line-height: 2.2rem;
      padding: 0 .8rem;
      pointer-events: none;
      font-weight: 700;
      text-align: center;
      border-radius: 4px;
      border: 1px solid
    }

    mat-toolbar.app-toolbar int-search-box.search-container input:not(:focus):placeholder-shown+.search-box-shortcut {
      display: block
    }

    mat-toolbar.app-toolbar int-search-box.search-container mat-icon {
      position: absolute;
      color: #1976d2;
      right: .7rem;
      font-size: 2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    @media screen and (min-width: 350px) {
      mat-toolbar.app-toolbar int-theme-toggle {
        padding-right: 2px;
        margin-right: 2px
      }
    }

    @media screen and (max-width: 480px) {
      mat-toolbar.app-toolbar .toolbar-external-icons-container a {
        margin: 0 -8px 0 0
      }
    }

    @media screen and (max-width: 420px) {
      mat-toolbar.app-toolbar .toolbar-external-icons-container a:not([title=GitHub]) {
        display: none
      }
    }

    @media screen and (max-width: 350px) {
      mat-toolbar.app-toolbar .toolbar-external-icons-container a[title=GitHub] {
        display: none
      }
    }

    .alert,
    .callout {
      padding: 16px;
      margin: 24px 0;
      font-size: 1.4rem;
      width: 100%;
      box-sizing: border-box;
      clear: both
    }

    .alert h1,
    .callout h1,
    .alert h2,
    .callout h2,
    .alert h3,
    .callout h3,
    .alert h4,
    .callout h4,
    .alert h5,
    .callout h5,
    .alert h6,
    .callout h6 {
      font-weight: 500
    }

    .alert.archive-warning,
    .archive-warning.callout {
      border-radius: 4px;
      margin-bottom: 1rem
    }

    .alert.archive-warning a,
    .archive-warning.callout a {
      font-weight: 700;
      text-decoration: underline
    }

    .alert.archive-warning a:hover,
    .archive-warning.callout a:hover {
      opacity: .9
    }

    .alert>p,
    .callout>p {
      margin: 8px 16px
    }

    int-api-list .api-filter {
      display: flex;
      margin: 0 auto
    }

    @media (max-width: 600px) {
      int-api-list .api-filter {
        flex-direction: column;
        margin: 16px auto
      }
    }

    int-api-list .api-filter int-select {
      width: 220px
    }

    @media screen and (max-width: 600px) {
      int-api-list .api-filter int-select {
        width: 100%
      }
    }

    int-api-list .api-filter .form-select-menu,
    int-api-list .api-filter .form-search {
      margin: 8px
    }

    @media screen and (max-width: 600px) {

      int-api-list .api-filter .form-select-menu,
      int-api-list .api-filter .form-search {
        margin-left: 0
      }
    }

    int-api-list .api-filter int-select:first-child .form-select-menu {
      margin-left: 0
    }

    int-api-list .api-filter .form-search {
      position: relative;
      float: left
    }

    int-api-list .api-filter .form-search input {
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 1.4rem;
      line-height: 3.2rem;
      outline: none;
      padding: 4px 16px 4px 32px;
      transition: all .2s;
      width: 182px
    }

    int-api-list .api-filter .form-search input::placeholder {
      font-size: 1.4rem
    }

    @media screen and (max-width: 600px) {
      int-api-list .api-filter .form-search input {
        width: 100%
      }
    }

    int-api-list .api-filter .form-search .material-icons {
      font-size: 2rem;
      left: 8px;
      pointer-events: none;
      position: absolute;
      top: 12px;
      width: 20px;
      z-index: 1
    }

    int-api-list .api-filter .material-icons {
      right: 48px
    }

    int-api-list .api-list-container {
      display: flex;
      flex-direction: column;
      padding: 16px 0;
      position: relative
    }

    @media handheld and (max-width: 480px),
    screen and (max-device-width: 480px),
    screen and (max-width: 800px) {
      int-api-list .api-list-container {
        padding: 24px 0 0
      }
    }

    int-api-list .api-list-container h2 {
      margin-top: 16px;
      margin-bottom: 16px
    }

    int-api-list .api-list-container .api-list {
      list-style: none;
      margin: 0 0 32px -8px;
      padding: 0;
      overflow: hidden
    }

    @media screen and (max-width: 600px) {
      int-api-list .api-list-container .api-list {
        margin: 0 0 0 -8px
      }
    }

    int-api-list .api-list-container .api-list li {
      font-family: Roboto Mono, monospace;
      font-size: 1.4rem;
      margin: 8px 0;
      line-height: 1.4rem;
      padding: 0;
      float: left;
      width: 33%;
      overflow: hidden;
      min-width: 330px;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    int-api-list .api-list-container .api-list li a {
      line-height: 1.6rem;
      padding: 0 16px;
      text-decoration: none;
      transition: all .3s
    }

    int-api-list .api-list-container .api-list li a.deprecated-api-item {
      text-decoration: line-through
    }

    .api-body {
      max-width: 1200px
    }

    .api-body h1 {
      margin-top: -4px
    }

    .api-body details.overloads {
      box-shadow: none
    }

    .api-body details.overloads>summary {
      justify-content: space-between;
      padding: 0
    }

    .api-body details.overloads>summary h4 {
      margin: 0;
      clear: left
    }

    .api-body details.overloads>.details-content {
      padding: 0;
      border-radius: 2px;
      box-shadow: none
    }

    .api-body details.overloads>.details-content>*:not(hr) {
      margin: 16px 24px
    }

    .api-body details.overload {
      box-shadow: none;
      margin: 0
    }

    .api-body table {
      margin: 12px 0 24px
    }

    .api-body table.item-table td {
      padding: 32px
    }

    .api-body table.list-table td {
      padding: 16px 24px
    }

    .api-body table.parameters-table {
      margin-top: 0;
      font-size: 1.4rem;
      box-shadow: none
    }

    @media screen and (max-width: 480px) {
      .api-body table.parameters-table tr {
        display: flex;
        flex-direction: column
      }
    }

    .api-body table.parameters-table tr td:first-child {
      font-weight: 600;
      padding-left: 16px;
      width: 20%
    }

    .api-body table.parameters-table td {
      padding: 8px 8px 8px 0;
      border: 0;
      vertical-align: top
    }

    .api-body table.property-table td {
      vertical-align: top
    }

    .api-body table.method-table td>code,
    .api-body table.option-table td>code,
    .api-body table.list-table td>code {
      background-color: inherit;
      white-space: pre-wrap
    }

    .api-body table.method-table .with-github-links,
    .api-body table.option-table .with-github-links,
    .api-body table.list-table .with-github-links {
      align-items: center;
      display: flex;
      justify-content: space-between
    }

    .api-body table.method-table .with-github-links .github-links a .material-icons:hover,
    .api-body table.option-table .with-github-links .github-links a .material-icons:hover,
    .api-body table.list-table .with-github-links .github-links a .material-icons:hover {
      background: none
    }

    .api-body table.method-table h3,
    .api-body table.option-table h3,
    .api-body table.list-table h3 {
      margin: 6px 0;
      font-weight: 500;
      clear: left
    }

    .api-body table.method-table h4,
    .api-body table.option-table h4,
    .api-body table.list-table h4 {
      font-size: 1.4rem;
      font-weight: 700;
      margin-top: 12px
    }

    .api-body table th {
      text-transform: none;
      font-size: 1.6rem;
      font-weight: 700
    }

    .api-body table tr:last-child {
      border-bottom: none
    }

    .api-body table td {
      vertical-align: middle
    }

    @media screen and (max-width: 480px) {
      .api-body table tbody>tr>td tr td:first-child {
        background-color: inherit
      }
    }

    .api-body table hr {
      margin: 16px 0
    }

    .api-body table .short-description {
      margin-left: 0
    }

    .api-body .class-overview {
      position: relative
    }

    .api-body .class-overview code-example {
      clear: left
    }

    .api-body .member-name .pln {
      font-weight: 700
    }

    .api-body .short-description {
      margin-top: 8px
    }

    .api-body .final-message {
      font-style: italic
    }

    .api-body .api-heading {
      font-size: 1.4rem;
      margin: 16px
    }

    .api-body .from-constructor,
    .api-body .read-only-property,
    .api-body .write-only-property {
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: .05rem;
      font-style: italic;
      border-radius: 4px;
      padding: 4px 6px
    }

    .api-body .selector-list ul,
    .api-body .inherited-members-list ul {
      padding: 0
    }

    .api-body .selector-list ul li,
    .api-body .inherited-members-list ul li {
      list-style: none;
      margin-bottom: 12px
    }

    .api-body .selector-list li,
    .api-body .selector-list a {
      font-weight: 700
    }

    .api-body .selector-list li i,
    .api-body .selector-list a i {
      font-weight: 400
    }

    .github-links {
      float: right
    }

    .github-links .material-icons {
      border-radius: 4px;
      padding: 4px;
      font-size: 2rem
    }

    .breadcrumb-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between
    }

    .api-header {
      display: flex;
      align-items: center;
      margin-top: -4px
    }

    @media screen and (max-width: 600px) {
      .api-header {
        flex-direction: column;
        align-items: flex-start
      }
    }

    .api-header h1 {
      font-size: 2.4rem;
      margin: 0
    }

    .deprecated-api-item {
      text-decoration: line-through
    }

    .symbol {
      border-radius: 2px;
      display: inline-block;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.6rem;
      margin-right: 8px;
      text-align: center;
      width: 16px
    }

    button {
      font-family: inherit
    }

    a.button.mat-button,
    .button {
      color: inherit;
      display: inline-block;
      line-height: 3.2rem;
      padding: 0 16px;
      font-size: 1.4rem;
      font-weight: 400;
      border-radius: 3px;
      text-decoration: none;
      text-transform: uppercase;
      overflow: hidden;
      border: none
    }

    a.button.mat-button.button-small,
    .button.button-small {
      font-size: 1.2rem;
      line-height: 2.4rem;
      padding: 0 8px
    }

    a.button.mat-button.button-large,
    .button.button-large {
      font-size: 1.5rem;
      line-height: 4.8rem;
      padding: 0 24px
    }

    a.button.mat-button.button-x-large,
    .button.button-x-large {
      font-size: 1.6rem;
      line-height: 5.6rem;
      padding: 0 24px
    }

    .cta-bar {
      text-align: center
    }

    .cta-bar .button {
      margin: 0 8px;
      box-shadow: 0 2px 5px #00000042;
      transition: all .2s ease-in-out
    }

    .cta-bar .button:hover {
      transform: scale(1.1)
    }

    .group-buttons {
      margin: 16px auto 32px
    }

    .group-buttons button.button.mat-button.filter-button {
      border-radius: 4px;
      font-size: 1.6rem;
      line-height: 4.8rem;
      margin: 8px;
      padding: 0 16px;
      width: 16.8rem;
      min-width: max-content
    }

    @media (max-width: 480px) {
      .group-buttons button.button.mat-button.filter-button {
        font-size: 1.4rem;
        width: auto
      }
    }

    [mat-button],
    [mat-raised-button] {
      text-transform: uppercase
    }

    .callout {
      padding: 0;
      border-left: none !important;
      border-radius: 4px
    }

    .callout header {
      line-height: 2.4rem;
      font-weight: 500;
      padding: 8px 16px;
      margin: 0;
      text-transform: uppercase;
      border-radius: 4px 4px 0 0
    }

    .callout p {
      padding: 16px;
      margin: 0;
      font-size: 1.4rem
    }

    .callout>*:not(:first-child) {
      padding: 16px 24px
    }

    .card-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: 16px 0
    }

    .card-container .docs-card {
      width: 35%;
      border-radius: 4px;
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      box-sizing: border-box;
      transition: box-shadow .5s;
      max-width: 340px;
      min-width: 300px;
      margin: 24px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .card-container .docs-card:hover {
      box-shadow: 0 8px 8px #0a10143d, 0 0 8px #0a10141f;
      text-decoration: none
    }

    @media screen and (max-width: 600px) {
      .card-container .docs-card {
        width: 100%;
        margin: 8px auto;
        max-width: none
      }
    }

    .card-container .docs-card section {
      font-size: 2rem;
      line-height: 2.4rem;
      margin: 0;
      padding: 2.7rem 1.5rem 2.1rem;
      text-transform: none;
      text-align: center
    }

    .card-container .docs-card p {
      font-size: 1.3rem;
      line-height: 2.4rem;
      padding: 0 16px;
      margin: 0;
      margin-bottom: 1.6rem;
      text-align: center
    }

    .card-container .docs-card .card-footer {
      margin-bottom: 0;
      box-sizing: border-box;
      line-height: 2.4rem;
      padding: 1.3rem 1.5rem;
      text-align: right
    }

    .card-container .docs-card .card-footer a {
      font-size: 1.3rem
    }

    .card-section {
      padding: 16px 32px;
      margin: 16px 0;
      display: flex;
      flex-direction: row;
      align-items: center
    }

    .card-section:hover {
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f
    }

    .card-section h1,
    .card-section h2,
    .card-section h3,
    .card-section h4,
    .card-section h5,
    .card-section h6 {
      margin: 8px 0
    }

    .card-section a,
    .card-section .button,
    .card-section button {
      text-align: center
    }

    .cli-name {
      font-weight: 700
    }

    .cli-name .kwd {
      color: inherit
    }

    .cli-option a {
      word-break: break-all
    }

    .cli-option-syntax {
      white-space: pre
    }

    code-example,
    code-tabs {
      clear: both;
      display: block
    }

    code-example code,
    code-tabs code {
      overflow: auto
    }

    code-example ol,
    code-tabs ol {
      list-style: decimal
    }

    code-example .mat-card,
    code-tabs .mat-card {
      padding: 0;
      border-radius: 5px
    }

    code-example:not(.no-box) {
      border-radius: 5px;
      margin: 16px auto
    }

    code-example.no-box pre.prettyprint {
      margin: 0
    }

    code-example.no-box code {
      background-color: transparent
    }

    code-example code {
      overflow: auto
    }

    code-example header {
      border-radius: 5px 5px 0 0;
      font-size: 1.6rem;
      padding: 8px 16px
    }

    code-tabs {
      margin: 16px 0
    }

    code-tabs .code-tab-group .mat-tab-body {
      overflow-y: hidden
    }

    code-tabs .code-tab-group .mat-tab-body .mat-tab-body-content {
      height: auto;
      transform: none
    }

    code-tabs .code-tab-group .mat-tab-body .mat-tab-body-content .fadeIn {
      animation: opacity 2s ease-in
    }

    int-code pre.prettyprint {
      position: relative;
      display: flex;
      min-height: 32px;
      margin: 16px 24px;
      white-space: pre-wrap;
      align-items: center
    }

    int-code pre.prettyprint code a {
      color: inherit
    }

    int-code pre.prettyprint code span {
      line-height: 2.4rem
    }

    int-code pre.prettyprint code ol.linenums {
      margin: 0
    }

    int-code pre.prettyprint code ol.linenums li {
      margin: 0;
      font-family: Roboto Mono, monospace;
      font-size: 90%;
      line-height: 2.4rem
    }

    int-code pre.prettyprint .copy-button {
      position: absolute;
      top: -7px;
      right: -19px;
      padding: 0;
      background-color: transparent;
      border: none;
      cursor: pointer
    }

    int-code pre.prettyprint .copy-button:hover,
    int-code pre.prettyprint .copy-button:focus {
      transform: scale(1.1)
    }

    int-code pre.prettyprint .copy-button:active {
      transform: translateY(2px) scale(1.05)
    }

    .sidenav-content code a {
      font-size: inherit;
      font-weight: inherit
    }

    .sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre)>code {
      border-radius: 4px;
      padding: 4px
    }

    .sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):is(a)>code {
      line-height: 2.4rem
    }

    .page-guide-cheatsheet .sidenav-content td:first-of-type code,
    .page-guide-cheatsheet .sidenav-content th code {
      background-color: inherit;
      padding: 0;
      white-space: pre-wrap
    }

    .sidenav-content .code-anchor {
      cursor: pointer;
      font-size: inherit
    }

    .sidenav-content .code-anchor:hover {
      text-decoration: underline
    }

    .contribute-container .card-section {
      justify-content: space-between
    }

    @media (max-width: 600px) {
      .contribute-container .card-section {
        flex-direction: column
      }
    }

    .contribute-container .card-section>:first-child {
      margin-right: 2rem;
      width: 67%
    }

    @media (max-width: 600px) {
      .contribute-container .card-section>:first-child {
        width: 100%
      }
    }

    .contribute-container .card-section:last-child {
      margin-bottom: 0
    }

    @media (max-width: 600px) {
      .contribute-container .card-section .button {
        margin-top: 14px
      }
    }

    int-cookies-popup .cookies-popup {
      box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
      border-radius: 4px;
      bottom: 0;
      left: 0;
      position: fixed;
      margin: 24px;
      max-width: 430px;
      padding: 16px 16px 8px;
      z-index: 1001
    }

    int-cookies-popup .cookies-popup .actions {
      display: flex;
      justify-content: flex-end;
      margin: 16px -8px 0 0
    }

    int-cookies-popup .cookies-popup .actions .mat-button {
      text-transform: uppercase
    }

    int-contributor-list .contributor-group {
      --columns: 2;
      display: grid;
      grid-template-columns: repeat(var(--columns), 1fr);
      justify-items: stretch
    }

    @media (max-width: 75rem) {
      int-contributor-list .contributor-group {
        --columns: 1
      }
    }

    int-contributor {
      display: grid
    }

    int-contributor .contributor-card {
      margin: 3.5rem;
      display: grid;
      grid-template-columns: 10rem 1fr;
      grid-template-rows: min-content 1fr min-content;
      padding: 3rem 3rem 0;
      border-radius: 5px
    }

    int-contributor .contributor-card.no-image {
      grid-template-columns: 0 1fr
    }

    int-contributor .contributor-card .contributor-image-wrapper {
      grid-column: 1/2;
      grid-row: 1/5;
      width: 14rem;
      height: 14rem;
      position: relative;
      top: -5rem;
      left: -5rem;
      clip-path: polygon(50% 0, 99% 18%, 89% 78%, 50% 100%, 11% 78%, 3% 17%)
    }

    int-contributor .contributor-card .contributor-image {
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      clip-path: polygon(50% 0, 99% 18%, 89% 78%, 50% 100%, 11% 78%, 3% 17%);
      object-fit: cover
    }

    int-contributor .contributor-card .contributor-social-links {
      display: flex;
      grid-column: 1;
      grid-row: 2;
      align-self: end;
      margin-bottom: .5rem
    }

    int-contributor .contributor-card .contributor-social-links a {
      display: inline-block;
      margin-right: 1.5rem;
      margin-bottom: 1rem;
      display: flex;
      overflow: hidden
    }

    int-contributor .contributor-card .contributor-social-links a mat-icon {
      font-size: 3rem;
      height: 3rem;
      width: 3rem
    }

    int-contributor .contributor-card .contributor-social-links a mat-icon svg {
      height: 3rem;
      width: 3rem
    }

    int-contributor .contributor-card .contributor-social-links a mat-icon.link-icon {
      transform: rotate(45deg)
    }

    int-contributor .contributor-card .contributor-title {
      margin-top: 0;
      grid-column: 2
    }

    int-contributor .contributor-card .contributor-bio {
      grid-column: 2;
      margin-bottom: 2rem
    }

    @media (max-width: 45rem) {
      int-contributor .contributor-card {
        grid-template-columns: 1fr;
        grid-template-rows: min-content 1fr
      }

      int-contributor .contributor-card.no-image {
        grid-template-columns: 1fr
      }

      int-contributor .contributor-card .contributor-image-wrapper {
        grid-column: 1;
        grid-row: 1;
        left: 0;
        justify-self: center;
        margin-bottom: -3rem
      }

      int-contributor .contributor-card .contributor-title {
        text-align: center
      }

      int-contributor .contributor-card .contributor-social-links {
        grid-row: 4;
        justify-content: space-evenly
      }

      int-contributor .contributor-card .contributor-social-links,
      int-contributor .contributor-card .contributor-title,
      int-contributor .contributor-card .contributor-bio {
        grid-column: 1
      }
    }

    details>summary {
      cursor: pointer;
      font-size: 1.6rem;
      position: relative;
      padding: 16px;
      height: inherit;
      display: flex;
      align-items: center;
      overflow: hidden
    }

    details>summary::-webkit-details-marker {
      display: none
    }

    details>summary>h2 {
      margin: 0;
      padding: 0;
      border: none;
      display: inline
    }

    details>summary .actions {
      align-items: center;
      display: flex;
      font-size: 1.4rem
    }

    details>summary .actions .action-expand {
      display: initial
    }

    details[open]>summary .actions .action-expand {
      display: none
    }

    details>summary .actions .action-collapse {
      display: none
    }

    details[open]>summary .actions .action-collapse {
      display: initial
    }

    details>summary .actions .material-icons.expand {
      transform: rotate(0);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    details[open]>summary .actions .material-icons.expand {
      transform: rotate(180deg);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    details .details-content {
      padding: 16px 24px
    }

    .error-list {
      display: grid;
      list-style: none;
      padding: 0;
      overflow: hidden
    }

    @media screen and (max-width: 600px) {
      .error-list {
        margin: 0 0 0 -8px
      }
    }

    .error-list li {
      font-size: 1.4rem;
      margin: 8px 0;
      line-height: 1.4rem;
      padding: 0;
      float: left;
      overflow: hidden;
      min-width: 220px;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .error-list li .symbol.runtime:before {
      content: "R"
    }

    .error-list li .symbol.compiler:before {
      content: "C"
    }

    .error-list li a {
      display: inline-block;
      line-height: 1.6rem;
      padding: 0 16px;
      text-decoration: none;
      transition: all .3s;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .feature-section {
      margin: 0 0 32px
    }

    .feature-section .feature-header,
    .feature-section .text-headline {
      text-align: center
    }

    .feature-section .feature-header img {
      margin: 16px;
      max-width: 70px
    }

    .feature-section .feature-title {
      font-size: 1.6rem;
      font-weight: 500;
      margin: 8px 0;
      clear: both
    }

    .feature-section .feature-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly
    }

    @media (max-width: 1057px) {
      .feature-section .feature-row {
        flex-direction: column
      }
    }

    .feature-section .feature-row .feature {
      max-width: 300px;
      margin: 0 16px
    }

    @media (max-width: 1057px) {
      .feature-section .feature-row .feature {
        max-width: 100%;
        padding: 8px 10%
      }
    }

    @media (max-width: 768px) {
      .feature-section .feature-row .feature {
        padding: 8px 0
      }
    }

    .filetree {
      border-radius: 4px;
      margin: 0 0 24px;
      padding: 16px 32px
    }

    .filetree .file {
      display: block;
      letter-spacing: .03rem;
      line-height: 3.2rem
    }

    .filetree .children {
      padding-left: 24px;
      position: relative;
      overflow: hidden
    }

    .filetree .children .file {
      position: relative
    }

    .filetree .children .file:before {
      content: "";
      left: -18px;
      bottom: 16px;
      width: 16px;
      height: 9999px;
      position: absolute;
      border-width: 0 0 1px 1px;
      border-style: solid;
      border-radius: 0 0 0 3px
    }

    .reviewed {
      font-size: 1.3rem;
      font-style: italic;
      text-align: right
    }

    .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 {
      margin: 0 6px;
      text-decoration: none;
      -webkit-user-select: none;
      user-select: none;
      visibility: hidden;
      display: inline-flex;
      vertical-align: middle
    }

    .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 {
      visibility: visible
    }

    hr {
      border: none;
      height: 1px
    }

    .content img.right {
      clear: both;
      float: right;
      margin-left: 20px;
      margin-bottom: 20px
    }

    .content img.left {
      clear: both;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px
    }

    @media (max-width: 1300px) {
      .content img {
        max-width: 100%;
        height: auto;
        margin: auto
      }
    }

    @media (max-width: 600px) {
      .content img {
        float: none !important
      }

      .content img.right {
        margin-left: 0
      }

      .content img.left {
        margin-right: 0
      }
    }

    .content .lightbox {
      border-radius: 1px;
      padding: 32px;
      box-sizing: border-box;
      box-shadow: 2px 2px 5px #0003;
      margin: 16px 0;
      width: 100%;
      display: flex;
      justify-content: center
    }

    .content .lightbox img {
      max-width: 100%;
      height: auto;
      padding: 8px;
      margin: auto;
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      border-radius: 4px
    }

    .api-header label,
    label.api-status-label {
      border-radius: 4px;
      padding: 2px 10px;
      display: inline;
      font-size: 1.2rem;
      margin-right: 8px;
      font-weight: 500;
      text-transform: uppercase;
      line-height: initial
    }

    @media screen and (max-width: 600px) {

      .api-header label,
      label.api-status-label {
        display: block;
        margin: 4px 0
      }
    }

    .api-header label.page-label,
    label.api-status-label.page-label {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      width: 140px
    }

    .api-header label.page-label .material-icons,
    label.api-status-label.page-label .material-icons {
      margin-right: 8px
    }

    .api-header label.property-type-label,
    label.api-status-label.property-type-label {
      font-size: 1.2rem;
      text-transform: none
    }

    .app-toolbar mat-toolbar-row.notification-container {
      padding: 0;
      height: auto;
      overflow: hidden
    }

    int-notification {
      display: flex;
      position: relative;
      width: 100%;
      height: 56px;
      justify-content: center
    }

    @media (max-width: 430px) {
      int-notification {
        justify-content: flex-start;
        padding-left: 10px
      }
    }

    int-notification .close-button {
      width: 56px;
      height: 56px
    }

    int-notification .content {
      width: calc(100% - 56px);
      text-transform: none;
      padding: 0
    }

    int-notification .content>* {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      width: 100%
    }

    int-notification .content .title {
      margin-right: 10px
    }

    int-notification .content .link {
      text-transform: none
    }

    int-notification .content .icon {
      margin-right: 10px
    }

    @media (max-width: 464px) {
      int-notification .content .icon {
        display: none
      }
    }

    int-notification .content .message {
      overflow: auto;
      margin-right: 10px;
      color: #bae0ff
    }

    int-notification .content .action-button {
      border-radius: 15px;
      text-transform: uppercase;
      padding: 0 10px;
      font-size: 1.2rem
    }

    @media (max-width: 780px) {
      int-notification .content .action-button {
        display: none
      }
    }

    .int-notification-show .toc-container {
      top: 132px
    }

    .int-notification-show .search-results {
      border-top-width: 124px
    }

    .int-notification-show mat-sidenav-container.sidenav-container .sidenav-content {
      padding-top: 136px
    }

    .int-notification-show mat-sidenav-container.sidenav-container mat-sidenav.sidenav {
      top: 120px
    }

    @media (max-width: 600px) {
      .int-notification-show mat-sidenav-container.sidenav-container mat-sidenav.sidenav {
        top: 112px
      }
    }

    .page-about.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-contribute.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-events.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-features.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-home.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-presskit.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content,
    .page-resources.int-notification-show mat-sidenav-container.sidenav-container .sidenav-content {
      padding-top: 56px
    }

    .int-notification-animating .sidenav-content {
      transition: padding-top .25s ease
    }

    .int-notification-animating mat-sidenav.sidenav,
    .int-notification-animating .toc-container {
      transition: top .25s ease
    }

    .progress-bar-container {
      height: 2px;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 100vw;
      z-index: 11
    }

    .presskit-container {
      padding: 0 32px 32px
    }

    .presskit-container img {
      height: 128px;
      width: auto
    }

    .presskit-container .presskit-section:not(:first-child) {
      margin-top: 4rem;
      padding-top: 2rem
    }

    .presskit-container .presskit-section .presskit-icon-group {
      display: flex;
      flex-wrap: wrap
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item {
      align-items: center;
      display: flex;
      margin: 1rem;
      width: calc(50% - 2rem)
    }

    @media screen and (max-width: 600px) {
      .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 2rem
      }
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container {
      flex: none;
      margin-right: 2rem
    }

    @media (max-width: 600px) {
      .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container {
        width: 100%;
        margin-right: 0
      }
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img,
    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img-inverse {
      border-radius: 50%
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-links-container {
      list-style-type: none;
      margin-bottom: 0;
      padding: 0
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-links-container a {
      padding-right: 3rem;
      position: relative
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-links-container a:after {
      content: "cloud_download";
      font-family: Material Icons;
      font-size: 2.4rem;
      position: absolute;
      right: 0
    }

    int-resource-list .showcase {
      transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 0 1px 4px #0a10145e;
      border-radius: 4px;
      margin-bottom: 48px
    }

    int-resource-list .resource-item .resource-name {
      margin: 0;
      line-height: 2.4rem;
      font-size: 2rem
    }

    int-resource-list .resource-item .resource-description {
      margin: 0
    }

    int-resource-list .subcategory-title {
      padding: 16px 23px;
      margin: 0;
      font-size: 2.4rem
    }

    int-resource-list .resource-row-link {
      display: flex;
      flex-direction: column;
      border: transparent solid 1px;
      padding: 16px 23px;
      transition: all .3s
    }

    int-resource-list .resource-row-link:hover {
      text-decoration: none;
      border-radius: 4px;
      transform: translateY(-2px)
    }

    .page-guide-roadmap .completed-details {
      box-shadow: none;
      margin-top: 4rem;
      padding: 4rem 0 2rem
    }

    .page-guide-roadmap .completed-details>summary {
      justify-content: space-between;
      padding: 0
    }

    .page-guide-roadmap .completed-details>.details-content {
      padding: 0
    }

    .page-guide-roadmap .roadmap-last-updated {
      font-style: italic
    }

    int-search-results {
      z-index: 10
    }

    int-search-results .search-results {
      display: flex;
      flex-direction: row;
      overflow: auto;
      padding: 0 32px;
      border-top: 68px solid transparent;
      width: auto;
      max-height: 95vh;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 5;
      box-sizing: border-box
    }

    int-search-results .search-results .search-area {
      margin: 0 auto;
      padding: 16px
    }

    int-search-results .search-results .search-area .search-section-header {
      font-size: 1.6rem;
      font-weight: 400;
      margin: 10px 0 5px;
      text-transform: uppercase
    }

    int-search-results .search-results .search-area ul {
      margin: 0;
      padding: 0
    }

    int-search-results .search-results .search-area ul li {
      list-style: none
    }

    int-search-results .search-results .search-area ul .search-result-item {
      font-size: 1.4rem;
      line-height: 2.4rem;
      display: inline-block;
      font-weight: 400;
      padding: .6rem 0
    }

    int-search-results .search-results .search-area ul .search-result-itema {
      text-decoration: none
    }

    int-search-results .search-results .search-area ul.priority-pages {
      padding: .5rem 0
    }

    int-search-results .search-results .search-area ul.priority-pages .search-result-item {
      font-weight: 700
    }

    int-search-results .search-results .no-results {
      text-align: center;
      margin: 16px
    }

    int-search-results .search-results a {
      font-weight: 500
    }

    @media (max-width: 600px) {
      int-search-results .search-results {
        display: block
      }
    }

    int-search-results .search-results .close-button {
      position: absolute;
      top: 1rem;
      right: 1rem;
      border: none;
      padding: 0;
      margin: 3px;
      display: flex;
      opacity: 0;
      width: 0;
      background-color: inherit;
      cursor: pointer;
      transition: .1s opacity
    }

    int-search-results .search-results .close-button:focus {
      opacity: 1;
      width: auto
    }

    int-search-results.embedded .search-results {
      padding: 0;
      color: inherit;
      max-height: 100%;
      position: relative;
      background-color: inherit;
      box-shadow: none
    }

    int-select .form-select-menu {
      position: relative
    }

    int-select .form-select-button {
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 3.2rem;
      outline: none;
      padding: 4px 16px;
      text-align: left;
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-direction: row
    }

    int-select .form-select-button strong {
      font-weight: 600;
      margin-right: 8px;
      text-transform: capitalize
    }

    int-select .form-select-button[disabled] {
      cursor: not-allowed
    }

    int-select .form-select-dropdown {
      border-radius: 4px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2
    }

    int-select .form-select-dropdown li {
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 3.2rem;
      margin: 0;
      padding: 4px 16px 4px 40px;
      position: relative;
      transition: all .2s;
      border: 1px solid transparent
    }

    int-select .form-select-dropdown li:first-child {
      border-radius: 4px 4px 0 0
    }

    int-select .form-select-dropdown li:last-child {
      border-radius: 0 0 4px 4px
    }

    int-select .form-select-dropdown li .symbol {
      left: 16px;
      position: absolute;
      top: 12px;
      z-index: 5
    }

    .skip-to-content-link {
      box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
      background: #fafafa;
      border: 1px dashed;
      border-radius: 8px;
      color: #1976d2;
      font-weight: 500;
      margin: 5px;
      outline: none;
      padding: 1rem 1.5rem;
      position: fixed;
      top: -100%;
      z-index: 1001
    }

    .skip-to-content-link:active,
    .skip-to-content-link:focus {
      top: auto
    }

    .skip-to-content-link:hover {
      text-decoration: underline
    }



    .page-guide-cheatsheet table tbody td {
      overflow: auto
    }

    @media only screen and (max-width: 990px) {

      .page-guide-cheatsheet table,
      .page-guide-cheatsheet thead,
      .page-guide-cheatsheet tbody,
      .page-guide-cheatsheet tfoot,
      .page-guide-cheatsheet tr,
      .page-guide-cheatsheet th,
      .page-guide-cheatsheet td {
        display: block;
        position: relative;
        max-width: 100%
      }

      .page-guide-cheatsheet th {
        border-right: none
      }

      .page-guide-cheatsheet th:not(:last-child),
      .page-guide-cheatsheet td:not(:last-child) {
        border-bottom: none;
        padding-bottom: 0
      }
    }

    .page-events tr>td,
    .page-events tr>th {
      width: 33%
    }

    .toc-container {
      width: 18vw;
      position: fixed;
      top: 76px;
      right: 0;
      bottom: 12px;
      overflow-y: auto;
      overflow-x: hidden
    }

    int-toc .toc-inner {
      font-size: 1.3rem;
      overflow-y: visible;
      padding: 4px 0 0 10px
    }

    int-toc .toc-inner .toc-heading,
    int-toc .toc-inner .toc-list .h1 {
      font-size: 1.6rem
    }

    int-toc .toc-inner .toc-heading {
      font-weight: 500;
      margin: 0 0 16px 8px;
      padding: 0
    }

    int-toc .toc-inner .toc-heading.secondary {
      position: relative;
      top: -8px
    }

    int-toc .toc-inner button.toc-heading,
    int-toc .toc-inner button.toc-more-items {
      cursor: pointer;
      display: inline-block;
      background: 0;
      background-color: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      text-align: start
    }

    int-toc .toc-inner button.toc-heading.embedded:focus,
    int-toc .toc-inner button.toc-more-items.embedded:focus {
      outline: none
    }

    int-toc .toc-inner button.toc-heading mat-icon.rotating-icon {
      height: 18px;
      width: 18px;
      position: relative;
      left: -4px;
      top: 5px
    }

    int-toc .toc-inner button.toc-more-items {
      top: 10px;
      position: relative
    }

    int-toc .toc-inner button.toc-more-items:after {
      content: "expand_less"
    }

    int-toc .toc-inner button.toc-more-items.collapsed:after {
      content: "more_horiz"
    }

    int-toc .toc-inner .mat-icon.collapsed {
      transform: rotate(0);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    int-toc .toc-inner .mat-icon:not(.collapsed) {
      transform: rotate(90deg);
      transition: transform .15s;
      transition-timing-function: ease-in-out
    }

    int-toc .toc-inner ul.toc-list {
      list-style-type: none;
      margin: 0;
      padding: 0 8px 0 0
    }

    @media (max-width: 800px) {
      int-toc .toc-inner ul.toc-list {
        width: auto
      }
    }

    int-toc .toc-inner ul.toc-list li {
      box-sizing: border-box;
      line-height: 2.4rem;
      padding: 9px 0 9px 12px;
      position: relative;
      transition: all .3s ease-in-out
    }

    int-toc .toc-inner ul.toc-list li.h1:after {
      content: "";
      display: block;
      height: 1px;
      width: 40%;
      margin: 7px 0 4px;
      clear: both
    }

    int-toc .toc-inner ul.toc-list li.h3 {
      padding-left: 24px
    }

    int-toc .toc-inner ul.toc-list li a {
      overflow: visible;
      font-size: 1.4rem;
      line-height: inherit;
      display: table-cell
    }

    int-toc .toc-inner ul.toc-list li.active * {
      font-weight: 500
    }

    int-toc .toc-inner ul.toc-list li.active a:before {
      border-radius: 50%;
      content: "";
      height: 6px;
      left: -2.5px;
      position: absolute;
      top: 18px;
      top: calc(6px + 1.2rem);
      width: 6px
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:before {
      bottom: 0;
      content: "";
      left: 0;
      position: absolute;
      top: 0;
      border-left-width: 1px;
      border-left-style: solid
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:first-child:before {
      top: 18px;
      top: calc(6px + 1.2rem)
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:last-child:before {
      bottom: calc(100% - 24px);
      bottom: calc(100% - (12px + 1.2rem))
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:not(.active):hover a:before {
      border-radius: 50%;
      content: "";
      height: 6px;
      left: -2.5px;
      position: absolute;
      top: 18px;
      top: calc(6px + 1.2rem);
      width: 6px
    }

    @media (min-width: 801px) {
      int-toc.embedded {
        display: none
      }
    }

    int-toc.embedded .toc-inner {
      padding: 12px 0 0
    }

    int-toc.embedded .toc-inner .toc-heading {
      margin: 0 0 8px
    }

    int-toc.embedded .toc-inner.collapsed .secondary {
      display: none
    }

    @media print {
      * {
        box-shadow: none !important
      }

      body,
      mat-sidenav-container {
        background: none !important
      }

      h1 {
        height: 40px !important;
        color: #444 !important
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        page-break-after: avoid
      }

      ul,
      ol,
      img,
      code-example,
      table,
      tr,
      .alert,
      .feature,
      .lightbox {
        page-break-inside: avoid
      }

      table tbody tr:last-child td {
        border-bottom: 1px solid #DBDBDB !important
      }

      img {
        max-width: 100% !important
      }

      p {
        widows: 4
      }

      p>code,
      li>code,
      table code {
        color: #1976d2 !important
      }

      .no-print {
        display: none !important
      }

      mat-sidenav.sidenav.mat-sidenav {
        display: none !important
      }

      .mat-sidenav-content {
        margin: 0 !important
      }

      mat-sidenav-container.sidenav-container {
        min-width: 100vw
      }

      .sidenav-content {
        overflow: visible
      }

      section#intro .hero-logo {
        align-items: center;
        background: none;
        justify-content: center
      }

      section#intro .hero-logo:after {
        font-size: 6.4rem;
        line-height: 10rem;
        color: #dd0031;
        content: "Angular";
        font-weight: 700
      }

      .filetree {
        max-width: 100%
      }

      int-code code {
        border: none !important
      }

      code-example[language=shell],
      code-example[language=sh],
      code-example[language=bash] {
        background: none
      }

      code-example[language=shell] .pnk,
      code-example[language=shell] .blk,
      code-example[language=shell] .pln,
      code-example[language=shell] .otl,
      code-example[language=shell] .kwd,
      code-example[language=shell] .typ,
      code-example[language=shell] .tag,
      code-example[language=shell] .str,
      code-example[language=shell] .atv,
      code-example[language=shell] .atn,
      code-example[language=shell] .com,
      code-example[language=shell] .lit,
      code-example[language=shell] .pun,
      code-example[language=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 {
        color: #444
      }

      code-example header {
        background: none;
        border: .5px solid #DBDBDB;
        color: #444
      }

      .content code {
        border: .5px solid #DBDBDB
      }

      .mat-tab-labels div.mat-tab-label:not(.mat-tab-label-active) span {
        font-style: italic
      }

      .mat-tab-labels div.mat-tab-label.mat-tab-label-active span {
        font-weight: 700
      }

      .api-header label {
        color: #444 !important;
        font-weight: 700 !important;
        margin: 2px !important;
        padding: 0 !important;
        display: block !important
      }

      .feature-section img {
        max-width: 70px !important
      }
    }

    .mat-ripple {
      overflow: hidden;
      position: relative
    }

    .mat-ripple:not(:empty) {
      transform: translateZ(0)
    }

    .mat-ripple.mat-ripple-unbounded {
      overflow: visible
    }

    .mat-ripple-element {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
      transform: scale3d(0, 0, 0);
      background-color: var(--mat-ripple-color, rgba(0, 0, 0, .1))
    }

    .cdk-high-contrast-active .mat-ripple-element {
      display: none
    }

    .cdk-visually-hidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap;
      outline: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      left: 0
    }

    [dir=rtl] .cdk-visually-hidden {
      left: auto;
      right: 0
    }

    .cdk-overlay-container,
    .cdk-global-overlay-wrapper {
      pointer-events: none;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%
    }

    .cdk-overlay-container {
      position: fixed;
      z-index: 1000
    }

    .cdk-overlay-container:empty {
      display: none
    }

    .cdk-global-overlay-wrapper {
      display: flex;
      position: absolute;
      z-index: 1000
    }

    .cdk-overlay-pane {
      position: absolute;
      pointer-events: auto;
      box-sizing: border-box;
      z-index: 1000;
      display: flex;
      max-width: 100%;
      max-height: 100%
    }

    .cdk-overlay-backdrop {
      position: absolute;
      inset: 0;
      z-index: 1000;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
      opacity: 0
    }

    .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
      opacity: 1
    }

    .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
      opacity: .6
    }

    .cdk-overlay-dark-backdrop {
      background: rgba(0, 0, 0, .32)
    }

    .cdk-overlay-transparent-backdrop {
      transition: visibility 1ms linear, opacity 1ms linear;
      visibility: hidden;
      opacity: 1
    }

    .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
      opacity: 0;
      visibility: visible
    }

    .cdk-overlay-backdrop-noop-animation {
      transition: none
    }

    .cdk-overlay-connected-position-bounding-box {
      position: absolute;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      min-width: 1px;
      min-height: 1px
    }

    .cdk-global-scrollblock {
      position: fixed;
      width: 100%;
      overflow-y: scroll
    }

    textarea.cdk-textarea-autosize {
      resize: none
    }

    textarea.cdk-textarea-autosize-measuring {
      padding: 2px 0 !important;
      box-sizing: content-box !important;
      height: auto !important;
      overflow: hidden !important
    }

    textarea.cdk-textarea-autosize-measuring-firefox {
      padding: 2px 0 !important;
      box-sizing: content-box !important;
      height: 0 !important
    }

    @keyframes cdk-text-field-autofill-start {}

    @keyframes cdk-text-field-autofill-end {}

    .cdk-text-field-autofill-monitored:-webkit-autofill {
      animation: cdk-text-field-autofill-start 0s 1ms
    }

    .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
      animation: cdk-text-field-autofill-end 0s 1ms
    }

    .mat-focus-indicator {
      position: relative
    }

    .mat-focus-indicator:before {
      inset: 0;
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      display: var(--mat-focus-indicator-display, none);
      border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
      border-radius: var(--mat-focus-indicator-border-radius, 4px)
    }

    .mat-focus-indicator:focus:before {
      content: ""
    }

    .cdk-high-contrast-active {
      --mat-focus-indicator-display: block
    }

    .mat-mdc-focus-indicator {
      position: relative
    }

    .mat-mdc-focus-indicator:before {
      inset: 0;
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      display: var(--mat-mdc-focus-indicator-display, none);
      border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
      border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
    }

    .mat-mdc-focus-indicator:focus:before {
      content: ""
    }

    .cdk-high-contrast-active {
      --mat-mdc-focus-indicator-display: block
    }

    /*# sourceMappingURL=styles.5360a0b72f7b18a1.css.map*/


    @media (forced-colors: active) {
      body {}
    }


    .mat-toolbar {
      background: var(--mat-toolbar-container-background-color);
      color: var(--mat-toolbar-container-text-color)
    }

    .mat-toolbar,
    .mat-toolbar h1,
    .mat-toolbar h2,
    .mat-toolbar h3,
    .mat-toolbar h4,
    .mat-toolbar h5,
    .mat-toolbar h6 {
      font-family: var(--mat-toolbar-title-text-font);
      font-size: var(--mat-toolbar-title-text-size);
      line-height: var(--mat-toolbar-title-text-line-height);
      font-weight: var(--mat-toolbar-title-text-weight);
      letter-spacing: var(--mat-toolbar-title-text-tracking);
      margin: 0
    }

    .cdk-high-contrast-active .mat-toolbar {
      outline: solid 1px
    }

    .mat-toolbar .mat-form-field-underline,
    .mat-toolbar .mat-form-field-ripple,
    .mat-toolbar .mat-focused .mat-form-field-ripple {
      background-color: currentColor
    }

    .mat-toolbar .mat-form-field-label,
    .mat-toolbar .mat-focused .mat-form-field-label,
    .mat-toolbar .mat-select-value,
    .mat-toolbar .mat-select-arrow,
    .mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {
      color: inherit
    }

    .mat-toolbar .mat-input-element {
      caret-color: currentColor
    }

    .mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
      --mdc-text-button-label-text-color: inherit;
      --mdc-outlined-button-label-text-color: inherit
    }

    .mat-toolbar-row,
    .mat-toolbar-single-row {
      display: flex;
      box-sizing: border-box;
      padding: 0 16px;
      width: 100%;
      flex-direction: row;
      align-items: center;
      white-space: nowrap;
      height: var(--mat-toolbar-standard-height)
    }

    @media(max-width: 599px) {

      .mat-toolbar-row,
      .mat-toolbar-single-row {
        height: var(--mat-toolbar-mobile-height)
      }
    }

    .mat-toolbar-multiple-rows {
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      width: 100%;
      min-height: var(--mat-toolbar-standard-height)
    }

    @media(max-width: 599px) {
      .mat-toolbar-multiple-rows {
        min-height: var(--mat-toolbar-mobile-height)
      }
    }


    mat-icon,
    mat-icon.mat-primary,
    mat-icon.mat-accent,
    mat-icon.mat-warn {
      color: var(--mat-icon-color)
    }

    .mat-icon {
      -webkit-user-select: none;
      user-select: none;
      background-repeat: no-repeat;
      display: inline-block;
      fill: currentColor;
      height: 24px;
      width: 24px;
      overflow: hidden
    }

    .mat-icon.mat-icon-inline {
      font-size: inherit;
      height: inherit;
      line-height: inherit;
      width: inherit
    }

    .mat-icon.mat-ligature-font[fontIcon]::before {
      content: attr(fontIcon)
    }

    [dir=rtl] .mat-icon-rtl-mirror {
      transform: scale(-1, 1)
    }

    .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,
    .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon {
      display: block
    }

    .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,
    .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon {
      margin: auto
    }


    .mdc-touch-target-wrapper {
      display: inline
    }

    .mdc-elevation-overlay {
      position: absolute;
      border-radius: inherit;
      pointer-events: none;
      opacity: var(--mdc-elevation-overlay-opacity, 0);
      transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)
    }

    .mdc-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: 64px;
      border: none;
      outline: none;
      line-height: inherit;
      user-select: none;
      -webkit-appearance: none;
      overflow: visible;
      vertical-align: middle;
      background: rgba(0, 0, 0, 0)
    }

    .mdc-button .mdc-elevation-overlay {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0
    }

    .mdc-button::-moz-focus-inner {
      padding: 0;
      border: 0
    }

    .mdc-button:active {
      outline: none
    }

    .mdc-button:hover {
      cursor: pointer
    }

    .mdc-button:disabled {
      cursor: default;
      pointer-events: none
    }

    .mdc-button[hidden] {
      display: none
    }

    .mdc-button .mdc-button__icon {
      margin-left: 0;
      margin-right: 8px;
      display: inline-block;
      position: relative;
      vertical-align: top
    }

    [dir=rtl] .mdc-button .mdc-button__icon,
    .mdc-button .mdc-button__icon[dir=rtl] {
      margin-left: 8px;
      margin-right: 0
    }

    .mdc-button .mdc-button__progress-indicator {
      font-size: 0;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      line-height: initial
    }

    .mdc-button .mdc-button__label {
      position: relative
    }

    .mdc-button .mdc-button__focus-ring {
      pointer-events: none;
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 6px;
      box-sizing: content-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: calc(100% + 4px);
      width: calc(100% + 4px);
      display: none
    }

    @media screen and (forced-colors: active) {
      .mdc-button .mdc-button__focus-ring {
        border-color: CanvasText
      }
    }

    .mdc-button .mdc-button__focus-ring::after {
      content: "";
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 8px;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: calc(100% + 4px);
      width: calc(100% + 4px)
    }

    @media screen and (forced-colors: active) {
      .mdc-button .mdc-button__focus-ring::after {
        border-color: CanvasText
      }
    }

    @media screen and (forced-colors: active) {

      .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,
      .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {
        display: block
      }
    }

    .mdc-button .mdc-button__touch {
      position: absolute;
      top: 50%;
      height: 48px;
      left: 0;
      right: 0;
      transform: translateY(-50%)
    }

    .mdc-button__label+.mdc-button__icon {
      margin-left: 8px;
      margin-right: 0
    }

    [dir=rtl] .mdc-button__label+.mdc-button__icon,
    .mdc-button__label+.mdc-button__icon[dir=rtl] {
      margin-left: 0;
      margin-right: 8px
    }

    svg.mdc-button__icon {
      fill: currentColor
    }

    .mdc-button--touch {
      margin-top: 6px;
      margin-bottom: 6px
    }

    .mdc-button {
      padding: 0 8px 0 8px
    }

    .mdc-button--unelevated {
      transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 16px 0 16px
    }

    .mdc-button--unelevated.mdc-button--icon-trailing {
      padding: 0 12px 0 16px
    }

    .mdc-button--unelevated.mdc-button--icon-leading {
      padding: 0 16px 0 12px
    }

    .mdc-button--raised {
      transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 16px 0 16px
    }

    .mdc-button--raised.mdc-button--icon-trailing {
      padding: 0 12px 0 16px
    }

    .mdc-button--raised.mdc-button--icon-leading {
      padding: 0 16px 0 12px
    }

    .mdc-button--outlined {
      border-style: solid;
      transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1)
    }

    .mdc-button--outlined .mdc-button__ripple {
      border-style: solid;
      border-color: rgba(0, 0, 0, 0)
    }

    .mat-mdc-button {
      height: var(--mdc-text-button-container-height);
      border-radius: var(--mdc-text-button-container-shape);
      --mdc-text-button-container-shape: 4px;
      --mdc-text-button-container-height: 36px;
      --mdc-text-button-keep-touch-target: false
    }

    .mat-mdc-button:not(:disabled) {
      color: var(--mdc-text-button-label-text-color)
    }

    .mat-mdc-button:disabled {
      color: var(--mdc-text-button-disabled-label-text-color)
    }

    .mat-mdc-button .mdc-button__ripple {
      border-radius: var(--mdc-text-button-container-shape)
    }

    .mat-mdc-button .mat-ripple-element {
      background-color: var(--mat-text-button-ripple-color)
    }

    .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
      background-color: var(--mat-text-button-state-layer-color)
    }

    .mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-text-button-hover-state-layer-opacity)
    }

    .mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-text-button-focus-state-layer-opacity)
    }

    .mat-mdc-button:active .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-text-button-pressed-state-layer-opacity)
    }

    .mat-mdc-button[disabled] {
      cursor: default;
      pointer-events: none;
      color: var(--mdc-text-button-disabled-label-text-color)
    }

    .mat-mdc-unelevated-button {
      height: var(--mdc-filled-button-container-height);
      border-radius: var(--mdc-filled-button-container-shape);
      --mdc-filled-button-container-shape: 4px;
      --mdc-filled-button-container-elevation: 0;
      --mdc-filled-button-disabled-container-elevation: 0;
      --mdc-filled-button-focus-container-elevation: 0;
      --mdc-filled-button-hover-container-elevation: 0;
      --mdc-filled-button-keep-touch-target: false;
      --mdc-filled-button-pressed-container-elevation: 0
    }

    .mat-mdc-unelevated-button:not(:disabled) {
      background-color: var(--mdc-filled-button-container-color)
    }

    .mat-mdc-unelevated-button:disabled {
      background-color: var(--mdc-filled-button-disabled-container-color)
    }

    .mat-mdc-unelevated-button:not(:disabled) {
      color: var(--mdc-filled-button-label-text-color)
    }

    .mat-mdc-unelevated-button:disabled {
      color: var(--mdc-filled-button-disabled-label-text-color)
    }

    .mat-mdc-unelevated-button .mdc-button__ripple {
      border-radius: var(--mdc-filled-button-container-shape)
    }

    .mat-mdc-unelevated-button .mat-ripple-element {
      background-color: var(--mat-filled-button-ripple-color)
    }

    .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before {
      background-color: var(--mat-filled-button-state-layer-color)
    }

    .mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-filled-button-hover-state-layer-opacity)
    }

    .mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-filled-button-focus-state-layer-opacity)
    }

    .mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-filled-button-pressed-state-layer-opacity)
    }

    .mat-mdc-unelevated-button[disabled] {
      cursor: default;
      pointer-events: none;
      color: var(--mdc-filled-button-disabled-label-text-color);
      background-color: var(--mdc-filled-button-disabled-container-color)
    }

    .mat-mdc-raised-button {
      height: var(--mdc-protected-button-container-height);
      border-radius: var(--mdc-protected-button-container-shape);
      --mdc-protected-button-container-shape: 4px;
      --mdc-protected-button-keep-touch-target: false
    }

    .mat-mdc-raised-button:not(:disabled) {
      background-color: var(--mdc-protected-button-container-color)
    }

    .mat-mdc-raised-button:disabled {
      background-color: var(--mdc-protected-button-disabled-container-color)
    }

    .mat-mdc-raised-button:not(:disabled) {
      color: var(--mdc-protected-button-label-text-color)
    }

    .mat-mdc-raised-button:disabled {
      color: var(--mdc-protected-button-disabled-label-text-color)
    }

    .mat-mdc-raised-button .mdc-button__ripple {
      border-radius: var(--mdc-protected-button-container-shape)
    }

    .mat-mdc-raised-button .mat-ripple-element {
      background-color: var(--mat-protected-button-ripple-color)
    }

    .mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before {
      background-color: var(--mat-protected-button-state-layer-color)
    }

    .mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-protected-button-hover-state-layer-opacity)
    }

    .mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-protected-button-focus-state-layer-opacity)
    }

    .mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-protected-button-pressed-state-layer-opacity)
    }

    .mat-mdc-raised-button[disabled] {
      cursor: default;
      pointer-events: none;
      color: var(--mdc-protected-button-disabled-label-text-color);
      background-color: var(--mdc-protected-button-disabled-container-color)
    }

    .mat-mdc-raised-button[disabled][disabled] {
      box-shadow: none
    }

    .mat-mdc-outlined-button {
      height: var(--mdc-outlined-button-container-height);
      border-radius: var(--mdc-outlined-button-container-shape);
      padding: 0 15px 0 15px;
      border-width: var(--mdc-outlined-button-outline-width);
      --mdc-outlined-button-keep-touch-target: false;
      --mdc-outlined-button-outline-width: 1px;
      --mdc-outlined-button-container-shape: 4px
    }

    .mat-mdc-outlined-button:not(:disabled) {
      color: var(--mdc-outlined-button-label-text-color)
    }

    .mat-mdc-outlined-button:disabled {
      color: var(--mdc-outlined-button-disabled-label-text-color)
    }

    .mat-mdc-outlined-button .mdc-button__ripple {
      border-radius: var(--mdc-outlined-button-container-shape)
    }

    .mat-mdc-outlined-button:not(:disabled) {
      border-color: var(--mdc-outlined-button-outline-color)
    }

    .mat-mdc-outlined-button:disabled {
      border-color: var(--mdc-outlined-button-disabled-outline-color)
    }

    .mat-mdc-outlined-button.mdc-button--icon-trailing {
      padding: 0 11px 0 15px
    }

    .mat-mdc-outlined-button.mdc-button--icon-leading {
      padding: 0 15px 0 11px
    }

    .mat-mdc-outlined-button .mdc-button__ripple {
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
      border-width: var(--mdc-outlined-button-outline-width)
    }

    .mat-mdc-outlined-button .mdc-button__touch {
      left: calc(-1 * var(--mdc-outlined-button-outline-width));
      width: calc(100% + 2 * var(--mdc-outlined-button-outline-width))
    }

    .mat-mdc-outlined-button .mat-ripple-element {
      background-color: var(--mat-outlined-button-ripple-color)
    }

    .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
      background-color: var(--mat-outlined-button-state-layer-color)
    }

    .mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-outlined-button-hover-state-layer-opacity)
    }

    .mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-outlined-button-focus-state-layer-opacity)
    }

    .mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-outlined-button-pressed-state-layer-opacity)
    }

    .mat-mdc-outlined-button[disabled] {
      cursor: default;
      pointer-events: none;
      color: var(--mdc-outlined-button-disabled-label-text-color);
      border-color: var(--mdc-outlined-button-disabled-outline-color)
    }

    .mat-mdc-button,
    .mat-mdc-unelevated-button,
    .mat-mdc-raised-button,
    .mat-mdc-outlined-button {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .mat-mdc-button .mat-mdc-button-ripple,
    .mat-mdc-button .mat-mdc-button-persistent-ripple,
    .mat-mdc-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-unelevated-button .mat-mdc-button-ripple,
    .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,
    .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-raised-button .mat-mdc-button-ripple,
    .mat-mdc-raised-button .mat-mdc-button-persistent-ripple,
    .mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-outlined-button .mat-mdc-button-ripple,
    .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,
    .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      pointer-events: none;
      border-radius: inherit
    }

    .mat-mdc-button .mat-mdc-button-ripple,
    .mat-mdc-unelevated-button .mat-mdc-button-ripple,
    .mat-mdc-raised-button .mat-mdc-button-ripple,
    .mat-mdc-outlined-button .mat-mdc-button-ripple {
      overflow: hidden
    }

    .mat-mdc-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
      content: "";
      opacity: 0
    }

    .mat-mdc-button .mdc-button__label,
    .mat-mdc-unelevated-button .mdc-button__label,
    .mat-mdc-raised-button .mdc-button__label,
    .mat-mdc-outlined-button .mdc-button__label {
      z-index: 1
    }

    .mat-mdc-button .mat-mdc-focus-indicator,
    .mat-mdc-unelevated-button .mat-mdc-focus-indicator,
    .mat-mdc-raised-button .mat-mdc-focus-indicator,
    .mat-mdc-outlined-button .mat-mdc-focus-indicator {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute
    }

    .mat-mdc-button:focus .mat-mdc-focus-indicator::before,
    .mat-mdc-unelevated-button:focus .mat-mdc-focus-indicator::before,
    .mat-mdc-raised-button:focus .mat-mdc-focus-indicator::before,
    .mat-mdc-outlined-button:focus .mat-mdc-focus-indicator::before {
      content: ""
    }

    .mat-mdc-button .mat-mdc-button-touch-target,
    .mat-mdc-unelevated-button .mat-mdc-button-touch-target,
    .mat-mdc-raised-button .mat-mdc-button-touch-target,
    .mat-mdc-outlined-button .mat-mdc-button-touch-target {
      position: absolute;
      top: 50%;
      height: 48px;
      left: 0;
      right: 0;
      transform: translateY(-50%)
    }

    .mat-mdc-button._mat-animation-noopable,
    .mat-mdc-unelevated-button._mat-animation-noopable,
    .mat-mdc-raised-button._mat-animation-noopable,
    .mat-mdc-outlined-button._mat-animation-noopable {
      transition: none !important;
      animation: none !important
    }

    .mat-mdc-button>.mat-icon {
      margin-left: 0;
      margin-right: 8px;
      display: inline-block;
      position: relative;
      vertical-align: top;
      font-size: 1.125rem;
      height: 1.125rem;
      width: 1.125rem
    }

    [dir=rtl] .mat-mdc-button>.mat-icon,
    .mat-mdc-button>.mat-icon[dir=rtl] {
      margin-left: 8px;
      margin-right: 0
    }

    .mat-mdc-button .mdc-button__label+.mat-icon {
      margin-left: 8px;
      margin-right: 0
    }

    [dir=rtl] .mat-mdc-button .mdc-button__label+.mat-icon,
    .mat-mdc-button .mdc-button__label+.mat-icon[dir=rtl] {
      margin-left: 0;
      margin-right: 8px
    }

    .mat-mdc-unelevated-button>.mat-icon,
    .mat-mdc-raised-button>.mat-icon,
    .mat-mdc-outlined-button>.mat-icon {
      margin-left: 0;
      margin-right: 8px;
      display: inline-block;
      position: relative;
      vertical-align: top;
      font-size: 1.125rem;
      height: 1.125rem;
      width: 1.125rem;
      margin-left: -4px;
      margin-right: 8px
    }

    [dir=rtl] .mat-mdc-unelevated-button>.mat-icon,
    [dir=rtl] .mat-mdc-raised-button>.mat-icon,
    [dir=rtl] .mat-mdc-outlined-button>.mat-icon,
    .mat-mdc-unelevated-button>.mat-icon[dir=rtl],
    .mat-mdc-raised-button>.mat-icon[dir=rtl],
    .mat-mdc-outlined-button>.mat-icon[dir=rtl] {
      margin-left: 8px;
      margin-right: 0
    }

    [dir=rtl] .mat-mdc-unelevated-button>.mat-icon,
    [dir=rtl] .mat-mdc-raised-button>.mat-icon,
    [dir=rtl] .mat-mdc-outlined-button>.mat-icon,
    .mat-mdc-unelevated-button>.mat-icon[dir=rtl],
    .mat-mdc-raised-button>.mat-icon[dir=rtl],
    .mat-mdc-outlined-button>.mat-icon[dir=rtl] {
      margin-left: 8px;
      margin-right: -4px
    }

    .mat-mdc-unelevated-button .mdc-button__label+.mat-icon,
    .mat-mdc-raised-button .mdc-button__label+.mat-icon,
    .mat-mdc-outlined-button .mdc-button__label+.mat-icon {
      margin-left: 8px;
      margin-right: -4px
    }

    [dir=rtl] .mat-mdc-unelevated-button .mdc-button__label+.mat-icon,
    [dir=rtl] .mat-mdc-raised-button .mdc-button__label+.mat-icon,
    [dir=rtl] .mat-mdc-outlined-button .mdc-button__label+.mat-icon,
    .mat-mdc-unelevated-button .mdc-button__label+.mat-icon[dir=rtl],
    .mat-mdc-raised-button .mdc-button__label+.mat-icon[dir=rtl],
    .mat-mdc-outlined-button .mdc-button__label+.mat-icon[dir=rtl] {
      margin-left: -4px;
      margin-right: 8px
    }

    .mat-mdc-outlined-button .mat-mdc-button-ripple,
    .mat-mdc-outlined-button .mdc-button__ripple {
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
      border-width: -1px
    }

    .mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
    .mat-mdc-raised-button .mat-mdc-focus-indicator::before {
      margin: calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px)*-1)
    }

    .mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
      margin: calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 3px)*-1)
    }


    .cdk-high-contrast-active .mat-mdc-button:not(.mdc-button--outlined),
    .cdk-high-contrast-active .mat-mdc-unelevated-button:not(.mdc-button--outlined),
    .cdk-high-contrast-active .mat-mdc-raised-button:not(.mdc-button--outlined),
    .cdk-high-contrast-active .mat-mdc-outlined-button:not(.mdc-button--outlined),
    .cdk-high-contrast-active .mat-mdc-icon-button {
      outline: solid 1px
    }


    html {
      --mdc-linear-progress-active-indicator-height: 4px;
      --mdc-linear-progress-track-height: 4px;
      --mdc-linear-progress-track-shape: 0
    }

    .mat-mdc-progress-bar {
      --mdc-linear-progress-active-indicator-color: #1976d2;
      --mdc-linear-progress-track-color: rgba(25, 118, 210, .25)
    }

    .mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
      background-color: #1976d240;
      background-color: var(--mdc-linear-progress-track-color, rgba(25, 118, 210, .25))
    }

    @media (forced-colors: active) {
      .mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
      }
    }

    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      .mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(25, 118, 210, 0.25)'/%3E%3C/svg%3E")
      }
    }

    .mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
      background-color: #1976d240;
      background-color: var(--mdc-linear-progress-track-color, rgba(25, 118, 210, .25))
    }

    .mat-mdc-progress-bar.mat-accent {
      --mdc-linear-progress-active-indicator-color: #d32f2f;
      --mdc-linear-progress-track-color: rgba(211, 47, 47, .25)
    }

    .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
      background-color: #d32f2f40;
      background-color: var(--mdc-linear-progress-track-color, rgba(211, 47, 47, .25))
    }

    @media (forced-colors: active) {
      .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
      }
    }

    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(211, 47, 47, 0.25)'/%3E%3C/svg%3E")
      }
    }

    .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-bar {
      background-color: #d32f2f40;
      background-color: var(--mdc-linear-progress-track-color, rgba(211, 47, 47, .25))
    }

    .mat-mdc-progress-bar.mat-warn {
      --mdc-linear-progress-active-indicator-color: #f44336;
      --mdc-linear-progress-track-color: rgba(244, 67, 54, .25)
    }

    @keyframes mdc-linear-progress-buffering {}

    .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
      background-color: #f4433640;
      background-color: var(--mdc-linear-progress-track-color, rgba(244, 67, 54, .25))
    }

    @media (forced-colors: active) {
      .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
      }
    }

    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(244, 67, 54, 0.25)'/%3E%3C/svg%3E")
      }
    }

    .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-bar {
      background-color: #f4433640;
      background-color: var(--mdc-linear-progress-track-color, rgba(244, 67, 54, .25))
    }

    html {
      --mat-sidenav-container-shape: 0
    }

    html {
      --mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);
      --mat-sidenav-container-background-color: white;
      --mat-sidenav-container-text-color: rgba(0, 0, 0, .87);
      --mat-sidenav-content-background-color: #fafafa;
      --mat-sidenav-content-text-color: rgba(0, 0, 0, .87);
      --mat-sidenav-scrim-color: rgba(0, 0, 0, .6)
    }

    .mat-mdc-button {
      --mdc-text-button-label-text-color: #000;
      --mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, .38);
      --mat-text-button-state-layer-color: #000;
      --mat-text-button-ripple-color: rgba(0, 0, 0, .1);
      --mat-text-button-hover-state-layer-opacity: .04;
      --mat-text-button-focus-state-layer-opacity: .12;
      --mat-text-button-pressed-state-layer-opacity: .12
    }

    .mat-mdc-button.mat-primary {
      --mdc-text-button-label-text-color: #1976d2;
      --mat-text-button-state-layer-color: #1976d2;
      --mat-text-button-ripple-color: rgba(25, 118, 210, .1)
    }

    .mat-mdc-button.mat-accent {
      --mdc-text-button-label-text-color: #d32f2f;
      --mat-text-button-state-layer-color: #d32f2f;
      --mat-text-button-ripple-color: rgba(211, 47, 47, .1)
    }

    .mat-mdc-button.mat-warn {
      --mdc-text-button-label-text-color: #f44336;
      --mat-text-button-state-layer-color: #f44336;
      --mat-text-button-ripple-color: rgba(244, 67, 54, .1)
    }

    .mat-mdc-unelevated-button {
      --mdc-filled-button-container-color: white;
      --mdc-filled-button-label-text-color: #000;
      --mdc-filled-button-disabled-container-color: rgba(0, 0, 0, .12);
      --mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, .38);
      --mat-filled-button-state-layer-color: #000;
      --mat-filled-button-ripple-color: rgba(0, 0, 0, .1);
      --mat-filled-button-hover-state-layer-opacity: .04;
      --mat-filled-button-focus-state-layer-opacity: .12;
      --mat-filled-button-pressed-state-layer-opacity: .12
    }

    .mat-mdc-unelevated-button.mat-primary {
      --mdc-filled-button-container-color: #1976d2;
      --mdc-filled-button-label-text-color: #fff;
      --mat-filled-button-state-layer-color: #fff;
      --mat-filled-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-unelevated-button.mat-accent {
      --mdc-filled-button-container-color: #d32f2f;
      --mdc-filled-button-label-text-color: #fff;
      --mat-filled-button-state-layer-color: #fff;
      --mat-filled-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-unelevated-button.mat-warn {
      --mdc-filled-button-container-color: #f44336;
      --mdc-filled-button-label-text-color: #fff;
      --mat-filled-button-state-layer-color: #fff;
      --mat-filled-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-raised-button {
      --mdc-protected-button-container-color: white;
      --mdc-protected-button-label-text-color: #000;
      --mdc-protected-button-disabled-container-color: rgba(0, 0, 0, .12);
      --mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, .38);
      --mat-protected-button-state-layer-color: #000;
      --mat-protected-button-ripple-color: rgba(0, 0, 0, .1);
      --mat-protected-button-hover-state-layer-opacity: .04;
      --mat-protected-button-focus-state-layer-opacity: .12;
      --mat-protected-button-pressed-state-layer-opacity: .12;
      box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
    }

    .mat-mdc-raised-button.mat-primary {
      --mdc-protected-button-container-color: #1976d2;
      --mdc-protected-button-label-text-color: #fff;
      --mat-protected-button-state-layer-color: #fff;
      --mat-protected-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-raised-button.mat-accent {
      --mdc-protected-button-container-color: #d32f2f;
      --mdc-protected-button-label-text-color: #fff;
      --mat-protected-button-state-layer-color: #fff;
      --mat-protected-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-raised-button.mat-warn {
      --mdc-protected-button-container-color: #f44336;
      --mdc-protected-button-label-text-color: #fff;
      --mat-protected-button-state-layer-color: #fff;
      --mat-protected-button-ripple-color: rgba(255, 255, 255, .1)
    }

    .mat-mdc-raised-button:hover,
    .mat-mdc-raised-button:focus {
      box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f
    }

    .mat-mdc-raised-button:active,
    .mat-mdc-raised-button:focus:active {
      box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f
    }

    .mat-mdc-outlined-button {
      --mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, .12);
      --mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, .38);
      --mdc-outlined-button-label-text-color: #000;
      --mdc-outlined-button-outline-color: rgba(0, 0, 0, .12);
      --mat-outlined-button-state-layer-color: #000;
      --mat-outlined-button-ripple-color: rgba(0, 0, 0, .1);
      --mat-outlined-button-hover-state-layer-opacity: .04;
      --mat-outlined-button-focus-state-layer-opacity: .12;
      --mat-outlined-button-pressed-state-layer-opacity: .12
    }

    .mat-mdc-outlined-button.mat-primary {
      --mdc-outlined-button-label-text-color: #1976d2;
      --mdc-outlined-button-outline-color: rgba(0, 0, 0, .12);
      --mat-outlined-button-state-layer-color: #1976d2;
      --mat-outlined-button-ripple-color: rgba(25, 118, 210, .1)
    }

    .mat-mdc-outlined-button.mat-accent {
      --mdc-outlined-button-label-text-color: #d32f2f;
      --mdc-outlined-button-outline-color: rgba(0, 0, 0, .12);
      --mat-outlined-button-state-layer-color: #d32f2f;
      --mat-outlined-button-ripple-color: rgba(211, 47, 47, .1)
    }

    .mat-mdc-outlined-button.mat-warn {
      --mdc-outlined-button-label-text-color: #f44336;
      --mdc-outlined-button-outline-color: rgba(0, 0, 0, .12);
      --mat-outlined-button-state-layer-color: #f44336;
      --mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)
    }

    .mat-mdc-button {
      --mdc-text-button-container-height: 36px
    }

    .mat-mdc-raised-button {
      --mdc-protected-button-container-height: 36px
    }

    .mat-mdc-unelevated-button {
      --mdc-filled-button-container-height: 36px
    }

    .mat-mdc-outlined-button {
      --mdc-outlined-button-container-height: 36px
    }

    html {
      --mat-icon-color: inherit
    }

    .mat-icon.mat-primary {
      --mat-icon-color: #1976d2
    }

    .mat-icon.mat-accent {
      --mat-icon-color: #d32f2f
    }

    .mat-icon.mat-warn {
      --mat-icon-color: #f44336
    }

    html {
      --mat-toolbar-container-background-color: whitesmoke;
      --mat-toolbar-container-text-color: rgba(0, 0, 0, .87)
    }

    .mat-toolbar.mat-primary {
      --mat-toolbar-container-background-color: #1976d2;
      --mat-toolbar-container-text-color: white
    }

    .mat-toolbar.mat-accent {
      --mat-toolbar-container-background-color: #d32f2f;
      --mat-toolbar-container-text-color: white
    }

    .mat-toolbar.mat-warn {
      --mat-toolbar-container-background-color: #f44336;
      --mat-toolbar-container-text-color: white
    }

    html {
      --mat-toolbar-standard-height: 64px;
      --mat-toolbar-mobile-height: 56px
    }

    html {
      --mdc-elevated-card-container-shape: 4px;
      --mdc-outlined-card-container-shape: 4px;
      --mdc-outlined-card-outline-width: 1px
    }

    html {
      --mdc-elevated-card-container-color: white;
      --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
      --mdc-outlined-card-container-color: white;
      --mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);
      --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
      --mat-card-subtitle-text-color: rgba(0, 0, 0, .54)
    }

    html {
      --mdc-tab-indicator-active-indicator-height: 2px;
      --mdc-tab-indicator-active-indicator-shape: 0;
      --mdc-secondary-navigation-tab-container-height: 48px
    }

    .mat-mdc-tab-group,
    .mat-mdc-tab-nav-bar {
      --mdc-tab-indicator-active-indicator-color: #1976d2;
      --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
      --mat-tab-header-pagination-icon-color: #000;
      --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-label-text-color: #1976d2;
      --mat-tab-header-active-ripple-color: #1976d2;
      --mat-tab-header-inactive-ripple-color: #1976d2;
      --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-focus-label-text-color: #1976d2;
      --mat-tab-header-active-hover-label-text-color: #1976d2;
      --mat-tab-header-active-focus-indicator-color: #1976d2;
      --mat-tab-header-active-hover-indicator-color: #1976d2
    }

    .mat-mdc-tab-group.mat-accent,
    .mat-mdc-tab-nav-bar.mat-accent {
      --mdc-tab-indicator-active-indicator-color: #d32f2f;
      --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
      --mat-tab-header-pagination-icon-color: #000;
      --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-label-text-color: #d32f2f;
      --mat-tab-header-active-ripple-color: #d32f2f;
      --mat-tab-header-inactive-ripple-color: #d32f2f;
      --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-focus-label-text-color: #d32f2f;
      --mat-tab-header-active-hover-label-text-color: #d32f2f;
      --mat-tab-header-active-focus-indicator-color: #d32f2f;
      --mat-tab-header-active-hover-indicator-color: #d32f2f
    }

    .mat-mdc-tab-group.mat-warn,
    .mat-mdc-tab-nav-bar.mat-warn {
      --mdc-tab-indicator-active-indicator-color: #f44336;
      --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
      --mat-tab-header-pagination-icon-color: #000;
      --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-label-text-color: #f44336;
      --mat-tab-header-active-ripple-color: #f44336;
      --mat-tab-header-inactive-ripple-color: #f44336;
      --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
      --mat-tab-header-active-focus-label-text-color: #f44336;
      --mat-tab-header-active-hover-label-text-color: #f44336;
      --mat-tab-header-active-focus-indicator-color: #f44336;
      --mat-tab-header-active-hover-indicator-color: #f44336
    }

    .mat-mdc-tab-group.mat-background-primary,
    .mat-mdc-tab-nav-bar.mat-background-primary {
      --mat-tab-header-with-background-background-color: #1976d2;
      --mat-tab-header-with-background-foreground-color: white
    }

    .mat-mdc-tab-group.mat-background-accent,
    .mat-mdc-tab-nav-bar.mat-background-accent {
      --mat-tab-header-with-background-background-color: #d32f2f;
      --mat-tab-header-with-background-foreground-color: white
    }

    .mat-mdc-tab-group.mat-background-warn,
    .mat-mdc-tab-nav-bar.mat-background-warn {
      --mat-tab-header-with-background-background-color: #f44336;
      --mat-tab-header-with-background-foreground-color: white
    }

    .mat-mdc-tab-header {
      --mdc-secondary-navigation-tab-container-height: 48px
    }

    html {
      --mdc-snackbar-container-shape: 4px
    }

    html {
      --mdc-snackbar-container-color: #333333;
      --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87);
      --mat-snack-bar-button-color: #d32f2f
    }

    body {
      color: #444
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #333
    }

    h2 {
      border-top: 1px solid #DBDBDB
    }

    h6 {
      color: #6e6e6e
    }

    p,
    ol,
    ul,
    li,
    input,
    a {
      color: #444
    }

    .app-toolbar a {
      color: #fff
    }

    code {
      color: #444
    }

    .sidenav-content a {
      color: #1976d2
    }

    .error-text {
      color: #dd0031
    }

    footer {
      background-color: #1976d2
    }

    footer int-footer>* {
      color: #fff
    }

    footer int-footer a {
      color: #fff
    }

    footer int-footer h3 {
      color: #fff
    }

    html,
    body,
    .content {
      background: #FFFFFF
    }

    .background-sky {
      background: linear-gradient(145deg, #0d47a1, #42a5f5);
      color: #000000de
    }

    section#intro {
      color: #fff
    }

    .announcement-bar {
      background-color: #fff
    }

    .announcement-bar .button {
      color: #fff;
      background-color: #1976d2
    }

    .announcement-bar .button:hover {
      color: #ffffffb3
    }

    .home-row .card {
      background-color: #fff
    }

    .home-row .card .card-text-container p {
      color: #444
    }

    .home-row .card:hover h2 {
      color: #1976d2
    }

    .button.hero-cta {
      background-color: #fff
    }

    .cta-bar .hero-cta,
    .text-headline {
      color: #1976d2
    }

    .marketing-banner {
      background-color: #1e88e5
    }

    .marketing-banner .banner-headline {
      color: #fff
    }

    .nf-response h1,
    .nf-icon.material-icons {
      color: #1976d2
    }

    mat-sidenav-container.sidenav-container {
      background-color: #fff
    }

    mat-sidenav-container.sidenav-container mat-sidenav.sidenav {
      background-color: #f2f2f2;
      border-right: 1px solid #DBDBDB
    }

    mat-sidenav-container.sidenav-container mat-sidenav.sidenav .doc-version {
      border-top: 1px solid #DBDBDB
    }

    int-nav-menu int-nav-item .vertical-menu-item {
      color: #444
    }

    int-nav-menu int-nav-item .vertical-menu-item:hover {
      background-color: #dbdbdb;
      color: #1976d2;
      text-shadow: 0 0 5px #FFFFFF
    }

    int-nav-menu int-nav-item .vertical-menu-item:hover.selected {
      color: #1669bb
    }

    int-nav-menu int-nav-item .vertical-menu-item.selected {
      color: #1669bb
    }

    .page-home mat-toolbar.app-toolbar {
      background: #1976D2
    }

    mat-toolbar.app-toolbar mat-icon {
      color: #fff
    }

    mat-toolbar.app-toolbar .hamburger:hover {
      color: #fafafa
    }

    mat-toolbar.app-toolbar .hamburger .mat-icon {
      color: #fff
    }

    mat-toolbar.app-toolbar .nav-link.home:focus {
      outline: 1px solid rgba(255, 255, 255, .8)
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link .nav-link-inner:hover {
      background: rgba(255, 255, 255, .15)
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link:focus .nav-link-inner {
      background: rgba(255, 255, 255, .15);
      box-shadow: 0 0 1px 2px #fffc
    }

    mat-toolbar.app-toolbar int-top-menu ul li a.nav-link:active .nav-link-inner {
      background: rgba(255, 255, 255, .15)
    }

    mat-toolbar.app-toolbar int-top-menu ul li.selected a.nav-link .nav-link-inner {
      background: rgba(255, 255, 255, .15)
    }

    mat-toolbar.app-toolbar int-search-box.search-container input {
      color: #444;
      background-color: #fff
    }

    mat-toolbar.app-toolbar int-search-box.search-container input::placeholder {
      color: #6e6e6e
    }

    mat-toolbar.app-toolbar int-search-box.search-container .search-box-shortcut {
      border-color: #6e6e6e;
      color: #6e6e6e
    }

    @media screen and (min-width: 351px) {
      mat-toolbar.app-toolbar int-theme-toggle {
        border-right: 1px solid #FFFFFF
      }
    }

    .alert {
      color: #444
    }

    .alert.is-critical {
      border-left: 8px solid #DD0031;
      background-color: #dd00310d
    }

    .alert.is-critical h1,
    .alert.is-critical h2,
    .alert.is-critical h3,
    .alert.is-critical h4,
    .alert.is-critical h5,
    .alert.is-critical h6 {
      color: #dd0031
    }

    .alert.is-important {
      border-left: 8px solid #FF9800;
      background-color: #ff98000d
    }

    .alert.is-important h1,
    .alert.is-important h2,
    .alert.is-important h3,
    .alert.is-important h4,
    .alert.is-important h5,
    .alert.is-important h6 {
      color: #ff9800
    }

    .alert.is-helpful {
      border-left: 8px solid #1976D2;
      background-color: #1976d20d
    }

    .alert.is-helpful h1,
    .alert.is-helpful h2,
    .alert.is-helpful h3,
    .alert.is-helpful h4,
    .alert.is-helpful h5,
    .alert.is-helpful h6 {
      color: #1976d2
    }

    .alert.archive-warning {
      background-color: #c3002f
    }

    .alert.archive-warning *,
    .alert.archive-warning a {
      color: #fff
    }

    int-api-list .api-filter .form-search input {
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      border: 1px solid #FFFFFF;
      background-color: #fff;
      color: #444
    }

    int-api-list .api-filter .form-search input::placeholder {
      color: #6e6e6e
    }

    int-api-list .api-filter .form-search input:focus {
      border: 1px solid #42A5F5;
      box-shadow: 0 2px 2px #42a5f53d, 0 0 2px #42a5f51f
    }

    int-api-list .api-filter .form-search .material-icons {
      color: #546e7a
    }

    int-api-list .api-list-container a {
      color: #1976d2
    }

    int-api-list .api-list-container .api-list li a {
      color: #546e7a
    }

    int-api-list .api-list-container .api-list li a:hover {
      background: #ECEFF1;
      color: #2196f3
    }

    .symbol {
      box-shadow: 0 1px 2px #0a10143d;
      color: #fff
    }

    .symbol.all {
      background: #FFFFFF
    }

    .symbol.all:before {
      content: " "
    }

    .symbol.class {
      background: #2196F3
    }

    .symbol.class:before {
      content: "C"
    }

    .symbol.const {
      background: #6E6E6E
    }

    .symbol.const:before {
      content: "K"
    }

    .symbol.decorator {
      background: #1565C0
    }

    .symbol.decorator:before {
      content: "@"
    }

    .symbol.directive {
      background: #D81B60
    }

    .symbol.directive:before {
      content: "D"
    }

    .symbol.enum {
      background: #FFA000
    }

    .symbol.enum:before {
      content: "E"
    }

    .symbol.function {
      background: #4CAF50
    }

    .symbol.function:before {
      content: "F"
    }

    .symbol.interface {
      background: #009688
    }

    .symbol.interface:before {
      content: "I"
    }

    .symbol.let {
      background: #6E6E6E
    }

    .symbol.let:before {
      content: "K"
    }

    .symbol.ngmodule {
      background: #940
    }

    .symbol.ngmodule:before {
      content: "M"
    }

    .symbol.package {
      background: #8E24AA
    }

    .symbol.package:before {
      content: "Pk"
    }

    .symbol.pipe {
      background: #546E7A
    }

    .symbol.pipe:before {
      content: "P"
    }

    .symbol.element {
      background: #AA3000
    }

    .symbol.element:before {
      content: "El"
    }

    .symbol.block {
      background: #2E7D32
    }

    .symbol.block:before {
      content: "B"
    }

    .symbol.type-alias {
      background: #7CB342
    }

    .symbol.type-alias:before {
      content: "T"
    }

    .symbol.var {
      background: #6E6E6E
    }

    .symbol.var:before {
      content: "K"
    }

    a.button.mat-button.button-secondary,
    .button.button-secondary {
      background: #6E6E6E;
      color: #ffffffde
    }

    a.button.mat-button.button-plain,
    .button.button-plain {
      background: #FFFFFF;
      color: #444444de
    }

    a.button.mat-button.button-subtle,
    .button.button-subtle {
      background: #6E6E6E;
      color: #e1e1e1
    }

    a.button.mat-button.button-subtle:hover,
    .button.button-subtle:hover {
      color: #ffffffb3
    }

    a.button.mat-button.button-blue,
    .button.button-blue {
      background: #1976D2;
      color: #ffffffde
    }

    a.button.mat-button.button-blue:hover,
    .button.button-blue:hover {
      color: #ffffffb3
    }

    a.button.mat-button.button-banner,
    .button.button-banner {
      background: #444444;
      color: #ffffffde
    }

    .cta-bar .button:hover {
      color: #fafafa
    }

    .group-buttons button.button.mat-button.filter-button {
      background-color: #1976d233
    }

    .group-buttons button.button.mat-button.filter-button.selected {
      background-color: #1976d2;
      color: #fff
    }

    .group-buttons button.button.mat-button.filter-button:focus,
    .group-buttons button.button.mat-button.filter-button:hover {
      background-color: #1976d2b3;
      color: #fff
    }

    .callout header {
      color: #fff
    }

    .callout.is-critical {
      border-color: #dd0031;
      background: rgba(221, 0, 49, .05)
    }

    .callout.is-critical header {
      background: #DD0031
    }

    .callout.is-important {
      border-color: #ff9800;
      background: rgba(255, 152, 0, .05)
    }

    .callout.is-important header {
      background: #FFA000
    }

    .callout.is-helpful {
      border-color: #1976d2;
      background: rgba(25, 118, 210, .05)
    }

    .callout.is-helpful header {
      background: #1976D2
    }

    .card-container .docs-card {
      background-color: #fff
    }

    .card-container .docs-card section {
      color: #1976d2
    }

    .card-container .docs-card p {
      color: #444
    }

    .card-container .docs-card .card-footer {
      color: #1669bb;
      background-color: #1976d21a;
      border-top: .5px solid #DBDBDB
    }

    .card-container .docs-card .card-footer a {
      color: #6e6e6e
    }

    code-example:not(.no-box) {
      background-color: #f1f1f133;
      border: .5px solid #DBDBDB;
      color: #444
    }

    code-example[language=shell],
    code-example[language=sh],
    code-example[language=bash] {
      background-color: #444
    }

    code-example header {
      background-color: #1e88e5;
      color: #fafafa
    }

    code-tabs .code-tab-group .mat-tab-label:hover {
      background: rgba(0, 0, 0, .04)
    }

    code-example.avoid header,
    code-example.avoidFile header {
      border: 2px solid #DD0031;
      background: #DD0031
    }

    code-example.avoid,
    code-example.avoidFile,
    code-tabs.avoid mat-tab-body,
    code-tabs.avoidFile mat-tab-body {
      border: .5px solid #DD0031
    }

    int-code pre.prettyprint code ol.linenums {
      color: #aeaeae
    }

    int-code pre.prettyprint code ol.linenums li::marker {
      color: #aeaeae
    }

    int-code pre.prettyprint code .code-missing {
      color: #c3002f
    }

    int-code pre.prettyprint.lang-sh .copy-button,
    int-code pre.prettyprint.lang-bash .copy-button {
      color: #dbdbdb
    }

    int-code pre.prettyprint.lang-sh .copy-button:hover,
    int-code pre.prettyprint.lang-bash .copy-button:hover {
      color: #f2f2f2
    }

    int-code .copy-button {
      color: #1669bb
    }

    .sidenav-content code a,
    .sidenav-content a>code {
      color: #1669bb
    }

    .sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre)>code {
      background-color: #dbdbdb4d
    }

    .sidenav-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(a)>code {
      color: #444
    }

    .pln {
      color: #000
    }

    @media screen {
      .str {
        color: #800
      }

      .kwd {
        color: #00f
      }

      .com {
        color: #060
      }

      .typ {
        color: red
      }

      .lit {
        color: #08c
      }

      .pun,
      .opn,
      .clo {
        color: #660
      }

      .tag {
        color: #008
      }

      .atn {
        color: #606
      }

      .atv {
        color: #800
      }

      .dec,
      .var {
        color: #606
      }

      .fun {
        color: red
      }
    }

    @media print,
    projection {
      .str {
        color: #060
      }

      .kwd {
        color: #006;
        font-weight: 700
      }

      .com {
        color: #600;
        font-style: italic
      }

      .typ {
        color: #404;
        font-weight: 700
      }

      .lit {
        color: #044
      }

      .pun,
      .opn,
      .clo {
        color: #440
      }

      .tag {
        color: #006;
        font-weight: 700
      }

      .atn {
        color: #404
      }

      .atv {
        color: #060
      }
    }

    code-example[language=shell] .pnk,
    code-example[language=shell] .blk,
    code-example[language=shell] .pln,
    code-example[language=shell] .otl,
    code-example[language=shell] .kwd,
    code-example[language=shell] .typ,
    code-example[language=shell] .tag,
    code-example[language=shell] .str,
    code-example[language=shell] .atv,
    code-example[language=shell] .atn,
    code-example[language=shell] .com,
    code-example[language=shell] .lit,
    code-example[language=shell] .pun,
    code-example[language=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 {
      color: #17ff0b
    }

    code-example[language=shell] .copy-button,
    code-example[language=sh] .copy-button,
    code-example[language=bash] .copy-button {
      color: #b0bec5
    }

    int-contributor .contributor-card {
      background: #FAFAFA;
      box-shadow: 0 1px 6px 1px #6e6e6e
    }

    int-contributor .contributor-image-wrapper {
      background-color: #333
    }

    int-cookies-popup .cookies-popup {
      background: #252525;
      color: #ffffffb3
    }

    int-cookies-popup .cookies-popup .actions [mat-button] {
      color: #7fc9ff
    }

    int-cookies-popup .cookies-popup .actions [mat-button] .mat-button-focus-overlay {
      background: #FFFFFF
    }

    int-shell.mode-archive .mat-toolbar.mat-primary,
    int-shell.mode-archive footer {
      background: linear-gradient(145deg, #263238, #78909C)
    }

    int-shell.mode-archive .vertical-menu-item.selected,
    int-shell.mode-archive .vertical-menu-item:hover {
      color: #263238
    }

    int-shell.mode-archive .toc-inner ul.toc-list li.active a {
      color: #263238
    }

    int-shell.mode-archive .toc-inner ul.toc-list li.active a:before {
      background-color: #263238
    }

    int-shell.mode-archive .toc-inner ul.toc-list li:hover a {
      color: #263238
    }

    int-shell.mode-next .mat-toolbar.mat-primary,
    int-shell.mode-next footer {
      background: linear-gradient(145deg, #DD0031, #C3002F)
    }

    int-shell.mode-next .vertical-menu-item.selected,
    int-shell.mode-next .vertical-menu-item:hover {
      color: #dd0031
    }

    int-shell.mode-next .toc-inner ul.toc-list li.active a {
      color: #dd0031
    }

    int-shell.mode-next .toc-inner ul.toc-list li.active a:before {
      background-color: #dd0031
    }

    int-shell.mode-next .toc-inner ul.toc-list li:hover a {
      color: #dd0031
    }

    int-shell.mode-rc .mat-toolbar.mat-primary,
    int-shell.mode-rc footer {
      background: linear-gradient(145deg, #DDA302, #C3A300)
    }

    int-shell.mode-rc .vertical-menu-item.selected,
    int-shell.mode-rc .vertical-menu-item:hover {
      color: #dda302
    }

    int-shell.mode-rc .toc-inner ul.toc-list li.active a {
      color: #dda302
    }

    int-shell.mode-rc .toc-inner ul.toc-list li.active a:before {
      background-color: #dda302
    }

    int-shell.mode-rc .toc-inner ul.toc-list li:hover a {
      color: #dda302
    }

    details {
      box-shadow: 0 1px 4px #0a10145e
    }

    .error-list li .symbol.runtime {
      background: #4CAF50
    }

    .error-list li .symbol.compiler {
      background: #2196F3
    }

    .error-list li a {
      color: #546e7a
    }

    .error-list li a:hover {
      background: #ECEFF1;
      color: #2196f3
    }

    .filetree {
      background: #FFFFFF;
      border: 4px solid #DBDBDB
    }

    .filetree .file {
      color: #444
    }

    .filetree .children .file:before {
      border-color: #dbdbdb
    }

    .reviewed {
      color: #5e5e5e
    }

    .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 {
      color: #6e6e6e
    }

    hr {
      background: #DBDBDB
    }

    .content .lightbox {
      border: 1px solid #DBDBDB;
      background-color: #ebebeb
    }

    .content .lightbox img {
      background-color: #fff
    }

    .api-header label {
      color: #fff
    }

    label.api-status-label {
      color: #fff;
      background-color: #6e6e6e
    }

    label.api-status-label.deprecated,
    label.api-status-label.security,
    label.api-status-label.impure-pipe,
    label.api-status-label.dev-preview,
    label.api-status-label.experimental {
      background-color: #dd0031
    }

    label.api-status-label a {
      color: inherit;
      line-height: inherit;
      font-size: inherit;
      font-weight: inherit
    }

    label.api-type-label {
      color: #fff;
      background-color: #1e88e5
    }

    label.api-type-label.all {
      background: #FFFFFF
    }

    label.api-type-label.class {
      background: #2196F3
    }

    label.api-type-label.const {
      background: #6E6E6E
    }

    label.api-type-label.decorator {
      background: #1565C0
    }

    label.api-type-label.directive {
      background: #D81B60
    }

    label.api-type-label.enum {
      background: #FFA000
    }

    label.api-type-label.function {
      background: #4CAF50
    }

    label.api-type-label.interface {
      background: #009688
    }

    label.api-type-label.let {
      background: #6E6E6E
    }

    label.api-type-label.ngmodule {
      background: #940
    }

    label.api-type-label.package {
      background: #8E24AA
    }

    label.api-type-label.pipe {
      background: #546E7A
    }

    label.api-type-label.element {
      background: #AA3000
    }

    label.api-type-label.block {
      background: #2E7D32
    }

    label.api-type-label.type-alias {
      background: #7CB342
    }

    label.api-type-label.var {
      background: #6E6E6E
    }

    label.page-label {
      color: #fff;
      background-color: #eceff1;
      color: #6e6e6e
    }

    label.property-type-label {
      background-color: #444;
      color: #fff
    }

    int-notification {
      background: #444444
    }

    int-notification .close-button {
      background: #444444
    }

    int-notification .content {
      background: #444444
    }

    int-notification .content .action-button {
      background: #DD0031
    }

    .presskit-container .presskit-section:not(:first-child) {
      border-top: 1px solid #DBDBDB
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img {
      background-color: #fff
    }

    .presskit-container .presskit-section .presskit-icon-group .presskit-icon-item .presskit-image-container .transparent-img-inverse {
      background-color: #333
    }

    int-resource-list .subcategory-title {
      background-color: #eceff1
    }

    int-resource-list .resource-row-link {
      background-color: #fff
    }

    int-resource-list .resource-row-link:hover {
      border-color: #1976d280;
      box-shadow: 0 8px 8px #0183a33d, 0 0 8px #0143a31f, 0 6px 18px #2b85e71f
    }

    .page-guide-roadmap .completed-details {
      border-top: 1px solid #DBDBDB
    }

    int-search-results .search-results {
      background-color: #444;
      box-shadow: 0 2px 5px #0000004d
    }

    int-search-results .search-results .search-area .search-section-header {
      color: #fff
    }

    int-search-results .search-results .search-area ul .search-result-item {
      color: #fafafa
    }

    int-search-results .search-results .search-area ul .search-result-item:hover {
      color: #fff
    }

    int-search-results .search-results .no-results {
      color: #fff
    }

    int-search-results .search-results a {
      color: #000000de
    }

    int-search-results .search-results .close-button {
      color: #fafafa
    }

    int-search-results.embedded .search-results .search-area .search-section-header {
      color: #444
    }

    int-search-results.embedded .search-results .search-area .search-result-item {
      color: #5e5e5e
    }

    int-search-results.embedded .search-results .search-area .search-result-item:hover {
      color: #1e88e5
    }

    int-search-results.embedded .search-results .no-results {
      color: #000000de
    }

    int-search-results.embedded .search-results a {
      color: #1976d2
    }

    int-select .form-select-button {
      background: #FFFFFF;
      box-shadow: 0 2px 2px #0a10143d, 0 0 2px #0a10141f;
      border: 1px solid #FFFFFF;
      color: #546e7a
    }

    int-select .form-select-button:focus {
      border: 1px solid #42A5F5;
      box-shadow: 0 2px 2px #42a5f53d, 0 0 2px #42a5f51f
    }

    int-select .form-select-button.disabled {
      color: #d3d3d3
    }

    int-select .form-select-dropdown {
      background: #fafafa;
      box-shadow: 0 16px 16px #0a10143d, 0 0 16px #0a10141f
    }

    int-select .form-select-dropdown li:hover,
    int-select .form-select-dropdown li.current {
      background-color: #eceff1;
      color: f(false, #78909C, #607D8B)
    }

    int-select .form-select-dropdown li.selected {
      background-color: #cfd8dc
    }

    table {
      min-width: 100%;
      box-shadow: 0 2px 2px #6e6e6e3d, 0 0 2px #0a10141f;
      background-color: #fff
    }

    table thead>tr>th {
      background: rgba(219, 219, 219, .2);
      border-bottom: 1px solid #DBDBDB;
      color: #444
    }

    table tbody>tr>th,
    table tbody>tr>td {
      border-bottom: 1px solid #DBDBDB
    }

    @media (max-width: 480px) {
      table tbody>tr>td tr td:first-child {
        background-color: #dbdbdb
      }
    }

    table tbody>tr>th {
      background: rgba(219, 219, 219, .2)
    }

    table tbody>tr>th:not(:last-child) {
      border-right: 1px solid #DBDBDB
    }

    @media (max-width: 480px) {
      table tbody>tr:last-child td {
        border-bottom: 1px solid #DBDBDB
      }
    }

    int-toc .toc-inner .toc-heading.secondary:hover {
      color: #1e88e5
    }

    int-toc .toc-inner button.toc-heading.embedded:focus,
    int-toc .toc-inner button.toc-more-items.embedded:focus {
      background: #DBDBDB;
      color: #6e6e6e
    }

    int-toc .toc-inner button.toc-heading:hover:not(.embedded) {
      color: #1e88e5
    }

    int-toc .toc-inner button.toc-more-items {
      color: #6e6e6e
    }

    int-toc .toc-inner button.toc-more-items:hover {
      color: #1e88e5
    }

    int-toc .toc-inner ul.toc-list li.h1:after {
      background: #DBDBDB
    }

    int-toc .toc-inner ul.toc-list li a {
      color: #5e5e5e
    }

    int-toc .toc-inner ul.toc-list li:hover * {
      color: #1e88e5
    }

    int-toc .toc-inner ul.toc-list li.active * {
      color: #1976d2
    }

    int-toc .toc-inner ul.toc-list li.active a:before {
      background: #1976D2
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:before {
      border-left-color: #dbdbdb
    }

    int-toc .toc-inner ul.toc-list:not(.embedded) li:not(.active):hover a:before {
      background: #DBDBDB
    }

    int-toc.embedded .toc-inner .toc-heading.secondary {
      color: #000000de
    }

    /*# sourceMappingURL=light-theme.css.map*/


    .mdc-icon-button {
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      border: none;
      outline: none;
      background-color: rgba(0, 0, 0, 0);
      fill: currentColor;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      z-index: 0;
      overflow: visible
    }

    .mdc-icon-button .mdc-icon-button__touch {
      position: absolute;
      top: 50%;
      height: 48px;
      left: 50%;
      width: 48px;
      transform: translate(-50%, -50%)
    }

    @media screen and (forced-colors: active) {

      .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,
      .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {
        display: block
      }
    }

    .mdc-icon-button:disabled {
      cursor: default;
      pointer-events: none
    }

    .mdc-icon-button[hidden] {
      display: none
    }

    .mdc-icon-button--display-flex {
      align-items: center;
      display: inline-flex;
      justify-content: center
    }

    .mdc-icon-button__focus-ring {
      pointer-events: none;
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 6px;
      box-sizing: content-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
      width: 100%;
      display: none
    }

    @media screen and (forced-colors: active) {
      .mdc-icon-button__focus-ring {
        border-color: CanvasText
      }
    }

    .mdc-icon-button__focus-ring::after {
      content: "";
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 8px;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: calc(100% + 4px);
      width: calc(100% + 4px)
    }

    @media screen and (forced-colors: active) {
      .mdc-icon-button__focus-ring::after {
        border-color: CanvasText
      }
    }

    .mdc-icon-button__icon {
      display: inline-block
    }

    .mdc-icon-button__icon.mdc-icon-button__icon--on {
      display: none
    }

    .mdc-icon-button--on .mdc-icon-button__icon {
      display: none
    }

    .mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {
      display: inline-block
    }

    .mdc-icon-button__link {
      height: 100%;
      left: 0;
      outline: none;
      position: absolute;
      top: 0;
      width: 100%
    }

    .mat-mdc-icon-button {
      height: var(--mdc-icon-button-state-layer-size);
      width: var(--mdc-icon-button-state-layer-size);
      color: var(--mdc-icon-button-icon-color);
      --mdc-icon-button-state-layer-size: 48px;
      --mdc-icon-button-icon-size: 24px
    }

    .mat-mdc-icon-button .mdc-button__icon {
      font-size: var(--mdc-icon-button-icon-size)
    }

    .mat-mdc-icon-button svg,
    .mat-mdc-icon-button img {
      width: var(--mdc-icon-button-icon-size);
      height: var(--mdc-icon-button-icon-size)
    }

    .mat-mdc-icon-button:disabled {
      color: var(--mdc-icon-button-disabled-icon-color)
    }

    .mat-mdc-icon-button {
      padding: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      text-align: center;
      font-size: var(--mdc-icon-button-icon-size);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .mat-mdc-icon-button svg {
      vertical-align: baseline
    }

    .mat-mdc-icon-button[disabled] {
      cursor: default;
      pointer-events: none;
      color: var(--mdc-icon-button-disabled-icon-color)
    }

    .mat-mdc-icon-button .mat-mdc-button-ripple,
    .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,
    .mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      pointer-events: none;
      border-radius: inherit
    }

    .mat-mdc-icon-button .mat-mdc-button-ripple {
      overflow: hidden
    }

    .mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
      content: "";
      opacity: 0
    }

    .mat-mdc-icon-button .mdc-button__label {
      z-index: 1
    }

    .mat-mdc-icon-button .mat-mdc-focus-indicator {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute
    }

    .mat-mdc-icon-button:focus .mat-mdc-focus-indicator::before {
      content: ""
    }

    .mat-mdc-icon-button .mat-ripple-element {
      background-color: var(--mat-icon-button-ripple-color)
    }

    .mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
      background-color: var(--mat-icon-button-state-layer-color)
    }

    .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-icon-button-hover-state-layer-opacity)
    }

    .mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
    .mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-icon-button-focus-state-layer-opacity)
    }

    .mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple::before {
      opacity: var(--mat-icon-button-pressed-state-layer-opacity)
    }

    .mat-mdc-icon-button .mat-mdc-button-touch-target {
      position: absolute;
      top: 50%;
      height: 48px;
      left: 50%;
      width: 48px;
      transform: translate(-50%, -50%)
    }

    .mat-mdc-icon-button._mat-animation-noopable {
      transition: none !important;
      animation: none !important
    }

    .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
      border-radius: 50%
    }

    .mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before,
    .mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before,
    .mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before,
    .mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before {
      background: rgba(0, 0, 0, 0);
      opacity: 1
    }


    .mat-drawer-container {
      position: relative;
      z-index: 1;
      color: var(--mat-sidenav-content-text-color);
      background-color: var(--mat-sidenav-content-background-color);
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      display: block;
      overflow: hidden
    }

    .mat-drawer-container[fullscreen] {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute
    }

    .mat-drawer-container[fullscreen].mat-drawer-container-has-open {
      overflow: hidden
    }

    .mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side {
      z-index: 3
    }

    .mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,
    .mat-drawer-container.ng-animate-disabled .mat-drawer-content,
    .ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,
    .ng-animate-disabled .mat-drawer-container .mat-drawer-content {
      transition: none
    }

    .mat-drawer-backdrop {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      display: block;
      z-index: 3;
      visibility: hidden
    }

    .mat-drawer-backdrop.mat-drawer-shown {
      visibility: visible;
      background-color: var(--mat-sidenav-scrim-color)
    }

    .mat-drawer-transition .mat-drawer-backdrop {
      transition-duration: 400ms;
      transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-property: background-color, visibility
    }

    .cdk-high-contrast-active .mat-drawer-backdrop {
      opacity: .5
    }

    .mat-drawer-content {
      position: relative;
      z-index: 1;
      display: block;
      height: 100vh;
      overflow: auto
    }

    .mat-drawer-transition .mat-drawer-content {
      transition-duration: 400ms;
      transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-property: transform, margin-left, margin-right
    }

    .mat-drawer {
      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);
      position: relative;
      z-index: 4;
      color: var(--mat-sidenav-container-text-color);
      background-color: var(--mat-sidenav-container-background-color);
      border-top-right-radius: var(--mat-sidenav-container-shape);
      border-bottom-right-radius: var(--mat-sidenav-container-shape);
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 3;
      outline: 0;
      box-sizing: border-box;
      overflow-y: auto;
      transform: translate3d(-100%, 0, 0)
    }

    .cdk-high-contrast-active .mat-drawer,
    .cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end {
      border-right: solid 1px currentColor
    }

    .cdk-high-contrast-active [dir=rtl] .mat-drawer,
    .cdk-high-contrast-active .mat-drawer.mat-drawer-end {
      border-left: solid 1px currentColor;
      border-right: none
    }

    .mat-drawer.mat-drawer-side {
      z-index: 2
    }

    .mat-drawer.mat-drawer-end {
      right: 0;
      transform: translate3d(100%, 0, 0);
      border-top-left-radius: var(--mat-sidenav-container-shape);
      border-bottom-left-radius: var(--mat-sidenav-container-shape);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0
    }

    [dir=rtl] .mat-drawer {
      border-top-left-radius: var(--mat-sidenav-container-shape);
      border-bottom-left-radius: var(--mat-sidenav-container-shape);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      transform: translate3d(100%, 0, 0)
    }

    [dir=rtl] .mat-drawer.mat-drawer-end {
      border-top-right-radius: var(--mat-sidenav-container-shape);
      border-bottom-right-radius: var(--mat-sidenav-container-shape);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      left: 0;
      right: auto;
      transform: translate3d(-100%, 0, 0)
    }

    .mat-drawer[style*="visibility: hidden"] {
      display: none
    }

    .mat-drawer-side {
      box-shadow: none;
      border-right-color: var(--mat-sidenav-container-divider-color);
      border-right-width: 1px;
      border-right-style: solid
    }

    .mat-drawer-side.mat-drawer-end {
      border-left-color: var(--mat-sidenav-container-divider-color);
      border-left-width: 1px;
      border-left-style: solid;
      border-right: none
    }

    [dir=rtl] .mat-drawer-side {
      border-left-color: var(--mat-sidenav-container-divider-color);
      border-left-width: 1px;
      border-left-style: solid;
      border-right: none
    }

    [dir=rtl] .mat-drawer-side.mat-drawer-end {
      border-right-color: var(--mat-sidenav-container-divider-color);
      border-right-width: 1px;
      border-right-style: solid;
      border-left: none
    }

    .mat-drawer-inner-container {
      width: 100%;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }

    .mat-sidenav-fixed {
      position: fixed
    }

    .home h3 {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      display: inline;
    }

    .icon-container {
      display: flex;
      align-items: center; /* Center vertically within the flex container */
    }

    .icon-container i {
      margin-right: 5px;
    }

    .menusp {
      display: none;
      width:50px;
    }
    .mat-sidenav {
      display: none;
    }
    .mat-drawer-content {
      margin-left: 0;
    }

    label:not(.floating-label):not(.error) {
        color: rgba(0,0,0,.60) !important;
    }

    .floating-label.is-focused label, .floating-label.is-focused legend {
        color: #3a70ce !important;
    }

    .form-control[readonly] {
        color: #000 !important;
    }

    .fqtd {
        margin-top: 1.2rem!important;
    }

    .error {
      color: red !important;
      display: table-header-group !important;
    }

    @media only screen and (min-width: 992px) {
      .hamburger {
        display: none;
      }
      .mat-sidenav {
        display: block;
      }
      .menusp {
        display: block;
      }
      .sidenav-content {
        margin-left: 350px;
        width: 70%;
      }
    }