@charset "utf-8";
/* CSS Document */
form {
width: 100%;
  /*margin-bottom: 30px;*/
}
/*.block-forms {
  width: 100%;
}
.block-forms p {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
}*/
.block-form-table {
  margin-top: 30px;
  display: table;
  width: 100%;
}
.block-form-table-radio {
  display: table;
  width: 70%;
  margin: auto;
}
.block-form-cell-30 {
  display: table-cell;
  width: 30%;
  vertical-align: top;
}
.block-form-cell-50 {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.block-form-cell-50-left {
  display: table-cell;
  width: 50%;
  vertical-align: top;
 padding: 0 10px 0 0;
}
.block-form-cell-50-right {
  display: table-cell;
  width: 50%;
  vertical-align: top;
 padding: 0 0 0 10px;
}
.block-form-cell-100 {
  display: table-cell;
  width: 100%;
  vertical-align: top;
}
.block-input {
  display: inline-block;
  text-align: center;
  width: 100%;
  /*margin: 0 10px;*/
  /*width: 100%;*/
}
.block-login {
width: 100%;
}

.input-touch:hover {
cursor: pointer;
}

.input-space {
  margin-top: 30px;
}
.block-input img {
  width: 30px;
  height: auto;
  vertical-align: middle;
}


	
input:focus {
outline: transparent;
}
textarea:focus {
outline: transparent;
}
select:focus {
outline: transparent;
}

input::placeholder, textarea::placeholder {
        color: #283c50;
        opacity: 1;
      }

input[type="text"] + label {
  display: block; /* La balise devient de type block. */
  font-size: 17px;
  font-weight: bold;
  font-family: "Manrope Regular";
  color: #283c50;
  /*margin-top: 20px;*/
}
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"] {
  width: 100%;
  height: 40px;
  font-size: 17px;
  font-family: "Manrope Regular";
  color: #283c50;
  line-height: 40px;
  background: #FCFCFC;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #879BAF;
  margin: 3px 1px 3px 0px; /*pour le focus*/
  padding: 3px 3px 3px 8px; /*pour le focus*/
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
textarea {
  width: 100%;
  height: 200px;
  font-size: 17px;
  font-family: "Manrope Regular";
  color: #283c50;
  background: #FCFCFC;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #879BAF;
  margin: 3px 1px 3px 0px; /*pour le focus*/
  padding: 3px 3px 3px 8px; /*pour le focus*/
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
.sizetxtarea {
height: 100px !important;
}
select {
  width: 100%;
  height: 40px;
  font-size: 17px;
  font-family: "Manrope Regular";
  color: #283c50;
  background: #FCFCFC;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #879BAF;
  margin: 3px 1px 3px 0px; /*pour le focus*/
  padding: 3px 3px 3px 8px; /*pour le focus*/
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/*---- arrow ----*/
select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#fff 100%, transparent 0%);
  background-position:
    calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
  background-size:
    5px 5px, 5px 5px, 1.5em 1.5em;
  background-repeat: no-repeat;
}
select:hover, select:focus {
  /*box-shadow: 0 0 5px rgba(75, 170, 170, 0.5);*/
  border: 1px solid rgb(131, 149, 173);
  padding: 3px 3px 3px 8px;
}
input[type="text"]:hover, input[type="text"]:focus, input[type="number"]:hover, input[type="number"]:focus, textarea:hover, textarea:focus, input[type="tel"]:hover, input[type="tel"]:focus, input[type="email"]:hover, input[type="email"]:focus, input[type="password"]:hover, input[type="password"]:focus {
  /*box-shadow: 0 0 5px rgba(75, 170, 170, 0.5);*/
  padding: 3px 3px 3px 8px;
  margin: 3px 1px 3px 0px;
  border: 1px solid rgb(131, 149, 173);
}
.block-area {
  /*display: inline-block;*/
  width: 100%;
  text-align: center;
}
.block-area img {
  width: 30px;
  height: auto;
  /*vertical-align: middle;*/
}
/*textarea {
  width: 100%;
  height: 250px;
  font-family: "Manrope Regular";
  font-size: 16px;
}*/
.block-message-area {
  display: block;
  height: 25px
}
.block-bout {
  padding-top: 30px;
  text-align: center;
}
.block-txt-left {
  padding-top: 30px;
  text-align: left;
}
.block-message {
  text-align: center;
  color: #23afe5; /*84c23c*/
  font-size: 20px;
}
.block-message-url {
  text-align: center;
  color: #23afe5; /*84c23c*/
  font-size: 20px;
  margin-top: 20px;
}
/*---------------  BOUTON RADIO  -----------------*/
.block-radio {
  /*margin-top: 40px;
  width: 100%;*/
  display: inline-block;
  text-align: left;
  width: 100%;
  height: auto;
  margin: 10px;
}
.block-radio p {
  display: inline-block;
  width: 200px;
  margin-bottom: 0;
  /*margin-right: 40px;*/
}
/* The container */
.custom-radio {
  display: inline-block;
  position: relative;
  width: 80px;
  cursor: pointer;
  text-align: left;
  padding-left: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.radioJC {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */

/*Le caractère ~ va nous être plus permissif que le caractère + en nous permettant cette fois-ci de sélectionner tous les éléments déclarés après un autre élément en HTML de même niveau (c’est-à-dire possédant le même parent direct)*/

.custom-radio:hover input ~ .radioJC {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.custom-radio input:checked ~ .radioJC {
  background-color: #1bafe5;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radioJC:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.custom-radio input:checked ~ .radioJC:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.custom-radio .radioJC:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/*---------------  CB  -----------------*/

/*https://www.w3schools.com/howto/howto_css_custom_checkbox.asp*/

.block-group-cb {
  /*width: 280px;*/
  text-align: center;
  margin: auto;
}
.block-group-cb-left {
  /*width: 280px;*/
  text-align: left;
  margin: auto;
}
.block-group-cb-left p {
text-align: center;
}

.error-cb {
height: 20px;
margin-bottom: 10px;
}

 /* Customize the label  */
.block-cb {
display: inline-block;
position: relative;
padding-left: 35px;
margin: 15px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*text-decoration: overline;*/
}

/* Hide the browser's default checkbox */
.block-cb input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #e6f0f0;
}
.for-radio {
border-radius: 15px;
}

/* On mouse-over, add a grey background color */ 
.block-cb:hover input ~ .checkmark {
  background-color: #F0467D;
}

/* When the checkbox is checked, add a blue background */
.block-cb input:checked ~ .checkmark {
  background-color: #F0467D;
}

/* Quand checkbox est disable */
/*.block-cb input:disabled ~ .checkmark  */
/*input[type="radio"]:disabled {
  text-decoration: line-through;
  color: #f2f2f2;    
}*/
.block-cb input:disabled ~ .checkmark {
  background-color: #f2f2f2;
}

.txt-disable {
  text-decoration: line-through;
  color: #c3c1c1;    
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.block-cb input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.block-cb .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 


/*---------------  VISIBILITE PWD  -----------------*/
.eye-input {
  float: right;
  margin-right: 8px;
  margin-top: -34px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.fa-eye {
display: block;
width: 24px;
height: 24px;
background-image: url("../images/pwd-visibility.png");
background-size: 24px 24px;
background-repeat: no-repeat;
}

.fa-eye-slash {
display: block;
width: 24px;
height: 24px;
background-image: url("../images/pwd-visibility-off.png");
background-size: 24px 24px;
background-repeat: no-repeat;
}

/*---------------  ERREURS  -----------------*/

.block-notes {
margin-bottom: 15px;
}

/*.block-error {
margin: 20px 0;
}*/

.notes {
font-family: "Manrope Regular"!important;
color: #F0467D!important;
font-weight: 600;
}

.notes-error {
  /*display: inline-block;
  margin-top: 10px;*/
  text-align: center;
  width: 100%;
  color: rgba(241, 14, 14, 1) !important;
}
.notes-error-rb {
  color: rgba(241, 14, 14, 1) !important;
}
.notes-ok {
  /*display: inline-block;
  margin-top: 10px;*/
  text-align: center;
  width: 100%;
  color: rgba(201, 239, 157, 1)!important;
}
.notes-ok-dark {
  /*display: inline-block;
  margin-top: 10px;*/
  text-align: center;
  width: 100%;
  color:rgba(11,162,4,1.00)!important;
}
.notes-ok-background {
  display: block;
  text-align: center;
  padding: 7px;
  width: 100%;
  color: #fff !important;
  background-color: rgba(11,162,4,1.00)!important;
}
.input-error {
  box-shadow: 0 0 5px rgba(241, 14, 14, 1);
  padding: 3px 3px 3px 8px;
  margin: 3px 1px 3px 0px;
  border: 1px solid rgba(241, 14, 14, 1) !important;
}
.input-error:hover, .input-error:focus {
  padding: 3px 3px 3px 8px;
  margin: 3px 1px 3px 0px;
  box-shadow: 0 0 5px rgba(241, 14, 14, 1) !important;
  border: 1px solid rgba(241, 14, 14, 1) !important;
}
.input-ok {
  box-shadow: 0 0 5px rgba(201, 239, 157, 1);
  padding: 3px 3px 3px 8px;
  margin: 3px 1px 3px 0px;
  border: 1px solid rgba(201, 239, 157, 1) !important;
}
.input-ok:hover, .input-ok:focus {
  padding: 3px 3px 3px 8px;
  margin: 3px 1px 3px 0px;
  box-shadow: 0 0 5px rgba(201, 239, 157, 1) !important;
  border: 1px solid rgba(201, 239, 157, 1) !important;
}

/*---------------  MOT DE PASSE OUBLIE  -----------------*/


/*---------------  RESPONSIVE FORMS  -----------------*/



.block-form-phone {
display: none;
}


@media only screen and (max-width: 767px) {
.block-form-desktop {
display: none;
}
.block-form-phone {
display: block;
}


.block-input {
  width: 100%;
  margin: 10px 0;
}

.block-radio {
text-align: center; 
  width: 100%; 
  margin: 10px 0;
}

.block-cb {
    padding-left: 28px;
    margin: 5px;
}

}