html
	{
	font-family: sans-serif;
	width : 100%;
	height : 100%;
	background : #0e5328;
	margin : 0px;
	padding : 0px;
	border : none;
	}

body
	{
	background : #d3d900;
	text-align : center;
	position : relative;
	width : 100%;
	max-width : 2000px;
	min-width : 900px;
	margin : 0px;
	padding : 0px;
	border : none;
	}	
	
#bandeau_user
	{
	text-align : right;
	padding-right : 20px;
	font-size : 0.75em;
	color : #d3d900;
	background : #0e5328;
	}
#menu_haut_droit 
	{
	z-index : 1000;
	position : fixed;
	top : 15px;
	right : 0px;
	padding : 0px;
	}
#menu_haut_droit a:link
	{
	width : 80px;
	height : 80px;
	}
	
#menu_haut_droit img
	{
	max-width : 90%;
	max-height : 50px;
	}
	
#top
	{
	text-align : center;
	height : 110px;
	}
	
h1
	{
	font-style : italic;
	margin : 5px;
	padding : 0px;
	}
h2
	{
	margin : 2px;
	padding : 2px;
	}
		
.info, .erreur, .infobulle
	{
	padding : 10px;
	text-align : center;
	border-radius: 3px;
	background : #b3c300;
	color : #fff;
	}
	
.infobulle
	{
	position : fixed;
	top : 10%;
	left : 10%;
	width : 80%;
	min-height : 300px;
	z-index : 10000;
	background : #FFFFFF;
	color : #000000;
	vertical-align : middle;
	line-height : 300px;
	}
.infobulle div
	{
	font-size : 1.2em;
	font-weight : bold;
	display : inline-block;
	vertical-align : middle;
	line-height : 1em;
	}
.infobulle img
	{
	margin-right : 10px;
	display : inline-block;
	vertical-align : middle;
	line-height : 150px;
	height : 150px;
	}
	
.erreur
	{
		margin: 1px 0 1px 0;
		border: 2px solid #990000;
		background : #b22222;
	}
.console
	{
	padding-left : 5px;
	}
	
	
img
	{
	border : none;
	}
	
a:link, a:visited
	{
	text-decoration : none;
	color : inherit;
	}
a:hover
	{
	color : #d3d900;
	}
	
#contenu
	{
	position : relative;
	text-align : center;
	margin : 5px;
	padding-bottom : 0px;
	margin-bottom : 0px;
	}
	
#attente, #zoom
	{
	display : none;
	position : fixed;
	width : 100%;
	height : 100%;
	top : 0px;
	left : 0px;
	background : rgba(255, 255, 255, 0.85);
	}
	
#chargement
	{
	background : #808080;
	color : #FFFFFF;
	position : relative;
	display : inline-block;
	width : 600px;
	height : 40px;
	line-height : 40px;
	vertical-align : middle;
	-moz-border-radius: 10px 10px 10px 10px; 
	  -webkit-border-radius: 10px 10px 10px 10px;
	  -0-border-radius: 10px 10px 10px 10px; 
	  border-radius: 10px 10px 10px 10px;	border : 1px solid #000000;
	overflow : hidden;
	}
#chargement_barre
	{
	display : inline-block;
	height : 40px;
	position : absolute;
	top : 0px;
	left : 0px;
	background : rgba(128, 194, 255, 0.35);
	}
	
#attente
	{z-index : 10000;}
	
#zoom
	{
	line-height : 100%;
	vertical-align : middle;
	z-index : 1001;
	}
	
#imgzoom
	{
	max-width : 100%;
	max-height : 100%;
	}
	
#rotation
	{
	position : inherit;
	width : 30px;
	bottom : 10px;
	right : 30px;	
	}

	
.btn, .btn_lien, .pt_btn
	{
	text-align : center;
	font-size : 0.85em;
	text-align : center;
	position : relative;
	display : inline-block;
	vertical-align : top;
	margin : 1px;
	}

.btn img
	{
	line-height : 75px;
	vertical-align : middle;
	width : 75px;
	}
	
.btn:not(.applyBtn .cancelBtn)
	{
	vertical-align : middle;
	line-height : 75px;
	}
	
.pt_btn img
	{
	line-height : 45px;
	vertical-align : middle;
	width : 45px;
	}

.cadre
	{
	background : rgba(255, 255, 255, 0.75);
	vertical-align : top;
	margin : 15px;
	padding : 20px;
	text-align : center;
	/*border : 1px solid #000000;*/
	border-radius: 3px;
	display : inline-block;
	min-width : 250px;
	max-height : 500px;
	position : relative;
	}	

.cadre h3
	{
	background : #ffffff;
	position : absolute;
	letter-spacing : -1px;
	top : -2em;
	left : 15px;
	display : inline;
	padding : 5px;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	margin : 20px;
	}
	
