nav#cradmin_menu {
  background-color: @cradmin-menu-bg;

  .cradmin_menucontent {
    display: none;
    &.cradmin_menucontent_display {
      display: block;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        a {
          position: relative;
          display: block;
          color: @cradmin-menu-color;
          padding: 12px 16px 12px 36px;
//          text-transform: uppercase;
//          font-size: @font-size-small;
          border-color: @cradmin-menu-border;
          border-style: solid;
          border-width: 0 0 1px 0;
          transition: color 0.3s ease;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:hover {
            text-decoration: none;
            color: @cradmin-menu-hovercolor;
          }

          .fa {
            font-size: ceil(@font-size-base - 4px);
            // margin-right: 5px;
            position: absolute;
            top: 16px;
            left: 14px;
          }
        }
        &.cradmin_menu_activeitem a {
          color: @cradmin-menu-hovercolor;
          font-weight: bold;
        }
      }

      &.cradmin_menucontent_header {
        background-color: @cradmin-menu-header-bg;
      }
      &.cradmin_menucontent_main {
      }
      &.cradmin_menucontent_footer {
        margin-top: 30px;

      }
    }
  }

  .cradmin_menumobileheader {
    border-bottom: 1px solid @cradmin-menu-border;
    text-align: right;
    padding-right: 15px;
    .cradmin_menutoggle {
      padding: 3px 14px;
      .button-variant(#eee, #333, #444);
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 20px;
    }
    @media (min-width: @screen-md-min) {
      display: none;
    }
  }

  @media (min-width: @screen-md-min) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: @cradmin-menu-width;
    overflow-y: auto;
    overflow-x: hidden;

    .cradmin_menucontent {
      display: block;
    }
  }
}
