.site-player-blocker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.site-player-blocker p {
  display: none;
}
.site-player-blocker-background {
  margin: -4rem;
  padding: 4rem;
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px);
}
.site-player-blocker-background,
.site-player-blocker-background:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.site-player-blocker-background:after {
  z-index: 2;
  display: block;
  content: "";
  background: rgba(38, 35, 34, 0.6);
}
.site-player-blocker-background div {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.site-player-blocker-active {
  display: block;
}

.site-player-blocker-geoblock img {
  width: 4.6rem;
}
.site-player-blocker-geoblock h2 {
  margin: 0 0 1rem;
  font-size: 2.4rem;
  line-height: 3.2rem;
}

/* NEW STYLES START HERE -------------------------------------------- */

/* avoid stretching video */
#tvplay-player video {
  object-fit: contain !important;
}

#tvplay-player .jw-text {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

#tvplay-player .jw-controlbar {
  display: block;
  background-color: rgba(23, 23, 23, 0.64);
  border-radius: 6px;
  height: 79px;
  max-height: 79px;
  width: calc(100% - 40px);
  margin: 0 20px 20px 20px;
}

#tvplay-player .tvp-top-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 20px;
  padding: 0 12px;
}

#tvplay-player .jw-slider-time {
  height: 15px;
  padding: 0 12px;
}

#tvplay-player .jw-button-container {
  height: 44px;
}

/* Elapse and countdown times. */
#tvplay-player .jw-text-elapsed,
#tvplay-player .jw-text-countdown {
  font-size: 14px;
  color: white;
  height: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#tvplay-player .jw-text-duration {
  display: none;
}

/* custom added icon container */
#tvplay-player .jw-controlbar .jw-button-image {
  max-height: 20px;
}

#tvplay-player .jw-icon-rewind {
  display: none;
}

/* REPLACE PLAY ICON */
#tvplay-player .jw-icon-playback > svg {
  height: 20px;
  width: 20px;
}

#tvplay-player .jw-svg-icon-play path {
  display: none;
}
#tvplay-player .jw-svg-icon-play {
  height: 20px;
  width: 20px;
  background-image: url("/static/assets/player-play.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* REPLACE PAUSE ICON */
#tvplay-player .jw-svg-icon-pause path {
  display: none;
}
#tvplay-player .jw-svg-icon-pause {
  height: 20x;
  width: 20px;
  background-image: url("/static/assets/player-pause.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* REPLACE VOLUME ICONS */
#tvplay-player .jw-icon-volume {
  width: 40px;
  height: 44px;
}

#tvplay-player .jw-icon-volume > svg {
  height: 20px;
}

#tvplay-player .jw-svg-icon-volume-0 path {
  display: none;
}
#tvplay-player .jw-svg-icon-volume-0 {
  height: 20px;
  width: 40px;
  background-image: url("/static/assets/player-mute.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#tvplay-player .jw-svg-icon-volume-50 path {
  display: none;
}
#tvplay-player .jw-svg-icon-volume-50 {
  height: 20px;
  width: 40px;
  background-image: url("/static/assets/player-volume-half.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#tvplay-player .jw-svg-icon-volume-100 path {
  display: none;
}
#tvplay-player .jw-svg-icon-volume-100 {
  height: 20px;
  width: 40px;
  background-image: url("/static/assets/player-volume.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* VOLUME SLIDER */
#tvplay-player .jw-slider-volume {
  width: 32px;
  height: 124px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(23, 23, 23, 0.64);
}

/* Came with v8.8.0 */
#tvplay-player .jw-horizontal-volume-container {
  display: none;
}

#tvplay-player .jw-slider-volume .jw-rail {
  background-color: #878787;
  border-radius: 4.5px;
}

#tvplay-player .jw-slider-volume .jw-progress {
  background-color: #e3000b;
  border-radius: 4.5px;
}

#tvplay-player .jw-slider-volume .jw-knob {
  color: red;
  height: 16px;
  width: 16px;
  background-color: #e3000b;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

/* REPLACE SETTINGS ICON */
#tvplay-player .jw-svg-icon-settings path {
  display: none;
}
#tvplay-player .jw-svg-icon-settings {
  height: 20px;
  width: 40px;
  background-image: url("/static/assets/player-settings.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* REPLACE FULLSCREEN ICON */
#tvplay-player .jw-svg-icon-fullscreen-on path {
  display: none;
}
#tvplay-player .jw-svg-icon-fullscreen-on {
  height: 20px;
  width: 20px;
  background-image: url("/static/assets/player-fullscreen.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#tvplay-player .jw-svg-icon-fullscreen-off path {
  display: none;
}
#tvplay-player .jw-svg-icon-fullscreen-off {
  height: 20px;
  width: 20px;
  background-image: url("/static/assets/player-fullscreen.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ChromeCast button */
#tvplay-player .jw-icon-cast {
  height: 20px;
  width: 30px !important;
  /* background-image: url("/static/assets/player-chromecast.svg"); The element renders its own icon  */
}

