.content-wrapper > * + *{
	margin-top: 1.25rem;
}

/* SIDEBAR */
.sidebar{
	display: grid;
	grid-template-rows: auto 1fr;
	align-self: start;
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1111;
	transition: width 0.2s;
	margin-top: -6rem;
	height: 100vh;
	grid-column: 1;
	grid-row: 1;
}

.sidebar-logo{
	width: 6rem;
	background-color: var(--sidebar-bg);
	padding: 1rem;
}

.sidebar-content{
	overflow-x: visible;
	overflow-y: auto;
	background-color: var(--sidebar-bg);
	padding-left: 0;
	box-sizing: content-box; 
	box-shadow: rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(94,92,154,.1) 5px 0px 25px 0px;;
}

.sidebar-content::-webkit-scrollbar {
    display: none;
}

.sidebar-content{
	-ms-overflow-style: none; 
    scrollbar-width: none; 
}

.sidebar .nav{
	display: block;
}

.nav-sidebar li:not(:last-child){
	border-bottom: 1px dashed var(--sidebar-divider);
}

.nav-sidebar > .nav-item > .nav-link {
	display: grid;
	grid-template-columns: 2rem auto;
	align-items: center;
	justify-content: start;
	padding-left: 1.75em;
	padding-right: 1.75em;
	min-height: 4.5rem;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--sidebar-nav-clr);
	text-transform: uppercase;
}
.nav-sidebar > .nav-item.nav-item-submenu > .nav-link{
	position: relative;
}

.nav-sidebar > .nav-item.nav-item-submenu > .nav-link:after{
	content: "\e5e1";
	font-family: 'Material Symbols Outlined';
	position: absolute;
	font-size: 14px;
	right: 12px;
	top: calc(50% + 2px);
	transform: translateY(-50%);
	display: none;
}


.nav-sidebar .nav-item .nav-link > span,
.nav-sidebar .nav-item-submenu > .nav-link::after{
	display: none;
}

.nav-sidebar .nav-item .nav-link > span{
	white-space: nowrap;
	opacity: 0;
}


.sidebar:hover .nav-sidebar .nav-item .nav-link > span,
.sidebar:hover .nav-sidebar > .nav-item.nav-item-submenu > .nav-link:after{
	display: block;
	animation: fadeIn 0.5s forwards;
}	

.sidebar:hover .nav-sidebar > .nav-item > .nav-link{
	grid-gap: 1rem;
	gap: 1rem;
}

.sidebar:hover .nav-sidebar > .nav-item > .nav-link > img,
.sidebar:hover .nav-sidebar > .nav-item > .nav-link > i{
	opacity: 0.5;
} 


.nav-sidebar .nav-group-sub {
	width: 305px;
	position: absolute;
	top: 72px;
	left: 100%;
	bottom: 0;
	overflow: auto;
	font-size: 1.1rem;
	background-color: var(--submenu-active-bg);
	color: var(--sidebar-sub-nav-clr);
	display: none;
	opacity: 0;
}

.nav-sidebar .nav-group-sub .nav-link{
	min-height: 4.5rem;
	padding: 1.25em 1.5em;
	transition: 0.5s;
}


.nav-sidebar .nav-group-sub .nav-link:hover,
.nav-sidebar .nav-group-sub .nav-link.active{
	background-color: var(--sidebar-sub-nav-hvr-bg);
	color: var(--sidebar-sub-nav-hvr-clr);
}



.nav-sidebar .nav-item-submenu.active-submenu .nav-group-sub{
	display: block;
	animation: fadeIn 0.5s forwards;
}


.nav-sidebar > .nav-item.nav-item-submenu.nav-item-open > .nav-link,
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item:hover > .nav-link,
.nav-sidebar > .nav-item:focus > .nav-link{
	
	background-color: var(--sidebar-nav-hvr-bg);
	color: var(--sidebar-nav-hvr-clr);
	
}
.nav-sidebar .nav-item.nav-item-submenu.active-submenu > .nav-link{
	background-color: var(--submenu-active-bg) !important;
	color: var(--sidebar-sub-nav-hvr-clr) !important;
}
.nav-sidebar .nav-item.nav-item-submenu.active-submenu > .nav-link svg{
	filter: invert(var(--not-invert-in-dark, 1));
}
.nav-sidebar > .nav-item.nav-item-submenu.nav-item-open > .nav-link svg,
.nav-sidebar > .nav-item > .nav-link.active svg,
.nav-sidebar > .nav-item:hover > .nav-link svg,
.nav-sidebar > .nav-item:focus > .nav-link svg{
	
	filter: invert(var(--not-invert-in-dark, 1));
}


.nav-sidebar > .nav-item.nav-item-submenu.nav-item-open > .nav-link img,
.nav-sidebar > .nav-item.nav-item-submenu.nav-item-open > .nav-link i,
.nav-sidebar > .nav-item > .nav-link.active > img,
.nav-sidebar > .nav-item > .nav-link.active > i,
.nav-sidebar > .nav-item:hover > .nav-link > img,
.nav-sidebar > .nav-item:focus > .nav-link > i{
	filter: brightness(0) invert(var(--not-invert-in-dark, 1));
}

/* SIDEBAR */



.page-header{
	position: sticky;
	top: var(--header-height);
	right: 0;
	z-index: 111;
	background-color: var(--card-style-bg-color);
}

.page-header-content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0.3rem;
}

.page-header .header-elements .btn:not([class*="text-"]):not([class*="bg--"]):not([class*="c--"]){
	background-color: var(--clr-blk-7fb0b0, var(--clr-blk-475a5a)) !important;
	border-color: var(--clr-blk-7fb0b0, var(--clr-blk-475a5a)) !important;
	color:  var(--text-white, #fff);
}

.page-header .header-elements .btn,
.page-header .header-elements .link{
	text-transform: uppercase;
	font-size: 1.025rem;
}

.page-header .header-elements{
	padding: 1rem 1.25rem;
}

.header-elements > * + *{
	margin-left: 0.8rem;
}


@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}