button.admin-color{
	height: 34px; width: 45px; --saturation:30%;
}

.--wait button.admin-color{
	visibility: hidden;
}

button.admin-color.--selected{
	border: 4px solid hsla(0,0%,0%,.75);
}

div.admin-user-item--photo{
	width: 90px; height: 120px; display: block;
	background-size: cover;
	background-position: center center;
	text-align: center; font-size: 64px; line-height: 120px;
}

div.admin-users--list{
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fill,min(100%,170px));
}

.--mobile div.admin-users--list{
    grid-template-columns: 1fr 1fr;
}

.admin-user-block{
    display: flex; color: hsl(var(--hue),var(--saturation),50%);
    border: 1px solid hsla(0, 0%, 70%, 0.2);
}

a.admin-user-block{
    cursor: pointer;
}

a.admin-user-block:hover{
    background-color: hsl(var(--hue),var(--saturation),95%); 
    color: hsl(var(--hue),var(--saturation),30%);
    border: 1px solid hsla(0, 0%, 70%, 0.5);
}

div.admin-user-block--left{
    display: flex; background-color: hsl(var(--hue),var(--saturation),90%); 
}

div.admin-user-block--right{
    display: flex; width: 0; flex-grow: 1; flex-wrap: wrap; padding: 4px; gap: 4px;
    align-content: flex-start;
}

div.admin-user-block--photo{
    width: 36px; height: 48px; display: block;
	background-size: cover; overflow: hidden;
	background-position: center center;
	text-align: center; font-size: 32px; line-height: 48px;
    color: hsl(var(--hue),var(--saturation),50%); flex-shrink: 0;
}

div.admin-user-block--photo.--wait-bg-80{
    animation-delay:-150ms
}

div.admin-user-block--name{
    font-size: 12px; color: hsl(var(--hue),var(--saturation),50%); overflow: hidden;
    width: 100%; white-space: nowrap;
}

div.admin-user-block--name.--wait-bg-80{
    color: transparent;
}