/*----------------------------------------
    Login Page
------------------------------------------*/
.login-bg
{
    background-image: url('../../images/gallery/flat-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#login-page
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#login-page .card-panel.border-radius-6.login-card
{
    margin-left: 0 !important;
}

/* Default (desktop): cap assets that used to be fixed huge px sizes */
.login-main-logo {
	width: 100%;
	max-width: 400px;
	height: auto;
}
.login-qr {
	width: 50%;
	max-width: 280px;
	height: auto;
	vertical-align: middle;
}
.login-ms-img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.login-credentials {
	max-width: 360px;
	margin-right: auto !important;
	margin-left: auto !important;
}
#login-page #login-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
}
.login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 360px;
	margin: 8px auto 18px;
	color: #737b86;
	font-size: 0.85rem;
}
.login-divider::before,
.login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #d8dde3;
}
.login-error {
	max-width: 360px;
	margin: 0 auto 12px;
	padding: 9px 12px;
	border-left: 3px solid #c62828;
	background: #ffebee;
	color: #8e1b1b;
	font-size: 0.9rem;
	text-align: left;
}
.login-cos-footer {
	position: fixed;
	right: 20px;
	bottom: 20px;
	left: auto;
	z-index: 2;
	pointer-events: none;
}
.login-cos-img {
	width: 100%;
	max-width: 280px;
	height: auto;
}

/* 480×800 and similar portrait kiosks — single screen, no scroll */
@media screen and (max-width: 520px) and (max-height: 900px) {
	html.login-screen,
	html.login-screen body {
		height: 100%;
		max-height: 100dvh;
		overflow: hidden;
	}
	html.login-screen body.blank-page .content-overlay {
		display: none;
	}
	html.login-screen footer.page-footer {
		display: none !important;
	}
	html.login-screen body .container {
		width: 100%;
		max-width: 100%;
		padding-left: 6px;
		padding-right: 6px;
		margin-bottom: 0 !important;
	}
	#login-page {
		height: 100dvh;
		max-height: 100dvh;
		min-height: 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 2px 4px 70px;
		margin-bottom: 0 !important;
		align-items: flex-start;
		justify-content: flex-start;
	}
	#login-page > .col {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		max-height: calc(100dvh - 8px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	#login-page .login-card {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		padding: 8px 10px !important;
		margin-bottom: 0 !important;
	}
	#login-page .login-card .login-logo-wrap {
		margin-top: 2px !important;
		margin-bottom: 4px !important;
	}
	#login-page .login-main-logo {
		max-width: min(92vw, 260px);
		max-height: 14vh;
		width: auto;
	}
	#login-page .login-scan-title {
		font-size: 1.05rem;
		line-height: 1.2;
		margin: 4px 0 !important;
	}
	#login-page .login-form {
		width: 96%;
		max-width: 100%;
	}
	#login-page .login-form .row {
		margin-bottom: 6px;
	}
	#login-page .login-form .row.margin.qr {
		margin-bottom: 8px;
	}
	#login-page .login-qr {
		width: auto;
		max-width: min(64vw, 240px);
		max-height: 28vh;
	}
	#login-page #ms-login-btn {
		margin-top: 4px !important;
		margin-bottom: 6px !important;
	}
	#login-page .login-ms-img {
		max-height: 44px;
		width: auto;
		max-width: 100%;
	}
	#login-page .login-cos-footer {
		right: 8px;
		bottom: 6px;
		left: 8px;
	}
	#login-page .login-cos-footer .mt-5 {
		margin-top: 0 !important;
	}
	#login-page .login-cos-img {
		max-width: min(36vw, 140px);
	}
	#login-page .input-field {
		margin-top: 0.25rem;
		margin-bottom: 0.25rem;
	}
	#login-page .login-credentials input {
		height: 2.5rem;
		margin-bottom: 4px;
	}
	#login-page .login-divider {
		margin-top: 2px;
		margin-bottom: 8px;
	}
}