.nav-container {
  font-size: 14px;
}

.nav {
  height: calc(100vh - 46px);
  top: 46px;
  background: #F7FBFF;
  box-shadow:
      1px 0 0 #D8E1ED,
      3px 0 0 #fafafa;
}

.nav a {
  text-decoration: none !important;
}

.nav-panel-menu:not(.is-active)::after {
  background: #e1e1e1;
  opacity: 0.5;
}

.nav-menu h3.title {
  color: #1c2633;
  font-weight: normal;
}

.nav-list {
  margin: 0;
}

.nav-item {
  margin: 8px;
  position: relative;
}

.nav-item[data-depth="1"], .nav-item[data-depth="2"] {
  padding-left:8px;
}

.nav-item:not(.is-active) > .nav-list {
  display: none;
}

.nav-item-toggle {
  background: transparent url(../img/caret.svg) no-repeat center;
  height: 20px;
  width: 20px;
  padding: 0;
  top: 0;
  left: 0;
}

.is-current-page > .nav-link,
.is-current-page > .nav-text {
  position: relative;
  display: block;
  color: #0A8EFA;
}

.is-current-page > .nav-link::before,
.is-current-page > .nav-text::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -31px;
  right: -25px;
  border-radius: 4px;
  background-color: #DCEBFE;
  z-index: -1;
}

.is-current-page[data-depth="2"] > .nav-link::before,
.is-current-page[data-depth="2"] > .nav-text::before {
  left: -46px;
  right: -33px;
}

.is-current-page[data-depth="3"] > .nav-link::before,
.is-current-page[data-depth="3"] > .nav-text::before {
  left: -52px;
  right: -41px;
}

.is-current-page[data-depth="4"] > .nav-link::before,
.is-current-page[data-depth="4"] > .nav-text::before {
  left: -60px;
  right: -49px;
}

.is-current-page > .nav-item-toggle {
  background: transparent url(../img/caret-active.svg) no-repeat center;
}

.nav-link {
  position: relative;
  display: block;
}

.nav-item:not(.is-current-page) > .nav-link:hover::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -31px;
  right: -27px;
  border-radius: 4px;
  background-color: #8F9FB314;
  z-index: -1;
}

.nav-item[data-depth="2"]:not(.is-current-page) > .nav-link:hover::before  {
  left: -46px;
  right: -33px;
}

.nav-item[data-depth="3"]:not(.is-current-page) > .nav-link:hover::before  {
  left: -52px;
  right: -41px;
}

.nav-item[data-depth="4"]:not(.is-current-page) > .nav-link:hover::before  {
  left: -60px;
  right: -49px;
}

.nav-item[data-depth="3"] .nav-item-toggle {
  left: -5px;
}

.nav-item-toggle:hover::before {
  content: "";
  position: absolute;
  top: -0.27em;
  bottom: -0.27em;
  left: -0.27em;
  right: -0.27em;
  border-radius: 0.25em;
  background-color: #8F9FB314;
  z-index: -1;
}

.nav-panel-explore {
  background: #F7FBFF;
}

.nav-panel-explore:not(:first-child) {
  max-height: calc(50% + 40px);;
}

.nav-panel-explore .context {
  font-size: 14px;
  color: #5d5d5d;
  box-shadow: 0 -1px 0 e1e1e1;
  height: 40px;
}