mempool/frontend/src/app/components/television/television.component.scss

.loading {
  margin: auto;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

#tv-wrapper {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.chart-holder {
  height: 650px;
  width: 100%;
  margin: 30px auto;
}

.blockchain-wrapper {
  display: flex;
  height: 100%;
  min-height: 240px;
  position: relative;
  top: -20px;
  @media(min-height: 800px) {
    top: 30px;
  }

  .position-container {
    position: absolute;
    left: 50%;
    bottom: 170px;
  }

  .chart-holder {
    height: calc(100% - 220px);
  }

  #divider {
    width: 3px;
    height: 175px;
    left: 0;
    top: -40px;
    background-image: url('/resources/divider-new.png');
    background-repeat: repeat-y;
    position: absolute;
    img {
      position: absolute;
      left: -100px;
      top: -28px;
    }
  }

  @media (min-width: 1920px) {
    .position-container {
      transform: scale(1.3);
      bottom: 210px;
    }
    .chart-holder {
      height: calc(100% - 280px);
    }
  }

}
:host ::ng-deep .ct-legend {
  top: 20px !important;
  display: flex;
  flex-direction: column-reverse;
  @media(min-height: 800px){
    padding-top: 40px !important;
  }
}

.tv-container {
  display: flex;
  margin-top: 0px;
  flex-direction: column;
}