/* [project]/src/components/layout/videoRange.css [app-client] (css) */
:root {
  --thumb-color: #fff;
}

.video-range {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: var(--track-color, #cccccc7c);
  border-radius: 16px;
  outline: none;
  width: 100%;
  overflow: hidden;
}

.video-range::-webkit-slider-runnable-track {
  background: #cccccc7c;
  border-radius: 16px;
  height: 8px;
}

.video-range::-moz-range-track {
  background: #cccccc7c;
  border-radius: 16px;
  height: 8px;
}

.video-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--thumb-color);
  width: 8px;
  height: 8px;
  box-shadow: calc(-100vw - 7px) 0 0 100vw var(--thumb-color);
  border: 2px solid #fff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.video-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  box-shadow: calc(-100vw - 7px) 0 0 100vw var(--thumb-color);
  background-color: #fff;
  border: 1px solid #fff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

@media (width <= 768px) {
  .video-range::-webkit-slider-runnable-track {
    border-radius: 8px;
    height: 4px;
  }

  .video-range::-moz-range-track {
    height: 4px;
  }

  .video-range::-webkit-slider-thumb {
    width: 8px;
    height: 4px;
  }

  .video-range::-moz-range-thumb {
    width: 8px;
    height: 8px;
  }
}


/*# sourceMappingURL=src_components_layout_videoRange_f3166b33.css.map*/