.login-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	width: 100vw;
	height: 100vh;
	display: grid;
	place-items: center;
	opacity: 0;
	background: rgba(255, 255, 255, .15);
	transition: all .45s ease-in-out;
	transform: scale(0);
}

.login-overlay.on {
	width: 100vw;
	height: 100vh;
	z-index: 999;
	opacity: .75;
	transform: scale(1);
}

.login-overlay .btn-overlay-closer {
	font-weight: bold;
	font-size: 1.8rem;
	border-radius: 51%;
	width: 3rem;
	height: 3rem;
	align-content: center;
	align-items: center;
	padding: 0;
	text-align: center;
	display: block;
	border: 2px solid #666;
	color: #666;
}

.btn-overlay-closer {
	position: absolute;
	top: 3vh;
	right: 3vh; /* yes, use same unit for both pos */
}




.container-form-view {
	/*	easy vertical center if .container has equal top/bottom padding */
	align-content: center;
}

/* TODO: egads, margin in a lib? */
.container-form-view fieldset { margin: auto auto 3rem; }

.container-form-view form {
	width: 90%; /* default mob */
	max-width: 30rem;
	margin: auto;
}


.container-form-view form .instructions {
	width: 100%;
	margin-bottom: 1.5rem;
	font-size: .9rem;
}

.container-form-view .instructions p { margin-bottom: 1.5rem; }

.container-form-view .label-input {
	width: 100%; 
	margin-bottom: 1.5rem;
}


.container-form-view form .links-wrapper {}
.container-form-view form .links-wrapper a {
	color: var(--link-color);
	border-bottom: 1px dotted var(--link-color);
}

.container-form-view form .links-wrapper a:hover { border-bottom: 1px solid var(--link-color); }


.container-form-view form ol li { margin-bottom: .9rem; }

.container-form-view .checkbox input { order: 0; }
.container-form-view .checkbox label { order: 1; }


.container-form-view .fancy {
	margin-bottom: .9rem;
	color: #000;
	font-size: .9rem;
	white-space: nowrap;
}


.container-form-view .buttons-wrapper,
.container-form-view .links-wrapper {
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin-bottom: 1.5rem;
	justify-content: space-between;
}

.container-form-view .buttons-wrapper { flex-flow: row nowrap; }

.container-form-view .links-wrapper {
	flex-flow: row wrap;
	border-top: 1px dashed #ccc;
	padding-top: 1.5rem;
}

.container-form-view .links-wrapper p {
	width: 100%;
	margin-bottom: .9rem;
	font-size: .9rem;
}


.password-requirements-wrapper {
	display: flex;
	width: 100%;
	margin: .3rem 0 1.5rem;
	padding: .9rem;
	flex-flow: column nowrap;
	justify-content: flex-end;
	font-size: .75rem;
	color: #000;
	background: #f6f6f6;
	border-radius: .15rem;
}

/*
.password-requirements-wrapper p ...
	ConfirmEmail.cshtml
	CreateLogin.cshtml
	ResetPassword.cshtml
*/
.password-requirements-wrapper p {
	text-transform: uppercase;
	margin-bottom: .6rem;
}

/*.password-requirements-wrapper ul { margin: .6rem 0 0 0; }*/
.password-requirements-wrapper li:before {
/*	list-style: square inside; */
	display: inline-block;
	padding-right: .3rem;
	content: "-";
}
.password-requirements-wrapper li::after {
	display: inline-block;
	padding-left: .3rem;
	font-size: .9rem;
	font-weight: bold;
	content: "√";
	color: transparent;
}
.password-requirements-wrapper li.true::after { color: #1eb41e; }


.container-email-confirmed-set-password .password-requirements-wrapper {
	/* TODO: until they're all moved to the same place, if possible*/
	margin-bottom: 1.5rem;
}




.validation-summary-errors {
	margin-bottom: .9rem;
	padding: .9rem;
	font-size: .9rem;
	color: red;
	border: 1px solid red;
}
.validation-summary-errors ul {
	list-style: decimal outside;
	padding-left: .9rem;
}

.validation-summary-errors li:not(:last-of-type) { margin-bottom: 1.2rem; }

.suggest-register-error-message {
	display: none;
	margin-bottom: .9rem;
	padding: .9rem;
	border: 1px dashed;
}
.suggest-register-error-message.on { display: none; }

.suggest-register-error-message .simple:hover {
	color: var(--link-color);
/*	border-bottom: 1px solid var(--link-color);*/
}





.login-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.captcha-wrapper {
	width: 100%;
	margin-bottom: 1.5rem;
	justify-content: flex-end;
}
.captcha-wrapper * {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

.container-form-view error { display: none; }

.next-steps-wrapper {
	max-width: 30rem;
	margin: 0 auto;
}



/* requestaccount.cshtml */
/* form.request-account */

.container-request-account fieldset {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.label-input.textarea {

}

.container-request-account .label-input.textarea {
	width: 100%;
	max-width: none;
}

@media screen and (min-width: 51rem) {
	/* the form */
	.container-request-account .request-account,
	.container-request-account .request-account-form {
		max-width: 42rem;
		justify-content: space-between;
	}

	.container-request-account fieldset { justify-content: space-between; }

	.container-request-account .label-input {
		min-width: 18rem;
		max-width: 48%;
	}
} /* MQ */


.registration-instructions {
display: none;
}

/* LOGIN VIEW */
/* if .forgot-pw is only used in login_form, the negative margin (re: 'show password') should be ok */
.forgot-pw {
	order: 1;
	font-size: .75rem;
	margin: .3rem 0 -1.5rem auto;
	z-index: 1;
}

.new-user { text-transform: uppercase; }

.requisite a { text-transform: uppercase; }

.buttons-wrapper .btn[type="submit"] { font-weight: bold; text-transform: uppercase; }


.fa-circle-question {
	font-size: 1.2rem;
	font-weight: normal;
	cursor: pointer;
}
.fa-circle-question:after {
	content: "\f059";
	color: midnightblue;
}
/* valid if child of label el is span, !p */
.user-id-help {
	display: block;
	width: 100%;
	margin: 1.8ch 0;
	font-size: .87rem;
	text-transform: initial;
}
.user-id-help:first-child { margin: 1.8ch 0; }
.user-id-help:last-child { margin: 0 0 3ch; }

.user-id-help:before {
	display: inline-block;
	content: "-";
	padding-right: .3rem;
}


.tenant { text-transform: capitalize; }




/* ResetPassword */

.show-password-wrapper {
	width: auto;
	margin-top: -1.2rem;
	z-index: 0;
}

.show-password-wrapper label {
	font-size: .81rem;
	color: #666;
}
.show-password-wrapper label:before {
	border: 1px solid #ccc;
}
.show-password-wrapper :checked ~ label:after { background: #666; }

/* far fa-eye */
.password-input i {
	width: 1.5rem;
	margin-left: .9rem;
	align-self: center;
	cursor: pointer;
	/*	border: 1px dotted red;*/
}

.simple {
	color: var(--link-color);
	border-bottom: 1px dotted var(--link-color);
}
.simple:hover { border-bottom: 1px solid var(--link-color); }





.btn-log-in {
	display: inline-block;
	min-width: 6ch;
	padding: 0.3rem 1.5rem;
}




.container-account-request-acknowledgement .buttons-wrapper {
	margin-top: 3rem;
}