@import url(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;
    }
}

    
    @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;
    }
    
    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;
    }

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

    .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;
    }

    .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;
    }
    .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-color: blue;
        --md-list-item-label-text-weight: 600;
        /* --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;
    }

    
.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);
}