.UserListItem {
    padding: 0 var(--size-150);
    height: 56px;
    box-sizing: border-box;

    border-radius: 4px;
    border: 1px solid var(--border-neutral-subtle);
    background-color: var(--background-neutral-container);
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    .BadgeLevel {
        position: relative;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
        animation: nft 5s linear infinite 0s;
        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 36px;
            backface-visibility: hidden;
            transform: rotateY(180deg);
            z-index: 2;
            background-image: url('data:image/svg+xml,<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_802_1588)"><rect width="4" height="4" transform="matrix(-1 0 0 1 20 32)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 32)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 24)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 20)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 16)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 12)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 8)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 4)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 32 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 4)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 4)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 8)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 8)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 8)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 4)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 8)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 4)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 8)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 4)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 8)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 4)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 12)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 12)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 12)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 12)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 12)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 12)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 16)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 16)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 16)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 16)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 16)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 16)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 20)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 20)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 20)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 20)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 20)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 20)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 28)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 28)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 28)" fill="%23F232C8"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 24)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 28)" fill="%2307FEB4"/><rect width="4" height="4" transform="matrix(-1 0 0 1 24 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 20 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 28 28)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 32)" fill="%23F232C8"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 28)" fill="%23F232C8"/><rect width="4" height="4" transform="matrix(-1 0 0 1 16 32)" fill="%23F232C8"/><rect width="4" height="4" transform="matrix(-1 0 0 1 12 32)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 24)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 20)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 16)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 12)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 8)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 4)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 4 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 0)" fill="%23211A29"/><rect width="4" height="4" transform="matrix(-1 0 0 1 8 28)" fill="%23211A29"/></g><defs><clipPath id="clip0_802_1588"><rect width="32" height="36" fill="white" transform="matrix(-1 0 0 1 32 0)"/></clipPath></defs></svg>');
            background-repeat: no-repeat;
            background-size: 32px 36px;
            background-position: center;
        }
        @keyframes nft {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    }
    .BadgeLevelContainer {
        perspective: 1000px;
        margin-left: auto;
    }
}