@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

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

body{
font-family: "Poppins", sans-serif;
font-size:15px;
line-height:23px;
color:#495057;
background-color:#f8f8fb;

}


/* *********************** PAGE LOGIN *********************** */

#login{
text-align: center;
background-image: url(images/login-background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
width: 100%;
min-height: 100vh;
}

#login .c1{
text-align: center;
display:inline-block;
background-color:white;
padding:35px;
margin-top:120px;
border-radius: 4px;
margin-left:auto;
margin-right:auto;
border:1px solid #e0e0ec;
}

#login .c1>img{
margin: 0 auto 30px;
width: 225px;
height: auto;
}

#login form{
text-align: left;
}


#login .erreur{
color:red;
margin-bottom:12px;
}


/* *********************** COMMON *********************** */

h1{ /* titre des pages */
display:block;
text-transform: uppercase;
font-weight: 600;
font-size: 22px;
color:#495057;
line-height:100px;
}


h2{ /* sous-titre (page produit) */
text-transform: uppercase;
margin-bottom: 47px;
font-size: 15px;
width: 100%;
display: inline-block;
border-bottom: 1px solid #eaeaea;
margin-top:30px;
}

#users_ajouter h2{
	max-width: 580px;
    display: block;
}

a.button_back{
float:right;
display:block;
margin-top:30px;
}

#wrapper a.button_add{
float:right;
margin-bottom:30px;
}

#wrapper p{
}

#wrapper a{
color:#495057;
text-decoration:none;
}

#wrapper p a{
color: #2980b9;
text-decoration: underline;
}

#wrapper a:hover{
color:#2980b9;
text-decoration:underline;
}


/* *********************** ANIMATION DES FILTRES *********************** */
.is-animated {
  animation: .9s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}

/* *********************** MENU *********************** */
#menu{
position: fixed;
z-index:1000;
top: 0;
left: 0;
width:100%;
min-height:80px;
background-color:#e9e9e9;
transition: top 0.8s;
padding: 15px 0;
}

#menu .c1{
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu .title{
	margin-left: 40px;
}

#menu .title>p{
	font-family: "Varela Round", sans-serif;
	color: #012153;
    font-size: 25px;
    font-weight: 400;
    line-height: 32px;
    -webkit-text-stroke: 1px #012153;
}

#menu .c1 .infos{
}

#menu .c1 .infos .titre{
line-height:25px;
font-size:21px;
color:#495057;
opacity:0.4;
text-transform:uppercase;
font-weight:600;
}

#menu .c1 .infos .titre a{
color:#495057;
text-decoration:none;
transition:all 0.3s;
}

#menu .c1 .infos .titre a:hover{
text-decoration:underline;
}

#menu p.mise_en_ligne{
display:block;
width:100%;
vertical-align:top;
color:#495057;
opacity:0.4;
font-size:12px;
}

#menu #log{
display:block;
color:#495057;
}

#menu #log a{
color:#495057;
font-size:13px;
text-decoration:none;
opacity:0.4;
}

#menu #log a:after{
content: url('images/logout_icon.png');
}

#menu #log a:hover{
text-decoration:underline;
opacity:1;
}

#menu .links{
flex: 1;
text-align: right;
font-size:0px;
}

#menu .links a{
display:inline-block;
border-right:1px solid #4d5a66;
padding-left:15px;
padding-right:15px;
line-height:30px;
color:#495057;
font-size:15px;
text-decoration:none;
}

#menu .links a.menu_admin{
color:#f1c40f;
}

#menu .links a:last-child{
border-right:none;
}

#menu .links a:hover{
opacity:0.6;
}

#menu .links a.selected{
background-color:#c4c4c5;
opacity:1;
}


@media screen and (max-width: 700px) {
  #menu .c1{
    display: block;
	text-align: center;
  }
  #menu .title{
	  margin-left: 0;
  }
  #menu .title>p{
	font-family: "Varela Round", sans-serif;
    color: #012153;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    -webkit-text-stroke: unset;
    margin-top: 15px;
  }
}


/* *********************** WRAPPER / COMMON *********************** */
#wrapper{
width:95%;
padding-top:120px;
margin:auto;
text-align:center;
}

#wrapper .content{
display: inline-block;
vertical-align: top;
background-color: white;
border-radius: 4px;
padding: 32px 20px;
border: 1px solid #e0e0ec;
text-align: left;
position: relative;
width: 100%;
max-width: 1042px;
box-sizing: border-box;
overflow-x: auto;
}


#wrapper .content img{
max-width: 600px;
}


/* *********************** PAGES *********************** */

/* **** PAGES FIXES MODIFIER **** */
#pages_fixes_modifier img.image_opengraph{
	width:178px;
}

/* *** NEWS LISTE **** */

#news_liste p.compteur{
text-align:right;
font-size:14px;
opacity:0.65;
clear:both;
}

#news_liste .recherche p{
display:inline-block;
width:165px;
}

#news_liste select.search_langues{
background-image:url('images/filter.png');
background-repeat:no-repeat;
background-position:8px 10px;
padding-left:35px;
}

/* *** NEWS AJOUTER - MODIFIER **** */

#news_ajouter p.last_update{
text-align:right;
opacity:0.65;
font-size:13px;
}


/* **** DÉTAILS PHOTOS (NEWS + PHOTOS RÉALISATIONS + PHOTOS PRODUITS) **** */


#photos_details .filter{
width:100%;
margin-top:45px;
clear:both;
text-align:center;
margin-bottom:50px;
}


#photos_details .filter a{
display: inline-block;
vertical-align: top;
vertical-align: top;
font-size: 13px;
font-weight: 400;
margin: 10px 15px;
border: 1px solid #150c13;
border-radius: 40px;
padding: 5px 12px 5px 28px;
background-image: url('images/btn_down_black.png');
background-repeat: no-repeat;
background-position: 11px 11px;
transition:all 0.3s;
}

#photos_details .filter a:hover{
background-color:#eae7e7;
color:inherit;
}

#photos_details .filter a.active{
text-decoration:underline;
}

#photos_details .formulaire{
	text-align:center;
	margin-bottom:50px;
	margin-top:50px;
	
}

#photos_details .photos{
width:100%;
display:block;
clear:both;
font-size:0px;
text-align:center;
}

#photos_details .item{
width:300px;
height:220px;
display:inline-block;
vertical-align:top;
overflow:hidden;
position:relative;
margin:10px 20px;
box-shadow: 10px 10px 54px -24px rgba(0,0,0,0.75);
border-radius:3px;
border:1px solid #b7b7b7;
transition:all 0.3s;
}

#photos_details .item:hover{
border:1px solid #404040;
}

#photos_details .item .demo-gallery__img--main{
width:300px;
height:190px;
position:absolute;
z-index:100;
top:0px;
left:0px;
text-align:left;
overflow:hidden;
}

#photos_details .item .demo-gallery__img--main img{
min-height:100%;
}


#photos_details .item .inactif{
width: 300px;
height: 190px;
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
background-color: red;
font-size: 23px;
color: white;
opacity: 0.6;
line-height: 190px;
text-align: center;
}

#photos_details .item .boutons_actions{
width:300px;
height:30px;
position:absolute;
top:190px;
background-color:#34495e;
}

#photos_details .item .boutons_actions a{
display:inline-block;
vertical-align:top;
width:75px;
height:30px;
color:#fff;
font-size:12px;
text-align:center;
line-height:30px;
transition:all 0.3s;

}

#photos_details .item .boutons_actions a:hover{
text-decoration:none;
color:#f1c40f;
}


/* **** CATEGORIES 1+2 AJOUTER/MODIFIER **** */
#cat_ajouter_modifier img{
	width:300px;
}

/* **** PRODUITS LISTE**** */
#produits_liste{
	margin-top: 40px;
}

