fixed card default border after adding nav tabs support

- placed default card tabs style into .card-tabs
- updated demo

build/scss/_cards.scss

@@ -76,25 +76,27 @@
     border-left: 1px solid $card-border-color;
   }
 
-  &:not(.card-outline) {
-    > .card-header {
-      border-bottom: 0;
+  &.card-tabs {
+    &:not(.card-outline) {
+      & .card-header {
+        border-bottom: 0;
 
-      .nav-item {
-        &:first-child .nav-link {
-          margin-left: -1px;
+        .nav-item {
+          &:first-child .nav-link {
+            margin-left: -1px;
+          }
         }
       }
     }
-  }
 
-  &.card-outline {
-    .nav-item {
-      border-bottom: 0;
+    &.card-outline {
+      .nav-item {
+        border-bottom: 0;
 
-      &:first-child .nav-link {
-        border-left: 0;
-        margin-left: 0;
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
       }
     }
   }
@@ -102,7 +104,7 @@
   &.card-outline-tabs {
     border-top: 0;
 
-    > .card-header {
+    .card-header {
       .nav-item {
         &:first-child .nav-link {
           border-left: 0;
@@ -125,6 +127,7 @@
       }
     }
   }
+
 }
 
 // Maximized Card Body Scroll fix

build/scss/mixins/_cards.scss

@@ -4,27 +4,29 @@
 
 @mixin cards-variant($name, $color) {
   .card-#{$name} {
-    &:not(.card-outline) {
-      > .card-header {
-        background-color: $color;
+    &.card-tabs {
+      &:not(.card-outline) {
+        .card-header {
+          background-color: $color;
 
-        &,
-        a {
-          color: color-yiq($color);
-        }
+          &,
+          a {
+            color: color-yiq($color);
+          }
 
-        a.active {
-          color: color-yiq($white);
+          a.active {
+            color: color-yiq($white);
+          }
         }
       }
-    }
 
-    &.card-outline {
-      border-top: 3px solid $color;
+      &.card-outline {
+        border-top: 3px solid $color;
+      }
     }
 
     &.card-outline-tabs {
-      > .card-header {
+      .card-header {
         a {
           &:hover {
             border-top: 3px solid $nav-tabs-border-color;

dist/css/adminlte.css

@@ -15261,19 +15261,19 @@ textarea.form-control.is-warning {
   border-left: 1px solid rgba(0, 0, 0, 0.125);
 }
 
-.card:not(.card-outline) > .card-header {
+.card.card-tabs:not(.card-outline) .card-header {
   border-bottom: 0;
 }
 
-.card:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
+.card.card-tabs:not(.card-outline) .card-header .nav-item:first-child .nav-link {
   margin-left: -1px;
 }
 
-.card.card-outline .nav-item {
+.card.card-tabs.card-outline .nav-item {
   border-bottom: 0;
 }
 
-.card.card-outline .nav-item:first-child .nav-link {
+.card.card-tabs.card-outline .nav-item:first-child .nav-link {
   border-left: 0;
   margin-left: 0;
 }
@@ -15282,20 +15282,20 @@ textarea.form-control.is-warning {
   border-top: 0;
 }
 
-.card.card-outline-tabs > .card-header .nav-item:first-child .nav-link {
+.card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
   border-left: 0;
   margin-left: 0;
 }
 
-.card.card-outline-tabs > .card-header a {
+.card.card-outline-tabs .card-header a {
   border-top: 3px solid transparent;
 }
 
-.card.card-outline-tabs > .card-header a:hover {
+.card.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card.card-outline-tabs > .card-header a.active:hover {
+.card.card-outline-tabs .card-header a.active:hover {
   margin-top: 0;
 }
 
@@ -15636,28 +15636,28 @@ html.maximized-card {
   max-width: 200px;
 }
 
-.card-primary:not(.card-outline) > .card-header {
+.card-primary.card-tabs:not(.card-outline) .card-header {
   background-color: #007bff;
 }
 
-.card-primary:not(.card-outline) > .card-header,
-.card-primary:not(.card-outline) > .card-header a {
+.card-primary.card-tabs:not(.card-outline) .card-header,
+.card-primary.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-primary:not(.card-outline) > .card-header a.active {
+.card-primary.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-primary.card-outline {
+.card-primary.card-tabs.card-outline {
   border-top: 3px solid #007bff;
 }
 
-.card-primary.card-outline-tabs > .card-header a:hover {
+.card-primary.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-primary.card-outline-tabs > .card-header a.active {
+.card-primary.card-outline-tabs .card-header a.active {
   border-top: 3px solid #007bff;
 }
 
@@ -15707,28 +15707,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-secondary:not(.card-outline) > .card-header {
+.card-secondary.card-tabs:not(.card-outline) .card-header {
   background-color: #6c757d;
 }
 
-.card-secondary:not(.card-outline) > .card-header,
-.card-secondary:not(.card-outline) > .card-header a {
+.card-secondary.card-tabs:not(.card-outline) .card-header,
+.card-secondary.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-secondary:not(.card-outline) > .card-header a.active {
+.card-secondary.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-secondary.card-outline {
+.card-secondary.card-tabs.card-outline {
   border-top: 3px solid #6c757d;
 }
 
-.card-secondary.card-outline-tabs > .card-header a:hover {
+.card-secondary.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-secondary.card-outline-tabs > .card-header a.active {
+.card-secondary.card-outline-tabs .card-header a.active {
   border-top: 3px solid #6c757d;
 }
 
@@ -15778,28 +15778,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-success:not(.card-outline) > .card-header {
+.card-success.card-tabs:not(.card-outline) .card-header {
   background-color: #28a745;
 }
 
-.card-success:not(.card-outline) > .card-header,
-.card-success:not(.card-outline) > .card-header a {
+.card-success.card-tabs:not(.card-outline) .card-header,
+.card-success.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-success:not(.card-outline) > .card-header a.active {
+.card-success.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-success.card-outline {
+.card-success.card-tabs.card-outline {
   border-top: 3px solid #28a745;
 }
 
-.card-success.card-outline-tabs > .card-header a:hover {
+.card-success.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-success.card-outline-tabs > .card-header a.active {
+.card-success.card-outline-tabs .card-header a.active {
   border-top: 3px solid #28a745;
 }
 
@@ -15849,28 +15849,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-info:not(.card-outline) > .card-header {
+.card-info.card-tabs:not(.card-outline) .card-header {
   background-color: #17a2b8;
 }
 
-.card-info:not(.card-outline) > .card-header,
-.card-info:not(.card-outline) > .card-header a {
+.card-info.card-tabs:not(.card-outline) .card-header,
+.card-info.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-info:not(.card-outline) > .card-header a.active {
+.card-info.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-info.card-outline {
+.card-info.card-tabs.card-outline {
   border-top: 3px solid #17a2b8;
 }
 
-.card-info.card-outline-tabs > .card-header a:hover {
+.card-info.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-info.card-outline-tabs > .card-header a.active {
+.card-info.card-outline-tabs .card-header a.active {
   border-top: 3px solid #17a2b8;
 }
 
@@ -15920,28 +15920,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-warning:not(.card-outline) > .card-header {
+.card-warning.card-tabs:not(.card-outline) .card-header {
   background-color: #ffc107;
 }
 
-.card-warning:not(.card-outline) > .card-header,
-.card-warning:not(.card-outline) > .card-header a {
+.card-warning.card-tabs:not(.card-outline) .card-header,
+.card-warning.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-warning:not(.card-outline) > .card-header a.active {
+.card-warning.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-warning.card-outline {
+.card-warning.card-tabs.card-outline {
   border-top: 3px solid #ffc107;
 }
 
-.card-warning.card-outline-tabs > .card-header a:hover {
+.card-warning.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-warning.card-outline-tabs > .card-header a.active {
+.card-warning.card-outline-tabs .card-header a.active {
   border-top: 3px solid #ffc107;
 }
 
@@ -15991,28 +15991,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-danger:not(.card-outline) > .card-header {
+.card-danger.card-tabs:not(.card-outline) .card-header {
   background-color: #dc3545;
 }
 
-.card-danger:not(.card-outline) > .card-header,
-.card-danger:not(.card-outline) > .card-header a {
+.card-danger.card-tabs:not(.card-outline) .card-header,
+.card-danger.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-danger:not(.card-outline) > .card-header a.active {
+.card-danger.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-danger.card-outline {
+.card-danger.card-tabs.card-outline {
   border-top: 3px solid #dc3545;
 }
 
-.card-danger.card-outline-tabs > .card-header a:hover {
+.card-danger.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-danger.card-outline-tabs > .card-header a.active {
+.card-danger.card-outline-tabs .card-header a.active {
   border-top: 3px solid #dc3545;
 }
 
@@ -16062,28 +16062,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-light:not(.card-outline) > .card-header {
+.card-light.card-tabs:not(.card-outline) .card-header {
   background-color: #f8f9fa;
 }
 
-.card-light:not(.card-outline) > .card-header,
-.card-light:not(.card-outline) > .card-header a {
+.card-light.card-tabs:not(.card-outline) .card-header,
+.card-light.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-light:not(.card-outline) > .card-header a.active {
+.card-light.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-light.card-outline {
+.card-light.card-tabs.card-outline {
   border-top: 3px solid #f8f9fa;
 }
 
-.card-light.card-outline-tabs > .card-header a:hover {
+.card-light.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-light.card-outline-tabs > .card-header a.active {
+.card-light.card-outline-tabs .card-header a.active {
   border-top: 3px solid #f8f9fa;
 }
 
@@ -16133,28 +16133,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-dark:not(.card-outline) > .card-header {
+.card-dark.card-tabs:not(.card-outline) .card-header {
   background-color: #343a40;
 }
 
-.card-dark:not(.card-outline) > .card-header,
-.card-dark:not(.card-outline) > .card-header a {
+.card-dark.card-tabs:not(.card-outline) .card-header,
+.card-dark.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-dark:not(.card-outline) > .card-header a.active {
+.card-dark.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-dark.card-outline {
+.card-dark.card-tabs.card-outline {
   border-top: 3px solid #343a40;
 }
 
-.card-dark.card-outline-tabs > .card-header a:hover {
+.card-dark.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-dark.card-outline-tabs > .card-header a.active {
+.card-dark.card-outline-tabs .card-header a.active {
   border-top: 3px solid #343a40;
 }
 
@@ -16204,28 +16204,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-navy:not(.card-outline) > .card-header {
+.card-navy.card-tabs:not(.card-outline) .card-header {
   background-color: #001f3f;
 }
 
-.card-navy:not(.card-outline) > .card-header,
-.card-navy:not(.card-outline) > .card-header a {
+.card-navy.card-tabs:not(.card-outline) .card-header,
+.card-navy.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-navy:not(.card-outline) > .card-header a.active {
+.card-navy.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-navy.card-outline {
+.card-navy.card-tabs.card-outline {
   border-top: 3px solid #001f3f;
 }
 
-.card-navy.card-outline-tabs > .card-header a:hover {
+.card-navy.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-navy.card-outline-tabs > .card-header a.active {
+.card-navy.card-outline-tabs .card-header a.active {
   border-top: 3px solid #001f3f;
 }
 
@@ -16275,28 +16275,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-olive:not(.card-outline) > .card-header {
+.card-olive.card-tabs:not(.card-outline) .card-header {
   background-color: #3d9970;
 }
 
-.card-olive:not(.card-outline) > .card-header,
-.card-olive:not(.card-outline) > .card-header a {
+.card-olive.card-tabs:not(.card-outline) .card-header,
+.card-olive.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-olive:not(.card-outline) > .card-header a.active {
+.card-olive.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-olive.card-outline {
+.card-olive.card-tabs.card-outline {
   border-top: 3px solid #3d9970;
 }
 
-.card-olive.card-outline-tabs > .card-header a:hover {
+.card-olive.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-olive.card-outline-tabs > .card-header a.active {
+.card-olive.card-outline-tabs .card-header a.active {
   border-top: 3px solid #3d9970;
 }
 
@@ -16346,28 +16346,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-lime:not(.card-outline) > .card-header {
+.card-lime.card-tabs:not(.card-outline) .card-header {
   background-color: #01ff70;
 }
 
-.card-lime:not(.card-outline) > .card-header,
-.card-lime:not(.card-outline) > .card-header a {
+.card-lime.card-tabs:not(.card-outline) .card-header,
+.card-lime.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-lime:not(.card-outline) > .card-header a.active {
+.card-lime.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-lime.card-outline {
+.card-lime.card-tabs.card-outline {
   border-top: 3px solid #01ff70;
 }
 
-.card-lime.card-outline-tabs > .card-header a:hover {
+.card-lime.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-lime.card-outline-tabs > .card-header a.active {
+.card-lime.card-outline-tabs .card-header a.active {
   border-top: 3px solid #01ff70;
 }
 
@@ -16417,28 +16417,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-fuchsia:not(.card-outline) > .card-header {
+.card-fuchsia.card-tabs:not(.card-outline) .card-header {
   background-color: #f012be;
 }
 
-.card-fuchsia:not(.card-outline) > .card-header,
-.card-fuchsia:not(.card-outline) > .card-header a {
+.card-fuchsia.card-tabs:not(.card-outline) .card-header,
+.card-fuchsia.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-fuchsia:not(.card-outline) > .card-header a.active {
+.card-fuchsia.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-fuchsia.card-outline {
+.card-fuchsia.card-tabs.card-outline {
   border-top: 3px solid #f012be;
 }
 
-.card-fuchsia.card-outline-tabs > .card-header a:hover {
+.card-fuchsia.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-fuchsia.card-outline-tabs > .card-header a.active {
+.card-fuchsia.card-outline-tabs .card-header a.active {
   border-top: 3px solid #f012be;
 }
 
@@ -16488,28 +16488,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-maroon:not(.card-outline) > .card-header {
+.card-maroon.card-tabs:not(.card-outline) .card-header {
   background-color: #d81b60;
 }
 
-.card-maroon:not(.card-outline) > .card-header,
-.card-maroon:not(.card-outline) > .card-header a {
+.card-maroon.card-tabs:not(.card-outline) .card-header,
+.card-maroon.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-maroon:not(.card-outline) > .card-header a.active {
+.card-maroon.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-maroon.card-outline {
+.card-maroon.card-tabs.card-outline {
   border-top: 3px solid #d81b60;
 }
 
-.card-maroon.card-outline-tabs > .card-header a:hover {
+.card-maroon.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-maroon.card-outline-tabs > .card-header a.active {
+.card-maroon.card-outline-tabs .card-header a.active {
   border-top: 3px solid #d81b60;
 }
 
@@ -16559,28 +16559,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-blue:not(.card-outline) > .card-header {
+.card-blue.card-tabs:not(.card-outline) .card-header {
   background-color: #007bff;
 }
 
-.card-blue:not(.card-outline) > .card-header,
-.card-blue:not(.card-outline) > .card-header a {
+.card-blue.card-tabs:not(.card-outline) .card-header,
+.card-blue.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-blue:not(.card-outline) > .card-header a.active {
+.card-blue.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-blue.card-outline {
+.card-blue.card-tabs.card-outline {
   border-top: 3px solid #007bff;
 }
 
-.card-blue.card-outline-tabs > .card-header a:hover {
+.card-blue.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-blue.card-outline-tabs > .card-header a.active {
+.card-blue.card-outline-tabs .card-header a.active {
   border-top: 3px solid #007bff;
 }
 
@@ -16630,28 +16630,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-indigo:not(.card-outline) > .card-header {
+.card-indigo.card-tabs:not(.card-outline) .card-header {
   background-color: #6610f2;
 }
 
-.card-indigo:not(.card-outline) > .card-header,
-.card-indigo:not(.card-outline) > .card-header a {
+.card-indigo.card-tabs:not(.card-outline) .card-header,
+.card-indigo.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-indigo:not(.card-outline) > .card-header a.active {
+.card-indigo.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-indigo.card-outline {
+.card-indigo.card-tabs.card-outline {
   border-top: 3px solid #6610f2;
 }
 
-.card-indigo.card-outline-tabs > .card-header a:hover {
+.card-indigo.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-indigo.card-outline-tabs > .card-header a.active {
+.card-indigo.card-outline-tabs .card-header a.active {
   border-top: 3px solid #6610f2;
 }
 
@@ -16701,28 +16701,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-purple:not(.card-outline) > .card-header {
+.card-purple.card-tabs:not(.card-outline) .card-header {
   background-color: #6f42c1;
 }
 
-.card-purple:not(.card-outline) > .card-header,
-.card-purple:not(.card-outline) > .card-header a {
+.card-purple.card-tabs:not(.card-outline) .card-header,
+.card-purple.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-purple:not(.card-outline) > .card-header a.active {
+.card-purple.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-purple.card-outline {
+.card-purple.card-tabs.card-outline {
   border-top: 3px solid #6f42c1;
 }
 
-.card-purple.card-outline-tabs > .card-header a:hover {
+.card-purple.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-purple.card-outline-tabs > .card-header a.active {
+.card-purple.card-outline-tabs .card-header a.active {
   border-top: 3px solid #6f42c1;
 }
 
@@ -16772,28 +16772,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-pink:not(.card-outline) > .card-header {
+.card-pink.card-tabs:not(.card-outline) .card-header {
   background-color: #e83e8c;
 }
 
-.card-pink:not(.card-outline) > .card-header,
-.card-pink:not(.card-outline) > .card-header a {
+.card-pink.card-tabs:not(.card-outline) .card-header,
+.card-pink.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-pink:not(.card-outline) > .card-header a.active {
+.card-pink.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-pink.card-outline {
+.card-pink.card-tabs.card-outline {
   border-top: 3px solid #e83e8c;
 }
 
-.card-pink.card-outline-tabs > .card-header a:hover {
+.card-pink.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-pink.card-outline-tabs > .card-header a.active {
+.card-pink.card-outline-tabs .card-header a.active {
   border-top: 3px solid #e83e8c;
 }
 
@@ -16843,28 +16843,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-red:not(.card-outline) > .card-header {
+.card-red.card-tabs:not(.card-outline) .card-header {
   background-color: #dc3545;
 }
 
-.card-red:not(.card-outline) > .card-header,
-.card-red:not(.card-outline) > .card-header a {
+.card-red.card-tabs:not(.card-outline) .card-header,
+.card-red.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-red:not(.card-outline) > .card-header a.active {
+.card-red.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-red.card-outline {
+.card-red.card-tabs.card-outline {
   border-top: 3px solid #dc3545;
 }
 
-.card-red.card-outline-tabs > .card-header a:hover {
+.card-red.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-red.card-outline-tabs > .card-header a.active {
+.card-red.card-outline-tabs .card-header a.active {
   border-top: 3px solid #dc3545;
 }
 
@@ -16914,28 +16914,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-orange:not(.card-outline) > .card-header {
+.card-orange.card-tabs:not(.card-outline) .card-header {
   background-color: #fd7e14;
 }
 
-.card-orange:not(.card-outline) > .card-header,
-.card-orange:not(.card-outline) > .card-header a {
+.card-orange.card-tabs:not(.card-outline) .card-header,
+.card-orange.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-orange:not(.card-outline) > .card-header a.active {
+.card-orange.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-orange.card-outline {
+.card-orange.card-tabs.card-outline {
   border-top: 3px solid #fd7e14;
 }
 
-.card-orange.card-outline-tabs > .card-header a:hover {
+.card-orange.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-orange.card-outline-tabs > .card-header a.active {
+.card-orange.card-outline-tabs .card-header a.active {
   border-top: 3px solid #fd7e14;
 }
 
@@ -16985,28 +16985,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-yellow:not(.card-outline) > .card-header {
+.card-yellow.card-tabs:not(.card-outline) .card-header {
   background-color: #ffc107;
 }
 
-.card-yellow:not(.card-outline) > .card-header,
-.card-yellow:not(.card-outline) > .card-header a {
+.card-yellow.card-tabs:not(.card-outline) .card-header,
+.card-yellow.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-yellow:not(.card-outline) > .card-header a.active {
+.card-yellow.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-yellow.card-outline {
+.card-yellow.card-tabs.card-outline {
   border-top: 3px solid #ffc107;
 }
 
-.card-yellow.card-outline-tabs > .card-header a:hover {
+.card-yellow.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-yellow.card-outline-tabs > .card-header a.active {
+.card-yellow.card-outline-tabs .card-header a.active {
   border-top: 3px solid #ffc107;
 }
 
@@ -17056,28 +17056,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-green:not(.card-outline) > .card-header {
+.card-green.card-tabs:not(.card-outline) .card-header {
   background-color: #28a745;
 }
 
-.card-green:not(.card-outline) > .card-header,
-.card-green:not(.card-outline) > .card-header a {
+.card-green.card-tabs:not(.card-outline) .card-header,
+.card-green.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-green:not(.card-outline) > .card-header a.active {
+.card-green.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-green.card-outline {
+.card-green.card-tabs.card-outline {
   border-top: 3px solid #28a745;
 }
 
-.card-green.card-outline-tabs > .card-header a:hover {
+.card-green.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-green.card-outline-tabs > .card-header a.active {
+.card-green.card-outline-tabs .card-header a.active {
   border-top: 3px solid #28a745;
 }
 
@@ -17127,28 +17127,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-teal:not(.card-outline) > .card-header {
+.card-teal.card-tabs:not(.card-outline) .card-header {
   background-color: #20c997;
 }
 
-.card-teal:not(.card-outline) > .card-header,
-.card-teal:not(.card-outline) > .card-header a {
+.card-teal.card-tabs:not(.card-outline) .card-header,
+.card-teal.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-teal:not(.card-outline) > .card-header a.active {
+.card-teal.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-teal.card-outline {
+.card-teal.card-tabs.card-outline {
   border-top: 3px solid #20c997;
 }
 
-.card-teal.card-outline-tabs > .card-header a:hover {
+.card-teal.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-teal.card-outline-tabs > .card-header a.active {
+.card-teal.card-outline-tabs .card-header a.active {
   border-top: 3px solid #20c997;
 }
 
@@ -17198,28 +17198,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-cyan:not(.card-outline) > .card-header {
+.card-cyan.card-tabs:not(.card-outline) .card-header {
   background-color: #17a2b8;
 }
 
-.card-cyan:not(.card-outline) > .card-header,
-.card-cyan:not(.card-outline) > .card-header a {
+.card-cyan.card-tabs:not(.card-outline) .card-header,
+.card-cyan.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-cyan:not(.card-outline) > .card-header a.active {
+.card-cyan.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-cyan.card-outline {
+.card-cyan.card-tabs.card-outline {
   border-top: 3px solid #17a2b8;
 }
 
-.card-cyan.card-outline-tabs > .card-header a:hover {
+.card-cyan.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-cyan.card-outline-tabs > .card-header a.active {
+.card-cyan.card-outline-tabs .card-header a.active {
   border-top: 3px solid #17a2b8;
 }
 
@@ -17269,28 +17269,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-white:not(.card-outline) > .card-header {
+.card-white.card-tabs:not(.card-outline) .card-header {
   background-color: #ffffff;
 }
 
-.card-white:not(.card-outline) > .card-header,
-.card-white:not(.card-outline) > .card-header a {
+.card-white.card-tabs:not(.card-outline) .card-header,
+.card-white.card-tabs:not(.card-outline) .card-header a {
   color: #1F2D3D;
 }
 
-.card-white:not(.card-outline) > .card-header a.active {
+.card-white.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-white.card-outline {
+.card-white.card-tabs.card-outline {
   border-top: 3px solid #ffffff;
 }
 
-.card-white.card-outline-tabs > .card-header a:hover {
+.card-white.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-white.card-outline-tabs > .card-header a.active {
+.card-white.card-outline-tabs .card-header a.active {
   border-top: 3px solid #ffffff;
 }
 
@@ -17340,28 +17340,28 @@ html.maximized-card {
   color: #1F2D3D;
 }
 
-.card-gray:not(.card-outline) > .card-header {
+.card-gray.card-tabs:not(.card-outline) .card-header {
   background-color: #6c757d;
 }
 
-.card-gray:not(.card-outline) > .card-header,
-.card-gray:not(.card-outline) > .card-header a {
+.card-gray.card-tabs:not(.card-outline) .card-header,
+.card-gray.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-gray:not(.card-outline) > .card-header a.active {
+.card-gray.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-gray.card-outline {
+.card-gray.card-tabs.card-outline {
   border-top: 3px solid #6c757d;
 }
 
-.card-gray.card-outline-tabs > .card-header a:hover {
+.card-gray.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-gray.card-outline-tabs > .card-header a.active {
+.card-gray.card-outline-tabs .card-header a.active {
   border-top: 3px solid #6c757d;
 }
 
@@ -17411,28 +17411,28 @@ html.maximized-card {
   color: #ffffff;
 }
 
-.card-gray-dark:not(.card-outline) > .card-header {
+.card-gray-dark.card-tabs:not(.card-outline) .card-header {
   background-color: #343a40;
 }
 
-.card-gray-dark:not(.card-outline) > .card-header,
-.card-gray-dark:not(.card-outline) > .card-header a {
+.card-gray-dark.card-tabs:not(.card-outline) .card-header,
+.card-gray-dark.card-tabs:not(.card-outline) .card-header a {
   color: #ffffff;
 }
 
-.card-gray-dark:not(.card-outline) > .card-header a.active {
+.card-gray-dark.card-tabs:not(.card-outline) .card-header a.active {
   color: #1F2D3D;
 }
 
-.card-gray-dark.card-outline {
+.card-gray-dark.card-tabs.card-outline {
   border-top: 3px solid #343a40;
 }
 
-.card-gray-dark.card-outline-tabs > .card-header a:hover {
+.card-gray-dark.card-outline-tabs .card-header a:hover {
   border-top: 3px solid #dee2e6;
 }
 
-.card-gray-dark.card-outline-tabs > .card-header a.active {
+.card-gray-dark.card-outline-tabs .card-header a.active {
   border-top: 3px solid #343a40;
 }
 

pages/UI/navbar.html

@@ -917,13 +917,13 @@
         <!-- ./row -->
         <div class="row">
           <div class="col-12">
-            <h4>Nav Tabs inside Card Header</h4>
+            <h4>Nav Tabs inside Card Header <small>card-tabs / card-outline-tabs</small></h4>
           </div>
         </div>
         <!-- ./row -->
         <div class="row">
           <div class="col-12 col-sm-6 col-lg-4">
-            <div class="card card-primary">
+            <div class="card card-primary card-tabs">
               <div class="card-header p-0 pt-1">
                 <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                   <li class="nav-item">
@@ -960,7 +960,7 @@
             </div>
           </div>
           <div class="col-12 col-sm-6 col-lg-4">
-            <div class="card card-primary card-outline">
+            <div class="card card-primary card-outline card-tabs">
               <div class="card-header p-0 pt-1 border-bottom-0">
                 <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                   <li class="nav-item">