style.css

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

[class$="api-load-alpha-banner"] {
  display: none;
}

#dashboard-left {
  position: absolute;
  top: 10;
  left: 10;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.dashboard{
  background-color: rgba(61, 61, 61, 0.8);
  padding: 5px;
  border: 1px solid #00c895;
  color: white;
  font-family: Roboto, sans-serif;
}

.dash-line-item{
  margin: auto;
}

#solace-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dash-title {
  font-size: medium;
  font-weight: bolder;
  margin: 10 auto 10;
}

.dash-sub-title {
  font-size: smaller;
}

#filtering-form {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 3px;
  column-gap: 10px;
  margin: 10px;
  font-size: small;
}

#sub-form {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 3px;
  column-gap: 10px;
  margin: 10px;
  font-size: small;
}

#range-form{
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 3px;
  column-gap: 10px;
  margin: 10px;
  font-size: small;
}

.dash-input {
  color:white;
  border: 2px solid #00c895;
  border-radius: 10px;
  background-color: rgba(61, 61, 61, 0.8);
}

#geo-grid{
  display: grid;
  grid-template-columns: auto auto ;
  row-gap: 3px;
  column-gap: 10px;
  margin: 10px;
  font-size: inherit;
}

#filtering button:hover {
  background-color: #00c895;
}

#stat-grid {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 3px;
  column-gap: 10px;
  margin: 10px;
  font-size: small;
}

.stat-value {
  font-weight: bolder;
}

#real-time-topics {
  position: fixed;
  bottom: 10px;
  left: 50%;
  margin-left: -450px; /* approx */
}

.topic-string {
  font-family: Monaco, "Lucida Console", monospace;
  font-size: small;
  color: #aaa;
}

.topic-app {
  color: #5f5;
}
.topic-ver {
  color: #58f;
}
.topic-route {
  color: #ff0;
}
.topic-vehType {
  color: #f5f;
}
.topic-vehID {
  color: #ffdb55;
}
.topic-lat,
.topic-lng {
  color: #f71;
}
.topic-dir {
  color: #0ff;
}
.topic-status {
  color: #fff;
}

.info-box {
  font-size: 100%;
  display: flex;
  flex-direction: column;
}

.info-topic {
  background-color: rgba(61, 61, 61, 0.8);
  font-family: Monaco, "Lucida Console", monospace;
  font-size: 80%;
  color: #aaa;
  padding: 5px;
}

.info-title {
  font-weight: 500;
  font-size: 120%;
}

.info-body {
  display: flex;
  flex-direction: row;
  font-size: 85%;
}

.info-img {
  object-fit: cover;
  height: 15em;
}

.info-status-OK{
  color:white;
  background-color: green;
}

.info-status-FAULT{
  color:white;
  background-color: red;
}

.marker-OK {
  filter: drop-shadow(0 0 3mm black);
  z-index: 10;
}

@keyframes blink {
  0% {
      opacity:1;
  }
  50% {
      opacity:0;
  }
  100% {
      opacity:1;
  }
} 

.marker-FAULT {
  filter: drop-shadow(0 0 5px red) brightness(150%) saturate(200%);
  animation: blink normal 1s infinite ease-in-out;
  z-index: 1000;
}

#range-rect {
  position: absolute;
  top: auto;
  display: none;
}