:root {
  --hostvm-primary: #3884ff;
  --hostvm-primary-hover: #488ef5;
  --hostvm-sidebar-width: 288px;
  --hostvm-sidebar-content-gap: 48px;
  --hostvm-scroll-thumb: rgba(15, 23, 42, 0.28);
  --hostvm-scroll-thumb-hover: rgba(15, 23, 42, 0.38);
  --hostvm-kb-tint-9: 119, 134, 157;
  --hostvm-kb-tint-11: 105, 111, 120;
  --hostvm-kb-tint-12: 28, 29, 31;
  --hostvm-kb-tint-4: 240, 242, 246;
  --hostvm-kb-primary-2: 246, 250, 255;
  --hostvm-kb-primary-9: 56, 132, 255;
  --hostvm-kb-primary-10: 38, 114, 236;
  --hostvm-kb-tint-subtle: 226, 230, 236;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease-in-out;
}

.md-sidebar--primary .md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--hostvm-scroll-thumb) transparent;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 6px;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background: transparent;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px;
  min-height: 40px;
  transition: background-color 0.2s ease-in-out;
}

.md-sidebar--primary .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
  background-color: var(--hostvm-scroll-thumb);
}

.md-sidebar--primary .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--hostvm-scroll-thumb-hover);
}

@media screen and (min-width: 76.25em) {
  [dir="ltr"]
    .md-sidebar--primary:not([hidden])
    ~ .md-content
    > .md-content__inner {
    margin-left: var(--hostvm-sidebar-content-gap);
  }

  [dir="rtl"]
    .md-sidebar--primary:not([hidden])
    ~ .md-content
    > .md-content__inner {
    margin-right: var(--hostvm-sidebar-content-gap);
  }
}

@media (prefers-contrast: more) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    scrollbar-color: var(--hostvm-scroll-thumb) transparent;
  }
}

[data-md-color-scheme="slate"] {
  --hostvm-scroll-thumb: rgba(255, 255, 255, 0.22);
  --hostvm-scroll-thumb-hover: rgba(255, 255, 255, 0.32);
  --hostvm-kb-tint-11: 150, 156, 165;
  --hostvm-kb-tint-12: 236, 237, 238;
  --hostvm-kb-tint-4: 47, 48, 49;
  --hostvm-kb-primary-2: 38, 44, 54;
  --hostvm-kb-primary-9: 91, 156, 255;
  --hostvm-kb-primary-10: 120, 170, 255;
  --hostvm-kb-tint-9: 126, 133, 145;
}

.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__link,
.md-sidebar--primary .md-nav__title,
.md-sidebar--primary .md-nav__link .md-ellipsis {
  font-size: 14px;
  line-height: 20px;
}

.md-sidebar--primary .md-nav__title {
  font-weight: 600;
  color: rgb(var(--hostvm-kb-tint-12));
  padding: 8px 12px 4px;
  margin: 0;
}

