body {width:100%;font:13px 'Open sans', sans-serif;color:#37353A;font-weight: normal;background:#ffffff ;margin:0px; text-align:justify;}
a {color:#000000; }
div{margin:0;padding:0}
td{height:35px;}
   
#head_index {padding:10px;}
#headermenu{margin-left:auto;margin-right:auto;text-align:center;width:100%; min-height:60px;z-index:100;float:left;background-color:#CFD0D4}
.container-menu {width:100%;margin-left:auto;margin-right:auto;text-align:center;font-family:'Open Sans', sans-serif;font-size:18px ;padding:0%;z-index:50;color:#333; }
.container-menu a{list-style:none;text-decoration:none;margin:0px;display:inline-block;color:#333;}/*color:#1BADE9;*/
.container-menu a:hover{color:#EA4F00;}
.container-menu ul,.container-menu li {list-style:none;margin:0;padding:0;}
.container-menu ul {position: absolute;width:99%; }
.container-menu li {padding: 1% 2% 2% 2%;display:inline-block;}

hr{width:50%; height:3px;background-color: #FFF200;border: none;text-align: left;margin:0 }

.container-menu ul li ul{display:none;margin:0;padding:0;text-align:left;}
.container-menu ul li:hover > ul  {
      display:block;
	  background-color:#CFD0D4;
	  margin-top:6px;
	  max-width:250px;
	  text-align:left;
	  font-size:1em;
      z-index:103;	
}

.container-menu ul li ul > li  {
      display:block;
	  padding: 10px 35px;
}
.openmenuresponsive {
  display: none;
}
.zone_gauche{float:left;padding:0 0.5%}
.t100{width:100%;padding:0%  0% 5px }
.t50{width:50%;padding:0 0%}
.t33{width:33%;padding:0 0%}
.t25{width:25%;padding:0 0%}

/*tableau montant suivi annuel*/
.mt50{width:50%;padding:0 0%}

.zonelecture{background-color: #E7E7E7;color: #707070}
#tabbop {
	float:left;
	width:600px;   
}
#tabbop .tabentete {width: 100%; display: flex;flex-direction: row;background-color: #F71135;color: #FFFFFF; font-size:13px; }
#tabbop .tabentete  div, #tabbop .tabligne div { border-top :1px solid #F71135;flex: auto;width:31%;text-align: center;padding:5px 0;}
#tabbop .tabligne {width: 100%; display: flex;flex-direction: row;font-size:13px;}
#taborie {
	float:left;  
	width:50%;   
}
#taborie .tabentete {width: 100%; display: flex;flex-direction: row;background-color: #F71135;color: #FFFFFF; font-size:13px; }
#taborie .tabentete  div, #taborie .tabligne div { border-top :1px solid #F71135;flex: auto;width:31%;text-align: center;padding:5px 0;}
#taborie .tabligne { width: 100%; display: flex;flex-direction: row;font-size:13px;}

.tderr {background-color: #FB6669;color: #FFFFFF;}
.coulrouge {background-color: #FB6669;color: #FFFFFF;}

.totaux{background-color:#F18E00;color: #FFFFFF;font-weight: bold;text-align:right}
.totauxbop{background-color:#F18E00;color: #FFFFFF;font-weight: bold;}
.montanttxt{text-align: right}
/*bouton scroll*/
#myBtn {
  z-index:1000;	
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  font-size: 20px;
  border: none;
  outline: none;
  background: #ADADAD url(../images/fleche-remonter.png) no-repeat center;
  color: white;
  cursor: pointer;
  padding: 15px 25px;
  border-radius: 0;
  transition: background-color 0.6s ease;
	
} 

#myBtn:hover {
  background-color: #F09962 ;
}

#contenu_page{width: 96%;float:left; padding:2%;text-align: center;}
.pagelogin{width:500px;margin-left:auto;margin-right:auto;text-align: center }
.page{width: 100%;float:left}
.pagemin{width: 100%;max-width:1200px;margin-left:auto;margin-right:auto;text-align:left }
.pageplus{width: 100%;max-width:1800px;margin-left:auto;margin-right:auto;text-align:left }

input[type="date"], input[type="datetime"]{padding:6px; margin:2px 0;font-size: 16px; }
input[type="password"], input[type="tel"],  input[type="text"], input[type="datetime"]{padding:5px; margin:0  ;font-size:16px;width:80%}
.saisie {width:50%}
select{padding:6px; margin:2px 0;font-size: 16px;}
textarea {font-size: 16px;padding:3px;width:100%;height: 200px; }

input[type="radio"]+label{margin-right:20px;}
input[type="radio"]:checked+label{ font-weight: bold;color :#EA4F00;font-size: 20px; } 

input[type="submit"], input[type="button"] {background-color:#F18E00;padding:7px 10px 6px;font-size: 22px;color: #FFFFFF;border: none;margin: 0px 0 6px}
input[type="submit"]:hover, input[type="button"]:hover {background-color:#EA4F00;cursor: pointer}

.textlabel{color: #37353A;font-weight: bold;padding:5px 0 2px;display: block }
.textlabelerreur{background-color:#BC0003;color:#FFFFFF;font-weight: 600;padding:5px 0}
.montant{width: 30%}
.z_centrer{text-align: center}

.compteurs {position:absolute;top:190px;background-color: #C84F51;color: #FFFFFF;width:150px;right:0;padding:5px;}

.Titrepage {text-transform: uppercase;text-align: left;font-size: 1.4em;font-weight: bold;color: #EA4F00}
/*tableau*/
.cadre, .cadresuivi { width:100%;}	
.cadre td, .cadresuivi td {padding:0 5px; margin:0 }
.cadresuivi td {text-align: center;border: 1px solid #E4E4E4; }
.cadresuivi {border-spacing:0px;}


.celluletitre {	background-color:#37353A;color: #FFFFFF;letter-spacing: normal;padding:5px;}
.celluletitre a{color: #FFFFFF;text-decoration: none}
.celluletitre a:hover{text-decoration:underline}

.celluledetail_c2 {background-color: #FFFFFF;color:#333333;padding:5px;}
.celluledetail_c1 {background-color: #CFD0D4;color:#333333;padding:5px;}
.celluledetail_pvv {background-color: #A65556;color:#FFFFFF;padding:5px;}
.celluledetail_pvv a{color:#FFFFFF;}

#tableauprofil{float:left;max-width:900px;width:96%;display:none;border:1px solid #C4C2C2 }
#tableauprofil .tabentete{float:left;background-color: #F71135;color: #FFFFFF;width:100%;}
.tabfermer{width:100%;background-color: #252525;color: #FFFFFF;text-align: right}.tabfermer a{color:#F18E00;font-weight: bolder;padding:0 5px;text-decoration: none}
#tableauprofil .tabentete div {float:left;width:10%;padding:0 0.5% 1%;text-align: center}
#tableauprofil .tabligne{float: left;width:100%;border-top:1px solid #C4C2C2}
#tableauprofil .tabligne div{float: left;width:10%;padding:1% 0.5%;text-align: center;font-size:12px; }
/*recherche*/
.formrech{background-color: #F5F5F5;float: left;padding:1%;width: 98%}
#rech_txt, #mena_nation{width:20%;min-width:300px;margin:2px 0 0 ;}
#rech_bt {margin:2px 3px; }
.bt_lien{display:inline-block;margin:0;padding:12px 0 10px;height: auto}
.bt_lien a{background-color:#F18E00;text-decoration:none;padding:4px 10px 6px;font-size:22px;color: #FFFFFF;border: none;margin:0px 2px 0; display: inline-block}
.bt_lien a:hover{background-color:#EA4F00;cursor: pointer}

/*regroupement*/
#listemenage {float:left;width: 100%; min-height: 400px;height:100%;overflow: auto;flex-wrap: wrap;margin:0;
-webkit-flex-wrap: wrap;
-webkit-justify-items: center; 	
flex-direction: row;
-webkit-flex-direction:row;	
display: flex;
display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
align-items: stretch;	
-webkit-align-items:stretch; }
#listemenage li {width:24%;margin:0 0.5%;list-style: none } 
#listemenage .menasel {background-color:#5CAB30;color: #FFFFFF}


#liste_regroupement, #liste_regroupement li{list-style: none;}
#liste_regroupement{border:1px solid #707070}
.liste_mr{background: url("../images/delete.png") no-repeat left;}

.mess_err{background-color: #FB6669;color: #FFFFFF;margin:1%;padding:1%;text-align: center}
.mess_ok{background-color: #44B343;color: #FFFFFF;margin:1%;padding:1%;text-align: center}

h2 {font-size:18px;padding:0;margin:20px 0 5px;float:left;width: 100%}

@media screen and (max-width:1200px){ 
	.container-menu {font-size:17px }
	.container-menu li {padding: 0.5% 1% 1% 1%}
	
}
@media screen and (max-width:1100px){
	.container-menu {font-size:16px }
	.container-menu li {padding: 0.5% 1% 1% 1%} 
}


@media screen and (max-width:940px){ 

	.container-menu {font-size:16px }
	.container-menu li {padding: 0.5% 0.7% 1% 0.7%} 
	#headermenu {width: 100%;margin-top:0px;text-align: center}  
	.cadre, .cadresuivi {min-width:100%;}	
}

@media screen and (max-width:850px){
  
	#headermenu {width: 100%;margin-top:0px;text-align: center}
	.container-menu {font-size:15px}	
	.container-menu ul {float: left;width: 100%;text-align: center }
}

@media screen and (max-width:768px){
	
	 
	.fil{text-align:left}
	  
	  
	.container-menu li {float:none;}
	.container-menu  {display:none;}

	.responsivemenu{display:block}
	
	#head_index{margin-top:60px;}
	#headermenu {position: absolute;top: 0;margin-top:0px;} 
	.openmenuresponsive { 
		background-color: #64585C;
	  width: 96%;      
	  height:30px;	
	  color:#FFFFFF;
	  padding: 1.5% 2%;
	  text-align: left;
	  display: block;
	  cursor: pointer;
	  font-size: 25px;
	  clear: both;
	  margin-top: 0px;
	  vertical-align: top;
	}
	
	.responsivemenu ul {
		background-color: #64585C;
		display: block;
		position: relative;		
		width:100%;
	}
	
	.responsivemenu ul li ul{
		display: block; 
		margin:0
	}

	.responsivemenu ul li {
		display: block;
		width: 100%;
		text-align: center;
		font-size:13px;	
		 padding:0px 0;
	}
	
	.container-menu ul li:hover > ul  {
		  display:block;
		  background-color:#787375; 
		  margin:0;
		  max-width:100%;
		  text-align:left;
		  z-index:103;	
	}

	.container-menu ul li ul > li  {
		  display:block;
		  padding:0px;
		  margin:0px;
	}
		
	.responsivemenu ul li ul li a, .responsivemenu ul li a {
		padding:7px 0px;
		border: none;
		color:#FFFFFF;
		width: 100%;
	}
		
	
	.responsivemenu ul li ul li a:hover, .responsivemenu ul li a:hover {
		background-color: #362B2A;
		color:#FFFFFF;
	}
	 .cadre, .cadresuivi {min-width:100%;}
}

@media screen and (max-width:580px){
.pagelogin{width:100%;}
.cadre, .cadresuivi {min-width:100%;}		
}