@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

fieldset, img {
	border: 0;
}

img, object, embed {
	vertical-align: bottom;
}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

q:before, q:after {
	content: '';
}

a,
a * {
	cursor: pointer;
}

input,
textarea {
	outline: none;
}

:root {
	--width-aside: 80px;
	--width-aside-open: 250px;
	--width-mobile-aside: 310px;
	--font-size-general: 16px;
	--line-height-general: 1.2;
	--default-font: 'Roboto', sans-serif;
	--color-main: #eee1cf;
	--color-white: #fff;
	--color-light-second: #eaddcc;
	--color-second: #815260;
	--color-active: #c30b43;
	--color-select-select: #815260;
	--color-green: #64ea91;
	--color-blue: #587fff;
	--bg-main: #190209;
	--bg-rgb-card: 45, 14, 24;
	--bg-tools: #2d0e18;
	--bg-tools-second: #31101b;
	--bg-active: #c30b43;
	--bg-darkness: #5f1b33;
	--bg-rgb-dark: 0, 0, 0;
	--bg-rgb-card: 45, 14, 24;
	--bg-rgb-white: 255, 255, 255;
	--bg-rgb-blue: 88, 127, 255;
	--bg-rgb-green: 100, 234, 145;
	--bg-rgb-pink: 255, 92, 141;
	--bg-rgb-violet: 188, 44, 255;
	--bg-rgb-orange: 255, 171, 112;
	--bg-rgb-orange-second: 255, 184, 69;
	--bg-rgb-yellow: 255, 214, 49;
	--bg-rgb-light-green: 143, 255, 220;
	--bg-rgb-headline-btn: 255, 81, 90;
	--border-rgb-burgundy: 195, 11, 67;
	--border-solid-rgb-burgundy: 95, 27, 51;
	--border-radius: 10px;
	--box-shadow-drop: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
	--box-shadow-modal: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
	--height-message-panel: 40px;
	--height-mobile-panel: 80px;
}

html {
	height: 100%;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font: var(--font-size-general)/var(--line-height-general) var(--default-font);
	height: 100%;
	min-width: 320px;
	font-weight: 400;
	position: relative;
	color: var(--color-main);
	background: var(--bg-main);
}

body.open-aside {
	--width-aside: var(--width-aside-open);
}

body.open-aside .hamburger::before {
	transform: rotate(45deg) translate3d(-50%, -50%, 0);
}

body.open-aside .hamburger::after {
	transform: rotate(-45deg) translate3d(-50%, -50%, 0);
}

body.open-aside .hamburger::before, body.open-aside .hamburger::after {
	top: 50%;
	left: 50%;
	width: 26px;
}

body.open-aside .hamburger span {
	opacity: 0;
	transform: translate3d(-30px, -50%, 0);
	visibility: hidden;
}

@media screen and (max-width: 767px) {
	body.open-aside .aside {
		transform: translate3d(0, 0, 0);
	}
}

body.open-aside .menu-aside {
	font-size: 16px;
}

body.open-aside .menu-aside .item {
	flex-direction: row;
	padding: 20px;
}

@media screen and (max-width: 767px) {
	body.open-aside .mask {
		opacity: 1;
		visibility: visible;
		z-index: 21;
	}
}

@media screen and (max-width: 1160px) {
	body.open-aside .main-grid {
		--flex-items: 2;
	}
}

@media screen and (max-width: 479px) {
	body.open-aside .main-grid {
		--flex-items: 1;
	}
}

@media screen and (max-width: 1160px) {
	body.open-aside .model-grid {
		--flex-items: 3;
	}
}

@media screen and (max-width: 991px) {
	body.open-aside .model-grid {
		--flex-items: 2;
	}
}

@media screen and (max-width: 1366px) {
	body.open-aside .group-grid {
		--flex-items: 5;
	}
}

@media screen and (max-width: 1160px) {
	body.open-aside .group-grid {
		--flex-items: 4;
	}
}

@media screen and (max-width: 991px) {
	body.open-aside .group-grid {
		--flex-items: 3;
	}
}

@media screen and (max-width: 991px) {
	body.open-aside .pagination-list .list .item {
		display: none;
	}
}

body.open-aside .pagination-list .list .item:first-child {
	margin: 0;
}

@media screen and (max-width: 991px) {
	body.open-aside .pagination-list .list .item.active {
		display: block;
		margin: 0;
	}
}

@media screen and (max-width: 991px) {
	body.open-aside .pagination-list .item.pager span {
		display: none;
	}
}

@media screen and (max-width: 1160px) {
	body.open-aside .group-btns .btn span {
		display: none;
	}
}

body.open-aside .group-btns .btn.second span {
	display: block;
}

@media screen and (max-width: 767px) {
	body.show-search .logo {
		transform: scale(0.925);
		opacity: 0;
		visibility: hidden;
	}
	body.show-search .search {
		transform: scale(1) translate3d(0, 0, 0);
		opacity: 1;
		visibility: visible;
	}
	body.show-search .button-action use[href="#icon-search"] {
		display: none;
	}
	body.show-search .button-action use[href="#icon-close"] {
		display: inline;
	}
}

body.modal-show {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	body.scroll-locked {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		overflow: hidden;
	}
}

a {
	color: #2600ff;
	text-decoration: none;
}

input,
textarea,
button {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
}

input {
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
}

* {
	box-sizing: border-box;
	outline: none;
}

*:before, *:after {
	box-sizing: border-box;
}

* ::-moz-selection {
	background: #2600ff;
	color: #fff;
}

* ::selection {
	background: #2600ff;
	color: #fff;
}

.svg-icon {
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: var(--color-second);
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: var(--color-second);
	opacity: 1;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: var(--color-second);
	opacity: 1;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: var(--color-second);
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
	color: transparent;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
	color: transparent;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
	color: transparent;
}

input.placeholder, textarea.placeholder {
	color: var(--color-second) !important;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.container {
	max-width: 1670px;
	width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}

@media screen and (max-width: 1024px) {
	.container {
		padding: 0 20px;
	}
}

@media screen and (max-width: 767px) {
	.container {
		padding: 0 10px;
	}
}

.container-fluid {
	max-width: 1340px;
	width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}

@media screen and (max-width: 1024px) {
	.container-fluid {
		padding: 0 20px;
	}
}

@media screen and (max-width: 767px) {
	.container-fluid {
		padding: 0 10px;
	}
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

/* .select2-dropdown {
	position: fixed;
} */

.select2-container--open .select2-dropdown {
	left: auto;
}

.header-panel {
	background: var(--bg-tools);
	padding: 10px 20px;
	line-height: 1.14;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 11;
	gap: 10px;
}

@media screen and (max-width: 767px) {
	.header-panel {
		padding: 10px;
		z-index: 22;
	}
}

.header-panel .list {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 1;
	flex-grow: 1;
	font-weight: 500;
	font-size: 14px;
}

@media screen and (max-width: 374px) {
	.header-panel .list {
		font-size: 12px;
	}
}

.header-panel .item {
	padding-right: 10px;
	margin-right: 10px;
	position: relative;
}

.header-panel .item:last-child {
	padding-right: 0;
	margin-right: 0;
}

.header-panel .item:last-child::after {
	display: none;
}

.header-panel .item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -3px;
	transform: translate3d(0, -50%, 0);
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: var(--color-second);
}

.header-panel a {
	color: var(--color-second);
}

@media screen and (min-width: 1025px) {
	.header-panel a:hover {
		color: var(--color-active);
	}
}

.lang {
	flex-shrink: 0;
	flex-grow: 0;
	position: relative;
}

.lang .flag_holder {
	position: relative;
	width: 16px;
	height: 16px;
	overflow: hidden;
	border-radius: 50%;
}

.lang .flag_holder img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lang[data-attr-dropped=true] {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible;
}

.lang[data-attr-dropped=true] svg {
	transform: rotate(-180deg);
}

.lang[data-attr-dropped=true] .lang-dropped {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible;
}

.lang[data-attr-dropped=true] .lang-action {
	color: var(--color-active);
}

.lang-action {
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.lang-action:hover {
		color: var(--color-active);
	}
}

.lang-action svg {
	font-size: 10px;
	transition: transform .3s;
}

.lang-action img {
	width: 16px;
	height: 16px;
	border-radius: 16px;
	overflow: hidden;
}

.lang-dropped {
	position: absolute;
	top: calc(100% + 15px);
	right: auto;
	left: 0;
	z-index: 10;
	background-color: var(--bg-tools);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	overflow: auto;
	max-height: 135px;
	transform: translate3d(0, 10px, 0);
	opacity: 0;
	visibility: hidden;
	transition: transform .3s, opacity .3s, visibility .3s;
}

.lang-dropped .link {
	padding: 8px 10px;
	color: var(--color-main);
	display: flex;
	gap: 10px;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.lang-dropped .link:hover {
		background-color: var(--color-active);
		color: var(--color-main);
	}
}

.lang-dropped .link.selected {
	background-color: var(--color-active);
	color: var(--color-main);
}

.lang-dropped .link img {
	width: 16px;
    height: 16px;
    border-radius: 16px;
    overflow: hidden;
}

.header {
	flex-shrink: 0;
	flex-grow: 0;
	padding: 5px 20px;
	background: var(--bg-darkness);
	display: flex;
	align-items: center;
	gap: 30px;
	position: relative;
	z-index: 10;
}

@media screen and (max-width: 1024px) {
	.header {
		gap: 15px;
		z-index: 22;
	}
}

@media screen and (max-width: 767px) {
	.header {
		gap: 10px;
		padding: 5px 10px;
	}
}

.hamburger {
	background: none;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
	transition: height .3s;
}

@media screen and (min-width: 1025px) {
	.hamburger:hover {
		height: 18px;
	}
}

@media screen and (max-width: 767px) {
	.hamburger {
		width: 24px;
		height: 17px;
	}
}

.hamburger span, .hamburger::before, .hamburger::after {
	background-color: var(--color-main);
	height: 3px;
	width: 100%;
	border-radius: var(--border-radius);
	transform-origin: top left;
	transition: background-color 0.3s, transform 0.3s;
}

.hamburger::before, .hamburger::after {
	content: "";
	position: absolute;
	width: 100%;
	transform: translate3d(0, 0, 0) rotate(0);
	left: auto;
}

.hamburger::before {
	top: 0;
}

.hamburger::after {
	bottom: 0;
	width: calc(100% - 6px);
}

.logo {
	display: flex;
	padding-bottom: 11px;
}

@media screen and (max-width: 767px) {
	.logo {
		flex-shrink: 1;
		flex-grow: 1;
		justify-content: center;
		padding-bottom: 3px;
		transform: scale(1);
		opacity: 1;
		visibility: visible;
		transition: transform .3s, opacity .3s, visibility .3s;
	}
}

.logo img {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.logo img {
		max-width: 98px;
	}
}

.search {
	flex-shrink: 1;
	flex-grow: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

@media screen and (max-width: 767px) {
	.search {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50px;
		right: 50px;
		transform: scale(1.2) translate3d(0, 0, 0);
		opacity: 0;
		visibility: hidden;
		transition: transform .3s, opacity .3s, visibility .3s;
	}
}

.search form {
	width: 100%;
}

.search-wrap {
	display: flex;
	border-radius: var(--border-radius);
	border: none;
	background: var(--bg-tools);
	max-width: 750px;
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 40px;
}

.search-wrap .input {
	background: none;
	border: none;
	width: 100%;
	height: 100%;
	padding: 10px 0 10px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-main);
}

.button-search {
	flex-shrink: 0;
	flex-grow: 0;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.3s;
	font-size: 20px;
	font-family: inherit;
	line-height: 1;
	color: var(--color-main);
	padding: 0 20px;
}

@media screen and (min-width: 1025px) {
	.button-search:hover {
		color: var(--color-active);
	}
}

.button-action {
	display: none;
	border: none;
	background: none;
	color: var(--color-main);
	font-size: 24px;
}

@media screen and (max-width: 767px) {
	.button-action {
		display: flex;
	}
}

.button-action use[href="#icon-close"] {
	display: none;
}

.item-upload {
	flex-shrink: 0;
	flex-grow: 0;
	color: var(--color-main);
	font-size: 20px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.item-upload:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 767px) {
	.item-upload {
		display: none;
	}
}

.group-auth {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
	flex-grow: 0;
}

@media screen and (max-width: 767px) {
	.group-auth {
		display: none;
	}
}

.button {
	color: var(--color-main);
	background-color: var(--bg-tools);
	padding: 10px 20px;
	line-height: 1.25;
	border-radius: var(--border-radius);
	font-weight: 500;
	font-size: 16px;
	opacity: 1;
	transition: opacity .3s, background-color .3s;
}

@media screen and (min-width: 1025px) {
	.button:hover {
		background-color: var(--color-active);
	}
}

.button.second {
	background-color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.button.second:hover {
		opacity: .9;
	}
}

.item-balance,
.balance-mobile {
	flex-grow: 0;
	flex-shrink: 0;
	align-items: center;
	font-weight: 600;
	color: var(--color-main);
	border: none;
	background: none;
	cursor: pointer;
}

.item-balance {
	font-size: 20px;
	display: flex;
	gap: 10px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.item-balance:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 767px) {
	.item-balance {
		display: none;
	}
}

.item-balance span {
	font-size: 16px;
}

.drop-auth {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
}

@media screen and (max-width: 767px) {
	.drop-auth {
		display: none;
	}
}

.drop-auth.open-sort[data-attr-dropped=false] .user-list,
.drop-auth[data-attr-dropped=true] .user-list {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.drop-auth .profile-btn .ava {
	background: var(--bg-tools);
}

.drop-auth .profile-btn .arrow {
	transition: transform .3s;
}

.profile-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	background: none;
	border: none;
	color: var(--color-main);
	font-weight: 500;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.profile-btn:hover {
		color: var(--color-active);
	}
}

.profile-btn .ava {
	font-size: 20px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 100%;
	color: var(--color-second);
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-btn img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.profile-btn .arrow {
	font-size: 10px;
}

.user-list {
	position: absolute;
	z-index: 10;
	background: var(--bg-tools);
	box-shadow: var(--box-shadow-drop);
	min-width: 170px;
	right: 0;
	border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
	top: calc(100% + 10px);
	max-height: 440px;
	overflow-y: auto;
	opacity: 0;
	transform: translate3d(0, 5%, 0);
	visibility: hidden;
	transition: opacity .3s, transform .3s, visibility .3s;
}

@media screen and (max-width: 767px) {
	.user-list {
		min-width: auto;
		position: static;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		visibility: visible;
		max-height: none;
		background: var(--bg-main);
		display: none;
		margin-top: 10px;
	}
}

.user-list a {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	gap: 10px;
	color: var(--color-main);
	transition: background .3s;
	font-weight: 500;
	font-size: 20px;
}

@media screen and (min-width: 1025px) {
	.user-list a:hover {
		background: var(--bg-active);
	}
}

.user-list a.active {
	background: var(--bg-active);
}

.user-list a span {
	font-size: 16px;
}

[data-attr-opacity] {
	opacity: .5;
}

.header-dashboard {
	background: var(--bg-tools);
	position: relative;
	z-index: 1052;
}

.header-holder {
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 30px;
}

@media screen and (max-width: 1024px) {
	.header-holder {
		padding: 20px 0;
	}
}

.logo-dashboard {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	gap: 10px;
	font-size: 36px;
	font-weight: 500;
	color: var(--color-second);
}

.logo-dashboard span {
	font-size: 14px;
}

.logo-dashboard svg {
	color: var(--color-main);
}

.dashboard-tools {
	gap: 20px;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
	.dashboard-tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		gap: 0;
		align-items: stretch;
		border-radius: 10px 0 0 0;
		box-shadow: 0 -2px 2px 0 rgba(var(--bg-rgb-dark), 0.02), 0 -5px 5px 0 rgba(var(--bg-rgb-dark), 0.03), 0 -9px 10px 0 rgba(var(--bg-rgb-dark), 0.04), 0 -15px 18px 0 rgba(var(--bg-rgb-dark), 0.04), 0 -29px 33px 0 rgba(var(--bg-rgb-dark), 0.05), 0 -69px 80px 0 rgba(var(--bg-rgb-dark), 0.07);
		background: var(--bg-tools);
	}
}

@media screen and (max-width: 1024px) {
	.dashboard-tools .item {
		flex-shrink: 1;
		flex-grow: 1;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.btn-tool {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 20px;
	color: var(--color-main);
	cursor: pointer;
	background: none;
	border: none;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.btn-tool:hover {
		color: var(--bg-active);
	}
}

@media screen and (max-width: 1024px) {
	.btn-tool {
		width: 100%;
		min-height: var(--height-mobile-panel);
		justify-content: center;
		font-size: 24px;
	}
}

@media screen and (max-width: 374px) {
	.btn-tool {
		font-size: 20px;
	}
}

@media screen and (max-width: 1024px) {
	.btn-tool.second svg {
		transform: rotate(180deg);
	}
}

.btn-tool .amount {
	padding: 3px;
	min-width: 20px;
	border-radius: 100%;
	background: var(--bg-active);
	color: var(--color-main);
	position: absolute;
	font-weight: 500;
	font-size: 12px;
	top: -8px;
	right: -8px;
	text-align: center;
}

.btn-tool span {
	position: relative;
}

.user-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 100%;
	border: none;
	background: none;
	font-size: 20px;
	color: var(--color-second);
	background: var(--bg-darkness);
}

@media screen and (max-width: 1024px) {
	.user-btn {
		width: 30px;
		height: 30px;
	}
}

.user-btn img {
	max-width: 100%;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.aside {
	width: var(--width-aside);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 10;
	background-color: var(--bg-tools);
	padding: 30px 10px;
	transition: width .2s;
	overflow-y: auto;
	height: 100%;
	scrollbar-width: none;
}

@media screen and (max-width: 767px) {
	.aside {
		--width-aside: var(--width-mobile-aside);
		transform: translate3d(-100%, 0, 0);
		transition: transform .3s;
		bottom: auto;
		padding: 20px 10px;
		height: calc(100vh - 96px);
		overflow: auto;
		z-index: 22;
	}
}

.aside .auth {
	display: none;
	gap: 10px;
	margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
	.aside .auth {
		display: flex;
	}
}

.aside .btn {
	color: var(--color-main);
	background-color: var(--bg-darkness);
	padding: 15px 10px;
	line-height: 1.25;
	border-radius: 10px;
	font-weight: 500;
	font-size: 16px;
	opacity: 1;
	width: 50%;
	text-align: center;
	transition: opacity .3s, background-color .3s;
}

@media screen and (min-width: 1025px) {
	.aside .btn:hover {
		background-color: var(--color-active);
	}
}

.aside .btn.second {
	background-color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.aside .btn.second:hover {
		opacity: .9;
	}
}

.menu-aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 500;
	font-size: 11px;
	transition: font-size .2s, padding .2s;
}

.menu-aside .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px 20px;
	color: var(--color-second);
	transition: color .3s;
	padding: 10px 5px;
	border-radius: 10px;
	position: relative;
}

@media screen and (min-width: 1025px) {
	.menu-aside .item:hover:not(.active) {
		color: var(--color-main);
	}
	.menu-aside .item:hover:not(.active)::before {
		transform: scale(1) rotateY(0deg);
		opacity: 1;
	}
}

@media screen and (max-width: 767px) {
	.menu-aside .item {
		flex-direction: row;
		padding: 20px;
	}
}

.menu-aside .item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: scale(0.95) rotateY(10deg) translate3d(0, 10px, 0);
	transform-origin: left;
	background-color: var(--bg-active);
	border-radius: 10px;
	opacity: 0;
	transition: transform .3s, opacity .3s;
}

