/* faponhd.com Video.js player; copy of zagruz.tv zagruz-vjs.css */
#kt_player { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
#kt_player .video-js { width: 100%; height: 100%; }

/* Timeline thumbnails */
#kt_player .vjs-thumb-preview { position: absolute; bottom: 100%; margin-bottom: 26px; width: 180px; height: 100px; transform: translateX(-50%); background: #000 center / cover no-repeat; border: 2px solid #fff; border-radius: 3px; display: none; pointer-events: none; z-index: 2; }
#kt_player .vjs-progress-control:hover .vjs-thumb-preview.on { display: block; }

/* KVS-like skip button over the pre-roll */
#kt_player .vjs-kvs-skip { position: absolute; right: 0; bottom: 60px; z-index: 1200; display: none; padding: 10px 16px; background: rgba(0,0,0,.75); color: #fff; font: 14px/1.2 Arial, sans-serif; border: 1px solid rgba(255,255,255,.5); border-right: 0; cursor: default; user-select: none; }
#kt_player .vjs-kvs-skip.on { display: block; }
#kt_player .vjs-kvs-skip.ready { cursor: pointer; }
#kt_player .vjs-kvs-skip.ready:hover { background: rgba(0,0,0,.95); }
#kt_player .vjs-kvs-skip { bottom: 50px; padding: 12px 18px; font-size: 15px; }
#kt_player .vjs-kvs-skip.ready { background: rgba(0,0,0,.85); border-color: #fff; font-weight: bold; }

/* Related videos end screen */
#kt_player .vjs-related { position: absolute; inset: 0; z-index: 3; display: none; background: rgba(0,0,0,.88); overflow-y: auto; padding: 12px; box-sizing: border-box; }
#kt_player .vjs-related.on { display: block; }
#kt_player .vjs-related-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #fff; font: bold 15px Arial, sans-serif; }
#kt_player .vjs-related-replay { background: none; border: 1px solid #fff; color: #fff; padding: 6px 12px; border-radius: 3px; cursor: pointer; font: 13px Arial, sans-serif; }
#kt_player .vjs-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
#kt_player .vjs-related-item { display: block; color: #fff; text-decoration: none; }
#kt_player .vjs-related-item .thumb { display: block; width: 100%; padding-top: 60%; position: relative; background: #222 center / cover no-repeat; border-radius: 3px; }
#kt_player .vjs-related-item:hover .thumb { outline: 2px solid #fff; }
#kt_player .vjs-related-item .title { display: block; margin-top: 4px; font: 12px/1.3 Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kt_player .vjs-ad-playing .vjs-related { display: none; }

