/* Login styling is a physical static asset so it remains available on IIS even if a scoped-CSS bundle is stale or unavailable. */
.login-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
}

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

.login-page .container-login100 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: #fff;
}

.login-page .wrap-login100 {
    width: min(100%, 31.25rem);
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.2rem 1.25rem rgba(0, 0, 0, 0.1);
}

.login-page .login100-form {
    position: relative;
    width: 100%;
    padding: 11.125rem 3.45rem 1.45rem;
}

.login-page .login100-form-title {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    padding: 3.125rem 1rem 2.45rem;
    background: #57b846;
    color: #fff;
    font-family: "Segoe UI Semibold", Arial, sans-serif;
    font-size: 1.875rem;
    line-height: 1.2;
    text-align: center;
}

.login-page .wrap-input100 {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.login-page .input100 {
    display: block;
    width: 100%;
    height: 3.45rem;
    padding: 0 2.2rem;
    border: 0;
    border-radius: 1.7rem;
    outline: 0;
    background: #ebebeb;
    color: #1b3815;
    font-family: "Segoe UI Semibold", Arial, sans-serif;
    font-size: 0.94rem;
}

.login-page .input100:focus {
    box-shadow: 0 0 0 0.2rem rgba(87, 184, 70, 0.22);
}

.login-page .input100::placeholder {
    color: #53714e;
    opacity: 1;
}

.login-page .container-login100-form-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}

.login-page .login100-form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.125rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 1.6rem;
    background: #57b846;
    color: #fff;
    font-family: "Segoe UI Semibold", Arial, sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 150ms ease, transform 150ms ease;
}

.login-page .login100-form-btn:hover {
    background: #1b3815;
}

.login-page .login100-form-btn:focus-visible {
    outline: 0.2rem solid rgba(87, 184, 70, 0.4);
    outline-offset: 0.15rem;
}

.login-page .login100-form-btn:active {
    transform: translateY(1px);
}

.login-page .text,
.login-page .text-right {
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

.login-page .p-l-55 { padding-left: 3.45rem; }
.login-page .p-r-55 { padding-right: 3.45rem; }
.login-page .p-t-178 { padding-top: 11.125rem; }
.login-page .p-t-10 { padding-top: 0.625rem; }
.login-page .p-t-80 { padding-top: 5rem; }
.login-page .p-b-20 { padding-bottom: 1.25rem; }
.login-page .p-b-23 { padding-bottom: 1.45rem; }
.login-page .m-b-16 { margin-bottom: 1rem; }
.login-page .flex-col-c { display: flex; flex-direction: column; align-items: center; }

@media (max-width: 576px) {
    .login-page .container-login100 {
        padding: 0.75rem;
    }

    .login-page .login100-form {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}