.menu-aside .item > * {
	position: relative;
}

.menu-aside .item.active {
	background-color: var(--bg-darkness);
	color: var(--color-main);
}

.menu-aside .hidden-item {
	display: none;
}

@media screen and (max-width: 767px) {
	.menu-aside .hidden-item {
		display: flex;
		color: var(--color-main);
	}
}

.menu-aside svg {
	font-size: 20px;
}

.menu-aside span {
	text-align: center;
}

.drop-auth-mobile {
	margin-bottom: 20px;
	display: none;
}

@media screen and (max-width: 767px) {
	.drop-auth-mobile {
		display: block;
	}
}

.drop-auth-mobile[data-attr-dropped=true] .profile-block {
	color: var(--color-active);
}

.drop-auth-mobile[data-attr-dropped=true] .arrow {
	transform: rotate(-180deg);
}

.drop-auth-mobile[data-attr-dropped=true] .user-list {
	display: block;
}

.profile-dropped {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	cursor: pointer;
	background: none;
	border: none;
	color: var(--color-main);
	font-weight: 500;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.profile-dropped:hover {
		color: var(--color-active);
	}
}

.profile-block {
	align-items: center;
	gap: 10px;
	display: flex;
	min-width: 1px;
}

.profile-block .ava {
	font-size: 20px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	flex-grow: 0;
	overflow: hidden;
	border-radius: 100%;
	color: var(--color-second);
	background-color: var(--bg-darkness);
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-block img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.profile-block .arrow {
	font-size: 10px;
	flex-shrink: 0;
	flex-grow: 0;
	transform: rotate(0);
	transition: transform .3s;
}

.profile-block span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.balance-mobile {
	display: flex;
	gap: 5px;
	font-size: 18px;
}

.balance-mobile span {
	font-size: 14px;
}

.main {
	display: flex;
	flex-direction: column;
	flex-shrink: 1;
	flex-grow: 1;
	padding-bottom: 50px;
	position: relative;
	padding-left: var(--width-aside);
	transition: padding-left .2s;
}

@media screen and (max-width: 767px) {
	.main {
		padding-left: 0;
		padding-bottom: 30px;
	}
}

.swiper {
	display: none;
}

@media screen and (max-width: 479px) {
	.swiper {
		padding: 0 10px;
		margin: 0 -10px;
	}
}

.swiper.swiper-initialized {
	display: flex;
}

.section {
	padding-top: 50px;
}

@media screen and (max-width: 767px) {
	.section {
		padding-top: 30px;
	}
}

.section:first-child {
	padding-top: 30px;
}

.section.second {
	padding-top: 0;
}

.section.bg-primary {
	background-color: var(--bg-tools);
	padding: 30px 0;
}

@media screen and (max-width: 767px) {
	.section.bg-primary {
		padding: 20px 0 0;
	}
}

.main-banner {
	position: relative;
	background: url("../images/section-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 568px) {
	.main-banner {
		background: url("../images/section-bg-mobile.jpg") no-repeat;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
}

.main-banner .container {
	position: relative;
}

.main-banner .container::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	background: url("../images/label.svg") no-repeat;
	width: 100%;
	height: 100%;
	max-width: 296px;
	background-size: contain;
	background-position: calc(100% - 20px) 50%;
}

@media screen and (max-width: 568px) {
	.main-banner .container::after {
		width: 80%;
		height: 80%;
		background-position: calc(100% - 10px) 50%;
	}
}

.banner-content {
	padding: 60px 0;
	position: relative;
	z-index: 2;
	color: var(--color-main);
	text-align: center;
}

@media screen and (max-width: 568px) {
	.banner-content {
		padding: 30px 0;
	}
}

.banner-content .title {
	font-weight: 500;
	font-size: 14px;
	color: #ffd700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 18px;
}

@media screen and (max-width: 568px) {
	.banner-content .title {
		font-size: 12px;
		margin-bottom: 12px;
	}
}

.banner-content .tagline {
	font-size: 72px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 20px;
}

.banner-content .tagline .accent {
	color: #ffd700;
	font-style: normal;
}

@media screen and (max-width: 991px) {
	.banner-content .tagline {
		font-size: 50px;
	}
}

@media screen and (max-width: 568px) {
	.banner-content .tagline {
		font-size: 36px;
		margin-bottom: 14px;
	}
}

.banner-content .sub-title {
	font-size: 18px;
	font-weight: 400;
	color: rgba(238, 225, 207, 0.75);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.5;
}

@media screen and (max-width: 568px) {
	.banner-content .sub-title {
		font-size: 14px;
		max-width: 90%;
	}
}

.group-action {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 30px;
	justify-content: center;
}

@media screen and (max-width: 568px) {
	.group-action {
		gap: 10px;
		margin-top: 20px;
	}
}

.btn-action {
	background-color: var(--bg-active);
	color: var(--color-main);
	font-weight: 700;
	font-size: 30px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 20px;
	padding: 32px 50px;
	transform: scale(1);
	transition: transform .3s;
}

@media screen and (min-width: 1025px) {
	.btn-action:hover {
		transform: scale(0.99);
	}
}

@media screen and (max-width: 568px) {
	.btn-action {
		font-size: 20px;
		padding: 18px 30px;
	}
}

.btn-action.primary {
	background: linear-gradient(45deg, #ffd700 0%, #ffa500 100%);
	color: rgba(var(--bg-rgb-dark), 1);
}

.headline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.headline .title {
	flex-grow: 1;
	flex-shrink: 1;
	font-weight: 700;
	font-size: 26px;
}

@media screen and (max-width: 767px) {
	.headline .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 479px) {
	.headline .title {
		font-size: 22px;
	}
}

.headline[data-attr-headline] {
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.headline[data-attr-headline] {
		margin-bottom: 20px;
	}
}

.headline[data-attr-headline] .title {
	font-size: 26px;
}

.link-more {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 10px;
	background-color: var(--bg-tools);
	color: var(--color-main);
	transition: background-color .3s;
	padding: 11px 20px;
	line-height: 1.286;
	border-radius: var(--border-radius);
}

@media screen and (min-width: 1025px) {
	.link-more:hover {
		background-color: var(--bg-active);
	}
}

.link-more span {
	font-size: 14px;
}

.main-grid,
.model-grid {
	--flex-items: 4;
	display: flex;
	flex-wrap: wrap;
}

@media screen and (min-width: 1366px) {
	.index_pages .main-grid {
		--flex-items: 3;
		display: flex;
		flex-wrap: wrap;
	}
}

.main-grid .th,
.model-grid .th {
	position: relative;
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

@media screen and (min-width: 1025px) {
	.main-grid .th:hover .btn,
	.model-grid .th:hover .btn {
		visibility: visible;
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.model-grid {
	--flex-gap: 20px;
	gap: 11px var(--flex-gap);
}

@media screen and (max-width: 1160px) {
	.model-grid {
		--flex-items: 3;
		--flex-gap: 11px;
	}
}

@media screen and (max-width: 767px) {
	.model-grid {
		--flex-items: 2;
	}
}

.main-grid {
	--flex-gap: 20px;
	gap: var(--flex-gap);
}

@media screen and (max-width: 1366px) {
	.main-grid {
		--flex-items: 3;
	}
}

@media screen and (max-width: 767px) {
	.main-grid {
		--flex-items: 2;
	}
}

@media screen and (max-width: 479px) {
	.main-grid {
		--flex-items: 1;
	}
}

.top-panel {
	display: flex;
	align-items: center;
	gap: 5px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

.top-panel .btn {
	cursor: pointer;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	padding: 9px;
	color: var(--color-main);
	background-color: rgba(var(--bg-rgb-dark), 0.5);
	transition: background-color .3s;
	border-radius: var(--border-radius);
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0, -50%, 0) scale(0.8);
	transition: opacity .3s, visibility .3s, transform .3s;
}

@media screen and (min-width: 1025px) {
	.top-panel .btn:hover {
		background: var(--bg-active);
	}
}

@media screen and (max-width: 1024px) {
	.top-panel .btn {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.top-panel .btn.active {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
	background-color: var(--bg-active);
}

.card-model {
	position: relative;
	border-radius: var(--border-radius);
	display: block;
	height: auto;
	width: 100%;
	overflow: hidden;
	padding-bottom: 137.292%;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.card-model:hover {
		color: var(--color-active);
	}
}

.card-model .img {
	position: absolute;
	bottom: 0;
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	   object-fit: cover;
	right: 0;
	top: 0;
	width: 100%;
}

.card-model .content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 3px 10px;
	padding: 10px;
	backdrop-filter: blur(9px);
	background: rgba(var(--bg-rgb-card), 0.6);
}

@media screen and (max-width: 991px) {
	.card-model .content {
		flex-direction: column;
	}
}

.card-model .text {
	font-weight: 500;
	transition: color .3s;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	margin-bottom: 4px;
}

.view-link {
	flex-grow: 0;
	flex-shrink: 0;
	background-color: var(--bg-tools);
	color: var(--color-main);
	line-height: 1.25;
	padding: 10px 15px;
	text-align: center;
	transition: background-color .3s;
	border-radius: var(--border-radius);
}

@media screen and (min-width: 1025px) {
	.view-link:hover {
		background: var(--bg-active);
	}
}

@media screen and (max-width: 991px) {
	.view-link {
		width: 100%;
	}
}

.card {
	display: block;
	position: relative;
	color: var(--color-main);
	transition: color .3s;
}

.card .media {
	height: auto;
	width: 100%;
	overflow: hidden;
	padding-bottom: 56.26%;
	position: relative;
	border-radius: var(--border-radius);
}

.card .media[data-attr-large] {
	padding-bottom: 137.487%;
}

.card .media[data-attr-small] {
	padding-bottom: 72.32%;
}

.card .img {
	position: absolute;
	bottom: 0;
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	   object-fit: cover;
	right: 0;
	top: 0;
	width: 100%;
}

.card .content {
	margin-top: 10px;
}

.card .text {
	color: var(--color-main);
	font-weight: 500;
	transition: color .3s;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

@media screen and (min-width: 1025px) {
	.card a.text:hover {
		color: var(--color-active);
	}
}

.card .heading {
	transition: color .3s;
	font-weight: 500;
	-webkit-line-clamp: 4;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card .list {
	margin-top: 5px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--color-second);
}

.card li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.card li svg {
	font-size: 12px;
}

.card .subtitle {
	font-size: 14px;
	margin-top: 10px;
	color: var(--color-second);
	line-height: 1.28;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card .count-list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	min-width: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	background-color: rgba(var(--bg-rgb-dark), 0.7);
}

.card .count-list svg {
	font-size: 30px;
}

@media screen and (min-width: 1025px) {
	a.card:hover {
		color: var(--color-active);
	}
	a.card:hover .text {
		color: var(--color-active);
	}
}

.card-quality {
	color: var(--color-main);
	position: absolute;
	z-index: 2;
	backdrop-filter: blur(15px);
	background: rgba(var(--bg-rgb-dark), 0.6);
	top: 10px;
	right: 10px;
	font-weight: 700;
	font-size: 12px;
	border-radius: 5px;
	padding: 4px 7px;
	line-height: 1.167;
}

.card-quality + .card-quality {
	right: 45px;
}

.card-quality.thumb_label {
	background: #4caf50;
}

.card-quality.thumb_label.premium {
	background: #c8a84e;
}

.card-tools {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	line-height: 1.167;
	color: var(--color-main);
}

.card-tools .item {
	display: flex;
	align-items: center;
	gap: 5px;
	border-radius: 5px;
	padding: 4px 5px;
	font-size: 12px;
	backdrop-filter: blur(15px);
	background: rgba(var(--bg-rgb-dark), 0.6);
}

.card-tools .item:first-child {
	padding: 4px 7px;
}

.section-row {
	padding: 30px 0;
	border-top: 1px solid var(--bg-tools);
}

@media screen and (max-width: 767px) {
	.section-row {
		padding: 20px 0;
	}
}

.section-row:last-child {
	padding-bottom: 0;
}

.section-row .title {
	line-height: 1;
	margin-bottom: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-second);
}

.section-row .th {
	position: relative;
}

@media screen and (min-width: 1025px) {
	.section-row .th:hover .btn {
		visibility: visible;
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.wrap-load {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
}

.load-more {
	line-height: 1.25;
	display: flex;
	align-items: center;
	font-weight: 500;
	border-radius: var(--border-radius);
	padding: 15px 50px;
	color: var(--color-main);
	background-color: var(--bg-tools);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.load-more:hover {
		background-color: var(--bg-active);
	}
}

.media-tools {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	backdrop-filter: blur(6px);
	background: rgba(var(--bg-rgb-card), 0.6);
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1.15;
	display: flex;
	gap: 5px;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.media-tools .name {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.media-tools svg {
	font-size: 12px;
}

.tool-list {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.tool-list svg {
	font-size: 12px;
}

.tool-list > * {
	display: flex;
	align-items: center;
	gap: 5px;
}

.pagination-list {
	display: flex;
	margin-top: 30px;
	justify-content: center;
}

.pagination-list .list {
	display: flex;
}

.pagination-list .list .item {
	margin-left: 10px;
}

@media screen and (max-width: 767px) {
	.pagination-list .list .item {
		display: none;
	}
}

.pagination-list .list .item:first-child {
	margin: 0;
}

@media screen and (max-width: 768px) {
	.pagination-list .list .item.active {
		display: block;
		margin: 0;
	}
}

.pagination-list .list .item.active a {
	pointer-events: none;
	background: var(--bg-darkness);
	color: var(--color-white);
}

.pagination-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	height: 50px;
	min-width: 50px;
	border-radius: var(--border-radius);
	background-color: var(--bg-tools);
	color: var(--color-main);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.pagination-list a:hover {
		background-color: var(--bg-active);
	}
}

.pagination-list .item.pager {
	display: flex;
	align-items: center;
}

.pagination-list .item.pager svg {
	font-size: 12px;
}

.pagination-list .item.pager a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 30px;
	min-width: 50px;
}

@media screen and (max-width: 480px) {
	.pagination-list .item.pager a {
		padding: 10px 15px;
	}
}

@media screen and (max-width: 991px) {
	.pagination-list .item.pager span {
		display: none;
	}
}

.pagination-list .item.pager:first-child {
	margin-right: 20px;
}

.pagination-list .item.pager:last-child {
	margin-left: 20px;
}

.pagination-list .dots a, .pagination-list .dots span {
	background: none;
	display: flex;
	color: var(--color-main);
	justify-content: center;
	align-items: center;
	min-width: 22px;
	padding: 0 5px;
	height: 100%;
}

.pagination-list .dots a {
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.pagination-list .dots a:hover {
		color: var(--color-active);
	}
}

.highlights-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bg-tools);
	padding: 20px;
	border-radius: var(--border-radius);
	margin-bottom: 20px;
}

.highlights-card:last-child {
	margin-bottom: 0;
}

.highlights-card .ava {
	flex-grow: 0;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 100%;
	font-size: 20px;
	background: var(--bg-tools);
	color: var(--color-second);
	display: flex;
	align-items: center;
	justify-content: center;
}

.highlights-card img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.highlights-card .info {
	flex-shrink: 1;
	flex-grow: 1;
}

.highlights-card .sup {
	font-weight: 500;
}

.highlights-card .sup a {
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.highlights-card .sup a:hover {
		color: var(--color-active);
	}
}

.highlights-card .sup a.linked {
	margin-right: 8px;
}

.highlights-card .sup span {
	display: inline-flex;
	vertical-align: baseline;
	gap: 4px;
	font-weight: 400;
	color: var(--color-second);
}

.highlights-card .sup span.date {
	font-size: 14px;
	line-height: 1;
}

.highlights-card .sup em {
	line-height: 1.2;
}

.highlights-card .sup svg {
	flex-shrink: 0;
	flex-grow: 0;
}

.highlights-card .sub {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-second);
}

.group-grid {
	--flex-gap: 20px;
	--flex-items: 6;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
}

@media screen and (max-width: 1160px) {
	.group-grid {
		--flex-gap: 11px;
		--flex-items: 5;
	}
}

@media screen and (max-width: 991px) {
	.group-grid {
		--flex-items: 4;
	}
}

@media screen and (max-width: 767px) {
	.group-grid {
		--flex-items: 3;
	}
}

@media screen and (max-width: 480px) {
	.group-grid {
		--flex-items: 2;
	}
}

.group-grid .th {
	position: relative;
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

@media screen and (min-width: 1025px) {
	.group-grid .th:hover .btn {
		visibility: visible;
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.group-grid .thumb {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
	position: relative;
}

a.circle-card {
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	a.circle-card:hover {
		color: var(--color-active);
	}
}

.circle-card {
	max-width: 200px;
	width: 100%;
	text-align: center;
	display: block;
	color: var(--color-main);
}

@media screen and (max-width: 480px) {
	.circle-card {
		max-width: 150px;
	}
}

.circle-card .wrap {
	position: relative;
}

.circle-card .image {
	position: relative;
	padding-bottom: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-tools);
	border-radius: 100%;
	overflow: hidden;
	color: var(--color-second);
	margin-bottom: 15px;
}

.circle-card .image svg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: clamp(75px, 7vw, 100px);
	margin: 0 auto;
}

.circle-card img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	overflow: hidden;
}

.circle-card a.title {
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.circle-card a.title:hover {
		color: var(--color-active);
	}
}

.circle-card .title {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.circle-card .date {
	margin-top: 5px;
	color: var(--color-second);
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.circle-card .date svg {
	flex-shrink: 0;
	flex-grow: 0;
}

.circle-card .date span {
	padding-top: 1px;
}

.grid-profile {
	display: flex;
}

@media screen and (max-width: 991px) {
	.grid-profile {
		flex-direction: column;
	}
}

.grid-profile .column {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 1px;
}

.grid-profile .column.second {
	flex-grow: 0;
	flex-shrink: 0;
	margin-right: 30px;
	max-width: 262px;
	width: 100%;
}

@media screen and (max-width: 1160px) {
	.grid-profile .column.second {
		margin-right: 15px;
	}
}

@media screen and (max-width: 991px) {
	.grid-profile .column.second {
		margin: 0 auto 20px;
	}
}

@media screen and (max-width: 767px) {
	.grid-profile .column.second {
		max-width: 208px;
	}
}

.grid-profile .wrap {
	overflow: hidden;
	border-radius: var(--border-radius);
	padding-bottom: 143.896%;
	position: relative;
	background: var(--bg-darkness);
}

.no-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-darkness);
}

.grid-profile .image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.grid-profile .list {
	margin-top: 20px;
	-moz-column-count: 3;
	     column-count: 3;
	gap: 0 50px;
	max-width: 730px;
	color: var(--color-second);
	font-weight: 500;
}

@media screen and (max-width: 1160px) {
	.grid-profile .list {
		-moz-column-count: 2;
		     column-count: 2;
	}
}

.grid-profile .list .item {
	margin-top: 20px;
}

.grid-profile .list .item:first-child {
	margin-top: 0;
}

.grid-profile .list a {
	transition: color .3s;
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.grid-profile .list a:hover {
		color: var(--color-active);
	}
}

.grid-profile .list span:last-child {
	color: var(--color-main);
}

.grid-profile .description {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-second);
	margin-top: 10px;
}

.profile-content {
	flex-grow: 1;
	flex-shrink: 1;
}

.profile-headline {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	gap: 15px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-second);
}

@media screen and (max-width: 1640px) {
	.profile-headline {
		flex-direction: column;
	}
}

.profile-headline .col {
	flex-grow: 1;
	flex-shrink: 1;
}

.profile-headline .col.second {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

@media screen and (max-width: 479px) {
	.profile-headline .col.second {
		width: 100%;
	}
}

.profile-headline .title {
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
}

@media screen and (max-width: 991px) {
	.profile-headline .title {
		text-align: center;
	}
}

.group-btns {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media screen and (max-width: 479px) {
	.group-btns {
		flex-grow: 1;
		flex-shrink: 1;
		justify-content: center;
	}
}

@media screen and (max-width: 479px) {
	.group-btns .item {
		width: 33.33333%;
	}
}

.group-btns .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	cursor: pointer;
	color: var(--color-main);
	background-color: var(--bg-main);
	transition: background-color .3s;
	border-radius: var(--border-radius);
	font-weight: 500;
	padding: 10px 20px;
}

@media screen and (min-width: 1025px) {
	.group-btns .btn:hover {
		background-color: var(--bg-active);
	}
}

.group-btns span.btn {
	background-color: var(--bg-active);
	cursor: default;
	pointer-events: none;
}

.group-btns .btn svg {
	font-size: 20px;
	flex-grow: 0;
	flex-shrink: 0;
}

.group-btns .btn.second span {
	display: block;
}

@media screen and (max-width: 767px) {
	.group-btns .btn span {
		display: none;
	}
}

.statistic-list {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}

@media screen and (max-width: 991px) {
	.statistic-list {
		justify-content: center;
	}
}

.statistic-list span {
	font-size: 14px;
}

.statistic-list li {
	color: var(--color-second);
	display: flex;
	align-items: center;
	gap: 5px;
}

.btn-sbsc {
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--color-main);
	display: flex;
	align-items: center;
	cursor: pointer;
	border: none;
	background: none;
	height: 40px;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: opacity .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.btn-sbsc:hover {
		opacity: .9;
	}
}

.btn-sbsc span {
	display: flex;
	align-items: center;
	height: 100%;
	background-color: var(--bg-main);
	padding: 10px;
	flex-grow: 0;
	font-size: 14px;
	flex-shrink: 0;
}

.btn-sbsc span:not(.amount) {
	justify-content: center;
	flex-grow: 1;
	flex-shrink: 1;
	font-size: 16px;
	background-color: var(--bg-active);
	padding: 10px 20px;
	font-weight: 500;
	transition: color .3s;
}

.social-list {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 15px;
}

.social-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
	padding: 10px;
	font-size: 20px;
	background: var(--bg-main);
	color: var(--color-main);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.social-list a:hover {
		background-color: var(--bg-active);
	}
}

.profile-nav {
	flex-grow: 0;
	flex-shrink: 0;
	margin-top: 10px;
	border-bottom: 1px solid var(--color-second);
	white-space: nowrap;
	overflow: hidden;
	overflow-x: auto;
	scrollbar-width: none;
}

@media screen and (max-width: 767px) {
	.profile-nav {
		margin: 20px -10px 0;
		padding: 0 10px;
	}
}

.profile-nav::-webkit-scrollbar {
	display: none;
}

.profile-list {
	display: flex;
	gap: 10px;
}

.profile-list .item {
	font-weight: 500;
}

.profile-list a {
	color: var(--color-second);
	padding: 10px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.profile-list a:hover {
		color: var(--color-main);
	}
	.profile-list a:hover::before {
		width: 100%;
	}
}

.profile-list a.active {
	color: var(--color-main);
}

.profile-list a.active::before {
	width: 100%;
}

.profile-list a::before {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	bottom: -1px;
	width: 0;
	background: var(--color-main);
	height: 2px;
	transition: width .3s;
}

.info-updated {
	font-weight: 500;
	color: var(--color-main);
	margin-bottom: 20px;
}

.static-page {
	line-height: 1.7;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-second);
}

.static-page h2 {
	line-height: 1.2;
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 5px;
	color: var(--color-main);
}

@media screen and (max-width: 767px) {
	.static-page h2 {
		font-size: 18px;
	}
}

.static-page p {
	margin-bottom: 20px;
}

.static-page p:last-child {
	margin-bottom: 0;
}

.static-page ol {
	margin-bottom: 20px;
}

.static-page ol:last-child {
	margin-bottom: 0;
}

.static-page a {
	color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.static-page a:hover {
		text-decoration: underline;
	}
}

.contact-box .text {
	line-height: 1.7;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-main);
	margin-bottom: 20px;
}

.contact-box label > * {
	display: block;
}

.contact-box .name {
	font-size: 14px;
	margin-bottom: 5px;
	display: block;
	color: var(--color-second);
}

.contact-box .row {
	margin: 0 0 10px;
}

.contact-box .row:last-child {
	margin: 0;
}
.contact-box .textarea {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-main);
	width: 100%;
	resize: none;
	height: 40px;
	border-radius: var(--border-radius);
	padding: 11px 20px;
	background-color: var(--bg-tools);
	border: none;
}

.contact-box .btn {
	margin-top: 20px;
	border: none;
	cursor: pointer;
	color: var(--color-main);
	background-color: var(--bg-active);
	padding: 10px 30px;
	line-height: 1.25;
	border-radius: var(--border-radius);
	font-weight: 500;
	opacity: 1;
	transition: opacity .3s, background-color .3s;
}

@media screen and (min-width: 1025px) {
	.contact-box .btn:hover {
		opacity: .8;
	}
}

.achievements-grid {
	padding-top: 40px;
	--flex-items: 5;
	display: flex;
	flex-wrap: wrap;
	--flex-gap: 10px;
	gap: 50px var(--flex-gap);
}

@media screen and (max-width: 568px) {
	.achievements-grid {
		gap: 56px var(--flex-gap);
	}
}

.achievements-grid .th {
	flex-shrink: 1;
	flex-grow: 1;
	position: relative;
}

@media screen and (max-width: 568px) {
	.achievements-grid .th {
		flex-basis: calc(50% - 5px);
	}
}

.achievements-card {
	position: relative;
	padding: 60px 15px 25px;
	background: var(--bg-tools);
	border-radius: var(--border-radius);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 479px) {
	.achievements-card {
		padding: 55px 15px 13px;
	}
}

.achievements-card .icon {
	position: absolute;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	top: -40px;
	border-radius: 100%;
	width: 80px;
	height: 80px;
	font-size: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-tools);
	box-shadow: 0 0 0 7px var(--bg-main);
}

