.container{min-height:100%;margin:50px auto;width:300px;padding:30px}.container,.container .box{display:flex;flex-direction:column}.container .box{text-align:center;color:#fff;font-family:sans-serif;font-size:36px;padding:10px;justify-content:center}.container .box-1{height:60px}.container .box-2{height:10px}.container .box-3{background-color:red;height:10px}.popup{padding:20px;background-color:#333;color:#f0f0f0;box-shadow:0 0 10px rgba(0,0,0,.5);border-radius:10px}.title{text-align:center;font-family:Courier New,Courier,monospace;font-size:xx-large;color:#f0f0f0}.form-group{margin-bottom:15px}.form-group label{color:#ccc;font-weight:700}.form-group input,.form-group select,.form-group textarea{width:90%;padding:10px;margin-left:1rem;margin-top:5px;border:1px solid #555;border-radius:5px;background-color:#444;color:#f0f0f0}.file-uploader-container{padding:20px;background-color:#444;border:2px dashed #666;border-radius:8px;cursor:pointer}.file-uploader-label{font-size:16px;color:#aaa}.file-uploader-message{font-size:14px;color:#999}.progress-bar{background-color:#555;border-radius:5px;overflow:hidden;margin-top:10px}.progress{height:10px;background-color:#4caf50;color:#fff;font-size:12px}.progress,.upload-success{text-align:center;border-radius:5px}.upload-success{background-color:#444;padding:10px;color:#c0ffc0}button{padding:10px 15px;border:none;border-radius:5px;cursor:pointer;color:#fff;background-color:#555;transition:background-color .2s ease;-webkit-transition:background-color .2s ease;-moz-transition:background-color .2s ease;-ms-transition:background-color .2s ease;-o-transition:background-color .2s ease}button:hover{background-color:#666}button:disabled{background-color:#444;cursor:not-allowed}.popup{margin-left:6rem}@media (max-width:600px){.popup{padding:15px}.title{font-size:large}}*,: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}