@charset "utf-8";
/* CSS Document */
/************************** CSS RESET **************************************************/
/*-----------------------                -----------------------------------------------*/

		/* Before */
/*div,h1,h2,h3,h4,h5,h6,p,pre,address,blockquote,span,ul,ol,li,dl,dd,dt,img {
	padding:0;
	margin:0;
}
*/

		/* Now */
		
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/* font: inherit; */   /* disabled cause font don't react on css no more  */
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


body {
	background-color: #fff;
	font-family: "Helvetica", Sans-Serif;
	font-size: 100%; 
}

body #wrapper {

	}
body #wrapper #header {
padding: 10px 10px 10px 50px

	}

body #wrapper #header_nav {
background-color: #3463A4; 
color: #FFF;	
/*  position: fixed;
  top: 30;*/
  width: 100%;
  display: block;
/*  transition: top 0.3s;*/

	}
body #wrapper #header_nav a {
  color: #FFF; 
 /* float: left;*/
  display: block;
/*  text-align: center;
  padding: 15px;*/
  padding: 2px;	
  text-decoration: none;
  font-size: 17px;

}
body #wrapper #header_nav a:hover {
 /* background-color: #384C79;*/
	 text-decoration: underline;
}
body #wrapper #header_nav #navdropdown a:hover {
  background-color: #3463A4;
}
body #wrapper #content {
min-height: 350px; /*Èvite au footer de flotter dans le vide si trop peu de contenu dans div content */
margin: 0 10px 60px 10px;
padding: 10px	
}
body #wrapper #footer {
	margin: 50px 0 0 0;
	clear: both;
	background-color: #F8F8F8; 
	padding: 50px 10px 50px 10px;
	/*padding-bottom:  100%; margin-bottom:0;*/
	}
a{text-decoration: underline;}
a:hover{text-decoration: none;}

h1{font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  display: block;
  font-size: 2em;
  margin: 0.67em 0;
}
h2{font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  display: block;
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3{font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  display: block;
  font-size: 1.25em; /*1.17em;*/
  margin: 1em 0;
	}
h4{
  display: block;
  font-size: 1em;
  margin: 10px 0; /*1.33em 0;*/
	}
h5 {
  display: block;
  font-size: .83em;
  margin: 10px 0; /* margin: 1.67em 0;*/
  font-weight: 500;
}
h6 {
  display: block;
  font-size: .67em;
  margin:10px 0;  /* margin: 2.33em 0;*/
  font-weight: 500;
}
p{  margin: 10px 0;}
.border_b{border-bottom: 1px solid #BAC0EA;}

select{
/*min-width:120px; max-width:200px;*/
height:25px;
}
.select{
width: 100%; height: 33px; font-size: 16px;
}
input[type=text]{
	height:30px; border:1px solid #999;
		width:100%; font-size: 16px;
	 padding-left:5px; text-align:center;
	}
input[type=password]{
	height:30px; border:1px solid #999;
		width:100%; font-size: 16px;
	 padding-left:5px; text-align:center;
	}
input[type=email]{
	height:30px; border:1px solid #999;
		width:100%; font-size: 16px;
	 padding-left:5px; text-align:center;
	}
textarea{
	padding: 5px;
	font-size:17px; /* 14px*/
	width:100%;
	height:50px;
	color: #272727;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	}

.submit{
font-size:14px;
	color:#FFF;	
	background-color:#398CE4;
	/*background-image:url(../img-structure/bg_button2.png);*/
	border:1px inset #333;
	/*font-weight:bold;*/
	text-decoration:none;
	cursor:pointer;
	border-radius: 30px; /* 5px*/
		padding:5px;
		width:200px;
	margin: 20px 0 10px 0;
}

.submit_rect{
font-size:18px;
	color:#FFF;	
	background-color:#398CE4;
	/*background-image:url(../img-structure/bg_button2.png);*/
	border:1px inset #333;
	/*font-weight:bold;*/
	text-decoration:none;
	cursor:pointer;
	width: 100%; 
	padding: 12px 5px;
	margin: 20px 0 10px 0;
}


.radio_label  {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}



.labelstyle{
 display:inline-block;
    margin:-2px;
    padding: 2px 12px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 20px;
    color: #B12C29;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #A7E4F9; /*****/
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#82BFBF); /****** gradient*****/
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);	
	}


.labelstyle_b{
 display:inline-block;
    margin:-2px;
    padding: 1px 12px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #A7E4F9; /*****/
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#EEF7F9); /****** gradient*****/
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);	
	}

.labelstyle_c{
 display:inline-block;
    margin:-2px;
    padding: 1px 5px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #A7E4F9; /*****/
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#EEF7F9); /****** gradient*****/
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);	
	}
	
.labelstyle_d{
 display:inline-block;
    margin:-2px;
    padding: 1px 5px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #A7E4F9; /*****/
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#C9CED6); /****** gradient*****/
    background-repeat: repeat-x;
    border: 2px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
	border-radius: 5px;
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: /*progid:*/DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);	
	}


	/*------- START infobox CSS only based Tooltip
*/
.tooltip {
  position: relative;
 /* display: inline-block;*/ /*If you want divs aligned in TD mode */
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px ;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-left: 5px;

}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/*------- END infobox CSS only based */

