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

div.working-day--user{
    display: flex;
    border: 1px solid hsla(0, 0%, 70%, 0.2);
}

div.working-day--user-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.working-day--user-left{
    display: flex; background-color: hsl(var(--hue),var(--saturation),90%); 
}

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

div.working-day--user-name{
    font-size: 12px; color: hsl(var(--hue),var(--saturation),50%); overflow: hidden;
    width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}

div.working-day--exceptional{
    cursor: pointer; border-radius: 3px; padding: 0 2px;
}

div.working-day--exceptional:hover{
	background-color: hsl(var(--hue),var(--saturation),90%);
}

div.working-day--user-info {
	font-size: 10px; line-height: 16px; padding: 0 2px; margin-top: 1px;
	border: solid 1px hsl(var(--hue),var(--saturation),60%); border-radius: 3px; 
	color: hsl(var(--hue),var(--saturation),80%); overflow: hidden; hyphens: auto;
	background-color: hsl(var(--hue),var(--saturation),40%); overflow-wrap: break-word;
	display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
}

div.working-day--user-item {
	font-size: 10px; line-height: 16px; padding: 0 2px; margin-top: 1px;
	border: solid 1px hsl(var(--hue),var(--saturation),60%); border-radius: 3px; 
	color: hsl(var(--hue),var(--saturation),80%); overflow: hidden; hyphens: auto;
	background-color: hsl(var(--hue),var(--saturation),40%); overflow-wrap: break-word;
	display: flex; align-items: center; gap: 1px; flex-wrap: wrap; cursor: pointer;
}

div.working-day--user-item:hover {
	border-color: hsl(var(--hue),var(--saturation),60%);
	color: hsl(var(--hue),var(--saturation),30%);
	background-color: hsl(var(--hue),var(--saturation),90%);
}

div.working-day--user-light {
	font-size: 10px; line-height: 16px; padding: 0 2px; margin-top: 1px;
	border: solid 1px hsl(var(--hue),var(--saturation),80%); border-radius: 3px; 
	color: hsl(var(--hue),var(--saturation),50%); overflow: hidden; hyphens: auto;
    overflow-wrap: break-word;
	display: flex; align-items: center; gap: 1px; flex-wrap: wrap; cursor: pointer;
}

div.working-day--user-light:hover {
	border-color: hsl(var(--hue),var(--saturation),70%);
	color: hsl(var(--hue),var(--saturation),40%);
	background-color: hsl(var(--hue),var(--saturation),90%);
}

div.working-day--user-site-color {
    --saturation: 50%;
	width: 6px; height: 6px; border-radius: 3px; 
	background-color: hsl(var(--hue),var(--saturation),50%);
}

span.working-day--user-no-meal {
	color: hsl(0,100%,70%);
}

div.calendar--item-simple:hover span.working-day--user-no-meal {
	color: hsl(0,100%,50%);
}