/*page d'acceuil */
#middle {
    width : 950px;
    margin:0 auto;
	padding:0;
    display: inline-block;
    background-color: #E3F3F4;
}

/*********page qui somme nous*************/
div#middle_image > img {
    width: 400px;
}
div#middle1 > p.nos_valeurs {
    font-size: 11.5pt;
    font-family: Questrial-Regular;
    text-align: justify;
}
div#middle1 > h1.nos_valeurs {
    font-size: 17pt;
    font-family: Questrial-Regular; 
    text-align: left;
}

/***************nos services ****************/
div#middle1 > p.service {
    font-size: 11.5pt;
    font-family: Questrial-Regular;
    text-align: justify;
}
div#middle1 > h1.service {
    font-size: 15pt;
    font-family: Questrial-Regular; 
}

/*************page recrutement **************/
div#middle1 > h1.recrutement {
    font-size: 18pt;
    font-family: Questrial-Regular;
    text-align: center;
}
div#middle1 > h2.recrutement {
    font-size: 16pt;
    font-family: Questrial-Regular;
    text-align: center;
}

div#middle1 >  form > center > div >  div > label {
    font-size: 14pt;
    font-family: Questrial-Regular;
    display: inline-block;
    text-align: start;
    font-weight: bolder;
}

div#middle1 >  form > center > div > div> input {
    width: 404px;
    height: 40px;
    font-family: Questrial-Regular;
    font-size: 12pt;  
    border: 2px solid #253D73;
    background-color: #94B6CD;
    color: #253D73;
    padding: 1px;
    font-size: 17pt;
}

.btn_recrutement {
        width: 250px;
    height: 40px;
    font-family: Questrial-Regular;
    font-size: 20pt;
    font-weight: bold;
    color: #253D73;
    background-image: url(image/btn_recrutement1.jpg);
    margin-top: 30px;
    margin-bottom: 50px;
}

#infos_form_lol {
    width: 850px;
}
#infos_form_lol > div {
    width: 450px;
    text-align: left;
    margin: 10px;
}

/************************************************************************/

div#middle2{
    width : 920px;
    height: 500px;
    margin:0 auto;
	padding:0;
    margin-top: 10px;
}

div#middle2 > center > img.image1_middle2 { 
    width: 915px;
    height: 485px;
}

/* page 2 qui somme nous */

#middle_page2 {
    width : 950px;
    margin:0 auto;
	padding:0;
    display: inline-block;
    margin-top: 10px;
}
#middle1_page2 {
    width : 910px;
    height: 238px;
    margin:0 auto;
	padding:0;
    border: 5px solid transparent;
    -webkit-border-image: url(image/back-head-1.jpg) 5% round; /* Safari 3.1-5 */
    -o-border-image: url(image/back-head-1.jpg) 5% round; /* Opera 11-12.1 */
    border-image: url(image/back-head-1.jpg) 5% round;
}

div#middle1_page2 > img.image1_middle1_page2 {
    width: 909px;
    height: 235px;  
}

#middle2_page2 {
    margin-top: 10px;
    width: 910px;
    height: 450px;
    margin:0 auto;
	padding:0;
    /*border-style: solid;
    border-width: 5px;
    border-color: #3870B6;*/
    border: 5px solid transparent;
    padding: 0px;
    -webkit-border-image: url(image/back-head-1.jpg) 10% round; /* Safari 3.1-5 */
    -o-border-image: url(image/back-head-1.jpg) 10% round; /* Opera 11-12.1 */
    border-image: url(image/back-head-1.jpg) 10% round;
    margin-top: 10px;
    display: flex;
}

div#middle2_page2 > img.image1_middle2_page2 { 
    width: 300px;
    height: 360px;
}

div#information {
    width : 500px;
    height: 360px;
    margin-left: 50px;
}

div#information > h1 {
    font-size: 14pt;
    font-family: sinkin-sans-700;
}
div#information > p, div#information > ul > li{
    font-size: 11pt;
    font-family: Questrial-Regular;
}

/***********middle page inscription ********************************************/
/*******************************************************************************/

/***********connexion *****************/

