.player__container canvas {
  height: 100%;
  width: 100%;
  opacity: 0.7;
  min-height: 42px;
  position: absolute;
  left: 0;
}
.player__container {
  position: relative;
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-lowest);
  padding: 2px 0.5rem;
  border-radius: var(--border-radius-base);
  min-width: 250px;
}
.player__container.player__container--preload {
  opacity: 0.6;
}
.player__container .range__preload {
  width: 100%;
  display: flex;
  border-top: 1px dotted var(--outline);
}

.audio__container {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
  height: 100%;
}
.audio__container .audio__thumb {
  display: flex;
  min-height: 42px;
  align-items: center;
}
/********** Range Input Styles **********/
/*Range Reset*/
.player__container input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 42px;
  z-index: 1;
  /* slider thumb */
}
.player__container input[type=range]:focus {
  outline: none;
}
.player__container input[type=range]::-moz-range-track {
  background-color: var(--primary);
  border-radius: 0.5rem;
  height: 15rem;
}
.player__container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  border-radius: 50%;
  /*custom styles*/
  opacity: 1;
  background-color: var(--primary);
  height: 0.5rem;
  width: 0.5rem;
}
.player__container input[type=range]:focus::-webkit-slider-thumb, .player__container input[type=range]:focus::-moz-range-thumb {
  border: 1px solid var(--primary-30);
  outline-offset: 0.125rem;
}
.player__container .timer__container {
  display: flex;
  gap: 0.1rem;
  position: absolute;
  bottom: 0;
  opacity: 0.5;
  font-size: 0.55rem;
  left: 0;
}
.player__container .timer__container span.timer__numbers {
  display: flex;
  justify-content: center;
  right: 0;
  width: 0.55rem;
}


/*# sourceMappingURL=audio-player.css.map*/