.container {
        width: 420px;
        height: 200px;
        position: relative;
        top: 200px;
        left: 200px;
        overflow: hidden;
        text-align: center;
        transform: translate(-50%, -50%);
      }
      .gauge-a {
        z-index: 1;
        position: absolute;
        background-color: rgba(255,255,255,.2);
        width: 400px;
        height: 200px;
        top: 0%;
        border-radius: 250px 250px 0px 0px;
      }
      .gauge-background {
        z-index: 3;
        position: absolute;
        background-color: #3a3a3a;
        width: 250px;
        height: 125px;
        top: 75px;
        margin-left: 75px;
        margin-right: auto;
        border-radius: 250px 250px 0px 0px;
      }
      .gauge-curve {
        z-index: 2;
        position: absolute;
        width: 300px;
        height: 150px;
        top: 200px;
        left:75px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 0px 0px 200px 200px;
        transform-origin: center top;
        transition: all 1.3s ease-in-out;
        /* border:2px solid black; */
        
      }
      .gauge-data {
        z-index: 4;
        color: rgb(255, 255, 255);
        font-size: 1.5em;
        line-height: 25px;
        position: absolute;
        width: 420px;
        height: 200px;
        top: 120px;
        margin-left: auto;
        margin-right: auto;
        transition: all .1s ease-out;
        
      }
      .green 
      {
        background-color: #4BC0C0; 
      }
      .yellow 
      {
        background-color: #FFCD56; 
      }
      .orange 
      {
        background-color: #FF9F40; 
      }
      .red 
      {
        background-color: #FF6384; 
      }