@charset "utf-8";

:root {
	color-scheme: light dark;
	--main-menu-height: 76px;
	--header-top: 94px;
	--main-container-top: 150px;
	--footer-bottom: 100px;
	--left-right-width: 300px;
	--pad-1: 4px;
	--pad-2: 8px;
	--pad-3: 16px;
	--pad-4: 24px;
	--pad-5: 48px;
	--font-size: 16px;
	--line-height-coef: 1.2;
	--br-1: 30px;
	--slide-animation-width: 50px;
	--viewer-animation: .65s cubic-bezier(.3, 1, .3, 1);
	--blue: #5a7dc4;
	--color-primary: #d97428;
	--bg-0: #1e1f22;
	--bg-1: #24262a;
	--bg-2: #313338;
	--bg-3: #3f4145;
	--bg-4: #515357;
	--bg-5: #63666a;
	--inp-color: #a2a2a2;
	--inp-bg: #1a1c1f;
	--inp-bg-disabled: var(--bg-3);
	--inp-color-disabled: #888;
	--nc-0: #d66e34;
	--nc-1: #b8aaff;
	--nc-2: #00579f;
	--nc-3: #8b3ffd;
	--nc-4: #59a840;
	--nc-5: #d45124;
	--nc-6: #de6489;
	--nc-7: #20bba1;
	--nc-8: #f8b301;
	--nc-9: #09b;
	--nc-10: #7bbeff;
	--nc-11: #e542ff;
	--nc-12: #a36c59;
	--nc-13: #8ba259;
	--nc-14: #00a9ff;
	--nc-15: #a20bff;
	--bg-head: #555a;
	--bg-head-active: #fff4;
	--br-head: #b96;
	--br-window: #853;
	--bgh-head-btn: #fa3;
	--text-color: #ccc;
	--t-head-active: #000;
	--t-head: #000;
	--t-err: #600;
	--trn: .2s;
	--win-m-br: 1px solid #000;
	--win-m-brr: 3px;
	--win-m-bg: #555;
	--win-m-t: #e9e9e9;
	--t-green: #89b864;
	--t-red: #ff6868;
	--trash: #aaa;
	--normal: #d9d9d9;
	--rare: #39ff39;
	--heroic: #0e7cff;
	--epic: #cc34f7;
	--legendary: #ffb900;
	--iv-bg: #0000004c;
	--iv-ct: #fff;
	--iv-ctsh: 1px 1px 2px #000;
	--lc-1: #0f0;
	--lc-2: #fa0;
	--input-text-bg: var(--bg-3);
	--btn-bg: #6d7b8f;
	--btn-hover-bg: #853;
	--input-switch-bg-off: #6f6f6f;
	--input-switch-bg-on: #89b864;
	--input-switch-dot-bg-off: #959595;
	--input-switch-dot-bg-on: #d5f3bd;
	--chat-list-title-bg: #47494c;
	--chat-list-hover-grad-start: #0000;
	--chat-list-hover-grad-end: var(--chat-list-title-bg);
	--chat-list-usersCount-bg: #252525;
	--chat-list-unreadCount-bg: #5a7dc4;
	--w-max: 1220px;
	--w-6: 1054px;
	--w-5: 888px;
	--w-4: 722px;
	--w-3: 560px;
}

@media (width <= 650px) {
	:root {
		--header-top: 74px;
		--main-container-top: 118px;
	}
}

*::-webkit-scrollbar {
	width: var(--pad-2);
	height: var(--pad-2);
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
	background-color: transparent;
	transition: background-color .5s;
	border-radius: var(--pad-3);
}

*:hover::-webkit-scrollbar-thumb {
	background-color: var(--bg-2);
}

*:hover::-webkit-scrollbar-track {
	background-color: var(--bg-0);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

* {
	box-sizing: border-box;
	outline: none;
	font-family: 'Emojee', 'Cuprum', 'Roboto', Arial, sans-serif;
}

/*#senseWindows.touch *::-webkit-scrollbar {
	width: 20px;
	height: 20px;
}*/

html, body {
	background-color: var(--bg-1);
	color: var(--text-color);
	overflow: hidden;
	touch-action: manipulation;
	padding: 0;
	margin: 0;
	color-scheme: light dark;
}

body {
	font-size: var(--font-size);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--bg-1);
		color: var(--text-color);
	}
}

img {
	vertical-align: middle;
}

.b {
	font-weight: bold;
}

.upp {
	text-transform: uppercase;
}

.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.unselectable {
	-webkit-user-select: none !important;
	user-select: none !important;
}

.imax {
	width: 100%;
	height: auto;
}

.green {
	color: var(--t-green) !important;
}

.red {
	color: var(--t-red);
}

.cl, .quoteCl {
	cursor: pointer;
}

.lc {
	> .spinner {
		width: 24px;
		height: 24px;

		&::before {
			display: inline-block;
			vertical-align: middle;
			border-radius: var(--pad-3);
			box-sizing: border-box;
			border-top: 4px solid var(--lc-1);
			border-bottom: 4px solid var(--lc-2);
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			animation: loading_rotation .5s linear .2s infinite;
			content: '';
			width: 100%;
			height: 100%;
		}

		> .text {
			margin-left: var(--pad-2);
		}
	}
}

@keyframes loading_rotation {
	100% {
		transform: rotate(360deg);
	}
}

.fillBlock {
	position: relative;
	min-width: 100%;
	min-height: 100%;
}

.fillBlockByPosition {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

button, .gButton {
	border: none;
	background-color: var(--btn-bg);
	padding: var(--pad-3);
	font-size: calc(var(--font-size) + 4px);
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s, color .3s;
	border-radius: var(--pad-4);

	@media (hover: hover) {
		&:hover {
			background-color: var(--btn-hover-bg);
		}
	}
}

.iconWithTextButton {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--pad-1);
	cursor: pointer;

	> .icon {
		width: 24px;
		height: 24px;
		background-size: contain;
	}
}

.svgTextButton {
	color: #9ec6ff;
	cursor: pointer;
	display: inline-block;
	transition: color var(--trn);
	font-size: calc(var(--font-size) + 2px);

	@media (hover: hover) {
		&:hover {
			color: var(--text-color) !important;
		}
	}

	> svg {
		width: 16px;
		height: 16px;
		vertical-align: middle;
	}
}

a {
	text-decoration: none;
	color: #a73;
	transition: color var(--trn);

	> .social {
		vertical-align: middle;
		max-height: 24px;
		max-width: 24px;
		opacity: .7;
		transition: opacity var(--trn);
	}

	@media (hover: hover) {
		&:hover {
			color: #fa0;

			> .social {
				opacity: 1;
			}
		}
	}
}

input[role='switch'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	flex: 0 0 44px;
	width: 44px;
	height: 22px;
	border-radius: var(--pad-3);
	background-color: var(--input-switch-bg-off);
	position: relative;
	transition: background-color var(--trn);

	&::before {
		content: '';
		position: absolute;
		right: 23px;
		top: 2px;
		width: 18px;
		height: 18px;
		background-color: var(--input-switch-dot-bg-off);
		border-radius: var(--pad-2);
		transition: right var(--trn), background-color var(--trn);
	}

	&:checked {
		background-color: var(--input-switch-bg-on);
	}

	&:checked::before {
		background-color: var(--input-switch-dot-bg-on) !important;
		right: 2px;
	}
}

.input:disabled {
	background-color: var(--inp-bg-disabled);
	color: var(--inp-color-disabled);
}

.emoji {
	/*font-family: emoji;*/
	font-variant-emoji: emoji;
}

/*.tooltip {
	position: fixed;
	background-color: #222f;
	padding: 10px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--trn);
	z-index: 100;
	white-space: nowrap;
	transform: translatex(-50%);
}

.tooltip.show {
	opacity: 1;
}*/

