/*!
 * hhud player css customizations
 *  https://developer.jwplayer.com/jw-player/docs/developer-guide/jw7/skins_reference/
 */

/*general styles for player*/

/* set background overlay color when player is idle, complete or on error */
.jwplayer.jw-skin-hhud.jw-state-idle .jw-controls, .jwplayer.jw-skin-hhud.jw-state-complete .jw-controls, .jwplayer.jw-skin-hhud.jw-error .jw-controls {
  background: rgba(198, 198, 198, 0.50);
}

.jwplayer.jw-skin-hhud .jw-info-overlay {
  background: rgba(255, 255, 255, 0.65);
}

/* set background overlay color when player is paused */
.jwplayer.jw-skin-hhud.jw-state-paused .jw-controls {
  background-color: none;
}

/* set centered play and replay button */
.jwplayer.jw-skin-hhud .jw-display-controls .jw-display-icon-container {
  background: rgba(238,238,238,0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  border: 0 solid transparent;
  border-radius: 3px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

.jwplayer.jw-skin-hhud .jw-display-controls .jw-display-icon-container .jw-icon {
  width: 2.5em;
  height: 2.5em;
  padding: 0.6em;
}

/* Shrink play and replay button on smaller breakpoints for mobile devices 
.jwplayer.jw-skin-hhud.jw-breakpoint-3 .jw-display-controls .jw-display-icon-container .jw-icon,
.jwplayer.jw-skin-hhud.jw-breakpoint-2 .jw-display-controls .jw-display-icon-container .jw-icon {
  height: 40px;
  width: 40px;
  padding: 10px;
}

.jwplayer.jw-skin-hhud.jw-breakpoint-1 .jw-display-controls .jw-display-icon-container .jw-icon,
.jwplayer.jw-skin-hhud.jw-breakpoint-0 .jw-display-controls .jw-display-icon-container .jw-icon {
  height: 20px;
  width: 20px;
  padding: 10px;
}*/

.jwplayer.jw-skin-hhud .jw-button-color, .jwplayer.jw-skin-hhud :not(.jw-flag-touch) .jw-button-color:focus:not(.jw-logo-button) {
  color: #666;
}

.jwplayer.jw-skin-hhud .jw-button-color:hover, .jwplayer.jw-skin-hhud :not(.jw-flag-touch) .jw-button-color:hover:not(.jw-logo-button) {
  color: #266ab3;
}

/* general control bar settings */
.jwplayer.jw-skin-hhud .jw-controlbar {
  background-color: rgba(238,238,238,0.8);
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-text {
  color: #666;
}

/* set control bar buttons */
.jwplayer.jw-skin-hhud .jw-controlbar .jw-button-container .jw-button-color {
  color: #666;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-button-container .jw-button-color:hover {
  color: #266ab3;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-button-container .jw-icon-rewind {
    /*display:none;*/
}

.jwplayer.jw-skin-hhud .hhud-skipbackward {
    width: 34px;
}

.jwplayer.jw-skin-hhud .hhud-skipbackward .jw-button-image:hover {
    background-image:url('/images/skipbackward_hover.png') !important;
}

.jwplayer.jw-skin-hhud .hhud-skipforward {
    width: 34px;
}

.jwplayer.jw-skin-hhud .hhud-skipforward .jw-button-image:hover {
    background-image:url('/images/skipforward_hover.png') !important;
}

.jwplayer.jw-skin-hhud .hhud-theatermode {
    width: 28.5px;
}

.watch-player-theatermode {
    width: 100% !important;
    height: 546px !important;
}

.watch-sidebar-theatermode {
    margin-top: 0 !important;
}

.jwplayer.jw-skin-hhud .hhud-theatermode.theater-on .jw-button-image {
    background-image:url('/images/defaultmode.png') !important;
}

.jwplayer.jw-skin-hhud .hhud-theatermode.theater-on .jw-button-image:hover {
    background-image:url('/images/defaultmode_hover.png') !important;
}

.jwplayer.jw-skin-hhud .hhud-theatermode .jw-button-image:hover {
    background-image:url('/images/theatermode_hover.png') !important;
}

/* customize colors of timeslider */
.jwplayer.jw-skin-hhud .jw-slider-time {
   padding: 0 4px
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-slider-time .jw-slider-container .jw-rail {
  background-color: rgba(102, 102, 102, 1);
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-slider-time .jw-slider-container .jw-buffer {
  background-color: #c0ccf2;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-slider-time .jw-slider-container .jw-progress {
  background-color: #266ab3;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-slider-time .jw-slider-container .jw-knob {
  background-color: #666;
  box-shadow: none;
}

.jwplayer.jw-skin-hhud .jw-slider-time .jw-rail,
.jwplayer.jw-skin-hhud .jw-slider-time .jw-buffer,
.jwplayer.jw-skin-hhud .jw-slider-time .jw-progress,
.jwplayer.jw-skin-hhud .jw-slider-time .jw-cue {
    -webkit-transform: translate(0, -50%) scale(1, 1);
    transform: translate(0, -50%) scale(1, 1);
}

.jwplayer.jw-skin-hhud .jw-slider-time .jw-cue {
    background-color: rgba(238,238,238,0.8);
}

.jwplayer.jw-skin-hhud:not(.jw-breakpoint-0) .jw-text-duration::before {
    content: "";
    padding-right: 0;
    padding-left: 0;
}

.jwplayer.jw-skin-hhud .jw-text-elapsed {
    padding-left: 10px;
}

.jwplayer.jw-skin-hhud .jw-text-duration {
    padding-right: 10px;
}

/* customize video title */
.jwplayer.jw-skin-hhud.jw-state-idle .jw-title {
  height: 100%;
}

.jwplayer.jw-skin-hhud.jw-state-complete .jw-title .jw-title-primary {
  display: none;
}

.jwplayer.jw-skin-hhud .jw-title-primary {
  font-size: 0.90em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  padding: 0 20px 5px;
  color: rgba(102, 102, 102, 0.85);
  font-weight: 500;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  transition: opacity 0.2s, transform 0.35s;
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.jwplayer.jw-skin-hhud .jw-title-secondary {
  font-size: 0.75em;
  padding: 0 20px;
  color: #666;
  font-weight: 500;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

/* customize colors of volume control  */
.jwplayer.jw-skin-hhud .jw-volume-tip {
    margin-bottom: 13px;
    background-color: rgba(255, 255, 255, .65);
    padding: 13px 0 13px;
}

.jwplayer.jw-skin-hhud .jw-overlay .jw-slider-volume .jw-slider-container .jw-rail {
  background-color: #c0ccf2;
}

.jwplayer.jw-skin-hhud .jw-overlay .jw-slider-volume .jw-slider-container .jw-buffer {
  background-color: #c0ccf2;
}

.jwplayer.jw-skin-hhud .jw-overlay .jw-slider-volume .jw-slider-container .jw-progress {
  background-color: #266ab3;
}

.jwplayer.jw-skin-hhud .jw-overlay .jw-slider-volume .jw-slider-container .jw-knob {
    background-color: #666;
    box-shadow: none;
}

/* customize colors/opacity of the settings menu */
.jwplayer.jw-skin-hhud .jw-settings-menu {
  background-color: transparent;
  width: 180px;
}

.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-topbar {
  background-color: rgba(238,238,238,0.8);
}

.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-topbar .jw-icon:hover {
  color: #266ab3;
}

.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-submenu {
  background-color: rgba(255, 255, 255, .65);
}

.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-content-item {
  color: #666;
}

.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-content-item:hover,
.jwplayer.jw-skin-hhud .jw-settings-menu .jw-settings-item-active {
  color: #266ab3;
  font-weight: bold;
}

.jwplayer.jw-skin-hhud .jw-info-container, .jwplayer.jw-skin-hhud .jw-info-title, .jwplayer.jw-skin-hhud .jw-info-duration, .jwplayer.jw-skin-hhud .jw-info-clientid, .jwplayer.jw-skin-hhud .jw-info-description {
    color: #666 !important;
}

/* customize tooltips */
.jwplayer.jw-skin-hhud .jw-controlbar .jw-tooltip {
  bottom: 70%;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-tooltip .jw-open {
  border-radius: 3px;
  color: #666;
  border: 0;
}

.jwplayer.jw-skin-hhud .jw-controlbar .jw-tooltip .jw-text, .jwplayer.jw-skin-hhud .jw-settings-menu .jw-tooltip .jw-text,
.jwplayer.jw-skin-hhud .jw-controlbar .jw-time-tip .jw-text
 {
  border-radius: 3px;
  color: #666;
  border: 0;
}

/* customize rightclick menu */
.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-rightclick-item {
  background-color: rgba(255, 255, 255, .65);
  border-bottom: 1px solid #666;
}

.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-rightclick-item .jw-rightclick-link {
  color: #666;
}

.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-featured .jw-rightclick-link span,
.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-rightclick-item .jw-rightclick-link:hover {
  color: #266ab3;
}

.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-rightclick-item button.jw-rightclick-link,
.jwplayer.jw-skin-hhud .jw-rightclick .jw-rightclick-list .jw-rightclick-item button.jw-rightclick-link {
    font-size:11px;
    font-weight:bold;
    color: #666;
}