/* --------------------------------------------------- */
/*	Bouton mode test
/* --------------------------------------------------- */					
/* le check caché ? */
.checkJ{
	position: relative;
	display:inline-table;
	width: 245px;
	height: 35px;
	left:2px;
	top:1px;
	border:1px solid #D8D8D8;
	text-align:center;
	align-content:center;
}


.libJ, .layerJ{
	position: absolute;
	right: 0;
	height:34px;
	bottom: 0;
	left: 0;
	clear:both;
}

/* le texte affiché / masqué */
.libJ{
	z-index: 2;
	left:7px;
	padding-left:7px;
	top:5px;
}

/* le background */
.layerJ{
	width: 100%;
	background-color:#f4f6fc;
	border:1px solid #D8D8D8;
	background: linear-gradient(to right, transparent 50%, transparent 50%);
	transition: background-color 1s ease;
	z-index: 1;
}

.checkJ.rJ, .checkJ.rJ .layerJ{
	border-radius: 100px;
}

.checkboxJ{
	position: relative;
	width: 100%;
	//height: 80%;
	padding-top: 0px;
	margin: 1px;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

/* --------------------------------------------------- */
/*	ModeTest Afficher Oui / Non
/* --------------------------------------------------- */
#checkJour-1 .libJ::before{
	content: '\00a0  \00a0 \00a0  Toutes les commandes';
	position: absolute;
	width: 12px;
	height: 3px;
	color: #0b4c5f;
	color:black;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	line-height: 0.2;
	padding: 8.5px 4px;
	background-color: lightgrey;
	top:2px;
	left:5px;
	white-space:nowrap;
	border-radius: 50%;
	margin:0px;
}

#checkJour-1 .checkboxJ:checked + .libJ::before{
	content: '\00a0  \00a0 \00a0  Commandes du jour';
	background-color: #01DFA5;
	text-align: left;
	left:45px;
	color: #0b4c5f;
	margin:0px;
}

#checkJour-1 .checkboxJ:checked ~ .layerJ{
	//background-color: white;
	background: linear-gradient(to right, transparent 0%, white 100%);
}

#checkJour-1 .libJ, #checkJour-1 .libJ::before, #checkJour-1 .layerJ{
   transition: 1s ease all;
}