/* Custom styles for the depositModal */
#depositModal .modal-content {
    border-radius: 0.5rem; /* Slightly more rounded corners for the modal */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Subtle border */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Softer shadow */
}

#depositModal .modal-header {
    padding: 1rem 1.5rem; /* Adjust header padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Light header separator */
}

#depositModal .modal-title {
    font-size: 1.25rem; /* Slightly larger modal title */
    font-weight: 500; /* Semi-bold title */
}

#depositModal .modal-body {
    padding: 1.5rem; /* Adjust body padding */
}

#depositModal .form-group {
    margin-bottom: 1.25rem; /* Slightly more space between form groups */
}

#depositModal label {
    font-size: 0.9rem; /* Slightly smaller label text */
    color: #555; /* Darker label text */
    margin-bottom: 0.3rem; /* Space between label and input */
    display: block; /* Ensure labels take full width */
}

#depositModal .form-control {
    border: 1px solid #ccc; /* Standard form control border */
    border-radius: 0.3rem; /* Slightly less rounded form controls */
    padding: 0.6rem 0.75rem; /* Adjusted padding for input fields */
    font-size: 1rem;
    color: #333; /* Darker input text */
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#depositModal .form-control:focus {
    border-color: #007bff; /* Primary focus color */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Standard focus shadow */
}

#depositModal .form-control:disabled {
    background-color: #e9ecef; /* Standard disabled background */
    opacity: 0.8;
}

#depositModal .form-select {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    background-clip: padding-box;
    appearance: none; /* Remove default arrow */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23333" viewBox="0 0 4 5"%3E%3Cpath d="M2 0L0 2h4zm0 5L0 3h4z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#depositModal .form-select:focus {
    border-color: #007bff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

 

#depositModal .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Focus shadow */
}

#depositModal .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

#depositModal .close:hover {
    opacity: 1;
}


 /* Custom styles for the expenseModal - inheriting from depositModal styles */
 #expenseModal .modal-content {
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#expenseModal .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#expenseModal .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
}

#expenseModal .modal-body {
    padding: 1.5rem;
}

#expenseModal .form-group {
    margin-bottom: 1.25rem;
}

#expenseModal .form-control {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#expenseModal .form-control:focus {
    border-color: #dc3545; /* Danger focus color */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Danger focus shadow */
}

#expenseModal .form-control:disabled {
    background-color: #e9ecef;
    opacity: 0.8;
}

#expenseModal .form-select {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    background-clip: padding-box;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23333" viewBox="0 0 4 5"%3E%3Cpath d="M2 0L0 2h4zm0 5L0 3h4z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#expenseModal .form-select:focus {
    border-color: #dc3545; /* Danger focus color */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Danger focus shadow */
}

/*   */

#expenseModal .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); /* Danger focus shadow */
}

#expenseModal .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

#expenseModal .close:hover {
    opacity: 1;
}