.header {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("/uploads/template/img/template-header-bg.webp");
	width: 100%;
	padding: 20px 0;
}

.header .header-section {
	height: 140px;
	width: 100%;
	border-radius: 8px;
	background: var(--theme-light-banner-background-first-color);
	background: linear-gradient(90deg, var(--theme-light-banner-background-first-color) 50%, var(--theme-light-banner-background-second-color) 100%);
	position: relative;
	padding: 20px 140px;
	display: flex;
	align-items: start;
	justify-content: center;
	gap: 4px;
	flex-direction: column;
}

.header .header-section .header-section-link {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 8px;
	height: 100%;
	width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header .header-section .header-section-lock {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 8px;
	height: 100%;
	width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header .header-section .header-section-title {
	font-weight: 500;
	color: var(--theme-light-text-color);
	font-size: 36px;
}

.header .header-section .header-section-text {
	color: var(--theme-light-text-darker);
	font-size: 18px;
	font-weight: 400;
}





.sections {
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	align-items: start;
}

.sections > .status {
	display: flex;
	gap: 12px;
	align-items: center;
}

.sections > .status .ip {
	font-size: 24px;
	font-weight: 400;
	color: var(--theme-light-text-color);
	text-transform: uppercase;
	line-height: 17px;
	height: 17px;
}

.sections > .status .ip > .name {
	color: var(--theme-light-text-second-color);
}

.sections > .status .ip > .value {
	font-weight: 500;
}

.sections > .status .monitoring {
	height: 6px;
	border-radius: 3px;
	background-color: #ddd;
	margin-top: 8px;
	width: 240px;
	max-width: 100%;
	overflow: hidden;
}

.sections > .status .monitoring > .progress {
	max-width: 100%;
	height: 100%;
	background: var(--theme-light-progress-background-first-color);
	background: linear-gradient(90deg, var(--theme-light-progress-background-first-color) 0%, var(--theme-light-progress-background-second-color) 100%);
	transition: width 200ms linear 0ms;
}

.sections > .status .players {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 400;
	color: var(--theme-light-text-second-color);
	line-height: 12px;
	height: 12px;
}




.sections > .selector > .selector-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sections > .selector > .selector-wrapper > ul {
	display: flex;
	gap: 20px;
	align-items: start;
	position: relative;
}

.sections > .selector > .selector-wrapper > ul > li {
	display: flex;
	align-items: center;
	height: 56px;
	border-radius: 8px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 20px;
	position: relative;
	color: var(--theme-light-text-second-color);
	gap: 8px;
	transition: border 200ms linear 0ms;
	transition-property: background-color, border;
	border: 1px solid rgba(0,0,0,0.08);
	background-color: transparent;
}

.sections > .selector > .selector-wrapper > ul > li.active {
	background-color: var(--theme-light-button-background-color);
	border: 1px solid var(--theme-light-button-background-color);
}

.sections > .selector > .selector-wrapper > ul > li > .image {
	width: 32px;
	height: 32px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.sections > .selector > .selector-wrapper > ul > li > .wrapper {
	width: calc(100% - 58px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 32px;
	gap: 4px;
}

.sections > .selector > .selector-wrapper > ul > li > .wrapper > .title {
	color: var(--theme-light-text-color);
	font-weight: 500;
	line-height: 14px;
}

.sections > .selector > .selector-wrapper > ul > li > .wrapper > .text {
	color: rgba(0,0,0,0.4);
	font-size: 14px;
	line-height: 15px;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	opacity: 0;
	background-color: var(--theme-light-footer-background-color);
	padding: 8px 12px;
	border-radius: 8px;
	transition: opacity 200ms linear 0ms;
	pointer-events: none;
	z-index: 2;
}

.sections > .selector > .selector-wrapper > ul > li:hover > .wrapper > .text {
	color: rgba(0,0,0,0.6);
	opacity: 1;
}



.sections > .selector > .selector-wrapper > ul.second-selector {
	margin-left: 56px;
}

.sections > .selector > .selector-wrapper > ul.second-selector:before {
	display: block;
	content: "";
	width: 48px;
	height: 48px;
	position: absolute;
	right: 100%;
	top: 0;
	background-image: url("/uploads/template/img/icons/arrow-right-black.webp");
	background-repeat: no-repeat;
	background-position: center;
}

.sections > .selector > .selector-wrapper > ul.second-selector > li {
	padding: 0 12px;
	height: 48px;
	position: fixed;
	top: -9999px;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0);
	transition: border 100ms linear 0ms;
	transition-property: background-color, border, transform;
	border: 1px solid rgba(0,0,0,0.08);
	background-color: transparent;
}

.sections > .selector > .selector-wrapper > ul.second-selector > li.visible {
	position: relative;
	top: 0;
	left: 0;
	pointer-events: auto;
	opacity: 1;
	transform: scale(100%);
}

.sections > .selector > .selector-wrapper > ul.second-selector > li.active {
	border: 1px solid var(--theme-light-button-background-color);
	background-color: var(--theme-light-button-background-color);
}

.sections > .selector > .selector-wrapper > ul.second-selector > li > .image {
	width: 28px;
	height: 28px;
}

.sections > .selector > .selector-wrapper > ul.second-selector > li > .wrapper > .title {
	font-size: 16px;
}

/*.sections > .selector > .selector-wrapper {
	display: flex;
	align-items: center;
	height: 56px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0 24px;
	cursor: pointer;
	font-size: 20px;
	position: relative;
	user-select: none;
}

.sections > .selector > .selector-wrapper > .selector-separator {
	display: block;
	background-image: url("/uploads/template/img/icons/arrow-right-black.webp");
	width: 10px;
	height: 18px;
	opacity: 0.2;
	margin: 0 24px;
}

.sections > .selector > .selector-wrapper > .selector-section,
.sections > .selector > .selector-wrapper > .selector-category {
	color: var(--theme-light-text-second-color);
	display: flex;
	gap: 8px;
	align-items: center;
}

.sections > .selector > .selector-wrapper > .selector-section > .image,
.sections > .selector > .selector-wrapper > .selector-category > .image {
	width: 32px;
	height: 32px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


.sections > .selector > .selector-wrapper > .selector-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	pointer-events: none;
	z-index: 3;
}

.sections > .selector > .selector-wrapper > .selector-dropdown > ul > li > ul,
.sections > .selector > .selector-wrapper > .selector-dropdown > ul {
	background-color: var(--theme-light-background-color);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	padding: 12px 0;
	width: 304px;
	max-width: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms linear 0ms;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul.active,
.sections > .selector > .selector-wrapper > .selector-dropdown ul > li.active > ul{
	opacity: 1;
	pointer-events: auto;
}

.sections > .selector > .selector-wrapper > .selector-dropdown > ul > li > ul {
	position: absolute;
	left: calc(100% + 8px);
	top: -12px;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li {
	display: flex;
	align-items: start;
	padding: 12px 24px;
	position: relative;
	gap: 8px;
	cursor: pointer;
	transition: background-color 200ms linear 0ms;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li:hover,
.sections > .selector > .selector-wrapper > .selector-dropdown ul > li.active {
	background-color: var(--theme-light-button-background-color);
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li > .image {
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li > .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.2;
	height: 32px;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li > .wrapper {
	width: calc(100% - 58px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 32px;
	gap: 4px;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li .title {
	color: var(--theme-light-text-color);
	font-weight: 500;
	line-height: 14px;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li .text {
	color: rgba(0,0,0,0.4);
	font-size: 14px;
	line-height: 15px;
}

.sections > .selector > .selector-wrapper > .selector-dropdown ul > li.active .text,
.sections > .selector > .selector-wrapper > .selector-dropdown ul > li:hover .text {
	color: rgba(0,0,0,0.6);
}*/



.items-container {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: start;
	padding: 20px 0;
}

.items-container > .item {
	padding: 40px;
	min-height: 400px;
	background: var(--theme-light-item-background-first-color);
	background: linear-gradient(125deg, var(--theme-light-item-background-first-color) 5%, var(--theme-light-item-background-second-color) 70%);
	border-radius: 8px;
	position: fixed;
	top: -9999px;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0);
	transition: transform 100ms linear 0ms;
	height: 100%;
}

.items-container > .item.visible {
	position: relative;
	top: 0;
	left: 0;
	pointer-events: auto;
	opacity: 1;
	transform: scale(100%);
}

.items-container > .item:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--theme-light-item-hover-background-first-color);
	background: linear-gradient(125deg, var(--theme-light-item-hover-background-first-color) 0%, var(--theme-light-item-hover-background-second-color) 100%);
	opacity: 0;
	transition: opacity 200ms linear 0ms;
	border-radius: inherit;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

.items-container > .item:hover:after {
	opacity: 1;
}

.items-container > .item > .item-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
}

