/* 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: 1fr;
   grid-template-rows:  5.6rem 5.3rem 231rem 15rem 28rem 86rem 80rem 70rem;
   grid-column-gap: 3.2rem;
   margin: 0 4 0 4;
   grid-template-areas:
     "h9"
     "excha"
     "theader"
     "theader2"
     "theader3"
     "theader4"
     "theader5"
     "theader6";
 }

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

.grid-hl1 {
   grid-area: hr1;
   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.25fr 1fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
   grid-template-areas:
   "hr1 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, 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.2rem/1.4rem "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-start;
    align-items: center;
    height: 5.3rem; 
    /*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-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: 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;
    width:100%;
    height:104px;
        justify-content: center;
        align-items: center;
    opacity: 1;
}

.grid-br2 {
	grid-area: br;
	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-explain {
	grid-area: explain;
	opacity: 0.9;
	background: var(--background-contrast-color);
	font-size: 1.2rem;
	border-radius: 1.0rem;
	margin-left: 1.0rem;
	margin-right: 1.0rem;
	margin-bottom: 1.0rem;
	padding: 1.0rem;
}

.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;
   /* 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;
   grid-template-rows: 40rem 51.4rem 40rem 47rem 44rem;
   grid-template-areas:
     "moon"
     "moon"
     "stats"
     "chart"
     "chart2"
     
 }

 .grid-table-realtime {
    grid-area: theader2;
    margin-top: 3.4rem;
    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: 3.4rem;
    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: 3.4rem;
    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: 100%;
    grid-template-rows: 4.4rem 5.6rem 65rem;
    grid-template-areas:
     "rtname2"
     "chartheader"
     "chartindex";
   
  }

  .grid-table-realtime4 {
    grid-area: theader5;
    margin-top: 3.4rem;
    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 65.6rem;
    grid-template-areas:
    "rtname2"
    "chartbubble";
   
  }

  .grid-table-realtime5 {
    grid-area: theader6;
    margin-top: 3.4rem;
    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 30rem;
    grid-template-areas:
     "rtname"
     "charttrades";
   
  }

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

.grid-chart-headertv {
    grid-area: tc21;
    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;
    display:flex;
}


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

  .grid-table-realtime-name2 {
    grid-area: rtname2;
    display: flex;
    padding-left: 1.2rem;
  }


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

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

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

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

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

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

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

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

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

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

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

.perc24a { grid-area: perc24a;
font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high24a { grid-area: high24a;
font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low24a { grid-area: low24a;
font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow24a { grid-area: hilow24a;
    font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol24a { grid-area: vol24a;
font: normal normal normal 1.4rem/2.0rem "Open Sans", Arial;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades24a { grid-area: trades24a;
font: normal normal normal 1.4rem/2.0rem "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 ts1 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;
}

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


.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;
	margin-top: 1.2rem;
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 4.4rem 4rem 1rem 0rem 4rem 2rem 14rem 8rem 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"
      "ml5b ml5b ml5b ml5b ml5b ml5b"
      "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: 1.2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.4rem 5.6rem 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;
    width: 100%;
} */

.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;
    width: 100%;
}


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

.grid-table-moon-ath2 {
   grid-area: ml5b;
   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: 1.1em;
    fill: lightskyblue;
  }
  
  .tick text {
    font-size: 1.1em;
    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;
   }
}