.achievements-card .name {
	line-height: 1.167;
	text-align: center;
	font-weight: 600;
	font-size: 22px;
	text-transform: capitalize;
}

@media screen and (max-width: 767px) {
	.achievements-card .name {
		font-size: 18px;
	}
}

.check-box {
	display: flex;
	align-items: flex-start;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
}

.check-box.primary {
	top: 10px;
	left: 10px;
	bottom: auto;
	right: auto;
}

.check-box.second {
	bottom: 0;
	right: 0;
}

.checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	position: relative;
}

.checkbox-label .checkbox-input {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.checkbox-label .fake {
	display: inline-flex;
	vertical-align: top;
	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
	width: 20px;
	transition: background .2s, border .2s;
	border-radius: 5px;
	height: 20px;
	background: rgba(var(--bg-rgb-dark), 0.6);
}

.checkbox-label .fake::after {
	content: "";
	position: absolute;
	opacity: 0;
	transition: opacity .2s;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid var(--color-main);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checkbox-label span:not(.fake) {
	color: var(--color-second);
	font-weight: 500;
	font-size: 14px;
}

.checkbox-label em {
	color: var(--color-main);
}

.checkbox-input {
	display: none;
}

.checkbox-input:checked + .fake {
	background: var(--color-active);
}

.checkbox-input:checked + .fake::after {
	opacity: 1;
}

.bottom-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	width: 100%;
}

@media screen and (max-width: 767px) {
	.bottom-tools {
		margin-top: 30px;
	}
}

.bottom-tools .btn {
	position: relative;
	border: none;
	padding: 11px 20px;
	line-height: 1.1256;
	font-weight: 500;
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	transition: background-color .3s;
	border-radius: 10px;
	background-color: var(--bg-tools);
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.bottom-tools .btn:hover {
		background-color: var(--bg-active);
	}
}

.bottom-tools .btn.active {
	background-color: var(--bg-active);
}

.bottom-tools .btn:disabled {
	opacity: .6;
	pointer-events: none;
	transition: opacity .3s;
}

.section-chat {
	padding-top: 30px;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 767px) {
	.section-chat {
		padding-top: 20px;
	}
}

.section-chat .container {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
}

.chat-frame {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	gap: 20px;
	width: 100%;
	height: 100%;
	min-height: 400px;
	position: relative;
}

@media screen and (max-width: 991px) {
	.chat-frame.visible .chat-aside {
		display: none;
	}
}

.chat-aside {
	max-width: 320px;
	width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 991px) {
	.chat-aside {
		max-width: 100%;
		border: none;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--bg-main);
	}
}

.chat-aside.showbox {
	display: flex;
}

.wrapped-list {
	flex-grow: 1;
	flex-shrink: 1;
	background: var(--bg-tools);
	border-radius: var(--border-radius);
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	.wrapped-list {
		margin: 0 -10px;
		border-radius: 0;
	}
}

.list-messages:not(.dashboard_mess) .item:not(.message-row) {
	padding: 15px;
	cursor: pointer;
	color: var(--color-second);
	transition: background .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.list-messages:not(.dashboard_mess) .item:not(.message-row):hover {
		background: var(--bg-darkness);
		color: var(--color-main);
	}
}

.list-messages:not(.dashboard_mess) .item.selected {
	background: var(--bg-darkness);
	color: var(--color-main);
}

.list-messages .user {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
}

