/* Generic styling */
html {
     font-size: 10px; /* is 100% (16px | 1em) - which is default so unstated */
     
  }

:root {
    --background-color: #F4F4F4;
    --background-contrast-color: #FFFFFF;
    --background-search: #FFFFFF;
    --text-color: #1F242F;
    --link-color: #1F242F;
    --star-color: #F4F4F4;
    --background-contrast-table: #F4F4F4;

}

html[data-theme='light'] {
    --background-color: #F4F4F4;
    --background-contrast-color: #FFFFFF;
    --background-search: #FFFFFF;
    --text-color: #1F242F;
    --star-color: #F4F4F4;
    --background-contrast-table: #F4F4F4;
}

html[data-theme='dark'] {
    --background-color: #192745;
    --background-contrast-color: #1F3053;
    --background-search: #1F3053;
    --text-color: #FFFFFF;
    --link-color: #FFFFFF;
    --star-color: #334C83;
    --background-contrast-table: #263A65;

}
  
  /* Generic styling */
body {
    /* template overrides */
    font-size: 1rem;
    font-family: 'Open Sans';
    /* background: #192745 0% 0% no-repeat padding-box; */
    background: var(--background-color);
    color: var(--text-color);
    opacity: 1;
    margin: 0;
    background-image: url("/cpclogos/Group 144.png"); 
    background-size: cover;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
  }
  
.grid-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows:  5.3rem 4.6rem 0rem 1.0rem 5.3rem 59rem 1fr;
    grid-column-gap: 3.2rem;
    margin: 0 4 0 4;
    grid-template-areas:
      "h1 h1 h5 h5 h5 h9 h9 h9 h9 h9 h9 h9"
      "b2 b2 search0 search search search search search search search2 b3 b3"
      "b2 b2 bf bf bf bf bf bf bf bf b3 b3"
      "b2 b2 b b b b b b b b b3 b3"
      "b2 b2 excha excha excha excha excha excha excha excha b3 b3"
      "tleft tleft theader theader theader theader theader theader theader theader tright tright"
      "tbd tbd theader theader theader theader theader theader theader theader tbd2 tbd2";
  }

.grid-headerleftwrapper{
    grid-area: h1;
    display: grid;
    grid-template-areas:
    "hl1";
}

.grid-hl1 {
    grid-area: hl1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 5.3rem; 
    grid-column: 2 / 5;
    /*white-space: nowrap; */
    opacity: 1;
    color: var(--text-color);
    font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    letter-spacing: 0px;
}

.grid-headermiddlewrapper{
    grid-area: h5;
    display: grid;
    height: 3.4rem;
    grid-template-areas:
    "hm1 hm2 hm3 hm4"
}

.grid-hm1 {
    grid-area: hm1;
    height: 5.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    padding-top: 0.15rem;
}

.grid-hm2 {
    grid-area: hm2;
    height: 5.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    padding-top: 0.15rem;
}

.grid-hm3 {
    grid-area: hm3;
    height: 5.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    padding-top: 0.15rem;
}

.grid-hm4 {
    grid-area: hm4;
    height: 5.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    padding-top: 0.15rem;
}

.grid-headerrightwrapper{
    grid-area: h9;
    display: grid;
    height: 3.4rem;
    grid-template-columns: 0.7fr 1.45fr 0.7fr 1.45fr 0.7fr 1.15fr 0.25fr;
    grid-template-areas:
    "hr0 hr0b hr1 hr2 hr3 hr4 hr5"
}

.grid-hr0 {
    grid-area: hr0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font: normal normal normal 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
}

.grid-hr0b {
    grid-area: hr0b;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal bold 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-color);
    border-radius: 1.6rem;
    margin-top: 1.2rem;
    height: 3.4rem;
    opacity: 1;
    margin-bottom: 1.2rem;
    margin-left: 1.0rem;
}

.grid-hr1 {
    grid-area: hr1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font: normal normal normal 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
}

