@sidebarWidth: 274px;

.sidebar {
	width: @sidebarWidth;
	position: fixed;
	left: 0;
	top: 47px;
	bottom: 0;

	.user-profile {
		position: relative;
		> a { position: relative; }
		.media-body {
			padding: 5px 0 0;
			p { font-size: 12px; }
		}
		.badge {
			position: absolute;
			top: -2px;
			right: -2px;
			font-size: 10px;
			.rounded(50%,50%,50%,50%);
			padding: 4px 6px;
		}
		ul {
			list-style: none;
			padding: 0;
			width: 24px;
			position: absolute;
			top: 9px;
			right: 9px;
			li {
				&:last-of-type { border: none; }
				a {
					display: block;
					height: 20px;
					line-height: 20px;
					text-align: center;
					padding: 0;
					font-size: 12px;
				}
			}
		}
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	> .sidebarMenuWrapper {
		overflow-y: scroll;
		position: absolute;
		top: 83px;
		bottom: 0;
		left: 0;
		right: 0;
		> ul {
			li {
				a {
					display: block;
					line-height: 40px;
					padding-left:20px;
					font-weight: 600;
					text-decoration: none;
					font-size: 13px;
					i {
						font-size: 1.3em;
						vertical-align: middle;
						width: 30px;
						margin-right: 10px;
						display: inline-block;
						text-align: center;
					}
					> .badge {
						margin-top: 9px;
						margin-right: 11px;
						i {
							margin: 0;
							width: auto;
						}
					}
				}
				&.active, &.open { position: relative; }
				&:last-of-type { border: none; }
			}
		}
		ul {
			li {
				> a {
					&[data-toggle="collapse"] {
						position: relative;
						&:after {
							display: inline-block;
							font-family: "picto-foundry-general";
							font-style: normal;
							font-weight: normal;
							font-variant: normal;
							text-transform: none;
							line-height: 1;
							-webkit-font-smoothing: antialiased;
							content: "\f100";
							font-size: 12px;
							position: absolute;
							right: 15px;
							top: 15px;
						}
					}
				}
				&.active.hasSubmenu {
					height: auto;
					> a[data-toggle="collapse"]:after {
						content: "\f16f";
						top: 21px;
					}
				}
			}
		}
	}
	
	/* Light Menu */
	&.sidebar-default {
		border-right: 1px solid @navbar-top-separator;
		background: #fff;
		.user-profile {
			.img-circle { border: 1px solid #b3b4b0; }
			.badge { border: 1px solid #fff; }
			ul {
				border: 1px solid #ededed;
				li {
					border-bottom: 1px solid #ededed;
					a { color: #e5e5e5; }
					&:hover a { background: #f5f5f5; color: #ccc; }
					&.active,
					&.active:hover {
						border-color: @primaryColor;
						a { color: #fff; background: @primaryColor; }
					}
				}
			}
			border-bottom: 1px solid @navbar-top-separator;
		}
		ul li > a[data-toggle="collapse"]:after { color: #797979; }

		> .sidebarMenuWrapper > ul {
			ul { border-top: 1px solid #efefef; }
			li {
				border-bottom: 1px solid  #efefef;
				a { color:#000;	}
				&.active, &.active:hover > a { 
					background-color: @primaryColor; 
					color:#fff;
				}
				&.active,
				&.open {
					> a { color:#fff !important; }
				}
				&.active.hasSubmenu { 
					background-color: #efefef;
					> li i {color:#797979 !important; }
					.hasSubmenu.active {
						ul li.active a { background-color: @primaryColor; color:#fff; }
						ul li a { background-color: darken(#efefef,5%); }
						> a { background: #fff; i { color:#797979; } }
					}
					ul li a { color:#5a5a5a; }
					ul li a:hover { color:#797979; background: #fff; }
					> a[data-toggle="collapse"] {
						background: #fff;
						color:#797979 !important;
					}
				}
				&:hover {
					> a {
						background: #efefef;
						i {	color: #797979; }
					}
				}
			}
		}
	}

	/* Dark Menu */
	&.sidebar-inverse {
		border-right: 1px solid #2c2c2c;
		background: #373737;

		.user-profile {
			.img-circle { border: 1px solid #2c2c2c; }
			.badge {
				border: none;
			}
			a { color:#e1e1e1;}
			ul {
				border: 1px solid #2c2c2c;
				li {
					border-bottom: 1px solid #2c2c2c;
					a {
						color: #5a5a5a;
					}
					&:hover a { background: #2c2c2c; color: #ccc; }
					&.active,
					&.active:hover {
						border-color: @primaryColor;
						a { color: #fff; background: @primaryColor; }
					}
				}
			}
			border-bottom: 1px solid #2c2c2c;
		}

		> .sidebarMenuWrapper > ul {
			ul { border-top: 1px solid #2c2c2c; }
			li {
				border-bottom: 1px solid  #2c2c2c;
				a {
					color:#ffffff;
				}
				&.active, &.active:hover > a{ 	background-color: @primaryColor; color:#fff;
					
				}

				&.active, &.open {
				
					> a {
						color:#fff !important;
						> i { color: #ffffff;}
					}
				}
				&.active.hasSubmenu { 
					background-color: #2c2c2c;
					.hasSubmenu.active {
						ul li.active{ 
							
							a{background-color: @primaryColor;}
						}
						ul li a { background-color: darken(#2c2c2c,2%);}
						> a { 	background: #373737; color:#fff;}
					
					}
					ul li a {color:#5a5a5a; }
					
					ul li a:hover {color:#fff; 	background: #373737;}

					> a[data-toggle="collapse"] {
						background: #373737;
					}

				}
		
				&:hover {
					> a {
						background: #2c2c2c;
						i {	
							color: #ffffff;
						}
					}
				}
			}
		}	
	}
}

@media (max-width: 768px) { .sidebar { z-index:9999;}}
@media (min-width: 992px) {
	html.app .sidebar-mini .layout-app { left: 0px; }
}