#quote{
	background: #ffffff;
}
#login{
	background: #7accc8;
}
#error-not-found{
	background: #399df5;
}
#error-forbidden{
	background: #f53939;
}

.heading-login{
	margin: auto;
	color:  #ffffff;
	font-family: "Poppins", Helvetica;
	font-size: 40px;
	font-style: normal;
	font-weight: 600;
	height: 72px;
	letter-spacing: 0.29px;
	text-align: center;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* iPad For portrait layouts only */

	.logo-section{
		padding-top: 30px !important;
	}

	.heading-login{
		font-size: 30px;
		text-align: center;
		margin-top: -10px;
	}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	/* iPad For landscape layouts only */
	.heading-login{
		font-size: 30px;
		margin-top: 10px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
	/* iPone For portrait layouts only */
	.heading-login{
		font-size: 27px;
	}
}
.heading-quote{
	color: #7ACCC8;
	font-family: 'Rubik', Rubik-Bold;
	font-size: 48px;
	font-style: normal;
	font-weight: 800;
	line-height: 42px;
	white-space: nowrap;
	opacity: 0.87;
}

.circle {
	width: 80px;
	height: 80px;
}
.dot {
	border: 4px solid #7accc8;
	border-radius: 50%;
	width: 47px;
	height: 47px;
	z-index: 86;

}
.title-login {
	margin: auto;
	color: #fefeff;
	font-family: "Raleway", Helvetica;
	font-size: 42px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 4.20px;
	line-height: 42px;
	white-space: nowrap;
}
.title-quote a {
	color: #7accc8;
	font-family: "Raleway", Extra-bold;
	font-size: 25px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 2.1px;
	line-height: 42px;
	white-space: nowrap;
	text-decoration: none;
}
.title-error {
	margin: auto;
	color: #fefeff;
	font-family: "Raleway", Helvetica;
	font-size: 55px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 4.20px;
	line-height: 42px;
	white-space: nowrap;
	text-align: center;
}

.img-alfred-login{
	width: 75%;
}
.img-alfred-quote{
	width: 75%;
}
.img-alfred-error{
	width: 400px;
}
.img-alfred-reset{
	width: 400px;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	/* iPad For landscape layouts only */
	.img-dude{
	width: 50%;
	}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* iPad For portrait layouts only */

	.form-container{
		padding-top: 80px !important;
	}
}
.validate-form {
	max-width: 400px;
	min-width: 350px;
	max-height: 500px;
	margin: auto;
}

.form-container-quote{
	max-width: 700px;
	background: #fcfcfc;
}

.placeholder-form {
	background-color: white;
	border-radius: 16px;
	box-shadow: 0px 10px 40px #00000033;
}

.form-title-login {
	padding:10px 0;
	text-align: center;
	color: #212121;
	font-family: "Rubik", Helvetica;
	font-size: 34px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.25px;
	line-height: 34px;
	opacity: 0.87;
}
.form-title-quote {
	color: #131523;
	font-family: 'Rubik', Rubik-Regular;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	letter-spacing:0.44px;
	line-height: 34px;
	text-align: center;
}
.confirm-reset-text {
	padding:10px 0;
	text-align: center;
	background-color: transparent;
	color: #212121;
	font-family: "Rubik", Helvetica;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.44px;
	line-height: 28px;
}

.form-email {
	margin-top:20px;
}

.line {
	height: 1px;
	object-fit: cover;
	position: relative;
	display:block;
	width: 100%;
	margin:5px 0;
}
.email-input {
	margin-top: 15px;
	border:0;
	font-family: "Roboto", Helvetica;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	height: 25px;
	width: 100%;
	letter-spacing: 0.44px;
	line-height: 28px;
	white-space: nowrap;
}

.form-password {
	display: flex;
	margin-top:20px;
}
.password-input {
	margin-top: 15px;
	border:0;
	font-family: "Roboto", Helvetica;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	height: 25px;
	width: 100%;
	letter-spacing: 0.44px;
	line-height: 28px;
	position: relative;
	resize: none;
	white-space: nowrap;
}

#caps-lock{
	position: relative;
	height: 100%;
	margin-top: 20px;
	display: none;
}

.input-container{
	padding-top: 10px;
}
.input-title{
	margin: auto;
	font-family: 'Rubik', Rubik-Regular;
	font-size: 16px;
	letter-spacing: 0.44px;
	color: #212121;
	opacity: 1;
}
.input-quote{
	margin: auto;
	font-family: 'Rubik', Rubik-Regular;
	background: #c6c6c6;
	opacity: 0.5;
	border-radius: 8px;
	height: 50px;
	text-indent: 10px;
	width: 100%;
}
.input-quote::placeholder{
	color: black;
}
.bottom-form{
	padding: 50px 20px;
}
.forgot{
	margin:auto;
}
.connexion {
	margin:auto;
}

.connexion-button {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background-color:#3a86ff;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:12px 24px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.connexion-button:hover {
	background-color:#2f79fa;
}
.connexion-button:active {
	position:relative;
	top:1px;
}
.forgot-password {
	color:  #3a86ff;
	font-family: "Rubik", Helvetica;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.25px;
	line-height: 20px;
}

.info-text p{
	color: #ffffff;
	font-family:  "Poppins", Helvetica;
	font-size: 23px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.00px;
	line-height: 40px;
}
.info-button  {
	max-width: 200px;
	background-color:transparent;
	border-radius:10px;
	border:1px solid #ffffff;
	cursor:pointer;
	color:#ffffff;
	padding:25px 25px;
	text-decoration:none;
	white-space: nowrap;
}
.info-button a {
	text-decoration: none;
}
.info-button p {
	font-family:  "Rubik";
	font-style: normal;
	font-weight: 500;
	font-size:18px;
	color:#ffffff;
}
.info-button:hover {
	border:1px solid #000000;
}
.info-button:hover p {
	color:#000000;
}
.info-button:active {
	top:1px;
}

.send-button{
	margin: 15px 15px;
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background-color:#7ACCC8;
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:"Rubik",Rubik-Bold;
	font-size:16px;
	height: 50px;
	text-decoration:none;
}

.send-button:hover {
	background-color: #5ea5a1;
}
.send-button:active {
	position:relative;
	top:1px;
}
.number-error{
	color:#ffffff;
	font-family:"Rubik",Rubik-Bold;
	font-size:60px;
}
.message-error{
	color:#ffffff;
	font-family:"Rubik",Rubik-Bold;
	font-size:30px;
}
.form-reset-password {
	max-width: 600px;
	background-color: white;
	border-radius: 16px;
	box-shadow: 0px 10px 40px #00000033;
}
.password-info{
	text-align: left;
}