body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
	font-family: 'Roboto', sans-serif;
}

.container {
    display: flex;
    height: 100vh;
}

.left-side {
    width: 50%;
    background-image: url('/imgs/login.PNG'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
}

.right-side {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.login-container {
    width: 300px; /* Adjust based on preference */
    padding: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	
}



input[type="text"],
input[type="password"] {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
}

button[type="submit"] {
    padding: 10px; /* Adjust padding to control the button size */
    font-size: 16px; /* Adjust font size as needed */
    background-color: black; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Removes the border, can add if preferred */
    border-radius: 5px; /* Maintains the rounded corners */
    cursor: pointer; /* Changes cursor to pointer on hover */
    width: 100%; /* Ensures the button stretches to fill its container */
}

button[type="submit"]:hover {
    background-color: #333; /* Slightly lighter black for hover effect */
}

}

.login-container p {
    text-align: center;
}

.login-container a {
    color: #007bff;
    text-decoration: none;
}

.logo {
    position: absolute;
    top: 7.5%; /* Set distance from the top */
    right: 7.5%; /* Set distance from the right side */
    font-size: 36px; /* Adjust as needed */
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}