@import url(/css/theme.css);

:root {
  font-family: 'Roboto Flex', sans-serif;
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
  --main-a-color: #0da9ef;

  /* this is copied from .body-medium (default) in typography.module.css */
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);

  /* these were not in the tokens by default, but needed otherwise shows serif fonts.
  https://github.com/material-components/material-web/blob/main/docs/theming/typography.md#typeface
      */
  --md-ref-typeface-brand: 'Roboto Flex', sans-serif;
  --md-ref-typeface-plain: 'Roboto Flex', sans-serif;

}

body {
  margin: 0;
}
  

@media (prefers-color-scheme: light) {
  .chainparency-logo {
      content: url("/images/chainparency-logo-white.png");
  }
}

@media (prefers-color-scheme: dark) {
  .chainparency-logo {
      content: url("/images/chainparency-logo-dark.png");
  }
}
@media print {
  .nav {
      display: none;
  }
}

.fabBottom {
  position: fixed;
  right: 16px;
  /* style as you need */
  bottom: 96px;
  /* style as you need */
}

@media (width >=840px) {
  .fabBottom {
      bottom: 16px;
  }
}

.main {
padding: 4px;
}

  
  @media (width < 600px) {
      :is(.medium, .expanded):not(.compact) {
          display: none;
      }
  
      .gte-medium {
          display: none;
      }
  }
  
  @media (width >=600px) and (width < 840px) {
      :is(.compact, .expanded):not(.medium) {
          display: none;
      }
  }
  
  @media (width < 840px) {
      .gte-expanded {
          display: none;
      }
  }
  
  @media (width >=840px) {
      :is(.compact, .medium):not(.expanded) {
          display: none;
      }
  
      .gte-expanded {
          display: block;
      }
  }
  
  @media (width >=600px) {
      .gte-medium {
          display: block;
      }
  }

  
  a {
      color: var(--main-a-color);
  }
  
  .max-width {
      max-width: 1200px;
      margin: 0 auto;
  }
  
  .container {
      max-width: 1200px;
      /* padding: 30px 8px; */
      margin-left: auto;
      margin-right: auto;
  }    
    @media (min-width: 1600px) {
        .container {
            max-width: 1400px;
        }
    }
    @media (min-width: 1800px) {
        .container {
            max-width: 1600px;
        }
    }
  
  img.logo {
      width: 400px;
  }
  
  /* 
  Size breakpoints - based on: https://material.io/blog/material-you-large-screens
  - if you want it on all screens, don't use any of these. 
  */
  @media screen and (max-width: 599px) {
      :is(.medium, .expanded):not(.compact) {
          display: none;
      }
  }
  
  @media screen and (min-width: 600px) and (max-width: 839px) {
      :is(.compact, .expanded):not(.medium) {
          display: none;
      }
  }
  
  @media screen and (min-width: 840px) {
      :is(.compact, .medium):not(.expanded) {
          display: none;
      }
  }

  .hidden {
      display: none;
  }
  
  .footer-div {
      /* background-color: var(--md-sys-color-surface); */
      /* color: var(--md-sys-color-on-surface); */
      padding: 20px 0;
  }
  
  .rounded-10 {
      border-radius: 10px;
  }
  
  .r10 {
      border-radius: 10px;
  }
  
  .p4 {
      padding: 4px;
  }
  .p8 {
      padding: 8px;
  }
  .p12 {
      padding: 12px;
  }
  .p16 {
      padding: 16px;
  }
  .p20 {
      padding: 20px;
  }
  .p24 {
      padding: 24px;
  }
  .p30 {
      padding: 30px;
  }
  .pt8{
      padding-top: 8px;
  }
  .pt40 {
      padding-top: 40px;
  }
  .pb8 {
      padding-bottom: 8px;
  }       
  .pb40 {
      padding-bottom: 40px;
  }

  .mt8{
      margin-top: 8px
  }
  .mt12 {
      margin-top: 12px;
  }
  .mt16 {
      margin-top: 16px;
  }
  .mt20 {
      margin-top: 20px;
  }
  .mt24 {
      margin-top: 24px;
  }
  .mt40 {
      margin-top: 40px;
  }

  .mr4 {
      margin-right: 4px;
  }
  .mr8 {
      margin-right: 8px;
  }
  .mr12 {
      margin-right: 12px;
  }
  .mr16 {
      margin-right: 16px;
  }
  
  .mb4 {
      margin-bottom: 4px;
  }
  
  .mb8 {
      margin-bottom: 8px;
  }
  
  .mb12 {
      margin-bottom: 12px;
  }
  .mb16 {
      margin-bottom: 16px;
  }
  .mb20{
      margin-bottom: 20px;
  }
  .mb24 {
      margin-bottom: 24px;
  }
  
  .ml4 {
      margin-left: 4px;
  }
  .ml8 {
      margin-left: 8px;
  }
  .ml12 {
      margin-left: 12px;
  }

  
  .flex {
      display: flex;
  }
  
  .flexw {
      display: flex;
      flex-wrap: wrap;
  }
  
  /* responsive flex */
  .flexr {
      display: flex;
  }
  
  @media screen and (max-width: 599px) {
      .flexr {
          flex-wrap: wrap;
      }
  }
  
  :is(.flex, .flexr, .flexw) :is(.center) {
      justify-content: center;
      align-items: center;
  }
  
  .center-v {
      /* align-items: center; */
  }
  
  img.center {
      margin: 0 auto;
      display: block;
  }

  .error {
      color: red;
  }

  .row {
      flex-direction: row;
  }

  .col {
      flex-direction: column;
  }
  
  .g8 {
      gap: 8px;
  }
  .g12 {
      gap: 12px;
  }
  .g16 {
      gap: 16px;
  }
  .g20 {
      gap: 20px;
  }
  .g24 {
      /* 24px is the default gap in material design - https://m3.material.io/foundations/layout/understanding-layout/spacing */
      gap: 24px;
  }
  .g40{
      gap: 40px;
  }
  .h40 {
      height: 40px;
  }
  .ac {
      align-items: center;
  }
  .jc, .jcc {
      justify-content: center;
  }
  .jcsb {
      justify-content: space-between;   
  }
  .jce {
      justify-content: end;
  }
  .aic {
      align-items: center;
  }
  .aie {
      align-items: end;
  }

  .grid-equal {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
  }
  
  .grid {
      display: grid;
  }
  
  .fw, .w100 {
      width: 100%;
  }


  .list-grid {
      background-color: var(--md-sys-color-surface);
  } 
  .grid-head-item {
      /* background-color: #eee; */
      /* background-color: rgb(246, 248, 250); */
      // background-color: var(--md-sys-color-surface-variant);
      font-weight: bold;
      padding: 10px;
    }

    .grid-head-left {
      // border-radius: 8px 0 0 0;
    }

    .grid-head-right {
      // border-radius: 0 8px 0 0;
    }

    .grid-item {
      padding: 10px;
      border-bottom: 1px solid rgb(208, 215, 222);
      cursor: pointer;
    }

    md-list-item[selected] {
      --md-list-item-label-text-weight: 600;
      /* 
      --md-list-item-label-text-color: blue;
      --md-list-item-supporting-text-color: red; */
    }


  .d-block{
      display: block;
  }
  .w-100{
      width: 100% !important;
  }
  .flex-1{
      flex: 1;
  }

  md-outlined-card {
      padding: 16px;
  }
  .text-right{
      text-align: right;
  }
  .text-upper {
      text-transform: uppercase;
  }

  .card {
      border-radius: 8px;
      border: 1px solid #ccc;
      padding: 20px;
      background-color: var(--md-sys-color-surface);
      color: var(--md-sys-color-on-surface);
  }

  .alert {
      background-color: var(--md-sys-color-error);
      color: var(--md-sys-color-on-error);
      padding: 10px;
      border-radius: 5px;
  }

  .cursor-pointer {
      cursor: pointer;
  }

  
