Bootstrap4 DT print issue

Datatables using bootstrap4 loses styling in preview.. this is an example of the issue

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>dt-test</title>
  </head>
  <!--  Datatables - Bootstrap4-->
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.21/b-1.6.3/b-print-1.6.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.21/b-1.6.3/b-print-1.6.3/datatables.min.js"></script>

  
  <!-- bootstrap 3 -->
  <!--
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.21/b-1.6.3/b-print-1.6.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.21/b-1.6.3/b-print-1.6.3/datatables.min.js"></script>
-->




  <!-- Datatables default DT styles -->
  <!--  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.dataTables.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.print.js"></script>
-->





  
  <body>

    <div id="page-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div id="previewresultsrow">
              <div class="panel-group">
                <div class="panel panel-primary">

                  <!-- /.panel-heading -->
                  <div id="previewresultspanel">
                    <div class="panel-body">
                      <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover"...

CSS

td.score_red {
    background-color: red;
  }

  td.score_yellow {
    background-color: yellow;
  }

  td.score_green {
    background-color: green;
  }

  .dataTable thead tr th:nth-child(1) {
    background-color: black;
    color: white;
  }

  .dataTable thead tr th:nth-child(2) {
    background-color: black;
    color: white;
  }

  .dataTable thead tr th:nth-child(3) {
    background-color: black;
    color: white;
  }

  .dataTable thead tr th:nth-child(4) {
    background-color: black;
    color: white;
  }

  .dataTable thead tr th:nth-child(5) {
    background-color: black;
    color: white;
  }

JavaScript

var dataSet = [{
      "itemKey": 15,
      "userID": 25,
      "user": {
        "id": 25,
        "lname": "Doe",
        "fname": "John"
      },
      "scores": 1,
      "evidence": [],
      "description": "some item description"
    }];

    $(document).ready(function() {
      $('#previewresultstable').DataTable({

        data: dataSet,
        dom: 'Bfrtip',
        columns: [{
          "data": "itemKey"
        }, {
          "data": "userID",

          render: function(data, type, row, meta) {
            return '<a href="user_profile.jsp?patientId=' + row.userID + ' ">' + row.user.lname + ', ' + row.user.fname + '</a>';
          }
        }, {
          "data": "itemResult",
          render: function(data, type, row) {
            return row.scores;

          }
        }, {
          "data": "evidenceCount",
          render: function(data, type, row) {
            var res = 'No Evidence Found';
            if (data > 0)
              res = '<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#evidencemodal" data-preview="true" data-userId="' + row.user.id + '" data-itemKey="' + row.itemKey + '">View Records</button>';
            return res;
          }
        }, {
          "data": "description"
        }],

        select: true,
        lengthMenu: [
          [5, 25, 50, -1],
          ['5 rows', '25 rows', '50 rows', 'Show all']
        ],
        buttons: [{
          extend: 'print',
          exportOptions: {
            columns: [0, 1, 2, 4],
            format: {
              body: function(inner, rowidx, colidx, node) {
                if (node.classList.contains('score_red')) {
                  return '<span class="score_red">' + inner + '</span>';
                } else if (node.classList.contains('score_yellow')) {
                  return '<span class="score_yellow">' + inner + '</span>';
                } else if (node.classList.contains('score_green')) {
                  return '<span...