Change design of elements when validation fails

Hi there!
Great plugin! Thank u very much for sharing.

I have created a form but I cannot use the shortcode so I am using the form’s HTML to display it in my page.
Everything’s working great, but I have one problem. I want to change the design of the “li” elements in the form when the validation fails.

Right now the HTML looks like this:

<div class="browser_gecko form_wrapper wpcf7" id="wpcf7-f46-p47-o1" lang="en-US" dir="ltr">
             <div class="screen-reader-response"></div>
             <form action="/form/#wpcf7-f46-p47-o1" method="post" class="wpcf7-form" novalidate="novalidate">
             <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="46" />
        <input type="hidden" name="_wpcf7_version" value="4.1.1" />
        <input type="hidden" name="_wpcf7_locale" value="en_US" />
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f46-p47-o1" />
        <input type="hidden" name="_wpnonce" value="229223424d" />
         </div>
         <div class="wpcf7-response-output wpcf7-display-none validation_error"></div>
             <div class='form_body'>
               <ul class='form_fields top_label description_below'>
                 <li class='field field_contains_required' >
                   <label class='field_label'>Name<span class='field_required'>*</span></label>
                   <div class='input_container'><input type='text' name='your-name' class="large wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" tabindex='1' /></div>
                   </li>
                   <li class='field'><label class='field_label'>Company</label>
                   <div class='input_container'><input type='text' name='COMPANY' class="large wpcf7-form-control wpcf7-text" aria-invalid="false" tabindex='2' /></div>
                   </li>
                   <li id='field_4' class='field field_contains_required' ><label class='field_label'>Email<span class='field_required'>*</span></label>
                   <div class='input_container'><input type='email' name='your-email' class="large pcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" tabindex='3' aria-required="true" aria-invalid="false" /></div></li>
                   <li id='field_5' class='field field_contains_required'><label class='field_label'>Inquiry<span class='field_required'>*</span></label>
                   <div class='input_container'><textarea name='your-message' tabindex='4' rows='10' cols='50' class="textarea medium wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></div></li>
                 </ul>
              </div>
        <div class='form_footer top_label'><input type='submit' value='Submit' class="button gform_button wpcf7-form-control wpcf7-submit" /></div>
                        </form>
                        </div>

How can I change the design? I tried using [role=alert] but it doesn’t help because the li elements are placed in a different div.

I could also send you a link to my page so you can see it live if there’s a way to contact you privately.

Thank you in advance for any help!
Kat

https://www.ads-software.com/plugins/contact-form-7/