.video-controls,.video-timer,.options{display:flex;align-items:center;justify-content:center}.video-container{width:98%;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;max-width:900px;aspect-ratio:16/9;position:relative}.video-container.fullscreen{max-width:100%;width:100%;height:100vh;border-radius:0px}.video-container.show-controls .wrapper{opacity:1;bottom:0;transition:all .13s ease}.video-container video{width:100%}.video-container .wrapper{position:absolute;left:0;right:0;z-index:1;opacity:0;bottom:-15px;transition:all .08s ease}.video-container .wrapper::before{content:"";bottom:0;width:100%;z-index:-1;position:absolute;height:calc(100% + 35px);pointer-events:none;background:linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent)}.video-container .wrapper .video-timeline{height:7px;width:100%;cursor:pointer}.video-container .wrapper .video-timeline:hover .progress-bar::before,.video-container .wrapper .video-timeline:hover .progress-area span{display:block}.video-container .wrapper .video-timeline .progress-area{height:3px;position:relative;background:rgba(255,255,255,.6)}.video-container .wrapper .video-timeline .progress-area span{position:absolute;left:50%;top:-25px;font-size:13px;color:#fff;pointer-events:none;transform:translateX(-50%);display:none}.video-container .wrapper .video-timeline .progress-area #timeline-markers{position:absolute;bottom:100%;left:0;height:5px;background-color:rgba(0,0,0,0);width:100%}.video-container .wrapper .video-timeline .progress-area #timeline-markers .marker{width:5px !important;height:100% !important;position:absolute !important;background-color:#3e97fd !important;cursor:pointer !important;z-index:2 !important}.video-container .wrapper .video-timeline .progress-area .progress-bar{width:0%;height:100%;position:relative;background:#2289ff}.video-container .wrapper .video-timeline .progress-area .progress-bar::before{content:"";right:0;top:50%;height:13px;width:13px;position:absolute;border-radius:50%;background:#2289ff;transform:translateY(-50%);display:none}.video-container .video-controls{padding:5px 20px 10px}.video-container .video-controls .options{width:100%}.video-container .video-controls .options:first-child{justify-content:flex-start}.video-container .video-controls .options:last-child{justify-content:flex-end}.video-container .video-controls .options button{height:40px;width:40px;font-size:19px;border:none;cursor:pointer;background:none;color:#efefef;border-radius:3px;transition:all .3s ease}.video-container .video-controls .options button :where(i,span){height:100%;width:100%;line-height:40px}.video-container .video-controls .options button:hover :where(i,span){color:#fff}.video-container .video-controls .options button:active :where(i,span){transform:scale(0.9)}.video-container .video-controls .options button span{font-size:23px}.video-container .video-controls .options input{height:4px;margin-left:3px;max-width:75px;accent-color:#0078ff}.video-container .video-controls .options .video-timer{color:#efefef;margin-left:15px;font-size:14px}.video-container .video-controls .options .video-timer .separator{margin:0 5px}.playback-content{display:flex;position:relative}.playback-content .speed-options{position:absolute;list-style:none;left:-40px;bottom:40px;width:95px;overflow:hidden;opacity:0;border-radius:4px;pointer-events:none;background:rgba(255,255,255,.9);box-shadow:0 10px 20px rgba(0,0,0,.1);transition:opacity .13s ease;margin:0;padding:0}.playback-content .speed-options.show{opacity:1;pointer-events:auto}.speed-options li{cursor:pointer;color:#000;font-size:14px;margin:2px 0;padding:5px 0 5px 15px;transition:all .1s ease}.speed-options li:where(:first-child,:last-child){margin:0px}.speed-options li:hover{background:#dfdfdf}.speed-options li.active{color:#fff;background:#3e97fd}.current-time,.separator,.video-duration{margin-bottom:auto !important}video[poster]{width:auto;height:100%}@media screen and (max-width: 540px){.wrapper .video-controls{padding:3px 10px 7px}.options input,.progress-area span{display:none !important}.options button{height:30px;width:30px;font-size:17px}.options .video-timer{margin-left:5px}.video-timer .separator{margin:0 2px}.options button :where(i,span){line-height:30px}.options button span{font-size:21px}.options .video-timer{font-size:12px}.progress-area span,.speed-options li{font-size:12px}.playback-content .speed-options{width:75px;left:-30px;bottom:30px}.speed-options li{margin:1px 0;padding:3px 0 3px 10px}.right .pic-in-pic{display:none}}