div#infos_connexion > form > div > label {
    font-size: 15pt;
    font-family: Questrial-Regular;
    color: #253D7C;
    margin-bottom: 10px;
    display: inline-block;
}

div#infos_connexion > form { 
    width: 255px;
}
div#infos_connexion > form > div { 
    text-align: left;
}

div#infos_connexion > form > div > input.info_connexion {
    width: 250px;
    height: 25px;
    border: 1px solid #253D7C;
    background-color: #94B6CD;
    margin-bottom: 10px;
}

div#infos_connexion > form > div > input.btn_connexion {
    width: 252px;
    height: 30px;
    margin-left: 152px;
    background-image: url(image/btn_back_inscription.jpg);
    width: 150px;
    height: 30px;
}

div#infos_connexion > button.btn_toInscription { 
    margin-top: 10px;
    height: 30px;
    width: 252px;
    background-image: url(image/btn_back_inscription.jpg);
}

div#infos_connexion{
    margin-top: 30px;
    width: 384px;
    margin-bottom: 30px;
}

div#infos_inscription > form > input.btn_inscription {
    font-size: 12pt;
    font-family: Questrial-Regular;
    font-weight: bold;
    color: #253D7C;
}

div#infos_inscription > button.btn_toConnexion {
    font-size: 12pt;
    font-family: Questrial-Regular;
    font-weight: bold;
    color: #253D7C;
}
/*********************connexion ***********************/
div#infos_inscription {
    
}
div#infos_inscription > form > label { 
    font-size: 15pt;
    font-family: Questrial-Regular;
    color: #253D7C;
    /*font-weight: bolder;*/
    display: inline-block;
    width: 200px;
    text-align: left;
    margin-left: -55px;
}

div#infos_inscription > form > input.info_inscription {
    width: 250px;
    height: 25px;
    border: 1px solid #253D7C;
    background-color: #94B6CD;
    margin: 10px;
}

div#infos_inscription > form > input.btn_inscription { 
    width: 250px;
    height: 30px;
    background-image: url(image/btn_back_compte.jpg);
}

div#infos_inscription > button.btn_toConnexion {
    width: 250px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;   
    background-image: url(image/btn_back_compte.jpg);
    border: 1px solid #7DA1BE;
    
}

.btn_connexion {
    font-size: 12pt;
    font-family: Questrial-Regular;
    font-weight: bold;
    color: #253D7C;
    width: 249px;
    height: 30px;
    margin-top: 10px;
    background-image: url(image/btn_back_compte.jpg);
}
.btn_toInscription {
    font-size: 12pt;
    font-family: Questrial-Regular;
    color: #253D7C;
    font-weight: bold;
    margin-top: 10px;
    width: 249px;
    background-image: url(image/btn_back_compte.jpg);
    margin-bottom: 10px;
    height: 30px;
        border: 1px solid #7DA1BE;
}

#infos_connexion > div > h1 {
    margin: 0;
    color: #243D7C;
    font-family: Questrial-Regular;
    line-height: 1.5;
    text-align:center;
    background-image: url(image/head_inscription.jpg);
    margin-bottom: 10px;
}
#infos_connexion { 
    border: 1px solid #243D7C;
}

#infos_inscription {
    margin-top: 30px;
    width: 375px;
    margin-bottom: 30px;
    border: 1px solid #243D7C;
}
#infos_inscription > div > h1 {
    margin: 0;
    color: #243D7C;
    font-family: Questrial-Regular;
    line-height: 1.5;
    text-align:center;
    background-image: url(image/head_inscription.jpg);
    margin-bottom: 10px;
}




/******************************** page profile.php**************************/
/***************************************************************************/
div#profile_infos {
    margin-top: 20px;
    margin-bottom: 20px;
}

div#profile_infos > table { 
    border-collapse: collapse;
}
div#profile_infos > table > tbody > tr > td{
    border: 3px solid #7DA1BE;
    height: 30px;
    width: 300px;
    text-align: center;
    font-size: 14pt;
    font-family: Questrial-Regular;
    color: #253D7C;
}

.material-icons {
    float: right;
}

form > button { 
    background-color: #7DA1BE;
} 

