:root {
  /* ++++++++ Set the default setting for the heights... the script looks at CONST and updates these ++++ */
  --notificationStripHeight: 100px;
  --gapBetweenLastGaugeRowAndNotificationStrip: 15px;

  --advisoryStripHeight: 60px;
  --advisoryItemHeight: 50px;
  --advisoryFontHeight: 40px;

  --tickerStripHeight: 40px;
  --tickerContainerHeight: 30px;
  --tickerTapeHeight: 25px;
  --tickerFontHeight: 20px;
  --videoLoopMarginTop: -70px;

  --clr-neon-red: hsl(347, 100%, 54%);
  --clr-neon-green: hsl(106, 65%, 56%);
  --clr-neon-yellow: hsl(56, 89%, 55%);
  --clr-neon-blue: hsl(226, 66%, 55%);

  --tickerMovementSetting_0: 100%;
  --tickerMovementSetting_100: -100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: black;
}

/* ++++++++++++++++++++++++++++++++++  Main Display and Gauge class settings +++++++++++++++++++++++++++++++++++++++++++ */

.hud-container {
  position: relative;
}

.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;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++ Notification section classes ++++++++++++++++++++++ */

.neon-blue {
  color: var(--clr-neon-blue);
}

.lblgOK,
lblyDT {
  color: var(--clr-neon-green);
  padding-left: 0.5em !important;
}

.lblNonDT {
  color: var(--clr-neon-yellow);
  padding-left: 0.5em !important;
}

.lblDT {
  color: var(--clr-neon-red);
  padding-left: 0.5em !important;
}

/* +++++++++++++++++++++++++++++++ Styles for the Advisory strip classes ++++++++++++++++++++++++++++++ */
/* NOTE: 
   top: 15px; setting determines how much distance between the only/last row of gauges and the notification strip 
*/
.notification-strip {
  position: relative;
  top: var(--gapBetweenLastGaugeRowAndNotificationStrip);
  height: var(--notificationStripHeight);
}

.advisory-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  height: var(--advisoryStripHeight);
  bottom: var(--tickerStripHeight);
  z-index: 999;
}

.advisory-container {
  display: grid;
  gap: 30px;
  grid-auto-flow: column;
}

.advisory-div {
  display: grid;
  gap: 30px;
  grid-auto-flow: column;
}

.advisory-message,
.advisory-div > label {
  font-size: var(--advisoryFontHeight);
  height: var(--advisoryItemHeight);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  border: currentColor 0.15em solid;
  border-radius: 0.25em;
  padding: 0 0.5em;
  width: max-content;
  text-shadow: 0 0 1em currentColor;

  box-shadow: inset 0 0 0.3em 0 currentColor, 0 0 0.5em 0 currentColor;
  position: relative;
}

.advisory-message::before,
.advisory-div > label::before {
  content: "";
  position: absolute;
  background: currentColor;
  top: 140%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1em) rotateX(40deg) scale(1, 0.4);
  filter: blur(1em);
}

/* +++++++++++++++++++++++++++++++ Styles for the ticker tape classes ++++++++++++++++++++++++++++++ */

.ticker-strip {
  display: flex;
  position: absolute;
  width: 100%;
  height: var(--tickerStripHeight);
  bottom: 0px;
  left: 0px;
  z-index: 999;
}

.ticker-container {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

  height: var(--tickerContainerHeight);
  font-weight: 500;

  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;

  width: 98%;
  margin: auto;

  border: rgba(255, 255, 255, 0.2) 2px solid;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
}

.ticker-container:before,
.ticker-container:after {
  content: "";
  height: var(--tickerStripHeight);
  position: absolute;
  width: 50px;
  z-index: 2;
}

.ticker-container:before {
  background: linear-gradient(to right, black 0%, rgba(255, 255, 255, 0) 100%);
  left: 0px;
}

.ticker-container:after {
  background: linear-gradient(to left, black 0%, rgba(255, 255, 255, 0) 100%);
  right: 0px;
}

.ticker {
  display: grid;
  gap: 30px;
  grid-auto-flow: column;
  position: absolute;
  font-weight: 700;
  text-align: left;
}

.ticker:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.animateTicker {
  animation: tickerMovement 30s linear infinite;
}

.ticker-text {
  display: flex;
  align-items: center;
  border-radius: 0.3em;
  /* border-radius: 5px; */
  text-align: center;
  padding: 0 1.2em;
  background: blue;
  height: var(--tickerTapeHeight);
  box-shadow: 0 3px 5px 2px #0000004d;
  width: max-content;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--tickerFontHeight);
}

@keyframes tickerMovement {
  from {
    transform: translate3d(var(--tickerMovementSetting_0), 0, 0);
  }

  to {
    transform: translate3d(var(--tickerMovementSetting_100), 0, 0);
  }
}

.call-red-down {
  background: red;
  color: white;
}

.call-yellow-non-down {
  background: yellow;
  color: black;
}

.call-green-responded {
  background: green;
  color: white;
}

.video-logo {
  position: absolute;
  aspect-ratio: 16 / 9;
  height: 48px;
  margin-top: var(--videoLoopMarginTop);
  right: 2em;
  z-index: 1;
}