.sidebar {
	width: $sidebar-width;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	padding-top: $header-height;
	background: none;
	z-index: $sidebar-zindex;
	
	@include transform(translateZ(0));
	@if $enable-rtl {
		left: auto;
		right: 0;
	}
	@include media-breakpoint-down(sm) {
		padding-top: 0;
		left: $sidebar-width-sm * -1;
		z-index: $header-zindex + 1;
		width: $sidebar-width-sm;
		
		@if $enable-rtl {
			left: auto;
			right: $sidebar-width-sm * -1;
		}
	}
	
	& .nav {
		display: block;
		
		padding-right: rem(20px);
		padding-left: rem(20px);
		
		@include media-breakpoint-down(sm) {
			padding-left: rem(20px);
			padding-right: rem(20px);
		}
		
		& > li {
			position: relative;
			
			@include clearfix();
			
			& > a {
				padding: rem(7px) rem(15px);
				line-height: rem(20px);
				color: rgba($white, .65);
				display: block;
				text-decoration: none;
				font-weight: 500;
				
				@include clearfix();
				@include border-radius($border-radius);
				@include transition(color .1s ease-in-out);
				
				& i {
					float: left;
					margin-right: rem(10px);
					width: rem(14px);
					text-align: center;
					line-height: rem(20px);
					font-size: rem(14px);
					
					@if $enable-rtl {
						float: right;
						margin-right: 0;
						margin-left: rem(10px);
					}
					
					&[class^="ion-"] {
						margin-right: rem(8px);
						width: rem(18px);
						font-size: rem(18px);
						margin-left: rem(-2px);
						
						@if $enable-rtl {
							margin-right: rem(-2px);
							margin-left: rem(8px);
						}
					}
				}
				& .icon-img {
					float: left;
					margin-right: rem(10px);
					margin-top: rem(3px);
					width: rem(14px);
					height: rem(14px);
					overflow: hidden;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					
					@include border-radius($border-radius);
					@include display-flex();
					@include flex-align(center);
					@if $enable-rtl {
						float: right;
						margin-right: 0;
						margin-left: rem(10px);
					}
					
					& img {
						max-width: 100%;
						max-height: 100%;
						display: block;
						margin: 0 auto;
					}
				}
				& .badge {
					padding: rem(4px) rem(8px);
					background: $white;
					color: $dark;
					font-weight: 600;
					font-size: rem(10px);
					margin-top: rem(1px);
				}
				& .label {
					padding-top: 0;
					padding-bottom: 0;
					margin-left: rem(8px);
					
					&.label-theme {
						background: $white;
						color: $dark;
					}
					
					@if $enable-rtl {
						margin-left: 0;
						margin-right: rem(8px);
					}
				}
				& > span {
					@include display-flex();
					@include flex(1);
					@include flex-wrap(wrap);
				}
				&:hover,
				&:focus {
					color: $white;
				}
			}
			&.active {
				& > a {
					position: relative;
					z-index: 10;
					color: $white;
					background: rgba($white, .5);
					
					@include gradient-enabled {
						@include gradient-linear(to bottom, (lighten($primary, 5%) 0%, darken($primary, 5%) 100%));
					}
				}
			}
			&.nav-header {
				margin: 0;
				padding: rem(15px) 0 rem(3px);
				line-height: rem(20px);
				font-size: rem(11px);
				color: rgba($white, .5);
				font-weight: 600;
				
				& a {
					padding: 0;
					margin: 0;
					display: inline;
					
					&:hover,
					&:focus {
						background: none;
						color: $dark;
					}
					& i {
						float: none;
						margin: 0;
					}
				}
			}
			&.nav-profile {
				padding: rem(20px);
				color: $dark;
				background: none;
				overflow: hidden;
				border-bottom: 1px solid rgba($white, .15);
				
				& a {
					padding: 0;
				}
				& > a {
					margin: rem(-20px);
					padding: rem(20px) 0;
					display: block;
					color: $white;
					font-weight: 500;
					background: none;
					
					&:hover {
						background: none;
						
						& .cover {
							&.with-shadow {
								&:before {
									opacity: 0.75;
								}
							}
						}
					}
				}
				& .image {
					width: rem(34px);
					height: rem(34px);
					margin-bottom: rem(10px);
					overflow: hidden;
					position: relative;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					
					@include display-flex();
					@include flex-align(center);
					@include border-radius($border-radius-lg * 5);
					
					& img {
						max-width: 100%;
						max-height: 100%;
					}
					&.image-icon {
						& i {
							float: none;
							display: block;
							font-size: rem(24px);
							text-align: center;
							width: auto;
							margin: 0 auto rem(-12px);
						}
					}
				}
				& .info {
					font-size: rem(14px);
					position: relative;
					
					& .caret {
						margin-top: rem(2px);
					}
					& small {
						display: block;
						color: rgba($white, .75);
						font-size: rem(11px);
						line-height: rem(16px);
						margin-bottom: rem(-5px);
					}
				}
			}
			&.nav-widget {
				padding: rem(10px) 0;
				
				& i {
					margin-right: auto;
				}
			}
			& .text-theme {
				color: $white;
				
				@if $enable-rtl {
					margin-right: rem(5px);
				} @else {
					margin-left: rem(5px);
				}
			}
		}
		& .has-sub {
			&.active {
				& > .sub-menu {
					display: block;
				}
			}
		}
		& .sub-menu {
			& > li {
				& > a {
					font-weight: 500;
					
					& .caret {
						margin-top: rem(-1px);
						left: rem(-5px);
					}
				}
			}
		}
		&.nav-profile {
			padding: rem(5px) 0;
			border-bottom: 1px solid rgba($white, .15);
			display: none;
			
			&.active {
				display: block;
			}
		}
	}
	& li {
		& > a {
			& .caret {
				display: block;
				float: right;
				width: rem(20px);
				height: rem(20px);
				line-height: rem(20px);
				text-align: center;
				font-size: rem(11px);
				border: none;
				
				@include fontawesome();
				@if $enable-rtl {
					float: left;
				}
				
				&:before {
					content: '\f054';
					display: block;
					text-align: center;
					opacity: 0.5;
					
					@include transition(all .2s linear);
					@if $enable-rtl {
						content: '\f053';
					}
				}
			}
		}
		
		&.active,
		&.expanding,
		&.expand {
			& > a {
				& .caret {
					&:before {
						opacity: 1.0;
						
						@include transform(rotate(90deg));
						@if $enable-rtl {
							@include transform(rotate(-90deg));
						}
					}
				}
			}
		}
		&.closed,
		&.closing {
			& > a {
				& .caret {
					&:before {
						@include transform(rotate(0deg));
					}
				}
			}
		}
	}
	& .sub-menu {
		list-style-type: none;
		padding: rem(5px) 0 rem(10px) rem(25px);
		margin: 0;
		position: relative;
		display: none;
		
		@if $enable-rtl {
			padding-left: 0;
			padding-right: rem(39px);
		}
		
		& > li {
			position: relative;
			
			& > a {
				padding: rem(3px) rem(20px) rem(3px) rem(15px);
				display: block;
				color: rgba($white, .5);
				text-decoration: none;
				position: relative;
				
				@include transition(color .1s ease-in-out);
				@if $enable-rtl {
					padding-right: rem(15px);
					padding-left: rem(12px);
				}
				
				&:hover,
				&:focus {
					color: $white;
				}
			}
			&.active {
				& > a {
					color: $white;
				}
			}
		}
		& .sub-menu {
			padding: 0 0 0 rem(15px);
			background: none;
			
			@if $enable-rtl {
				padding-left: 0;
				padding-right: rem(15px);
			}
		}
	}
	& .sidebar-minify-btn {
		margin: rem(10px) rem(20px);
		float: right;
		padding: rem(5px) rem(10px) !important;
		background: rgba($black, .25);
		color: $white;
		
		@include border-radius($border-radius);
		
		& i {
			margin: 0 !important;
			color: $white;
		}
		&:hover,
		&:focus {
			background: rgba($black, .5) !important;
		}
	}
	& .slimScrollDiv {
		& .slimScrollBar {
			display: none !important;
		}
	}
	&.sidebar-grid {
		& .nav {
			& > li {
				& > a {
					@include border-radius(0);
				}	
				& + li {
					border-top: 1px solid rgba($white, .15);
				}
				&.nav-profile {
					& + li {
						border-top: none;
					}
				}
			}
		}
	}
}
.sidebar-bg {
	background: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: $sidebar-width;
	z-index: $sidebar-zindex - 10;
	
	@if $enable-rtl {
		left: auto;
		right: 0;
	}
	@include media-breakpoint-down(sm) {
		padding-top: 0;
		left: $sidebar-width-sm * -1;
		z-index: $header-zindex;
		background: rgba(mix($white, $black, 15%), .95);
		width: $sidebar-width-sm;
		
		@if $enable-rtl {
			left: auto;
			right: $sidebar-width-sm * -1;
		}
	}
}