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: calc(100vh - 270px);
  min-height: 525px;
  padding-left: 20px;
  width: 97%;
  padding-top: 20px;
  @media(min-width: 992px){
    padding-top: 10px;
  }
  @media(min-height: 800px){
    padding-top: 60px !important;
  }
}

.blockchain-wrapper {

  .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;
  @media(min-height: 800px){
    padding-top: 40px !important;
  }
}

.tv-only {
  display: block;    
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  text-align: center;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  @media(min-width: 768px) {
    display: none;
  }
  @media(max-height: 720px) {
    display: flex;
  }
}
.tv-container {
  display: none;
  @media(min-width: 768px) {
    display: flex;
  }
  @media(max-height: 720px) {
    display: none;
  }
}