.list-messages .avatar {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 20px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 100%;
	color: var(--color-second);
	background: var(--bg-main);
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-messages .name {
	color: var(--color-main);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (max-width: 390px) {
	.list-messages .name {
		font-size: 14px;
	}
}

.list-messages img {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.list-messages .content {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 1px;
}

.list-messages .wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.list-messages .date {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 400;
	font-size: 12px;
}

.list-messages .date span {
	font-size: 14px;
}

.list-messages .message {
	margin-top: 4px;
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.list-messages .message img {
	width: auto;
	height: auto;
}

.chat-content {
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.message-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-grow: 0;
	flex-shrink: 0;
	min-height: var(--height-message-panel);
	margin-bottom: 25px;
}

.message-head .avatar {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 20px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 100%;
	color: var(--color-second);
	background: var(--bg-main);
	display: flex;
	align-items: center;
	justify-content: center;
}

.message-head img {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.message-head .detail {
	flex-grow: 1;
	flex-shrink: 1;
	font-weight: 500;
	font-size: 26px;
}

@media screen and (max-width: 1024px) {
	.message-head .detail {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.message-head .detail {
		font-size: 22px;
	}
}

@media screen and (max-width: 390px) {
	.message-head .detail {
		font-size: 20px;
	}
}

.message-head .detail a {
	color: var(--color-active);
	transition: opacity .3s;
}

@media screen and (min-width: 1025px) {
	.message-head .detail a:hover {
		opacity: .8;
	}
}

.button-back {
	flex-grow: 0;
	flex-shrink: 0;
	display: none;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 10px;
	color: var(--color-main);
	background: var(--bg-tools);
	border: none;
	padding: 12px 18px;
	line-height: 1.143;
	border-radius: var(--border-radius);
}

@media screen and (max-width: 991px) {
	.button-back {
		display: flex;
	}
}

.button-back span {
	font-size: 14px;
}

.panel-message {
	margin-top: 25px;
	flex-shrink: 0;
	flex-grow: 0;
}

.panel-message .message {
	width: 100%;
	border: none;
	resize: none;
	display: block;
	height: 90px;
	font-size: 14px;
	padding: 15px;
	background: var(--bg-tools);
	overflow: hidden;
	color: var(--color-main);
	border-radius: var(--border-radius);
	overflow-y: auto;
}

.group-tools {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.group-tools .btn {
	cursor: pointer;
	background: var(--bg-active);
	color: var(--color-main);
	font-weight: 500;
	border-radius: var(--border-radius);
	border: none;
	padding: 10px 30px;
	transition: background-color .3s, opacity .3s;
}

@media screen and (min-width: 1025px) {
	.group-tools .btn:hover {
		opacity: .8;
	}
}

.group-tools .btn.second {
	padding: 10px 20px;
	background: var(--bg-tools);
	opacity: 1;
}

@media screen and (min-width: 1025px) {
	.group-tools .btn.second:hover {
		background-color: var(--bg-active);
	}
}

.area-message {
	flex-shrink: 1;
	flex-grow: 1;
	position: relative;
	min-height: 200px;
}

.area-message .hold {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	padding: 20px;
}

.message-row {
	display: flex;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
}

.message-row:last-child {
	margin-bottom: 0;
}

.message-row .avatar {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 20px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 100%;
	color: var(--color-second);
	background: var(--bg-main);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.message-row img {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.message-row .content {
	display: flex;
	align-items: center;
	gap: 10px;
}

.message-row .name {
	font-weight: 500;
}

.message-row .time {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--color-second);
}

.message-row .time span {
	font-size: 14px;
}

.message-row .message {
	margin-top: 4px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-second);
}

.nano > .nano-pane > .nano-slider {
	background: var(--color-second);
}

@media screen and (max-width: 991px) {
	.nano > .nano-pane {
		opacity: 1;
	}
}

@media screen and (max-width: 1024px) {
	[data-attr-mobile-panel] {
		padding-bottom: var(--height-mobile-panel);
	}
}

[data-attr-dashboard] {
	padding: 40px 0;
}

@media screen and (max-width: 767px) {
	[data-attr-dashboard] {
		padding: 30px 0;
	}
}

.headline-dashboard {
	margin-bottom: 25px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.headline-dashboard .title {
	font-weight: 600;
	font-size: 26px;
}

@media screen and (max-width: 767px) {
	.headline-dashboard .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 479px) {
	.headline-dashboard .title {
		font-size: 22px;
	}
}

.headline-dashboard .sub {
	font-weight: 500;
	font-size: 14px;
	color: var(--color-second);
	margin-top: 3px;
}

.headline-dashboard .wrap {
	flex-grow: 1;
	flex-shrink: 1;
}

.headline-tools {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

@media screen and (max-width: 479px) {
	.headline-tools {
		flex-grow: 1;
		flex-shrink: 1;
		justify-content: flex-end;
	}
}

.headline-tools .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 400;
	font-size: 20px;
	padding: 10px;
	border: none;
	cursor: pointer;
	border-radius: var(--border-radius);
	background-color: rgba(var(--bg-rgb-headline-btn), 0.2);
	color: rgba(var(--bg-rgb-headline-btn), 1);
	transition: color .3s, background-color .3s;
}

@media screen and (min-width: 1025px) {
	.headline-tools .btn:hover {
		background-color: var(--bg-active);
		color: var(--color-main);
	}
}

.headline-tools .btn span {
	font-size: 14px;
}

.headline-tools .btn.second {
	background-color: var(--bg-darkness);
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.headline-tools .btn.second:hover {
		background-color: var(--bg-active);
	}
}

.grid-holder,
.grid-row,
.second-row {
	display: flex;
	flex-direction: column;
}

.grid-holder {
	gap: 30px 0;
}

.grid-row {
	gap: 20px 0;
}

@media screen and (max-width: 479px) {
	.grid-row {
		gap: 10px 0;
	}
}

.second-row {
	gap: 10px 0;
}

.grid-column {
	display: flex;
	gap: 30px 20px;
}

@media screen and (max-width: 1024px) {
	.grid-column {
		flex-direction: column;
	}
}

.grid-column .column {
	width: 50%;
}

@media screen and (max-width: 1024px) {
	.grid-column .column {
		width: 100%;
	}
}

.grid-dashboard {
	--flex-gap: 20px;
	--flex-items: 4;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
}

@media screen and (max-width: 1024px) {
	.grid-dashboard {
		--flex-items: 2;
	}
}

@media screen and (max-width: 479px) {
	.grid-dashboard {
		--flex-items: 1;
		--flex-gap: 10px;
	}
}

@media screen and (max-width: 479px) {
	.grid-dashboard.second {
		--flex-items: 2;
		--flex-gap: 10px;
	}
}

@media screen and (max-width: 390px) {
	.grid-dashboard.second {
		--flex-items: 1;
	}
}

.card-dashboard {
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	border-radius: var(--border-radius);
	padding: 18px;
	background-color: var(--bg-tools);
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	font-weight: 700;
	transition: border .3s;
}

.grid-row .card-dashboard {
	cursor: default;
	pointer-events: none;
}

.card-dashboard.active {
	background-color: var(--bg-active);
}

.card-dashboard.active .card-headline {
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	a.card-dashboard:not(.active):hover {
		border-color: var(--bg-active);
	}
}

.card-headline {
	color: var(--color-select-select);
	font-size: 18px;
	text-transform: uppercase;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.card-headline .svg-icon {
	flex-shrink: 0;
	flex-grow: 0;
}

.card-headline span {
	font-size: 14px;
	padding-top: 1px;
}

.card-headline .percent {
	flex-grow: 1;
	flex-shrink: 1;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-green);
	text-align: end;
}

.card-headline .percent.minus {
	color: var(--bg-active);
}

.title-primary {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
}

.card-price {
	display: flex;
	justify-content: space-between;
	gap: 0 4px;
	margin-top: 21px;
}

.card-price {
	flex-wrap: wrap;
}

.card-price .price {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-price .price-sub {
	flex-basis: 100%;
	font-size: 13px;
	font-weight: 400;
	color: rgba(var(--bg-rgb-white), 0.5);
	margin-top: 4px;
	text-transform: none;
}

.card-price .residue {
	color: var(--color-green);
	font-weight: 500;
	font-size: 14px;
	max-width: 60%;
	text-align: right;
	align-self: center;
}

.card-price .residue.minus {
	color: var(--bg-active);
}

.card-price .rate {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-green);
}

.card-price .rate.minus {
	color: var(--bg-active);
}

.card-price .rate.minus svg {
	transform: rotate(180deg);
}

.main-price {
	margin-top: 6px;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
}

.main-price-sub {
	margin-top: 3px;
	font-weight: 400;
	font-size: 13px;
	color: rgba(var(--bg-rgb-white), 0.5);
}

.card-bottom {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--color-white);
	font-size: 17px;
	font-weight: 400;
	margin-top: 17px;
}

.card-bottom span {
	font-size: 12px;
}

.card-text {
	margin-top: 5px;
	font-weight: 500;
	font-size: 14px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

.card-icon {
	font-size: 24px;
	color: var(--color-active);
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-title {
	text-align: center;
	font-size: 18px;
	text-transform: capitalize;
	color: var(--color-white);
	margin-bottom: 2px;
}

.card-sub {
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-second);
}

.graph {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	background-color: var(--bg-tools);
	border-radius: var(--border-radius);
	color: var(--color-white);
	transition: border .3s;
}

@media screen and (min-width: 1025px) {
	.graph:not(.active):hover {
		border-color: var(--bg-active);
	}
}

@media screen and (max-width: 390px) {
	.graph {
		padding: 10px;
	}
}

.chart-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 30px;
	flex-shrink: 0;
	flex-grow: 0;
}

.chart-top .arrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
}

.chart-top .arrow span {
	font-size: 12px;
}

.chart-top .title {
	font-weight: 600;
	font-size: 20px;
}

@media screen and (max-width: 390px) {
	.chart-top .title {
		font-size: 16px;
	}
}

.chart {
	width: 100% !important;
	height: 100% !important;
	flex-shrink: 1;
	flex-grow: 1;
	max-height: 232px;
}

.chart-bottom {
	flex-shrink: 0;
	flex-grow: 0;
	margin-top: 20px;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-weight: 500;
	font-size: 14px;
	border-top: 1px solid rgba(var(--bg-rgb-white), 0.1);
}

.chart-bottom span {
	color: var(--color-second);
}

.grid-box {
	--flex-gap: 10px;
	--flex-items: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
}

@media screen and (max-width: 390px) {
	.grid-box {
		--flex-items: 1;
	}
}

@media screen and (max-width: 479px) {
	.wrap-btn-request {
		margin-top: 10px;
	}
}

.wrap-btn-request .btn {
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 500;
	color: var(--color-main);
	border: none;
	cursor: pointer;
	background-color: var(--bg-active);
	box-shadow: 0 0 0 2px inset var(--bg-active);
	padding: 15px 30px;
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.wrap-btn-request .btn:hover {
		color: var(--color-active);
		background: none;
	}
}

@media screen and (max-width: 479px) {
	.wrap-btn-request .btn {
		width: 100%;
	}
}

.wrap-btn-request span {
	font-size: 16px;
}

.fiters-headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--bg-tools);
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	border-radius: var(--border-radius);
	padding: 19px;
}

.filter-drop {
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}

.filter-drop[data-attr-dropped="true"] .filter-btn {
	background-color: var(--bg-active);
}

.filter-drop[data-attr-dropped="true"] .filter-btn svg {
	transform: rotate(180deg);
}

.filter-drop[data-attr-dropped="true"] .filter-dropped {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible;
}

.filter-dropped {
	position: absolute;
	top: calc(100% + 5px);
	width: 100%;
	right: 0;
	min-width: 100px;
	z-index: 1;
	background-color: var(--bg-tools);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	overflow: auto;
	max-height: 135px;
	transform: translate3d(0, 10px, 0);
	opacity: 0;
	visibility: hidden;
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	transition: transform .3s, opacity .3s, visibility .3s;
}

.filter-dropped a {
	color: var(--color-main);
	display: block;
	padding: 7px 12px;
	font-size: 14px;
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.filter-dropped a:hover {
		background-color: var(--bg-active);
	}
}

.filter-btn {
	line-height: 1.143;
	display: flex;
	align-items: center;
	gap: 0 11px;
	cursor: pointer;
	border: none;
	font-size: 10px;
	font-weight: 400;
	padding: 7px 12px;
	border-radius: var(--border-radius);
	color: var(--color-main);
	background-color: var(--bg-darkness);
	transition: background-color .3s, border-radius .3s;
}

@media screen and (min-width: 1025px) {
	.filter-btn:hover {
		background-color: var(--bg-active);
	}
}

.filter-btn span {
	font-size: 14px;
	flex-grow: 1;
	flex-shrink: 1;
	text-align: start;
}

.filter-btn svg {
	flex-grow: 0;
	flex-shrink: 0;
	transition: transform .3s;
}

.filter-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 479px) {
	.filter-tools {
		flex-grow: 0;
		flex-shrink: 0;
		gap: 5px;
	}
}

.filter-tools .btn {
	border: none;
	cursor: pointer;
	color: var(--color-main);
	background-color: var(--bg-darkness);
	font-weight: 400;
	font-size: 14px;
	border-radius: var(--border-radius);
	line-height: 1.143;
	display: flex;
	padding: 7px 10px;
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.filter-tools .btn:hover {
		background-color: var(--bg-active);
	}
}

.filter-tools .btn.active {
	background-color: var(--bg-active);
}

.filter-icon {
	border: none;
	color: var(--color-main);
	background: var(--bg-darkness);
	font-weight: 400;
	font-size: 16px;
	border-radius: var(--border-radius);
	display: flex;
	padding: 7px;
}

.history-field {
	background-color: var(--bg-tools);
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.history-field .heading {
	display: flex;
	align-items: center;
	gap: 0 20px;
	padding: 20px;
	border-bottom: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.history-field .title {
	font-weight: 500;
	font-size: 18px;
	flex-grow: 1;
	flex-shrink: 1;
}

.history-field .head-text a {
	text-decoration: underline;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    color: var(--color-active);
}

@media screen and (min-width: 1025px) {
    .history-field .head-text a:hover {
        text-decoration: none;
    }
}

.btn-download {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 18px;
	width: 30px;
	height: 30px;
	border-radius: var(--border-radius);
	color: var(--color-main);
	background-color: var(--bg-darkness);
	border: none;
	cursor: pointer;
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.btn-download:hover {
		background-color: var(--bg-active);
	}
}

.history-list .item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
	min-height: 80px;
	border-bottom: 1px solid rgba(var(--bg-rgb-white), 0.05);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.history-list .item:hover {
		background-color: var(--bg-tools-second);
	}
}

.history-list .item:last-child {
	border-bottom: none;
}

.history-list .icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: var(--border-radius);
}

.history-list .content {
	flex-grow: 1;
	flex-shrink: 1;
}

.history-list .sub {
	font-weight: 400;
	font-size: 14px;
	color: rgba(var(--bg-rgb-white), 0.6);
	margin-top: 5px;
	line-height: 1.172;
}

.history-list .info {
	line-height: 1;
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--color-green);
}

.history-list .price {
	font-weight: 600;
	font-size: 16px;
}

.history-list .status {
	margin-top: 4px;
	border-radius: 5px;
	padding: 4px 10px;
	font-weight: 400;
	font-size: 12px;
	background: rgba(var(--bg-rgb-green), 0.2);
}

.history-list .status[data-attr-color-all-second="orange"] {
	background: rgba(var(--bg-rgb-orange-second), 0.2);
	color: rgba(var(--bg-rgb-orange-second), 1);
}

.bottom-content {
	display: flex;
	align-items: center;
	gap: 0 10px;
	margin-top: 4px;
	font-weight: 400;
	font-size: 12px;
}

.bottom-content .date {
	color: var(--color-second);
}

.bottom-content .link {
	text-decoration: underline;
	-webkit-text-decoration-skip-ink: none;
	        text-decoration-skip-ink: none;
	color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.bottom-content .link:hover {
		text-decoration: none;
	}
}

.status-check {
	font-size: 20px;
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--color-main);
	transition: transform .3s;
	transform: scale(1);
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
}

.status-check::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: var(--bg-active);
	transition: opacity .3s;
	opacity: 1;
}

.status-check.readed {
	color: var(--color-green);
}

.status-check.readed::before {
	opacity: 0;
}

.head-text {
	font-weight: 400;
	font-size: 16px;
}

[data-attr-color-all="blue"] {
	background: rgba(var(--bg-rgb-blue), 0.2);
	color: rgba(var(--bg-rgb-blue), 1);
}

[data-attr-color-all="pink"] {
	background: rgba(var(--bg-rgb-pink), 0.2);
	color: rgba(var(--bg-rgb-pink), 1);
}

[data-attr-color-all="green"] {
	background: rgba(var(--bg-rgb-green), 0.2);
	color: rgba(var(--bg-rgb-green), 1);
}

[data-attr-color-all="orange"] {
	background: rgba(var(--bg-rgb-orange), 0.2);
	color: rgba(var(--bg-rgb-orange), 1);
}

[data-attr-color-second="orange"] {
	color: rgba(var(--bg-rgb-orange-second), 1);
}

[data-attr-color-all="light-green"] {
	color: rgba(var(--bg-rgb-light-green), 1);
	background: rgba(var(--bg-rgb-light-green), 0.2);
}

