/* --------------------------------------------------------------- */
/*
/* <couleurs>
/*
/* --------------------------------------------------------------- */

:root {
	/* couleur des textes par default */
	--input-color                : #CCCCCC;
	/* couleur des textes quand input valide */
	--input-valid-color          : #CCCCCC;
	/* couleur des textes quand input invalide */
	--input-invalid-color        : #B7111E;

	--input-background-color     : rgba(0, 0, 0, 0.8);

	/* couleur des label par défaut */
	--label-color                : #CCCCCC;
	/* couleur des label pendant édition */
	--label-up-color             : #CCCCCC;
	/* couleur des label quand input valide */
	--label-valid-color          : #CCCCCC;
	/* couleur des label quand input invalide */
	--label-invalid-color        : #B7111E;


	/* taille du texte dans les inputs */
	--input-font-size            : 15px;
	/* taille des labels pendant édition */
	--label-up-font-size         : 13px;

	/* couleur des bordures par default */
	--input-border-color         : #CCCCCC;
	/* couleur des bordures quand input valide */
	--input-valid-border-color   : #CCCCCC;
	/* couleur des bordures quand input invalide */
	--input-invalid-border-color : #B7111E;


	/* couleur des checkbox */
	--checkbox-color             : #CCCCCC;
	/* couleur des coches checkbox */
	--checkbox-check-color       : #B7111E;
}

/* --------------------------------------------------------------- */
/*
/* </couleurs>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* <general>
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw {
	margin-top : 20px;
}

#page form.form_material_dw .text-center .obligatoire {
	float : none;
}

#page form.form_material_dw .group {
	position       : relative;
	margin-bottom  : 15px;
	letter-spacing : 1px;
}

/* --------------------------------------------------------------- */
/*
/* </general>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* <inputs>
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .group textarea {
	height     : 120px;
	min-height : 120px;
	max-height : 250px;
}

#page form.form_material_dw .group .form-control {
	color              : var(--input-color);
	padding            : 5px 10px 2px 5px;
	display            : block;
	width              : 100%;
	border             : none;
	font-size          : var(--input-font-size);
	border             : 1px solid var(--input-border-color);
	border-radius      : 0;
	outline            : none;
	-webkit-box-shadow : none;
	box-shadow         : none;
	background         : var(--input-background-color);
}

#page form.form_material_dw .group .form-control:focus {

}


#page form.form_material_dw .group .form-control:not(.invalid):focus {
	border-color : var(--input-border-color);
}

#page form.form_material_dw .group .form-control.filled {
	border-color : var(--input-valid-border-color);
	color        : var(--input-valid-color);
}

#page form.form_material_dw .group .form-control.invalid,
#page form.form_material_dw .group input.filled:not(.invalid):invalid {
	border-color : var(--input-invalid-border-color);
	color        : var(--input-invalid-color);
}

#page form.form_material_dw .group .form-control.edit {
	color : var(--input-color) !important;
}

/* --------------------------------------------------------------- */
/*
/* </inputs>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* <bordures input>
/*
/* --------------------------------------------------------------- */

/*#page form.form_material_dw .group .bar{*/
/*    position:relative;*/
/*    top: -1px;*/
/*    display:block;*/
/*    width:100%;*/
/*}*/

/*#page form.form_material_dw .group .bar:before,*/
/*#page form.form_material_dw .group .bar:after{*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 0;*/
/*    height: 2px;*/
/*    background: var(--input-border-color);*/
/*    transition: all 0.25s ease-in-out;*/
/*}*/

#page form.form_material_dw .group .bar:before {
	left : 50%;
}

#page form.form_material_dw .group .bar:after {
	right : 50%;
}

#page form.form_material_dw .group .form-control:focus ~ .bar:before,
#page form.form_material_dw .group .form-control:focus ~ .bar:after,
#page form.form_material_dw .group .form-control.filled ~ .bar:before,
#page form.form_material_dw .group .form-control.filled ~ .bar:after {
	width : 50%;
}

#page form.form_material_dw .group .form-control:not(.invalid):focus ~ .bar:before,
#page form.form_material_dw .group .form-control:not(.invalid):focus ~ .bar:after {
	background : var(--input-border-color);
}

#page form.form_material_dw .group .form-control.filled ~ .bar:before,
#page form.form_material_dw .group .form-control.filled ~ .bar:after {
	background : var(--input-valid-border-color);
}

#page form.form_material_dw .group .form-control.invalid ~ .bar:before,
#page form.form_material_dw .group .form-control.invalid ~ .bar:after,
#page form.form_material_dw .group .form-control.filled:not(.invalid):invalid ~ .bar:before,
#page form.form_material_dw .group .form-control.filled:not(.invalid):invalid ~ .bar:after {
	background : var(--input-invalid-border-color);
}