.grid-hr2 {
    grid-area: hr2;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal bold 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-color);
    border-radius: 1.6rem;
    margin-top: 1.2rem;
    height: 3.4rem;
    opacity: 1;
    margin-bottom: 1.2rem;
    margin-left: 1.0rem;
}

.grid-hr3 {
    grid-area: hr3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font: normal normal normal 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
}

.grid-hr4 {
    grid-area: hr4;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal bold 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-color);
    border-radius: 1.6rem;
    margin-top: 1.2rem;
    height: 3.4rem;
    opacity: 1;
    margin-bottom: 1.2rem;
    margin-left: 1.0rem;
}

.grid-hr5 {
    grid-area: hr5;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.grid-b {
    grid-area: b1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}


.grid-ad {
    grid-area: b2;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.grid-ad2 {
    grid-area: b3;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.grid-search {
    grid-area: search;
    background: var(--background-search);
    /* background-color: #f7cb2a; */
    grid-column: 4 / 10;
    border-radius: 1rem;
    margin-left: 6rem;
    margin-right: 6rem;
    padding: 1rem 1.6rem;
    text-decoration: none;
  }

  .grid-freetext {
    display  :flex;
    grid-area: free;
    background: var(--background-search);
    justify-content: center;
    border-radius: 1rem;
    padding-top: 1rem;
  }

.grid-search input[type=text] {
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    background: var(--background-search);
    letter-spacing: 0px;
    padding-left: 1.4rem;
    color: var(--text-color);
    border: 0;
    outline: none;
    text-decoration: none;
    opacity: 0.5;
  }

  .grid-blank {
    grid-area: b;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
 }

  .grid-exchanges {
    grid-area: excha;
    display: grid;
    background: var(--background-contrast-color);
    border-radius: 1.0rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "ex1 ex2 ex3"

}

 .grid-exchange1 {
   grid-area: ex1;
   display: flex;
   padding: 0.5rem 1rem;
 }

 /* .grid-exchange1::after {
    content: "";
    height: 100%;
    width: 2rem;
    margin-left: 2rem;
    background: red;
  } */

.grid-exchange2 {
   grid-area: ex2;
   display: flex;
   padding: 0.5rem 1rem;
   justify-content: center;
 }
/* 
 .grid-exchange2::after {
    content: "";
    height: 100%;
    width: 2rem;
    margin-left: 2rem;
    background: red;
  } */

.grid-exchange3 {
   grid-area: ex3;
   display: flex;
   padding: 0.5rem 1rem;
   justify-content: flex-end;
 }


 .exchange {
    display: grid;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial, Arial;
    letter-spacing: 0rem;
    grid-template-columns: 0.35fr 1fr 0.35fr 1fr 0.35fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "exlogo exname bitlogo bitprice ethlogo ethprice"
 }
 
 .exlogo {
    grid-area: exlogo;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
 }
 
 .exname {
    grid-area: exname;
    display: flex;
    justify-content: flex-start;
    align-items: center;
 
 }
 
 
 .bitlogo {
    grid-area: bitlogo;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 .bitprice {
    grid-area: bitprice;
    display: flex;
    font-weight: bold;
    justify-content: flex-start;
    align-items: center;
 }
 
 .ethlogo {
    grid-area: ethlogo;
    display: flex;
    /* margin-left: 1rem; */
    justify-content: center;
    align-items: center;
 }
 
 .ethprice {
    grid-area: ethprice;
    display: flex;
    font-weight: bold;
    justify-content: flex-start;
    align-items: center;
 }

.grid-table {
    grid-area: theader;
    background: var(--background-contrast-color);
    /* background-color: #f7cb2a; */
    grid-column: 3 / 11;
    margin-top: 1rem;
    /* margin-left: 6rem;
    margin-right: 6rem; */
    /* padding: 1rem 1.6rem; */
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
  }

.grid-table-left {
    grid-area: tleft;
    background: var(--background-contrast-color);
    /* background-color: #f7cb2a; */
    grid-column: 1 / 3;
    margin-top: 1rem;
    opacity: 0.9;
    /* margin-left: 6rem;
    margin-right: 6rem; */
    /* padding: 1rem 1.6rem; */
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
  }


.grid-table-right {
    grid-area: tright;
    background: var(--background-contrast-color);
    /* background-color: #f7cb2a; */
    grid-column: 11 / -1;
    margin-top: 1rem;
    opacity: 0.9;
    /* margin-left: 6rem;
    margin-right: 6rem; */
    /* padding: 1rem 1.6rem; */
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
  }

.grid-table-content-small {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    margin-left: 2rem;
    grid-template-areas:
      "spos ssymbol schange"
  }

  .grid-table-header-small {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    margin-left: 2rem;
    grid-template-areas:
      "smpos smsymbol smchange"
  }

.grid-smpos {
    grid-area: smpos;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-smsymbol{
    grid-area: smsymbol;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-smchange {
    grid-area: smchange;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.2rem/1.4rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}
 

.grid-title {
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    height: 3.4rem;
}

.grid-spos {
    grid-area: spos;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

.grid-ssymbol {
    grid-area: ssymbol;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
} 

.grid-schange {
    grid-area: schange;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
} 

.grid-table-content {
    display: grid;
    grid-template-columns: 0.9fr 0.31fr 0fr 0.1fr 0.6fr 0.6fr 0.7fr 0.8fr 0fr 0.9fr 0.9fr 0.5fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "hall hall hall hmcap hmcap hprice hvolume hchange hchange tbd tbd hcurr"
  }

.grid-allcurr {
    grid-area: hall;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}

.grid-mcap {
    grid-area: hmcap;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}

.grid-price {
    grid-area: hprice;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}

.grid-volume {
    grid-area: hvolume;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}

.grid-change {
    grid-area: hchange;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}

.grid-curr {
    grid-area: hcurr;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border-radius: 1.6rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    /*margin-left: 1.2rem;*/
    margin-right: 1.2rem;
    opacity: 1;
    height: 3.4rem;
}


.grid-table-body {
    display: grid;
    grid-template-columns: 0.4fr 2.0fr 1fr 1fr 1.2fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 1.2fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "bpos bname bprice bvolume bmcap b1h b24h b7d b30d b1y bweek"
  }

.grid-pos {
    grid-area: bpos;
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-name {
    grid-area: bname;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bprice {
    grid-area: bprice;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bvolume {
    grid-area: bvolume;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bmcap {
    grid-area: bmcap;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-1h {
    grid-area: b1h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-24h {
    grid-area: b24h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-7d {
    grid-area: b7d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-30d {
    grid-area: b30d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-1y {
    grid-area: b1y;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-lastweek {
    grid-area: bweek;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-table-body-content {
    display: grid;
    grid-template-columns: 0.3fr 0.2fr 2.0fr 1fr 1fr 1.2fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 1.2fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "bbpos bbfav bbname bbprice bbvolume bbmcap bb1h bb24h bb7d bb30d bb1y bbweek"
  }

.grid-bpos {
    grid-area: bbpos;
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bfav {
    grid-area: bbfav;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bname {
    grid-area: bbname;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bbprice {
    grid-area: bbprice;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bbvolume {
    grid-area: bbvolume;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-bbmcap {
    grid-area: bbmcap;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-b1h {
    grid-area: bb1h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-b24h {
    grid-area: bb24h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-b7d {
    grid-area: bb7d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-b30d {
    grid-area: bb30d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-b1y {
    grid-area: bb1y;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;


}

.grid-blastweek {
    grid-area: bbweek;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.divider {
    margin-right: 1.2rem;
    margin-left: 1.2rem;
    border-top: 1px solid  var(--background-contrast-table);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

h2 {
    font: normal normal bold 3.2rem/4.3rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    justify-content: center;
}


h1 {
    font:  normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    text-decoration: none !important;
    margin-block-start: 0em;
    margin-block-end: 0em
}

a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    opacity: 1;

}

p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

a:link {
    color: var(--text-color);
    display: inline-block;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    opacity: 1;
  }
  
  /* visited link */
a:visited {
color:var(--text-color);

border-bottom: 3px solid transparent;
opacity: 1;
}

/* mouse over link */
a:hover {
color: #FF9F2F;

border-bottom: 3px solid #FF9F2F;
opacity: 1;
}

/* selected link */
.active, a:active {
color: #FF9F2F;

font-weight: normal;
border-bottom: 3px solid #FF9F2F;
} 

.buttontbl {
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    letter-spacing: 0px;
    padding-right: 1px;
    text-decoration: none;
    border: 0;
    color: var(--text-color);
    outline: none;
    background: var(--background-contrast-table);
}
  
button {
    text-decoration: none;
    border: 0;
    color: var(--text-color);
    background: var(--background-color);
    outline: none;
}

a.links:hover {
    text-decoration:none;
    color: var(--text-color);
    display: inline-block;
    border-bottom: 0px solid transparent;
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

a.links {
    text-decoration:none;
    color: var(--text-color);
    display: inline-block;
    border-bottom: 0px solid transparent;
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

a.links:visited {
    text-decoration:none;
    color: var(--text-color);
    display: inline-block;
    border-bottom: 0px solid transparent;
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

  }
  
/* selected link */
a.links:active {
    text-decoration:none;
    color: var(--text-color);
    display: inline-block;
    border-bottom: 0px solid transparent;
    opacity: 1;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;

} 


[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

.d-none {
    display: none!important;
}
  

.arrow {
    font-size: 0.8rem;
    padding-top: 0.3rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: var(--text-color);
}

.arrowup {
    font-size: 0.8rem;

    justify-content: center;
    align-items: center;
    align-content: center;
    color:  #0FC441;
}

.arrowdown {
    font-size: 0.8rem;

    justify-content: center;
    align-items: center;
    align-content: center;
    color: #EB2020;
}

.grid-table-body-content-top {
    display: grid;
    grid-template-columns: 0.3fr 0.2fr 2.0fr 1fr 1fr 1.2fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 1.2fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "toppos topfav topname topprice topvolume topmcap top1h top24h top7d top30d top1y topweek"
  }

.grid-toppos {
    grid-area: toppos;
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-topfav {
    grid-area: topfav;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-topname {
    grid-area: topname;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-topprice {
    grid-area: topprice;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-topvolume {
    grid-area: topvolume;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-topmcap {
    grid-area: topmcap;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-top1h {
    grid-area: top1h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-top24h {
    grid-area: top24h;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-top7d {
    grid-area: top7d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-top30d {
    grid-area: top30d;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-top1y {
    grid-area: top1y;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

.grid-toplastweek {
    grid-area: topweek;
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);

    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    list-style-type: none;
}


.list li {
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--star-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

    content: ' \2605';
    cursor: pointer;
  }

  /* Not show color #FF9F2F on hover, stays hovered in orange after click event while removing from favorites 
  /* .list li:hover,
  .list li.fav:hover {
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

    content: ' \2605';
    color: #FF9F2F;
  } */

  .list li.fav {
    display: flex;
    justify-content: center;

    align-items: center;
    font: normal normal normal 1.4rem/1.6rem "Open Sans", Arial;
    letter-spacing: 0px;
    color: var(--text-color);
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;

    content: ' \2605';
    color: #FF9F2F;
  }


.ui-widget-content {
	width: 80%;
}
  


@media screen and (min-width:1024px){
    :root {
    font-size:7px;
}}

@media screen and (min-width:1200px){
    :root {
    font-size:9px;
}
}

@media screen and (min-width:1400px){
    :root {
    font-size:10px;
}
}

@media screen and (min-width: 1600px){
    :root {
           font-size:11px;
    }
}