/* Цветные закладки каталога на главной (меню id=4) */

.tab_content_wrapper {
	--active-tab: #2563eb;
}

.wrapp_tab_link li {
	--tab: #2563eb;
	--tab-hover: #3b82f6;
}

/* 1 Банковское — синий */
.wrapp_tab_link li:nth-child(1) {
	--tab: #1d4ed8;
	--tab-hover: #3b82f6;
}

/* 2 Весовое — янтарный */
.wrapp_tab_link li:nth-child(2) {
	--tab: #c2410c;
	--tab-hover: #ea580c;
}

/* 3 Кассовое — изумруд */
.wrapp_tab_link li:nth-child(3) {
	--tab: #047857;
	--tab-hover: #10b981;
}

/* 4 Идентификация — фиолетовый */
.wrapp_tab_link li:nth-child(4) {
	--tab: #6d28d9;
	--tab-hover: #8b5cf6;
}

/* 5 Фасовочное — коралл */
.wrapp_tab_link li:nth-child(5) {
	--tab: #be123c;
	--tab-hover: #f43f5e;
}

/* 6 Ресторанное — ягодный */
.wrapp_tab_link li:nth-child(6) {
	--tab: #9d174d;
	--tab-hover: #db2777;
}

/* 7 Офисное — бирюза */
.wrapp_tab_link li:nth-child(7) {
	--tab: #0e7490;
	--tab-hover: #06b6d4;
}

/* 8 Расходники — олива */
.wrapp_tab_link li:nth-child(8) {
	--tab: #4d7c0f;
	--tab-hover: #84cc16;
}

.wrapp_tab_link li a {
	background-image: none !important;
	background-color: var(--tab) !important;
	color: #fff !important;
	-webkit-mask-image: url(../img/tab_no_active.png);
	mask-image: url(../img/tab_no_active.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 10px top;
	mask-position: 10px top;
	-webkit-mask-size: 100% 97%;
	mask-size: 100% 97%;
	transform: translateY(0);
	transition: transform .22s ease, filter .22s ease, background-color .22s ease, color .22s ease !important;
	filter: none;
}

.wrapp_tab_link li:first-child a {
	background-image: none !important;
	-webkit-mask-image: url(../img/tab_no_active.png);
	mask-image: url(../img/tab_no_active.png);
	-webkit-mask-position: left top;
	mask-position: left top;
	-webkit-mask-size: 96% 97%;
	mask-size: 96% 97%;
}

/* Подъём только у невыбранной при наведении */
.wrapp_tab_link li a:hover:not(.active) {
	background-image: none !important;
	background-color: var(--tab-hover) !important;
	color: #fff !important;
	z-index: 12;
	transform: translateY(-4px);
	filter: brightness(1.05);
}

/* Выбранная: на месте, белая, цветной текст, та же форма что у обычных */
.wrapp_tab_link li a.active,
.wrapp_tab_link li a.active:hover {
	background-image: none !important;
	background-color: #ffffff !important;
	color: var(--tab) !important;
	z-index: 15;
	transform: translateY(0) !important;
	filter: none !important;
	-webkit-mask-image: url(../img/tab_no_active.png);
	mask-image: url(../img/tab_no_active.png);
	-webkit-mask-position: 10px top;
	mask-position: 10px top;
	-webkit-mask-size: 100% 97%;
	mask-size: 100% 97%;
}

.wrapp_tab_link li:first-child a.active,
.wrapp_tab_link li:first-child a.active:hover {
	-webkit-mask-position: left top;
	mask-position: left top;
	-webkit-mask-size: 96% 97%;
	mask-size: 96% 97%;
}