/* 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 5.3rem 2.0rem 7.0rem 131rem 13rem 26rem 60rem 56rem 105rem 25rem;
   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 excha excha excha excha excha excha excha excha b3 b3"
     "b2 b2 b b b b b b b b 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"
     "tbd tbd theader2 theader2 theader2 theader2 theader2 theader2 theader2 theader2 tbd2 tbd2"
     "tbd tbd theader3 theader3 theader3 theader3 theader3 theader3 theader3 theader3 tbd2 tbd2"
     "tbd tbd theader4 theader4 theader4 theader4 theader4 theader4 theader4 theader4 tbd2 tbd2"
     "tbd tbd theader5 theader5 theader5 theader5 theader5 theader5 theader5 theader5 tbd2 tbd2"
     "tbd tbd theader6 theader6 theader6 theader6 theader6 theader6 theader6 theader6 tbd2 tbd2"
	 "tbd tbd theader7 theader7 theader7 theader7 theader7 theader7	theader7 theader7 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, Arial;
   letter-spacing: 0rem;
}

.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, Arial;
   letter-spacing: 0rem;
   color: #FF9F2F; /*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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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, Arial;
   letter-spacing: 0rem;
   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: 0.8;
    background: var(--background-contrast-color);
    font-size: 1.4rem;
    border-radius: 1.0rem;
    margin: 1.0rem;
    padding: 1.0rem;
}

.grid-br2 {
	grid-area: br2;
	opacity: 0.8;
	background: var(--background-contrast-color);
	font-size: 1.4rem;
	border-radius: 1.0rem;
	margin: 1.0rem;
	    padding: 1.0rem;
}

.grid-bold {
	display: inline-block;
	font-weight: bold;
}

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

 /* .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;
   padding-left: 3.2rem;
   /* background-color: #f7cb2a; */
   grid-column: 3 / 11;
   margin-top: 2rem;
   /* margin-left: 6rem;
   margin-right: 6rem; */
   /* padding: 1rem 1.6rem; */

 }

 .grid-table-left {
   grid-area: tleft;
   background: var(--background-contrast-color);
   /* background-color: #f7cb2a; */
   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; */
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   color: var(--text-color);
   margin-top: 1.0rem;
   margin-bottom: 1.0rem;
} 

.grid-table-content {
   grid-area: theader;
   border-top-right-radius: 1rem;
   border-top-left-radius: 1rem;
   display: grid;
   grid-gap: 3.2rem;
   grid-template-columns: 1.5fr 1fr;
   grid-template-rows: 40rem 47rem 44rem;
   grid-template-areas:
     "stats moon"
     "chart moon"
     "chart2 chart2"
     
 }

 .grid-table-realtime {
    grid-area: theader2;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 3.4rem;
    grid-template-areas:
     "rtname"
     "tsl1"
     ;
  }

  .grid-table-realtime2 {
    grid-area: theader3;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 16rem;
    grid-template-areas:
     "rtname"
     "ohlc";
     }

  .grid-table-realtime3 {
    grid-area: theader4;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 5rem 50rem;
    grid-template-areas:
     "rtname"
     "chartheader"
     "chartindex";
   
  }

  .grid-table-realtime4 {
    grid-area: theader5;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 50rem;
    grid-template-areas:
    "rtname"
    "chartbubble";
   
  }

  .grid-table-realtime5 {
    grid-area: theader6;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 25rem 77rem;
    grid-template-areas:
     "rtname"
     "charttrades"
     "bidasktrades";
   
  }
  
.grid-table-realtime6 {
    grid-area: theader7;
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20rem;
    grid-template-areas:
     "explain-title"
     ;
  }
  
.explain_placeholder {
    grid-area: explain-title;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background: var(--background-contrast-table);
    border-radius: 1rem;
    display: grid;
    font: normal normal normal 2.0rem/2.8em "Open Sans", Arial, Arial;
    letter-spacing: 0rem;
    grid-template-columns: 1fr;
    grid-template-rows: 5rem 5rem 5rem 5rem;
    grid-template-areas:
     "rtitle"
     "row1"
     "row2"
     "row3"
     ;
}

  
.grid-explain-title {
    grid-area: rtitle;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-radius: 1rem;
    display:flex;
}