.iconButton {
	cursor: pointer;
	flex: 0 0 24px;
	height: 24px;

	> .icon {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

.hideAnimation {
	transition: opacity .4s;
	opacity: 1;

	&.hidden {
		opacity: 0;
		pointer-events: none;
	}
}

#windowsWrapper {
	position: absolute;
	z-index: 100;

	> .window {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 10% 0;

		> .bg {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: transparent;
			transition: background-color .6s;
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);

			&.fill {
				background-color: #0008;
			}
		}

		> .container {
			position: relative;
			transition: opacity .6s, transform .6s cubic-bezier(0.19, 1, 0.22, 1);
			max-height: 600px;
			max-width: 800px;

			> .closeBtn {
				position: absolute;
				top: 28px;
				right: 32px;
				z-index: 5;
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;

				> .icon {
					width: 16px;
					height: 16px;
				}
			}

			> .title {
				position: relative;
				font-size: calc(var(--font-size) + 8px);
				font-weight: bold;
				color: #fff;
				padding: var(--pad-4) var(--pad-5) 60px 36px;;
				border-radius: 50px 50px 0 0;
				background-image: linear-gradient(to bottom, #3f414533, transparent 95%);

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: 50px 50px 0 0;
					border: 4px solid transparent;
					background: linear-gradient(to bottom, #ffffff11, #ffffff08 85%, #9990 95%) border-box;
					mask: linear-gradient(#000 0 0) padding-box,
					linear-gradient(#000 0 0);
					mask-composite: exclude;
					pointer-events: none;
				}
			}

			> .content {
				margin-top: -42px;
				border-radius: 50px;
				background-color: #3f4145aa;
				position: relative;
				padding: 36px;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: 50px;
					border: 4px solid transparent;
					background: linear-gradient(to bottom, #ffffff12, #ffffff04) border-box;
					mask: linear-gradient(#000 0 0) padding-box,
					linear-gradient(#000 0 0);
					mask-composite: exclude;
					pointer-events: none;
				}
			}
		}
	}
}

.profileWindow {
	> .bg {
		background-color: #24262aaa !important;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	> .container {
		> .closeBtn {
			position: fixed !important;
			top: 15px !important;;
			right: 5px !important;
		}

		> .content {
			background-color: transparent !important;
			border: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;

			&::before {
				display: none;
			}
		}
	}
}

.mainConnecting {
	pointer-events: none;
	position: absolute;

	> .item {
		position: fixed;
		top: 10px;
		left: 50%;
		transform: translatex(-50%);
		padding: var(--pad-2) var(--pad-5);
		background-color: #fff1;
		background-position: left 10px center;
		background-size: 24px 24px;
		background-repeat: no-repeat;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		border-radius: var(--pad-4);
		font-weight: bold;
		color: #fff;
		font-size: calc(var(--font-size) + 2px);
		line-height: 24px;
		white-space: nowrap;

		&.hide {
			transition: top .2s cubic-bezier(0.85, 0, 0.15, 1), opacity .2s;
			top: -50px;
			opacity: 0;
		}

		&.disconnected {
			z-index: 9995;
			background-image: url(https://cdn.fch.su/resources/icons/connection_disconnected.png);
			background-color: #6224;
		}

		&.updating {
			z-index: 9996;
			background-image: url(https://cdn.fch.su/resources/icons/connection_updating.png);
		}

		&.smiles {
			z-index: 9997;
			background-image: url(https://cdn.fch.su/resources/icons/download.png);
		}

		&.success {
			z-index: 9998;
			background-image: url(https://cdn.fch.su/resources/icons/connection_success.png);
			background-color: #3744;
		}
	}
}

.accordion {
	> .item {
		> .title {
			margin: var(--pad-3) 0;
			padding: var(--pad-3) var(--pad-5);
			font-weight: bold;
			background-color: #7af3;
			cursor: pointer;
			border-radius: var(--pad-4);
		}

		> .content {
			overflow: hidden;
			transition: max-height var(--trn);
			max-height: inherit;
			padding: 0 var(--pad-4);

			&.hide {
				max-height: 0;
			}
		}
	}
}

#noty {
	position: fixed;
	bottom: 80px;
	right: 20px;
	display: flex;
	flex-direction: column;
	text-align: right;
	align-items: center;
	z-index: 200;
	max-width: 500px;

	@media (width <= 1150px) {
		bottom: auto;
		top: 20px;
		left: 50%;
		right: auto;
		transform: translatex(-50%);
	}

	> .item {
		display: flex;
		margin: var(--pad-1);
		background-color: #666c;
		border-radius: var(--pad-3);
		transition: opacity .5s, box-shadow 1s, background-color 1s, transform 1s, border-color .5s;
		opacity: 0;
		position: relative;
		overflow: hidden;
		align-items: center;
		padding: var(--pad-1) var(--pad-2);
		text-align: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 380px;
		color: #fff;

		& b {
			color: #fff;
		}

		&.glow::before {
			animation: notif_blink;
			animation-duration: 1.5s;
			animation-delay: 0.6s;
			animation-iteration-count: 1;
			animation-timing-function: linear;
		}

		&::before {
			content: '';
			position: absolute;
			background: linear-gradient(65deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
			width: 150px;
			height: 100%;
			top: 0;
			z-index: 1;
			left: -150px;
		}

		> .icon, > .content {
			margin: var(--pad-2);
		}

		> .icon > img {
			max-height: 64px;
			max-width: 64px;
		}

		> .content {
			max-width: 350px;
			overflow-wrap: anywhere;
		}

		> .hide {
			width: 16px;
			height: 16px;
			cursor: pointer;
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 5;
		}

		& .heading {
			margin-bottom: var(--pad-3);
			font-weight: normal;
		}

		> .title {
			flex-basis: 100%;
			padding: var(--pad-4) var(--pad-2) var(--pad-2);
			font-weight: bold;
		}

		& .lvl_icon {
			margin-right: var(--pad-2);

			& img {
				max-height: 64px;
				max-width: 64px;
			}
		}

		& .lvl {
			font-size: calc(var(--font-size) + 4px);
			font-weight: 700;
			color: var(--t-green);
			vertical-align: middle;
		}

		& .gAchievement {
			text-align: left;
		}
	}
}

@keyframes notif_blink {
	0% {
		left: -150px;
	}
	50% {
		left: 300px;
	}
	100% {
		left: -150px;
	}
}

.installPwaSuggestionButtons {
	> .button {
		margin: 0 var(--pad-2);
	}
}

.notyItem {
	width: 32px;
	height: 32px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: var(--pad-2);
}

.privateMessageNoty {
	> .heading {
		font-weight: bold !important;
		margin-bottom: 6px !important;
	}

	> .text {
		text-align: left;
	}
}

/*
#senseWindows.touch *::-webkit-scrollbar {
	width: 20px;
	height: 20px;
}

#senseWindows.nomouse > .window > .body {
	pointer-events: none;
	touch-action: none;
}

#senseSystem {
	position: relative;
	z-index: 100;
}

#senseWindows > .window {
	position: fixed;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 0 40px #0007;
	border: 2px solid #00000046;
}

#senseWindows > .window > .head {
	background-color: @bg-head;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	position: relative;
	padding: 8px 10px;
}

#senseWindows > .window.active {
}

#senseWindows > .window.active > .head {
	background-color: @bg-head-active;
}

#senseWindows > .window > .head > .title {
	font-size: calc(var(--font-size) + 2px);
	padding-left: 10px;
	line-height: 20px;
	color: @t-head;
	font-weight: 700;
}

#senseWindows > .window.active > .head > .title {
	color: @t-head-active;
}

#senseWindows > .window > .head > .buttons {
	position: absolute;
	right: 8px;
	top: 8px;
}

#senseWindows > .window > .head > .buttons > .btn {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #c7c7c7;
	background-repeat: no-repeat;
	background-position: center center;
	transition: background-color var(--trn);
	border-radius: 50%;
	box-shadow: 0 0 6px #0003;
	margin-left: 5px;
}

#senseWindows > .window > .head > .buttons > .btn:active:not(.inactive) {
	transform: translatey(1px);
	box-shadow: none;
}

#senseWindows > .window > .head > .buttons > .minimize:hover {
	background-image: url(https://cdn.fch.su/resources/icons/btn_min.png);
	filter: brightness(110%);
}

#senseWindows > .window > .head > .buttons > .minimize:hover,
#senseWindows > .window.active > .head > .buttons > .minimize {
	background-color: #25c039;
}

#senseWindows > .window > .head > .buttons > .maximize:hover,
#senseWindows > .window.active > .head > .buttons > .maximize {
	background-color: #fcb42a;
}

#senseWindows > .window > .head > .buttons > .maximize:hover {
	background-image: url(https://cdn.fch.su/resources/icons/btn_max.png);
	filter: brightness(110%);
}

#senseWindows > .window > .head > .buttons > .close:hover,
#senseWindows > .window.active > .head > .buttons > .close {
	background-color: #fd564f;
}

#senseWindows > .window > .head > .buttons > .close {
	margin-left: 8px;
}

#senseWindows > .window > .head > .buttons > .close:hover {
	background-image: url(https://cdn.fch.su/resources/icons/btn_close.png);
	filter: brightness(120%);
}

#senseWindows > .window > .head > .buttons > .btn:not(:hover) {
	background-image: none !important;
}

#senseWindows > .window > .head > .buttons > .btn.inactive {
	background-image: none !important;
	filter: none !important;
	background-color: #c7c7c7 !important;
}

#senseWindows > .window > .body {
	box-sizing: border-box;
	overflow: auto;
	position: relative;
}

#senseDock {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 36px;
	background-color: #fff8;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	display: grid;
	gap: 0 10px;
	padding: 0 8px;
	grid-template-columns: 32px auto 80px;
}

#senseDock > .windows {
	display: flex;
}

#senseDock > .clock {
	text-align: right;
}

#senseDock > .windows > .item {
	position: relative;
	line-height: 34px;
	height: 36px;
	padding: 0 10px;
	margin-right: 10px;
	cursor: default;
	max-width: 160px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: border-color var(--trn);
}

#senseDock > .windows > .item:hover {
	border-bottom: 3px solid #348cffcc;
}

#senseDock > .windows > .item.active {
	font-weight: 700;
	border-bottom: 3px solid #006ffe;
}

#senseDesktop {
	display: -webkit-flex;
	display: flex;
}

#senseDesktop > .item {
	margin: 10px;
	width: 100px;
	padding: 5px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 2px #000;
	transition: border-color var(--trn), background-color var(--trn);
}

#senseDesktop > .item:hover {
	border-color: #fa0;
}

#senseDesktop > .item.selected {
	border-color: #fa0;
	background-color: rgba(255, 200, 0, 0.3);
}

#senseDesktop > .item > .icon > img {
	border-radius: 4px;
}

#senseDock > .start {
	width: 26px;
	height: 26px;
	background-image: url(https://cdn.fch.su/resources/images/icons/sense_app.png);
	background-size: cover;
	margin: 4px 0 0 8px;
	filter: grayscale(1) drop-shadow(0px 0px 3px #0005);
	transition: filter var(--trn);
	position: relative;
}

#senseDock > .start:hover {
	filter: grayscale(0) drop-shadow(0px 0px 3px #0005);
}

.senseMenu {
	height: 34px;
	background-color: #ccc;
	border-bottom: 1px solid #999;
}

.senseMenu > .item {
	display: inline-block;
	cursor: default;
	border-radius: 3px;
	margin: 4px 8px;
	padding: 4px 8px;
	transition: color var(--trn), background-color var(--trn);
}

.senseMenu > .item:hover {
	background-color: #006ffe;
	color: #fff;
}

.contextMenu {
	position: fixed;
	background-color: #fff5;
	padding: 2px 4px;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-radius: 6px;
	border: 1px solid #fff4;
	box-shadow: 0 2px 18px #0005;
	z-index: 1;
	transition: opacity var(--trn);
	opacity: 0;
	pointer-events: none;
	filter: none;
}

.contextMenu > .item {
	padding: 4px 8px;
	cursor: default;
	border-radius: 6px;
	transition: color var(--trn), background-color var(--trn);
	white-space: nowrap;
}

.contextMenu > .item, .contextMenu > .line {
	margin: 4px 0;
}

.contextMenu > .item:hover {
	background-color: #006ffe;
	color: #fff;
}

.contextMenu > .line {
	margin: 8px 12px;
	height: 1px;
	background-color: #0005;
}

.contextMenu.show {
	opacity: 1;
	pointer-events: auto;
}
*/

.error {
	color: var(--t-err);
}

.ava {
	width: 42px;
	height: 42px;
	border-radius: 50% 50%;
	background-color: var(--bg-3);
	border: 2px solid var(--bg-3);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	> .image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50% 50%;
		aspect-ratio: 1;
	}

	> .onlineIndicator {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.onlineIndicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--bg-3);

	&.offline {
		background-color: #999;
	}

	&.online {
		background-color: #4a4;
	}

	&.afk {
		background-color: #ff0;
	}
}

.modalAuthError {
	padding: var(--pad-4);
}

.chatEditFooter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pad-2);
	padding: var(--pad-4);

	> .item {
		padding: var(--pad-2) var(--pad-4);
		transition: background-color var(--trn);
		cursor: pointer;
		border-radius: 100px;
	}

	> .active {
		background: var(--chat-list-hover-grad-end);
	}

	> .save {
		background-color: #5f53;

		@media (hover: hover) {
			&:hover {
				background-image: none;
				background-color: #5f55;
			}
		}
	}

	> .close {
		background-color: #433f;

		@media (hover: hover) {
			&:hover {
				background-image: none;
				background-color: #533;
			}
		}
	}
}

.mainMenu {
	position: absolute;
	top: var(--pad-2);
	left: var(--pad-2);
	right: var(--pad-2);
	display: flex;
	align-items: center;
	background-color: var(--bg-3);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	font-size: calc(var(--font-size) + 2px);
	z-index: 5;
	border-radius: 60px;

	@media (width <= 1150px) {
		justify-content: space-between;
		left: var(--pad-1);
		right: var(--pad-1);
	}

	> .left {
		flex-basis: var(--left-right-width);

		@media (width <= 1250px) {
			flex-shrink: 1;
			flex-basis: auto;
		}

		> .user {
			display: flex;
			align-items: center;
			gap: var(--pad-3);

			@media (width <= 650px) {
				font-size: var(--font-size);
			}

			> .ava {
				width: 80px;
				height: 80px;
				flex-shrink: 0;
				border: none;

				@media (width <= 650px) {
					width: 60px;
					height: 60px;
				}

				> .onlineIndicator {
					width: 12px;
					height: 12px;
					right: 6px;
					bottom: 6px;
				}
			}

			> .nickAndStatus {
				> .userStatus {
					font-size: calc(var(--font-size) - 2px);
					margin-top: var(--pad-1);
					color: #999;
					font-weight: normal;

					> .userStatusText {
						-webkit-line-clamp: 2;
						line-clamp: 2;
						max-width: 180px;

						@media (width <= 650px) {
							-webkit-line-clamp: 1;
							line-clamp: 1;
							max-height: 16px;
							font-size: calc(var(--font-size) - 4px);
						}
					}
				}
			}
		}

		> .auth {
			display: flex;
			align-items: center;
			gap: var(--pad-3);

			> .avatar {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: var(--bg-4);

				@media (width <= 650px) {
					width: 60px;
					height: 60px;
				}
			}

			@media (width <= 1250px) {
				font-size: var(--font-size);
			}
		}
	}

	> .middle {
		flex-grow: 1;
		display: flex;
		justify-content: space-around;
		gap: var(--pad-3);

		@supports (justify-content: space-evenly) {
			justify-content: space-evenly;
		}

		@media (width <= 1150px) {
			display: none;
		}

		@media (width <= 950px) {
			margin-left: 0;
		}

		> .item {
			background-position: left var(--pad-2) center;
			background-repeat: no-repeat;
			background-image: url(https://cdn.fch.su/resources/icons/head_menu_profile.png);
			padding-left: var(--pad-5) !important;

			@media (width <= 1250px) {
				font-size: var(--font-size);
			}

			&.chats {
				background-image: url(https://cdn.fch.su/resources/icons/head_menu_chat.png);
			}

			&.home {
				background-image: url(https://cdn.fch.su/resources/icons/head_menu_home.png);
				background-size: 24px 24px;
			}

			&.ratings {
				background-image: url(https://cdn.fch.su/resources/icons/star.png);
			}

			&.about {
				background-image: url(https://cdn.fch.su/resources/icons/head_menu_about.png);
				background-size: 28px 28px;
			}
		}
	}

	> .right {
		display: flex;
		gap: var(--pad-4);
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--pad-5) 0 var(--pad-4);
		flex-basis: var(--left-right-width);

		@media (width <= 1150px) {
			flex-basis: auto;
			gap: 20px;
		}

		@media (width <= 500px) {
			padding: 0 var(--pad-4) 0 var(--pad-2);
			gap: 10px;
		}

		> .foxcoins {
			display: flex;
			gap: var(--pad-2);
			align-items: center;

			@media (width <= 650px) {
				gap: var(--pad-1);
			}

			> .icon {
				height: 32px;
				width: auto;

				@media (width <= 650px) {
					height: 20px;
				}
			}

			> .amount {
				display: inline-block;
				color: #fff;
				font-weight: bold;
			}
		}

		> .notificationBtn, > .showSettings {
			cursor: pointer;
			width: 28px;
			height: 28px;
			background-size: contain;
			position: relative;

			@media (width <= 650px) {
				width: 20px;
				height: 20px;
			}
		}

		> .showSettings {
			background-image: url(https://cdn.fch.su/resources/icons/head_menu_settings.png);

			@media (width <= 1150px) {
				display: none;
			}
		}

		> .notificationBtn {
			background-image: url(https://cdn.fch.su/resources/icons/mobile_footer_notifications.png);

			> .indicator {
				position: absolute;
				right: -2px;
				bottom: 10px;
			}
		}

		> .ownerBtn {
			cursor: pointer;
			width: 28px;
			height: 28px;
			background-image: url(https://cdn.fch.su/resources/icons/head_menu_profile.png);
			background-size: contain;
			position: relative;
		}
	}

	> .left > .auth,
	> .middle > .item,
	> .left > .user {
		color: #fff;
		font-weight: bold;
		cursor: pointer;
		transition: background-color var(--trn);
		border-radius: var(--pad-2);
	}

	> .middle > .item {
		padding: var(--pad-3);
	}

	@media (hover: hover) {
		> .middle > .item {
			&:hover {
				background-color: #0002;
			}
		}
	}

	> .insetBorder {
		position: absolute;
		right: 0;
		top: 100%;
		pointer-events: none;
		z-index: 3;

		> svg {
			width: 30px;
			height: 30px;
			fill: var(--bg-2);
			z-index: 2;
		}
	}
}

.headerRoundedBg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--main-menu-height);
	background-color: var(--bg-3);
	display: none;

	@media (width <= 1150px) {
		&.hidden {
			display: none;
		}
	}
}

.header {
	position: absolute;
	top: var(--header-top);
	left: var(--pad-2);
	right: var(--pad-2);
	display: flex;
	border-radius: var(--pad-5);
	z-index: 5;
	justify-content: center;
	gap: 6px;

	> .middle {
		border-radius: var(--pad-5);
		background-color: var(--bg-5);
		color: #fff;
		flex-grow: 1;
		max-width: var(--w-max);

		@media (width <= 1150px) {
			background-color: var(--bg-3);
			color: #ccc;
		}

		> .heading {
			height: 50px;
			text-align: center;
			font-weight: bold;
			font-size: calc(var(--font-size) + 2px);
			line-height: 50px;
		}
	}

	> .left,
	> .right {
		background-color: var(--bg-3);
		border-radius: 40px;

		@media (width <= 1150px) {
			display: none;
		}

		> .leftRightPlaceholder {
			width: var(--left-right-width);
		}
	}
}

.mainContainer {
	background-color: #333;
	display: flex;
	height: 100%;
	min-height: 0;
	margin: 0 auto;
	max-width: 100%;

	> .left {
		background-color: var(--bg-1);
		position: relative;
		height: 100%;
		min-height: 0;

		@media (width <= 950px) {
			padding: 0;
		}
	}

	> .middle {
		background-color: var(--bg-1);
		position: relative;
		min-height: 0;
		height: 100%;
		flex-grow: 1;
		overflow-y: auto;
		max-width: var(--w-max);

		&::before {
			content: '';
			display: block;
			width: 100dvw;
			max-width: 100%;
		}

		@media (width <= 1150px) {
			padding: 0;
		}

		@media (width <= 950px) {
			width: 100%;
		}

		> .notificationsContainer, > .about {
			max-width: var(--w-max);
			margin: 0 auto;
		}

		> .notificationsContainer, > .about, > .ratingsContainer {
			padding: var(--pad-2);
			border-radius: var(--pad-4);
			height: 100%;
			padding-top: var(--main-container-top);

			@media (width <= 1150px) {
				max-width: 100%;
				margin: 0;
				border-radius: 0;
				background-color: var(--bg-1);
			}
		}

		> .about {
			overflow-y: auto;
			@media (width <= 1150px) {
				padding-bottom: var(--footer-bottom);
			}

			& svg {
				width: 18px;
				height: 18px;
				vertical-align: middle;
			}

			> .ver {
				font-weight: bold;
				margin-top: var(--pad-2);
			}

			> .info {
				margin: var(--pad-3) auto;

				> .item {
					margin-top: var(--pad-1);
				}

				> .hr {
					margin: var(--pad-3) 0;
					border: none;
					height: 1px;
					background-color: #83868a;
				}
			}

			> .heading {
				margin: var(--pad-3) 0;
			}

			> .logs {
				max-height: 400px;
				overflow-y: auto;

				> .item {
					margin: var(--pad-3) 0;
					display: flex;
					gap: var(--pad-3);
					color: #fff;

					&.err {
						color: var(--t-red);
					}

					&.good {
						color: var(--t-green);
					}
				}
			}
		}
	}

	> .right {
		background-color: var(--bg-1);
		position: relative;
		height: 100%;
		min-height: 0;

		@media (width <= 1150px) {
			padding: 0;
		}
	}
}

.serviceStatus {
	margin: var(--pad-3) 0;
	display: flex;
	gap: var(--pad-3);
	align-items: center;
	color: #fff;

	> .indicator {
		width: 8px;
		height: 8px;
		border-radius: 50% 50%;
		background-color: #888;
		flex-basis: 8px;

		&.good {
			background-color: var(--t-green);
		}

		&.warn {
			background-color: #ff0;
		}

		&.bad {
			background-color: #fa0;
		}

		&.crit {
			background-color: #f00;
		}
	}

	> .name {
		font-weight: bold;
		flex-basis: 80px;
	}

	> .connection {
		flex-basis: 80px;

		&.good {
			color: var(--t-green);
		}

		&.crit {
			color: var(--t-red);
		}
	}
}

.notificationsContainer {
	> .button {
		margin: 0 auto var(--pad-2);
		display: block;
	}
}

.notificationList {
	overflow-y: auto;
	max-height: 100%;
	@media (width <= 1150px) {
		padding-bottom: var(--footer-bottom);
	}

	> .notification {
		margin: var(--pad-2) auto;

		> .time {
			display: inline;
			margin-right: var(--pad-2);
			font-style: italic;
			color: #aaa;
			font-size: calc(var(--font-size) - 2px);
		}

		> .text, > .userNick {
			display: inline-block;
			margin: 0 var(--pad-1);
		}
	}
}

.chatLeftHeading, .chatRightHeading {
	height: 50px;
	display: flex;
	align-items: center;
	color: #fff;
	position: relative;

	@media (width <= 950px) {
		width: auto;
	}
}

.chatLeftHeading {
	font-weight: bold;
	margin-right: var(--pad-2);

	> .hideBtn {
		left: 0;
	}

	&.hidden {
		> .hideBtn {
			transform: translatey(-50%) scale(-1, 1);
		}
	}
}

.chatLeftHeading, .chatRightHeading {
	width: calc(var(--left-right-width) - 16px);

	> .title {
		text-align: center;
		width: 100%;
	}

	> .hideBtn {
		width: 50px;
		height: 50px;
		background-color: var(--bg-4);
		background-image: url(https://cdn.fch.su/resources/icons/block_hide_arrow.png);
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 50%;
		transform: translatey(-50%);
		border-radius: 50%;
		cursor: pointer;
		transition: filter var(--trn);

		@media (hover: hover) {
			&:hover {
				filter: brightness(140%);
			}
		}
	}
}

.chatRightHeading {
	justify-content: center;
	gap: var(--pad-3);
	padding-right: var(--pad-4);

	> .hideBtn {
		right: 0;
		transform: translatey(-50%) scale(-1, 1);
	}

	&.hidden {
		> .hideBtn {
			transform: translatey(-50%);
		}
	}

	> .authorizedUsers {
		font-size: calc(var(--font-size) + 2px);
	}

	> .authorizedUsers::before,
	> .totalUsers::before,
	> .voiceUsers::before {
		content: '';
		display: inline-block;
		width: 30px;
		height: 30px;
		vertical-align: middle;
		margin-right: var(--pad-1);
		background-repeat: no-repeat;
	}

	> .authorizedUsers::before {
		background-image: url(https://cdn.fch.su/resources/icons/authorized_users_count.png);
	}

	> .totalUsers::before {
		background-image: url(https://cdn.fch.su/resources/icons/total_users_count.png);
	}

	> .voiceUsers::before {
		background-image: url(https://cdn.fch.su/resources/icons/chat_list_voice.png);
		background-size: 22px 22px;
		background-position-y: center;
	}

	&.disabled {
		display: none;
	}
}

.shareIncoming, .repostNotify {
	color: #fff;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	cursor: pointer;
	position: fixed;
	top: 65px;
	left: 50%;
	z-index: 10;
	background-color: var(--bg-4);
	translate: -50%;

	> .text {
		&::after {
			content: '';
			display: inline-block;
			vertical-align: middle;
			margin-left: var(--pad-2);
			width: 16px;
			height: 16px;
			background-image: url(https://cdn.fch.su/resources/icons/quote_close.png);
			background-repeat: no-repeat;
			background-position: center center;
			transition: filter var(--trn);
		}
	}

	@media (hover: hover) {
		&:hover {
			> .text::after {
				filter: brightness(140%);
			}
		}
	}
}

.chatStream {
	padding: var(--pad-3) var(--pad-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--pad-2);
	align-items: center;
	justify-content: center;
	background-color: #755021;
	border-radius: var(--pad-4) var(--pad-4) 0 0;
	text-align: center;
	position: absolute;
	top: var(--main-container-top);
	left: 0;
	right: 0;
	z-index: 2;

	@media (width <= 1150px) {
		border-radius: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	@media (width <= 650px) {
		font-size: var(--font-size);
	}

	> .description {
		> .gameName {
			margin-left: var(--pad-1);
		}
	}

	&.right {
		right: 41px;
	}

	> .streamLinks {
		> .item {
			padding: var(--pad-1) var(--pad-2);
			transition: background-color var(--trn);
			background-color: #fff3;
			white-space: nowrap;
			margin-right: var(--pad-1);

			@media (hover: hover) {
				&:hover {
					background-color: var(--btn-hover-bg);
				}
			}

			> .icon {
				width: 16px;
				height: auto;
				vertical-align: middle;
			}

			> .viewersCount {
				display: inline-block;
				margin-left: var(--pad-1);
				color: #000;
				font-weight: bold;
			}

			> .likesCount {
				display: inline-block;
				margin-left: var(--pad-1);
				color: #000;
				font-weight: bold;
			}
		}
	}
}

.chatList {
	overflow-y: auto;
	background-color: var(--bg-1);
	height: 100%;

	@media (width <= 1150px) {
		left: 0;
		transform: translatex(-100%);
		opacity: 0;
	}

	> .rooms {
		> .gSearchInput {
			background-color: var(--bg-3);
			padding-left: 42px;
			display: none;
		}

		> .list {
			margin-bottom: var(--pad-2);

			&.search {
				&:empty {
					display: none;
				}
			}

			&.owned {
				> .button {
					text-transform: none;
					padding: var(--pad-2);
					font-size: var(--font-size);
					margin: var(--pad-1) var(--pad-4);
					width: calc(100% - var(--pad-5));
				}
			}

			> .item {
				padding: var(--pad-1) var(--pad-2);
				border-radius: var(--pad-1) var(--pad-4) var(--pad-4) var(--pad-1);
				color: #999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				cursor: pointer;
				transition: background-image var(--trn);
				transform-origin: left top;

				@media (width <= 1150px) {
					padding: var(--pad-1) var(--pad-3);
				}

				> .icon {
					position: relative;
					width: 36px;
					height: 36px;
					margin-right: var(--pad-2);

					&.ava {
						background-size: cover !important;
						opacity: 1 !important;

						&::after {
							right: -4px;
							bottom: -4px;
							left: auto;
							top: auto;
							width: 18px;
							height: 18px;
							background-color: #333f;
							border-radius: 50%;
						}
					}

					&::after {
						content: '';
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center center;
					}

					@media (width <= 1150px) {
						margin-right: var(--pad-3);
						width: 42px;
						height: 42px;
					}
				}

				&.notes {
					> .icon::after {
						background-image: url(https://cdn.fch.su/resources/icons/notes_room.png);
						background-size: 75% 75%;
						opacity: .7;
					}
				}

				&.global, &.text {
					> .icon::after {
						background-image: url(https://cdn.fch.su/resources/icons/global_room.png);
						background-size: 60% 60%;
						opacity: .7;
					}

					&.online {
						> .icon.ava {
							border-color: #0a0;
						}

						> .icon::after {
							background-image: url(https://cdn.fch.su/resources/icons/stream_room_online_v2.png);
							opacity: 1;
						}
					}
				}

				&.game {
					> .icon::after {
						background-image: url(https://cdn.fch.su/resources/icons/game_room.png);
						background-size: 80% 80%;
						opacity: 1;
					}
				}

				&.streamer {
					> .icon::after {
						background-image: url(https://cdn.fch.su/resources/icons/stream_room.png);
						background-size: 75% 75%;
						opacity: .9;
					}

					&.online {
						> .icon.ava {
							border-color: #0a0;
						}

						> .icon::after {
							background-image: url(https://cdn.fch.su/resources/icons/stream_room_online_v2.png);
							opacity: 1;
						}
					}
				}

				&.active {
					background-image: linear-gradient(to right, var(--chat-list-hover-grad-start), var(--chat-list-hover-grad-end));
				}

				@media (hover: hover) {
					&:not(.active):hover {
						background-image: linear-gradient(to right, var(--chat-list-hover-grad-start), var(--chat-list-hover-grad-end));
					}
				}

				> .name {
					font-weight: bold;
					flex: 1;
					font-size: var(--font-size);
					color: #ccc !important;
				}

				&.ls {
					> .icon::after {
						display: none;
					}

					> .name {
						> .userNick {
							color: #ccc !important;
						}
					}
				}

				> .usersCount, > .unreadCount {
					padding: var(--pad-1) var(--pad-2);
				}

				> .usersCount {
					background-color: var(--chat-list-usersCount-bg);
					color: #aaa;
					margin-left: var(--pad-1);
				}

				> .unreadCount {
					background-color: var(--chat-list-unreadCount-bg);
					color: #fff;
				}
			}
		}
	}
}

.gSearchInput {
	margin: 0 auto var(--pad-2);
	border-radius: var(--pad-5);
	background-color: #393c40;
	padding: var(--pad-2) var(--pad-2) var(--pad-2) var(--pad-5);
	background-image: url(https://cdn.fch.su/resources/icons/search.png);
	background-repeat: no-repeat;
	background-position: 15px center;
	width: 100%;

	@media (width <= 1150px) {
		margin: 0 var(--pad-2) var(--pad-2);
		width: calc(100% - var(--pad-3));
	}
}

.gCounter {
	font-size: calc(var(--font-size) - 2px);
	font-weight: bold;
	padding: var(--pad-1) var(--pad-2);
	border-radius: var(--pad-3);
	white-space: nowrap;

	&.gray {
		color: #fff;
		background-color: #777;
	}
}

.chatList, .chatUsers {
	background-color: var(--bg-1);
	width: var(--left-right-width);
	padding: var(--main-container-top) 6px 6px 6px;

	@media (width <= 1150px) {
		position: absolute !important;
		z-index: 3;
		top: 0;
		bottom: 0;
		width: 100dvw;
		transition: transform var(--trn), opacity var(--trn);
		padding: var(--main-container-top) 0 0 0;
	}

	&.mobileShow {
		@media (width <= 1150px) {
			transform: translatex(0);
			opacity: 1;
		}
	}
}

.chatList > .rooms,
.chatUsers > .item {
	> .list > .title {
		color: #ccc;
		font-weight: bold;
		padding: var(--pad-3) var(--pad-4);
		background-color: var(--chat-list-title-bg);
		margin-bottom: var(--pad-2);
		border-radius: var(--pad-4);
		--slide-animation-width: 25px;

		@media (width <= 1150px) {
			text-align: center;
			border-radius: 0;
			margin: 0 0 var(--pad-2) 0;
			padding: var(--pad-2) var(--pad-3);
		}

		> .smile {
			max-height: 16px;
			max-width: 32px
		}
	}
}

@keyframes slideLeft {
	0% {
		translate: var(--slide-animation-width) 0 0;
	}

	100% {
		translate: 0 0 0;
	}
}

@keyframes slideRight {
	0% {
		translate: calc(var(--slide-animation-width) * -1) 0 0;
	}

	100% {
		translate: 0 0 0;
	}
}

.slideLeft {
	animation: slideLeft 1 0.5s cubic-bezier(0.85, 0, 0.15, 1);
}

.slideRight {
	animation: slideRight 1 0.5s cubic-bezier(0.85, 0, 0.15, 1);
}

.chatUsers {
	position: relative;
	overflow-y: auto;
	height: 100%;

	@media (width <= 1150px) {
		right: 0;
		transform: translatex(100%);
		opacity: 0;
	}

	> .item {
		> .list {
			> .item {
				margin: 0 0 var(--pad-2) 0;
				padding: var(--pad-1) var(--pad-2);
				border-radius: var(--pad-1);
				transition: background-image var(--trn);
				cursor: pointer;
				overflow-x: hidden;
				display: flex;
				gap: var(--pad-2);
				align-items: center;
				--slide-animation-width: 15px;

				> .right {
					white-space: nowrap;

					> .userNick {
						display: inline-block;
					}

					> .userStatus {
						font-size: calc(var(--font-size) - 2px);
						color: #68a;
						margin: var(--pad-1) 0;
						gap: var(--pad-1);
						justify-content: flex-start;
					}
				}

				@media (hover: hover) {
					&:hover {
						background-image: linear-gradient(to left, var(--chat-list-hover-grad-start), var(--chat-list-hover-grad-end));
					}
				}
			}
		}
	}

	&.withAvatars {
		> .item {
			> .list {
				margin-bottom: var(--pad-2);

				> .item {
					border-top-left-radius: var(--pad-5);
					border-bottom-left-radius: var(--pad-5);
				}
			}
		}
	}

	&:not(.withAvatars) {
		> .item {
			> .list {
				> .item {
					> .left {
						display: none;
					}
				}
			}
		}
	}

	> .voiceUsers {
		> .voice {
			> .item {
				> .left {
					> .ava {
						transition: border-width var(--trn), border-color var(--trn);
					}
				}

				&.speaking {
					> .left > .ava {
						border: 5px solid #0f0;
					}

					&.speak_0 > .left > .ava {
						border-color: var(--nc-0);
					}

					&.speak_1 > .left > .ava {
						border-color: var(--nc-1);
					}

					&.speak_2 > .left > .ava {
						border-color: var(--nc-2);
					}

					&.speak_3 > .left > .ava {
						border-color: var(--nc-3);
					}

					&.speak_4 > .left > .ava {
						border-color: var(--nc-4);
					}

					&.speak_5 > .left > .ava {
						border-color: var(--nc-5);
					}

					&.speak_6 > .left > .ava {
						border-color: var(--nc-6);
					}

					&.speak_7 > .left > .ava {
						border-color: var(--nc-7);
					}

					&.speak_8 > .left > .ava {
						border-color: var(--nc-8);
					}

					&.speak_9 > .left > .ava {
						border-color: var(--nc-9);
					}

					&.speak_10 > .left > .ava {
						border-color: var(--nc-10);
					}

					&.speak_11 > .left > .ava {
						border-color: var(--nc-11);
					}

					&.speak_12 > .left > .ava {
						border-color: var(--nc-12);
					}

					&.speak_13 > .left > .ava {
						border-color: var(--nc-13);
					}

					&.speak_14 > .left > .ava {
						border-color: var(--nc-14);
					}

					&.speak_15 > .left > .ava {
						border-color: var(--nc-15);
					}
				}

				> .right > .connectionIndicator {
					font-size: calc(var(--font-size) - 2px);

					&.connecting {
						color: #aa3;
					}

					&.connected {
						color: #3a3;
					}

					&.disconnected {
						color: #a33;
					}
				}
			}
		}
	}
}

.streamStatus {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #222;
	margin-right: var(--pad-2);

	&.online {
		background-color: var(--t-green);
	}
}

@keyframes popUp {
	0% {
		scale: 0;
		opacity: 0;
	}

	100% {
		scale: 1;
		opacity: 1;
	}
}

.popUpAnimation {
	animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
	animation-fill-mode: both;
}

.messagesList {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	border: 6px solid var(--bg-3);
	background-color: var(--bg-3);
	border-radius: var(--br-1);
	flex-grow: 1;

	@media (width <= 1150px) {
		background-color: var(--bg-1);
		border-radius: 0;
		margin: 0;
		border: none;
	}

	&.smoothScroll {
		scroll-behavior: smooth;
	}

	> .messages {
		min-height: 0;

		@media (width <= 1150px) {
			padding: var(--pad-2);
		}

		> .item {
			position: relative;
			margin: var(--pad-1) 0;
			padding: var(--pad-2);
			transition: background-color var(--trn);
			border-radius: var(--pad-2);
			display: flex;
			gap: var(--pad-2);
			max-width: 100%;
			min-width: 0;
			transform-origin: left bottom;
			animation-fill-mode: both;

			&.messagePopUp {
				animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
			}

			@media (width <= 1150px) {
				-webkit-user-select: none;
				user-select: none;
			}

			@media (width <= 650px) {
				margin: var(--pad-1) 0;
			}

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}

			&.notSend, &.read, &.unread {
				> .right > .time::after {
					content: '';
					display: inline-block;
					translate: 2px 1px;
					width: 20px;
					height: 12px;
					background-size: 100% auto;
					background-position: center center;
				}
			}

			&.notSend, &.unread {
				> .right > .time::after {
					background-image: url(https://cdn.fch.su/resources/icons/message_indicator_sent.png);
				}
			}

			&.notSend {
				> .right > .time::after {
					filter: grayscale(100%);
				}
			}

			&.read {
				> .right > .time::after {
					background-image: url(https://cdn.fch.su/resources/icons/message_indicator_read.png);
				}
			}

			&.meQuote {
				background-color: #51a1ff26;
			}

			&.previousFromSameUser:not(.meQuote) {
				margin-top: -4px;
				padding: var(--pad-1) var(--pad-2);
				align-items: center;
				transition: background-color var(--trn), padding var(--trn);
			}

			@media (hover: hover) {
				&:not(.notification):hover {
					background-color: #292b2e;
				}
			}

			> .left {
				> .ava {
					cursor: pointer;
					position: sticky;
					top: 0;
				}
			}

			&.previousFromSameUser {
				> .left > .ava {
					opacity: 0;
					height: 25px;
				}

				> .right {
					> .badge, > .time, > .userNick, > .chatMessageAdminButton {
						display: none;
					}

					> .text {
						margin-top: 0;
					}
				}

				> .chatMessageActions {
					bottom: 50%;
					transform: translatey(50%);
					right: 4px;

					> .container {
						border-radius: var(--pad-3);
						padding: var(--pad-1) var(--pad-2);
					}

					> .insetBorder {
						display: none;
					}
				}

				> .changeReaction {
					@media (width <= 1150px) {
						display: none;
					}
				}
			}

			&.private {
				> .right {
					> .text {
						&::before {
							content: 'Приватное сообщение:';
							font-style: italic;
							color: #777;
							font-size: var(--font-size);
							margin-right: var(--pad-2);
						}
					}
				}
			}

			&.deleted {
				> .right {
					> .text {
						text-decoration: line-through;
						color: #655;

						> .smile {
							opacity: .3;
						}
					}
				}
			}

			&.edited > .right > .text::after {
				content: '(изменено)';
				color: #999;
				margin-left: 6px;
				font-size: 14px;
			}

			&.notification {
				color: #999;
				font-style: italic;
				font-size: var(--font-size);
			}

			> .right {
				position: relative;
				flex-grow: 1;
				min-width: 0;

				> .time {
					margin: 0 var(--pad-2) 0 var(--pad-1);
					display: inline-block;
					font-size: calc(var(--font-size) - 2px);
					color: #aaa;
					vertical-align: middle;
				}

				> .chatMessageAdminButton {
					opacity: 0;
					pointer-events: none;
				}

				> .badge {
					opacity: 0.8;
					transition: opacity var(--trn);
				}

				> .userNick {
					transition: color var(--trn);
					position: relative;
					font-size: calc(var(--font-size) + 2px);
					cursor: pointer;
				}

				> .reactions {
					display: flex;
					margin-top: 6px;
					margin-left: -4px;
					gap: var(--pad-1);
					flex-wrap: wrap;

					> .reaction {
						padding: 0 var(--pad-2) 0 0;
						font-size: calc(var(--font-size) - 2px);
						background-color: #0005;
						border-radius: var(--pad-2);
						display: flex;
						align-items: center;
						gap: var(--pad-1);
						cursor: pointer;

						&.active {
							background-color: #5a7dc4;
						}

						> .emoji {
							font-size: calc(var(--font-size) + 4px);
						}

						> .smile {
							width: 26px;
							height: 26px;
							background-size: contain;
							background-position: center center;
							background-repeat: no-repeat;
							border-radius: var(--pad-2);
						}

						> .count {
							font-weight: bold;
							margin-left: var(--pad-1);
						}
					}
				}

				> .text {
					display: block;
					width: 100%;
					margin-top: var(--pad-1);
					color: #ddd;
					overflow-wrap: anywhere;

					> .smile {
						vertical-align: middle;
						min-height: 20px;
						width: auto;
						object-fit: contain;
						max-height: 32px !important;

						&.large {
							border-radius: var(--pad-2);
							max-width: 120px;
							min-height: 112px;
							max-height: 120px !important;
						}
					}

					> .innerLink {
						font-weight: bold;
						color: #fa0;
						cursor: pointer;
						padding: var(--pad-1) var(--pad-2);
						background-color: #fa02;
						border-radius: var(--pad-5);
						transition: color var(--trn);

						> .social {
							height: 24px;
						}

						&:hover {
							color: #fc0;
						}
					}

					> .smile ~ .smile {
						margin-left: -4px;
					}
				}
			}

			@media (hover: hover) {
				&:hover {
					> .right {
						> .badge {
							opacity: 1;
						}

						> .chatMessageAdminButton {
							opacity: 0.6;
							pointer-events: auto;
						}
					}

					> .chatMessageActions,
					> .changeReaction {
						opacity: 1;
						pointer-events: auto;
					}
				}
			}

			> .chatMessageActions,
			> .changeReaction {
				opacity: 0;
				pointer-events: none;
				transition: opacity var(--trn);
			}
		}
	}

	&.hideMessagesTime > .messages > .item > .right > .time {
		display: none;
	}

	&.withAvatars {
		> .messages {
			> .item {
				border-radius: var(--br-1);
			}
		}
	}
}

.markdownEditor .editor-preview, .messagesList > .messages > .item > .right > .text {
	& code {
		background-color: #fff4;
		color: #fff;
		padding: var(--pad-1) var(--pad-2);
		border-radius: var(--pad-1);
		overflow-wrap: anywhere;
		line-height: 30px;
		white-space: normal;
	}

	& ol, & ul {
		padding-inline-start: var(--pad-4);
	}

	& pre {
		overflow-wrap: anywhere;
		white-space: pre-line;
	}

	& pre > code {
		padding: var(--pad-1) var(--pad-2);
		background-color: #fff3;
		display: block;
		border-radius: var(--pad-1);
		border: 1px solid #fff3;
		white-space: pre-line;
	}

	& img:not(.social) {
		max-width: 100%;
		max-height: 400px;
	}

	& table {
		width: 100%;
		max-width: 100%;
		margin-bottom: var(--pad-4);
		border-spacing: 0;
		border-collapse: collapse;
	}

	& th {
		text-align: left;
	}

	& table > thead > tr > th,
	& table > tbody > tr > th,
	& table > tfoot > tr > th,
	& table > thead > tr > td,
	& table > tbody > tr > td,
	& table > tfoot > tr > td {
		padding: var(--pad-2);
		line-height: 1.42857143;
		vertical-align: top;
		border-top: 1px solid #fff3;
	}

	& table > thead > tr > th {
		border-bottom: 2px solid #fff4;
	}

	& table > caption + thead > tr:first-child > th,
	& table > colgroup + thead > tr:first-child > th,
	& table > thead:first-child > tr:first-child > th,
	& table > caption + thead > tr:first-child > td,
	& table > colgroup + thead > tr:first-child > td,
	& table > thead:first-child > tr:first-child > td {
		border-top: 0;
	}

	& table > tbody + tbody {
		border-top: 2px solid #ddd;
	}

	& table > tbody > tr:nth-child(odd) > td,
	& table > tbody > tr:nth-child(odd) > th {
		background-color: #fff1;
	}
}

.chatMessageActions {
	position: absolute;
	right: 0;
	bottom: 100%;
	z-index: 2;
	transform: translatey(65%);

	@media (hover: none) {
		display: none;
	}

	> .backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #0006;
		display: none;
	}

	> .container {
		display: flex;
		align-items: center;
		background-color: #43474d;
		padding: var(--pad-2) var(--pad-3);
		border-radius: var(--pad-4) var(--pad-3) 0 var(--pad-4);
		gap: var(--pad-2);

		> .action {
			position: relative;
			width: 18px;
			height: 22px;
			cursor: pointer;
			color: #fff;
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
			opacity: .5;
			transition: opacity var(--trn);

			@media (hover: hover) {
				&:hover {
					opacity: 1;

					&::before {
						opacity: 1;
					}
				}
			}

			&::before {
				position: absolute;
				bottom: calc(100% + 10px);
				right: 0;
				white-space: nowrap;
				transition: opacity var(--trn);
				pointer-events: none;
				opacity: 0;
			}
		}

		> .profile {
			background-image: url(https://cdn.fch.su/resources/icons/profile_btn.png);

			&::before {
				content: 'Открыть профиль';
			}
		}

		> .reply {
			background-image: url(https://cdn.fch.su/resources/icons/quote_btn.png);

			&::before {
				content: 'Цитировать сообщение';
			}
		}

		> .repost {
			background-image: url(https://cdn.fch.su/resources/icons/quote.png);

			&::before {
				content: 'Переслать сообщение';
			}
		}

		> .quote {
			background-image: url(https://cdn.fch.su/resources/icons/at_btn.png);

			&::before {
				content: 'Упомянуть по нику';
			}
		}

		> .privateQuote {
			background-image: url(https://cdn.fch.su/resources/icons/private_quote_btn.png);

			&::before {
				content: 'Приватное сообщение';
			}
		}

		> .reaction {
			background-image: url(https://cdn.fch.su/resources/icons/reaction_btn.png);

			&.active {
				filter: brightness(200%);
				opacity: 1;
			}

			&::before {
				content: 'Поставить реакцию';
			}
		}

		> .remove {
			background-image: url(https://cdn.fch.su/resources/icons/chat_remove_message.png);

			&::before {
				content: 'Удалить сообщение';
			}
		}

		> .edit {
			background-image: url(https://cdn.fch.su/resources/icons/edit.png);

			&::before {
				content: 'Редактировать сообщение';
			}
		}
	}

	> .insetBorder {
		position: absolute;
		right: 0;
		top: 100%;
		pointer-events: none;

		> svg {
			width: 20px;
			height: 20px;
			fill: #43474d;
			z-index: 2;
		}
	}
}

.mobileTyping {
	position: absolute;
	top: var(--main-container-top);
	left: 50%;
	translate: -50% 0;
	z-index: 2;
	background-color: #555;
	padding: var(--pad-1) var(--pad-2);
	border-radius: var(--pad-3);
	color: #fff;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	max-width: calc(100% - var(--pad-2));
	gap: var(--pad-1);
	opacity: 0;
	white-space: nowrap;
	transition: opacity var(--trn);
	text-align: center;
	justify-content: center;

	@media (width <= 1150px) {
		&.mobileShow {
			opacity: 1;
		}
	}

	&.privateShow.mobileShow {
		opacity: 1;
	}

	> .list {
		> .item {
			font-weight: bold;

			&:not(:first-child)::before {
				content: ', ';
			}
		}
	}
}

.userNick {
	display: inline-block;
	font-weight: bold;
	color: #ccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;

	&.meQuote {
		font-weight: bold !important;
	}
}

.badge {
	max-height: 18px;
	max-width: 18px;
	vertical-align: middle;
	margin-left: var(--pad-1);
}

.chatAttachedFiles {
	display: flex;
	gap: var(--pad-1);
	padding: var(--pad-2);
	background-color: var(--bg-3);
	border-radius: var(--br-1);
	flex-wrap: wrap;
	margin-top: var(--pad-2);

	> .reply {
		width: 100%;
		margin: var(--pad-2);
	}
}

.chatAttachedFile {
	position: relative;
	border-radius: var(--br-1);
	overflow: hidden;
	background-color: var(--bg-2);

	> .lc {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	> .progress {
		position: absolute;
		top: 30px;
		left: 0;
		background-color: var(--bg-5);
		width: 0;
		z-index: 1;
		text-align: center;
	}

	> .heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--pad-2) var(--pad-3) var(--pad-2) var(--pad-4);
		background-color: var(--bg-2);

		> .name {
			font-size: calc(var(--font-size) - 4px);
			color: #fff;
		}

		> .removeBtn {
			width: 10px;
			height: 10px;
			opacity: .7;
			transition: opacity var(--trn);

			@media (hover: hover) {
				&:hover {
					opacity: 1;
				}
			}
		}
	}

	> .preview {
		position: relative;

		> .removeBtn {
			position: absolute;
			top: 2px;
			right: 2px;
			width: 24px;
			height: 24px;
			background-color: #333f;
			opacity: 0;
			pointer-events: none;
			z-index: 2;

			> .icon {
				background-size: auto 80%;
			}
		}

		> .image,
		> .video {
			object-fit: cover;
			width: 140px;
			height: 116px;
		}

		> .audio, .file {
			width: 140px;
			height: 116px;
			background-repeat: no-repeat;
			background-position: center;
		}

		> .audio {
			background-image: url(https://cdn.fch.su/resources/icons/attachment_audio.png);
		}

		> .file {
			background-image: url(https://cdn.fch.su/resources/icons/doc.png);
		}

		@media (hover: hover) {
			&:hover {
				> .removeBtn {
					opacity: 1;
					pointer-events: auto;
				}
			}
		}

		@media (width <= 1150px) {
			> .removeBtn {
				opacity: 1;
				pointer-events: auto;
			}
		}
	}

	&:not(.upload) {
		> .lc {
			display: none;
		}
	}

	&.failed {
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			background-image: url(https://cdn.fch.su/resources/icons/close.png);
			background-size: contain;
			width: 50%;
			height: 50%;
			z-index: 1;
			transform: translate(-50%, -50%);
		}
	}
}

.chatMessageQuote, .chatMessageRepost, .chatAttachedFiles > .reply {
	position: relative;
	font-size: calc(var(--font-size) + 1px);
	margin: var(--pad-2) 0 var(--pad-2) var(--pad-1);
	font-style: italic;
	padding: var(--pad-1) 0 var(--pad-1) var(--pad-3);

	&::before {
		content: '';
		position: absolute;
		display: inline-block;
		width: 2px;
		background-color: #51a1ff;
		top: 0;
		left: 0;
		bottom: 0;
	}
}

.chatMessageQuote, .chatMessageRepost, .chatInputReply {
	> .nickAndTime {
		display: flex;
		gap: var(--pad-2);
		align-items: baseline;

		> .time {
			font-size: calc(var(--font-size) - 2px);
		}
	}

	> .text {
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		word-break: break-all;
	}

	& .smile {
		max-height: 28px;
		max-width: 88px;
		width: auto;
		vertical-align: middle;
		filter: brightness(75%);
	}
}

.chatMessageQuote {
	color: #999;

	> .nickAndTime {
		> .userNick {
			filter: saturate(60%);
		}
	}
}

.chatMessageRepost {
	> .from {
		padding-left: 20px;
		position: relative;
		color: #999;
		margin-bottom: var(--pad-2);

		&::before {
			content: '';
			position: absolute;
			opacity: .6;
			top: 3px;
			left: 0;
			width: 16px;
			height: 16px;
			background-image: url(https://cdn.fch.su/resources/icons/quote.png);
			background-size: contain;
			background-repeat: no-repeat;
		}

		> .room {
			cursor: pointer;

			&::before {
				content: 'Переслано из: ';
			}
		}

		> .user {
			&::before {
				content: 'Переслано из ЛС';
			}
		}
	}

	> .nickAndTime {
		> .userNick {
			filter: saturate(60%);
		}
	}
}

.repostAttachments {
	display: flex;
	gap: var(--pad-2);
	align-items: center;
	margin-top: var(--pad-2);
	flex-wrap: wrap;

	> .image {
		max-height: 120px;
		max-width: 120px;
		border-radius: var(--pad-2);
		cursor: pointer;

		@media (width < 600px) {
			max-width: 80px;
			max-height: 80px;
		}
	}
}

.chatInputReply {
	position: relative;
	cursor: pointer;

	> .text {
		margin-right: var(--pad-4);
	}

	&::after {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		background-image: url(https://cdn.fch.su/resources/icons/attachment_remove_btn.png);
		width: 10px;
		height: 10px;
		display: inline-block;
		margin-left: var(--pad-2);
		opacity: .6;
		transition: opacity var(--trn);
		transform: translatey(-50%);
	}

	@media (hover: hover) {
		&:hover {
			&::after {
				opacity: 1;
			}
		}
	}
}

.indicatorsAndStatus {
	display: flex;
	align-items: center;
	margin-top: var(--pad-1);

	> .indicators {
		display: flex;
		gap: var(--pad-1);

		> .afk,
		> .typing {
			height: 14px;
			width: auto;
			margin-right: var(--pad-1);
		}
	}

	> .points {
		transition: color .3s;
		color: #ccc;
		font-size: calc(var(--font-size) - 3px);
	}
}

.footer {
	position: relative;
	display: flex;
	border-radius: 0 var(--pad-4) 0 0;
	z-index: 4;
	justify-content: center;

	> .middle {
		flex-grow: 1;
		position: relative;
		z-index: 1;
		max-width: var(--w-max);
	}

	> .left, > .right {
		width: var(--left-right-width);

		@media (width <= 1150px) {
			width: auto;
		}
	}

	> .insetBorder {
		position: absolute;
		left: 0;
		bottom: 100%;
		rotate: 180deg;
		pointer-events: none;

		> svg {
			width: 30px;
			height: 30px;
			fill: var(--bg-2);
			z-index: 2;
		}
	}
}

.chatMiddleFooter {
	display: flex;
	align-items: center;
}

.authWindow {
	max-width: 300px;

	> #authError {
		margin: var(--pad-4) auto;
		padding: 0 var(--pad-4);
		text-align: center;
		font-weight: bold;
		color: var(--t-red);
	}

	> .text {
		margin: var(--pad-4) auto;
		padding: 0 var(--pad-4);
		text-align: center;
	}

	> .buttons {
		text-align: center;

		> .button {
			width: 235px;
			margin: var(--pad-3) auto 0 auto;
			padding: var(--pad-3);
			font-size: 16px;
			text-transform: none;
			font-weight: normal;
		}

		> .vkIdBtn {
			width: 235px;
			margin: var(--pad-3) auto 0 auto;
		}

		> .tgBtn {
			width: 235px;
			margin: var(--pad-3) auto 0 auto;
			text-align: center;
		}
	}
}

.userProfile {
	max-width: 1240px;
	border-radius: var(--pad-4);
	overflow: hidden;

	> .topCover {
		height: 340px;
		background-image: url(https://cdn.fch.su/resources/icons/profile_top_cover.jpg);
		background-size: cover;
		background-position: center center;
		margin-bottom: -20px;
		position: relative;

		@media (width <= 1150px) {
			height: 280px;
		}

		@media (width <= 850px) {
			height: 240px;
		}

		> .nick {
			font-size: calc(var(--font-size) + 10px);
			font-weight: bold;
			color: #fff;
			padding: var(--pad-2) var(--pad-4);
			border-radius: var(--pad-5);
			background-color: #0003;
			position: absolute;
			left: 50px;
			top: 20px;
			white-space: nowrap;

			&.premium::before {
				content: '';
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(https://cdn.fch.su/resources/icons/premium_large.png);
				background-size: contain;
				background-repeat: no-repeat;
				vertical-align: bottom;
				margin-right: var(--pad-2);
			}

			@media (width <= 800px) {
				font-size: calc(var(--font-size) + 6px);
				left: 20px;
			}
		}

		> .editBtn {
			position: absolute;
			top: 20px;
			right: 20px;
			width: 24px;
			height: 24px;
			z-index: 1;
		}
	}

	> .statusAndActions {
		position: relative;
		margin-top: -30px;

		> .avatar {
			width: 278px;
			height: 278px;
			position: absolute;
			top: -225px;
			right: 35px;

			@media (width <= 1150px) {
				width: 220px;
				height: 220px;
				top: -170px;
			}

			@media (width <= 650px) {
				width: 160px;
				height: 160px;
				top: -130px;
			}

			> .ava {
				background-color: #333c;
				border-color: var(--bg-3);
				border-width: 4px;
				width: 100%;
				height: 100%;

				> .onlineIndicator {
					width: 30px;
					height: 30px;
					right: 40px;
					bottom: 10px;
					border: 4px solid var(--bg-3);

					@media (width <= 1150px) {
						width: 24px;
						height: 24px;
						right: 12px;
						bottom: 12px;
					}

					@media (width <= 650px) {
						width: 20px;
						height: 20px;
						right: 8px;
						bottom: 8px;
					}
				}
			}

			@media (hover: hover) {
				&:hover {
					> .changeAva {
						opacity: 1;
					}
				}
			}

			> .changeAva {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #0009;
				border-radius: 50%;
				background-image: url(https://cdn.fch.su/resources/icons/edit.png);
				background-position: center center;
				background-repeat: no-repeat;
				transition: opacity var(--trn);
				opacity: 0;
			}
		}

		> .actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--pad-4);

			@media (width <= 800px) {
				flex-wrap: wrap;
			}

			@media (width <= 650px) {
				gap: var(--pad-3);
			}

			> .buttons {
				display: flex;
				gap: var(--pad-4);

				> .iconButton {
					flex: 0 0 32px;
					height: 32px;
					width: 32px;
				}
			}
		}
	}

	> .profileSection, > .bonusState > .profileSection {
		background-color: var(--bg-3);
		border-radius: var(--pad-4);
		padding: var(--pad-4) var(--pad-5);
		margin-bottom: 10px;

		@media (width <= 800px) {
			padding: var(--pad-4);
		}

		@media (width <= 650px) {
			padding: var(--pad-3);
		}

		> .delimiter {
			margin: var(--pad-4) 0;
			background-color: #d9d9d920;
			border: none;
			height: 3px;

			@media (width <= 650px) {
				margin: var(--pad-3) 0;
			}
		}
	}

	.bonusState > .profileSection {
		margin-top: var(--pad-3);
	}

	> .info {
		animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
		animation-fill-mode: both;
		transform-origin: left top;

		> .list {
			display: flex;
			justify-content: start;
			gap: var(--pad-5);
			font-size: calc(var(--font-size) + 2px);

			@media (width <= 1350px) {
				gap: var(--pad-4);
			}

			@media (width <= 650px) {
				flex-wrap: wrap;
				gap: var(--pad-3);
			}

			> .title {
				font-weight: bold;
				white-space: nowrap;
				flex: 0 0 210px;

				@media (width <= 800px) {
					flex-basis: 160px;
				}
			}

			> .items {
				flex: 0 1 80%;
				display: flex;
				flex-wrap: wrap;
				gap: var(--pad-5);
				white-space: nowrap;
				align-items: center;

				@media (width <= 1150px) {
					gap: var(--pad-4);
				}

				@media (width <= 650px) {
					gap: var(--pad-3);
				}
			}
		}
	}

	.stats {
		animation: popUp 1 .3s cubic-bezier(.85, 0, .15, 1);
		animation-fill-mode: both;
		transform-origin: left top;
		animation-delay: 100ms;

		> .sectionHeading {
			font-size: calc(var(--font-size) + 4px);
			font-weight: 700;
			text-transform: uppercase;
			@media (width <= 650px) {
				font-size: calc(var(--font-size) + 2px);
			}
		}

		> .items {
			flex: 0 1 80%;
			display: flex;
			flex-wrap: wrap;
			gap: var(--pad-5);
			white-space: nowrap;
			align-items: center;
			justify-content: space-around;

			@media (width <= 1150px) {
				gap: var(--pad-4);
			}

			@media (width <= 650px) {
				gap: var(--pad-3);
			}

			> .item {
				min-width: 10vw;

				> .amount {
					font-weight: bold;
					font-size: 24px;
					color: #fff;
					padding-left: 40px;
				}

				> .name {
					padding-top: 4px;

					&::before {
						content: '';
						margin-right: 8px;
						display: inline-block;
						width: 32px;
						height: 32px;
						background-size: contain;
						background-repeat: no-repeat;
						vertical-align: middle;
					}
				}

				&.messages > .name::before {
					background-image: url(https://cdn.fch.su/resources/icons/stat_messages.png);
				}

				&.social > .name::before {
					background-image: url(https://cdn.fch.su/resources/icons/stat_social.png);
				}

				&.counter > .name::before {
					background-image: url(https://cdn.fch.su/resources/icons/stat_counter.png);
				}

				&.ok > .name::before {
					background-image: url(https://cdn.fch.su/resources/icons/stat_ok.png);
				}
			}
		}
	}

	> .sectionHeading, > .bonusState > .sectionHeading {
		background-color: var(--bg-3);
		padding: var(--pad-3) var(--pad-3) var(--pad-3) var(--pad-5);
		border-radius: 40px;
		font-size: calc(var(--font-size) + 4px);
		font-weight: bold;
		text-transform: uppercase;
		background-position: left var(--pad-2) center;
		background-repeat: no-repeat;
		background-size: auto 65%;

		@media (width <= 650px) {
			padding: var(--pad-2) var(--pad-2) var(--pad-2) var(--pad-4);
			font-size: calc(var(--font-size) + 2px);
			background-position: left 20px center;

		}

		&.achievementsHeading {
			/*background-image: url(https://cdn.fch.su/resources/icons/profile_achievements.png);*/
			animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
			animation-fill-mode: both;
			transform-origin: left top;
			animation-delay: 300ms;
		}

		&.haremHeading {
			/*background-image: url(https://cdn.fch.su/resources/icons/profile_achievements.png);*/
			animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
			animation-fill-mode: both;
			transform-origin: left top;
			animation-delay: 200ms;
		}

		/*&.bonusHeading {
			background-image: url(https://cdn.fch.su/resources/icons/profile_achievements.png);
		}*/
	}

	> .achievements {
		display: flex;
		gap: var(--pad-2);
		flex-wrap: wrap;
		margin: var(--pad-3) 0;
		animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
		animation-fill-mode: both;
		transform-origin: left top;
		animation-delay: 300ms;

		@media (width <= 800px) {
			justify-content: center;
		}

		> .achievement {
			border: 3px solid #393939;
			background-image: linear-gradient(to bottom, #31352f, #656460);
			border-radius: var(--pad-4);
			padding: var(--pad-3);
			flex: 0 0 220px;

			@media (width <= 650px) {
				flex: 0 1 calc(50% - 10px);
				padding: var(--pad-2);
			}

			> .title {
				font-size: calc(var(--font-size) + 4px);
				font-weight: bold;
				text-align: center;
				height: 40px;

				@media (width <= 650px) {
					font-size: calc(var(--font-size) + 2px);
				}

				@media (width <= 400px) {
					font-size: var(--font-size);
				}
			}

			> .icon {
				background-image: url(https://cdn.fch.su/resources/icons/profile_achievement.png);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				height: 140px;
				margin: var(--pad-3) 0;

				@media (width <= 650px) {
					height: 80px;
				}

				@media (width <= 400px) {
					height: 60px;
					margin: var(--pad-2) 0;
				}
			}

			> .description {
				color: #d4d4d4;
				font-size: calc(var(--font-size) + 2px);
				text-align: center;

				@media (width <= 650px) {
					font-size: var(--font-size);
				}

				@media (width <= 400px) {
					font-size: calc(var(--font-size) - 2px);
				}
			}
		}
	}

	> .bonusState {
		> .bonus {
			& .title {
				font-weight: bold;
				font-size: calc(var(--font-size) + 4px);
				margin-bottom: var(--pad-3);
			}

			> .premiumBonus, > .haremBonus, > .daily {
				display: flex;
				align-items: center;
				gap: var(--pad-2);
			}

			> .daily {
				> .item {
					display: flex;
					flex-direction: column;
					gap: var(--pad-1);
				}
			}

			> .invitedUsers {
				display: flex;
				flex-direction: column;
				gap: var(--pad-1);

				> .item {
					display: flex;
					align-items: center;
					gap: var(--pad-3);

					> .ava {
						background-color: var(--bg-2);
					}
				}
			}

			> .description {
				& .smile {
					height: 24px;
					width: auto;
				}
			}
		}
	}

	> .socialUids {
		> .item {
			margin: 8px 0 8px var(--pad-5);

			@media (width <= 650px) {
				margin-left: var(--pad-4);
			}

			&::before {
				content: '';
				width: 24px;
				height: 24px;
				display: inline-block;
				background-size: contain;
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: 8px;
			}

			&.type_vk::before {
				background-image: url(/resources/icons/vk.png);
			}

			&.type_tw::before {
				background-image: url(/resources/icons/twitch.png);
			}

			&.type_tg::before {
				background-image: url(/resources/icons/tg.png);
			}

			&.type_vp::before {
				background-image: url(/resources/icons/vkplay.png);
			}
		}
	}
}

.socialRating {
	font-size: calc(var(--font-size) - 4px);
	cursor: pointer;
	display: flex;
	align-items: flex-end;

	.icon {
		font-size: calc(var(--font-size) + 8px);
		margin-right: var(--pad-2);
	}

	> .lvl {
		position: relative;
		font-weight: bold;
		font-size: calc(var(--font-size) + 2px);
		width: 28px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		border-radius: var(--pad-3);
		border: 1px solid #888;
		background-color: var(--bg-4);
		color: #fff;
		z-index: 1;
	}

	> .points {
		flex-basis: 200px;
		border-radius: var(--pad-2);
		border: 1px solid var(--bg-5);
		border-left: none;
		position: relative;
		margin-left: -20px;
		height: 24px;

		> .fill {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			padding-left: 24px;
			line-height: 24px;
			background-color: var(--bg-4);
			right: 80%;
		}
	}
}

.changeAvaWindow {
	padding: var(--pad-5);

	> .fileInput {
		margin-bottom: var(--pad-3);
	}

	> .buttons {
		display: flex;
		gap: var(--pad-3);
	}
}

.profileViewsList {
	max-height: 300px;
	overflow-y: auto;
	display: flex;
	flex-direction: column-reverse;
	gap: var(--pad-1);
	align-items: flex-start;

	> .item {
		display: flex;
		gap: var(--pad-2);
		align-items: center;

		> .count {
			font-size: var(--font-size);
			color: #000;
			font-weight: bold;
			padding: var(--pad-1) var(--pad-2);
			background-color: #fc4;
			border-radius: var(--pad-2);
		}
	}
}

.editProfile {
	text-align: left;
	padding: var(--pad-4);

	> .fieldTitle {
		font-size: calc(var(--font-size) + 4px);
		margin-top: var(--pad-3);
	}

	> .input {
		width: 100%;
		display: block;
		max-width: 400px;
		padding: var(--pad-2) var(--pad-3);
		margin-top: var(--pad-1);
		background-color: #333;
		color: #fff;
		font-size: calc(var(--font-size) + 4px);
		border: 1px solid #000;
	}

	> .genderContainer {
		display: flex;
		gap: var(--pad-2);

		> .radioLabel {
			font-size: calc(var(--font-size) + 4px);
			vertical-align: middle;
			font-weight: bold;

			> .radio {
				width: 24px;
				height: 24px;
				vertical-align: middle;
			}
		}
	}

	> .saveProfile {
		display: block;
		margin: var(--pad-4) auto 0;
		width: 100%;
		max-width: 300px;
		padding: var(--pad-2);
		font-size: calc(var(--font-size) + 4px);
	}

	> .colors {
		margin-top: var(--pad-2);
		display: flex;
		flex-wrap: wrap;
		gap: var(--pad-2);

		> .radio {
			appearance: none;
			border: 1px solid #000;
			margin: 0;
			padding: 0;
			width: 24px;
			height: 24px;
			cursor: pointer;
			box-sizing: border-box;
			transition: border var(--trn);

			&:checked {
				border: 3px solid #fff;
			}

			&.color_0 {
				background-color: var(--nc-0);
			}

			&.color_1 {
				background-color: var(--nc-1);
			}

			&.color_2 {
				background-color: var(--nc-2);
			}

			&.color_3 {
				background-color: var(--nc-3);
			}

			&.color_4 {
				background-color: var(--nc-4);
			}

			&.color_5 {
				background-color: var(--nc-5);
			}

			&.color_6 {
				background-color: var(--nc-6);
			}

			&.color_7 {
				background-color: var(--nc-7);
			}

			&.color_8 {
				background-color: var(--nc-8);
			}

			&.color_9 {
				background-color: var(--nc-9);
			}

			&.color_10 {
				background-color: var(--nc-10);
			}

			&.color_11 {
				background-color: var(--nc-11);
			}

			&.color_12 {
				background-color: var(--nc-12);
			}

			&.color_13 {
				background-color: var(--nc-13);
			}

			&.color_14 {
				background-color: var(--nc-14);
			}

			&.color_15 {
				background-color: var(--nc-15);
			}
		}
	}
}

.nc_0 {
	color: var(--nc-0);
}

.nc_1 {
	color: var(--nc-1);
}

.nc_2 {
	color: var(--nc-2);
}

.nc_3 {
	color: var(--nc-3);
}

.nc_4 {
	color: var(--nc-4);
}

.nc_5 {
	color: var(--nc-5);
}

.nc_6 {
	color: var(--nc-6);
}

.nc_7 {
	color: var(--nc-7);
}

.nc_8 {
	color: var(--nc-8);
}

.nc_9 {
	color: var(--nc-9);
}

.nc_10 {
	color: var(--nc-10);
}

.nc_11 {
	color: var(--nc-11);
}

.nc_12 {
	color: var(--nc-12);
}

.nc_13 {
	color: var(--nc-13);
}

.nc_14 {
	color: var(--nc-14);
}

.nc_15 {
	color: var(--nc-15);
}

.userProfileStatus {
	display: flex;
	align-items: center;
	gap: var(--pad-1);
	margin: 0 auto;
	font-size: calc(var(--font-size) + 6px);
	white-space: nowrap;

	@media (width <= 1350px) {
		font-size: calc(var(--font-size) + 2px);
		margin-top: var(--pad-3);
	}

	@media (width <= 1150px) {
		margin-top: var(--pad-2);
	}

	@media (width <= 650px) {
		white-space: initial;
		margin-top: var(--pad-1);
	}

	> .iconButton {
		width: 18px;
		height: 18px;
	}

	> .current {
		> .text {
			max-width: calc(100% - 24px);
			word-break: break-word;
		}

		> .input {
			padding: var(--pad-2) var(--pad-3);
			font-size: calc(var(--font-size) + 2px);
			flex-grow: 1;
			flex-basis: min-content;
			min-width: 0;
		}
	}
}

.userStatus {
	max-width: 100%;

	> .userStatusText {
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		word-break: break-word;
	}
}

.userProfileStatus > .current, .userStatus {
	display: flex;
	gap: var(--pad-2);
	align-items: center;
	/*! flex: 1 1 40%; */
	justify-content: flex-start;
	min-width: 0;
}

.userProfileStatus > .current {
	gap: var(--pad-4);

	> .userStatusIcon {
		transform-origin: left center;
		scale: 2;
	}
}

.userStatusEditIcon {
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--btn-bg);
	width: 32px;
	height: 32px;
	position: relative;
	flex-basis: 32px;

	> .userStatusIcon {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		scale: 1.2;
	}

	> .selector {
		position: absolute;
		left: 0;
		top: 42px;
		width: 224px;
		display: flex;
		flex-wrap: wrap;
		gap: var(--pad-3);
		padding: var(--pad-5) var(--pad-2) var(--pad-2) var(--pad-2);
		border-radius: var(--pad-2);
		background-color: #111;
		cursor: default;
		z-index: 1;
		max-height: 300px;
		overflow-y: auto;

		> .item {
			cursor: pointer;
			transition: scale var(--trn);
			scale: 1.2;

			&.smileStatus {
				background-size: cover;
			}

			@media (hover: hover) {
				&:hover {
					scale: 2;
				}
			}
		}
	}
}

.userStatusIcon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-image: url(https://cdn.fch.su/resources/icons/statuses.png);
	border-radius: var(--pad-1);
	--dx: -16px;

	&.smileStatus {
		background-size: contain;
	}

	&.st_-1 {
		display: none;
	}

	&.st_1 {
		background-position-x: var(--dx);
	}

	&.st_2 {
		background-position-x: calc(2 * var(--dx));
	}

	&.st_3 {
		background-position-x: calc(3 * var(--dx));
	}

	&.st_4 {
		background-position-x: calc(4 * var(--dx));
	}

	&.st_5 {
		background-position-x: calc(5 * var(--dx));
	}

	&.st_6 {
		background-position-x: calc(6 * var(--dx));
	}

	&.st_7 {
		background-position-x: calc(7 * var(--dx));
	}

	&.st_8 {
		background-position-x: calc(8 * var(--dx));
	}

	&.st_9 {
		background-position-x: calc(9 * var(--dx));
	}

	&.st_10 {
		background-position-x: calc(10 * var(--dx));
	}

	&.st_11 {
		background-position-x: calc(11 * var(--dx));
	}

	&.st_12 {
		background-position-x: calc(12 * var(--dx));
	}

	&.st_13 {
		background-position-x: calc(13 * var(--dx));
	}

	&.st_14 {
		background-position-x: calc(14 * var(--dx));
	}

	&.st_15 {
		background-position-x: calc(15 * var(--dx));
	}

	&.st_16 {
		background-position-x: calc(16 * var(--dx));
	}

	&.st_17 {
		background-position-x: calc(17 * var(--dx));
	}

	&.st_18 {
		background-position-x: calc(18 * var(--dx));
	}

	&.st_19 {
		background-position-x: calc(19 * var(--dx));
	}

	&.st_20 {
		background-position-x: calc(20 * var(--dx));
	}

	&.st_21 {
		background-position-x: calc(21 * var(--dx));
	}

	&.st_22 {
		background-position-x: calc(22 * var(--dx));
	}

	&.st_23 {
		background-position-x: calc(23 * var(--dx));
	}

	&.st_24 {
		background-position-x: calc(24 * var(--dx));
	}

	&.st_25 {
		background-position-x: calc(25 * var(--dx));
	}

	&.st_26 {
		background-position-x: calc(26 * var(--dx));
	}

	&.st_27 {
		background-position-x: calc(27 * var(--dx));
	}

	&.st_28 {
		background-position-x: calc(28 * var(--dx));
	}

	&.st_29 {
		background-position-x: calc(29 * var(--dx));
	}

	&.st_30 {
		background-position-x: calc(30 * var(--dx));
	}

	&.st_31 {
		background-position-x: calc(31 * var(--dx));
	}

	&.st_32 {
		background-position-x: calc(32 * var(--dx));
	}

	&.st_33 {
		background-position-x: calc(33 * var(--dx));
	}

	&.st_34 {
		background-position-x: calc(34 * var(--dx));
	}

	&.st_35 {
		background-position-x: calc(35 * var(--dx));
	}

	&.st_36 {
		background-position-x: calc(36 * var(--dx));
	}

	&.st_37 {
		background-position-x: calc(37 * var(--dx));
	}

	&.st_38 {
		background-position-x: calc(38 * var(--dx));
	}
}

.chatMiddleContainer {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
	padding-top: var(--main-container-top);

	@media (width <= 1150px) {
		background-color: var(--bg-1);
	}

	> .autoScrollButton {
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 50px;
		height: 50px;
		background-image: url(https://cdn.fch.su/resources/icons/send_btn.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 32px 32px;
		rotate: 180deg;
		z-index: 4;

		> .count {
			position: absolute;
			bottom: -14px;
			left: 50%;
			rotate: 180deg;
			translate: -50% 0;
			font-size: var(--font-size);
			background-color: var(--chat-list-unreadCount-bg);
			border-radius: var(--pad-3);
			padding: var(--pad-1) var(--pad-2);
		}
	}

	> .placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;

		> .text {
			color: #ccc;
			font-size: calc(var(--font-size) + 4px);
		}
	}
}

.chatInput {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	margin: var(--pad-2) 0;
	gap: var(--pad-2);

	@media (width <= 1150px) {
		margin: var(--pad-2) var(--pad-2) var(--pad-3) var(--pad-2);
		&:not(.mobileShow) {
			display: none;
		}
	}

	> .messageEditMode {
		position: absolute;
		z-index: 2;
		bottom: 100%;
		left: 16px;
		display: flex;
		gap: 16px;
		padding: 4px 8px;
		background-color: var(--bg-4);
		border-radius: 8px 8px 0 0;

		> .cancelBtn {
			color: #fa0;
			cursor: pointer;
		}
	}

	> .input {
		@media (width <= 950px) {
			padding: var(--pad-2) 90px var(--pad-2) var(--pad-2);
			font-size: calc(var(--font-size) + 2px);
		}
	}

	> .inputButtons {
		position: absolute;
		right: 60px;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: var(--pad-3);
		width: 62px;

		> .attachmentBtn.disabled {
			pointer-events: none;
			opacity: .5;
		}
	}

	> .sendBtn {
		border-radius: 50%;
		background-color: #5a7dc4;
		width: 39px;
		height: 39px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 39px;
		position: relative;
		touch-action: none;
		-webkit-user-drag: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;

		> .icon {
			width: 22px;
			height: 22px;
		}

		&.micro > .icon {
			background-image: url(https://cdn.fch.su/resources/icons/micro.png) !important;
		}

		&.valentineHeart {
			background-image: url(https://cdn.fch.su/resources/icons/valentine_input_btn.png);
			background-size: cover;
			background-color: transparent;
			border-radius: 0;

			> .icon {
				display: none;
			}
		}
	}

	> .lc {
		position: absolute;
		right: 92px;
		bottom: 6px;
	}

	@media (hover: hover) {
		> .sendBtn,
		> .attachmentBtn {
			&:hover {
				opacity: 1;
			}
		}
	}
}

.chatInputQuote {
	height: 40px;
	border-radius: var(--pad-4) var(--pad-4);
	font-size: calc(var(--font-size) + 2px);
	line-height: 40px;
	font-weight: bold;
	padding: 0 var(--pad-5) 0 var(--pad-4);
	vertical-align: middle;
	background-color: #fff2;
	white-space: nowrap;
	cursor: pointer;
	position: relative;

	@media (width <= 950px) {
		padding: 0 var(--pad-4) 0 var(--pad-2);
		font-size: calc(var(--font-size) - 2px);
	}

	&::after {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		width: 20px;
		height: 20px;
		transform: translatey(-50%);
		background-image: url(https://cdn.fch.su/resources/icons/quote_close.png);
		background-repeat: no-repeat;
		background-position: center center;

		@media (width <= 950px) {
			right: 6px;
		}
	}

	@media (hover: hover) {
		&:hover {
			&::after {
				filter: brightness(150%);
			}
		}
	}

	&.private {
		padding-left: 65px;

		@media (width <= 950px) {
			padding-left: 45px;
		}

		&::before {
			content: '';
			position: absolute;
			left: 20px;
			top: 50%;
			width: 32px;
			height: 32px;
			transform: translatey(-50%);
			background-image: url(https://cdn.fch.su/resources/icons/quote_private.png);
			background-repeat: no-repeat;
			background-position: center center;

			@media (width <= 950px) {
				left: 15px;
				width: 24px;
				height: 24px;
				background-size: contain;
			}
		}
	}
}

.chatMessageEditor {
	flex-grow: 1;
	padding: 10px 90px 10px 16px;
	border: none !important;
	background-color: var(--input-text-bg);
	border-radius: var(--pad-4);
	color: #ddd;
	position: relative;
	display: inline-block;
	word-break: break-word;
	font-size: calc(var(--font-size) + 2px);
	white-space: pre-wrap;

	& img {
		max-width: 64px;
		max-height: 32px;
	}

	&.enabled:empty:not(:focus)::after {
		content: 'Введите сообщение...';
		position: absolute;
		color: #999;
		pointer-events: none;
	}

	&.authRequired::after {
		content: 'Авторизуйтесь чтобы написать сообщение...';
		color: #999;
		pointer-events: none;
	}

	&.noPermission::after {
		content: 'Нет прав отправлять сообщения...';
		color: #999;
		pointer-events: none;
	}
}

.editorQuote, .editorPrivateTo {
	background-color: #0003;
	border-radius: var(--pad-3);
	padding: var(--pad-1) var(--pad-2);
	margin: 0 var(--pad-1);
}

.editorPrivateTo::before {
	content: 'Сообщение для ';
	color: #999;
	font-style: italic;
	font-weight: normal;
}

@media (hover: hover) {
	.chatInput > .sendBtn,
	.chatInput > .inputButtons > .attachmentBtn,
	.chatInputSmileSelector > .showBtn {
		transition: filter var(--trn);

		&:hover {
			filter: brightness(85%);
		}
	}
}

.chatInputSmileSelector {
	position: relative;
	bottom: 0;
	right: 0;

	> .showBtn {
		cursor: pointer;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-image: url(https://cdn.fch.su/resources/icons/smile_btn.png);
		background-size: contain;
	}

	> .selector {
		position: absolute;
		bottom: 32px;
		right: -56px;
		width: 420px;
		height: 440px;

		> .updateBtn {
			position: absolute;
			bottom: 2px;
			left: 50%;
			transform: translatex(-50%);
			padding: var(--pad-1) var(--pad-2);
			background-color: #000a;
			color: #fff;
			border-radius: var(--pad-2);
			cursor: pointer;
		}
	}

	> .copyright {
		position: absolute;
		bottom: 380px;
		right: -56px;
		background-color: #333e;
		text-align: right;
		padding: var(--pad-1) var(--pad-2);
		border-radius: var(--pad-2);
		white-space: nowrap;

		@media (width < 720px) {
			position: fixed;
			bottom: 358px;
			right: 0;
		}
	}
}

.floatingWindow {
	position: fixed;
	z-index: 999;
	background-color: #333e;
	padding: var(--pad-2);
	border-radius: var(--pad-3);
	border: 2px solid #fff3;
	translate: 0 -15px;
	overflow-y: auto;

	&.bottom {
		translate: 0 15px;
	}
}

.reactionSmileSelector {
	position: absolute;
}

.chatInputSmileSelector > .selector,
.reactionSmileSelector .selector {
	z-index: 30;
	background-color: #333e;
	padding: var(--pad-2);
	border-radius: var(--pad-3);
	border: 2px solid #fff3;
}

.reactionSmileSelector .selector {
	position: fixed;
	width: min(420px, 85vw);
	height: min(440px, 85vw);
	z-index: 15;
	transform: translate(-100%, -100%);
}

.gSelectorTabs {
	display: flex;
	justify-content: space-around;
	position: absolute;
	top: 5px;
	left: 10px;
	right: 10px;

	> .tab {
		cursor: pointer;
		flex-grow: 1;
		text-align: center;
		padding: var(--pad-1) var(--pad-2);
		border-radius: var(--pad-3);

		&.active {
			background-color: #fa03;
		}
	}

	padding: var(--pad-1);
}

.chatInputSmileSelector > .selector > .list,
.reactionSmileSelector > .selector > .list {
	overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	padding-bottom: var(--pad-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--pad-2);
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
}

.chatInputSmileSelector > .selector {
	> .searchInput {
		position: absolute;
		left: 10px;
		right: 10px;
		top: 40px;
		padding: var(--pad-1) var(--pad-2);
	}

	> .list.search {
		padding-top: var(--pad-4);
	}

	@media (width < 720px) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 90px;
		width: 100dvw;
		height: calc(50vh);
		z-index: 40000;
		border: none;
		border-radius: 0;

		> .list {
			max-height: calc(50vh - 30px);
		}
	}
}

.reactionSmileSelector .selector > .list > .emoji {
	font-size: calc(var(--font-size) + 10px);
}

.reactionSmileSelector .selector > .list > .smile {
	min-height: 20px;
	width: auto;
}

.chatInputSmileSelector > .selector > .list > .item,
.reactionSmileSelector > .selector > .list > .item {
	cursor: pointer;
	transition: scale var(--trn);
	height: 36px;
}

@media (hover: hover) {
	.chatInputSmileSelector > .selector > .list > .item:hover,
	.reactionSmileSelector > .selector > .list > .item:hover {
		scale: 1.4;
	}

	.chatInputSmileSelector > .showBtn:hover {
		opacity: 1;
	}
}

.userHarem {
	margin: var(--pad-4) auto;
	animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
	animation-fill-mode: both;
	transform-origin: left top;
	animation-delay: 100ms;

	@media (width <= 650px) {
		margin: var(--pad-3) auto;
	}

	> .inHarem {
		display: flex;
		align-items: center;
		margin: var(--pad-4) auto;
		gap: var(--pad-2);
		flex-wrap: wrap;

		@media (width <= 650px) {
			margin: var(--pad-3) auto;
		}

		@media (width <= 800px) {
			justify-content: center;
		}

		> .ownerTitle {
			font-weight: bold;
			font-size: calc(var(--font-size) + 4px);
		}

		> .haremItem {
			width: auto;
			flex-direction: row-reverse;
			gap: var(--pad-2);

			> .ava {
				width: 40px;
				height: 40px;

				> .onlineIndicator {
					width: 12px;
					height: 12px;
					border-width: 1px;
					right: 0;
					bottom: 0;
				}
			}

			> .userNick {
				font-size: calc(var(--font-size) + 2px);
				margin: 0;
			}
		}

		> .button {
			font-size: var(--font-size);
			padding: var(--pad-2) var(--pad-3);
		}
	}

	> .title {
		font-size: calc(var(--font-size) + 10px);
		font-weight: bold;
		margin-bottom: var(--pad-1);
	}

	> .items {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pad-4);
		margin: var(--pad-3) auto;

		@media (width <= 800px) {
			justify-content: center;
		}
	}
}

.haremItem {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;

	> .userNick {
		font-size: calc(var(--font-size) + 4px);
		line-height: 24px;
		white-space: nowrap;
		margin-bottom: var(--pad-2);
		overflow: hidden;
		max-width: 120px;
	}

	> .ava {
		width: 120px;
		height: 120px;
		border: none;

		@media (width <= 650px) {
			width: 80px;
			height: 80px;
		}

		> .onlineIndicator {
			width: 22px;
			height: 22px;
			right: 6px;
			bottom: 6px;
			border-width: 2px;

			@media (width <= 650px) {
				width: 18px;
				height: 18px;
				right: 2px;
				bottom: 2px;
			}
		}

		&.partyAnim1 {
			animation: 1s ease-in-out infinite party_1;
		}

		&.partyAnim2 {
			transform-origin: center bottom;
			animation: 1.5s ease-in-out infinite party_2;
		}

		&.partyAnim3 {
			transform-origin: center bottom;
			animation: 1.5s ease-in-out infinite party_3;
		}

		&.partyAnim4 {
			transform-origin: center bottom;
			animation: 1.5s ease-in-out infinite party_4;
		}

		&.partyAnim5 {
			animation: 3.0s linear infinite party_5;
		}

		&.partyAnim6 {
			animation: 5.0s ease infinite party_6;
		}

		&.partyAnim7 {
			animation: 5.0s ease infinite party_7;
		}
	}

	> .price {
		margin-top: var(--pad-2);
		font-size: calc(var(--font-size) + 6px);
		font-weight: bold;

		@media (width <= 650px) {
			font-size: calc(var(--font-size) + 2px);

			&::before {
				width: 20px !important;
				height: 28px !important;
			}
		}

		&::before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			margin-right: var(--pad-2);
			width: 28px;
			height: 40px;
			background-size: contain;
			background-image: url(https://cdn.fch.su/resources/icons/foxcoin_v2.png);
			background-repeat: no-repeat;
		}
	}

	> .kick {
		opacity: 0;
		transition: opacity var(--trn), background-color var(--trn);
		width: 28px;
		height: 28px;
		position: absolute;
		top: 32px;
		right: 0;
		border-radius: 50%;
		border: 2px solid #fff3;
		background-color: #333c;

		@media (width <= 1150px) {
			opacity: 1;
		}

		> .icon {
			background-size: 12px 12px;
		}

		@media (hover: hover) {
			&:hover {
				background-color: #aaa8;
			}
		}
	}

	@media (hover: hover) {
		&:hover {
			> .kick {
				opacity: 1;
			}
		}
	}
}

@keyframes party_1 {
	40% {
		translate: 0;
	}
	50% {
		translate: 0 -10px;
	}
}

@keyframes party_2 {
	20% {
		rotate: -6deg;
	}
	40% {
		rotate: 6deg;
	}
	60% {
		rotate: 0deg;
	}
}

@keyframes party_3 {
	20% {
		transform: skew(5deg, 5deg);
		scale: 1 1.1;
	}

	40% {
		scale: 1;
	}

	60% {
		transform: skew(-5deg, -5deg);
		scale: 1 1.1;
	}

	80% {
		transform: none;
		scale: 1;
	}
}

@keyframes party_4 {
	20% {
		scale: 1 0.9;
	}

	40% {
		scale: 1;
	}
}

@keyframes party_5 {
	10%, 20%, 45%, 55%, 80%, 90% {
		scale: 1;
	}
	15%, 50%, 85% {
		scale: 1.05;
	}
	100% {
		rotate: 360deg;
	}
}

@keyframes party_6 {
	0%, 10% {
		transform: none;
	}
	30%, 100% {
		transform: rotate3d(0, 1, 0, 720deg);
	}
}

@keyframes party_7 {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

.profileOnlineIndicator {
	display: flex;
	gap: var(--pad-1);
	align-items: center;

	> .time {
		font-size: calc(var(--font-size) + 2px);
		color: #999;
		margin-left: var(--pad-2);
	}
}

.profilePremium {
	background-image: url(https://cdn.fch.su/resources/icons/premium_large.png);
	background-position: left center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	font-size: calc(var(--font-size) + 2px);
	padding: var(--pad-2) 0 var(--pad-2) 52px;
	cursor: pointer;
	font-weight: bold;

	&:not(.active) {
		filter: grayscale(100%);
	}
}

.premiumInfo {
	text-align: center;

	> .button {
		padding: var(--pad-2) var(--pad-4);
		margin: var(--pad-2);
		max-width: 350px;
		width: calc(100% - 20px);
	}

	> .title {
		text-align: left;
		font-weight: bold;
		margin: 0 0 var(--pad-2) var(--pad-2);
	}

	> .bonusList {
		text-align: left;

		> .item {
			margin: var(--pad-2);

			&::before {
				content: '';
				display: inline-block;
				width: 20px;
				height: 18px;
				background-image: url(https://cdn.fch.su/resources/icons/premium_large.png);
				background-size: contain;
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: var(--pad-1);
			}
		}
	}
}

.premiumInfoTime {
	margin: var(--pad-2) var(--pad-3) var(--pad-3);
	font-size: calc(var(--font-size) + 2px);
}

.settings {
	max-width: 500px;

	> .settingsItem {
		font-size: calc(var(--font-size) + 2px);
		transition: background-color var(--trn);
		color: #ccc;

		@media (width <= 650px) {
			font-size: var(--font-size);
			margin: var(--pad-1) 0;
		}
	}
}

.checkboxLabel, .settings > .settingsItem {
	display: flex;
	gap: var(--pad-4);
	justify-content: space-between;
	cursor: pointer;
	align-items: center;
	padding: var(--pad-3);
	margin: auto -18px;
	border-radius: var(--pad-5);

	&:last-child {
		border-bottom: none;
	}

	@media (hover: hover) {
		&:hover {
			background-color: #fff1;
		}
	}
}

.input {
	border: none;
	border-radius: var(--pad-5);
	color: var(--inp-color);
	background-color: var(--inp-bg);
	font-size: calc(var(--font-size) + 2px);
	padding: var(--pad-2) var(--pad-3);

	&:invalid {
		border: 2px solid #700;
	}
}

.attachmentButton {
	font-size: var(--font-size);
	display: inline-block;
	margin: 0 var(--pad-2);
	padding: var(--pad-1) var(--pad-2);
	vertical-align: middle;
	color: #a74;
	cursor: pointer;
	transition: color var(--trn);

	&::before {
		content: '📎';
		margin-right: var(--pad-1);
		transition: filter var(--trn);
	}

	@media (hover: hover) {
		&:hover {
			color: #fa0;

			&::before {
				filter: brightness(130%);
			}
		}
	}
}

.attachments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pad-2);
	width: 100%;
	margin-top: var(--pad-2);
	--max-width: 100dvw;
	--max-height: 100dvh;

	> .attachment {
		min-width: 0;
		min-height: 0;
		width: auto;
		max-width: var(--max-width);
		max-height: var(--max-height);

		&:has(.video) {
			min-height: 300px;
			min-width: 200px;
		}

		&:has(.audio) {
			min-width: 80%;
		}

		&:not(.dynamic) {
			height: 35vh;
		}

		> .audio {
			max-width: 100%;
		}

		> .image {
			vertical-align: bottom;
			width: 100%;
			height: 100%;
			object-fit: cover;
			cursor: zoom-in;
			-webkit-user-drag: none;
			-webkit-touch-callout: none;
			border-radius: var(--pad-2);
		}

		> .video {
			width: 100%;
			height: 100%;
			border: none;
			border-radius: var(--pad-2);

			&.preview {
				background: var(--bg-5) url(https://cdn.fch.su/resources/icons/video.png) no-repeat center center;
				cursor: pointer;
			}
		}
	}

	&.collage {
		> .attachment {
			flex: 1 1 max(20%, 140px);

			&.horizontal {
				flex-basis: 45%;
			}

			&.vertical {
				flex-basis: max(15%, 140px);
			}

			&.square {
				flex-basis: max(35%, 140px);
			}

			&.dynamic {
				flex: 1 1 min-content;
			}
		}
	}

	&:not(.collage) {
		> .attachment {
			&.horizontal {
				max-width: min(100%, var(--max-width));

				&:has(.video) {
					width: min(100%, 900px);
				}
			}

			&.vertical, &.square, &.circle {
				max-width: min(40vw, var(--max-width));
			}

			&.circle {
				overflow: hidden;
				border-radius: 50%;
			}
		}
	}
}

.chatMessageAdminButton {
	margin-right: var(--pad-1);
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	cursor: pointer;
	transition: opacity var(--trn);
	background-size: 100% 100%;

	@media (hover: hover) {
		&:hover {
			opacity: 1 !important;
		}
	}

	&.banUser {
		background-image: url(https://cdn.fch.su/resources/icons/chat_ban.png);
	}

	&.removeMessage {
		background-image: url(https://cdn.fch.su/resources/icons/chat_remove_message.png);
	}

	&.clearMessages {
		background-image: url(https://cdn.fch.su/resources/icons/chat_clear_messages.png);
	}
}

.foxCoinButton {
	> .coins {
		display: inline-block;
		vertical-align: middle;
		height: 24px;
		background: url(https://cdn.fch.su/resources/icons/foxcoin_v2.png) no-repeat;
		background-size: auto 100%;
		padding-left: var(--pad-4);
		line-height: 24px;
		filter: saturate(0) brightness(200%);
	}

	> .text {
		margin-right: var(--pad-3);
		vertical-align: middle;
	}
}

.foxCoinSplitButton {
	background-color: #df9f55;
	text-shadow: 0 1px 0 #0005;

	&:hover {
		background-color: #bf7f35;
	}

	> .coins {
		display: inline-block;
		vertical-align: middle;
		height: 24px;
		background: url(https://cdn.fch.su/resources/icons/foxcoin_v2.png) no-repeat;
		background-size: auto 100%;
		padding-left: 30px;
		line-height: 24px;
		filter: saturate(0) brightness(200%);
	}

	> .text {
		margin-left: 16px;
		vertical-align: middle;
		position: relative;

		&::before {
			content: '';
			display: inline-block;
			position: absolute;
			left: -8px;
			top: 50%;
			transform: translatey(-50%);
			height: 28px;
			width: 2px;
			background-color: #d48b37;
		}
	}
}

.chatCreate {
	display: flex;
	flex-direction: column;
	gap: var(--pad-2);
	max-width: 450px;
	padding: var(--pad-3);
}

.formTitle {
	font-weight: bold;
	font-size: calc(var(--font-size) + 2px);
	margin: 20px 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.chatEditScene {
	overflow-y: auto;
	padding: var(--main-container-top) var(--pad-3) var(--pad-3) var(--pad-3);
	max-height: 100%;

	@media (width <= 1150px) {
		padding: var(--main-container-top) var(--pad-3) var(--footer-bottom) var(--pad-3);
	}

	@media (width <= 500px) {
		padding: var(--main-container-top) var(--pad-2) var(--footer-bottom) var(--pad-2);
	}

	.input {
		width: auto;
		max-width: 100%;
		min-width: 0;

		&.description {
			width: 100%;
		}
	}

	.usersList {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pad-2);
		justify-content: space-between;

		> .userNick {
			background-color: #0005;
			padding: var(--pad-1) var(--pad-2);
			border-radius: var(--pad-2);
		}
	}

	& button {
		@media (width <= 500px) {
			font-size: var(--font-size);
			padding: var(--pad-2) var(--pad-3);
		}
	}
}

.usersListSelect {
	max-width: 400px;

	> .list {
		max-height: 300px;
		overflow-y: auto;

		> .item {
			display: flex;
			font-size: calc(var(--font-size) + 2px);
			margin-bottom: var(--pad-1);
			padding: var(--pad-1) var(--pad-2);
			gap: var(--pad-3);
			background-color: #0003;
			border-radius: var(--pad-1);
			justify-content: space-between;

			> .userNick {
				line-height: 24px;
			}
		}
	}

	> .addLine {
		display: flex;
		align-items: center;
		gap: var(--pad-2);
		margin-top: var(--pad-1);

		> .addInput {
			flex-grow: 1;
			font-size: var(--font-size);
		}

		> .iconButton {
			margin-right: var(--pad-2);
		}
	}

	@media (hover: hover) {
		> .list > .item,
		> .addLine {
			> .iconButton {
				opacity: .7;
				transition: opacity var(--trn);

				&:hover {
					opacity: 1;
				}
			}
		}
	}
}

.botCommandEdit, .roomIntegrationEdit, .roomIntegrationCreate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--pad-2);
	align-items: stretch;
	margin: var(--pad-3) 0;
	border: 1px solid #fff2;
	border-radius: var(--pad-2);
	padding: var(--pad-2);
}

.botCommandEdit {
	> .commandName {
		text-align: center;
		background-color: #fff2;
		border-radius: var(--pad-2) var(--pad-2) 0 0;
		margin: -8px;
		padding: var(--pad-2);
	}

	> .formTitle {
		text-align: left;
		font-size: var(--font-size);
		margin-bottom: 0;
	}

	> .name {
		width: 120px;
	}

	> .value {
		flex-grow: 1;
		min-width: 300px;
	}

	> .chatRanksEditor {
		> .chatRankEdit {
			@media (width <= 500px) {
				max-width: calc(100dvw - 60px);
			}
		}
	}
}

.chatBotConfigurationEditor {
	> .addCommand {
		display: flex;
		gap: var(--pad-3);

		> .button {
			flex: 1 2 100px;
		}

		> .commandTypeSelect {
			flex: 1 2 200px;

			@media (width <= 500px) {
				max-width: 230px;
			}
		}
	}
}

.roomIntegrationEdit {
	> .type {
		display: flex;
		gap: var(--pad-1);
		align-items: center;
		font-size: calc(var(--font-size) + 2px);
		font-weight: bold;

		> .integrationIcon {
			max-width: 24px;
			max-height: 24px;
		}
	}

	> .formTitle {
		&.nomargin {
			margin-top: 0;
		}
	}
}

.roomIntegrationCreate > .alert {
	color: #ff5;
	text-align: center;
}

.chatRankEdit {
	display: flex;
	margin: var(--pad-2) 0;
	gap: var(--pad-2);
	align-items: center;

	@media (width <= 500px) {
		min-width: 0;
		max-width: calc(100dvw - 40px);
	}

	> .points {
		flex: 1 2 50px;
	}

	> .name {
		flex: 1 1 150px;
	}
}

.widgetsSettings {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #333;
	padding: var(--pad-5) var(--pad-3);
	color: #ccc;

	> .closeButton {
		position: absolute;
		top: 15px;
		right: 15px;

		> .icon {
			width: 32px;
			height: 32px;
			background-size: 100% 100%;
		}
	}

	> .heading {
		margin-bottom: var(--pad-4);
		margin-left: var(--pad-4);
	}
}

.widgetsList {
	display: flex;
	flex-direction: column;
	gap: var(--pad-4);
}

.widgetListItem {
	display: flex;
	gap: var(--pad-2);
	justify-content: space-around;
	align-items: center;
}

.widgetListItem {
	> .textWithCopy {
		> .copyToClipboard {
			vertical-align: middle;
			margin-left: var(--pad-2);
		}
	}
}

.widgetConfiguration {
	display: flex;
	flex-direction: column;
	gap: var(--pad-2);

	> .button {
		font-size: calc(var(--font-size) + 4px);
		padding: var(--pad-2) var(--pad-3);
	}
}

.messageShowAnimation {
	animation: messageShowAnimation;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.messageHideAnimation {
	animation: messageHideAnimation;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes messageShowAnimation {
	0% {
		opacity: 0;
		max-height: 0;
		transform: scale(0.2);
		padding: 0;
		margin: 0;
	}
	99% {
		max-height: 50px;
	}
	100% {
		opacity: 1;
		max-height: inherit;
	}
}

@keyframes messageHideAnimation {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(0.2);
	}
}

.blurTopBorder {
	-webkit-mask-image: -webkit-linear-gradient(transparent 0%, #000 25%);
	mask-image: linear-gradient(transparent 0%, #000 25%);
}

.inventory {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	max-width: 300px;
	flex-wrap: wrap;

	> .change {
		font-size: calc(var(--font-size) + 10px);
		padding-right: var(--pad-2);
	}

	> .amount {
		> b {
			font-size: calc(var(--font-size) + 6px);
		}
	}
}

.inventoryItem {
	background-color: var(--iv-bg);
	background-position: center center;
	background-size: 75% 75%;
	background-repeat: no-repeat;
	border: 1px solid var(--trash);
	position: relative;
	width: 52px;
	height: 52px;
	margin: var(--pad-1);

	> .count {
		position: absolute;
		bottom: 6px;
		right: 6px;
		font-size: calc(var(--font-size) - 2px);
		line-height: 8px;
		font-weight: bold;
		color: var(--iv-ct);
		pointer-events: none;
	}

	&.il_0 {
		border-color: var(--trash);
	}

	&.il_1 {
		border-color: var(--normal);
	}

	&.il_2 {
		border-color: var(--rare);
	}

	&.il_3 {
		border-color: var(--heroic);
	}

	&.il_4 {
		border-color: var(--epic);
	}

	&.il_5 {
		border-color: var(--legendary);
	}
}

.ii_1_e_0 {
	background-image: url(https://cdn.fch.su/resources/icons/foxcoin_v2.png);
}

.foxTicket {
	text-align: center;
	font-weight: 700;
	color: #d50;
	padding: var(--pad-1);
	display: inline-block;
	box-shadow: 1px 1px 4px #0000007f;
	background-color: #fff;
	border-radius: var(--pad-1);
}

.foxTicketBorder {
	border: 2px solid;
	padding: var(--pad-1);
}

.foxTicketNum {
	margin: var(--pad-3) auto;
	font-size: calc(var(--font-size) + 6px);
	color: #000;
}

.foxTicketUpp {
	text-transform: uppercase;
	font-size: calc(var(--font-size) - 4px);
}

.foxTicketTrans {
	font-size: var(--font-size);
}

.chatMiddleContainer {
	> .dropzone {
		position: absolute;
		top: var(--main-container-top);
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-weight: 700;
		background-color: #1118;
		font-size: calc(var(--font-size) + 14px);
		border: 3px dashed #777;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity var(--trn);
		opacity: 0;
		pointer-events: none;

		&.dragover {
			opacity: 1;
			pointer-events: all;
		}

		> div {
			pointer-events: none;
			width: 100%;
			color: #ccc;
		}
	}
}

.messageFloatActions {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-color: #0008;
	z-index: 100;
	opacity: 0;
	transition: opacity var(--trn);

	&.show {
		opacity: 1;

		> .container {
			> .item {

				&:nth-child(1) {
					top: -105px;
					left: -75px;
				}

				&:nth-child(2) {
					top: -115px;
					left: -15px;
				}

				&:nth-child(3) {
					top: -80px;
					left: 40px;
				}

				&:nth-child(4) {
					top: -20px;
					left: 60px;
				}

				&:nth-child(5) {
					top: 40px;
					left: 45px;
				}

				&:nth-child(6) {
					top: 70px;
					left: -10px;
				}

				&:nth-child(7) {
					top: 62px;
					left: -75px;
				}
			}
		}

		&.right {
			> .container {
				> .item {
					&:nth-child(1) {
						top: -105px;
						left: 42px;
					}

					&:nth-child(2) {
						top: -115px;
						left: -22px;
					}

					&:nth-child(3) {
						top: -80px;
						left: -77px;
					}

					&:nth-child(4) {
						top: -20px;
						left: -97px;
					}

					&:nth-child(5) {
						top: 35px;
						left: -70px;
					}

					&:nth-child(6) {
						top: 60px;
						left: -15px;
					}

					&:nth-child(7) {
						top: 45px;
						left: 45px;
					}
				}
			}
		}
	}

	> .container {
		position: fixed;
		top: 50%;
		left: 50%;

		> .item {
			position: absolute;
			top: 0;
			left: 0;
			width: 42px;
			height: 42px;
			background-color: #888b;
			border: 2px solid #fff5;
			border-radius: 50%;
			background-size: 60% auto;
			background-position: center center;
			background-repeat: no-repeat;
			transition: scale var(--trn), opacity var(--trn), background-color var(--trn), top var(--trn) cubic-bezier(0.34, 1.56, 0.64, 1), left var(--trn) cubic-bezier(0.34, 1.56, 0.64, 1);
			transform-origin: center;

			&::before {
				position: absolute;
				content: 'Текст';
				top: -30px;
				left: 50%;
				font-size: var(--font-size);
				font-weight: bold;
				transform: translatex(-50%);
				white-space: nowrap;
				opacity: 0;
				transition: opacity var(--trn);
			}

			&.active {
				background-color: #c60;

				&::before {
					opacity: 1;
				}
			}

			&.inactive {
				opacity: .3;
			}

			&.quote {
				background-image: url(https://cdn.fch.su/resources/icons/at_btn.png);

				&::before {
					content: 'Вставить ник';
				}
			}

			&.private {
				background-image: url(https://cdn.fch.su/resources/icons/private_quote_btn.png);

				&::before {
					content: 'Приватное сообщение';
				}
			}

			&.reply {
				background-image: url(https://cdn.fch.su/resources/icons/quote_btn.png);

				&::before {
					content: 'Цитата';
				}
			}

			&.reaction {
				background-image: url(https://cdn.fch.su/resources/icons/smile_btn.png);

				&::before {
					content: 'Реакция';
				}
			}

			&.remove {
				background-image: url(https://cdn.fch.su/resources/icons/chat_remove_message.png);

				&::before {
					content: 'Удалить сообщение';
				}
			}

			&.edit {
				background-image: url(https://cdn.fch.su/resources/icons/edit.png);

				&::before {
					content: 'Редактировать сообщение';
				}
			}

			&.repost {
				background-image: url(https://cdn.fch.su/resources/icons/quote.png);

				&::before {
					content: 'Переслать сообщение';
				}
			}
		}
	}
}

.imageViewer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	transition: opacity .4s, scale .4s;

	&.disappear {
		opacity: 0;
		pointer-events: none;

		> .image {
			scale: 0 !important;
		}
	}

	> .buttons {
		position: fixed;
		z-index: 20;
		background-color: #0006;
		padding: var(--pad-3);
		top: 15px;
		right: 15px;
		border-radius: var(--pad-3);
		display: flex;
		gap: var(--pad-3);
		align-items: center;

		> .item {
			width: 28px;
			height: 28px;

			&.download {
				background-image: url(https://cdn.fch.su/resources/icons/download.png);
				background-size: contain;
			}
		}

		> .percent {
			font-size: calc(var(--font-size) + 2px);
		}
	}

	> .backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		z-index: 1;
	}

	&.animate {
		> .image {
			transition: top var(--viewer-animation), left var(--viewer-animation), scale var(--viewer-animation), opacity var(--viewer-animation);
		}
	}

	> .image {
		z-index: 15;
		position: absolute;
		touch-action: none;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		will-change: translate, transform, scale, left, top;
	}

	> .video, > .audio {
		max-height: 80%;
		max-width: 80%;
		position: relative;
		z-index: 100;
	}

	> .nextBtn,
	> .prevBtn {
		position: absolute;
		top: 0;
		bottom: 0;
		width: min(15dvw, 200px);
		background-color: #0000;
		transition: background-color var(--trn), backdrop-filter var(--trn), -webkit-backdrop-filter var(--trn);
		cursor: pointer;
		z-index: 16;

		@media (hover: hover) {
			&:hover {
				background-color: #3333;
				-webkit-backdrop-filter: blur(4px);
				backdrop-filter: blur(4px);

				&::before {
					border-top-color: #fffc;
					border-left-color: #fffc;
				}
			}
		}

		&.disabled {
			pointer-events: none;
			background-color: #0000;

			&::before {
				border-top-color: #fff0;
				border-left-color: #fff0;
			}
		}

		&::before {
			content: '';
			transition: border-color var(--trn);
			display: block;
			border-top: 3px solid #fff;
			border-left: 3px solid #fff;
			width: 14px;
			height: 14px;
			transform: translate(-50%) rotate(135deg);
			position: absolute;
			top: 50%;
			left: 50%;
		}

		@media (pointer: coarse) {
			display: none !important;
		}
	}

	> .nextBtn {
		right: 0;
	}

	> .prevBtn {
		left: 0;

		&::before {
			transform: translate(-50%) rotate(-45deg);
			left: 50%;
		}
	}

	min-width: 0;
	min-height: 0;
}

.achievementReached > .text {
	font-weight: bold;
	margin-bottom: var(--pad-2);
}

.gAchievement {
	display: flex;
	padding: var(--pad-2);
	border-radius: 6px;
	box-shadow: 0 0 3px #000f;
	gap: var(--pad-3);
	align-items: center;
	background-color: #fff1;
	min-width: 260px;

	> .icon {
		width: 48px;
		height: 48px;
		background-image: url(https://cdn.fch.su/resources/icons/achievement.png);
		background-size: contain;
		background-position: center center;
	}

	> .about {
		> .title {
			font-weight: bold;
			font-size: calc(var(--font-size) + 2px);
			margin-bottom: 2px;
		}

		> .description {
			font-size: calc(var(--font-size) - 1px);
		}
	}
}

.ach_l0 {
	color: var(--trash);
}

.ach_l1 {
	color: var(--normal);
}

.ach_l2 {
	color: var(--rare);
}

.ach_l3 {
	color: var(--heroic);
}

.ach_l4 {
	color: var(--epic);
}

.ach_l5 {
	color: var(--legendary);
}

.chatMiddleHeading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pad-2);
	padding: 0 var(--pad-3);

	@media (width <= 1150px) {
		padding: 0 var(--pad-1);
	}

	> .description {
		height: 50px;
		font-weight: bold;
		line-height: 50px;
		color: #fff;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 4 1 300px;
		text-align: center;

		@media (width <= 1150px) {
			display: none;
		}
	}

	> .buttons {
		display: flex;
		gap: var(--pad-2);
		align-items: center;
		flex: 0 1 75px;
		justify-content: flex-end;

		@media (width <= 1150px) {
			padding-right: var(--pad-3);
		}

		> .leaveRoom {
			height: 20px;

			@media (width <= 1150px) {
				display: none;
			}
		}
	}

	> .mobileHeading {
		display: none;
		align-items: center;
		justify-content: flex-start;
		max-height: 50px;
		font-weight: bold;
		font-size: calc(var(--font-size) + 2px);
		padding: 0 var(--pad-4);
		flex-grow: 1;

		@media (width <= 1150px) {
			display: flex;
		}

		@media (width <= 650px) {
			padding: 0;
			justify-content: flex-start;
			gap: var(--pad-2);
		}

		> .mobileChatList {
			flex-grow: 1;
			text-align: center;

			@media (width <= 1150px) {
				display: none;
			}
		}

		> .mobileChatBackBtn {
			width: 24px;
			height: 24px;
			margin-right: var(--pad-4);
			background-color: #d9d9d9;
			border-radius: 50%;
			cursor: pointer;
			position: relative;
			flex-shrink: 0;

			@media (width <= 500px) {
				margin-right: var(--pad-3);
			}

			&::before {
				content: '';
				width: 6px;
				height: 6px;
				position: absolute;
				top: 8px;
				left: 9px;
				border-left: 2px solid var(--bg-3);
				border-top: 2px solid var(--bg-3);
				rotate: -45deg;
			}

			&.hasPrivate {
				background-color: var(--chat-list-unreadCount-bg);

				&::before {
					border-left-color: #fff;
					border-top-color: #fff;
				}
			}
		}

		> .mobileChatName,
		> .mobileChatUsers {
			height: 100%;
			line-height: 50px;
			cursor: pointer;
			padding: 0 var(--pad-4);
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			position: relative;

			@media (width <= 650px) {
				padding: 0 var(--pad-2);
				line-height: 38px;
			}

			@media (width <= 500px) {
				font-size: var(--font-size);
			}

			&.active::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2px;
				background-color: currentColor;
			}
		}

		> .mobileVoiceUsers {
			background-image: url(https://cdn.fch.su/resources/icons/chat_list_voice.png);
			background-size: 22px 22px;
			background-position: left center;
			background-repeat: no-repeat;
			font-size: calc(var(--font-size) + 2px);
			line-height: 52px;
			padding-left: var(--pad-4);
		}
	}
}

.mobileBottomMenu {
	position: absolute;
	bottom: 24px;
	left: 8px;
	right: 8px;
	background-color: var(--bg-3);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	border-radius: 60px;
	justify-content: space-around;
	display: none;
	gap: 4px;
	padding: 0 10vw;

	@media (width <= 400px) {
		padding: 0 4vw;
	}

	@media (width <= 650px) {
		font-size: calc(var(--font-size) - 2px);
		white-space: nowrap;
	}

	@media (width > 650px) {
		left: 10vw;
		right: 10vw;
	}

	@media (width > 850px) {
		left: 20vw;
		right: 20vw;
	}

	&.mobileShow {
		@media (width <= 1150px) {
			display: flex;
		}
	}

	> .item {
		cursor: pointer;
		padding: 12px 4px;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;

		> .text {
			font-size: calc(var(--font-size) - 4px);
		}

		> .icon {
			width: 18px;
			height: 18px;
			background-size: contain;
			background-repeat: no-repeat;
		}

		&.chat > .icon {
			background-image: url(https://cdn.fch.su/resources/icons/mobile_footer_chat.png);
		}

		&.ratings > .icon {
			background-image: url(https://cdn.fch.su/resources/icons/star.png);
		}

		&.about > .icon {
			background-image: url(https://cdn.fch.su/resources/icons/mobile_footer_about.png);
		}

		&.settings > .icon {
			background-image: url(https://cdn.fch.su/resources/icons/mobile_footer_settings.png);
		}
	}

	> .backdrop {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 110px;
		z-index: -5;
		background: linear-gradient(360deg, #24262a 38.94%, rgba(0, 0, 0, 0) 100%);
		opacity: 0.7;
	}
}

.notificationsCount {
	color: #000;
	border-radius: 4px;
	background-color: #fa0;
	font-size: calc(var(--font-size) - 2px);
	padding: var(--pad-1) var(--pad-2);
}

.chatEdit {
	padding: var(--pad-3);
	max-height: 100%;
	overflow-y: auto;

	> .item {
		> .input {
			width: 100%;
		}
	}

	& input[role='switch'] {
		width: 80px;
		height: 40px;
		border-radius: var(--pad-3);

		&::before {
			right: 41px;
			top: 3px;
			width: 34px;
			height: 34px;
			border-radius: var(--pad-5);
		}

		&:checked::before {
			right: 3px;
		}
	}
}

.chatEditAccordion {
	> .item {
		> .content {
			@media (width <= 500px) {
				padding: 0 var(--pad-2);
			}
		}
	}
}

.rommEditAvatar {
	width: 200px;
	position: relative;

	> .ava {
		width: 200px;
		height: 200px;
	}

	@media (hover: hover) {
		&:hover {
			> .changeAva {
				opacity: 1;
			}
		}
	}

	> .changeAva {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #0009;
		border-radius: 50%;
		background-image: url(https://cdn.fch.su/resources/icons/edit.png);
		background-position: center center;
		background-repeat: no-repeat;
		transition: opacity var(--trn);
		opacity: 0;
	}
}

.voiceListSwitch {
	display: flex;
	border-radius: var(--pad-4);
	background-color: var(--chat-list-title-bg);
	margin-bottom: var(--pad-2);

	@media (width <= 1150px) {
		/*! margin: 10px 6px; */
	}

	> .item {
		flex-grow: 1;
		height: 36px;
		text-align: center;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent;
		cursor: pointer;
		transition: background-color var(--trn);

		&.active {
			background-color: #fff2;
			border-radius: var(--pad-4);
		}

		&.chat {
			background-image: url(https://cdn.fch.su/resources/icons/chat_list_text.png);
		}

		&.voice {
			background-image: url(https://cdn.fch.su/resources/icons/chat_list_voice.png);
		}
	}
}

.voiceChatControls {
	> .joinBtn {
		position: absolute;
		bottom: 6px;
		left: 0;
		right: 6px;
		background-color: var(--bg-5);
		border-radius: var(--pad-4);
		padding: var(--pad-1) var(--pad-2);
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: var(--pad-2);
		cursor: pointer;
		font-weight: bold;
		transition: background-color var(--trn);

		@media (hover: hover) {
			&:hover {
				background-color: #73767a;
			}
		}

		> .bars {
			width: 100px;
			height: 28px;
			background-image: url(https://cdn.fch.su/resources/icons/voice_bars.png);
			background-repeat: no-repeat;
			background-position: center center;
		}
	}

	&.hideJoin > .joinBtn {
		display: none;
	}

	> .controls {
		position: absolute;
		bottom: 6px;
		left: 0;
		right: 6px;
		background-color: var(--bg-5);
		border-radius: var(--pad-4);
		padding: var(--pad-1) var(--pad-2);
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: var(--pad-2);
		cursor: pointer;
		font-weight: bold;
		transition: background-color var(--trn);

		> .microBtn,
		> .muteBtn,
		> .leaveBtn {
			width: 24px;
			height: 24px;
			cursor: pointer;
			flex-shrink: 0;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
		}

		> .muteBtn {
			background-image: url(https://cdn.fch.su/resources/icons/headphones.png);

			&.mute {
				background-image: url(https://cdn.fch.su/resources/icons/headphones_muted.png);
			}
		}

		> .microBtn {
			background-image: url(https://cdn.fch.su/resources/icons/micro.png);

			&.mute {
				background-image: url(https://cdn.fch.su/resources/icons/micro_muted.png);
			}
		}

		> .leaveBtn {
			width: 32px;
			height: 32px;
			background-color: #b31;
			border-radius: 50%;
			background-image: url(https://cdn.fch.su/resources/icons/end_call.png);
			transition: filter var(--trn);
			background-size: 70% auto;

			@media (hover: hover) {
				&:hover {
					filter: brightness(140%);
				}
			}
		}
	}
}

.volumeIndicator {
	width: 100%;
	height: 32px;
	background-image: url(https://cdn.fch.su/resources/icons/voice_bars.png);
	background-position: left center;

	> .fill {
		height: 32px;
		background-color: #0f0;
		-webkit-mask-image: url(https://cdn.fch.su/resources/icons/voice_bars.png);
		mask-image: url(https://cdn.fch.su/resources/icons/voice_bars.png);
		background-position: left center;
		-webkit-mask-position: left center;
		mask-position: left center;
	}
}

.market {
	max-height: 100%;
	overflow-y: auto;
	padding-top: var(--main-container-top);
	padding-bottom: var(--footer-bottom);

	> .list {
		display: flex;
		gap: var(--pad-2);
		flex-wrap: wrap;
		justify-content: center;

		> .item {
			width: 280px;
			height: 340px;
			padding: var(--pad-3) var(--pad-5);
			border-radius: var(--pad-4);
			text-align: center;
			border: 3px solid #3a403b;
			background-image: linear-gradient(to bottom, #373b38, #45513e);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			gap: var(--pad-3);

			> .amount {
				margin: 0 auto;
				font-size: calc(var(--font-size) + 10px);

				&::before {
					content: '';
					display: inline-block;
					width: 38px;
					height: 48px;
					vertical-align: middle;
					background-image: url(https://cdn.fch.su/resources/icons/foxcoin_v2.png);
					background-size: contain;
					background-repeat: no-repeat;
					margin-right: var(--pad-2);
				}
			}

			> .name {
				font-size: calc(var(--font-size) + 4px);
			}

			> .icon {
				flex: 1 0 120px;
				width: 100%;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;

				&.premium {
					background-image: url(https://cdn.fch.su/resources/icons/premium_large.png);
					margin-top: 40px;
				}
			}

			> .button {
				padding: var(--pad-2) 0;
				width: 100%;
				background-image: linear-gradient(to right, #7cb24d, #9ccb6d);
				color: #fff;
				font-size: calc(var(--font-size) + 6px);
				text-shadow: 0 2px 0 #27740080;

				@media (hover: hover) {
					&:hover {
						background-color: #68b520;
						color: #111;
					}
				}
			}
		}
	}
}

.marketBuyGood {
	padding: var(--pad-4);
	max-width: 600px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pad-3);
	justify-content: center;
}

.authWindow > .offer {
	margin: var(--pad-3) 0;
	display: block;
	text-align: center;
}

.ratingsContainer {
	padding: var(--pad-4);
}

.ratings {
	display: flex;
	gap: var(--pad-4);
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: var(--bg-3);
	border-radius: 30px;
	overflow-y: auto;
	padding: var(--pad-3);
	height: 100%;

	@supports (justify-content: space-evenly) {
		justify-content: space-evenly;
	}

	@media (width <= 1150px) {
		padding-bottom: 100px;
	}

	@media (width <= 850px) {
		gap: var(--pad-3);
	}
}

.ratingList {
	padding: var(--pad-3);
	background-color: var(--bg-2);
	border-radius: var(--pad-3);
	flex: 0 1 250px;
	min-width: 220px;
	animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
	animation-fill-mode: both;
	transform-origin: left top;

	> .title {
		text-align: center;
		font-weight: bold;
		font-size: calc(var(--font-size) + 2px);
		margin-bottom: var(--pad-3);

		@media (width <= 650px) {
			margin-bottom: var(--pad-2);
		}
	}
}

.ratingListItem {
	display: flex;
	justify-content: space-between;
	margin: var(--pad-1) 0;
	padding: var(--pad-1) var(--pad-2);
	gap: var(--pad-2);
	animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
	animation-fill-mode: both;
	transform-origin: left center;

	&.isMe {
		background-color: #acf2;
		border-radius: var(--pad-2);
	}

	@media (width <= 650px) {
		margin: var(--pad-2) 0;
	}

	> .position {
		font-weight: bold;
		width: 15px;
	}

	> .userNick, > .roomName {
		flex-grow: 1;
		white-space: nowrap;
		max-width: 150px;
		overflow: hidden;
		font-weight: bold;
	}
}

.profileViews {
	background-image: url(https://cdn.fch.su/resources/icons/profile_views.png);
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	padding: var(--pad-2) 0 var(--pad-2) 52px;
	font-size: calc(var(--font-size) + 2px);
	font-weight: bold;
	display: flex;
	text-transform: uppercase;
	gap: var(--pad-2);
}

.linkAttachment {
	display: flex;
	gap: 20px;
	background-color: #0002;
	border-radius: var(--pad-5);
	color: #acf;
	min-width: 200px;
	min-height: 72px;
	align-items: center;
	max-width: min(75vw, 80%);
	overflow: hidden;

	> .image {
		flex-shrink: 0;
		flex-basis: 72px;
		height: 72px;
		width: 72px;
		object-fit: cover;
		border-radius: 50%;
	}

	> .right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--pad-2) var(--pad-4) var(--pad-2) 0;
		gap: var(--pad-1);
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;

		> .title {
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			min-width: 0;
			max-width: 100%;
		}

		> .description {
			font-size: calc(var(--font-size) - 2px);
			text-overflow: ellipsis;
			overflow: hidden;
			min-width: 0;
			max-width: 100%;
			max-height: 36px;
		}
	}
}

.fileAttachment {
	display: flex;
	gap: 6px;
	background-color: #0002;
	border-radius: var(--pad-5);
	color: #acf;
	min-width: 150px;
	min-height: 52px;
	align-items: center;
	padding-left: 8px;

	> .icon {
		flex-shrink: 0;
		flex-basis: 48px;
		height: 42px;
		width: 42px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;

		&.doc {
			background-image: url(https://cdn.fch.su/resources/icons/doc.png);
		}
	}

	> .right {
		display: flex;
		flex-direction: column;
		justify-content: center;

		> .title {
			font-weight: bold;
		}
	}
}

.attachmentFloatingWindowContent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pad-3);
	font-size: calc(var(--font-size) + 2px);
	margin: var(--pad-1);

	@media (width < 720px) {
		align-items: flex-end;
		padding: 0 var(--pad-5);
		gap: 5px;
	}

	> .iconWithTextButton {
		@media (width < 720px) {
			padding: var(--pad-3) 0;
		}
	}
}

.attachmentFloatingWindow {
	@media (width < 720px) {
		position: fixed;
		left: 0 !important;
		right: 0 !important;
		bottom: 76px !important;
		max-width: 100dvw !important;
		width: 100dvw;
		z-index: 40000;
		border: none;
		border-radius: 0;
	}
}

.voiceRecorder {
	position: absolute;
	top: 0;
	left: 0;
	right: 46px;
	bottom: 0;
	pointer-events: none;
	color: #fff;

	.time {
		position: absolute;
		z-index: 1;
		left: 12px;
		top: 50%;
		translate: 0 -50%;
		padding-left: 20px;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			translate: 0 -50%;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #f00;
		}
	}

	> .meter {
		position: absolute;
		inset: 0;
		overflow: hidden;
		background-color: #555a;
		border-radius: 80px;

		> .fill {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 1;
			background-color: #0a06;
		}
	}

	> .cancel {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		bottom: 0;
		padding: 8px 36px 8px 16px;
		font-size: 18px;
		background-image: linear-gradient(to right, #600, #6006 85%, transparent);
		border-radius: 40px 0 0 40px;
		transition: opacity .02;
		opacity: 0;
	}

	> .audioContainer > audio {
		margin: var(--pad-2) auto;
	}

	> .button {
		width: 100%;
		margin: var(--pad-2) auto;
	}
}

@keyframes wiggle {
	0% {
		transform: scale(1);
	}
	5%, 10% {
		transform: scale(0.8) rotate(-6deg);
	}
	15%, 25%, 35%, 45% {
		transform: scale(1.2) rotate(6deg);
	}
	20%, 30%, 40% {
		transform: scale(1.2) rotate(-6deg);
	}
	50% {
		transform: scale(1) rotate(0);
	}
}

.receiveBonus {
	width: 48px;
	height: 48px;
	border-radius: var(--pad-2);
	background-image: url(https://cdn.fch.su/resources/icons/receive_bonus.png);
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;

	&.available {
		background-color: #afa3;
		cursor: pointer;
		pointer-events: auto;
		animation: wiggle infinite 3s ease-in-out both;
	}

	&.notReady {
		background-color: #fff2;
		filter: saturate(25%);
	}

	&.taken {
		background-color: #fff2;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 16px;
			height: 16px;
			background-image: url(https://cdn.fch.su/resources/icons/connection_success.png);
			background-size: contain;
		}
	}

	&.missed {
		background-color: #f005;
		filter: saturate(30%);
	}
}

.seawarTable {
	border-collapse: collapse;
	color: #fff;

	& td, & th {
		width: 26px;
		height: 26px;
		margin: 0;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #ccca;
		font-weight: bold;
		font-size: var(--font-size);

		@media (width < 450px) {
			width: 20px;
			height: 20px;
			font-size: calc(var(--font-size) - 2px);
		}

		&.topLeftHeading {
			border-top-color: transparent !important;
			border-left-color: transparent !important;
		}

		&.ship {
			background-color: #c93a;
			color: #000;
		}
	}
}

.banWindow {
	padding: var(--pad-3);
}

.onlineList, .purchasesList {
	margin: var(--pad-4);
	border-spacing: var(--pad-3) var(--pad-2);
}

.purchasesList > .item > .purchaseStatus {
	&.success {
		color: #0f0;
	}

	&.refunded {
		color: #f00;
	}

	&.cancelled {
		color: #ff0;
	}

	&.pending {
		color: #0bf;
	}
}

.foolGameCard {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px 0;
	border-radius: 6px;
	text-align: center;
	background-color: #fff;
	font-family: 'Cuprum', 'Roboto', sans-serif;
	transition: background-color var(--trn);
	font-weight: bold;
	width: 25px;
	flex: 0 0 25px;

	&.redCard {
		color: #d00;
	}

	&.blackCard {
		color: #000;
	}

	> .suit {
		font-size: calc(var(--font-size) + 2px);
	}

	@media (hover: hover) {
		&:hover {
			background-color: #eea;
		}
	}
}

.foolGameHand {
	display: flex;
	gap: var(--pad-2);
	align-items: center;
	flex-wrap: wrap;
}

.foolGameUserMove {
	display: flex;
	gap: var(--pad-2);
	align-items: center;
}

.foolGameField {
	display: flex;
	gap: var(--pad-2);
	align-items: center;

	> .table {
		display: flex;
		gap: var(--pad-4);
		border: 1px solid #777;
		padding: var(--pad-2);
		border-radius: var(--pad-2);
		justify-content: space-between;

		> .cards {
			width: 25px;
			flex: 0 0 25px;
			display: flex;
			flex-direction: column;
			gap: var(--pad-2);
		}
	}
}

.roomInfo {
	text-align: center;
	max-width: 500px;

	> .avaContainer {
		> .ava {
			width: 200px;
			height: 200px;
			margin: var(--pad-2) auto;
		}
	}

	> .name {
		font-size: calc(var(--font-size) + 10px);
		font-weight: bold;
		margin-top: var(--pad-3);
		color: #fff;
	}

	> .socialRating {
		margin: 4px 0;
		display: flex;
		justify-content: center;

		> .icon {
			display: none;
		}
	}

	> .description, > .link {
		margin-top: var(--pad-3);
	}

	> .subscribers {
		font-weight: bold;
		margin-top: var(--pad-2);
	}

	> .iconWithTextButton {
		margin-top: var(--pad-3);
	}

	> .favouriteBtn:not(.active) {
		> .icon {
			filter: grayscale(100%);
		}
	}

	> .pushEnable {
		margin-top: var(--pad-3);

		> .checkbox {
			vertical-align: middle;
		}
	}

	> .media {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--pad-2);
		margin-top: var(--pad-3);
		max-height: 400px;
		overflow-y: auto;

		&::before {
			content: 'Медиа';
			width: 100%;
			margin-bottom: var(--pad-2);
			font-size: calc(var(--font-size) + 10px);
			font-weight: bold;
		}

		> .item {
			width: 110px;
			height: 110px;
			cursor: pointer;
			border-radius: 10px;
			overflow: hidden;

			> .image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

.markdownEditor {
	padding: var(--pad-3);

	> .buttons {
		padding-top: var(--pad-3);
		text-align: center;
	}
}

.fullVoiceChatBtn {
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
	padding: var(--pad-2);
	font-size: var(--font-size);
}

.voiceFullScreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background-color: #24262aaa;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: opacity .4s;

	> .close {
		cursor: pointer;
		position: absolute;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #fff3;
		background-image: url(https://cdn.fch.su/resources/icons/close.png);
		background-position: center center;
		background-repeat: no-repeat;
		top: 20px;
		right: 20px;
		transition: filter var(--trn), scale var(--trn), opacity .5s;

		@media (hover: hover) {
			&:hover {
				scale: 1.1;
				filter: brightness(140%);
			}
		}

		z-index: 2;
	}

	> .users {
		display: flex;
		gap: var(--pad-3);
		position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 120px;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		z-index: 1;

		> .item {
			text-align: center;
			position: relative;
			cursor: pointer;
			transition: opacity .7s;

			> .ava {
				width: 92px;
				height: 92px;
				margin-bottom: var(--pad-2);
				transition: border-width var(--trn), border-color var(--trn);
			}

			&.speaking {
				> .ava {
					border: 5px solid #0f0;
				}

				&.speak_0 > .ava {
					border-color: var(--nc-0);
				}

				&.speak_1 > .ava {
					border-color: var(--nc-1);
				}

				&.speak_2 > .ava {
					border-color: var(--nc-2);
				}

				&.speak_3 > .ava {
					border-color: var(--nc-3);
				}

				&.speak_4 > .ava {
					border-color: var(--nc-4);
				}

				&.speak_5 > .ava {
					border-color: var(--nc-5);
				}

				&.speak_6 > .ava {
					border-color: var(--nc-6);
				}

				&.speak_7 > .ava {
					border-color: var(--nc-7);
				}

				&.speak_8 > .ava {
					border-color: var(--nc-8);
				}

				&.speak_9 > .ava {
					border-color: var(--nc-9);
				}

				&.speak_10 > .ava {
					border-color: var(--nc-10);
				}

				&.speak_11 > .ava {
					border-color: var(--nc-11);
				}

				&.speak_12 > .ava {
					border-color: var(--nc-12);
				}

				&.speak_13 > .ava {
					border-color: var(--nc-13);
				}

				&.speak_14 > .ava {
					border-color: var(--nc-14);
				}

				&.speak_15 > .ava {
					border-color: var(--nc-15);
				}
			}

			> .connectionIndicator {
				position: absolute;
				top: 65px;
				right: 0;
				width: 24px;
				height: 24px;
				border: 1px solid var(--bg-2);
				border-radius: 50%;
				background-color: #ccc;
				background-image: url(https://cdn.fch.su/resources/icons/wifi.png);
				background-size: 16px 16px;
				background-position: center center;
				background-repeat: no-repeat;

				&.connecting {
					background-color: #ff0;
				}

				&.connected, &.isMe {
					background-color: #3c3;
				}

				&.disconnected {
					background-color: #c33;
				}
			}
		}
	}

	> .videos {
		gap: var(--pad-3);
		position: absolute;
		inset: var(--pad-3);
		justify-content: center;
		align-items: center;
		display: none;

		> .video {
			min-height: 0;
			min-width: 0;
			position: relative;
			flex: 0 1 100dvw;
			max-width: calc(100dvw - 40px);
			transition: max-width var(--viewer-animation);

			> video {
				max-height: calc(100dvh - 40px);
				max-width: calc(100dvw - 40px);
				width: 100%;
				object-fit: contain;
				border-radius: var(--pad-3);
			}

			&.mini {
				max-width: 10dvw;

				> video {
					border-radius: var(--pad-2);
				}
			}
		}
	}

	> .controls {
		display: flex;
		justify-content: center;
		gap: var(--pad-3);
		flex: 1 0 60px;
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 40px;
		transition: opacity .5s;
		z-index: 5;

		@media (width < 500px) {
			gap: var(--pad-2);
		}

		> .voiceChatInput {
			position: absolute;
			left: 50%;
			translate: -50%;
			bottom: 80px;
			display: flex;
			gap: var(--pad-2);
			align-items: center;
			max-width: min(95dvw, 600px);
			width: 100%;
			background-color: #0003;
			padding: var(--pad-2);
			border-radius: var(--pad-4);

			> .input {
				flex: 1 1 100px;
				min-width: 0;
			}

			> .iconButton {
				height: 36px;
				width: 36px;
				flex-basis: 36px;
				background-color: #5a7dc4;
				border-radius: 50%;
				padding: var(--pad-1);
			}
		}

		> .btn {
			cursor: pointer;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			background-color: var(--btn-bg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 36px 36px;
			transition: filter var(--trn), scale var(--trn);

			@media (width < 500px) {
				width: 48px;
				height: 48px;
				background-size: 28px 28px;
			}

			@media (hover: hover) {
				&:hover {
					scale: 1.1;
					filter: brightness(140%);
				}
			}

			&.shareScreen {
				background-image: url(https://cdn.fch.su/resources/icons/screen_share.png);
			}

			&.micro {
				background-image: url(https://cdn.fch.su/resources/icons/micro.png);
			}

			&.mute {
				background-image: url(https://cdn.fch.su/resources/icons/headphones.png);
			}

			&.off {
				background-color: #0004;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
					width: calc(100% - 12px);
					height: 4px;
					background-color: #ccc;
					border: 2px solid #333;
					border-radius: var(--pad-2);
				}
			}

			&.leave {
				background-image: url(https://cdn.fch.su/resources/icons/end_call.png);
				background-color: #f427;
			}

			&.chat {
				background-image: url(https://cdn.fch.su/resources/icons/head_menu_chat.png);
			}
		}
	}

	> .messages {
		position: absolute;
		left: 40px;
		bottom: 120px;
		z-index: 4;
		pointer-events: none;

		@media (width < 1150px) {
			bottom: 200px;
		}

		> .container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--pad-2);

			> .item {
				border-radius: var(--pad-4);
				background-color: #3338;
				padding: var(--pad-2) var(--pad-3);
				animation: popUp 1 .3s cubic-bezier(0.85, 0, 0.15, 1);
				animation-fill-mode: both;
				transform-origin: left bottom;
				font-size: calc(var(--font-size) + 2px);
				transition: opacity 2s;
				max-width: calc(100dvw - 80px);

				&.disappear {
					opacity: 0;
				}

				> .userNick {
					margin-right: var(--pad-1);

					&::after {
						content: ':';
					}
				}
			}
		}
	}

	&.videoMode {
		> .users {
			bottom: auto;
			justify-content: flex-start;

			> .item {
				display: flex;
				align-items: center;
				gap: var(--pad-1);
				opacity: 0;
				pointer-events: none;
				overflow: hidden;
				width: 0;
				background-color: #0003;
				-webkit-backdrop-filter: blur(4px);
				backdrop-filter: blur(4px);
				border-radius: var(--pad-4);
				padding: var(--pad-1) var(--pad-2);

				&.speaking {
					opacity: .7;
					width: auto;
				}

				> .ava {
					width: 32px;
					height: 32px;
					margin-bottom: 0;
				}

				> .connectionIndicator {
					display: none;
				}
			}
		}

		> .controls, .close {
			opacity: 0;
			pointer-events: none;
		}

		> .videos {
			display: flex;
		}

		&.active:not(.hidden) {
			> .users > .item,
			> .controls,
			> .close {
				opacity: 1;
				pointer-events: all;
			}

			> .users > .item {
				width: auto;
			}
		}
	}

	&.hidden, &.hidden > * {
		opacity: 0;
		pointer-events: none !important;
	}
}

.roomRolesEditor {
	> .container {
		margin-bottom: 20px;

		> .item {
			padding-bottom: var(--pad-3);
			padding-top: var(--pad-3);
			border-bottom: 1px solid #555;

			> .input {
				margin-bottom: var(--pad-3);
			}

			> .checkboxLabel {
				max-width: 400px;
				padding: var(--pad-2);
			}

			> .remove {
				margin-top: var(--pad-3);
				color: var(--t-red);
			}
		}
	}
}

@keyframes ngLightsCycle {
	0%, 24% {
		background-image: url(https://cdn.fch.su/resources/images/ng_lights_4.png);
	}
	25%, 49% {
		background-image: url(https://cdn.fch.su/resources/images/ng_lights_1.png);
	}
	50%, 74% {
		background-image: url(https://cdn.fch.su/resources/images/ng_lights_2.png);
	}
	75%, 99% {
		background-image: url(https://cdn.fch.su/resources/images/ng_lights_3.png);
	}
	100% {
		background-image: url(https://cdn.fch.su/resources/images/ng_lights_4.png)
	}
}

.mainContainer {
	> .middle {
		> .ngLights {
			position: absolute;
			top: 6px;
			left: 0;
			right: 0;
			height: 62px;
			pointer-events: none;
			z-index: 4;

			@media (width < 1100px) {
				top: -8px;
			}

			&::before, &::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: url(https://cdn.fch.su/resources/images/ng_lights_back.png);
				background-size: auto 100%;
				background-repeat: repeat-x;
			}

			&::before {
				z-index: 2;
			}

			&::after {
				z-index: 1;
				animation-name: ngLightsCycle;
				animation-duration: 10s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}
		}
	}
}

body.widgetMode, html.widgetMode {
	background-color: transparent;
}

.widgetMode {
	> .mainMenu {
		display: none;
	}

	> .mainContainer {
		> .left, > .right {
			display: none;
		}

		> .middle > .chatMiddleContainer {
			> .mobileTyping, > .dropzone {
				display: none;
			}

			> .messagesList {
				display: block;

				> .messages {
					display: flex;
					flex-direction: column;
					align-items: normal;
					justify-content: end;

					> .item {
						padding: var(--pad-2) var(--pad-3);
						margin: var(--pad-1) 0;
						overflow: hidden;
						flex-shrink: 0;

						> .left, > .chatMessageActions {
							display: none;
						}

						> .right {
							> .text {
								color: #fff;
							}

							> .attachmentButton {
								display: none;
							}

							> .attachment {
								border: none;
								margin: 0;

								> .image {
									max-height: 200px;
									max-width: 100%;
								}

								> .video {
									height: 200px;
									width: 300px;
									max-width: 100%;
								}
							}

							> .text {
								> a {
									color: #fb5;
								}
							}
						}
					}
				}
			}
		}

		> .chatList,
		> .chatInput,
		> .chatUsers,
		> .messagesList > .chatStream,
		> .version {
			display: none;
		}
	}

	> .mainContainer,
	> .mainContainer > .middle > .chatMiddleContainer > .messagesList {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	> .footer {
		display: none;
	}
}

.valentineInputHeart {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	scale: 0.5;
	background-image: url(https://cdn.fch.su/resources/icons/valentine_input_heart.png);
	background-size: cover;
	opacity: 1;
	transform-origin: center center;
	transition: scale 1s, opacity 1s, transform 1s;
}

.homeChats {
	overflow-y: auto;
	max-height: 100%;
	justify-content: center;
	padding: var(--header-top) var(--pad-2) 72px var(--pad-2);

	@media (width <= 1150px) {
		padding-bottom: 100px;
	}

	@media (width < 580px) {
		width: 100dvw;
	}

	@media (width >= 580px) {
		max-width: var(--w-3);
		margin: 0 auto;
	}

	@media (width >= 750px) {
		max-width: var(--w-4);
	}

	@media (width >= 950px) {
		max-width: var(--w-5);
	}

	@media (width >= 1150px) {
		max-width: var(--w-6);
	}

	@media (width >= 1350px) {
		max-width: var(--w-max);
	}

	> .disclaimer {
		padding: var(--pad-3);
		margin: var(--pad-3);
		background-color: var(--bg-2);
		border-radius: var(--pad-3);
	}

	> .createRoomBtn {
		position: absolute;
		right: 24px;
		bottom: 24px;
		z-index: 2;
		width: 48px;
		height: 48px;
		background-color: #df9f55;
		border-radius: 50%;
		cursor: pointer;
		background-image: url(https://cdn.fch.su/resources/icons/plus.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20px 20px;
		transition: scale var(--trn);
		box-shadow: 0 0 15px rgba(0, 0, 0, .5);

		&:hover {
			scale: 1.1;
		}

		@media (width <= 650px) {
			right: 8px;
		}

		@media (width <= 1150px) {
			bottom: 100px;
		}
	}

	> .searchContainer {
		margin-top: var(--pad-2);
		text-align: center;

		> .gSearchInput {
			max-width: 600px;
			background-color: var(--bg-3);
			padding-left: 42px;
		}
	}

	> .popularSection {
		flex: 0 1 100dvw;
		padding: var(--pad-3) 0;
		background-image: linear-gradient(to bottom, #3f414599, transparent 140px);
		margin: var(--pad-2) auto;
		border-radius: 25px;
		min-width: 0;

		> .heading {
			font-size: calc(var(--font-size) + 4px);
			margin: 0 16px 24px 24px;
			color: #fff;
			font-weight: bold;

			@media (width < 500px) {
				margin-left: 14px;
				font-size: 16px;
			}
		}

		> .list {
			display: grid;
			gap: 6px;
			margin: 0;
			grid-template-columns: repeat(3, 1fr);

			@media (width < 330px) {
				grid-template-columns: 1fr 1fr;
			}

			@media (width >= 750px) {
				grid-template-columns: repeat(4, 1fr);
			}

			@media (width >= 950px) {
				grid-template-columns: repeat(5, 1fr);
			}

			@media (width >= 1150px) {
				grid-template-columns: repeat(6, 1fr);
			}

			/*@media (width >= 1350px) {
				grid-template-columns: repeat(7, 1fr);
			}

			@media (width >= 1550px) {
				grid-template-columns: repeat(8, 1fr);
			}*/

			> .item {
				cursor: pointer;
				position: relative;
				display: flex;
				gap: 8px;
				padding: 13px;
				align-items: center;
				min-width: 85px;
				transition: background-color var(--trn);
				background-color: var(--bg-3);
				border-radius: 25px;
				overflow: hidden;
				flex-direction: column;
				text-align: center;

				@media (width < 560px) {
					padding: 8px;
				}

				&:hover {
					background-color: var(--bg-4);
				}

				> .icon {
					position: relative;
					width: 100%;
					aspect-ratio: 1;
					height: auto;
					background-color: var(--bg-4);

					> .onlineIndicator {
						display: none;
					}
				}

				&.notes > .icon {
					border-radius: 50%;
					background-image: url(https://cdn.fch.su/resources/icons/ava_default.png);
					background-size: contain;
				}

				&.notes > .right > .category::after {
					background-image: url(https://cdn.fch.su/resources/icons/notes_room.png);
				}

				&.global > .right > .category::before, &.text > .right > .category::before {
					background-image: url(https://cdn.fch.su/resources/icons/global_room.png);
					opacity: .6;
				}

				&.game > .right > .category::before {
					background-image: url(https://cdn.fch.su/resources/icons/game_room.png);
					width: 14px;
					height: 14px;
					translate: 0 2px;
				}

				&.streamer > .right > .category::before {
					background-image: url(https://cdn.fch.su/resources/icons/stream_room.png);
					width: 14px;
					height: 14px;
					translate: 0 2px;
					opacity: .8;
				}

				&.online > .icon.ava {
					border-color: #0a0;
				}

				&:not(.online) > .icon.ava {
					border-width: 0;
				}

				&.streamer.online > .icon::after {
					background-image: url(https://cdn.fch.su/resources/icons/stream_room_online_v2.png);
					opacity: 1;
				}

				&.ls > .icon::after {
					display: none;
				}

				> .right {
					width: 100%;

					> .name {
						overflow: hidden;
						font-weight: bold;
						color: #fff;
						white-space: nowrap;
						font-size: calc(var(--font-size) - 2px);
						text-overflow: ellipsis;

						@media (width <= 1150px) {
							margin-bottom: 0;
						}

						@media (width > 1150px) {
							font-size: calc(var(--font-size) + 2px);
						}

						> .userNick {
							max-width: 100%;
						}
					}

					> .profileOnlineIndicator {
						font-size: 14px;
						line-height: 14px;
						justify-content: center;

						@media (width < 450px) {
							font-size: 12px;
							line-height: 12px;
						}

						&.offline:not(.notActual) {
							> .description {
								display: none;
							}
						}

						&.online, &.afk, &.notActual {
							> .time {
								display: none;
							}
						}

						> .time {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							max-width: calc(100% - 22px);
							font-size: 14px;
							line-height: 14px;
							margin-left: 2px;

							@media (width < 450px) {
								font-size: 12px;
								line-height: 12px;
							}
						}
					}

					> .category {
						color: #aaa;

						@media (width <= 1150px) {
							font-size: calc(var(--font-size) - 4px);
						}

						&::before {
							content: '';
							display: inline-block;
							margin-right: 4px;
							width: 10px;
							height: 10px;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center center;
						}
					}

					> .unreadCount, > .usersCount, > .favCount {
						margin: 2px 0 0 0;
						padding: 2px 6px;
						border-radius: var(--pad-2);
						max-width: 50px;
						display: inline-block;
						width: auto;

						@media (width <= 1150px) {
							padding: 1px 4px;
							font-size: calc(var(--font-size) - 4px);
							margin-top: 0;
						}

						&::before {
							content: '';
							width: 10px;
							height: 12px;
							vertical-align: middle;
							margin-right: 4px;
							display: inline-block;
							background-size: 10px 10px;
							background-repeat: no-repeat;
							background-position: top center;
						}
					}

					> .unreadCount {
						background-color: #5a7dc4;
						color: #fff;

						&::before {
							background-image: url(https://cdn.fch.su/resources/icons/unread_count.png);
						}
					}

					> .usersCount, > .favCount {
						color: #ccc;
						padding-left: 0;
					}

					> .usersCount::before {
						background-image: url(https://cdn.fch.su/resources/icons/participants_count.png);
					}

					> .favCount::before {
						background-image: url(https://cdn.fch.su/resources/icons/star.png);
					}

				}
			}
		}

		&.lastJoined {
			max-width: 100%;

			> .list {
				display: flex;
				justify-content: flex-start;
				gap: 16px;
				margin: 0 24px;
				flex-wrap: nowrap;
				overflow-y: auto;
				padding-bottom: 24px;

				@media (width < 500px) {
					margin: 0 14px;
				}

				> .item {
					flex-direction: column;
					background-color: transparent;
					gap: 8px;
					flex: 0 0 80px;
					border-radius: 0;
					min-width: 0;
					padding: 0;

					@media (width <= 400px) {
						flex-basis: 60px;
					}

					> .icon {
						width: 80px;
						height: 80px;
						flex-basis: 80px;

						@media (width <= 400px) {
							width: 60px;
							height: 60px;
							flex-basis: 60px;
						}
					}

					> .icon::after {
						display: none;
					}

					> .right {
						padding: 0;
						max-width: 100%;

						> .name {
							font-size: 14px;
							font-weight: normal;
						}

						> .gCounter, .category {
							display: none;
						}
					}
				}
			}
		}
	}
}

.reviewForm {
	padding: var(--pad-3);
	text-align: center;

	> textarea {
		min-width: 150px;
		width: 100%;
		height: 100px;
		margin: var(--pad-3) 0;
	}
}

.pluginsContainer {
	padding: var(--main-container-top) var(--pad-3) var(--pad-3) var(--pad-3);

	@media (width <= 1150px) {
		padding-bottom: var(--footer-bottom);
	}

	.allPlugins {
		display: flex;
		gap: var(--pad-3);
		flex-wrap: wrap;

		> .item {
			padding: var(--pad-2) var(--pad-3);
			background-color: var(--bg-2);
			border-radius: var(--pad-3);
			display: flex;
			gap: var(--pad-3);
			flex-wrap: wrap;
			@media (width <= 600px) {
				flex-grow: 1;
			}

			> .info {
				@media (width <= 600px) {
					flex-grow: 1;
				}

				> .head {
					display: flex;
					gap: var(--pad-2);

					> .id {
						color: #999;

						&::before {
							content: 'id';
						}
					}

					> .name {
						font-weight: bold;
						padding: 0 var(--pad-3);
					}

					> .version {
						color: #999;

						&::before {
							content: 'v';
						}
					}

					> .users {
						&::before {
							content: '';
							width: 14px;
							height: 12px;
							vertical-align: baseline;
							margin-right: 4px;
							display: inline-block;
							background-size: auto 14px;
							background-repeat: no-repeat;
							background-position: top center;
							background-image: url(https://cdn.fch.su/resources/icons/participants_count.png)
						}
					}
				}

				> .foot {
					margin-top: var(--pad-2);

					> .owner {
						&::before {
							content: 'Создатель: ';
							color: #999;
						}
					}
				}

				> .official {
					margin-top: var(--pad-2);
					background-color: var(--color-primary);
					color: #fff;
					padding: var(--pad-1) var(--pad-2);
					border-radius: 16px;
					display: inline-block;

					&::before {
						content: 'Официальный';
					}
				}
			}

			> .buttons {
				> .btn {
					width: 32px;
					height: 32px;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 24px 24px;
					cursor: pointer;
				}

				> .install {
					background-image: url(https://cdn.fch.su/resources/icons/download.png);

					&.installed {
						background-image: url(https://cdn.fch.su/resources/icons/stat_ok.png);
					}
				}

				> .edit {
					background-image: url(https://cdn.fch.su/resources/icons/profile_edit_button.png);
				}

				> .release {
					background-image: url(https://cdn.fch.su/resources/icons/stat_social.png);
				}

				> .newVersion {
					background-image: url(https://cdn.fch.su/resources/icons/plus.png);
				}
			}

			> .pluginEditor {
				width: 100%;

				> .input {
					width: 100%;
					margin: 4px 0 16px;
				}

				> .textarea {
					width: 100%;
					height: 200px;
					margin: 4px 0 16px;
				}

				> .buttons {
					display: flex;
					gap: 16px;
				}
			}
		}
	}

	> .addPlugin {
		padding: 10px 20px;
		background-color: var(--bg-2);
		border-radius: 16px;
		margin-top: 16px;
		display: inline-block;

		@media (width <= 600px) {
			display: block;
		}

		> .input {
			width: 100%;
			margin-bottom: 16px;
		}

		> .inputLabel {
			margin-bottom: 4px;
		}

		> .button {
			font-size: 18px;
			padding: 8px 16px;
		}
	}
}

.textarea {
	border: none;
	border-radius: 16px;
	color: var(--inp-color);
	background-color: var(--inp-bg);
	font-size: 18px;
	line-height: 22px;
	padding: 8px 16px;
}

.victoryDay {
	content: '';
	background-image: url(https://cdn.fch.su/resources/images/victory_day.png);
	width: 68px;
	height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	margin-right: 12px;
}

.menuVoiceChat {
	height: 100%;
	max-width: 80px;
	width: 20vw;
	background-image: linear-gradient(to right, transparent, #393);
	cursor: pointer;
	position: relative;
	transition: filter var(--trn);

	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(https://cdn.fch.su/resources/icons/menu_voice_call.png);
		background-size: 28px 28px;
		background-position: center right 10px;
		background-repeat: no-repeat;
	}

	@media (hover: hover) {
		&:hover {
			filter: brightness(130%);
		}
	}
}

.roomStatistics {
	margin: var(--pad-4) auto;

	> .item {
		display: flex;
		gap: var(--pad-2);
		margin: var(--pad-1) auto;
		width: 220px;

		> .name {
			width: 150px;
			text-align: left;
		}
	}
}

@font-face {
	font-family: 'Emojee';
	src: local('Apple Color Emoji'),
	local('Android Emoji'),
	local('Segoe UI'),
	local('Segoe UI Emoji'),
	local('NotoColorEmoji'),
	local('Segoe UI Symbol'),
	local(Unifont),
	local(EmojiSymbols),
	local(Symbola);
	unicode-range: U+00A9, U+00AE, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2, U+25AA, U+25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-27EF, U+2934, U+2935, U+2B00-2BFF, U+3030, U+303D, U+3297, U+3299, U+1F000-1F02F, U+1F0A0-1F0FF, U+1F100-1F64F, U+1F680-1F6FF, U+1F910-1F96B, U+1F980-1F9E0;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/roboto/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tNr7kVSg.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tEr7kVSg.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tPr7kVSg.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tOr7kVSg.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tAr7k.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tNr7kVSg.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tEr7kVSg.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tPr7kVSg.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tOr7kVSg.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tAr7k.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tNr7kVSg.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tEr7kVSg.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tPr7kVSg.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tOr7kVSg.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tAr7k.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tNr7kVSg.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tEr7kVSg.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tPr7kVSg.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tOr7kVSg.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4m_pLmvrkcOkBNI9tAr7k.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNK-tCt70.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNIutCt70.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKetCt70.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKOtCt70.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNJutC.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNK-tCt70.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNIutCt70.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKetCt70.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKOtCt70.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNJutC.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNK-tCt70.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNIutCt70.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKetCt70.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKOtCt70.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNJutC.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNK-tCt70.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNIutCt70.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKetCt70.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNKOtCt70.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Cuprum';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.fch.su/resources/fonts/cuprum/dg4k_pLmvrkcOkBNJutC.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}