/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/

.video-js{
  width: 100%;
  height: 492px;
}
.video-js .vjs-big-play-button{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5em;
  border: 0;
  border-radius: .4em;
  background-color: rgba(0, 0, 0, 0.8);
}
.video-js .vjs-control-bar{ bottom: 0.5rem; }
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:hover{
 background-color: rgba(255, 0, 0, 0.8);
}
.vjs-playlist{ background-color: #ffffff; }
.vjs-playlist-vertical{
  max-height: 485px;
  padding-right: 15px;
  scrollbar-width: thin;
  scrollbar-track-color:#e5e5e5;
  scrollbar-face-color:#a7a7a7;
  scrollbar-arrow-color:#05B7FF;
  scrollbar-shadow-color:#a7a7a7;
  scrollbar-highlight-color:#a7a7a7;
  scrollbar-3dlight-color:#a7a7a7;
  scrollbar-darkshadow-color:#a7a7a7;
}
.vjs-playlist-vertical .vjs-playlist-item{ margin-bottom: 10px; }
.vjs-playlist .vjs-playlist-now-playing-text,
.vjs-playlist .vjs-playlist-duration,
.vjs-playlist .vjs-up-next-text,
.vjs-playlist .vjs-playlist-name{
  font-size: 13px;
}
/* width */
.vjs-playlist-vertical::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
.vjs-playlist-vertical::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius:4px;
}

/* Handle */
.vjs-playlist-vertical::-webkit-scrollbar-thumb {
    background: #a7a7a7;
    border-radius:4px;
}

/* Handle on hover */
.vjs-playlist-vertical::-webkit-scrollbar-thumb:hover {
    background: #a7a7a7;
}

@media(max-width: 860px){
  .video-js{ height: 390px; }
  .video-js .vjs-control-bar{ bottom: 0rem; }
  .vjs-playlist-vertical{ display: flex; overflow: auto; padding-right: 0; }
  .vjs-playlist-vertical .vjs-playlist-item{ min-width: 180px; margin: 5px 5px 5px 0;  }
  .vjs-playlist-item-list{ display: flex; }
}
@media(max-width: 480px){
  .video-js{ height: 200px; }
}