/* ============================================================
       DESIGN SYSTEM OVERRIDES FOR BOOTSTRAP 5.3
       ============================================================ */
    :root {
      /* ========== FONT STACK ========== */
      --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;

      /* ========== REFINED HARMONY: BALANCED VIBRANCY ========== */
      
      /* Primary: Deep, saturated Purple */
      --brand-primary: #7a36d6;
      --brand-primary-hover: #7d0fb8;
      --brand-primary-active: #6609a0;
      --brand-primary-light: #ae7cd1;



      /* Accent: Perfectly tuned Magenta */
      --brand-accent: #e63aa9;
      --brand-accent-hover: #e83eb0;
      --brand-accent-active: #c82e98;
      --brand-accent-light: #dc75b7;

      /* Info: Vivid Sky Blue */
      --brand-info: #1fa7da;
      --brand-info-hover: #2196c7;
      --brand-info-active: #1a82b0;

      /* Success: "Electric" Emerald */
      --brand-success: #10b981;
      --brand-success-hover: #059669;
      --brand-success-active: #047857;

      /* Danger: True Red */
      --brand-danger: #f43f5e;
      --brand-danger-hover: #e11d48;
      --brand-danger-active: #be123c;

      /* Warning: Premium Amber */
      --brand-warning: #d67a36;
      --brand-warning-hover: #d97706;
      --brand-warning-active: #b45309;

    /* ========== BRAND RGB ========== */
      --brand-primary-rgb: 122, 54, 214;
      --brand-accent-rgb: 255, 79, 193;
      --brand-info-rgb: 31, 167, 218;
      --brand-success-rgb: 16, 185, 129;
      --brand-danger-rgb: 244, 63, 94;
      --brand-warning-rgb: 245, 158, 11;

      /* ========== NEUTRAL COLOR PALETTE ========== */
      /* Shifted to a "Slate" base for a more premium look */
      
      /* Text Colors */
      --text-primary: #0f172a;
      --text-secondary: #64748b;
      --text-tertiary: #94a3b8;

      --text-heading: #3a4153;


      /* Background Colors */
      --bg-primary: #ffffff;
      --bg-secondary: #e9edf1;
      --bg-tertiary: #f3f4f6;

      /* Border Colors */
      --border-color: #e2e8f0;

      /* ========== BOOTSTRAP Bg colors ========== */

      --brand-body-bg: #f8fafc;
      --brand-body-color: #0f172a;
      --brand-border-color: #e2e8f0;
      --brand-secondary-bg: #f1f5f9;
      --brand-secondary-color: #babbbd;
      --brand-tertiary-bg: #e89ce7;

    }

    html[data-bs-theme='dark'] {
      /* ========== TEXT COLORS (Dark Mode) ========== */
      --text-primary: #d9d9d9 ;
      --text-secondary: #94a3b8;
      --text-tertiary: #cbd5e1;

      --text-heading: #ebeff2;

      /* ========== BACKGROUND COLORS (Dark Mode) ========== */
      --bg-primary: #272b32;      /* cards */
      --bg-secondary: #202329;    /* background */
      --bg-tertiary: #2b3039;     /* header */
      
      /* ========== BORDER COLORS (Dark Mode) ========== */
      --border-color: #1e293b;


      /* ========== HEX COLORS (Dark Mode) ========== */
      --brand-primary: #905cd9;
      --brand-primary-light: #b781dd;


      --brand-accent-light: #f065c0;

      --brand-success: #25ab7a;
      --brand-success-hover: #6ee7b7;
      --brand-success-active: #10b981;

      --brand-info: #2897c1;
      --brand-info-hover: #5fc9ec;
      --brand-info-active: #34b1e0;

      --brand-danger: #f24764;
      --brand-danger-hover: #ff6476;
      --brand-danger-active: #f43f5e;

      --brand-warning: #d67a36;
      --brand-warning-hover: #fcd34d;
      --brand-warning-active: #f59e0b;

      /* ========== RGB (Dark Mode) ========== */
      --brand-primary-rgb: 153, 99, 228;
      --brand-success-rgb: 37, 171, 122;
      --brand-info-rgb: 40, 151, 193;
      --brand-danger-rgb: 242, 71, 100;
      --brand-warning-rgb: 251, 191, 36;

      

      /* ========== BOOTSTRAP DARK MODE MAPPINGS ========== */
      --brand-body-bg: #32353f; /*for inputs bg*/
      --brand-body-color: #f8fafc;
      --brand-secondary-color: #94a3b8;
      --brand-border-color: #1e293b;
      --brand-secondary-bg: #0f172a;
      --brand-tertiary-bg: #b2195e;

    }



    :root {


      /* ========== BOOTSTRAP SEMANTIC MAPPINGS ========== */
      --bs-primary: var(--brand-primary);
      --bs-success: var(--brand-success);
      --bs-danger: var(--brand-danger);
      --bs-info: var(--brand-info);
      --bs-warning: var(--brand-warning);

      --bs-primary-rgb: var(--brand-primary-rgb);
      --bs-success-rgb: var(--brand-success-rgb);
      --bs-danger-rgb: var(--brand-danger-rgb);
      --bs-info-rgb: var(--brand-info-rgb);
      --bs-warning-rgb: var(--brand-warning-rgb);


      --bs-body-bg: var(--brand-body-bg);
      --bs-body-color: var(--brand-body-color);
      --bs-secondary-color: var(--brand-secondary-color);
      --bs-border-color: var(--brand-border-color);
      --bs-secondary-bg: var(--brand-secondary-bg);

      --bs-tertiary-bg: var(--brand-tertiary-bg);

      
      --bs-link-color: var(--brand-info);
      --bs-link-hover-color: var(--brand-info-hover);
      --bs-navbar-active-color: var(--brand-primary);

      --bs-light:var(--brand-accent);

      
      --bs-body-color:var(--text-primary);
      --bs-heading-color:var(--text-heading);

      

      

    }


    body {
      background-color: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }

    
    html[data-bs-theme='dark'] body {
      background-color: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }


    .offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxls {
      --bs-offcanvas-bg: var(--bg-tertiary);
    }
    

    .form-control, .form-select{
      --bs-body-bg: var(--brand-body-bg)
    }

    .form-check-input{
      --bs-form-check-bg: var(--brand-body-bg)
    }

    .nav-pills{
      --bs-nav-pills-link-active-bg: rgba(var(--brand-primary-rgb), 0.5);
    }
  


    /* ========== BOOTSTRAP BACKGROUND COLOR OVERRIDES ========== */
    /* Ensure all Bootstrap bg-* classes respect CSS variables */
    
    .bg-primary {
      background-color: var(--brand-primary) !important;
    }

    /*
    .bg-secondary {
      background-color: var(--bg-secondary) !important;
    }

    .bg-tertiary {
      background-color: var(--bg-tertiary) !important;
    }

    .bg-secondary-subtle {
      background-color: var(--bg-secondary) !important;
    }*/

    .bg-success {
      background-color: var(--brand-success) !important;
    }

    .bg-danger {
      background-color: var(--brand-danger) !important;
    }

    .bg-warning {
      background-color: var(--brand-warning) !important;
    }

    .bg-info {
      background-color: var(--brand-info) !important;
    }

    .bg-light {
      background-color: var(--bg-tertiary) !important;
    }

    html[data-bs-theme='dark'] .bg-light {
      background-color: var(--bg-tertiary) !important;
    }

    .bg-dark {
      background-color: var(--text-primary) !important;
    }

    .bg-white {
      background-color: var(--bg-primary) !important;
    }

    .bg-body {
      background-color: var(--bg-primary) !important;
    }

    html[data-bs-theme='dark'] .bg-body {
      background-color: var(--bg-primary) !important;
    }


    .bg-body-secondary {
      background-color: var(--bg-secondary) !important;
    }

    html[data-bs-theme='dark'] .bg-body-secondary {
      background-color: var(--bg-secondary) !important;
    }

    .bg-body-tertiary {
      background-color: var(--bg-tertiary) !important;
    }

    html[data-bs-theme='dark'] .bg-body-tertiary {
      background-color: var(--bg-tertiary) !important;
    }

    /* ========== TEXT COLOR OVERRIDES ========== */
    .text-primary {
      color: var(--brand-primary) !important;
    }

    .text-primary-light {
      color: var(--brand-primary-light) !important;
    }

    .text-accent {
      color: var(--brand-accent) !important;
    }

    .text-accent-light {
      color: var(--brand-accent-light) !important;
    }

    .text-secondary {
      color: var(--text-secondary) !important;
    }

    .text-success {
      color: var(--brand-success) !important;
    }

    .text-danger {
      color: var(--brand-danger) !important;
    }

    .text-warning {
      color: var(--brand-warning) !important;
    }

    .text-info {
      color: var(--brand-info) !important;
    }

    .text-light {
      color: var(--text-tertiary) !important;
    }

    .text-dark {
      color: var(--text-primary) !important;
    }

    .text-white {
      color: #fff !important;
    }

    .text-body {
      color: var(--text-primary) !important;
    }

    .text-muted {
      color: var(--text-secondary) !important;
    }

    html[data-bs-theme='dark'] .text-muted {
      color: var(--text-secondary) !important;
    }

    /* ========== BORDER COLOR OVERRIDES ========== */
    .border-primary {
      border-color: var(--brand-primary) !important;
    }

    .border-secondary {
      border-color: var(--text-secondary) !important;
    }

    .border-success {
      border-color: var(--brand-success) !important;
    }

    .border-danger {
      border-color: var(--brand-danger) !important;
    }

    .border-warning {
      border-color: var(--brand-warning) !important;
    }

    .border-info {
      border-color: var(--brand-info) !important;
    }

    .border-light {
      border-color: var(--border-color) !important;
    }

    .border-dark {
      border-color: var(--text-primary) !important;
    }

    .border-white {
      border-color: var(--bg-primary) !important;
    }

    /* TYPOGRAPHY */
    body {
      font-family: 'Inter', sans-serif;
     
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .subtitle {
      max-width: 640px;
      margin-inline: auto;
      color: var(--text-secondary);
      font-size: 1rem;
    }

    /* SECTIONS */
    .section {
      margin-bottom: 5rem;
    }

    .section-title {
      font-size: 1.5rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 2rem;
      color: var(--bs-body-color);
    }

    .section-title::before {
      content: '';
      width: 3px;
      height: 24px;
      background: linear-gradient(180deg, var(--brand-primary), var(--brand-info));
      border-radius: 1px;
      flex-shrink: 0;
    }

    .section-description {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }

    /* CARDS */
    .card {
      border-radius: 0.5rem;
      border: 1px solid var(--bs-border-color);
      background-color: var(--bg-primary);
      color: var(--text-primary);
    }

    .card-tertiary {
      border-radius: 0.5rem;
      border: 1px solid var(--bs-border-color);
      background-color: var(--bg-tertiary);
      color: var(--text-primary);
    }

    /*
    .card:hover {
      border-color: var(--brand-primary);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    }
      */

    .card-title {
      font-weight: 600;
      color: var(--bs-body-color);
      font-size: 0.95rem;
    }



    /* ADDITIONAL BGS */

    .bg-primary-gradient {
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-info));
    }

    .bg-accent { background: var(--brand-accent); }


    /* BUTTONS */
    .btn {
      font-weight: 500;
      font-size: 0.875rem;
      transition: all 0.15s ease;
    }

    .btn-primary {
      background-color: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
    }

    .btn-primary:hover {
      background-color: var(--brand-primary-hover) !important;
      border-color: var(--brand-primary-hover) !important;
    }

    .btn-primary:active,
    .btn-primary.active {
      background-color: var(--brand-primary-active) !important;
      border-color: var(--brand-primary-active) !important;
    }

    .btn-outline-primary {
      color: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
    }

    .btn-outline-primary:hover {
      background-color: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
    }

    .btn-accent {
      background-color: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
    }

    .btn-accent:hover {
      background-color: var(--brand-accent-hover) !important;
      border-color: var(--brand-accent-hover) !important;
    }

    .btn-info {
      background-color: var(--brand-info) !important;
      border-color: var(--brand-info) !important;
      color: #fff !important;
    }

    .btn-info:hover {
      background-color: var(--brand-info-hover) !important;
      border-color: var(--brand-info-hover) !important;
    }

    .btn-success {
      background-color: var(--brand-success) !important;
      border-color: var(--brand-success) !important;
      color: #fff !important;
    }

    .btn-success:hover {
      background-color: var(--brand-success-hover) !important;
      border-color: var(--brand-success-hover) !important;
    }

    .btn-outline-success {
      color: var(--brand-success) !important;
      border-color: var(--brand-success) !important;
    }

    .btn-outline-success:hover {
      background-color: var(--brand-success) !important;
      border-color: var(--brand-success) !important;
      color: #fff !important;
    }

    .btn-danger {
      background-color: var(--brand-danger) !important;
      border-color: var(--brand-danger) !important;
      color: #fff !important;
    }

    .btn-danger:hover {
      background-color: var(--brand-danger-hover) !important;
      border-color: var(--brand-danger-hover) !important;
    }

    .btn-ghost {
      color: var(--text-secondary) !important;
      background: transparent !important;
      border: 1px solid var(--border-color) !important;
      padding: 0.5rem 1rem !important;
      transition: all 0.15s ease;
      font-weight: 500;
    }

    .btn-ghost:hover {
      color: var(--brand-primary) !important;
      background: var(--bg-secondary) !important;
      border-color: var(--brand-primary) !important;
    }

    html[data-bs-theme='dark'] .btn-ghost:hover {
      background: var(--bg-tertiary) !important;
    }

    .btn-ghost:active {
      color: var(--brand-primary-hover) !important;
      background: rgba(var(--brand-primary-rgb), 0.1) !important;
      border-color: var(--brand-primary-hover) !important;
    }

    /* HIGHLIGHT CLASS */
    .highlight {
      background: rgba(var(--brand-primary-rgb), 0.1);
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      color: var(--brand-primary);
      font-weight: 600;
    }

    html[data-bs-theme='dark'] .highlight {
      background: rgba(var(--brand-primary-rgb), 0.15);
      color: var(--brand-primary);
    }

    .btn-sm {
      padding: 0.375rem 0.75rem;
      font-size: 0.8125rem;
    }

    /* PILLS */
    .btn-pill {
      border-radius: 999px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary) !important;
      transition: all 0.2s ease;
    }

    .btn-pill:hover {
      border-color: var(--brand-primary-hover);
      background: rgba(var(--brand-primary-rgb), 0.08);
      color: var(--brand-primary) !important;
    }

    .btn-pill.active {
      background: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
    }

    .btn-pill.active::before {
      content: '✓ ';
      font-weight: 700;
    }

    /* TABS */
    .nav-tabs {
      border-bottom: 2px solid var(--bs-border-color);
      background: var(--bg-secondary);
      border-radius: 0.5rem 0.5rem 0 0;
    }

    html[data-bs-theme='dark'] .nav-tabs {
      background: var(--bg-secondary);
    }

    .nav-tabs .nav-link {
      color: var(--text-secondary);
      font-weight: 500;
      border: none;
      border-bottom: 3px solid transparent;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .nav-tabs .nav-link i {
      font-size: 1.1rem;
      display: inline-block;
      width: 1.2rem;
      text-align: center;
      color: inherit;
    }

    .nav-tabs .nav-link:hover {
      color: var(--brand-primary-hover);
      background: rgba(var(--brand-primary-rgb), 0.08);
    }

    .nav-tabs .nav-link.active {
      color: var(--brand-primary);
      background: var(--bg-primary);
      border-bottom: 3px solid var(--brand-primary);
    }

    .nav-tabs .nav-link.active i {
      color: var(--brand-primary);
    }

    .tab-content {
      border: 1px solid var(--border-color);
      border-top: none;
      border-radius: 0 0 0.5rem 0.5rem;
      background: var(--bg-primary);
    }

    .tab-pane {
      padding: 1rem;
      color: var(--text-secondary);
    }

    html[data-bs-theme='dark'] .tab-pane {
      color: var(--text-secondary);
    }

    html[data-bs-theme='dark'] .tab-content {
      background: var(--bg-primary);
    }

    /* ========== SIDEBAR NAVIGATION ========== */
    .sidebar {
      user-select: none;
 
      background: linear-gradient(180deg, var(--bg-tertiary) 10%, var(--bg-secondary) 190%);
      /*border-right: 1px solid var(--border-color);*/
      
    }

    .topnav {
      background-color: var(--bg-tertiary);
    }

    html[data-bs-theme='dark'] .sidebar {
      background-color: var(--bg-tertiary);
      border-right-color: var(--border-color);
    }

    html[data-bs-theme='dark'] .topnav {
      background-color: var(--bg-tertiary);
    }

    .sidebar-header {
      margin-bottom: 32px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--border-color);
    }

    .sidebar-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-info));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .nav-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .nav-section-title {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-tertiary);
      padding: 0 8px;
      margin-bottom: 4px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      color: var(--text-secondary);
      text-decoration: none;
      border-radius: 0px;
      /*transition: all 0.2s ease;*/
      font-weight: 500;
      font-size: 0.95rem;
      border-left: 3px solid transparent;
    }

    .nav-link i {
      width: 20px;
      text-align: center;
      font-size: 1rem;
      transition: all 0.2s ease;
    }

    .nav-link:hover {
      color: var(--brand-primary);
      background-color: rgba(var(--brand-primary-rgb), 0.08);
    }

    .nav-link.active {
      color: var(--brand-primary);
      background-color: rgba(var(--brand-primary-rgb), 0.12);
      /*border-left-color: var(--brand-primary);*/
      font-weight: 600;
    }

    html[data-bs-theme='dark'] .nav-link:hover {
      color: var(--text-white);
      background-color: rgba(var(--brand-primary-rgb), 0.15);
    }

    html[data-bs-theme='dark'] .nav-link.active {
      color: var(--text-white);
      background-color: rgba(var(--brand-primary-rgb), 0.2);
    }

    html[data-bs-theme='dark'] .nav .nav-item .nav-link.active{
      color: var(--text-white);
    }

    .main-content {
      margin-left: 260px;
      flex: 1;
      transition: all 0.2s ease;
    }

    /* THEME TOGGLE */
    .theme-toggle {
      position: fixed;
      top: 24px;
      right: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      border-radius: 6px;
      z-index: 1000;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .theme-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-tertiary);
    }

    .toggle-switch {
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: var(--bs-border-color);
      border: none;
      position: relative;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    html[data-bs-theme='dark'] .toggle-switch {
      background: var(--brand-primary);
    }

    .toggle-switch::after {
      content: '';
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 2px;
      transition: left 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .toggle-switch.active::after {
      left: 22px;
    }

    /* UTILITY CLASSES */
    .border-gradient {
      border-left: 4px solid var(--brand-primary);
    }

    .text-muted-dark {
      color: var(--text-secondary);
    }

    .bg-hover {
      background: rgba(var(--brand-primary-rgb), 0.08);
    }

    /* TABLE STYLING */
    .table {
      background-color: var(--bg-primary);
      color: var(--text-primary);
    }

    .table thead {
      border-bottom: 2px solid var(--bs-border-color);
      background-color: var(--bg-secondary);
    }

    .table thead th {
      color: var(--text-secondary);
      font-weight: 600;
      font-size: 0.85rem;
      /*text-transform: uppercase;*/
      letter-spacing: 0.3px;
      padding: 0.75rem 1rem;
      border: none;
    }

    .table tbody td, .table tbody th {
      color: var(--text-secondary);
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--bs-border-color);
      vertical-align: middle;
    }

    .table tbody tr:last-child td, .table tbody tr:last-child th {
      border-bottom: none;
    }

    .table tbody tr:hover {
      background-color: var(--bg-secondary);
    }

    .table-light {
      background-color: var(--bg-secondary) !important;
    }

    html[data-bs-theme='dark'] .table-light {
      background-color: var(--bg-secondary) !important;
    }

    .table code {
      background-color: var(--bg-secondary);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      color: var(--brand-primary);
      font-family: 'Courier New', monospace;
      font-weight: 600;
    }

    html[data-bs-theme='dark'] .table code {
      background-color: var(--bg-tertiary);
      color: var(--brand-primary);
    }

    

    @media (max-width: 768px) {
      .section-title {
        font-size: 1.25rem;
      }

      .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .btn-group-mobile .btn {
        width: 100%;
      }


      .main-content {
        margin-left: 200px;
      }

      .sidebar-title {
        font-size: 1rem;
      }

      .nav-link {
        font-size: 0.9rem;
        padding: 8px 10px;
      }

      .nav-section {
        gap: 6px;
      }

      .nav-section-title {
        font-size: 0.7rem;
      }
    }




    /* OTHER OVERRIDES */


    /* table pagination */
    .active>.page-link, .page-link.active {
      --bs-pagination-active-bg: var(--brand-primary);
      --bs-pagination-active-border-color: var(--brand-primary);
    }

    /* navbar focus*/
    .navbar-nav {
      --bs-nav-link-hover-color: var(--brand-primary);
    }

    .nav-link:focus{
      color: var(--brand-primary);
      background: rgba(var(--brand-primary-rgb), 0.1);
    }


    /*
    *Nav Bar underline
    */
    /* add bold font style and border bottom to active li elements */
    .nav-link.active > a.active { 
      border-bottom: 3px solid var(--brand-primary);; 
      border-radius: 0px
    }


    html[data-bs-theme='dark'] .nav-link:focus{
      color: var(--brand-primary-light)
    }

    .form-check-input:checked {
        background-color:var(--brand-primary);
        border-color: var(--brand-primary);
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control:before{
      background-color:var(--brand-primary);
    }