.display-large {
  font-family: var(--md-sys-typescale-display-large-font-family-name);
  font-style: var(--md-sys-typescale-display-large-font-family-style);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  font-size: var(--md-sys-typescale-display-large-font-size);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}

.display-medium {
  font-family: var(--md-sys-typescale-display-medium-font-family-name);
  font-style: var(--md-sys-typescale-display-medium-font-family-style);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}

.display-small {
  font-family: var(--md-sys-typescale-display-small-font-family-name);
  font-style: var(--md-sys-typescale-display-small-font-family-style);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  font-size: var(--md-sys-typescale-display-small-font-size);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}

.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font-family-name);
  font-style: var(--md-sys-typescale-headline-large-font-family-style);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}

.headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}

.headline-small {
  font-family: var(--md-sys-typescale-headline-small-font-family-name);
  font-style: var(--md-sys-typescale-headline-small-font-family-style);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}

.body-large {
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  font-size: var(--md-sys-typescale-body-large-font-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.body-medium {
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}

.body-small {
  font-family: var(--md-sys-typescale-body-small-font-family-name);
  font-style: var(--md-sys-typescale-body-small-font-family-style);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  font-size: var(--md-sys-typescale-body-small-font-size);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}

.label-large {
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-style: var(--md-sys-typescale-label-large-font-family-style);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  font-size: var(--md-sys-typescale-label-large-font-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}

.label-medium {
  font-family: var(--md-sys-typescale-label-medium-font-family-name);
  font-style: var(--md-sys-typescale-label-medium-font-family-style);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}

.label-small {
  font-family: var(--md-sys-typescale-label-small-font-family-name);
  font-style: var(--md-sys-typescale-label-small-font-family-style);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  font-size: var(--md-sys-typescale-label-small-font-size);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}

.title-large {
  font-family: var(--md-sys-typescale-title-large-font-family-name);
  font-style: var(--md-sys-typescale-title-large-font-family-style);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  font-size: var(--md-sys-typescale-title-large-font-size);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}

.title-medium {
  font-family: var(--md-sys-typescale-title-medium-font-family-name);
  font-style: var(--md-sys-typescale-title-medium-font-family-style);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}

.title-small {
  font-family: var(--md-sys-typescale-title-small-font-family-name);
  font-style: var(--md-sys-typescale-title-small-font-family-style);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  font-size: var(--md-sys-typescale-title-small-font-size);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}

  
.primary {
  background-color: var(--md-sys-color-primary);
}

.primary-text {
  color: var(--md-sys-color-primary);
}

.on-primary {
  background-color: var(--md-sys-color-on-primary);
}

.on-primary-text {
  color: var(--md-sys-color-on-primary);
}

.primary-container {
  background-color: var(--md-sys-color-primary-container);
}

.primary-container-text {
  color: var(--md-sys-color-primary-container);
}

.on-primary-container {
  background-color: var(--md-sys-color-on-primary-container);
}

.on-primary-container-text {
  color: var(--md-sys-color-on-primary-container);
}

.primary-fixed {
  background-color: var(--md-sys-color-primary-fixed);
}

.primary-fixed-text {
  color: var(--md-sys-color-primary-fixed);
}

.on-primary-fixed {
  background-color: var(--md-sys-color-on-primary-fixed);
}

.on-primary-fixed-text {
  color: var(--md-sys-color-on-primary-fixed);
}

.primary-fixed-dim {
  background-color: var(--md-sys-color-primary-fixed-dim);
}

.primary-fixed-dim-text {
  color: var(--md-sys-color-primary-fixed-dim);
}

.on-primary-fixed-variant {
  background-color: var(--md-sys-color-on-primary-fixed-variant);
}

.on-primary-fixed-variant-text {
  color: var(--md-sys-color-on-primary-fixed-variant);
}

.secondary {
  background-color: var(--md-sys-color-secondary);
}

.secondary-text {
  color: var(--md-sys-color-secondary);
}

.on-secondary {
  background-color: var(--md-sys-color-on-secondary);
}

.on-secondary-text {
  color: var(--md-sys-color-on-secondary);
}

.secondary-container {
  background-color: var(--md-sys-color-secondary-container);
}

.secondary-container-text {
  color: var(--md-sys-color-secondary-container);
}

.on-secondary-container {
  background-color: var(--md-sys-color-on-secondary-container);
}

.on-secondary-container-text {
  color: var(--md-sys-color-on-secondary-container);
}

.secondary-fixed {
  background-color: var(--md-sys-color-secondary-fixed);
}

.secondary-fixed-text {
  color: var(--md-sys-color-secondary-fixed);
}

.on-secondary-fixed {
  background-color: var(--md-sys-color-on-secondary-fixed);
}

.on-secondary-fixed-text {
  color: var(--md-sys-color-on-secondary-fixed);
}

.secondary-fixed-dim {
  background-color: var(--md-sys-color-secondary-fixed-dim);
}

.secondary-fixed-dim-text {
  color: var(--md-sys-color-secondary-fixed-dim);
}

.on-secondary-fixed-variant {
  background-color: var(--md-sys-color-on-secondary-fixed-variant);
}

.on-secondary-fixed-variant-text {
  color: var(--md-sys-color-on-secondary-fixed-variant);
}

.tertiary {
  background-color: var(--md-sys-color-tertiary);
}

.tertiary-text {
  color: var(--md-sys-color-tertiary);
}

.on-tertiary {
  background-color: var(--md-sys-color-on-tertiary);
}

.on-tertiary-text {
  color: var(--md-sys-color-on-tertiary);
}

.tertiary-container {
  background-color: var(--md-sys-color-tertiary-container);
}

.tertiary-container-text {
  color: var(--md-sys-color-tertiary-container);
}

.on-tertiary-container {
  background-color: var(--md-sys-color-on-tertiary-container);
}

.on-tertiary-container-text {
  color: var(--md-sys-color-on-tertiary-container);
}

.tertiary-fixed {
  background-color: var(--md-sys-color-tertiary-fixed);
}

.tertiary-fixed-text {
  color: var(--md-sys-color-tertiary-fixed);
}

.on-tertiary-fixed {
  background-color: var(--md-sys-color-on-tertiary-fixed);
}

.on-tertiary-fixed-text {
  color: var(--md-sys-color-on-tertiary-fixed);
}

.tertiary-fixed-dim {
  background-color: var(--md-sys-color-tertiary-fixed-dim);
}

.tertiary-fixed-dim-text {
  color: var(--md-sys-color-tertiary-fixed-dim);
}

.on-tertiary-fixed-variant {
  background-color: var(--md-sys-color-on-tertiary-fixed-variant);
}

.on-tertiary-fixed-variant-text {
  color: var(--md-sys-color-on-tertiary-fixed-variant);
}

.error {
  color: var(--md-sys-color-error);
}

.error-text {
  color: var(--md-sys-color-error);
}

.error-container {
  background-color: var(--md-sys-color-error-container);
}

.error-container-text {
  color: var(--md-sys-color-error-container);
}

.on-error {
  background-color: var(--md-sys-color-on-error);
}

.on-error-text {
  color: var(--md-sys-color-on-error);
}

.on-error-container {
  background-color: var(--md-sys-color-on-error-container);
}

.on-error-container-text {
  color: var(--md-sys-color-on-error-container);
}

.background {
  background-color: var(--md-sys-color-background);
}

.background-text {
  color: var(--md-sys-color-background);
}

.on-background {
  background-color: var(--md-sys-color-on-background);
}

.on-background-text {
  color: var(--md-sys-color-on-background);
}

.outline {
  background-color: var(--md-sys-color-outline);
}

.outline-text {
  color: var(--md-sys-color-outline);
}

.inverse-on-surface {
  background-color: var(--md-sys-color-inverse-on-surface);
}

.inverse-on-surface-text {
  color: var(--md-sys-color-inverse-on-surface);
}

.inverse-surface {
  background-color: var(--md-sys-color-inverse-surface);
}

.inverse-surface-text {
  color: var(--md-sys-color-inverse-surface);
}

.inverse-primary {
  background-color: var(--md-sys-color-inverse-primary);
}

.inverse-primary-text {
  color: var(--md-sys-color-inverse-primary);
}

.shadow {
  background-color: var(--md-sys-color-shadow);
}

.shadow-text {
  color: var(--md-sys-color-shadow);
}

.surface-tint {
  background-color: var(--md-sys-color-surface-tint);
}

.surface-tint-text {
  color: var(--md-sys-color-surface-tint);
}

.outline-variant {
  background-color: var(--md-sys-color-outline-variant);
}

.outline-variant-text {
  color: var(--md-sys-color-outline-variant);
}

.scrim {
  background-color: var(--md-sys-color-scrim);
}

.scrim-text {
  color: var(--md-sys-color-scrim);
}

.surface {
  background-color: var(--md-sys-color-surface);
}

.surface-text {
  color: var(--md-sys-color-surface);
}

.on-surface {
  background-color: var(--md-sys-color-on-surface);
}

.on-surface-text {
  color: var(--md-sys-color-on-surface);
}

.surface-variant {
  background-color: var(--md-sys-color-surface-variant);
}

.surface-variant-text {
  color: var(--md-sys-color-surface-variant);
}

.on-surface-variant {
  background-color: var(--md-sys-color-on-surface-variant);
}

.on-surface-variant-text {
  color: var(--md-sys-color-on-surface-variant);
}

.surface-container-highest {
  background-color: var(--md-sys-color-surface-container-highest);
}

.surface-container-highest-text {
  color: var(--md-sys-color-surface-container-highest);
}

.surface-container-high {
  background-color: var(--md-sys-color-surface-container-high);
}

.surface-container-high-text {
  color: var(--md-sys-color-surface-container-high);
}

.surface-container {
  background-color: var(--md-sys-color-surface-container);
}

.surface-container-text {
  color: var(--md-sys-color-surface-container);
}

.surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
}

.surface-container-low-text {
  color: var(--md-sys-color-surface-container-low);
}

.surface-container-lowest {
  background-color: var(--md-sys-color-surface-container-lowest);
}

.surface-container-lowest-text {
  color: var(--md-sys-color-surface-container-lowest);
}

.surface-dim {
  background-color: var(--md-sys-color-surface-dim);
}

.surface-dim-text {
  color: var(--md-sys-color-surface-dim);
}

.surface-bright {
  background-color: var(--md-sys-color-surface-bright);
}

.surface-bright-text {
  color: var(--md-sys-color-surface-bright);
}