:root{--rect-width:0px;--rect-height:0px;--rect-top:0px;--rect-left:0px;--ctrl-point-width:3px;--ctrl-point-height:3px;--ctrl-point-border:1px;--ctrl-point-real-height:calc(var(--ctrl-point-height) + var(--ctrl-point-border)*2);--ctrl-point-real-width:calc(var(--ctrl-point-width) + var(--ctrl-point-border)*2)}.rect{background:hsla(0,0%,73%,.3);border:1px solid green;cursor:move;display:none;height:var(--rect-height);left:var(--rect-left);outline:2px solid #3071a9;position:absolute;top:var(--rect-top);width:var(--rect-width);z-index:9999}.rect div{background-color:#fff;border:1px solid #dc4342;border-radius:100%;height:12px;transform:translate(-50%,-50%);width:12px}.rect .nw{cursor:nw-resize;left:0;position:absolute;top:0}.rect .n{cursor:n-resize;left:calc(var(--rect-width)/2 - var(--ctrl-point-real-width)/2);position:absolute;top:calc(var(--ctrl-point-real-height)/2*-1)}.rect .ne{cursor:ne-resize;left:calc(var(--rect-width) - var(--ctrl-point-real-width));position:absolute;top:0}.rect .e{cursor:e-resize;left:calc(var(--rect-width) - var(--ctrl-point-real-width)/2);position:absolute;top:calc(var(--rect-height)/2 - var(--ctrl-point-real-height)/2)}.rect .se{cursor:se-resize;left:calc(var(--rect-width) - var(--ctrl-point-real-width));position:absolute;top:calc(var(--rect-height) - var(--ctrl-point-real-height))}.rect .s{cursor:s-resize;left:calc(var(--rect-width)/2 - var(--ctrl-point-real-width)/2);position:absolute;top:calc(var(--rect-height) - var(--ctrl-point-real-height)/2)}.rect .sw{cursor:sw-resize;left:0;position:absolute;top:calc(var(--rect-height) - var(--ctrl-point-real-height))}.rect .w{cursor:w-resize;left:calc(var(--ctrl-point-real-width)/2*-1);position:absolute;top:calc(var(--rect-height)/2 - var(--ctrl-point-real-height)/2)}.fas{color:#fff;font-size:20px}.player{background:#000;border:5px solid #000;border-radius:10px;cursor:pointer;max-width:80vw;min-width:800px;position:relative}.show-controls{bottom:0;cursor:default;height:10%;position:absolute;top:100%;width:100%;z-index:2}.controls-container{background:hsla(0,0%,44%,.5);bottom:-5px;box-sizing:border-box;flex-direction:column;height:100%;opacity:1;position:absolute;top:5%;transition:all .5s ease-out 2s;z-index:5}.control-group,.controls-container{display:flex;justify-content:space-between;width:100%}.control-group{height:60%}.controls-left,.controls-right{display:flex;flex:1;overflow:hidden;position:relative;top:22px;width:100%}.progress-range{background:#d4cece;border-radius:10px;cursor:pointer;height:8px;left:0;margin:auto;position:absolute;top:5px;transition:height .1s ease-in-out;width:calc(100% - 30px)}.progress-range:hover{height:10px}.video-progress-bar{background:#344642;border-radius:10px;height:100%;transition:all .5s ease;width:50%}.controls-left{flex:1;justify-content:flex-start;margin-left:15px}.play-controls{flex:1}.fa-pause:hover,.fa-play:hover{color:var(--primary-color);cursor:pointer}.volume-icon{cursor:pointer}.volume{flex:1}.volume-range{background:rgba(70,70,70,.5);border-radius:10px;cursor:pointer;height:8px;left:50px;position:relative;top:-21px;width:100px}.volume-bar{background:var(--font-color);border-radius:10px;height:100%;transition:width .2s ease-in;width:100%}.volume-bar:hover{background:var(--primary-color)}.controls-right{justify-content:flex-end;margin-right:15px}.time{color:#fff;flex:auto;font-weight:700;user-select:none}@media screen and (max-width:600px){.player{max-width:95vw;min-width:0}.fas{font-size:20px}.controls-container{height:50px}.progress-range{border-radius:0;left:0;top:0;width:100%}.video-progress-bar{border-radius:0}.volume-range{left:30px;top:-15px;width:50px}.speed,.time{top:3px}.time,select{font-size:12px}}@media screen and (max-width:900px) and (max-height:500px){.player{max-height:95vh;max-width:auto}}