@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');

.jw-button-container .jw-icon-playback {
  background-color: #fff;
  background-image: linear-gradient(to top, #7227ff, #30aaff);
  border-radius: 50%;
  margin-top: -4px;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

.jw-button-container .jw-icon-playback svg {
  opacity: 1;
}

@media(min-width:576px) {
  .jw-button-container .jw-icon-playback {
    position: absolute;
    left: 50%;
    margin-left: -22px;
    margin-right: 0;
    width: 44px;
    height: 44px;
  }

  .jw-flag-fullscreen .jw-icon-playback {
    bottom: none;
    margin-left: none;
  }
}

@media(min-width:576px) {
  .jw-button-container .jw-text-elapsed {
    position: absolute;
    left: 50%;
    width: 60px;
    margin-left: -100px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: flex-end;
  }

  .jw-flag-fullscreen .jw-text-elapsed {
    width: 100px;
    margin-left: -150px;
  }

  .jw-button-container .jw-text-duration {
    position: absolute;
    right: 50%;
    width: 60px;
    margin-right: -100px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
  }

  .jw-flag-fullscreen .jw-text-duration {
    width: 100px;
    margin-right: -150px;
  }

  .jw-button-container .jw-text-duration:before {
    display: none;
  }
}

@media(min-width:576px) {
  .jw-logo {
    position: absolute;
    right: auto;
    top: none;
    left: 62px;
    bottom: -8px;
    text-outline: 0;
    width: 100px !important;
    height: 21px !important;
    z-index: 10;
  }

  .jw-flag-fullscreen .jw-logo {
    left: 120px;
    bottom: 19px;
  }
}
@media(min-width:768px) {
  .jw-logo {
    left: 62px;
  }

  .jw-breakpoint-7 .jw-logo {
        left: 120px;
        bottom: 18px;
        width: 119px !important;
        height: 25px !important;
    }
}

.jw-state-idle .jw-logo,
.jw-state-error .jw-logo {
  display: none;
}

.jw-slider-horizontal .jw-slider-container {
  height: 10px;
}

.jw-progress {
  background-image: linear-gradient(to left, #7227ff, #30aaff);
}

.jw-knob {
  background-image: linear-gradient(to top, #7227ff, #30aaff);
  width: 20px;
  height: 20px;
}

.jw-slider-volume .jw-progress {
  background-image: linear-gradient(to bottom, #7227ff, #30aaff);
}

.jw-knob:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #fafdff;
  border-radius: 50%;
}

.jw-knob:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background-color: #d5dae0;
  border-radius: 50%;
}

.jw-buffer, .jw-progress, .jw-rail {
  border-radius: 4px;
}

.jw-settings-menu .jw-icon::after, .jw-icon-settings::after, .jw-icon-volume::after,
.jw-settings-menu .jw-icon.jw-button-color::after {
  box-shadow: inset 0 -3px 0 -1px #4560FE;
}

.jw-breakpoint-4 .jw-display .jw-icon,
.jw-breakpoint-5 .jw-display .jw-icon,
.jw-breakpoint-6 .jw-display .jw-icon{
  width: 96px;
  height: 96px;
  line-height: 96px;
  position: relative;
}

.jw-breakpoint-7 .jw-display .jw-icon {
  width: 110px;
  height: 110px;
  line-height: 110px;
  position: relative;
}
.jw-breakpoint-7 .jw-display .jw-svg-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  position: relative;
}

.jw-breakpoint-7 .jw-button-container .jw-icon-playback {
    margin-left: -30px;
}

.jw-display-icon-container {
  vertical-align: top;
}

.jw-state-idle .jw-controls-backdrop {
  background-color: rgba(13, 21, 35, .3);
}

@media(max-width:575px) {

  .jw-settings-sharing,
  .jw-icon-settings,
  .jw-icon-fullscreen,
  .jw-icon-cc {
    width: 40px !important;
  }
}

@media(max-width:463px) {
  .jw-display-icon-container .jw-svg-icon-play {
    background: url("/ski-svg/play2.svg") no-repeat;
    background-size: cover;
  }

  .jw-display-icon-container .jw-svg-icon-play path {
    display: none;
  }
}

@media(min-width:464px) {
  .jw-display-icon-container .jw-svg-icon-play {
    background: url("/ski-svg/play.svg") no-repeat;
    background-size: cover;
  }

  .jw-display-icon-container .jw-svg-icon-play path {
    display: none;
  }
}

.jw-svg-icon-fullscreen-on {
  background: url("/ski-svg/fullscreen-on.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-fullscreen-off {
  background: url("/ski-svg/fullscreen-off.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-cc-on {
  background: url("/ski-svg/subtitles-on.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-cc-off {
  background: url("/ski-svg/subtitles-off.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-settings {
  background: url("/ski-svg/settings.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-sharing {
  background: url("/ski-svg/share.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-playback-rate {
  background: url("/ski-svg/speed.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-quality-100 {
  background: url("/ski-svg/size.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-volume-0 {
  background: url("/ski-svg/volume-0.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-volume-50 {
  background: url("/ski-svg/volume-50.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-volume-100 {
  background: url("/ski-svg/volume-100.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-close {
  background: url("/ski-svg/close.svg") no-repeat;
  background-size: cover;
}
.jw-svg-icon-buffer {
  background: url("/ski-svg/buffer.svg") no-repeat;
  background-size: cover;
}

.jw-svg-icon-fullscreen-on path,
.jw-svg-icon-fullscreen-off path,
.jw-svg-icon-cc-on path,
.jw-svg-icon-cc-off path,
.jw-svg-icon-settings path,
.jw-svg-icon-sharing path,
.jw-svg-icon-playback-rate path,
.jw-svg-icon-quality-100 path,
.jw-svg-icon-volume-0 path,
.jw-svg-icon-volume-50 path,
.jw-svg-icon-volume-100 path,
.jw-svg-icon-close path,
.jw-svg-icon-buffer path {
  display: none;
}


.jw-button-color svg {
  opacity: .8;
  transition: all .15s;
  color: #fff;
}

.jw-button-color:hover svg {
  opacity: 1;
}

.jw-controlbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.jw-settings-submenu {
  padding: 10px;
}

.jw-settings-content-item {
  line-height: 20px;
  border: none !important;
  outline: none !important;
}

.jw-settings-item-active {
  background-image: linear-gradient(to left, #7227ff, #30aaff);
  border-radius: 25px;
  color: #fff;
}

.jw-settings-item-active:before {
  display: none;
}

.jw-settings-menu {
  background: linear-gradient(135deg, rgba(47, 45, 74, .92) 0%, rgba(42, 55, 74, .92) 100%);
}

.jw-settings-content-item {
  font-family: 'Montserrat';
  font-size: 14px;
  font-weight: normal !important;
}

.jw-auto-label { font-weight: 600; margin-left: 5px; }

.jw-settings-menu .jw-button-color {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.jw-settings-menu .jw-button-color + .jw-button-color {
  margin-left: 10px;
}

.jw-settings-menu .jw-button-color .jw-svg-icon {
  width: 24px;
  height: 24px;
}

.jw-settings-topbar {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
}


.jw-settings-menu .jw-button-color[aria-checked="true"] {
  opacity:1;
}

.jw-settings-menu .jw-button-color[aria-checked="true"] svg  {
opacity:1;
}

.jw-settings-menu .jw-button-color svg {
  opacity:.5;
}

.jw-settings-menu .jw-icon.jw-button-color::after {
  display: none;
}

@media(min-width:464px) {
  .jw-settings-menu {
    border-radius: 8px;
    padding: 10px;
    box-shadow:  0 5px 25px rgba(0,0,0,.25);

  }

  .jw-settings-topbar {
    border-radius: 5px 5px 0 0;
    background: none;
    /* box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10); */
  }
}



.jw-sharing-link {
  background-color: #FF2E68;
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 50px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.jw-sharing-link .jw-svg-icon {
  margin-right: 5px;
}
.jw-sharing-copy {
  margin: 0;
  padding: 0;
}