:root {
	--tab-padding-h: 10px;
	--tab-decor-offset-h: 5px;
}

.tabs {
	background: var(--bg2);
	border-radius: var(--border-radius);
	display: flex;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--bg2-darken10) var(--bg2-darken3); /* «цвет ползунка» «цвет полосы скроллбара» */
	scrollbar-width: thin;
}
/* полоса прокрутки (скроллбар) */
.tabs::-webkit-scrollbar {
	width: 20px;
	height: 8px;
	background-color: var(--bg2-darken3);
	border-radius: calc(var(--border-radius) - 1px);
}
/* ползунок скроллбара */
.tabs::-webkit-scrollbar-thumb {
	background-color: var(--bg2-darken10);
	border-radius: calc(var(--border-radius) - 1px);
}
.tabs::-webkit-scrollbar-thumb:hover {
	background-color: var(--emphasize1);
}
.tabs__item {
	overflow: hidden;
	text-align: center;
	padding: 15px var(--tab-padding-h);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tabs__item:not(:first-child) {
	border-left: 2px solid var(--bg2);
}
.tabs__item:not(.active) {
	color: var(--text-color2);
	font-weight: 600;
}
.tabs__item:not(.active):hover {
	background: #ffffff;
}
.tabs__item.active {
	font-weight: 700;
	color: var(--emphasize1);
}
.tabs__item.active:before {
	content: '';
	display: block;
	position: absolute;
	bottom: -4px;
	height: 8px;
	left: var(--tab-decor-offset-h);
	right: var(--tab-decor-offset-h);
	background:var(--emphasize1);
	border-radius: calc(var(--border-radius) - 1px);;
}

.tabs__counter {
	width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	text-align: center;
	background: var(--bg-dark);
	color:white;
	font-size: 11px;
	font-weight: 600;
	position: absolute;
	top:-11px;
	left: 50%;
	margin-left: -11px;
	overflow: hidden;
	box-shadow: -3px 3px 7px 0 hsla(var(--bg-darkest-h), var(--bg-darkest-s), var(--bg-darkest-l), 40%);
}

.tabs_mini .tabs__item {
	padding: 11px var(--tab-mini-padding-h, var(--tab-padding-h));
}
.tabs_mini .tabs__item.active:before {
	left: var(--tab-mini-decor-offset-h, var(--tab-decor-offset-h));
	right: var(--tab-mini-decor-offset-h, var(--tab-decor-offset-h));
}

.tabs_delimiter-top {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: 1px solid var(--bg2-darken10);
}

@media all and (max-width: 459px) {
	:root {
		--tab-padding-h: 10px;
		--tab-decor-offset-h: 5px;
	}
}

@media all and (min-width: 460px) and (max-width: 767px) {
	:root {
		--tab-padding-h: 17px;
		--tab-decor-offset-h: 7px;
		
		--tab-mini-padding-h: 13px;
		--tab-mini-decor-offset-h: 3px;
	}
}

@media all and (min-width: 768px) {
	:root {
		--tab-padding-h: 25px;
		--tab-decor-offset-h: 15px;
		
		--tab-mini-padding-h: 18px;
		--tab-mini-decor-offset-h: 8px;
	}
}

@media all and (min-width: 1024px) {
	.tabs__item {
		font-size: 16px;
	}
	
	.tabs_mini .tabs__item {
		font-size: 1rem;
	}
}

@media print {
	.tabs {
		display: none;
	}
}

.tabs-vertical {
	background: var(--bg2);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--bg2-darken10) var(--bg2-darken3); /* «цвет ползунка» «цвет полосы скроллбара» */
	scrollbar-width: thin;
}
/* полоса прокрутки (скроллбар) */
.tabs-vertical::-webkit-scrollbar {
	width: 8px;
	height: 20px;
	background-color: var(--bg2-darken3);
	border-radius: calc(var(--border-radius) - 1px);;
}
/* ползунок скроллбара */
.tabs-vertical::-webkit-scrollbar-thumb {
	background-color: var(--bg2-darken3);
	border-radius: calc(var(--border-radius) - 1px);;
}
.tabs-vertical::-webkit-scrollbar-thumb:hover {
	background-color: var(--emphasize1);
}
.tabs-vertical__item {
	overflow: hidden;
	padding-left: 15px;
	padding-right: 15px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.tabs-vertical__item:not(:first-child) {
	border-top: 2px solid var(--bg2);
}
.tabs-vertical__item:not(.active) {
	color: var(--text-color2);
	font-weight: 600;
}
.tabs-vertical__item:not(.active):hover {
	background: #ffffff;
}
.tabs-vertical__item.active {
	font-weight: 700;
	color: var(--emphasize1);
}
.tabs-vertical__item.active:before {
	content: '';
	display: block;
	position: absolute;
	width: 8px;
	background: var(--emphasize1);
	border-radius: 4px;
}
@media all and (max-width: 459px) {
	.tabs-vertical__item {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.tabs-vertical__item:before {
		top: 5px;
		bottom: 5px;
	}
}
@media all and (min-width: 460px) and (max-width: 767px) {
	.tabs-vertical__item {
		padding-top: 17px;
		padding-bottom: 17px;
	}
	.tabs-vertical__item:before {
		top: 7px;
		bottom: 7px;
	}
}
@media all and (min-width: 768px) {
	.tabs-vertical__item {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.tabs-vertical__item:before {
		top: 15px;
		bottom: 15px;
	}
}
@media all and (min-width: 1024px) {
	.tabs-vertical__item {
		font-size: 16px;
	}
}
.tabs-vertical.left .tabs-vertical__item {
	text-align: right;
	justify-content: flex-end;
}
.tabs-vertical.left .tabs-vertical__item.active:before {
	right: -4px;
}
.tabs-vertical.right .tabs-vertical__item {
	text-align: left;
	justify-content: flex-start;
}
.tabs-vertical.right .tabs-vertical__item.active:before {
	left: -4px;
}
@media print {
	.tabs-vertical {
		display: none;
	}
}

.js-tab-btn {
	user-select: none;
	cursor: default;
}
.js-tab-btn:not(.active) {
	cursor: pointer;
}
@media screen {
	.js-tab:not(.active) {
		display: none;
	}
}