.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.space-x-1px > *:not(:first-child) {
	margin-left: 1px;
}

.space-x-20px > *:not(:first-child) {
	margin-left: 20px;
}

.space-y-12px > *:not(:first-child) {
	margin-top: 12px;
}

.space-y-16px > *:not(:first-child) {
	margin-top: 16px;
}

.space-y-24px > *:not(:first-child) {
	margin-top: 24px;
}

.space-y-32px > *:not(:first-child) {
	margin-top: 32px;
}

.articles {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;

	color: var(--vkui--color_text_primary);

	font-size: var(--vkui--font_text--font_size--regular);
	line-height: var(--vkui--font_text--line_height--regular);
	font-family: var(--vkui--font_text--font_family--regular);
	font-weight: var(--vkui--font_text--font_weight--regular);
}

.articles__mobile {
	display: block;
}

.aside-menu_card {
	height: auto;
	padding: var(--vkui--size_base_padding_horizontal--regular);
	margin-top: 4px;
	position: sticky;
	top: 72px;
}

.aside-menu_title {
	text-align: center;
}

.aside-menu-item {
	margin-left: 20px;
}

.articles-container {
	max-width: calc(1144px - 300px - 48px);
}

.articles__mobile .articles-container {
	max-width: unset;
}

.articles-container p {
	font-size: var(--vkui--font_paragraph--font_size--regular);
	line-height: var(--vkui--font_paragraph--line_height--regular);
	font-family: var(--vkui--font_paragraph--font_family--regular);
	font-weight: var(--vkui--font_paragraph--font_weight--regular);
}

.articles-container h1 {
	font-size: var(--vkui--font_title1--font_size--regular);
	line-height: var(--vkui--font_title1--line_height--regular);
	font-family: var(--vkui--font_title1--font_family--regular);
	font-weight: var(--vkui--font_title1--font_weight--regular);
}

.articles-container h2 {
	font-size: var(--vkui--font_title2--font_size--regular);
	line-height: var(--vkui--font_title2--line_height--regular);
	font-family: var(--vkui--font_title2--font_family--regular);
	font-weight: var(--vkui--font_title2--font_weight--regular);
}

.articles-container h3 {
	font-size: var(--vkui--font_title3--font_size--regular);
	line-height: var(--vkui--font_title3--line_height--regular);
	font-family: var(--vkui--font_title3--font_family--regular);
	font-weight: var(--vkui--font_title3--font_weight--regular);
}

.articles-container h3 {
	font-size: var(--vkui--font_title3--font_size--regular);
	line-height: var(--vkui--font_title3--line_height--regular);
	font-family: var(--vkui--font_title3--font_family--regular);
	font-weight: var(--vkui--font_title3--font_weight--regular);
}

.articles a,
.articles a:visited {
	color: var(--vkui--color_text_link);
	text-decoration: none;
}

.articles a:hover {
	color: var(--vkui--color_text_link--hover);
	text-decoration: underline;
}

.articles a:active {
	color: var(--vkui--color_text_link--active);
	text-decoration: underline;
}

.articles-container code {
	background-color: var(--vkui--color_background_secondary);
	border-radius: var(--vkui--size_border_radius--regular);
	padding: 4px;
}

.articles-container pre code {
	display: block;
	padding: var(--vkui--size_base_padding_horizontal--regular)
		var(--vkui--size_base_padding_vertical--regular);
	margin: var(--vkui--size_label_horizontal_margin--regular) 0;
	overflow: auto;
}

.code-tab [data-language] {
	display: none;
}

.code-tab [data-language].code-tab-selected {
	display: block;
}

.code-tab_button {
	background: none;
	border: 0 none;
	cursor: pointer;

	color: var(--vkui--color_text_secondary);

	font-size: var(--vkui--font_text--font_size--regular);
	line-height: var(--vkui--font_text--line_height--regular);
	font-family: var(--vkui--font_text--font_family--regular);
	font-weight: var(--vkui--font_text--font_weight--regular);
}

.code-tab_button:hover {
	color: var(--vkui--color_text_secondary--hover);
}

.code-tab_button:active {
	color: var(--vkui--color_text_secondary--active);
}

.code-tab_button.code-tab-selected {
	color: var(--vkui--color_text_primary);
}





.container {
	max-width: 1144px;
	margin: 0 auto;
	padding: 3rem 1rem;
	width: calc(100% - 2rem);
}

@media screen and (max-width: 1024px) {
	.container {
		padding: 1.5rem 1rem;
	}
}

.my-theme-select,
.my-tags-select,
.my-segmentedControl {
	width: fit-content;
}

.my-tags-select > .vkuiChipsInputBase {
	width: 293px;
}

.my-theme-select > div {
	width: 213px;
}

.my-segmentedControl > div {
	width: 96px;
}

.tokens-content-header,
.tokens-content-item {
	display: flex;
}

.tokens-content-header span {
	color: var(--vkui--color_text_secondary);
}

.tokens-content-item {
	padding: 10px 0;
}

.tokens-content-item > div {
	overflow: visible;
}

.tokens-content-header > div:nth-child(1),
.tokens-content-header > div:nth-child(2),
.tokens-content-item > div:nth-child(1),
.tokens-content-item > div:nth-child(2) {
	padding-right: 20px;
}

.tokens-content-header > div:nth-child(1),
.tokens-content-item > div:nth-child(1) {
	flex-basis: 35%;
}

.tokens-content-header > div:nth-child(2),
.tokens-content-item > div:nth-child(2) {
	flex-basis: 25%;
}

.tokens-content-header > div:nth-child(3),
.tokens-content-item > div:nth-child(3) {
	flex-basis: 40%;
}

.token-name-btn {
	background-color: var(--vkui--color_background_warning);
	border-radius: 0.5rem;
	min-width: 0;
}

.token-name-btn .vkuiButton__content {
	font-weight: var(--vkui--font_weight_accent3);
	font-size: var(--vkui--font_text--font_size--compact);
	line-height: var(--vkui--font_paragraph--line_height--regular);
	padding-right: var(--vkui--size_button_tertiary_small_padding_horizontal--regular);
}

.token-name-btn .vkuiButton__after {
	display: none;
}

.token-name-btn_hover {
	background-color: #ffeabd;
}

.token-name-btn_hover .vkuiButton__content {
	padding-right: 0;
}

.token-name-btn_hover .vkuiButton__after {
	display: block;
}

.separator-header {
	margin: 12px 0 0;
}

.separator-item {
	color: var(--vkui--color_separator_secondary);
}

@media screen and (max-width: 1024px) {
	.separator-header {
		color: var(--vkui--color_separator_secondary);
		width: calc(100% + 2rem);
		margin: 0 0 0 -1rem;
	}

	.tokens-content-item {
		padding: 16px 0 20px;
		display: block;
	}

	.tokens-content-item > div:nth-child(1) {
		padding-right: 0;
	}

	.tokens-content-item > div:nth-child(3) {
		padding-right: 20px;
	}

	.tokens-content-item > *:not(:first-child) {
		margin-top: 12px;
	}

	.token-name-btn {
		min-height: var(--vkui--size_button_medium_height--regular);
	}

	.token-name-btn .vkuiButton__after {
		display: block;
	}

	.token-name-btn .vkuiButton__in {
		justify-content: space-between;
	}
}

@media screen and (max-width: 768px) {
	.tokens-content-container {
		height: calc(100% - 68px - 232px - 16px - 16px);
	}
}

.color-circle {
	border-radius: 50%;
	width: 14px;
	height: 14px;
	background-color: transparent;
	border: 1px solid var(--vkui--color_field_border_alpha);
}