
.sidebar
	width: 210px
	position: fixed
	left: 0
	top: 0
	bottom: 0
	padding-top: 55px
	background: #2d353c
	z-index: 10

	@media (max-width: $screen-sm-min)
		left: -210px
		position: absolute
		z-index: 9999

	&.toggled
		left: 0

	.nav
		>li>a
			padding: 8px 20px
			line-height: 20px
			color: #a8acb1

			&:focus,
			&:hover
				background: #232a2f
				color: #a8acb1

			.caret
				margin-top: 9px
			i
				float: left
				margin-right: 15px
				width: 14px
				text-align: center
				line-height: 22px
				font-size: 12px


		>li.nav-account
			padding: 17px 20px
			background-color: #1a2229
			height: 57px
			font-size: 18px
			font-weight: 500

			a
				padding: 0

		li.nav-header
			margin: 0
			padding: 10px 20px
			line-height: 20px
			font-size: 11px
			color: #6d7983

		>li.active>a
			background-color: $btn-success-bg
			color: $btn-success-color

	.sub-menu
		list-style-type: none
		padding: 10px 0 10px 30px
		margin: 0
		background: #1a2229
		position: relative

		>li>a
			padding: 5px 20px
			display: block
			font-weight: 300
			color: #889097
			text-decoration: none
			position: relative

			&:before
				content: '\f10c'
				font-family: FontAwesome
				position: absolute
				left: 0
				font-size: 7px
				color: #889097
				top: 50%
				margin-top: -4px
				margin-left: -6px

		>li.active>a
			color: #fff

			&:before
				color: $btn-success-bg

		&:before
			content: ''
			position: absolute
			left: 26px
			top: 0
			bottom: 0
			width: 2px
			background: #10181F

