.container {
    position: fixed;
    left: 100px;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 108Px;
    padding: 0 60Px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all .3s;
}

.hidden {
    transform: translateY(100%);
    opacity: 0;
}

.item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    .img {
        position: relative;
        width: 64Px;
        height: 64Px;
        border-radius: 50%;
        margin-right: 12Px;
        background-color: #000;
        box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
        padding: 7Px;
        overflow: hidden;
        flex-shrink: 0;

        :global {
            .n-image {
                border-radius: 50%;
                width: 100%;
                height: 100%;
            }
        }

        img {
            transition: opacity .3s;
            opacity: 0;
            animation: rotateImg 6s linear infinite;
        }

        img[data-loaded="true"] {
            opacity: 1;
        }
    }
    .svgcontainer{
        position: fixed;
        z-index: -1000;
        pointer-events: none;
    }
    .progress {
        position: absolute;
        left: 4Px;
        top: 4Px;
        width: 56Px;
        pointer-events: none;
        transform: rotate(180deg);

        :global {
            .n-progress-graph .n-progress-graph-circle .n-progress-graph-circle-fill {
                stroke: url(#GradientProgress);
            }
        }
    }

    .title {
        margin-right: 15Px;
        width: 200Px;

        .titleName {
            font-size: 16Px;
            font-weight: 600;
            color: #131415;
            line-height: 28Px;
            white-space: nowrap;
        }

        .titleDes {
            font-size: 14Px;
            font-weight: 400;
            color: #777777;
            line-height: 20Px;
            white-space: nowrap;
        }
    }
}

@keyframes rotateImg {

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

.playBtns {
    margin-left: 140px;
    display: flex;
    align-items: center;

    :global {
        .n-button {
            width: 40Px;
            height: 40Px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .playBtn {
        width: 50Px;
        height: 50Px;
        margin: 0 48px;

        img {
            display: block;
        }
    }
}

.timeWrap {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 88px;

    .timeProgress {
        margin-right: 24px;
        border-radius: 6Px;
        --n-rail-height: 8Px !important;
    }

    .time {
        width: 90Px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}