/* --------------------------------------------------------------- */
/*
/* </bordures input>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* Labels
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .group label {
	color              : var(--label-color);
	font-size          : var(--input-font-size);
	font-weight        : normal;
	position           : absolute;
	pointer-events     : none;
	left               : 20px;
	top                : 5px;
	-o-transition      : 0.2s ease all;
	transition         : 0.2s ease all;
	-moz-transition    : 0.2s ease all;
	-webkit-transition : 0.2s ease all;
	padding            : 0;
	max-width          : calc(100% - 30px);
	line-height        : initial;
}

#page form.form_material_dw .group select ~ label,
#page form.form_material_dw .group .form-control:focus ~ label,
#page form.form_material_dw .group .form-control.filled ~ label,
#page form.form_material_dw .group .form-control.filled.invalid ~ label {
	top       : -20px;
	font-size : var(--label-up-font-size);
}

#page form.form_material_dw .group .form-control:not(.invalid):focus ~ label {
	color : var(--label-up-color);
}

#page form.form_material_dw .group .form-control.filled ~ label {
	color : var(--label-valid-color);
}

#page form.form_material_dw .group .form-control.invalid ~ label,
#page form.form_material_dw .group input.filled:not(.invalid):invalid ~ label {
	color : var(--label-invalid-color);
}

/* --------------------------------------------------------------- */
/*
/* </labels>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* <Checkbox>
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .group .chkbx .form-check {
	display           : -webkit-box;
	display           : -ms-flexbox;
	display           : flex;
	-webkit-box-align : center;
	-ms-flex-align    : center;
	align-items       : center;
	-webkit-box-pack  : start;
	-ms-flex-pack     : start;
	justify-content   : flex-start;
	padding-left      : 0;
}

#page form.form_material_dw .group .chkbx .form-check .form-check-input {
	position : absolute;
	display  : inline-block;
	width    : auto;
	top      : 8px;
	left     : 25px;
	opacity  : 0;
	z-index  : 0;
}

#page form.form_material_dw .group .chkbx .form-check label {
	position            : relative;
	top                 : 0;
	left                : 0;
	pointer-events      : all;
	-webkit-user-select : none;
	-moz-user-select    : none;
	-ms-user-select     : none;
	user-select         : none;
	cursor              : pointer;

	color               : var(--input-color);
	padding-left        : 40px;
}

#page form.form_material_dw .group .chkbx .form-check label:before,
#page form.form_material_dw .group .chkbx .form-check label:after {
	position           : absolute;
	top                : 50%;
	left               : 0;

	-webkit-transition : .25s all ease;
	-o-transition      : .25s all ease;
	transition         : .25s all ease;
}

#page form.form_material_dw .group .chkbx .form-check label:before {
	content           : "";
	height            : 26px;
	width             : 26px;
	border            : 1px solid var(--checkbox-color);
	background        : var(--input-background-color);
	border-radius     : 0;
	-webkit-transform : translateY(-50%);
	-ms-transform     : translateY(-50%);
	transform         : translateY(-50%);
}

#page form.form_material_dw .group .chkbx .form-check label::after {
	font-family       : "Font Awesome 5 Free";
	content           : "\f00c";
	font-weight       : 900;
	color             : var(--checkbox-check-color);
	font-size         : 18px;

	height            : 26px;
	width             : 26px;

	display           : flex;
	align-items       : center;
	justify-content   : center;

	top               : calc(50% - 13px);

	-webkit-transform : scale(0);
	-ms-transform     : scale(0);
	transform         : scale(0);
	transform-origin  : center;
}

#page form.form_material_dw .group .chkbx .form-check .form-check-input:checked + label::before {
	background   : var(--input-background-color);
	border-color : var(--checkbox-color);
}

#page form.form_material_dw .group .chkbx .form-check .form-check-input:checked + label::after {
	-webkit-transform : scale(1);
	-ms-transform     : scale(1);
	transform         : scale(1);
}

/* --------------------------------------------------------------- */
/*
/* </checkbox>
/*
/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/*
/* indicateur required
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .group b.required_indicator {
	position  : absolute;
	top       : 0;
	right     : 0;
	color     : var(--input-invalid-color);
	font-size : 18px;
}

/* --------------------------------------------------------------- */
/*
/* Texte required
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .required_fields {
	display   : inline-block;
	color     : var(--input-color);
	font-size : var(--label-up-font-size);
}

#page form.form_material_dw .required_fields b.required_indicator {
	position : relative;
}

#page form.form_material_dw label a {
	font-weight : 600;
	color       : #8D0000;
}

/* --------------------------------------------------------------- */
/*
/* Bouton envoi
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .form_submit_btn {
	display     : inline-block;
	font-size   : 18px;
	padding     : 12px 30px;
	transition  : 0.25s;
	outline     : none;
	border      : none;
	cursor      : pointer;
	background  : var(--input-invalid-color);
	color       : var(--input-color);
	font-weight : normal;
}

#page form.form_material_dw .form_submit_btn:hover {
	box-shadow : 1px 2px 6px rgba(0, 0, 0, 0.3);
}

#page form.form_material_dw .form_submit_btn i {
	margin-right : 10px;
}

/* --------------------------------------------------------------- */
/*
/* Erreurs du formulaire
/*
/* --------------------------------------------------------------- */

#page form.form_material_dw .group .erreurs .erreur {
	font-weight : bold;
	font-size   : var(--label-up-font-size);
	color       : var(--input-invalid-color);
}