/* login_styles.css */

/* Apply styles to the body to create a background fade effect */
body {
  font-family: sans-serif;
  background-image: url("/static/image/box.jpg");
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center the login form within the login box */
form {
  display: flex;
  flex-direction: column;
}
.background-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover; /* or contain, depending on your preference */
    background-position: center;
}
.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Transparent white background */
}

/* Align Remember Me checkbox and label */
.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust spacing as needed */
}

/* Style the login button */
button {
  padding: 10px 20px;
  margin-top: 10px;
  border: none !important;
  border-radius: 15px !important;
  background-color: #EFDD6F !important; /* Adjust button color as needed */
  color: black !important;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #decd68 !important; /* Adjust hover color as needed */
}

/* Style the Google login button */
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black !important;
  text-decoration: none !important;
  margin-top: 10px;
}

#google {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}