How do I style a Wordpress page protect form

I have been trying to change the style of this Wordpress page protect form.

The Wordpress page protect function is enabled and the password is set using Wordpress, however I previously had the PPWP plugin installed and with the plugin I was able to make changes to the look and feel of the form.

I also have Elementor Pro installed and it appears that PPWP used Elementor to create the form and bypass Wordpress to control the page password protection function.

Now that I removed the PPWP plugin I can enable the password protection using Wordpress but can no longer modify the look and feel. I am hoping to be able to use the Hello theme Customizer Additional CSS to make changes to the look of the form by zeroing in on a unique id but cannot figure out how to do that.

If I just try to modify the class it also affects other pages and containers on the site. I only want to manipulate the look and feel of this one form.

The source code for the form is as follows (https://www.bohoblossomstudio.com/freebies-vault/):

<div data-elementor-type="single-page" data-elementor-id="4471" class="elementor elementor-4471 elementor-location-single post-4687 page type-page status-publish post-password-required hentry" data-elementor-post-type="elementor_library">
   <div class="elementor-element elementor-element-26d69811 e-flex e-con-boxed e-con e-parent" data-id="26d69811" data-element_type="container">
     <div class="e-con-inner"></div>
   </div>
   <div class="elementor-element elementor-element-324307b9 e-flex e-con-boxed e-con e-parent" data-id="324307b9" data-element_type="container">
     <div class="e-con-inner">
       <div class="elementor-element elementor-element-50c64a7e elementor-widget elementor-widget-theme-post-content" data-id="50c64a7e" data-element_type="widget" data-widget_type="theme-post-content.default">
         <div class="elementor-widget-container">
           <form action="https://www.bohoblossomstudio.com/wp-login.php?action=postpass" class="post-password-form" method="post">
             <p>This content is password protected. To view it please enter your password below:</p>
             <p><label for="pwbox-4687">Password: <input name="post_password" id="pwbox-4687" type="password" spellcheck="false" size="20" /></label> <input type="submit" name="Submit" value="Enter" /></p>
           </form>
         </div>
       </div>
    </div>
  </div>
</div>

Screenshot of Form:

I am able to add padding using Additional CSS and not affect other containers on the site but not able to center it on the page. I just have this Additional CSS at the moment:

div.elementor-4471 {
  padding:2rem;
}

This is the CSS shown for this class according to inspector:

.elementor-4471 .elementor-element.elementor-element-26d69811{
  --display:flex;
  --flex-direction:row;
  --container-widget-width:initial;
  --container-widget-height:100%;
  --container-widget-flex-grow:1;
  --container-widget-align-self:stretch;
  --flex-wrap-mobile:wrap;
  --background-transition:0.3s;
}

My HTML, PHP, CSS, and JS skills are rudimentary. Any help figuring out how to use CSS, PHP, or JS to manipulate this would be appreciated. I am hoping to learn from this and then be able to apply it to other such situations. Thank you in advance for any tips, suggestions, and solutions.

Considering your applied code:

div.elementor-4471 {
  padding:2rem;
}

This would apply the padding to the element (as long as the selector div.elementor-4471 matches). However, if you were to apply e.g. display: block instead of padding: 2rem, the display: flex rule below would overwrite it. This is due to CSS specificity. Knowing this, you need to apply your desired styling with a higher specificity than the code below.

.elementor-4471 .elementor-element.elementor-element-26d69811{
  --display:flex;
  --flex-direction:row;
  --container-widget-width:initial;
  --container-widget-height:100%;
  --container-widget-flex-grow:1;
  --container-widget-align-self:stretch;
  --flex-wrap-mobile:wrap;
  --background-transition:0.3s;
}

Looking at the link provided, you need to apply justify-content: center to center the form. You can use this selector:

.elementor-element-324307b9.e-flex .e-con-inner {
   justify-content: center;
}

You need a selector like this due to specificity - as this element has this styling below applied, so you need to overwrite it (although "initial" is set as a CSS variable, the value of that variable is "initial").

.e-con.e-flex>.e-con-inner {
   justify-content: initial;
}

but also because you need a unique identifier (.elementor-element-324307b9), so your CSS doesn't interfere with anything else on the page.

You can apply the styling the same place you placed your current custom CSS.