html, body {
  padding: 0;
  margin: 0;
  font-family: helvetica, sans-serif;
}

#grid {
  display: grid;
  grid-template: auto 1fr / 1fr 1fr;
  grid-template-areas:
    "top top"
    "left left";
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  gap: 0 1rem;
}

#grid:has(#chart.visible) {
  grid-template-areas:
    "top top"
    "left left";
}

#grid:has(#datatable.visible) {
  grid-template-areas:
    "top top"
    "right right";
}

#grid:has(#chart.visible):has(#datatable.visible) {
  grid-template-areas:
    "top top"
    "left right";
}

#grid > * {
  overflow: scroll;
}

#options {
  grid-area: top;
  padding: 0 1rem;
  overflow: auto;
}

/* The graph */
#chart {
  grid-area: left;
  display: none;
  overflow-y: hidden;
}

#chart.visible {
  display: block;
}

#chart-scroller {
  position: relative;
  background-color: black;
  border: solid 1rem white;
  height: 100%;
}

#datatable {
  grid-area: right;
  display: none;
  padding: 1rem;
}

#datatable.visible {
  display: block;
}

#datatable th, #datatable td {
  text-align: center;
  white-space: nowrap;
}

  #datatable td:nth-child(1) {
    font-weight: bold;
  }

#dagen {
  width: 4em;
}