/* Theme
*couleur menu + boutons + tableaux : #444444
*couleur fond des pages (formulaires): #f2f2f2




/*--------------Mise en page globale---------------*/

body{
    font-family: Verdana, Arial, serif;
	background-color: #ffffff;

}
#div_body{
	width:90%;
    min-width:350px;
	margin:auto;
	max-width:1300px;
    /*border:solid 1px red;*/
}

#ban_left{
    /*border:solid 1px blue;*/
	display:flex;
	margin:10px auto;
	justify-content:center;

}
#ban_left img{
    height:auto;
    width:100%;
    max-width:965px;
    border-radius: 10px;
}
/*@media (screen){
/*rendre la baniere responsive
}*/

#pied{
    /*pied de page*/
    padding:10px;
    margin-top:20px;
    margin-bottom: 0px;
    padding-bottom: 0px;

    text-align: center;
    font-weight: bold;

}

/*----------- Titres ------------*/
h1{
    display:flex;
    justify-content: center;
    padding:5px 10px;
    border-color:#444444;
    font-weight:bold;
    text-transform: uppercase;
    font-size:24px;
    color:black;
    /*background-color: white;*/
}

.top_text{
    margin:0px;
    padding:0px;

}

/* ---------- bulle d'aide ------------*/
.bulle{
    display:inline-flex;
    flex-direction: column;
    margin:auto;
    margin-bottom:10px;

    padding:10px 20px;
    background-color: #fafafa;
    border-radius: 10px;
}

/*-----boutons-----*/
.btn{
    /*couleurs boutons*/
    background-color: #444444;
	box-shadow:2px 2px 2px #333333;
	color: white;
    border: none;
	border-radius: 6px;
	cursor: pointer;
    transition: all 200ms ease-out;
}
.btn:hover{
    background-color:#606060;
}
.btn:active{
    box-shadow:2px 2px 2px #000000 inset;
    background-color:#3A3A3A;
}

/* --------- inputs -----------*/
.input{
    display: inline-block;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}
 label{
     font-weight:bold;
 }

 select{
     background-color: #f5f5f5;
 }

/* ---- msg erreur ------------*/
.error_input{
    color:#cc0000;
    font-style:italic;
}
.error_input em{
    text-decoration: underline;
}

/* --- msg succes ----*/
.succes_input{
    color:#54b531;
    font-style:italic;
}



/* ----------- tableaux ------------*/
table{
    border-collapse: collapse;
    display:inline-flex;

    justify-content:center;
    table-layout:fixed;




}
th{
    background-color:#444444;
	color:#ffffff;
}
td{
    word-break:break-word;
    font-size: 14px;
}


tr{
    background-color:#ffffff;
	color:#111111;
}
th,td{
    min-width:50px;
    border: solid 1px #999999;
}
tr:nth-child(odd){
    background-color:#eeeeee;
}


/*----------- formulaires ------------*/
.form{
    border: solid 1px #bbbbbb;
	border-radius:8px;
	box-shadow: 2px 2px 3px #555555;

    background-color:#f2f2f2;
    color:#000000;

    margin: auto;

    margin-bottom: 5px;
    padding: 20px 20px;

    text-align: center;

}
.form legend{
    border: solid 1px #bbbbbb;
    border-radius:8px;
	box-shadow: 2px 2px 2px #555555;

    background-color: white;
	color:#111111;

    padding: 10px 20px;
    font-size: 16px;

    font-weight: bold;
}

/* ----- icones cliquables genre fleches vertes ou croix rouges ---*/
.click_icon{
    filter:drop-shadow(.75px .75px 1px #444444);
    transition: all 100ms ease-out;
}
.click_icon:hover{
    scale:1.25;
    filter:drop-shadow(1.5px 1.5px 1.5px #444444);
}

.return_icon{
    /*boutons retours*/
    display:block;
    margin:auto;
    padding:10px;
    margin-top:10px;
    margin-bottom:10px;
    transition: all 100ms ease-out;
    filter:invert(26.5%) drop-shadow(2px 2px 2px #444444);

}
.return_icon:hover{
    scale:1.1;
    filter: invert(26.5%) drop-shadow(3px 3px 3px #444444);
}


/*--------------Page d'accueil (acceuil.html)-------------*/

#login_form{
	/* formulaire */
    width:40%;
    min-width:300px;
    max-width: 1000px;

}
#login_form legend{
	/* legende du formulaire */
    margin: auto;
}

#login_form .user, #login_form .password{
	/*user et password*/
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;

}
#inputs_login{
	text-align:left;
}
#login_form input[type=submit] {
	/*bouton login (couleurs et styles dans la partie boutons) */
	width: 60%;
	padding: 14px 20px;
	margin: 8px 0;
}

