/* Custom Dropdown CSS - Simple Rectangle Replacement */

/* Remove default Bootstrap dropdown arrow */
.dropdown-toggle::after {
    display: none !important;
}

/* Add custom rectangle indicator below text */
.dropdown-toggle::after {
    content: '';
    display: block;
    width: 6px; /* Small rectangle width */
    height: 6px; /* Small rectangle height */
    background-color: #fff; /* White color */
    margin: 2px auto 0; /* Center horizontally, small top margin */
    transition: all 0.3s ease;
}

/* Hover effect */
.dropdown-toggle:hover::after {
    background-color: #007bff; /* Blue on hover */
    transform: scale(1.1);
}

/* Active state when dropdown is open */
.dropdown-toggle[aria-expanded="true"]::after {
    background-color: #007bff; /* Blue when open */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dropdown-toggle::after {
        width: 5px;
        height: 5px;
        margin: 1px auto 0;
    }
}