.select {
    background-color: var(--white);
    border-radius: 8px;
    border: 1px solid var(--gray-500);
    color: var(--black);
    cursor: pointer;
    font-size: 16px;/* changed from 16 to 18 ds abra 06.06.24*/
    position: relative; 
}

    .select::before {
        background-image: url("data:image/svg+xml,%3Csvg class='ms-1' width='14' viewBox='0 0 83 47' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38.8125 44.1875L2.8125 8.1875C0.9375 6.5 0.9375 3.6875 2.8125 1.8125C4.5 0.125 7.3125 0.125 9.1875 1.8125L42 34.8125L74.8125 2C76.5 0.125 79.3125 0.125 81.1875 2C82.875 3.6875 82.875 6.5 81.1875 8.1875L45 44.1875C43.3125 46.0625 40.5 46.0625 38.8125 44.1875Z'%3E%3C/path%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
        content: "";
        display: block;
        height: 14px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
    }

.select-label {
    align-items: center;
    display: flex;
    font-weight: 600;
    height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.select.active .select-options {
    display: block;
}

.select-options {
    display: none;
    left: 0;
    padding-top: 10px;
    position: absolute;
    top: 100%;
    width: 100%;
}

.select-content {
    background-color: var(--white);
    border-radius: 8px;
    border: 1px solid var(--gray-500);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.75rem;
    position: relative;
    z-index: 11;
    max-height: 40vh;
    overflow-y: auto;
}