:host {
																--_focus-box-shadow: var(
																	--media-focus-box-shadow,
																	inset 0 0 0 2px rgb(27 127 204 / 0.9)
																);
																--_media-range-padding: var(
																	--media-range-padding,
																	var(--media-control-padding, 10px)
																);
																box-shadow: var(
																	--_focus-visible-box-shadow,
																	none
																);
																background: var(
																	--media-control-background,
																	var(
																		--media-secondary-color,
																		rgb(20 20 30 / 0.7)
																	)
																);
																height: calc(
																	var(--media-control-height, 24px) + 2 *
																		var(--_media-range-padding)
																);
																display: var(
																	--media-control-display,
																	var(--media-volume-range-display, inline-flex)
																);
																align-items: center;
																vertical-align: middle;
																box-sizing: border-box;
																position: relative;
																width: 100px;
																transition: background 0.15s linear;
																cursor: var(--media-cursor, pointer);
																pointer-events: auto;
																touch-action: none;
															}
															input[type='range']:focus {
																outline: 0px;
															}
															input[type='range']:focus::-webkit-slider-runnable-track {
																outline: 0px;
															}
															:host(:hover) {
																background: var(
																	--media-control-hover-background,
																	rgb(50 50 70 / 0.7)
																);
															}
															#leftgap {
																padding-left: var(
																	--media-range-padding-left,
																	var(--_media-range-padding)
																);
															}
															#rightgap {
																padding-right: var(
																	--media-range-padding-right,
																	var(--_media-range-padding)
																);
															}
															#startpoint,
															#endpoint {
																position: absolute;
															}
															#endpoint {
																right: 0px;
															}
															#container {
																width: var(--media-range-track-width, 100%);
																transform: translate(
																	var(--media-range-track-translate-x, 0px),
																	var(--media-range-track-translate-y, 0px)
																);
																position: relative;
																height: 100%;
																display: flex;
																align-items: center;
																min-width: 40px;
															}
															#range {
																display: var(
																	--media-time-range-hover-display,
																	block
																);
																bottom: var(
																	--media-time-range-hover-bottom,
																	-7px
																);
																height: var(
																	--media-time-range-hover-height,
																	max(100% + 7px, 25px)
																);
																width: 100%;
																position: absolute;
																cursor: var(--media-cursor, pointer);
																appearance: none;
																-webkit-tap-highlight-color: transparent;
																background: transparent;
																margin: 0px;
																z-index: 1;
															}
															@media (hover: hover) {
																#range {
																	bottom: var(
																		--media-time-range-hover-bottom,
																		-5px
																	);
																	height: var(
																		--media-time-range-hover-height,
																		max(100% + 5px, 20px)
																	);
																}
															}
															#range::-webkit-slider-thumb {
																appearance: none;
																background: transparent;
																width: 0.1px;
																height: 0.1px;
															}
															#appearance {
																height: var(--media-range-track-height, 4px);
																display: flex;
																flex-direction: column;
																justify-content: center;
																width: 100%;
																position: absolute;
																will-change: transform;
															}
															#track {
																background: var(
																	--media-range-track-background,
																	rgb(255 255 255 / 0.2)
																);
																border-radius: var(
																	--media-range-track-border-radius,
																	1px
																);
																border: var(--media-range-track-border, none);
																outline: var(--media-range-track-outline);
																outline-offset: var(
																	--media-range-track-outline-offset
																);
																backdrop-filter: var(
																	--media-range-track-backdrop-filter
																);
																box-shadow: var(
																	--media-range-track-box-shadow,
																	none
																);
																position: absolute;
																width: 100%;
																height: 100%;
																overflow: hidden;
															}
															#progress,
															#pointer {
																position: absolute;
																height: 100%;
																will-change: width;
															}
															#progress {
																background: var(
																	--media-range-bar-color,
																	var(--media-primary-color, rgb(238 238 238))
																);
																transition: var(--media-range-track-transition);
																width: 0%;
															}
															#pointer {
																background: var(
																	--media-range-track-pointer-background
																);
																border-right: var(
																	--media-range-track-pointer-border-right
																);
																transition:
																	visibility 0.25s,
																	opacity 0.25s;
																visibility: hidden;
																opacity: 0;
															}
															@media (hover: hover) {
																:host(:hover) #pointer {
																	transition:
																		visibility 0.5s,
																		opacity 0.5s;
																	visibility: visible;
																	opacity: 1;
																}
															}
															#thumb,
															::slotted([slot='thumb']) {
																width: var(--media-range-thumb-width, 10px);
																height: var(--media-range-thumb-height, 10px);
																transition: var(--media-range-thumb-transition);
																transform: var(
																	--media-range-thumb-transform,
																	none
																);
																opacity: var(--media-range-thumb-opacity, 1);
																translate: -50%;
																position: absolute;
																left: 0%;
																cursor: var(--media-cursor, pointer);
															}
															#thumb {
																border-radius: var(
																	--media-range-thumb-border-radius,
																	10px
																);
																background: var(
																	--media-range-thumb-background,
																	var(--media-primary-color, rgb(238 238 238))
																);
																box-shadow: var(
																	--media-range-thumb-box-shadow,
																	1px 1px 1px transparent
																);
																border: var(--media-range-thumb-border, none);
															}
															:host([disabled]) #thumb {
																background-color: rgb(119, 119, 119);
															}
															.segments #appearance {
																height: var(
																	--media-range-segment-hover-height,
																	7px
																);
															}
															#track {
																clip-path: url('#segments-clipping');
															}
															#segments {
																--segments-gap: var(
																	--media-range-segments-gap,
																	2px
																);
																position: absolute;
																width: 100%;
																height: 100%;
															}
															#segments-clipping {
																transform: translateX(
																	calc(var(--segments-gap) / 2)
																);
															}
															#segments-clipping:empty {
																display: none;
															}
															#segments-clipping rect {
																height: var(--media-range-track-height, 4px);
																y: calc(
																	(
																			var(
																					--media-range-segment-hover-height,
																					7px
																				) -
																				var(--media-range-track-height, 4px)
																		) /
																		2
																);
																transition: var(
																	--media-range-segment-transition,
																	transform 0.1s ease-in-out
																);
																transform: var(
																	--media-range-segment-transform,
																	scaleY(1)
																);
																transform-origin: center center;
															}
															#segments-clipping rect:nth-child(0) {
															}