.userlist-avatar,
.avatar_small,
.team-member .member-img img {
    border-radius: var(--bs-border-radius);
    object-fit: cover;
}

.nx-userlist-card,
.nx-userlist-card > .card-body,
.nx-userlist-card .team-member {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
    border-color: var(--nx-theme-card-border, var(--bs-border-color)) !important;
}

.nx-userlist-card .card-body,
.nx-userlist-card .nx-userlist-item,
.nx-userlist-card .nx-userlist-item > * {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
}

.nx-userlist-card .list-group,
.nx-userlist-card .list-group-item,
.nx-userlist-card .table,
.nx-userlist-card .table-responsive,
.nx-userlist-card .table > :not(caption) > * > *,
.nx-userlist-card .row,
.nx-userlist-card .row > [class*="col-"],
.nx-userlist-card .team-member .member-info,
.nx-userlist-card .team-member .member-img,
.nx-userlist-card .team-member .social {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
    border-color: var(--nx-theme-card-border, var(--bs-border-color)) !important;
}

.nx-userlist-card .list-group-item,
.nx-userlist-card .table > :not(caption) > * > *,
.nx-userlist-card .team-member .member-info {
    box-shadow: none !important;
}

.nx-userlist-card .list-group-item {
    --bs-list-group-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-list-group-color: var(--nx-theme-text, inherit);
    --bs-list-group-border-color: var(--nx-theme-card-border, var(--bs-border-color));
    background-color: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
}

.nx-userlist-card .table {
    --bs-table-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-striped-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-active-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-hover-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-color: var(--nx-theme-text, inherit);
    --bs-table-border-color: var(--nx-theme-card-border, var(--bs-border-color));
}

.nx-userlist-card .userlist-filter .form-control,
.nx-userlist-card .userlist-filter .form-select {
    background-color: color-mix(in srgb, var(--nx-color-card-bg, var(--nx-theme-surface-2, var(--bs-body-bg))) 94%, var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) 6%) !important;
    border-color: color-mix(in srgb, var(--nx-color-card-border, var(--nx-theme-card-border, var(--bs-border-color))) 68%, transparent) !important;
    color: var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) !important;
    box-shadow: none !important;
}

.nx-userlist-card .userlist-filter .form-control::placeholder {
    color: var(--nx-color-muted, var(--bs-secondary-color)) !important;
    opacity: 1;
}

.nx-userlist-card .userlist-filter .form-control:focus,
.nx-userlist-card .userlist-filter .form-select:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--nx-color-card-border, var(--nx-theme-card-border, var(--bs-border-color))) 45%) !important;
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--bs-primary) 18%, transparent) !important;
}

.nx-userlist-card .userlist-filter .form-select {
    appearance: none;
    background-image: none !important;
    padding-right: 2.25rem;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-wrap .form-select {
    width: auto;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-icon {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    color: var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) !important;
    font-size: .9rem;
    opacity: .9;
    pointer-events: none;
}