/* DESIGN PACK VERSION: 3.0.4 */
/*************************************/
/* Default custom skin (BWA version) */
/*************************************/

.vjs-control-bar {
  opacity: 1!important;
}

.vjs-default-skin .vjs-tech {
  height: 100%!important;
}

/* Poster */

.video-player {
  position: relative;
}

.vjs-default-skin .vjs-big-play-button {
  display: none;
}

.vjs-default-skin {
  min-height: 300px;
}


/* Control bar */

.vjs-default-skin .vjs-control-bar {
  height: 80px;
  background: #202020;
  color: #cccccc;
  transition: none;
  align-items: center;
  padding: 15px;
}

.vjs-default-skin.vjs-paused:not(:hover) .vjs-control-bar {
  opacity: 0;
}

.vjs-default-skin .vjs-control {
  width: auto;
}


/* Play/Pause */

.vjs-default-skin .vjs-play-control .vjs-icon-placeholder::before,
.vjs-default-skin .vjs-play-control.vjs-playing .vjs-icon-placeholder::before,
.vjs-default-skin .vjs-icon-play::before,
.vjs-default-skin .vjs-icon-pause::before {
  display: none;
}

.vjs-default-skin .vjs-play-control {
  background: url("../images/icon-play.png") no-repeat top left;
  width: 50px;
  height: 50px;
  margin-right: 1em;
  order: -1;
}

.vjs-default-skin.vjs-playing .vjs-play-control {
  background-image: url("../images/icon-pause.png");
}


/* Progress */

.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
.vjs-default-skin .vjs-play-progress::before,
.vjs-default-skin .vjs-volume-level::before,
.vjs-default-skin .vjs-icon-circle::before {
  display: none;
}

.vjs-default-skin .vjs-progress-holder {
  height: 16px;
  background-color: #a9abac;
}

.vjs-default-skin .vjs-progress-holder .vjs-play-progress {
  background-color: #d7d8d9;
}

.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
  width: 4em;
}

.vjs-default-skin .vjs-progress-control {
  order: -1;
  margin-right: 2em;
}

.vjs-default-skin .vjs-progress-control .vjs-mouse-display {
  background-color: #c04cd3;
}

.vjs-default-skin .vjs-play-progress.vjs-slider-bar:before {
  content: '';
  display: block;
  width: 15px;
  background-color: #c04cd3;
  height: 100%;
  width: 14px;
  position: absolute;
  top: 0;
  right: -14px;
}


/* Remaining time */

.vjs-default-skin .vjs-duration,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-current-time {
  display: block;
  font-size: 16px;
}

.vjs-default-skin .vjs-current-time {
  padding-right: 0;
}

.vjs-default-skin .vjs-time-divider {
  padding: 0;
  text-align: center;
}

.vjs-default-skin .vjs-duration {
  padding-left: 0;
  margin-right: 2em;
}


/* Live */

.vjs-default-skin .vjs-remaining-time,
.vjs-default-skin .vjs-seek-to-live-control {
  display: none;
}


/* Full screen */

.vjs-default-skin .vjs-fullscreen-control {
  width: 42px;
  margin-right: 10em;
  overflow: hidden;
  order: 1;
}

.vjs-default-skin .vjs-fullscreen-control .vjs-icon-placeholder::before {
  display: none;
}

.vjs-default-skin .vjs-fullscreen-control .vjs-icon-placeholder {
  display: block;
  margin: 0 auto;
  background: url(../images/icon-fullscreen.png) no-repeat center center;
  width: 35px;
  height: 36px;
}


/* Volumen */


.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal,
.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vjs-default-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
  opacity: 1;
  width: 15%;
  min-width: 10em;
}

.vjs-default-skin .vjs-volume-panel {
  align-items: center;
  order: 2;
}

.vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: none;
  margin-left: 2em;
}

.vjs-default-skin .vjs-volume-bar {
  width: 100%;
  margin: 0;
  background-color: #bbbdc0;
}

.vjs-default-skin .vjs-volume-level {
  background-color: #c04cd3;
}

.vjs-default-skin .vjs-volume-level,
.vjs-default-skin .vjs-volume-bar {
  height: 8px;
}

.vjs-default-skin .vjs-volume-bar.vjs-slider-horizontal {
  visibility: visible;
}