#login_form .error_input{
    margin:0px;
}

#login_form #img_project{
    margin-top:20px;
}

/* --------- Menu ---------*/


#monmenu{
	/*menu*/
	margin:auto;
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
    /*border: solid 1px blue;*/

}
#monmenu a{
	/*cases du menu*/
	border-radius:5px 5px 0px 0px;
	box-shadow: 2px 2px 3px #555555;

	padding: 8px 10px;
	margin: 1px 1px;

	background-color:#444444;
	color:#ffffff;

	cursor: pointer;
	text-align:center;
	text-decoration:none;

	transition: all 200ms ease-out;
}

#monmenu a:hover , #monmenu a:focus{
	/* animation grossissement du bouton */
	background-color:#ffffff;
	color:#444444;
	scale:1.1;
}


/* ------ Page Recherche (recherche.html) -------*/


#search_form{
	/* formulaire */
    /*min-width:300px;*/
	display:flex;
	flex-direction:column;
}

#search_form .error_input,#search_form .help{
    text-align:left;
}

#search_form #search_inputs{
	/* div des inputs */
	margin: auto;
    margin-bottom:10px;

	display:flex;
    justify-content: center;
	flex-wrap:wrap;
}
#search_form #search_inputs div{
	/* div de chaque input avec label+input */
	margin: 8px 2px;
	display:flex;
	flex-direction: column;
}
#search_form #search_inputs div label{
	text-align:left;
    font-weight:bold;
}


#search_form input[type="text"],#search_form #search_inputs select{
	/*inputs de type texte + select*/
	width: 100%;
	padding: 6px 10px;
}

#inputs_login{
	text-align:left;
}

#search_form input[type=submit] {
	/*boutons de recherche*/
	width: 200px;
	padding: 14px 20px;
	margin: auto;
}

#search_attendee_table{
    /*tableau des resultats de la recherche des participants */
    width:100%;
    margin-top: 20px;

}

#search_attendee_table th,#search_attendee_table td{
    /*dimensions des cases*/
    padding: 5px 20px;
    max-width:250px;
    min-width: 70px;
}



/* ------------ Page Comptes (compte.html) ----------------*/


#account_inputs{
    /*div contenant les inputs*/
    display:inline-flex;
    flex-direction: column;
    margin:auto;
}
#account_inputs>div{
    display:flex;
    justify-content:flex-end;
    align-items: center;
}


#account_inputs .input{
	padding: 6px 10px;
    margin: 5px 10px;
    width: 350px;

}
#account_inputs_form input[type=submit] {
	/*bouton de recherche*/
	width: 200px;
	padding: 14px 20px;
	margin: auto;
}

/*tableau des controles*/
#account_control_form table{
    width:100%;
    margin-top: 20px;
}
#account_control_form th,#account_control_form td{
    padding: 5px 20px;
    max-width:250px;
}
#account_email_form #settings{
    margin:auto;
    width:70%;
}
#account_email_form #settings .input{
    padding:3px 10px;
    width:100%;
    min-width:200px;
}
#account_email_form #settings .btn{
    padding:3px 10px;
}

/*tableau des parametres des mails*/
#account_email_form #settings table{
    max-width: 95%;
    margin-top: 20px;
    margin-bottom: 20px;
}
#account_email_form #settings th,#account_email_form #settings td{
    padding: 5px 20px;
    max-width:400px;
    min-width: 80px;
}
#account_email_form #settings td{
    background-color: #ffffff;
}