#produits_liste .recherche p{
display:inline-block;
width:126px;
padding-left:27px;
}

#produits_liste .recherche .button{
	display: none;
}


#produits_liste .recherche p.selected{
background-image:url('images/arrow_right.png');
background-repeat:no-repeat;
background-position:0px 1px;
padding-left:27px;
}


#produits_liste .recherche select.search_cat{
background-image:url('images/filter.png');
background-repeat:no-repeat;
background-position:8px 10px;
padding-left:35px;
}


#produits_liste .recherche input.search{
width:240px;
background-image:url('images/search.png');
background-repeat:no-repeat;
background-position:8px 10px;
padding-left:35px;

}
#produits_liste .navigation p.compteur{
font-size:12px;
}

#produits_liste .navigation{

}

#produits_liste .navigation a{
background:#f1f1f1;
padding: 1px 6px;
margin: 3px;
display: inline-block;
font-size: 12px;
}

#produits_liste .navigation span{
padding: 1px 6px;
margin: 3px;
display: inline-block;
font-size: 12px;
}

#produits_liste .nav_and_pagination{
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
}


#produits_liste .pagination{
    order: -1;
}

#produits_liste .pagination span{
background:#f1f1f1;
padding: 1px 6px;
margin: 3px;
display: inline-block;
font-size: 12px;
}

#produits_liste .pagination span.active{
background:#f1f1f1;
padding: 1px 6px;
margin: 3px;
display: inline-block;
font-size: 12px;
}

#produits_liste .pagination a span{
display:inline-block;
background: #c0c0c0;
padding: 1px 6px;
margin: 3px;
font-size: 12px;
}

.delete_form input[type="submit"]{
background: #34495e;
color: white;
padding: 0.5rem;
font-size: 13px;
line-height: normal;
text-transform: none;
}

.delete_form input[type="submit"]:hover{
    background: #34495e;
}


/* **** AJOUTER/MODIFIER PRODUIT **** */
#produits_ajouter .c1{
margin-bottom:30px;
}
#produits_ajouter p.last_update{
text-align:right;
font-size:14px;
opacity:0.65;
}





#produits_ajouter #bouton_langues_fr,
#produits_ajouter #bouton_langues_de,
#produits_ajouter #bouton_langues_nl,
#produits_ajouter #bouton_langues_en{
display: inline-block;
vertical-align: top;
border: 1px solid #e1e1e1;
padding: 5px 16px;
background-color: white;
opacity:0.5;
margin-right:10px;
margin-bottom:10px;
position:relative;
top:0px;
transition: all 0.32s;
}


#produits_ajouter #bouton_langues_fr.selected,
#produits_ajouter #bouton_langues_de.selected,
#produits_ajouter #bouton_langues_nl.selected,
#produits_ajouter #bouton_langues_en.selected{
opacity: 1;
background-color: #f1f1f1;
position: relative;
top: 11px;
}

#produits_ajouter .c1 #div_fr, #produits_ajouter .c1 #div_de, #produits_ajouter .c1 #div_nl, #produits_ajouter .c1 #div_en{
border:1px solid #e1e1e1;
padding:30px;
display:inline-block;
vertical-align:top;
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
}
@keyframes animationFrames{ /* animation ci-dessus */
  0% {
    opacity:0;
    transform:  translate(-800px,0px)  ;
  }
  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }
  80% {
    transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
} /* fin de keyframes */


#produits_ajouter .liste_options_bool{
width:750px;
columns: 3;
margin-bottom:30px;
}

#produits_ajouter .liste_options_texte{
width:750px;
columns: 2;
}

#produits_ajouter .liste_options_texte p{
display:inline-block;
}

#produits_ajouter .liste_options_texte p span{
	font-size:13px;
	line-height:15px;
	opacity:0.65;
}

#produits_ajouter .liste_options_texte input[type="text"]{
font-size:13px;
width:300px;
}


/* **** PRODUITS + NEWS PDF **** */

