y2022/www/styles.css

.channel {
  display: flex;
  border-bottom: 1px solid;
  font-size: 24px;
}
#field {
  display: inline-block
}

#targets,
#readouts,
#vision_readouts {
  display: inline-block;
  vertical-align: top;
  float: right;
}

#legend {
  display: inline-block;
}

#outer_target {
  border: 1px solid black;
  width: 140px;
  background-color: white;
}

#inner_target {
  width: 60px;
  height: 60px;
  margin: 40px;
  border: 1px solid black;
  background-color: white;
}

#outer_target.targetted,
#inner_target.targetted {
  background-color: green;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  margin: 10px;
}

th, td {
  text-align: right;
  width: 70px;
}

td:first-child {
  width: 150px;
}

.near {
  background-color: LightGreen;
  border-radius: 10px;
}

.zeroing {
  background-color: yellow;
  border-radius: 10px;
}

.faulted {
  background-color: red;
  border-radius: 10px;
}

#vision_readouts > div {
  display: table-row;
  padding: 5px;
}

#vision_readouts > div > div {
  display: table-cell;
  padding: 5px;
  text-align: right;
}