/*tableau d'affichage des mails*/
#account_email_form #email_table table{
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 95%;

}
#account_email_form #email_table th{
    padding: 5px 20px;
    min-width: 50px;
    max-width: 200px;
}
#account_email_form #email_table td{
    padding: 5px 5px;
    background-color: #ffffff;
    max-width: 200px;
}
#account_email_form #email_table td:nth-child(2),
#account_email_form #email_table td:nth-child(3),
#account_email_form #email_table td:nth-child(4){
    text-align:left;

}
#account_email_form #email_table th:nth-child(4), #account_email_form #email_table td:nth-child(4){
    max-width:600px;
    min-width:200px;
}



/* field parametres */
#account_parameters_form{
    display:flex;
    flex-direction: column;
}
#account_parameters_form #mandatory_parameters{
    display:flex;
    flex-direction: column;

}
#account_parameters_form #mandatory_parameters .conteneur{
    display:inline-flex;
    flex-direction: column;
    text-align:right;
    margin:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:20px 45px;
    background-color:#fafafa;
    border-radius: 10px;


}
#account_parameters_form #mandatory_parameters .conteneur div{
    /* conteneur de chaque parametre label+checkbox */
    margin:2px 0px;
}
#account_parameters_form #mandatory_parameters input[type=submit] {
	/*boutons valider*/
	padding: 5px 15px;
	margin: auto;
    margin-top: 10px;
}

#account_parameters_form #account_img{
    display:inline-flex;
    flex-direction: column;
    text-align:left;
    margin:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:20px 40px;
    background-color:#fafafa;
    border-radius: 5px;

}
#account_parameters_form #account_img div{
    padding-top:8px;
    padding-bottom:12px;
    padding-left: 10px;

}
#account_parameters_form #account_img input{
    padding: 3px 10px;
}
#account_parameters_form #account_img input[type='file']{
    margin-right:20px;
    margin-left:20px;
}
#account_text_form .editor{
    margin-bottom: 20px;
}
#account_text_form .text_editor{
    padding:20px;
    max-width:1000px;
    min-width:400px;


    text-align: left;
    margin-bottom:20px;
    margin:auto;
}

#account_text_form select{
    max-width:1000px;
    min-width:400px;
    width:50%;

    padding:8px 5px;
    margin:auto;

}

#account_text_form textarea{
    margin:auto;
    width:100%;

}
#account_text_form .btn{
    padding: 5px 10px;
    margin-top:10px;
    margin-bottom:40px;
    margin:auto;
}




/* ----------------New Table (new_table.html) --------------*/

#toolTipBox
{
    /* affichage des coordonnées de la où l'on clique */
    display:none;
    padding:4px;
    font-weight:bold;

    border:black solid 1px;

    background-color:#444444;
    color:#ffffff;
}

#new_table_form{
    /*affiche les boites en lignes */
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    align-items: center;

}

#view_map_box #background{
    display:flex;
}
#view_map_box #background{

    border-radius:10px;
}

#create_table_box{
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
}
#create_table_box table{
    text-align: center;
    width:100%;
    margin-top: 0px;
}
#create_table_box th{
    padding: 5px 20px;
}
#create_table_box td{
    padding: 0px 5px;
    background-color: #ffffff;
}
#create_new_table{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:5px 20px;
}

#create_table_img{
    background-color: white;
    display:flex;
    align-items: center;
    margin:auto;
    padding:5px 20px;
    border-radius:5px;
    margin-bottom:20px;
}
#create_table_img img{
    margin:0px 12px;
}
#list_tables{
    padding:10px;
}


h2{
    margin-top:10px;
    margin-bottom:8px;
}

/*------------------- new_table_ajax.html --------------*/
#new_table_body{
    /*formulaire (contenu de la page)*/
    display:flex;
    flex-direction: column;
    justify-content: center;
}
#new_table_body #img_table{
    margin:auto;
    margin-bottom:10px;
    padding:10px;
    background-color: white;
    border-radius: 10px;
}
#new_table_inputs{
    /*disposition en ligne des inputs*/
    margin:auto;
    display: flex;
    margin-bottom:10px;
    margin-top:10px;
    flex-wrap: wrap;
}
#new_table_inputs>div{
    /*disposition en colonne au sein de chaque div qui contient label+input*/
    display:flex;
    flex-direction: column;
    text-align: left;
}

