Loading 3rd party script overrides the styles of my site completely

Question

When I load my page to check the remainder of gift card balance (from a 3rd party script) it overrides the styles that I have on my site. Below is an example of my code:

<div id="main" class="main">
    <div id="giftcard-balance-container" class="giftcard-balance-container">
        <div id="chockstone-loading" class="chockstone-loading">
            <p>Loading...</p>
        </div>
        <script>
            var container = document.getElementById('giftcard-balance-container');
            while (container == null) {
                setTimeout(function () {
                    container = document.getElementById('giftcard-balance-container');
                }, 100);
            }

            var addListener = function (script, callback) {
                if (callback !== null) {
                    if (script.readyState) { // IE, in¡cl. IE9
                        script.onreadystatechange = function onReadyStateChange() {
                            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                                script.onreadystatechange = null;
                                callback();
                            }
                        };
                    } else {
                        script.onload = function onLoad() { // Other browsers
                            callback();
                        };
                    }
                }
            };

            var scriptLoaded = function () {
                var loading = document.getElementById('chockstone-loading');
                loading.parentNode.removeChild(loading);
            };

            try {
                var script = document.createElement('script');
                script.src = 'SCRIPT_URL_REMOVED_FOR_SECURITY_REASONS';
                container.appendChild(script);
                addListener(script, scriptLoaded);
            } catch (e) {

            }
        </script>
    </div>
</div>

Is there a way to make it so the script doesn't override my styles that I currently have?

Answer 1

Use !important in your style

Example

.your-class{
   color:#ffffff !important;
}