.custom-dropdown {
    position: relative; /* To position the list */
    display: flex;
    align-items: center; /* Vertically center the content */
}



.dropdown-list {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    transform: translateY(50%);
    z-index: 1; /* Ensure it's above other elements */
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-list li {
    padding: 10px;
    cursor: pointer;
}

.dropdown-list li:hover {
    background-color: #eee;
}

.custom-dropdown.active .dropdown-list {
    display: block; /* Show the list when active */
}

.dropdown-label{
    align-self: center;
}

.dropdown-list li::before {  /* Use ::before pseudo-element */
    font-family: "Material Icons";
    content: ' '; /* Empty by default */
    margin-right: 5px;
    vertical-align: middle;
}

.dropdown-list li.selected::before {
    content: '\e5ca'; /* Checkmark icon */
}