[data-attr-color-all="violet"] {
	background: rgba(var(--bg-rgb-violet), 0.2);
	color: rgba(var(--bg-rgb-violet), 1);
}

[data-attr-color-all="yellow"] {
	background: rgba(var(--bg-rgb-yellow), 0.2);
	color: rgba(var(--bg-rgb-yellow), 1);
}

.section-dashboard.small {
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
}

.section-dashboard-chat {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
}

.section-dashboard-chat .container-fluid {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
}

.dashboard-chat {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 400px;
	position: relative;
	background-color: var(--bg-tools);
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 890px) {
	.dashboard-chat {
		width: auto;
		border-radius: 0;
		margin: -40px -20px;
	}
}

@media screen and (max-width: 767px) {
	.dashboard-chat {
		margin: -30px -10px;
	}
}

.dashboard-aside {
	max-width: 366px;
	width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	border-right: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 890px) {
	.dashboard-aside {
		max-width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}
}

.dashboard-aside .search-field {
	padding: 22px;
	border-bottom: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.search-field .group {
	padding: 0 21px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	background: var(--bg-main);
	color: var(--color-second);
	border-radius: var(--border-radius);
}

.search-field svg {
	flex-grow: 0;
	flex-shrink: 0;
}

.search-field .input {
	height: 52px;
	padding: 16px 0;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	border: none;
	background: none;
	color: var(--color-main);
}

.dashboard-content {
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.messages-list {
	padding: 10px;
}

.messages-list .item.selected .user {
	background-color: var(--bg-darkness);
}

.messages-list .item.selected .user .info {
	color: var(--color-main);
}

.messages-list .user {
	padding: 12px;
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
	border-radius: var(--border-radius);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.messages-list .user:hover {
		background-color: var(--bg-tools-second);
	}
	.messages-list .user:hover .info {
		color: var(--color-main);
	}
}

.messages-list .avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--color-second);
	background-color: var(--bg-main);
	flex-shrink: 0;
	flex-grow: 0;
	width: 48px;
	height: 48px;
	border-radius: 100%;
	position: relative;
	margin-right: 10px;
}

.messages-list img {
	overflow: hidden;
	border-radius: 100%;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.messages-list .network {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 16px;
	height: 16px;
	border: 4px solid var(--bg-tools);
	border-radius: 100%;
	background-color: var(--color-green);
}

.messages-list .info {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
	color: var(--color-second);
	transition: color .3s;
}

.messages-list .sup {
	display: flex;
	align-items: center;
	margin-bottom: 4px;
}

.messages-list .name {
	display: flex;
	align-items: center;
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
	font-weight: 500;
	font-size: 16px;
	color: var(--color-main);
}

.messages-list .time {
	margin-left: 10px;
	font-size: 14px;
}

.messages-list .sub {
	display: flex;
}

.messages-list .message {
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1;
	flex-grow: 1;
}

.messages-list .message img {
	width: auto;
	height: auto;
}

.messages-list .notify {
	background-color: var(--bg-active);
	font-size: 14px;
	color: var(--color-white);
	min-width: 22px;
	padding: 0 4px;
	height: 22px;
	border-radius: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	margin-left: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.btn-back {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-main);
	font-size: 14px;
}

@media screen and (max-width: 890px) {
	.btn-back {
		display: flex;
	}
}

[data-attr-disable="false"] {
	display: flex;
}

[data-attr-disable="true"] {
	display: none;
}

@media screen and (max-width: 890px) {
	[data-attr-visible="true"] {
		display: flex;
	}
}

@media screen and (max-width: 890px) {
	[data-attr-visible="false"] {
		display: none;
	}
}

.box-static {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 20px;
	position: relative;
}

@media screen and (max-width: 890px) {
	.box-static {
		display: none;
	}
}

.box-static::before {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(var(--bg-rgb-dark), 0.2);
}

.box-static > * {
	position: relative;
	z-index: 3;
}

.box-static .icon {
	margin-bottom: 10px;
	font-size: 50px;
}

.box-static .title {
	font-weight: 600;
	font-size: 16px;
	text-transform: capitalize;
}

.box-static .sub {
	margin-top: 4px;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-second);
}

.box-messages {
	flex-grow: 1;
	flex-shrink: 1;
	flex-direction: column;
}

.user-panel {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0 17px;
	padding: 24px 22px;
	background: var(--bg-tools);
	border-bottom: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.user-panel .avatar {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--color-second);
	background-color: var(--bg-main);
	width: 48px;
	height: 48px;
	border-radius: 100%;
	position: relative;
}

.user-panel .network {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 16px;
	height: 16px;
	border: 4px solid var(--bg-tools);
	border-radius: 100%;
	background-color: var(--color-green);
}

.user-panel img {
	overflow: hidden;
	border-radius: 100%;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.user-panel .name {
	font-weight: 500;
	font-size: 16px;
	color: var(--color-main);
}

.user-panel .status {
	font-weight: 400;
	font-size: 12px;
	margin-top: 2px;
}

.user-panel .group {
	flex-grow: 1;
	flex-shrink: 1;
}

.btn-option {
	flex-grow: 0;
	flex-shrink: 0;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--color-second);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.btn-option:hover {
		color: var(--color-active);
	}
}

.messages-field {
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
	min-height: 200px;
}

.messages-field::before {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(var(--bg-rgb-dark), 0.2);
}

.messages-field .nano-content {
	padding: 24px 22px;
}

.messages-field .item {
	display: flex;
	margin-bottom: 20px;
}

.messages-field .item.me {
	justify-content: flex-end;
}

.messages-field .item.me .message {
	background-color: var(--bg-active);
	border-radius: 16px 16px 4px 16px;
}

.messages-field .item:last-child {
	margin-bottom: 0;
}

.item-message {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	max-width: 80%;
}

.item-message .message {
	font-weight: 400;
	font-size: 14px;
	color: var(--color-main);
	background-color: rgba(var(--bg-rgb-white), 0.1);
	border-radius: 16px 16px 16px 4px;
	padding: 8px 12px;
	line-height: 1.286;
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.item-message .time {
	font-weight: 400;
	font-size: 12px;
	text-align: right;
	color: rgba(var(--bg-rgb-white), 0.7);
}

.item-message .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: rgba(var(--bg-rgb-white), 0.7);
}