#gerer_pdf .formulaire{
text-align:center;	
margin-bottom:50px;
}

#gerer_pdf .pdfs{
width:100%;
display:block;
clear:both;
font-size:0px;
text-align:center;
}

#gerer_pdf .pdfs .item{
width:300px;
height:220px;
display:inline-block;
vertical-align:top;
overflow:hidden;
position:relative;
margin:10px 20px;
box-shadow: 10px 10px 54px -24px rgba(0,0,0,0.75);
border-radius:3px;
border:1px solid #b7b7b7;
transition:all 0.3s;
}

#gerer_pdf .pdfs .item img{
	max-width:100%;
}

#gerer_pdf .pdfs .item:hover{
border:1px solid #404040;
}


#gerer_pdf .pdfs .item .inactif{
width: 300px;
height: 190px;
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
background-color: red;
font-size: 23px;
color: white;
opacity: 0.6;
line-height: 190px;
text-align: center;
}

#gerer_pdf .pdfs .item p.description{
width: 280px;
padding:0px 10px;
height: 23px;
position: absolute;
bottom: 30px;
left: 0px;
z-index: 300;
font-size:13px;
line-height:23px;
background-color:#e1e1e1;
overflow:hidden;
}

#gerer_pdf .pdfs .item .boutons_actions{
width:300px;
height:30px;
position:absolute;
top:190px;
background-color:#34495e;
}

#gerer_pdf .pdfs .item .boutons_actions a{
display:inline-block;
vertical-align:top;
width:75px;
height:30px;
color:#fff;
font-size:12px;
text-align:center;
line-height:30px;
transition:all 0.3s;

}

#gerer_pdf .pdfs .item .boutons_actions a:hover{
text-decoration:none;
color:#f1c40f;
}


/* **** CONTACTS DETAILS **** */
#contacts_details .content{
min-width:800px;
text-align:left;
}

#contacts_details .content p.date{
text-align:right;
opacity:0.65;
font-size:14px;
margin-bottom:20px;
}



/* *********************** FOOTER *********************** */
#footer{
padding:50px 0px;
text-align:center;
}

#footer img{
margin-bottom: 10px;
width: 100px;
}

#footer p{
font-size:13px;
line-height:22px;
}









/* *********************** TABLE *********************** */

table{
clear:both;
border-collapse: collapse;
border-spacing: 0px 0px;
margin-top:30px;
min-width:1000px;
margin-bottom:35px;
}

table tr{
height:50px;
line-height:0px;
}

table tr{
border-bottom:1px solid #ececec;
transition:all 0.15s;
}

table tr:hover{
background-color:#D4DBE3;
}


table tr:first-of-type{ /* index du tableau */
background-color:#516171!important;
color:white;
height:30px;
border-bottom:none;
}

table tr th{
color:white;
font-size:11px;
font-weight:700;
text-transform:uppercase;
padding:0px 13px;
}


table tr:last-of-type{ /* dernière ligne du tableau */
border:none;
}





table td{
padding:0px 13px;
line-height:14px;
}

td.col1{ /*id */
font-size:12px;
}


td.col2 img{ /* images */
width:35px;
height:35px;
}

td.col3{ /* titre principal*/
font-size:13px;
font-weight:bolder;
text-transform:uppercase;
max-width:425px;
}

td.col4{ /* info secondaire */
font-size:13px;
}

td.col5{ /* email ou lien */
font-size:13px;
}

td.col5 a{

}

td.col6 a{ /* actif / inatif */
font-size:12px;
font-weight:700;
opacity:0.90;
transition:all 0.3s;
}

td.col6 a:hover{
text-decoration:none!important;
opacity:1;
}

td.col6 a .actif{
background-color:#27ae60;
border-radius:10px;
padding:3px 10px;
color:white;
}

td.col6 a .inactif{
background-color:#c0392b;
border-radius:10px;
padding:3px 10px;
color:white;
}

