//some sidebar variables
@sidebar-bg:#2980b9;
@sidebar-border-right:#fcfcfc;

@menu-active-color:#0B6CBC;
@menu-bg:#2980b9;
@menu-color:#fcfcfc;
@menu-focus-color:#fcfcfc;
@menu-hover-indicator:#3498db;
@menu-subarrow-color:#fcfcfc;
@menu-active-color:#fcfcfc;
@menu-open-bg:#3498db;
@menu-active-bg:#3498db;

@submenu-border:#ecf0f1;
@submenu-bg:#3498db;
@submenu-item-color:#ecf0f1;
@submenu-item-border:#ecf0f1;
@submenu-item-hover:#fff;
@submenu-item-active-icon:#ecf0f1;


@submenu-left-border:#ecf0f1;
@submenu-active-left-border:#ecf0f1;
@3rd-level-icon-color:#6A7D87;


@menumin-btn-bg:#3498db;
@menumin-btn-border:#E0E0E0;
@menumin-icon-color:#ecf0f1;
@menumin-icon-border:#BBB;
@menumin-icon-bg:#3498db;
@menumin-bg:#F5F5F5;
@menumin-border:none;
@menumin-text-border:#DDD;
@menumin-shadow:none;

@shortcuts-bg:#FAFAFA;
@shortcuts-border:#DDD;






.sidebar {
 width:@sidebar-width;
 position:absolute; top:0; bottom:0;
 
 border-right:1px solid @sidebar-border-right;
 background-color:@sidebar-bg;
 
  &:before {/* the grey background of sidebar */

	 content:""; display:block;
	 width:@sidebar-width;
		
	 position:fixed; bottom:0px; top:0px;
	 z-index:-1;
		
	 background-color:@sidebar-bg;
	 border-right:1px solid @sidebar-border-right;
 }
 
 &.fixed {
	position:fixed;
	z-index:@zindexFixedNavbar - 1;
	top:@navbar-mh;
	left:0;
	&:before {
		left:0;
		right:auto;
	}
 }
}



/* side navigation */
// li [class^="icon-"], li [class*=" icon-"]{
//  & , .nav-list & {
// 	width:auto;
//  }
// }

.nav-list {
 margin:0 0 10px 0; padding:0;
 list-style:none;
}

.nav-list > li > a, .nav-list .nav-header {
 margin:0;
 -webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out; 
	transition: all .3s ease-in-out;
}

.nav-list > li {
 display:block;
 padding:0;
 margin:0;

 //border:none;
 //border-top:1px solid lighten(@menu-bg,2%);
 border-bottom:1px solid darken(@menu-bg,2%);
 position:relative;

 &.open {
 	border-bottom:1px solid lighten(@menu-bg,2%) !important;
 }
}


