/*
   modales-cselaf.css 
   CSELignes - Modales Box
   V1.0
   CSS
   Created by Fabian hennel de beaupreau on 2020-06-05.
   V.1 - HTML 
*/
/*@font-face {
    font-family: 'Font Awesome 5 Free';
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.ttf') format('truetype');
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.ttf') format('truetype');
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.eot');
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.svg#fontawesome') format('svg'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.woff') format('woff'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-regular-400.woff2') format('wof2'),
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.eot');
    src:url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.svg#fontawesome') format('svg'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.woff') format('woff'),
        url('../vendor/fontawesome-free-5.7.2-web/webfonts/fa-solid-900.woff2') format('wof2'),
    font-weight: normal;
    font-style: normal;
}*/
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
  
body, html {
    font-size: 100%;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

p.intro {
    font-weight:300;
    font-size:1em;
    color:#9da2a6;
}
.no-padding{
    padding:0;
}
.no-padding-t-b{
    padding-top:0;
    padding-bottom:0;
}
.no-padding-l-r {
    padding-right:0;
    padding-left:0;
}
.no-padding-r{
    padding-right:0;
}
.no-padding-l{
    padding-left:0;
}
.padding-lr-5px{
    padding-left:5px;
    padding-right:5px;
}
.letter-space-1{
    letter-spacing:-1px;
}


/*****MODALES******/

/***Eléments génériques***/

.modal{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(51,118,177,0.6);
    display:none;
}
.modal-dialog{
    width:768px;
    padding:20px;
    background:transparent;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
}

.modal-content {
    border-radius: 3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:0px;
    padding:20px 20px 0 20px;
}

.modal-header {
    border-width:1px 0px 0px 0px;
    border-color:transparent;
    padding: 0 25px;
    text-align:center;
}
.modal-header .row.section{
    margin-bottom: 30px;
}
.modal-header .row.section.no-margin-b {
    margin-bottom: 0;
}
.modal-header .logo-cseligne{
    display:inline-block;
    text-align:left;
    padding:10px 25px 10px 0px;
    width:25%;
    height:auto;
    margin: 0;
    vertical-align:middle;
}
.modal-header .logo-cseligne.center{
    display: block;
    padding: 0;
    width: 30%;
    height:auto;
    margin: 0 auto;
}
.modal-header .logo-cseligne img{
    width:100%;
    height:auto;
}
.modal-header .texte-entete{
    display:inline-block;
    width:auto;
    text-align:left;
    padding:10px 10px 10px 25px;
    vertical-align: middle;
}
.texte-entete.center{
    display:block;
    text-align:center;
    padding:0 25px;
}
.modale_h1{
  font-size: 18px;
  font-weight: 400;
  text-transform:uppercase;
  color: #4F6570;
}
.modale_h1 br{
    display:none;
}
.modale_h1 span.texte-normal,
.btn span.texte-normal{
  text-transform: none;
  white-space: nowrap;
}
.modale_h1 span.texte-rouge{
    color:#9F031F;
    font-weight:600;
}
.modal-header .texte-entete p.texte-instruction{
    font-size: 14px;
    font-weight: 300;
    color: #4F6570;
}

.modal-body {
    padding: 15px;
    position: relative;
}
p.texte-body{
    font-size: 16px;
  font-weight: 400;
  color: #4F6570;
  margin-bottom:25px;
  margin-top:0;
  line-height: 1.7em;
}
a.a-red{
    text-decoration:underline;
    color:#9F031F;
}
.modal-footer {
    border-width:1px 0px 0px 0px;
    border-color:transparent;
    padding:0px 15px;
    margin-bottom:0;
    text-align: center;
    font-size:13px;
    font-weight: 200;
}
.modal-footer br{
    display:inline;
}
.modal-footer a{
    text-decoration:underline;
}
#modal_box_confirm .modal-dialog,
#modal_box_error .modal-dialog,
#modal_box_mdp .modal-dialog{
    width:490px;
    padding:20px;
    background:transparent;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;  
}
.btn.btn-envoi-form {
  background: rgba(51,118,177,1);
  color: #ffffff;
  height:40px;
  vertical-align:middle;
  letter-spacing:1.2px;
  margin:10px 40px;
  display:inline-block;
  font-size:16px;
  font-weight:400;
  line-height: 1.42857143;
  text-align:center;
  white-space: nowrap;
  border: 1px solid transparent;
  padding: 0 30px;
  border-radius: 20px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
}
.btn.btn-envoi-form.center{
    font-size:16px;
    padding:0 30px;
    display:block;
    margin : 10px auto;
}

