#sidebar {
	width: inherit;
	min-width: 160px;
	max-width: 160px;
	background-color: #555655;
	float: left;
	height: 100%;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 100%;
	border-right: solid thin #484948;
}

	#sidebar .list-group {
		/*min-height: 100vh;*/
		height: 100%;
		padding-right: 0;
		padding-left: 0;
	}

	#sidebar .logout-button1 {
		position: absolute;
		bottom: 20px;
	}

	#sidebar .bottom_div {
		position: absolute;
		bottom: 20px;
	}

		#sidebar .bottom_div a {
			cursor: pointer;
		}

	#sidebar .spacer {
		width: 160px;
		height: 80px;
		float: left;
		display: inline-block
	}

	#sidebar .list-group-item {
		border-radius: 0;
		background-color: #555655;
		color: #FFF;
		border-left: 0;
		border-right: 0;
		border-color: #555655;
		white-space: nowrap;
	}

		#sidebar .list-group-item:hover {
			background-color: #5FCAF5;
			/*color: #555655;*/
			color: #FFF;
			cursor: pointer;
		}

			#sidebar .list-group-item:hover i {
				color: #555655;
			}

	#sidebar .nav .active .list-group-item {
		background-color: #5FCAF5;
		/*color: #555655;*/
		color: #FFF;
	}

	#sidebar .form-control {
		background-color: #555655 !important;
	}


		#sidebar .form-control::-webkit-input-placeholder {
			color: white;
		}

		#sidebar .form-control:-moz-placeholder {
			color: white;
		}

		#sidebar .form-control::-moz-placeholder {
			color: white;
		}

		#sidebar .form-control:-ms-input-placeholder {
			color: white;
		}

		#sidebar .form-control::-ms-input-placeholder {
			color: white;
		}

[data-toggle=offcanvas] {
	display: none;
}

#main {
	height: 100%;
	overflow: auto;
}

#popout_bar, #precon_popout_bar {
	left: 180px;
	/*height: calc(100vh);*/
}

#project_cardz {
	display: block !important;
	overflow-y: auto;
	margin-right: 10px;
	margin-left: 10px;
	padding-left: 6px;
	background-color: inherit;
}
/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
	#sidebar {
		min-width: 35px;
		max-width: 40px !important;
		overflow-y: auto;
		overflow-x: visible;
		transition: all 0.25s ease;
		/*transform: translateX(-45px);*/
		/*position: fixed;*/
	}

		#sidebar::-webkit-scrollbar {
			width: 0px;
		}

		#sidebar, #sidebar .list-group {
			min-width: 25px;
			overflow: visible;
		}
			/* overlay sub levels on small screens */
			#sidebar .list-group .collapse.show, #sidebar .list-group .collapsing {
				position: relative;
				z-index: 1;
				width: 190px;
				top: 0;
			}

			#sidebar .list-group > .list-group-item:not([data-toggle=offcanvas]) {
				text-align: center;
				padding: .75rem .5rem;
			}
			/* hide caret icons of top level when collapsed */
			#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
			#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
				display: none;
			}

			/*#sidebar .logout-button {
				min-width: 35px !important;
				max-width: 40px !important;
			}*/

			#sidebar .hide_small {
				display: none;
			}

	.row-offcanvas {
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
		/*width: calc(100% + 160px);*/
		width: calc(100% + 0px);
	}

		.row-offcanvas.active {
			width: calc(100% + 160px);
		}

	.row-offcanvas-left.active #sidebar {
		min-width: 160px;
	}

	.row-offcanvas-left.active {
		left: -160px;
	}

	.row-offcanvas-left.active {
		left: 0;
	}

		.row-offcanvas-left.active #sidebar .hide_small {
			display: inherit;
		}

		.row-offcanvas-left.active .d-md-inline, .row-offcanvas-left.active .d-md2-inline {
			display: inline !important;
		}


		.row-offcanvas-left.active .sidebar-offcanvas {
			position: absolute;
			top: 0;
		}

	[data-toggle=offcanvas] {
		display: inline-block;
	}

	#popout_bar, #precon_popout_bar {
		left: 40px;
	}
}


#sidebar .no-hover-color:hover {
	background-color: inherit !important;
	color: #FFF !important;
}

	#sidebar .no-hover-color:hover i {
		color: #FFF !important;
	}