.nav-list > li {
 > a {
	 display:block;
	 height:38px; line-height:36px;

	 padding:0 16px 0 7px; 
	 background-color:@menu-bg;

	 color:@menu-color;
	 text-shadow:none !important;

	 font-size:13px;
	 text-decoration:none;

	 > [class*="icon-"]:first-child {
		display:inline-block;
		vertical-align:middle;

		min-width:30px;
		text-align:center;

		font-size:18px;
		font-weight:normal;
	 }
	 
	 &:focus {
		background-color:@menu-bg;
		color:@menu-focus-color;
	 }
	 
	 &:hover  {
		background-color:#3498db;
		color:@menu-focus-color;
		&:before {
			display:block; content:"";
			position:absolute;
			top:-1px; bottom:0; left:0;
			width:3px; max-width:3px; overflow:hidden;
			background-color:@menu-hover-indicator;
		}
	 }

 }
 
 /* the submenu indicator arrow */
 a > .arrow {
	display:inline-block;
	width:14px !important; height:14px;
	line-height:14px;
 
	text-shadow:none;
	font-size:18px;
 
	position:absolute;
	right:9px; top:11px;
 
	padding:0;
	color:@menu-subarrow-color;
 }
 a:hover > .arrow , &.active > a  > .arrow , &.open > a > .arrow  {
	color:@menu-focus-color;
 }



 &.separator {
	 height:3px;
	 background-color:transparent;
	 position:static;
	 margin:1px 0;

	 .box-shadow(none);
 }

 /* menu active/open states */
 &.open > a {
	background-color:@menu-open-bg;
	color:@menu-focus-color;
 }

 &.active {
  background-color:@menu-active-bg;
   > a
  {
	 & , &:hover, &:focus, &:active {
		 background-color:@menu-active-bg;
		 color:@menu-active-color;
		 font-weight:bold;
		 font-size:13px;
	 }

	 > [class*="icon-"] {
		font-weight:normal;
     }

	 &:hover:before {/* no left side menu item border on active state */
		display:none;
	 }
  }
  //////


  &:after {/* the border on right of active item */
	display:inline-block; content:"";
	position:absolute;
	right:-2px; top:-1px; bottom:0;
	// border-right:2px solid @menu-active-color;
  }
 }



 /* submenu */
 &.open {
  border-bottom-color:@submenu-border;
 }


 &.active .submenu {
  display:block;
 }
 .submenu {
   display:none;
   list-style:none;
   margin:0; padding:0;

   position:relative;
   background-color:@submenu-bg;

   // border-top:1px solid @submenu-border;

   > li {
	 margin-left:0;
	 position:relative;

	 > a {
		 display:block;
		 position:relative;
		 color:@submenu-item-color;

		 padding:7px 0 8px 37px;
		 margin:0;

		 // border-top:1px dotted @submenu-item-border;
		 &:focus {
			text-decoration:none;
		 }
		 &:hover{
			text-decoration:none;
			color:@submenu-item-hover;
		}
	 }

	 &.active > a {
		color:@menu-active-color;
	 }


	/* optional icon before each item */
	a > [class*="icon-"]:first-child {
		display:none;

		font-size:12px; font-weight:normal;
		width:18px; height:auto; line-height:12px; text-align:center;
		position:absolute; left:10px; top:11px; z-index:1;

		background-color:#3498db;
	}
	&.active > a > [class*="icon-"]:first-child,
	&:hover > a > [class*="icon-"]:first-child {
		display:inline-block;
	}
	&.active > a > [class*="icon-"]:first-child {
		color:@submenu-item-active-icon;
	}

  }// > li
 }//end of submenu


 > .submenu {//the first level submenu
	> li {
		//tree like menu 
		// &:before {
		// 	 /* the horizontal line */
		// 	content:""; display:inline-block;
		// 	position:absolute;
			
		// 	width:8px;		 
		// 	left:18px; top:17px;
		// 	border-top:1px solid @submenu-left-border;
		// }
		// &:first-child > a {
		// 	border-top:1px solid #FAFAFA;
		// }
	}

	// &:before {
	// 	content:"";
	// 	display:block;
	// 	position:absolute; z-index:1;
	// 	left:18px;
	// 	top:0; bottom:0;
 
	// 	border-left:1px solid @submenu-left-border;
	// }
 }
 &.active {
	> .submenu {
		> li {
			&:before {
				border-top-color:@submenu-active-left-border;
			}
		}
		&:before {
			border-left-color:@submenu-active-left-border;
		}
	}
 }


}//end of .nav-list > li 


//.nav-list li 
.nav-list li {
 .active_state_caret() {
	display:block;
	content:"";
	 
	position:absolute !important;
	right:0; top:4px;

	border:8px solid transparent;
	border-width:14px 10px;
	border-right-color:@menu-active-color;
 }

 .submenu {
	/* needed for webkit based browsers to slideToggle without problem */
	overflow:hidden;
 }

 &.active > a:after {
	.active_state_caret();
 }

 &.open > a:after {/* no caret for open menu item */ //we put this after .active > a:after to override it
	display:none;
 }
 &.active.open > .submenu > li.active.open > a.dropdown-toggle:after {
	/* don't display caret on active open item who is open and has children */
	display: none;
 }
 &.active > .submenu > li.active > a:after {
	/** don't display caret on active item whose parent is not open
	useful for hiding the caret when submenu is sliding up */
	display: none;
 }
 &.active.open > .submenu > li.active > a:after {
	/* display caret on active item whose parent is open */
	display: block;
	.menu-min & {
		display: none;
	}
 }


 &.active.no-active-child {
	> a:after {/* show caret for active menu item with childs which is not open(i.e. no submenu item is active) */
		display:inline-block !important;
	}
 }
}//end of .nav-list li 



