.audio_player_container {
  --seek-before-width: 0%;
  --buffered-width: 0%;

  display: flex;
  flex-direction: column;
}
/* #audio-player-container::before {
  position: absolute;
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  background: linear-gradient(to left, #007db5, #ff8a00);
  z-index: -1;
} */

#play-icon {
  margin: 1rem auto 0;
  background: transparent;
  border: none;
}
path {
  stroke: #1d9bf0;
}

input[type="range"] {
  position: relative;
  -webkit-appearance: none;
  /* width: 48%;
  margin: 0;
  padding: 0;
  height: 19px;
  margin: 30px 2.5% 20px 2.5%;
  float: left;
  outline: none; */
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: linear-gradient(
    to left,
    rgba(0, 125, 181, 0.6) var(--buffered-width),
    rgba(0, 125, 181, 0.2) var(--buffered-width)
  );
}

input[type="range"]::before {
  position: absolute;
  content: "";
  top: 0px;
  left: 0;
  width: var(--seek-before-width);
  height: 3px;
  background-color: #1d9bf0;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  box-sizing: content-box;
  border: 1px solid #1d9bf0;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #1d9bf0;
  cursor: pointer;
  margin: -5px 0 0 0;
  float: left;
}

/* input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
  background: #007db5;
} */

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: linear-gradient(
    to left,
    rgba(0, 125, 181, 0.6) var(--buffered-width),
    rgba(0, 125, 181, 0.2) var(--buffered-width)
  );
}

input[type="range"]::-moz-range-progress {
  background-color: red;
}
input[type="range"]::-moz-focus-outer {
  border: 0;
}
input[type="range"]::-moz-range-thumb {
  box-sizing: content-box;
  border: 1px solid #007db5;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.2);
  background: #007db5;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border: solid transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background-color: #007db5;
}
input[type="range"]::-ms-fill-upper {
  background: linear-gradient(
    to left,
    rgba(0, 125, 181, 0.6) var(--buffered-width),
    rgba(0, 125, 181, 0.2) var(--buffered-width)
  );
}
input[type="range"]::-ms-thumb {
  box-sizing: content-box;
  border: 1px solid #007db5;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

input[type="range"]:active::-ms-thumb {
  transform: scale(1.2);
  background: #007db5;
}