body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
  margin: 0; /* Remove default body margin */
  font-family: 'Noto Sans', sans-serif;
  background-color: #f2f2f2; /* Light background color for the page */
}

.login-container {
  background-color: #f1f6faba; /* Light background for the form */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Slightly increased shadow for depth */
  width: 100%;
  max-width: 400px; /* Set a max width for the form */
}

.form-control {
  margin-bottom: 15px; /* Space between form fields */
}

.icon {
  font-size: 50px; /* Icon size */
  color: #007bff; /* Change color as needed */
}

/* ----------------------------------------------Toast---------------------------------------- */
#toast {
  visibility: hidden; 
  min-width: 100px; 
  margin-left: -125px; 
  background-color: var(--primary); 
  color: whitesmoke; 
  text-align: center; 
  border-radius: 8px;
  padding: 12px;
  position: fixed; 
  z-index: 1; 
  right: 5%;
  top: 30px;
}

#toast.show {
  visibility: visible; 
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

.footer {
  text-align: center;
  padding: 15px 0;
  background-color: #f4f4f4ba;
  width: 100%;
  font-size: 14px;
  color: #6c757d;
}