/* Benutzerdefinierte Stile aus custom.css */


#musikplayer {
    background-color: aqua;
}

/* Stile für die Playlist-Elemente */
#library {
    list-style: none;
    padding: 0;
    margin: 0;
}

#library li {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
}

#library li:hover {
    background-color: #F2F2F2;
}

#library li img {
    width: 64px;
    height: 64px;
    margin-right: 16px;
}

#library li.current-song {
    background-color: #868686; /* Hellgrauer Hintergrund für das aktuelle Lied */
}

#playlist {
    max-height: 600px; /* Legen Sie die gewünschte maximale Höhe fest */
    overflow-y: auto; /* Fügt eine Scrollleiste hinzu, wenn die Liste zu groß ist */
}

#playlist::-webkit-scrollbar {
    width: 8px;
}

#playlist::-webkit-scrollbar-track {
    background: #F5F5F5;
}

#playlist::-webkit-scrollbar-thumb {
    background: #888;
}

#playlist::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Stile für die Bedienelemente der Playlist */
#controls,
#controls2 {
    background-color: #f0f0f0; /* Hier kannst du die gewünschte Farbe anpassen */
    padding: 10px; /* Füge Padding hinzu, um den Hintergrund um die Bedienelemente zu erweitern */
    border-radius: 8px; /* Runde Ecken für ein schöneres Aussehen */
    display: inline-block; /* Damit die Breite des Hintergrunds sich an den Inhalt anpasst */
    width: 100%;
}

#playButton,
#stopButton,
#prevButton,
#nextButton,
#playButton2,
#stopButton2,
#prevButton2,
#nextButton2 {
    background-color: #4F4F4F;
    color: #fff;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
}

#playButton:hover,
#stopButton:hover,
#prevButton:hover,
#nextButton:hover,
#playButton2:hover,
#stopButton2:hover,
#prevButton2:hover,
#nextButton2:hover {
    background-color: #3D3D3D;
}

#playButton:active,
#stopButton:active,
#prevButton:active,
#nextButton:active,
#playButton2:active,
#stopButton2:active,
#prevButton2:active,
#nextButton2:active {
    transform: translateY(2px);
}