.audioplayer{
    width: 100%;
    height: 34px;
    border: 1px solid var(--lightred);
}

.play,.pause{
    height:30px; 
    width: 32px;
    border: none;
    float:left;
    outline:none;
}

.play{background: url(play_pause_24.png?i=2) no-repeat 4px 4px;}
.pause{background: url(play_pause_24.png?i=2) no-repeat -32px 4px;}

.timeline{
    width: calc(100% - 55px);
    height: 7px;
    margin: 13px 0 0 10px;
    float: left;
    background: var(--white);
}

.playhead {
    width: 0px;
    height: 7px;
    margin: 0;
    float: left;
    background: var(--lightred);
}

.vol_control_background {
    display:none;
    width:36px;
	height:16px;
	position:absolute;
    margin-top:4px;
    margin-left:243px;
	background:#000;
	float:left;
}
.vol_control_background_2 {
    display:none;
    width:29px;
	height:16px;
	position:absolute;
    margin-top:4px;
    margin-left:243px;
	background:#ffd556;
	float:left;
}

.vol_control {
    display:none;
    width: 40px;
	height:24px;
    margin:2px 0 0 -20px;
    background: transparent url(volume2.png) no-repeat;
	outline:none;
	position:absolute;
	float:left;
}
input[type='range'] {
  -webkit-appearance: none !important;
}
input[type=range]::-moz-range-track {
    width: 40px;
    height: 0px;
    border: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent;
  height: 16px;
  width: 10px;
  cursor: pointer;
}
input[type='range']::-moz-range-thumb {
  -moz-appearance: none !important;
  background: transparent;
  height: 16px;
  width: 10px;
  border: none;
  cursor: pointer;
}