.audio-player {
  display: inline-flex;
  justify-content: space-between;
  padding-left: 2.5%;
  padding-right: 2.5%;
  align-items: center;
  width:35%;
  margin-left:30%;
  height:40px;
  border-radius: 20px;
  filter: drop-shadow(0px 0px 8px #48f);
}

.audio-player > .controls {
  margin: 0px;
}

#play-pause-button {
  margin-top:1px;
  background: rgba(0,0,0,0);
  border: 0px;
  width: 26px;
  height: 22px;
  margin-right:12px;
}

#play-pause-button-img {
  background: rgba(0,0,0,0);
  border: 0px;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 0px 8px #48f);
}

.progress {
  display: inline-flex;
  height: 6px;
  background-color: #06f;
  width: 70%;
  border-radius: 8px;
  overflow: hidden;
}

.progress-bar {
    width: 0px;
    height: 100%;
    background-color: #fff;
}

#volume-slider {
  -webkit-appearance: none;
  margin: 0px;
  width: 10%;
  overflow: hidden;
  border-radius: 8px;
  height: 6px;
}


#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px;
    color: #06f;
    background: #fff;
    box-shadow: -800px 0 0 800px #fff;
    cursor: ew-resize;
}

#volume-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    margin-left: -8px;
    margin-right: -8px;
    height: 6px;
    border: 0px;
    cursor: ew-resize;
    background: #06f;
}

#volume-slider::-moz-range-progress {
    background: #fff;
    border: 0px;
    margin: 0px;
    height: 6px;
}

#volume-slider::-moz-range-thumb {
    opacity: 0;
    border: 0px;
    margin: 0px;
    width: 1px;
}

#volume-slider::-moz-range-track {
    border: 0px;
    margin: 0px;
    height: 6px;
    background: #06f;
}

#volume-slider::-ms-fill-lower {
  background: #fff;
  border: 0px;
  margin: 0px;
  height: 6px;
  background-color: #fff; 
}

#volume-slider::-ms-fill-upper {  
  border: 0px;
  margin: 0px;
  height: 6px;
  background-color: #06f;
}

#volume-slider::-ms-thumb {
    opacity: 0;
    border: 0px;
    margin: 0px;
    width: 1px;
}

#volume-icon {
  height: 18px;
  width: auto;
  filter: drop-shadow(0px 0px 8px #48f);
}