:root {

            --primary: #087f8c;
            --primary-dark: #075b67;
            --blue: #0877a8;
            --green: #198754;
            --light: #f2fafb;
            --dark: #12343b;
            --text: #53676c;

        }


        * {
            box-sizing: border-box;
        }


        body {

            margin: 0;

            min-height: 100vh;

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

            background:
                linear-gradient(
                    135deg,
                    #eaf8f7,
                    #eef8fc
                );

            color: var(--text);

            padding-bottom: 20px;

        }


        /* =====================================
           NAVBAR
        ===================================== */

        .navbar {

            min-height: 60px;

            background:
                linear-gradient(
                    90deg,
                    var(--primary-dark),
                    var(--primary),
                    var(--blue)
                );

        }


        .navbar-brand {

            color: white !important;

            font-size: 17px;

            font-weight: 700;

            text-decoration: none;

        }


        .navbar-brand i {

            margin-right: 6px;

        }


        /* NAV BUTTONS */

        .nav-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 7px 11px;

            border-radius: 7px;

            font-size: 10px;

            font-weight: 600;

            text-decoration: none;

            transition: .2s;

        }


        .home-btn {

            color: white;

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

            border:
                1px solid
                rgba(255,255,255,.3);

        }


        .home-btn:hover {

            color: var(--primary-dark);

            background: white;

        }


        .register-btn {

            color:
                var(--primary-dark);

            background: white;

            border:
                1px solid white;

        }


        .register-btn:hover {

            color: white;

            background:
                transparent;

        }


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

        .login-wrapper {

            min-height:
                calc(100vh - 60px);

            padding:
                85px 15px 30px;

            display: flex;

            align-items: center;

        }


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

        .login-card {

            width: 100%;

            max-width: 950px;

            margin: auto;

            background: white;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 15px 45px
                rgba(30,80,90,.12);

        }


        /* =====================================
           INFORMATION PANEL
        ===================================== */

        .info-panel {

            color: white;

            padding:
                35px 25px;

            background:
                linear-gradient(
                    145deg,
                    var(--primary-dark),
                    var(--primary),
                    var(--blue)
                );

        }


        .info-panel h1 {

            font-size: 27px;

            font-weight: 800;

            margin-bottom: 10px;

        }


        .info-panel > p {

            font-size: 11px;

            line-height: 1.7;

            opacity: .9;

        }


        /* =====================================
           FEATURES
        ===================================== */

        .feature {

            display: flex;

            align-items: flex-start;

            margin-top: 20px;

        }


        .feature-icon {

            width: 40px;

            height: 40px;

            min-width: 40px;

            border-radius: 10px;

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

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 12px;

        }


        .feature h6 {

            margin: 0 0 4px;

            font-size: 11px;

        }


        .feature p {

            margin: 0;

            font-size: 9px;

            line-height: 1.5;

            opacity: .85;

        }


        /* =====================================
           SUBJECT BADGES
        ===================================== */

        .subject-title {

            font-size: 9px;

            opacity: .8;

            margin-top: 25px;

            margin-bottom: 8px;

        }


        .subject-badge {

            display: inline-block;

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

            border:
                1px solid
                rgba(255,255,255,.2);

            color: white;

            border-radius: 20px;

            padding:
                5px 9px;

            font-size: 8px;

            margin:
                2px;

        }


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

        .form-panel {

            padding:
                35px 20px;

        }


        .form-title {

            color: var(--dark);

            font-size: 24px;

            font-weight: 700;

            margin-bottom: 5px;

        }


        .form-subtitle {

            color: #7a8b8f;

            font-size: 10px;

            line-height: 1.6;

            margin-bottom: 25px;

        }


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

        .form-label {

            color: var(--dark);

            font-size: 10px;

            font-weight: 600;

            margin-bottom: 5px;

        }


        .form-control {

            min-height: 44px;

            border:
                1px solid #dcebed;

            font-size: 11px;

        }


        .form-control:focus {

            border-color:
                var(--primary);

            box-shadow:
                0 0 0 .2rem
                rgba(8,127,140,.12);

        }


        .input-group-text {

            background:
                #f1f8f9;

            border:
                1px solid #dcebed;

            color:
                var(--primary);

        }


        .password-toggle {

            cursor: pointer;

        }


        /* =====================================
           REMEMBER / FORGOT
        ===================================== */

        .remember-label {

            font-size: 9px;

            color: #65777b;

        }


        .forgot-link {

            color:
                var(--primary);

            font-size: 9px;

            font-weight: 600;

            text-decoration: none;

        }


        .forgot-link:hover {

            text-decoration: underline;

        }


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

        .login-button {

            width: 100%;

            border: none;

            color: white;

            padding: 12px;

            border-radius: 8px;

            font-size: 11px;

            font-weight: 700;

            background:
                linear-gradient(
                    90deg,
                    var(--primary-dark),
                    var(--primary)
                );

            transition: .2s;

        }


        .login-button:hover {

            opacity: .9;

            transform: translateY(-1px);

        }


        /* =====================================
           SUBSCRIPTION
        ===================================== */

        .subscription-box {

            margin-top: 20px;

            padding: 12px;

            border-radius: 9px;

            background:
                #f2fafb;

            border:
                1px solid #dceff1;

            text-align: center;

        }


        .subscription-box i {

            color:
                var(--primary);

        }


        .subscription-box strong {

            color:
                var(--primary-dark);

        }


        .subscription-box p {

            margin:
                5px 0 0;

            font-size: 8px;

            line-height: 1.5;

            color: #718488;

        }


        /* =====================================
           DIVIDER
        ===================================== */

        .divider {

            display: flex;

            align-items: center;

            gap: 10px;

            margin:
                22px 0;

            color: #9aa9ad;

            font-size: 9px;

        }


        .divider::before,
        .divider::after {

            content: "";

            flex: 1;

            height: 1px;

            background:
                #e4edef;

        }


        /* =====================================
           REGISTER TEXT
        ===================================== */

        .register-text {

            text-align: center;

            font-size: 10px;

            color: #65777b;

        }


        .register-text a {

            color:
                var(--primary);

            font-weight: 700;

            text-decoration: none;

        }


        /* =====================================
           SECURITY
        ===================================== */

        .security-note {

            margin-top: 18px;

            padding: 10px;

            background:
                #f8fbfb;

            border-radius: 8px;

            font-size: 8px;

            line-height: 1.5;

            color: #789095;

        }


        .security-note i {

            color:
                var(--green);

        }


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

        .footer {

            text-align: center;

            color: #789095;

            font-size: 8px;

            padding:
                0 15px 15px;

        }


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

        @media (min-width: 768px) {

            .login-wrapper {

                padding:
                    90px 25px 40px;

            }


            .info-panel {

                min-height: 590px;

                padding:
                    50px 40px;

            }


            .form-panel {

                padding:
                    55px 50px;

            }


            .nav-btn {

                padding:
                    8px 14px;

                font-size: 11px;

            }

        }