/* Replace icons */
.jwplayer.jw-skin-default .jw-svg-icon-play path,
.jwplayer.jw-skin-default .jw-svg-icon-pause path,
.jwplayer.jw-skin-default .jw-svg-icon-next path,
.jwplayer.jw-skin-default .jw-svg-icon-rewind path,
.jwplayer.jw-skin-default .jw-svg-icon-volume-0 path,
.jwplayer.jw-skin-default .jw-svg-icon-volume-50 path,
.jwplayer.jw-skin-default .jw-svg-icon-volume-100 path,
.jwplayer.jw-skin-default .jw-svg-icon-quality-100 path,
.jwplayer.jw-skin-default .jw-svg-icon-floating-close path,
.jwplayer.jw-skin-default .jw-svg-icon-settings path,
.jwplayer.jw-skin-default .jw-svg-icon-fullscreen-on path,
.jwplayer.jw-skin-default .jw-svg-icon-fullscreen-off path,
.jwplayer.jw-skin-default .jw-svg-icon-pip-on path,
.jwplayer.jw-skin-default .jw-svg-icon-pip-off path,
.jwplayer.jw-skin-default .jw-svg-icon-close path,
.jwplayer.jw-skin-default .jw-svg-icon-cc-off path,
.jwplayer.jw-skin-default .jw-svg-icon-cc-on path {
  display: none;
}

/* Control icons center of the player */

