.wrapper {
	display: flex;
	align-items: stretch;
}

#sidebar {
	width: 250px;
	min-height: 100vh;
	background: #5B7F95;
	color: #fff;
	transition: all 0.3s;
}
#sidebar	 .show-on-toggle {
	display: none;
}

#sidebar.active {
	width: 50px;
}
#sidebar.active     .menu-text {display: none;}

#sidebar.active     .show-xs {
	padding: 12px 10px 12px 8px;
	line-height: 50px;
}

#sidebar.active	 .show-on-toggle {
	display: block;
	font-size: 2em;
	padding: 3px;
}

#sidebar.active	 .sidebar-header {
	padding: 2px;
}

#sidebar.active	 ul.components {
	padding: 2px 0
}

#sidebar.active	 ul li a {
	padding: 1px;
}

#sidebar.active	 ul ul a {
	padding-left: 3px !important;
}

#sidebar a, a:hover, a:focus {
	color: inherit;
	text-decoration: none;
	transition: all .3s
}

#sidebar .sidebar-header {
	padding: 20px;
	background: #5b7f95;
}

#sidebar ul.components {
	padding: 20px 0
}

#sidebar ul li a {
	padding: 10px;
	font-size: 1em;
	display: block
}

#sidebar ul li a:hover {
	color: #5b7f95;
	background: #FFFFFF;
}

#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"] {
	color: #FFFFFF;
	background: #718e9c;
	border-left: 2px solid #FFFFFF;
}

#sidebar ul ul a {
	font-size: .8em !important;
	padding-left: 20px !important;
	background: #5b7f95;
}

#sidebar a[class="collapsed"]::after,#sidebar a[class=""]::after {
	content: "\f107";
	display: inline-block;
	position: absolute;
	left: 170px;
	float: right;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

#sidebar.active a::after{
	line-height: 50px;
	left: 35px;
}

#sidebar a{
	white-space: nowrap;
}

#sidebar a[class=""]::after {
	content: "\f106";
}

#sidebar.active .sidebar-header{
	width: 50px;
}
#sidebar .soustitre{
	padding-left: 10px;
	font-size: 1.1em;
}