.vjs-default-skin .vjs-mute-control {
  opacity: 1;
  background: url(../images/icon-volume.png) no-repeat 0 0px;
  width: 35px !important;
  height: 36px;
}

.vjs-default-skin .vjs-mute-control .vjs-icon-placeholder:before {
  display: none;
}

.vjs-default-skin .vjs-mute-control.vjs-vol-0 {
  background-position: 0 -106px;
}

.vjs-default-skin .vjs-mute-control.vjs-vol-1 {
  background-position: 0 -69px;
}

.vjs-default-skin .vjs-mute-control.vjs-vol-2 {
  background-position: 0 -34px;
}

.vjs-default-skin .vjs-volume-panel .vjs-volume-control,
.vjs-default-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-default-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
  opacity: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  height: 42px;
  width: auto;
}


/* Volume dragger */

.vjs-default-skin .vjs-volume-level::after {
  content: '';
  display: block;
  width: 10px;
  height: 20px;
  margin-top: 5px;
  position: absolute;
  top: 0;
  right: -5px;
  transform: translateY(-50%);
  background: white;
  border-radius: 5px;
}


/* Transcript */

.vjs-default-skin .transcript-button {
  background: url(asset_path("gel/video-transcript.png")) no-repeat center center;
  width: 42px;
  cursor: pointer;
  overflow: visible;
}

.vjs-default-skin .transcript-button .vjs-icon-placeholder,
.vjs-default-skin .transcript-button .vjs-control-text-transcript,
.vjs-default-skin .transcript-button .vjs-control-text {
  display: none;
}

.vjs-default-skin .transcript-download {
  background: url(asset_path("gel/video-download.png")) no-repeat center center;
  width: 42px;
  cursor: pointer;
  overflow: visible;
}

.vjs-default-skin .transcript-download .vjs-control-text-download {
  display: none;
}

.vjs-default-skin .transcript-download a {
  opacity: 0;
}

.vjs-default-skin.vjs-fullscreen .transcript-button {
  display: none;
}


/* Tooltips */

.vjs-default-skin .vjs-mute-control .vjs-control-text {
  display: none;
}

.vjs-default-skin .vjs-fullscreen-control::before,
.vjs-default-skin .vjs-control-text-transcript,
.vjs-default-skin .vjs-control-text-download {
  height: 29px;
  padding: 7px;
  position: absolute;
  background: #fff;
  border: 1px solid #63676B;
  border-radius: 0;
  color: #333;
}

.vjs-default-skin .vjs-control-text,
.vjs-default-skin .vjs-fullscreen-control::before,
.vjs-default-skin .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.vjs-default-skin .vjs-progress-control:hover .vjs-time-tooltip,
.vjs-default-skin .vjs-control-text-transcript,
.vjs-default-skin .vjs-control-text-download {
  font-family: source-sans-pro,sans-serif;
  font-size: 14px;
}

.vjs-default-skin .vjs-control-text::after,
.vjs-default-skin .vjs-fullscreen-control::after,
.vjs-default-skin .vjs-control-text-transcript::after,
.vjs-default-skin .vjs-control-text-download::after {
  content: '';
  display: block;
  width: 20px;
  height: 6px;
  background-image: url(asset_path("gel/video-balloon.png"));
  background-position: center bottom;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.vjs-default-skin .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip {
  display: none; /* Hide play progress to show the progress pointer tooltip alone */
}

/* Tooltips Time */

.vjs-default-skin .vjs-time-tooltip {
  display: none;
}

/* Tooltips Fullscreen / Mute */

.vjs-default-skin .vjs-fullscreen-control:hover::before,
.vjs-default-skin .vjs-control-text-transcript,
.vjs-default-skin .vjs-control-text-download {
  overflow: visible;
  clip: auto;
  width: auto;
  transform: translateX(-50%);
  left: 0;
}

/* Tooltip Transcript */

.vjs-default-skin .vjs-control-text-transcript,
.vjs-default-skin .vjs-control-text-download {
  top: -16px;
  margin-left: 21px;
}

.vjs-default-skin .vjs-control-text-download {
  padding-top: 3px;
  font-size: 10px;
}


/* Transcript */

.transcript.scrollbar {
  height: 120px;
  margin-top: 20px;
}