/* unvisited link */
.chart {
    font: 11px Trebuchet MS,roboto, ubuntu;
    background-color:#171b26ff;
    text-align: left;
    padding: 0px;
    width: 100%;
    margin: 0px;
    color:transparent;
    stroke-opacity: 0.6;
  }

  .chart2 {
    font: 11px Trebuchet MS,roboto, ubuntu;
    background-color: #171b26ff;
    text-align: left;
    width: 100%;
    padding: 0px;
    margin: 0px;
    color:black;

  }
  
  svg circle {
    
    stroke-width: 1.5;
  
  }


 /* svg{
    display: block;
    margin: auto;
}*/

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

tr {
    cursor: pointer;
}


 a:link {
    color: lightgrey;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color:white !important ;
  }
  
  /* mouse over link */
  a:hover {
    color: white;
  }
  
  /* selected link */
  a:active {
    color: white;
  } 
  button {
    /*height: 60px; */
    background-color: #fff;
 /*   border-radius: 1px; */
     border: 0px solid #c4c4c4; 
    background-color: transparent;
 /*   font-size: 1.0em; */
    color: #337cac;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
  /*  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15); */
   /* text-shadow: 0 1px rgba(255,255,255,.4); */
  }

  button:hover {
    background-color: #eaeaea;
  }
  
  .bg-black {
        background-color: black;
    }

    .text-realywhite {
        font-weight: bold;
        font-family: sans-serif;
        font-size: 0.9em;
        color: #fff;
    }

    .text-realywhite a {
        font-weight: bold;
        font-family: sans-serif;
        font-size: 0.9em;
        color: #fff;
    }

    .table-top200 {
        border: 1px solid #95999c;
        font-size: 0.7em;
        font-family: sans-serif;
    /*    background-color: #171b26ff !important; */
        margin-bottom: 0rem !important;
    }

    h1 {
        font-weight: bold;
  font-family: sans-serif;
  font-size: 12px;
  color: lightgrey !important;
  text-decoration: none !important;
      margin-block-start: 0em;
    margin-block-end: 0em
  }

    .table {
        margin-bottom: 0rem !important;
        table-layout: fixed;

    }
    
    table.fixed {table-layout:fixed; width:100%;}/*Setting the table width is important!*/
    table.fixed td {overflow:hidden;padding: 0 0 0 0;border-color: #303030;}/*Hide text outside the cell.*/
    table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
    table.fixed td:nth-of-type(2) {width:35px;}/*Setting the width of column 2.*/
    table.fixed td:nth-of-type(3) {width:160px;}/*Setting the width of column 3.*/
    table.fixed td:nth-of-type(4) {width:90px;}/*Setting the width of column 4.*/
    table.fixed td:nth-of-type(10) {width:110px;}/*Setting the width of column 10.*/
    table.fixed th {overflow:hidden;padding: 0 0 0 0;} /*Hide text outside the cell.*/
    table.fixed th:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
    table.fixed th:nth-of-type(2) {width:35px;}/*Setting the width of column 2.*/
    table.fixed th:nth-of-type(3) {width:160px;}/*Setting the width of column 3.*/
    table.fixed th:nth-of-type(4) {width:90px;}/*Setting the width of column 4.*/
    table.fixed th:nth-of-type(10) {width:110px;}/*Setting the width of column 10.*/

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

    .text-center {
        text-align: center;
    }
 
    .table th {
        background-color:black ;
        color: #fff;
    }

    .table td {
        background-color: black ;
        color: #fff;
    }

    tbody {
        background: black ;
    }
    body {
        background-color: black ;
        font-family: sans-serif;
        color: white;
    }

    span.b {
        display: inline-block;
    }

    span.bidask {
        font-size: 0.7em;
        font-family: sans-serif;
        color: #FFFFFF;
        
    }

    span.bidask2 {
        font-size: 0.7em;
        font-family: sans-serif;
        
    }
    span.bidask3 {
        font-size: 0.7em;
        font-family: sans-serif;
        
    }

    .rowgreen{
        color: #29CB1C;
        font-family: sans-serif;
    animation: bggreentoblack 3s, textcolorwhitetogreen 3s;
    }

    .rowgreengrey{
        color:lightgrey;
        font-family: sans-serif;
    animation: bggreentoblack 3s, textcolorwhitetogrey 3s;
    }

    .rowred {
        color:#FF0000;
        font-family: sans-serif;
    animation: bgredtoblack 3s, textcolorwhitetored 3s;      
    }

    .rowredgrey {
        color:lightgrey;
        font-family: sans-serif;
    animation: bgredtoblack 3s, textcolorwhitetogrey 3s;      
    }

    @keyframes bggreentoblack {
  from {background-color: green;}
  to {background-color:black; }
}

@keyframes textcolorwhitetogreen {
  from {color: #FFFFFF;}
  to {color: #29CB1C;}
}

@keyframes textcolorwhitetogrey {
  from {color: #FFFFFF;}
  to {color: lightgrey;}
}

@keyframes bgredtoblack {
  from {background-color: #FF0000;}
  to {background-color: black;}
}

@keyframes textcolorwhitetored {
  from {color: #FFFFFF;}
  to {color: #FF0000;}
}

.grid-main {
    grid-template-columns: 1fr; 
}

.grid-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #dfdfdf;
    grid-template-areas:
    "HeaderLeft HeaderRight"
    "HeaderLeft2 HeaderRight2";
}

.HeaderLeft{ grid-area: HeaderLeft; 
  font-weight: bold;
  font-family: sans-serif;
  font-size: 12px;
  color: lightgrey !important;
  text-decoration: none !important;
  }

  .HeaderLeft2{ grid-area: HeaderLeft2; 
    font-weight: bold;
    font-family: sans-serif;
    font-size: 12px;
    color: lightgrey !important;
    text-decoration: none !important;
    }

.HeaderLeft a:visited {
    color:white;
  }

.HeaderLeft a:hover {
  color:#FFFFFF;
}
  
.HeaderRight { 
    grid-area: HeaderRight; 
    font-size: 12px;
    color: lightgrey !important;
    text-decoration: none !important;
    display: grid;
    grid-template-columns:0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr;
    grid-template-rows: 1.0fr;
    gap: 0px 0px;
    align-items: center;
    grid-template-areas:
      "binancelogo binanceBTCRTC binanceETHRTC huobilogo huobiBTCRTC huobiETHRTC bitstamplogo bitstampBTCRTC bitstampETHRTC";
    }
    .content { display:none }
    .binancelogo {
        grid-area: binancelogo;
        display: flex;
        justify-content: center;
        font-weight: bold;
        align-self: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .huobilogo {
        grid-area: huobilogo;
        display: flex;    
        justify-content: center;
        font-weight: bold;
        align-self: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .bitstamplogo {
        grid-area: bitstamplogo;
        display: flex;
        justify-content: center;
        font-weight: bold;
        align-self: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
    
      .binanceBTCRTC {
        grid-area: binanceBTCRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .huobiBTCRTC {
        grid-area: huobiBTCRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .bitstampBTCRTC {
        grid-area: bitstampBTCRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
    
      .binanceETHRTC {
        grid-area: binanceETHRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .huobiETHRTC {
        grid-area: huobiETHRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
      .bitstampETHRTC {
        grid-area: bitstampETHRTC;
        display: flex;
        justify-content: center;
        align-self: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        color: #fff;
      }
    
    
/* .HeaderRight { 
  grid-area: HeaderRight; 
  background-color:black;
  display: flex;
  font-family: sans-serif;
  font-size: 0.7em;
  color: white;
  text-align: center;
  justify-content: center;
  } */


  .HeaderRight2 { 
    grid-area: HeaderRight2; 
    background-color:black;
    display: flex;
    font-family: sans-serif;
    font-size: 0.7em;
    color: white;
    text-align: center;
    justify-content: center;
    }

  .Updatetext { 
    background-color:black;
    display: flex;
    font-family: sans-serif;
    font-size: 0.8em;
    color: white;
    text-align: center;
    justify-content: center;
    }

    .Updatetext  p {
        font-family: sans-serif;
        font-weight: bold;
        color:lightgrey;
        display: inline-block; 
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 4px;
      }
    
      .Updatetext  p:hover 
      {
        color: yellow;
      }

.HeaderRight p {
    font-family: sans-serif;
    font-weight: bold;
    color:lightgrey;
    display: inline-block; 
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 4px;
  }

  .HeaderRight p:hover 
  {
    color: yellow;
  }

.grid-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
    border-bottom: 1px solid #dfdfdf;
    grid-template-areas:
    "Left Right";
}

.grid-maincontent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
    grid-template-areas:
    "Left Right";
}



.grid-market {
  display: grid;
  grid-template-columns: 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr;
  grid-template-rows: 1fr 1fr 1fr 0.5fr 0.5fr;
  gap: 0px 0px;
  grid-template-areas:
    "ohlc ohlc ohlc ohlc BitPrice BitPrice BitPrice T1 T1 T2 T2"
    "ohlc ohlc ohlc ohlc BitPrice BitPrice BitPrice Explain Explain Explain Explain"
    "ohlc ohlc ohlc ohlc Exchange Exchange Exchange Explain Explain Explain Explain"
    "ohlc ohlc ohlc ohlc Mcap Supply Supply Explain Explain Explain Explain"
    "CoinGecko TBD ath ath Pairs Pairs Pairs Low24 BidCurrent PlusMin AskCurrent";    
}


.grid-ohlc {
    grid-area: ohlc; 
    display: grid;
    color: lightgrey;
    /* border: 1px solid #95999c; */
    /*justify-content: center; */
    font-family: sans-serif;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    /* padding: 8px;
    margin-top: 4px;
    margin-right: 80px;
    margin-bottom: 4px; */
    gap: 0px 0px;
    /*align-self: flex-end; */
    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";
  }


.grid-explain {
    display: flex;
    grid-area: Explain; 
    color: lightgrey;
  /*  border: 1px solid #95999c; */
    font-family: sans-serif;
    grid-column: 8 / -1;
    grid-row: 2 / 5;
    font-size: 0.8em;
    justify-content: center;
    /*margin-top: 4px; */
    /*margin-right: 80px; */
    margin-top: -4px;

}



.CoinGecko {
    color: #FFFFFF;
    font-size: 0.7em;
    font-weight: bold;
    align-self: flex-end;
    grid-column: 1;
    grid-row: 5;
    margin: 0px;
}

.htime { grid-area: htime;
    justify-content: center; 
    color: #FFFFFF;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    margin: 0px;
    align-self: flex-end;
}
.hperc { grid-area: hperc;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px;
}
.hhigh { grid-area: hhigh;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hlow { grid-area: hlow;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hhilow { grid-area: hhilow;
    font-size: 0.7em;
    font-weight: bold;
    align-self: center;
    margin: 0px; 
 }
.hvol { grid-area: hvol;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.htrades { grid-area: htrades;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min15 { grid-area: min15;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc15 { grid-area: perc15;
   font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high15 { grid-area: high15;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low15 { grid-area: low15;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.vol15 { grid-area: vol15;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow15 { grid-area: hilow15;
    font-size: 0.8em;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.trades15 { grid-area: trades15;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min1 { grid-area: min1;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc1 { grid-area: perc1;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high1 { grid-area: high1;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low1 { grid-area: low1;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow1 { grid-area: hilow1;
    font-size: 0.8em;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol1 { grid-area: vol1;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades1 { grid-area: trades1;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min4 { grid-area: min4;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc4 { grid-area: perc4;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high4 { grid-area: high4;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low4 { grid-area: low4;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow4 { grid-area: hilow4;
    font-size: 0.8em;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol4 { grid-area: vol4;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades4 { grid-area: trades4;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min12 { grid-area: min12;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc12 { grid-area: perc12;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high12 { grid-area: high12;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low12 { grid-area: low12;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow12 { grid-area: hilow12;
    font-size: 0.8em;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol12 { grid-area: vol12;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades12 { grid-area: trades12;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.min24a { grid-area: min24a;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.perc24a { grid-area: perc24a;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.high24a { grid-area: high24a;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.low24a { grid-area: low24a;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.hilow24a { grid-area: hilow24a;
    font-size: 0.8em;
    display: flex;
    justify-content: center; 
        margin: 0px; 
    }
.vol24a { grid-area: vol24a;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}
.trades24a { grid-area: trades24a;
font-size: 0.8em;
    display: flex;
    justify-content: center; 
    margin: 0px; 
}

.BitPrice { grid-area: BitPrice; 
    font-size: 3.7em;
    justify-content: center;
   /* line-height: 35px; */
    font-weight: bold;
    color: lightgrey;
    grid-column: 5 / 8;
    grid-row: 1 / -1;
    display: flex;
    /*justify-content: center */;
    }

.T1 { grid-area: T1; 
        font-size: 1.6em;
       /* line-height: 35px; */
        font-weight: bold;
        color: lightgrey !important;
        grid-column: 8 / 10;
        grid-row: 1 / 2;
        display: flex;
        justify-content: center;
        align-self: flex-start;
    }

.T2 { grid-area: T2; 
      font-size: 1.6em;
     /* line-height: 35px; */
      font-weight: bold;
      color: lightgrey !important;
      grid-column: 10 / -1;
      grid-row: 1 / 2;
      display: flex;
      justify-content: center;
      align-self: flex-start;
  }


 .Exchange { 
    grid-area: Exchange; 
    font-size: 0.8em;
    font-family: sans-serif;
    font-weight: bold; 
    grid-column: 5 / 8;
    grid-row: 3;
    display: flex;
    color: lightgrey;
    justify-content: center;
    }

.Mcap { grid-area: Mcap; 
        display: flex;
        justify-content: center;
            font-size: 0.8em;
            grid-column: 4 / 6;
        font-weight: bold; 
        color: lightgrey;
            } 

.Supply { grid-area: Supply; 
                display: flex;
                grid-column: 6 / 9;
                justify-content: center;
                font-size: 0.8em;
                font-weight: normal; 
                color: lightgrey;
                    } 


.ath { grid-area: ath; 
        display: flex;
        justify-content: center;
            font-size: 0.8em;
            align-self: flex-end;
            font-family: sans-serif;
            grid-column: 3 / 5;
            grid-row: 5;
            /* grid-template-columns: repeat(8, 1fr); */
            color: lightgrey;
            } 

.Pairs { grid-area: Pairs; 
    display: flex;
    justify-content: center;
        font-size: 0.8em;
        align-self: flex-end;
        font-family: sans-serif;
        grid-column: 4 / 9;
        grid-row: 5;
        /* grid-template-columns: repeat(8, 1fr); */
        color: lightgrey;
        } 

.P1 {
    display: flex;
    justify-content: space-evenly;
}

.BidCurrent { grid-area: BidCurrent; 
        font-size: 0.9em;
        /* font-weight: bold; */
        font-family: sans-serif;
        grid-row: 5;
        grid-column: 9 / 10;
        font-weight: bold;
        color: #29CB1C;
        display: flex;
        justify-content: flex-end;
        align-self: flex-end;
        }

.AskCurrent { grid-area: AskCurrent; 
        font-size: 0.9em;
        /* font-weight: bold; */
        font-family: sans-serif;
        grid-row: 5;
        grid-column: 11 / -1;
        font-weight: bold;
        color: #FF0000;
        display: flex;
        justify-content: flex-start;
        align-self: flex-end;
        }

.High24 { grid-area: High24; 
    font-size: 0.8em;
    font-family: sans-serif;
    font-weight: bold;
    display: flex;
    grid-row: 4;
    grid-column: 7 / 8;
    color: lightgrey;
    font-weight: bold;
    justify-content: flex-start;
    align-self: flex-end;
    }

.grid-plusmin {
        grid-area: PlusMin;
        display: grid;
        grid-row: 5;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 0.25fr;
        grid-column: 10 / 11;
        gap: 0px 0px;
        align-self: flex-end;
        grid-template-areas:
          "Min Step Plus";
      }

 .Plus {grid-area: Plus; 
    display: flex;
    font-size: 0.9em; 
    font-weight: bold;
    font-family: sans-serif;;
    color: lightgrey;
    justify-content: flex-start;
    align-self: flex-end;
      }

.Step {grid-area: Step; 
    display: flex;
    font-size: 0.8em; 
    font-weight: bold;
    font-family: sans-serif;;
    color: lightgrey;
    justify-content: center;
    align-self: flex-end; 
    }

.Min {grid-area: Min; 
    display: flex;
    font-size: 0.9em; 
    font-weight: bold;
    font-family: sans-serif;;
    color: lightgrey;
    justify-content: flex-end;
    align-self: flex-end;
    }

.Low24 { grid-area: Low24; 
    font-size: 0.8em;
    font-family: sans-serif;;
    font-weight: bold;
    grid-row: 4;
    grid-column: 8 / 9;
    display: flex;
    color: lightgrey;
    font-weight: bold;
    justify-content: flex-start;
    align-self: flex-end;
    }
.Vol24 { grid-area: Vol24 ; 
    grid-row: 4;
    font-size: 0.9em;
    color: lightgrey;
    }



.grid-container {
  display: grid;
  grid-template-columns: 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr 0.75fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Title Title Title Title Order Order Order Order Order Order"
    "TSub1 TSub2 TSub3 TSub4 TBidValue TBidAmount TBidPrice TAskPrice TAskAmount TAskValue"
    "Time Volume Price Value BidValue BidAmount BidPrice AskPrice AskAmount AskValue";
}

.Order { grid-area: Order; 
        border-right: 1px solid #95999c;
        border-top: 1px solid #95999c;
        border-bottom: 1px solid #95999c;
        padding-top:2px;
        font-size: 0.7em;
        grid-column: 5 / -1;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.Title { grid-area: Title; 
        /* border: 1px solid #95999c; */
        border-right: 1px solid #95999c;
        border-top: 1px solid #95999c;
        border-bottom: 1px solid #95999c;
        padding-top:2px;
        font-size: 0.7em;
        color: #FFFFFF;
        grid-column: 1 / 5;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TBidValue { grid-area: TBidValue; 
        border-bottom: 1px solid #95999c;
        /* border-left: 1px solid #95999c; */
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TBidAmount { grid-area: TBidAmount; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TBidPrice { grid-area: TBidPrice; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #29CB1C;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TAskValue { grid-area: TAskValue; 
        border-bottom: 1px solid #95999c;
        border-right: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TAskAmount { grid-area: TAskAmount; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TAskPrice { grid-area: TAskPrice; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #FF0000;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TSub1 { grid-area: TSub1; 
        border-bottom: 1px solid #95999c;
        /* border-left: 1px solid #95999c; */
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TSub2 { grid-area: TSub2; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TSub3 { grid-area: TSub3; 
        border-bottom: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.TSub4 { grid-area: TSub4; 
        border-bottom: 1px solid #95999c;
        border-right: 1px solid #95999c;
        font-size: 0.7em;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        }

.BidValue {
    grid-area: BidValue;
    font-size: 0.7em;
    color: lightgrey;
    display: flex;
    justify-content: center;}
.BidAmount {
    grid-area: BidAmount;
    font-size: 0.7em;
    color: #FFFFFF;
    display: flex;
    justify-content: center;}
.BidPrice {
    grid-area: BidPrice;
    font-size: 0.7em;
    color: #29CB1C;
    display: flex;
    justify-content: center;}
.AskPrice {
    grid-area: AskPrice;
    font-size: 0.7em;
    color: #FF0000;
    display: flex;
    justify-content: center;}
.AskAmount {
    grid-area: AskAmount;
    font-size: 0.7em;
    color: #FFFFFF;
    display: flex;
    justify-content: center;}
.AskValue {
    grid-area: AskValue;
    font-size: 0.7em;
    color: lightgrey;
    display: flex;
    justify-content: center;}
.Time { grid-area: Time;
    font-size: 0.7em;
    display: flex;
    justify-content: center; }
.Volume { grid-area: Volume;
    font-size: 0.7em;
    display: flex;
    justify-content: center; }
.Price { grid-area: Price;
    font-size: 0.7em;
    display: flex;
    justify-content: center; }
.Value { grid-area: Value;
    font-size: 0.7em;
    display: flex;
    justify-content: center; }


    .search {
        background-color: transparent;
        display: flex;
        justify-content: flex-start;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: white !important;
        text-decoration: none !important;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ddd;
      }
    
      .table .filtered {
        display: none;
    }