/* Choix « box » du questionnaire de consultation (rendu par PersoHelper).
   Extrait de all.css pour fonctionner sous le layout Tabler (app.ctp). */

.consultation label {
	position: relative;
}

.consultation input[type=radio], .consultation input[type=checkbox] {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.consultation input[type=radio]:checked + .box, .consultation input[type=checkbox]:checked + .box {
	background-color: #1998ff;
}

.consultation input[type=radio]:checked + .box-success, .consultation input[type=checkbox]:checked + .box-success {
	background-color: #28a745;
}

.consultation input[type=radio]:checked + .box-danger, .consultation input[type=checkbox]:checked + .box-danger {
	background-color: #dc3545;
}

.consultation input[type=radio]:checked + .box-secondary, .consultation input[type=checkbox]:checked + .box-secondary {
	background-color: #343a40;
}

.consultation input[type=radio]:checked + .box-1, .consultation input[type=checkbox]:checked + .box-1, .label-1 {
	background-color: #8c54bc;
}

.consultation input[type=radio]:checked + .box-2, .consultation input[type=checkbox]:checked + .box-2, .label-2 {
	background-color: #8c4563;
}

.consultation input[type=radio]:checked + .box-3, .consultation input[type=checkbox]:checked + .box-3, .label-3 {
	background-color: #c16f41;
}

.consultation input[type=radio]:checked + .box-4, .consultation input[type=checkbox]:checked + .box-4, .label-4 {
	background-color: #759190;
}

.consultation input[type=radio]:checked + .box-5, .consultation input[type=checkbox]:checked + .box-5, .label-5 {
	background-color: #514143;
}

.consultation input[type=radio]:checked + .box span, .consultation input[type=checkbox]:checked + .box span {
	color: white;
	transform: translateY(24px);
}

.consultation input[type=radio]:checked + .box span:before, .consultation input[type=checkbox]:checked + .box span:before {
	transform: translateY(0px);
	opacity: 1;
}

.consultation .box {
	width: 200px;
	height: 120px;
	background-color: #eee;
	border-radius: 8px;
	transition: all 250ms ease;
	will-change: transition;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	font-weight: 900;
	margin: 6px;
}

.consultation .box:active {
	transform: translateY(10px);
}

.consultation .box span {
	position: absolute;
	transform: translate(0, 16px);
	left: 0;
	right: 0;
	transition: all 300ms ease;
	font-size: 1.2em;
	user-select: none;
	color: #000;
	padding-left: 20px;
	padding-right: 20px;
}

.consultation .box span:before {
	font-size: 1.2em;
	font-family: "Font Awesome 6 Free";
	display: block;
	transform: translateY(-80px);
	opacity: 0;
	transition: all 300ms ease-in-out;
	font-weight: normal;
	color: white;
}

.consultation .box span:before, .consultation .box-success span:before {
	content: "\f058";
}

.consultation .box-danger span:before {
	content: "\f057";
}

@media (max-width: 480px) {
	.consultation .box {
		width: 155px;
		height: 220px;
	}
}