/*--------------knoppen player --------------------------*/   
  .play, .pause, .step-backward, .backward, .step-forward, .forward, .volume-up, .volume-mute
  {
  	display: block;
  	width: 27px;
  	height: 27px;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  }
  .play-small{
  	display: block;
  	width: 20px;
  	height: 20px;
  	background-image: url("buttons/play.svg");
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  }
  
  .pause-small{
  	display: block;
  	width: 20px;
  	height: 20px;
  	background-image: url("buttons/pause.svg");
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  }
  
  .play{
  	background-image: url("buttons/play.svg");
  }
  
  .pause{
  	background-image: url("buttons/pause.svg");
  }
  
  .step-backward{
  	background-image: url("buttons/step-backward.svg");
  }
  
  .backward{
  	background-image: url("buttons/backward.svg");
  }
  
  .step-forward{
  	background-image: url("buttons/step-forward.svg");
  }
  
  .forward{
  	background-image: url("buttons/forward.svg");
  }
  
  .volume-up{
  	background-image: url("buttons/volume-up.svg");
  }
  .volume-mute{
  	background-image: url("buttons/volume-mute.svg");
  }
  
  /*--------------knoppen player --------------------------*/  
 
 #audioPlayer{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
    }
    
#myProgress {
  max-width: 430px;
  background-color: #d9d9f2; 
  cursor: pointer;
  border-radius: 10px;
}

#myBar { /*progress bar*/
  width: 0%;
  height: 5px;
  background-color: #ffc266; 
  border-radius: 10px;
}


.btn-action{  /*ruimte bedieningsknoppen*/
  cursor: pointer;
  padding-top: 10px;
  width: 35px;
}

.infos-ctn{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}


.infos-ctn{ /*padding bovenkant track info*/
padding-top: 15px;
}

.btn-ctn > div {
 padding: 5px 8px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #ffffff;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  max-width: 210px;
  text-align: center;
}


.playlist-track-ctn{
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}

.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #4d4d4d;
  color: #ffc266 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #ffc266 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}