.hp_slide{
    width:100%;
    background:white;
    height:25px;
}
.hp_range{
    width:0;
    background:black;
    height:25px;
}


.progress-bar {
  background-color: whiteSmoke;
  border-radius: 1px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
 
  position: relative;
  display: block;
}
 
 #seekbar{margin:10px 2px 2px 5px; 
  background-image:
	   -webkit-linear-gradient(-45deg,  transparent 33%, rgba(0, 0, 0, .1) 33%,rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, rgba(255, 255, 255, .25),   rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25));   
	   width:200px;
	   width:175px;
	   border: 1px solid #9f9d9d;    
	   
	   height:10px;
	   }

#seekbar .ui-slider-range { 
	background: #f0f0dd  !important; 
}
	   
.bottombar{margin:5px 2px;display:flex}
#play{padding: 2px; background: #f0f0dd;    border: 1px solid #bab8b4;}
button #splay{background:url(play1.png) no-repeat; height:15px;width:15px; border:0px;display:block;margin-top: 2px;margin-left: 3px;}
#pause{padding: 2px; background: #f0f0dd;    border: 1px solid #bab8b4;}
button #spause{background:url(pause.png) no-repeat; height:15px;width:15px; border:0px;display:block;margin-top: 2px;margin-left: 3px;}

#stop{  padding: 2px;   background: #f0f0dd;    border: 1px solid #bab8b4;}
button #sstop{background:url(stop.png) no-repeat; height:15px;width:15px; border:0px;display:block;margin-top: 2px;margin-left: 3px;}

#svolume{background:url(volume.png) no-repeat; height:15px;width:15px; border:0px;display:inline-block; }

.volumebar{display: inline-block;    background: #f0f0dd;    border: 1px solid #bab8b4;    padding:2px 5px 0px 5px; width:130px }
#volumeslider{width:50px;display: inline-block;     border: 1px solid #9f9d9d;    background: #f0f0dd;}



#seekbar.ui-slider .ui-slider-handle{height: 1.1em; width: 0.4em !important;}
.ui-slider-horizontal .ui-slider-handle{margin-left: 0em !important;}
#volumeslider.ui-slider .ui-slider-handle{  width: 0.5em !important;}