.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  width: 240px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.control-group {
  display: block;
  width: 100%;
  padding: 20px;
  color: #000000;
  font-size: 16px;
}

.control-group:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Perf Controls */
#start-experiment {
  display: block;
  width: 100%;
}

#pause-experiment {
  display: none;
  width: 100%;
}

#fps-counter {
  width: 100%;
}

#experiment-results {
  width: 100%;
}

/* Animation Mode */
#mode select {
  width: 100%;
}

/* Toolbar */
#toolbar {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#toolbar label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#toolbar input {
  width: 60px;
  margin-left: 5px;
}

#toolbar .animationTimelinePercent {
  display: none;
}

.animation-paused #toolbar .animationTimelinePercent {
  display: block;
}

/* Calculations */
#calculations {
  display: none;
  /* display: flex; */
  flex-direction: column;
  gap: 10px;
}

.calc-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calc-title {
  display: none;
  font-weight: 700;
}

.calc-row {
  display: block;
  width: 100%;
}

.calc-label {
  font-weight: 400;
}

.calc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.calc-input {
  font-family: 'Roboto Mono', monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.calc-output {
  font-family: 'Roboto Mono', monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #f0f0f0;
  padding: 5px;
  border-radius: 5px;
}