@font-face {
  font-family: "BerkeleyMono";
  src: url("BerkeleyMono-Regular.woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "BerkeleyMono";
  src: url("BerkeleyMono-Bold.woff2");
  font-weight: bold;
  font-style: normal;
}

html {
  font-family: "BerkeleyMono", monospace;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

body {
  width: 100vw; /* vw=1% of viewport width */
  height: 100vh; /* vh=1% of viewport height */
  overflow: hidden; /* hides scrollbars and remove scrolling functionality */
  margin: 0em 0em 0em 0em;
}

div.master {
  width: 100%; /* use 100% of parent, body */
  height: 100%; /* use 100% of parent, body */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.titlerow {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: baseline;
  padding: 1em 5em 0.5em 5em;
}

div.title {
  font-weight: bold;
  text-align: center;
}

select#system_select {
  align: center;
}

div.plots {
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

div.plotlabel {
  font-weight: bold;
}

div.parameters {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: baseline;
  padding: 0.5em 0.5em 0.5em 0.5em;
}

/* this is to align labels to parameters */
div.parameter {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  grid-gap: 0.5em;
  align-items: baseline;
}

div.status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  align-items: baseline;
}

div.controls {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: baseline;
  padding: 0.5em 0.5em 0.5em 0.5em;
}

select {
  font-family: "BerkeleyMono", monospace;
  font-weight: bold;
}

textarea {
  resize: none; /* remove resizing icon and resizable functionality from text areas */
  font-family: "BerkeleyMono", monospace;
  font-size: 1em;
}

input[type="button"] {
  font-weight: bold;
}

hr {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 2px;
  color: darkgrey;
  background: darkgrey;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.consent-button {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: #cccccc;
  color: #000000;
  z-index: 1;
}

.consent-banner {
  display: none;
  position: fixed;
  padding: 1rem;
  top: 4rem;
  left: 0;
  right: 0;
  background-color: lightblue;
  color: black;
  padding: "2rem";
  textAlign: "left";
  z-index: 1;
}