@media (min-width: 768px) {
    #music-player-container {
        display: flex;
    }
}
@media (max-width: 767px) {
    #music-player-container {
        display: block;
    }
}

#right-column {
    display: block;
}

.music-player {
  min-width: 150px;
  margin: 5px;
  padding: 20px;
}
.music-player audio {
  width: 100%;
}
.playlist {
  width: 100%;
  padding: 0;
  border-collapse: collapse;
}

.song-row:before {
  content: "▶ ";
}

.song-row.playing:before {
  content: "⏸︎ ";
}

.song-row {
  background-color: var(--tag-bg);
}

.song-row:nth-child(even) {
  background-color: var(--tr-nth-child-even-bg);
}

.song-row:nth-child(odd) {
  background-color: var(--tr-nth-child-odd-bg);
}

.song-row.selected {
  background-color: var(--tag-bg-selected);
  box-shadow: var(--tag-box-shadow-selected);
}

.song-row.selected:hover {
  background-color: var(--tag-bg-hover);
  box-shadow: var(--tag-box-shadow-hover);
}

audio {
  color: var(--textcolor);
  background-color: var(--bgcolor);
}

#visualizer {
  height: 300px;
  box-shadow: 3px 3px 3px var(--org-src-container-box-shadow);
  border: 4px solid var(--org-src-container-bg);
  background-color: black;
}

#visualizer:hover {
  cursor: pointer;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: var(--volume-bar);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin: 10px 0;
}

.slider:hover {
  opacity: 1;
}

#volume:before {
  content: "🔊";
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--volume-knob);
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--volume-knob);
  cursor: pointer;
  border-radius: 50%;
}

.slider::-ms-thumb {
  width: 15px;
  height: 15px;
  background: var(--volume-knob);
  cursor: pointer;
  border-radius: 50%;
}

#seek-slider {
  width: 100%;
  margin: 10px 0;
}

#current-time, #duration {
  font-size: 0.8em;
  color: #888;
}

.download-btn {
  margin-left: 10px;
  text-decoration: none;
  cursor: pointer;
}

.download-btn:hover {
  opacity: 0.7;
}

#seek {
    max-width: 600px;
}