td.col7{ /* lien texte (modifier, supprimer, etc...) */
font-size:12px;
}

td.col7 a{
color:#2980b9!important;
}

td.col8{ /* date*/
font-size: 12px;
color: #a2a2a2;
}

td.col9{ /* V/X Icon*/
text-align:center;
}

#wrapper .delete_first_btn{
    background: #34495e;
    color: white;
    padding: 0.5rem;
    font-size: 13px;
    line-height: normal;
    text-transform: none;
    cursor: pointer;
    opacity: 0.8;
    border-radius: 4px;
    margin-top: 1em;
    display: inline-block;
}

#wrapper .delete_first_btn:hover{
    color: white;
    text-decoration: none;
}

#wrapper .delete_second_btn{
    margin-right: 2em;
    cursor: pointer;
}


/* *********************** FORM ELEMENTS *********************** */

p.label_input{
display:inline-block;
vertical-align:top;
width:213px;
padding:7px;
}

p span.info_input{
display:inline-block;
color:#3498db;
font-size:12px;
margin-bottom:13px;
}

input[type="text"]{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
background-repeat:no-repeat;
background-position:10px center;
box-sizing: border-box;
}

input.n_caracteres{
padding: 10px;
font-size: 12px;
color: #2c3e50;
width: 40px;
display: inline-block;
background-color: white;
text-align:center;
}

input.n_caracteres:hover{
box-shadow:none;	
}

input[type="text"].fr{
padding-left:35px;
background-image:url('images/fr.png');
}

input[type="text"].de{
padding-left:35px;
background-image:url('images/de.png');
}

input[type="text"].nl{
padding-left:35px;
background-image:url('images/nl.png');
}

input[type="text"].en{
padding-left:35px;
background-image:url('images/en.png');
}


input[type="number"]{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

input[type="date"]{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

input[type="file"]{
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

input[type="file"]:hover{
box-shadow:none;
}

input[type="email"]{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

input[type="password"]{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

input:hover{
box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

textarea{
min-width:750px;
min-height:450px;
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
border-radius:4px;
background-repeat:no-repeat;
background-position:10px 16px;
box-sizing: border-box;
}

textarea.fr{
padding-left:35px;
background-image:url('images/fr.png');
}

textarea.de{
padding-left:35px;
background-image:url('images/de.png');
}

textarea.nl{
padding-left:35px;
background-image:url('images/nl.png');
}

textarea.en{
padding-left:35px;
background-image:url('images/en.png');
}

textarea:hover{
box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

select{
border:1px solid #bdc3c7;
padding:10px;
font-size:16px;
color:#2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom:20px;
width:350px;
border-radius:4px;
box-sizing: border-box;
}

select option{
font-size:14px;
border-bottom:1px dashed #c0c0c0;
padding:10px 3px;
}

select option[disabled]{
	display: none;
}

select:hover{
-webkit-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.20);
-moz-box-shadow:    1px 1px 10px 0px rgba(50, 50, 50, 0.20);
box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

input[type="submit"]{
height:38px;
display:inline-block;
padding-left:35px;
padding-right:15px;
line-height:38px;
font-size:14px;
text-transform:uppercase;
font-weight:600;
color:white;
background-repeat:no-repeat;
background-position:7px 13px;
text-decoration:none;
border-radius:4px;
opacity:0.8;
transition:all 0.3s;
background-color:#011958;
cursor:pointer;
background-image:url('images/btn_arrow_right.png');
background-repeat:no-repeat;
background-position:10px 15px;
transition:all 0.15s;
}

input[type="submit"]:hover{
background-color:#253d7f;
box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.20);
background-position:15px 15px;
}



label{
font-size: 13px;
line-height: 15px;
display: inline-block;
vertical-align:middle;
overflow: hidden;
opacity:0.65;
padding: 5px 4px;
cursor:pointer;
margin-bottom:2px;
border-radius:4px;
}

input[type="radio"]{
display:inline-block;
vertical-align:middle;
}

input[type="checkbox"]{
display:inline-block;
vertical-align:middle;
}


input[type=checkbox]:hover + label,
input[type=radio]:hover + label {
background-color:#27ae60;
color:white;
}

input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
background-color:#2ecc71;
color:white;
}

/* *********************** BUTTONS *********************** */

#wrapper a.button{
height:38px;
display:inline-block;
padding-left:35px;
padding-right:15px;
line-height:38px;
font-size:14px;
text-transform:uppercase;
font-weight:600;
color:white;
background-repeat:no-repeat;
background-position:7px 13px;
text-decoration:none;
border-radius:4px;
opacity:0.8;
transition:all 0.3s;
cursor:pointer;
}

#wrapper a.button:hover{
box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.20);
opacity:1;
}

#wrapper a.button_back{
background-color:#e67e22;
background-image:url('images/btn_arrow_left.png');
background-position:12px 15px;
}

#wrapper a.button_add{
background-color:#2980b9;
background-image:url('images/btn_plus.png');
background-position:12px 15px;
}

