/* theme lines */
.video-autoplay-overlay-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; box-sizing: border-box; background-color: rgba(0,0,0,0.3); color: rgba(255, 255, 255, 0.75); text-align: center; font-family: sans-serif; font-size: 20px; line-height: 1.4; padding: 20px; cursor: pointer; transition: background-color 300ms; }
.video-autoplay-overlay-top-lines { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 80px; padding: 0 30px; text-align: center; background-color: transparent !important; color: #fff; font-size: 20px; line-height: 60px; box-sizing: border-box; pointer-events: none; }
.video-autoplay-overlay-bottom-lines { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; padding: 62px 15px 0 15px; background-color: transparent !important; color: #000; font-size: 20px; box-sizing: border-box; }
.video-autoplay-overlay-play-lines { display: none; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; background-color: transparent !important; background: url('play-circle-small.html') no-repeat 50% 50% transparent; color: #fff; box-sizing: border-box; border-radius: 50%; pointer-events: none; }
.video-autoplay-paused .video-autoplay-overlay-lines { background-color: rgba(0,0,0,0.5); }
.video-autoplay-paused .video-autoplay-overlay-bottom-lines { padding: 42px 30px 0 30px; }
.video-autoplay-paused .video-autoplay-overlay-top-lines { display: block; }
.video-autoplay-paused .video-autoplay-overlay-play-lines { display: block; }
.video-autoplay-paused .video-autoplay-overlay-lines { background-color: rgba(0,0,0,0.3) !important; }

.video-autoplay-overlay-bottom-lines .video-autoplay-progress { position: relative; height: 4px; width: calc(100% - 75px); background-color: #fff; }
.video-autoplay-overlay-bottom-lines .video-autoplay-progress:before { content: ''; display: block; height: 8px; width: 100%; position: absolute; left: 0; top: 100%; }
.video-autoplay-overlay-bottom-lines .video-autoplay-progress:after { content: ''; display: block; height: 8px; width: 100%; position: absolute; left: 0; bottom: 100%; }
.video-autoplay-overlay-bottom-lines .video-autoplay-progress-line { position: relative; height: 4px; width: 0; background-color: #00b3ff; pointer-events: none; }
.video-autoplay-overlay-bottom-lines .video-autoplay-progress-line:after { content: ''; display: block; width: 2px; height: 16px; position: absolute; left: 100%; top: -6px; margin-left: -1px; background: #fff; pointer-events: none; }
.video-autoplay-paused .video-autoplay-overlay-bottom-lines .video-autoplay-progress { width: calc(100% - 60px); }

.video-autoplay-overlay-full-screen-button-lines { right: 14px; bottom: 14px; }
.video-autoplay-paused .video-autoplay-overlay-full-screen-button-lines { bottom: 24px; }

.video-autoplay-overlay-volume-button-lines { right: 55px; bottom: 14px; }
.video-autoplay-paused .video-autoplay-overlay-volume-button-lines { bottom: 24px; }
.video-autoplay-overlay-volume-lines { box-sizing: border-box; background-color: rgba(255,255,255,0.6) !important; }
.video-autoplay-overlay-volume-lines input[type=range] { -webkit-appearance: none; height: 18px; width: 100%; background-color: transparent; }
.video-autoplay-overlay-volume-lines input[type=range]:focus { outline: none; }
.video-autoplay-overlay-volume-lines input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background-color: rgba(0,0,0,0.3); }
.video-autoplay-overlay-volume-lines input[type=range]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background-color: rgba(0,0,0,0.3); }
.video-autoplay-overlay-volume-lines input[type=range]::-ms-track { width: 100%; height: 4px; cursor: pointer; background-color: rgba(0,0,0,0.3); }
.video-autoplay-overlay-volume-lines input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 2px; border-radius: 0; background: #ffffff; cursor: pointer; margin-top: -5px; box-shadow: 0 0 4px rgba(0,0,0,0.4); }
.video-autoplay-overlay-volume-lines input[type=range]::-moz-range-thumb { -webkit-appearance: none; height: 14px; width: 2px; border-radius: 0; background: #ffffff; cursor: pointer; margin-top: -5px; box-shadow: 0 0 4px rgba(0,0,0,0.4); }
.video-autoplay-overlay-volume-lines input[type=range]::-ms-thumb { -webkit-appearance: none; height: 14px; width: 2px; border-radius: 0; background: #ffffff; cursor: pointer; margin-top: -5px; box-shadow: 0 0 4px rgba(0,0,0,0.4); }