Overriding Reportico CSS and javascript

Most of reportico's output uses CSS to format the pages. These files are stored in REPORTICO_ROOT/vendor/reportico-web/reportico/themes/THEME_NAME/css There are a lot of other CSS files in the project, but I'm unclear if they are used or not.

Many of these can be overridden with the !important tag in your own CSS, though there are some that are marked that way in reportico's CSS files, so they can not be overridden.

I needed to turn off the default date picker as it was not working on my client's system, so I put the following two items in my css file.

/* hide any id's which have reportico-date-label in them (using regex's) */
[id^="reportico-date-label"], .ranges {
     display: none !important;
} 
 
/* hide daterangepicker */
.daterangepicker {
display: none !important;
}

Reportico also uses a lot of javascript, and in some cases, this can be modified in your calling script also. The following code inserted into the bottom of reports_run.php appears to work, but not really sure.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elementsToHide = [
      'reportico-date-label-startdate',
      'reportico-date-label-enddate'
    ];
 
    var elementsWithClass = document.getElementsByClassName('ranges');
 
    for (var i = 0; i < elementsToHide.length; i++) {
      var element = document.getElementById(elementsToHide[i]);
      if (element) {
        element.style.display = 'none';
      }
    }
 
    for (var j = 0; j < elementsWithClass.length; j++) {
      elementsWithClass[j].style.display = 'none';
    }
  });
</script>