How to override a specific table border CSS style while using Bootstrap table formatting

I'm using Bootstrap with tables, and trying to make some minor overrides to the default CSS with limited success.

In the table below, I'm able to add a dark border at the bottom of the table head (thead), and to the bottom of the table rows in the footer (tr in tfoot), but I cannot add a border to the bottom of the last table row (tr:last-child), or alternately the bottom of the table body (tbody), or I suppose the top of the table footer (tfoot).

I've had limited success with this:

.table-sm.event-table tbody > tr:last-child {
    border-bottom: 2px solid #999;
}

However this doesn't render in all browsers, and only 'works' by making the single pixel light grey line a 2 pixel dark line, which I don't want, I just want a single pixel dark border between the last row of the body and the first row of the footer (between Row Two and Total Expense).

I know this has to do with the specificity of the CSS rules, and Bootstrap's rule taking precedent over my own, but even though I was able to make the other rules work, I cannot for the life of me figure out how to specify this one.

.event-table {
 width: 100%;
}

.table thead > tr > th { 
 border-bottom: 1px solid #333;
}

.table tfoot > tr > td { 
 border-bottom: 1px solid #333;
}

    <table class="table table-bordered table-sm event-table">
      <thead>
        <tr>
            <th>Unit</th>
            <th>Total</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total Expense $</td>
          <td class="text-right">$200</td>
        </tr>
        <tr>
          <td>Total Revenue $</td>
          <td class="text-right">$300</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
            <td>Row One</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Row Two</td>
            <td>$100</td>
        </tr>
      </tbody>
    </table>