/** player controlers should be in front of related videos
* {@link suggestedVideoEndcap.js}
* @since 11.0.0.
*/
.VDOXPlayerWrapper .vjs-control-bar {
  z-index: 1;
}

/** wrapper around suggestions
* @since 11.0.0.
*/
.vjs-suggested-video-endcap {
  height: 100% !important;
}

.vjs-suggested-video-endcap.is-active {
  z-index: 99;
}
/** wrapper around suggestions should not have
* padding for mobile version
* @since 11.0.0.
*/
@media (max-width: 640px) {
  .vjs-suggested-video-endcap {
    padding: 0 !important;
  }
}

/** description for every video suggestion
* should have these styles:
* @since 11.0.0.
*/
.vjs-suggested-video-endcap-link {
  color: white !important;
  overflow-wrap: break-word !important;
  font: 400 14px/1 Arial, sans-serif !important;
}

@media (max-width: 640px) {
  .vjs-suggested-video-endcap-link {
    font: 400 12px/1 Arial, sans-serif !important;
  }
}

.vjs-suggested-video-parent-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 95% !important;
  display: block !important;
  padding-bottom: 3rem !important;
}

@media (max-width: 640px) {
  .vjs-suggested-video-parent-wrapper {
    padding-bottom: 1rem !important;
    height: 90% !important;
  }
}

/** in case when audio player do not have any picture
* it will shrink height. To prevent player button to be shrinked
* with video height's we put min height for player to be ensure
* that player button is enough visible to user to click it
* @since 11.0.0.
*/
.VDOXPoster .play {
  min-height: 100px !important;
}

@media (max-width: 640px) {
  .VDOXPoster .play {
    min-height: 50px !important;
  }
}

/** the same as {@param .VDOXPlayer .play} but for mobile version. And
* define {@param z-index} to be ensure that player button in in front of
* suggestion wrapper {@param vjs-suggested-video-parent-wrapper}. Otherwise
* for some reason play button is not playable
* @since 11.0.0.0
*/
.VDOXPlayerWrapper .vjs-big-play-button {
  z-index: 2 !important;
}

@media (max-width: 640px) {
  .VDOXPlayerWrapper .vjs-big-play-button {
    min-height: 50px !important;
  }
}