/* =====================================================
           ROOT
        ===================================================== */

        :root {

            --blue: #2563EB;
            --blue-dark: #1D4ED8;

            --green: #10B981;
            --orange: #F97316;
            --yellow: #FACC15;
            --pink: #F43F5E;
            --purple: #8B5CF6;

            --dark: #172033;
            --muted: #667085;

            --white: #ffffff;

        }


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

        * {
            box-sizing: border-box;
        }


        html,
        body {
            margin: 0;
            padding: 0;

            width: 100%;
            min-height: 100%;
        }


        body {

            font-family: "Inter", sans-serif;

            color: var(--dark);

            overflow-x: hidden;

            background:

                radial-gradient(
                    circle at 5% 8%,
                    rgba(96,165,250,.55),
                    transparent 27%
                ),

                radial-gradient(
                    circle at 95% 10%,
                    rgba(244,114,182,.42),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 88% 88%,
                    rgba(52,211,153,.42),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 10% 92%,
                    rgba(250,204,21,.25),
                    transparent 23%
                ),

                linear-gradient(
                    135deg,
                    #EEF4FF 0%,
                    #FFF4F8 48%,
                    #ECFDF5 100%
                );

        }


        /* =====================================================
           BACKGROUND DECORATIONS
        ===================================================== */

        .bg-shape {

            position: fixed;

            border-radius: 50%;

            pointer-events: none;

            filter: blur(1px);

            z-index: 0;

        }


        .shape-one {

            width: 150px;
            height: 150px;

            top: 8%;
            right: -70px;

            background: rgba(139,92,246,.10);

        }


        .shape-two {

            width: 120px;
            height: 120px;

            bottom: 12%;
            left: -65px;

            background: rgba(249,115,22,.10);

        }


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

        .login-page {

            position: relative;

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

            display: flex;
            justify-content: center;

            z-index: 1;

        }


        .login-wrapper {

            position: relative;

            width: 100%;
            max-width: 440px;

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

            padding:
                30px
                22px
                22px;

            display: flex;
            flex-direction: column;

        }


        /* =====================================================
           TOP BRAND
        ===================================================== */

        .brand-section {

            text-align: center;

            padding-top: 4px;

            margin-bottom: 35px;

        }


        .brand-logo {

            position: relative;

            width: 72px;
            height: 72px;

            margin: 0 auto 14px;

            border-radius: 23px;

            display: flex;
            align-items: center;
            justify-content: center;

            color: #fff;

            font-size: 30px;

            background:
                linear-gradient(
                    135deg,
                    var(--blue),
                    var(--purple)
                );

            box-shadow:
                0 16px 30px
                rgba(37,99,235,.23);

        }


        .brand-logo::after {

            content: "";

            position: absolute;

            width: 14px;
            height: 14px;

            right: -4px;
            top: -4px;

            border-radius: 50%;

            background: var(--yellow);

            border: 3px solid #F7F9FF;

        }


        .brand-name {

            margin: 0;

            font-size: 21px;

            font-weight: 800;

            letter-spacing: -.6px;

        }


        .brand-subtitle {

            margin-top: 5px;

            font-size: 10px;

            font-weight: 700;

            letter-spacing: 1.5px;

            text-transform: uppercase;

            color: var(--blue);

        }


        .brand-tagline {

            margin-top: 7px;

            font-size: 14px;

            color: var(--muted);

        }


        /* =====================================================
           LOGIN CONTENT
        ===================================================== */

        .login-content {

            width: 100%;

            padding:
                26px
                0
                0;

        }


        .welcome-row {

            display: flex;

            align-items: flex-start;

            justify-content: space-between;

            margin-bottom: 24px;

        }


        .welcome-title {

            margin: 0 0 6px;

            font-size: 26px;

            line-height: 1.15;

            font-weight: 800;

            letter-spacing: -.8px;

        }


        .welcome-text {

            margin: 0;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.55;

        }


        .hello-icon {

            width: 42px;
            height: 42px;

            flex-shrink: 0;

            border-radius: 14px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: rgba(255,255,255,.65);

            color: var(--orange);

            font-size: 20px;

        }


        /* =====================================================
           ALERTS
        ===================================================== */

        .alert {

            border: 0;

            border-radius: 13px;

            padding: 11px 13px;

            font-size: 12px;

            margin-bottom: 18px;

            backdrop-filter: blur(10px);

        }


        .alert-danger {

            color: #B42318;

            background: rgba(255,235,232,.88);

        }


        .alert-success {

            color: #047857;

            background: rgba(220,252,231,.88);

        }


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

        .field {

            margin-bottom: 17px;

        }


        .field-label {

            display: block;

            margin-bottom: 7px;

            font-size: 14px;

            font-weight: 700;

            color: #344054;

        }


        .input-box {

            position: relative;

        }


        .input-icon {

            position: absolute;

            left: 15px;

            top: 50%;

            transform: translateY(-50%);

            color: #7B8798;

            font-size: 17px;

            pointer-events: none;

            z-index: 2;

        }


        .form-control {

            width: 100%;

            height: 52px;

            border: 0 !important;

            outline: none !important;

            border-radius: 14px !important;

            padding:
                0
                46px
                0
                45px;

            background: rgba(255,255,255,.72);

            color: var(--dark);

            font-size: 13px;

            box-shadow:
                0 5px 18px
                rgba(31,41,55,.05) !important;

            transition:
                background .2s ease,
                box-shadow .2s ease,
                transform .2s ease;

        }


        .form-control::placeholder {

            color: #98A2B3;

        }


        .form-control:focus {

            background: rgba(255,255,255,.94);

            box-shadow:
                0 7px 22px
                rgba(37,99,235,.10),
                0 0 0 2px
                rgba(37,99,235,.13) !important;

        }


        .form-control:focus + .password-toggle {

            color: var(--blue);

        }


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

        .password-toggle {

            position: absolute;

            right: 5px;
            top: 6px;

            width: 41px;
            height: 40px;

            border: 0;

            border-radius: 11px;

            display: flex;
            align-items: center;
            justify-content: center;

            color: #7B8798;

            background: transparent;

            z-index: 3;

        }


        .password-toggle:hover {

            color: var(--blue);

            background: rgba(37,99,235,.07);

        }


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

        .login-button {

            position: relative;

            width: 100%;

            height: 53px;

            margin-top: 4px;

            border: 0;

            border-radius: 15px;

            color: #fff;

            font-size: 13px;

            font-weight: 700;

            background:

                linear-gradient(
                    100deg,
                    #2563EB 0%,
                    #4F46E5 52%,
                    #7C3AED 100%
                );

            box-shadow:
                0 12px 25px
                rgba(37,99,235,.24);

            overflow: hidden;

            transition:
                transform .15s ease,
                box-shadow .15s ease;

        }


        .login-button::before {

            content: "";

            position: absolute;

            width: 90px;
            height: 90px;

            border-radius: 50%;

            right: -35px;
            top: -48px;

            background: rgba(255,255,255,.12);

        }


        .login-button:hover {

            color: #fff;

            transform: translateY(-1px);

            box-shadow:
                0 15px 28px
                rgba(37,99,235,.28);

        }


        .login-button:active {

            transform: scale(.985);

        }


        .login-button:disabled {

            opacity: .75;

            transform: none;

        }


        /* =====================================================
           REQUEST ACCESS
        ===================================================== */

        .request-area {

            text-align: center;

            margin-top: 23px;

        }


        .request-question {

            margin-bottom: 7px;

            font-size: 12px;

            color: var(--muted);

        }


        .request-link {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            color: var(--green);

            font-size: 14px;

            font-weight: 700;

            text-decoration: none;

        }


        .request-link i {

            font-size: 11px;

            transition: transform .2s ease;

        }


        .request-link:hover {

            color: #047857;

        }


        .request-link:hover i {

            transform: translateX(3px);

        }


        /* =====================================================
           MINI COLOR DOTS
        ===================================================== */

        .color-dots {

            display: flex;

            justify-content: center;

            gap: 6px;

            margin-top: 23px;

        }


        .color-dot {

            width: 6px;
            height: 6px;

            border-radius: 50%;

        }


        .dot-blue {
            background: var(--blue);
        }

        .dot-green {
            background: var(--green);
        }

        .dot-orange {
            background: var(--orange);
        }

        .dot-yellow {
            background: var(--yellow);
        }

        .dot-pink {
            background: var(--pink);
        }


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

        .login-footer {

            margin-top: auto;

            padding-top: 28px;

            text-align: center;

        }


        .support-title {

            font-size: 9px;

            color: #98A2B3;

            margin-bottom: 4px;

        }


        .support-number {

            font-size: 12px;

            font-weight: 700;

            color: var(--blue);

            text-decoration: none;

        }


        .support-number:hover {

            color: var(--blue-dark);

        }


        .secure {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 4px;

            margin-top: 9px;

            font-size: 10px;

            color: #98A2B3;

        }


        .secure i {

            color: var(--green);

        }


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

        @media (min-width: 768px) {

            body {

                display: flex;

                align-items: center;

                justify-content: center;

                min-height: 100vh;

            }


            .login-page {

                min-height: auto;

                padding: 30px;

            }


            .login-wrapper {

                min-height: auto;

                padding:
                    35px
                    38px
                    25px;

                border-radius: 30px;

                background:
                    rgba(255,255,255,.48);

                backdrop-filter: blur(24px);

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

                box-shadow:
                    0 25px 70px
                    rgba(31,41,55,.08);

            }


            .brand-section {

                margin-bottom: 27px;

            }


            .login-content {

                padding-top: 10px;

            }

        }


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

        @media (max-width: 380px) {

            .login-wrapper {

                padding:
                    25px
                    18px
                    18px;

            }


            .brand-section {

                margin-bottom: 27px;

            }


            .brand-logo {

                width: 62px;
                height: 62px;

                border-radius: 20px;

                font-size: 26px;

            }


            .brand-name {

                font-size: 19px;

            }


            .welcome-title {

                font-size: 24px;

            }


            .login-content {

                padding-top: 18px;

            }


            .form-control,
            .login-button {

                height: 50px;

            }

        }

    
	.emergency-icon {
    width: 25px;
    height: 25px;
   
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emergency-icon i {
    color: #dc3545;
    font-size: 17px;
}

.emergency-title {
    color: #dc3545;
    font-weight: 600;
}