[data-cellid="footer_c"][data-page="_global_login"][data-cellid="footer_c"][data-page="_global_login"][data-cellid="footer_c"][data-page="_global_login"] {
  width: 33.33333333%;
}
[data-page="_global_login"][data-itemid="page_image_ash8f23hr"] {
  width: 400px;
}


/* ============================================================
   WINGS LOGIN PAGE
   RESPONSIVE FINAL
   PHPRUNNER 11.3
   ============================================================ */

:root {
    --dswd-blue: #2e3192;
    --dswd-blue-dark: #252875;
    --dswd-red: #ee1c25;
    --dswd-yellow: #fef200;

    --login-footer-height: 64px;
}


/* ============================================================
   1. RESET
   ============================================================ */

html,
body {

    width: 100% !important;
    min-width: 0 !important;

    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
}


*,
*::before,
*::after {

    box-sizing: border-box !important;
}


/* ============================================================
   2. BODY
   ============================================================ */

body {

    position: relative !important;

    width: 100% !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    margin: 0 !important;

    padding: 0 0 var(--login-footer-height) !important;

    background: #151821 !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;
}


/* ============================================================
   3. BACKGROUND
   ============================================================ */

#wingsLoginBackground {

    position: fixed !important;

    inset: 0 !important;

    z-index: 0 !important;

    width: 100% !important;

    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("images/bg.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    background-color:
        #151821 !important;

    pointer-events:
        none !important;
}


/* ============================================================
   4. BACKGROUND OVERLAY
   ============================================================ */

#wingsLoginOverlay {

    position: fixed !important;

    inset: 0 !important;

    z-index: 1 !important;

    width: 100% !important;

    height: 100vh !important;
    height: 100dvh !important;

    background:
        rgba(8, 12, 29, 0.15) !important;

    pointer-events:
        none !important;
}


/* ============================================================
   5. PHPRUNNER WRAPPERS
   ============================================================ */

body .rnr-page,
body .r-page,
body .rnr-pagewrapper,
body .r-page-wrapper,
body .rnr-body,
body .r-body,
body .rnr-content,
body .r-content,
body .rnr-c,
body .rnr-cwrapper,
body .container,
body .container-fluid {

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;
}


body .rnr-page,
body .r-page,
body .rnr-pagewrapper,
body .r-page-wrapper {

    position:
        relative !important;

    z-index:
        2 !important;
}


/* ============================================================
   6. PHPRUNNER LOGIN RESET
   ============================================================ */

