.list-group {
        margin-top: 5px;
}
.list-group-item p, .list-group-item span {
        display: inline;
        font-weight: normal;
        margin: -0.02em;
}

.list-group-item span {
        float: left;
}

.list-group-item p {
        float: right;
}

.player {
        background-color: #785563;
        border-radius: 5px;
        color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        z-index: 1;
}

#volume_value {
        font-size: 14px;
        margin-bottom: -8px;
        margin-top: -15px;
}

.details {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin-top: 25px;
}

.track-art {
        margin: 20px auto;
}

.now-playing {
        font-size: 1.1rem;
}

.track-name {
        font-size: 1.5rem;
}

.track-artist {
        font-size: 0.8rem;
}

.buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
}

.playpause-track, .prev-track, .next-track {
        padding: 25px;
        opacity: 0.8;
  /* Smoothly transition the opacity */
        transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover {
        opacity: 1.0;
}

.slider_container {
        width: 75%;
        max-width: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 6px;
}

.seek_slider, .volume_slider {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 5px;
        background: black;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
}

.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: white;
        cursor: pointer;
        border-radius: 50%;
}

.seek_slider:hover, .volume_slider:hover {
        opacity: 1.0;
}

.seek_slider {
        width: 60%;
}

.volume_slider {
        width: 30%;
}

.current-time, .total-duration {
        padding: 10px;
}

i.fa-volume-down, i.fa-volume-up {
        padding: 10px;
}

i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
        cursor: pointer;
}