/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */

 
/* FONTS  ==============================================================*/


/* FONTS  ==============================================================*/

  
@font-face {
    font-family: 'gotham_condensedlight';
    src: url('../fonts/gothamcondensed-light-webfont.eot');
    src: url('../fonts/gothamcondensed-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamcondensed-light-webfont.woff2') format('woff2'),
         url('../fonts/gothamcondensed-light-webfont.woff') format('woff'),
         url('../fonts/gothamcondensed-light-webfont.ttf') format('truetype'),
         url('../fonts/gothamcondensed-light-webfont.svg#gotham_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;

}  
@font-face {
    font-family: 'gothamxnarrow_bold';
    src: url('../fonts/gothamxnarrow-bold-webfont.eot');
    src: url('../fonts/gothamxnarrow-bold-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/gothamxnarrow-bold-webfont.woff') format('woff'),
         url('../fonts/gothamxnarrow-bold-webfont.ttf') format('truetype'),
         url('../fonts/gothamxnarrow-bold-webfont.svg#gothamxnarrow_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gothamxnarrow_book';
    src: url('../fonts/gothamxnarrow-book-webfont.eot');
    src: url('../fonts/gothamxnarrow-book-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/gothamxnarrow-book-webfont.woff') format('woff'),
         url('../fonts/gothamxnarrow-book-webfont.ttf') format('truetype'),
         url('../fonts/gothamxnarrow-book-webfont.svg#gothamxnarrow_book') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gothamxnarrow_medium';
    src: url('../fonts/gothamxnarrow-medium-webfont.eot');
    src: url('../fonts/gothamxnarrow-medium-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/gothamxnarrow-medium-webfont.woff') format('woff'),
         url('../fonts/gothamxnarrow-medium-webfont.ttf') format('truetype'),
         url('../fonts/gothamxnarrow-medium-webfont.svg#gothamxnarrow_medium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham_Book';
    src: url('../fonts/Gotham-Book.eot');
    src: url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
          url('../fonts/Gotham-Book.woff') format('woff'),
         url('../fonts/Gotham-Book.ttf') format('truetype'),
         url('../fonts/Gotham-Book.svg#Gotham_Book') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham_Medium';
    src: url('../fonts/Gotham-Medium.eot');
    src: url('../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
          url('../fonts/Gotham-Medium.woff') format('woff'),
         url('../fonts/Gotham-Medium.ttf') format('truetype'),
         url('../fonts/Gotham-Medium.svg#Gotham_Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* TYPO  ==============================================================*/
 
  h1{
	font-family: 'Gotham_Book';
 	font-weight:normal;
   	font-size:28px;
	text-align:left; 
      }
   

 
  
 /* EXCLUSION  ==============================================================*/
 
.iphone {
	display:none;
 }
.ie .iphone {
	display:none;
 }
 #alert_too_small {
 	display:none;
}


/* GENERALITES  ==============================================================*/

.titre{
	font-size:28px;
	color:#fff;	
  	background:#0079c2;
  	background-image:url(../img/banner5.jpg);
	background-size:   cover;
	
	font-size:24px;
 }
.reload{
	width:25px;
	float:right;
	padding-top:6px;	
  }
.reload2{
	width:25px;
	float:right;
	padding-top:6px;
	margin-left:6px	
  }
body.comp .reload{
	padding-top:2px;	
  }
.reload img{
	width:25px;
  }
 .glyphicon {
	color:#3e5565;
}
.glyphicon.first{
	font-size:1.3em;
}

.glyphicon.first.red{
	color:#ff0000;
}
.glyphicon.first.blue{
	color:#007ac3;
}
.glyphicon.first.orange{
	color:#ff9900;
}

.image-center {
    text-align:center;
}
img{ 
	max-width:100% ;
	height:auto;
	vertical-align:baseline
}

*, *:focus, *:visited{ text-decoration:none;}

.ie   {
	width:100%;
	text-align:center;
 }

.no_padding{ padding:0; }
.no_margin{ margin:0; }

input.transparent-input, button.transparent-input{
       background-color:rgba(0,0,0,0) !important;
       border:none !important;
	   box-shadow: 0!important;
    }
nav.navbar { border-radius:0 }

img.right,  .image-right{
	float:right!important;
	margin-left:20px!important;
}
img.left,  .image-left{
	float:left;
	margin-right:20px; 
}
 body#editor figure figcaption{
	max-width:300px!important;
 }
 
a {text-decoration:none;  }
a:link {color:##0079c2;}
a:visited   {color:##0079c2;}
a:hover  {color:#999; text-decoration:none!important; }
a:active  {color:##0079c2; }
a:focus {
  outline: 0;
  outline: 0r;
  outline-offset: 0;
}

hr {
    border-color: #ccc !important; 
    margin-bottom: 0px;
    margin: 4px 0px 8px 0px;
	opacity:.4;
	clear:both;
}
 

.bold {
    font-weight:bold;;
}
.references {
    font-size:12px;
	font-style:italic;
}
ul,ol{
	padding-left:15px	
}
strong {
    font-weight:normal;
	font-family: 'Gotham_Medium';
}
p {
    margin: 0 0 8px 0;
}
.transp_4{
    opacity:.4;
}
 


#calendar iframe{
	width:100%	
}
ul.liste {
	padding:0;	
}
ul.liste li{
	list-style:none;	
}

/* STRUCTURE  ==============================================================*/

 
html {
}
body {
	position:relative;
	height:100%;
    font-family: 'gothamxnarrow_book';
	background-color:#fff;
}
.contenu  {
	margin-top:20px;
   }
.contenu select {
	margin-bottom:10px;
	font-size:20px;
	width:calc( 100% - 76px );
 }
.affichage   {
	margin: 0 0px;
	font-size:16px;
    font-family: 'gothamxnarrow_medium';
  }
body.comp .affichage   {
     font-family: 'gothamxnarrow_book';
  }
body.comp .nom_comp   {
     font-family: 'gothamxnarrow_medium';
	 text-align:left
  }
.affichage div {
	margin-bottom:10px;
	background-color:#fff;
	text-align:center;
	padding-left: 0px;
    padding-right: 0px;
	
 }
.affichage div.centre {
	color:#fff;
 	-moz-border-radius:10px ;
	-webkit-border-radius:10px ;
	border-radius:10px ;
  }
 
/* HEADER  ==============================================================*/
 
header{
	max-width:100%;
	margin-left: 0px!important;
    margin-right: 0px!important;
}

.bande_noire{
 	 background-color: #16242e;
	 width:100%;
	 height:20px;
	 padding-left:0;
	 padding-right:0;
}
 header h1  {
	padding:0!important;
	margin:0!important;
}
.logo {
	background-color:#fff;
	padding-bottom:8px;

}
.logo img{
	max-width:120px;
	margin-top:10px;
	margin-bottom:0px
}



/* ARTICLE  ==============================================================*/

     
/* ASIDE ==============================================================*/

  
/* FORM  AJOUT  ==============================================================*/

.win_add span{
	
}

#form_add{
	background:#007ac3;
 	max-width:400px;
	margin:30px auto;
	padding:20px;
	-moz-border-radius:10px ;
	-webkit-border-radius:10px ;
	border-radius:10px ;
	text-align:left;
	overflow:hidden;
	color:#16242e;
	display:none;
 }

  select{ 
   clear:both;
    width:100% ;
	background:#eceeef;
  	font-size:14px;
   	margin:2px 0 6px 0!important;
	text-align:left; 
	color:#16242e;
	border:0;
	padding:2px;
	font-family: 'gothamxnarrow_book';

 }
 #form_add  input.bouton{ 
    width:49% ;
	background:#bfcfde;
  	font-size:14px;
 	font-weight:bold;
  	margin:2px 0 0 0!important;
	text-align:center; 
	color:#16242e;
	border:0;
	padding:2px;
	font-family: 'gothamxnarrow_medium';
	display:inline-block;

 }
 #form_add  input.bouton:hover { background:#336699; color:#fff;}
 #form_add  input.bouton:active { background:#bfcfde; color:#16242e;}

.save{
	margin-top:15px;	
}
 
/* BOUTONS ==============================================================*/

 .pave_bouton{ 
 	margin-top:15px; 
 	margin-bottom:10px; 
}
.pave_date { 
  	margin-bottom:10px; 
}
.pave_date span{ 
    font-family: 'gothamxnarrow_book';
	font-size:10px;
	display:inline-block;
 	margin-right:30px;   
}
.pave_date img{ 
	position:absolute;
 	margin-top: -3px;
	cursor:pointer; 
 }
 .hasDatepicker, .temps_ecoule{
	width:100px;
	margin-right:5px;
	text-align:center;
	font-family: 'gothamxnarrow_book';
	font-size:14px;
	border:0!important;
 }
   span.bouton{ 
 	background:#007ac3;
  	font-size:15px;
	letter-spacing:.05em;
 	text-align:center; 
	color:#fff;
	border:0;
	margin-bottom:4px;
	font-family: 'gothamxnarrow_medium';
	-moz-border-radius:6px ;
	-webkit-border-radius:6px ;
	border-radius:6px ;
	padding:4px 8px;
	width:calc( 50% - 3px );
 	display:inline-block; 

 }
.bouton:hover { background:#336699; color:#fff;}
.bouton:active { background:#1f4e7c; color:#fff;}

 /* FOOTER ==============================================================*/


footer{
}	
 
/* TABLE ==============================================================*/


 .row_table table {
	width:100%;
	font-family: 'gothamxnarrow_book';
	font-size:13px;
	background-color:#fff;
 
  }	
.row_table table,.row_table  td,.row_table  th{
	padding:1px 4px!important;
	font-weight:normal;
 	border: 1px solid  #fff;
	text-align:center;
 }	
.row_table td.left{
	text-align:left;
 }	
.row_table  th{
	background:#007ac3;
	color:#fff;
	text-align:center;
	font-family: 'gothamxnarrow_medium';
 }	
.row_table  td{
 	border-bottom:1px solid #fff;
	background-color:#eceeef;
	border-top: 1px solid #fff;
 }	

/*   SIGN BOX */
 
.logo_img {
	width:auto;	
	text-align:center;
	margin-bottom:8px;
}
.logo_txt {
	margin-top:22px;
	text-align:right;
}
h1.sign{
	width:100%;
	text-align:center;	
	margin:40px auto 0px auto;
}
#form_sign_in{
 	border:2px solid #85878a;
	display:block;
	max-width:300px;
	margin:30px auto;
	padding:20px;
	-moz-border-radius:10px ;
	-webkit-border-radius:10px ;
	border-radius:10px ;
	text-align:left;
	overflow:hidden;
	color:#16242e;
 }

#form_sign_in input{
	 margin:4px 0 10px 0!important;
	 float:left;
	 width:100%;
	-moz-border-radius:4px ;
	-webkit-border-radius:4px ;
	border-radius:4px ;
	 background:#fff;
 	border:1px solid #a8aeb6;
 	 padding:0 4px;
 }
#form_sign_in h2{
	 margin:0 0 15px 0;
	 width:100%;
	 text-align:center;
	color:#85878a;
  }
#form_sign_in label{
	 float:left;  
 	 text-align:right;
	 color:#fff;
	 margin:7px 8px 0 0; 
 }


 #form_sign_in  input.bouton{ 
   clear:both;
    width:100% ;
	background:#00853e;
  	font-size:14px;
 	font-weight:bold;
  	margin:2px 0 0 0!important;
	text-align:center; 
	color:#fff;
	border:0;
	padding:2px;
	font-family: 'gothamxnarrow_medium';

 }
#sign_box input.bouton:hover { background:#006630; color:#fff;}
#sign_box input.bouton:active { background:#00853e; color:#fff;}

 #sign_box div.error{
 padding:8px;
 background:#ffdddd;
 font-size:14px;
 font-weight:bold;
 margin-bottom:12px;
 color:#f00;
text-align:center; 
    -moz-border-radius:8px ;
    -webkit-border-radius:8px ;
	border-radius:8px ;
	border:1px solid #ff8f8f;
behavior:url(js/PIE/PIE.htc);
 }

/*   PIE CHART */

 
 .progressDiv {
width: 84%;
background: #fcfcfc;
height: 325px;
border: 1px solid #ccc;
position: relative;
left: 7%;
top: 100px;
display: inline-block;
border-radius: 2px;
box-shadow: 0px 1px 1px 1px #ccc;
}

.statChartHolder {
width: 35%;
height: 90%;
position: relative;
border-right: 1px solid #ccc;
top: 15px;
    display: inline-block;
}

.statRightHolder {
display: inline-block;
height: 90%;
width: 64%;
position: relative;
top: -32px;
margin: 0;
}
.statRightHolder ul {
list-style: none;
    margin: 0;
}
.statRightHolder li {
border-bottom: 1px solid #ccc;
height: 85px;
width: 95%;
position: relative;
top: -25px;
}
.statRightHolder h3 {
display: inline-block;
margin-right: 15px;
color: #B6B5B5;
font-weight: 300;
font-size: 38px;
}
.statRightHolder span {
display: inline-block;
color: #B6B5B5;
font-size: 21px;
font-weight: 300;
}

.statsLeft {
    list-style:none;
    display:inline-block;
    width:45%;
}
.statsLeft li {
width: 100%;
height: 14px;
border: none;
top: 5px;
margin-bottom: 25px;
}
.statsLeft h3{
    font-size:17px;
    display: inline-block;
}
.statsLeft span{
    font-size: 17px;
    display:inline-block;
}
.statsRight {
width: 45%;
display: inline-block;
position: absolute;
}
.statsRight li {
width: 100%;
height: 14px;
border: none;
top: 5px;
margin-bottom: 25px;
}
.statsRight h3{
    font-size:17px;
    display: inline-block;
}
.statsRight span{
    font-size: 17px;
    display:inline-block;
}
/* Pie Chart */
.progress-pie-chart {
  width:40px;
  height: 40px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #81CE97;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  clip: rect(0, 20px, 40px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 20px, 40px, 0);
  background: #E5E5E5;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.progress-pie-chart {
  margin: 50px auto 0;
}




 




.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 20px, 40px, 0);
  background: #fff;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 30px/2);
  top: calc(50% - 30px/2);
  width: 30px;
  height: 30px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #81CE97;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.progress-pie-chart {
  margin: 50px auto 0;
}


 /* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix  { clear: both; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }