.ui.main.menu {
  background: rgb(60, 60, 90);
  border-bottom: 0;
  font-size: 1em;
  min-height: 64px;
  @include font-family();
  #navbar {
    width: 1127px ;
    padding: 0;
    .item {
      color: rgb(245, 245, 255);
      &.brand {
        margin: 0 .5rem 0 0;
        .mini.image {
          transition: opacity .2s;
          &:hover {
            opacity: .9;
          }
        }
        .button.mobile-only {
          display: none;
        }
      }
      @if $singleuser == true {
        &[href*="explore"], 
        &[href*="docs.gitea"] {
          display: none !important;
        }
      }
      &:not(.brand) {
        border-radius: 0;
        display: block;
        margin: 0px 0px;
        padding: 24px;
        transition: background .2s, color .2s;
        &:hover {
          background: rgb(50, 50, 75);
        }
        &.active {
          background: rgb(50, 50, 75);
        }
      }
    }
    .seperator {
      cursor: default;
      display: block;
      padding: 22px;
    }
    @if $singleuser == true {
      .right.stackable.menu {
        display: none;
      }
    }
  }
  .dropdown.item > .menu {
    margin-top: 0;
  }
  .dropdown.item > .menu, 
  &.text.menu .dropdown.item > .menu {
    border: 0;
  }
  .dropdown.item:hover, 
  .link.item:hover, 
  .active.item:hover, 
  a.item:hover {
    color: #ffffff;
  }
}

@media (max-width: 767.98px) {
  .ui.main.menu {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    #navbar {
      .item {
        width: auto !important;
      }
      .right.custom.menu {
        display: inherit !important;
        flex-direction: row !important;
        margin-left: auto !important;
      }
    }
  }
}