form > input {
    border: 1px solid #7DA1BE;
}

/**********************************Menu********************/
/************************************************************************/

div#menu {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
}

div#menu > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: transparent;
}

div#menu > ul > li {
    background-image: url(image/background_menu.jpg);
    margin-bottom: 10px;
    font-weight: bold;
}

div#menu > ul > li a {
    display: block;
    color: #253D73;
    font-size: 12pt;
    font-family: Questrial-Regular;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
div#menu > ul > li a:hover {
    background-color: #253D73;
    color: white;
}

div#menu > ul > li > i.material-icons { 
    float: left;
}

/************************Profile****************************/
div#profile {
    float: right;
    width: 650px;
    margin-right: 0px;
    color: #253D73;
    font-size: 15pt;
    font-family: Questrial-Regular;
}

.btn_rdv {
    width: 150px;
    height: 40px;
    color: #253D73;
    font-size: 15px;
    font-weight: bolder;
    font-family: Questrial-Regular;
}

.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
/************************demande menu **********************************/
div#demande {
    float: right;
    width: 560px;
    margin-right: 100px;
}

h1.title_head {
    margin-left: 20px;
}

label.info_fiche {
    width:160px;
    display: inline-block;
    font-family: Questrial-Regular;
    font-size: 10pt;
    margin-bottom: 10px;
}

div#demande > center > h2 {
    background-image: url(image/background_fiche.jpg);
    font-family: Questrial-Regular;
}

div#demande > form > center > h2 {
    background-image: url(image/background_fiche.jpg);
    font-family: Questrial-Regular;
}

div#demande > form > center > input[type='text']{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    border: 2px solid #7DA1BE;
}

div#demande > form > center > input[type='checkbox']{
    margin-left: 40px;
    margin-bottom: 20px;
    border: 2px solid #7DA1BE;
}

.btn_fiche {
    margin-top: 20px;
    margin-bottom: 50px;
    width: 560px;
    height: 25px;
    background-image: url(image/background_fiche.jpg);
    font-family: Questrial-Regular;
    font-size: 12pt;
    color: #253D73;
    font-weight: bolder;
}

div#demande >form > center > textarea {
    border: 2px solid #7DA1BE;
}

/*********************************************************************************/
/*****************************RDV ***********************************************/
div#rdv {
    float: right;
    width: 560px;
    margin-top: 20px;
}

div#rdv > form > h2 {
    margin-left: 0px;
    font-family: Questrial-Regular;
    color: #253D73;
}

div#rdv > form > input[type=date] {
    border: 3px solid #7DA1BE;
    margin: 10px;
    font-size: 20px;
    font-family: Questrial-Regular;
    color: #253D73;
}

div#rdv > form > select {
    border: 3px solid #7DA1BE;
    margin: 10px;
    font-size: 20px;
    font-family: Questrial-Regular;
    color: #253D73;
}

div#rdv > form > input[type=submit] {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    background-image: url(image/background_btn_rdv.jpg);
    font-family: Questrial-Regular;
    font-size: 12pt;
    color: #253D73;
    font-weight: bolder;
}

div#suivi {
    text-align: center;
    font-size: 15pt;
    font-family: Questrial-Regular;
    color: #253D73;
}

div#suivi > div > p {
    border: 1px solid #428bca;
}


/******************************************************************************/
/***************************suivi dossier**************************************/

#suivi_dossier {
    float: right;
    width: 600px;
    margin-top: 0px;
    margin-right: 50px;
    font-family: Questrial-Regular;
    color: #253D73;
}
.bs-wizard {margin-top: 40px;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #253D73; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #253D73; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: lightblue; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #7DA1BE; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

/******************************************************************************/
/************************payment facture **************************************/
div#payment_facture {
    float: right;
    width: 650px;
    margin-top: 0px;
    margin-right: 50px;
    font-family: Questrial-Regular;
    color: #253D73;
    font-size: 11pt;
}

div#payment_facture > table {
    border-collapse: collapse;
    text-align: center;
}
div#payment_facture > table > tbody > tr > th {
    border: 3px solid #7DA1BE;
    width: 160px;
}
div#payment_facture > table > tbody > tr > td {
    border: 3px solid #7DA1BE;
}

