body {
  margin: 0;
  background-color: #dddddd;
  font-family: "Oswald", sans-serif;
}

#info {
  position: absolute;
  width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30pt;
  border-width: 0 0 1px 0;
}

#settings-tab {
  font-size: 40pt;
  position: absolute;
  bottom: 3rem;
  right: 0;
  height: 8em;
  border-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#settings-tab * {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@media (hover: hover) {
  #settings-toggler:hover {
    background-color: #888;
  }
}
#settings-toggler:active {
  background-color: #666;
}

#settings-toggler {
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  height: 100%;
  cursor: pointer;
}

#settings-box {
  height: 100%;
  transition: width 0.5s linear, margin-left 0.5s linear, margin-right 0.5s linear;
  width: 0px;
  overflow-x: hidden;
}

#settings-box > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500pt;
  height: 100%;
}

#settings-box.open {
  width: 500pt;
  margin-left: 5px;
  margin-right: 5px;
}

#controls {
  position: absolute;
  height: 100%;
  left: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#controls #slider-container {
  width: 50px;
  height: 85%;
}

#slider {
  position: relative;
  height: 100%;
  --slider-wh: 50px;
  --range-thick: 45px;
  --bg-thick: 40px;
  --mini-thick: 8px;
  --mini-ratio: calc(8/15);
}

#controls #slider-container #slider .ui-widget-header {
  background-color: #44dd77;
}

.ui-container {
  color: #ddd;
  background-color: #282828ee;
  border-style: solid;
  border-color: #aaa;
}

#zscale-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#zscale {
  flex: 1 1 auto;
  position: relative;
  margin: 10px;
}

#zscale {
  --slider-wh: 50px;
  --range-thick: 45px;
  --bg-thick: 40px;
  --mini-thick: 8px;
  --mini-ratio: calc(8/15);
}

.selector-row {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
}
.selector-sign {
  padding-right: 10px;
  flex: 0 0 auto;
}

.radio-selector {
  display: none;
}
.radio-label {
  width: 0px;
  flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
}
.radio-label:hover {
  background-color: #888;
}
.radio-label:active {
  background-color: #666;
}
.radio-selector:checked + .radio-label {
  background-color: #00aa49;
}