:root {
	--iquord-green: #44d62d;
	--iquord-green-hover: #37c81f;
	--iquord-green-overlay: rgba(68, 214, 45, 0.24);
	--iquord-charcoal: #212934;
	--iquord-ink: #2c2a29;
	--iquord-deep-green: #0b332f;
	--iquord-muted-green: #215c52;
	--iquord-surface: #f1f2f2;
	--iquord-border: #e0dede;
}

body:has(.for-login) {
	background: var(--iquord-surface);
}

.ellipsis {
	overflow: visible !important;
	/* text-overflow: ellipsis; */
	/* white-space: nowrap; */
}
body:has(.for-login) .page-content-wrapper,
body:has(.for-login) main.container,
body:has(.for-login) .page_content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:has(.for-login) .page-header-wrapper,
body:has(.for-login) .page-footer,
body:has(.for-login) .page-breadcrumbs {
	display: none !important;
}

.for-login {
	display: grid !important;
	grid-template-columns: 50% 50%;
	align-items: center;
	min-height: 100vh;
	padding: 0;
	background: var(--iquord-surface);
}

.for-login::before {
	content: "";
	display: block;
	grid-row: 1 / 3;
	align-self: stretch;
	min-height: 100vh;
	filter: brightness(1.08) saturate(0.78);
	transform: scale(1.01);
	background:
		linear-gradient(var(--iquord-green-overlay), var(--iquord-green-overlay)),
		url("/assets/integracion_iquord/iquord4.jpg") center / cover no-repeat,
		linear-gradient(
			135deg,
			var(--iquord-deep-green) 0%,
			var(--iquord-muted-green) 48%,
			var(--iquord-surface) 100%
		);
}

.for-login .navbar,
.for-login .page-card-head {
	grid-column: 2;
	align-self: end;
}

.for-login .login-content.page-card {
	grid-column: 2;
	align-self: start;
	width: min(100% - 48px, 420px);
	max-width: 420px;
	margin: 0 auto;
	padding: 42px 36px;
	border: 1px solid var(--iquord-border);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(17, 34, 31, 0.14);
}

.for-login .login-content.page-card form {
	max-width: 100%;
}

.for-login .btn-login {
	background-color: var(--iquord-green) !important;
	border-color: var(--iquord-green) !important;
	color: var(--iquord-ink) !important;
}

.for-login .btn-login:hover,
.for-login .btn-login:focus {
	background-color: var(--iquord-green-hover) !important;
	border-color: var(--iquord-green-hover) !important;
}

.page-card-head img {
	max-height: 80px !important;
}
@media (max-width: 767px) {
	.for-login {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		padding: 24px 16px;
	}

	.for-login::before {
		width: 100%;
		min-height: 160px;
		border-radius: 16px;
		filter: brightness(1.08) saturate(0.78);
		transform: scale(1);
		background:
			linear-gradient(var(--iquord-green-overlay), var(--iquord-green-overlay)),
			url("/assets/integracion_iquord/iquord4.jpg") center / cover no-repeat,
			linear-gradient(
				135deg,
				var(--iquord-deep-green) 0%,
				var(--iquord-muted-green) 100%
			);
	}

	.for-login .login-content.page-card {
		width: 100%;
		margin-top: 18px;
		padding: 32px 22px;
	}
}