/* Стили для контейнера с меню */
.menu-left {
    width: 300px; /* Ширина меню */
    background-color: #f4f4f4; /* Цвет фона меню */
    padding: 15px; /* Внутренние отступы для меню */
    transition: width 0.15s; /* Плавный переход для изменения ширины */
    max-height: calc(100vh - 104px); /* Максимальная высота меню с учетом верхней панели */
    overflow-y: auto; /* Прокрутка по вертикали при переполнении */

    /* Настройка полосы прокрутки для Firefox */
    scrollbar-width: thin; /* Тонкая полоса прокрутки */
    scrollbar-color: #BFBFBF #E5E5E5; /* Движек (thumb), трек (фон полосы прокрутки) */
}

/* Стили для скролинга */
.menu-left::-webkit-scrollbar-track {
    background: #E5E5E5; /* Цвет трека (фона полосы прокрутки) */
    border-radius: 4px; /* Скругление углов трека */
}

.menu-left::-webkit-scrollbar-thumb {
    background: #BFBFBF; /* Цвет движка (полосы прокрутки) */
    border-radius: 4px; /* Скругление углов движка */
}

.menu-left::-webkit-scrollbar-thumb:hover {
    background: #7F7F7F; /* Цвет движка при наведении (более яркий) */
}

/* Настройка полосы прокрутки для WebKit-браузеров (Chrome, Safari) */
.menu-left::-webkit-scrollbar {
    width: 8px; /* Ширина полосы прокрутки */
}



/* Узкое меню */
.menu-left.narrow {
	width: 50px; /* Узкая ширина меню */
}

/* Скрытие текста в меню */
.menu-left.hide-text .menu-text {
	display: none; /* Скрыть текст */
}

/* Стили для пунктов меню */
.menu-left-item {
	display: flex; /* Используем flexbox для расположения иконки и текста */
	align-items: center; /* Центрируем элементы по вертикали */
	padding: 5px; /* Уменьшенный отступ */
	border-radius: 5px; /* Скругление углов */
	margin-bottom: 5px; /* Отступ между пунктами меню */
	cursor: pointer; /* Курсор "пальчик" */
	transition: background-color 0.3s; /* Плавный переход для фона */
}

/* Эффект при наведении на пункты меню */
.menu-left-item:hover {
	background-color: #e0e0e0; /* Цвет фона при наведении */
}

/* Стили для иконок в меню */
.menu-left-icon {
	margin-right: 10px; /* Отступ справа для иконки */
	font-size: 20px; /* Размер иконки */
}



/* Стили для выпадающего меню */
.dropdown {
	max-height: 0; /* Начальная высота выпадающего меню */
	overflow: hidden; /* Скрываем переполнение */
	transition: max-height 0.3s ease; /* Плавный переход для высоты */
	padding-left: 20px; /* Отступ для вложенных пунктов */
}


/* Стили для пунктов выпадающего меню */
.dropdown-item {
	padding: 5px; /* Отступ для пунктов выпадающего меню */
	border-radius: 5px; /* Скругление углов */
	transition: background-color 0.3s; /* Плавный переход для фона */
	cursor: pointer; /* Курсор "пальчик" */
}

/* Эффект при наведении на пункты выпадающего меню */
.dropdown-item:hover {
	background-color: #e0e0e0; /* Цвет фона при наведении */
}




/* Стили для выпадающего меню с тонкой полосой прокрутки */
.dropdown.show {
	max-height: 400px; /* Максимальная высота при открытом состоянии */
	overflow-y: auto; /* Вертикальный скролл при переполнении */
	scrollbar-width: thin; /* Тонкая полоса прокрутки */
	scrollbar-color: #BFBFBF #f4f4f4; /* Цвет полосы прокрутки и трека */
}

/* Стили для полосы прокрутки в WebKit-браузерах (Chrome, Safari) */
.dropdown.show::-webkit-scrollbar {
	width: 6px; /* Ширина полосы прокрутки */
}

.dropdown.show::-webkit-scrollbar-track {
	background: #ADD8E6; /* #f4f4f4 Цвет трека (фона полосы прокрутки) */
	border-radius: 3px; /* Скругление углов трека */
}

.dropdown.show::-webkit-scrollbar-thumb {
	background: #BFBFBF; /* #888 Цвет полосы прокрутки */
	border-radius: 3px; /* Скругление углов полосы прокрутки */
}

.dropdown.show::-webkit-scrollbar-thumb:hover {
	background: #A0A0A0; /* #666 Цвет полосы прокрутки при наведении */
}



/* Мобильные стили */
@media (max-width: 768px) {
	.menu-left {
		display: none; /* Скрыть меню на мобильных устройствах */
	}

	.menu-left.show {
		display: block; /* Показать меню, когда оно активировано */
		width: 200px; /* Ширина меню при открытии */
	}
}