@charset "utf-8";
*{
	margin :0;
	list-style: none;
	font-family : "poppins";
	
	}
	
	body{
		height: 100vh;
		position: relative;
		display:flex;
		align-items:center;
		justify-content:center;
		background:url(bg.jpg);
		background-attachment: fixed;
		background-size:cover;
		background-position:center;
		
		
		}

.card{
	height : 600px;
	width: 400px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	border-left: 1px solid rgb(125,125,125);
	
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	}

.card .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 0 20px;
}
	
.card .content .picture{
	width: 150px;
	height: 150px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 20px;
	margin-top: -50px;
}

.card .content .picture::before {
	position: absolute;
	content: url(circle.png);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 170px;
	width: 170px;
}

.card .content .picture img{
width: 100%;
height: 100%;
}

.card .content h2 {
	color: white;
	
}
.card .content  p {
	color: white;
	font-size: 12px;
}

.card .content  label {
	color: white;
	font-weight: bold;
}

.valid { color:white; }
.invalid { color: black; font-size: 12px; }
.invalid img {  visibility: hidden;}
.valid img { visibility: visible; }


.eye-icon {
  cursor: pointer;
  position: absolute;
   right: 10px;
  top: 50%;
  transform: translateY(-50%);
     }
	 
.input-wrapper  { 
	position: relative;
	width: 350px;
	}
	


.cardForm{
	display:flex;
	align-items:top;
	justify-content:center;
	
	width: 400px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	border-left: 1px solid rgb(125,125,125);
	
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	}

.cardForm .contentForm {
	/*display: flex;
	flex-direction: column;
	/*justify-content: center;
	align-items: center;
	height: 100%;*/
	padding: 20px;
}






.sidebar {
   position: fixed;
   left: 0;
    height : 600px;
	width: 200px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	/*border-left: 1px solid rgb(125,125,125);*/
	
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 
 
 /*
  position: fixed; // Rendre le menu fixe //
  top: 0;
  left: 0;
  height: 100%; // Prend toute la hauteur de la page //
  width: 250px; // Largeur du menu //
  background-color: #333;
  padding-top: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
*/


}
.sidebar a {
  padding: 15px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}

.sidebar a:hover {  background-color: #575757;  }