$sidebar-handle-width: 15px;


.sb-right-content [class^="icon-"],
.sb-right-content [class*=" icon-"] {
	width: 16px;
}


.sidebar {
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 99999;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	background: #1a1a1a;
	transition: right $animation-duration ease-in-out, left $animation-duration ease-in-out;
}

.sidebar#sb-left {
	width: 300px;
	left: 0;
	overflow: hidden;
}

#sb-left-title {
	position: absolute;
	z-index: 9998;
	top: 0;
	left: 0;
	right: 10px;
	height: 35px;
	background-color: #303030;
	/*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.898) inset;*/
	overflow: hidden;
}

#sb-left-title.active {
	border-bottom: 1px solid gray;
}

.sidebar#sb-right {
	width: 200px;
	right: -185px;
	z-index: 99999;
}

.sidebar-handle {
	width: $sidebar-handle-width;
	height: 100%;
	z-index: 99999;
	margin: 0;
	padding: 0;
	background: #474747;
	/*box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .9);*/
	cursor: col-resize;
}

.sidebar-handle span {
	display: block;
	position: absolute;
	width: 14px;
	top: 50%;
	text-align: center;
	letter-spacing: -1px;
	color: #000;
}

/* Left Sidebar */
#sb-left .sidebar-handle {
	position: absolute;
	right: 0;
}

#sb-right .sidebar-handle span {}

#sb-right .sidebar-handle span a {}

#sb-right .sidebar-handle span a:hover {}

.unlocked .sidebar-handle span {
	width: 18px;
	height: 30px;
	margin-left: -18px;
	background: #474747;
	// border-radius: 5px 0px 0px 5px;
	// border-radius: $border-radius;
	/*box-shadow: -8px 0px 10px 0px rgba(0, 0, 0, .7);*/
	// border-left: 2px solid #707070;
	// color: #c2c2c2;
	color: $icon-color;

	a {
		font-size: 22px;
		padding-top: 5px;

		&:hover {
			background-color: transparent;

		}
	}
}

.sb-left-content {
	position: absolute;
	top: 33px;
	left: 0;
	right: 10px;
	bottom: 280px;
	// height: calc(100% - 33px);
}

.sb-left-projects {
	position: absolute;
	height: 280px;
	bottom: 0;
	left: 0;
	right: $sidebar-handle-width;
	// display: none;
}

/*#lock-left-sidebar {
    display: block;
    position: absolute;
    cursor: pointer;
    font-size: 15px;
    color: #666;
    z-index: 99999;
    right: 20px;
    top: 6px;
}*/
#sb-left-title .icon {
	display: block;
	font-size: 15px;
	color: $icon-color;
	z-index: 99999;
	cursor: pointer;
	margin: 10px;
	float: right;
}

#sb-left-title h2 {
	float: left;
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	display: block;
	margin: 10px;
}

#sb-right-title {
	position: absolute;
	z-index: 9998;
	top: 0;
	left: $sidebar-handle-width;
	right: 0;
	height: 33px;
	background-color: #303030;
	/*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.898) inset;*/
}

#sb-right-title .icon {
	display: block;
	font-size: 15px;
	color: $icon-color;
	z-index: 99999;
	cursor: pointer;
	margin: 10px;
	float: left;
}


#sb-left-title .icon.active,
#sb-left-title .icon:hover {
	color: $icon-color;
}

/* Right Sidebar */
#sb-right .sidebar-handle {
	float: left;
}

// .sb-right-content {
// 	width: 185px;
// 	float: left;
// 	height: 100%;
// 	padding: 40px 15px 15px;
// 	overflow: auto;
// }

.sb-right-content {
	position: absolute;
	min-width: 185px;
	width: 100%;
	top: 33px;
	left: $sidebar-handle-width;
	// bottom: 276px;
	height: calc(100% - 33px);
	margin-top: 5px;
}

.sb-right-category {
	font-size: $font-size-lg;
	font-weight: 600;
	// color:#7F7F7F;
	color: $accent-color;
	padding-bottom: 5px;
	margin-left: 5px;
}

#sb-right a {
	margin-left: 5px;
	display: block;
	min-width: 100%;
	cursor: pointer;
	padding: 5px;
	border-radius: $border-radius;
}

#sb-right a span {
	padding-right: 8px;
}

#sb-right a:hover {
	background-color: #333;
}

#lock-right-sidebar:hover {
	color: #fff;
}

#sb-right hr {
	height: 0;
	border: none;
	border-top: 1px solid #333;
	padding: 0;
	margin: 10px 0;
}