input[type="range"] {
  position: relative;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  background-color: #9D4B22;
  height: 11px;
  margin: 30px 2.5% 20px 2.5%;
  border-radius: 15px;
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: linear-gradient(to right, 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: 2px;
  left: 0;
  height: 8px;
  background-color: #D37F55;
  cursor: pointer;
}
input[type="range"][id="seek-slider"]::before {
  width: var(--seek-before-width);
}
input[type="range"][id="volume-slider"]::before {
  width: var(--volume-before-width);
}
input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  box-sizing: content-box;
  border: 1px solid #D37F55;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #F3E3C3;
  cursor: pointer;
  margin: -7px 0 0 0;
}
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 right, 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: #007db5;
}
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 right, 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;
}

#audio-player-container button {
  padding: 0;
  width: 35px;
}

#audio-player-container {
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.sliders {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.time, .volume {
  display: flex;
  align-items: baseline;
}

.time {
  width: 50%;
}

.volume {
  width: 15%;
}

.audio-outer {
  display: flex;
  flex-direction: column;
}