.gauge {
  position: relative;
  width: 12rem;
  height: 6rem;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}
.gauge .gauge-indicator {
  position: relative;
  width: 12rem;
  height: 12rem;
  background: transparent;
  border: 1rem solid #ddd;
  border-radius: 50%;
  transition: transform 0.2s ease;
  transform: rotate(var(--gauge-rotation));
}
.gauge .gauge-indicator::before {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  border: 1rem solid transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  left: -1rem;
  top: -1rem;
  transform: rotate(45deg);
  z-index: 2;
}
.gauge .gauge-indicator.gauge-1::before {
  border-right-color: rgb(0, 110, 255);
  border-bottom-color: rgb(0, 110, 255);
}
.gauge .gauge-indicator.gauge-2::before {
  border-right-color: rgb(22, 168, 22);
  border-bottom-color: rgb(22, 168, 22);
}
.gauge .gauge-indicator.gauge-3::before {
  border-right-color: rgb(224, 224, 10);
  border-bottom-color: rgb(224, 224, 10);
}
.gauge .gauge-indicator.gauge-4::before {
  border-right-color: orange;
  border-bottom-color: orange;
}
.gauge .gauge-indicator.gauge-5::before {
  border-right-color: rgb(218, 61, 61);
  border-bottom-color: rgb(218, 61, 61);
}
.gauge .gauge-title {
  position: absolute;
  font-size: 1.5rem;
  color: #0078c8;
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
}/*# sourceMappingURL=gauge.css.map */