.clear {
	clear : both;
}

body.embedded .login-header,
body.embedded .mobile-app-link-container {
	display : none;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

.login-html,
.login-body {
	height   : auto;
	overflow : visible;
}

.login-page {
	background            : #FFF url(background.jpg) no-repeat center bottom;
	background-attachment : fixed;
	background-position   : top;
	background-size       : cover;
	overflow-y            : visible;
	display               : flex;
	min-height            : 100vh;
	flex-flow             : column;
}

.login-header {
	padding    : 1.75rem;
	background : #FFF;
	text-align : center;
}

.login-header img {
	display        : inline-block;
	vertical-align : middle;
	max-width      : 400px;
	max-height     : 250px;
}

.login-hint {
	color  : rgba(255, 255, 255, 0.9);
	margin : 0.5rem 0 0;
	width  : 100%;
}

.login-content {
	flex            : 1 1 auto;
	display         : flex;
	flex-direction  : column;
	align-items     : stretch;
	align-self      : center;
	justify-content : flex-start;
	width           : fit-content;
	max-width       : 90vw;
	gap             : 1.25rem;
	margin-bottom   : 1.25rem;
}

.login-page-section {
	color           : var(--row-color, #FFF);
	transition      : opacity 0.5s;
	position        : relative;
	flex            : 1 1 auto;
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	justify-content : flex-start;
	gap             : 0.5rem;
	padding         : 0.5rem;
	max-width       : 100%;
	min-width       : 0;
}

.login-page-section:has(.login-form, #two-factor-auth-form) {
	min-width : 320px;
}

.login-page-section .login-container {
	display : flex;
}

.login-page-section .login-form,
.login-page-section #two-factor-auth-form {
	width : 100%;
}

.login-page-section .sso-section-container {
	width     : 100%;
	display   : flex;
	flex-flow : column;
	gap       : 0.5rem;
}

.login-page-section .sso-section-container:not(:has(> .sso-menu-container .sso-login-button:not(.hidden))),
.login-page-section .sso-divider:not(:has(+ .sso-section-container > .sso-menu-container .sso-login-button:not(.hidden)))  {
	display : none;
}

.login-page-section .sso-section-container .sso-login-button.hidden {
	display: none;
}

.login-page-section .sso-section-container .sso-login-button {
	margin-right : 0;
}

.login-page-section .sso-section-container .sso-login-button .sso-button-text {
	white-space   : nowrap;
	display       : block;
	overflow-x    : clip;
	overflow-y    : visible;
	text-overflow : ellipsis;
}

.login-page-section .sso-section-container .sso-menu-container {
	display        : flex;
	flex-direction : column;
	gap            : 0.5rem;
}

.login-page .login-content .login-page-section .form-input:disabled {
	opacity : 0.45;
}

.login-page-section input::selection,
.login-page-section textarea::selection {
	background-color : Highlight;
	color            : HighlightText;
}

.login-page-section .vertical-divider {
	border-left : 1px solid rgba(255, 255, 255, 0.2);
	margin      : 0 1em;
}

.form-error-msg {
	color     : #FFF;
	margin    : 0.5em 0;
	font-size : 0.9em;
}

.form-button:hover {
	background-color : rgb(255, 93, 46);
}

.registration-links {
	float      : right;
	margin-top : 1rem;
}

.registration-links p {
	margin : 0 0 3px;
}

.registration-links a {
	color           : #FFF !important;
	text-decoration : none;
}

.registration-links a:hover {
	text-decoration : underline;
}

.registration-header {
	margin        : -20px 0 35px 0;
	border-bottom : 1px solid #FFF;
	font-family   : Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}

.login-disclaimer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 170px;
	padding: 10px;
	color: #FFF;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	z-index: 1;
}

.login-disclaimer:before {
	content: url(disclaimer_logo.png);
	display: block;
	margin-bottom: 1em;
}

.mobile-app-link-container {
	background    : #fff;
	border-bottom : 1px solid #e8e8e8;
}

.mobile-app-link {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 0.5rem;
	padding         : 0.6rem 1rem;
	color           : #444;
	text-decoration : none;
	font-size       : 0.9rem;
}

.mobile-app-link:hover {
	background : #f5f5f5;
}

.mobile-app-icon {
	width      : 28px;
	height     : 28px;
	flex-shrink: 0;
}

.mobile-app-text b {
	font-weight: 600;
}

#two-factor-auth-form img {
	margin: auto;
}

.ev-link {
	color : #fff;
}

.qr-code {
	margin : 0.5rem 0;
}

.qr-code img {
	border        : 2px solid rgba(255, 255, 255, 0.9);
	border-radius : 2px;
}

.qr-code-scan-message {
	text-align    : center;
	margin-bottom : 1em;
}

.oauth-login-header {
	margin-bottom : 1.5rem;
}

.oauth-login-header img {
	max-width  : 48px;
	max-height : 48px;
}

