/* ---------------------------------- */
/* Variables
/* ---------------------------------- */
 @import "_commonVars.scss";

/* ---------------------------------- */
/* Styles
/* ---------------------------------- */

#toolbar>btn{background-color:red;}

/* ---------------------------------- */
/* Form
/* ---------------------------------- */

.blocContenu {
	display:grid;
	grid-template-columns: 70% 30%;
	margin:auto;
	margin-top:10px;
	/*border-bottom:4px solid #D5D0CF;*/
	box-shadow:  2px 2px 8px  grey;
	text-align:left;
	width:99%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;	
}

.zoneDesc {
	grid-column:1 / span 2;
	grid-row:1;
	color:black;
	padding-top:5px;
	width:100%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;	
}

/* Chaque lignes du form */
.contenu {
	grid-column:1;
	text-align: left;
	padding:0px;
	margin:0px;
}

.zonePreviewCont {
	grid-column:2;
	display:block;
	text-align:center;
	grid-row: 2 / span 8;
	margin:1px;
	padding-top:20px;
	border:1px solid #f3eeee;
	min-width: 80%;

}

.prevText{
	border-radius: 5px;
	text-align:center;
	/*padding:10px;*/
	margin:10px;
	transform: translate(-50%, -50%);
	text-decoration:underline;
	font-style: italic;
 	color: #755033;
}

.previewItem{
	border-radius: 5px;
	display:block;
	padding:2px;
	margin:8px;
	/*border:1px solid #FFCD87;*/
	/*box-shadow : 2px 2px 0px 0px #FFCD87;*/
	background:white;
	font-size:0.9rem;
}

/* ------------------------------ */
/*	toogle button				  */
/* ------------------------------ */
input[type="checkbox"].afficherMsg {
	display: none;
	padding:2px;
	font-size:0.9rem;
 }

input[type="checkbox"].afficherMsg + label {
	box-sizing: border-box;
	display: inline-block;
	width: 7rem;
	height: 1.6rem;
	border-radius: 1.5rem;
	line-height:1rem;
	background-color: white ;
	transition: all 0.5s ;
	cursor:pointer;
	padding:2px;
	font-size:0.9rem;
	margin-bottom:8px;
}

.afficherMsg :hover{
	box-shadow:2px 2px 4px #D8D8D8;
}

input[type="checkbox"].afficherMsg + label::before {
	box-sizing: border-box;
	display: block;
	height: calc(1.5rem - 4px);
	width: calc(1.5rem - 4px);
	border-radius: 50%;
	background-color: grey;
	line-height:1rem;
	white-space: pre;
	transition: all 0.5s ;
	content: '      Masqué';
	font-weight:bold;
	color:grey;
	padding:2px;
	font-size:0.9rem;
}

input[type="checkbox"].afficherMsg:checked + label {
	background-color: white ;
	border:1px solid grey;
	color:green;
	padding:2px;
	font-size:0.9rem;
}

input[type="checkbox"].afficherMsg:checked + label::before {
	margin-left: 1.2rem ;
	white-space: pre;
	content: '      Affiché';
	font-weight:bold;
	font-size:0.9rem;
	color:green;
	text-align:left;
	background-color: lightgreen;
	padding-bottom:2px;
}