/*
donker grijs #a6a6a6
licht grijs #c6c6c6
donkerblauw #000044
blauw #027d8f
donkergeel #ffc627
groen #027d8f
donkergroen #336633
rood #e20419
oranje #ef6419
wit #fafafa
*/

.apstart {background: url($fileLocation/audio-player/src/play.png); background-size:100% 100%;background-repeat:no-repeat; }
.apstart:hover {background: url($fileLocation/audio-player/src/hplay.png); background-size:100% 100%; background-repeat:no-repeat; }

/* audio player */

#audioplayer{
  color:#ffffff;	
  background:#c6c6c6;
  padding:30px;
  border:5px solid #027d8f;
  border-radius:8px;
  margin-top:50px;
  }
.audio-player{
  display:none;
  max-width:600px;
  width: 100%;
  box-sizing:border-box;
  float: left;
  margin-top:0px;
  margin-bottom: 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 0 0 0 #555;
  }

/* loading */
.audio-player .loading{
  color: #141414;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 2px 0;
  width: 100%;
  float: left;
  text-shadow: 0 0 0 0 #919191;
  }

/* timer / title / logo */
.audio-player .time-display{
  width:100%;
  position:relative;
  left:30px;
  display:none;
  font-size:12px;
  line-height:16px;
  color:#ffffff;
  }
.audio-player .time-display .elapsed{
  display:inline-block;
  width:25px;
  }
.audio-player .time-display .duration{
  display:inline-block;
  padding-left:2px;
  }
.audio-player .title-display{
  width:100%;
  position:relative;
  left:5px;
  display:none;
  font-size:12px;
  line-height:16px;
  color:#ffffff;
  }
  
#audioplayer .song{
  width:100%;
  font-size:18px;
  color:#ffffff;
  font-weight:normal;
  cursor:pointer;
  }
#audioplayer .song:hover{
  color:#027d8f;
  }
  
  
.logo{
  width:40%;
  max-width:200px;
  margin-bottom:10px;
  display:block;
  }

/* buttons */
.audio-player .buttons{
  position:relative;
  max-width:300px;
  margin:10px 0 0 0;
  border:0px solid green;  
  }
.audio-player .buttonsCont{
  position:relative;
  display:block;
  width:100%;
  border:0px solid red;
  }  
  
.audio-player .buttonsCont .buttons .prev, .audio-player .buttonsCont .buttons .next, .audio-player .buttonsCont .buttons .play, .audio-player .buttonsCont .buttons .stop {
  display:inline-block;
  color:#ffffff;	
  background:#027d8f;
  font-size:18px;
  margin:8px 8px 0px 0px; 
  padding:8px 15px;
  border-radius:6px;
  cursor:pointer; 
  transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
  }   
.audio-player .buttonsCont .buttons .prev:hover,.audio-player .buttonsCont .buttons .next:hover,.audio-player .buttonsCont .buttons .play:hover,.audio-player .buttonsCont .buttons .stop:hover,.audio-player .buttons .mode:hover{
  background-color:#e20419;
  }
  
.audio-player .controls .playmode .mode, .audio-player .audio-controls .mute{
  color:#ffffff;	  
  background:#027d8f;  	  
  font-size:14px;  	  
  padding:2px 6px;
  margin:10px 0px;
  border-radius:4px;
  cursor:pointer;
  transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
  }
.audio-player .controls .playmode .mode:hover, .audio-player .audio-controls .mute:hover{
  background-color:#e20419;
  }
    


/* controls - progress slider */
.audio-player .controls .audio-progress{
  float: left;
  width: 100%;
  height: 8px;
  border: none;
  background: #666666;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; 
  margin-left:10px;
  }
.audio-player .controls .audio-progress .slider{
  width: 100%;
  float: left;
  }
.audio-player .controls .audio-progress .ui-slider-range{
  margin-top: -1px;
  background: #e20419; 
  height: 8px;
  border: none;
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  }

/* controls - volume */
.audio-player .controls .volume-controls{
  height: 8px;
  width:100%;
  background-color: #666666;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-left:10px;
  }
.audio-player .controls .volume-controls .ui-slider-range{
  margin: -1px 0px;
  background-color: #e20419;
  height: 8px; border: none;
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  }
.audio-player .audio-controls{
  width:100%;
  display:none;
  }


/*speaker*/
#audioplayer .speaker{
  color:#027d8f;
  line-height:0px;
  font-size:20px !important;
  margin:0px 0px 0px 12px;
  position:relative;
  top:4px;
  }
  
#audioplayer .playerline{
  display:block;
  border:1px solid #027d8f;
  } 
#audioplayer .logo{
  display:block;
  width:20%;
  float:right;
  }
  
.audio-player .controls .ui-slider-handle{background:transparent;border:none}
.audio-player .controls .audio-vol{background:transparent;border:none}

/*
.audio-player .controls .volume-controls .audio-mute {margin: -4px  -25px ;width:16px; height: 16px; display: block; float: left; background: url($fileLocation/audio-player/src/speakeract.png); background-size:16px 16px;background-repeat:no-repeat; }
.audio-player .controls .volume-controls .audio-mute:hover {width:16px; height: 16px; display: block; float: left; background: url($fileLocation/audio-player/src/hspeakeract.png); background-size:16px 16px;background-repeat:no-repeat; }
.audio-player .controls .volume-controls .audio-mute.muted{width:16px; height: 16px; display: block; float: left; background: url($fileLocation/audio-player/src/speaker.png); background-size:16px 16px; }
.audio-player .controls .volume-controls .audio-mute.muted:hover{ width:16px; height: 16px; display: block; float: left; background: url($fileLocation/audio-player/src/hspeaker.png); background-size:16px 16px; }
*/