.themeDemoContainer {
    display: flex;
    padding: 24px 32px 35px;
    align-items: flex-start;
    background-color: var(--semi-color-bg-0);

    section {
        background-color: var(--semi-color-bg-2);
        border-radius: var(--semi-border-radius-extra-small);
        box-shadow: var(--custom-shadow-0);
    }
}

.profile {
    border: 1px solid var(--semi-color-border);
    background: var(--semi-color-bg);
    border-radius: 3px;
    margin-right: 24px;
    width: 280px;

    &::before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 120px;
        background-color: var(--semi-color-success-light-default);
    }

    :global(.semi-icon) {
        color: var(--semi-color-disabled-text);
    }
}

.profileHeader {
    text-align: center;
}

.profileMain {
    display: flex;
    flex-direction: column;
    margin: 32px 38px 0 24px;

    :global(.semi-typography) {
        
        + :global(.semi-typography) {
            margin-top: 16px;
        }
    }
}

.profileFooter {
    margin: 32px 24px;

    .badge {
        padding: 4px 8px;
        border-radius: 3px;
    
        + .badge {
            margin-left: 8px;
        }
    }
    
    .badge1 {
        background: rgba(var(--semi-blue-5), .15);
        color: rgb(var(--semi-blue-8));
    }
    
    .badge2 {
        background: rgba(var(--semi-purple-5), .15);
        color: rgb(var(--semi-purple-8));
    }
    
    .badge3 {
        background: rgba(var(--semi-orange-5), .15);
        color: rgb(var(--semi-orange-8));
    }
}

.avatar {
    margin-top: -32px;
}

.nickname {
    color: var(--semi-color-text-2);
}

.descriptionSection {
    padding: 16px 24px;
    border: 1px solid var(--semi-color-border);
    background: var(--semi-color-bg);
    border-radius: var(--semi-border-radius-small);
}

.descriptionsWrapper {
    display: flex;
    margin-top: 24px;

    :global(.semi-descriptions-item-th) {
        width: 122px;
    }
}

.dataSection {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--semi-color-border);
    background: var(--semi-color-bg);
    border-radius: 3px;

    .table {
        margin-top: 32px !important;
    }
}


.tableIcon {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
