/* svg {
  margin: 12vh auto 0 auto;
  display: block;
} */

/* path {
  stroke-linecap: round;
  stroke-width: 8;
}

path.grey {
  stroke: #b3bdc6;
}

path.lime {
  stroke: #b4ff00;
  stroke-dasharray: calc(140.32 * 3.142 * 1.2);
   adjust last number for variance 
  stroke-dashoffset: 377;
}
 */

pre {
  padding: 0;
  margin: 0;
}

@media only screen and(min-device-width: 768px) {
  .gauge-container {
    width: 200px;
    height: 200px;
  }
  .example > .code {
    width: 65%;
    float: left;
  }
  .example > .display {
    width: 35%;
    float: right;
    padding: 10px;
  }
}
/* ------- Alternate Style ------- */
.gauge-container{}
.gauge-container > .gauge .dial {
  stroke: #B3BDC6;
  stroke-width: 4;
  stroke-linecap: round;
}
.gauge-container> .gauge .value {
  stroke: #B4FF00;
  stroke-width: 4;
  stroke-linecap: round;
  animation: progressAnimation 3s;
}
.gauge-container > .gauge .value-text {
  fill: #002340;
}


.animation {
 
}
@keyframes progressAnimation {
  0% {
      width: 0%;
  } 
  100% {
      width: 50%;
  }
}