.grid-container{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap:   10px;
    padding: 10px;
}
.item1 {
    grid-column-start: 1;
    grid-column-end:2;
}
.item5 {
    grid-column-start: 1;
    grid-column-end:2;
}
.item2{
    grid-column-start: 2;
    grid-column-end:3;
}
item3{
    grid-column-start: 3;
    grid-column-end:4;
}
.item4{
    grid-column-start: 4;
    grid-column-end:5;
}
.item8{
    grid-column-start: 3;
    grid-column-end:5;
    grid-row-start: 3;
    grid-row-end:5;
}
.item9{
    grid-column-start: 1;
    grid-column-end:2;
    grid-row-start: 3;
    grid-row-end:4;
}
.item10{
    grid-column-start: 2;
    grid-column-end:3;
    grid-row-start: 3;
    grid-row-end:4;
}
.item13{
    grid-column-start: 1;
    grid-column-end:2;
    grid-row-start: 4;
    grid-row-end:5;
}
.item14{
    grid-row-start: 4;
    grid-row-end:5;
    grid-column-start: 2;
    grid-column-end:3;
}
.item17{
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start:1;
    grid-column-end:2;
}
.item18{
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start:2;
    grid-column-end:3;
}
.itemEC{
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start:3;
    grid-column-end:4;
}
.item20{
    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:4;
    grid-column-end:5;
}
.item21{
    grid-row-start: 6;
    grid-row-end:7;
    grid-column-start: 1;
    grid-column-end:2;
}
.item22{
    grid-row-start: 6;
    grid-row-end:7;
    grid-column-start: 2;
    grid-column-end:3;
}
.item23{
    grid-row-start: 6;
    grid-row-end:7;
    grid-column-start: 3;
    grid-column-end:4;
}
.item24{
    grid-row-start: 6;
    grid-row-end:7;
    grid-column-start: 4;
    grid-column-end:5;
}
.locator{
    grid-column-start: 1;
    grid-column-end: 5;
    color:blue;
    font-weight: bold;
}
.item95{
    grid-column-start: 1;
    grid-column-end:2;
}
.item92{
    grid-column-start: 2;
    grid-column-end:3;
}
item93{
    grid-column-start: 3;
    grid-column-end:4;
}
.item94{
    grid-column-start: 4;
    grid-column-end:5;
}
p {
    color: crimson;
}
h2 { 
    color:crimson;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
h3 { 
    color:crimson;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.ErrorBar {
    color:yellow;
    background-color: crimson;
    text-align: center;
    font-size: x-large;
}
.ErrorMsgs {
    color:white;
    background-color: crimson;
    text-align: center;
    font-size: small;
}
.WarnBar {
    color:darkgray;
    background-color:gold;
    text-align: center;
    font-size: x-large;
}
.WarnMsgs {
    color:darkgray;
    background-color: gold;
    text-align: center;
    font-size: small;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted red;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 360px;
  background-color: #ff6;
  color: #111;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;}