.enter-panel {
	flex-grow: 0;
	flex-shrink: 0;
	padding: 22px;
	background-color: var(--bg-tools);
	border-top: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.enter-panel .wrapped {
	display: flex;
	align-items: center;
	gap: 0 10px;
	height: 52px;
}

.enter-panel .textarea {
	flex-grow: 1;
	flex-shrink: 1;
	height: 52px;
	resize: none;
	padding: 16px 20px;
	background-color: var(--bg-main);
	border: none;
	border-radius: var(--border-radius);
	color: var(--color-main);
	font-weight: 400;
	font-size: 16px;
}

.enter-panel .btn {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 25px;
	color: var(--color-white);
	border: none;
	cursor: pointer;
	height: 100%;
	border-radius: var(--border-radius);
	background-color: var(--color-active);
	box-shadow: 0 0 0 1px inset var(--color-active);
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.enter-panel .btn:hover {
		background-color: transparent;
		color: var(--color-active);
	}
}

@media screen and (max-width: 479px) {
	.enter-panel .btn {
		padding: 0 18px;
		font-size: 18px;
	}
}

.box-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

@media screen and (max-width: 479px) {
	.box-columns.second .box {
		flex: 1 1 190px;
	}
}

.box-columns .box {
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	background-color: var(--bg-tools);
	border-radius: 10px;
	padding: 20px;
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	font-size: 20px;
	line-height: 1;
}

.box-columns .icon {
	font-size: 17px;
	display: flex;
	margin-bottom: 10px;
}

.box-columns .row {
	margin-bottom: 4px;
}

.box-columns .row:last-child {
	margin-bottom: 0;
}

.box-columns .svg-icon {
	color: var(--color-second);
}

.box-columns span {
	font-weight: 500;
	font-size: 14px;
	color: rgba(var(--bg-rgb-white), 0.5);
}

.box-columns mark {
	background: none;
	color: var(--color-green);
}

.wrapper-scroll {
	overflow-x: auto;
}

@media screen and (max-width: 890px) {
	.wrapper-scroll {
		margin: 0 -20px;
		padding: 0 20px 10px;
	}
}

@media screen and (max-width: 767px) {
	.wrapper-scroll {
		margin: 0 -10px;
		padding: 0 10px 10px;
	}
}

.box-table {
	margin-bottom: 30px;
}

.table-headline {
	padding: 20px;
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	border-radius: 10px;
	background-color: var(--bg-tools);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 5px;
	margin-bottom: 10px;
}

@media screen and (max-width: 479px) {
	.table-headline {
		gap: 10px 5px;
	}
	.table-headline .aside-wrap {
		gap: 10px 5px;
	}
}

@media screen and (max-width: 479px) {
	.table-headline.second {
		flex-wrap: nowrap;
		gap: 10px;
	}
}

.table-headline .search-field {
	width: 100%;
	max-width: 320px;
}

.table-headline .search-field input {
	height: 40px;
}

.table-primary {
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	border-radius: 10px;
	background-color: var(--bg-tools);
	width: -moz-fit-content;
	width: fit-content;
	min-width: 100%;
}

.table-primary table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

@media screen and (max-width: 890px) {
	.table-primary table {
		white-space: nowrap;
	}
}

.table-primary thead {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.1875;
}

.table-primary thead th:first-of-type {
	font-weight: 400;
	font-size: 14px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

@media screen and (max-width: 767px) {
	.table-primary thead th:nth-of-type(2) {
		min-width: 216px;
	}
}

@media screen and (max-width: 767px) {
	.table-primary thead th:nth-of-type(3) {
		min-width: 150px;
	}
}

.table-primary th {
	padding: 15px 20px;
	width: 150px;
}

.table-primary th:first-of-type {
	width: 50px;
	padding: 15px 2px;
}

.table-primary th:nth-of-type(2) {
	width: 630px;
}

.table-primary th,
.table-primary td {
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.table-primary tbody {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

.table-primary td {
	padding: 14px 20px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

.table-primary td:first-of-type {
	padding: 14px 2px;
	min-width: 50px;
}

.table-secondary {
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	border-radius: 10px;
	background-color: var(--bg-tools);
	width: -moz-fit-content;
	width: fit-content;
	min-width: 100%;
}

.table-secondary table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

@media screen and (max-width: 890px) {
	.table-secondary table {
		white-space: nowrap;
	}
}

.table-secondary thead {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.1875;
}

.table-secondary th {
	padding: 15px 20px;
}

@media screen and (max-width: 767px) {
	.table-secondary th:first-of-type {
		min-width: 411px;
	}
}

.table-secondary th:last-of-type {
	min-width: 30px;
	padding: 0;
}

.table-secondary th,
.table-secondary td {
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.table-secondary tbody {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

.table-secondary td {
	padding: 14px 20px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

.table-secondary td:first-of-type {
	text-align: left;
	font-size: 16px;
}

.table-secondary td:last-of-type {
	padding: 0;
}

.table-secondary td:last-of-type .drop_holder {
	height: 100%;
}

.table-secondary .btn {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	color: rgba(var(--bg-rgb-white), 0.6);
	width: 100%;
	height: 100%;
	font-size: 16px;
}

@media screen and (min-width: 1025px) {
	.table-secondary .btn:hover {
		background: rgba(var(--bg-rgb-white), 0.2);
	}
}

.table-secondary mark {
	background: none;
	color: var(--color-green);
}

.table-secondary .title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-white);
}

.table-secondary img {
	border-radius: 4px;
	width: 70px;
    height: 40px;
}

.aside-wrap {
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.box-tools {
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	border-radius: 10px;
	background-color: var(--bg-tools);
	padding: 30px;
}

@media screen and (max-width: 767px) {
	.box-tools {
		padding: 20px;
	}
}

.box-tools .row {
	margin-bottom: 20px;
}

.box-tools .row:last-child {
	margin-bottom: 0;
}

.box-tools .title {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
}

.box-tools .form {
	margin-bottom: 20px;
}

.box-tools .message {
	padding: 14px 20px;
	width: 100%;
	border: none;
	height: 120px;
	resize: none;
	box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb-white), 0.05);
	border-radius: 10px;
	background-color: var(--bg-main);
	color: var(--color-white);
	font-family: inherit;
	font-size: 14px;
}

.box-tools .count {
	color: var(--color-second);
	font-size: 12px;
}

.box-tools .desc {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-second);
	display: flex;
	flex-direction: column;
	gap: 20px 0;
}

[data-attr-min]::before {
	content: attr(data-attr-min);
}

[data-attr-max]::before {
	content: attr(data-attr-max);
}

.list-pricing {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.list-pricing .item {
	display: flex;
	align-items: center;
	gap: 5px 20px;
	padding: 10px 15px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 16px;
	background-color: var(--bg-main);
}

@media screen and (max-width: 374px) {
	.list-pricing .item {
		gap: 5px 10px;
	}
}

.list-pricing .item.off .quantity {
	opacity: .2;
	pointer-events: none;
}

.list-pricing .item.off .price {
	opacity: .2;
	pointer-events: none;
}

.list-pricing .mount {
	min-width: 75px;
}

.list-pricing .price {
	font-weight: 500;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 5px;
	line-height: 1.25;
}

.quantity {
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	opacity: 1;
	transition: opacity .3s;
}

.quantity .wrap {
	position: relative;
}

.number-field {
	border: 1px solid var(--color-main);
	background-color: var(--bg-tools);
	color: var(--color-white);
	max-width: 110px;
	width: 100%;
	height: 40px;
	border-radius: 10px;
	padding: 0 32px 0 28px;
}

@media screen and (max-width: 374px) {
	.number-field {
		padding: 0 18px 0 10px;
	}
}

.number-field[type="number"]::-webkit-outer-spin-button, .number-field[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.number-field[type="number"] {
	-moz-appearance: textfield;
}

.number-field::-webkit-inner-spin-button {
	-webkit-appearance: inner-spin-button;
	display: inline-block;
	cursor: default;
	flex: 0 0 auto;
	align-self: stretch;
	-webkit-user-select: none;
	opacity: 0;
	pointer-events: none;
	-webkit-user-modify: read-only;
}

.quantity-buttons {
	position: absolute;
	top: 0;
	right: 18px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 10px;
	padding: 10px 0;
}

@media screen and (max-width: 374px) {
	.quantity-buttons {
		right: 5px;
	}
}

.quantity-add {
	background: url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.7627 0L9.52584 5.25H-0.000444412L4.7627 0Z" fill="%23D9D9D9" /></svg>') no-repeat;
}

.quantity-remove {
	background: url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.7627 5.25L-0.000444871 8.97232e-07L9.52583 6.44184e-08L4.7627 5.25Z" fill="%23D9D9D9" /></svg>') no-repeat;
}

.quantity-button {
	width: 10px;
	height: 6px;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.quantity-button:hover {
		opacity: .6;
	}
}

.checking {
	flex-shrink: 0;
	flex-grow: 0;
}

.switcher {
	width: 48px;
	height: 26px;
	border-radius: 20px;
	background-color: var(--bg-tools);
	border: none;
	cursor: pointer;
	display: block;
	padding: 3px;
	transition: background-color .3s;
}

.switcher.off i {
	transform: translate3d(0, -50%, 0);
	background-color: var(--bg-main);
}

.switcher .field {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
}

.switcher i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 10px;
	background-color: var(--bg-active);
	transform: translate3d(20px, -50%, 0);
	transition: transform .3s, background-color .3s;
}

.twocolumns {
	display: flex;
	gap: 30px 20px;
	counter-reset: row-counter;
}

@media screen and (max-width: 991px) {
	.twocolumns {
		flex-direction: column-reverse;
	}
}

.twocolumns .col {
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 1240px) {
	.twocolumns .col {
		width: 50%;
	}
}

@media screen and (max-width: 991px) {
	.twocolumns .col {
		width: 100%;
	}
}

.twocolumns .col.second {
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 668px;
}

@media screen and (max-width: 1240px) {
	.twocolumns .col.second {
		width: 50%;
		max-width: 100%;
	}
}

@media screen and (max-width: 991px) {
	.twocolumns .col.second {
		width: 100%;
	}
}

.twocolumns .row {
	margin-bottom: 30px;
	padding: 30px;
	border-radius: var(--border-radius);
	background-color: var(--bg-tools);
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 991px) {
	.twocolumns .row {
		padding: 20px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 479px) {
	.twocolumns .row {
		margin-bottom: 10px;
	}
}

.twocolumns .row:last-child {
	margin-bottom: 0;
}

.twocolumns .row-title {
	font-weight: 600;
	font-size: 20px;
	background-color: var(--bg-tools);
}

.twocolumns .row-title::before {
	counter-increment: row-counter;
	content: counter(row-counter) ". ";
}

.twocolumns .box {
	margin-bottom: 20px;
}

.twocolumns .box:last-child {
	margin-bottom: 0;
}

.twocolumns .name {
	display: block;
	margin-bottom: 5px;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-second);
}

.twocolumns .textarea,
.twocolumns .input {
	width: 100%;
	color: var(--color-main);
	border-radius: var(--border-radius);
	background-color: var(--bg-main);
	border: none;
}

.twocolumns .textarea {
	resize: none;
	height: 120px;
	padding: 15px 20px;
}

.twocolumns .input {
	height: 50px;
	padding: 5px 20px;
}

.twocolumns .count {
	font-weight: 400;
	font-size: 12px;
	color: var(--color-second);
	margin-top: 5px;
}

.twocolumns .sub {
	margin-top: 3px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-second);
}

.wrapped-group {
	border: 1px solid rgba(var(--bg-rgb-white), 0.15);
	border-radius: var(--border-radius);
	padding: 20px;
	margin-bottom: 10px;
}

.performer-box {
	margin-bottom: 20px;
}

.performer-box .group {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

@media screen and (max-width: 568px) {
	.performer-box .group {
		flex-direction: column;
	}
}

.performer-box .label {
	width: 50%;
}

@media screen and (max-width: 568px) {
	.performer-box .label {
		width: 100%;
	}
}

.performer-title {
	font-weight: 600;
	font-size: 18px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.message-limit {
	border-radius: var(--border-radius);
	padding: 20px;
	background: rgba(var(--bg-rgb-blue), 0.2);
	line-height: 1.5;
}

.message-limit p {
	font-weight: 500;
	font-size: 14px;
	color: var(--color-blue);
}

.message-title {
	font-weight: 600;
	font-size: 16px;
}

.identification-box {
	border: 1px dashed rgba(var(--border-rgb-burgundy), 0.5);
	border-radius: var(--border-radius);
	padding: 20px;
	background: rgba(var(--border-solid-rgb-burgundy), 0.3);
}

.identification-box .group {
	display: flex;
	align-items: center;
	gap: 0 20px;
}

@media screen and (max-width: 479px) {
	.identification-box .group {
		gap: 5px 15px;
	}
}

@media screen and (max-width: 410px) {
	.identification-box .group {
		flex-direction: column;
	}
}

.identification-box .label,
.identification-box .item {
	width: 50%;
}

@media screen and (max-width: 410px) {
	.identification-box .label,
	.identification-box .item {
		width: 100%;
	}
}

.identification-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.125;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.upload-box {
	display: block;
	border-radius: var(--border-radius);
	padding: 10px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background-color: var(--bg-darkness);
	font-weight: 500;
	font-size: 16px;
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.upload-box:hover {
		background-color: var(--bg-active);
	}
}

.upload-box input[type="file"] {
	display: none;
}

.edit-poster {
	display: flex;
	align-items: center;
	gap: 0 20px;
}

.wrap-image {
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 230px;
	border-radius: var(--border-radius);
	overflow: hidden;

}

.wrap-image .media {
	padding-bottom: 56.26%;
	position: relative;
}

.wrap-image.hidden {
	display: none;
}

.wrap-image img {
	height: auto;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.btn-edit {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	border-radius: var(--border-radius);
	padding: 10px;
	background-color: var(--bg-darkness);
	gap: 0 10px;
	font-weight: 400;
	font-size: 20px;
	color: var(--color-light-second);
	transition: background-color .3s;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.btn-edit:hover {
		background-color: var(--bg-active);
	}
}

.btn-edit span {
	font-size: 14px;
}

.selected-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.selected-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px 10px 20px;
	line-height: 1.286;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--color-main);
	border-radius: var(--border-radius);
}

.selected-item span {
	font-size: 14px;
}

.selected-item .close {
	cursor: pointer;
	border: none;
	background: none;
	color: var(--color-main);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.selected-item .close:hover {
		color: var(--color-active);
	}
}

.radio-title {
	font-weight: 600;
	font-size: 20px;
	text-transform: capitalize;
}

.radio-title span {
	font-weight: 400;
}

.radio-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.radio-text {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	padding-left: 30px;
}

.radio-text:after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background: var(--bg-active);
	border-radius: 50%;
	top: 50%;
	left: 6px;
	transition: background .4s, opacity .3s;
	transform: translate3d(0, -50%, 0);
	z-index: 1;
	opacity: 0;
}

.radio-text::before {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	border: 1px solid var(--bg-darkness);
	border-radius: 100%;
	left: 0;
	transition: .3s;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.radio-input {
	display: none;
}

.radio-input:checked + .radio-text:after {
	opacity: 1;
}

.radio-input:checked + .radio-text::before {
	background: var(--color-main);
	border-color: var(--color-main);
}

.card-edit {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.card-edit .image {
	background-color: var(--bg-tools);
	max-width: 100%;
	border-radius: var(--border-radius);
	overflow: hidden;
	position: relative;
	height: auto;
	width: 100%;
	padding-bottom: 55.689%;
}

.card-edit img {
	position: absolute;
	bottom: 0;
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	   object-fit: cover;
	right: 0;
	top: 0;
	width: 100%;
}

.card-edit .content {
	padding: 30px;
	margin-top: -10px;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	border-top: none;
	background-color: var(--bg-tools);
}

.card-edit .adress {
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-white);
}

.card-edit .list {
	color: var(--color-main);
	font-weight: 400;
	font-size: 14px;
}

.card-edit .list li {
	margin-bottom: 15px;
}

.card-edit .list li:last-child {
	margin-bottom: 0;
}

.card-edit .list span:first-child {
	color: var(--color-second);
}

.list-info {
	display: flex;
	gap: 0 30px;
	font-weight: 400;
	font-size: 18px;
	color: var(--color-second);
	margin-bottom: 10px;
}

.list-info li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.list-info span {
	font-size: 14px;
}

.col-headline {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	gap: 16px 10px;
}

@media screen and (max-width: 568px) {
	.col-headline {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
}

.col-headline .group {
	flex-grow: 1;
	flex-shrink: 1;
}

.col-headline .title {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.1605;
	text-transform: capitalize;
}

.link-download {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 10px;
	font-weight: 500;
	font-size: 20px;
	background-color: var(--bg-active);
	color: var(--color-main);
	padding: 15px 30px;
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 1px inset var(--bg-active);
	transition: background-color, color .3s;
}

@media screen and (min-width: 1025px) {
	.link-download:hover {
		background-color: transparent;
		color: var(--color-active);
	}
}

@media screen and (max-width: 568px) {
	.link-download {
		flex-grow: 1;
		flex-shrink: 1;
		width: 100%;
	}
}

.link-download span {
	font-size: 16px;
}

.btn-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	border: none;
	padding: 10px;
	cursor: pointer;
	font-weight: 400;
	width: 100%;
	border-radius: var(--border-radius);
	background-color: rgba(var(--bg-rgb-headline-btn), 0.2);
	color: rgba(var(--bg-rgb-headline-btn), 1);
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.btn-delete:hover {
		background-color: var(--color-active);
		color: var(--color-main);
	}
}

.btn-delete span {
	font-size: 14px;
}

.submit-btn {
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	border: none;
	padding: 15px;
	cursor: pointer;
	width: 100%;
	font-weight: 500;
	border-radius: var(--border-radius);
	background-color: var(--color-active);
	color: var(--color-main);
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.submit-btn:hover {
		box-shadow: 0 0 0 1px inset var(--color-active);
		background-color: transparent;
		color: var(--color-active);
	}
}

.submit-btn span {
	font-size: 16px;
}

.contact-form {
	display: flex;
	background-color: var(--bg-tools);
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	border-radius: var(--border-radius);
}

@media screen and (max-width: 767px) {
	.contact-form {
		flex-direction: column;
	}
}

.contact-form .col {
	flex-grow: 1;
	flex-shrink: 1;
	padding: 30px;
}

@media screen and (max-width: 991px) {
	.contact-form .col {
		max-width: 100%;
		width: 50%;
	}
}

@media screen and (max-width: 390px) {
	.contact-form .col {
		padding: 20px;
	}
}

@media screen and (max-width: 767px) {
	.contact-form .col {
		width: 100%;
	}
}

.contact-form .col.second {
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 300px;
	width: 100%;
	border-left: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 991px) {
	.contact-form .col.second {
		max-width: 100%;
		width: 50%;
	}
}

@media screen and (max-width: 767px) {
	.contact-form .col.second {
		width: 100%;
		border-left: none;
		border-top: 1px solid rgba(var(--bg-rgb-white), 0.05);
	}
}

.contact-form .title {
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 25px;
}

.contact-form .box {
	margin-bottom: 20px;
}

.contact-form .box:last-child {
	margin-bottom: 0;
}

.contact-form .input, .contact-form .textarea {
	height: 38px;
	width: 100%;
	color: var(--color-main);
	border-radius: var(--border-radius);
	background-color: var(--bg-main);
	border: none;
}

.contact-form .input {
	padding: 5px 20px;
}

.contact-form .textarea {
	resize: none;
	padding: 9px 20px;
	min-height: 85px;
	resize: vertical;
}

.contact-form .name {
	margin-bottom: 2px;
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-second);
}

.contact-form .btn {
	cursor: pointer;
	width: 100%;
	border: none;
	background-color: var(--bg-active);
	color: var(--color-main);
	font-weight: 500;
	font-size: 16px;
	margin-top: 30px;
	padding: 11px;
	border-radius: var(--border-radius);
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.contact-form .btn:hover {
		background-color: transparent;
		color: var(--color-active);
		box-shadow: 0 0 0 1px inset var(--color-active);
	}
}

.contact-form .text {
	margin-bottom: 15px;
	font-weight: 500;
	font-size: 14px;
}

.contact-form .list li {
	margin-bottom: 15px;
	word-break: break-word;
}

.contact-form .list li:last-child {
	margin-bottom: 0;
}

.list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: var(--color-second);
	font-size: 18px;
}

.list-item .svg-icon {
	flex-shrink: 0;
	flex-grow: 0;
}

.list-item span {
	font-size: 14px;
}

@media screen and (min-width: 1025px) {
	a.list-item:hover {
		text-decoration: underline;
	}
}

.tabs-form {
	background-color: #2D0E18;
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.tabs-headline {
	display: flex;
	gap: 0 1px;
	border-bottom: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 767px) {
	.tabs-headline .item {
		width: 25%;
		gap: 0;
	}
}

.tabs-headline .item.active .tab-link {
	background-color: #5f1b33;
}

.tabs-headline .item.active .tab-link::before {
	width: 100%;
}

.tab-link {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 400;
	gap: 10px;
	color: #eaddcc;
	padding: 15px 30px;
	position: relative;
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.tab-link:hover {
		background-color: #5f1b33;
	}
	.tab-link:hover::before {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.tab-link {
		padding: 15px 5px;
	}
}

@media screen and (max-width: 410px) {
	.tab-link {
		font-size: 16px;
		gap: 5px;
	}
}

.tab-link::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background: #c30b43;
	width: 0;
	transition: width .3s;
}

.tab-link span {
	font-size: 14px;
}

@media screen and (max-width: 410px) {
	.tab-link span {
		font-size: 12px;
	}
}

.tab-link svg {
	flex-grow: 0;
	flex-shrink: 0;
}

.user-wrap {
	display: flex;
	align-items: center;
	gap: 0 20px;
	margin-bottom: 40px;
}

.user-wrap .image {
	width: 100px;
	height: 100px;
	position: relative;
	overflow: hidden;
	border-radius: 100%;
	background: var(--bg-main);
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-wrap .image svg {
	font-size: 25px;
}

.user-wrap img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.change-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-grow: 0;
	flex-shrink: 0;
	padding: 10px;
	border-radius: var(--border-radius);
	background: var(--bg-darkness);
	color: var(--color-light-second);
	border: none;
	font-size: 20px;
	font-weight: 400;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.change-btn:hover {
		background-color: var(--bg-active);
	}
}

.change-btn span {
	font-size: 14px;
}

.tabs-content {
	padding: 30px;
	display: none;
}

@media screen and (max-width: 410px) {
	.tabs-content {
		padding: 15px;
	}
}

.tabs-content.selected {
	display: block;
}

.tabs-content .name {
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-second);
	margin-bottom: 5px;
}

.tabs-content .box {
	margin-bottom: 20px;
}

.tabs-content .box:last-child {
	margin-bottom: 0;
}

.tabs-content .input {
	padding: 5px 20px;
	height: 50px;
}

.tabs-content .textarea {
	height: 120px;
	padding: 20px;
	resize: none;
}

.tabs-content .input,
.tabs-content .textarea {
	border-radius: var(--border-radius);
	width: 100%;
	color: var(--color-main);
	background: var(--bg-main);
	border: none;
}

.tabs-content .count {
	font-weight: 400;
	font-size: 12px;
	color: var(--color-second);
	display: block;
	margin-top: 5px;
}

.tabs-content .btn {
	margin-top: 40px;
	border-radius: var(--border-radius);
	cursor: pointer;
	background-color: var(--bg-active);
	color: var(--color-main);
	border: none;
	font-weight: 500;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	gap: 10px;
	box-shadow: 0 0 0 1px inset var(--bg-active);
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.tabs-content .btn:hover {
		background-color: transparent;
		color: var(--color-active);
	}
}

@media screen and (max-width: 767px) {
	.tabs-content .btn {
		width: 100%;
	}
}

.tabs-content .btn span {
	font-size: 16px;
}

.tabs-content .btn.second {
	margin-top: 30px;
}

.tabs-content .sup {
	margin-bottom: 25px;
	font-weight: 500;
	font-size: 14px;
}

.tabs-title {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 20px;
	text-transform: capitalize;
}

@media screen and (max-width: 767px) {
	.tabs-title {
		font-size: 18px;
	}
}

.tabs-title-second {
	margin-bottom: 25px;
	font-weight: 600;
	font-size: 22px;
	text-transform: capitalize;
	color: rgba(var(--bg-rgb-headline-btn), 1);
}

@media screen and (max-width: 767px) {
	.tabs-title-second {
		font-size: 20px;
	}
}

.tabs-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.tabs-tools .text {
	font-weight: 500;
	font-size: 14px;
}

.button-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	color: var(--color-main);
	background-color: var(--bg-darkness);
	cursor: pointer;
	border: none;
	font-weight: 400;
	font-size: 20px;
	border-radius: var(--border-radius);
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.button-tools:hover {
		background-color: var(--bg-active);
	}
}

@media screen and (max-width: 410px) {
	.button-tools {
		gap: 5px;
		padding: 10px 15px;
		font-size: 18px;
	}
}

.button-tools.second {
	color: rgba(var(--bg-rgb-headline-btn), 1);
	background-color: rgba(var(--bg-rgb-headline-btn), 0.2);
}

@media screen and (min-width: 1025px) {
	.button-tools.second:hover {
		background-color: var(--bg-active);
		color: var(--color-main);
	}
}

.button-tools span {
	font-size: 14px;
}

@media screen and (max-width: 410px) {
	.button-tools span {
		font-size: 12px;
	}
}

.message-box {
	margin-top: 30px;
	background: rgba(var(--bg-rgb-blue), 0.2);
	padding: 20px;
	font-size: 16px;
	line-height: 1.5;
	border-radius: var(--border-radius);
	color: rgba(var(--bg-rgb-blue), 1);
}

.message-box span {
	color: rgba(var(--bg-rgb-white), 0.5);
}

.message-box strong {
	font-weight: 600;
}

.payout-item {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
	border-radius: var(--border-radius);
	background-color: rgba(var(--bg-rgb-white), 0.05);
}

@media screen and (max-width: 410px) {
	.payout-item {
		padding: 16px;
	}
}

.payout-item:last-child {
	margin-bottom: 0;
}

.payout-item .detail {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	align-items: center;
	gap: 0 12px;
}

.payout-item .icon {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 24px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

@media screen and (max-width: 410px) {
	.payout-item .icon {
		font-size: 18px;
	}
}

.payout-item .text {
	font-weight: 500;
	font-size: 16px;
	word-break: break-all;
}

@media screen and (max-width: 410px) {
	.payout-item .text {
		font-size: 14px;
	}
}

.payout-item .sub {
	font-weight: 400;
	font-size: 14px;
	color: rgba(var(--bg-rgb-white), 0.6);
}

.payout-item .tools {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-grow: 0;
	flex-shrink: 0;
}

@media screen and (max-width: 410px) {
	.payout-item .tools {
		gap: 5px;
	}
}

.payout-item .default {
	font-weight: 400;
	font-size: 12px;
	border-radius: 5px;
	padding: 3px 21px;
	color: rgba(var(--bg-rgb-green), 1);
	background: rgba(var(--bg-rgb-green), 0.2);
}

@media screen and (max-width: 410px) {
	.payout-item .default {
		padding: 3px 10px;
		font-size: 10px;
	}
}

.payout-btn {
	cursor: pointer;
	border: none;
	background: none;
	font-size: 20px;
	color: rgba(var(--bg-rgb-white), 0.6);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.payout-btn:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 410px) {
	.payout-btn {
		font-size: 18px;
	}
}

.footer {
	flex-shrink: 0;
	flex-grow: 0;
	background: var(--bg-darkness);
	padding: 30px 20px;
	display: flex;
	gap: 25px 6.81vw;
}

@media screen and (max-width: 991px) {
	.footer {
		flex-direction: column;
		align-items: center;
	}
}

.footer .column {
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (max-width: 991px) {
	.footer .column {
		width: 100%;
	}
}

.footer .column.second {
	flex-shrink: 0;
	flex-grow: 0;
}

@media screen and (max-width: 991px) {
	.footer .column.second {
		display: flex;
		align-items: center;
	}
}

@media screen and (max-width: 991px) {
	.footer .group {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0 20px;
	}
}

@media screen and (max-width: 991px) {
	.footer .group a {
		max-width: 58px;
	}
}

.footer .group img {
	max-width: 100%;
}

.logo-footer {
	display: flex;
	padding-bottom: 11px;
}

@media screen and (max-width: 991px) {
	.logo-footer {
		justify-content: center;
	}
}

.logo-footer img {
	width: 100%;
	height: 100%;
}

.footer-list {
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	gap: 25px 6.81vw;
	height: 100%;
}

@media screen and (max-width: 991px) {
	.footer-list {
		justify-content: space-around;
	}
}

@media screen and (max-width: 479px) {
	.footer-list {
		justify-content: center;
	}
}

.footer-list .list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px 0;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}

@media screen and (max-width: 479px) {
	.footer-list .list {
		width: 50%;
		gap: 18px 0;
	}
}

.footer-list a {
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.footer-list a:hover {
		color: var(--color-active);
	}
}

.copy,
.copy-mob {
	font-size: 14px;
	color: var(--color-second);
}

.copy-mob {
	display: none;
}

@media screen and (max-width: 991px) {
	.copy-mob {
		display: block;
	}
}

.copy {
	margin-top: 25px;
}

@media screen and (max-width: 991px) {
	.copy {
		display: none;
	}
}

.modal-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 1px;
	z-index: 1051;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	overflow: auto;
	background: rgba(var(--bg-rgb-dark), 0.7);
}

.modal-box.show {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	background: var(--bg-tools);
	box-shadow: var(--box-shadow-modal);
	width: 100%;
	padding: 50px;
	border-radius: 15px;
	overflow: hidden;
	max-width: 484px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: transform .3s;
	position: relative;
	margin: auto;
}

@media screen and (max-width: 767px) {
	.modal-content {
		padding: 30px 20px;
	}
}

.modal-content[data-attr-l] {
	max-width: 950px;
}

@media screen and (max-width: 767px) {
	.modal-content[data-attr-l] {
		max-width: 568px;
	}
}

.modal-content[data-attr-xl] {
	max-width: 950px;
}

@media screen and (max-width: 991px) {
	.modal-content[data-attr-xl] {
		max-width: 568px;
		padding: 30px 20px;
	}
}

@media screen and (max-width: 991px) {
	.modal-content[data-attr-xl] .modal-field {
		flex-direction: column;
	}
}

.modal-content .close {
	display: flex;
	border: none;
	background: none;
	position: absolute;
	font-size: 24px;
	right: 20px;
	top: 20px;
	color: var(--color-main);
	cursor: pointer;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.modal-content .close:hover {
		color: var(--color-active);
	}
}

.modal-content .title {
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 25px;
	padding-right: 30px;
}

@media screen and (max-width: 1024px) {
	.modal-content .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.modal-content .title {
		font-size: 22px;
	}
}

.modal-content .hold {
	padding-bottom: 45px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--color-second);
}

@media screen and (max-width: 767px) {
	.modal-content .hold {
		padding-bottom: 30px;
	}
}

.modal-content .hold.last,
.modal-content .hold:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.modal-content .block {
	margin-bottom: 30px;
}

.modal-content .block:last-child {
	margin-bottom: 0;
}

.modal-content .row {
	margin-bottom: 20px;
}

.modal-content .row:last-child {
	margin-bottom: 0;
}

.modal-content .hidden-row {
	display: none;
}

@media screen and (max-width: 991px) {
	.modal-content .hidden-row {
		display: block;
	}
}

.modal-content .box {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-second);
}

