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