WooCommerce中的blockOverlay类样式覆盖

There is this class that gets added into the cart totals in the checkout process to signify updates being made as the user is inputting relevant information such as a shipping address. When that happens, the class blockOverlay appears with inline styles. I'm attempting to override those styles, or edit them somehow. Anyone knows where I can tweak the CSS for that element? I can't override inline styles with my external wordpress stylesheet.

You can over-ride inline styles by using !important. Just add !important after specifying each property for the styles of blockOverlay element inside your stylesheet like this:

.blockOverlay {
     width: auto !important;
     display: block !important;
     //so on...
}

Here's an example:

.blockOverlay {
  background: red !important;
  width: 300px !important;
  height: 50px !important;
}

<div class="blockOverlay" style="height: 100px; width: 500px; background: blue;"></div>

</div>