body {
    background:#222;
    font-family:orbitron, sans-serif;
}

h1 {
    color:white;
    font-size:1.5em;
    font-weight:normal;
}

.meter {
  width:150px;
  height:60px;
  background:#dfc68d;
  position:relative;
  overflow:hidden;
  left: 60%;
  border: 1px solid #222;
}

.needle {
  background: black;
  width:60px;
  height:2px;
  transform: rotate(5deg);
  transform-origin:100%  0%;
  position:absolute;
  bottom: 0px; 
  left: 15px; 
  transition: transform .05s;
  z-index:2;
}

.shadow {
    border-top:solid 20px rgba(0,0,0,.3);
    border-left:solid 15px rgba(0,0,0,.3);
    width:100%;
    height:100%;
    top:-10px;
    left:-10px;
    position:absolute;
    filter:blur(5px);
}

.label {
    font-size: 10px;
    text-align:center;
    position:absolute;
    width:100%;
    top:55%;
}

.meter .indicator{
    position:absolute;
    top:-2px;
    left:7px;
    font-size:1em
}

.meter .indicator.plus {
    left:auto;
    right:20px;
    color:#aa0000;
}

.needleBase {
    width:50px;
    height:15px;
    position:absolute;
    bottom:0px;
    left:39px;
    z-index:10;
    overflow:hidden;
}

.needleBase span {
    display:black;
    width:40%;
    height:100%;
    border-radius:100%;
    background:#333;
    position:absolute;
    top:50%;
}

.meterLine {
    width:250px;
    height:97px;
    position:absolute;
    top:-20px;
    left:-38px;   
    overflow:hidden;
    z-index:1;
}
.meterLine span.base {
    width:180px;
    height:180px;
    position:absolute;
    left:25px;
    top:32px;
    border-radius:100%;
    border:solid 1px rgb(9, 9, 9);
}

.meterLine .green {
    width:30%;
    position:absolute;
    height:105px;
     
    left:19px;
    top:22px;
    overflow:hidden;
    
}

.meterLine .green  span.base {
    position:absolute;
    left:-5px;
    top:0px;
    border:solid 10px rgb(0, 170, 0);
}

.meterLine .danger {
    width:20%;
    position:absolute;
    height:95px;
     
    left:155px;
    top:22px;
    overflow:hidden;
    
}

.meterLine .danger  span.base {
    position:absolute;
    left:-138px;
    top:0px;
    border:solid 10px #a00;
}

.meterLine .warning {
    width:26%;
    position:absolute;
    height:75px;
     
    left:90px;
    top:22px;
    overflow:hidden;
    
}

.meterLine .warning  span.base {
    position:absolute;
    left:-72px;
    top:0px;
    border:solid 10px rgb(172, 172, 1);
}


#meters{
    display:flex;
    position: absolute;
    left: 50%;
}
.meter {
    margin-right:20px;
}