/* Big play button = KVS skin (player/skin/img/play_white.png), shown on start and on pause */
#kt_player .vjs-big-play-button { width: 120px; height: 120px; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; border-radius: 0; background: url(/player/skin/img/play_white.png) center / contain no-repeat transparent; opacity: .6; transition: opacity .15s; }
#kt_player .vjs-big-play-button .vjs-icon-placeholder { display: none; }
#kt_player .video-js:hover .vjs-big-play-button, #kt_player .vjs-big-play-button:focus { background-color: transparent; opacity: 1; }
#kt_player .vjs-has-started.vjs-paused .vjs-big-play-button { display: block; }
#kt_player .vjs-seeking .vjs-big-play-button, #kt_player .vjs-waiting .vjs-big-play-button, #kt_player .vjs-ad-playing .vjs-big-play-button, #kt_player .vjs-ended .vjs-big-play-button, #kt_player .vjs-scrubbing .vjs-big-play-button { display: none !important; }
@media screen and (max-width: 400px) { #kt_player .vjs-big-play-button { width: 20%; height: auto; aspect-ratio: 1; } }

/* Double tap +/-10s zones */
#kt_player .vjs-skips span { position: absolute; top: 0; bottom: 3em; width: 30%; z-index: 2; opacity: 0; -webkit-tap-highlight-color: transparent; }
#kt_player .vjs-skips .backward { left: 0; background: linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 50%); }
#kt_player .vjs-skips .forward { right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.5) 100%); }
#kt_player .vjs-skips span.flash { opacity: 1; transition: none; }
#kt_player .vjs-skips span.fade { opacity: 0; transition: opacity .5s; }
#kt_player .vjs-skips i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font: bold 24px Arial, sans-serif; font-style: normal; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
#kt_player .vjs-ad-playing .vjs-skips, #kt_player .vjs-ended .vjs-skips, #kt_player .video-js:not(.vjs-has-started) .vjs-skips { display: none; }
@media screen and (max-width: 767px) { #kt_player .vjs-skips span { width: 20%; } }
/* Control bar above the zones: its popup menus (quality, speed) open over them and closed on hover otherwise */
#kt_player .vjs-control-bar { z-index: 3; }

/* Embed code button (top right, like KVS .fp-embed) and dialog */
#kt_player .vjs-embed-btn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font: bold 14px/36px Arial, sans-serif; text-align: center; cursor: pointer; opacity: 0; transition: opacity .2s; }
#kt_player .vjs-embed-btn:hover { background: rgba(0,0,0,.9); }
#kt_player .vjs-ad-playing .vjs-embed-btn, #kt_player .vjs-embed-open .vjs-embed-btn { display: none; }
#kt_player .vjs-embed-box { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 12px; box-sizing: border-box; }
#kt_player .vjs-embed-open .vjs-embed-box { display: flex; }
#kt_player .vjs-embed-inner { position: relative; width: 100%; max-width: 520px; color: #fff; font: 14px/1.4 Arial, sans-serif; }
#kt_player .vjs-embed-inner b { display: block; margin-bottom: 8px; font-size: 16px; }
#kt_player .vjs-embed-close { position: absolute; top: -6px; right: 0; background: none; border: 0; color: #fff; font: 26px/1 Arial, sans-serif; cursor: pointer; }
#kt_player .vjs-embed-size { margin-bottom: 8px; }
#kt_player .vjs-embed-size select { margin-left: 6px; padding: 3px; font-size: 13px; color: #000; }
#kt_player .vjs-embed-code { display: block; width: 100%; height: 76px; box-sizing: border-box; padding: 6px; resize: none; border: 0; border-radius: 3px; font: 12px/1.4 monospace; color: #000; background: #fff; }
#kt_player .vjs-embed-copy { margin-top: 8px; padding: 7px 18px; border: 0; border-radius: 3px; background: #e30613; color: #fff; font: bold 13px Arial, sans-serif; cursor: pointer; }

/* Logo text link (embed: "watch full video on ..."), top left like KVS logo_text */
#kt_player .vjs-logo-link { position: absolute; top: 10px; left: 10px; z-index: 4; max-width: calc(100% - 70px); padding: 6px 10px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font: bold 13px/1.2 Arial, sans-serif; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
#kt_player .vjs-logo-link:hover { background: rgba(0,0,0,.9); }
#kt_player .vjs-ad-playing .vjs-logo-link { display: none; }

/* Overlay buttons visible before start, on pause and while the user is active */
#kt_player .vjs-paused .vjs-embed-btn, #kt_player .vjs-user-active .vjs-embed-btn, #kt_player .video-js:not(.vjs-has-started) .vjs-embed-btn,
#kt_player .vjs-paused .vjs-logo-link, #kt_player .vjs-user-active .vjs-logo-link, #kt_player .video-js:not(.vjs-has-started) .vjs-logo-link { opacity: 1; }

/* Related item duration badge */
#kt_player .vjs-related-item .duration { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 2px; background: rgba(0,0,0,.75); color: #fff; font: 11px/1.3 Arial, sans-serif; }

/* Quality menu (control bar): current quality as text instead of an icon */
#kt_player .vjs-quality-control { width: auto; }
#kt_player .vjs-quality-button { width: auto; min-width: 3.5em; padding: 0 .5em; }
#kt_player .vjs-quality-button .vjs-icon-placeholder { display: none; }
#kt_player .vjs-quality-value { font: bold 1.1em/3em Arial, sans-serif; white-space: nowrap; }
#kt_player .vjs-quality-control .vjs-menu { width: 7em; left: 50%; margin-left: -3.5em; }
#kt_player .vjs-quality-control .vjs-menu-content { width: 100%; }
