#kapa-widget-container {
  z-index: 10000 !important;
  position: absolute !important;
}

.mantine-Modal-root {
  z-index: 10000;
  position: absolute;
}

#kapa-widget-container figure {
  padding: 0 !important;
}

.mantine-Modal-root figure {
  padding: 0 !important;
}

/* RTD Flyout */
.rst-versions {
    z-index: 10001 !important; /* Set to 10001 to avoid overlap with kapa */
}


html[data-theme="light"] {
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #4c4c4d;
  --logo-text-color: #0E2E65;
}

html[data-theme="dark"] {
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #d8d8d8;
  --logo-text-color: #D8D8D8;
  
  .bd-sidebar::-webkit-scrollbar {
    width: 6px;
    background-color: #2e2e2e;
  }

  .bd-sidebar::-webkit-scrollbar-thumb {
    background-color: #565656;
    border-radius: 6px;
  }

  .bd-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #6f6f6f;
  }

  /* Common hidden scrollbar when not hovered */
  .bd-sidebar:not(:hover) {
    -ms-overflow-style: none;
  }

  .bd-sidebar:not(:hover)::-webkit-scrollbar {
    background: var(--pst-color-background);
  }

  .bd-sidebar:not(:hover)::-webkit-scrollbar-thumb {
    background: var(--pst-color-background);
  }
}

/* Light mode scrollbar styles */
.bd-sidebar::-webkit-scrollbar {
  width: 6px;
  background-color: #f0f0f0;
}

.bd-sidebar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  /* rounded corners */
  border-radius: 6px;
}

.bd-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* Common hidden scrollbar when not hovered */
.bd-sidebar:not(:hover) {
  -ms-overflow-style: none;
}

.bd-sidebar:not(:hover)::-webkit-scrollbar {
  background: var(--pst-color-background);
}

.bd-sidebar:not(:hover)::-webkit-scrollbar-thumb {
  background: var(--pst-color-background);
}

/* Avoid the border of the search box when click on it */
.form-control:focus,:focus-visible {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: var(--pst-color-background);
  color: var(--pst-color-text-muted);
}

/* Display a "New" icon for new items (custom.js) */
.new-item::after {
    content: "New";
    display: inline-block;
    color: white; /* Keeps the text color white for contrast */
    font-size: 12px; /* Adjusted for a smaller font size */

    background-color: #0d6efd; /* Bootstrap's 'primary' blue color for Bootstrap 5 */

    border-radius: 2px;
    margin: 0px 0px 0px 4px;
    padding: 2px 5px; /* Reduced padding for a more compact label */
    margin-left: 6px; /* Space between the text and the label */

    vertical-align: text-bottom;
    line-height: 1; /* Adjust line height to ensure vertical alignment */
}

.navbar {
  --bs-navbar-nav-link-padding-x: 1rem;
}

.navbar-brand.logo>svg {
  width: 120px;
}

.navbar-brand.logo>svg .cls-6 {
  fill: var(--pst-color-text-base);
}
/*********************************************
* Footer - content *
*********************************************/
.footer {
  font-size: var(--sbt-font-size-small-1);

  &.bd-footer-content {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    border-top: 1px solid #ccc;
    font-size: 85%;

    .bd-footer-content__inner {
      padding-left: 0px;

      p {
        margin-bottom: 0px;
      }
    }
  }
}


.bd-header .navbar-nav li a.nav-link:hover {
  text-decoration: none;
}

/* Add transparent underline for the other tabs that are not active to avoid
active tab to be moved up. */
.nav-link {
  border-bottom: none;
}

.bd-header .navbar-nav>.current>.nav-link {
  border-bottom: none;
}

/* Assuming your breakpoints are defined in pixels */
@media (min-width: 959.98px) {

  .bd-sidebar-primary {
    width: 20% !important;
  }
}