.modal-content .box:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.modal-content .grid {
	display: flex;
	flex-direction: column;
}

.modal-content .textarea {
	resize: none;
	height: 120px;
}

.modal-content .input,
.modal-content .textarea {
	font-size: 14px;
	width: 100%;
	background: var(--bg-main);
	line-height: 1.143;
	border: none;
	padding: 11px 20px;
	color: var(--color-main);
	border-radius: var(--border-radius);
}

.modal-content .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-content .wrap.primary {
	padding-bottom: 10px;
}

.modal-content .btn {
	border-radius: var(--border-radius);
	padding: 10px 20px;
	line-height: 1.125;
	cursor: pointer;
	width: 100%;
	text-transform: capitalize;
	border: none;
	font-weight: 500;
	color: var(--color-main);
	background-color: var(--bg-darkness);
	transition: background-color .3s;
}

@media screen and (min-width: 1025px) {
	.modal-content .btn:hover {
		background-color: var(--bg-active);
	}
}

.modal-content .text {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	margin-bottom: 15px;
	color: var(--color-second);
}

.modal-content .name {
	font-size: 14px;
	display: block;
	margin-bottom: 5px;
	color: var(--color-second);
}

.modal-content .suptitle {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-second);
	margin-bottom: 25px;
}

.modal-content .balance {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 25px;
}

.modal-content .balance span:first-child {
	color: var(--color-second);
}

.modal-content .info {
	max-width: 300px;
	margin: 28px auto 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: var(--color-second);
}

.modal-content .info a {
	color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.modal-content .info a:hover {
		text-decoration: underline;
	}
}

.modal-title {
	font-weight: 600;
	font-size: 26px;
	color: #ff515a;
	text-align: center;
	padding: 0 34px;
	margin-bottom: 25px;
}

.modal-sub {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	margin-bottom: 25px;
}

.modal-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media screen and (max-width: 410px) {
	.modal-group {
		flex-direction: column;
	}
}

.modal-group .item {
	width: 50%;
}

@media screen and (max-width: 410px) {
	.modal-group .item {
		width: 100%;
	}
}

.modal-group .button {
	cursor: pointer;
	min-height: 40px;
	width: 100%;
	border: none;
	background-color: var(--bg-darkness);
	font-weight: 400;
	font-size: 20px;
	color: var(--color-main);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.modal-group .button:hover {
		background-color: var(--bg-active);
	}
}

.modal-group .button.second {
	background: rgba(var(--bg-rgb-headline-btn), 0.2);
	color: rgba(var(--bg-rgb-headline-btn), 1);
}

@media screen and (min-width: 1025px) {
	.modal-group .button.second:hover {
		background-color: var(--bg-active);
		color: var(--color-main);
	}
}

.modal-group .button span {
	font-size: 14px;
}

.title-pay {
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 15px;
	color: var(--color-second);
}

.modal-field {
	display: flex;
	gap: 20px 0;
}

@media screen and (max-width: 767px) {
	.modal-field {
		flex-direction: column;
	}
}

.modal-field .col {
	width: 50%;
	padding: 0 25px 0 0;
}

@media screen and (max-width: 767px) {
	.modal-field .col {
		width: 100%;
		padding: 0;
	}
}

.modal-field .col.second {
	padding: 0 0 0 25px;
}

@media screen and (max-width: 767px) {
	.modal-field .col.second {
		padding: 0;
	}
}

.modal-field .column {
	flex-grow: 1;
	flex-shrink: 1;
}

.modal-field .column.second {
	max-width: 446px;
	flex-grow: 0;
	flex-shrink: 0;
	/* width: 100%; */
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid var(--color-second);
}

@media screen and (max-width: 991px) {
	.modal-field .column.second {
		display: none;
	}
}

.forgot-link {
	text-align: end;
	color: var(--color-second);
	transition: color .3s;
	font-weight: 500;
	font-size: 14px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.forgot-link:hover {
		color: var(--color-active);
	}
}

.btn-submit {
	width: 100%;
	font-weight: 500;
	color: var(--color-main);
	padding: 11px;
	line-height: 1.125;
	border-radius: var(--border-radius);
	border: none;
	cursor: pointer;
	background: var(--bg-active);
	transition: opacity .3s;
}

@media screen and (min-width: 1025px) {
	.btn-submit:hover {
		opacity: .8;
	}
}

.pay-box {
	display: flex;
	align-items: center;
	gap: 10px 30px;
}

@media screen and (max-width: 390px) {
	.pay-box {
		gap: 10px;
	}
}

.method-pay {
	padding-left: 26px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.method-pay::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: transparent;
	border: 1px solid var(--bg-darkness);
	border-radius: 100%;
	left: 0;
	top: 50%;
	transition: border .3s;
	transform: translate3d(0, -50%, 0);
}

.method-pay::after {
	position: absolute;
	content: '';
	width: 6px;
	height: 6px;
	background-color: var(--color-main);
	border-radius: 50%;
	top: 50%;
	left: 5px;
	transform: translate3d(0, -50%, 0);
	z-index: 2;
	opacity: 0;
}

.method-pay img {
	max-width: 100%;
	height: auto;
}

.item-pay {
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.item-pay:hover .method-pay::before {
		border-color: var(--color-active);
	}
}

.input-pay {
	display: none;
}

.input-pay:checked + .method-pay:after {
	opacity: 1;
}

.input-pay:checked + .method-pay::before {
	border-color: var(--color-active);
	background: var(--color-active);
}

.title-second {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
}

.label-radio-choice {
	display: flex;
	margin-bottom: 10px;
}

.label-radio-choice:last-child {
	margin-bottom: 0;
}

.input-radio-choice {
	display: none;
}

.input-radio-choice:checked + .input-radio-info {
	background: var(--bg-active);
}

.input-radio-choice:checked + .input-radio-info:after {
	opacity: 1;
}

.input-radio-choice:checked + .input-radio-info::before {
	border-color: var(--color-main);
	background: var(--color-main);
}

.input-radio-choice:checked + .input-radio-info .sub,
.input-radio-choice:checked + .input-radio-info .period {
	color: var(--color-main);
}

.input-radio-info {
	cursor: pointer;
	border-radius: 10px;
	padding: 10px 20px 10px 60px;
	display: flex;
	gap: 5px;
	position: relative;
	width: 100%;
	background: var(--bg-main);
	font-family: inherit;
	line-height: 1;
	transition: box-shadow .3s;
}

@media screen and (min-width: 1025px) {
	.input-radio-info:hover {
		box-shadow: inset 0 0 0 2px var(--color-active);
	}
}

@media screen and (max-width: 390px) {
	.input-radio-info {
		padding: 10px 20px 10px 40px;
	}
}

.input-radio-info::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background: transparent;
	border: 1px solid var(--bg-darkness);
	border-radius: 100%;
	left: 20px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

@media screen and (max-width: 390px) {
	.input-radio-info::before {
		left: 10px;
	}
}

.input-radio-info::after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background-color: var(--color-active);
	border-radius: 50%;
	top: 50%;
	left: 26px;
	transform: translate3d(0, -50%, 0);
	z-index: 2;
	opacity: 0;
}

@media screen and (max-width: 390px) {
	.input-radio-info::after {
		left: 16px;
	}
}

.input-radio-info .radio-text {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding-left: 0;
}

.input-radio-info .radio-text::before,
.input-radio-info .radio-text::after {
	display: none;
}

.input-radio-info .title {
	display: block;
	font-weight: 700;
	font-size: 18px;
	color: var(--color-main);
	margin-bottom: 5px;
}

.input-radio-info .price {
	flex-grow: 0;
	flex-shrink: 0;
	margin-left: 3px;
}

.input-radio-info .sup {
	font-weight: 600;
	font-size: 20px;
}

@media screen and (max-width: 390px) {
	.input-radio-info .sup {
		font-size: 16px;
	}
}

.input-radio-info .sub {
	color: var(--color-second);
	font-size: 14px;
	margin-top: 2px;
}

@media screen and (max-width: 390px) {
	.input-radio-info .sub {
		font-size: 12px;
	}
}

.input-radio-info .period {
	display: flex;
	justify-content: flex-end;
	text-transform: uppercase;
	color: var(--color-second);
}

@media screen and (max-width: 390px) {
	.input-radio-info .period {
		font-size: 12px;
	}
}

.price-main {
	font-weight: 800;
	font-size: 30px;
	text-transform: uppercase;
}

@media screen and (max-width: 390px) {
	.price-main {
		font-size: 22px;
	}
}

.label-list {
	margin-top: 30px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.label-list img {
	max-width: 1005;
	height: auto;
}

@media screen and (max-width: 991px) {
	.label-list {
		order: -1;
		margin: 0 0 20px;
	}
}

[data-attr-plan-l] .input-radio-info {
	padding: 12px 20px 12px 60px;
}

@media screen and (max-width: 991px) {
	[data-attr-plan-l] .input-radio-info {
		padding: 17px 20px 17px 40px;
	}
}

@media screen and (max-width: 390px) {
	[data-attr-plan-l] .input-radio-info {
		padding: 12px 12px 12px 40px;
	}
}

[data-attr-plan-l] .price-main {
	font-size: 40px;
}

@media screen and (max-width: 991px) {
	[data-attr-plan-l] .price-main {
		font-size: 30px;
	}
}

@media screen and (max-width: 390px) {
	[data-attr-plan-l] .price-main {
		font-size: 25px;
	}
}

@media screen and (max-width: 991px) {
	[data-attr-plan-l] .sup {
		font-size: 18px;
	}
}

@media screen and (max-width: 390px) {
	[data-attr-plan-l] .sup {
		font-size: 16px;
	}
}

@media screen and (max-width: 991px) {
	[data-attr-plan-l] .input-radio-info::before {
		left: 10px;
	}
	[data-attr-plan-l] .input-radio-info::after {
		left: 16px;
	}
}

select {
	display: none;
	font-family: inherit;
	font-size: inherit;
}

.select2-container--default .select2-selection--single {
	border: none;
	background: var(--bg-main);
	border-radius: var(--border-radius);
	height: 40px;
	display: flex;
	align-items: center;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	flex-shrink: 1;
	flex-grow: 1;
	padding-right: 40px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border: none;
	transform: rotate(-180deg);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	width: 38px;
	flex-shrink: 0;
	flex-grow: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	width: 10px;
	height: 10px;
	margin-left: -5px;
	margin-top: -5px;
	border: none;
	transform: rotate(0);
	transition: transform .3s;
	background-color: var(--color-select-select);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'><path d='M9.84016 2.82423L9.5126 2.49439C9.40951 2.39138 9.27235 2.33463 9.12577 2.33463C8.97926 2.33463 8.84194 2.39138 8.73885 2.49439L5.00224 6.23117L1.26131 2.49024C1.15838 2.38723 1.02107 2.33057 0.87456 2.33057C0.728055 2.33057 0.590655 2.38723 0.487646 2.49024L0.160001 2.81805C-0.0533338 3.03122 -0.0533338 3.37846 0.160001 3.59163L4.61402 8.06167C4.71695 8.1646 4.8541 8.23712 5.00191 8.23712H5.00362C5.1502 8.23712 5.28736 8.16452 5.39029 8.06167L9.84016 3.60375C9.94325 3.50082 9.99984 3.35952 10 3.21301C10 3.06643 9.94325 2.92708 9.84016 2.82423Z' fill='black'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'><path d='M9.84016 2.82423L9.5126 2.49439C9.40951 2.39138 9.27235 2.33463 9.12577 2.33463C8.97926 2.33463 8.84194 2.39138 8.73885 2.49439L5.00224 6.23117L1.26131 2.49024C1.15838 2.38723 1.02107 2.33057 0.87456 2.33057C0.728055 2.33057 0.590655 2.38723 0.487646 2.49024L0.160001 2.81805C-0.0533338 3.03122 -0.0533338 3.37846 0.160001 3.59163L4.61402 8.06167C4.71695 8.1646 4.8541 8.23712 5.00191 8.23712H5.00362C5.1502 8.23712 5.28736 8.16452 5.39029 8.06167L9.84016 3.60375C9.94325 3.50082 9.99984 3.35952 10 3.21301C10 3.06643 9.94325 2.92708 9.84016 2.82423Z' fill='black'/></svg>") center/contain no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-main);
	padding: 0 20px;
}

.select2-results__option--selectable {
	color: var(--color-second);
	background: none;
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 400;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--color-active);
	color: var(--color-main);
}