#new_table_inputs>div input, #new_table_inputs #restore{
    max-width:100px;
    padding:3px 5px;
    margin:1px 2px;
}

#reserve_input{
    margin:auto;
    margin-top:5px;
    margin-bottom:5px;
    flex-wrap: wrap;
}
#reserve_input input{
    padding:5px 5px;
}
#new_table_body .btn{
    width: 200px;
	padding: 14px 20px;
	margin: auto;
    margin-top:5px;
    margin-bottom:30px;
}
#new_table_body .btn{
    width: 200px;
	padding: 14px 20px;
	margin: auto;
    margin-top:5px;
    margin-bottom:30px;
}
#new_table_body #restore{
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left:25px;
}
#new_table_body #btn_restore{
    width:75px;
    text-align: center;
	padding: 3px 10px;
	margin: auto;
    margin:0px;
}

/*tableau d'affichage des tables*/
#tables_table table{
    width:100%;
    margin-top: 20px;
}
#tables_table th{
    padding: 5px 20px;
    max-width:200px;
}
#tables_table td{
    padding: 0px 5px;
    max-width:200px;
}

#new_table_body #last_table{

    text-decoration: none;
    text-align: center;
    padding:3px 5px;
    margin:0px 2px;
    max-width:100px;

}


/*------------ Page du plan de table auth.html ----------------*/

#auth_form #legend{
    /*legende du plan*/
    display:inline-flex;
    flex-direction: column;
    margin:auto;
    background-color: #fafafa;
    padding:10px 20px;
    border-radius:10px;
    margin-top:10px;
    margin-bottom:10px;
    word-wrap: break-word;
	text-decoration: none;
}
#auth_form #legend h2{
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    font-size:18px;
}
#auth_form #legend>div{
    display:inline-flex;
    text-align:left;
    align-items: center;
}
#table_dispo_legend, #table_complete_legend{
    border:solid;
    margin:3px;
    margin-right: 10px;
}
#auth_form #background{
    border-radius: 10px;
    margin:auto;

}


/*---------------- Statistiques (stats.html) ---------------*/
#stat_form{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.stat_global>table{
    /* tableau des stats globales*/
    width:100%;
    margin-bottom: 10px;
}
.stat_global th{
    background-color:#ffffff;
	color:#111111 ;

    padding: 5px 20px;
    max-width:300px;
    height:30px;
}
.stat_global tr:nth-child(odd) th{
    background-color:#eeeeee; 
}

.stat_global td{
    padding: 5px 20px;

}

.stat_table table{
    /* tableau des tables*/
   
    margin-bottom: 10px;
    border-radius: 10px;
}
.stat_table th{
    padding: 5px 20px;
    max-width:200px;
}
.stat_table td{
    padding: 5px 20px;

}


/*---------------- selection d'une table (participant.html) -----------------*/

#attendee_form{
    display:flex;
    flex-direction: column;
}

#attendee_help,#attendee_help_admin{
    display:inline-flex;
    flex-direction: column;
    margin:auto;
    margin-bottom:10px;

    padding:10px;
    background-color: #fafafa;
    border-radius: 10px;
}

#table_statut{
    /* partie qui indique le statut de la table */
    display:inline-flex;
    flex-direction: column;
    margin:auto;

    margin-bottom:10px;

    padding:10px;
    background-color: #fafafa;
    border-radius: 10px;

}
#table_statut .btn{
    padding:6px 12px;
    margin-top:10px;
}
#table_statut .input{
    padding: 8px 10px;
    margin-top:8px;
    width:100%;
}


#table_statut .div_statut{
    padding:10px 10px;
}

#table_statut .div_statut:nth-child(2){

    border-top: dashed  #444444 ;
    border-bottom: dashed #444444 ;

    border-width: 1px;
}

#display_statut{
    font-size:18px;
    font-weight: bold;
}
#table_statut p {
    padding:0px;
    margin:0px;
}