.bs-pagepanel .panel,
.bs-pagepanel .panel-default,
.bs-pagepanel .panel-primary,
.bs-pagepanel .panel-body,
.bs-pagepanel form,
.bs-pagepanel .form-horizontal {

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* ============================================================
   7. REMOVE BOOTSTRAP FIELD COLUMNS
   ============================================================ */

.bs-pagepanel [class*="col-xs-"],
.bs-pagepanel [class*="col-sm-"],
.bs-pagepanel [class*="col-md-"],
.bs-pagepanel [class*="col-lg-"] {

    float:
        none !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;
}


.bs-pagepanel .row,
.bs-pagepanel .rnr-row {

    width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* ============================================================
   8. DESKTOP LOGIN CARD
   ============================================================ */

body.wings-desktop .bs-pagepanel {

    position:
        fixed !important;

    top:
        calc(
            (
                100dvh -
                var(--login-footer-height)
            ) / 2
        ) !important;

    left:
        50% !important;

    z-index:
        100 !important;


    /*
       KEY RESPONSIVE FIX

       Previously:
       width: 24vw

       Now:
       minimum = 350px
       preferred = 25vw
       maximum = 420px
    */

    width:
        clamp(
            350px,
            25vw,
            420px
        ) !important;

    max-width:
        calc(100vw - 40px) !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        clamp(20px, 2.2vh, 28px)
        clamp(24px, 2vw, 32px)
        clamp(22px, 2.2vh, 30px) !important;

    background:
        #ffffff !important;

    border:
        none !important;

    border-radius:
        18px !important;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,0.24) !important;

    transform:
        translate(-50%, -50%) !important;

    overflow:
        visible !important;
}


/* ============================================================
   9. BRANDING
   ============================================================ */

.login-branding {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    text-align:
        center !important;
}


/* ============================================================
   10. WINGS LOGO
   ============================================================ */

.wings-logo-wrap {

    display:
        flex !important;

    width:
        100% !important;

    margin:
        0 auto 5px !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


.wings-logo {

    display:
        block !important;

    width:
        clamp(
            48px,
            3.2vw,
            62px
        ) !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;
}


/* ============================================================
   11. SYSTEM NAME
   ============================================================ */

.wings-system-name {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #181818 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(
            15px,
            1vw,
            18px
        ) !important;

    font-weight:
        700 !important;

    line-height:
        1.08 !important;

    text-align:
        center !important;
}


.wings-name-line-one,
.wings-name-line-two {

    display:
        block !important;

    width:
        100% !important;

    text-align:
        center !important;
}


/* ============================================================
   12. TAGLINE
   ============================================================ */

.wings-tagline {

    display:
        block !important;

    margin:
        5px
        0
        12px !important;

    padding:
        0 !important;

    color:
        var(--dswd-red) !important;

    font-size:
        clamp(
            10px,
            0.62vw,
            12px
        ) !important;

    font-style:
        italic !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    text-align:
        center !important;
}


/* ============================================================
   13. LOGIN HEADING
   ============================================================ */

.login-heading {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0
        0
        15px !important;

    padding:
        0 !important;

    color:
        var(--dswd-blue) !important;

    font-size:
        clamp(
            17px,
            1.05vw,
            20px
        ) !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    text-align:
        center !important;
}


/* ============================================================
   14. LOGIN MESSAGE
   ============================================================ */

.bs-pagepanel [data-itemtype="login_message"],
.bs-pagepanel .alert,
.bs-pagepanel .rnr-message {

    width:
        100% !important;

    margin:
        0 0 8px !important;

    padding:
        6px 8px !important;

    font-size:
        11px !important;
}


/* ============================================================
   15. FORM GROUPS
   ============================================================ */

.bs-pagepanel .form-group,
.bs-pagepanel .rnr-field,
.bs-pagepanel .rnr-control {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 0 7px !important;

    padding:
        0 !important;
}


/* ============================================================
   16. LABELS
   ============================================================ */

.bs-pagepanel label {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0
        0
        3px !important;

    padding:
        0 !important;

    color:
        #555555 !important;

    font-size:
        11px !important;

    font-weight:
        400 !important;

    line-height:
        1.2 !important;

    text-align:
        left !important;
}


/* ============================================================
   17. INPUTS
   ============================================================ */

.bs-pagepanel input[type="text"],
.bs-pagepanel input[type="email"],
.bs-pagepanel input[type="password"] {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        38px !important;

    min-height:
        38px !important;

    margin:
        0 !important;

    padding:
        7px 8px !important;

    color:
        #222222 !important;

    background:
        rgba(
            224,
            235,
            251,
            0.95
        ) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        #707070 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


.bs-pagepanel input[type="text"]:focus,
.bs-pagepanel input[type="email"]:focus,
.bs-pagepanel input[type="password"]:focus {

    border-bottom:
        2px solid
        var(--dswd-blue) !important;

    background:
        #eef4ff !important;
}


/* ============================================================
   18. REMEMBER ME
   ============================================================ */

.bs-pagepanel .checkbox,
.bs-pagepanel .checkbox-inline {

    display:
        flex !important;

    width:
        100% !important;

    margin:
        4px
        0
        10px !important;

    padding:
        0 !important;

    align-items:
        center !important;
}


.bs-pagepanel input[type="checkbox"] {

    position:
        static !important;

    width:
        13px !important;

    height:
        13px !important;

    margin:
        0
        6px
        0
        0 !important;
}


.bs-pagepanel .checkbox label,
.bs-pagepanel .checkbox-inline label {

    display:
        inline-flex !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-items:
        center !important;

    color:
        #666666 !important;

    font-size:
        10px !important;
}


/* ============================================================
   19. LOGIN BUTTON
   ============================================================ */

.bs-pagepanel .btn-primary,
.bs-pagepanel button[type="submit"],
.bs-pagepanel input[type="submit"],
.bs-pagepanel [data-itemtype="login_button"],
.bs-pagepanel [data-itemtype="loginbutton"] {

    display:
        flex !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        42px !important;

    min-height:
        42px !important;

    margin:
        2px
        0
        0 !important;

    padding:
        0
        15px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    color:
        #ffffff !important;

    background:
        var(--dswd-blue) !important;

    border:
        0 !important;

    border-radius:
        3px !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;
}


.bs-pagepanel .btn-primary:hover,
.bs-pagepanel button[type="submit"]:hover {

    background:
        var(--dswd-blue-dark) !important;
}


/* ============================================================
   20. GOVERNMENT LOGOS
   ============================================================ */

.government-logos {

    display:
        flex !important;

    width:
        100% !important;

    margin:
        14px
        auto
        0 !important;

    padding:
        0 !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


.dswd-bp-logo {

    display:
        block !important;

    width:
        clamp(
            180px,
            12vw,
            220px
        ) !important;

    max-width:
        82% !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;
}


/* ============================================================
   21. PARTNERS
   ============================================================ */

.partner-logos {

    display:
        block !important;

    width:
        100% !important;

    margin:
        13px
        auto
        0 !important;

    padding:
        0 !important;

    text-align:
        center !important;
}


.partner-label {

    margin:
        0
        0
        7px !important;

    padding:
        0 !important;

    color:
        #222222 !important;

    font-size:
        10px !important;

    font-style:
        italic !important;

    font-weight:
        400 !important;

    text-align:
        center !important;
}


.partner-logo-container {

    display:
        flex !important;

    width:
        100% !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        clamp(
            16px,
            1.3vw,
            24px
        ) !important;
}


.australian-aid-logo {

    display:
        block !important;

    width:
        clamp(
            80px,
            5vw,
            100px
        ) !important;

    max-width:
        40% !important;

    height:
        auto !important;

    object-fit:
        contain !important;
}


.wfp-logo {

    display:
        block !important;

    width:
        clamp(
            92px,
            5.8vw,
            112px
        ) !important;

    max-width:
        45% !important;

    height:
        auto !important;

    object-fit:
        contain !important;
}


/* ============================================================
   22. FOOTER
   ============================================================ */

#dswdGlobalFooter,
.dswd-global-footer {

    position:
        fixed !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        0 !important;

    z-index:
        500 !important;

    width:
        100% !important;

    height:
        var(--login-footer-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        #ffffff !important;

    color:
        var(--dswd-blue) !important;

    border:
        0 !important;

    overflow:
        hidden !important;
}


#dswdGlobalFooter .dswd-footer-red-line,
.dswd-global-footer .dswd-footer-red-line {

    display:
        block !important;

    width:
        100% !important;

    height:
        6px !important;

    background:
        var(--dswd-red) !important;
}


#dswdGlobalFooter .dswd-footer-content,
.dswd-global-footer .dswd-footer-content {

    display:
        flex !important;

    width:
        100% !important;

    height:
        58px !important;

    margin:
        0 !important;

    padding:
        8px 18px !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        16px !important;

    background:
        #ffffff !important;

    color:
        var(--dswd-blue) !important;
}


#dswdGlobalFooter .dswd-footer-left img,
.dswd-global-footer .dswd-footer-left img,
#dswdGlobalFooter .dswd-footer-agency-logo,
.dswd-global-footer .dswd-footer-agency-logo {

    display:
        none !important;
}


/* ============================================================
   23. SHORT DESKTOP / LAPTOP SCREEN

   If the browser is too short, stop vertically fixing the
   card. Allow the page to scroll instead.
   ============================================================ */

@media screen and (max-height: 760px) {

    body.wings-desktop {

        padding-top:
            20px !important;

        padding-bottom:
            calc(
                var(--login-footer-height) +
                20px
            ) !important;

        overflow-y:
            auto !important;
    }


    body.wings-desktop .bs-pagepanel {

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        margin:
            0
            auto
            20px !important;

        transform:
            none !important;
    }
}


/* ============================================================
   24. TABLET / NARROW DESKTOP
   ============================================================ */

@media screen and (max-width: 900px) {

    body.wings-desktop .bs-pagepanel {

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


/* ============================================================
   25. MOBILE
   ============================================================ */

body.wings-mobile {

    min-height:
        100dvh !important;

    padding:
        16px
        0
        90px !important;

    overflow-y:
        auto !important;
}


body.wings-mobile .bs-pagepanel {

    position:
        relative !important;

    top:
        auto !important;

    left:
        auto !important;

    width:
        calc(100vw - 28px) !important;

    max-width:
        430px !important;

    height:
        auto !important;

    margin:
        0
        auto
        18px !important;

    padding:
        22px
        20px !important;

    background:
        #ffffff !important;

    border-radius:
        18px !important;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.20) !important;

    transform:
        none !important;

    overflow:
        visible !important;
}


body.wings-mobile .wings-logo {

    width:
        54px !important;
}


body.wings-mobile .wings-name-line-one,
body.wings-mobile .wings-name-line-two {

    white-space:
        normal !important;
}


body.wings-mobile .wings-system-name {

    font-size:
        18px !important;
}


body.wings-mobile .wings-tagline {

    margin:
        6px
        0
        13px !important;

    font-size:
        11px !important;
}


body.wings-mobile .login-heading {

    margin-bottom:
        15px !important;

    font-size:
        19px !important;
}


body.wings-mobile
.bs-pagepanel input[type="text"],

body.wings-mobile
.bs-pagepanel input[type="email"],

body.wings-mobile
.bs-pagepanel input[type="password"] {

    height:
        44px !important;

    min-height:
        44px !important;

    /*
       Keep 16px.
       Prevents automatic zoom on iPhone Safari.
    */

    font-size:
        16px !important;
}


body.wings-mobile
.bs-pagepanel .btn-primary,

body.wings-mobile
.bs-pagepanel button[type="submit"],

body.wings-mobile
.bs-pagepanel input[type="submit"] {

    height:
        44px !important;

    min-height:
        44px !important;

    font-size:
        13px !important;
}


body.wings-mobile .government-logos {

    margin-top:
        18px !important;
}


body.wings-mobile .dswd-bp-logo {

    width:
        205px !important;

    max-width:
        82% !important;
}


body.wings-mobile .partner-logos {

    margin-top:
        15px !important;
}


body.wings-mobile .partner-label {

    margin-bottom:
        8px !important;

    font-size:
        10px !important;
}


body.wings-mobile .partner-logo-container {

    gap:
        17px !important;
}


body.wings-mobile .australian-aid-logo {

    width:
        90px !important;
}


body.wings-mobile .wfp-logo {

    width:
        102px !important;
}


/* ============================================================
   26. MOBILE FOOTER
   ============================================================ */

body.wings-mobile
#dswdGlobalFooter,

body.wings-mobile
.dswd-global-footer {

    height:
        76px !important;
}


body.wings-mobile
.dswd-footer-content {

    height:
        70px !important;

    padding:
        5px
        10px !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    gap:
        5px !important;
}


/* ============================================================
   27. VERY SMALL PHONE
   ============================================================ */

@media screen and (max-width: 420px) {

    body.wings-mobile {

        padding-top:
            10px !important;
    }


    body.wings-mobile .bs-pagepanel {

        width:
            calc(100vw - 20px) !important;

        padding:
            18px
            16px !important;

        border-radius:
            15px !important;
    }


    body.wings-mobile .wings-system-name {

        font-size:
            17px !important;
    }


    body.wings-mobile .dswd-bp-logo {

        width:
            185px !important;
    }


    body.wings-mobile .australian-aid-logo {

        width:
            78px !important;
    }


    body.wings-mobile .wfp-logo {

        width:
            90px !important;
    }
}


/* ============================================================
   28. HIDE LOGIN AS GUEST
   ============================================================ */

[data-itemtype="guestlogin_button"],
[data-itemtype="guest_login"],
.loginasguest {

    display:
        none !important;
}

/* ============================================================
   WINGS LOGIN - EXTREME ZOOM / SMALL EFFECTIVE VIEWPORT
   ============================================================ */


/* When browser zoom makes the effective viewport very small */
@media screen and (max-width: 600px) {

    body.wings-desktop {

        padding-top:
            16px !important;

        padding-bottom:
            84px !important;

        overflow-y:
            auto !important;
    }


    body.wings-desktop .bs-pagepanel {

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

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

        max-width:
            420px !important;

        margin:
            0 auto 20px !important;

        padding:
            20px 18px !important;

        transform:
            none !important;
    }


    body.wings-desktop
    .wings-name-line-one,

    body.wings-desktop
    .wings-name-line-two {

        white-space:
            normal !important;
    }
}


/* Extremely narrow effective viewport */
@media screen and (max-width: 400px) {

    body.wings-desktop .bs-pagepanel {

        width:
            calc(100vw - 16px) !important;

        padding:
            18px 14px !important;

        border-radius:
            14px !important;
    }


    body.wings-desktop .dswd-bp-logo {

        max-width:
            90% !important;
    }


    body.wings-desktop
    .partner-logo-container {

        gap:
            12px !important;
    }
}

/* ============================================================
   WINGS LOGIN - ZOOM OUT SUPPORT
   ============================================================ */

:root {
    --wings-zoom-out-scale: 1;
}


body.wings-desktop .bs-pagepanel {

    transform:
        translate(-50%, -50%)
        scale(
            var(--wings-zoom-out-scale)
        ) !important;

    transform-origin:
        center center !important;
}


/*
 * When the screen becomes short from zooming IN,
 * don't use zoom-out scaling.
 */

@media screen and (max-height: 760px) {

    body.wings-desktop .bs-pagepanel {

        transform:
            none !important;
    }
}


/*
 * Make footer span the entire screen.
 */

#dswdGlobalFooter,
.dswd-global-footer {

    left:
        0 !important;

    right:
        0 !important;

    width:
        auto !important;

    max-width:
        none !important;
}

/* ============================================================
   END
   ============================================================ */