main.css

.navigation {
  display: flex;
  flex-direction: row;
}

.navigation a {
  margin: 0em 0.2em;
}

.dashboard {
  display: flex;
  flex-direction: row;
}

.dashboard .stats-column {
  flex: 1;
}

.dashboard .errors-column {
  flex: 2;
}

.dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
  border: dashed 2px black;
  border-radius: 15px;
}

.dropzone.active {
  background: lightgray;
}

.dropzone div {
  font-family: sans-serif;
  display: inline-block;
  margin: 10px;
}

.double-line {
  display: inline-flex;
  flex-direction: column;
}

.double-line > span:last-child {
  font-size: 70%;
  margin-bottom: 5px;
}

.missing {
  font-style: italic;
}

.color .box {
  display: inline-block;
  height: 0.7em;
  width: 0.7em;
  border: solid 1px black;
}

.sample {
  font-family: sans-serif;
  border-radius: 5px;
  padding: 5px;
}

.service > div {
  display: inline-block;
  vertical-align: top;
}

.service .side {
  width: 300px;
}

.service .calendar {
  width: calc(100% - 300px);
}

.calendar .controls {
  text-align: center;
}

.month {
  display: inline-block;
  margin: 0px 10px;
}

.month h1 {
  text-align: center;
}

.month .box {
  text-align: center;
  width: 1.5em;
}

.month .box.active {
  background-color: palegreen;
}

.month .box.inactive {
  background-color: lightsalmon;
}

.month .box.outofbounds {
  background-color: gray;
}

.month .box.exception {
  border: dashed 1px gray;
}

.trip .top-section {
  display: flex;
}

.trip .top-section .info-section {
  padding-right: 10px;
}

.trip .top-section .map-section {
  flex: 1;
  height: 400px;
}

.trip .restriction {
  border-bottom: dotted 1px black;
  cursor: help;
}

.trip .restriction:hover {
  border-bottom: solid 1px black;
}

.scrubber {
  display: flex;
  align-items: center;
}

.scrubber .rendered {
  position: relative;
  display: inline-block;
  flex-grow: 1;
}

.scrubber .label {
  margin: 0px 5px;
}

.scrubber .segment {
  display: inline-block;
  height: 20px;
  margin: 2px 0px;
  box-sizing: border-box;
  border-left: dashed 1px rgba(0, 0, 0, 0.2);
}

.scrubber .thumb {
  position: absolute;
  display: inline-block;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  border-top: solid 2px gray;
  border-bottom: solid 2px gray;
  top: 0;
  cursor: pointer;
}

table.errors {
  border-collapse: collapse;
  width: 100%;
}

.errors .warning {
  background-color: lightgoldenrodyellow;
}

.errors .error {
  background-color: salmon;
}

.errors .location {
  width: 10em;
}

.shape-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.shape-container .trip-column {
  flex: 1;
}

.shape-container .map-column {
  flex: 1;
  height: 100%;
}

.map {
  height: 100%;
  width: 100%;
}

.stop {
  display: flex;
}

.stop .info-column {
  flex: 1;
}

.stop .map-column {
  flex: 1;
}

.trip-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0px;
}

.trip-table th.active:after {
  content: '▼';
}

.trip-table td {
  border: solid 1px black;
}

.trip-table .time-column {
  border-top: none;
  border-bottom: none;
  position: relative;
  width: 50%;
  min-width: 50%;
  max-width: 75%;
}

.trip-table tr:first-child .time-column {
  border-top: solid 1px black;
}

.trip-table tr:last-child .time-column {
  border-bottom: solid 1px black;
}

.timebar {
  position: relative;
  height: 20px;
  background-color: gold;
  margin: 2px 0px;
}

.timebar.inexact {
  background-color: lightgreen;
}

.timebar .trail {
  height: 20px;
  background-color: gold;
}