/***********************profile infos menu (editer le profile) *******************/
div#profile_infos {
    float: right;
    margin-right: 50px;
}

#modalites_paiement {
    margin-top: 10px;
    font-weight: bold;
    color: #253D73;
}
/*****************************************************************************/
/**********************middle  confirm demande *******************************/
#confirm_demande {
    font-family: Questrial-Regular;
    font-size: 15pt;
}

/***********************************************************************/
/****************************************8page tarifs******************/
div#middle > center > #tarifs1 {
    width: 250px;
    height: auto;
    text-align: center;
    margin: 10px;
    font-size: 11pt;
    font-family: Questrial-Regular;
}
div#middle > center >  #tarifs1 > h1{
    margin: 0;
    width: 200px;
    /* border: 2px solid #7DA1BE; */
    margin-left: 8px;
    font-size: 16pt;
    background-image: url(image/back_btn_tarifs.jpg);
    height: 30px;
    line-height: 1.5;
}
div#middle > center > #tarifs1 > img {
    width: 200px;
}
div#middle > center > #tarifs1 > button {
    width: 200px;
    height: 29px;
    font-size: 10pt;
    font-family: Questrial-Regular;
    color: #253D73;
    background-image: url(image/back_btn_tarifs.jpg);
    font-weight: bold;
}

#tarifs1 > p {
    width: 210px;
}
/**************************/
div#middle > #tarifs2 {
    width: 250px;
    height: auto;
    text-align: center;
    margin: 10px;
    font-size: 11pt;
    font-family: Questrial-Regular;
}
div#middle > #tarifs2 > h1{
    margin: 0;
    width: 200px;
    /* border: 2px solid #7DA1BE; */
    margin-left: 9px;
    font-size: 16pt;
    background-image: url(image/back_btn_tarifs.jpg);
    height: 30px;
    line-height: 1.5;
}
div#middle > #tarifs2 > img {
    width: 200px;
}
div#middle > #tarifs2 > button {
    width: 200px;
    height: 29px;
    font-size: 11pt;
    font-family: Questrial-Regular;
    color: #253D73;
    background-image: url(image/back_btn_tarifs.jpg);
    font-weight: bold;
}

#tarifs2 > p {
    margin: 0;
    border: 2px solid #7DA1BE;
    width: 176px;
    margin-left: 9px;
    padding: 10px;
    margin-top: -4px;
    margin-bottom: -1px;
}
#tarifs2 > li {
    margin: 5px;
    border: 2px solid #7DA1BE;
}
/**************************/
div#middle > #tarifs3 {
    width: 250px;
    height: auto;
    text-align: center;
    margin: 10px;
    font-size: 11pt;
    font-family: Questrial-Regular;
}
div#middle > #tarifs3 > h1{
    margin: 0;
    width: 200px;
    /* border: 2px solid #7DA1BE; */
    margin-left: 8px;
    font-size: 16pt;
    background-image: url(image/back_btn_tarifs.jpg);
    height: 30px;
    line-height: 1.5;
}
div#middle > #tarifs3 > img {
    width: 200px;
}
div#middle > #tarifs3 > button {
    width: 200px;
    height: 29px;
    font-size: 10pt;
    font-family: Questrial-Regular;
    color: #253D73;
    background-image: url(image/back_btn_tarifs.jpg);
    font-weight: bold;
}
#tarifs3 > p {
    margin: 0;
    border: 2px solid #7DA1BE;
    width: 176px;
    margin-left: 9px;
    padding: 10px;
    margin-top: -4px;
    margin-bottom: -1px;
}