.items-container > .item > .item-wrapper > .title {
	font-size: 30px;
	font-weight: 500;
	color: var(--theme-light-text-color);
	padding-bottom: 12px;
}

.items-container > .item > .item-wrapper > .text {
	color: var(--theme-light-text-second-color);
	font-size: 14px;
	min-height: 17px;
}

.items-container > .item > .item-wrapper > .middle-wrapper {
	padding-top: 8px;
	display: flex;
	gap: 20px;
	align-items: center;
}

.items-container > .item > .item-wrapper > .middle-wrapper > .price {
	font-size: 36px;
	font-weight: 500;
	color: var(--theme-light-text-color);
	gap: 4px;
	display: flex;
	align-items: end;
}

.items-container > .item > .item-wrapper > .middle-wrapper > .price .icon {
	margin-bottom: 8px;
}

.items-container > .item > .item-wrapper > .middle-wrapper > .old-price {
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 26px;
	border-radius: 13px;
	color: #fff;
	background-color: #ff6a43;
	font-size: 14px;
	padding: 0 12px;
	position: relative;
	gap: 4px;
}

.items-container > .item > .item-wrapper > .middle-wrapper > .old-price:after {
	width: calc(100% - 20px);
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	height: 1px;
	background-color: #fff;
}

.items-container > .item > .item-wrapper > .middle-wrapper > .old-price .icon {
	width: 8px;
	height: 10px;
	filter: invert(1) brightness(2);
}

