/*membrestyle.css google*/


 

 
/* aligner par quatre*/


.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
 /* margin-bottom: 20px;*/
}

.icon {
  padding: 10px;
  background: #03a9f4;
  color: white;
  min-width: 50px;
  text-align: center;
  margin: 0 1%;
}
.icon2 {
  padding: 10px;
  background: #9da29d;
  color: white;
  min-width: 50px;
  text-align: center;
}
        .input-field {
          width: 100%;
          padding: 10px;
          outline: none;
          color: #03a9f4;
        }

        .input-field:focus {
          border: 2px solid #4caf50;
        }

/* Set a style for the submit button */
.btn {
  background-color: #03a9f4;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius:4px;
  text-align: center;
  margin: auto;
}

.btn:hover {
  opacity: 1;
}

.btn2 {
  background-color: #03a9f4;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 27%;
  opacity: 0.9;
  border-radius:4px;
  text-align: center;
  margin: auto;
}

.btn2:hover {
  opacity: 1;
}



 h2 {
  background-color: #03a9f4;/*#d3dce7;*/
  color:#fff;
  padding:10px;
  font-family:sans-serif, arial;
  }

  /* Affichage et masquage form membres */ 

              button.container-membres {
                background-color: #4CAF50;
                color: white;
                padding: 16px 20px;
                margin: 8px 0;
                border: none;
                cursor: pointer;
                width: 100%;
                font-size: 18px;
              }

              button.container-membres:hover {
                opacity: 0.8;
              }

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {/* padding: 10px 10px 40px 10px; *//* text-align: center; *//* margin: auto; *//* background-color: aliceblue; */}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container-membres {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: ; /* Hidden by default  (none)*/
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 /* padding-top: 60px;*/ /* doublon dans style.css */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  width: 95%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  float: right;
  margin-right: -20px;
  margin-top: -20px;
  color: #dfd5d5;
  font-size: 35px;
  font-weight: bold;
  border:1px solid transform;
  border-radius:50%;
  padding:0px 10px;
  border:1px solid transparent;

}

.close:hover,
.close:focus {
  margin-right: -20px;
  margin-top: -20px;
  color: #f32a2a;
  cursor: pointer;
  border:1px solid #FF9800;
  border-radius:50%;
  padding:0px 10px;
  -webkit-transition: .5s;
 
}


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

/*traitement du formulaire */

.infosform{/*float:left;*/color:red;margin-bottom:20px;}
.succes{color:#5eb762;}

.contenairconnexion{
  /* background-color: #d2c9c9; */
  /* height:20px; */
}

.divtrois{
  width: 217px;
  height: 217px;
  text-align: center;
  background: url("../images/damier.png");
  line-height: 18.5em;
  background-color: aliceblue;
}
.divdeux{height: 90px;width: 90px;}
.texte{background-color: #c6c6b9;color: #4585bb;padding:10px;text-align: center;/* font-family: arial; */font-weight: 600;}
.bloc{float:right;}

.moncompte{background-color: grey;font-family: fantasy;padding:20px;float: left;color:white;}



.conteneur1{width:100%;background-color: white;text-align: center;float:left;margin-top:5%;}
.gauche{display:inline-block;background-color:#eeeeee;width: 20%;height:5em;line-height:5em;float: left;margin-left:5%;color: grey;font-size: 18px;font-weight: 600;}
.gauche2{display:inline-block;background-color:#eeeeee;width: 20%;height:5em;line-height:5em;float: left;margin-left:5%;color: grey;font-size: 18px;font-weight: 600;text-align: center;}
.droite{display:inline-block;
background-color:#eeeeee;width: 60%;
height:5em;line-height:5em;margin-left:10%;
color:grey;height:auto;


}
.selectform1{padding:10px 20px;}
.droite2{display:inline-block;background-color:#eeeeee;width: 60%;/* margin: -5% 5%; */color:grey;/* margin-top: 25px; */text-align: center;margin-left: 10%;}
   
    input[type="text"]input.container{background-color:white;width: 40%;height:4em;text-align:center;}
    .textarea{/* width: 100%; *//* max-width:95%; */min-width: 95%;height:80%;min-height: 85px;padding:10px;margin:10px;}


@media screen and (max-width: 900px) {
  .gauche {line-height:1.5em;padding:10px;width:25%
  }
  .gauche2 {line-height:2em;padding:10px;width:25%
  }
  .droite {margin-left:1%;
  }
  .droite2 {margin-left:1%;
  }
}



.droiteimages{margin:10px;background-color: #E91E63;width:200px;height:200PX;margin-left:7%;color: white;font-weight: 600;padding-top: 79px;/* vertical-align: middle; *//* margin: auto; */}
input[type="file"]{
  /* width: 225px; */
  color: #fafafa;
display:none;
  }

                input[type="submit"].container-membres {
                  display:none;

                    cursor: pointer;
                    border-radius: 5px;
                    width: 100px;
                    border: none;
                    height: 30px;
                    font-weight: 400;
                    color: white;
                    background-color:green;
                }
.conteneurimage{display:inline-block;}

.file2 {
    background-color:grey;
    height:230px;width:230px;
    color:white;cursor:pointer;font-size:20px; text-align:center;line-height:200px;border:1px solid grey;color:transparent;color:white;
}

        input{color: grey;
            font-size: 16px;}
        select{
            color: grey;
            font-size: 16px;
            width:95%;
            }
        textarea{    color: grey;
           font-size: 16px;}


#result {
  padding: 10px;
  display: none;
  text-align: center;
  background-color: #60be1f;
  color: #fff;
}

.logoconnexion {text-align:center;margin:auto;}
.logoconnexion img{text-align:center;width:40px;margin:auto;}
.logoconnexiontitre img{text-align:center;width:40px;margin:auto;}

.info_pass {color: #03a9f4;font-size: 12px;line-height: 2em;
    margin: 10px;/* text-align: -webkit-match-parent; */}

input.input-field::placeholder {color: #03a9f4;font-size:0.9em}