How do I override the header in querySelectorAll with querySelector?

Question

I'm using datepicker-dialog.css and I have a querySelectorAll that retrieves a header in (.datepicker). However the .datepicker has a header that uses display:flex; which breaks the calendar displaying days vertically instead of horizontally.

Inside datepicker-dialog.css

.datepicker-dialog .header {
  cursor: default;
  background-color: white;
  padding: 7px;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  display: flex;
  justify-content: space-around;
}

In my index.html

<script>
    // Initialize the Datepicker-Dialog objects
    document.querySelectorAll('.datepicker').forEach(function (dp) { new DatePickerDialog(dp); });
</script>

I don't want to change the class directly because it is being used elsewhere so I tried adding a new class inside datepicker-dialog.css and calling querySelector.

<script>
    // Initialize the Datepicker-Dialog objects
    document.querySelectorAll('.datepicker').forEach(function (dp) { new DatePickerDialog(dp); });
    document.querySelector('.datepicker-dialog-mismatch');
</script>

Hoping that it would override the selectorAll but nothing changed. I then added

<style>
    .datepicker-dialog-mismatch .header {
        cursor: default;
        background-color: white;
        padding: 7px;
        font-weight: bold;
        text-transform: uppercase;
        color: black;
        justify-content: space-around;
}
</style>

At the top of my html file but the issue still persist. What other options/functions I can use to override the header?