.items-container > .item > .item-wrapper > .middle-wrapper > .image {
	margin-left: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 64px;
	height: 64px;
}


.items-container > .item > .item-wrapper > .commands {
	margin-top: 12px;
	height: 104px;
	margin-bottom: 12px;
}

.items-container > .item > .item-wrapper > .commands > .command,
.items-container > .item > .item-wrapper > .commands > .more {
	line-height: 20px;
	font-size: 16px;
	display: flex;
	gap: 4px;
	color: var(--theme-light-text-color);
	flex-wrap: wrap;
}

.items-container > .item > .item-wrapper > .commands > .command {
	display: block;
	word-break: break-word;
}

.items-container > .item > .item-wrapper > .commands > .command > .name {
	color: var(--theme-light-text-lighter);
	transition: color 200ms linear 0ms;
}

.items-container > .item > .item-wrapper > .commands > .command > .name,
.items-container > .item > .item-wrapper > .commands > .command > .text {
	display: inline;
}

.items-container > .item > .item-wrapper > .commands > .more {
	color: var(--theme-light-text-second-color);
	transition: color 200ms linear 0ms;
	cursor: pointer;
	padding-top: 8px;
}

.items-container > .item:hover > .item-wrapper > .commands > .command > .name {
	/*color: #618731;*/
}

.items-container > .item:hover > .item-wrapper > .commands > .more {
	color: var(--theme-light-text-second-color);
}

.items-container > .item > .item-wrapper > .btn {
	width: 100%;
	display: flex;
	font-weight: 500;
	font-size: 18px;
	margin-top: auto;
}

.items-container > .item:hover > .item-wrapper > .btn {
	background-color: rgba(0,0,0,0.4);
	color: #fff;
}




.modal[data-id="about-item"] .modal-body {

}

.modal[data-id="about-item"] .modal-body > .middle-wrapper {
	display: flex;
	gap: 20px;
	align-items: start;
}

.modal[data-id="about-item"] .modal-body > .middle-wrapper > .about-wrapper {
	font-size: 16px;
	padding: 6px;
	background-color: #1e0f1e;
	color: #a8a8a8;
	border: 3px solid #2c0862;
	position: relative;
	box-shadow: 0 3px 0 0 #1e0f1e, 0 -3px 0 0 #1e0f1e, -3px 0 0 0 #1e0f1e, 3px 0 0 0 #1e0f1e;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: calc(100% - 140px);
	overflow: auto;
	scrollbar-width: thin;
	max-height: calc(100vh - 460px);
}

