@media (max-width: 767px) {
    #select-container {
        width: 48px;
        left: 10px;
    }
}


#select-container {
    position: relative;
    width: 140px;
    height: 40px;
    background: #FFFFFF;
    left: 20px;
    border-radius: 10px;
    border: 0.5px solid rgba(202, 219, 226, 0.40);
    box-shadow: 0px 3px 6px rgba(79, 104, 113, 0.20);
    overflow: hidden;
    transition: height 0.2s ease-in-out, border-radius 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    &:hover

{
    height: auto; /* Can't use height: auto & transition effect */
    border-radius: 20px;
    box-shadow: 0px 7px 10px rgba(79, 104, 113, 0.30);
}
&:hover ul {
    max-height: 300px;
    overflow-y: scroll;
    padding-top: 10px;
}

ul {
    list-style-type: none;
    position: relative;
    margin: 16px 10px;
    li

{
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    display:flex;
    &:first-child

{
    img

{
    cursor: default;
}
span { 
    font-weight: bold;

}

}
span {
    margin-top: -7px;
    margin-left: -15px;
    cursor: pointer;
}&:hover img{
    box-shadow: 0px 5px 10px rgba(79, 104, 113, 0.30);
    transform: translate(-103%, -40%) scale(1.08);
}
}

img {
    width: 25px;
    height: 25px;
    display: block;
    left: 50%;
    transform: translate(-103%, -40%);
    margin-bottom: 8px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 6px rgba(79, 104, 113, 0.30);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    &:hover

{
    
    box-shadow: 0px 5px 10px rgba(79, 104, 113, 0.30);
    transform: translate(-103%, -40%) scale(1.08);
}

}
}
}
}