.nav-list a {
 .badge , .label {
	font-size:12px;
	padding-left:6px; padding-right:6px;
	position:absolute;
	top:9px; right:11px;
	opacity:0.88;
	[class*="icon-"] {
		vertical-align:middle;
		margin:0;
	}
 }
 &.dropdown-toggle {
	.badge , .label {
		right:28px;
	}
 }
 &:hover {
	.badge , .label {
		opacity:1;
	}
  }
  
 .menu-min & {
  .badge , .label {
		position:relative;
		top:-1px;
		right:auto;
		left:4px;
	}
  }
}

.nav-list .submenu .submenu a {
 .badge , .label {
	top:6px;
 }
 .menu-min & {
  .badge , .label {
		top:0;
	}
  }
}




/* side menu minimizer icon */
.sidebar-collapse  {
 // border-bottom:1px solid @menumin-btn-border;
 background-color:@menu-bg;
 
 text-align:center;
 padding:3px 0;
 height:30px;
 position:relative;
 
 
 > [class*="icon-"]{
	 display:inline-block;

	 cursor:pointer;
	 font-size:14px;
	 color:@menumin-icon-color;

	 // border:1px solid @menumin-icon-border;
	 padding:0 5px;
	 line-height:18px;

	 border-radius:16px;

	 background-color:@menumin-icon-bg;
	 position:relative;
 }
 
 &:before {
	content:"";
	display:inline-block;
	 
	height:0;
	border-top:1px solid darken(@menu-bg,4%);
	position:absolute;
	left:15px; right:15px; top:13px;
 }

}



/* sidebar shortcuts icon */
.sidebar-shortcuts {
 background-color:@shortcuts-bg;
 border-bottom:1px solid @shortcuts-border;
 text-align:center;
 
 line-height:37px; max-height:40px;
 margin-bottom:0;
}
.sidebar-shortcuts-large {
 padding-bottom:4px;
 > .btn > [class*="icon-"] { font-size:110%; }
}
.sidebar-shortcuts-mini {
 display:none;
 font-size:0;
 width:42px;
 line-height:18px;
 padding-top:2px; padding-bottom:2px;
 
 background-color:@submenu-bg;
 
  > .btn{
	 border-width:0 !important;
	 font-size:0;
	 line-height:0;
	 padding:8px !important;
	 margin:0 1px;
	 
	 border-radius:0 !important;
	 .opacity(85);
  }
}


/* minimized side menu*/
.sidebar.menu-min {
	width:@sidebar-min-width;
	&:before {
		width:@sidebar-min-width;
	}
	+ .main-content {
		margin-left:(@sidebar-min-width + 1);
		.breadcrumbs.fixed { left:(@sidebar-min-width + 1); }
	}
}

.menu-min .nav-list > li {
  > a {
	position:relative;
	 > .menu-text {
		display:none;
		
		position:absolute;
		left:(@sidebar-min-width - 1); top:-2px;
		width:(@sidebar-width - 31); height:39px;
		
		line-height:38px;
		// background-color:@menumin-bg;
		z-index:121;
		
		// .box-shadow(@menumin-shadow);
		// border:1px solid @menumin-border;

		font-weight:bold;

		padding-left:12px;
    }
	&.dropdown-toggle > .menu-text {
		.box-shadow(none);
		border:none;
		// top:-1px; left:@sidebar-min-width;
		width:(@sidebar-width - 26);
		// border-bottom:1px solid @menumin-text-border;
	}
	.arrow {
		display:none;
    }
	
	&:hover:before {/* the right side border on hover */
		width:2px;
	}
  }

 &:hover > a {
	color:@menu-focus-color;
	> .menu-text {
		display:block;
   }
 }
 &.active > a > .menu-text {
	border-left-color:@menu-focus-color;
 }
 &.open > a  {
	background-color:@menu-open-bg;
	color:@menu-color;
 }
 &.open.active > a  {
	background-color:@menu-active-bg;
 }
 &.open:hover > a {
	color:@menu-focus-color;
 }
 &.active > a  {
	color:@menu-active-color;
 }
 
 &.active > a:after  { /* the caret */
	border-width:10px 6px;
	top:8px;
 }
 &.active.open > a:after {
	display:block;
 }
 &.active.open li.active > a:after {
	display:none;
 }



 > .submenu {
	background:@submenu-bg;
	position:absolute; z-index:120;
	left:(@sidebar-min-width); top:0px;

	width:(@sidebar-width - 14);
	border:1px solid @menumin-border;

	.box-shadow(@menumin-shadow);

	padding-top:40px;
	padding-bottom:2px;

	display:none !important;
	
	&:before {
		 /* hide the tree like submenu in minimized mode */
		display:none;
	}
		 
	li {
	  &:before {
		display:none;
	  }
	  
	  > a {
		//border-left:none;
		margin-left:0;
		padding-left:24px;
		> [class*="icon-"]:first-child {
			left:4px;
		}
	  }

	}
 }



 &:hover > .submenu {
	display:block !important;
 }
 &.active > .submenu {
	border-left-color:@menu-focus-color;
 }

}


