@layer components {
    .form-input {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .form-input {
            transition: none;
        }
    }

    .form-input:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-input::placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .form-input:disabled,
    .form-input[readonly] {
        background-color: #e9ecef;
        opacity: 1;
    }

    input[type="date"].form-input,
    input[type="time"].form-input,
    input[type="datetime-local"].form-input,
    input[type="month"].form-input {
        appearance: none;
    }

    select.form-input:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #495057;
    }

    .form-file {
        display: block;
        width: 100%;
    }

    .form-label--aligned {
        padding-top: calc(0.375rem + 1px);
        padding-bottom: calc(0.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }

    .form-input--small {
        height: calc(1.5em + 0.5rem + 2px);
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }

    select.form-input[size],
    select.form-input[multiple] {
        height: auto;
    }

    textarea.form-input {
        height: auto;
    }

    .form-field {
        margin-bottom: 1rem;
    }

    .form-hint {
        display: block;
        margin-top: 0.25rem;
    }

    .form-grid {
        display: flex;
        flex-wrap: wrap;
        margin-right: -5px;
        margin-left: -5px;
    }

    .form-grid > [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    .form-error {
        display: none;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #dc3545;
    }

    .is-invalid ~ .form-error {
        display: block;
    }

    .form-input.is-invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + 0.75rem) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .form-input.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    select.form-input.is-invalid {
        padding-right: 3rem !important;
        background-position: right 1.5rem center;
    }

    textarea.form-input.is-invalid {
        padding-right: calc(1.5em + 0.75rem);
        background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
    }

    .checkbox-field__input.is-invalid ~ .checkbox-field__label {
        color: #dc3545;
    }

    .checkbox-field__input.is-invalid ~ .checkbox-field__label::before {
        border-color: #dc3545;
    }

    .checkbox-field__input.is-invalid:checked ~ .checkbox-field__label::before {
        border-color: #e4606d;
        background-color: #e4606d;
    }

    .checkbox-field__input.is-invalid:focus ~ .checkbox-field__label::before {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    .checkbox-field__input.is-invalid:focus:not(:checked) ~ .checkbox-field__label::before {
        border-color: #dc3545;
    }

    .form--inline {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    @media (min-width: 576px) {
        .form--inline label {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
        }
    }

    @media (min-width: 576px) {
        .form--inline .form-field {
            display: flex;
            flex: 0 0 auto;
            flex-flow: row wrap;
            align-items: center;
            margin-bottom: 0;
        }
    }

    @media (min-width: 576px) {
        .form--inline .form-input {
            display: inline-block;
            width: auto;
            vertical-align: middle;
        }
    }

    @media (min-width: 576px) {
        .form--inline .input-group {
            width: auto;
        }
    }

    @media (min-width: 576px) {
        .form--inline .checkbox-field {
            align-items: center;
            justify-content: center;
        }
    }

    @media (min-width: 576px) {
        .form--inline .checkbox-field__label {
            margin-bottom: 0;
        }
    }

    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    }

    .input-group > .form-input {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
    }

    .input-group > .form-input + .form-input {
        margin-left: -1px;
    }

    .input-group > .form-input:focus {
        z-index: 3;
    }

    .input-group > .form-input:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .input-group__append {
        display: flex;
    }

    .input-group__append .input-group__text + .input-group__text {
        margin-left: -1px;
    }

    .input-group__append {
        margin-left: -1px;
    }

    .input-group__text {
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        text-align: center;
        white-space: nowrap;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

    .input-group__text input[type="radio"],
    .input-group__text input[type="checkbox"] {
        margin-top: 0;
    }

    .input-group > .input-group__append:last-child > .input-group__text:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group > .input-group__append > .input-group__text {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .checkbox-field {
        position: relative;
        z-index: 1;
        display: block;
        min-height: 1.5rem;
        padding-left: 1.5rem;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        print-color-adjust: exact;
    }

    .checkbox-field__input {
        position: absolute;
        left: 0;
        z-index: -1;
        width: 1rem;
        height: 1.25rem;
        opacity: 0;
    }

    .checkbox-field__input:checked ~ .checkbox-field__label::before {
        color: #fff;
        border-color: #007bff;
        background-color: #007bff;
    }

    .checkbox-field__input:focus ~ .checkbox-field__label::before {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .checkbox-field__input:focus:not(:checked) ~ .checkbox-field__label::before {
        border-color: #80bdff;
    }

    .checkbox-field__input:not(:disabled):active ~ .checkbox-field__label::before {
        color: #fff;
        background-color: #b3d7ff;
        border-color: #b3d7ff;
    }

    .checkbox-field__input[disabled] ~ .checkbox-field__label,
    .checkbox-field__input:disabled ~ .checkbox-field__label {
        color: #6c757d;
    }

    .checkbox-field__input[disabled] ~ .checkbox-field__label::before,
    .checkbox-field__input:disabled ~ .checkbox-field__label::before {
        background-color: #e9ecef;
    }

    .checkbox-field__label {
        position: relative;
        margin-bottom: 0;
        vertical-align: top;
    }

    .checkbox-field__label::before {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: 1px solid #adb5bd;
    }

    .checkbox-field__label::after {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background: 50% / 50% 50% no-repeat;
    }

    .checkbox-field--box .checkbox-field__label::before {
        border-radius: 0.25rem;
    }

    .checkbox-field--box .checkbox-field__input:checked ~ .checkbox-field__label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    }

    .checkbox-field--box .checkbox-field__input:indeterminate ~ .checkbox-field__label::before {
        border-color: #007bff;
        background-color: #007bff;
    }

    .checkbox-field--box .checkbox-field__input:indeterminate ~ .checkbox-field__label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
    }

    .checkbox-field--box .checkbox-field__input:disabled:checked ~ .checkbox-field__label::before {
        background-color: rgba(0, 123, 255, 0.5);
    }

    .checkbox-field--box .checkbox-field__input:disabled:indeterminate ~ .checkbox-field__label::before {
        background-color: rgba(0, 123, 255, 0.5);
    }

    .checkbox-field__label::before {
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .checkbox-field__label::before {
            transition: none;
        }
    }

    .form-field--required .form-label::after {
        content: " * ";
        color: red;
    }

    /* !important because .form-input:focus and the ParetoHerd page set focus shadows of their own, which were never drawn. */
    input:focus,
    select:focus,
    textarea:focus {
        box-shadow: none !important;
    }

    .form-input {
        border-radius: 0;
        border-color: var(--theme-color-dark-prev);
    }

    .form-input:focus {
        border-color: var(--theme-color-main-dark);
    }
}