body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.autoScroll {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start;
}

.promo-header {
  flex-grow: 0;
  z-index: 2;
}

.custom-header {
  font-size: max(3em, calc((100vw - 100vh ) * 0.06), calc((100vh - 100vw ) * 0.066));
  text-align: center;
  font-weight: bold;
}

.stopTimeDisplayWrapper {
  border-top: 3px solid var(--color-primary-quarter-invert);
  flex-wrap: nowrap;
  justify-content: space-between;
}

.mutexLine {
/*   flex-wrap: wrap; ENABLE FOR TOP/BOT See 105*/
}

.stop {
  max-width: min(100vh, 100vw);
  min-width: max(40vh, 40vw);
  flex: 1 1 0;
  margin: max(0.5em, calc((100vw - 100vh ) * 0.01), calc((100vh - 100vw ) * 0.011));
  border: 5px solid var(--color-primary-half-invert);
  border-radius: 1em;
}

.stopHeader {
  font-size: max(3em, calc((100vw - 100vh ) * 0.06), calc((100vh - 100vw ) * 0.066));
  background-color: var(--color-primary-invert);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: normal;
  flex-wrap: wrap;
  padding-top: max(0em, calc((100vh - 100vw ) * 0.022));
  border-radius: 0.25em 0.25em 0 0;
}

.stopHeader .routes {
  font-size: .8em;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  margin: 0.05em 0.1em;
}

.stopHeader .routes *{
  flex-grow: 1;
  min-width: 1.2em;
  max-height: 1.2em;
  margin: 0.05em 0.1em;
}

.stopHeader .routes .express{
  flex-grow: 1;
  min-width: 1.75em;
}

.routeLine {
  font-size: max(1.3em, calc((100vw - 100vh ) * 0.044), calc((100vh - 100vw ) * 0.048));
  display: flex;
  padding: 0 max(.5em, calc((100vw - 100vh ) * 0.0155), calc((100vh - 100vw ) * 0.017));
  flex-grow: 1;
  white-space: normal;
}

.operatingTerminal{
  text-align: left;
}

.operatingLine {
  min-width: 1.2em;
  max-height: 1.2em;
  margin-right: 0.55em;
  font-weight: bold;
}

.operatingLine.express {
  min-width: 1.75em;
  margin-right: 0;
}

.timeStringContainer {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: wrap;
/*   flex-grow: 1; ENABLE FOR TOP/BOT See 33*/
}

.timeString.primaryTimeString {
  font-size: max(2em, calc((100vw - 100vh ) * 0.052),calc((100vh - 100vw ) * 0.057));
  background: none;
  color: var(--color-primary);
}

.timeString {
  font-size: max(0.7em, calc((100vw - 100vh ) * 0.022), calc((100vh - 100vw ) * 0.025));
  padding: 0 max(0.15em, calc((100vw - 100vh ) * 0.0057), calc((100vh - 100vw ) * 0.00625));;
}

.content {
/*   flex-grow: 2;
  display: flex;
  align-items: center; */
}

.footer {
  background: var(--color-primary-invert);
  padding: 0.7vh;
  font-size: 0.7em;
/*   flex-grow: 1; */
}

.footer, .footer a, .footer a:link, .footer a:visited {
  color: var(--color-primary);
}

.lineLabel {
  font-size: 6em;
}

.serviceStatus {
  white-space: pre;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  max-width: fit-content;
  max-height: fit-content;
  min-width: unset;
}

.serviceStatusMessageContainer {
  flex-wrap: wrap;
  font-size: 2em;
}

.serviceStatusGood {
    border: #0a0 solid 1em;
}

.serviceStatusIssue.noFlash {
    border: #fa0 solid 1em;
}

.serviceStatusManyIssues.noFlash {
    border: #f00 solid 1em;
}

.serviceStatusNotOperating {
  border: #666 solid 1em;
}


@keyframes badStatus {
	0% {border: #000 solid 1em;}
	75% {border: #fa0 solid 1em;}
  100% {border: #fa0 solid 1em;}
}

@keyframes worseStatus {
	0% {border: #000 solid 1em;}
	75% {border: #f00 solid 1em;}
	100% {border: #f00 solid 1em;}
}

div.containedFlexColor {
  display: flex;
}

div.containedFlexScroll {
  background: var(--color-primary-invert);
	display: flex;
	flex-direction: row;
	justify-content: center;
  margin-bottom: 0.35vh;
  animation: statusScroll 75s cubic-bezier(0,0.20,0.95,0.75) infinite;
  min-height: 16vh;
  width: fit-content;
}

@keyframes statusScroll {
  0% { transform: translateX(15%); }
  100% { transform: translateX(-100%); }
}