:root {
	--menu-left-bg: #ffffff; /*цвет фона левого меню*/
	--menu-left-text: #000000; /*цвет текста левого меню*/
}
.left-menu {
	display: flex;
	flex-direction: column;
	margin: 20px 0;
	gap: 20px;
}
.left-menu-block {
	font-family: var(--font-Condensed);
	font-size: 1.2rem;
	letter-spacing: -0.04em;
	text-align: center;
	color: var(--menu-left-text);
	background: var(--menu-left-bg);
	border: 1px solid var(--border-color);
	border-top: 4px solid var(--brand);
	border-radius: var(--radius);
	box-shadow: var(--shadow-bottom);
}
.left-menu-title {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 15px 0 5px;
	line-height: 1;
}
.left-menu-title:after {
	width: 100%;
	height: 2px;
	content: "";
	background: var(--gradient-hr);
	display: block;
	margin: 2px 0;
}
.sidebar-menu {
	width: 100%;
	overflow: hidden;
	padding: 0 0px 10px 0px;
}
.menu-item {
	display: block;
	padding: 2px 8px;
	transition: all 0.3s;
	cursor: pointer;
}
.menu-item > .menu-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.menu-item > .menu-header:before {
	border-bottom: 1px dashed var(--menu-left-text);
	content: '';
	position: absolute;
	bottom: 17px;
	width: calc(100% - 115px);
	left: 100px;
}
.menu-item:hover > .menu-header:before,
.menu-item.active > .menu-header:before {
	border-color: var(--brand);
}
.menu-item > .menu-header > img {
	padding: 2px;
	border: 1px solid var(--white);
	border-radius: var(--radius);
	transition: border-color 0.2s linear;
}
.menu-item:hover > .menu-header > img,
.menu-item.active > .menu-header > img {
	border-color: var(--brand);
}
.menu-item > .menu-header > span {
	padding-right: 5px;
	background: var(--menu-left-bg);
	z-index: 1;
	text-align: left;
	transition: color 0.2s linear;
}
.menu-item:hover > .menu-header > span,
.menu-item.active > .menu-header > span {
	color: var(--brand);
} 
.menu-item > .menu-header:after {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	background: #ffffff;
	margin-left: auto;
	content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='currentColor' d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/></svg>");
	display: inline-block;
	z-index: 1;
}
.menu-item.active > .menu-header:after {
	display: inline-block;
	transform: rotate(-180deg);
	color: var(--brand);
}
.menu-item:hover > .menu-header:after,
.menu-item.active > .menu-header:after {
	content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23f39313' d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/></svg>");
}
.menu-content {
	font-size: 1.2rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s linear, padding 0.2s linear;
	padding: 0px 0 0px 15px;
}
.menu-content.open {
	padding: 5px 0 5px 15px;
	max-height: var(--max-height);
}
.menu-link {
	font-size: 1.15rem;	
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	gap: 0.5rem;
	transition: border-color 0.2s linear;
	cursor: pointer;
}
.sidebar-menu > .menu-link {
	padding: 2px 8px;
}
.menu-link:before {
	border-bottom: 1px dashed var(--menu-left-text);
	content: '';
	position: absolute;
	bottom: 17px;
	width: calc(100% - 115px);
	left: 100px;
}
.menu-link:hover:before,
.menu-link.active:before {
	border-color: var(--brand);
}
.menu-link > img {
	padding: 2px;
	border: 1px solid var(--white);
	transition: color 0.2s linear, border-color 0.2s linear;
	border-radius: var(--radius);
}
.menu-link:hover > img,
.menu-link.active > img {
	border-color: var(--brand);
}
.menu-link > span {
	padding-right: 5px;
	background: var(--menu-left-bg);
	z-index: 1;
	text-align: left;
}	
.menu-link > b {
	font-weight: 600;
	padding-left: 5px;
	margin-left: auto;
	background: var(--menu-left-bg);
	z-index: 1;
}
.menu-link:hover > span,
.menu-link.active > span,
.menu-link:hover > b,
.menu-link.active > b {
	color: var(--brand);
}