body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
textarea {
    font-family: monospace;
}
header {
    font-size: 130%;
    font-weight: bold;
}
.hidden, .initially-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}
fieldset.options {
    font-size: 75%;
}
fieldset > legend {
    padding: 0 0.5em;
}
span.labeled-input {
    padding: 0.25em;
    margin: 0.25em 0.5em;
    border-radius: 0.25em;
    white-space: nowrap;
    background: #0002;
}
.center { text-align: center; }
.error {
    color: red;
    background-color: yellow;
}
.strong { font-weight: 700 }
.warning { color: firebrick; }
.green { color: darkgreen; }
.tests-pass { background-color: green; color: white }
.tests-fail { background-color: red; color: yellow }
.faded { opacity: 0.5; }
.group-start {
  color: blue;
  background-color: skyblue;
  font-weight: bold;
  border-top: 1px dotted blue;
  padding: 0.5em;
  margin-top: 0.5em;
}
.group-end {
  padding: 0.5em;
  margin-bottom: 0.25em;
  /*border-bottom: 1px dotted blue;*/
}
.group-end.green {
  background: lightgreen;
  border-bottom: 1px dotted green;
}
.one-test-line, .skipping-group {
  margin-left: 3em;
}
.skipping-test, .skipping-group {
  padding: 0.25em 0.5em;
  background-color: #ffff73;
}
.skipping-test {
  margin-left: 6em;
}
.one-test-summary {
  margin-left: 6em;
}
.full-test-summary {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid black;
}
.input-wrapper {
  white-space: nowrap;
  display: flex;
  align-items: center;
}
#test-output {
  border: 1px inset;
  border-radius: 0.25em;
  padding: 0.25em;
  /*max-height: 30em;*/
  overflow: auto;
  white-space: break-spaces;
  display: flex; flex-direction: column;
  font-family: monospace;
}
#test-output.reverse {
  flex-direction: column-reverse;
}
label[for] { cursor: pointer }

h1 {
  border-radius: 0.25em;
  padding: 0.15em 0.25em;
}
h1:first-of-type {margin: 0 0 0.5em 0;}