.select2-dropdown {
	border: none;
	border-radius: var(--border-radius);
	overflow: hidden;
	background: var(--bg-main);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: none;
	padding: 0 20px;
	color: var(--color-main);
	height: 40px;
	border-radius: 8px;
	background-color: var(--bg-darkness);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--color-second);
}

.select2-container--default .select2-results__option--selected {
	color: var(--color-main);
	background: var(--color-active);
}

.wrap-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.col-list {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 80px;
	width: 16.936%;
}

.col-list.second {
	width: 100%;
	max-width: 163px;
	flex-grow: 0;
	flex-shrink: 0;
}

.user-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

@media screen and (max-width: 390px) {
	.user-box {
		gap: 15px;
	}
}

.user-box .ava {
	width: 160px;
	height: 160px;
	border-radius: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	color: var(--color-second);
	background: var(--bg-main);
}

@media screen and (max-width: 390px) {
	.user-box .ava {
		width: 130px;
		height: 130px;
		font-size: 60px;
	}
}

.save-btn {
	cursor: pointer;
	border: none;
	line-height: 1.143;
	background: var(--bg-active);
	border-radius: var(--border-radius);
	padding: 11px 23px;
	font-weight: 500;
	margin-top: 50px;
	color: var(--color-main);
	transition: opacity .3s;
}

@media screen and (min-width: 1025px) {
	.save-btn:hover {
		opacity: .8;
	}
}

@media screen and (max-width: 767px) {
	.save-btn {
		margin-top: 30px;
	}
}

.mask-button {
	position: relative;
}

.mask-button input[type=file] {
	display: none;
}

.mask-input {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--color-second);
	height: 40px;
	border-radius: var(--border-radius);
	position: relative;
	padding: 5px 100px 5px 20px;
	width: 100%;
	background: var(--bg-main);
}

@media screen and (max-width: 390px) {
	.mask-input {
		padding: 5px 80px 5px 10px;
	}
}

.file-wrap {
	display: flex;
	align-items: center;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 14px;
	min-height: 30px;
	padding: 6px 20px;
	background-color: var(--bg-tools);
	color: var(--color-second);
	font-weight: 600;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
	z-index: 2;
	transition: background-color .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.file-wrap:hover {
		color: var(--color-main);
		background: var(--bg-active);
	}
}

@media screen and (max-width: 390px) {
	.file-wrap {
		font-size: 12px;
		padding: 6px 15px;
	}
}

.text-input {
	color: var(--color-second);
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

.select2-container.select2-container--open {
	z-index: 9999;
}

.player-wrap {
	position: relative !important;
}

.video-cols {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 20px;
}

.col-asside { 
	width: 300px;
}

@media screen and (max-width: 1150px) {
	.video-cols {
		flex-direction: column;
	}
	.col-asside { 
		/* display: none; */
		padding-top: 0;
		width: 100%;
	}
}

.asside-link {
	display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.asside-link .table {
	display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 1150px) {
	.asside-link .table {
		flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: space-around;
	}
}
.asside-link .table .asside-thumb:first-child {
	margin-top: 0;
}

@media screen and (max-width: 655px) {
	.asside-link .table .asside-thumb {
		display: none;
	}

	.asside-link .table .asside-thumb:first-child {
		display: block;
	}
}

.asside-link .table .asside-thumb a {
	display: block;
	line-height: 0;
	font-size: 0;
}

.asside-link .table .asside-thumb img {
	width: 300px;
	height: 250px;
}

.asside-thumb {
	margin-top: 30px;
}

@media screen and (max-width: 1150px) {
	.asside-thumb {
		margin-top: 0;
	}
}

.asside-thumb .headline {
	margin-bottom: 15px;
}

.asside-thumb .headline .title {
    font-size: 19px;
}

.asside-thumb .group-grid .th,
.asside-thumb .main-grid .th {
	width: calc((100% / 2) - (((2 - 1) / 2) * var(--flex-gap)));
}

.top-options .buttons-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: flex-start;
	margin: 0 0 15px;
}

.top-options a {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 5px;
}

.link-offer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0;
}

.video-controls .button {
	display: inline-block;
}

.video-controls .button.active {
	background-color: var(--color-active);
	cursor: default;
	pointer-events: none;
}

.video-controls.flex,
.video-controls .flex {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
}

.video-controls.flex {
	margin-bottom: 15px;
	justify-content: space-between;
}

.rating-container {
	position: relative;
}

.rating-container .voters {
	position: absolute;
    bottom: calc(100% + 3px);
    left: 0;
}

.rating-container .disabled {
	cursor: default;
	pointer-events: none;
}

.rating-container .rate-dislike svg {
	transform: rotate(180deg);
}

.btn-favourites .hidden {
	display: none;
}

.btn-favourites svg.icon-playlist,
.btn-favourites svg.icon-heart,
.btn-favourites svg.icon-time {
	font-size: 20px;
}

.button.delete {
	background-color: var(--color-active);
}

.btn-favourites .drop-btn {
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
}

.btn-favourites .drop-btn .icon-arrow-down {
	font-size: 9px;
	transition: transform .3s;
}

.btn-favourites .open-sort .drop-btn .icon-arrow-down {
	transform: rotate(180deg);
}

.btn-favourites .fav-drop a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	font-size: 14px;
}

.btn-favourites .fav-drop li span {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.btn-favourites .fav-drop li span a:last-child {
	padding: 10px 5px;
}

.fancybox-close {
	opacity: 0;
}

.contact-box .hidden {
	display: none;
}

.smileys-bar {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 5px;
	margin-top: -5px;
}

.captcha-control img {
	margin-bottom: 5px;
}

.list-comments {
	margin-top: 15px;
}

.list-comments .image {
	position: relative;
}

.group-grid .hidden,
.main-grid .hidden {
	display: none;
}

.field-error {
	color: red;
	font-size: 12px;
}

.drop_holder {
	position: relative;
}

.drop_holder .drop {
    position: absolute;
    z-index: 10;
    background: var(--bg-tools);
    box-shadow: var(--box-shadow-drop);
    min-width: 170px;
    right: 0;
    border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
    top: calc(100% + 10px);
    max-height: 440px;
    overflow-y: auto;
    opacity: 0;
    transform: translate3d(0, 5%, 0);
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
}

.table-secondary tbody > tr:nth-last-child(2) .drop_holder .drop,
.table-secondary tbody > tr:last-child .drop_holder .drop {
    top: auto;
    bottom: calc(100% + 10px);
}

.drop_holder.open_drop .drop {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

.drop_holder.open_drop .btn-option {
	color: var(--color-active);
}

.drop_holder .drop a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 10px;
    color: var(--color-main);
    transition: background .3s;
    font-weight: 500;
    font-size: 14px;
}

@media screen and (min-width: 1025px) {
    .drop_holder .drop a:hover {
        background: var(--bg-active);
    }
}

.add_payout.contact-form {
	border: none;
	margin-top: 25px;
	display: none;
}

.tabs-content .box.hidden {
	display: none;
}

.no-player {
	position: relative;
}

.no-player::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, 0.7);
}

.no-player img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.no-player .message {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
	z-index: 2;
}

.no-player .message a {
	color: var(--color-active);
	text-decoration: underline;
}

.no-player .message a:hover {
	text-decoration: none;
}

.no-player .message form .button {
	border: none;
	margin-top: 10px;
	cursor: pointer;
}

.table-secondary .drop_holder .drop {
	top: 100%;
}
.table-secondary .drop_holder.open_drop .drop {
	border: 1px solid rgba(var(--bg-rgb-white), 0.05);
}

.list-subscriptions .item .img-holder .image {
	object-fit: cover;
}

.wrapped-group.hidden {
	display: none;
}

.form-upload.hidden {
	display: none;
}

.file-control1 {
	position: relative;
}

.file-control1 .button {
	position: absolute;
    top: 5px;
    left: 5px;
    padding: 10px 8px;
}

.file-control1 .file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.form-upload.uploading {
  height: 45px;
  cursor: wait;
  position: relative !important;
width: calc(100% - 20px);
}
.form-upload.uploading * {
  opacity: 0;
  visibility: hidden;
}
.form-upload.uploading .progressbar,
.form-upload.uploading .progressbar * {
  opacity: 1;
  visibility: visible;
}
.form-upload.uploading-finished {
  cursor: default;
}
form .progressbar {
  position: absolute;
  z-index: 990;
  width: 60%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 5.0rem;
  border: 1px solid rgba(var(--bg-rgb-white), 0.05);
  padding: 0.8rem;
  border-radius: 2.4rem;
  background: #fff;
  height: 25px;
	padding: 0;
	width: 100%;
}
form .progressbar .text {
  position: absolute;
  width: 100%;
  top: 1rem;
  height: 3rem;
  font-size: 2.2rem;
  line-height: 3rem;
  text-align: center;
	height: 25px;
    top: 0;
    font-size: 16px;
    line-height: 23px;
	color: var(--bg-tools);
}
form .progressbar.half-done .text {
  color: #ffffff;
}
form .progressbar .progress {
  width: 0;
  height: 3rem;
  background: var(--bg-tools);
  border-radius: 2rem;
	width: 100%;
	height: 23px;
}

.dashboard_upload-video {
	margin: -10px 0 20px;
}

.wrap-btn-request.dashboard_upload-video .btn {
	width: fit-content;
}

.disabled_link {
	cursor: default !important;
	pointer-events: none !important;
}

.label-list.premium_upgrading {
	flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.stats-bar { 
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	border: 1px solid rgba(var(--border-rgb-burgundy), 0.2);
	border-radius: var(--border-radius);
	background: var(--bg-tools);
}

.stats-bar .stat { 
	width: 33.33%;
	border-right: 1px solid rgba(var(--border-rgb-burgundy), 0.2);
	padding: 16px 12px;
    text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #a08890;
	font-size: 14px;
}

.stats-bar .stat .stat-num {
	font-weight: 700;
	color: #ffd700;
	font-size: 18px;
}

.stats-bar .stat:last-child {
	border: none;
}

/* Telegram strip */
.tg-strip {
	background: var(--bg-tools);
	border-top: 1px solid rgba(var(--border-rgb-burgundy), 0.2);
	border-bottom: 1px solid rgba(var(--border-rgb-burgundy), 0.2);
	padding: 16px 0;
}

.tg-strip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.tg-text {
	font-size: 14px;
	color: var(--color-second);
}

.tg-text span {
	color: var(--color-main);
	font-weight: 500;
}

.tg-btn {
	padding: 8px 20px;
	background: #2AABEE;
	color: #fff;
	font-weight: 500;
	font-size: 13px;
	border-radius: var(--border-radius);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.tg-btn:hover {
	opacity: 0.85;
}

.tg-icon {
	width: 16px;
	height: 16px;
}

@media screen and (max-width: 767px) {
	.tg-strip-inner {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.tg-text {
		font-size: 13px;
	}
}

/* Age verification popup */
body.popup_age {
	height: 100%;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.popup_age-holder {
	display: none;
}

body.popup_age .popup_age-holder {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999999;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	background: rgba(0, 0, 0, 0.85);
}

body.popup_age .popup_age-holder.hidden {
	display: none !important;
}

.popup_age-holder .modal-holder {
	border-radius: var(--border-radius);
	padding: 50px;
	max-width: 800px;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	background-color: var(--bg-main);
	position: relative;
}

@media screen and (max-width: 860px) {
	.popup_age-holder .modal-holder {
		padding: 50px 20px;
	}
}

.age-confirm .row {
	margin-bottom: 70px;
}

@media screen and (max-width: 860px) {
	.age-confirm .row {
		margin-bottom: 27px;
	}
}

.age-confirm .row:last-child {
	margin-bottom: 0;
}

.age-confirm .logo-mod {
	text-align: center;
}

.age-confirm .logo-mod img {
	max-width: 200px;
}

.age-confirm .image {
	text-align: center;
	margin-bottom: 50px;
}

@media screen and (max-width: 860px) {
	.age-confirm .image {
		margin-bottom: 30px;
	}
}

.age-confirm .image img {
	max-width: 180px;
}

@media screen and (max-width: 860px) {
	.age-confirm .image img {
		max-width: 150px;
	}
}

.age-confirm .subtitle {
	text-align: center;
	font-size: 20px;
	padding: 0 20px;
	margin-bottom: 45px;
	color: var(--color-main);
}

@media screen and (max-width: 860px) {
	.age-confirm .subtitle {
		margin-bottom: 25px;
		font-size: 18px;
		padding: 0;
	}
}

.age-confirm .group-btn {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media screen and (max-width: 390px) {
	.age-confirm .group-btn {
		flex-direction: column;
	}
}

.age-confirm .group-btn .item {
	width: 50%;
}

@media screen and (max-width: 390px) {
	.age-confirm .group-btn .item {
		width: 100%;
	}
}

.age-confirm .group-btn .button {
	width: 100%;
	cursor: pointer;
	border: 2px solid var(--bg-darkness);
	background: var(--bg-darkness);
	border-radius: 20px;
	padding: 16px 10px;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--color-main);
	transition: border .3s, background .3s;
	display: inline-block;
	text-align: center;
}

@media screen and (min-width: 1025px) {
	.age-confirm .group-btn .button:hover {
		border-color: var(--color-active);
		background: none;
	}
}

@media screen and (max-width: 860px) {
	.age-confirm .group-btn .button {
		font-size: 18px;
		padding: 17px 10px;
	}
}

.age-confirm .group-btn .button.second {
	background: var(--bg-active);
	border: 2px solid var(--color-active);
}

@media screen and (min-width: 1025px) {
	.age-confirm .group-btn .button.second:hover {
		background: var(--bg-darkness);
		border-color: var(--bg-darkness);
	}
}

.age-confirm .under-text {
	text-align: center;
	font-size: 14px;
	color: var(--color-second);
}

.age-confirm .under-text span {
	color: var(--color-main);
	font-weight: 700;
}

.video-spot {
    display: none;
    position: absolute;
    z-index: 2100;
    text-align: center;
    top: calc(50% - 18px);
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
    .video-spot {
        transform: translate(-50%, -50%) scale(.8);
    }
}

@media screen and (max-width: 620px) {
    .video-spot {
        transform: translate(-50%, -50%) scale(.6);
    }
}

@media screen and (max-width: 480px) {
    .video-spot {
        transform: translate(-50%, -50%) scale(.5);
    }
}

.video-spot .spot-holder {
    width: 300px;
    min-height: 250px;
    border: 5px solid var(--bg-tools);
    background: rgba(94, 94, 94, 0.8);
    border-radius: var(--border-radius);
}

.video-spot .spot-holder .asside-thumb {
	margin-top: 0;
}

.video-spot .spot-holder a {
    display: block;
	line-height: 0;
	font-size: 0;
}

.video-spot .spot-holder a img {
	width: 100%;
	height: auto;
}
.video-spot .btn-play {
    margin-top: 6px;
    background: var(--bg-tools);
    color: var(--color-main);
    font-size: 16px;
    line-height: 19px;
    padding: 8px 15px;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--border-radius);
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
    .video-spot .btn-play:hover {
        background: var(--color-active);
    }
}

.video-spot .btn-play:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent var(--color-main);
    margin: 0 10px 1px 0;
}
.video-spot .btn-close {
    position: absolute;
    width: 28px;
    height: 28px;
    background: var(--bg-tools);
    left: 100%;
    top: 0;
    margin-left: 6px;
    border-radius: var(--border-radius);
    cursor: pointer;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
    .video-spot .btn-close:hover {
        background: var(--color-active);
    }
}

.video-spot .btn-close:after,
.video-spot .btn-close:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 4px;
    height: 20px;
    background: var(--color-main);
    border-radius: var(--border-radius);
}
.video-spot .btn-close:after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.video-spot .btn-close:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}