#wrapper a.button_rotate{
background-color:#2980b9;
background-image:url('images/btn_rotate.png');
background-position:12px 14px;
}

#wrapper a.button_generer_password{
background-color:#2980b9;
padding-left:15px;
}



.afficher_langue{
  width: 16px;
  height: 11px;
  margin: 40px;
  display: inline-block;
}
#afficher_fr{
  background-image:url('images/fr.png');
  background-repeat: no-repeat;

}
#afficher_de{
  background-image:url('images/de.png');
  background-repeat: no-repeat;
}
#afficher_nl{
  background-image:url('images/nl.png');
  background-repeat: no-repeat;
}
#afficher_en{
  background-image:url('images/en.png');
  background-repeat: no-repeat;
}


/* *********************** HOME *********************** */

#home h1{
    margin-top: 2em;
}



/* *********************** PAGE FICHIERS UPLOADES *********************** */

.tocopy{
    display: inline;
}
.js-copy{
    text-decoration: none;
    color: #2980b9;
    background-color: transparent;
    box-shadow: none;
}
.js-copy:hover{
    text-decoration: underline;
    box-shadow: none;
}



/* *********************** PAGE RAPPORTS AJOUTER *********************** */
form.rapports_ajouter{
	position: relative;
}

#wrapper form.rapports_ajouter .refresh_button{
	position: absolute;
    top: 2px;
    right: 10px;
    height: 17px;
    font-size: 10px;
    line-height: 17px;
}

#wrapper form.rapports_ajouter textarea{
	width: 350px;
	box-sizing: border-box;
	max-width: 350px;
	min-width: 350px;
	min-height: 200px;
}

#wrapper form.rapports_ajouter .checkboxes{
	display: inline-block;
    vertical-align: top;
}

/* *********************** Loader *********************** */
.loader {
	width: 22px;
    height: 22px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #bdbdbd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 50%;
    display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* *********************** RAPPORTS VALIDER *********************** */
#rapports-valider{
	margin-top: -100px;
	text-align: center;
}

#rapports-valider .valide{
margin-bottom: 6px;
margin-top: 0;
font-size: 12px;
color: #0e7a09;
font-weight: 600;
}

#rapports-valider .counter{
    display: block;
    width: 400px;
    max-width: 100%;
    background-color: #d9d9d9;
    margin: 0 auto 30px;
    padding: 5px 25px;
}

#rapports-valider .counter p{
	margin: 0;
    text-align: center;
    font-size: 13px;
}

#rapports-valider h1{
	line-height: 80px;
	padding: 0;
}

#rapports-valider p{
	margin-top: 20px;
}

#wrapper #rapports-valider .button{
	background-color: #011958;
	margin-top: 20px;
	margin-bottom: 10px;
}

#wrapper #rapports-valider .button.button_passe{
    padding-left: 15px;
	background-color: #4c4c4c;
	margin-bottom: 50px;
}