.cadre div.defilant
	{
	text-align : left;
	max-height : 500px;
	position : relative;
	overflow: auto;
	}

.cadre_selection
	{
	background : rgba(255, 255, 255, 0.75);
	vertical-align : top;
	margin : 15px;
	padding : 20px;
	text-align : center;
	/*border : 1px solid #000000;*/
	border-radius: 3px;
	display : inline-block;
	min-width : 250px;
	max-height : 500px;
	position : relative;
	}	

.cadre_selection h3
	{
	background : #ffffff;
	position : absolute;
	letter-spacing : -1px;
	top : -2em;
	left : 15px;
	display : inline;
	padding : 5px;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	margin : 20px;
	}
	
.cadre_selection div.defilant_selection
	{
	text-align : left;
	max-height : 500px;
	position : relative;
	z-index: 999;
	}
	
	
.cache
	{
	display : none;
	}
	

.grise
	{
	opacity : 0.30;
	background : #DDDDDD;
	color : #000000;
	}
	
.zoom
	{
	margin : 0px;
	background : #FFFFFF;
	position : fixed;
	width : 85%;
	left : 5%;
	height : 80%;
	top : 7.5%;
	font-size : 1.5em;
	z-index : 1000;
	}
.zoom h3
	{
	top : -1.5em;
	left : 2em;
	}
	
.btn_loupe, .btn_retour 
	{
	width : 50px;
	position : absolute;
	left : -15px;	
	}
.btn_loupe
	{top : -25px;}
.btn_retour
	{
	top : 30px;
	cursor : pointer;
	}	
	
.btn_lien img
	{
    -webkit-transition: -webkit-transform 0.2s ease-in-out;/* Utilisé pour la transition sur chrome et safari */
    -moz-transition: -moz-transform 0.2s ease-in-out;/* Utilisé pour la transition sur Firefox */
    transition: transform 0.2s ease-in-out;
	}
	
.btn_lien
	{
	display: inline-block;
	padding: 12px 5px 0 5px;
	background-color: #acb5bf;
	font-weight: 600;
	border-color: #97a0ab;
	border-style: solid;
	border-width: 1px 1px 3px 1px;
	border-radius: 3px;
	text-decoration: none;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
	height: 80px;
    width: 80px;
	}
.pt_btn:hover, .fa-times:hover
	{
	color : red;
	}
.btn_lien:link, .btn_lien:visited
	{
	color : #000000;
	}
.btn_lien:hover
	{
	background: #97a0ab;
	}

.btn_lien .fa,.btn_lien span
	{
	color: #ebeef2;
	}
	
.btn span, .btn_lien span, .pt_btn span
	{
	font-variant : small-caps;
	display : block;
	}
 .btn_lien span, .pt_btn span
	{max-width : 180px;}
	
.zoom .btn_loupe, .cadre:not(.zoom) .btn_retour, .cadre_selection:not(.zoom) .btn_retour
	{
	display : none;
	}
.zoom .btn_retour
	{left : -25px;}
	
.cadre input[type=image]:not(.visible), .cadre_selection input[type=image]:not(.visible)
	{display : none;}
.zoom input[type=image]:not(.visible)
	{
	display : block;
	position : absolute;
	left : -25px;
	top : -25px;
	width : 50px;
	}
	
.manu
	{
	font-family: cursive;
	}
	
.highlight
	{
	border : 3px groove;  
	}
.highlight td
	{
	font-weight : bold;
	}
	
.mini_calendar
	{
	color : #000000;
	display : inline-block;
	position : relative;
	text-align : center;
	font-size : 0.85em;
	}
.mini_calendar img, .mini_calendar input[type=text]
	{ vertical-align : middle; }
.mini_calendar table
	{
	width : auto;
	padding : 10px;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	border : 1px solid #d3d900;
	background : #FFFFFF;
	font-size : 2em;
	}
.mini_calendar table td
	{
	padding : 5px;
	margin : 5px;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	}
.calendar
	{
	z-index : 1000;
	background : rgba(255, 255, 255, 0.95);
	border : 1px solid #0e5328;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	padding : 10px;
	position : fixed;
	top : 25px;
	left : 5%;
	width : 90%;
	height : 80%;
	}

.fa-calendar-o {
	position: relative;
	right: 35px;
	top: 3px;
}
	
.flottehd
	{
	position : absolute;
	top : 0px;
	right : 10px;
	z-index: 1000;
	}
.flottehg
	{
	position : absolute;
	top : -45px;
	left : 10px;
	}
	
.t1
	{ min-width : 50px;	}
	
.t2 /* n° tel */
	{ min-width : 120px; max-width : 120px; }
	
