.player {
    position: relative;
}

.container-player {
    background: #171919;
    border-radius: 0px 0px 15px 15px;
    padding: 8px;
    position: relative;
    z-index: 2;
    width: 100%;
    /*display: flex;*/
    justify-content: center;
    border: 1px solid #f19e39;
    /*box-shadow: 0 0 10px 0 rgba(130, 0, 81, 0.1), 0px 40px 40px -25px rgba(130, 0, 81, 0.5);*/
}

.track {
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 8px;
    background: #f19e39;
    width: 100%;
    
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 1;
    transition: all 0.5s ease-in-out;
}

.up {
    top: -88px;
}

.title {
    color: #171919;
    text-align: center;
}

.subtitle {
    font-size: 0.8rem;
    margin-bottom: 4px;
    color: #171919;
    text-align: center;
}

.controlsOuter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}

.controlsInner {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .controlsInner .btn {
        cursor: pointer;
        transition: all 0.1s ease-in-out;
        color: #f19e39;
        padding: 10px;
        border-radius: 8px;
    }

        .controlsInner .btn:hover {
            background: #c2b0c1;
            color: #fff2f6;
        }

.play, .pause {
    font-size: 32px;
}

.pause {
    display: none;
}

#playBtn{

}

#pauseBtn{
    display:none;
}
.progress-container, .progress {
    border-radius: 2px;
}

.progress-container {
    background: #e9dbdb;
    width: 100%;
    margin: 0 8px;
}

.timeline {
    display: flex;
    align-items: center;
    font-weight: 500;
    padding-left: 100px;
}

.progress {
    height: 4px;
    background: #000000;
    width: 0;
}

.container-thumb {
    border-radius: 50%;
    box-shadow: 0px 0px 0px #d18eb88c;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: -35px;
    left: 20px;
}

.shadow {
    box-shadow: 0px 40px 25px -20px #d18eb88c;
    top: -30px;
}

    .shadow .axis {
        box-shadow: inset 0px 6px 14px #d18eb88c;
    }

.thumb {
    height: 80px;
    width: 80px;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease-in-out;
}

    .thumb .axis {
        transition: all 0.5s ease-in-out;
        content: " ";
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #fff2f6;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .thumb img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
    }

.spin {
    animation: spin 4s linear infinite;
    height: 100px;
    width: 100px;
}

    .spin .axis {
        height: 25px;
        width: 25px;
    }

.credits {
    position: absolute;
    bottom: 10px;
}

    .credits a {
        color: #fe38ab;
        text-decoration: none;
    }

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.playlist {
    margin-top:40px;
}