UI Bootstrap adds <div> around <uib-tabset> directive, breaking CSS

When using <uib-tabset> included in UI Bootstrap, the directive template surrounds the resulting unordered list with an empty <div> element.

<div>
  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
  <div class="tab-content">
    <div class="tab-pane" 
         ng-repeat="tab in tabs" 
         ng-class="{active: tab.active}"
         uib-tab-content-transclude="tab">
    </div>
  </div>
</div>

This is causing my CSS to break since the CSS selectors are as follows.

.tabbable-custom > .nav-tabs > li.active {
    ...
}

When I use <uib-tabset>, this rule isn't picked up because the hierarchy is now

.tabbable-custom > div > .nav-tabs > li.active {
    ...
}

Can I avoid having to overwrite my entire CSS library to account for this added <div>?

Update:

Here is the html from my template:

<div class="portlet-body">
    <div class="tabbable-custom">
        <uib-tabset>
            <uib-tab ng-repeat="tabData in tabDataArray" heading="{{ tabData.heading }}">

and here is the resulting DOM:

<div class="portlet-body">
    <div class="tabbable-custom">
        <div class="ng-isolate-scope">
            <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">

I can remove the class="ng-isolate-scope" by disabling debugInfo, but it doesn't make a difference with the CSS.

Update 2: Another solution could be to remove the <div class="tabbable-custom"> from my template HTML, and add that class to the empty <div> that the <uib-tabset> directive places. Is this a possibility with UI Bootstrap?

Managed to accomplish what I needed by overwriting the UI Bootstrap template as explained in this question: Can you override specific templates in AngularUI Bootstrap?