/* Alt text container (e.g "Loading ad") */
#tvplay-player .jw-text-alt {
  white-space: nowrap;
  padding: 0 10px;
}

#tvplay-player .jw-text-alt:empty {
  padding: 0;
}

/* ORDERING */

#tvplay-player .jw-icon-playback {
  order: 1;
  display: flex;
}

#tvplay-player .jw-icon-rewind {
  order: 2;
}

#tvplay-player .jw-icon-next {
  order: 3;
}

#tvplay-player .jw-icon-volume {
  order: 4;
}

#tvplay-player .jw-text-live {
  order: 6;
}

#tvplay-player .jw-text-alt {
  order: 9;
}

#tvplay-player .jw-spacer {
  order: 10;
}

#tvplay-player .tvp-icon-favorite {
  order: 12;
}

#tvplay-player .jw-icon-cast {
  order: 13;
}

#tvplay-player .tvp-icon-share {
  order: 15;
}

/*
#tvplay-player .tvp-icon-episodes {
  order: 16;
}
*/

#tvplay-player .jw-icon-settings {
  order: 17;
}

#tvplay-player .jw-icon-fullscreen {
  order: 18;
}

#tvplay-player .tvp-icon-favorite {
  width: 40px;
  height: 20px;
}
#tvplay-player .tvp-icon-favorite.tvp-icon-favorite-active > .jw-button-image {
  background-image: url("/static/assets/watchlist-active-pink.svg") !important;
  background-size: contain;
  background-position: center center;
}

/* Slider styles */
#tvplay-player .jw-slider-time .jw-slider-container {
  height: 8px;
  border-radius: 4.5px;
  background-color: #878787;
}

#tvplay-player .jw-slider-time .jw-rail {
  height: 8px;
  border-radius: 4.5px;
  background-color: #878787;
  top: auto;
  transform: none; /*translateY(-50%);*/
}

#tvplay-player .jw-slider-time .jw-buffer {
  height: 8px;
  border-radius: 4.5px;
  background-color: #dbdbdb;
  top: auto;
  transform: none; /*translateY(-50%);*/
}

#tvplay-player .jw-slider-time .jw-progress {
  height: 8px;
  border-radius: 4.5px;
  background-color: #e3000b;
  top: auto;
  transform: none; /*translateY(-50%);*/
}

#tvplay-player .jw-slider-time .jw-cue {
  height: 8px;
  background-color: #f9e333;
  min-width: 8px;
  top: auto;
  transform: none;
}

#tvplay-player .jw-slider-time .jw-knob {
  color: red;
  height: 16px;
  width: 16px;
  background-color: #e3000b;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

/* floating hints */
#tvplay-player .jw-tooltip,
#tvplay-player .jw-time-tip {
  border-radius: 6px;
  background-color: #353535;
}

#tvplay-player .jw-tooltip .jw-text,
#tvplay-player .jw-time-tip .jw-text {
  background: transparent;
  color: #b2b2b2;
  font-size: 16px;
}

#tvplay-player .jw-tooltip::after,
#tvplay-player .jw-time-tip::after {
  display: none; /* hide the arrows pointing towards the source of the hint */
}

#tvplay-player .jw-time-tip {
  margin: 0 0 7px; /* place the floating time tip so it overlaps a bit with controlbar */
}

#tvplay-player .jw-tooltip {
  margin: 0;
}

/* HIDE SOME ICONS IN SMALL PLAYER */
#tvplay-player.jw-breakpoint-0 .jw-icon-cc,
#tvplay-player.jw-breakpoint-1 .jw-icon-cc,
#tvplay-player.jw-breakpoint-2 .jw-icon-cc,
#tvplay-player.jw-breakpoint-3 .jw-icon-cc,
/* uncomment if share button should not be shown for small screens */
/* #tvplay-player.jw-breakpoint-0 .tvp-icon-share,
#tvplay-player.jw-breakpoint-1 .tvp-icon-share,
#tvplay-player.jw-breakpoint-2 .tvp-icon-share,
#tvplay-player.jw-breakpoint-3 .tvp-icon-share, */
#tvplay-player.jw-breakpoint-0 .tvp-icon-episodes,
#tvplay-player.jw-breakpoint-1 .tvp-icon-episodes,
#tvplay-player.jw-breakpoint-2 .tvp-icon-episodes,
#tvplay-player.jw-breakpoint-3 .tvp-icon-episodes,
#tvplay-player.jw-breakpoint-0 .tvp-icon-favorite,
#tvplay-player.jw-breakpoint-1 .tvp-icon-favorite,
#tvplay-player.jw-breakpoint-2 .tvp-icon-favorite,
#tvplay-player.jw-breakpoint-3 .tvp-icon-favorite {
  display: none !important;
}

