/* ------- top nav ---- */
.navbar {
  justify-content: flex-start;
  margin: 0 1rem;
}

#resetButton {
  padding: 0 0.5rem;
  font-size: smaller;
  position: absolute;
  right: 0;
  font-family: var(--mono-font);
}

.nav-link {
  color: #08264066;
  font-weight: 600;
  margin: 0 1rem 0 0;
  transition: none;
}
.nav-link.active,
.nav-link:hover {
  color: var(--maincolor);
  background: #08264011;
}
#topic-nav-items {
  .nav-link {
    color: #082640aa;
    font-weight: 400;
    margin: -0.5rem 0.5rem 0.5rem 0;
    padding: 0.25rem 0.5rem;
    transition: none;
    border-radius: 1rem;
  }
  .nav-link.active,
  .nav-link.active:hover {
    color: #fff;
    background: #7dd14c;
  }
  .nav-link:hover {
    outline: 1px solid #7dd14c;
    color: inherit;
    background: inherit;
  }
}

/* -------- search nav ---------- */
ul#search-nav-items {
  border-bottom: solid 1px #08264022;
  padding-bottom: 0;
  width: 100%;
}
/* search params */
#searchParams {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 9999;
  background: white;
  box-shadow: 0 5px 5px 0 rgba(221, 221, 221, 0.75);
}
.geoElement {
  width: 25vw;
  margin-left: 2ch;
}

/* country selection */
.selectize-input {
  border-radius: 0px;
}
.form-row {
  display: flex;
  align-items: center;
}
.selectize-control.multi .selectize-input {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* ------ left nav ------*/
#ide-scroll-nav {
  position: sticky;
  width: 300px;
  padding: 0 0 0 0.5rem;
  margin-top: 1rem;
  flex-shrink: 0;
  overflow-y: auto;
  align-self: flex-start;
  height: 80vh;
  margin-bottom: 50vh;
  background: white;
}

.ide-nav-item {
  padding: 6px 12px;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  border-left: 5px solid transparent;
  user-select: none;
  font-weight: 600;

  a {
    font-weight: inherit;
    width: -webkit-fill-available;
  }
  span {
    max-width: 22ch;
    overflow-wrap: break-word;
  }
}
.ide-nav-item.sec-level {
  padding-left: 2rem;
  font-weight: 300;
}
/* .ide-nav-item.lowkey,
.ide-nav-item.sec-level.lowkey {
  opacity: 30%;
} */
/* .ide-nav-item.lowkey.active */
.ide-nav-item.active {
  color: var(--maincolor);
  border-left-color: var(--maincolor);
  background: #eee;
  font-weight: 600;
  box-shadow: 0 5px 5px 0 rgba(221, 221, 221, 0.75);
  /* opacity: 100%; */
}
/* .ide-nav-item.lowkey:hover */
.ide-nav-item:hover {
  background: #eee;
  box-shadow: 0 5px 5px 0 rgba(221, 221, 221, 0.75);
  /* opacity: 100%; */
}
.ide-nav-item.active span {
  opacity: 1 !important;
}

/* ---- data ----*/
#wrapper-ide-scroll-nav {
  display: flex;
  align-items: flex-start;
  position: relative;
}

#dashboard {
  width: 100%;
}

/* ------- year slider -------- */
.yearElement {
  width: 20vw;
  margin-left: 7ch;
}
.ui-widget {
  font-family: var(--mono-font);
}
.ui-slider-horizontal {
  height: 3px;
}
.ui-slider-horizontal .ui-slider-handle {
  margin: 0;
}
#yearSlider {
  background: #eeeeee;
}
#yearSlider,
#startYear,
#endYear {
  border-radius: 0;
  border: none;
  outline: none;
}
#startYear,
#endYear {
  top: 0;
  color: var(--maincolor);
  padding: 0 2px;
  background: transparent;
  width: fit-content;
}
#startYear {
  transform: translate(-100%);
  border-right: 3px solid #eee;
}
#endYear {
  border-left: 3px solid #eee;
}
.ui-widget-header {
  background-color: var(--maincolor);
  /* mask-image: linear-gradient(to left, black 100%, transparent 100%); */
  /* -webkit-mask-image: linear-gradient(to left, black 100%, transparent 100%); */
}

/* .ui-widget-content {
  .ui-state-active,
  .ui-state-focus {
    background: var(--maincolor);
  }
} */

/* .ui-slider .ui-slider-handle {
  width: 1rem;
  height: 1rem;
  background: black;
} */