.video-container{position:relative;width:100%;height:100%;cursor:pointer}.video-container .controls-container>*:not(.play-container){opacity:0;transform:translateY(10px);transition:all 0.3s ease 0.5s}.video-container:hover .controls-container>*:not(.play-container){opacity:1;transform:translateY(0);transition:all 0.3s ease}.controls-container{position:absolute;bottom:0;left:0;width:100%;height:50px;display:flex;gap:25px;align-items:center;padding-inline:25px;background-image:linear-gradient(to top,rgb(0 0 0 / .3),transparent)}.progress-container{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;height:20px;position:relative}.progress-container .progress{display:block;height:3px;width:10px;position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;background-color:var(--rw-primary-color);border-radius:8px}.progress-container .progress::after{content:"";display:block;height:8px;max-height:8px;width:8px;max-width:8px;position:absolute;right:-4px;top:50%;opacity:0;transform:translateY(-50%) scale(.5);transition:all 0.3s ease 0.5s;pointer-events:none;background-color:#fff;border-radius:50%}.progress-container:hover .progress::after{opacity:1;transform:translateY(-50%) scale(1);transition:all 0.3s ease}.play-container{--color:white;--size:18px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;font-size:var(--size);user-select:none;fill:var(--color);width:var(--size);height:var(--size)}.play-container .play{position:absolute;animation:keyframes-fill 0.3s}.play-container .pause{position:absolute;display:none;animation:keyframes-fill 0.3s}.play-container[data-played="true"] .play{display:none}.play-container[data-played="true"] .pause{display:block}.play-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}@keyframes keyframes-fill{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}}.mute-btn{cursor:pointer;background-color:#fff0;border:none}.mute-btn svg{width:20px;height:20px;animation:keyframes-fill 0.3s}.full-screen-btn{cursor:pointer;background-color:#fff0;border:none;color:#fff;width:20px;height:20px}.full-screen-btn svg{width:20px;height:20px;animation:keyframes-fill 0.3s}body input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff0;cursor:pointer}body input[type=range]:focus{outline-color:var(--rw-primary-color)}body input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;height:3px;border-radius:8px;background:rgb(255 255 255 / .8)}body input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none;height:3px;border-radius:8px;background:rgb(255 255 255 / .8)}body input[type=range]::-ms-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;border-radius:8px;background:rgb(255 255 255 / .8)}body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--rw-primary-color);border-radius:8px;height:3px;width:3px;position:relative;bottom:0;left:-1px;background:var(--rw-primary-color);background-size:50%;box-shadow:0 3px 5px 0 rgb(0 0 0 / .4);cursor:pointer}body input[type=range]::-webkit-slider-thumb:active{cursor:pointer}.progress-container input[type=range]::-webkit-slider-thumb{transition:all 0.3s ease;opacity:0}body input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;border:2px solid var(--rw-primary-color);border-radius:8px;height:3px;width:3px;position:relative;bottom:0;left:-1px;background:var(--rw-primary-color);background-size:50%;box-shadow:0 3px 5px 0 rgb(0 0 0 / .4);cursor:pointer}body input[type=range]::-moz-range-thumb:active{cursor:pointer}body input[type=range]::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--rw-primary-color);border-radius:8px;height:3px;width:3px;position:relative;bottom:0;left:-1px;background:var(--rw-primary-color);background-size:50%;box-shadow:0 3px 5px 0 rgb(0 0 0 / .4);cursor:pointer}body input[type=range]::-ms-thumb:active{cursor:pointer}@media (max-width:768px){.controls-container{flex-direction:column;align-items:flex-start;height:auto;gap:10px;padding-bottom:10px}.progress-container,.full-screen-btn{display:none}.video-container .controls-container .play-container,.video-container .controls-container .mute-btn{opacity:1;transform:translateY(0)}.mute-btn svg{width:25px;height:25px;animation:keyframes-fill 0.3s}.play-container{--color:white;--size:22px}}