#tvplay-player #player-share-container {
  font-family: "Montserrat", sans-serif;
}

#video-player-wrapper.site-player.share-open .jw-breakpoint-0 .jw-controlbar,
#video-player-wrapper.site-player.share-open .jw-breakpoint-1 .jw-controlbar,
#video-player-wrapper.site-player.share-open .jw-breakpoint-2 .jw-controlbar,
#video-player-wrapper.site-player.share-open .jw-breakpoint-3 .jw-controlbar {
  display: none;
}

#tvplay-player.jw-flag-user-inactive:not(.jw-state-paused) .jw-captions {
  top: 6%;
}

/* SETTINGS MENU */

#tvplay-player .jw-settings-menu {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(23, 23, 23, 0.64);
  border-radius: 6px;
  z-index: 100;
}

#tvplay-player .jw-settings-topbar {
  background: transparent;
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}

#tvplay-player .jw-settings-topbar > div {
  font-size: 14px;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
  font-family: "Montserrat", sans-serif;
  width: auto;
  height: 30px;
  margin: 0 5px;
}

#tvplay-player .jw-settings-topbar > div[aria-checked="true"] {
  font-weight: 600;
}

#tvplay-player .jw-settings-topbar > div[aria-checked="true"]::after {
  width: 100%;
}

#tvplay-player .jw-settings-submenu .jw-settings-content-item {
  text-align: center;
  font-size: 14px;
  color: white;
  font-family: "Montserrat", sans-serif;
  opacity: 0.6;
}

#tvplay-player .jw-settings-submenu-captions .jw-submenu-topbar {
  display: none;
}

#tvplay-player
  .jw-settings-submenu
  .jw-settings-content-item.jw-settings-item-active {
  opacity: 1;
}

/* Move settings menu close button to bottom right */
#tvplay-player .jw-settings-close {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 11px;
}

/* Hide subtitles button from main control bar */
#tvplay-player .jw-icon-cc.jw-settings-submenu-button {
  display: none;
}

#tvplay-player .jw-text-live {
  font-weight: normal;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: white;
}

#tvplay-player .jw-text-live::before {
  background-color: #e3000b;
}

/* Play/Buffering/Replay button in the middle, container. svg in the middle */
#tvplay-player .jw-icon-display {
  width: 94px;
  height: 94px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 100%;
}

.video-description-container {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.video-description-container.hidden {
  opacity: 0;
}

#tvplay-player .js-has-pause-banner {
  bottom: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Prevent JWP detecting ad-block with reasonable scaling (Chrome) */
#tvplay-player .afs_ads {
  width: 10px !important;
  height: 10px !important;
}

/* Player control bar styles for smaller screens*/
@media screen and (max-width: 767px) {
  #tvplay-player .jw-icon,
  #tvplay-player .jw-text-alt {
    transform: scale(0.8);
    transform-origin: left;
  }

  #tvplay-player .jw-text-countdown,
  #tvplay-player .jw-icon-fullscreen,
  #tvplay-player .tvp-icon-share {
    transform-origin: right;
  }

  #tvplay-player .jw-icon-display {
    transform-origin: center;
  }

  #tvplay-player .tvp-icon-share > .jw-button-image {
    max-height: 24px;
  }

  #tvplay-player .jw-controlbar {
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: 50px;
  }

  #tvplay-player .tvp-top-container {
    width: 100%;
    padding: 0 6px;
  }

  /* In DOM the slider element is in the div after 
   * 'div.tvp-top-container' (containing elapsed & total time)
   * However on mobile we need the slider to look like it's between
   * elapsed and total time. Thus relative positioning and moving it
   * upwards by 20px.
   * z-index is necessary so that 'div.jw-button-container' elements
   * can show interactable content above time slider (e.g volume slider)
   */
  #tvplay-player .jw-slider-time {
    padding: 0 6px;
    margin: 0 45px;
    position: relative;
    height: 20px;
    top: -20px;
    width: calc(100% - 90px);
    z-index: 1;
  }

  /* 
   * Shifting upwards by 20px because relative positioning of 'div.jw-slider-time'
   * leaves 20px of empty space.
   * This leaves empty space under this element as well, however player overflow:hidden
   * takes care of this.
   */
  #tvplay-player .jw-button-container {
    padding: 0;
    height: 25px;
    position: relative;
    top: -20px;
    z-index: 2;
  }
}