@import url(theme.css);

    /* this fixes weird padding issues where the screen will scroll a bit over the edge */
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    :root {
    
      /* 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;
    
      background-color: var(--md-sys-color-background);
      color: var(--md-sys-color-on-background);
    
      /* 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);
    
    }

    body{
    margin:0;
    }
    
    @media (prefers-color-scheme: dark) {
    
      :root {
        /* --mdc-theme-primary:  */
      }
    
    }

body {
  margin: 0;
}


  
@media (width < 600px) {
    :is(.medium, .expanded):not(.compact) {
        display: none;
    }

    .gte-medium {
        display: none;
    }

     .flexr {
                    /* for flex responsive */
                    flex-direction: column;
               }
}

@media (width >=600px) {
    .gte-medium {
        display: block;
    }
}

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

    .flexr {
                    /* for flex responsive */
                    flex-direction: row;
    }
}

a {
  text-decoration: none;
  color: var(--md-sys-color-primary);
}
a:hover {
  text-decoration: underline;
}

/* a {
  color: var(--md-sys-color-on-background);
  text-decoration: none;
} */
/* 
a:hover,
a:active,
a:visited {
  color: var(--md-sys-color-on-background);
} */

/* 
.main-width {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 12px 12px 12px;
} */
img.logo {
  width: 400px;
}

h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 700;
  font-size: 200%;
}

.fw {
  width: 100%;
}
.w100 {
  width: 100%;
}

.success {
  color: green;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 8px;
}

.text-muted {
  filter: brightness(70%);
}

li {
  margin: 5px;
}

.center-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

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

.col {
  flex-direction: column;
}
  .ac {
      align-items: center;
  }
  .aic {
      align-items: center;
  }
  .jc {
      justify-content: center;
  }
  .jcsb {
      justify-content: space-between;
  }
  .jcse {
      justify-content: space-evenly;
  }


  .grid {
      display: grid;
  }

  .g4 {
      gap: 4px;
  }
  .g8 {
      gap: 8px;
  }
  .g12 {
      gap: 12px;
  }
  .g16 {
      gap: 16px;
  }
  .g20 {
      gap: 20px;
  }
  .g24 {
    gap: 24px;
}

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

.p12 {
  padding: 12px;
}
.p16 {
  padding: 16px;
}
.p20 {
  padding: 20px;
}
.br8 {
  border-radius: 8px;
}

.no-decoration {
  text-decoration: none;
}

/* from: https://github.com/material-components/material-web/blob/main/docs/components/icon.md */
md-icon[filled] {
  --md-icon-font-variation-settings: 'FILL' 1;
  }
  .card1 {
       background-color: var(--md-sys-color-surface); 
       border: 1px solid rgb(208, 215, 222);
       border-radius: 8px;
       padding: 10px;
  }
  .startIcon{
       padding-left: 5px;
  }