How to make a second version of a css modified element for use elsewhere on the site?

I have a pop up form that is styled using custom CSS. I want to use another pop up form elsewhere, but wish to style it differently. Both pop up styles will be heavily used, so if there's a way to match the style to which branch/category then that would be ideal.

In this particular case I wish to have two versions of ".sqs-modal-lightbox-content"

I have tried copy and pasting block id's (e.g #item-5e1224fe62ad5d43f3c101d6) but i'm either not using correct formatting or it doesn't work.

Hi. Can you share link to a page where you add popup? We can check easier

Thank you, yes I would be happy to share:

PopUp01 - "Request shipping quote button"

PopUp02 - Smartphone/Tablet Buttons

password: jonjonjon

• I am currently getting round this by adding css in each product page header injection. But this would mean future changes would be tedious to make changes for in future and prone to inconsistency

• The div class is ".lightbox-handle.sqs-system-button.sqs-editable-button" (i will also be changing the button style between the two uses.

• The two uses are found on different "Store" pages, tags and categories. Brine layout

I was working on this element at the moment, but I will leave it so that you may be able to have a look at it without things changing.