*,:after,:before{box-sizing:border-box}body{margin:0;overflow-x:hidden}.video-container{position:relative;width:100%;max-width:1000px;height:auto;overflow:hidden;display:flex;justify-content:center;margin:0 auto;background:#000}.video-container.full-screen,.video-container.theater{width:100%;max-width:100%}.video-container.theater{max-height:85vh;height:auto}.video-container.full-screen{max-height:100vh;height:auto}video{width:100%;height:auto;object-fit:fit}.video-controls-container{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out;transform:translateY(100%)}.video-container.paused .video-controls-container,.video-container:focus-within .video-controls-container,.video-container:hover .video-controls-container{opacity:1;transform:translateY(0)}.video-controls-container:before{content:"";position:absolute;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);width:100%;aspect-ratio:6/1;z-index:-1;pointer-events:none}.video-controls-container .controls{display:flex;gap:.5rem;padding:.25rem;align-items:center}.video-controls-container .controls button{background:none;border:none;color:#fff;padding:0;height:30px;width:30px;font-size:1.1rem;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out}.video-controls-container .controls button:hover{opacity:1}.video-container.full-screen .open,.video-container.paused .pause-icon,.video-container.theater .tall,.video-container:not(.full-screen) .close,.video-container:not(.paused) .play-icon,.video-container:not(.theater) .wide,.volume-high-icon,.volume-low-icon,.volume-muted-icon{display:none}.video-container[data-volume-level=high] .volume-high-icon,.video-container[data-volume-level=low] .volume-low-icon,.video-container[data-volume-level=muted] .volume-muted-icon{display:block}.volume-slider{width:0;transform-origin:left;transform:scaleX(0);transition:width .15s ease-in-out,transform .15s ease-in-out}.video-container:hover .volume-slider,.volume-slider:focus-within{width:100px;transform:scaleX(1)}.duration-container{display:flex;align-items:center;gap:.25rem;flex-grow:1}.timeline-container{height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline{background-color:hsla(0,0%,39%,.5);height:3px;width:100%;position:relative}.timeline:before{right:calc(100% - var(--preview-position) * 100%);background-color:#969696;display:none}.timeline:after,.timeline:before{content:"";position:absolute;left:0;top:0;bottom:0}.timeline:after{right:calc(100% - var(--progress-position) * 100%);background-color:purple}.timeline .thumb-indicator{--scale:0;position:absolute;transform:translateX(-50%) scale(var(--scale));height:200%;top:-50%;left:calc(var(--progress-position) * 100%);background-color:purple;border-radius:50%;transition:transform .15s ease-in-out;aspect-ratio:1/1}.timeline .preview-img{position:absolute;height:80px;aspect-ratio:16/9;top:-1rem;transform:translate(-50%,-100%);left:calc(var(--preview-position) * 100%);border-radius:.25rem;border:2px solid #fff;display:none}.thumbnail-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:none}.timeline-container:hover .preview-img,.timeline-container:hover .timeline:before,.video-container.scrubbing .preview-img,.video-container.scrubbing .thumbnail-img,.video-container.scrubbing .timeline:before{display:block}.timeline-container:hover .thumb-indicator,.video-container.scrubbing .thumb-indicator{--scale:1}.timeline-container:hover .timeline,.video-container.scrubbing .timeline{height:100%}.vid-listt{position:relative;overflow:hidden;max-height:100vh;overflow-y:auto}.vid-thumbnail{position:relative;width:100%;height:auto}.thumbnaill{transition:opacity .3s ease}.vid-thumbnail img{display:block;width:100%;height:auto}@keyframes react-loading-skeleton{to{transform:translateX(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var(
    --custom-highlight-background,linear-gradient(90deg,var(--base-color) 0,var(--highlight-color) 50%,var(--base-color) 100%)
  );transform:translateX(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display:none}}