.invitationKey,
.signinButton {
    width: 14rem;
}

.signinButton {
    text-align: left;
}

.signinButton .icon {
    width: 24px;
    text-align: center;
}

#invitations .list .item .key {
    width: 30%;
}

#invitations .list .item .remove.btn-close {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 1px -6px 1px 1px;
    padding: 4px;
    text-align: center;
    vertical-align: middle;
}

#users .user,
#groups .group {
    padding: 0.25rem 0.75rem;

    @media (min-width: 960px) {
        #users .user,
        #groups .group {
            padding-left: 15%;
            padding-right: 15%;
        }
    }

    @media (min-width: 1200px) {
        #users .user,
        #groups .group {
            padding-left: 20%;
            padding-right: 20%;
        }
    }

    @media (min-width: 1440px) {
        #users .user,
        #groups .group {
            padding-left: 25%;
            padding-right: 25%;
        }
    }
}

#users .user.title,
#groups .group.title {
    position: sticky;
    top: 108px;
    z-index: 3;
    padding-top: 0.125rem;
    background-color: var(--table-section-bg-color);

    @media (max-height: 399px) {
        top: 0;
    }
}

#users .content .list,
#groups .content .list {
    overflow: auto;
}

#users .user .body,
#groups .group .body {
    display: none;
}

#users .user.open .body,
#groups .group.open .body {
    display: block;
}

#users .user:nth-of-type(even) {
    --bs-body-bg: var(--table-striped-bg-color);
}

#users .user.title .head .groups .badge,
#groups .group.title .head .name .badge,
#users .list .user:nth-of-type(even),
#groups .list .group:nth-of-type(even) {
    background-color: var(--table-striped-bg-color);
}

#users .user .head .btm {
    line-height: 1rem;
}

#users .user .head .id,
#users .user .head .login {
    font-size: calc(var(--font-size-small) * 0.9);
    color: var(--color-text-muted);
    opacity: 0.9;
}

#users .user .head .id {
    min-width: 6rem;
    padding-top: 2px;
}

#users .user .head .groups,
#users .user .head .login {
    text-align: right;
}

#users .user .head .email {
    font-weight: bold;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

#users .user .head .groups .badge {
    font-weight: normal;
    color: var(--bs-secondary-color);
    background-color: var(--table-section-bg-color);
}

#users .user .head .login.inactive {
    color: var(--negative-text-color);
}

#users .user .head .groups .admin {
    background-color: var(--table-head-bg-color);
}

#users .user .head .id {
    min-width: 6rem;
    padding-top: 2px;
}

#groups .group .head .name {
    min-width: 8rem;
}

#groups .group .head .name .badge {
    font-size: 1rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
    background-color: var(--table-section-bg-color);
}

#groups .group .head .users {
    line-height: 1.75rem;
    color: var(--bs-secondary-color);
}

#groups .group .head .users span:after {
    content: ',';
}

#groups .group .head .users span:last-child:after {
    content: none;
}

#users .user .body .nav-link {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}