.swal2-popup {
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif;
}

.datetime-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#datetime {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background: transparent;
    width: 100%;
    /*color: #333;*/
}

body.dark-theme #datetime {
    color: white !important;
}

.card.fat {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

body.dark-theme {
  background-color: #121212;
  color: #ffffff;
}

.card.dark-theme {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: #444;
}

.form-control.dark-theme,
.form-select.dark-theme,
.form-control-plaintext.dark-theme,
textarea.form-control.dark-theme {
  background-color: #2b2b2b;
  color: #ffffff;
  border-color: #444;
}

.form-control.dark-theme::placeholder {
  color: #ccc;
}

.form-control-plaintext.dark-theme {
  background-color: #2b2b2b;
  color: #ffffff;
  border-color: #444;
}
/* Floating form input container in dark mode */
body.dark-theme .form-floating > .form-control,
body.dark-theme .form-floating > .form-select,
body.dark-theme .form-floating > textarea.form-control {
  background-color: #2b2b2b;
  color: #ffffff;
  border-color: #444;
}

/* Label inside .form-floating in dark mode */
body.dark-theme .form-floating > label {
  color: #ccc;
}

/* Placeholder text (important for floating label behavior) */
body.dark-theme .form-control::placeholder {
  color: transparent;
}
/* Force floating label to stay positioned correctly */
body.dark-theme .form-floating > .form-control:focus ~ label,
body.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: #aaa;
  transform: scale(0.85) translateY(-1.5rem) translateX(0.15rem);
}


@media (max-width: 768px) {
    .card.fat {
        width: 90%;
    }
}