#design > .content > .viewer {
  width: 100%;
  height: 100%;
  background: black;
}
#design > .content > .viewer .footer-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
}
#design > .content > .viewer .footer-overlay .progress-bar {
  width: 300px;
  padding: 0.5rem;
  margin: 0.5rem;
}
#design > .content > .viewer .footer-overlay .progress-bar .ui.progress {
  margin: 5;
}
#design > .content > .viewer .footer-overlay .progress-bar .ui.progress .progress {
  display: none;
}
#design > .content > .viewer .footer-overlay .progress-bar .ui.progress.inverted {
  background: none;
}
#design > .content > .viewer .atlas {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
#design > .content > .viewer .atlas .popup {
  background: white;
  color: black;
  min-width: 200px;
}
#design > .content > .viewer .atlas .popup .body table {
  width: 100%;
}
#design > .content > .viewer .atlas .popup .body table td:first-child {
  padding-right: 5px;
}
#design > .content > .viewer .atlas .popup .body table td:last-child {
  text-align: right;
}
#design > .content > .viewer .atlas .popup .body .units {
  float: none;
}
#design > .content > .viewer .atlas embed {
  height: 100% !important;
  width: 100% !important;
}
#design > .content > .viewer .full-size.message {
  color: white;
  font-size: 1.5rem;
  margin-top: 30vh;
}
.legends.overlay > .title {
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 10px;
}
.legends.overlay .overlay.legend {
  top: auto !important;
  left: auto !important;
}