.modal[data-id="about-item"] .modal-body .middle-wrapper {
	/*display: grid;
	grid-gap: 20px;
	grid-template-columns: calc(100% - 120px) 100px;
	align-items: start;*/
}

.modal[data-id="about-item"] .modal-body .text {
	line-height: 20px;
	color: var(--theme-dark-text-color);
	word-wrap: break-word;
}

.modal[data-id="about-item"] .modal-body .text:empty {
	display: none;
}

.modal[data-id="about-item"] .modal-body .middle-wrapper .text ul {
	padding-top: 8px;
}

/*.modal[data-id="about-item"] .modal-body .middle-wrapper .text ul li::before {
	content: "•";
	margin-right: 4px;
}*/


.modal[data-id="about-item"] .modal-body .middle-wrapper .image {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 120px;
	height: 120px;
	display: block;
}

.modal[data-id="about-item"] .modal-body .commands {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/*box-shadow: 0 3px 0 0 #25025c, 0 -3px 0 0 #25025c, -3px 0 0 0 #25025c, 3px 0 0 0 #25025c;*/
}

/*.modal[data-id="about-item"] .modal-body .commands:before,
.modal[data-id="about-item"] .modal-body .commands:after {
	content: "";
	position: absolute;
	display: block;
	pointer-events: none;
	box-sizing: border-box;
}

.modal[data-id="about-item"] .modal-body .commands:before {
	border-top: 3px solid #290560;
	border-bottom: 3px solid #290560;
	width: 100%;
	height: calc(100% + 6px);
	left: 0;
	top: -3px;
}

.modal[data-id="about-item"] .modal-body .commands:after {
	border-left: 3px solid #290560;
	border-right: 3px solid #290560;
	width: calc(100% + 6px);
	height: 100%;
	top: 0;
	left: -3px;
}*/

.modal[data-id="about-item"] .modal-body .commands {

}

.modal[data-id="about-item"] .modal-body .commands > .command {
	display: block;
	/*color: var(--theme-light-text-color);*/
}

/*.modal[data-id="about-item"] .modal-body .commands > .command > .name {
	color: var(--theme-light-text-lighter);
}*/

.modal[data-id="about-item"] .modal-body .commands > .command > .name,
.modal[data-id="about-item"] .modal-body .commands > .command > .text {
	display: inline;
}

.modal[data-id="about-item"] .modal-body .commands > .command > .text {
	margin-left: 4px;
}

.modal[data-id="about-item"] .modal-footer {
	justify-content: space-between;
}

.modal[data-id="about-item"] .modal-footer > .price-block {
	display: flex;
	align-items: center;
	gap: 20px;
}

.modal[data-id="about-item"] .modal-footer > .price-block > .price {
	font-size: 36px;
	font-weight: 500;
	color: var(--theme-light-text-color);
	display: flex;
	gap: 8px;
	align-items: center;
}

.modal[data-id="about-item"] .modal-footer > .price-block > .price .icon {
	transform: translateY(3px);
}

.modal[data-id="about-item"] .modal-footer > .price-block > .old-price {
	font-weight: 500;
	display: flex;
	align-items: center;
	height: 26px;
	border-radius: 13px;
	color: #fff;
	background-color: #ff6a43;
	font-size: 14px;
	padding: 0 12px;
	position: relative;
	gap: 4px;
}

.modal[data-id="about-item"] .modal-footer > .price-block > .old-price:after {
	width: calc(100% - 20px);
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	height: 1px;
	background-color: #fff;
}

.modal[data-id="about-item"] .modal-footer > .price-block > .old-price .icon {
	width: 8px;
	height: 10px;
	filter: invert(1) brightness(2);
}

.modal[data-id="about-item"] .modal-footer .btn {
	gap: 8px;
	padding: 0 24px;
}

.modal[data-id="about-item"] .modal-footer .btn .icon {
	transform: translateY(1px);
}




.modal[data-id="buy-item"] .modal-header > .image {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: bottom;
	margin-right: 8px;
}

