#mapid { height: 760px; }


.tableFixHead {
  overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
  /*height: 200px; /* gives an initial height of 200px to the table */
}
.tableFixHead thead th {
  position: sticky; /* make the table heads sticky */
  top: 0px; /* table head will be placed from the top of the table and sticks to it */
}


.ground {
  background-image: url("/static/image/ground.png");
  background-repeat: repeat-x;
  height:450px;
  position: relative;
  justify-content:center;
}

.water-tank {
  width:30em;
  height:25em;
  border:.3em solid #3A3A3A;
  border-top:none;
  box-sizing:border-box;
  position:relative;
  margin: auto;
  margin-top: 50px;
  background-color: white;
}

.water-tank .liquid {
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}

.water-tank .liquid svg {
  height:30em;
  top: calc(97.5% - 90%);
  position:absolute;
  animation: waves 5s infinite linear;
}


@keyframes waves {
    0% { transform:translateX(-15em); }
    100% { transform:translateX(0); }
}

.water-tank .label {
  position:absolute;
  color:white;
  line-height:2em;
  width:4em;
  text-align:center;
  border-radius:.5em;
  margin-bottom: -1em;
  background-color:#3A3A3A;
  right:-4.9em;
  bottom:90%;
}

.water-tank .label:before {
  content:"";
  position:absolute;
  background-color:#3A3A3A;
  width:0.7em;
  height:0.7em;
  top:.65em;
  left:-0.3em;
  transform:rotate(45deg);
}

.water-tank .indicator {
  position:absolute;
  background-color:#3A3A3A;
  height:0.3em;
  width:1em;
  margin-bottom: -0.15em;
  right:0;
}

.water-tank .indicator[data-value="25"] {
  bottom: 25%;
}

.water-tank .indicator[data-value="50"] {
  bottom: 50%;
}

.water-tank .indicator[data-value="75"] {
  bottom: 75%;
}