:root {
  --big-gauge: 170px;
  --medium-gauge: 85px;
  --small-gauge: 42px;
}

.gauges .pointer {
  cursor: pointer !important;
}

.gauges .circle {
  max-width: 220px;
  margin: 10px auto;
  position: relative;
}
.gauges .circle-frame,
.gauges .forecast-frame {
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.gauges .circle-bg {
  width: var(--big-gauge);
  height: 85px;
  background: #eee;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -moz-border-radius: var(--big-gauge) var(--big-gauge) 0 0;
  -webkit-border-radius: var(--big-gauge) var(--big-gauge) 0 0;
  border-radius: var(--big-gauge) var(--big-gauge) 0 0;
}
.gauges .circle-fill {
  width: var(--big-gauge);
  height: var(--medium-gauge);
  background: #d3222e;
  position: absolute;
  top: 0px;
  left: 0;
  /*.transition(all);*/
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -moz-border-radius: var(--big-gauge) var(--big-gauge) 0 0;
  -webkit-border-radius: var(--big-gauge) var(--big-gauge) 0 0;
  border-radius: var(--big-gauge) var(--big-gauge) 0 0;
}
.gauges .circle-mask {
  width: var(--medium-gauge);
  height: var(--small-gauge);
  background: #fff;
  position: absolute;
  bottom: 0;
  left: var(--small-gauge);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -moz-border-radius: var(--medium-gauge) var(--medium-gauge) 0 0;
  -webkit-border-radius: var(--medium-gauge) var(--medium-gauge) 0 0;
  border-radius: var(--medium-gauge) var(--medium-gauge) 0 0;
}
.gauges .value {
  font-weight: 500;
  margin: 10px;
}
.gauges .circle-label {
  padding: 10px 30px 0;
  margin: 10px -30px 0;
  color: #666;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  line-height: 21px;
  overflow: hidden;
  max-width: 220px;
}
.circle-label + .circle-label {
  margin-top: 20px;
}

.gauges .buttons {
  margin: 5px 4px;
}

.gauges .buttons button {
  margin: 2px 0px;
}

.gauges .buttons button.selected {
  background-color: green;
  color: white;
}

.panel-content .gauges input.circle,
#column-3 .gauges input.circle {
  width: 100%;
  position: absolute;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 200;
  height: 85px;
}

.gauges .pointer input.circle {
  cursor: pointer;
}

.gauges input.circle:focus {
  border: none;
  outline: none;
}
.input-range input + div.input-range-label-1 {
  content: attr(min);
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 9;
  font-size: 24px;
  font-weight: 500;
  color: #666;
  width: var(--medium-gauge);
  text-align: right;
}

.input-range input ~ div.input-range-label-2 {
  content: "min";
  position: absolute;
  right: 51px;
  z-index: 9;
  bottom: 4px;
  font-size: 15px;
  color: #666;
}

.gauges input::-webkit-slider-thumb {
  opacity: 0.01;
  -webkit-appearance: none;
  display: none;
}
.gauges input::-moz-slider-thumb {
  opacity: 0.01;
  -webkit-appearance: none;
  display: none;
}
.gauges input[value="0"] ~ .circle-fill {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
  background-color: #37b737;
}
.gauges input[value="0"] ~ .circle-fill ~ .value {
  color: #37b737;
}

.gauges input[value="1"] ~ .circle-fill {
  -moz-transform: rotate(-144deg);
  -webkit-transform: rotate(-144deg);
  -o-transform: rotate(-144deg);
  -ms-transform: rotate(-144deg);
  transform: rotate(-144deg);
  background-color: #81a523;
}
.gauges input[value="1"] ~ .circle-fill ~ .value {
  color: #81a523;
}

.gauges input[value="2"] ~ .circle-fill {
  -moz-transform: rotate(-108deg);
  -webkit-transform: rotate(-108deg);
  -o-transform: rotate(-108deg);
  -ms-transform: rotate(-108deg);
  transform: rotate(-108deg);
  background-color: #cb930f;
}
.gauges input[value="2"] ~ .circle-fill ~ .value {
  color: #cb930f;
}

.gauges input[value="3"] ~ .circle-fill {
  -moz-transform: rotate(-72deg);
  -webkit-transform: rotate(-72deg);
  -o-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  transform: rotate(-72deg);
  background-color: #ea750d;
}
.gauges input[value="3"] ~ .circle-fill ~ .value {
  color: #ea750d;
}

.gauges input[value="4"] ~ .circle-fill {
  -moz-transform: rotate(-36deg);
  -webkit-transform: rotate(-36deg);
  -o-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  transform: rotate(-36deg);
  background-color: #df4c1e;
}
.gauges input[value="4"] ~ .circle-fill ~ .value {
  color: #df4c1e;
}

.gauges input[value="5"] ~ .circle-fill {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  background-color: #d3222e;
}
.gauges input[value="5"] ~ .circle-fill ~ .value {
  color: #d3222e;
}

.gauges input.forecast {
  -webkit-appearance: none;
  -moz-apperance: none;
  border-radius: 6px;
  height: 6px;
  width: 220px;

  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(100%, #eee)
  );

  background-image: -moz-linear-gradient(left center, #eee 0%);
}

.gauges input[value="0"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0%, #37b737),
    color-stop(0%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #37b737 0%,
    #37b737 0%,
    #eee 0%,
    #eee 100%
  );
}
.gauges input[value="1"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(20%, #81a523),
    color-stop(20%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #81a523 0%,
    #81a523 20%,
    #eee 20%,
    #eee 100%
  );
}
.gauges input[value="2"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(40%, #cb930f),
    color-stop(40%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #cb930f 0%,
    #cb930f 40%,
    #eee 40%,
    #eee 100%
  );
}
.gauges input[value="3"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(60%, #ea750d),
    color-stop(60%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #ea750d 0%,
    #ea750d 60%,
    #eee 60%,
    #eee 100%
  );
}
.gauges input[value="4"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(80%, #df4c1e),
    color-stop(80%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #df4c1e 0%,
    #df4c1e 80%,
    #eee 80%,
    #eee 100%
  );
}
.gauges input[value="5"].forecast {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(100%, #d3222e),
    color-stop(100%, #eee)
  );

  background-image: -moz-linear-gradient(
    left center,
    #d3222e 0%,
    #d3222e 100%,
    #eee 100%,
    #eee 100%
  );
}

.gauges .forecast-label {
  padding: 0px 30px 0;
  margin: 0px -30px 0;
  color: #666;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  max-width: 220px;
}

/* All the same stuff for Firefox */
.gauges input[type="range"]::-moz-range-thumb {
  border: 0px solid #000000;
  height: 0px;
  width: 0px;
}

.in-out-item.gauge {
  cursor: pointer;
}
li.selectedGauge {
  position: relative;
  box-shadow:
    inset 0 7px 9px -7px rgba(209, 220, 231, 1),
    inset 0 -7px 9px -7px rgba(209, 220, 231, 1);
}
li.selectedGauge::before {
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
  left: 0px;
  border: 10px solid transparent;
  border-left-color: #d1dce7;
  margin: 25% 0px;
}