.range-sliders {
  --slider-thumb-color: var(--color-fill-elevate);
  --slider-zoom: 100%;
}
.range-sliders input[data-battery-segment-id=actual-soc] {
  --slider-thumb-color: var(--color-energy-detail);
}
.range-sliders input[data-battery-segment-id=fast-soc] {
  --slider-thumb-color: var(--color-energy-fill-fast);
}
.range-sliders input[data-battery-segment-id=smart-soc] {
  --slider-thumb-color: var(--color-energy-fill);
}
.range-sliders.range-sliders-active-feedback input[type=range]:active {
  --slider-zoom: 125%;
  margin: -0.25em;
}
.range-sliders input[type=range]::-webkit-slider-runnable-track, .range-sliders input[type=range]::-webkit-slider-thumb, .range-sliders input[type=range] {
  -webkit-appearance: none;
}
.range-sliders input[type=range]::-webkit-slider-runnable-track {
  background: none; /* get rid of Firefox track background */
  height: 100%;
  width: 100%;
}
.range-sliders input[type=range]::-moz-range-track {
  background: none; /* get rid of Firefox track background */
  height: 100%;
  width: 100%;
}
.range-sliders input[type=range]::-webkit-slider-thumb {
  background-color: var(--color-fill-elevate);
  background-image: url("/assets/union-slate-900-a3cd1dc3.svg");
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px var(--slider-thumb-color) solid;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 5, 56, 0.08), 0 0 2px rgba(0, 5, 56, 0.08);
  pointer-events: auto;
  width: var(--range-slider-thumb-size, 2em);
  height: var(--range-slider-thumb-size, 2em);
  zoom: var(--slider-zoom);
}
@media (prefers-color-scheme: dark) {
  .range-sliders input[type=range]::-webkit-slider-thumb {
    background-image: url("/assets/union-white-4d284eda.svg");
  }
}
.range-sliders input[type=range]::-moz-range-thumb {
  background-color: var(--color-fill-elevate);
  background-image: url("/assets/union-slate-900-a3cd1dc3.svg");
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px var(--slider-thumb-color) solid;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 5, 56, 0.08), 0 0 2px rgba(0, 5, 56, 0.08);
  pointer-events: auto;
  width: var(--range-slider-thumb-size, 2em);
  height: var(--range-slider-thumb-size, 2em);
  zoom: var(--slider-zoom);
}
@media (prefers-color-scheme: dark) {
  .range-sliders input[type=range]::-moz-range-thumb {
    background-image: url("/assets/union-white-4d284eda.svg");
  }
}