.time-controller{display:flex;flex-direction:column;justify-content:center;width:95%}.time-controller .slider-wrapper{margin:0;position:relative;width:100%}:is(.time-controller .slider-wrapper) .range-value{position:absolute;top:-50%}:is(:is(.time-controller .slider-wrapper) .range-value) span{background:#555;border-radius:6px;color:#fff;display:block;font-size:12px;height:30px;left:50%;line-height:30px;position:absolute;text-align:center;transform:translate(-50%,-8px);width:48px}:is(:is(:is(.time-controller .slider-wrapper) .range-value) span):before{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #555;content:"";height:0;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:100%;width:0}:is(.time-controller .slider-wrapper) input[type=range]{background:#555;border-radius:2px;cursor:pointer;height:4px;outline:none;transition:background .3s;width:100%}:is(:is(.time-controller .slider-wrapper) input[type=range])::-webkit-slider-runnable-track{background:inherit;border:none;box-shadow:none}:is(:is(.time-controller .slider-wrapper) input[type=range])::-moz-range-track{background:inherit;border:none;box-shadow:none}:is(:is(.time-controller .slider-wrapper) input[type=range])::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#222;border:none;border-radius:50%;height:16px;transform:translateY(2px);transition:transform .2s;width:16px}.time-controller .play-controller{align-items:center;display:flex;flex-direction:row;gap:10px;justify-content:center}:is(.time-controller .play-controller) .control-button{align-items:center;border:1.5px solid #555;border-radius:50%;cursor:pointer;display:flex;font-size:14px;height:36px;justify-content:center;margin:0;padding:8px;width:36px}:is(:is(.time-controller .play-controller) .control-button):hover{opacity:.6}.play-button:is(:is(.time-controller .play-controller) .control-button){height:48px;width:48px}