/*----------------------------------------
    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-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.5rem;
		margin-bottom: 0.5rem;
	}
}