.oauth-login-header span,
.oauth-login-header img {
	vertical-align : middle;
}

.login-content::before,
.login-content::after {
	content    : '';
	flex       : 1 1 0;
	max-height : 4rem;
}

.login-area-row {
	display                 : flex;
	flex-direction          : column;
	align-items             : stretch;
	gap                     : 0.5rem 0;
	padding                 : 1rem;
	margin                  : 0 0.5rem;
	background-color        : var(--row-bg, rgba(33, 60, 107, 0.85));
	backdrop-filter         : blur(var(--row-blur, 16px)) brightness(var(--row-brightness, 1));
	-webkit-backdrop-filter : blur(var(--row-blur, 16px)) brightness(var(--row-brightness, 1));
	border                  : 1px solid rgba(255, 255, 255, 0.1);
	border-radius           : 0.75rem;
	box-shadow              : 0 8px 32px rgba(0, 0, 0, 0.45);
}

.login-row-sections {
	display         : flex;
	flex-direction  : row;
	flex-wrap       : nowrap;
	align-items     : stretch;
	justify-content : center;
	gap             : 0 1.25rem;
}

.login-area-row .login-row-title {
	width         : 100%;
	text-align    : center;
	font-weight   : 600;
	color         : var(--row-title-color, rgba(255, 255, 255, 0.75));
	margin-bottom : 0;
	font-size     : 1.5rem;
}

.login-page-section + .login-page-section::before {
	content    : '';
	position   : absolute;
	left       : -0.625rem;
	top        : 6%;
	bottom     : 6%;
	width      : 1px;
	background : linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, 0.2) 25%,
		rgba(255, 255, 255, 0.2) 75%,
		transparent
	);
}

.login-section-title {
	font-size      : 0.75rem;
	font-weight    : 700;
	letter-spacing : 0.1rem;
	text-transform : uppercase;
	color          : var(--row-title-color, rgba(255, 255, 255, 0.55));
	margin         : 0 0 0.5rem;
	width          : 100%;
	text-align     : center;
}

.login-section-custom-text {
	font-size  : 0.9rem;
	line-height: 1.65;
	width      : 100%;
	text-align : center;
}

.login-page .login-content .login-page-section .form-input {
	display       : block;
	padding       : 1rem 0.75rem;
	width         : 100%;
	font-size     : 1.15rem;
	background    : rgba(255, 255, 255, 0.12);
	border        : 1px solid rgba(255, 255, 255, 0.18);
	border-radius : 0.28571429rem;
	box-sizing    : border-box;
	color         : #fff;
	margin        : 0 0 0.5rem 0;
	height        : 36px;
}

.login-page .login-content .login-page-section .form-input::placeholder {
	color : rgba(255, 255, 255, 0.45);
}

.login-page .login-content .login-page-section .form-input:focus {
	background   : rgba(255, 255, 255, 0.2);
	border-color : rgba(255, 255, 255, 0.4);
	outline      : none;
}

.form-button-container {
	box-sizing : border-box;
	float      : none;
	color      : #FFF;
	width      : 100%;
}

.form-button {
	border           : 0;
	background-color : rgb(252, 81, 32);
	font-weight      : bold;
	color            : #FFF;
	float            : none;
	width            : 100%;
	margin-top       : 0.4em;
	border-radius    : 8px;
	font-size        : 15px;
	padding          : 0.65em 2em;
}

/* ── MFA forms in login-page-section style ── */

.action-link,
.login-recovery {
	display    : block;
	text-align : center;
	font-size  : 0.9rem;
	color      : rgba(255, 255, 255, 0.75);
}

.login-recovery {
	margin-bottom : 0.25rem;
}

.action-link:hover,
.login-recovery:hover {
	color           : rgba(255, 255, 255, 0.9);
	text-decoration : underline;
}

.mfa-setup-section {
	max-width : 400px;
}

.mfa-setup-section .qr-code {
	align-self : center;
	margin     : 0 0 0.25rem;
}

@media screen and (width < 600px) {
	html {
		font-size : 20px !important;
	}

	.login-header {
		padding : 1rem;
	}

	.login-content {
		max-width : 100%;
		width     : 100%;
	}

	.login-area-row {
		padding       : 0.75rem;
		margin        : 0;
		border-radius : 0;
		box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.45);
		border-width  : 1px 0;
	}

	.login-row-sections {
		flex-direction : column;
		align-items    : center;
	}

	.login-page-section + .login-page-section {
		margin-top : 0.5rem;
	}

	.login-page-section + .login-page-section::before {
		display : none;
	}

	.login-page-section {
		padding : 0.25rem 0;
		width   : 100%;
	}

	.login-page-section .login-section-title {
		margin-bottom : 0.25rem;
	}

	.login-page-section:has(.login-form, #two-factor-auth-form) {
		min-width : 240px;
	}
}