html, body {
  padding: 0;
  margin: 0;
  height: 100vh;
  font-family: Nunito, Arial;
}

#form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  width: calc(100vw-10px);
  gap: 0;
  position: relative;
  z-index: 1;
}

#form input[name^="f_type_"] {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  border: none;
  cursor: pointer;
}

#form input:nth-child(1) {       background: #A0DAA1; color: #A0DAA1; }
#form input:nth-child(2) {       background: #FDFFB8; color: #FDFFB8; }
#form input:nth-child(3) {       background: #FFD7A8; color: #FFD7A8; }
#form input:nth-child(4) {       background: #FFA0A0; color: #FFA0A0; }

#form input:nth-child(1):hover { background: #80BA81; color: #80BA81; }
#form input:nth-child(2):hover { background: #FDF57A; color: #FDF57A; }
#form input:nth-child(3):hover { background: #FFB858; color: #FFB858; }
#form input:nth-child(4):hover { background: #FF6161; color: #FF6161; }

#form input[name="f_display"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  border: 2px solid #CCC;
  background: #FFF;
  color: #AAA;
  font-size: 5vmin;
  z-index: 10;
  cursor: pointer;
  text-align: center;
}

#form input[name="f_display"]:hover {
  border: 2px solid #AAA;
  color: #777;
}

#modal {
  display: flex;
  width: 100%;
  min-height: 5vh;
  justify-content: center;
  align-items: center;
  background: #B5E5FF;
  border-bottom: 1px solid #888;
  text-align: center;
  z-index: 10px;
}

#modal:empty {
  display: none;
}

#metrics {
  display: none;
  position: relative;
}

nav {
  display: block;
  width: calc(100vw-20px);
  height: 20px;
  padding: 20px;
  font-size: 20px;
  text-decoration: none;
  color: #FAFAFA;
  background-color: #2A334B;
  border-bottom: 2px solid #333;
}

nav a, nav a:visited {
  color: #CACACA;
  text-decoration: none;
  margin-right: 40px;
}

nav a:hover, nav a:focus {
  color: #FCFCFC;
  font-style: bold;
}

#metrics {
  width: calc(100vw-20px);
  padding: 20px;
}

#metrics table {
  width: 100%;
  border-collapse: collapse;
}

#metrics td, #metrics th {
  border: 1px solid #888;
  padding: 1vh;
  text-align: center;
}

#metrics tr:hover td {
  background-color: #EEFFFF;
}

#metrics th {
  background: #345780;
  color: #FAFAFA;
}

#metrics td:nth-child(1) {
  min-width: 100px;
}

#metrics td:nth-child(4) {
  min-width: 70px;
}

#metrics span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #888;
  border-radius: 10px;
}

#metrics button[name="e_type_1"] {  background: #A0DAA1; color: #A0DAA1; }
#metrics button[name="e_type_2"] {  background: #FDFFB8; color: #FDFFB8; }
#metrics button[name="e_type_3"] {  background: #FFD7A8; color: #FFD7A8; }
#metrics button[name="e_type_4"] {  background: #FFA0A0; color: #FFA0A0; }

#metrics .type_1, #metrics button[name="e_type_1"]:hover { background: #80BA81; color: #80BA81; }
#metrics .type_2, #metrics button[name="e_type_2"]:hover { background: #FDF57A; color: #FDF57A; }
#metrics .type_3, #metrics button[name="e_type_3"]:hover { background: #FFB858; color: #FFB858; }
#metrics .type_4, #metrics button[name="e_type_4"]:hover { background: #FF6161; color: #FF6161; }

#metrics form {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#metrics button {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid #888;
  border-radius: 2px;
  margin: 0;
  margin-right: 4px;
  padding: 0;
  cursor: pointer;
}

#metrics button[name="delete"] {
  border: none;
  background: none;
  color: darkred;
  font-size: 1.7em;
  margin-left: 7px;
  margin-right: 0;
}

#metrics button[name="delete"]:hover {
  color: red;
}

#charts {
  display: none;
  width: 92vw;
}