/*  Ce fichier CSS, situé dans le répertoire général, sert pour TOUS les AFFICHAGE_ECRAN  Couleurs de site, et largeurs des différentes colonnes  03/05/2020    */		
 
/*  (.) précédant une classe sont des 'class' et s'adressent aux objets créés et nommés volontairement */
/*  (#) précédant une classe sont des 'id'    et ne sont utilisables qu'UNE' seule fois dans la page html  */ 
/*  Les paragraphes sans rien s'adressent à des balises prpores au langage html  */



/*menu_fixe : Pour le garder mailgré le déroulement de la page */
/*  https://www.w3.org/Style/Examples/007/menus#details        */
#menu_fixe {
  position: fixed;
  right: 100;
  top: 25%;
  width: 8em;
  margin-top: -2.5em;
}




/*  Utilisé dans mailing_saisie_mail_HV  pour la largeur des colonnes des brouillons de mail   */
.col_id_train_mail_br {
	width: 15cm; 
	}
	
.col_10cm {
	width: 10cm;
	}


	

/*  Spécial tableau sondages  ******************************************************************************************* */
/*  Un écran LCD fait en général du 1024 x 780  */

.sondages {
	table-layout: auto; fixed;				/* auto : le texte détermine la largeur des colonnes,    fixed : la largeur identique dépend du nombre de colonnes*/
	width: 1000px;							/* Largeur totale de l'écran   ::  Un écran LCD fait en général du 1024 px X 780 px 				*/
	border: 5px solid red;					/* entourage périphérique de tout le tableau    */
	text-align:center;						/* Le texte est centré dans sa cellule      */ 
	colonne-width:150px;
	}


.questions {
	table-layout: auto; fixed;
	width: 950px;
	border: 3px solid red;	
	/*text-align:center;  */
	colonne-width:150px;
	}
	
	
.reponses {
	table-layout: auto; fixed;  
	width: 1200px;
	border: 3px solid red;	
	/*text-align:center;  */
	colonne-width:150px;
	}


.ratios {
	/*table-layout: auto; fixed;*/
	/*width: 700px;*/
	border: 5px solid green;
	font-size:20px;
	font-weight:bold;						/*  en gras */
	text-align:center; 
	colonne-width:50px;
	}
	

.select.largeur {
	width:300px;
	}






/*  CSS pour le debuggage de http://www.enseignement.polytechnique.fr/informatique/profs/Olivier.Serre/Memos/Debuggage/Debug.html 
	Cette class est utilisée dans la fonction 'debugPrintStatus' pour l'affichage des TRAVAUX lus   dans 'etat_site'  */
div.debug {
	background:lightgreen;
	border-style:dotted;
	border-color:blue;
	border-width:1px 1px 1px 1px;
}	

div.debug em {
	font-weight: bold;
	font-style: normal;
}

.liste_agenda {
	width:90%;
}


select {					/* Utilisé dans les formulaires où il y a des selecteurs  (Ges_Responsabilites,  */
	font-family : ; Courier ;
	font-size : 15px ;
	width : 240px ;
	}


/*  25/07/2020  Wrapper vient de      http://www.cree1site.com/installer-menu-flottant-haut-de-page/   */
#wrapper {
		position:fixed;
		border: 5px solid #a7a7a7;
		position: fixed;
		background-color: #eeeeee;
		top:75px;
		margin-left: 20px; auto;
		margin-right: auto;
		z-index: 100;
		}

		
.texte_gauche {
		text-align: left;
}		

.texte_droite {
		text-align: right;
}

.texte_centre {
		text-align: center;
}


.menu_haut_droit {
 		font-size: 100%; 
 		color: yellow; green; 
 		text-align: justify; 
 		padding-left: 50px;										/*	Décalage du texte à gauche, depuis le bord de l'entourage */
 		padding-right: 50px;									/* 	Décalage du texte à droite, depuis le bord de l'entourage  */
 		margin-left : 50%; 900px;								/* 	Décalage de l'entourage à gauche, depuis les bords de l'écran */
 		margin-right : 100px;									/* 	Décalage de l'entourage à droite, depuis les bords de l'écran */
 		border: solid 50px;										/*  Cadre d'entourage du texte */
 		width: 50%;												/*  % de largeur du cadre par rapport à l'écran maximum */ 
 		position: fixed;
 		} 
 


html {															/*  Fond de tout le site										 */
  	width:96%; 100%; 											/*  Proportion du html en largeur,   par apport à la taille à l'écran du navigateur  */
  	margin:10px 1px 10px 10px; 		      						/*  Marge avec le parent  :    haut, droit, bas, gauche  */
  	padding: 10px 10px 10px 10px;								/*  Marge autour de l'enfant  :    haut, droit, bas, gauche  */
  	
  	text-align: center; 
  	background-color: #81BEF7; 
  	
	border-color: blue;			
	border-width: 5px; 5px;
	border-style: solid;           								/*  Style de la bordure      dotted = pointillé  */
	}

/*															ecran de travail  */		
body {											
	center														
	margin:auto;
	padding: 10px 10px 10px 10px;
	color:black; 												
	background-color: #d1edff; A9E2F3;							
	text-align: center;
	font-family:Verdana;
	font-size: 15px; 0.85em;							
	
	border-color: gray;
	border-width: 10px;
	border-style: solid; 
	}




/************************  button  ********************************/
.btn{
	background-color: white; cyan; blue; maroon; red; #40c781;	/* Couleur du fond initial  */
	height: 35px; 												/* Hauteur du bouton */
	
	//width: 220 px;
	//border-radius: 17px; 										/* Coins arrondis */
	
	border-radius: 7px; 										/* Coins arrondis */
	border-top: 1px solid #183dab; #35a76e; 					/* Petite bordure en haut du bouton */
	border-bottom: 3px solid #183dab; #35a76e; 					/* Petite bordure en bas du bouton */
	border-left: 1px solid #183dab; #35a76e; 					/* Petite bordure à gauche du bouton */
	border-right: 3px solid #183dab; #35a76e; 					/* Petite bordure à droite du bouton */
	text-align: center; 																/* Centrer le texte */
	}
		
		
.btn a{
	text-decoration: none; 										/* Supprimer le soulignage du lien */
	line-height: 42px; 											/* Changer la hauteur de la ligne d'écriture */
	color: #fff;												/* Couleur du texte blanche */
	}
		
		
.btn:hover {
	background-color: yellow; #34a46c; 							/* On modifie la couleur du fond au passage de la souris */
	/* display: none; 		*/									/* Fais disparaitre le bouton */
	}


.msg{
	background-color: red; white; cyan; blue; maroon; red; #40c781;	/* Couleur du fond initial  */
	height: 100px; 												/* Hauteur du bouton */
	
	//width: 220 px;
	border-radius: 17px; 										/* Coins arrondis */
	
	//border-radius: 7px; 										/* Coins arrondis */
	border-top: 1px solid #183dab; #35a76e; 					/* Petite bordure en haut du bouton */
	border-bottom: 3px solid #183dab; #35a76e; 					/* Petite bordure en bas du bouton */
	border-left: 1px solid #183dab; #35a76e; 					/* Petite bordure à gauche du bouton */
	border-right: 3px solid #183dab; #35a76e; 					/* Petite bordure à droite du bouton */
	text-align: center; 																/* Centrer le texte */
	}
	
/********************************************************************/



.choix_site {
	margin:auto; 
	padding: 10px 10px 10px 10px;
    width: 600px;
    height: 300px;
    background-color: silver;
	text-align: center;
	}



.corps_logout {
	margin:auto;
	padding: 10px 10px 10px 10px;
    width: 600px;
    height: 200px;
    background-color: silver;
	text-align: center;
	}



