:root {
	--leftbar-width: 60px;
}

/* == header */

header {
	position: fixed;
	z-index: 999;
	top: 10px;
	left: 0px;
	width: 100%;
	height: 65px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-direction: column;
	padding-left: 120px;
	padding-right: 40px;
}

header::before {
	content: '';
	position: fixed;
	z-index: -1;
	left: 0px;
	top: 0px;
	width: 100%;
	height: calc(65px + 20px);
	background: linear-gradient(180deg,rgba(245, 235, 235, 1) 0%, rgba(245, 235, 235, .8) 80%, rgba(245, 235, 235, 0) 100%);
}

header .social {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

header .social .text {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
}

header .social .text p.name {
	font-size: 10pt;
	font-weight: 400;
	color: var(--color-text-1);
	margin-bottom: 0px;
}

header .social .text p.email {
	font-size: 9pt;
	font-weight: 300;
	color: #987C7C;
	margin-bottom: 0px;
}

header .social .pp {
	cursor: pointer;
	width: 45px;
	height: 45px;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFF5F4;
	font-size: 10pt;
	font-weight: 600;
	color: #624548;
}

/* == navbar */

nav, nav * {
	transition: all 400ms ease;
}

nav {
	padding: 20px;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

nav .sidebar {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
}

nav .sidebar .brand {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding-left: 5px;
	width: 100%;
}

nav .sidebar .brand img[data-type="closed"] {
	height: 45px;
	cursor: pointer;
}

nav .sidebar .brand img[data-type="opened"] {
	height: 45px;
	cursor: pointer;
	display: none;
}

nav .sidebar .menu {
	position: relative;
	background: #ffffff;
	height: 100%;
	border-radius: 30px;
	width: 60px;
	padding: 5px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-direction: column;
}

nav .sidebar .menu .top {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	gap: 5px;
}

nav .sidebar .menu .footer {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	flex-direction: column;
	gap: 5px;
}

nav .sidebar .menu button {
	width: 50px;
	height: 50px;
	padding: 0px 15px;
	border-radius: 50px;
	background: #FBFBFB;
	transition: all 400ms ease;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #565859;
	border: none;
}

nav .sidebar .menu button span {
	white-space: nowrap;
	font-size: 9pt;
	width: 0px;
	opacity: 0;
}

nav .sidebar .menu button:hover {
	background: #F2F2F2;
}

nav .sidebar .menu button svg {
	width: 20px;
	stroke-width: 1.5px;
	min-width: 20px;
}

nav .sidebar .menu button[data-status="active"] {
	background: var(--color-primary);
	color: #ffffff;
}

nav .sidebar .menu button[data-status="active"]:hover {
	background: var(--color-primary-hover);
}

nav .sidebar .menu button[data-status="active"] svg {
	stroke-width: 2px;
}

nav .menu .toggle {
	width: 17px;
	height: 19px;
	border-radius: 7px;
	border: 1px solid #EEF2F3;
	background: #ffffff;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 0px;
	top: 30px;
	transform: translate3d(50%, -50%, 0px);
	cursor: pointer;
	margin-right: 2px;
}

nav .menu.opened .toggle svg {
	rotate: -180deg;
	margin-right: 2px;
}

nav .menu .toggle svg {
	height: 8px;
	color: #3F5A66;
	stroke-width: 2px;
}

nav:has(.menu.opened) {
	width: 240px;
}

nav .menu.opened {
	width: 200px;
	border-radius: 30px;
}

nav:has(.menu.opened) img[data-type="closed"] { display: none; }
nav:has(.menu.opened) img[data-type="opened"] { display: flex; }

nav .sidebar .menu a {
	text-decoration: none;
}

nav .sidebar .menu.opened button {
	width: 100%;
	justify-content: flex-start;
}

nav .sidebar .menu.opened button[data-status="active"] span {
	color: #ffffff;
}

nav .sidebar .menu.opened button span {
	opacity: 1;
	width: 100%;
	text-align: left;
	margin-left: 10px;
	color: #565859;
}