/* 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.3rem 0.8rem 4.3rem 59rem 1fr;
    grid-column-gap: 3.2rem;
    margin: 0 4 0 4;
    grid-template-areas:
      "h9 h9 h9 h9 h9 h9 h9 h9 h9 h9 h9 h9"
      "search search search search search search search search search search search search"
      "b b b b b b b b b b b b"
      "excha excha excha excha excha excha excha excha excha excha excha excha"
      "theader theader theader theader theader theader theader theader theader theader theader theader"
      "theader theader theader theader theader theader theader theader theader theader theader theader";
  }

.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:
    "hr0b hr0b hr0b hr2 hr2 hr2 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.2rem/1.4rem "Open Sans", Arial, 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.2rem/1.4rem "Open Sans", Arial, 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;
    width:100%;
    height:104px;
        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-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;
    grid-template-areas:
    "ex1"

}

 .grid-exchange1 {
   grid-area: ex1;
   display: flex;
   padding: 0.5rem 1rem;
   font: normal normal bold 1.2rem/1.4rem "Open Sans", Arial, Arial;
 }

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

.grid-exchange2 {
   grid-area: ex2;
   display: flex;
   padding: 0.5rem 1rem;
   font: normal normal bold 1.2rem/1.4rem "Open Sans", Arial, Arial;
   /* 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 0.35fr 1fr 0.35fr 1fr;
   grid-template-rows: 1fr;
   width: 100%;
   grid-template-areas:
   "exlogo 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: 2rem;
    /* 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: 2rem;
    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: 2rem;
    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: 1fr 1fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "hall hmcap"
  }

.grid-allcurr {
    grid-area: hall;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 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;
    opacity: 1;
    height: 3.4rem;
}

.grid-mcap {
    grid-area: hmcap;
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 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-content {
    display: grid;
    grid-template-columns: 0.3fr 0.2fr 2.0fr 1fr 0.75fr 0.75fr 0.75fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "bbpos bbfav bbname bbprice bb1h bb24h bmcap"
  }

.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 {
    display: grid;
    grid-template-columns: 0.4fr 2.0fr 1fr 0.75fr 0.75fr 0.75fr;
    /* grid-column-gap: 2rem; */
    grid-auto-flow: column;
    grid-template-areas:
      "bpos bname bprice b1h b24h bmcap"
  }

.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 {
    width: 100%;
    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 0.75fr 0.75fr 0.75fr;
    grid-template-rows: 1fr;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "toppos topfav topname topprice top1h top24h topmcap"
  }

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