table {		
	text-align: left;																	
	background-color:white; yellow;  
	/*		padding: 10px 10px 10px 10px;  		*/
	margin:10px 10px 10px 10px;							
	width:50%; 
	border: 1px;
	border-collapse: collapse; 							/*   Bordures et Tours de tableaux sont confondus  */
	}


		
td, tr, th {
	padding: 5px 5px 5px 5px;  							/*  Marge / Espacement autour du texte dans les cellules   */
	border: 0.5px solid black;							/*  Séparation et couleurs entre les cellules  */
	background-color: white; blue;					/*  Couleur de fond des cellule    */
	}		
	

	
th {
	background-color:#81BEFA; lime;									/*   Spécifique aux titres des Tableaux   */
	}	
	

		
.table_login {															/*   'id' peut servir plusieurs fois dans une page */
	background-color:silver; 									
	margin:10px 10px 10px 10px;						 
	border-width:5px; 
	border-style:solid;							
	border-color:blue; 
	width:300px;
	height:70px;
}	
		
/********  Spécial Liste Menu_Personne SUR ECRAN   *************************************/

.liste_personnes {							
	text-align: left;												/*  Position du texte dans les cellules  */						
	background-color:red; blue; white;									
	margin: 5px 5px 5px 5px;					
	width:100%; 90%; 
	border-color: black;														
	border-width: 1px;
	border-style: solid;										/*  Bordue externe du tableau    ou dotted (pointillés)   */
	}


.col_rang {
		width: 0.7cm; 
}

.col_id {
		width: 1.2cm;
		}
		
.col_civil {
		width: 1.2cm;
		}
		
.col_nom {
		width: 4cm;
		}
		
.col_prenom {
		width: 3cm;
		}
		
.col_adresse {
		width: 5cm;
		}		
		
		
.col_adresse_2 {
		width: 3cm;
		}			

.col_cp_ville {
		width: 5cm;
		}
		
.col_doyenne {
		width: 4cm;
		}			
		
.col_tel {
		width: 3cm;
		}

.col_email {
		width: 6cm;
		}
		
.col_photo {
		width: 2cm;
		}	
		
.col_actions {
		width: 2cm;
		}	
		
.col_evenement {
		width: 15cm;
		}

.col_5cm {
	width: 5cm;
}
		
.col_10cm {
	width: 10cm;
}

.col_15cm {
	width: 15cm;
}

.aff_traces {
	width:100%; 95%;
  	margin: auto; 10px 10px 10px 10px; 		    
  	padding: auto; 10px 10px 10px 10px;
  	
  	text-align: left; center; 
  	background-color: white; grey; red; yellow;
  	
  	font-family:Verdana;
	font-size: 12px; 0.85em;	
	
	border-color: blue;			
	border-width: 5px;
	border-style: dotted; solid;		
	}



img, IMG {
  	float:center;
 	/* 	margin:1em 1.5em 0.5em 1.5em;      				/*   image    */
 	padding:0px;										/*  Marge de la Bordure autour de l'image */
 	background: #fff;
 	border:1px solid #243225;							/* 	Epaisseur du trait d'entourage des images */
 	}


.marge_image {
  	/* background-size: 50%;   */
 	}


.menu {
	position:absolute;
	top: 1em;
	right: 1em;
    color: white; 
    padding: 10.15px 10px;								/* Hauteur du tableau, */
    background-color: maroon;  					 		/* Couleur de fond du tableau  */
	}


a {
	color: navy; #769712;
	}


h1 {
	color: navy; #769712;
	}


h2 {													/*  NOM du Site  */
	color: navy; #769712;
	padding-bottom:2px;
	padding-left:0px;									/* decalage par rapport à la gauche */
	font:bold 1.4em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	}



h3 {
	font-weight:normal;  /*bold;*/
	color:blue;     /*#E7A800; */
	}



li {
	border:0px solid blue; 										/*  Bordure d'entourage des lignes 'li'		*/
	}



/*  Les3 paragraphes qui suivent servent à positionner des boites dans une page html  */

.box {																			/*  Caractéristiques de la box  */
	background: red;												/*  Couleur du fond */
  	width: 100px;
  	height: 100px;
  	margin: 20px;
  	color: white;
	}
	
	
