/*
 * ECS Administration Login
 * Loaded after ecs-access-login.css.
 */

.ecs-access-page--admin {
	--ecs-access-red: #245f72;
	--ecs-access-red-dark: #174656;
	background:
		radial-gradient(circle at 15% 10%, rgba(36, 95, 114, 0.13), transparent 25rem),
		radial-gradient(circle at 90% 90%, rgba(17, 17, 17, 0.06), transparent 32rem),
		linear-gradient(135deg, #f5f9fa 0%, #e8eef1 100%);
}

.ecs-access-card--admin {
	border-top-color: var(--ecs-access-red);
}

.ecs-access-page--admin .ecs-access-logo {
	width: min(100%, 245px);
}

.ecs-access-role-icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 13px;
	border-radius: 50%;
	background: #e7f0f3;
	color: var(--ecs-access-red);
	box-shadow: inset 0 0 0 1px rgba(36, 95, 114, 0.14);
}

.ecs-access-role-icon svg {
	display: block;
	width: 31px;
	height: 31px;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ecs-access-page--admin .ecs-access-eyebrow,
.ecs-access-page--admin .ecs-access-help a,
.ecs-access-page--admin .ecs-access-back {
	color: var(--ecs-access-red-dark);
}

.ecs-access-page--admin .ecs-access-field input:focus {
	border-color: var(--ecs-access-red);
	box-shadow: 0 0 0 4px rgba(36, 95, 114, 0.12);
}

.ecs-access-page--admin .ecs-access-password-toggle:hover,
.ecs-access-page--admin .ecs-access-password-toggle:focus-visible {
	color: var(--ecs-access-red);
}

.ecs-access-page--admin .ecs-access-submit {
	background: linear-gradient(180deg, #34778d 0%, var(--ecs-access-red) 100%);
	box-shadow: 0 9px 20px rgba(36, 95, 114, 0.24);
}

.ecs-access-page--admin .ecs-access-submit:hover {
	background: linear-gradient(180deg, #3d849b 0%, var(--ecs-access-red-dark) 100%);
	box-shadow: 0 11px 24px rgba(23, 70, 86, 0.28);
}

.ecs-access-page--admin .ecs-access-submit:focus-visible,
.ecs-access-page--admin .ecs-access-back:focus-visible,
.ecs-access-page--admin .ecs-access-help a:focus-visible,
.ecs-access-page--admin .ecs-access-brand:focus-visible {
	outline-color: rgba(36, 95, 114, 0.3);
}

@media (max-width: 520px) {
	.ecs-access-role-icon {
		width: 52px;
		height: 52px;
	}

	.ecs-access-role-icon svg {
		width: 28px;
		height: 28px;
	}
}