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 {
  position: relative;
  height: 655px;
  width: 100%;
  margin: 30px auto 0;
}

.blockchain-wrapper {
  display: block;
  height: 100%;
  min-height: 240px;
  position: relative;
  top: 30px;

  .position-container {
    position: absolute;
    left: 0;
    bottom: 170px;
    transform: translateX(50vw);
  }

  #divider {
    width: 2px;
    height: 175px;
    left: 0;
    top: -40px;
    position: absolute;
    img {
      position: absolute;
      left: -100px;
      top: -28px;
    }
  }

  &.time-ltr {
    .blocks-wrapper {
      transform: scaleX(-1);
    }
  }
}

:host-context(.ltr-layout) {
  .blockchain-wrapper.time-ltr .blocks-wrapper,
  .blockchain-wrapper .blocks-wrapper {
    direction: ltr;
  }
}

:host-context(.rtl-layout) {
  .blockchain-wrapper.time-ltr .blocks-wrapper,
  .blockchain-wrapper .blocks-wrapper {
    direction: rtl;
  }
}

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