.grid-explain-row1 {
    grid-area: row1;
    align-items: center;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-radius: 1rem;
    display: flex;
}

.grid-explain-row2 {
    grid-area: row2;
    align-items: center;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-radius: 1rem;
    display: flex;
}

.grid-explain-row3 {
    grid-area: row3;
    align-items: center;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-radius: 1rem;
    display: flex;
}

.grid-chart-header {
    grid-area: chartheader;
    margin-bottom: 2rem;
    display:flex;
}

/* .grid-chart-index {
    grid-area: chart1;
    width:100%;
    height: 100%;
    display:flex;
}


.grid-chart-bubble {
    grid-area: chart2;
    display:flex;
}

.grid-chart-trades {
    grid-area: chart3;
    display:flex;
} */

.grid-trades {
    grid-area: bidasktrades;
}


  .grid-table-realtime-name {
    grid-area: rtname;
    display: flex;
  }


  .grid-ohlc {
    grid-area: ohlc;  
    display: grid;
    color:  var(--text-color);
    background: var(--background-contrast-table);
    border-radius: 1rem;
    padding-right: 1rem;
    opacity: 1;
    font-family: "Open Sans", Arial;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "htime hperc hhigh hlow hhilow hvol htrades"
    "min15 perc15 high15 low15 hilow15 vol15 trades15"
    "min1 perc1 high1 low1 hilow1 vol1 trades1"
    "min4 perc4 high4 low4 hilow4 vol4 trades4"
    "min12 perc12 high12 low12 hilow12 vol12 trades12"
    "min24a perc24a high24a low24a hilow24a vol24a trades24a";
  }

  .htime { grid-area: htime;
    justify-content: center; 
    color: #FFFFFF;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    margin: 0px;
}
.hperc { grid-area: hperc;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px;
}
.hhigh { grid-area: hhigh;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hlow { grid-area: hlow;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hhilow { grid-area: hhilow;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
 }
.hvol { grid-area: hvol;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.htrades { grid-area: htrades;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min15 { grid-area: min15;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc15 { grid-area: perc15;
   font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high15 { grid-area: high15;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low15 { grid-area: low15;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.vol15 { grid-area: vol15;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow15 { grid-area: hilow15;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.trades15 { grid-area: trades15;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min1 { grid-area: min1;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc1 { grid-area: perc1;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high1 { grid-area: high1;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low1 { grid-area: low1;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow1 { grid-area: hilow1;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol1 { grid-area: vol1;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades1 { grid-area: trades1;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min4 { grid-area: min4;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc4 { grid-area: perc4;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high4 { grid-area: high4;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low4 { grid-area: low4;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow4 { grid-area: hilow4;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol4 { grid-area: vol4;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades4 { grid-area: trades4;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min12 { grid-area: min12;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc12 { grid-area: perc12;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high12 { grid-area: high12;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low12 { grid-area: low12;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow12 { grid-area: hilow12;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol12 { grid-area: vol12;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades12 { grid-area: trades12;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min24a { grid-area: min24a;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc24a { grid-area: perc24a;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high24a { grid-area: high24a;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low24a { grid-area: low24a;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow24a { grid-area: hilow24a;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol24a { grid-area: vol24a;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades24a { grid-area: trades24a;
font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 5.4rem 3.4rem 1fr;
    grid-column-gap: 2rem;
    grid-template-areas:
      "Trades Order"
      "TLeft TRight"
      "TLeft2 TRight2";
  }
  

  
  .Trades { grid-area: Trades; 
          background: var(--background-contrast-table);
          border-top-left-radius: 1rem;
          border-top-right-radius: 1rem;
          margin-top: 2rem;
          opacity: 1;
          font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
          color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          }

   .Order { grid-area: Order; 
            background: var(--background-contrast-table);
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            margin-top: 2rem;
            opacity: 1;
            font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
            color: var(--text-color);
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas:
              "BidCurrent PlusMin AskCurrent";
            
            }

        .BidCurrent { grid-area: BidCurrent; 
            font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
            color:   #0FC441;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .AskCurrent { grid-area: AskCurrent; 
            font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
            color: #EB2020;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .grid-plusmin {
        grid-area: PlusMin;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        align-items: center;
        grid-template-areas:
        "Min Step Plus";
        }

        .Plus {grid-area: Plus; 
        display: flex;
        font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
        color: var(--text-color);
        justify-content: center;
        }

        .Step {grid-area: Step; 
        display: flex;
        font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
        color: var(--text-color);
        justify-content: center;
        }

        .Min {grid-area: Min; 
        display: flex;
        font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
        color: var(--text-color);
        justify-content: center;
}
            


   .grid-container-trades {
            grid-area: TLeft;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-areas:
              "TSub1 TSub2 TSub3 TSub4";
          }  

    .grid-container-trades2 {
            grid-area: TLeft2;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-column-gap: 2rem;
            grid-template-areas:
              "Time Volume Price Value";
          } 
          
    .grid-container-order {
            grid-area: TRight;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-areas:
              "TBidValue TBidAmount TBidPrice TAskPrice TAskAmount TAskValue";
          }  


     .grid-container-order2 {
            grid-area: TRight2;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-column-gap: 2rem;
            grid-template-areas:
              "BidValue BidAmount BidPrice AskPrice AskAmount AskValue";
          } 
  
  .TBidValue { grid-area: TBidValue; 
    background: var(--star-color) ;
    border-bottom-left-radius: 1rem;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          }
  
  .TBidAmount { grid-area: TBidAmount; 
    background: var(--star-color) ;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          }
  
  .TBidPrice { grid-area: TBidPrice; 
    background: var(--star-color) ;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color:   #0FC441;
          display: flex;
          align-items: center;
          justify-content: center;
          }

 
  .TAskValue { grid-area: TAskValue; 
    background: var(--star-color) ;
    border-bottom-right-radius: 1rem;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          }
  
  .TAskAmount { grid-area: TAskAmount; 
    background: var(--star-color) ;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
          display: flex;
          align-items: center;
          justify-content: center;
          }
  
  .TAskPrice { grid-area: TAskPrice; 
    background: var(--star-color) ;

    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
          color: #EB2020;
          display: flex;
          align-items: center;
          justify-content: center;
          }
  
  .TSub1 { grid-area: TSub1; 
    background: var(--star-color) ;
        border-bottom-left-radius: 1rem;
        font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
          }
  
  .TSub2 { grid-area: TSub2; 
    background: var(--star-color) ;
        font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
          }
  
  .TSub3 { grid-area: TSub3; 
    background: var(--star-color) ;
        font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
          }
  
  .TSub4 { grid-area: TSub4; 
    background: var(--star-color) ;
        border-bottom-right-radius: 1rem;
        font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
          }
  
  .BidValue {
      grid-area: BidValue;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: var(--text-color);
      display: flex;
      justify-content: center;}
  .BidAmount {
      grid-area: BidAmount;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: var(--text-color);
      display: flex;
      justify-content: center;}
  .BidPrice {
      grid-area: BidPrice;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: #0FC441;
      display: flex;
      justify-content: center;}
  .AskPrice {
      grid-area: AskPrice;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: #EB2020;
      display: flex;
      justify-content: center;}
  .AskAmount {
      grid-area: AskAmount;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: var(--text-color);
      display: flex;
      justify-content: center;}
  .AskValue {
      grid-area: AskValue;
      font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
      color: var(--text-color);
      display: flex;
      justify-content: center;}


  .Time { grid-area: Time;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
      display: flex;
      justify-content: center;
       }
  .Volume { grid-area: Volume;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
      display: flex;
      justify-content: center;
       }
  .Price { grid-area: Price;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
      display: flex;
      justify-content: center;
       }
  .Value { grid-area: Value; 
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
      display: flex;
      justify-content: center;
      }
  
 

 .grid-table-stats {
    grid-area: stats;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    display: grid;
    padding-left: 1.2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 4.4rem 15rem 9.3rem 9.3rem 10.7rem;
    /* grid-column-gap: 2rem; */
    grid-template-areas:
      "ts1 ts1 ts1 ts1 ts4 ts4"
      "tsl2 tsl2 tsl2 tsl2 tsl2 tsl2"
      "tsl3 tsl3 tsl3 tsl3 tsl3 tsl3"
      "tsl4 tsl4 tsl4 tsl4 tsl4 tsl4";
  }



  .grid-table-stats-name {
      grid-area: ts1;
      align-items: flex-end;
      display: flex;  
  }

  .grid-table-stats-rank {
      grid-area: ts4;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      margin-bottom: 0.3rem;
      padding-right: 1.2rem;
      font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
      color: var(--text-color);
      opacity: 0.5;
  }

  .grid-table-stats-pairs {
    grid-area: tsl1;
    margin-bottom: 0.5rem;
    display: flex;
}

.grid-table-stats-timef {
    grid-area: tsl2;
    margin-top: 1.3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "tsl21 tsl22 tsl23 tsl24 tsl25"
    "tsl31 tsl32 tsl33 tsl34 tsl35"
    "tsl41 tsl42 tsl43 tsl44 tsl45"
    "tsl51 tsl52 tsl53 tsl54 tsl55";
}

.grid-table-stats-market {
    grid-area: tsl3;
    margin-top: 1.3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "tsl311 tsl312 tsl313 tsl314 tsl315"
    "tsl321 tsl322 tsl323 tsl324 tsl325";
}

.grid-table-stats-hilo {
    grid-area: tsl4;
    margin-top: 1.3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "tsl411 tsl412 tsl413 tsl414 tsl415"
    "tsl421 tsl422 tsl423 tsl424 tsl425";
}

.grid-table-stats-1hh {
    grid-area: tsl21;
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-stats-24hh {
    grid-area: tsl22;
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-stats-7dh {
    grid-area: tsl23;
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-stats-30dh {
    grid-area: tsl24;
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-stats-1yh {
    grid-area: tsl25;
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-stats-1h {
    grid-area: tsl31;
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
}

.grid-table-stats-24h {
    grid-area: tsl32;
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
}

.grid-table-stats-7d {
    grid-area: tsl33;
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
}
.grid-table-stats-30d {
    grid-area: tsl34;
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
}
.grid-table-stats-1y {
    grid-area: tsl35;
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
}

.nnn1420o05 {
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.nnn1014o05 {
    display: flex;
    align-items: center;
    font: normal normal normal 1.0rem/1.4rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.nnb2433o1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnb2433o1fs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnn2433o05 {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal normal 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}


.nnn1622o1 {
    display: flex;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnn1622o05 {
    display: flex;
    align-items: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 0.5;
}

.nnb1622o1 {
    display: flex;
    align-items: center;
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnb1420o1 {
    display: flex;
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnn1420o1 {
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.nnb1822o1 {
    display: flex;
    align-items: center;
    color: var(--text-color);
    font: normal normal bold 1.6rem/2.2rem "Open Sans", Arial;
    opacity: 1;
}

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




.grid-table-stats-pairs-childs-first {
    display: flex;
   /* width: 6.2rem; */
    align-items: center;
    justify-content: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    margin-right:1rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: var(--text-color);
    background: #FF9F2F 0% 0% no-repeat padding-box;
    border-radius: 1.7rem;
    opacity: 1;
}

.grid-table-stats-pairs-childs-first a:hover {
    color: var(--star-color);
    }

.grid-table-stats-pairs-childs {
    display: flex;
    width: 6.2rem;
    align-items: center;
    justify-content: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    margin-right:1rem;
    color: var(--text-color);
    background: var(--background-contrast-table);
    border-radius: 1.7rem;
    opacity: 1;
}

.grid-table-moon {
    grid-area: moon;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 4.4rem 4rem 2rem 0rem 3.4rem 2rem 14rem 8rem 2rem 31rem 2rem 12rem;
    grid-template-areas:
      "m1 m2 m2 m2 m2 m6"
      "ml2 ml2 ml2 ml26 ml26 ml26"
      "ml3 ml3 ml3 ml3 ml3 ml3"
      "m1a m2a m2a m2a m2a m6a"
      "ml2a ml2a ml2a ml26a ml26a ml26a"
      "ml3a ml3a ml3a ml3a ml3a ml3a"
      "ml4 ml4 ml4 ml4 ml4 ml4"
      "ml5 ml5 ml5 ml5 ml5 ml5"
      "ml6 ml6 ml6 ml6 ml6 ml6"
      "ml7 ml7 ml7 ml7 ml7 ml7"
      "ml8 ml8 ml8 ml8 ml8 ml8"
      "ml9 ml9 ml9 ml9 ml9 ml9";
  }

.grid-table-chart {
    grid-area: chart;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    padding-top: 1rem;
    padding-left: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 3.2rem 37rem;
    grid-template-areas:
      "tc11"
      "tc21"
      "tc31";
  }

.grid-chart-tradingview-name {
    grid-area: tc11;
    padding-left:0rem;
    padding-right:1.2rem;
    display: flex;

}

.grid-table-chart2 {
    grid-area: chart2;
    background: var(--background-contrast-color);
    border-radius: 1rem;
    padding-top: 1rem;
    padding-left: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "tc11";
  }

.grid-table-chart-timef {
    grid-area: tc21;
    padding-left:0rem;
    padding-right:1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-table-chart-tv {
    grid-area: tc31;
    display: grid;
}

.timeframe {
    background: var(--background-contrast-table);
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    justify-content: center;
    opacity: 1;
}

.timeframefc {
    border-bottom-left-radius: 1.7rem;
    border-top-left-radius: 1.7rem;
    background: var(--background-contrast-table);
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    justify-content: center;
    opacity: 1;
}


.timeframelc {
    border-bottom-right-radius: 1.7rem;
    border-top-right-radius: 1.7rem;

    background: var(--background-contrast-table);
    display: flex;
    align-items: center;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    justify-content: center;
    opacity: 1;
}



.active-link
 {
    background: #FF9F2F; /* make this whatever you want */
    color: var(--text-color);
    }

.timeframefc a:active, .timeframefc a:hover {
    background: #FF9F2F; /* make this whatever you want */
    color: var(--text-color);
    }

    
.timeframefc:hover {
    background: #FF9F2F; /* make this whatever you want */
    color: var(--text-color);
    }

.timeframe:active, .timeframe:hover{
        background: #FF9F2F; /* make this whatever you want */
        color: var(--text-color);
        }

.timeframelc:active, .timeframelc:hover{
    background: #FF9F2F; /* make this whatever you want */
    color: var(--text-color);
    }



   /* a.ex1:hover, a.ex1:active {
        color: red;
      } */

.grid-table-chart-timefchart {
    display: grid;
    margin-top:2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


.grid-table-moon-logo
{
    grid-area: m1;
    display: flex;
    align-items: flex-end;
    opacity: 1;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.grid-table-moon-name
{
    grid-area: m2;
    display: flex;
    align-items: flex-end;
    font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

.grid-table-moon-logo-uni
{
    grid-area: m1;
    display: flex;
    align-items: flex-end;
    opacity: 1;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.grid-table-moon-name-uni
{
    grid-area: m2a;
    display: flex;
    align-items: flex-end;
    font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

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

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

.grid-table-moon-symbol
{
    display: flex;
    align-items: flex-end;
    margin-left: 0.3rem;
    margin-bottom: 0.23rem;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-moon-exchange
{
    grid-area: m6;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 1.2rem;
    /* margin-left: 0.3rem;
    margin-bottom: 0.23rem; */
    font: normal normal normal 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
    /* opacity: 0.5; */
}

.grid-table-moon-exchange-uni
{
    grid-area: m6a;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 1.2rem;
    /* margin-left: 0.3rem;
    margin-bottom: 0.23rem; */
    font: normal normal normal 1.4rem/1.8rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
    /* opacity: 0.5; */
}


.grid-table-moon-price
{
    grid-area: ml26;
    display: flex;
    margin-top: 1.3rem;
    align-items: flex-end;
    justify-content: flex-end;
    font: normal normal bold 3.4rem/4.0rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
}


.grid-table-moon-priceinbtc
{
    grid-area: ml2;
    display: flex;
    margin-top: 1.3rem;
    margin-bottom: 0.3rem;
    align-items: flex-end;
    justify-content: flex-start;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-moon-price-uni
{
    grid-area: ml26a;
    display: flex;
    margin-top: 1.3rem;
    align-items: flex-end;
    justify-content: flex-end;
    font: normal normal bold 3.4rem/4.0rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
}


.grid-table-moon-priceinbtc-uni
{
    grid-area: ml2a;
    display: flex;
    margin-top: 1.3rem;
    margin-bottom: 0.3rem;
    align-items: flex-end;
    justify-content: flex-start;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    letter-spacing: 0rem;
    color: var(--text-color);
    opacity: 0.5;
}

.grid-table-moon-cap {
    grid-area: ml4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "ml411 ml412"
      "ml421 ml422"
      "ml431 ml432"
      "ml441 ml442"
}


.grid-table-moon-ath {
   grid-area: ml5;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   grid-template-areas:
   "ml411 ml412"
   "ml421 ml422"
}

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

.grid-table-moon-calc {
    grid-area: ml7;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

}

.grid-moon-calc {
    height: 4.5rem;
    display: flex;
    margin-right: 1.2rem;
    background: var(--background-contrast-table);
    border-radius: 5px;
    opacity: 1;
}

.grid-moon-calc-dollar {
    display: flex;
    height: 100%;
    padding-left: 1.2rem;
    width: fit-content;
    padding-right: 1.2rem;
    background: var(--star-color) ;
    border-radius: 5px 0px 0px 5px;
    align-items: center;
    justify-content: center;
}

input[type=text] {
    display: flex;
    width:100%;
    text-align: right; 
    align-items: center;
    padding-left: 5rem;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border: 0;
  }


input[type=textconvert] {
    display: flex;
    width:100%;
    text-align: right; 
    align-items: center;
    font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
    background: var(--background-contrast-table);
    border: 0;
  }

textarea:focus, input:focus{
    outline: none;
}

.grid-moon-calc-right {
    display: flex;
    width: 100%;
    padding-right: 1.2rem;
    align-items: center;
    justify-content: flex-end;
}

.grid-moon-calc-days {
    display: flex;
    height: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    width: fit-content;
    background: var(--star-color) ;
    border-radius: 5px 0px 0px 5px;
    align-items: center;
    justify-content: center;
    font: normal normal normal 1.6rem/2.2rem "Open Sans", Arial;
    color: var(--text-color);
    opacity: 1;
}

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

.grid-table-moon-convert {
    grid-area: ml9;
    display: grid;
    grid-template-columns: 1fr 0.25fr 1fr;
    grid-template-rows: 1fr 1fr;
}

h2 {
   margin:0;
   padding:0;
   font: normal normal bold 2.4rem/3.3rem "Open Sans", Arial;
   letter-spacing: 0rem;
   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: 0.3rem solid transparent;
   opacity: 1;

}

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

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

border-bottom: 0.3rem solid transparent;
opacity: 1;
}

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

border-bottom: 0.3rem solid #FF9F2F;
opacity: 1;
}

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

font-weight: normal;
border-bottom: 0.3rem solid #FF9F2F;
} 

.buttontbl {
   font: normal normal bold 1.4rem/2.0rem "Open Sans", Arial;
   letter-spacing: 0rem;
   padding-right: 1rem;
   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: 0rem 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: 0rem 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: 0rem 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: 0rem 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;
}

.arrowbreak {
    font-size: 0.8rem;
 
    justify-content: center;
    align-items: center;
    align-content: center;
    color: #4974a5;
 }



.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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   margin-inline-end: 0rem;
   padding-inline-start: 0rem;
   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: 0rem;
   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: 0rem;
   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: 0rem;
   color: var(--text-color);
   margin-top: 1.0rem;
   margin-bottom: 1.0rem;

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

.axis-label {
    font-size: 11px;
    fill: lightskyblue;
  }
  
  .tick text {
    font-size: 11px;
    font-weight: normal;
    fill: lightgrey;
  }
  
  .tick line {
    fill: none;
    stroke: #787b86;
    stroke-opacity: 0.2;
    /*stroke-width: 1;*/
    shape-rendering: crispEdges;
  }

  .path {
    fill: none;
    stroke: #787b86;
  /*  stroke-opacity: 0.6; */
    /*stroke-width: 1;*/
  }


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