.xf * {}

.xf fieldset {
/* float: left;
 clear: left; */
 padding: 5px 0;
}

.xf legend {
	font-size: 1.5em;
    margin-bottom: 5px;
	font-family: 'Rokkitt',serif;
	  
	margin-bottom: 0.5em;
	
	font-weight: bold;
	text-transform: uppercase;
}

.xf legend.don{
	font-size: 2.5em;
	text-align: center;
}

.xf .ecArticleModelesList legend {margin : 0; padding : 0 3px 6px 0;}
.xf .ecArticleModelesList fieldset  {border-top : 1px solid;}

.xf label, .xf .photo, .xf .required,
.xf img, .xf .document, .xf .document a, .xf .info, .xf ol {
 float: left;
 margin: 4px 0px 0px 0px;
}

.xf input, .xf select, .xf textarea, .xf ol {
 float:left;
 margin: 4px 0px 10px 0px; 
}

	.xf input[type=checkbox] {margin-left: 0;}

.xf input:focus, .xf textarea:focus {
	outline: 0;
	border-color: #66afe9;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	background-color: white;
}

.xf .groupCheckbox input, .xf .groupCheckbox label, .xf .groupHr li *, .xf ol li * {
 float: none;
 margin: 0;
}

.xf .CheckedListBox {
 list-style: none;
 overflow: auto;
 margin-left: 10px;
 line-height: 1.6
}
  
.xf .CheckedListBox label, .xf .CheckedListBox input {
 float: none;
 margin: 0;
}

.xf .CheckedListBox label {
 display: block;
 padding-left: 5px;
 width: auto;
}

.xf .CheckedListBox label:hover {
 background: #999;
 color: #fff;
}

.xf br, .xf li {clear: both;}
.xf .groupHr li {clear: none; display: inline; margin-right : 20px;}
.xf label {
 width: 30%;
 cursor: pointer;
 font-size: 1.0em;
 box-sizing : border-box;
}

	* html .xf label {width: 70px;}/* ie6 */

.xf label.tocheck, .xf input+label, .xf img+label {
 width: auto;
 margin-left: 10px;
 min-width: 0;
}


/* pied de formulaire */
.xf .footer, .sf .footer {
	text-align: right;
	position: relative;
	
}

.xf .footer input[type=submit] {
	float: none;
	display: inline;
	cursor: pointer;
	position: relative;
	border : none; 
	color: #FFFFFF;
    font-weight: 300;
    padding: 5px 10px;
    text-transform: uppercase;
	background : #BD2716;
		appearance:none;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
}

#form_rubriques {margin-top : 10px;}
#form_rubriques li p {clear : both; margin: 5px 0;}
#form_rubriques .footer input[type=submit] {
	margin-right : 8px;
	color : #908C8B;
	background: #FFFFFF;
	
}

/* pré-.xfatage */
.xf .numero {width: 3em;}
.xf .chiffre {width: 8em;}
.xf .date {width: 6em;}
.xf .mot {width: 10em;}
.xf .mots {/*width: 18em; */ width : 70%; }
.xf .phrase {width: 30em;}
.xf .email {width: 18em;  }
.xf textarea { width: 70%; height: 10em;}

.xf .mot, .xf .mots, .xf .email, .xf .phrase, .xf .date, .xf .chiffre , .xf .numero, .xf select, .xf textarea {
	padding : 5px 15px; 
	border : 1px solid #ccc; 
	box-sizing : border-box;
}

/* champs requis */
.xf .required, .xf .required2 {
 color: #F00;
 padding-left: 10px;
}

/* erreur */
.xf blockquote, .sf blockquote {
	margin-bottom: 0.3em;
	padding-left: 26px; 
	line-height: 16px;
 	background: transparent url(icons.gif) no-repeat 0 -792px;
}


.xf blockquote strong::before, .sf blockquote strong::before {
	content : "\f06a";
	font-family: "Font Awesome 5 Free"; 
	color : #a94442;
	font-weight : bold;
	padding-right : 5px;
}



.xf input.has-error, .xf textarea.has-error, .xf select.has-error {
	border-color: #a94442;
	background : #D8D8D8;
}

.xf input.has-error:focus, .xf textarea.has-error:focus, .xf select.has-error:focus {
	border-color: #843534;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}

.xf span.facultatif:before {
 content : "\0028";
}

.xf span.facultatif {
	font-size : 0.8em;
	color : #A0A0A0;
	display : block;
}

.xf span.facultatif:after {
 content : "\0029";
}

.input-comm {float : left;  margin: 4px 0 10px 0px;}
.xf .input-comm  input, .xf .input-comm  select, .xf .input-comm  textarea, .xf.input-comm   ol{float : none; margin : 0 0 2px 0;}

.xf .input-comm  span {
	font-size : 0.8em;
	color : #A0A0A0;
	display : block;
}

/* ie */
* html .xf legend {margin-left: -10px;}
* html .xf .CheckedListBox label {height: 1%;}

.xf .notification {
	border:3px solid #d55b5b;
	/*background-color: #ffcdcd;*/
	padding:5px;
}

.xf .status {
 float: left;
 color: red;
}
.xf input[type=checkbox] + label, .xf input[type=radio] + label {
	margin-top : 0;
}

.xf input[type=checkbox] + label {
	margin-left : 0;
}
	
@media all and (max-width: 620px) {
	.xf label, .xf .photo, .xf .required, .xf img, .xf .document, .xf .document a, .xf .info, 
	.xf input, .xf select, .xf textarea, .xf ol , .xf fieldset, .xf .input-comm {
		float : none;
		display : block;
		width : 100%;		
		box-sizing:border-box;
		-moz-box-sizing:border-box; 
	}
	.input-comm {margin-left : 0;}
	.xf input, .xf select, .xf textarea {margin : 0;}
	.xf input[type=checkbox], .xf input[type=radio] {
		float : left; 
		margin: 4px 10px 10px 0px;
		width : auto;
	}
	
	.xf .groupHr li {
		clear: left;
		display: block;
	}
		
	.xf .numero, 
	.xf .chiffre ,
	.xf .date ,
	.xf .mot,
	.xf .mots,
	.xf .phrase,
	.xf .email,
	.xf textarea {width:90%; float : left; }



	/* pied de formulaire */
	.xf .footer, .sf .footer {
		text-align: left;
		margin-top : 20px;
		position: relative;
		
	}

	.xf .footer input[type="submit"] {width: 90%}
}

/*
#main form select {
	-moz-appearance : spinner-downbutton;
	-webkit-appearance : spinner-downbutton;
	appearance : spinner-downbutton;
}

#main form select, #main form select option {
	background : #BDB4AC;
	border : none; 
	color : #696363;
	padding : 5px 0 0 0; 
}

#main form select option {
	padding : 5px;
} */

div.selectStyle {
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0;
    background: #BDB4AC url(/style/ecommerce/fleche-select.png) no-repeat 95% center ;
    /* this is the new drop button, in image form */
    width:100%; 
	border-radius:2px;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: solid 1px #ccc;*/
}

	
.xf div.selectStyle select {
    width:115% /* this percentage effectively extends the drop down button out of view */;
    background-color:transparent /* this hides the select's background making any styling visible from the div */;
    background-image:none;
    -webkit-appearance: none /* this is required for Webkit browsers */;
    border:none;
	color : #696363;
    box-shadow:none;
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
	margin : 0;
}



.ecArticlePanier .xf  label { width : 40%; min-width: initial; }
.ecArticlePanier .xf  .ecArticleModelesList label { width : 88%;  margin: 0 0 5px 0;}

.ecArticlePanier .xf  label strong{ font-weight : 400; text-transform : uppercase;}
.ecArticlePanier .xf .selectStyle, .ecArticlePanier .xf   .ecTarif { float : right; width : 59%; box-sizing : border-box;}

.ecArticleModelesList [type="radio"] {margin : 0;}
    /* Cachons la case à cocher */  
    [type="checkbox"]:not(:checked), [type="radio"]:not(:checked),  
    [type="checkbox"]:checked, [type="radio"]:checked {  
      position: absolute;  
      left: -9999px; 
    }  
       
    /* on prépare le label */  
    [type="checkbox"]:not(:checked) + label, [type="radio"]:not(:checked) + label, 
    [type="checkbox"]:checked + label, [type="radio"]:checked + label  {  
      position: relative; /* permet de positionner les pseudo-éléments */  
      padding-left: 25px; /* fait un peu d'espace pour notre case à venir */  
      cursor: pointer;    /* affiche un curseur adapté */  
    }  
	
	[type="radio"]:not(:checked) + label, 
    [type="radio"]:checked + label  { margin-left : 0 !important; padding-left : 20px;} 
	/*[type="radio"]:not(:checked) + label, */
    [type="radio"]:checked + label  { color : #000;    font-weight: 600;} 
	    /* Aspect des checkboxes */  
    /* :before sert à créer la case à cocher */  
    [type="checkbox"]:not(:checked) + label:before, [type="radio"]:not(:checked) + label:before,  
    [type="checkbox"]:checked + label:before, [type="radio"]:checked + label:before {  
      content: '';  
      position: absolute;  
      left:0; top: 2px;  
      width: 15px; height: 15px; /* dim. de la case */  
     /* border: 1px solid #aaa;  */
     background : #BDB4AC;
      border-radius: 2px; /* angles arrondis */  
	  margin-top: 0px;
      /*box-shadow: inset 0 1px 3px rgba(0,0,0,.3) *//* légère ombre interne */  
    }  
	
	#zone_recherche [type="checkbox"]:not(:checked) + label:before, 
	#zone_recherche [type="checkbox"]:checked + label:before {
		
		 background: #fff;  
		width: 15px; height: 15px;
		
	}	
	
	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		background : #BDB4AC;
		border-radius: 5px;
		width: 10px; height: 10px;
		margin-top: 5px;
		top : 0;
	}
	
	.ecArticleModelesList [type="radio"]:not(:checked) + label:before,
	.ecArticleModelesList  [type="radio"]:checked + label:before {margin-top : 5px;}
	
	[type="radio"]:not(:checked) + label:before,
	 [type="radio"]:checked + label:before {
		background : #fff;
		border : 1px solid #BDB4AC;
		width: 8px; height: 8px;
	 }
       
    /* Aspect général de la coche */  
    [type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after,  
    [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after {  
     /* content: '?';  */
      content: 'X'; 
	  font-weight : bold;	  
      position: absolute;  
      top: 1px; left: 3px;  
      font-size: 14px;  
      color: #fff;  
      transition: all .2s; /* on prévoit une animation */  
    }  
	
	[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {
		background : #000;
		border : 1px solid #000;
		border-radius: 5px;
		width: 7px; height: 7px;
		left : 0;
		top : 5px;
		font-size : 0;
	}
	
	
	
	
	#zone_recherche [type="checkbox"]:not(:checked) + label:after,  
    #zone_recherche [type="checkbox"]:checked + label:after { 
		color: #908c8b; 
	}
	
	
    /* Aspect si "pas cochée" */  
    [type="checkbox"]:not(:checked) + label:after,  [type="radio"]:not(:checked) + label:after {  
      opacity: 0; /* coche invisible */  
      transform: scale(0); /* mise à l'échelle à 0 */  
    }  
    /* Aspect si "cochée" */  
    [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after  {  
      opacity: 1; /* coche opaque */  
      transform: scale(1); /* mise à l'échelle 1:1 */  
    } 

		#ecArticleModelesList_finition [type="radio"]:not(:checked) + label, 
		#ecArticleModelesList_finition [type="radio"]:checked + label{
			margin-bottom : 0;
		}
		
		#ecArticleModelesList_finition  ul li {margin-bottom : 10px;}