.nav {
  --x-nav-link-padding-x: 1rem;
  --x-nav-link-padding-y: 0.5rem;
  --x-nav-link-font-size: 0.875rem;
  --x-nav-link-font-weight: 500;
  --x-nav-link-color: #4F5771;
  --x-nav-link-hover-color: #394475;
  --x-nav-link-disabled-color: #9DA4B1;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--x-nav-link-padding-y) var(--x-nav-link-padding-x);
  font-size: var(--x-nav-link-font-size);
  font-weight: var(--x-nav-link-font-weight);
  color: var(--x-nav-link-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--x-nav-link-hover-color);
}
.nav-link.disabled {
  color: var(--x-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  --x-nav-tabs-border-width: 1px;
  --x-nav-tabs-border-color: #D3D8E0;
  --x-nav-tabs-border-radius: 0;
  --x-nav-tabs-link-hover-border-color: transparent transparent transparent;
  --x-nav-tabs-link-active-color: #394475;
  --x-nav-tabs-link-active-bg: transparent;
  --x-nav-tabs-link-active-border-color: transparent transparent #394475;
  border-bottom: var(--x-nav-tabs-border-width) solid var(--x-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--x-nav-tabs-border-width));
  background: none;
  border: var(--x-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--x-nav-tabs-border-radius);
  border-top-right-radius: var(--x-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--x-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
  color: var(--x-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--x-nav-tabs-link-active-color);
  background-color: var(--x-nav-tabs-link-active-bg);
  border-color: var(--x-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--x-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills {
  --x-nav-pills-border-radius: 0.375rem;
  --x-nav-pills-link-active-color: #FFFFFF;
  --x-nav-pills-link-active-bg: #394475;
}
.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: var(--x-nav-pills-border-radius);
}
.nav-pills .nav-link:disabled {
  color: var(--x-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--x-nav-pills-link-active-color);
  background-color: var(--x-nav-pills-link-active-bg);
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

@media (min-width: 992px) {
  .nav-link-badge {
    position: relative;
  }
  .nav-link-badge .badge {
    position: relative;
    top: -15px;
    left: -5px;
  }
  .nav-link-badge .nav-link-text {
    position: relative;
  }
  .nav-link-badge .nav-link-text:before {
    position: absolute;
    top: 0;
    left: -7px;
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    content: "";
    transform: translate(-50%, -50%) rotate(100deg);
    border-left: 1px dashed #fff;
    border-radius: 10px;
  }
}
.nav.overflow-x {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
}
.nav.overflow-x .nav-item {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}
.nav.overflow-x::-webkit-scrollbar {
  display: none;
}

.nav-header {
  border-bottom-width: 0;
}

.nav-dots {
  top: 50%;
  right: 2rem;
  position: fixed;
  z-index: 200;
  transform: translateY(-50%);
}
.nav-dots .nav-link {
  display: block;
  margin: 5px;
  position: relative;
}
.nav-dots .nav-link:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 6px;
  width: 6px;
  border: 0;
  background: #FFFFFF;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease-in-out;
}
.nav-dots .nav-link:hover:before, .nav-dots .nav-link.active:before {
  height: 12px;
  width: 12px;
}

.nav-menu .nav-link {
  padding: 0.35rem 0;
}
.nav-menu .nav-link:not(.active):hover {
  color: #36405F;
}
.nav-menu .nav-link:not(.active).active {
  font-weight: bolder;
}

.nav-tabs .nav-item {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.nav-tabs .nav-item:first-child {
  margin-left: 0;
}
.nav-tabs .nav-item:last-child {
  margin-right: 0;
}
.nav-tabs .nav-item.show .nav-link {
  border-color: transparent;
}
.nav-tabs .nav-link {
  padding: 1.25rem 0;
  border-bottom: 1px solid transparent;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
}