.modal[data-id="buy-item"] .modal-header > .title {
	display: inline;
}

.modal[data-id="buy-item"] [data-amount-increase] {
	cursor: pointer;
	pointer-events: auto;
}

.modal[data-id="buy-item"] .icon[data-icon="user"],
.modal[data-id="buy-item"] .icon[data-icon="wallet"],
.modal[data-id="buy-item"] .icon[data-icon="discount"],
.modal[data-id="buy-item"] .icon[data-icon="caret-down"] {
	opacity: 0.16;
}

.modal[data-id="buy-item"] .modal-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.modal[data-id="buy-item"] .methods {
	width: 100%;
	border-radius: 8px;
	background-color: var(--theme-light-input-background-color);
	border: 2px solid transparent;
	height: 52px;
	font-size: 20px;
	transition: border 200ms linear 0ms;
	transition-property: border, height;
	overflow: hidden;
}

.modal[data-id="buy-item"] .methods.active {
	height: auto;
	overflow: unset;
	border: 2px solid var(--theme-light-input-border-color);
}

.modal[data-id="buy-item"] .methods.success {
	border-color: #ddffb5;
}

.modal[data-id="buy-item"] .methods.error {
	border-color: #ff6a43;
}

.modal[data-id="buy-item"] .methods > .selector {
	width: 100%;
	height: 48px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0 8px;
	gap: 8px;
	font-weight: 300;
	color: rgba(0,0,0,0.2);
	transition: color 200ms linear 0ms;
}

.modal[data-id="buy-item"] .methods.active > .selector {
	font-weight: 400;
}

.modal[data-id="buy-item"] .methods > .selector > .selector-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal[data-id="buy-item"] .methods > .selector > .selector-selected {
	margin-left: auto;
	height: 32px;
	width: 44px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
}

.modal[data-id="buy-item"] .methods > .selector > .selector-caret {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 200ms linear 0ms;
}

.modal[data-id="buy-item"] .methods.animation-open > .selector > .selector-caret,
.modal[data-id="buy-item"] .methods.active:not(.animation-open) > .selector > .selector-caret {
	transform: rotate(180deg);
}

.modal[data-id="buy-item"] .methods.animation-close > .selector > .selector-caret {
	transform: rotate(0) !important;
}



.modal[data-id="buy-item"] .methods > .methods-list {
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	align-items: start;
	grid-gap: 8px;
}

.modal[data-id="buy-item"] .methods > .methods-list > .method {
	height: 80px;
	border-radius: 8px;
	background-color: rgba(0,0,0,0.02);
	cursor: pointer;
	transition: background-color 200ms linear 0ms;
}

.modal[data-id="buy-item"] .methods > .methods-list > .method:hover {
	background-color: rgba(0,0,0,0.04);
}

.modal[data-id="buy-item"] .methods > .methods-list > .method > .method-image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	padding: 8px;
	background-origin: content-box;
}

.modal[data-id="buy-item"] .modal-footer {
	justify-content: space-between;
}

.modal[data-id="buy-item"] .modal-footer .btn {
	width: 200px;
	max-width: 100%;
}

.modal[data-id="buy-item"] .modal-footer > .price-block {
	display: flex;
	flex-direction: column;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .discount {
	font-size: 18px;
	font-weight: 400;
	color: #ff6a43;
	display: flex;
	align-items: center;
	line-height: 20px;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .discount > .discount-value {
	margin-left: 4px;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .discount > .icon {
	width: 12px;
	height: 12px;
	margin-left: 2px;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .price {
	font-size: 30px;
	font-weight: 400;
	color: #bcbcbc;
	display: flex;
	align-items: center;
	line-height: 32px;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .price > .price-value {
	color: var(--theme-light-text-color);
	font-weight: 500;
	margin-left: 12px;
}

.modal[data-id="buy-item"] .modal-footer > .price-block > .price .icon {
	transform: translateY(2px);
	margin-left: 6px;
}

.modal[data-id="buy-item"] .input-alert {
	font-weight: 500;
	font-size: 14px;
	display: none;
	color: #8fc052;
}

.modal[data-id="buy-item"] .input-alert.error {
	color: #ff6a43;
}