/***Specifique Form***/
form.modale_cse {
  width: 100%;
  margin: 0 auto;
}
form.modale_cse .colum-form-group{
    display:inline-block;
    padding:0 25px 0 25px;
}
form.modale_cse .group,
form.modale_cse .group.date-group {
  position: relative;
  margin: 25px 0;
}

form.modale_cse textarea {
  resize: none;
}
/*** Icone Before fields ***/
.icons::before {
    display: inline-block;
    position:absolute;
    top:8px;
    left:-25px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

.matricule-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f2bb";
}
.nom-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}
.datebirth-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f073";
}
.email-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f0e0";
}
.phone-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f095";
}
.mdp1-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f084";
}
.mdp2-icone::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06a";
}
/**/
/*****form elements ***/
form.modale_cse input,
form.modale_cse textarea {
  background: #ffffff;
  color: #4F6570;
  font-size: 16px;
  font-weight:200;
  padding: 8px 10px 8px 5px;
  /*margin-left:10%;*/
  display: inline-block;
  width: 100%;
  border: none;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  -moz-border-radius-topleft:3px;
  -moz-border-radius-topright:3px;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-bottomright:0;
  -webkit-border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-bottom-right-radius:0;
  border-bottom: 1px solid #c6c6c6;
  -moz-border-bottom-colors: 1px solid #c6c6c6;
  box-shadow: 0px 0px 15px 0px rgba(42,42,42,0);
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}
/**patch pour cacher les arrows sur input number**/
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin:0;
    }
input[type="number"]{
    -moz-appearance:textfield;
}
/***/

form.modale_cse input:focus,
form.modale_cse textarea:focus {
  outline: none;
  box-shadow: 0px 0px 15px 0px rgba(42,42,42,.20);
  
}
form.modale_cse input ~ label,
form.modale_cse textarea ~ label {
  top: 10px !important;
  font-size: 14px !important;
  font-weight:300 !important;
  color: rgb(121,121,121) !important;
  background:#ffffff;
}
form.modale_cse input ~ label span.error{
  top: 10px !important;
  font-size: 12px !important;
  font-weight:400 !important;
  color: #9F031F !important;
   background:#ffffff;
}

form.modale_cse input:focus ~ label,
form.modale_cse input:valid ~ label,
form.modale_cse textarea:focus ~ label,
form.modale_cse textarea:valid ~ label{
  top: -14px !important;
  font-size: 10px !important;
  color: #000000 !important;
  background:transparent;
}
/**test check sur label**/

form.modale_cse input:valid ~ label::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    display:inline-block;
    /*position:absolute;
    top:0px;
    right:-17px;*/
    padding-right:5px;
    font-size:85%;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color:#4F6570;
}
form.modale_cse input ~ label::before{
    display:none;
}
span.error::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
    display:inline-block;
    padding-left:10px;
    font-size:90%;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


form.modale_cse input:focus ~ .bar:before,
form.modale_cse textarea:focus ~ .bar:before {
  width: 100%;
}
span.error,
form.modale_cse input:focus ~ label span.error,
label.warning,
label.error.warning{
  top: -14px !important;
  text-align:left !important;
  font-size: 10px !important;
  font-weight:300 !important;
  color: #9F031F !important;
  background: transparent; 
}
form.modale_cse input[type="password"] {
  letter-spacing: 0.3em;
}
/***specifique date***/
form.modale_cse .date-group input{
    line-height:1.42857143 !important;
}
form.modale_cse .date-group input.form-control,
form.modale_cse .date-group input.form-control:focus{
    height:auto !important;
    padding: 8px 10px 8px 5px;
    border:none;
    border-bottom: 1px solid #c6c6c6;
    -moz-border-bottom-colors: 1px solid #c6c6c6;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-bottomright:0;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-bottom-right-radius:0;
  
}
/***/