.jwplayer.jw-skin-default .jw-controls .jw-display .jw-display-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-display-icon-next {
  display: none !important;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-icon-forwards {
  height: inherit !important;
  width: inherit !important;
}

.jwplayer.jw-state-buffering .jw-display-icon-forwards,
.jwplayer.jw-state-idle .jw-display-icon-forwards {
  display: none !important;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display {
  border-radius: 50%;
  height: 80px;
  width: 80px;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display:hover .jw-svg-icon-pause,
.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display:hover .jw-svg-icon-play,
.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display:hover .jw-svg-icon-replay {
  background-color: var(--neutral-0-color) !important;
}

.jwplayer.jw-state-buffering .jw-icon-display {
  background-color: transparent !important;
}

.jwplayer.jw-skin-default .jw-display-icon-container .jw-svg-icon-rewind {
  margin-top: 10px;
}

.jwplayer.jw-state-paused:not(.jw-flag-touch):not(.jw-flag-small-player):not(.jw-flag-casting):not(
    .jw-flag-play-rejected
  )
  .jw-display,
.jwplayer.jw-state-playing:not(.jw-flag-touch):not(.jw-flag-small-player):not(.jw-flag-casting) .jw-display {
  display: flex !important;
}

/* SVG Icons */

.jwplayer.jw-skin-default .jw-svg-icon-play {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: url("/icons/play_icon_filled.svg");
  mask-image: url("/icons/play_icon_filled.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: auto;
}

.jwplayer.jw-skin-default .jw-svg-icon-cc-on,
.jwplayer.jw-skin-default .jw-svg-icon-cc-off {
  background: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: url("/icons/closed_caption.svg");
  mask-image: url("/icons/closed_caption.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-pause {
  background: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask-image: url("/icons/pause_thick.svg");
  mask-image: url("/icons/pause_thick.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: auto;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-display-icon-rewind {
  background-image: url("/icons/rewind.svg");
  height: 21px;
  width: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto;
  cursor: pointer;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-display-icon-forwards {
  background-image: url("/icons/forward.svg");
  display: inline-block;
  height: 21px;
  width: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto;
  cursor: pointer;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display .jw-svg-icon-play {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 80px;
  mask-size: 80px;
  background-color: var(--neutral-0-color) !important;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-icon-display .jw-svg-icon-pause {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 80px;
  mask-size: 80px;
  background-color: var(--neutral-0-color) !important;
}

.jwplayer.jw-skin-default .jw-display-controls .jw-display-icon-next {
  background-image: url("/icons/forward.svg");
  visibility: visible !important;
  height: 40px;
  width: 40px;
  background-size: contain;
  filter: brightness(0) invert(1);
  background-repeat: no-repeat;
  pointer-events: auto;
  cursor: pointer;
}

.jwplayer.jw-skin-default .jw-svg-icon-volume-0 {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/volume_off.svg");
  -webkit-mask-image: url("/icons/volume_off.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-volume-50 {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/volume_min.svg");
  -webkit-mask-image: url("/icons/volume_min.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-volume-100 {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/volume_max.svg");
  -webkit-mask-image: url("/icons/volume_max.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-quality-100 {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/filter.svg");
  -webkit-mask-image: url("/icons/filter.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-settings-content-item::before {
  background-color: var(--primary-100-color);
  background-size: contain;
  width: 24px !important;
  background-repeat: no-repeat;
  mask-image: url("/icons/check.svg");
  -webkit-mask-image: url("/icons/check.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: right;
  position: static !important;
  order: 1;
  flex: 1;
}

.jwplayer.jw-skin-default .jw-svg-icon-settings {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/settings.svg");
  -webkit-mask-image: url("/icons/settings.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-fullscreen-on {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/fullscreen.svg");
  -webkit-mask-image: url("/icons/fullscreen.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: auto;
}

.jwplayer.jw-skin-default .jw-svg-icon-fullscreen-off {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/fullscreen_exit.svg");
  -webkit-mask-image: url("/icons/fullscreen_exit.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: auto;
}

.jwplayer.jw-skin-default .jw-svg-icon-replay {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/replay.svg");
  -webkit-mask-image: url("/icons/replay.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 38px;
  mask-size: 38px;
}

.jwplayer.jw-skin-default .jw-svg-icon-close {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/cross.svg");
  -webkit-mask-image: url("/icons/cross.svg");
  pointer-events: auto;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-pip-off {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/popout_player_exit.svg");
  -webkit-mask-image: url("/icons/popout_player_exit.svg");
  pointer-events: auto;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-pip-on {
  background-color: var(--neutral-0-color);
  background-size: contain;
  background-repeat: no-repeat;
  mask-image: url("/icons/popout_player.svg");
  -webkit-mask-image: url("/icons/popout_player.svg");
  pointer-events: auto;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.jwplayer.jw-skin-default .jw-svg-icon-floating-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M16 14.586l7.293-7.293a1 1 0 0 1 1.414 1.414L17.414 16l7.293 7.293a1 1 0 0 1-1.414 1.414L16 17.414l-7.293 7.293a1 1 0 1 1-1.414-1.414L14.586 16 7.293 8.707a1 1 0 0 1 1.414-1.414L16 14.586z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
}

/* Settings styling */

.jwplayer.jw-skin-default .jw-settings-captions {
  height: fit-content;
  width: fit-content;
}

.jwplayer.jw-skin-default .jw-submenu-topbar {
  display: none !important;
}

.jwplayer.jw-skin-default .jw-settings-menu {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 8px;
}

.jwplayer.jw-skin-default .jw-settings-topbar {
  background-color: unset !important;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 16px 24px;
}

.jw-settings-topbar-buttons {
  gap: 16px;
}

.jwplayer.jw-skin-default .jw-settings-content-item {
  border-radius: 4px;
  padding-left: 19px;
  padding-right: 24px;
  font: var(--font-button-small);
  display: flex;
}

.jwplayer.jw-skin-default .jw-settings-topbar-buttons div[aria-expanded="true"] svg {
  background-color: var(--primary-100-color) !important;
}

.jwplayer.jw-skin-default .jw-settings-close,
.jwplayer.jw-skin-default .jw-settings-quality {
  width: fit-content;
  height: fit-content;
}

.display-close-button [button="floating-close-button"] {
  display: flex !important;
}

.jwplayer.jw-skin-default .jw-icon-settings::after,
.jw-icon-volume::after,
.jw-settings-menu .jw-icon::after {
  display: none !important;
}

.jwplayer.jw-skin-default .jw-settings-menu .jw-icon.jw-button-color::after {
  display: none !important;
}

.jwplayer.jw-skin-default .jw-settings-item-active {
  color: var(--primary-100-color);
}

.jwplayer.jw-skin-default .jw-settings-submenu {
  padding-top: 0;
  padding-right: 0;
}

.jwplayer.jw-skin-default .jw-settings-submenu::-webkit-scrollbar {
  display: none;
}

/* Floating player styling */

.jwplayer.jw-skin-default.jw-flag-floating .jw-float-bar-icon .jw-svg-icon-floating-close {
  height: 16px;
  width: 16px;
}

/* Volume styling */

.jwplayer.jw-skin-default .jw-slider-volume {
  background-color: var(--neutral-100-color);
  opacity: 0.85;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 22px 0;
  width: 52px;
  height: 152px;
}

.jwplayer.jw-skin-default .jw-slider-volume .jw-slider-container {
  width: 4px !important;
  height: 120px !important;
}

.jwplayer.jw-skin-default .jw-slider-volume .jw-buffer {
  border-radius: 4px;
  background-color: var(--neutral-40-color) !important;
}

.jwplayer.jw-skin-default .jw-slider-volume .jw-progress {
  border-radius: 4px;
}

.jwplayer.jw-skin-default .jw-slider-volume .jw-knob {
  background-color: var(--neutral-0-color) !important;
  height: 12px !important;
  box-shadow: none !important;
  width: 12px !important;
}

.jwplayer.jw-skin-default .jw-volume-bar .jw-slider-knob {
  background-color: var(--neutral-0-color);
  border-color: var(--neutral-100-color);
}

/* Progress and buffer bar styling */

.jw-rail {
  border-radius: 50px !important;
}

.jw-slider .jw-progress-container .jw-progress {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.jw-slider .jw-progress-container .jw-knob {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.jwplayer.jw-skin-default .jw-timesegment .jw-buffer {
  background-color: var(--neutral-0-color) !important;
}

.jwplayer.jw-skin-default .jw-timesegment .jw-buffer,
.jwplayer.jw-skin-default .jw-timesegment .jw-progress {
  border-radius: 4px;
}

/* Video preview thumbnails styling */

.jwplayer.jw-skin-default .jw-time-tip {
  background-color: unset !important;
  border-radius: 8px;
}

.jwplayer.jw-skin-default .jw-time-tip::after {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

.jwplayer.jw-skin-default .jw-time-thumb {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.jwplayer.jw-skin-default .jw-time-tip .jw-time-time {
  background-color: rgba(0, 0, 0, 0.85);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  color: var(--neutral-0-color);
  font: var(--font-body-extra-small);
}

/* Time progress styling */

.jwplayer.jw-skin-default .jw-text-elapsed {
  font: var(--font-body-extra-small);
}

.jwplayer.jw-skin-default .jw-text-duration {
  font: var(--font-body-extra-small);
  color: var(--neutral-30-color);
}

/* Icons on the controlbar */

.jwplayer.jw-skin-default .jw-icon-rewind {
  display: none;
}

.jwplayer.jw-skin-default .jw-controlbar .jw-icon-settings {
  order: 0;
}

.jwplayer.jw-skin-default .jw-controlbar .jw-icon-cc {
  order: 1;
}

.jwplayer.jw-skin-default .jw-controlbar .jw-icon-pip {
  order: 2;
}

.jwplayer.jw-skin-default .jw-controlbar .jw-icon-fullscreen {
  order: 3;
}

/* Styling during ads */

.jwplayer.jw-flag-ads .jw-controlbar .jw-icon-inline:not(.jw-icon-playback):not(.jw-icon-volume),
.jwplayer.jw-flag-ads .jw-controlbar .jw-icon-tooltip:not(.jw-icon-volume),
.jwplayer.jw-flag-ads .jw-controlbar .jw-tooltip {
  display: none;
}

.jwplayer.jw-flag-ads .jw-timesegment-progress {
  background-color: var(--tertiary-50-color) !important;
}

.jwplayer.jw-flag-ads .jw-controlbar {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000000;
  pointer-events: auto !important;
}

.jwplayer:not(.jw-flag-floating) .jw-wrapper {
  z-index: 1000;
}

.jwplayer.jw-flag-ads .jw-timesegment .jw-progress {
  border-radius: 0 !important;
}

.jwplayer.jw-flag-ads .jw-slider-container {
  height: 4px !important;
}

.jwplayer.jw-flag-ads .jw-timesegment-resetter {
  transform: translate(0, -50%) !important;
  height: 4px !important;
  background-color: rgba(242, 242, 242, 0.6);
}

.jwplayer.jw-flag-ads .jw-display-container {
  display: none;
}

.jwplayer.jw-flag-ads .jw-controlbar .jw-slider-time {
  height: 4px;
}

/* Live stream  */

.jwplayer.jw-flag-live .jw-display-controls .jw-display-icon-forwards {
  visibility: hidden !important;
}

.jwplayer.jw-flag-live.jw-state-playing .jw-icon-playback .jw-svg-icon-stop {
  display: none !important;
}

.jwplayer.jw-flag-live.jw-state-playing .jw-icon-playback .jw-svg-icon-pause {
  display: block !important;
}

.jwplayer.jw-flag-live.jw-flag-small-player:not(.jw-flag-audio-player):not(.jw-flag-ads)
  .jw-controlbar
  .jw-button-container
  > .jw-icon-playback {
  display: flex !important;
}

.jwplayer.jw-flag-live .jw-button-container .jw-text-live::before {
  display: none;
}

.jwplayer.jw-flag-live .jw-button-container .jw-text-live {
  color: var(--neutral-0-color);
  text-transform: none;
}

.jwplayer.jw-flag-live .jw-icon-display {
  background: var(--secondary-100-color);
}

.jwplayer.jw-flag-live .jw-display-controls .jw-icon-display .jw-svg-icon-play,
.jwplayer.jw-flag-live .jw-display-controls .jw-icon-display .jw-svg-icon-pause,
.jwplayer.jw-flag-live .jw-display-controls .jw-icon-display:hover .jw-svg-icon-pause,
.jwplayer.jw-flag-live .jw-display-controls .jw-icon-display:hover .jw-svg-icon-play {
  background-color: var(--neutral-100-color) !important;
}

/* JW Breakpoints  */

.jw-breakpoint-0 .jw-icon-display,
.jw-breakpoint-1 .jw-icon-display,
.jw-breakpoint-2 .jw-icon-display,
.jw-breakpoint-3 .jw-icon-display,
.jw-breakpoint-4 .jw-icon-display {
  height: 52px !important;
  width: 52px !important;
}

.jw-breakpoint-0 .jw-icon-display .jw-svg-icon-play,
.jw-breakpoint-1 .jw-icon-display .jw-svg-icon-play,
.jw-breakpoint-2 .jw-icon-display .jw-svg-icon-play,
.jw-breakpoint-3 .jw-icon-display .jw-svg-icon-play,
.jw-breakpoint-4 .jw-icon-display .jw-svg-icon-play {
  -webkit-mask-size: 44px !important;
  mask-size: 44px !important;
}

.jw-breakpoint-0 .jw-icon-display .jw-svg-icon-pause,
.jw-breakpoint-1 .jw-icon-display .jw-svg-icon-pause,
.jw-breakpoint-2 .jw-icon-display .jw-svg-icon-pause,
.jw-breakpoint-3 .jw-icon-display .jw-svg-icon-pause,
.jw-breakpoint-4 .jw-icon-display .jw-svg-icon-pause {
  -webkit-mask-size: 44px !important;
  mask-size: 44px !important;
}

/* hide Unknown CC item in subtitle menu on iOS */
.jw-settings-content-item[aria-label="Unknown CC"] {
  display: none;
}

/* After video ends */
.jwplayer.jw-state-complete .jw-display-icon-forwards {
  display: none !important;
}

/* Hide default jwplayer right click */
.jw-rightclick {
  display: none !important;
}

/* Hover effects (disabled on touch devices)*/

@media (hover: hover) {
  .jwplayer.jw-skin-default:not(.jw-state-buffering) .jw-icon:hover svg {
    background-color: var(--primary-100-color) !important;
  }

  .jwplayer.jw-skin-default .jw-settings-content-item:hover {
    background-color: var(--neutral-80-color);
  }
}

/* Hide rewind from controls on smaller screens */
@media (max-width: 481px) and (orientation: landscape) {
  .jw-controls .jw-display-icon-container .jw-icon.jw-icon-rewind {
    visibility: hidden;
  }
}

.jwplayer.jw-skin-default.jw-flag-touch.jw-state-paused:not(.jw-breakpoint-1) .jw-display-icon-rewind,
.jwplayer.jw-skin-default.jw-flag-touch.jw-state-playing:not(.jw-breakpoint-1) .jw-display-icon-rewind {
  display: inline-block;
}

.jwplayer.custom-floating:not(.jw-flag-pip) {
  top: 56px;
  left: 0;
  right: 0;
  height: inherit !important;
  padding-bottom: 56.25%;
  position: fixed;
  z-index: 10000;
}
.jwplayer.custom-floating.in-app:not(.jw-flag-pip) {
  top: 0;
}

.jw-flag-ads.custom-floating [button="floating-close-button"] {
  display: flex !important;
}

.jwplayer:not(.custom-floating) [button="floating-close-button"] {
  display: none;
}

.jwplayer.close-icon [button="floating-close-button"] {
  display: flex;
}

[button="floating-close-button"] {
  order: 4;
}

[button="floating-close-button"] .jw-icon {
  background-color: var(--neutral-0-color) !important;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: url("/icons/cross.svg") center no-repeat !important;
  mask: url("/icons/cross.svg") center no-repeat !important;
}

@media (hover: hover) {
  [button="floating-close-button"] .jw-icon:hover {
    background-color: var(--primary-100-color) !important;
  }
}

@media (min-width: 600px) {
  .jwplayer.custom-floating:not(.jw-flag-pip),
  .jwplayer.custom-floating.jw-flag-aspect-mode:not(.jw-flag-pip) {
    bottom: 40px;
    right: 15px;
    top: initial;
    left: initial;
    padding-bottom: unset;
    height: 225px !important;
    width: 400px !important;
  }
}