.expense-description {
    width: 50%;
    display: inline-block;
    vertical-align: super;

}

.form-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f4f6; /* light gray */
    color: #1f2937; /* dark gray for text */
    border: 1px solid #d1d5db; /* border-gray-300 */
    transition: background-color 0.3s, color 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #10b981; /* focus-green */
}

.dark .form-input {
    background-color: #374151; /* dark gray background */
    color: #d1d5db; /* light gray text */
    border-color: #4b5563; /* dark border */
}

.dark .form-input:focus {
    border-color: #d97706; /* dark focus-yellow */
}

@keyframes slide-in {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-scroll {
  animation: slide-in 0.8s ease-out forwards;
  opacity: 0;
}