form.modale_cse label.input-label {
  color: #c6c6c6;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

form.modale_cse .bar {
  position: relative;
  display: block;
  width: 100%;
}

form.modale_cse .bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #4F6570;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  left: 0%;
}
form.modale_cse .champ.error .bar:before{
    background:#9F031F;
}
form.modale_cse .btn-box {
  text-align: center;
  margin: 50px 0;
}

form.modale_cse .btn.btn-envoi-form.inactif {
  background: rgba(51,118,177,0.5);
}
form.modale_cse .btn.btn-envoi-form.inactif:hover,
form.modale_cse .btn.btn-envoi-form.inactif:active,
form.modale_cse .btn.btn-envoi-form.inactif:focus {
  background: rgba(51,118,177,0.5);
  /*box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);*/
}
form.modale_cse .btn.btn-envoi-form:hover,
form.modale_cse .btn.btn-envoi-form:active,
form.modale_cse .btn.btn-envoi-form:focus {
  background: rgba(51,118,177,0.8);
  /*box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);*/
}




/******Fin MODALES*****/



/*****************************************************************************/
/*-------COMPORTEMENT D'ÉLÉMENTS En dessous DE 769PX DE LARGEUR DE SCREEN------*/

@media screen and (max-width: 769px) {
    
/***************************************/
/*.modale_h1 br{
    display:inline;
}*/

.modal-dialog{
    width:765px;
    padding:20px;
}

.modal-header {
    padding: 0 25px;
}
.modal-header .row.section{
    margin-bottom: 25px;
}
.modal-header .logo-cseligne{
    display:inline-block;
    padding:10px 25px 10px 0px;
    width:25%;
    margin: 0;
}

.modal-header .texte-entete{
    display:inline-block;
    width:auto;
    text-align:left;
    padding:10px 10px 10px 25px;
}
.modal-body {
    padding: 15px;
    position: relative;
}
form.modale_cse {
  width: 100%;
  margin: 0 auto;
}
form.modale_cse .colum-form-group{
    display:inline-block;
    padding:0 25px 0 25px;
}
form.modale_cse .group,
form.modale_cse .group.date-group {
  margin: 25px 0;
}    
 form.modale_cse .btn-box,
 form.modale_cse .btn-box.center {
  margin: 50px 0;
}

/*******769****/

}
/***************/

/*****************************************************************************/
/*-------COMPORTEMENT D'ÉLÉMENTS En dessous DE 490PX DE LARGEUR DE SCREEN------*/

@media screen and (max-width: 490px) {
    
/***************************************/
/*.modale_h1 br{
    display:inline;
}*/

.modal-dialog{
    padding:0;
}    
.modal-header{
    padding:0;
}
.modal-header .row.section{
    margin-bottom: 0px;
}
.modal-header .logo-cseligne{
    display: block;
    padding: 0;
    width: 30%;
    margin: 0 auto;
}
.modal-header .texte-entete{
    display: block;
    width: 100%;
    text-align: center;
    padding: 25px 25px 0 25px;
}
.modal-body{
    padding:0;
}
.btn.btn-envoi-form.center{
    padding:0 20px;
}
form.modale_cse .colum-form-group {
    display:block;
    padding: 0 0 0 25px;
}
form.modale_cse .group{
    margin-top:30px;
}
form.modale_cse .group.date-group {
    margin: 25px 0 0 0;
}
form.modale_cse .btn-box {
    margin: 30px 0 0 -25px;
}
form.modale_cse .btn-box.center {
    margin: 30px 0 20px 0;
}
/*******490****/

}
/***************/


/*fin spécifique Modales*/
/****************************************************************/