/* Player Icons */

[class^="icon-m-player-"], [class*="icon-m-player-"],
.searchbar-player-container::after {
  background-image: url(/static/imgs/icon-sprites-player.svg);
}

[class^="icon-m-player-"], [class*="icon-m-player-"] {
  display: inline-block;
  position: relative;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.searchbar-player-container::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 10px;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  background-position: -656px -3px;
  z-index: 2;
  filter: invert(1);
}

.video-container :focus-visible {
  outline: solid #fff 4px !important;
}
.video-container .no-outline {
  outline: none !important;
}

i {
  width: 26px;
  height: 26px;
  font-style: normal;
}
[class^="icon-"].small, [class*=" icon-"].small {
  transform: scale(.8);
}
.icon-m-player-airplay {
  background-position: -32px -1px;
}
.icon-m-player-airplay-on {
  background-position: 2px -1px;
}
.icon-m-player-chromecast {
  background-position: -100px -1px;
}
.icon-m-player-chromecast-on {
  background-position: -66px -1px;
}
.icon-m-player-expand {
  background-position: -134px -1px;
}
.icon-m-player-shrink {
  background-position: -338px -1px;
}
.icon-m-player-fullscreen {
  background-position: -203px -1px;
}
.icon-m-player-fullscreen-close {
  background-position: -169px -1px;
}
.icon-m-player-mute {
  background-position: -238px -1px;
}
.icon-m-player-play {
  background-position: -305px -2px;
}
.video-container:not(.paused) .player-play i {
  background-position: -270px -2px;
}
.icon-m-player-pause {
  background-position: -270px -2px;
}
.icon-m-player-volume0 {
  background-position: -382px -1px;
}
.icon-m-player-volume1 {
  background-position: -416px -1px;
}
.icon-m-player-volume2 {
  background-position: -450px -1px;
}
.icon-m-player-volume3 {
  background-position: -484px -1px;
}
.icon-m-player-settings {
  width: 24px;
  background-position: -516px -1px;
}
.icon-m-player-logo-full {
  width: 62px;
  background-position: -1439px -1px;
}
.icon-m-player-search {
  background-position: -656px -3px;
}
.icon-m-player-close {
  background-position: -685px -1px;
}
.icon-m-player-center {
  background-position: -717px -1px;
}
.icon-m-player-fast-back {
  background-position: -752px -1px;
}
.icon-m-player-fast-forward {
  background-position: -786px -1px;
}
.icon-m-player-caret-left {
  background-position: -854px -1px;
}
.icon-m-player-caret-right {
  background-position: -819px -1px;
}
.icon-m-player-caret-up {
  background-position: -888px 0px;
}
.icon-m-player-warning {
  background-position: -918px 0px;
}
.icon-m-player-lock {
  background-position: -948px 0px;
}
.icon-m-player-key {
  background-position: -976px 1px;
}
.icon-m-player-share {
  background-position: -1067px 1px;
}
.icon-m-player-copy {
  background-position: -1098px 0px;
}
.icon-m-player-facebook {
  background-position: -1130px 0px;
}
.icon-m-player-reddit {
  background-position: -1165px 0px;
}
.icon-m-player-twitter {
  background-position: -1198px 1px;
}
.icon-m-player-whatsapp {
  background-position: -1232px 1px;
}
.icon-m-player-more {
  background-position: -1267px 1px;
}
.icon-m-player-check {
  background-position: -1300px 1px;
}
.icon-m-player-download {
  background-position: -1330px 1px;
}
.icon-m-player-subtitles {
  background-position: -1355px -1px;
}
.icon-m-player-subtitles-on {
  background-position: -1381px -1px;
}
.icon-m-player-chapters {
  background-position: -1408px -1px;
}

a:focus,
button:focus {
  outline: none;
}

button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

button:first-of-type,
a:first-of-type {
  margin-left: 0;
}

.m-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  transition: .5s;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.m-btn-ghost i {
  filter: invert(1);
}

