/******************
 Variables globales 
 ******************/
:root{
	--color-h1: #004159;
	--color-h1-opa: #00415999;
	--color-h2: #3385A2;
	--color-h3: #99C8D6;
	--color-valid: #28A745;
	--color-invalid: #3385A2;
	--font: sans-serif;
	--font-size-max-high: 50px;
	--font-size-very-high: 40px;
	--font-size-high: 30px;
	--font-size-medium: 20px;
	--font-size-normal: 16px;
	--font-size-small: 12px;
}

html, body{
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
}

body{
	background-color: #EEE;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

form{
	width: 425px;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	border: 1px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 12px 16px 0 grey, 0 17px 50px 0 rgba(0,0,0,0.19);
}

h1{
	font-size: var(--font-size-high);
	margin: 0px;
}

.form-group{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 10px 0;
	position: relative;
}

.form-group input{
	background-color: transparent;
	font-size: var(--font-size-normal);
	outline: none;
	transition: border-color 0.3s;
	border: transparent;
	border-bottom: 1px solid black;
	margin-bottom: 1px;
	padding: 10px 5px;
}
.form-group input.password{
	padding: 10px 35px 10px 5px;
}
.form-group input:focus{
	outline: none;
	border-bottom-width: 2px;
	margin-bottom: 0px;
}
.form-group .placeholder{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	padding: 0 5px;
	color: #666;
	pointer-events: none;
	transition: 0.3s ease all;
}
.form-group input:focus + .placeholder,
.form-group input:not(:placeholder-shown) + .placeholder{
	top: -10px;
	font-size: var(--font-size-small);
	color: black;
	transform: translateY(0);
}
.toggle-password{
	background-color: transparent;
	background-image: url(../img/eye-opened.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	border: none;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	width: 20px;
	height: 20px;
}
.toggle-password:hover{
	background-image: url(../img/eye-opened-grey.svg);
}
.toggle-password-show{
	background-image: url(../img/eye-closed.svg);
}
.toggle-password-show:hover{
	background-image: url(../img/eye-closed-grey.svg);
}
.btn-valid-h3d{
	box-sizing: border-box;
	font-size: var(--font-size-normal);
	width: 100px;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	text-align: center;
	user-select: none;
	background-color: var(--color-valid);
}
.btn-valid-h3d:focus,
.btn-valid-h3d:hover{
	border-color: black;
}