.models__top {
    padding: 1rem 2rem;
}

.models__top.compact {
    padding: 0.5rem 0;
}

.models__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 5px;
}

.models__top-item {
    font-size: 0.75rem;
    color: var(--text-color-2);
}

.models__top-item.id, .model__item .id {
    flex: 0 0 4%;
}

.models__top-item.uuid, .model__item .uuid {
    flex: 0 0 20%;
}

.models__top-item.name, .model__item .name {
    flex: 0 0 10%;
}

.models__top-item.username, .model__item .username {
    flex: 0 0 20%;
}

.models__top-item.email, .model__item .email {
    flex: 0 0 20%;
}

.models__top-item.image, .model__item .image {
    flex: 0 0 15%;
}

.custom-flex__item.image img {
    max-width: 150px;
    max-height: 50px;
}

.models__top-item.summary, .model__item .summary {
    flex: 0 0 20%;
}

.models__top-item.field5, .model__item .field5 {
    flex: 0 0 5%;
    min-width: 60px;
}

.models__top-item.field10, .model__item .field10 {
    flex: 0 0 10%;
}

.models__top-item.field15, .model__item .field15 {
    flex: 0 0 15%;
}

.models__top-item.field20, .model__item .field20 {
    flex: 0 0 20%;
}

.models__top-item.field30, .model__item .field30 {
    flex: 0 0 30%;
}

.models__top-item.field40, .model__item .field40 {
    flex: 0 0 40%;
}

.models__top-item.field50, .model__item .field50 {
    flex: 0 0 50%;
}

.models__top-item.controls, .model__item .controls {
    justify-content: flex-end;
}

.custom-flex__item .content.--green {
    color: #009861;
}

.model__item {
    padding: 1rem 2rem;
    background-color: var(--white-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    word-break: break-word;
}

.model__item.compact {
    padding: 0.5rem 0;
}

.users .users__item .--green {
    color: var(--green-color-1);
}

.custom-flex__item.flex-end {
    justify-content: flex-end;
}

@media (max-width: 768.96px) {
    .models__content {
        gap: 0.25rem;
    }

    .custom-flex__item {
        flex: 100% !important;
    }
}