.hidden {
    display: none;
}

.roles-item {
    cursor: pointer;
    transition: 0.5s;
}

.roles-item:hover {
    box-shadow: #dddddd 4px 4px;
}

.users-item {
    cursor: pointer;
    transition: 0.5s;
}

.users-item:hover {
    box-shadow: #dddddd 4px 4px;
}

.role-selected {
    background-color: #003399;
    color: white;
}

.user-selected {
    background-color: #003399;
    color: white;
}

.roles-arrow-span {
    float: right;
    color: #777777;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.id-span {
    font-size: small;
    color: gray
}

.users-box {
    max-height: 40vh;
    overflow: scroll;
}

.roles-box {
    max-height: 40vh;
    overflow: scroll;
}

.empty-text {
    font-size: 1.5em;
    color: #5a6268;
}

.statstext {
    font-size: larger;
    float: right;
}

.pointer {
    cursor: pointer;
}

.half-height {
    display: inline-block;
    height: 500px;
    overflow-y: scroll;
}