.container {
   position:relative;
  background-color: none;
  width:330px;
  height:330px;
}

.first_ring {
  position:absolute;
  width:330px;
  height:330px;
  background-color:#666;
 border-radius: 50%;
  box-sizing: border-box;
}

.second_ring {
  position:absolute;
  width:320px;
  height:320px;
  top:5px;
  left:5px;
  background-color:#CCC;
 border-radius: 50%;
  box-sizing: border-box;
}

.third_ring {
  position:absolute;
  width:310px;
  height:310px;
  top:5px;
  left:5px;
  background-color:#FFF;
 border-radius: 50%;
  box-sizing: border-box;
}


.pie {
  position:relative;
  width:300px;
  height:300px;
  transform: translate(15px,15px) rotate(-45deg);
}

.pie_segment {
  position:absolute;
  height:150px;
  width:150px;
}

.pie_segment.red {
  background-color:#e74c3c;
  left:150px;
  top:150px;
  border-radius: 0px 0px 100% 0px;
}

.pie_segment.orange{
  background-color:#f1c40f;
  left:150px;
  border-radius: 0px 100% 0px 0px;
}

.pie_segment.green {
  background-color:#2ecc71;
  border-radius: 100% 0px 0px 0px;
}

.pie_segment.white {
  background-color:white;
  left:0px;
  top:150px;
  border-radius: 0px 0px 0px 100%;
}

.second_layer {
  position:absolute;
  index:10;
  top: 55px;
  left:55px;
  height:220px;
  width:220px;
  background-color: #FFFFFF;
  opacity: 0.5;
  border-radius: 50%;
  box-sizing: border-box;
}

.third_layer {
  position:absolute;
  index:10;
  top: 95px;
  left:95px;
  height:140px;
  width:140px;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-sizing: border-box;
}


.middle_point {
  position:absolute;
  index:16;
  top: 150px;
  left:150px;
  height:30px;
  width:30px;
  background-color: #FFFFFF;
  border: solid 10px #CCC;
  border-radius: 50%;
  box-sizing: border-box;

}

.arrow {
  background-color: transparent;
  box-sizing: border-box;
  width:120px;
  height:20px;
  position:absolute;
  top: 155px;
  left:45px;
  transform-origin: right;
  transform: rotate(0deg);
}

.arrowtop {
  box-sizing: border-box;
  width: 0; height: 0;
  border-bottom: 10px solid #666;
  border-left: 120px solid transparent;
}

.arrowbottom {
  box-sizing: border-box;
  width: 0; height: 0;
  border-top: 10px solid #666;
  border-left: 120px solid transparent;
}

#barometer_form{
  margin-top:20px;
}

#barometer_form label {
  box-sizing: border-box;
  font-size: 13px;
  font-weight: bold;
  padding-right:20px;
}

#barometer_form  input {
   font: inherit;
   color: #000;
   box-shadow: none;
   border: 1px solid #ccc;
   border-radius: 0.25rem;
   margin-bottom: 15px;
}

#barometer{
    display: grid;
    justify-content: center;
    justify-items: center;
}
}