#un {
  	position: fixed;
  	top: 80px;
  	left: 10px;
	}
	
	
.outer {
  	width: 500px;
  	height: 300px;
  	overflow: scroll;
  	padding-left: 150px;
	}


/**************************** Affichage Contrôle Saisie de Mails *************************************/
.ctrl_envoi_mail {
	position:absolute;
	top: 1em;
	right: 1em;
    color: white; 
    padding: auto; 10px 10px 10px 10px;									/* Hauteur du tableau, */
    background-color: red; blue; maroon;  					 /* Couleur de fond du tableau  */
	}



.col_titre_champs {
	width: 2cm; 
	}


.col_contenu_champs {
	width: 4cm;
	}



/*****  Pour Affichage de la liste des Mails envoyés  **************************/

.mails_liste {														/*  Liste des Mails envoyés  */  
	margin: auto;
	border: medium solid #000000;
	text-align: center;												/*  Position du texte dans TOUTES les cellules  */			
	width: 100%;															/* donc 100% de la largeur de la page	*/
	table-layout: fixed;											/*  les largeurs des colonnes sont précisées   */
	border-collapse: collapse;
  	border: 5px solid blue; 				
  	letter-spacing: 1px;
  	font-size: 0.8rem;
	}

	
.mail_col_id {
	width: 1cm;
	}		


.mail_col_date {
	width: 3cm;
	}


.mail_col_exped {
	text-align: center;												/*  Position du texte dans les cellules  */			
	width: 2cm;
	}


.mail_col_dest {
	width: 2cm;
	text-align: center;												/*  Position du texte dans les cellules  */			
	}


.mail_col_objet {
	text-align: center;												/*  Position du texte dans les cellules  */			
	width: 2cm;
	}


.mail_col_contenu {
	text-align: center;												/*  Position du texte dans les cellules  */	
	width: 5cm;
	}


.mail_col_result {
	text-align: center;												/*  Position du texte dans les cellules  */	
	width: 3cm;
	}

	
.mail_col_actions {
	width: 3cm;
	}





/********* Spécial Liste Menu_Personne (rajout pour import_csv)   ***********  **************************/

.ma_liste_tableau {
	margin: auto;
	border: medium solid #000000;
	width: 100%;															/* donc 50% de la largeur de la page	*/
	/* width: 2000px;															/* donc 50% de la largeur de la page	*/
	table-layout: fixed;
	border-collapse: collapse;
  	border: 5px solid blue; 				
  	letter-spacing: 1px;
  	font-size: 0.8rem;
	word-wrap: break-word;					/* rajouté le 01/04/2021 ...  ça garde les mots entiers dans les cellules   HTML  */
	}




#page {
	text-align:left;
	margin:10px 8% 10px 8%;
	position:relative;
	background:#fff;
	border:1px solid #CFCFCF;
	-moz-border-radius:6px;
	border-radius:6px;
	padding:0;
	zoom:1;
	}


/******** Différents formats d'encadrements *****************************************************************************/
/******** utilisés notamment dans Personne_HV.php   */
.cadre_h200x800 {
	height: 200px;
	width:  800px;
	border-width:2px 4px 6px 8px;		
	border-style:solid;   				
	border-color:blue;  
	order-radius: 20px;							
	padding:0 20px;
	}


/*  21/04/2024 Selon chatgpt, Exemple de code HTML / CSS pour agrandir le champ de saisie d'une liste déroulante :
	<select class="custom-dropdown">
	  <option value="1">Option 1</option>
	  <option value="2">Option 2</option>
	  <option value="3">Option 3</option>
	</select>
	*/ 
.custom-dropdown {
	width: 200px; 										/* Définissez la largeur souhaitée */
	padding: 8px; 										/* Ajoutez un peu de 'marge' autour pour un meilleur aspect */
	font-size: 16px; 									/* Modifiez la taille de la police si nécessaire */
}