/* Setup some colors */
:root {
    --tabs-blue: #1572c2;
    --tabs-light: #c3c9cf;
    --tabs-grey: #6a7888;
    --tabs-border: #cdddee;
    --tabs-scroll-bg: #ebeef2;
    --tabs-white: #ffffff;
  }
  /* Override Bootstrap default tab styles */
  .nav-tabs {
    border-bottom: 1px solid var(--tabs-border) !important;
  }
  .nav-tabs-nowrap {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .nav-tabs .nav-item .nav-link {
    display: flex;
    align-items: center;
  }
  
  /* Style for individual tabs */
  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    border: none;
    box-shadow: inset 0 -3px 0 0 var(--tabs-blue) !important; /* This sets the blue bottom border for the active tab */
    background-color: var(
      --tabs-white
    ); /* This sets the background color for the active tab */
    border-radius: 0 !important; /* This removes the border-radius */
    color: var(--tabs-blue) !important;
    position: relative;
  }
  
  /* Style for non-active tabs */
  .nav-tabs .nav-link {
    border: 1px solid var(--tabs-border) !important;
    color: var(--tabs-grey); /* This sets the text color for the inactive tabs */
    border-radius: 0 !important; /* This ensures no border radius for a flat design */
    padding: 0.5rem 1rem;
    margin-right: -1px;
    text-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  
  .nav-tabs .nav-item .nav-link:not(.active) {
    .badge {
      background-color: #6A7888 !important;
    }
  
    span:not(.badge, .close-tab) {
      color: #556271 !important;
    }
  }
  
  /* Style for the hover effect */
  .nav-tabs .nav-link:hover {
    border: none;
    background-color: var(
      --tabs-white
    ); /* This changes the background color when hovering */
  }
  
  /* Adding the 'x' button to the tab */
  .nav-tabs .nav-link .close-tab {
    font-size: 0.8rem;
    color: var(--tabs-light);
    margin-left: 0.5rem;
    display: inline !important;
  }
  
  /* Style adjustments for the 'x' button */
  .nav-tabs .nav-link .close-tab:hover {
    color: var(--tabs-grey);
    cursor: pointer;
  }
  .nav-tabs .nav-scroll {
    position: absolute;
    top: calc(50% - 0.75rem);
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tabs-scroll-bg);
    color: var(--tabs-grey);
    cursor: pointer;
    border: 1px solid var(--tabs-border);
    border-radius: 100%;
    z-index: 1;
  }
  .nav-tabs .nav-scroll-right {
    right: 5px;
  }
  .nav-tabs .nav-scroll-left {
    margin-left: 5px;
  }
  .nav-tabs .tabs-sticky {
    position: sticky;
    -webkit-position: sticky;
    left: 0;
    right: 0;
    z-index: 2;
  }
  .nav-tabs .tabs-start {
    background-color: var(--tabs-white);
  }
  /* add margin right to the last li element to hide safely the right scroll button */
  .nav-tabs li.nav-item:last-of-type {
    margin-right: 2rem;
  }
  .flat-tabs .h-tab {
    height: calc(100% - 42px) !important;
  }
  .dd-ml {
    margin-left: 2rem;
  }