body {
  pointer-events: auto;
}

:root {
  --thumb-radius: 0;
  --track-radius: 0;
  --thumb-shadow-size: 0;
  --track-shadow-size: 0;
  --thumb-border-width: 1px;
  --thumb-border-color: black;
  --thumb-color: lightgray;
  --thumb-width: 1em;
  --thumb-height: 1em;
}

input[type=range] {
  outline: none;
  --_track-color: var(--track-color, #eceff1);
  --_thumb-color: var(--thumb-color, #607d8b);
  --_thumb-radius: var(--thumb-radius, 12px);
  --_thumb-height: var(--thumb-height, 24px);
  --_thumb-width: var(--thumb-width, 24px);
  --_thumb-shadow-size: var(--thumb-shadow-size, 4px);
  --_thumb-shadow-blur: var(--thumb-shadow-blur, 4px);
  --_thumb-shadow-color: var(--thumb-shadow-color, rgba(0, 0, 0, 0.2));
  --_thumb-shadow-lighten-color: var(--thumb-shadow-lighten-color, rgba(13, 13, 13, 0.2));
  --_thumb-border-style: var(--thumb-border-style, solid);
  --_thumb-border-width: var(--thumb-border-width, 2px);
  --_thumb-border-color: var(--thumb-border-color, #eceff1);
  --_thumb-margin: var(--thumb-margin, calc((var(--_track-border-width) * -2 + var(--_track-height)) / 2 - var(--_thumb-height) / 2));
  --_track-height: var(--track-height, 8px);
  --_track-shadow-size: var(--track-shadow-size, 1px);
  --_track-shadow-blur: var(--track-shadow-blur, 1px);
  --_track-shadow-color: var(--track-shadow-color, rgba(0, 0, 0, 0.2));
  --_track-shadow-lighten-color: var(--track-shadow-lighten-color, rgba(13, 13, 13, 0.2));
  --_track-border-style: var(--track-border-style, solid);
  --_track-padding: var(--track-padding);
  --_track-border-width: var(--track-border-width, 2px);
  --_track-border-color: var(--track-border-color, #cfd8dc);
  --_track-focus-color: var(--track-focus-color, transparent);
  --_track-lighten-color: var(--track-lighten-color, #fbfbfc);
  --_track-radius: var(--track-radius, 5px);
  --_track-width: calc(var(--track-width, 100%) - 2 * var(--_track-border-width));
  -webkit-appearance: none;
  background: transparent;
  margin: calc(var(--_thumb-height) / 2) 0;
  width: var(--_track-width);
}

input[type=range]::-moz-focus-outer {
  border: 0;
}

input[type=range]:focus {
  outline: 0;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--_track-focus-color);
}

input[type=range]::-webkit-slider-runnable-track {
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-lighten-color);
  background: var(--_track-color);
  border-color: var(--_track-border-color);
  border-width: var(--_track-border-width);
  border-style: var(--_track-border-style);
  border-radius: var(--_track-radius);
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
  -webkit-appearance: none;
  margin-top: var(--_thumb-margin);
}

input[type=range]::slider-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
  appearance: none;
  margin-top: var(--_thumb-margin);
}

input[type=range]::-moz-range-track {
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-color);
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  background: var(--_track-color);
  border-style: var(--_track-border-style);
  padding: var(--_track-padding);
  border-width: var(--_track-border-width);
  border-color: var(--_track-border-color);
  border-radius: var(--_track-radius);
  height: var(--_track-height);
}

input[type=range]::-moz-range-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
}

input[type=range]::slider-track {
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-color);
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  background: var(--_track-color);
  border-style: var(--_track-border-style);
  padding: var(--_track-padding);
  border-width: var(--_track-border-width);
  border-color: var(--_track-border-color);
  border-radius: var(--_track-radius);
  height: calc(var(--_track-height) / 2);
}

input[type=range]::slider-fill {
  display: block !important;
  float: none !important;
  position: static !important;
  writing-mode: unset !important;
  direction: unset !important;
  width: 0.2em;
  height: 0.2em;
  user-select: none !important;
}

input[type=range]:disabled::-webkit-slider-thumb, input[type=range]:disabled::-moz-range-thumb, input[type=range]:disabled::-webkit-slider-runnable-track {
  cursor: not-allowed;
}

qb-rating {
  --thumb-border-width: 0;
  --thumb-border-color: transparent;
  --thumb-color: transparent;
  --thumb-width: 0em;
  --track-border-width: 0;
  --track-color: transparent;
  font-size: var(--raster, 1em);
}

qb-rating input[type=range] {
  opacity: 0;
  margin: 0;
  width: auto;
  min-width: 0;
}