.CustomVideoControls{color:#f5f5f5;font-size:60px;font-weight:bolder;position:absolute;top:200px;right:100px}.controls{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4));height:42px;width:95%;max-width:650px;padding:10px;position:absolute;top:79%;left:50%;transform:translate(-50%,-50%)}.control-button{background-repeat:no-repeat;overflow:hidden;background:none;border:none;border-radius:5px;cursor:pointer;outline:none;display:flex;justify-content:center;align-items:flex-start}.control-button svg{width:15px}.controls-grid{display:grid;grid-template-columns:2fr repeat(5,1fr);margin-top:16px}.volume{margin-top:9px}.progress-bar{width:100%;align-items:center;height:3px;margin-top:10px;background-color:gray;display:flex;position:absolute;top:0;left:0;cursor:pointer;transition:all .2s}.progress-bar:hover{height:5px}.progress-fill{height:100%;width:50%;background-color:pink;transition:all .1s}.click{cursor:pointer}.time{font-size:13px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;border-radius:4px;margin-bottom:15px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:pink;height:15px;width:15px;border-radius:15px;cursor:pointer}@media screen and (max-width:720px){.controls{width:90%;top:49%;left:49.9%}}@media screen and (min-device-width:600px) and (max-device-width:1280px){.controls{width:90%;top:49%;left:49.9%}}.VideoPlayer{width:100%;height:70vh;background-color:#000;border-top:1px solid #585c34;border-bottom:1px solid #585c34}.VideoPlayer video{height:100%;width:100%}.VideoPlayer video:focus{outline:none}@media (max-width:720px){.VideoPlayer{margin-top:12%;height:34vh;padding-top:2.5vh;top:30%}.VideoPlayer video{width:95%}}@media (min-device-width:600px) and (max-device-width:1280px){.VideoPlayer{margin-top:9%;height:34vh;padding-top:2.5vh;top:30%}.VideoPlayer video{max-width:95%}}