.t3
	{ min-width : 250px; }
	
.t4
	{ min-width : 300px;}
	
.tdate
	{ min-width : 60px;}
	
.alphabet
	{
	width : 20px;
	position : absolute;
	right : -10px;
	top : 5px;
	}
.alphabet a
	{
	font-size : 0.85em;
	display : inline-block;
	text-align : center;
	width : 20px;
	margin : 1px;
	padding : 2px;
	background : #FFFFFF;
	-moz-border-radius: 5px 5px 5px 5px; 
	  -webkit-border-radius: 5px 5px 5px 5px;
	  -0-border-radius: 5px 5px 5px 5px; 
	  border-radius: 5px 5px 5px 5px;	}
	
.icone
	{
	width : 50px;
	}
	
.pasrempli
	{
	border : 5px solid #FF0000 !important;
	}
 
.alerte
	{
	text-align : center;
	border-radius: 3px;
	padding : 20px;
	margin : 0px;
	background : #FFFFFF;
	position : fixed;
	width : 85%;
	left : 5%;
	height : 60%;
	top : 10%;
	font-size : 1.5em;
	z-index : 1000;
	}
.alerte h3	{color : #FF0000;}
.alerte img	{height : 100px;}
.alerte .btn_lien img { height : 75px;}
.alerte div 
	{
	text-align : left;
	vertical-align : middle;
	margin : 5px;
	padding : 10px;
	background : rgba(0, 0, 0, 0.10);
	}
.alerte .btn_lien
	{
	vertical-align : middle;
	min-height: 80px;
	height: auto;
	}
	

.invisible
	{
	display : none;
	}
	

.c
	{ background : #ffffff;	color : black;}
.c1
	{ background : #a9e8e0;	color : black;}
.c2
	{ background : #feff83;	color : black;}
.c3
	{ background : #ff977a;	color : black;}
.c4
	{ background : #f96b01;	color : black;}
.c5
	{ background : #fb0002; color : #FFFFFF;}
.c6
	{ background : #c3fbaa;	color : black;}
.c7
	{ background : #02fc09; color : black;}
.c8
	{ background : #b1cbbb; color : black;}
.c10
	{ background : #0000FF;  color : #FFFFFF;}
.c11
	{ background : #00AA00;  color : #FFFFFF;}
.cgris
	{ background : #CCCCCC;  color : black;}
	
tr.c1, tr.c2, tr.c3, tr.c4, tr.c5, tr.c6, tr.c7, tr.c8, tr.c10, tr.cgris
	{
	padding : 10px;
	}
	
.c1.highlight
	{ border-color : #a9e8e0;	}
.c2.highlight
	{ border-color : #feff83;	}
.c3.highlight
	{ border-color : #ff977a;	}
.c4.highlight
	{ border-color : #f96b01;	}
.c5.highlight
	{ border-color : #fb0002; }
.c6.highlight
	{ border-color : #c3fbaa;	}
.c7.highlight
	{ border-color : #02fc09;}
.c8.highlight
	{ border-color : #b1cbbb; }
.c10.highlight
	{ border-color : #0000FF; }
.c11.highlight
	{ border-color : #0000FF; }
input[type=button]
	{
	min-width : 40px;
	font-size : 1.25em;
	margin : 5px;
	padding : 5px 10px;
	border : 1px solid #000000;
	color : #000000;
	-moz-border-radius: 10px 10px 10px 10px; 
	  -webkit-border-radius: 10px 10px 10px 10px;
	  -0-border-radius: 10px 10px 10px 10px; 
	  border-radius: 10px 10px 10px 10px;	background : #8cd9a5;
	}

select
	{
	font-size : 1.2em;
	line-height : 1.3em;
	}
	
textarea
	{
	font-size : 1.1em;
	}
	
label, [type="checkbox"]
	{position : relative;}
	
[type="checkbox"]:not(:checked):before,  
[type="checkbox"]:checked:before {  
  content: ' ';  
  position: absolute;  
  left:0; top: -5px;  
  width: 20px; height: 20px; /* dim. de la case */  
  border: 1px solid #aaa;  
  background: #f8f8f8;  
  border-radius: 3px; /* angles arrondis */  
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */  
}  
   
/* Aspect général de la coche */  
[type="checkbox"]:not(:checked):after,  
[type="checkbox"]:checked:after {  
  content: '✔';  
  position: absolute;  
  top: -5px; left: 5px;  
  font-size: 20px;  
  color: #09ad7e;  
}  
/* Aspect si "pas cochée" */  
[type="checkbox"]:not(:checked):after {  
  opacity: 0; /* coche invisible */  
  transform: scale(0); /* mise à l'échelle à 0 */  
}  
/* Aspect si "cochée" */  
[type="checkbox"]:checked:after {  
  opacity: 1; /* coche opaque */  
  transform: scale(1); /* mise à l'échelle 1:1 */  
}  

#sortie
	{
	display : none;
	z-index : 10000;
	text-align : center;
	position : fixed;
	top : 10%;
	left : 10%;
	width : 80%;
	height: 80%;
	background : #FFFFFF;
	border : 2px outset #0e5328;
	border-radius: 10px 10px 10px 10px;
	font-size : 1.5em;
	color : #FF0000;
	overflow: auto;
	}

.question
	{
	display : none;
	z-index : 10000;
	text-align : center;
	position : fixed;
	top : 10%;
	left : 10%;
	width : 80%;
	height: 80%;
	background : #FFFFFF;
	border : 1px solid #97a0ab;
	border-radius: 3px;
	font-size : 1.5em;
	overflow: auto;
	}

 #sortie::-webkit-scrollbar-track, .question::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

 #sortie::-webkit-scrollbar, .question::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
    border-radius: 95px 95px 95px 95px;
}

 #sortie::-webkit-scrollbar-thumb, .question::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

.question img
	{
	max-height: 100px;
	max-width: 100px;
	}
	
.reponse
	{
	display : block;
	}
.reponse span
	{
	margin-left : 10px;
	display : inline-block;
	width : 600px;
	text-align : left;
	color : #000000;
	font-size: 75%;
	}
	
.reponse img
	{
	vertical-align : middle;
	max-height : 75px;
	}
	
#sortie .btn_lien
	{
	font-size : 1.2em;
	padding : 10px;
	height: auto;
	}
#sortie .btn_lien img
	{
	max-width : 100px;
	}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
    display: none;
}

#bloc_top
{
    width:100%;
    min-height: 110px;
}

#bloc_top #boutons, #bloc_top #top, #boutons_droite
{
	display: inline-block;
}

#boutons, #titre
	{	
	display : inline-block;
	vertical-align : top;
	}
#boutons
	{
	text-align : center;
	float : left;
	}
	
#boutons a:link, #boutons_droite a:link
	{
	margin : 5px;
	width : 80px;
	height : 80px;
	}
	
#boutons img
	{
	max-width : 90%;
	max-height : 50px;
	}

#save{
	margin-top: 10px;
}

#save .btn_lien{
	margin: 0 50px;
}
	
@media screen and (max-width: 900px)
{

body
	{
	max-width : 900px;
	min-width : 500px;
	}	
	
		
.info, .erreur
	{
	padding : 5px;
	}	
	
#contenu
	{
	margin : 2px;
	}
	
.cadre:not(.zoom)
	{
	margin : 10px;
	padding : 10px;
	padding-top : 20px;
	margin-bottom : 20px;
	display : block;
	}	
	

.zoom input[type=image]:not(.visible)
	{
	left : -40px;
	top : -50px;
	width : 80px;
	}	
	
.btn_lien
	{
	margin : 5px;
	padding : 5px;
	}
	
.mini_calendar table
	{
	padding : 15px;
	font-size : 2em;
	}
	
.alphabet
	{
	width : 30px;
	right : -15px;
	}
.alphabet a
	{
	font-size : 1em;
	width : 30px;
	}

select
	{
	font-size : 2em;
	line-height : 2.1em;
	}
	
label, .zoom label
	{display : block;}
label
	{
	width : auto;
	}
.zoom label
	{
	font-size : 1.5em;
	overflow : hidden;
	} 
}
.form_gauche {
    flex-grow: 1;
    text-align: left;
}

.form_droite {
    width: 50%;
}

div.message_info, div.message_erreur , div.message_succes { border-width:0px 0px 1px 0px; vertical-align:middle; border-style:dotted; border-color:silver; color:black; width:100%; text-align:center; overflow:hidden; left:0pt; top:100%; background-repeat:no-repeat; font-weight:600; background-position:0px center; font-size:13px; vertical-align:middle; min-height:28px; }
div.message_info div, div.message_erreur div, div.message_succes div { margin:4px 8px 4px 48px }
div.message_info { color:#00529B; border-color:#00529B; background-color:#BDE5F8; } /* background-image:url('../images/icons/info.png'); */
div.message_erreur { color:#D8000C!important; border-color:#D8000C!important; background-color:#FFBABA!important; } /* background-image:url('../images/icons/error.png'); */
div.message_succes { color:#1D9D74!important; border-color:#1D9D74!important; background-color:#CFF5E9!important; } /* background-image:url('../images/icons/error.png'); */
div.message_info i.fa, div.message_erreur i.fa, div.message_succes i.fa { font-size:24px; float:left; vertical-align:middle; margin-right:-48px; margin-left:4px }