body {
  background-color: white;
  margin: 0;
  font-family: 'Nexus Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  box-sizing: border-box;
  padding: 1em;
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: 8fr 12fr;
  grid-template-rows: 1fr;
  grid-template-areas:
      "dash graph-area";
}

@media only screen and (max-width: 600px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas:
      "dash"
      "graph-area";
  }

}

main {
  grid-area: graph-area;
  height: 100%;
}

#dashboard {
  grid-area: dash;
  overflow: auto;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.monitors {
  margin: 2rem;
}
.parameters, .parameter {
  margin-top: 1rem;
}

.monitors {
  border-style: inset;
  padding: 1.5rem;
  flex-grow: 1;
}

.monitor {
  margin-top: 0.5rem;
}
.monitor-label {
  font-weight: bold;
}

#log {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: Consolas, 'Courier New', monospace;  
  background-color: lightgrey;
  overflow: auto;
}

#cy {
  width: 100%;
  height: 100%;
  display: block;
}