/* Live password-requirements checklist, scoped under .password-rules so it never collides with
   login.css's unscoped .validation-container (used only by the login/reset-password pages, which
   position it as a fixed side panel). Do NOT register this stylesheet on AppLogin.cshtml. */
.password-rules .validation-container {
	background-color: #f3f3f3;
	border-radius: 8px;
	padding: 16px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	color: #555;
	max-width: 300px;
	border: 1px solid #e0e0e0;
	position: fixed;
	z-index: 2;
	right: 29%;
}

.password-rules .validation-row {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

	.password-rules .validation-row:last-child {
		margin-bottom: 0;
	}

.password-rules .status-icon {
	display: inline-block;
	width: 20px;
	font-weight: bold;
	margin-right: 10px;
}

	.password-rules .status-icon.valid {
		color: #4CAF50;
	}

	.password-rules .status-icon.invalid {
		color: #E57373;
	}

.password-rules .login-pw-check,
.password-rules .login-pw-xmark {
	width: 18px;
	height: 18px;
}

.password-rules .login-pw-check {
	filter: var(--icon-filter-green);
}

.password-rules .login-pw-xmark {
	filter: var(--icon-filter-red);
}

@media (max-width: 1400px) {
	.col-login-3 {
		width: 400px;
	}

	.col-login-8 {
		width: calc( 66.66666% - 100px);
	}

	.password-rules .validation-container {
		right: 43%;
	}
}

@media (max-width: 1200px) {
	.col-login-1 {
		width: 10%;
	}

	.col-login-3 {
		width: 35%;
	}

	.col-login-8 {
		width: 55%;
	}

	.login-form {
		padding: 20px;
	}

	.password-rules .validation-container {
		right: 14%;
	}

	.terms-policy-popup {
		width: 90% !important;
	}
}

@media (max-width: 850px) {
	.col-login-1 {
		display: none;
	}

	.col-login-3 {
		width: 100%;
	}

	.col-login-8 {
		display: none;
	}

	.login-form {
		padding: 20px;
	}

	.login-content {
	}

	.password-rules .validation-container {
		position: relative;
		right: unset;
		width: 100%;
		max-width: 100%;
	}

	.terms-policy-popup {
		width: 95% !important;
		margin: 10px !important;
	}
}