html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}


.form-signin input:not(.first-field):not(.last-field):not(.only-field) {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin .first-field {
  margin-bottom: -1px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin .last-field {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.form-signin .only-field {
  margin-bottom: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.invalid-feedback {
  margin-bottom: 0.5em;
}


/* Dark Mode Styles */
body.dark-mode {
  background-color: #212529;
  color: #fff;
}

/* Dark mode form styles */
body.dark-mode .form-signin {
  background-color: #343a40;
  border-radius: 1rem;
  padding: 2rem;
}

body.dark-mode .form-floating > label {
  color: #adb5bd;
}

body.dark-mode .form-control {
  background-color: #495057;
  border-color: #6c757d;
  color: #fff;
}

body.dark-mode .form-control:focus {
  background-color: #495057;
  border-color: #0d6efd;
  color: #fff;
}

body.dark-mode .form-control::placeholder {
  color: #adb5bd;
}

/* Dark mode text and links */
body.dark-mode .text-muted {
  color: #adb5bd !important;
}

body.dark-mode a {
  color: var(--bs-info);
  text-decoration: none;
}

body.dark-mode a:hover {
  color: var(--bs-info-text);
  text-decoration: underline;
}

body.dark-mode a strong {
  color: var(--bs-info);
}

body.dark-mode a:hover strong {
  color: var(--bs-info-text);
}

/* Dark mode buttons */
body.dark-mode .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

body.dark-mode .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Dark mode alerts */
body.dark-mode .alert-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

body.dark-mode .alert-success {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

body.dark-mode .alert-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

/* Dark mode invalid feedback */
body.dark-mode .invalid-feedback {
  color: #ff8891;
}