.menu-min { /* minimized sidebar shortcuts */
  .sidebar-shortcuts {
	position:relative;
  }
  .sidebar-shortcuts-mini {
	display:block;
  }
  
  .sidebar-shortcuts-large {
	display:none;
	position:absolute; left:@sidebar-min-width; top:-1px;
	width:(@sidebar-width - 14);
	z-index:20;
	background-color:@submenu-bg;
	.box-shadow(@menumin-shadow);
	border:1px solid @menumin-border;
	padding:0 2px 3px;
  }
  .sidebar-shortcuts:hover .sidebar-shortcuts-large{
	display:block;
  }

  .sidebar-collapse { /* minimized collapse button */
	&:before {
		left:5px; right:5px;
	}
	> [class*="icon-"] {
		font-size:13px;
		padding:0 4px;
		line-height:15px;

		border-width:1px;
		border-color:darken(@menumin-icon-border, 5%);
	}
  }
}




//3rd & 4th level menu
.nav-list > li > .submenu {
  li > .submenu {
	border-top:none;
	background-color:transparent;
	display:none;
  }
  li.active > .submenu {
	display:block;
  }

  a > .arrow {
	right:11px; top:10px;
	font-size:16px;
	color:#6B828E;
  }

  li > .submenu > li > a > .arrow {
	right:12px;
	top:9px;
  }


  li > .submenu > li {
		line-height:16px;
		&:before {//the tree like menu
			display:none;
		}

		> a {/*3rd level*/
			margin-left:20px;
			padding-left:22px;
		}
		> .submenu > li > a {/*4th level*/
			margin-left:20px;
			padding-left:38px;
		}

		a > [class*="icon-"]:first-child {
			display:inline-block;
			color:inherit;
			font-size:14px;
			
			position:static;
			background-color:transparent;
		}


		a {
			font-size:13px;
			color:#777;
			
			&:hover {
				color:desaturate(@menu-focus-color, 25%);
				text-decoration:underline;
				[class*="icon-"] {
					text-decoration:none;
					color:desaturate(@menu-focus-color, 25%);
				}
			}
		}

  }

  li.open > a {
	color:desaturate(@menu-focus-color, 12%);
	>  [class*="icon-"]:first-child {
		display:inline-block;
	}
	.arrow {
		color:desaturate(@menu-focus-color, 12%);
	}
  }
  li > .submenu li.open > a {
	color:desaturate(@menu-focus-color, 12%);
	>  [class*="icon-"]:first-child {
		display:inline-block;
		color:@menu-focus-color;
	}
	
	.arrow {
		color:desaturate(@menu-focus-color, 12%);
	}
  }

  li > .submenu li.active > a {
	color:desaturate(@menu-active-color, 8%);
	>  [class*="icon-"]:first-child {
		display:inline-block;
		color:desaturate(@menu-active-color, 8%);
	}
  }


}//.nav-list > li > .submenu


.nav-list > li {
  &.active.open li.active > a:after {
	top:2px;
	border-width:14px 8px;
  }
  &.active.open li.active.open li.active > a:after {
	top:0;
  }
}


.menu-min .nav-list > li > .submenu {
  li > .submenu > li {
	> a {/*3rd level*/
		margin-left:0px;
		padding-left:30px;
	}
	> .submenu > li > a {/*4th level*/
		margin-left:0px;
		padding-left:45px;
	}
 }
 
 li.active > a:after {
	display:none;
 }
}










/* side menu toggler in mobile view */
.menu-toggler { 
 display:none;
}