.md-sidebar--primary .md-nav__link {
  position: relative;
  font-weight: 400;
  color: color-mix(in oklab, rgb(var(--hostvm-kb-tint-12)) 64%, transparent);
  padding: 6px 10px 6px 12px;
  border-radius: 6px;
  margin: 0;
  gap: 4px;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__link,
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__link[for],
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__link
  .md-ellipsis {
  color: rgb(var(--hostvm-kb-tint-12));
  font-weight: 600;
}

.md-sidebar--primary .md-nav__list {
  gap: 2px;
}

.md-sidebar--primary .md-nav__item {
  margin: 0;
  padding: 0;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list::before,
.md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list::after {
  content: none;
  display: none;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--nested
  > .md-nav
  > .md-nav__list
  > .md-nav__item
  > .md-nav__link {
  padding-inline-start: 12px;
}

[dir="ltr"] .md-sidebar--primary .md-nav__list .md-nav__list,
[dir="rtl"] .md-sidebar--primary .md-nav__list .md-nav__list {
  margin-inline-start: 0;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: none;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav,
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav
  > .md-nav__list {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: none;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav
  > .md-nav__list
  > .md-nav__item {
  padding-inline-start: 0;
  margin-inline-start: 0;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav
  > .md-nav__list
  > .md-nav__item
  > .md-nav__link {
  padding-inline-start: 12px;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav {
  margin-inline-start: 21px;
  padding-inline-start: 0;
  padding-block-start: 6px;
  border-inline-start: 1px solid color-mix(in srgb, rgb(var(--hostvm-kb-tint-12)) 14%, transparent);
}

.md-sidebar--primary .md-nav__toggle:not(:checked) ~ .md-nav {
  padding-block-start: 0;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--nested
  > .md-nav
  > .md-nav__list
  > .md-nav__item
  > .md-nav__link,
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--nested
  .md-nav__item--nested
  > .md-nav
  > .md-nav__list
  > .md-nav__item
  > .md-nav__link {
  padding-inline-start: 12px !important;
}

@media screen and (min-width: 59.9375em) {
  .md-sidebar--primary {
    width: var(--hostvm-sidebar-width) !important;
    flex: 0 0 var(--hostvm-sidebar-width) !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    width: var(--hostvm-sidebar-width);
  }
}

/* Drawer is pulled off-screen by 12.1rem, while the sidebar above is 288px.
   The difference stays visible and covers the start of the page. */
@media screen and (min-width: 59.9375em) and (max-width: 76.234375em) {
  [dir="ltr"] .md-sidebar--primary {
    left: calc(var(--hostvm-sidebar-width) * -1);
  }

  [dir="rtl"] .md-sidebar--primary {
    right: calc(var(--hostvm-sidebar-width) * -1);
  }

  [dir="ltr"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(calc(var(--hostvm-sidebar-width) + 0.4rem));
  }

  [dir="rtl"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(calc((var(--hostvm-sidebar-width) + 0.4rem) * -1));
  }
}

@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    overflow-y: auto;
  }
}

.md-sidebar--primary .md-nav__link .md-nav__icon {
  color: inherit;
  font-size: 16px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.md-sidebar--primary .md-nav--primary .md-nav__link[href]:hover:not(.md-nav__link--active),
.md-sidebar--primary .md-nav--primary .md-nav__link[for]:hover:not(.md-nav__link--active),
.md-sidebar--primary .md-nav--primary .md-nav__link[href]:focus-visible:not(.md-nav__link--active),
.md-sidebar--primary .md-nav--primary .md-nav__link[for]:focus-visible:not(.md-nav__link--active) {
  background-color: rgb(var(--hostvm-kb-tint-4));
  color: rgb(var(--hostvm-kb-tint-12));
}

.md-sidebar--primary .md-nav--primary .md-nav__item .md-nav__link--active {
  background-color: transparent;
  color: rgb(var(--hostvm-kb-primary-9));
  font-weight: 600;
}

.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__link.md-nav__link--active,
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__link.md-nav__link--active
  .md-ellipsis {
  color: rgb(var(--hostvm-kb-tint-12));
  font-weight: 600;
}

.md-sidebar--primary a.md-nav__link--active[href]::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 1px;
  background-color: rgb(var(--hostvm-kb-primary-9));
}

.md-sidebar--primary .md-nav__item > .md-nav__container > a.md-nav__link--active[href]::before {
  content: none;
}

.md-sidebar--primary .md-nav__link[for]::before,
.md-sidebar--primary .md-nav__container::before {
  content: none;
}

.md-sidebar--primary
  .md-nav__item
  > .md-nav__container:has(> a.md-nav__link--active)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 1px;
  background-color: rgb(var(--hostvm-kb-primary-9));
}

.md-sidebar--primary .md-nav__item > .md-nav__container {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 6px 28px 6px 12px;
  min-height: 0;
  border-radius: 6px;
  overflow: visible;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.md-sidebar--primary .md-nav__item > .md-nav__container > .md-nav__link[href] {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline: 0;
  padding: 0 !important;
  border-radius: 0;
  background-color: transparent;
}

.md-sidebar--primary .md-nav__item > .md-nav__container > .md-nav__link[for] {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  flex: none;
  width: 28px;
  min-width: 28px;
  padding: 6px 4px !important;
  margin-inline: 0;
  border-radius: 0;
  background-color: transparent;
  justify-content: center;
  color: color-mix(in oklab, rgb(var(--hostvm-kb-tint-12)) 64%, transparent);
}

.md-sidebar--primary
  .md-nav__item
  > .md-nav__container
  > .md-nav__link[for].md-nav__link--active {
  color: rgb(var(--hostvm-kb-primary-9));
}

.md-sidebar--primary .md-nav__item > .md-nav__container:hover,
.md-sidebar--primary .md-nav__item > .md-nav__container:has(.md-nav__link:hover),
.md-sidebar--primary .md-nav__item > .md-nav__container:has(.md-nav__link:focus-visible) {
  background-color: rgb(var(--hostvm-kb-tint-4));
  color: rgb(var(--hostvm-kb-tint-12));
}

.md-sidebar--primary .md-nav__item > .md-nav__container:hover > .md-nav__link,
.md-sidebar--primary
  .md-nav__item
  > .md-nav__container:has(.md-nav__link:hover)
  > .md-nav__link,
.md-sidebar--primary
  .md-nav__item
  > .md-nav__container:has(.md-nav__link:focus-visible)
  > .md-nav__link {
  background-color: transparent !important;
}

.md-sidebar--primary .md-nav__item > .md-nav__container:has(.md-nav__link--active) {
  background: transparent;
  color: inherit;
}

.md-sidebar--primary
  .md-nav__item
  > .md-nav__container
  .md-nav__link--active {
  background: transparent !important;
  color: rgb(var(--hostvm-kb-primary-9));
  font-weight: 600;
}