#attendee_table_form table{
    /* tableau des participants à cette table */
    width:100%;
    margin-top: 20px;
}
#attendee_table_form th{
    padding: 3px 10px;
    max-width:300px;
}
#attendee_table_form td{
    padding: 2px 3px;
    max-width:300px;
}

#attendee_table_form .input, #attendee_table_form .btn{
    padding: 4px 5px;
    margin-top:5px 5px;
    width:100%;
}
#attendee_table_form a{
    text-decoration: none;
}


.return_button{
    display:flex;
    justify-content: center;
}

/*------------ Export PDF -------------*/
#export_form{
    display:flex;
    flex-direction: column;
}
#export_form .btn{
    width: 200px;
	padding: 14px 20px;
    margin-top:15px;
    margin:auto;
}

/*---------------- Move.html -----------------*/
#move_form #move_table{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

#move_form #move_table .input{
    padding: 5px 10px;
    margin-top: 3px;
    width:100%;

}
#move_form #move_table>div{
    display:flex;
    flex-direction: column;
    text-align: left;
    margin:2px 2px;
    max-width:200px;
    min-width:125px;
}
#move_table>div:nth-child(1),#move_table>div:nth-child(2),#move_table>div:nth-child(4),#move_table>div:last-child{
    /* input des noms prenoms company */
    width:125px;
}
#move_table>div:nth-child(3){
    /* input des mails */
    min-width:180px;
}
#move_form #move_table p{
    text-align: center;
    margin-top:0px;
    padding-top: 6px;
}

#move_form .btn{
    width: 200px;
	padding: 14px 20px;
	margin: auto;
    margin-bottom:20px;

}

#move_form table{
    /* tableau des tables*/
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;

}
#move_form th{
    padding: 5px 20px;
    max-width:250px;
}
#move_form td{
    padding: 5px 20px;
}

#move_form tr:hover{
    background-color: #bbbbbb;
}


/*-------------- Email (emailing.html) -------------------*/
#mail_form{
    display:flex;
    flex-direction: column;
    justify-content: center;

}
#mail_form .input{
    padding: 8px 10px;
    margin-top: 3px;
    width:500px;
}
#mail_options{
    display:inline-flex;
    flex-direction:column;
    text-align: right;
    margin:auto;
    margin-bottom:20px;

    padding:20px 45px;
    background-color:#fafafa;
    border-radius: 10px;
}
#mail_contacts{
    margin-top:10px;
    text-align: center;
}

#mail_object,mail_title{
    display:inline;
}


.popup table{
    text-align: center;
    width:100%;
    margin-top: 0px;
    margin-bottom:10px;
}
.popup th{
    padding: 5px 10px;
    background-color: #ffffff;
}
.popup td{
    padding: 5px 10px;
}


/* Popup container (help)*/
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin:auto;
}

/*tableau dans le popup d'aide*/
.popup table{
    text-align: center;
    width:100%;
    margin-top: 0px;
    margin-bottom:10px;
}
.popup th{
    padding: 5px 10px;
    background-color: #ffffff;
    color:#111111;
}
.popup tr:nth-child(odd) th{
    background-color: #eeeeee;
}
.popup td{
    padding: 5px 10px;
}
.popup p{
    font-weight: bold;
}



/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    background-color: #555555;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left:-150px;
    width:400px;
    box-shadow:0px 0px 3px black;
}

/* Popup arrow */
.popup .popuptext::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
 visibility: visible;
 -webkit-animation: fadeIn 0.2s;
 animation: fadeIn 0.2s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}

@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity:1 ;}
}

#mail_editor {
    max-width:1000px;
    margin:auto;
    text-align:left;
}

#mail_form .btn{
    padding:5px 0px;
    margin:auto;
    margin-top:10px;
    margin-bottom:20px;
    width:120px;

}

/*--------------------- Policy agreement (policy.html) --------------------*/

#policy_text{
    display:inline-block;
    text-align: left;
    width:70%;
    margin:auto;
    background-color: #fafafa;
    padding:10px 20px;
    border-radius:10px;
}