/* FileBrowser Video.js controls: keep playback controls usable on desktop and mobile. */
#previewer .video-js {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.video-js .vjs-control-bar,
#previewer .video-js .vjs-control-bar {
  display: flex !important;
  transform: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 3.5em !important;
  z-index: 2147483646 !important;
  pointer-events: auto !important;
  background-color: rgba(0, 0, 0, 0.82) !important;
}

/* Follow normal media-player behavior: show on interaction, then fade away. */
.video-js.vjs-user-active .vjs-control-bar,
.video-js.vjs-paused .vjs-control-bar,
.video-js.vjs-waiting .vjs-control-bar,
.video-js.vjs-error .vjs-control-bar,
.video-js.vjs-ended .vjs-control-bar,
#previewer .video-js.vjs-error .vjs-control-bar {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,
#previewer .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease !important;
}

/* The codec error overlay must not cover or block the controls. */
#previewer .video-js .vjs-error-display,
#previewer .video-js .vjs-modal-dialog {
  bottom: 3.5em !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.video-js .vjs-big-play-button {
  z-index: 31 !important;
}

/* Make buffering and seeking visible, especially for large video files. */
.video-js.vjs-waiting .vjs-loading-spinner,
.video-js.vjs-seeking .vjs-loading-spinner,
#previewer .video-js.vjs-waiting .vjs-loading-spinner,
#previewer .video-js.vjs-seeking .vjs-loading-spinner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 5em !important;
  height: 5em !important;
  margin: -2.5em 0 0 -2.5em !important;
  z-index: 45 !important;
}

.video-js .vjs-text-track-display {
  bottom: 4.25em !important;
  z-index: 25 !important;
}

.video-js .vjs-text-track-cue > div,
.video-js video::cue {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.78) !important;
  font-family: Arial, "Noto Sans KR", sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px #000 !important;
}

@media (max-width: 640px) {
  .video-js .vjs-control-bar {
    height: 4em !important;
    font-size: 12px !important;
  }

  .video-js .vjs-text-track-display {
    bottom: 5em !important;
  }
}