body {
  background-color: black;
}

.hud-container {
  position: relative;
  height: 97vh;
}

.grid-main {
  display: grid;
  /*Phase II Addition Place-Content*/
  place-content: center;
  grid-template-columns: auto auto auto auto auto;
  gap: 15px;
}

.grid-workCenter {
  display: grid;
  border-radius: 10px;
  grid-template-columns: auto auto;
}

.workStationNameRow {
  grid-area: 3 / 1 / span 1 / span 2;
}

.workStationNameRow p {
  color: black;
  font-size: large;
  font-family: Arial;
  text-align: center;
}

.gaugeDiv {
  padding: 15px;
}

.OEEgauge {
  transition: transform 300ms ease-in;
}

.origin-top-center {
  transform-origin: top center;
}

.origin-bottom-center {
  transform-origin: bottom center;
}

.origin-top-left {
  transform-origin: top left;
}

.origin-top-right {
  transform-origin: top right;
}

.origin-bottom-left {
  transform-origin: bottom left;
}

.origin-bottom-right {
  transform-origin: bottom right;
}

.OEEgauge:hover {
  transform: scale(2.1);
}

.redCell {
  color: red;
}

.greenCell {
  color: green;
}

.yellowCell {
  color: yellow;
}

.lightgreenCell {
  color: lightgreen;
}

.lightblueCell {
  color: lightblue;
}