body, html {
  font-family: monospace;
  font-size: 16px;
  background: antiquewhite;
}

#visualization {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.vis-item.openwheel  { background-color: #B0E2FF; }
.vis-item.rally      { background-color: #EAEAEA; }
.vis-item.motorcycle { background-color: #FA8072; }
.vis-item.touringcar { background-color: #B4EEB4; }
.vis-item.endurance  { background-color: #FFFFCC; }

.vis-item {
  text-align: center;
}
.vis-item .vis-item-content{
  padding: 0;
}

.vis-label .vis-inner{
  height: 10px;
  font-size: 10px;
}

.vis-label.white{
  background: white;
  color: black;
}

.vis-label.black{
  background: black;
  color: white;
}

.vis-time-axis .vis-text {
  font-size: 10px;
  text-align: center;
}
.vis-time-axis .vis-grid.vis-major{
  border-width: 5px;
  border-color: green;
}

.vis-grid.vis-vertical.vis-minor:nth-child(12n+1) {
  border-color: black;
  border-width: 3px;
}

.vis-grid.vis-minor:nth-child(3n+1) {
  border-color: black;
}

.vis-foreground .vis-group:nth-child(12n+3) {
  border-bottom: 2px solid goldenrod;
}

#controlPanel {
  margin-bottom: 5px;
}

button,::file-selector-button, label {
  font-family: monospace;
  font-size: large;
  background: lightsalmon;
  padding: 5px 10px 5px 10px;
}

label {
  border: 2px solid black;
  display: inline-block;
}

.vis-custom-time.t1{
  width: 5px;
  background-color: #B83A4B;
}

#banner {
  font-size: 2em;
  color: #B83A4B;
  position: absolute;
  right: 10px;
}