How to separate 1C-Bitrix styles for a template and PU?

Question

css

Dear colleagues!
Recently I started to deal with the development of templates for 1C-Bitrix and ran into such a problem:
the template styles override the styles of the Bitrix admin panel in the frontend. For example, in the template you need to style checkboxes and radio buttons, and the styles indicate that they need to be hidden. And they, respectively, are hidden in Bitrix pop-up windows.
This is how it is displayed now (the styles for the table were immediately pulled up), i.e. it is not visible which checkbox is pressed and what is selected:

And this is when I commented out the design of form elements and tables:

I tried to move styles between the template_styles.css and styles.css files, but the result is the same :(
Maybe there is some way to separate them once and for all so that the styles for the template do not override the standard Bitrix styles? Or maybe I'm doing something wrong?

Answer 1

You either need to use your own classes, not tags, or make some kind of container and define all the styles inside of it.