@font-face {
    font-family: "Eina03-Regular";
    src: url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.eot");
    src: url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/221e88a3e872fdb19cdf5d76e2c26055.svg#Eina03-Regular")format("svg");
}

body {
    font-family: 'Eina03-Regular', sans-serif;
background: url('Blurred_Dashboard.png') no-repeat center center fixed;
    background-size: cover;
            display: flex;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Eina03-Regular', sans-serif;
        }
        .sidebar {
            background: rgba(255, 255, 255, 0.9);
            width: 450px;
            height: 100vh;
            padding: 30px;
            box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .comment-slider {
            position: absolute;
            width: 70%;
            height: 100vh;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .comment-card {
            background: rgba(255, 255, 255, 0);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 2px 4px 10px rgba(0, 0, 0, 0);
            max-width: 1000px;
            font-size: 22px;
            text-align: center;
            position: absolute;
            animation: float 4s infinite alternate ease-in-out;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .comment-card.active {
            opacity: 1;
        }
        @keyframes float {
            from { transform: translateY(0px); }
            to { transform: translateY(-5px); }
        }
.slider {
    text-align: center;
    margin-bottom: 20px;
}

.slider img {
            width: 300px;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }

.slider2 {
    text-align: center;
    margin-bottom: 20px;
}

.slider2 img {
            width: 500px;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
.login-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
      h2 {
            color: #333;
            margin-bottom: 1.5rem;
            font-size: 1.6rem;
        } 
        form {
            display: flex;
            flex-direction: column;
        }
p {
            margin-top: 1rem;
            color: #555;
        }

        a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }

        a:hover {
            text-decoration: underline;
        }
.login-container2 {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo {
    text-align: center;
    margin-bottom: 20px;
}

.logo img {
            width: 150px;
            margin-bottom: 1.5rem;
        }

.password-input {
    position: relative;
}

.password-input input {
    width: calc(50% - 40px);
    padding-right: 20px;
    text-align: center;
}

.Username-input input {
    width: calc(50% - 40px);
    padding-right: 20px;
    text-align: center;
}

.password-input button {
    position: fixed;
    top: 61%;
    right: 85px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.password-input button img {
    width: 30px;
}

.view-button {
    background-color:  #0065ce;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.view-button:hover {
    background-color:  #004080;
}

        .logout-button {
            background-color: #9A9A9A;
            color: white;
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .logout-button:hover {
            background-color: #201C1C;
        }

        .red-logout-button {
            background-color: #d32f2f;
            color: white;
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .red-logout-button:hover {
            background-color: #b71c1c;
        }

        .logout-button2 {
            background-color: #609E5F;
            color: white;
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .logout-button2:hover {
            background-color: #4D7E4C;
        } 

input, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
 
        input[type="text"],
        input[type="password"] {
            width: 90%;
            padding: 12px; /* Increased padding for larger font size */
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: "Yu Gothic UI", sans-serif;
            font-weight: 600; /* Semi-bold */
            font-size: 16px; /* Increased font size */
        }

        input[type="submit"] {
            width: 90%;
            background-color: #007bff;
            color: white;
            padding: 0.8rem;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        
         .error-message {
            color: #ff4444;
            margin-bottom: 1rem;
            display: none;
        }
        
        label {
            text-align: left;
            margin-bottom: 0.5rem;
            color: #555;
            font-weight: bold;
        }
        
        
        .error {
            color: red;
            margin-top: 5px;
        }