@font-face {
    font-family: 'Oswald-Light';
    src:  url('fonts/Oswald/static/Oswald-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
  }

@font-face {
    font-family: 'Oswald-Regular';
    src:  url('fonts/Oswald/static/Oswald-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  }
  
body {
    font-family: 'Oswald-Light', 'san-serif';
}
.flex-container {
    display: flex;
    flex-wrap: wrap;                    /*  allow items to wrap  */
    justify-content: center;    /*  vertical  */
    
  }

.flex-row {
display: flex;
flex-wrap: wrap;                    
/* justify-content: center;   */  /*  vertical  */

}

.flex-item {
    /*display: flex;
    flex-wrap: wrap;                    /*  allow items to wrap  */
    justify-content: center;     /*  vertical  */
    align-items: center;
    /* border-style: solid; */
    /* border-width: thin;*/
    overflow: hidden;
    }

#price-chart {
    background-color: rgb(255, 255, 255);
    height: 300px;
    width: 500px;
}
#information {
    background-color: rgb(255, 255, 255);
    height: 300px;
    width: 900px;
    overflow: auto;
  }
  #information-symbol{
      font-size: 30px;
      font-weight: bold;
  }
  #information-price{
      position: relative;
      text-align:right;
      font-size: 30px;
      font-weight: bold;
      right: 7px;
  }
  #information-currency{
      text-align:left;
      font-size: 10px;
      font-weight: bold;
      color: #bfbcbc;
      left: 5px;
      top: 8px;
  }
  #information-name{
      font-size: 19px;
      font-weight: normal;
      color: #707070;
  }
  #information-chg{
      text-align:right;
      font-size: 14px;
      font-weight: normal;
      color:#bfbcbc;
  }
  #information-sector{
      font-size: 15px;
      font-weight: normal;
      color: #9376b6;
  }
  #information-desc{
      overflow: hidden;
      font-size: 15px;
      font-weight: normal;
      color:#bfbcbc;
  }
  
  .information-uparrow{
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid #4dd947;
      position: absolute;
      left: 35px;
      top: 5px;
  }
  
  .information-downarrow{
      width: 0;
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid red;
      position: absolute;
      left: 35px;
      top: 5px;
  }
  
  .metric-text{
      font-size: 15px;
      font-weight: normal;
      color:#727272;
  }
  
  .ava-scorebox{
      background-color: #8044b5;
      position: absolute;
      top: 8px;
      right: 16px;
      width: 97px;
      height: 68px;
      border: 0px solid #8044b5;
      padding: 1px;
      margin: 0px;
  
  }
  
  .avascore{
      font-size: 30px;
      font-weight: normal;
      vertical-align:middle;
      text-align:center;
      color: #FFFFFF;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .avatext{
      float: center;
      font-size: 12px;
      font-weight: normal;
      color:#ffffff;
      align-items: center;
      justify-content: center;
  }

    
#ic-chart {
    /*background-color: lightgreen; */
    height: 250px;
    width: 500px;
}
#ic-linechart {
    /*background-color: lightgreen; */
    height: 50px;
    width: 500px;
}
#ic-table {
    /* background-color: rgb(21, 67, 219); */
    height: 300px;
    width: 900px;
    font-size: 20px;
    overflow: auto;
}
.tick{
    font-family: 'Oswald-Regular', 'san-serif';
}

#bs-chart {
    background-color: rgb(255, 255, 255);
    height: 200px;
    width: 500px;
}
#bs-table {
    background-color: rgb(255, 255, 255);
    height: 200px;
    width: 900px;
    font-size: 16px;
    overflow: auto;
}


#cs-chart {
    background-color: rgb(255, 255, 255);
    height: 200px;
    width: 500px;
}
#cs-table {
    background-color: rgb(255, 255, 255);
    height: 200px;
    width: 900px;
    /* overflow: auto; */
}

.listening-rect {
    fill: transparent;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 900px;
    font-size: 20px;
    
}

thead {
    font-size: 0.7em;
    letter-spacing: 0;
    font-weight: 900;
    white-space: nowrap;
    text-align: left;
    height: 50px;
}

thead th {
    position: sticky;
    top: 0;
    color: #f8f9fa;
    background: #9276b5;
    padding: 1em 0.2rem;
    text-align: center;
}

/* 
tbody tr:nth-child(odd) {
    background: #f0f0f3;
} */

/* tbody tr:hover {
    background: #d7ecec;
} */

tr {
    height: 50px;
}
td {
    padding: 0.8em 0.2rem;
    overflow: auto;
    font-size: 0.7em;  
}

.td-data {
    text-align: right;
    color: #727272;
}

.td-name {
    text-align: left;
    color: #444646;
}


.number {
    text-align: right;
    font-feature-settings: 'tnum' 1;
}
.date {
    text-align: right;
    font-feature-settings: 'tnum' 1;
}

tbody .marker {
    font-size: 0.7em;
}

tbody .symbol {
    opacity: 0.6;
}

.centered {
    text-align: center;
}

tbody .text {
    font-size: 0.9em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* linechart */
.line {
    fill: none;
    stroke: #8044b5;
    stroke-width: 2;
}

#highlight-box {
    fill: #0a070c;
    opacity: 0.3;
}

.grid line {
    stroke: lightgrey;
    stroke-opacity: 0.5;
    shape-rendering: crispEdges;
  }

.grid path {
    stroke-width: 0;
    }


.td-data span {
    display: none;
    /* color: #000; */
    text-decoration: none;
    padding: 3px;
}

.td-data:hover span {
    display: block;
    position: absolute;
    transform: translate(70%,-170%);
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}

.modeBtn {
    background-color: rgb(108, 90, 214);
}

#loader {
    position: absolute;
    top: 45%;
    left: 45%;
    margin-right: -50%;

    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #8044b5;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }