/* --------------------------------------------------- feuilles de style CSS de la plateforme de satisfaction et qualité ----------------------------------- */


/* ---------------------------------------------------------------------------------------------- HEADER -- */

.btn_menukal {
	width: auto;
	height: auto;
	margin-left: 10px;
	margin-right: auto;
	padding: 15px;
	font-family: "General_all_comic";
	
	font-size: 1.2em;
	/* font-style: italic; */
	font-weight: bold;
	text-decoration: none;
	user-select: none;
}

.btnmenukal_deco {
	/* border-radius: 30px 50px 25px 60px;	 */
	/* border-left: solid 5px black; */
	/* border-bottom: solid 1px black; */
	
	color: black;
}.btnmenukal_deco:hover {
	filter: drop-shadow(0 0 4px silver);				/* #865200 */ 
	/* border-color: #E6C832; */
	color: black;
	cursor: pointer;
}

.fixed_btnmenukal {
	/* border-radius: 30px 50px 25px 60px;	 */
	/* border-left: solid 5px #2A2A2A; */
	/* border-bottom: solid 1px #2A2A2A; */
	color: #B2B2B2;
}.fixed_btnmenukal:hover {
	filter: drop-shadow(0 0 4px gray);
	/* border-color: #B2B2B2; */
	cursor: pointer;
	color: #DDDDDD;
}

/* ---------------------------------------------------------------------------------------------- INDEX --- */

.messerrsatcandhot {
	font-style: italic;
	color: red;
}
.section_statglobale {
	max-width: 100%;
	left: 0px;
	/* min-height: 250px; */
	/* padding-left: 80px; */
	/* padding-right: 80px; */
	/* padding-top: 20px; */
	padding-bottom: 30px;
	background-color: rgba(150, 185, 200, 0.7);	
	/* cursor: pointer; */
	/* box-shadow: 0px 0px 5px 2px silver; */
}
.section_gotocandhot {
	margin-top: 60px;
	max-width: 100%;
	/* color: #FFDD90; */
	left: 0px;
	/* min-height: 250px; */
	padding-left: 80px;
	padding-right: 80px;
	background-color: rgba(245, 245, 245, 0.7);	
	cursor: pointer;
	padding-top: 50px;
	box-shadow: 0px 0px 5px 2px silver;
}
.section_gotocandhot:hover {
	box-shadow: 0px 0px 15px 5px #656565; /* 4CAF50 656565 */
}
.sect_erreur {
	color: #960000;
	max-width: 100%;
	left: 0px;
	/* min-height: 250px; */
	padding-left: 80px;
	padding-right: 80px;
	/* background-color: rgba(245, 245, 245, 1); */
	cursor: pointer;
	padding-top: 10px;
	padding-bottom: 10px;
	/* box-shadow: 0px 0px 5px 2px silver; */
}
.sect_erreur:hover {
	/* cursor: pointer; */
	color: #FFDD90;
	background-color: rgba(150, 0, 0, 1);
	box-shadow: 0px 0px 15px 5px #FFB200; /* 4CAF50 656565 */
}
.sousectionqualite {
	margin-top: 40px;
	max-width: 100%;
	/* color: #FFDD90; */
	left: 0px;
	/* min-height: 250px; */
	padding-left: 80px;
	padding-right: 80px;
	/* background-color: rgba(245, 245, 245, 0.7);	 */
	cursor: pointer;
	padding-top: 10px;
	padding-bottom: 10px;
	/* box-shadow: 0px 0px 5px 2px silver; */
}
.sousectionqualite:hover {
	/* background-color: rgba(150, 185, 200, 0.7); */
	background-color: rgba(160, 190, 200, 0.7);
	box-shadow: 0px 0px 15px 5px #656565; /* 4CAF50 656565 */
}
.qualiopi_scontent {
	margin-top: 20px;
	margin-bottom: 20px;
	
	/* background-image: url("https://www.apsi-formations.com/medias/logo_qualiopi_152.png"); */
	/* background-position: center; */
	/* box-shadow: inset 5px 5px 20px 0px black; */
}
img.qualiopimg_sat {
	margin: auto;
	border-radius: 15px;
	box-shadow: 0px 0px 15px 5px #4F9152; /* green 4F9152 */
	/* filter: drop-shadow(0 0 15px #4F9152); */
	
}

/* --------------------------------------------------------------------------------------------- RECO ---- */

.ctn_recoclients {
	width: 80%;
	min-height: 300px;
	max-width: 1000px;
	margin-top: 20px;
	/* margin-bottom: 20px; */
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	border-radius: 30px;
	background-color: rgba(220, 235, 220, 0.5);	
	user-select: none;
}
.ctn_recothank {
	margin-top: 50px;
	margin-bottom: 20px;
}
.ctn_recothankflex {
	width: 80%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center; 
}
img.recothank {
	display: block;
	width: 200px;
	height: auto; 
	/* filter: drop-shadow(0 0 6px #656565); */
}
div.recothank {
	font-family: "Manuscrit_light";
	font-size: 3em;
	font-weight: bold;
	font-style: italic;
	color: #004864;
	transform: rotate(-7deg);
	/* filter: drop-shadow(-5px 5px 6px #656565); */
}
.citrecocl {
	display: none;
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
.ctn_valreco {
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 30px;
}
.txt_recoclient {
	font-family: "Manuscrit_strong";
	font-size: 1.5em;
	color: #004864;
}
.citimgreco {
	width: 70px;
	height: auto; 
	margin-right: 20px;
}
@-webkit-keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

/* --------------------------------------------------------------------------------------------- INPUT --- */

.selectheadsess { 
	height: 35px;
	/* width: 75%; */
	border-radius: 15px;
	font-size: 1.2em;
	cursor: pointer;
	margin-left: 20px; 
	margin-right: 20px; 
}
.selectsatisfclient { 
	display: block; 
	height: 35px;
	/* width: 75%; */
	border-radius: 15px;
	font-size: 1.2em;
	cursor: pointer;
	margin-left: auto; 
	margin-right: auto; 
}

.containenquetesatisf {
	max-width: 1400px;
	width: 90%; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 30px; 
	margin-bottom: 30px; 
	background-color: rgba(245, 245, 245, 0.5);				/* #B5B5B5 */
	
	border-radius: 20px;
	padding: 10px; 
}

.enquettitleflex {
	display: flex;
	flex-direction: row;
	justify-content: flex-end; 
	align-items: center; 
}
img.satisf_icon {
	width: 80px;
	padding: 10px;
}
.enquetformtitle {
	width: 100%; 
	border-radius: 10px 20px 20px 10px;
	padding: 10px;
	/* font-family: "Comic Sans MS";  */
	font-weight : bold;
	font-size: 1.4em; 
}
.bgcolcell_satcandhot {
	background-color: #656565; 
}
.enquetevalue {
	/* width: 100%; */
	color: white;
	font-size: 0.5em;
	text-align: right;
}

.inputcontsatisf {
	width: 90%;
	margin-left: 10%;
	margin-top: 10px; 
	margin-bottom: 10px;
}
.inputcontsatisf > input {
	margin-left: auto;
	margin-right: 60px;
}
.under4select {
	display: none;
}

div.inputsstitle {
	/* display: block; */
	font-size: 1.3em; 
	color: #656565; 
	margin-bottom: 5px;
}
span.inputsstitle {
	font-size: 0.9em; 
	color: #656565; 
	font-style: italic;
	margin-bottom: 5px;
}
.inputexplain {
	display: block;
	font-size: 0.9em; 
	font-style: italic; 
	color: gray; 
	margin-bottom: 5px;
}

.input_satisftxt {
	/* display: block;  */
	height: 35px;
	/*background-color: #D6D6D6;*/
	border-radius: 10px;
	font-size: 1.2em;
	/* text-align: center; */
}
.input_satisfsel {
	height: 35px;
	/* width: 75%; */
	border-radius: 10px;
	font-size: 1.2em;
	cursor: pointer;
}
.inputsiz2 {	width: 20%;	}
.inputsiz3 {	width: 30%;	}
.inputsiz4 {	width: 40%;	}
.inputsiz5 {	width: 50%;	}
.inputsiz6 {	width: 60%;	}
.inputsiz7 {	width: 70%;	}
.inputsiz8 {	width: 80%;	}

.input_satisftxt:required:invalid,
.input_satisfsel:required:invalid { 
	box-shadow: 0px 0px 4px 3px red;
}
.input_satisftxt:required:valid, 
.input_satisfsel:required:valid { 
	box-shadow: 0px 0px 4px 3px green;
}
.input_satisftxt:focus { 
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.btnvalid_satisf {
	height: 50px;
	width: auto;
	/*background-color: #D6D6D6;*/
	border-radius: 20px;
	font-size: 0.8em;
	font-weight: bold;
	padding: 10px;
	cursor: pointer;
	margin-left: 10px;
}
.btnvalid_satisf:hover {
	text-shadow: 0px 0px 8px gray; 
	box-shadow: 0px 0px 4px 3px green; 
}

.flex_radiosatisf {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center;  
	
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

/* boutons radio */ 
.radio_item {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: 4px solid gray;
}
.radio_item:checked {
	width: 40px;
	height: 40px;
	border: 6px solid black;
	/* background-color: #A6E800; */
}
.colorradio1 {	border-color: #A50000; }
.colorradio2 {	border-color: #A54700; }
.colorradio3 {	border-color: #A58000; }
.colorradio4 {	border-color: #7DA700; }
.colorradio5 {	border-color: #4CA500; }
.colorradio6 {	border-color: #0DA500; }
.colorradio1:checked {	background-color: #A50000; }
.colorradio2:checked {	background-color: #A54700; }
.colorradio3:checked {	background-color: #A58000; }
.colorradio4:checked {	background-color: #7DA700; }
.colorradio5:checked {	background-color: #4CA500; }
.colorradio6:checked {	background-color: #0DA500; }

.valueleft {
	color: #A50000;
	font-size: 0.9em;
	font-style: italic;
}
.valueright {
	color: #0DA500;
	font-size: 0.9em;
	font-style: italic;
}

.textarea_under4 {
	width: 80%; 
	border-radius: 10px;
	font-size: 1.1em;
}.textarea_under4:required:invalid { 
	box-shadow: 0px 0px 4px 3px red;
}


/* --------------------------------------------------------------------------------------------- STATIST - */

.titlequestfeed {
	font-style: italic;
	color: #656565;
	font-size: 1.3em;
}
.ctn_titlequestcl {
	width: 90%; 
	/* margin-top: 20px; */
	margin-left: auto;
	margin-right: auto;
	height: 50px; 
	/* border: 2px solid #656565;  */
	/* border-radius: 10px;  */
	padding: 10px; 
}
.titlequestcl {
	display: none; 
	font-style: italic;
	color: #656565;
	font-size: 1.3em;
}
.titlecommcl { 
	width: 90%; 
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	font-style: italic;
	color: #656565;
	font-size: 1.3em;
}
.sat_clientname {
	font-weight: bold; 
	font-size: 1.2em;
}
.sat_clientfction {
	font-style: italic;
}
.sat_clientent {
	font-weight: bold; 
}
.sat_clientmail {}
.dateval {
	margin-top: 20px;
	padding: 10px;
	/* font-style: italic; */
	/* color: #656565; */
	font-size: 1.3em;
	font-weight: bold;
}
.resultcontainsatisf {
	width: 90%;
	margin-left: 10%;
	margin-top: 50px; 
	margin-bottom: 10px;
}
.flex_puttersatisf {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around; 
	-webkit-box-align: flex-end; 
	    -ms-flex-align: flex-end; 
	        align-items: flex-end;  
	
	width: 70%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
.flex_puttercldomaine {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around; 
	-webkit-box-align: flex-end; 
	    -ms-flex-align: flex-end; 
	        align-items: flex-end;  
	
	width: 70%;
	/* margin-top: 20px; */
	margin-left: auto;
	margin-right: auto;
}
.putter_ordonnees {
	border: 1px solid black;
	border-top: 0px;
	border-right: 0px;
}
.ptdomaine01,
.ptdomaine02,
.ptdomaine03,
.ptdomaine04 {
	/* border: 1px solid black; */
	/* border-top: 0px; */
	/* border-left: 0px; */
	/* border-bottom: 0px; */
	border-radius: 5px; 
	text-align: center; 
	font-size: 0.8em; 
	font-weight: bold; 
	font-style: italic; 
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	/* margin-right: 2px; */
}
.ptdomaine01 { background-color: #B3D7AA; width: 39%; }
.ptdomaine02 { background-color: #D7CCAA; width: 23%; }
.ptdomaine03 { background-color: #B3D7AA; width: 23%; }
.ptdomaine04 { background-color: #D7CCAA; width: 15.4%; }
.flex_moyennsatisf {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-pack: distribute;
	    justify-content: space-around; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center;  
	
	width: 70%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
div.affichmoyen {}
span.affichmoyen {
	font-size: 2em;
	font-weight: bold;
}
.ctn_commentsatisf {
	width: 90%; 
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	height: 80px; 
	border: 2px solid #656565; 
	border-radius: 10px; 
	padding: 10px; 
}
.ctn_commentsatisf2 {
	width: 90%; 
	/* margin-top: 20px; */
	margin-left: auto;
	margin-right: auto;
	height: 80px; 
	border: 2px solid #656565; 
	border-radius: 10px; 
	padding: 10px; 
}
.ctn_commentbilan {
	width: 90%; 
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	height: 80px; 
	border: 2px solid #656565; 
	border-radius: 10px; 
	padding: 10px; 
}

.commentresultsatisf {
	font-family: "Manuscrit_strong";
	font-size: 1.3em;
	color: #004864;
	/* font-style: italic; */
	display: none;
}
.commentresultsatisf2 {
	font-family: "Manuscrit_strong";
	font-size: 1.3em;
	color: #004864;
	/* font-style: italic; */
}
.commentresultbilan {
	font-family: "Manuscrit_strong";
	font-size: 1.3em;
	color: #004864;
	/* font-style: italic; */
	/* display: none; */
}
span.referencecandi {
    font-family: 'General_all_text';
	font-size: 0.8em;
	font-style: normal; 
	font-weight: bold;
	color: #9CBDDB;
}

/* putters */ 
.putter_base {
	width: 10%; 
	margin-top: 5px;
	padding-top: 5px;
	border-radius: 5px 5px 0 0; 
	text-align: center; 
	font-weight: bold; 
	margin-left: 5px;
}
.puttercl_base {
	width: 7%; 
	margin-top: 5px;
	padding-top: 5px;
	border-radius: 5px 5px 0 0; 
	text-align: center; 
	font-weight: bold; 
	margin-left: 5px;
}
.putter_colorval { background-color: silver; }
.putter_colorval1 { background-color: #A50000; }
.putter_colorval2 { background-color: #A54700; }
.putter_colorval3 { background-color: #A58000; }
.putter_colorval4 { background-color: #7DA700; }
.putter_colorval5 { background-color: #4CA500; }
.putter_colorval6 { background-color: #0DA500; }

.putter_heightval { height: 70px; }
.putter_heightval1 { height: 20px; }
.putter_heightval2 { height: 30px; }
.putter_heightval3 { height: 40px; }
.putter_heightval4 { height: 50px; }
.putter_heightval5 { height: 60px; }
.putter_heightval6 { height: 70px; } 

.putter_borderval { 
	border: 2px solid red; 
	border-bottom: 0px; 
	cursor: pointer;
}

.putavatar_base {
	width: 80px; 
}
.putavatar_actif:hover {
	filter: drop-shadow(0 0 4px #656565);
	cursor: pointer;
}





/* ------------------------------------------------------------------------ configuration des "échelles de valeur taux" ------- */	
.content_txbilan {
	/* max-width: 1200px; */
	width: 100%; 
	/* margin: auto; */
	padding-top: 10px; 
	/* padding-bottom: 10px;  */
}
.rangetxbilanctn {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	/* margin-bottom: 50px; */
}
.rangetxbilanbk {
	background-color: #dddddd;
	width: 100%;
	height: 25px;
	border-radius: 5px;
}
.rangetxbilanin {
	/* background-color: #e09900; */
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	border-radius: 5px;
	/* text-align: right; */
}
.rangetxbilaninvaleur {
	padding-right: 10px; 
	font-weight: bold; 
	color: #dddddd;
}

/* ------------------------------------------------------------------------ configuration des "échelles de valeur taux" - END - */	

/* ------------------------------------------------------------------------ configuration des "input" de type échelle de valeur */					/* ----------------------------- Limite de fin de code "efficace" --------------- */

.input_satrange {
	height: 20px;
	width: 70%;
	/*background-color: #D6D6D6;*/
	border-radius: 10px;
	/* font-size: 1.2em; */
}
.input_satrange:required:valid{
	/* background-color: #FFE8E8; */
	/* box-shadow: 0px 0px 4px 3px green; */
}.input_satrange:required:invalid{
	/* background-color: #FFE8E8; */
	/* box-shadow: 0px 0px 4px 3px red; */
}
input[type=range].input_satisfrange {
	-webkit-appearance: none;     /*nécessaire pour Chrome */
	padding: 0;                   /* nécessaire pour IE */
	font: inherit;                /* même rendu suivant font document */
	outline: none;
	color: #069;                  /* sert pour couleur de référence, via currentColor, pour le curseur */
	opacity: .8;
	background: #CCC;             /* sert pour couleur de fond de la zone de déplacement */
	box-sizing: border-box;       /* même modèle de boîte pour tous */
	transition: opacity .2s;
	cursor: pointer;
}
input[type=range].inputsat_bullet { /* bullet commun */
	height: 2em;
	color: #FFF;
	background: transparent;
	background-image: linear-gradient(to bottom, #FFF, #999, #FFF);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 25%;
}

/* chrome */
input[type=range].input_satisfrange::-webkit-slider-runnable-track {
	height: 100%;
	border: none;
	border-radius: 10px;
	background-color: transparent;  /* supprimé définie sur l'input */
}
input[type=range].input_satisfrange::-webkit-slider-thumb {
	-webkit-appearance: none;       /* également nécessaire sur le curseur */
	width: 1em;
	height: inherit;                /* s'adapte à la hauteur de l'input */
	border: none;
	border-radius: 10px;               /* pris en compte sur Webkit et Edge */
	background: currentColor;       /* pris en compte sur Webkit only */
	/* height: 30px; */
	/* width: 30px;  */
	/* background: url('iconthumb.png'); */
}
input[type=range].inputsat_bullet::-webkit-slider-thumb { /* le curseur */
	width: 2em;
	padding: 0.25em;                                              /* largeur du bord */
	border: 1px solid #888;
	border-radius: 10px;
	box-shadow: 0 0 .5em #FFF inset;
	background: linear-gradient(#888, #FFF) content-box,          /* le centre */
				linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}

/* firefox */
input[type=range].input_satisfrange::-moz-range-track{
	height: 100%;
	border: none;
	border-radius: 10px;
	background-color: transparent;  /* supprimé définie sur l'input */
}
input[type=range].input_satisfrange::-moz-range-thumb {
	width: 1em;
	height: inherit;                /* s'adapte à la hauteur de l'input */
	border: none;                   /* supprimer la bordure */
	border-radius: 10px;               /* supprimer le rayon */
	background: currentColor;
	/* background: url('iconthumb.png'); */
}
input[type=range].input_satisfrange::-moz-range-progress {
	height: 0;
	background: transparent;        /* supprime barre progression avant */
}
input[type=range].inputsat_bullet::-moz-range-thumb { /* le curseur */
	width: 2em;
	padding: 0.25em;                                              /* largeur du bord */
	border: 1px solid #888;
	border-radius: 50%;
	box-shadow: 0 0 .5em #FFF inset;
	background: linear-gradient(#888, #FFF) content-box,          /* le centre */
				linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}

/* IE Edge */ 
input[type=range].input_satisfrange::-ms-track {
	height: 100%;
	border: none;
	border-radius: 10px;
	color: transparent;             /* supprime les graduations pour IE */
	background-color: transparent;  /* supprimé définie sur l'input */
}
input[type=range].input_satisfrange::-ms-thumb {
	width: 1em;
	height: inherit;                /* s'adapte à la hauteur de l'input */
	border: none;                   /* supprimer la bordure */
	border-radius: 10px;               /* supprimer le rayon */
	background: currentColor;
	/* background: url('iconthumb.png'); */
}
input[type=range].input_satisfrange::-ms-tooltip {
	display: none;                  /* supprime l'affichage de la valeur au survol */
}
input[type=range].input_satisfrange::-ms-fill-lower {
	background: transparent;
}
input[type=range].input_satisfrange::-ms-fill-upper {
	background: transparent;
}
input[type=range].inputsat_bullet::-ms-thumb { /* le curseur */
	width: 2em;
	padding: 0.25em;                                              /* largeur du bord */
	border: 1px solid #888;
	border-radius: 50%;
	box-shadow: 0 0 .5em #FFF inset;
	background: linear-gradient(#888, #FFF) content-box,          /* le centre */
				linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
}