/* Mobile refinement for the RemUI login page. */
@media (max-width: 767.98px) {
    body.pagelayout-login,
    body.pagelayout-login #page-wrapper,
    body.pagelayout-login #page,
    body.pagelayout-login #page-content,
    body.pagelayout-login #region-main-box,
    body.pagelayout-login #region-main {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    body.pagelayout-login #page {
        min-height: 100vh;
        min-height: 100dvh;
        background-position: center center;
    }

    body.pagelayout-login .login-wrapper {
        display: flex;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 16px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    body.pagelayout-login.loginleft .login-container,
    body.pagelayout-login.loginright .login-container,
    body.pagelayout-login.logincenter .login-container,
    body.pagelayout-login .login-container {
        position: static;
        inset: auto;
        width: 100%;
        max-width: 422px;
        min-width: 0;
        margin: 0 auto;
        border-radius: 12px;
        box-sizing: border-box;
        overflow: visible;
        animation: none;
    }

    body.pagelayout-login .login-container .logo-area {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    body.pagelayout-login .login-container .logo-area img {
        width: auto;
        max-width: 220px;
        height: auto;
        object-fit: contain;
    }

    body.pagelayout-login .login-container input,
    body.pagelayout-login .login-container button,
    body.pagelayout-login .login-container .btn {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 380px), (max-height: 700px) {
    body.pagelayout-login .login-wrapper {
        padding: 8px;
        align-items: flex-start;
    }
}