/* ==========================================================
   MUT-SEK TECH — PREMIUM LOGIN
   Frappe v16

   Single-column composition:
   Logo
   Brand title
   Login form

   Palette: navy, blue, sky blue, white and soft grey.
   ========================================================== */


/* ==========================================================
   FULL LOGIN CANVAS
   ========================================================== */

.for-login {
    position:
        relative !important;

    isolation:
        isolate;

    width:
        100vw !important;

    max-width:
        none !important;

    min-height:
        100vh !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    padding:
        48px 20px !important;

    display:
        grid !important;

    place-items:
        center !important;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #EDF6FF 0%,
            #F9FBFE 48%,
            #E8F1FB 100%
        ) !important;
}


/* Atmospheric background */

.for-login::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -2;

    width:
        520px;

    height:
        520px;

    top:
        -260px;

    right:
        -170px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                56,
                189,
                248,
                0.17
            ) 0%,
            rgba(
                37,
                99,
                235,
                0.06
            ) 56%,
            transparent 72%
        );
}


.for-login::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -2;

    width:
        470px;

    height:
        470px;

    left:
        -210px;

    bottom:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                11,
                31,
                58,
                0.11
            ) 0%,
            rgba(
                22,
                119,
                255,
                0.04
            ) 61%,
            transparent 74%
        );
}


/* ==========================================================
   CRITICAL LAYOUT RESET
   Prevent the logo/header from becoming a second column.
   ========================================================== */

.for-login > .login-content.page-card {
    position:
        relative !important;

    inset:
        auto !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    float:
        none !important;

    clear:
        both !important;

    width:
        min(
            430px,
            calc(
                100vw - 32px
            )
        ) !important;

    max-width:
        430px !important;

    min-width:
        0 !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        0 !important;

    overflow:
        visible !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   LOGO + TITLE
   Always directly above the login form.
   ========================================================== */

.for-login .page-card-head {
    position:
        static !important;

    inset:
        auto !important;

    transform:
        none !important;

    float:
        none !important;

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 auto 24px !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        0 !important;

    text-align:
        center !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.for-login .app-logo {
    position:
        static !important;

    inset:
        auto !important;

    transform:
        none !important;

    float:
        none !important;

    display:
        block !important;

    width:
        auto !important;

    max-width:
        108px !important;

    height:
        auto !important;

    max-height:
        92px !important;

    margin:
        0 auto 14px !important;

    object-fit:
        contain !important;

    filter:
        none !important;
}


.for-login .page-card-head-text {
    position:
        static !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;
}


.for-login .page-card-head h4,
.for-login .page-card-head-text h4 {
    width:
        100%;

    margin:
        0 !important;

    color:
        #0B2747 !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        -0.025em;

    text-align:
        center !important;
}


.for-login .page-card-subtitle {
    max-width:
        340px;

    margin:
        7px auto 0 !important;

    color:
        #728197 !important;

    font-size:
        13px;

    line-height:
        1.55;

    text-align:
        center !important;
}


/* ==========================================================
   ACTUAL LOGIN CARD
   Only the form is the floating white panel.
   ========================================================== */

.for-login .form-signin.form-login {
    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        32px 32px 30px !important;

    display:
        block !important;

    overflow:
        hidden !important;

    border:
        1px solid
        #D7E4F1 !important;

    border-radius:
        19px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.985
        ) !important;

    box-shadow:
        0 30px 70px
        rgba(
            20,
            55,
            95,
            0.14
        ),
        0 7px 20px
        rgba(
            20,
            55,
            95,
            0.06
        ) !important;

    backdrop-filter:
        blur(14px);
}


.for-login .form-signin.form-login::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            #0B315E 0%,
            #1677FF 58%,
            #38BDF8 100%
        );
}


/* ==========================================================
   FORM BODY
   ========================================================== */

