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


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

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

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

.checkL.rL, .checkL.rL .layerL{
	border-radius: 100px;
}

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

/* --------------------------------------------------- */
/*	ModeTest Afficher Oui / Non
/* --------------------------------------------------- */
#checkLivr-1 .libL::before{
	content: '\00a0  \00a0 \00a0  Tous les status';
	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;
}

#checkLivr-1 .checkboxL:checked + .libL::before{
	content: '\00a0  \00a0 \00a0  Commandes en cours';
	background-color: #01DFA5;
	text-align: left;
	left:45px;
	color: #0b4c5f;
	margin:0px;
}

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

#checkLivr-1 .libL, #checkLivr-1 .libL::before, #checkLivr-1 .layerL{
	transition: 0.3s ease all;
}