*, *::after, *::before{
	box-sizing: border-box;
}
.office-plan{
	width:100%;
	position:relative;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin-top: 30px;
}
.office-plan:before{
	content:'';
	position:absolute;
	width:100%;
	height:2px;
	left:0;
	top:48px;
	background-color:#3b78b3;
	z-index:3;
}

.office-plan__floor-checkbox{
	width:0;
	margin:0;
	visibility:hidden;
}
.office-plan__floor-label{
	padding:10px 0;
}
.office-plan__floor-checkbox+.office-plan__floor-label{
	display:inline-block;
	position:relative;
	font-weight:normal;
	/* font-size:32px; */
	line-height:28px;
	background-color:#fff;
	text-align:center;
	margin:0 4px;
	top:2px;
	height:48px;
	/* width:180px; */
	width:20%;
	border-radius:6px 6px 0 0;
	border-top:2px dashed rgb(59, 120, 179);
	border-left:2px dashed rgb(59, 120, 179);
	border-right:2px dashed rgb(59, 120, 179);
	z-index:2;
}
.office-plan__floor-checkbox:checked+.office-plan__floor-label{
	border-top:2px solid rgb(59, 120, 179);
	border-left:2px solid rgb(59, 120, 179);
	border-right:2px solid rgb(59, 120, 179);
	border-bottom:2px solid white;
	z-index:4;
}

.office-plan__floor-checkbox.first:checked~.office-plan__floor-context.second,
.office-plan__floor-checkbox.first:checked~.office-plan__floor-context.third,
.office-plan__floor-checkbox.first:checked~.office-plan__floor-context.fourth{
	display:none;
}
.office-plan__floor-checkbox.second:checked~.office-plan__floor-context.second{
	display:block;
}
.office-plan__floor-checkbox.second:checked~.office-plan__floor-context.first,
.office-plan__floor-checkbox.second:checked~.office-plan__floor-context.third,
.office-plan__floor-checkbox.second:checked~.office-plan__floor-context.fourth{
	display:none;
}
.office-plan__floor-checkbox.first:checked~.office-plan__floor-context.first{
	display:block;
}
.office-plan__floor-checkbox.third:checked~.office-plan__floor-context.first,
.office-plan__floor-checkbox.third:checked~.office-plan__floor-context.second,
.office-plan__floor-checkbox.third:checked~.office-plan__floor-context.fourth{
	display:none;
}
.office-plan__floor-checkbox.third:checked~.office-plan__floor-context.third{
	display:block;
}
.office-plan__floor-checkbox.fourth:checked~.office-plan__floor-context.first,
.office-plan__floor-checkbox.fourth:checked~.office-plan__floor-context.second,
.office-plan__floor-checkbox.fourth:checked~.office-plan__floor-context.third{
	display:none;
}
.office-plan__floor-checkbox.fourth:checked~.office-plan__floor-context.fourth{
	display:block;
}

.office-plan__explication{
	text-align:center;
	flex-basis:100%;
	display:flex;
	justify-content:center;
	height:40px;
	/* font-size:24px; */
}
.office-plan__explication-free,
.office-plan__explication-occupied{
	position:relative;
	margin:20px 30px;
}
.office-plan__explication-free:before,
.office-plan__explication-occupied:before{
	content:'';
	position:absolute;
	left:-25px;
	top:4px;
	width:20px;
	height:20px;
	border-radius:5px;
}
.office-plan__explication-free:before{
	background-color:lightgreen;
	border:1px solid green;
}
.office-plan__explication-occupied:before{
	background-color:pink;
	border:1px solid red;
}


.office-plan__floor-context.first,
.office-plan__floor-context.second,
.office-plan__floor-context.third,
.office-plan__floor-context.fourth{
	flex-basis:100%
}

.office-plan-room_free{fill:lightgreen;opacity:.5;}
.office-plan-room_free:hover{fill:green;opacity:.5;}
.office-plan-room_occupied{fill:pink;opacity:.5;}
.office-plan-room_occupied:hover{fill:red;opacity:.5;}
.office-plan-room_unknown{fill:white;opacity:.5;}
.office-plan-room_unknown:hover{fill:white;opacity:.5;}

.op-tooltip-wrap{
	position:absolute;
	top:0;
	left:0;
}
.op-floor-tab-tooltip{
	position:absolute;
	display:none;
	z-index:100;
	border-radius:2px;
	border:1px solid gray;
	background-color:white;
	padding:2px 5px;
	width:220px;
}
.op-room-tooltip{
	position:absolute;
	display:none;
	z-index:100;
	border-radius:5px;
	border:2px solid gray;
	background-color:white;
	padding:5px 10px;
	width:150px;
}
.tooltip_show{
	display:block;
}