ngx-bootstrap modal custom class doesn't work

Question

I'm using Angular 9 and ngx-bootstrap 5.6.1

in my angular ts file I have a reference to a local css file.

in that file I have some css in my .modal-content class that I want to use to override the default modal-content class provided by ngx-bootstap. Things like width and height.

When I do this it get's ignored. I can see through Chrome that the stylesheet is loaded. So I tried adding !important to each of my values but that still didn't work. I then moved the css out and placed it in the html component and still it didn't work.

The official documentation shows a custom class against the template as:

this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'gray modal-lg' })
    );

So in my ts file I added , Object.assign({}, {class: 'modal-content'}) to my call to show and still it would not work. I then renamed the class and still no joy. If I add my modal-content class to the global styles.css file and then do:

this.modalRef = this.modalService.show(
          template);

the template shows correctly. Trouble is, the style needs to be local because other modal templates need to have different styles based on content etc. So, how do I override .modal-content locally.