/* ================================================================
   FOREST LAND MANAGEMENT SYSTEM
   Login Page Stylesheet
   Compatible with ASP.NET Web Forms / VS2010
   ================================================================ */


/* ================================================================
   RESET / BASE
   ================================================================ */

html,
body,
form
{
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html
{
    height: 100%;
}

body
{
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    color: #173c2e;

    background: #f6f9f4;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*
{
    box-sizing: border-box;
}

a
{
    color: inherit;
}


/* ================================================================
   MAIN PAGE
   ================================================================ */

.flms-login-page
{
    width: 100%;
    min-height: 100vh;

    display: flex;

    background: #f6f9f4;

    overflow: hidden;
}


/* ================================================================
   LEFT HERO
   ================================================================ */

.flms-hero
{
    position: relative;

    width: 55%;
    min-height: 100vh;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 49, 31, 0.82) 0%,
            rgba(4, 49, 31, 0.61) 46%,
            rgba(4, 49, 31, 0.22) 78%,
            rgba(4, 49, 31, 0.10) 100%
        ),
        url("../images/flms-hero.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    overflow: hidden;
}


/* subtle bottom readability */

.flms-hero:after
{
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 42%;

    background:
        linear-gradient(
            0deg,
            rgba(3, 39, 27, 0.72) 0%,
            rgba(3, 39, 27, 0.30) 58%,
            rgba(3, 39, 27, 0) 100%
        );

    pointer-events: none;
}


.hero-overlay
{
    position: relative;

    z-index: 2;

    min-height: 100vh;

    padding: 56px 62px 48px 68px;

    display: flex;

    flex-direction: column;

    color: #ffffff;
}


/* ================================================================
   GOVERNMENT IDENTITY
   ================================================================ */

.hero-header
{
    display: flex;

    align-items: center;

    min-height: 96px;
}


.gov-logo-wrap
{
    width: 82px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.gov-logo
{
    display: block;

    max-width: 72px;
    max-height: 76px;

    width: auto;
    height: auto;
}


.gov-separator
{
    width: 1px;
    height: 62px;

    margin: 0 18px 0 4px;

    background: rgba(255, 255, 255, 0.36);
}


.gov-text
{
    line-height: 1.48;
}


.gov-text strong
{
    display: block;

    margin-bottom: 5px;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.1px;
}


.gov-text span
{
    display: block;

    font-size: 13px;

    line-height: 1.55;

    color: rgba(255, 255, 255, 0.92);
}


/* ================================================================
   HERO MAIN MESSAGE
   ================================================================ */

.hero-main
{
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-top: 12px;
    padding-bottom: 24px;
}


.hero-title
{
    max-width: 780px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 47px;

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -0.7px;

    color: #ffffff;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.18);
}


.hero-title span
{
    display: block;

    margin-top: 6px;

    font-weight: 400;

    font-style: italic;

    color: #e8f0d4;
}


.hero-accent
{
    width: 92px;
    height: 4px;

    margin-top: 28px;

    border-radius: 4px;

    background: #d5b454;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.14);
}


/* ================================================================
   HERO FOOTER / SYSTEM NAME
   ================================================================ */

.hero-footer
{
    width: 100%;

    position: relative;

    z-index: 3;
}


.hero-system-name
{
    margin-bottom: 20px;
}


.hero-system-name h1
{
    margin: 0 0 7px 0;

    font-size: 27px;

    line-height: 1.22;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: -0.3px;
}


.hero-system-name p
{
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.5;

    color: #e5efd7;
}


.hero-system-name p span
{
    display: inline-block;

    margin: 0 8px;

    color: #d9bd63;

    font-weight: bold;
}


/* ================================================================
   FEATURE GRID
   ================================================================ */

.feature-grid
{
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    max-width: 790px;
}


.feature-item
{
    min-height: 96px;

    padding: 13px 10px 11px;

    border: 1px solid rgba(221, 240, 224, 0.35);

    border-radius: 10px;

    background:
        rgba(16, 70, 48, 0.28);

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #f4f8ef;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.feature-item:hover
{
    background:
        rgba(20, 86, 58, 0.48);

    border-color:
        rgba(235, 247, 235, 0.58);

    transform: translateY(-1px);
}


.feature-icon
{
    width: 34px;
    height: 34px;

    margin-bottom: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #deefd6;
}


.feature-icon svg
{
    width: 29px;
    height: 29px;

    display: block;
}


.feature-item > span
{
    font-size: 12px;

    line-height: 1.25;

    font-weight: 600;

    color: #ffffff;
}


/* ================================================================
   RIGHT LOGIN SIDE
   ================================================================ */

.login-side
{
    position: relative;

    width: 45%;
    min-height: 100vh;

    padding: 38px 38px 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 38%,
            #ffffff 0%,
            #f8fbf6 48%,
            #f2f7ef 100%
        );

    overflow: hidden;
}


/* ================================================================
   DECORATIVE LEAVES
   ================================================================ */

.login-side-decoration
{
    position: absolute;

    z-index: 0;

    opacity: 0.17;

    pointer-events: none;
}


.login-side-decoration:before,
.login-side-decoration:after
{
    content: "";

    position: absolute;

    display: block;

    width: 84px;
    height: 38px;

    border-radius:
        85% 15% 85% 15%;

    background: #83a978;

    transform: rotate(-42deg);
}


.login-decoration-top
{
    top: 150px;
    right: 28px;

    width: 130px;
    height: 230px;
}


.login-decoration-top:before
{
    right: 0;
    top: 18px;

    transform: rotate(-61deg);
}


.login-decoration-top:after
{
    right: -13px;
    top: 104px;

    transform: rotate(-31deg);
}


.login-decoration-bottom
{
    right: 15px;
    bottom: 28px;

    width: 145px;
    height: 205px;
}


.login-decoration-bottom:before
{
    right: 22px;
    top: 35px;

    transform: rotate(-60deg);
}


.login-decoration-bottom:after
{
    right: 1px;
    top: 118px;

    transform: rotate(-29deg);
}


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

.login-box
{
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 510px;

    padding: 26px 29px 24px;

    border: 1px solid #dbe5da;

    border-radius: 17px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 20px 46px rgba(37, 73, 52, 0.10),
        0 4px 12px rgba(37, 73, 52, 0.04);
}


/* ================================================================
   LOGIN HEADER
   ================================================================ */

.login-head
{
    display: flex;

    align-items: center;

    min-height: 68px;
}


.flms-logo
{
    width: 74px;
    min-width: 74px;
    height: 62px;

    margin-right: 15px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.flms-logo svg
{
    width: 68px;
    height: 58px;

    display: block;
}


.login-brand-text
{
    min-width: 0;
}


.login-brand-text h1
{
    margin: 0 0 5px 0;

    color: #064f35;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.3px;
}


.login-brand-text p
{
    margin: 0;

    color: #6c746e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    line-height: 1.35;
}


.login-divider
{
    height: 1px;

    margin: 8px 0 18px;

    background: #e4e9e2;
}


/* ================================================================
   PORTAL TEXT
   ================================================================ */

.login-eyebrow
{
    margin-bottom: 7px;

    color: #78906f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 2.2px;
}


.login-box h2
{
    margin: 0 0 6px;

    color: #073f2b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.5px;
}


.login-description
{
    margin: 0 0 17px;

    color: #6c736f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    line-height: 1.5;
}


/* ================================================================
   FORM GROUP
   ================================================================ */

.form-group
{
    margin-bottom: 12px;
}


.form-label
{
    display: block;

    margin: 0 0 5px;

    color: #173f30;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;
}


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

.input-wrap
{
    position: relative;

    width: 100%;
}


.input-icon
{
    position: absolute;

    z-index: 2;

    left: 13px;
    top: 50%;

    width: 21px;
    height: 21px;

    margin-top: -10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #60776a;

    pointer-events: none;
}


.input-icon svg
{
    width: 20px;
    height: 20px;
}


.login-input
{
    width: 100%;
    height: 42px;

    margin: 0;

    padding:
        0 42px
        0 45px;

    border:
        1px solid #cdd9cf;

    border-radius: 7px;

    outline: none;

    background:
        linear-gradient(
            180deg,
            #eef5fd 0%,
            #eaf2fb 100%
        );

    color: #233a31;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 42px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}


.login-input::placeholder
{
    color: #8a9690;

    opacity: 1;
}


.login-input:focus
{
    border-color: #3d8a63;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(40, 124, 82, 0.09);
}


/* ================================================================
   PASSWORD TOGGLE
   ================================================================ */

.password-input
{
    padding-right: 49px;
}


.password-toggle
{
    position: absolute;

    z-index: 3;

    top: 50%;
    right: 10px;

    width: 31px;
    height: 31px;

    margin-top: -15px;

    padding: 0;

    border: 0;

    border-radius: 5px;

    background: transparent;

    color: #496c59;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;
}


.password-toggle:hover
{
    background: rgba(49, 114, 75, 0.08);

    color: #176743;
}


.password-toggle:focus
{
    outline: 1px solid #6f9f83;
}


.password-toggle svg
{
    width: 20px;
    height: 20px;
}


/* ================================================================
   CAPTCHA
   ================================================================ */

.captcha-grid
{
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        135px
        50px;

    gap: 9px;

    align-items: stretch;
}


.captcha-input-wrap
{
    min-width: 0;
}


.captcha-box
{
    min-height: 42px;

    padding: 0 10px;

    border:
        1px solid #cbd8cc;

    border-radius: 7px;

    background-color: #eef3e9;

    background-image:
        radial-gradient(
            circle,
            rgba(27, 86, 54, 0.20) 0.7px,
            transparent 0.8px
        );

    background-size: 5px 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.captcha-text
{
    color: #07522f;

    font-family:
        "Courier New",
        monospace;

    font-size: 25px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 5px;

    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.95);

    white-space: nowrap;
}


.captcha-refresh
{
    width: 50px;
    min-height: 42px;

    border:
        1px solid #cbd8cc;

    border-radius: 7px;

    background: #f8faf7;

    color: #176743;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}


.captcha-refresh:hover
{
    border-color: #87a994;

    background: #eff6ef;
}


.captcha-refresh:focus
{
    outline: 1px solid #6d9b80;
}


.captcha-refresh svg
{
    width: 21px;
    height: 21px;
}


/* ================================================================
   LOGIN BUTTON
   ================================================================ */

.login-btn
{
    display: block;

    width: 100%;
    height: 44px;

    margin: 17px 0 0;

    padding: 0 18px;

    border: 0;

    border-radius: 7px;

    cursor: pointer;

    background:
        linear-gradient(
            90deg,
            #087247 0%,
            #006f46 100%
        );

    color: #ffffff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 44px;

    font-weight: 700;

    text-align: center;

    box-shadow:
        0 7px 15px rgba(11, 94, 61, 0.18);

    transition:
        background-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}


.login-btn:hover
{
    background:
        linear-gradient(
            90deg,
            #08653f 0%,
            #005f3d 100%
        );

    box-shadow:
        0 8px 17px rgba(11, 94, 61, 0.22);
}


.login-btn:active
{
    transform: translateY(1px);

    box-shadow:
        0 4px 10px rgba(11, 94, 61, 0.18);
}


.login-btn:focus
{
    outline: 2px solid rgba(27, 122, 78, 0.28);

    outline-offset: 2px;
}


/* ================================================================
   MESSAGE / ERROR
   ================================================================ */

.message-panel
{
    width: 100%;

    margin: 0 0 13px;

    padding: 9px 11px;

    border:
        1px solid #e6c3c3;

    border-radius: 7px;

    background: #fff3f3;

    color: #9a2d2d;

    display: flex;

    align-items: flex-start;

    font-size: 12px;

    line-height: 1.42;
}


.message-icon
{
    width: 18px;
    height: 18px;

    min-width: 18px;

    margin-right: 7px;

    color: #b44747;
}


.message-icon svg
{
    width: 18px;
    height: 18px;
}


/* ================================================================
   PASSWORD HELP
   ================================================================ */

.login-help
{
    margin-top: 11px;

    text-align: center;

    color: #8b8f8c;

    font-size: 10px;

    line-height: 1.4;
}


.login-help span
{
    color: #707872;
}


/* ================================================================
   RESOURCES
   ================================================================ */

.resource-divider
{
    height: 1px;

    margin: 15px 0 10px;

    background: #e4e8e2;
}


.login-resource-nav
{
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    min-height: 25px;

    margin-bottom: 10px;

    color: #0b6a44;

    font-size: 11px;

    line-height: 1.4;
}


.login-resource-nav a
{
    color: #0b6a44;

    text-decoration: none;

    font-weight: 600;
}


.login-resource-nav a:hover
{
    text-decoration: underline;
}


.resource-separator
{
    margin: 0 11px;

    color: #c5cec7;
}


.login-resources
{
    display: grid;

    grid-template-columns: 1fr;

    gap: 6px;
}


.resource-card
{
    min-height: 46px;

    padding: 7px 12px;

    border:
        1px solid #d8e3d7;

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #f7faf4 0%,
            #f1f7ed 100%
        );

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #145b3e;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}


.resource-card:hover
{
    border-color: #9eb9a6;

    background: #eef6e9;

    transform: translateY(-1px);
}


.resource-left
{
    min-width: 0;

    display: flex;

    align-items: center;

    flex: 1;
}


.resource-icon
{
    width: 23px;
    height: 23px;

    min-width: 23px;

    margin-right: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #0c6a43;
}


.resource-icon svg
{
    width: 21px;
    height: 21px;
}


.resource-text
{
    min-width: 0;

    color: #135d40;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 600;
}


.resource-right
{
    margin-left: 10px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.new-badge
{
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 41px;
    height: 23px;

    padding: 0 7px;

    border-radius: 12px;

    background: #f3d670;

    color: #4d431f;

    font-size: 9px;

    line-height: 23px;

    font-weight: 800;

    letter-spacing: 0.3px;
}


.resource-arrow
{
    color: #3c6e55;

    font-family:
        Arial,
        sans-serif;

    font-size: 22px;

    line-height: 1;
}


/* ================================================================
   FOOTER
   ================================================================ */

.login-footer
{
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 620px;

    margin-top: 16px;

    padding: 0 10px;

    text-align: center;

    color: #6b7770;

    font-size: 9px;

    line-height: 1.55;
}


.footer-system-name
{
    margin-top: 2px;

    color: #486858;

    font-size: 9px;
}


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

@media screen and (min-width: 1600px)
{
    .flms-hero
    {
        width: 56%;
    }

    .login-side
    {
        width: 44%;
    }

    .hero-overlay
    {
        padding-left: 72px;
        padding-right: 70px;
    }

    .hero-title
    {
        font-size: 50px;
    }

    .login-box
    {
        max-width: 520px;
    }
}


/* ================================================================
   MEDIUM DESKTOP / LAPTOP
   ================================================================ */

@media screen and (max-width: 1280px)
{
    .flms-hero
    {
        width: 53%;
    }

    .login-side
    {
        width: 47%;

        padding-left: 28px;
        padding-right: 28px;
    }

    .hero-overlay
    {
        padding:
            42px
            38px
            36px
            45px;
    }

    .hero-title
    {
        font-size: 40px;
    }

    .hero-system-name h1
    {
        font-size: 24px;
    }

    .feature-grid
    {
        gap: 8px;
    }

    .feature-item
    {
        min-height: 88px;
    }

    .login-box
    {
        max-width: 480px;
    }
}


/* ================================================================
   TABLET / SMALL LAPTOP
   ================================================================ */

@media screen and (max-width: 1024px)
{
    .flms-hero
    {
        width: 46%;
    }

    .login-side
    {
        width: 54%;

        padding:
            28px
            24px
            20px;
    }

    .hero-overlay
    {
        padding:
            32px
            25px
            30px;
    }

    .hero-title
    {
        font-size: 34px;

        line-height: 1.15;
    }

    .hero-system-name h1
    {
        font-size: 22px;
    }

    .hero-system-name p
    {
        font-size: 13px;
    }

    .feature-grid
    {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .feature-item
    {
        min-height: 72px;
    }

    .feature-icon
    {
        width: 27px;
        height: 27px;

        margin-bottom: 4px;
    }

    .feature-icon svg
    {
        width: 25px;
        height: 25px;
    }

    .gov-logo-wrap
    {
        width: 65px;
    }

    .gov-logo
    {
        max-width: 60px;
        max-height: 64px;
    }

    .gov-text strong
    {
        font-size: 14px;
    }

    .gov-text span
    {
        font-size: 11px;
    }
}


/* ================================================================
   MOBILE / TABLET PORTRAIT
   ================================================================ */

@media screen and (max-width: 767px)
{
    html,
    body,
    form
    {
        min-height: 100%;
    }

    body
    {
        overflow-x: hidden;
    }


    .flms-login-page
    {
        min-height: 100vh;

        display: block;

        overflow: visible;
    }


    /* ------------------------------------------------------------
       MOBILE HERO
       ------------------------------------------------------------ */

    .flms-hero
    {
        width: 100%;

        min-height: 250px;

        background-position: center 45%;
    }


    .flms-hero:after
    {
        height: 60%;
    }


    .hero-overlay
    {
        min-height: 250px;

        padding:
            22px
            22px
            24px;
    }


    .hero-header
    {
        min-height: 60px;

        align-items: flex-start;
    }


    .gov-logo-wrap
    {
        width: 48px;
    }


    .gov-logo
    {
        max-width: 45px;
        max-height: 49px;
    }


    .gov-separator
    {
        height: 44px;

        margin:
            0 12px
            0 5px;
    }


    .gov-text strong
    {
        margin-bottom: 2px;

        font-size: 12px;
    }


    .gov-text span
    {
        font-size: 9px;

        line-height: 1.45;
    }


    .hero-main
    {
        padding:
            21px
            0
            10px;

        justify-content: flex-start;
    }


    .hero-title
    {
        max-width: 100%;

        font-size: 27px;

        line-height: 1.12;

        letter-spacing: -0.3px;
    }


    .hero-title span
    {
        margin-top: 3px;
    }


    .hero-title span br
    {
        display: none;
    }


    .hero-accent
    {
        width: 58px;
        height: 3px;

        margin-top: 16px;
    }


    .hero-footer
    {
        margin-top: auto;
    }


    .hero-system-name
    {
        margin-bottom: 0;
    }


    .hero-system-name h1
    {
        margin-bottom: 3px;

        font-size: 17px;
    }


    .hero-system-name p
    {
        font-size: 10px;
    }


    .hero-system-name p span
    {
        margin:
            0 4px;
    }


    /* hide feature boxes on mobile to keep page compact */

    .feature-grid
    {
        display: none;
    }


    /* ------------------------------------------------------------
       MOBILE LOGIN SIDE
       ------------------------------------------------------------ */

    .login-side
    {
        width: 100%;

        min-height: auto;

        padding:
            20px
            14px
            22px;

        display: block;

        overflow: visible;
    }


    .login-side-decoration
    {
        display: none;
    }


    .login-box
    {
        width: 100%;

        max-width: 520px;

        margin:
            0 auto;

        padding:
            20px
            19px
            19px;

        border-radius: 13px;

        box-shadow:
            0 12px 28px rgba(33, 72, 49, 0.08);
    }


    .login-head
    {
        min-height: 60px;
    }


    .flms-logo
    {
        width: 61px;
        min-width: 61px;
        height: 52px;

        margin-right: 10px;
    }


    .flms-logo svg
    {
        width: 56px;
        height: 49px;
    }


    .login-brand-text h1
    {
        font-size: 18px;
    }


    .login-brand-text p
    {
        font-size: 10px;
    }


    .login-divider
    {
        margin:
            8px 0
            15px;
    }


    .login-box h2
    {
        font-size: 24px;
    }


    .login-description
    {
        margin-bottom: 14px;

        font-size: 11px;
    }


    .captcha-grid
    {
        grid-template-columns:
            minmax(0, 1fr)
            110px
            44px;

        gap: 6px;
    }


    .captcha-text
    {
        font-size: 20px;

        letter-spacing: 3px;
    }


    .captcha-refresh
    {
        width: 44px;
    }


    .resource-card
    {
        padding-left: 10px;
        padding-right: 10px;
    }


    .resource-text
    {
        font-size: 11px;
    }


    .login-footer
    {
        margin:
            14px auto
            0;

        font-size: 8px;
    }
}


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

@media screen and (max-width: 480px)
{
    .hero-overlay
    {
        padding:
            17px
            17px
            20px;
    }


    .flms-hero
    {
        min-height: 235px;
    }


    .hero-overlay
    {
        min-height: 235px;
    }


    .hero-title
    {
        font-size: 24px;
    }


    .hero-system-name h1
    {
        font-size: 15px;
    }


    .hero-system-name p
    {
        font-size: 9px;
    }


    .login-side
    {
        padding-left: 10px;
        padding-right: 10px;
    }


    .login-box
    {
        padding:
            18px
            15px;
    }


    .login-brand-text h1
    {
        font-size: 16px;
    }


    .login-brand-text p
    {
        display: none;
    }


    .login-box h2
    {
        font-size: 22px;
    }


    .login-input
    {
        height: 41px;

        line-height: 41px;
    }


    .captcha-grid
    {
        grid-template-columns:
            1fr
            102px
            42px;
    }


    .captcha-box
    {
        min-height: 41px;
    }


    .captcha-refresh
    {
        width: 42px;
        min-height: 41px;
    }


    .captcha-text
    {
        font-size: 18px;

        letter-spacing: 2px;
    }


    .login-btn
    {
        height: 42px;

        line-height: 42px;
    }


    .resource-separator
    {
        margin:
            0 6px;
    }


    .login-resource-nav
    {
        font-size: 10px;
    }


    .new-badge
    {
        min-width: 35px;
        height: 21px;

        padding:
            0 5px;

        font-size: 8px;

        line-height: 21px;
    }


    .resource-arrow
    {
        display: none;
    }
}


/* ================================================================
   VERY SMALL MOBILE
   ================================================================ */

@media screen and (max-width: 360px)
{
    .captcha-grid
    {
        grid-template-columns:
            1fr
            92px
            40px;

        gap: 5px;
    }


    .login-input
    {
        padding-left: 40px;
    }


    .captcha-text
    {
        font-size: 16px;

        letter-spacing: 1px;
    }


    .resource-text
    {
        font-size: 10px;
    }


    .login-resource-nav
    {
        line-height: 1.8;
    }
}


/* ================================================================
   LOW HEIGHT LAPTOP SUPPORT
   e.g. 1366 x 768
   ================================================================ */

@media screen and (min-width: 768px) and (max-height: 820px)
{
    .hero-overlay
    {
        padding-top: 28px;
        padding-bottom: 25px;
    }


    .hero-header
    {
        min-height: 78px;
    }


    .gov-logo
    {
        max-height: 63px;
    }


    .hero-title
    {
        font-size: 39px;
    }


    .hero-main
    {
        padding-top: 0;
        padding-bottom: 14px;
    }


    .hero-accent
    {
        margin-top: 18px;
    }


    .hero-system-name
    {
        margin-bottom: 12px;
    }


    .hero-system-name h1
    {
        font-size: 23px;
    }


    .feature-item
    {
        min-height: 73px;

        padding-top: 8px;
        padding-bottom: 8px;
    }


    .feature-icon
    {
        width: 28px;
        height: 28px;

        margin-bottom: 3px;
    }


    .feature-icon svg
    {
        width: 24px;
        height: 24px;
    }


    .login-side
    {
        padding-top: 18px;
        padding-bottom: 14px;
    }


    .login-box
    {
        padding:
            20px
            26px
            18px;
    }


    .login-head
    {
        min-height: 57px;
    }


    .flms-logo
    {
        height: 52px;
    }


    .flms-logo svg
    {
        width: 58px;
        height: 50px;
    }


    .login-brand-text h1
    {
        font-size: 20px;
    }


    .login-divider
    {
        margin:
            6px
            0
            13px;
    }


    .login-box h2
    {
        font-size: 25px;
    }


    .login-description
    {
        margin-bottom: 12px;
    }


    .form-group
    {
        margin-bottom: 9px;
    }


    .login-input
    {
        height: 39px;

        line-height: 39px;
    }


    .captcha-box,
    .captcha-refresh
    {
        min-height: 39px;
    }


    .login-btn
    {
        height: 40px;

        margin-top: 12px;

        line-height: 40px;
    }


    .login-help
    {
        margin-top: 8px;
    }


    .resource-divider
    {
        margin:
            11px
            0
            7px;
    }


    .login-resource-nav
    {
        margin-bottom: 7px;
    }


    .resource-card
    {
        min-height: 40px;
    }


    .login-footer
    {
        margin-top: 9px;
    }
}


/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.login-resource-nav a:focus,
.resource-card:focus,
.captcha-refresh:focus,
.password-toggle:focus
{
    outline:
        2px solid
        rgba(30, 122, 78, 0.38);

    outline-offset: 2px;
}


/* ================================================================
   PRINT
   Login page should not normally be printed
   ================================================================ */

@media print
{
    body
    {
        background: #ffffff;
    }

    .flms-hero,
    .login-side-decoration,
    .login-footer
    {
        display: none;
    }

    .login-side
    {
        width: 100%;
        min-height: auto;

        padding: 0;

        background: #ffffff;
    }

    .login-box
    {
        max-width: 100%;

        border: 1px solid #999999;

        box-shadow: none;
    }
}
/* The artwork already contains the identity, heading and feature cards. */
.flms-hero {
    background: #0b3022;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}
.flms-hero::after { content: none; }
.flms-hero-art {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1100 / 872;
    object-fit: contain;
}
@media print { .flms-hero { display: none; } }
/* FLMS login layout and typography. */
.flms-login-page { overflow: visible; align-items: stretch; background: #eff7ed; }
.flms-hero { width: 61%; background: #0d3222; }
.flms-hero-art { width: 100%; height: auto; object-fit: contain; }
.login-side { width: 39%; padding: 28px 30px 18px; overflow: visible; background: radial-gradient(ellipse at center, #fcfefb 0%, #edf6eb 100%); }
.login-side::before { content: ''; position: absolute; top: 0; bottom: 0; left: -48px; width: 49px; background: linear-gradient(90deg, transparent, #edf6eb); pointer-events: none; z-index: 1; }
.login-box { max-width: 540px; padding: 22px 28px 18px; border-radius: 17px; border: 1px solid #d9e5d7; box-shadow: 0 12px 32px rgba(30,70,42,.06); background: rgba(255,255,255,.97); }
.login-brand-text h1, .login-brand-text p, .login-eyebrow, .login-box h2, .login-description, .login-input, .login-btn, .resource-text { font-family: 'Segoe UI', Arial, sans-serif; }
.login-brand-text h1 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.login-brand-text p { font-size: 12px; line-height: 1.5; color: #68756c; }
.login-head { min-height: 64px; }
.flms-logo { width: 64px; min-width: 64px; height: 62px; margin-right: 12px; }
.flms-logo svg { width: 100%; height: 100%; object-fit: contain; }
.login-divider { margin: 10px 0 14px; }
.login-eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
.login-box h2 { font-size: 27px; margin-bottom: 6px; }
.login-description { font-size: 12px; margin-bottom: 16px; }
.login-input { background: #eaf3ff; border-color: #d4e1d9; border-radius: 7px; height: 42px; line-height: normal; }
.login-input:focus { background: #f7fbff; }
.login-btn { background: #00613d; border-radius: 7px; height: 44px; line-height: normal; }
.login-btn:hover { background: #004c30; }
.resource-card { min-height: 42px; padding: 8px 12px; background: #f1f7ef; border: 1px solid #dce7d8; border-radius: 8px; }
.resource-text { font-size: 12px; }
.resource-new-image { display: block; width: 26px; height: 26px; object-fit: contain; border: 0; }
.login-footer { font-size: 10px; line-height: 1.6; margin-top: 14px; }
@media (min-width: 768px) and (max-width: 1400px) {
    .flms-hero { width: 56%; }
    .login-side { width: 44%; padding: 20px 24px 14px; }
    .login-box { padding: 18px 24px; }
    .login-brand-text h1 { font-size: 20px; }
}
@media (min-width: 768px) and (max-width: 1050px) {
    .flms-hero { width: 50%; }
    .login-side { width: 50%; padding: 18px; }
    .login-box { padding: 16px 20px; }
}
@media (max-width: 767px) {
    .flms-login-page { display: block; }
    .flms-hero { width: 100%; min-height: 0; }
    .login-side { width: 100%; min-height: 0; padding: 22px 16px; }
    .login-side::before { display: none; }
    .login-box { padding: 20px; }
    .login-brand-text h1 { font-size: 19px; }
    .login-box h2 { font-size: 25px; }
}
@media print { .flms-hero { display: none; } .login-side { width: 100%; } }
/* Let the image's intrinsic ratio determine mobile hero height. */
.flms-hero-art { flex: 0 1 auto; min-width: 0; }
@media screen and (max-width: 767px) {
    .flms-hero { display: block; height: auto; min-height: 0; padding: 0; margin: 0; }
    .flms-hero-art { width: 100%; height: auto; max-height: none; margin: 0; }
    .login-side { box-sizing: border-box; min-width: 0; }
}
.flms-logo .flms-brand-image { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; }

.login-box h2.login-title { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; margin: 0 0 18px; }
.login-title svg { width: 23px; height: 23px; flex-shrink: 0; }

/* Subtle card feedback without changing its dimensions. */
.login-box {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.login-box:focus-within {
    border-color: #77a889;
    box-shadow: 0 14px 34px rgba(21, 85, 51, .12);
}
@media (hover: hover) and (pointer: fine) {
    .login-box:hover {
        transform: translateY(-3px);
        border-color: #34845b;
        box-shadow: 0 18px 40px rgba(21, 85, 51, .16), 0 0 0 1px rgba(52, 132, 91, .12);
    }
}
@media (prefers-reduced-motion: reduce) {
    .login-box { transition: none; }
    .login-box:hover { transform: none; }
}
/* Match the eight cards embedded in the 1100 x 872 hero artwork. */
.hero-art-frame { position: relative; width: 100%; min-width: 0; flex: 0 1 auto; }
.hero-card-effects { position: absolute; inset: 0; pointer-events: none; }
.hero-card-effect {
    position: absolute;
    left: calc(7% + var(--column) * 17.3%);
    top: calc(66.4% + var(--row) * 14%);
    width: 16%;
    height: 12%;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
@media (hover: hover) and (pointer: fine) {
    .hero-card-effect { pointer-events: auto; }
    .hero-card-effect:hover {
        border-color: #a8edbd;
        background-color: rgba(78, 180, 116, .16);
        box-shadow: 0 0 0 2px rgba(125, 220, 159, .25), 0 8px 22px rgba(0, 20, 10, .35), inset 0 0 18px rgba(124, 224, 157, .18);
    }
}
@media (prefers-reduced-motion: reduce) { .hero-card-effect { transition: none; } }
/* Clear, centered CAPTCHA refresh action. */
.captcha-refresh {
    background: #edf6ef;
    border-color: #b8d4c0;
    border-radius: 8px;
    color: #12633e;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(20, 85, 48, .06);
}
.captcha-refresh svg { width: 22px; height: 22px; flex-shrink: 0; transition: transform .22s ease; }
.captcha-refresh:hover { background: #dcefe1; border-color: #42855b; text-decoration: none; }
.captcha-refresh:focus-visible { outline: 3px solid #82b393; outline-offset: 3px; }
.captcha-refresh:active { background: #cce5d4; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .captcha-refresh:hover svg { transform: rotate(35deg); } }
@media (prefers-reduced-motion: reduce) { .captcha-refresh svg { transition: none; } .captcha-refresh:hover svg { transform: none; } }