.video-container{position:relative;margin:auto;height:calc(100vh - 20px);border-radius:.75rem}@media (min-width:768px){.video-container{height:550px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}.video-container .video-player{position:relative;margin:auto;height:100%;overflow:hidden;border-radius:.75rem}.video-container .control-container{position:absolute;bottom:0;padding:0}.video-container .control-wrapper{display:grid;max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;border-radius:.5rem;background-color:rgba(0,0,0,.6);padding:.75rem}@media (min-width:768px){.video-container .control-wrapper{grid-template-columns:123px 1fr 100px;grid-template-rows:repeat(1,minmax(0,1fr));gap:1rem}}.volume-controls .volume-range-container{position:absolute;left:-4rem;bottom:46px;display:none;width:135px;--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));justify-content:flex-end}.volume-controls .volume-slider{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;border-radius:4px;background-color:rgba(0,0,0,.6);padding:14px 11px}.quality-menu{position:absolute;left:-5rem;bottom:2.25rem;width:142px;border-radius:.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:.25rem}.quality-menu .quality-btn{display:flex;align-items:center;justify-content:space-between;border-radius:.25rem;padding:.5rem .75rem}.quality-menu .quality-btn:hover{background-color:rgba(0,0,0,.2)}.volume-btn:hover .volume-range-container,.volume-controls:hover .volume-range-container{display:flex}.volume-range{cursor:pointer;background-color:transparent;accent-color:#fff}.volume-range::-webkit-slider-runnable-track{height:9px;border-radius:.5rem;background:hsla(0,0%,100%,.33)}.volume-range::-webkit-slider-thumb{margin-top:-3px}.progressContainer{position:relative;height:.25rem;width:100%;cursor:pointer;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(204 204 204/var(--tw-bg-opacity))}.progress{background-color:rgb(13 127 215/var(--tw-bg-opacity))}.buffered,.progress{height:100%;border-radius:9999px;--tw-bg-opacity:1}.buffered{background-color:rgb(170 170 170/var(--tw-bg-opacity))}.progress:hover .hover-time-indicator,.progress:hover .indicator,.progressContainer:hover .hover-time-indicator,.progressContainer:hover .indicator{display:block}.hover-time-indicator{top:-50px;display:none;white-space:nowrap;border-radius:.5rem;--tw-bg-opacity:1;padding:.25rem 1rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover-time-indicator,.hover-time-indicator__arrow-down{position:absolute;background-color:rgb(36 36 36/var(--tw-bg-opacity))}.hover-time-indicator__arrow-down{bottom:-6px;left:50%;height:1rem;width:1rem;--tw-translate-x:-50%;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1}.indicator{position:absolute;top:-.25rem;display:none;height:.75rem;width:.75rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.video-container-small{position:relative;height:100%;width:600px;overflow:hidden;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.video-container-small .video-player-small{position:absolute;top:0;left:0;margin:auto;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.video-container-small .control-container{position:absolute;bottom:0;padding:1rem}.video-container-small .control-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;border-radius:.5rem;background-color:rgba(0,0,0,.6);padding:.75rem}