button,
input,
select,
textarea {
    font: var(--text-base);
    line-height: 1.6875;
    margin: 0 0 var(--space-base) 0;
    padding: .5rem 1rem;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-lg);
    background: var(--color-light-grey);
    width: 100%
}

input[type=checkbox],
input[type=radio] {
    width: auto;
    padding: 0;
    margin-bottom: 0;
    margin-right: .5rem
}

input.date {
    width: 10rem;
    padding-right: 3rem;
    background: var(--color-light-grey) url(../images/icons/icon-calendar.svg) no-repeat 90% 50%;
    background-size: 1rem
}

input.error {
    border-color: var(--color-red)
}

select.error {
    border-color: var(--color-red) !important
}

.select2 {
    margin: 0 0 var(--space-base) 0
}

.select2 .select2-selection {
    padding: .5rem 1rem;
    height: auto;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-lg);
    background: var(--color-light-grey)
}

.select2 .select2-selection--single .select2-selection__rendered {
    font: var(--text-base);
    line-height: 1.6875;
    text-align: left;
    padding-left: 0
}

.select2 .select2-selection--single .select2-selection__arrow {
    height: 100%
}

.select2-container .select2-results__option {
    padding-left: var(--space-base);
    padding-right: var(--space-base);
    font: var(--text-xs);
    white-space: nowrap
}

.select2-container .select2-search--dropdown .select2-search__field {
    margin-bottom: 0
}

.select2-container .select2-dropdown {
    width: auto !important;
    max-width: min(480px, 90vw);
    min-width: 280px
}

.field {
    position: relative
}

.field .message.error,
label.error {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    font-size: 80%;
    color: var(--color-white);
    background: var(--color-red);
    display: block;
    padding: 4px 6px;
    z-index: 10;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: 0 2px 4px rgb(var(--color-black-rgb) / .2)
}

.field .message.success {
    position: absolute;
    top: -.25rem;
    right: -.5rem;
    font-size: 80%;
    color: var(--color-white);
    background: var(--color-primary);
    display: block;
    padding: 4px 6px
}

.field .hint {
    font: var(--text-xs);
    text-transform: uppercase;
    display: block
}

form .fields--flex {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

form .fields--flex .field {
    flex: 1 1 0;
    padding-bottom: 1rem
}

/* Filtr terminarza ma ciasniejsza siatke niz zwykly formularz. Regula stoi
   tutaj, a nie w schedule-ajax.css, bo shortcode [searchform] mozna wstawic
   na dowolnej stronie, a tamte arkusze wchodza tylko na tpl-schedule.php. */
form#schedule-filters-form .fields--flex {
    gap: .5rem
}

form .fields--flex input,
form .fields--flex select {
    min-width: 10rem
}

form .fields--flex input[type=checkbox],
form .fields--flex input[type=radio] {
    min-width: 0
}