:root{
	--navbar-left--width: 78px;
	--navbar-left--bg: var(--bs-primary);
	--navbar-top--height: 4rem;
}
aside.navbar-left{
	position: fixed;
	top: 0;
	left:0;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
	width: var(--navbar-left--width);
	height: 100vh;
	background: linear-gradient(to bottom, #E6F2FB 0%, #FFFFFF 100%);
	padding: .5rem;
	transition: .5s;
	z-index: var(--navbar-left--zindex, 1000);
	margin-top: var(--navbar-top--height);
	.nav-link-icon, i{
		font-size: 1.25em;;
	}
	.nav{
		flex-direction: column;
		align-items: start;
		--bs-nav-link-color: white;
		.nav-link{
			gap: 1rem;
			align-items: center;
			display: flex;
			justify-content: center;
			padding: .5rem;
			&:hover{
				color: var(--bs-nav-link-color);
			}
			i{
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				color: var(--bs-primary);
				background-color: white;
				flex-shrink: 0; 
			}
		}
		.nav-item.first .nav-link i{
			color: white;
			background-color: var(--bs-primary);
		}
	}
	.nav-link-text{
		display: none;
		color: var(--bs-primary);
	}
}

.navbar-top{
	width: 100%;
	height: var(--navbar-top--height);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 2rem;
	padding-right: 1rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	background: linear-gradient(to right, #E6F2FB 0%, #FFFFFF 100%);
	z-index: var(--navbar-top--zindex, 1000);
	transition: .5s;
	.navbar-top-left {
		display: flex;
		align-items: center;
	}
	.header_toggle, .site-logo {
		display: inline-flex; 
		align-items: center;
	}
	.site-logo {
		max-width: 180px;
		height: auto;
		margin-left: 2rem;
	}
	&::after {
		content: "";
		position: absolute;
		top: 4rem;
		left: var(--navbar-left--width);
		width: 40px;
		height: 40px;
		background: transparent;
		transform: translate(-15%, -15%);
		border-top: 5px solid #E6F2FB;
		border-left: 5px solid #E6F2FB;
		border-top-left-radius: 50%;
	}
}

[data-toggle="app-menu"] {
	cursor: pointer;
}
[data-toggle="app-menu"] .fa-close{
	display: none;
}
[data-toggle="app-menu"] .fa-bars{
	display: block;
}