// ========================================================================
// LAYOUT => NAVBAR
// ========================================================================
// .uk-navbar-container:not(.uk-navbar-transparent),
// .uk-navbar-dropdown {
// 	// color: #fff;
// 	// background: var(--color-secondary);
// 	background: linear-gradient(to left, #28a5f5, #1e87f0);
// }

// .uk-navbar-dropdown-nav .uk-nav-header {
// 	color: #fff;
// }

// .uk-navbar-nav > li.uk-active > a,
// .uk-navbar-nav > li > a:focus, 
// .uk-navbar-nav > li > a:hover,
// .uk-navbar-dropdown-nav > li.uk-active > a,
// .uk-navbar-dropdown-nav > li > a:focus, 
// .uk-navbar-dropdown-nav > li > a:hover {
// 	color: var(--color-accent) !important;
// }

// .uk-navbar-nav > li > a:focus, 
// .uk-navbar-nav > li > a:hover {
// 	color: rgba(255,255,255,.7);
// }
// .uk-navbar-dropdown,
// .uk-navbar-dropdown-nav {
// 	min-width: auto;
// }

// .uk-navbar-item > span {
// 	padding-left: 4px;
// }

.uk-navbar-item, 
.uk-navbar-nav > li > a, 
.uk-navbar-toggle {
  line-height: 1;
  height: 40px;
}

.uk-navbar-item.uk-breadcrumb {
  padding: 0 15px;
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  content: '»';
  margin: 0 1em;
  position: relative;
  bottom: 1px;
}

ul.uk-nav-sub {
  padding: 0;
  & > li:first-child { margin-top: 4px; }
  & > li { padding: 0 0 0 15px; }
  & > li:last-child { margin-bottom: 15px; }
}



.tutorial {
  position: relative;

  aside {
    width: 200px;
    position: absolute;
    top: 0;
    left: calc(100% + 0px);
    @media (min-width: 1200px) { left: calc(100% - 200px); }

    ul.uk-nav-sub > li:first-child { margin-top: 0; }
    ul.uk-nav-sub > li:last-child { margin-bottom: 0; }
  }

  .uk-sticky {
    width: 200px !important;
    position: fixed;
    top: 90px;
    // right: 40px;
  }

  @media (min-width: 960px) {
    .tutorial-body { margin-right: 0; }
  }

  @media (min-width: 1200px) {
    .tutorial-body { margin-right: 240px; }
  }

  @media (min-width: 1600px) {
  }

  @media (min-width: 1800px) {
    .uk-sticky { width: 400px !important; }
  }
}





#asideInnerNav a {
  border-left: 2px solid transparent;
  color: #999;
  line-height: 1.1;
  padding: 5px 0;
  transition: all 300ms ease-in-out;

  &:hover, &:focus {
    color: #222;
  }
}

#asideInnerNav li.uk-active > a {
  border-color: var(--color-primary);
  color: var(--color-primary);
  padding: 10px;
}

#asideInnerNav_helpers a {
  border-left: 2px solid transparent;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}