.hub-login-page,
.hub-login-page.login-page {
	display: block;
	align-items: initial;
	justify-content: initial;
	width: 100%;
	min-height: 100vh;
}

.hub-login-page {
	min-height: 100vh;
	background: linear-gradient(135deg, #eef3f5 0%, #f8faf9 100%);
	color: #1f2a31;
}

.hub-login-shell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding: 32px 16px 56px;
	overflow: hidden;
}

.hub-login-shell::before,
.hub-login-shell::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: 0.12;
}

.hub-login-shell::before {
	right: 7vw;
	top: 18vh;
	width: 360px;
	height: 360px;
	border: 2px solid #167a3f;
	border-radius: 50%;
	box-shadow:
		0 0 0 46px rgba(22, 122, 63, 0.08),
		0 0 0 96px rgba(8, 118, 217, 0.08),
		0 0 0 150px rgba(22, 122, 63, 0.06);
}

.hub-login-shell::after {
	right: 10vw;
	bottom: 20vh;
	width: 320px;
	height: 120px;
	border-top: 2px solid #0876d9;
	border-bottom: 2px solid #167a3f;
	transform: rotate(-18deg);
}

.hub-login-orbit {
	position: absolute;
	pointer-events: none;
	border-radius: 999px;
	opacity: 0.16;
}

.hub-login-orbit-primary {
	left: -110px;
	top: 18vh;
	width: 250px;
	height: 250px;
	border: 36px solid #167a3f;
}

.hub-login-orbit-secondary {
	left: 12vw;
	bottom: -120px;
	width: 310px;
	height: 310px;
	border: 42px solid #0876d9;
}

.hub-login-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
}

.hub-login-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(20, 49, 43, 0.14);
}

.hub-login-card::before {
	content: "";
	display: block;
	height: 5px;
	background: linear-gradient(90deg, #167a3f 0%, #0876d9 100%);
}

.hub-login-card-body {
	padding: 34px 42px 32px;
}

.hub-login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	margin: 0 auto 18px;
	background: #fff;
	border: 1px solid #d8e3df;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(20, 49, 43, 0.08);
}

.hub-login-logo img {
	display: block;
	width: 74px;
	height: 74px;
	object-fit: contain;
}

.hub-login-title {
	margin: 0;
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #1f2a31;
}

.hub-login-subtitle {
	margin: 8px 0 28px;
	text-align: center;
	font-size: 15px;
	color: #607079;
}

.hub-login-form .input-group {
	margin-bottom: 16px !important;
}

.hub-login-form .form-control {
	height: 48px;
	border-color: #cfdad6;
	background: #f8fbfa;
	color: #314047;
	font-size: 14px;
}

.hub-login-form .form-control:focus {
	border-color: #167a3f;
	box-shadow: 0 0 0 0.2rem rgba(22, 122, 63, 0.14);
}

.hub-login-form .input-group-text {
	min-width: 46px;
	justify-content: center;
	border-color: #cfdad6;
	background: #edf3f1;
	color: #66757d;
}

.hub-login-button {
	height: 48px;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(90deg, #167a3f 0%, #0876d9 100%);
	font-weight: 700;
}

.hub-login-button:hover,
.hub-login-button:focus {
	background: linear-gradient(90deg, #126a36 0%, #0668c1 100%);
	box-shadow: 0 8px 18px rgba(8, 118, 217, 0.18);
}

.hub-login-note {
	margin: 28px 0 0;
	text-align: center;
	font-size: 13px;
	color: #7a878e;
}

.hub-login-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 1;
	text-align: center;
	font-size: 13px;
	color: #87929a;
}

.hub-login-panel .message,
.hub-login-panel .alert {
	margin-bottom: 18px;
	border-radius: 8px;
}

@media (max-width: 575.98px) {
	.hub-login-shell {
		padding: 24px 14px 56px;
	}

	.hub-login-card-body {
		padding: 30px 24px 28px;
	}

	.hub-login-title {
		font-size: 27px;
	}

	.hub-login-shell::before,
	.hub-login-shell::after,
	.hub-login-orbit {
		display: none;
	}
}