


<!--        .login-container {-->
<!--            background-color: #fff;-->
<!--            padding: 40px;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);-->
<!--            width: 100%;-->
<!--            max-width: 400px;-->
<!--            text-align: center;-->
<!--        }-->


<!--             /* CSS to style the login container */-->
<!--        .login-container {-->
<!--            width: 70%;             /* Reduce the size to 70% */-->
<!--            position: absolute;-->
<!--            top: 20px;              /* Adjust the top position as needed */-->
<!--            right: 20px;            /* Place it at the top-right corner */-->
<!--            transform: translate(0, 0);-->
<!--            padding: 20px;-->
<!--            background-color: #fff;  /* Optional background color */-->
<!--            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  /* Optional shadow */-->
<!--            border-radius: 8px;      /* Optional border-radius for rounded edges */-->
<!--        }-->




<!--        input[type="text"],-->
<!--        input[type="password"] {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            margin: 10px 0;-->
<!--            font-size: 1rem;-->

<!--            border: 1px solid #ced4da;-->
<!--            border-radius: 4px;-->
<!--        }-->

<!--        input[type="submit"] {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            font-size: 1rem;-->
<!--            background-color: #007bff;-->
<!--            color: #fff;-->
<!--            border: none;-->
<!--            border-radius: 4px;-->
<!--            cursor: pointer;-->
<!--            transition: background-color 0.3s;-->
<!--        }-->

<!--        input[type="submit"]:hover {-->
<!--            background-color: #0056b3;-->
<!--        }-->

            /* Ensure the container has padding */
            .login-container {
                width: 20%;
                padding: 20px;          /* Add padding to create space between the content and border */
                position: absolute;
                top: 100px;
                right: 20px;
                transform: translate(0, 0);
                background-color: #fff;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                font-size: 14px;
                line-height: 1.4;
            }

            /* Ensure the input fields have proper margin inside the container */
            .login-container input[type="text"],
            .login-container input[type="password"] {
                width: 100%;             /* Make input fields take full width of container */
                padding: 8px;            /* Add padding inside input fields */
                margin-bottom: 10px;     /* Space between input fields */
                box-sizing: border-box;  /* Ensure padding is included in the element's total width/height */
                font-size: 12px;
                border: 1px solid #ccc;  /* Optional: border for inputs */
                border-radius: 4px;      /* Optional: round the corners of input fields */
            }

            /* Adjust button styling */
            .login-container button {
                width: 100%;             /* Ensure button is full width */
                padding: 8px 16px;
                font-size: 12px;
                margin-top: 10px;
            }





        .error {
            color: red;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }



        h1 {
            color: #343a40;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        a {
            color: #007bff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .login-container {
                padding: 20px;
            }
        }




    /* Header styling */
    header {
        background-color: #343a40;
        padding: 15px 0;
        border-bottom: #77b300 5px solid;
    }


    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;


    }

    .navbar .logo a {
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 1rem;
        padding: 10px 15px;
        transition: background-color 0.3s;
    }

    nav ul li a:hover {
        background-color: #007bff;
        border-radius: 5px;
    }

    /* Footer styling */
    footer {
        /*background-color: #343a40;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        position: relative;
        bottom: 0;
        width: 100%;*/
        width: 100%;

        bottom: 0;
        left: 0;
        background-color: #333; /* Adjust as per your color scheme */
        color: white;
        text-align: center;
        padding: 10px 0;
    }

    .footer-container {
        width:100%;
        /*max-width: 1200px;*/
        margin: 0 auto;
        padding: 0 20px;

    }

    .footer-container p {
        margin: 0;
        font-size: 0.9rem;
    }

    .footer-container ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0 0 0;
        display: flex;
        justify-content: center;
    }

    .footer-container ul li {
        margin: 0 10px;
    }

    .footer-container ul li a {
        color: #007bff;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .footer-container ul li a:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .navbar {
            flex-direction: column;
        }

        nav ul {
            flex-direction: column;
            align-items: center;
        }

        nav ul li {
            margin: 10px 0;
        }

        .footer-container ul {
            flex-direction: column;
        }
    }