.white{color: white}
.pl05	{
	padding-left:.5em;
	}
 .msgdis{background-color:#00FF2A; margin:10px 2px 5px 2px;  padding:5px 5px .5em 5px; font-size:17px; font-weight:100; border-radius:5px;width:70%;}
 .errdis{background-color:#FF0A0A; margin:10px 2px 5px 2px;  padding:5px 5px .5em 5px; font-size:17px; color:#fff;}
 .warndis{background-color:#FFD400; margin:10px 2px 5px 2px;  padding:5px 0; font-size:17px; }	
.input_inactive_2{
	background-color:#E4E4E4;
	}
.linkblue2{color:#0E5A88;}
.he0{
	font-size:18px;
}
.he1{
	font-size:20px;
}
.he1b{
	font-size:21px;
}

.he2{
	font-size:25px;
}
.he3{
	font-size:30px;
}


.sm1{
	font-size:8px;
}
.sm2{
	font-size:9px;
}
.sm3{
	font-size:10px;
}
.sm3g{
	font-size:10px; color:#666;
}
.sm4{
	font-size:11px;
}
.sm4g{
	font-size:11px; color:#666;
}

.sm5{
	font-size:11.5px;
}
.sm5g{
	font-size:11.5px; color:#666;
}
.sm6{
	font-size:12px;
}
.sm7{
	font-size:13px;
}
.p0{
	font-size:13.5px;
}

.p1{
	font-size:14px;
}
.p2{
	font-size:15px;
}
.p3{
	font-size:17px;
}
.p4{
	font-size:18px;
}
.p16{
	font-size:16px;
}


.pl05	{
	padding-left:.5em;
	}

.pl1{padding-left:0.5em;}
.pl2{padding-left:1em;}
.pl3{padding-left:1.5em;}
.pl4{padding-left:2em;}
.pl5{padding-left:2.5em;}
.pl6{padding-left:3em;}

.pr05	{
	padding-right:.5em;
	}
.pr1{padding-right:0.5em;}
.pr2{padding-right:1em;}

.pu{
	margin-top:0.5em;
}

.pu1{
	margin-top:5px;
	}
.pu2{
	margin-top:15px;
	}
.pu3{
	margin-top:25px;
	}
.pu4{
	margin-top:35px;
	}
.mt1{
	margin-top:10px;
	}
.mt2{
	margin-top:15px;
	}	
.mt3{
	margin-top:20px;
	}	
.mb1{margin-bottom:5px;}	
.mb2{margin-bottom:10px;}	
.mb3{margin-bottom:15px;}	
.mb4{margin-bottom:20px;}	
.cust_grey{
	color:#666;
	}
.cust_grey_b{
	color:#CACACA;
	}
	.cust_grey_c{
	color:#888888;
	}
.cust_grey_bg{
	background-color:#E3E3E3;
	}
.mw320{max-width:320px;}		
.mw400{max-width:400px;}		
.mw600{max-width:600px;}		
.mw600s{max-width:600px; height:400px; overflow-y:auto;}	
.mw700{max-width:700px;}
.td1{ border:1px solid #CCC; border-radius:5px; 
background-color:#FBFCFF; vertical-align: middle;
padding:5px 2px 5px 5px;
}
.td2r{ border:1px solid #CCC; border-radius:5px; 
padding:10px 5px; vertical-align: middle;
}
.warning{
	background-color:#CB8414;	
	color:#FFF;
}
.warning_soft{
color:#B74273
    }
.warning_2{
color:#EF5711;
}
.warning3{
background-color:#FCECE4;
}
.warning4{
background-color:#FFF7F3;
}

.attention{
	color:#E57F02;
}
.attention_2{background-color:#F7ECF7;}

.hide{
display:none;	
	}
.selectable{
	cursor:pointer;
	}
.unselectable_2{
	pointer-events: none;
	filter: brightness(35%);
	}
.unselectable { /*Will make the text unselectable where you apply it*/
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
.men_bgd_thin{
	 background-image:url(../img-structure/menus_bcg_c2.jpg); 
	  /*background-repeat:no-repeat;*/
	   background-repeat:repeat-x;
	/* padding:50px 0 4px 920px;
	 margin-bottom:0.2em; */
	 padding-top:10px;
	 }	
.men_bgd{
	 background-image:url(../img-structure/menus_bcg_c2.jpg); 
	  background-repeat:repeat-x;
	/* padding:50px 0 4px 920px;
	 margin-bottom:0.2em; */
	 padding-top:15px;
	 }
.input_inactive{ /*Rember to set other height value to the submit*/
	background-color:#EFEFEF;
	/*color:#696969;*/
/*border:none;*/
border:1px solid #616363;    
}
.input_inactive_2{ /*Rember to set other height value to the submit*/
	background-color:#E4E4E4;
	}
.disabled{background-color:#EFEFEF;}					
.blue_link{
	color:#5D9AC7; /*Blue like link*/ 
	}
.blue_link_2{
	color:#0B0BD6; /*Blue like link*/ 
	}
.blue_link_2:hover { color:#8A95F6;}
.blue_link_3{color:#2A4692;}		


.ff_grid{
display: grid;
	grid-template-columns: 1fr ; /*Or use 25% 25%*/
	grid-gap: 0px; /*Horiz & vertical Spaces between divs*/

}


/*================================= MAX ===============================================*/
/*====================================================================================*/


@media only  screen and (max-width: 990px)  { 

body #wrapper #header_nav #navbar { display: none; }
	}


/*================================== MIN ================================================*/
/*====================================================================================*/
@media only screen and (min-width: 500px)  { /*Apply to: 736px + */

.ff_grid{
display: grid;
	grid-template-columns: 200px 200px ; /*Or use 25% 25%*/
	grid-gap: 25px; /*Horiz & vertical Spaces between divs*/

}
	 }

