:root {
    --form-error: #b42318;
    --form-error-ring: rgba(180, 35, 24, .24);
}

.form-validation-error,
.field-validation-error,
.validation-summary-errors {
    color: var(--form-error) !important;
}

.form-validation-error {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.form-validation-error:empty {
    display: none;
}

.form-validation-control--invalid:not([type="radio"]):not([type="checkbox"]),
[contenteditable="true"].form-validation-control--invalid {
    border-color: var(--form-error) !important;
    box-shadow: 0 0 0 3px var(--form-error-ring) !important;
}

.form-validation-choice-target--invalid {
    border-radius: 3px;
    outline: 2px solid var(--form-error);
    outline-offset: 4px;
}

.form-validation-shake {
    animation: form-validation-shake .42s ease-in-out;
}

@keyframes form-validation-shake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-8px); }
    36% { transform: translateX(7px); }
    54% { transform: translateX(-5px); }
    72% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .form-validation-shake {
        animation: none !important;
    }
}