.meter_container{
  margin: .25em;
  width: 470px;
  height: 400px;
  overflow:hidden;
  background-color: rgba(24,55,12,.5);
  border-radius: 40% 40% .5em .5em / 80% 80% .5em .5em;
  border-style: solid;
  border-width: 4px;
}
#meter_wrapper {
  position: relative;
  margin: auto;
}
#meter {
  text-align: justify;
  padding:20%;
  width: 100%; height: 100%;
  transform: rotateX(180deg);
  overflow: visible;
}
.circle {
  fill: none;
}
.outline, #mask {
  stroke: rgb(75, 76, 81);
  stroke-width: 15%;
}
.range {
  stroke-width: 12%;
}

#lbl {
  color: white;
  font-size: .8em;
  font-weight: bold;
  vertical-align: middle;
  top:0%;
  min-height:3em;
  position: relative;
  overflow: auto;
}
#lbl.lbl_name{
  background-color: #3d3e42;
  border-color: #ccad00;
  vertical-align:text-top;
  width:100%;
  /* line-height:3em; */
  border-radius: 2px 2px 1em 1em;
  padding:3px;
  height: 100%;
}

#meter_pivot{
  background-color: #4B4C51;
  border-color: red;
  border-style:solid;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  width: 30%;
  height:15%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom:60%;
}
#pivot_light{
  visibility: hidden;
  background-color: transparent;
  width: 60%;
  height:5%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom:60%;
  box-shadow: 0px -2em 6em 20px rgba(0, 255, 255,.4);
  z-index:-4;
}
#meter_needle {
  width:7px;
  border-style:solid;
  border-color:black;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
  background-color:#ff0066;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  bottom:50%;
  transform-origin: bottom center;
  transform: rotate(270deg);
  z-index: 0;
}
.center-label{
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top:50%;
  text-align:center;
}
#resources-background{
  flex-direction:column;
  padding:5px 1px;
  background:linear-gradient(to right, rgba(0,255,0,.1) 75%, rgba(255,255,0,.2)98%, rgba(255,0,0,.1));
}
#project-progress-bar{
  height:100%;
  border-top: thin solid ghostwhite;
  border-left: thin dotted ghostwhite;
  background:transparent;
  position:absolute;
  bottom:0;
  top:0;
}
#progress-bar-title{
  position:absolute;
  top:0;
  right:0;
  background-color:rgba(255,255,255,.7);
  color:black;
  border:ghostwhite thin solid;
}
/* COLORS */
:root{
  --meter-red:#cf152b;
  --meter-yellow:#d6c918;
  --meter-green:#2eba19;
}
#low.rgr{stroke:var(--meter-red);}
#avg.rgr{stroke:var(--meter-green);}
#high.rgr{stroke:var(--meter-red);}

#low.rgy{stroke:var(--meter-red);}
#avg.rgy{stroke:var(--meter-green);}
#high.rgy{stroke:var(--meter-yellow);}

#low.ryg{stroke:var(--meter-red);}
#avg.ryg{stroke:var(--meter-yellow);}
#high.ryg{stroke:var(--meter-green);}

#low.ryr{stroke:var(--meter-red);}
#avg.ryr{stroke:var(--meter-yellow);}
#high.ryr{stroke:var(--meter-red);}

#low.ygr{stroke:var(--meter-yellow);}
#avg.ygr{stroke:var(--meter-green);}
#high.ygr{stroke:var(--meter-red);}

#low.ygy{stroke:var(--meter-yellow);}
#avg.ygy{stroke:var(--meter-green);}
#high.ygy{stroke:var(--meter-yellow);}

#low.yrg{stroke:var(--meter-yellow);}
#avg.yrg{stroke:var(--meter-red);}
#high.yrg{stroke:var(--meter-green);}

#low.yry{stroke:var(--meter-yellow);}
#avg.yry{stroke:var(--meter-green);}
#high.yry{stroke:var(--meter-red);}

#low.gyr{stroke:var(--meter-green);}
#avg.gyr{stroke:var(--meter-yellow);}
#high.gyr{stroke:var(--meter-red);}

#low.gyg{stroke:var(--meter-green);}
#avg.gyg{stroke:var(--meter-yellow);}
#high.gyg{stroke:var(--meter-green);}

#low.grg{stroke:var(--meter-green);}
#avg.grg{stroke:var(--meter-red);}
#high.grg{stroke:var(--meter-green);}

#low.gry{stroke:var(--meter-green);}
#avg.gry{stroke:var(--meter-red);}
#high.gry{stroke:var(--meter-yellow);}