ul#index {
    padding-left: 0;
    list-style-type: none;
}
#message {
    height: 10em;
}
/* Customize the dropdown toggle (visible part) */
.select2-container .select2-hidden-accessible .select2-selection--single .product-select {
    height: 80px; /* Set desired height */
    line-height: 50px; /* Align text vertically */
    padding: 0 10px; /* Adjust horizontal padding */
}

/* Customize the dropdown list (expanded part) */
.select2-container .select2-results__options {
    max-height: 300px; /* Limit dropdown height */
    overflow-y: auto; /* Add scroll */
}

/* Customize individual dropdown items */
.select2-container .select2-results__option {
    height: 50px; /* Height of each option */
    line-height: 50px; /* Align text vertically */
}

.product-area {
        background-color: #e7f3ff; /* Light blue background */
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        
    }
.expense-area {
        background-color: #f9fccd; /* Light blue background */
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

/* Set the hover and active styles for navbar links */
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .dropdown-item.active {
    background-color: #0b5ed7; /* Darker shade of Bootstrap primary blue */
    color: #fff; /* White text for contrast */
}

/* color for regular (non-hovered) links to ensure contrast */
.navbar .nav-link {
    color: #ffffff; /* White text for menu links */
}

.navbar .dropdown-item:hover {
    background-color: #0d6efd; /* Darker shade of Bootstrap primary blue */
    color: #fff; /* White text for contrast */
}

table.income-table,
table.expense-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table.income-table th,
table.income-table td,
table.expense-table th,
table.expense-table td
 {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}
table.income-table th{
    background-color: #66CCCC; /* Green header */
    color: #fff;
}
table.income-table td:first-child,
table.expense-table td:first-child {
    background-color: #f0f0f0; /* Light grey for first column */
    font-weight: bold;
    text-align: left;
}

table.expense-table th {
    background-color: #ff6384; /* Red header */
    color: #fff;
}