/**
 * Style sheet for login, password reset and create an account pages
 */

body {
}
.mainlogo {
	display: block;
	margin: 2% auto 0em;
}
.forgotpassword {
	display: block;
	color: #ffccbc;
	text-align: center;
	cursor: pointer;
	font-size: 12px;
}
.forgotpassword:hover {
	text-decoration: underline;
}
a {
	color: #9e9e9e;
	text-decoration: none
}
a:hover {
	text-decoration: underline;
}
.terms {
	font-size: 13px;
	text-align: center;
	width: 100%;
	left: 0;
}
.createaccount {
	text-align: center;
	margin: 1.5em;
	color: #9e9e9e;;
	font-size: 13px;
}
.createaccount a {
	font-weight: bold;
	text-decoration: none;
	color: #ff5722;
}
.createaccount a:hover {
	 text-decoration: underline;
}
.focussed {
	color: #FFAB91;
}
.explain {
	margin: 1.5em auto;
	width: 280px;
	text-align: justify;
	font-size: 10px;
	line-height: 1.4;
	color: #444;
}
.newaccount .explain {
	font-size: 13px;
	color: #aaa;
}
.loginbox .explain {
	color: #77261C;
	font-size: 11px;
	margin: 0 auto;
	line-height: 1;
	margin-bottom: 7px;
}
.result {
	background-color: #fefefe;
	padding: 1em;
	border-radius: 10px;
	margin-bottom: 2em;
	font-size: 15px;
}
.passwordToggler {
	color: #ffccbc;
	font-size: 12px;
	margin-top: 0.5em;
	margin-bottom: 2em;
	vertical-align: middle;
	margin-right: 0.5em;
	text-align: right;
	cursor: pointer;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */			
}
.passwordToggler i {
	color: #bf360c;
	font-size: 19px;
	vertical-align: inherit;
	width: 18px;

}
.passwordToggler.ticked i {
	width: 18px;
}
.passwordToggler.ticked i:before {
	content: "\f046"
}
/* LOGIN PAGE ONLY */
html {
    display: table;
    margin: auto;
    height: 100%;
}
body.login {
	display: table-cell;
    vertical-align: middle;
    height: 100%;
    margin: 0;
}
.login form {
	width:320px;
}
.pt-5 {
    padding-top: 5% !important;
}
body.login input:focus {
	border-bottom: 1px solid #e65100 !important;
	box-shadow: 0 1px 0 0 #e65100 !important;
}
body.login input:focus+label {
	color: #e65100 !important;
}
body.login .input-field .prefix.active {
	color: #e65100 !important;	
}
body.login .input-field input {
	margin-bottom: 4px;
}
body.login .stay-logged-in {
	height:32px;
}
.toast-green {
	background-color: #388e3c;
}
.toast-red {
	background-color: #d32f2f;
}


/* NEW ACCOUNT PAGE */
.newaccount .loginbox {
	padding-top: 1px;
}
.newaccount .terms {
	position: static;
	margin: 1.5em 0 1em;
}
@media (max-height: 600px) {
	.terms {
		position: static;
		margin: 1.5em 0 1em;
	}
}	

@media (max-width: 500px) {
	.login .loginbox,
	.loginbox {
		border-radius: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.login .loginbox {
		height: 320px;
	}
	.explain {
		width: 90%;
	}
	.loginbox .explain {
		width: 95%;
	}
}


	.pageLoading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.6);
	}
	.pageLoading div {
		width: 200px;
		height: 200px;
		margin: 10% auto 0;
		position: relative;
	}
	.pageLoading div:after {
		position: absolute;
		width: 200px;
		height: 200px;
		border: 20px solid #ff5722;
		border-right-color: transparent;
		border-left-color: transparent;
		border-radius: 100%;
		/*box-shadow: inset 0 0 25px 10px #BF360C;*/
		content: '';
		-webkit-animation: spin 1s linear infinite;
		-moz-animation: spin 1s linear infinite;
		-ms-animation: spin 1s linear infinite;
		-o-animation: spin 1s linear infinite;
		-animation: spin 1s linear infinite;
	}
	.pageLoading div:before {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 160px;
		height: 160px;
		border: 20px solid #ff5722;
		border-right-color: transparent;
		border-left-color: transparent;
		border-radius: 100%;
		/*box-shadow:  0 0 25px 10px #BF360C;*/
		content: '';
		-webkit-animation: spin 2s linear infinite;
		-moz-animation: spin 2s linear infinite;
		-ms-animation: spin 2s linear infinite;
		-o-animation: spin 2s linear infinite;
		-animation: spin 2s linear infinite;
	}
	@-webkit-keyframes spin {from { transform: rotate(0deg);   opacity: 0.2; }	50% { transform: rotate(180deg); opacity: 1.0; }to{ transform: rotate(360deg); opacity: 0.2; }}
	@-moz-keyframes spin {from { transform: rotate(0deg);   opacity: 0.2; }	50% { transform: rotate(180deg); opacity: 1.0; }to{ transform: rotate(360deg); opacity: 0.2; }}
	@-ms-keyframes spin {from { transform: rotate(0deg);   opacity: 0.2; }	50% { transform: rotate(180deg); opacity: 1.0; }to{ transform: rotate(360deg); opacity: 0.2; }}
	@-o-keyframes spin {from { transform: rotate(0deg);   opacity: 0.2; }	50% { transform: rotate(180deg); opacity: 1.0; }to{ transform: rotate(360deg); opacity: 0.2; }}
	@keyframes spin {from { transform: rotate(0deg);   opacity: 0.2; }	50% { transform: rotate(180deg); opacity: 1.0; }to{ transform: rotate(360deg); opacity: 0.2; }}

.reset-sent {
	display:none;
}