html{height: 100%;
  background: #dedede;}

body
{ font-family: "Tahoma","lucida sans", arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: 0.78em;
  color: #000000;
  
}

/* Affichage sur pc 
/*@media screen and (min-width : 1201px)
{ 	*/
	#logo h1{ font-size: 200%;	}
	#logo_text h2{font-size: 100%; }
	#menu {font-size: 110%;}
	#menu li{margin: 5px 2px 5px 2px;}	
	#menu li.selected a{ padding: 2px 5px 7px 5px;height: 11px;}
	#menu li a
	{ 	font-size: 100%;
		padding: 2px 5px 7px 5px;
		height: 11px;
	}
	
	#div_messages	{ 		font-size: 110%;	}
	
	#menu li a  
	{ 
		  font-size: 100%;
		  color: black;
		  background:  linear-gradient(silver 30%, #A4AA04 ) ;
	} 
	
	#menu li.selected a, ul#menu li.selected a:hover
	{ 
		background: linear-gradient(silver 30%, orange);
		color: blue; 
	}
	
	.div_formulaire_large , .div_formulaire_small , .div_formulaire_extrasmall, .div_formulaire_extralarge	/* avec des listing */
	{
		 display : block;
		 margin : 0 auto;
		 margin-bottom : 30px;
		 text-align:center;				 
		 /*background : red; 	*/	 
	}
	
	.div_formulaire_large 	/* avec des listing */
	{
		 width:60%;
		 /*background : red; 	*/	 
	}
	.div_formulaire_small	/* avec des simples input */
	{
		 width:35%;
		 /*  background-color : gray*/;  
	}
	
	.div_formulaire_extrasmall	/* avec des simples input (connexion) */
	{		
		width:25%;		 
	}	
	
	.div_formulaire_extralarge/* avec des simples input (connexion) */
	{		
		width:80%;	 
	}
		
	.div_poignee
	{
	}
	
	.div_sousmenu .submitmenuh , .div_sousmenu .inputmenuh /* Taille de police bouton sous_menu */
	{   font-size:130%;
	}
	
	.div_sousmenu .inputmenuh
	{
		width:150px;
	}
	
	.checkmenuh
	{
		display : inline;
		margin-top: 8px;		
		width:auto;
		margin-left:10px;
	}
	
	.labelcheckmenuh 
	{		
		/*display:block;*/
		margin-top:8px;
		width:90px;
		margin-left:0px;
		font-size:120%;
		
	}
	
	.labelcheckmenuh : hover
	{	
		color: CYAN;
		text-decoration: none;
		background:#55FF55;
	}
	
	div_grille_liste , .div_grille_notice
	{
		width : 60%;
		margin-top : 3px auto;
	}
	
	.grille_boutons3{width:170px;  grid-template-columns : repeat(3, 50px);}
	.grille_boutons4{width:220px;  grid-template-columns : repeat(4, 50px);}
	.grille_boutons5{width:270px;  grid-template-columns : repeat(5, 50px);}
	.grille_boutons6{width:310px;  grid-template-columns : repeat(6, 50px);}
	.grille_boutons7{width:360px;  grid-template-columns : repeat(7, 50px);}
	.grille_boutons8{width:360px;  grid-template-columns : repeat(8, 30px);}




#main, #menubar,#logo, #logo_text  
{ 
  margin-left: 0px; 
  margin-right: auto;
}

/* ------------- ENTETE LOGOS -------- */
#header
{
	background-color:black;	
}

#logo, #logo_text
{ display : flex;  
  width: 100%;
  overflow : hidden;
  flex-wrap : nowrap;
}

#logo h1
{  
  padding: 5px 0px 0px 0px;
  color: #B8BD20  ;
  margin: 0px;
  font: bold;
  border-bottom: 0;
}

#logo_text h2
{ 
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0px 0px 0px 0px;
  margin-bottom : 0px;
}

/*----------------- Encart Message Ajax -------- */
#div_message_ajax{
	display : absolute;
	/*width: 100%;*/
	padding: 0px 0px 0px 0px;
	margin-bottom : 0px;
	text-align: center; 
	background: black;
	color: ORANGE;	
	border: 0;
	letter-spacing: 0.1em;
	overflow : auto;
	max-height : 80px;	
	font-weight : bold;
	animation: clignote  5s linear infinite;
}
@keyframes clignote {
	from 	{color:black;  }
	25% 	{color:yellow;  }
	51% 	{color:green;  }
	75% 	{color:yellow;  }
	100% 	{color:black;  }
 }



/* ------------------------MENU ONGLET--------- */
#menubar
{ width: 98%;
  height: 24px;
  padding-top: 3px;
  padding-left: 0px;
  border-bottom: 3px solid #A4AA04;
  justify-content : left;
  display:flex;
} 

#menu 
{ 
 /* float: left;
 */ margin: 0px;
  margin-left:0px;
}

#menu li
{ 			
  float: left;
  list-style: none;
}

#menu li a  
{ letter-spacing: 0.1em;
  display: block; 
  float: left; 
  text-decoration: none; 
  text-align: center;
  text-transform: uppercase;
  border: none;
  border-radius : 2px; 
} 

#menu  maj
{
 color: red;
 font-weight : bold;
 padding-bottom : 8px;
 vertical-align : top;
}


#menu li.selected a
{ 
	border-radius : 2px;
}

#menu li.selected a, ul#menu li.selected a:hover
{ 
  border-radius : 2px;
}

#menu li a:hover
{ color: black;
	border-radius : 2px;
}


/*------- Sous Menu Boutons ------ */
.div_sousmenu	/* Barre de menu */
{ 
  display 			: flex;
  flex-direction 	: row;				/*horizontal montant */
  flex-wrap			: nowrap;			/*Rester sur une ligne */
  justify-content 	: center;			/*espace entre elements sur X */
  align-items 		: center;			/*alignement des elements sur X */
  width : 100%;
  height: 23px;
  min-height:22px; 
  padding: 3px 0px 3px 0px;
  margin-bottom: 0px;
  margin-left : 0;
  background:black;  
  color:#B8DDff;
  border-bottom: 3px solid #A4AA04; 
}
.div_submit 
{
	display:flex;	
	text-decoration: none;
} 

.div_submit :hover
{ color: RED;
  text-decoration: none;
  background:#55FF55;}

.div_submit  :active
{ color:RED;
  text-decoration: none;  
}

.inputmenuh
{	
	font-size: 18px; 
	height:20px;
	font-weight : normal; 
	margin: 0 auto ;	
	padding: 0 3 0 3px;
		
}

.submitmenuh , .submitmenuh_encours
{   
  height: 	25px;   
  margin: 0px 3px 0px 3px; 
  padding: 0 3 0 3px;
  color: #000000;
  cursor: pointer;  
  border: 1px solid; 
  border-radius : 10px;
  text-align : center;
  display:inline-block;   
}

.submitmenuh_encours
{
	color: #FF0866;
}

.icone_menu
{
	height : 17px;
	margin-left:3px;
	margin-right: 3px;
}

.icone_menu title
{
	font-size : 25px;
	color : green;
	border-radius : 5px;
}

/* ---------- Encart Messages d'infos --------------- */
#div_messages
{ 
	display : block;
	width: 100%;
	padding: 3px 0px 5px 0px;
	margin-bottom : 5px;
	text-align: center; 
	background: #CCCCCC;/*#313131;*/
	color: #A8AA94;	
	border: 3px solid #A4AA04;
	text-transform: capitalize;
	letter-spacing: 0.1em;
	overflow : auto;
	max-height : 60px;	
}

#div_messages a
{ color: #B8BD20;
  text-decoration: none;}
  
#div_messages a:hover
{ color: #FFF;
  text-decoration: none;}
 
#separateur
{ width:100%;
  height: 3px;
	
  padding: 0px;
  margin: 0px;
  background: white;
  border: 0px solid #A4AA04;
  }
  
/*----- */
p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
  font-size: 15px;
  }

h1, h2, h3, h4
{ font-size: 150%;
  padding: 7px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  font-weight: normal;
  color: #342F28;  
}

h1, h3
{ text-transform: uppercase;
  margin: 10px 0px 20px 0px;
  padding: 5px 20px 5px 0px;
  border-bottom: 1px solid #CCC6B4;}

a, a:hover
{ border-bottom: 1px dotted;
  color: #635B53;
  text-decoration: none;}

a:hover
{ border-bottom: 1px solid;
  color: #A4AA04;}

img
{ border: 0px; 
  margin: 0px; 
  padding: 0px;}

a
{ outline: none;}

ul
{ margin: 2px 0px 18px 16px;
  padding: 0px;}

ul li
{ list-style-type: square;
  margin: 0px 0px 6px 0px; 
  padding: 0px;}

ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;}


form{display:inline; padding: 0;   }

/*  footer bas : mentions légales */  
.footer_espace_bas 
{ 
  color:BLACK;
  text-decoration: none;
  width: 100%;
  font-size: 110%;
  height: 60px;
  padding: 10px 0px 3px 0px;
  margin-bottom: 10px;
  margin-left : 0;
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.1em;
  overflow : hidden;
  font-weight :normal;
}

/* fieldset contenu dans un formulaire */
.form_fieldset
{
	width : 99%;
	margin-bottom : 15px;
	padding : 0px;
	padding-bottom  : 10px;
	margin-left:0px;
	margin-right:0px;
	font-size  : 1.2em;
}
 
.div_liste_fichiers
{
	/*align-items:center; */
	display : block;
	overflow : scroll;
	height : 170px;
	width : 98%;
	margin :auto;
}

.div_center_flex, .div_submit_bas			/*div pour centrer des elements espacer de maniere egale sur une ligne */ 
{
	display:flex;
	text-align:center;	
	margin : 0 auto;
	justify-content: center;
}
.div_submit_bas
{
	background-color:black;
	padding : 2px 0 2px 0;
}

/* --------------- Grille Description : Input ------------- */
.div_grille_titre 
{
	display : grid;
	width : 100%;
	grid-template-areas : "rangee_simple"  ;
	grid-template-columns : 100%
}

/* ---- grille couleur ---*/
.div_grille_ligne_6cols  /* grille 6 colonnes pour affichage des couleurs*/
{
	display : grid;
	width : 100%;	
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;  
}

/* ---- grille ligne status utilisateur ---*/
.div_grille_ligne_status  /* grille 6 colonnes pour affichage des couleurs*/
{
	display : grid;	
	grid-template-columns: 2fr 2fr 3fr 3fr 1fr 1fr; 
	width : 70%;	
	margin : 0 auto;		 
	margin-bottom:10px;
	border:1px dashed;
	border-radius : 3px;
	text-align:left;	
	font-weight:bold; 
	padding-left:3px;
}


/* --------------- Grilles Description : Formulaires ------------- */
.div_grille_ligne_formulaire_1tiers2tiers , .div_grille_ligne_formulaire_1demi1demi, .div_grille_ligne_formulaire_2tiers1tiers /* grille pour affichage description 1/3  + input 2/3 */
{
	display : grid;
	width : 100%;
	grid-template-areas : "desc  element "  ;
}

.div_grille_ligne_formulaire_1tiers2tiers/* grille pour affichage description 1/3  + input 2/3 */
{
	grid-template-columns: 30% 70%  ;
}

.div_grille_ligne_formulaire_1demi1demi/* grille pour affichage description 1/2  + input 1/2 */
{
	grid-template-columns: 50% 50%  ;
}

.div_grille_ligne_formulaire_2tiers1tiers/* grille pour affichage description 2/3  + input 1/3 */
{
	grid-template-columns: 70% 30%  ;
}

.div_grille_ligne_formulaire_centrelarge/* grille pour affichage description 2/3  + input 1/3 */
{
	grid-template-columns: 10% 80 10%  ;
}

.label_left_grille_small		/*partie texte a gauche devant input dans un formulaire small */
{
	text-align : right;	
	grid-area  : desc;
	padding-right : 3px;
}
.input_right_grille_small		/*partie input a droite apres le texte dans un formulaire small */
{	
	text-align : left;		
	grid-area  : element;
	padding-right : 3px;
}
/* fin grille formulaires */


/*------ propriétés des elements natifs --------*/ 
textarea , input ,	select 	/* Textarea et input dans les formulaires */	
{
	
	margin-bottom : 10px;
	margin-left: 3px;
	margin-right : 3px;
	width : 95%;
	background-color: #EEFFEE;
	font-size : 1em;
	border-radius : 8px;
	color: black;
}

input {height : 20px;}

input[REQUIRED] , textarea[REQUIRED] , select[REQUIRED]
{
	background: #FBBBBB; 
}

input[name~='daterdv']		, input[name~='dateinitiale']	, input[name~='dateprevue']
, input[name~='dtraitement'], input[name~='darrivee']		, input[name~='datedebut']
, input[name~='datefin'] 	, input[name~='date']			, input[name~='debut_le']
, input[name~='fin_le']		 
{
	width:110px;
	height : 20px; 
}

input[name~='dureecontrat']
{
	width:88px;
}

input[name~='renomme_client'], input[name~='renomme_inter'] 
{
	height:20px;
}

select[name~="hdeb"] 			, select[name~='hfin'] 			, select[name~='heurerdv']
, select[name~='harrivee']		, select[name~='htraitement'] 	, select[name~='temps_trajet']
, select[name~='hdeb_chantier']	, select[name~='hdeb_chantier1'], select[name~='hdeb_chantier2']
, select[name~='hdeb_chantier3'], select[name~='hdeb_chantier4'], select[name~='hdeb_chantier5']
, select[name~='hfin_chantier'] , select[name~='hfin_chantier1'], select[name~='hfin_chantier2']
, select[name~='hfin_chantier3'], select[name~='hfin_chantier4'], select[name~='hfin_chantier5']
, select[name~='h_cut']
, select[name~='daterdv']		, select[name~='dureerdv'] 		, select[name~='rdv_fixe']
, select[name~='maj_client']	, select[name~='suspendu']		
{
	width:95px;
}





textarea label 						/* Label des Textarea  */	
{
	display:block;	
	text-align : left;
	margin-top : 10px;
	font-weight : bold;
	margin-left : 5px;
}

legend						/* legende des fieldset */
{
	color:#1144FF;
	font-weight : bold;
	text-align  : left;
	margin-bottom : 14px;
	display:inline;
}

.button_legend, button_detailsjournees
{
	display: inline;
	color: BLUE;	
	background-color : #F6FF00;
	font-weight : bold;
	font-size : 14px;
} 

.button_detailsjournees
{
	background-color:lightgray;
	border-radius : 4px;
}


.button_typebon
{
	background-color:transparent;
	width:30px;
	height:30px;
}

.fleche_typebon
{	margin-left : 0px;
	width:25px;
	height:25px;
}


titre_red, titre
{ 
  font-size: 25px;
  padding: 7px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  font-weight: bold;
  text-align:center;
  display : block;
}
titre, titre_histo{color: #03adfc;}
titre_red{color:#EE0000;}
titre_histo{ font-size: 25px;}

radio{display:inline;}


/* --------------- Grilles de listes ------------- */
.div_grille_liste, .div_grille_notice, .div_grille_contrat 
{
	display : grid;
	row-gap	 : 5px;
	margin : auto;
	margin-bottom : 5px;
	padding-top : 5px;
	border  : 1px solid gray;	
	border-radius:10px;
	/*background-color:cyan;*/
}
.div_grille_liste a{border:none;}
.div_grille_liste{grid-template-columns :50px auto 50px;} /* grille de 1 colonne 50px + 1 colonne 100% du reste  1 colonne 50px*/
.div_grille_notice{grid-template-columns :auto 100px ;} /* grille de 1 colonne 50px + 1 colonne 100% du reste  1 colonne 50px*/

.div_grille_ligne_fichiers
{
	display : grid;
	margin : auto;
	margin-bottom : 5px;
	padding-top : 5px;
	border  : 0px solid gray;	
	border-radius:10px;
	grid-template-columns :50px auto 50px;/* grille de 1 colonne 50px + 1 colonne 100% du reste  1 colonne 50px*/
	/*background-color:cyan;*/
} 

.div_grille_contrat{grid-template-columns : repeat(7 auto) ; column-gap: 20px; margin-left:20px; margin-right:20px;}
.ligne_contrat_total{grid-column : 1 / span 7;	text-align:left;	font-weight:bold; padding-left:3px;	}

/* --delimitation des zones ---*/
.zone_col1	  		{	grid-column : 1  ;			text-align:center;	font-weight:bold;   	}
.zone_ligne	  		{	grid-column : 1 / span 3 ;	text-align:left;	font-weight:bold; padding-left:3px;	}
.zone_col1et2		{	grid-column : 1 / span 2 ;  text-align:left;	font-weight:bold; padding-left:3px;}
.zone_coldroite	  	{	grid-column : 3; }
.grille_boutons3	,	.grille_boutons4 ,	.grille_boutons5, .grille_boutons6, .grille_boutons7, .grille_boutons8
{	display:grid;   margin : 0 auto; margin-top :3px; margin-bottom:3px; 
	justify-content: center;	
	border : 1px dashed blue; border-radius:10px;
}



/* lignes dans grilles voir journées */
.div_journees 
{	display : block;
    width : 98%;
	padding-top : 5px;
	border  : 1px solid gray;	
	border-radius:10px;
	margin : 10px auto 10px auto;
}
.div_ligne_totaux_semaine
{	
	text-align	: center;
	align-items : center;
	justify-content :center;
	font-weight	: bold;
	background-color: #EEE;	
}
.ligne_journee{text-align:center;	font-weight:bold; 	margin-bottom:5px; }
.ligne_heurestravail{display:grid; grid-template-columns :100px auto; margin-bottom:3px;}
.zone_heures {grid-column: 1 ; text-align:left; font-weight:bold;   color:blue; padding-left: 3px;}
.zone_travail{grid-column: 2 ; text-align:left; font-weight:normal; color:black;padding-left: 5px;}
.grille_totauxjournees
{	
	display:grid;
	grid-template-columns : repeat(8, 11%);	
	width:100%; 
	margin:auto; 
	text-align:center;	
	margin : 0 auto;
	justify-content: center;
	font-weight : bold;
}

 .div_boutons	, .div_grille_notice .div_boutons, .div_journees .div_boutons
{   width:50px;    text-align:center; padding-top:10px; }

.div_diapo_seul	/* affichage image */
{ 
  text-align : center;
  width : 95%;  
}

figure
{
	border-radius : 8px;
	border : 3px solid black;
}

figcaption
{
	background-color : black;
	color: white;
	font-weight : bold;
	font-size : 22px;
	margin : 5px;
	padding : 3px;
}


table
{ margin: 10px 0 5px 0;
  border-collapse : collapse;
  }

tr th, table tr td
{ background: #FFF;
  color: #000;
  padding: 7px 4px;
 }
  
table tr td
{ background: #FFF;
  color: #47433F;
  border-top: 1px solid #FFF;
}

meslist
{color:#FF0000; 
 font-size: 90%; 
}

encours
{color:#FF0000; 
 font-size: 90%; 
 text-decoration : underline;
}

test /*  verification developpeur */
{color:#FF33FF; 
}

err  /*  style d'ecriture pour les erreurs et les refus */
{color:#FF0055; 
}

yo /*  style d'ecriture pour les réussites */
{color:#339900; 
} 

info /*  style d'ecriture pour les informations */
{color:BLUE; 
}

yo,info,err{
 text-transform :uppercase;
}

nongras{font-weight:normal;}

liste{ color :BLACK;}
liste2{ color :#777777;}

piecesoui{color:#18C412;}
piecesnon{color:#FF143C;}

bleu	{color:blue;}
violet	{color:#FF00FA;}
vert	{color:#339900;}
rouge	{color:#FF0055;	}
orange	{color:#FFA500;	}

bleuuser	{color:blue;}
vertuser	{color:#B8EE20;}
rougeuser	{color:#FF0055;	}
orangeuser	{color:#FFA500;	}

vertlogotitre {color:#B8BD20;}

attention	{color:#FF0055; font-size:12px;}

a[href^='tel'] 
{	color : #f5005a;
}

/* A supprimer plus tard */

.fichierhref
{		
	font-weight :normal;
	text-align  :left;
}

.gauchegras
{
	text-align: left;
	font-weight :bold;
	font-size:18px;
}

.gauchelistuser
{
	text-align: left;
	font-weight :normal;
	font-size : 18px;
}


.textlistefichier
{
	text-align: left;
	font-weight :normal;
	font-size:12px;
}

.prog_multitech
{ 
  font-size: 12px;
 }

avec_hrdv_multi
{ 
  color: #000000;
}

sans_hrdv_multi
{ 
  color: #AAAAAA;
}

rdv_multi
{ 
  color: BLUE;
}

soustitre{ 
  padding: 7px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  font-weight: bold;
  color: red;
  text-align:center;
  display : block;
  text-decoration : underline;
}

confirmsup
{ 
  font-size: 20px;
  padding: 7px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  font-weight: bold;
  color: #FF2220;
  text-align:center;
  display : block;
}

 
.tablelistefic
{
  margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 95%;
  table-layout:fixed;
 }
 
.tableliste
{ margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 98%;
  table-layout:fixed;
  border:0;
 }
 
.tablelisteclient
{ margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 75%;
  table-layout:fixed;
  border:0;

 }
 
.tableficsup
{ font : 40px 'tahoma';
  margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 70%;
  table-layout:fixed;
  border:0;
 }
 
.tablelistezone
{ margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 450px;
  table-layout:fixed;
  border:0;
 }

.tablefielddetailsclient
{ margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 600px;
  table-layout:fixed;
  border:0;
 }

.tablemail
{ font : 16px 'tahoma';
  border-collapse : collapse;
  width: 45%;
  table-layout:fixed;
  border:0;
 } 

.tablemesnotes
{ margin: 10px 0 30px 0;
  border-collapse : collapse;
  width: 55%;
  table-layout:fixed;
  border:0;
 }

.tabledetailschantier
{ font : 9px 'tahoma';
  margin: 0 auto; 
  padding : 1px auto;  
  border-collapse : collapse;
  width: 98%;  
  border:0;
 }
 
 
.thdetailschantiermontant
{text-align:left;
 width : 50px;
}	
 
.thdate
{text-align:left;
 width : 150px;
} 

 
.thpanne
{
	width	:80%;
}

.butimg
{
	background : transparent;
	color : transparent;
	width	:22px;
	height	:22px;
}


.colbutimg
{
	width	:30px;
	text-align : center;
}

.butnotice
{
	width	:85px;
}

.colbutnotice
{
	width	:90px;
	text-align : center;
}

.colbutdate
{
	text-align : left;
	text-decoration : underline;
	color: #B8DD20;
}

.lienfichier{
	font-size	:16px;
	font-weight :normal;
	text-align  :left;
}



/* planning multitech intervenant Journalier*/

.div_principale_planning{	
	display:flex;
	align-content:center;
	padding : 0px;
	margin : 0px;
	font-size : 10px;
}

.div_colonne_intervenant{
	width:100%;
	border:1px solid black;	font-size : 10px;
}


.div_nom_intervenant, .div_rdv_hfixe, .div_rdv_hlibre, .div_juste_affecte{
	width:100%;
	border-bottom : 1px solid black;font-size : 10px;
}

/* sous titres dans les programmes */
.sous_titre_calendrier_avec_hrdv , .sous_titre_calendrier_sans_hrdv , .sous_titre_calendrier_juste_affecte {
	width : 98%;	
	text-align : center;
	border-radius : 3px;
}

.sous_titre_calendrier_avec_hrdv	{	background-color : #FF5757;		}
.sous_titre_calendrier_sans_hrdv	{	background-color : #FEBD7F;		}
.sous_titre_calendrier_juste_affecte{	background-color : #BCFFB9;		}

/*Planning calendrier*/

.div_calendrier{
	display : grid;	
	grid-template-columns : repeat(100,1fr);
	/*background-color:red;*/
	margin : 3px auto; 
	border : 2px solid black;
	width  :98%;
	
}

.div_calendrier_titre{
	display			: block;
	background-color: yellow;
	font-size		: 125%;
	font-weight		: bold;
}


.div_calendrier_bloc_semaines{	
	grid-column		 	: 1/span 85;		
	border				: 0px solid black;	
	max-height			: 1500px;
	overflow			: scroll;
}

.div_calendrier_bloc_taches{
	grid-column 		: 86/span 15;
	background-color	: white;	
	border-left			: 2px solid black;
	text-align			: center;	
	max-height			: 1500px;
	overflow			: auto;
}

.div_calendrier_ligne_semaine{	
	display : flex;
	justify-content : space-between;
	background-color:orange;
}


.div_calendrier_colonne_jour, .div_calendrier_colonne_H{
	background-color: grey;
	margin-top 		: 2px;
	margin-bottom 	: 3px;
	margin-left 	: 2px;
	margin-right 	: 2px;
	display : block;
	width : 95%;
}
.div_calendrier_colonne_H{
	width 		: 40px;
	text-align	: center;
}

.div_calendrier_cellule_heure, .div_calendrier_cellule_heure_over{		
	display			: flex;
	flex-direction	: column; 
	flex-flow 		: row wrap;
	margin 			: 0px auto;	
	min-height		: 30px;
	background-color: white;
	border-top		: 1px solid orange;
	border-bottom	: 1px solid orange;
	overflow 		: auto;	
}

.div_calendrier_cellule_heure_over{
	background-color : cyan;
}


.cellule_impaire{
	background-color : rgb(220,220,220);
}

.cellule_heures{
	background-color : yellow;
}

.div_calendrier_cellule_action{
	display : block;	
	width	: 95%;
	border	: 1px dashed grey  ;
	border-radius : 3px;		
	margin : 3px auto;
	margin-bottom: 6px;
	font-size: 90%;
}

.div_calendrier_titre_action{
	display : block;	
	border	: 1px solid black  ;
	margin : 3px auto;
	font-size: 100%;
	background-color : cyan;
}


.cellule_action_courte{
	background-color:#fce5e3;
}
.cellule_action_periodique{
	background-color:#bbfad2;
}
.cellule_action_longue{
	background-color:#bebfed;
}
.cellule_ligne_icones{
	background-color:white;
}

.block_gris{background:lightgray;}


/* Div calendrier statuts */

/*conteneur flex principal*/
.calendar_status_container{
	display:flex;
	margin : 0px 3% 0px 3%;
	font-size : 1.5rem;
}


/* ---- grille ligne status utilisateur ---*/
.div_grille_ligne_status_user{
	display : grid;	
	grid-template-columns: 2fr 2fr 3fr 3fr 1fr 1fr 1fr; 
	width : 70%;	
	margin : 0 auto; 		 
	margin-bottom:10px;
	border:1px dashed;
	border-radius : 3px;
	text-align:left;	
	font-weight:bold; 
	padding-left:3px;
}

/* une grille LEGENDE d'une ligne de 10 elements alternant 1 couleur/1 definition*/
.calendar_legend_grid{
	display : grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 2px;
	width : 98%;
	background-color : white;
	border : 1px solid RED;
	border-radius : 3px;
}


/* une grille d'une ligne de 36 elements (5 pour la première colonne puis 31 jours)*/
.calendar_line_grid{
	display : grid;
	grid-template-columns: repeat(32, 1fr);
	grid-gap: 0px;
	width : 98%;
	background-color : white;
	border-top : 2px solid black;
	border-radius : 3px;
	padding-top : 2px;
	padding-bottom : 0px;
	margin-top : 0px;
	margin-bottom:0px;	
}


/*cellule de 5 fractions au debut pour le nom des utilisateurs*/
.calendar_cell_legend_title_month , .calendar_cell_legend_title_week, .calendar_cell_legend_title_day,
.calendar_cell_legend_title_name_user{
	width : 150px;
	background-color : #C7C7C7;
}

/*cellule d'1 fraction de ligne pour la legende */
.calendar_cell_legend_title_legende	{	background-color : WHITE;}


.calendar_cell_title_name_user{	font-weight		 : bold;}

/*cellule de 31 fractions à partir due la 6eme pour le titre */
.calendar_cell_month_title {
	grid-column-start		: 2 ;
	grid-column-end 		: span 31;
	grid-row				: 1;
	background-color 		: blue;
	text-align				: center;
	text-transform			: capitalize;
	color					: white;
	font-size				: large;
}


/*formulaire pour les cellules de calendrier contenant les boutons */
.form_cell_calendar{
	display : block;
	margin : 0 auto;	
	text-align:center;	
}


/*cellule d'1 fraction de ligne pour 1 legende*/
.calendar_cell_legend_legende , .calendar_cell_legend_conges , .calendar_cell_legend_maladie , 
.calendar_cell_legend_accident, .calendar_cell_legend_rtt	 , .calendar_cell_legend_absent,  .calendar_cell_legend_formation ,
.calendar_cell_legend_miniabsence {
	text-align:center;
}




/*cellule d'1 fraction de ligne pour le semaine*/
.calendar_cell_week	,.calendar_cell_sunday  ,.calendar_cell_conges , .calendar_cell_numweek, .calendar_cell_férié, .calendar_cell_accident,
.calendar_cell_rtt	,.calendar_cell_maladie	,.calendar_cell_absent , .calendar_cell_day	   , .calendar_cell_formation,
.calendar_cell_miniabsence 	{
	text-align : CENTER;	
	background : transparent;
	display : block;
	text-align:center;
	margin-top : 1px;
	margin-bottom : 5px;
}


/*cellule d'1 fraction de ligne pour 1 case semaine*/
.calendar_cell_week		{	background-color : white; }

/*cellule d'1 fraction de ligne pour le numero de semaine*/
.calendar_cell_numweek	{	background-color : yellow;}
	
/*cellule d'1 fraction de ligne pour le jour*/
.calendar_cell_day		{			}

/*cellule d'1 fraction de ligne pour le dimanche*/
.calendar_cell_sunday	{	background-color : grey;}

/*cellule d'1 fraction de ligne pour 1 férié*/
.calendar_cell_férié	{	background-color : #292828; color : white;}

/*cellule d'1 fraction de ligne pour le conges*/
.calendar_cell_conges,  .calendar_cell_legend_conges	{	background-color : #D1FF95;}

/*cellule d'1 fraction de ligne pour le rtt*/
.calendar_cell_rtt,		.calendar_cell_legend_rtt	    {	background-color : #FEFF85;}

/*cellule d'1 fraction de ligne pour le accident*/
.calendar_cell_accident, .calendar_cell_legend_accident {	background-color : #CAC4ED; }

/*cellule d'1 fraction de ligne pour la maladie*/
.calendar_cell_maladie	, .calendar_cell_legend_maladie {	background-color : #FFABDA;}

/*cellule d'1 fraction de ligne pour autre*/
.calendar_cell_absent	, .calendar_cell_legend_absent  {	background-color : #FFC791;}

/*cellule d'1 fraction de ligne pour formation*/
.calendar_cell_formation, .calendar_cell_legend_formation{	background-color : #ABFFFC;}

/*cellule d'1 fraction de ligne pour miniabsence*/
.calendar_cell_formation, .calendar_cell_legend_miniabsence{	background-color : #ffffff;}



/*cellule d'1 fraction de ligne pour repetition*/
.calendar_cell_repetition{	color:red; font-weight:bold;}
/*cellule d'1 fraction de ligne pour unique*/
.calendar_cell_unique	 {	color:black; }

/*text barrée si statut non validé*/
.calendar_cell_non_validé {text-decoration: blue wavy underline overline; }


/*boutons calendrier */
.calendar_button_day , .calendar_button_sunday	, .calendar_button_conges , .calendar_button_rtt , .calendar_button_accident,
.calendar_button_maladie , .calendar_button_absent , .calendar_button_formation, .calendar_button_miniabsence,
.calendar_button_férié
{
	width 	: 95%;
	height	: 90%;
	border  : 0px;
	margin  : 1px auto;
  }


	
/*bouton d'1 fraction de ligne pour le jour*/
.calendar_button_day		{	background-color : white;}

/*bouton d'1 fraction de ligne pour le dimanche*/
.calendar_button_sunday		{	background-color : grey;}

/*bouton d'1 fraction de ligne pour le dimanche*/
.calendar_button_férié		{	background-color : #292828 ; color:white;}

/*bouton d'1 fraction de ligne pour le dimanche*/
.calendar_button_conges		{	background-color : #D1FF95;}

/*bouton d'1 fraction de ligne pour le rtt*/
.calendar_button_rtt		{	background-color : #FEFF85;}

/*bouton d'1 fraction de ligne pour le accident*/
.calendar_button_accident	{	background-color : #CAC4ED; }

/*bouton d'1 fraction de ligne pour la maladie*/
.calendar_button_maladie	{	background-color : #FFABDA;}

/*bouton d'1 fraction de ligne pour autre*/
.calendar_button_absent		{	background-color : #FFC791;}

/*bouton d'1 fraction de ligne pour formation*/
.calendar_button_formation	{	background-color : #ABFFFC;}

/*bouton d'1 fraction de ligne pour miniabsence*/
.calendar_button_miniabsence	{	background-color : #ffffff;}




/*--------- Grille affichage colonnes HORSFLUX   ------- */
.div_grille_fenetre_hors_flux  /* grille x colonnes pour affichage des horsflux */
{
	display 				: grid;
	width 					: 100%;	
	border					: none;
	margin-bottom			: 2px;
	grid-template-columns 	: 1fr 11fr 1fr;
}

.div_grille_hors_flux  /* grille x colonnes pour affichage des horsflux template non précisée*/
{
	display : grid;
	width 	: 99%;	
	border	: 1px solid blue;
	border-radius : 3px;
	align 	: center;
	margin-bottom	: 5px;
	grid-template-columns:repeat(5, 1fr);
}

.div_colonne_titre_typebon, .div_colonne_action_typebon
{
	text-align	: center;	
	font-weight : bold;	
	width 		: 100%;	
	border 		: 2px solid blue;	 
}

.div_colonne_titre_typebon{
	font-size	: 1.2rem;
	background-color : lightgray;
}

.div_zone_action_horsflux
{
	text-align		: center;		 
	width			: 90%;
	border 			: 1px dashed red;	 
	border-radius 	: 3px;
	margin			: 2px auto;
	margin-bottom	: 7px;
	margin-top		: 3px;
}

.grille_boutons6_horsflux
{
	display:grid;   
	margin : 0 auto; 
	margin-top :3px; 
	margin-bottom:3px; 
	justify-content: center;	
	border : 1px dashed blue; 
	border-radius:10px;
	width:200px;  
	grid-template-columns : repeat(6, 33px);
	text-align: center;
}

.butimg_horsflux
{
	background : transparent;
	color : transparent;
	width	:18px;
	height	:20px;
	margin	:0px;	
}

.butimg_nav_horsflux
{
	background : transparent;
	color : transparent;
	width	:45px;
	height	:200px;
	margin	:0px;	
}

.div_boutons6_horsflux	 
{   
	width:20px;    
	text-align:center; 
	padding-top:3px; 
}

.class_nav_page_horsflux
{
	align-content : center;
}



/* ---------  SAISIE VOCALE   ---------- */
#div_saisie_vocale {
	position: fixed;
	
	top: 100px;
	left: 100px;
	width: 300px;
	height: 150px;
	background: #f8f9fa;
	border: 2px solid #333;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 9999;
	border-radius: 12px;
	padding: 10px;
	font-family: sans-serif;
    }
	
#drag-header {
	background: #333;
	color: #fff;
	padding: 8px;
	cursor: move;
	border-radius: 8px 8px 0 0;
	user-select: none;
}
	

/* Bouton qui ressemble a du text 	comme 'VOIR LES DETAILS' */
.class-button-text {
    padding: 0px 2px;
    border: none;
    background: transparent;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
	color : red;
	text-decoration : underline;
	text-align : left;
}
.class-button-text:hover {
    border-color: #888;
}
/* Titre de jour "inline" : réservé au smartphone, masqué sur PC (la ligne de titres alignés suffit) */
.titre_jour_mobile { display:none; }