html, body, .row, .columns { height: 100%; }
body { overflow: hidden; }

#sigma-container { }

.slider-box, .legend-box {
  position: absolute;
  height: 80%;
  margin-top: 2%;
}

.play-box {
  width: 3rem;
  height: 3rem;

  margin-bottom: 1rem;
}

.slider.vertical {
  height: 100%;
}

/* Parallel the space occupied by the play button */
.legend-top {
  width: 3rem;
  height: 3rem;

  margin-bottom: 1rem;
}

.legend {
  position: absolute;
}
.legend button { white-space: nowrap; }

.legend-one { top: 0%; }
.legend-onehalf { top: 6.6%; left: 1.5rem; }
.legend-two { top: 13.3%; }
.legend-twohalf { top: 20%; left: 1.5rem; }
.legend-three { top: 26.6%; }
.legend-threehalf { top: 33.3%; left: 1.5rem; }
.legend-four { top: 40%; }
.legend-fourhalf { top: 46.6%; left: 1.5rem; }
.legend-five { top: 53.3%; }
.legend-fivehalf { top: 60%; left: 1.5rem; }
.legend-six { top: 66.6%; }
.legend-sixhalf { top: 73.3%; left: 1.5rem; }
.legend-seven { top: 80%; }
.legend-sevenhalf { top: 86.7%; left: 1.5rem; }
.legend-eight { top: 93.3%; }

#loading-overlay {
  display: none;

  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;

  background-color: rgba(255, 255, 255, 0.8);
  font-size: 2em;
  font-weight: bold;
  text-align: center;

  margin-top: auto;
  margin-bottom: auto;

  z-index: 999;
}