TOPIC: Making simple CSS changes

Hi there, I'm looking to make some simple CSS changes to customise the product. I've searched the forum, but can't find simple instructions as to how to do this correctly, so that it works and survives product updates.

When I click the 'details' button, and the screen switches to the 'after' position, the background no longer matches the previous white background. So I want to change it so the background remains white. I found the desired change by inspecting elements (.bookshelf figure::after {rgba(255, 255, 255, 0.1);}). I have edited the /wp-content/plugins/ebook-store/css/component.css by replacing the previous colour code with this code. However, the change doesn't seem to work when refreshing the website.

Please could you let me know where I'm going wrong? Is there somewhere else I can add this CSS change to make it work and survive any product updates? Please see attached screenshot. I'd also like to remove the horizontal scrollbar,

It would be really useful to have a simple step-by-step guide towards making simple CSS edits.

Many thanks.

Ok, I've managed to fix the problem by applying the following CSS to my theme's file that manages customised CSS:

div.tve-c .bookshelf figure.details-open::after {
opacity: 0;
}

That seems to have done the trick and I guess will withstand product updates because the CSS exists outside the plugin. Resolved.

Thanks for sharing!