/* ---------------------------------------------------------------------------
 * A calmer skin for the player.
 *
 * The default video.js look is a blue-tinted bar with a rectangular play badge.
 * This keeps every control where a viewer expects it and only changes how they
 * are drawn: a round centre button, a bar that floats over a gradient instead of
 * a solid block, and a progress line thick enough to grab on a phone.
 * ------------------------------------------------------------------------- */

.video-js {
  font-family: inherit;
}

/* ---- the centre play button --------------------------------------------- */

.video-js .vjs-big-play-button {
  align-items: center;
  background: rgba(18, 18, 20, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  height: 84px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  margin: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.18s ease, transform 0.18s ease;
  width: 84px;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  font-size: 40px;
  left: 2px;              /* the glyph is optically off-centre in the font */
  position: relative;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  background: rgba(220, 32, 44, 0.92);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 767.98px) {
  .video-js .vjs-big-play-button {
    height: 68px;
    width: 68px;
  }

  .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
    font-size: 32px;
  }
}

/* ---- the control bar ----------------------------------------------------- */

.video-js .vjs-control-bar {
  align-items: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  height: 4.2em;
  padding: 0 0.4em;
}

.video-js .vjs-button > .vjs-icon-placeholder::before {
  line-height: 2.4;
}

/* a 3px line is hard to hit with a thumb */
.video-js .vjs-progress-control {
  align-items: center;
  display: flex;
  height: 100%;
}

.video-js .vjs-progress-holder {
  height: 5px;
  transition: height 0.15s ease;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  height: 9px;
}

.video-js .vjs-play-progress {
  background-color: #dc202c;
}

.video-js .vjs-play-progress::before {
  font-size: 0.95em;
  top: -0.32em;
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
  background: rgba(255, 255, 255, 0.28);
}

.video-js .vjs-slider {
  background-color: rgba(255, 255, 255, 0.22);
}

.video-js .vjs-volume-level {
  background-color: #fff;
}

/* ---- time, menus, spinner ------------------------------------------------ */

.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider {
  display: block;
  font-size: 0.95em;
  padding: 0 0.3em;
}

@media (max-width: 480px) {
  .video-js .vjs-time-divider,
  .video-js .vjs-duration {
    display: none;      /* a phone bar has no room for both */
  }
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background: rgba(18, 18, 20, 0.94);
  border-radius: 8px;
  overflow: hidden;
}

.video-js .vjs-menu li.vjs-selected {
  background: #dc202c;
  color: #fff;
}

.video-js .vjs-loading-spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #dc202c;
}

/* the poster should not sit behind a letterbox of a different colour */
.video-js .vjs-poster {
  background-size: cover;
}