.audio-list {
    margin-bottom: 10px;
    cursor: pointer;
}

.audio-list:hover {
    background-color: #f8f9fa;
}

.playing {
    color: green;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #343a40 !important;
        color: #f8f9fa !important;
    }
    .audio-list {
        background-color: #343a40 !important;
        color: #f8f9fa !important;
    }
    .audio-list:hover {
        background-color: #495057 !important;
    }
    .playing {
        color: lime !important;
    }
    body .footer {
        background-color: #343a40 !important;
        color: #f8f9fa !important;
    }
}

.player-controls {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

}

@media (max-width: 600px) {
    .player-controls {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.align-right {
    text-align: right;
    display: block;
}