.video-container * {
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Arial', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Hide Safari controls */
video::-webkit-media-controls { display:none !important; }

.video-container {
  display: block;
  position: relative;
  min-width: 240px;
  min-height: 120px;
  font-weight: 300;
  user-select: none;
  overflow: hidden;
  z-index: 0;
  -webkit-user-select: none;
}

.video-container video {
  width: 100%;
  height: 100%;
}

.video-container.casting video {
  visibility: hidden;
  opacity: 0;
}

.video-container button {
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
}

.casting .video-poster {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
  filter: blur(10px) brightness(0.5);
  pointer-events: none;
}

.casting .casting-info {
  display: block;
  position: absolute;
  top: calc(50% - 30px);
  width: 100%;
  line-height: 60px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.casting-info {
  display: none;
}

.casting-info span {
  color: #ffffff;
  padding: 20px;
  margin-left: 10px;
  border-radius: 1px;
}

.casting-info i {
  margin-right: 7px;
  margin-top: -1px;
  filter: invert(1);
}

/* Fail state */

.video-container.fail::after {
  content: 'File not supported or damaged.';
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding-top: 23%;
  background-image: url('/static/imgs/webapp/player-cover-fail.svg');
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 18px;
  color: #000;
  z-index: 2;
}

.dark-mode .video-container.fail::after {
  filter: invert(1);
}

/* Content overlays */

.player-overlay {
  display: flex;
  visibility: hidden;
  opacity: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  line-height: 23px;
  z-index: 3;
  pointer-events: none;
  transition: opacity .1s ease;
}

.overlay-share,
.overlay-cta {
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(100px) saturate(150%);
  -webkit-backdrop-filter: blur(100px) saturate(150%);
}

.overlay-cta .cta-form input {
  width: 100%;
  margin-top: 12px;
  padding: 8px 14px;
  border: solid #fff 1px;
}

.overlay-cta .cta-form input:focus-visible {
  outline: none !important;
}

.overlay-cta .cta-form input::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #000;
}

.player-small .overlay-cta .cta-form,
.player-tiny .overlay-cta .cta-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.player-small .overlay-cta .cta-form input {
  width: calc(50% - 5px);
  margin-top: 10px;
  font-size: 12px;
}
.player-tiny .overlay-cta .cta-form input {
  width: calc(50% - 2.5px);
  margin-top: 5px;
  padding: 5px 10px;
  font-size: 12px;
}

.video-container .overlay-cta .cta-btn {
  margin-top: 12px;
}

.player-small .overlay-cta .cta-btn {
  margin-top: 10px;
  line-height: 37px;
  font-size: 12px;
}
.player-tiny .overlay-cta .cta-btn {
  margin-top: 5px;
  line-height: 37px;
  font-size: 12px;
}

.player-small .cta-title,
.player-tiny .cta-title {
  margin: 0 !important;
  font-size: 16px;
}

.player-small .cta-text,
.player-tiny .cta-text {
  font-size: 12px;
}

.player-small .overlay-cta input,
.player-tiny .overlay-cta input {
  width: 100%;
}

.overlay-cta .cta-form.submitted input:invalid {
  border: solid red 1px;
}

.transcoding .overlay-transcoding,
.warning .overlay-warning,
.unavailable .overlay-unavailable,
.password .overlay-password,
.show-share .overlay-share,
.show-cta .overlay-cta,
.show-share .player-title {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.overlay-password,
.overlay-unavailable {
  background: #000;
}

.video-container.password,
.video-container.unavailable {
  width: 100%;
}

.video-container.transcoding video,
.video-container.warning video,
.video-container.unavailable video,
.video-container.password video {
  visibility: hidden;
  opacity: 0;
}

.transcoding .video-poster,
.warning .video-poster,
.unavailable .video-poster,
.password .video-poster {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
  filter: blur(20px) brightness(0.5);
  pointer-events: none;
}

.video-view.video-unavailable:not(.video-invalid) .overlay-transcoding {
  display: none;
}

/* Hide elements when overlays are visible */

.transcoding .player-title,
.transcoding .player-cover,
.transcoding .player-controls-desktop,
.transcoding .searchbar-player-container,
.transcoding .player-cover-search,
.warning .player-title,
.warning .player-cover,
.warning .player-controls-desktop,
.warning .searchbar-player-container,
.warning .player-controls-mobile,
.warning .player-cover-search,
.warning .player-chapter-title,
.unavailable .player-cover,
.unavailable .player-cover-search,
.unavailable .player-controls-desktop,
.unavailable .searchbar-player-container,
.unavailable .player-controls-mobile,
.unavailable .player-title,
.unavailable .player-chapter-title,
.password .player-cover,
.password .player-cover-search,
.password .player-controls-desktop,
.password .searchbar-player-container,
.password .player-controls-mobile,
.password .player-title,
.password .player-chapter-title,
.show-cta .player-controls-desktop,
.show-cta .searchbar-player-container,
.show-cta .player-controls-mobile,
.show-cta .player-title,
.show-cta .player-chapter-title,
.show-share .player-scrim-top,
.show-share .player-scrim-bottom,
.show-share .player-controls-mobile,
.show-share .player-chapter-title {
  display: none!important;
}

.content-overlay {
  max-width: 380px;
}

.overlay-password .m-input {
  display: block;
  width: 100%;
  height: 45px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 15px;
  font-weight: 300;
  color: #fff!important;
  background: var(--black-10);
  border: 1px solid var(--black-10);
  border-radius: 10px;
  box-shadow: none;
  transition: border .2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.overlay-password .m-btn-overlay {
  margin: 0;
}

.psw-error {
  display: block;
  color: var(--hal-red)!important;
  font-size: 15px;
}

.header-player-overlay {
  visibility: visible !important;
  opacity: 1!important;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 5px 0!important;
}

.player-overlay p {
  color: #ffffff;
  margin: 0;
  opacity: .7;
}

.player-overlay i {
  margin: -1px 7px 0 -3px;
  filter: invert(1);
}

.video-container .m-btn-overlay {
  display: inline-block;
  background-color: #fff;
  color: #000;
  margin-top: 15px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  line-height: 46px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease;
}

.video-container .m-btn-overlay i {
  filter: invert(0)!important;
}

.video-container .m-btn-overlay.second {
  background-color: rgba(138, 138, 138, 0.65);
  color: #fff;
}

.player-tiny .m-btn-overlay,
.player-small .m-btn-overlay,
.player-minimal .m-btn-overlay {
  width: 100%;
}

@media (hover: hover) {
  .video-container .m-btn-overlay:hover {
    opacity: .8;
    color: #000;
  }

  .video-container .m-btn-overlay.second:hover {
    color: #fff;
  }
}

/* Share overlay */

[class^="close-overlay-"] {
  position: absolute;
  top: 18px;
  right: 14px;
  cursor: pointer;
  color: #fff;
  transition: opacity .2s ease;
}

.overlay-share .player-link-box {
  display: flex;
  align-items: center;
  position: absolute;
  width: 70%;
  max-width: 420px;
  border-radius: 10px;
  border: 1px solid var(--black-10);
  color: #fff;
  background-color: #ffffff26;
  position: relative;
  padding: 0 15px 0 20px;
  height: 55px;
}

.player-small .player-link-box,
.player-tiny .player-link-box {
  width: 90%;
}

.player-small .link-box-textarea,
.player-tiny .link-box-textarea {
  max-width: calc(100% - 95px);
}

.url-share {
  user-select: all;
}

.btn-share-copy, .player-link-box button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  background-color: var(--black-10);
  color: white;
  border: none;
  border-radius: 6px;
  width: 99px;
  margin: 0;
  padding: 0;
  line-height: 45px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.btn-share-copy i {
  margin-right: 7px;
  filter: invert(1)!important;
}

.row-share {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  width: 234px;
}

.row-share i,
[class^="close-overlay-"] i {
  filter: invert(1);
  margin: 0;
}

@media (hover: hover) {
  [class^="close-overlay-"]:hover {
    opacity: .7;
  }

  .btn-share-copy:hover {
    opacity: .7;
  }
}

.video-container [class*="player-control-"] {
  font-size: 14px!important;
}

.video-container.cover .player-title {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

.video-container.hide-controls .player-controls-desktop,
.video-container.hide-controls .player-controls-mobile,
.video-container.hide-controls .progress-bar-container,
.video-container.hide-controls .searchbar-player-container {
  display: none;
}

.video-container.hide-controls [class*="player-control-"] {
  display: none !important;
}

.video-content {
  position: relative;
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;
}

video:focus {
  outline: 0;
}

.video-poster {
  position: absolute;
  display: none;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0s;
  object-fit: cover;
}

.video-poster.show {
  display: block;
  opacity: 1;
}

.audio-only .video-poster {
  display: block;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.player-controls-desktop {
  display: flex;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  height: 96px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 25px 0 25px;
  z-index: 2;
  color: #ffffff;
  pointer-events: none;
  transition: opacity .2s;
}

.player-controls-desktop > * {
  pointer-events: auto;
}

.player-control-close {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  top: 20px;
  left: 20px;
  z-index: 2;
  transition: opacity .2s;
}

.player-small .player-control-close {
  top: 15px;
  left: 14px;
}

.player-tiny .player-control-close {
  top: 10px;
  left: 10px;
}

.player-controls-desktop i,
.player-controls-mobile i {
  filter: invert(1);
}

.player-control.hide {
  display: none!important;
}

.time-container {
  font-variant-numeric: tabular-nums;
  margin: -1px 12px 0 0;
}

.video-container.fullscreen {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
  max-height: 100%!important;
}

.video-container:-webkit-full-screen {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
  max-height: 100%!important;
}

.video-container.hide-cursor.fullscreen {
  cursor: none;
}
.video-container.hide-cursor:-webkit-full-screen {
  cursor: none;
}

.video-container.fullscreen video {
  width: 100%!important;
  height: 100%!important;
  max-height: none;
}
.video-container:-webkit-full-screen video {
  width: 100%!important;
  height: 100%!important;
  max-height: none;
  background-color: #000;
}

.video-container.fullscreen .video-content {
  height: 100%!important;
  width: 100%!important;
}
.video-container:-webkit-full-screen .video-content {
  height: 100%!important;
  width: 100%!important;
}

/* Fullscreen controls */

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-desktop {
  height: 106px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-scrim-bottom {
  height: 236px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-left,
.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-right {
  bottom: 22px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-left {
  left: 19px
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-left a,
.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-right a,
.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-control-back {
  transform: scale(1.2);
  margin-right: 15px;
  transform-origin: left;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-right a {
  transform-origin: right;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-right .player-logo-custom {
  margin-left: 20px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-desktop span {
  font-size: 20px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .m-slider.volume {
  transform: scale(1.2);
  transform-origin: left;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .searchbar-player-container {
  transform: scale(1.2);
  transform-origin: right;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-controls-desktop .time-container {
  margin-right: 18px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .settings-panel,
.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .download-panel {
  bottom: 110px;
  transform: scale(1.2) translateY(30px);
  transform-origin: bottom right;
}

.fullscreen.show-settings:not(.player-small):not(.player-tiny):not(.player-minimal) .settings-panel,
.fullscreen.show-settings:not(.player-small):not(.player-tiny):not(.player-minimal) .download-panel {
  transform: scale(1.2) translateY(0);
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .video-seekbar-thumbnail {
  bottom: 110px;
}

.fullscreen:not(.player-small):not(.player-tiny):not(.player-minimal) .player-logo {
  margin-left: 35px!important;
}

.video-container.fullscreen .player-control-expand,
.video-container.fullscreen .player-control-close,
.video-container.fullscreen .player-control-center,
.video-container.fullscreen .curation-boxes {
  display: none!important;
}

.video-container.fullscreen .player-chapter-title {
  bottom: 115px;
  font-size: var(--size-normal);
}

.video-container:-webkit-full-screen .player-controls-desktop {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.video-container.fullscreen .player-controls-desktop {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-container.fullscreen-controls:-webkit-full-screen .player-controls-desktop {
  visibility: visible!important;
  opacity: 1!important;
  transition: opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.video-container.fullscreen.fullscreen-controls .player-controls-desktop {
  visibility: visible!important;
  opacity: 1!important;
  transition: opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-container.fullscreen.fullscreen-controls .player-chapter-title {
  visibility: visible;
  opacity: 1;
}

.player-controls-desktop button {
  margin-right: 10px;
}

.player-controls-right button {
  margin: 0 0 0 10px;
}

.fullscreen .player-controls-desktop button {
  transform: scale(1.2);
  margin-right: 16px;
}

.fullscreen .player-controls-right button {
  margin: 0 0 0 16px;
}

.player-controls-desktop {
  font-size: 28px;
  cursor: pointer;
}

.player-controls-desktop i {
  margin-right: 0;
}

.player-controls-desktop span, .player-controls-desktop a {
  color: #ffffff;
}

.player-controls-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 21px;
  bottom: 17px;
  height: 30px;
}

.player-controls-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 17px;
  right: 25px;
  height: 30px;
}

.cast-button {
  display: none!important;
}

.player-control-chromecast {
  display: none;
}

.player-control-chromecast.on {
  display: block;
}

/* Show/hide chromecast mode icon */

.chromecast-on {
  display: none;
}

.casting .chromecast-on {
  display: block;
}

.casting .chromecast-off {
  display: none;
}

/*Hide airplay icon on Firefox*/

@-moz-document url-prefix() {
  .player-control-airplay {
    display: none!important;
  }
}

/* Show/hide cinema mode icon */

.cinema-on {
  display: none;
}

.cinema .cinema-on {
  display: block;
}

.cinema .cinema-off {
  display: none;
}

.video-container.mobile-overlay .player-play-mobile,
.video-container.mobile-overlay .player-overlay-logo {
  pointer-events: auto;
  cursor: pointer;
}

.player-play-mobile {
  display: block;
  pointer-events: none;
}

.player-play-mobile i {
  margin: 0 0 0 1px;
}

.player-volume {
  margin-left: 15px;
}

.player-tiny .player-down i,
.player-small .player-down i {
  margin-right: 0;
}

.player-volume i {
  margin: 0;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  position: absolute;
  top: 21px;
  right: 25px;
  left: 25px;
  height: 18px;
  cursor: pointer;
  background: none;
}

.progress-bar-container.mobile {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.video-search-result {
  position: absolute;
  height: 13px;
  background: #ffffff;
  width: 2px!important;
  transition: .2s;
  transform-origin: center;
  z-index: 2;
}

.video-search-result:hover {
  transform: scalex(3.5) scaley(1.4)!important;
}

.video-container .progress-bar {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: none;
  height: 12px;
  transition: transform .15s;
  transform-origin: center;
}

.video-seekbar-thumbnail {
  position: absolute;
  bottom: 89px;
  height: 100px;
  max-width: 180px;
  box-shadow: 0 0 14px 0 rgba(0,0,0,.3);
  outline: 1px solid #fff3;
  z-index: 20;
  font-size: 0;
  background: #000;
  border-radius: 7px;
}

/* Added to add border radius to canvas element */
.container-thumbnail {
  border-radius: 7px;
  overflow: hidden;
}

.video-seekbar-thumbnail canvas {
  max-width: 180px;
  border-radius: 7px;
}

.chapters-on .video-seekbar-thumbnail {
  bottom: 115px;
}

.video-seekbar-thumbnail-timestamp {
  position: absolute;
  line-height: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  bottom: 10px;
  color: #ffffff;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.video-seekbar-chapter-title {
  display: none;
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -30px;
  background-color: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  font-size: 13px;
  text-align: center;
  height: 26px;
  line-height: 23px;
  border-radius: 7px;
  box-shadow: 0 0 14px 0 rgba(0,0,0,.3);
  border: 1px solid #fff3;
}

.chapters-on .video-seekbar-chapter-title {
  display: block;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline with chapters */

.player-chapter-title {
  display: none;
  visibility: hidden;
  position: absolute;
  bottom: 90px;
  left: 24px;
  color: white;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1;
  overflow: hidden;
  line-height: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}

.chapters-on .player-chapter-title {
  display: block;
}

.time-chapter {
  position: absolute;
  background: #ffffff35;
  right: 3px;
  left: 0;
  height: 2px;
  transition: transform .15s;
}

.progress-bar:last-child .time-chapter {
  right: 0;
}

.time-bar,
.buffer-bar,
.seek-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #ffffff;
}

.buffer-bar {
  opacity: .3;
}

.progress-bar-container:hover .seek-bar {
  display: block;
}

.seek-bar {
  opacity: .6;
  display: none;
}

.player-controls-mobile {
  display: none;
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
}

.show-download .player-down {
  display: block;
}

.player-controls-mobile i::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
}

.settings-panel,
.download-panel {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: flex-end;
  bottom: 80px;
  right: 25px;
  width: 186px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  max-height: calc(100% - 150px);
  background-color: rgba(0, 0, 0, .85);
  pointer-events: none;
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 2;
  overflow: hidden;
}

@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .settings-panel,
  .download-panel {
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(100px) saturate(120%);
    -webkit-backdrop-filter: blur(100px) saturate(120%);
  }
}

.settings-panel .container,
.download-panel .container {
  width: 100%;
  height: 35px;
  min-height: 35px;
  overflow: hidden;
  transition: transform .4s, opacity .3s;
}

.settings-panel .container.open {
  height: auto;
  /* border-bottom: 1px solid rgba(255, 255, 255, .1); */
  display: flex;
  flex-direction: column;
}

.settings-panel .settings-control.hide {
  display: none!important;
}

.show-settings .progress-bar-container,
.show-download-panel .progress-bar-container {
  pointer-events: none;
}

.show-settings .settings-panel,
.show-download-panel .download-panel,
.player-full.paused.show-description .player-description,
.player-full.show-description:hover .player-description,
.player-small.mobile-overlay.show-description .player-description {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.player-control-settings {
  transition: transform .2s ease;
}

.show-settings .player-control-settings {
  transform: rotate(60deg);
}

.settings-panel .slider {
  position: absolute;
  transform: translateX(100%);
  opacity: 0;
}

.settings-panel .slider.open {
  position: static;
  max-height: auto;
  transform: translateX(0);
  opacity: 1;
}

.settings-panel .slider .back i {
  filter: invert(1);
  transform: rotate(90deg);
  background-position: -37px -423px;
}

.settings-panel .slide-out {
  transform: translateX(-100%);
  position: absolute;
  opacity: 0;
}

.settings-panel .slide-out:not(.open) {
  visibility: hidden;
}

.download-panel i {
  filter: invert(1);
  background-position: -1326px 1px;
}

.scroll-container::-webkit-scrollbar {
  width: 4px!important;
  background: none!important;
  padding-left: 2px;
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent!important;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #ffffff2c!important;
  border-radius: 1px!important;
  border: none!important;
  margin-left: 2px!important;
}

.video-container.show-settings .player-controls-desktop,
.video-container.show-download-panel .player-controls-desktop {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

.video-container.show-settings .player-scrim-bottom,
.video-container.show-download-panel .player-scrim-bottom {
  visibility: visible;
  opacity: 1;
}

.scroll-container {
  display: none;
  max-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-color: #ffffff2c transparent;
  scrollbar-width: thin;
}

.open .scroll-container {
  display: block;
  overflow-y: auto;
}

.download-panel .settings-panel-header,
.settings-panel .settings-panel-header {
  position: unset;
  height: 35px;
  min-height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 35px;
  width: 100%;
  text-align: right;
  color: white;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 0 10px;
  cursor: pointer;
  transition: background .2s ease;
  outline-offset: -4px;
}

.download-panel .settings-panel-header span,
.settings-panel .settings-panel-header span {
  font-size: 13px;
  color: #fff;
}

.open .settings-panel-header {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.header-subtitles,
.header-translate {
  border-top: none!important;
}

@media (hover: hover) {
  .settings-panel-header:hover {
    background: rgba(255, 255, 255, 0.1);
    transition: background .5s ease;
  }
}

.subtitles-current,
.quality-current,
.speed-current {
  font-size: 13px;
  opacity: .6;
}

.quality,
.speed,
.subtitles-list,
.translate-list {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
}

.speed {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
}

.settings-panel .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  position: relative;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  text-transform: capitalize;
  text-align: right;
  color: #fff;
  opacity: .6;
  transition: .2s cubic-bezier(0.165, 0.84, 0.44, 1);
  padding: 0 12px;
  width: 100%;
  outline-offset: -4px;
}

.settings-panel .current {
  visibility: visible;
  color: #fff;
  opacity: 1;
}

.settings-panel .option::before {
  content: '';
  position: absolute;
  visibility: hidden;
  left: 5px;
  width: calc(100% - 10px);
  height: 100%;
  color: var(--white-60);
  background-color: rgba(255, 255, 255, 0.12);
  padding: 0;
  right: 0;
  opacity: 0;
  transition: opacity .5s ease;
  border-radius: 5px;
}

.settings-panel .speed .option::before {
  left: -5px;
  width: calc(100% + 11px);
  height: 22px;
  border-radius: 5px;
}

.settings-panel .option:hover::before {
  opacity: .4;
}

.settings-panel .current::before {
  visibility: visible;
  opacity: 1;
}

.settings-panel .subtitles-list .option {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.speed .option {
  margin: 0;
  width: auto;
  padding: 0;
  outline-offset: 0;
}

.settings-panel .option.generating,
.settings-panel .option.generating:hover {
  opacity: 0.2;
  cursor: auto;
  height: 30px;
}

.spinner.transcoding {
  display: none;
}

.settings-panel .option.generating .spinner.transcoding {
  display: flex;
  position: absolute;
  left: 7px;
}

.settings-panel .option:hover {
  visibility: visible;
  opacity: 1;
}

.settings-panel .option:last-of-type {
  margin-bottom: 0;
}

/* Hide all controls when settings panel is open */
.player-small.show-settings .player-controls-mobile,
.player-tiny.show-settings .player-controls-mobile,
.player-small.show-settings.paused .player-controls-mobile,
.player-tiny.show-settings.paused .player-controls-mobile,
.player-small.show-settings.mobile-overlay .searchbar-player-container,
.player-tiny.show-settings.mobile-overlay .searchbar-player-container,
.player-small.show-settings.mobile-overlay .player-chapter-title,
.player-tiny.show-settings.mobile-overlay .player-chapter-title {
  visibility: hidden;
  opacity: 0!important;
}

.player-small .settings-panel,
.player-tiny .settings-panel,
.player-small .download-panel,
.player-tiny .download-panel {
  min-height: 52px;
}

.player-small .settings-panel .container,
.player-tiny .settings-panel .container {
  height: unset;
  min-height: unset;
  border-bottom: none;
}

.player-small .settings-panel-header,
.player-tiny .settings-panel-header {
  font-size: 15px;
  height: 41px;
  line-height: 50px;
  position: absolute;
  bottom: 0;
  width: calc(33% - 5px);
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1)!important;
  z-index: 1;
  padding: unset;
  margin: 5px;
  border-radius: 5px;
}

.player-small .open .settings-panel-header,
.player-tiny .open .settings-panel-header {
  background-color: rgba(255, 255, 255, 0.12);
}

.player-small .scroll-container,
.player-tiny .scroll-container {
  display: none;
  margin-bottom: 50px;
}

.player-small .open .scroll-container,
.player-tiny .open .scroll-container {
  display: block;
}

.player-small .header-subtitles,
.player-tiny .header-subtitles {
  left: 1px;
  width: calc(33% - 6px);
}

.settings-panel-header.header-translate {
  width: calc(100% - 10px);
}

.player-small .header-quality,
.player-tiny .header-quality {
  left: 33%;
}

.player-small .header-speed,
.player-tiny .header-speed {
  right: 0;
}

.player-small .subtitles-current,
.player-small .quality-current,
.player-small .speed-current,
.player-tiny .subtitles-current,
.player-tiny .quality-current,
.player-tiny .speed-current {
  display: none;
}

.subtitles {
  display: none;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  width: 100%;
  padding: 0 25px;
  text-align: center;
  color: #ffffff;
  transition: transform .2s;
}

.show-subtitles .subtitles {
  display: flex;
}

.player-control-subtitles .icon-m-player-subtitles-on {
  display: none;
}
.show-subtitles .player-control-subtitles .icon-m-player-subtitles-on {
  display: inline-block;
}
.show-subtitles .player-control-subtitles .icon-m-player-subtitles {
  display: none;
}

.subtitles span {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  word-break: break-word;
  padding: 4px 10px;
  background-color: #00000080;
  border-radius: 5px;
}

.subtitles span:empty {
  background-color: transparent;
  padding: 0;
}

.player-full.paused .subtitles,
.player-full.video-container:hover .subtitles,
.player-full.show-settings .subtitles {
  transform: translatey(-60px);
}

.fullscreen.fullscreen-controls .subtitles,
.fullscreen.paused .subtitles,
.fullscreen.show-settings .subtitles {
  transform: translatey(-80px)!important;
}

.fullscreen .subtitles {
  transform: translatey(0)!important;
}

.player-small .subtitles,
.player-tiny .subtitles  {
  bottom: 20px;
  font-weight: 450;
  line-height: 26px;
  padding: 0 20px;
}

.player-small .subtitles span {
  font-size: 15px;
}

.player-minimal .subtitles span {
  font-size: 18px;
}

.player-tiny .subtitles {
  line-height: 20px;
  padding: 0 15px;
}

.fullscreen .subtitles span {
  bottom: 90px;
  font-size: 30px;
  line-height: 40px;
  padding: 4px 20px;
}

.player-small .speed,
.player-tiny .speed {
  width: unset;
  padding: 7px 20px;
}

.rew-clickable,
.fwd-clickable {
  position: absolute;
  top: 0;
  bottom: 0;
}

.rew-clickable {
  left: 0;
  right: 50%;
}

.fwd-clickable {
  left: 50%;
  right: 0;
}

.rew-overlay,
.fwd-overlay {
  display: flex;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  align-items: center;
  top: 0;
  bottom: 0;
  transition: visibility .2s, opacity .2s;
}

.rew-overlay {
  right: 50%;
  left: 0;
  background: linear-gradient(
    to right,
    hsla(0, 0%, 0%, 0.85) 0%,
    hsla(0, 0%, 0%, 0.839) 8.1%,
    hsla(0, 0%, 0%, 0.809) 15.7%,
    hsla(0, 0%, 0%, 0.762) 22.8%,
    hsla(0, 0%, 0%, 0.701) 29.5%,
    hsla(0, 0%, 0%, 0.63) 35.9%,
    hsla(0, 0%, 0%, 0.551) 42.1%,
    hsla(0, 0%, 0%, 0.467) 48.1%,
    hsla(0, 0%, 0%, 0.383) 54.1%,
    hsla(0, 0%, 0%, 0.299) 60%,
    hsla(0, 0%, 0%, 0.22) 66.1%,
    hsla(0, 0%, 0%, 0.149) 72.3%,
    hsla(0, 0%, 0%, 0.088) 78.7%,
    hsla(0, 0%, 0%, 0.041) 85.4%,
    hsla(0, 0%, 0%, 0.011) 92.5%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

.fwd-overlay {
  left: 50%;
  right: 0;
  background: linear-gradient(
    to left,
    hsla(0, 0%, 0%, 0.85) 0%,
    hsla(0, 0%, 0%, 0.839) 8.1%,
    hsla(0, 0%, 0%, 0.809) 15.7%,
    hsla(0, 0%, 0%, 0.762) 22.8%,
    hsla(0, 0%, 0%, 0.701) 29.5%,
    hsla(0, 0%, 0%, 0.63) 35.9%,
    hsla(0, 0%, 0%, 0.551) 42.1%,
    hsla(0, 0%, 0%, 0.467) 48.1%,
    hsla(0, 0%, 0%, 0.383) 54.1%,
    hsla(0, 0%, 0%, 0.299) 60%,
    hsla(0, 0%, 0%, 0.22) 66.1%,
    hsla(0, 0%, 0%, 0.149) 72.3%,
    hsla(0, 0%, 0%, 0.088) 78.7%,
    hsla(0, 0%, 0%, 0.041) 85.4%,
    hsla(0, 0%, 0%, 0.011) 92.5%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

.rew-overlay.feedback,
.fwd-overlay.feedback {
  visibility: visible;
  opacity: 1;
}

.fwd-msg,
.rew-msg {
  position: absolute;
  color: #ffffff;
  user-select: none;
  white-space: nowrap;
  -webkit-user-select: none;
}

.rew-msg {
  left: 80px;
  transition: left .8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fwd-msg {
  right: 80px;
  transition: right .8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fwd-msg i,
.rew-msg i {
  transform: scale(1.5);
  filter: invert(1);
  margin: 0;
}

.fwd-msg-text,
.rew-msg-text {
  line-height: 30px;
  font-size: 29px;
  vertical-align: bottom;
}

.fwd-msg-text {
  margin-right: 20px;
}

.rew-msg-text {
  margin-left: 20px;
}

.fwd-overlay.feedback .fwd-msg {
  right: 60px;
  transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.rew-overlay.feedback .rew-msg {
  left: 60px;
  transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.volume-indicator {
  display: block;
  visibility: hidden;
  position: absolute;
  top: 100px;
  bottom: 100px;
  right: 25px;
  width: 7px;
  background-color: hsla(0, 0%, 70%, 0.369);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transform: translateX(30px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.volume-indicator.on {
  visibility: visible;
  transform: translateX(0);
  opacity: 1;
}

.volume-indicator-level {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  opacity: .5;
  transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-container .info-box {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  max-width: 100%;
  top: 0;
  right: 0;
  color: #fff;
  background: rgba(0,0,0,.8);
  padding: 5px 25px 5px 12px;
  user-select: text;
  text-align: right;
  z-index: 3;
}

.video-container .info-box > .info-row {
  font-size: 12px;
  line-height: 20px;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.info-box > .info-row.fid::before {
  content: "ID: ";
}

.info-box > .info-row.res::before {
  content: "Resolution (original): ";
}

.info-box > .info-row.resc::before {
  content: "Resolution (current): ";
}

.info-box > .info-row.bandwidth::before {
  content: "Bandwidth: ";
}

.info-box > .info-row.cdn::before {
  content: "Server: ";
}

.video-container .info-box .info-close::after {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 8px 10px 10px;
  content: "✕";
  font-size: 10px;
  line-height: 10px;
  cursor: pointer;
}

.player-overlay-logo,
.player-cover-logo {
  /* Define together so that it doesn't repeat when expanded into data url. */
  background-image: url(/static/imgs/skiv-logo-white.svg);
}

.player-overlay-logo {
  display: none;
  position: absolute;
  top: 20px;
  left: 20px;
  height: 18px;
  width: 63px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 62px;
  z-index: 5;
}

.video-container.hide-title .player-overlay-logo {
  display: block;
}

/* Player top container */

.player-scrim-top {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  padding: 30px 25px 0 25px;
  background: linear-gradient( to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.008) 8.5%, hsla(0, 0%, 0%, 0.029) 16.5%, hsla(0, 0%, 0%, 0.062) 24%, hsla(0, 0%, 0%, 0.105) 31.2%, hsla(0, 0%, 0%, 0.156) 37.9%, hsla(0, 0%, 0%, 0.211) 44.4%, hsla(0, 0%, 0%, 0.27) 50.7%, hsla(0, 0%, 0%, 0.33) 56.8%, hsla(0, 0%, 0%, 0.389) 62.8%, hsla(0, 0%, 0%, 0.444) 68.7%, hsla(0, 0%, 0%, 0.495) 74.7%, hsla(0, 0%, 0%, 0.538) 80.8%, hsla(0, 0%, 0%, 0.571) 87%, hsla(0, 0%, 0%, 0.592) 93.3%, hsla(0, 0%, 0%, 0.6) 100% );
  opacity: 0;
  pointer-events: none !important;
  z-index: 2;
  transition: .2s;
}

.player-full.fullscreen .player-scrim-top {
  visibility: hidden;
  opacity: 0;
  transition: 1s;
}
.player-full.fullscreen.fullscreen-controls .player-scrim-top,
.player-full.fullscreen.fullscreen-controls .player-scrim-bottom {
  visibility: visible;
  opacity: 1;
  transition: .2s;
}

/* Player searchbox */

.searchbar-player-container {
  display: block;
  visibility: hidden;
  position: absolute;
  top: 15px;
  right: 25px;
  height: 41px;
  min-width: 0;
  padding: 0 0 0 40px;
  font-size: 15px;
  color: white!important;
  opacity: 0;
  z-index: 2;
  transition: min-width .6s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
}

.player-full.fullscreen .searchbar-player-container {
  visibility: hidden;
  opacity: 0;
  transition: 1s opacity;
}
.player-full.fullscreen.fullscreen-controls .searchbar-player-container {
  visibility: visible;
  opacity: 1;
  transition: .2s opacity, .3s width cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-focused .searchbar-player-container,
.search-active .searchbar-player-container {
  right: 23px;
  min-width: 300px;
  transition: min-width .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.searchbar-player-container .searchbar-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85)!important;
  padding: 0;
  transition: padding-right .2s ease;
}

.search-active .searchbar-player,
.search-focused .searchbar-player {
  padding: 0 35px 0 0;
}

.search-results .searchbar-player {
  padding: 0;
}

.search-results .searchbar-player-container {
  padding-right: 100px;
}

.searchbar-player::placeholder  {
  visibility: visible;
  color: white!important;
  font-weight: 300!important;
  opacity: 1!important;
}

.searchbar-player-controls {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: -1px;
  right: 30px;
  height: 41px;
  display: flex;
  transition: opacity .2s;
  pointer-events: none;
}

.search-results .searchbar-player-container .searchbar-player-controls {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.searchbar-player-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 35px;
  padding: 4px 0 0 0;
  background: none;
  border: none;
  cursor: pointer;
}

.searchbar-player-container button i {
  margin: 0;
  filter: invert(1);
  opacity: .5;
  transition: opacity .2s;
}

.searchbar-player-container button:hover i {
  visibility: visible;
  opacity: 1;
}

.searchbar-clear {
  position: absolute;
  visibility: hidden;
  right: 2px;
  padding: 0;
  border: 0 none;
  height: 41px;
  width: 24px;
  background: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-active .searchbar-clear,
.search-focused .searchbar-clear,
.search-results .searchbar-clear {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/* Search Loader */

.spinner.search {
  position: absolute;
  visibility: hidden;
  top: 6px;
  right: 0;
  height: 28px;
  width: 28px;
  opacity: 0;
  pointer-events: none;
  transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-results-loading .spinner.search {
  visibility: visible;
  opacity: 1;
}

.search-results-loading .searchbar-clear  {
  visibility: hidden;
  opacity: 0!important;
  pointer-events: none;
}

/* Back button */

.video-view .video-container .player-control-back {
  visibility: hidden;
  opacity: 0;
}

.player-tiny .player-control-back,
.player-small .player-control-back {
  display: none!important;
}

.video-container.fullscreen .player-control-back {
  visibility: hidden;
  opacity: 0;
  transition: 1s opacity;
}
.video-container.fullscreen.fullscreen-controls .player-control-back {
  visibility: visible;
  opacity: 1;
  transition: .2s opacity;
}

/* Video loading */

.buffering-overlay {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0,0,0,0.7);
  pointer-events: none;
}

.buffering-overlay::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/static/imgs/muse-loader-white.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80px;
  opacity: .6;
}

.buffering .buffering-overlay {
  visibility: visible;
  display: unset;
  opacity: 1;
  transition: 1s opacity;
}

.cover.buffering .buffering-overlay {
  visibility: hidden;
}

/* Hide loading screen in no-controls player */

.player-no-controls .loading-background {
  display: none!important;
}
/* Volume-slider */

.m-slider.volume {
  visibility: hidden;
  height: 1px;
  width: 1px;
  opacity: 0;
  background: #ffffff;
  transform-origin: left;
  transition: width .2s ease;
}

.m-slider.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1px;
  height: 15px;
  background: #ffffff;
  cursor: pointer;
}

.m-slider.volume::-moz-range-track {
  height: 17px;
}

.m-slider.volume::-moz-range-thumb {
  width: 1px;
  height: 15px;
  background: #ffffff;
  border: none;
  cursor: pointer;
}

/* Enable volume slider on devices with hover */

@media (hover: hover) {
  .vol-control-container:hover .m-slider.volume,
  .m-slider.volume:focus {
    visibility: visible;
    opacity: 1;
    width: 100px;
    transition: .2s;
  }

  .player-small .vol-control-container:hover .m-slider.volume,
  .player-small .m-slider.volume:focus,
  .player-tiny .vol-control-container:hover .m-slider.volume,
  .player-tiny .m-slider.volume:focus {
    visibility: visible;
    opacity: 1;
    width: 65px;
    transition-duration: .2s;
  }
}

.minify,
.minify.on {
  display: none;
}

/* Embedded player */

.player-cover {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) {
  .player-cover:hover .player-cover-play {
    visibility: visible;
    opacity: 1;
  }
}

.player-cover-search {
  display: none;
  position: absolute;
  top: 24px;
  right: 25px;
  height: 20px;
  max-width: 300px;
  z-index: 3;
  line-height: initial;
  cursor: pointer;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cover .player-cover-search {
  display: block;
}

.player-cover-search i {
  filter: invert(1);
  margin-right: 4px;
}

.player-title {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 23px;
  left: 25px;
  right: 145px;
  opacity: 0;
  font-size: 20px;
  color: #fff!important;
  white-space: nowrap;
  overflow: hidden;
  line-height: normal;
  text-align: left;
  text-overflow: ellipsis;
  z-index: 3;
  transition: opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-container.search-focused .player-title,
.video-container.search-active .player-title {
  right: 325px;
}

.close-control-visible:not(.fullscreen) .player-title {
  left: 65px;
}

.player-small.close-control-visible:not(.fullscreen) .player-title {
  left: 57px;
}

.player-tiny.close-control-visible:not(.fullscreen) .player-title {
  left: 52px;
}

.player-cover-play {
  position: absolute;
  bottom: 25px;
  left: 25px;
  width: 80px;
  height: 80px;
  max-height: 40%;
  background-image: url(/static/imgs/play-circle.svg);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .7;
  transition: opacity .2s ease-in-out;
  transform-origin: center;
}

.video-container .player-cover-play.centered {
  bottom: calc(50% - 40px);
  left: calc(50% - 40px);
}

.player-cover-logo {
  display: none;
  position: absolute;
  bottom: 25px;
  right: 25px;
  height: 25px;
  width: 120px;
  max-height: 12%;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
}

.player-logo {
  position: relative;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.embedded .player-cover-logo {
  display: inline;
}

.embedded .player-overlay-logo {
  display: none!important;
}

.player-logo i {
  margin-right: 0;
}

.video-container .player-logo {
  text-align: center;
  margin-left: 10px;
}

.hide-logo .player-logo,
.hide-logo .player-cover-logo,
.logo-custom .player-cover-logo {
  display: none;
}

/* Custom logo */

.player-logo-custom.logo-cover {
  display: none;
  position: absolute;
  bottom: 25px;
  right: 25px;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
}

.cover.logo-custom .player-logo-custom.logo-cover {
  display: flex;
  max-width: 35%;
}

.player-logo-custom {
  display: none;
  justify-content: flex-end;
  align-items: center;
  margin-left: 10px;
}

.player-logo-custom img {
  width: auto;
  height: 20px;
  max-width: 100px;
  object-fit: contain;
  object-position: center;
}

.cover.logo-custom .player-logo-custom.logo-cover img {
  height: 60px;
  max-width: 120px;
  object-position: bottom;
}

.logo-custom .player-logo-custom {
  display: flex;
}

.logo-custom .player-logo {
  display: none;
}

.player-cover-bottom-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom,hsla(0,0%,0%,0) 0,hsla(0,0%,0%,0.008) 8.5%,hsla(0,0%,0%,0.029) 16.5%,hsla(0,0%,0%,0.062) 24%,hsla(0,0%,0%,0.105) 31.2%,hsla(0,0%,0%,0.156) 37.9%,hsla(0,0%,0%,0.211) 44.4%,hsla(0,0%,0%,0.27) 50.7%,hsla(0,0%,0%,0.33) 56.8%,hsla(0,0%,0%,0.389) 62.8%,hsla(0,0%,0%,0.444) 68.7%,hsla(0,0%,0%,0.495) 74.7%,hsla(0,0%,0%,0.538) 80.8%,hsla(0,0%,0%,0.571) 87%,hsla(0,0%,0%,0.592) 93.3%,hsla(0,0%,0%,0.6) 100%);
}

.video-container.cover .player-cover {
  visibility: visible;
  opacity: 1;
  transition: 0s;
  pointer-events: auto;
}

.video-container.cover .progress-bar-container {
  display: none!important;
}

.video-container.hide-title .player-title {
  visibility: hidden;
  opacity: 0!important;
  pointer-events: none!important;
}

.video-container.cover .player-scrim-top {
  visibility: visible;
  opacity: 1;
}

.video-container.hide-search .searchbar-player-container,
.video-container.hide-search .player-cover-search {
  display: none;
}

.video-container.hide-search .player-title {
  right: 30px;
}

.video-container.hide-search.player-small.cover .player-title,
.video-container.hide-search.player-tiny.cover .player-title {
  right: 20px;
}

.player-tiny .player-overlay-logo {
  top: 15px;
  left: 15px;
}

.video-container.cover .player-controls-desktop,
.video-container.cover .player-controls-mobile,
.video-container.cover .player-control-back,
.video-container.cover .searchbar-player-container,
.video-container.cover .player-chapter-title,
.video-container.cover .overlay-cta {
  display: none;
}

@media (hover: hover) {
  /* Only show controls on hover when player is not in fullscreen. */
  .video-container:not(.fullscreen).player-full:hover .player-control-back,
  .video-container:not(.fullscreen).close-control-visible.player-full:hover .player-control-close,
  .video-container:not(.fullscreen).player-full:hover .player-title,
  .video-container:not(.fullscreen).player-full:hover .player-controls-desktop,
  .video-container:not(.fullscreen).player-full:hover .player-scrim-bottom,
  .video-container:not(.fullscreen).player-full:hover .player-scrim-top,
  .video-container:not(.fullscreen).player-full:hover .searchbar-player-container,
  .video-container:not(.fullscreen).player-full:hover .player-chapter-title {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .video-container:not(.fullscreen).player-small:not(.search-results):hover .player-scrim-bottom,
  .video-container:not(.fullscreen).player-tiny:not(.search-results):hover .player-scrim-bottom  {
    visibility: hidden;
    opacity: 0;
  }
}

.player-controls-desktop.on {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

.video-container.fullscreen .player-title {
  visibility: hidden;
  opacity: 0;
  transition: 1s opacity;
}

.video-container.fullscreen-controls .player-title {
  visibility: visible;
  opacity: 1;
  transition: .2s opacity;
}

.player-full.paused .player-title,
.player-full.paused .player-scrim-top,
.player-full.paused .player-control-back,
.player-full.paused .player-control-close,
.player-full.paused .player-controls-desktop,
.player-full.paused .searchbar-player-container,
.player-full.paused .player-chapter-title,
.player-full.paused .player-scrim-bottom,
.player-full.search-focused .player-title,
.player-full.search-focused .player-scrim-top,
.player-full.search-focused .player-control-back,
.player-full.search-focused .player-control-close,
.player-full.search-focused .player-controls-desktop,
.player-full.search-focused .searchbar-player-container,
.player-full.search-focused .player-chapter-title {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.video-container.loading .video-element,
.video-container.loading .player-controls-mobile,
.video-container.loading .player-controls-desktop,
.video-container.loading .mobile-overlay,
.video-container.loading .player-controls-mobile-ad,
.video-container.loading .searchbar-player-container,
.video-container.loading .player-chapter-title,
.video-container.loading .player-scrim-bottom,
.video-container.loading .video-seekbar-thumbnail,
.video-container.loading:not(.cover) .player-control-close,
.video-container.loading:not(.cover) .player-control-back,
.video-container.loading:not(.cover) .player-scrim-top,
.video-container.loading:not(.cover) .player-title {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none !important;
}

.loading-frame .video-content {
  background: #000;
}

/* Small player */

.player-small,
.player-tiny,
.player-minimal {
  width: 100%;
}

.player-small.fullscreen .player-play-mobile,
.player-tiny.fullscreen .player-play-mobile {
  transform: scale(2.5);
}

.player-small .player-controls-mobile,
.player-tiny .player-controls-mobile {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.player-small .player-title,
.player-tiny .player-title {
  top: 21px;
  left: 20px;
  right: 110px;
}

.player-small.search-focused .player-title,
.player-small.search-active .player-title,
.player-tiny.search-focused .player-title,
.player-tiny.search-active .player-title {
  right: 100%;
}

.player-small .player-play-mobile,
.player-tiny .player-play-mobile,
.player-minimal .player-play-mobile {
  transform: scale(2);
  z-index: 3;
}

.video-container.player-small.fullscreen .progress-bar-container.mobile,
.video-container.player-tiny.fullscreen .progress-bar-container.mobile {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  top: unset;
  bottom: 25px;
  right: 25px;
  left: 25px;
  cursor: pointer;
  background: none;
  z-index: 5000;
  pointer-events: none;
}

.player-small.fullscreen .player-controls-mobile .time-container,
.player-tiny.fullscreen .player-controls-mobile .time-container {
  display: block;
  position: absolute;
  color: #ffffff;
  bottom: 45px;
  left: 25px;
  height: 20px;
  z-index: 1;
}

.player-small.fullscreen .player-controls-mobile-right,
.player-tiny.fullscreen .player-controls-mobile-right {
  display: flex;
  align-items: center;
  position: absolute;
  color: #ffffff;
  bottom: 45px;
  right: 20px;
  z-index: 1;
}

.player-small.fullscreen .player-play-mobile i,
.player-tiny.fullscreen .player-play-mobile i {
  font-size: 50px;
}

.player-small.fullscreen .player-controls-mobile-right i,
.player-tiny.fullscreen .player-controls-mobile-right i {
  font-size: 27px;
}

.player-small.cover .player-title,
.player-tiny.cover .player-title {
  top: 20px;
  left: 20px;
  right: 110px;
}

.player-small .player-title,
.player-tiny .player-title {
  font-size: 17px;
}

.player-small .player-cover-search,
.player-tiny .player-cover-search {
  top: 20px;
  right: 22px;
}

.player-small .player-cover-play,
.player-tiny .player-cover-play {
  bottom: 20px;
  left: 20px;
}

.player-small .player-cover-logo,
.player-tiny .player-cover-logo {
  bottom: 20px;
  right: 20px;
}

.player-small .player-title,
.player-tiny .player-title {
  visibility: hidden;
  opacity: 0;
}

.player-small .progress-bar-container.mobile::after,
.player-tiny .progress-bar-container.mobile::after {
  content: '';
  position: absolute;
  top: -7px;
  height: 22px;
  width: 100%
}

.player-small .progress-bar-container.mobile,
.player-tiny .progress-bar-container.mobile {
  display: block;
  position: absolute;
  height: 15px;
  top: unset;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0;
  transform-origin: bottom;
  transition: transform .2s, opacity .2s;
  cursor: pointer;
  background: none;
  z-index: 2;
  pointer-events: auto;
}

.player-small .time-chapter,
.player-tiny .time-chapter {
  bottom: 0;
  height: 3px
}

.progress-bar-container.mobile .seeker {
  display: none;
  position: absolute;
  height: 50px;
  width: 50px;
  top: -12px;
  border-radius: 50%;
  background: #ffffff57;
  transform: translateX(25px);
}

.player-small .progress-bar,
.player-tiny .progress-bar {
  visibility: visible;
  opacity: 1;
  height: 100%;
  transform-origin: bottom;
}

.embedded.player-small .progress-bar,
.embedded.player-tiny .progress-bar {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s;
}

.mobile-overlay.embedded.player-small .progress-bar,
.mobile-overlay.embedded.player-tiny .progress-bar {
  visibility: visible;
  opacity: 1;
}

.progress-bar-container.grow .progress-bar {
  visibility: visible;
  opacity: 1;
  transform: scaleY(2);
}

.player-full .progress-bar-container.grow .progress-bar {
  transform: scaleY(4);
}

.progress-bar-container.grow .video-search-result {
  height: 14px;
}

.chapters-on .progress-bar.grow {
  transform: scaleY(7)!important;
}

.player-small .video-seekbar-thumbnail,
.player-tiny .video-seekbar-thumbnail {
  bottom: 50px;
}

.player-small.chapters-on .video-seekbar-thumbnail,
.player-tiny.chapters-on .video-seekbar-thumbnail {
  bottom: 65px;
}

.player-small .player-controls-mobile .time-container,
.player-tiny .player-controls-mobile .time-container {
  display: block;
  position: absolute;
  color: #ffffff;
  bottom: 18px;
  left: 20px;
  height: 20px;
  font-size: 17px;
  z-index: 1;
}

.player-tiny .player-controls-mobile .time-container {
  bottom: 17px;
}

.player-small .player-controls-mobile-right,
.player-tiny .player-controls-mobile-right,
.ad-playing .player-controls-mobile-right {
  display: flex;
  align-items: center;
  position: absolute;
  color: #ffffff;
  bottom: 15px;
  right: 20px;
  z-index: 1;
}

.player-minimal .player-controls-mobile-right {
  justify-content: flex-end;
  position: absolute;
  right: 22px;
  bottom: 13px;
}

.player-small .player-controls-mobile-right a,
.player-tiny .player-controls-mobile-right a,
.player-small .player-controls-mobile-right button,
.player-tiny .player-controls-mobile-right button {
  position: relative;
  color: #ffffff;
  width: 37px;
}

.player-small .player-controls-mobile-right i,
.player-tiny .player-controls-mobile-right i {
  margin-right: 0;
}

.player-small .player-controls-mobile-right .player-control-settings,
.player-tiny .player-controls-mobile-right .player-control-settings {
  margin-right: 0 !important;
}

.player-small .player-controls-mobile-right a:after,
.player-tiny .player-controls-mobile-right a:after,
.player-small .player-controls-mobile-right button:after,
.player-tiny .player-controls-mobile-right button:after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  left: -12px;
  top: -12px;
}

.player-small .player-controls-desktop,
.player-tiny .player-controls-desktop {
  display: none!important;
}

.player-small .player-controls-desktop,
.player-tiny .player-controls-desktop {
  visibility: hidden;
  opacity: 0;
  padding: 0 25px;
  top: unset;
  height: 55px;
  transition: opacity .2s;
}

.player-small .player-controls-desktop.on,
.player-tiny .player-controls-desktop.on,
.player-minimal .player-controls-desktop.on {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

.player-small .time-container,
.player-tiny .time-container {
  position: absolute;
  bottom: 25px;
  left: 15px;
}

.player-small .time-container span,
.player-tiny .time-container span {
  line-height: initial;
}

.player-small .player-play i,
.player-tiny .player-play i {
  font-size: 50px;
  margin: 0!important;
}

.player-small .player-controls-left,
.player-tiny .player-controls-left {
  width: 100%;
  justify-content: center;
  margin-bottom: 80px;
}

.player-small .vol-control-container,
.player-tiny .vol-control-container  {
  display: none;
}

.player-small .player-control-expand,
.player-tiny .player-control-expand,
.player-minimal .player-control-expand {
  width: intrinsic;
}

.player-small .volume-indicator,
.player-tiny .volume-indicator {
  display: none;
}

.player-tiny .player-scrim-top,
.player-small .player-scrim-top {
  display: none;
}

.player-small .settings-panel,
.player-tiny .settings-panel,
.player-minimal .settings-panel,
.player-small .download-panel,
.player-tiny .download-panel,
.player-minimal .download-panel {
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 10px 10px 0 0;
  z-index: 5001;
}

.player-small .download-panel,
.player-tiny .download-panel,
.player-minimal .download-panel {
  justify-content: space-between;
  flex-direction: initial;
}

.player-small .download-panel .settings-panel-header,
.player-tiny .download-panel .settings-panel-header {
  position: unset;
  width: calc(100% / 2);
  justify-content: space-between;
  padding: 0 20px;
}

.player-tiny .settings-panel .option.generating .spinner.transcoding,
.player-small .settings-panel .option.generating .spinner.transcoding,
.player-minimal .settings-panel .option.generating .spinner.transcoding {
  left: 16px;
}

.player-small.mobile-overlay .player-control-close,
.player-small.mobile-overlay .player-title,
.player-small.mobile-overlay .player-title.show-mobile,
.player-tiny.mobile-overlay .player-control-close,
.player-tiny.mobile-overlay .player-title,
.player-tiny.mobile-overlay .player-title.show-mobile {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s, background .2s;
}

.player-small.mobile-overlay .player-play-mobile,
.player-small.mobile-overlay .player-controls-mobile,
.player-small.mobile-overlay .progress-bar,
.player-small.mobile-overlay .progress-bar-container.mobile,
.player-tiny.mobile-overlay .player-play-mobile,
.player-tiny.mobile-overlay .player-controls-mobile,
.player-tiny.mobile-overlay .progress-bar,
.player-tiny.mobile-overlay .progress-bar-container.mobile,
.player-minimal.mobile-overlay .player-controls-mobile {
  visibility: visible;
  opacity: 1!important;
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
}

.player-small .player-chapter-title,
.player-tiny .player-chapter-title {
  bottom: 45px;
  left: 20px;
}

.player-tiny .player-chapter-title {
  left: 16px;
}

.player-small.fullscreen .player-chapter-title,
.player-small.fullscreen-controls .player-chapter-title,
.player-tiny.fullscreen .player-chapter-title,
.player-tiny.fullscreen-controls .player-chapter-title {
  visibility: hidden;
  opacity: 0;
  bottom: 95px;
  left: 25px;
  font-size: unset;
  z-index: 2;
}

.player-small.mobile-overlay .player-chapter-title,
.player-tiny.mobile-overlay .player-chapter-title {
  visibility: visible;
  opacity: 1;
}

.player-small .player-control-close,
.player-small .player-controls-mobile-right,
.player-small .time-container,
.player-tiny .player-control-close,
.player-tiny .player-controls-mobile-right,
.player-tiny .time-container {
  pointer-events: none;
}

.player-small.mobile-overlay .player-control-close,
.player-small.mobile-overlay .player-controls-mobile-right,
.player-small.mobile-overlay .time-container,
.player-tiny.mobile-overlay .player-control-close,
.player-tiny.mobile-overlay .player-controls-mobile-right,
.player-tiny.mobile-overlay .time-container {
  pointer-events: auto;
}

.player-small .player-control-close,
.player-tiny .player-control-close,
.player-small.paused .player-control-close,
.player-tiny.paused .player-control-close,
.video-container:hover .player-control-close {
  visibility: hidden;
  opacity: 0;
}

.player-small .player-control-close,
.player-tiny .player-control-close,
.player-small.paused .player-control-close,
.player-tiny.paused .player-control-close,
.video-container:hover .player-control-close {
  visibility: hidden;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.player-small.mobile-overlay.close-control-visible:not(.fullscreen) .player-control-close,
.player-tiny.mobile-overlay.close-control-visible:not(.fullscreen) .player-control-close {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/* Tiny player */

.player-tiny {
  min-width: unset;
}

.player-tiny .player-play-mobile {
  transform: scale(1.5);
}

.player-tiny .player-title {
  font-size: 17px;
  top: 16px;
  left: 15px;
}

.player-tiny .time-container span {
  font-size: 14px;
}

.player-tiny .player-controls-mobile-right {
  right: 14px;
}

.player-tiny .player-controls-mobile .time-container {
  left: 15px;
  font-size: 14px;
}

.player-tiny .full-duration,
.player-minimal .player-control-settings {
  display: none;
}

/* Player minimal */

.player-minimal .player-controls-mobile .time-container,
.player-minimal .searchbar-player-container,
.player-minimal .player-title,
.player-minimal .player-chapter-title,
.player-minimal .player-cover-search,
.player-minimal .m-slider.volume,
.player-minimal .progress-bar-container,
.player-minimal .time-container,
.player-minimal .player-overlay-logo {
  display: none!important;
}

.player-minimal .player-play-desktop {
  position: absolute;
  bottom: 15px;
  left: 16px;
  transform: none;
  z-index: 2;
}

.player-minimal .player-volume {
  position: absolute;
  left: 50px;
  bottom: 15px;
  z-index: 2;
}

.player-minimal .player-controls-left {
  position: unset;
  z-index: 2;
}

.player-minimal .player-controls-right {
  bottom: 13px;
  right: 23px;
  z-index: 2;
}

@media (hover: hover) {

  .player-minimal:hover .player-controls-desktop {
    visibility: visible;
    opacity: 1;
  }

  .player-minimal .player-controls-desktop::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 95px;
    opacity: .6;
    background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.008) 8.5%, hsla(0, 0%, 0%, 0.029) 16.5%, hsla(0, 0%, 0%, 0.062) 24%, hsla(0, 0%, 0%, 0.105) 31.2%, hsla(0, 0%, 0%, 0.156) 37.9%, hsla(0, 0%, 0%, 0.211) 44.4%, hsla(0, 0%, 0%, 0.27) 50.7%, hsla(0, 0%, 0%, 0.33) 56.8%, hsla(0, 0%, 0%, 0.389) 62.8%, hsla(0, 0%, 0%, 0.444) 68.7%, hsla(0, 0%, 0%, 0.495) 74.7%, hsla(0, 0%, 0%, 0.538) 80.8%, hsla(0, 0%, 0%, 0.571) 87%, hsla(0, 0%, 0%, 0.592) 93.3%, hsla(0, 0%, 0%, 0.6) 100% );
  }
}

/* Player no controls */

.player-no-controls *:not(.video-content):not(.video-poster):not(.subtitles) {
  display: none;
}

.player-no-controls video,
.player-no-controls .info-row,
.player-no-controls .info-close {
  display: block!important;
  cursor: pointer;
}

.player-no-controls.cover .player-cover,
.player-no-controls.cover .player-cover-bottom-scrim,
.player-no-controls.cover .player-cover-play {
  display: block!important;
}

.player-no-controls .video-content {
  pointer-events: none;
}

/* Small Player Search */

.player-small .searchbar-player-container {
  top: 11px;
  right: 20px;
}

.player-tiny .searchbar-player-container {
  top: 5px;
  right: 15px;
}

.player-small .searchbar-player-container,
.player-tiny .searchbar-player-container {
  pointer-events: none;
}

.player-small.mobile-overlay .searchbar-player-container,
.player-tiny.mobile-overlay .searchbar-player-container {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.player-small.search-focused .searchbar-player-container,
.player-small.search-active .searchbar-player-container,
.player-tiny.search-active .searchbar-player-container,
.player-tiny.search-focused .searchbar-player-container {
  width: calc(100% - 30px);
}
.player-tiny.search-active .searchbar-player-container,
.player-tiny.search-focused .searchbar-player-container {
  width: calc(100% - 21px);
}

.player-small.paused .player-scrim-bottom,
.player-tiny.paused .player-scrim-bottom,
.player-small.paused .player-scrim-top,
.player-tiny.paused .player-scrim-top {
  visibility: hidden;
  opacity: 0;
}

.player-small.search-active .player-scrim-top,
.player-small.search-focused .player-scrim-top,
.player-small.cover .player-scrim-top,
.player-tiny.search-active .player-scrim-top,
.player-tiny.search-focused .player-scrim-top,
.player-tiny.cover .player-scrim-top {
  display: block;
  visibility: visible;
  opacity: 1;
}

.player-small.search-focused .player-overlay-logo,
.player-small.search-active .player-overlay-logo,
.player-tiny.search-focused .player-overlay-logo,
.player-tiny.search-active .player-overlay-logo {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.player-small .video-search-result,
.player-tiny .video-search-result {
  top: unset;
  bottom: 0;
  height: 11px;
}

.searchbar-player-container button i {
  visibility: visible;
  opacity: 1;
}

.player-scrim-bottom {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  padding: 30px 25px 0 25px;
  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.008) 8.5%, hsla(0, 0%, 0%, 0.029) 16.5%, hsla(0, 0%, 0%, 0.062) 24%, hsla(0, 0%, 0%, 0.105) 31.2%, hsla(0, 0%, 0%, 0.156) 37.9%, hsla(0, 0%, 0%, 0.211) 44.4%, hsla(0, 0%, 0%, 0.27) 50.7%, hsla(0, 0%, 0%, 0.33) 56.8%, hsla(0, 0%, 0%, 0.389) 62.8%, hsla(0, 0%, 0%, 0.444) 68.7%, hsla(0, 0%, 0%, 0.495) 74.7%, hsla(0, 0%, 0%, 0.538) 80.8%, hsla(0, 0%, 0%, 0.571) 87%, hsla(0, 0%, 0%, 0.592) 93.3%, hsla(0, 0%, 0%, 0.6) 100% );
  pointer-events: none !important;
  z-index: 1;
  transition: .2s;
}

.chapters-on .player-scrim-bottom {
  height: 215px;
}

.video-container.fullscreen-controls:-webkit-full-screen .player-scrim-bottom,
.video-container.fullscreen.fullscreen-controls .player-scrim-bottom,
.video-container.show-settings .player-scrim-bottom {
  visibility: visible;
  opacity: 1;
}

.player-small.search-results .player-scrim-bottom {
  visibility: visible;
  opacity: 1;
  bottom: -45px;
}

.player-small .player-logo,
.player-tiny .player-logo,
.player-small .player-logo i,
.player-tiny .player-logo i,
.player-minimal .player-logo i {
  width: 21px;
}

.player-small .player-logo,
.player-tiny .player-logo {
  margin-left: 0;
}

/* Font weight */

@media
only screen and (max-width: 768px),
only screen and (max-resolution: 1.75dppx),
only screen and (-webkit-max-device-pixel-ratio: 1.75) {
  .video-container * {
    font-weight: 400;
  }
  .searchbar-player::placeholder {
    font-weight: 400!important;
  }
}

/* Ads */

.video-ad {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ad-playing.video-container {
  cursor: pointer;
}

.player-full.ad-playing.paused .player-scrim-top {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ad-playing.hide-title.embedded:not(.ad-non-linear) .player-scrim-top {
  display: none;
}

.ad-playing .video-ad {
  display: block;
}

.player-full .player-controls-mobile-ad,
.ad-playing:not(.ad-non-linear) .player-controls-mobile,
.ad-playing:not(.ad-non-linear) .rew-overlay,
.ad-playing:not(.ad-non-linear) .fwd-overlay,
.ad-playing:not(.ad-non-linear) .player-control-settings,
.ad-playing:not(.ad-non-linear) .searchbar-player-container,
.ad-playing:not(.ad-non-linear) .player-title {
  display: none!important;
}

.ad-playing:not(.ad-non-linear) .progress-bar,
.ad-playing:not(.ad-non-linear) .progress-bar-container {
  pointer-events: none!important;
}

.ad-playing:not(.ad-non-linear) .time-bar {
  background: var(--david-yellow);
}

.ad-playing iframe {
  padding-bottom: 50px!important;
  transition: padding .2s ease;
}

.ad-playing.ad-non-linear iframe {
  padding-bottom: 25px !important;
}

.player-full.paused.ad-non-linear iframe,
.player-full.ad-non-linear:hover iframe {
  padding-bottom: 90px!important;
  /* transform: translatey(-90px); */
}

.ad-playing.player-small iframe,
.ad-playing.player-tiny iframe {
  padding-bottom: 45px!important;
}

.ad-playing.ad-non-linear.player-small iframe,
.ad-playing.ad-non-linear.player-tiny iframe {
  padding-bottom: 0!important;
}

.ad-playing.ad-ios .player-control-fullscreen {
  display: none;
}

.player-controls-mobile-ad,
.player-small .player-controls-mobile-ad,
.player-tiny .player-controls-mobile-ad,
.player-minimal .player-controls-mobile-ad {
  display: none;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  transition: opacity .2s;
  background: linear-gradient(to bottom,hsla(0,0%,0%,0) 0,hsla(0,0%,0%,0.008) 8.5%,hsla(0,0%,0%,0.029) 16.5%,hsla(0,0%,0%,0.062) 24%,hsla(0,0%,0%,0.105) 31.2%,hsla(0,0%,0%,0.156) 37.9%,hsla(0,0%,0%,0.211) 44.4%,hsla(0,0%,0%,0.27) 50.7%,hsla(0,0%,0%,0.33) 56.8%,hsla(0,0%,0%,0.389) 62.8%,hsla(0,0%,0%,0.444) 68.7%,hsla(0,0%,0%,0.495) 74.7%,hsla(0,0%,0%,0.538) 80.8%,hsla(0,0%,0%,0.571) 87%,hsla(0,0%,0%,0.592) 93.3%,hsla(0,0%,0%,0.6) 100%);
}

.ad-playing:not(.ad-non-linear) .progress-bar:not(.mobile),
.ad-playing:not(.ad-non-linear) .progress-bar-container:not(.mobile) {
  visibility: visible;
  opacity: 1;
}

.ad-playing:not(.ad-non-linear) .player-controls-mobile-ad,
.player-small.ad-playing:not(.ad-non-linear) .player-controls-mobile-ad,
.player-tiny.ad-playing:not(.ad-non-linear) .player-controls-mobile-ad,
.player-minimal.ad-playing:not(.ad-non-linear) .player-controls-mobile-ad {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ad-playing:not(.paused) .player-controls-mobile-ad,
.player-small.ad-playing:not(.paused) .player-controls-mobile-ad,
.player-tiny.ad-playing:not(.paused) .player-controls-mobile-ad,
.player-minimal.ad-playing:not(.paused) .player-controls-mobile-ad {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.ad-playing.mobile-overlay .player-controls-mobile-ad,
.player-small.ad-playing.mobile-overlay  .player-controls-mobile-ad,
.player-tiny.ad-playing.mobile-overlay  .player-controls-mobile-ad,
.player-minimal.ad-playing.mobile-overlay  .player-controls-mobile-ad {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.player-controls-mobile-ad i {
  filter: invert(1);
}

.player-controls-mobile-ad .player-play {
  position: absolute;
  bottom: 15px;
  left: 11px;
  transform: unset;
}

.player-controls-mobile-ad .time-container {
  position: absolute;
  bottom: 19px;
  left: 44px;
  color: #fff;
  line-height: 19px;
}

.resize-detector,
.resize-detector-expand,
.resize-detector-shrink {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -1;
  visibility: hidden;
  max-width: 100%;
  pointer-events: none;
}

.resize-detector-expand-child,
.resize-detector-shrink-child {
  position: absolute; left: 0; top: 0; transition: 0s;
}
.resize-detector-shrink-child {
  width: 200%; height: 200%;
}

.player-description {
  background-color: rgba(0,0,0,.7);
  backdrop-filter: blur(100px) saturate(120%);
  -webkit-backdrop-filter: blur(100px) saturate(120%);
  position: absolute;
  line-height: normal;
  color: white;
  padding: 5px 5px 0 5px;
  border: 1px solid #fff3;
  border-radius: 12px;
  bottom: 80px;
  right: 25px;
  max-width: 200px;
  max-height: calc(100% - 105px);
  pointer-events: none;
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  transition: .15s ease;
  z-index: 3;
}

.player-description .video-seek {
  background-color: #ffffff0f;
  padding: 7px 10px;
  border-radius: 7px;
  opacity: 1;
  border: 1px solid #ffffff1a;
  display: block;
  color: white;
  margin-bottom: 5px;
  cursor: pointer;
}

.fullscreen .player-description {
  bottom: 95px;
  max-width: 290px;
}

.player-small .player-description {
  border: none;
  border-left: 1px solid #fff3;
  border-radius: 0;
  top: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  margin: 0;
  transform: translateY(0);
}

.player-small .player-control-description {
  width: 26px!important;
}

.no-description .player-control-description {
  display: none!important;
}