.choices {
    --choices-button-bg: var(--color4) !important;
    --choices-button-hover-bg: var(--color2);
    --choices-item-active-bg: var(--color3);
    --choices-item-active-color: var(--color2);
    --choices-group-heading-bg: var(--color2);
    --choices-group-heading-color: var(--color1);
}

.choices__list--dropdown {
    background-color: var(--color1);
    color: var(--color4);
}

.choices__item {
    background-color: var(--color2);
    color: var(--color4);
}

.choices__item.choices__item--selectable.is-highlighted {
    background-color: var(--color3) !important;
    color: var(--color4);
}

.choices__button {
    background-color: var(--choices-button-bg);
}

.choices__button:hover {
    background-color: var(--choices-button-hover-bg);
    color: var(--color4);
}

.choices__group {
    background-color: var(--choices-group-heading-bg);
    color: var(--choices-group-heading-color);
}

/* Stylizacja dla klasy custom-input */
.custom-input {
    background-color: var(--color2); /* ciemnoszary tło */
    border: 2px solid var(--color3); /* niebiesko-zielona obramówka */
    color: var(--color4); /* jasnoszary tekst */
    padding: 8px 12px; /* padding dla wygody wpisywania */
    border-radius: 4px; /* zaokrąglone rogi */
    font-size: 16px; /* odpowiednia wielkość czcionki */
    width: 100%; /* pełna szerokość kontenera */
    box-sizing: border-box; /* box-sizing aby padding nie wpływał na szerokość */
    transition: border-color 0.3s; /* płynna zmiana koloru obramówki */
}

.custom-input:focus {
    border-color: var(--color1); /* zmiana koloru obramówki na ciemniejszy przy fokusie */
    outline: none; /* usuń domyślny outline przeglądarki */
}

.choices__inner {
    background-color: var(--color2) !important; /* ciemnoszary tło */
}

.choices__input {
    color: var(--color4) !important; /* jasnoszary tekst */
    background-color: var(--color2) !important; /* ciemnoszary tło */
}