form {
    .form-group {
        max-width: 100%;
        min-width: fit-content;
        margin: 0;
    }
    .has-error .form-control {
        border-color: #a94442 !important;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    label {
        display: block;
    }
    label.error {
        display: block;
        position: relative;
        margin: 0!important;
        width: 100%;
    }

    /**
     * exclude:
     *   - range inputs, cause these are handled by the app-slider tag
     *   - radio inputs, cause these are handled by the lekker-radiobutton css file
     *   - checkbox inputs, cause these are handled by the lekker-checkbox css file
     */
    input:not(input[type="range"]):not(input[type="radio"]):not(input[type="checkbox"]) {
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: FFFagoWeb, sans-serif;
        border: 2px solid #e2e3e6;
        border-radius: 6px;
        color: #472272;
        height: 46px;
        line-height: 46px;
        padding-left: 20px;
        -webkit-appearance: none;

        &:focus:not(.invalid-border):not(.weak-border):not(.medium-border) {
            -webkit-box-shadow: none;
            box-shadow: none;
            border: 2px solid #472272;
        }
    }

    .help-block {
        display: block;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
    }

    .invalid {background-color: var(--error-color); }
    .invalid-border { border: 1px solid var(--error-color) }
    .weak { background-color: #ffbb5e; }
    .weak-border { border: 1px solid #ffbb5e; }
    .medium { background-color: #8ecf69; }
    .medium-border { border: 1px solid #8ecf69; }
    .strong { background-color: var(--primary-text-color); }
    .strong-border { border: 1px solid var(--primary-text-color); }

}

.error *:not(a) {
    color: var(--error-color);
}