.for-login .page-card-body {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.for-login .form-group {
    width:
        100% !important;

    margin-bottom:
        17px !important;
}


.for-login .form-label {
    color:
        #4E6278 !important;

    font-size:
        12px;

    font-weight:
        700;
}


/* ==========================================================
   INPUTS
   ========================================================== */

.for-login .email-field,
.for-login .password-field {
    position:
        relative;

    width:
        100% !important;
}


.for-login .form-control {
    width:
        100% !important;

    min-height:
        50px !important;

    padding-left:
        42px !important;

    border:
        1px solid
        #D3E1EF !important;

    border-radius:
        11px !important;

    background:
        #F4F8FC !important;

    color:
        #172033 !important;

    font-size:
        14px;

    box-shadow:
        inset 0 1px 2px
        rgba(
            15,
            45,
            80,
            0.025
        ) !important;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.for-login .form-control:focus {
    border-color:
        #75B5FF !important;

    background:
        #FFFFFF !important;

    box-shadow:
        0 0 0 4px
        rgba(
            22,
            119,
            255,
            0.10
        ) !important;
}


.for-login .field-icon {
    color:
        #71879D !important;
}


/* ==========================================================
   FORGOT PASSWORD
   ========================================================== */

.for-login .forgot-password-message {
    margin:
        10px 0 0 !important;

    text-align:
        right !important;
}


.for-login .forgot-password-message a {
    color:
        #315F8E !important;

    font-size:
        12px;

    font-weight:
        600;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.for-login .page-card-actions {
    width:
        100% !important;

    margin:
        20px 0 0 !important;

    padding:
        0 !important;
}


.for-login .btn-login,
.for-login .btn-primary,
.for-login button[data-variant="solid"],
.for-login .es-button[data-variant="solid"] {
    width:
        100% !important;

    min-height:
        50px !important;

    border:
        0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #0B4F9C 0%,
            #1677FF 100%
        ) !important;

    color:
        #FFFFFF !important;

    font-size:
        14px;

    font-weight:
        750 !important;

    box-shadow:
        0 12px 27px
        rgba(
            22,
            119,
            255,
            0.24
        ) !important;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.for-login .btn-login:hover,
.for-login .btn-primary:hover,
.for-login button[data-variant="solid"]:hover,
.for-login .es-button[data-variant="solid"]:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 16px 34px
        rgba(
            22,
            119,
            255,
            0.31
        ) !important;
}


/* Email-link option */

.for-login .btn-login-option {
    width:
        100% !important;

    min-height:
        46px;

    margin-top:
        0;

    border:
        1px solid
        #D7E3EF !important;

    border-radius:
        10px !important;

    background:
        #F3F6F9 !important;

    color:
        #294C70 !important;

    font-weight:
        600;
}


/* OR separator */

.for-login .page-card-actions .text-muted,
.for-login .page-card-actions p {
    color:
        #7A8797;
}


/* ==========================================================
   LINKS
   ========================================================== */

.for-login a {
    color:
        #315F8E !important;
}


.for-login a:hover {
    color:
        #1268C4 !important;
}


/* ==========================================================
   SIGNUP AREA
   ========================================================== */

.for-login .sign-up-message {
    width:
        100%;

    margin:
        16px auto 0 !important;

    color:
        #77869A;

    text-align:
        center !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
    max-width: 560px
) {

    .for-login {
        padding:
            30px 15px !important;
    }


    .for-login > .login-content.page-card {
        width:
            min(
                100%,
                400px
            ) !important;
    }


    .for-login .app-logo {
        max-width:
            94px !important;

        max-height:
            82px !important;
    }


    .for-login .page-card-head h4,
    .for-login .page-card-head-text h4 {
        font-size:
            18px !important;
    }


    .for-login .form-signin.form-login {
        padding:
            27px 20px 25px !important;

        border-radius:
            16px !important;
    }

}


/* BEGIN MUT-SEK LOGIN FINAL ALIGNMENT */


/* ==========================================================
   MASTER LOGIN COLUMN
   Logo, title and form MUST share the same centre axis.
   ========================================================== */

.for-login {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    min-height:
        100vh !important;

    padding:
        42px 20px !important;

    box-sizing:
        border-box !important;
}


/* Outer login wrapper */

.for-login > .login-content.page-card {
    position:
        relative !important;

    width:
        100% !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    transform:
        none !important;

    left:
        auto !important;

    right:
        auto !important;
}


/* ==========================================================
   BRAND HEADER
   ========================================================== */

.for-login .page-card-head {
    position:
        relative !important;

    width:
        100% !important;

    max-width:
        420px !important;

    margin:
        0 auto 24px !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    border:
        0 !important;

    border-top:
        0 !important;

    border-right:
        0 !important;

    border-bottom:
        0 !important;

    border-left:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* Remove every inherited line/pseudo accent
   around the heading area. */

.for-login .page-card-head::before,
.for-login .page-card-head::after,
.for-login .page-card-head-text::before,
.for-login .page-card-head-text::after,
.for-login .page-card-head h4::before,
.for-login .page-card-head h4::after {
    content:
        none !important;

    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* Remove possible real separator elements too. */

.for-login .page-card-head hr,
.for-login .page-card-head .divider,
.for-login .page-card-head .separator,
.for-login .page-card-head .accent-line,
.for-login .page-card-head .brand-accent,
.for-login .page-card-head .login-accent {
    display:
        none !important;
}


/* Logo */

.for-login .app-logo {
    display:
        block !important;

    width:
        auto !important;

    max-width:
        100px !important;

    height:
        auto !important;

    max-height:
        90px !important;

    margin:
        0 auto 15px !important;

    padding:
        0 !important;

    object-fit:
        contain !important;

    transform:
        none !important;

    filter:
        none !important;
}


/* Title wrapper */

.for-login .page-card-head-text {
    width:
        100% !important;

    max-width:
        420px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        block !important;

    text-align:
        center !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* Title */

.for-login .page-card-head h4,
.for-login .page-card-head-text h4 {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    color:
        #0B2747 !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        -0.02em;

    text-align:
        center !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   LOGIN CARD
   Force Frappe's internal max-width to stop shifting it.
   ========================================================== */

.for-login .form-signin,
.for-login .form-login,
.for-login .form-signin.form-login {
    position:
        relative !important;

    width:
        100% !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    padding:
        31px 32px 29px !important;

    box-sizing:
        border-box !important;

    float:
        none !important;

    left:
        auto !important;

    right:
        auto !important;

    transform:
        none !important;
}


/* Card appearance */

.for-login .form-signin.form-login {
    overflow:
        hidden !important;

    border:
        1px solid
        #D8E5F2 !important;

    border-radius:
        18px !important;

    background:
        #FFFFFF !important;

    box-shadow:
        0 26px 65px
        rgba(
            20,
            55,
            95,
            0.13
        ),
        0 6px 18px
        rgba(
            20,
            55,
            95,
            0.055
        ) !important;
}


/* Keep only the clean blue accent on the FORM card. */

.for-login .form-signin.form-login::before {
    content:
        "";

    display:
        block !important;

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    width:
        100% !important;

    height:
        4px !important;

    margin:
        0 !important;

    background:
        linear-gradient(
            90deg,
            #0B315E 0%,
            #1677FF 62%,
            #38BDF8 100%
        ) !important;

    border:
        0 !important;
}


/* ==========================================================
   FORM CONTENT ALIGNMENT
   ========================================================== */

.for-login .page-card-body,
.for-login .page-card-actions {
    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    box-sizing:
        border-box !important;
}


.for-login .form-group {
    width:
        100% !important;

    box-sizing:
        border-box !important;
}


.for-login .email-field,
.for-login .password-field {
    width:
        100% !important;
}


.for-login .form-control {
    width:
        100% !important;

    max-width:
        none !important;

    box-sizing:
        border-box !important;
}


/* Buttons full and symmetrical */

.for-login .btn-login,
.for-login .btn-primary,
.for-login .btn-login-option,
.for-login button[data-variant="solid"],
.for-login .es-button[data-variant="solid"] {
    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    box-sizing:
        border-box !important;
}


/* Forgot password */

.for-login .forgot-password-message {
    width:
        100% !important;

    margin:
        12px 0 0 !important;

    text-align:
        right !important;
}


/* ==========================================================
   REMOVE ANY OLD HEADER-LINE COLOUR OVERRIDES
   ========================================================== */

.for-login .page-card-head,
.for-login .page-card-head-text,
.for-login .page-card-head h4,
.for-login .page-card-head-text h4 {
    border-bottom:
        0 !important;

    border-image:
        none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
    max-width: 560px
) {

    .for-login {
        justify-content:
            flex-start !important;

        padding:
            34px 15px !important;
    }


    .for-login > .login-content.page-card,
    .for-login .page-card-head,
    .for-login .page-card-head-text,
    .for-login .form-signin,
    .for-login .form-login,
    .for-login .form-signin.form-login {
        width:
            100% !important;

        max-width:
            390px !important;
    }


    .for-login .form-signin.form-login {
        padding:
            27px 21px 25px !important;

        border-radius:
            16px !important;
    }


    .for-login .app-logo {
        max-width:
            90px !important;

        max-height:
            82px !important;
    }


    .for-login .page-card-head h4,
    .for-login .page-card-head-text h4 {
        font-size:
            18px !important;
    }

}


/* END MUT-SEK LOGIN FINAL ALIGNMENT */


/* BEGIN MUT-SEK LOGIN VIEWPORT ALIGNMENT */


/* ==========================================================
   REAL VIEWPORT CANVAS

   This intentionally escapes Frappe's page/container width.
   The entire login experience belongs to the browser viewport.
   ========================================================== */

html,
body {
    min-width:
        200px !important;
}


body:has(.for-login) {
    width:
        100% !important;

    min-width:
        200px !important;

    min-height:
        100vh !important;

    min-height:
        100dvh !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    background:
        #EDF5FE !important;
}


.for-login {
    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        10 !important;

    width:
        100vw !important;

    max-width:
        none !important;

    min-width:
        200px !important;

    height:
        100vh !important;

    height:
        100dvh !important;

    min-height:
        100vh !important;

    min-height:
        100dvh !important;

    margin:
        0 !important;

    padding:
        18px 12px !important;

    box-sizing:
        border-box !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    background:
        linear-gradient(
            135deg,
            #EDF6FF 0%,
            #FAFCFF 48%,
            #E8F1FB 100%
        ) !important;
}


/* ==========================================================
   MASTER LOGIN STACK

   margin:auto centres vertically AND horizontally when space
   is available. On short screens it naturally becomes
   scrollable instead of clipping the form.
   ========================================================== */

.for-login > .login-content.page-card {
    position:
        relative !important;

    inset:
        auto !important;

    flex:
        0 0 auto !important;

    width:
        min(
            420px,
            calc(
                100vw - 24px
            )
        ) !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin:
        auto !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    transform:
        none !important;
}


/* Every element uses predictable dimensions. */

.for-login *,
.for-login *::before,
.for-login *::after {
    box-sizing:
        border-box;
}


/* ==========================================================
   BRANDING
   ========================================================== */

.for-login .page-card-head {
    width:
        100% !important;

    max-width:
        420px !important;

    margin:
        0 auto clamp(
            15px,
            2.8vh,
            24px
        ) !important;

    padding:
        0 !important;

    flex:
        0 0 auto !important;

    text-align:
        center !important;
}


.for-login .app-logo {
    width:
        auto !important;

    max-width:
        clamp(
            68px,
            18vw,
            100px
        ) !important;

    height:
        auto !important;

    max-height:
        clamp(
            66px,
            15vh,
            90px
        ) !important;

    margin:
        0 auto clamp(
            8px,
            1.8vh,
            15px
        ) !important;

    object-fit:
        contain !important;

    filter:
        none !important;
}


.for-login .page-card-head-text,
.for-login .page-card-head h4,
.for-login .page-card-head-text h4 {
    width:
        100% !important;

    max-width:
        420px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    text-align:
        center !important;
}


.for-login .page-card-head h4,
.for-login .page-card-head-text h4 {
    font-size:
        clamp(
            15px,
            4.7vw,
            20px
        ) !important;

    line-height:
        1.25 !important;
}


/* ==========================================================
   WHITE LOGIN CARD
   ========================================================== */

.for-login .form-signin,
.for-login .form-login,
.for-login .form-signin.form-login {
    width:
        100% !important;

    max-width:
        420px !important;

    min-width:
        0 !important;

    margin:
        0 auto !important;

    padding:
        clamp(
            15px,
            5vw,
            32px
        ) !important;

    border-radius:
        clamp(
            13px,
            4vw,
            18px
        ) !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   FIELDS
   ========================================================== */

.for-login .page-card-body,
.for-login .page-card-actions,
.for-login .form-group,
.for-login .email-field,
.for-login .password-field {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;
}


.for-login .form-group {
    margin-bottom:
        clamp(
            11px,
            2.4vh,
            17px
        ) !important;
}


.for-login .form-control {
    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        clamp(
            44px,
            7.5vh,
            50px
        ) !important;

    padding-left:
        clamp(
            34px,
            10vw,
            42px
        ) !important;

    padding-right:
        48px !important;

    font-size:
        clamp(
            12px,
            3.7vw,
            14px
        ) !important;
}


/* ==========================================================
   LOGIN ACTIONS
   ========================================================== */

.for-login .page-card-actions {
    margin-top:
        clamp(
            14px,
            2.8vh,
            20px
        ) !important;
}


.for-login .btn-login,
.for-login .btn-primary,
.for-login .btn-login-option,
.for-login button[data-variant="solid"],
.for-login .es-button[data-variant="solid"] {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    white-space:
        normal !important;
}


.for-login .btn-login,
.for-login .btn-primary,
.for-login button[data-variant="solid"],
.for-login .es-button[data-variant="solid"] {
    min-height:
        clamp(
            45px,
            7.5vh,
            50px
        ) !important;
}


/* ==========================================================
   VERY NARROW MOBILE: 200PX–319PX
   ========================================================== */

@media (
    min-width: 200px
) and (
    max-width: 319px
) {

    .for-login {
        padding:
            10px 6px !important;
    }


    .for-login > .login-content.page-card {
        width:
            calc(
                100vw - 12px
            ) !important;

        max-width:
            none !important;
    }


    .for-login .page-card-head {
        margin-bottom:
            12px !important;
    }


    .for-login .app-logo {
        max-width:
            70px !important;

        max-height:
            66px !important;

        margin-bottom:
            8px !important;
    }


    .for-login .page-card-head h4,
    .for-login .page-card-head-text h4 {
        font-size:
            15px !important;

        line-height:
            1.25 !important;
    }


    .for-login .form-signin.form-login {
        padding:
            14px 10px !important;

        border-radius:
            13px !important;
    }


    .for-login .form-control {
        min-height:
            43px !important;

        padding-left:
            33px !important;

        padding-right:
            38px !important;

        font-size:
            12px !important;
    }


    .for-login .forgot-password-message {
        font-size:
            11px !important;
    }


    .for-login .btn-login,
    .for-login .btn-primary,
    .for-login .btn-login-option,
    .for-login button[data-variant="solid"],
    .for-login .es-button[data-variant="solid"] {
        font-size:
            12px !important;
    }

}


/* ==========================================================
   STANDARD MOBILE: 320PX–560PX
   ========================================================== */

@media (
    min-width: 320px
) and (
    max-width: 560px
) {

    .for-login {
        padding:
            20px 12px !important;
    }


    .for-login > .login-content.page-card {
        width:
            min(
                400px,
                calc(
                    100vw - 24px
                )
            ) !important;
    }


    .for-login .form-signin.form-login {
        padding:
            24px 20px !important;
    }

}


/* ==========================================================
   SHORT DESKTOP / LAPTOP VIEWPORTS

   Keeps the complete login visible even where browser chrome
   leaves relatively little vertical space.
   ========================================================== */

@media (
    min-width: 561px
) and (
    max-height: 640px
) {

    .for-login {
        padding:
            12px 20px !important;
    }


    .for-login .page-card-head {
        margin-bottom:
            12px !important;
    }


    .for-login .app-logo {
        max-width:
            74px !important;

        max-height:
            68px !important;

        margin-bottom:
            7px !important;
    }


    .for-login .page-card-head h4,
    .for-login .page-card-head-text h4 {
        font-size:
            17px !important;
    }


    .for-login .form-signin.form-login {
        padding:
            20px 28px !important;
    }


    .for-login .form-group {
        margin-bottom:
            10px !important;
    }


    .for-login .form-control {
        min-height:
            43px !important;
    }


    .for-login .page-card-actions {
        margin-top:
            12px !important;
    }


    .for-login .btn-login,
    .for-login .btn-primary,
    .for-login button[data-variant="solid"],
    .for-login .es-button[data-variant="solid"] {
        min-height:
            44px !important;
    }

}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (
    min-width: 1200px
) and (
    min-height: 700px
) {

    .for-login > .login-content.page-card {
        max-width:
            430px !important;
    }


    .for-login .form-signin,
    .for-login .form-login,
    .for-login .form-signin.form-login,
    .for-login .page-card-head {
        max-width:
            430px !important;
    }

}


/* END MUT-SEK LOGIN VIEWPORT ALIGNMENT */