.login {
	border: 1px solid var(--color-accent);
	margin: 50px auto;
	width: 40%;
	height: 550px;
}

.register {
	border: 1px solid var(--color-accent);
	margin: 50px auto;
	width: 30%;
	height: 100%
}

.forgot, .reset {
	border: 1px solid var(--color-accent);
	margin: 50px auto;
	width: 30%;
	height: 500px;
}

.login-icon{
	margin: 70px auto;
}

.register-img, .forgot-img, .reset-img{
	width: 80%;
	margin: 10px auto;
	display: block;
}

.login-icon a{
	margin: 0 auto;
}

.login-container{
	padding-left: 20%;
	font-size: 35px;
	font-family: 'Ubuntu Condensed', sans-serif;
	overflow: hidden;
}

.register-container, .forgot-container, .reset-container{
	padding-left: 12%;
	font-size: 35px;
	font-family: 'Ubuntu Condensed', sans-serif;
	overflow: hidden;
}

	@media screen and (max-width: 1280px) {
		.register, .forgot, .reset {
			width: 40%;
		}
	}
	@media screen and (max-width: 980px) {
		.login {
			width: 40%;
		}
		.register, .forgot, .reset {
			width: 50%;
		}
	}
	@media screen and (max-width: 736px) {
		.login, .register, .forgot, .reset {
			width: 60%;
		}
	}


.login-container button{
	display: inline-block;
	background-color: var(--color-accent);
	border-radius: 5px;
	text-transform: lowercase;
	text-decoration: none;
	color: var(--color-text-inverse);
	font-size: 20px;
	letter-spacing: -1px;
	border: solid 1px var(--color-surface-muted);
	width: 70%;
	height: 30px;
	font-family: 'Ubuntu Condensed', sans-serif;
}

.register-container button, .forgot-container button, .reset-container button{
	display: inline-block;
	background-color: var(--color-accent);
	border-radius: 5px;
	text-transform: lowercase;
	text-decoration: none;
	color: var(--color-text-inverse);
	font-size: 20px;
	letter-spacing: -1px;
	border: solid 1px var(--color-surface-muted);
	width: 80%;
	height: 30px;
	font-family: 'Ubuntu Condensed', sans-serif;
	margin: 5% 12px;
}

	.login-container button:hover, .register-container button:hover, .forgot-container button:hover, .reset-container button:hover{
	background-image: -moz-linear-gradient(top, #7f3035, #660000);
	background-image: -webkit-linear-gradient(top, #7f3035, #660000);
	background-image: -ms-linear-gradient(top, #7f3035, #660000);
	background-image: linear-gradient(top, #7f3035, #660000);
	background-color: var(--color-accent-hover);
	box-shadow: inset 0px 0px 0px 1px var(--color-surface-muted);
	}

.login-forgot{
	position: relative;
	height: 42px;
	width: 100%;

}

	.login-forgot span{
		display: block;
		left: 0;
		margin: 20px auto 0 20px;
	}


input[type=text], input[type=password] {
	width: 80%;
	padding: 15px;
	margin: 12px 12px;
	display: inline-block;
	font-family: 'Ubuntu Condensed', sans-serif;
	border: none;
	background: var(--color-control-bg);
}

/* Admin Root recovery uses the reset-password card style but needs four matching fields. */
.admin-root-recovery {
	height: auto;
	min-height: 600px;
}

.admin-root-recovery .forgot-container {
	overflow: visible;
}

.admin-root-recovery input[type=text] {
	width: 80%;
	padding: 15px;
	margin: 12px 12px;
	display: inline-block;
	font-family: 'Ubuntu Condensed', sans-serif;
	border: none;
	background: var(--color-control-bg);
}

.login-container input[name="email"], .login-container input[name="password"]{
	display: block;
}

.password-input-wrapper, .username-input-wrapper, .email-input-wrapper, .emailIdentification-input-wrapper{
	position: relative;
}

#emailIdentification.input-invalid{
	box-shadow: inset 0 0 0 2px #c62828;
}

.emailIdentificationMessage-input-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
}

.email-identification-message {
	text-align: center;
	display: block;
	width: 100%;
}

.username-input-wrapper input, .password-input-wrapper input{
	width: 80%;	
}

#confirmPassword{
	width: 80%;	
}

#newPassword, #newConfirmPassword {
	width: 80%;
}

.password-input-wrapper i, .username-input-wrapper i, .email-input-wrapper i, .emailIdentification-input-wrapper i {
	position: absolute;
	color: var(--color-accent);
	font-size: 14px;
	top: 100%;
	left: 5%;
}

.wrong-pass, .user-not-found {
	position: absolute;
	top: 102%;
	left: 11%;
	font-size: 12px;
	color: red;
}

.user-already-exists{
	position: absolute;
	padding-right: 20px;
	top: -20px;
	right: auto;
	font-size: 20px;
	color: red;	
}


.emailIdentification-not-found {
	padding: 40px 40px 0px 40px;
	text-align: center;
	font-size: 30px;
}

#invalidEmail, #passwordMismatch, #weakPassword, #invalidEmailIdentification{
	position: absolute;
	top: 90%;
	left: 10%;
	font-size: 14px;	
}

.inputField {
	position: relative;
}

.inputField label {
	font-size: 15px;
	font-family: 'Ubuntu Condensed', sans-serif;
	color: var(--color-accent);
	pointer-events: none;
	opacity: 0.8;
	position: absolute;
	padding-left: 20px;
	left: 2%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: text;
}

.inputField input:focus+label, .inputField input:not(:placeholder-shown)+label {
	top: 20px;
}

.inputField input, .inputField label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Theme token adoption for auth pages to keep light/dark parity. */
.login, .register, .forgot, .reset {
	background-color: var(--color-surface);
	color: var(--color-text-primary);
}