/**************************/
div#middle > #tarifs4 {
    width: 250px;
    height: auto;
    text-align: center;
    margin: 10px;
    font-size: 11pt;
    font-family: Questrial-Regular;
}
div#middle > #tarifs4 > h1{
    margin: 0;
    width: 200px;
    /* border: 2px solid #7DA1BE; */
    margin-left: 8px;
    font-size: 16pt;
    background-image: url(image/back_btn_tarifs.jpg);
    height: 30px;
    line-height: 1.5;
}
div#middle > #tarifs4 > img {
    width: 200px;
}
div#middle > #tarifs4 > button {
    width: 200px;
    height: 29px;
    font-size: 10pt;
    font-family: Questrial-Regular;
    color: #253D73;
    background-image: url(image/back_btn_tarifs.jpg);
    font-weight: bold;
}
#tarifs4 > ul > p {
    margin: 5px;
}
#tarifs4 > p {
    margin: 0;
    border: 2px solid #7DA1BE;
    width: 176px;
    margin-left: 9px;
    padding: 10px;
    margin-top: -4px;
    margin-bottom: -1px;
}
/*********** tarifs forms*************/
#tarifs_form1, #tarifs_form2, #tarifs_form3, #tarifs_form4 {
    margin-top: 10px;
    font-family: Questrial-Regular;
    font-size: 10pt;
    font-weight: bold;
}

#tarifs_form1 > form > label, #tarifs_form2 > form > label, #tarifs_form3 > form > label, #tarifs_form4 > form > label {
    
}

#tarifs_form1 > form > input, #tarifs_form2 > form > input, #tarifs_form3 > form > input, #tarifs_form4 > form > input {
    width: 140px;
    margin: 2px;
    border: 2px solid #7DA1BE;
}

#btn_validation {
    width: 200px;
    height: 29px;
    font-size: 10pt;
    font-family: Questrial-Regular;
    color: #253D73;
    background-image: url(image/back_btn_tarifs.jpg);
    margin-top: 10px;
}

#head4 {
    padding: 14px;
}
img#img_qsn {
    width: 911px;
    border: 2px solid #7DA1BE;
}


#lol {
    width: 10px;
    margin-right: 5px;
}                                                                                       
.nos_services_img {
    width: 125px;
}

#middle_1 {
    display: inline-flex;
    border: 2px solid #7DA1BE;
    width: 912px;
    margin-top: 10px;
}
#middle_1 > div {
    margin: 20px;
    width: 150px;
}
#middle_1 > div > p {
    font-family: Questrial-Regular;
    font-size: 13pt;
    background-color: #94B6CD;
    padding: 10px;
}
#middle1 {
    width: 910px;
    margin-top: 10px;
}

#recrutement_image {
    width: 912px;
    height: 312px;
}

#infos {
    overflow: auto;
    margin: 20px;
    padding: 5px;
    border: 1px solid;
    font-size: 15pt;
    line-height: 40px;
    height: 250px;
    width: 850px;
    background-color: #94B6CD;  
    font-family: Questrial-Regular;
}

#tarifs_img {
    width: 201px;
}
#tarifs_1 > div {
    width: 205px;
    margin: 16px;
}
#tarifs_1 > div > h1 {
    font-family: Questrial-Regular;
    padding: 10px;
    background-image: url(image/head_img_tarifs.jpg);
    font-size: 16pt;
    margin: 0;
}
#tarifs_1 > div > div > p {
    margin: 0;
    border-bottom: 2px solid #7DA1BE;
    height: 40px;
    line-height: 2.5;
    font-family: Questrial-Regular;
}
#tarifs_1 > div > a{
    display: block;
    width: 205px;
    height: 30px;
    color: #253D73;
    background-image: url(image/head_img_tarifs.jpg);
    font-family: Questrial-Regular;
    text-decoration: none;
    line-height: 1.7;
    font-weight: bolder;
    font-size: 13pt;
}

.tarifs_form {
    text-align: left;
    font-family: Questrial-Regular;
    border: none;
    margin-top: 10px;
}
.tarifs_form > label {
    font-size: 13pt;
    font-weight: bolder;
}
.tarifs_form > input {
    width: 196px;
    height: 25px;
    background-color: #7DA1BE;
    border: 1px solid #253D73;
}

.tarifs_form > button {
    width: 198px;
    height: 30px;
    color: #253D73;
    background-image: url(image/tarifs_btn.jpg);
    font-family: Questrial-Regular;
    margin-top: 10px;
    font-size: 13pt;
    font-weight: bolder;
}
.tarifs_form {
    display: none;
}
#tarifs_1 > div > div {
    font-size: 13pt;
}