/* 
	Скрипты и плагины (его производные), каскадные таблицы и веб-элементы разработаны 
	для проекта NNS, и принадлежат  его авторам.
	Заимствованные элементы (фрагменты) приналежат соответствующим авторам. 

	Копирайт от 20 февраля 2024 г. 
	Если не краб, не используй данную наработку для себя.
*/
/* Корневые стили */
:root {
	--color-transparent-light: rgba(255, 255, 255, 0.1);
	--color-transparent-dark: rgba(0, 0, 0, 0.2);
	--color-transparent-halfdark: rgba(0, 0, 0, 0.6);
	--color-transparent-halflight: rgba(255, 255, 255, 0.4);
	--color-transparent-halfred: rgba(231, 77, 60, 0.6);

	--color-standart-white: #fff;
	--color-standart-background: #0f0f0f;
	--color-standart-black: #1f2021;
	--color-standart-green: #3ec24f;
	--color-standart-darkgreen: #1e5c20;;
	--color-standart-red: #E74C3C;
	--color-standart-darkred: #891919;
	--color-standart-blue: #3163ee;
	--color-standart-yellow: #FCF153;
	--color-standart-pink: #FF57EE;

	--color-border-black: #1f2021;

	--color-social-vk: #0077ff;
	--color-social-discord: #7289da;
	--color-social-telegram: #24a1de;
	--color-social-boosty: #f15f2c;
	--color-social-nitro: #ff6cfb;

	--effect-shine: linear-gradient(120deg, transparent, var(--color-transparent-halflight), transparent);

	--transition-standart-all: all .2s ease-out;
	--transition-effect-shine: all 0.65s ease-in-out;
}

/* Медиа-запросы */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/ROBOTO-REGULAR.TTF') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/ROBOTO-LIGHT.TTF') format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/ROBOTO-REGULAR.TTF') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/ROBOTO-MEDIUM.TTF') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/ROBOTO-BOLD.TTF') format('truetype');
    font-weight: bold;
}
@font-face {
	font-family: Minecraft;
	src: url('../fonts/MINECRAFT.TTF') format('truetype');
    font-weight: normal;
}
/* Ключевые кадры анимации */
@keyframes shineBtnToBuy {
	0% {
		left: -100%;
		transition-property: left;
   }
	11.50%, 100% {
		left: 100%;
		transition-property: left;
   }
}
@keyframes blockEnterPage {
	0%, 10% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
		scale: 0.9;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}
@keyframes elementsFadeInOut {
	to {opacity: 1;}
    from {opacity: 0;}
}
@keyframes alertEnterPage {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	10% {
		opacity: 1;
		transform: translateY(0px);
	}
	90% {
		opacity: 1;
		transform: translateY(0px);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}


/* Панель прокрутки */
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar {
	width: 10px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--color-transparent-light);
}

/* Дополнительные стили */
.cl {clear: left;}
.cr {clear: right;}
.fl {float: left;}
.fr {float: right;}
.tl {text-align: left;}
.tr {text-align: right;}

@media (max-width: 1280px) {
	/* Стили для экранов шириной до 768px */
	.header-container {
		width: auto !important;
		padding: 30px 40px !important;
	}
	.header_profile_container .profile_content {
		display: none;
	}
	.header_profile_container {
		padding: 0px 10px !important;
	}
	.header_menu a.header_menu_el {
		font-size: 12px !important;
	}
	.header_profile_container_btn {
		display: none !important;
	}
	.main_big_message {
		font-size: 30px !important;
	}
	.main_small_message {
		width: fit-content !important;
		font-size: 15px !important;
	}
	.main-segment-wrap {
		padding: 0px 40px !important;
	}
	.main_descriptions {
		font-size: 15px !important;
	}
	.header_profile .header_profile_link {
		padding: 0px !important;
        width: 50px !important;
        justify-content: center !important;
		& span {
			display: none;
		}
		& svg {
			position: inherit !important;
			right: 0px !important;
		}
	}
	.main-segment-wrap  {
		width: inherit !important;
	}
	.main_wrap_block h2 {
		font-size: 14px !important;
		margin-left: 10px !important;
	}
	.main_side_block {
		display: none;
	}
	.main_wrap.double_wrap .main_wrap_block {
		width: fit-content !important
	}
	.main-segment-wrap.page .main_wrap_header {
		width: inherit !important;
	}
	.footer-segment-wrap {
		width: inherit !important;
		flex-direction: column;
		align-items: center;
	}
	.footer_left-bl, .footer_right-bl {
		text-align: center !important;
		height: 100px !important;
	}
	.modal-default-content {
		scale: 0.7;
	}
  }

/* Генеральные стили */
html {
	scroll-behavior: smooth;
	padding: 0px;
	margin: 0px;
}
body {
	background-color: var(--color-standart-background);
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	margin: 0px;
	overflow-y: scroll;
	text-align: center;
}
body.static {overflow: hidden;}
a {
	font-family: Roboto;
	font-size: 14px;
	text-decoration: none;
}
.btn-default {
    display: inline-flex;
	min-height: 50px;
	line-height: 50px;
    padding: 0px 30px;
    border-radius: 30px;
	border: none;
	background: none;
    align-items: center;
    color: var(--color-transparent-halflight);
    transition: var(--transition-standart-all);
    cursor: pointer;
	font-size: 14px;
	user-select: none;
	& svg {
		fill: var(--color-transparent-halflight);
		transition: var(--transition-standart-all);
		margin-left: 10px;
	}
}
.btn-default:hover {
	color: var(--color-standart-white);
	& svg {
		fill: var(--color-standart-white);
	}
}
.btn-default.accent {
	background: var(--color-standart-darkgreen);
	transition: var(--transition-standart-all);
	&:hover {
		background: var(--color-standart-green);
	}
	&.disabled {
		background: var(--color-border-black);
		cursor: not-allowed;
	}
	&.disabled:hover {
		background: var(--color-border-black);
		color: var(--color-transparent-halflight);
	}
}
input, textarea {
	width: -webkit-fill-available;
    border-radius: 20px;
    padding: 20px;
    outline: none;
	border: none;
    background: var(--color-transparent-halfdark);
	color: var(--color-standart-white);
	resize: none;
	transition: var(--transition-standart-all);
	font-family: Arial;
	font-size: 14px;
	&:focus {
		background: var(--color-transparent-dark);
	}
}
.spinner {
	--color: white;
	--size-mid: 6vmin;
	--size-dot: 1.5vmin;
	--size-bar: 0.4vmin;
	--size-square: 3vmin;
	
	display: block;
	position: relative;
	width: 50%;
	display: grid;
	place-items: center;
}

.spinner::before,
.spinner::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
}
.spinner::before,
.spinner::after {
	width: var(--size-dot);
	height: var(--size-dot);
	background-color: var(--color-standart-background);
	border-radius: 50%;
	opacity: 0;
	animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}

.spinner::after {
	animation-delay: 0.3s;
}

@keyframes loader-2 {
	0%, 80%, 100% {
		opacity: 0;
	}
	
	33% {
		opacity: 1;
	}
	
	0%, 100% {
		transform: translateX(-4vmin);
	}
	
	90% {
		transform: translateX(4vmin);
	}
}


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

/* Идентификаторы */
#header {
	width: 100%;
	margin: 0 auto;
	z-index: 30;
}
#main {
	height: auto;
	padding: 0;
}
#footer {
	position: relative;
}

/* Основные стили блоков */
.loaded_animation {
	animation: blockEnterPage 0.5s ease forwards;
	animation-iteration-count: 1;
	animation-range-start: 100px;
}
.background-container-up {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	background: url("../images/background.jpg") top center no-repeat;
	background-size: cover;
	&.dark {
		background-image: url("../images/background_dark.jpg") !important;
	}
	&.grayscape {
		background-image: url("../images/background_sad.jpg") !important;
	}
}
.content-container .content-alert {
    position: fixed;
    left: 0;
    right: 0;
    top: 130px;
    width: 340px;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    color: var(--color-standart-white);
    border: 1px solid var(--color-transparent-light);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 20;
	animation: alertEnterPage 4s forwards;
}
/* Верхний блок */
.header {
    position: fixed;
	top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: var(--transition-standart-all);
	border-bottom: 1px solid transparent;
	z-index: 1000;
}
/* Стили заголовка при прокрутке страницы */
.header.fixed {
	border-bottom: 1px solid var(--color-transparent-light);
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.header-container {
	position: relative;
	display: flex;
	justify-content: space-between;
    height: 50px;
    padding: 30px 0;
    font-family: 'Roboto';
    color: var(--color-standart-white);
	width: 1200px;
	margin: 0 auto;
}
.header_blur_circle {
	width: 500px;
	height: 500px;
	border-radius: 250px;
}
.header_menu {
	position: absolute;
    margin: auto 0;
    left: 0;
    right: 0;
}
.header_title, .header_profile {
	position: relative;
	bottom: 0px;
	z-index: 10;
}
.header_title .logotype {
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 42px;
    height: 42px;
	border-radius: 10px;
	background-size: 100%;
	transition: transform 0.1s linear;
	cursor: pointer;
	user-select: none;
	& img {
		width: 42px;
		position: absolute;
    	bottom: 0;
		left: 0;
	}
}
.header_title .logotype:active {
	scale: 90%;
	transition: var(--transition-standart-all);
}
.header_logo-text {
	display: inline-block;
	margin: 0 0 0 10px;
}
.header_menu a.header_menu_el {
	display: inline-flex;
	align-items: center;
	color: var(--color-transparent-halflight);
	font-family: 'Roboto';
	font-size: 16px;
	transition: .2s ease-out;
	line-height: 50px;
	font-weight: 400;
	padding: 0 20px;
	border-radius: 30px;
	&:hover {
		color: var(--color-standart-white);
	}
	&.selected {
		color: var(--color-standart-white);
		background: var(--color-transparent-light);
	}
}

.header_profile {
	display: flex;
	gap: 10px;
}
.header_profile .header_profile_link {
    display: flex;
	position: relative;
    height: 50px;
	padding: 0px 60px 0px 20px;
    transition: .2s ease-out;
    line-height: 40px;
    background: var(--color-transparent-light);
	color: var(--color-transparent-halflight);
    border-radius: 30px;
    align-items: center;
	& svg {
		position: absolute;
		right: 20px;
		fill: var(--color-transparent-halflight);
		transition: var(--transition-standart-all);
	}
}
.header_profile .header_profile_link:hover {
	color: var(--color-standart-white);
	& svg {
		right: 15px;
		fill: var(--color-standart-white);
	}
}
.header_profile_container {
    gap: 15px;
	display: flex;
    height: 50px;
    padding: 0px 20px;
    transition: .2s ease-out;
    line-height: 40px;
    background: var(--color-standart-white);
    color: var(--color-standart-background);
    border-radius: 30px;
    align-items: center;
	cursor: pointer;
	user-select: none;
	&:active {scale: 0.95;}
	& .profile_avatar img {
		border-radius: 5px;
	}
	& .profile_content {
    	text-align: left;
        line-height: normal;
        min-width: 120px;
		& .nickname {
			font-size: 14px;
		}
		& .description {
			font-size: 12px;
			color: var(--color-transparent-halflight);
			&.nonallowed {
				color: var(--color-standart-red);
			}
			&.limited {
				color: var(--color-transparent-halfdark);
			}
			&.allowed {
				color: var(--color-transparent-halfdark);
			}
			&.pending {
				color: var(--color-transparent-halfdark);
			}
		}
	}
}
.header_profile_container_btn {
	display: flex;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	border-radius: 25px;
	background: var(--color-transparent-light);
	transition: var(--transition-standart-all);
	& svg {
		fill: var(--color-transparent-halflight);
	}
	&:hover {
		scale: 1.05;
		background: var(--color-standart-red);
		& svg {
			fill: var(--color-standart-white);
		}
	}
	&:active {scale: 0.95;}
}

/* Основной центральный (главный) блок */
.main-segment {
	position: relative;
	opacity: 0;
	animation: elementsFadeInOut 2s forwards;
	animation-timeline: view();
	animation-range: entry 100px;
	&:not(.first) {
		padding: 40px 0;
	}
	&.streamers-block {
		background: url(../images/background_streamers.jpg) top center no-repeat;
	}
}
.main-segment.first {
	display: flex;
    position: relative;
    min-height: 100vh;
	z-index: 10;
}
.main-segment-wrap {
	margin: auto;
	width: 1200px;
	align-items: center;
    justify-content: center;
	&.wrap_profile {
		width: 700px;
	}
}
.main-segment-header {
	color: var(--color-standart-white);
	font-weight: 500;
	font-size: 25px;
	text-transform: uppercase;
	text-align: left;
	margin-bottom: 20px;
}
.main-segment .main_scroll_btn {
	position: absolute;
	left: 0;
    right: 0;
	bottom: 15vh;
	z-index: 1;
}
.main-segment .main_btn_gotobuy {
	position: absolute;
	bottom: -15vh;
	animation: arrowToBuyMove 2s ease-in-out infinite;
	z-index: 1;
}
.main-segment .main_btn_gotobuy svg {
	fill: var(--color-standart-white);
}
.main_big_message {
	position: relative;
	margin-top: -20vh;
	font-size: 50px;
	font-weight: 800;
	color: var(--color-standart-white);
	user-select: none;
	text-transform: uppercase;
	animation: blockEnterPage 1s ease forwards;
	animation-iteration-count: 1;
	transition: var(--transition-standart-all);
}
.main_big_message span.gradient {
	background: linear-gradient(45deg, #ffd300, #f8676e, #ff9af6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.main_big_message span.gradient.sad {
	background: linear-gradient(45deg, #383838, #676767, #777777);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.main_big_message div {
	position: absolute;
	font-family: 'Lumios Marker';
	font-size: 100px;
	font-weight: 200;
	z-index: 2;
	text-transform: initial;
}
.main_small_message {
	width: 960px;
	margin: 50px auto 0 auto;
	font-family: 'Roboto';
	font-size: 20px;
	font-weight: 300;
	color: var(--color-standart-white);
	animation: blockEnterPage 2s ease forwards;
	animation-iteration-count: 1;
	transition: var(--transition-standart-all);
}
.main-downbelow {
	position: absolute;
    left: 0;
    right: 0;
    bottom: 20vh;
    margin: 180px auto 0 auto;
}
.main_btns_area {
	position: relative;
	display: inline-flex;
	justify-content: center;
	animation: blockEnterPage 3s ease forwards;
	animation-iteration-count: 1;
}
.main_btns_area a {
	display: inline-block;
	margin: 0 10px;
	text-transform: uppercase;
}
.main_btns_area a.btn {
	display: flex;
    transition: .2s ease-out;
    border-radius: 40px;
	background: var(--color-transparent-light);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}
.main_btns_area a.btn svg {
	fill: var(--color-standart-darkgreen);
}
.main_btns_area .buy-access {
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0px 30px;
	height: 65px;
	line-height: 65px;
	background: var(--color-standart-green);
	color: var(--color-standart-darkgreen);
	font-size: 18px;
	font-weight: 600;
	border-radius: 40px;
	transition: .3s ease-out;
	border: none;
	cursor: pointer;
	&.btn-done {
		cursor: default;
		background: var(--color-transparent-light);
	}
	&:hover {
		background: var(--color-standart-green);
		color: var(--color-standart-darkgreen);
		scale: 1.05;
		box-shadow: 0px 0px 50px var(--color-standart-green);
	}
	&:active {
		scale: 95%;
	}
	&.disallow {
		background: var(--color-standart-black);
		color: var(--color-transparent-halflight);
		box-shadow: none;
		scale: initial;
		cursor: not-allowed;
	}
	&.disallow svg {
		fill: var(--color-transparent-halflight);
	}
}
.main_btns_area .buy-access svg {
	fill: var(--color-standart-darkgreen);
	margin-left: 20px;
	transition: .3s ease-out;
}
.main_btns_area .buy-access.btn-with-shine:hover svg {fill: var(--color-standart-darkgreen);}
.main_btns_area .buy-access.btn-with-shine {
	&::before {
		left: -100%;
		animation: shineBtnToBuy 5s ease-in-out infinite;
		animation-delay: 2s;
	}
}
.main_descriptions {
	margin: 30px 0 0 0;
	font-size: 20px;
    font-weight: 300;
	color: var(--color-standart-white);
	animation: blockEnterPage 3s ease forwards;
	animation-iteration-count: 1;
}
.main_wrap {
	display: flex;
	position: relative;
}
.main_wrap.double_wrap .main_wrap_block {width: calc(100% - 394px);}
.main_wrap_header span {
	font-size: 32px;
	font-weight: 600;
	color: var(--color-standart-white);
	text-transform: uppercase;
	animation: blockEnterPage 0.5s ease forwards;
	animation-iteration-count: 1;
	animation-range-start: 100px;
	user-select: none;
}
.main_wrap_header_btn {
    display: inline-flex;
    position: absolute;
	right: 0;
	background: var(--color-transparent-dark);
	padding: 10px 20px;
	border-radius: 30px;
	align-items: center;
	color: var(--color-transparent-halflight);
	transition: var(--transition-standart-all);
	border: none;
	cursor: pointer;
	& svg {
		fill: var(--color-transparent-halflight);
		transition: var(--transition-standart-all);
		margin-right: 10px;
	}
}
.main_wrap_header_btn:hover {
	color: var(--color-standart-white);
	& svg {
		fill: var(--color-standart-white);
	}
}
.main-segment-wrap.page .main_wrap_header {
	width: 1200px; 
	margin: 160px 0 40px 0;
	position: relative;
}
.main_side_block {
	position: fixed;
	min-width: 250px;
    margin-left: 20px;
	padding: 20px;
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
	border: 1px solid var(--color-transparent-light);
    border-radius: 20px;
	animation: blockEnterPage 0.5s ease forwards;
	animation-iteration-count: 1;
}
.main-side-rules-anchors {width: -webkit-fill-available;}
.main_side_block .main-side-rules-anchors a {
    display: flex;
    padding: 20px 10px;
	text-align: left;
	color: var(--color-transparent-halflight);
	transition: var(--transition-standart-all);
    border-radius: 10px;
	align-items: center;
}
.main_side_block .main-side-rules-anchors a:hover,
.main_side_block .main-side-rules-anchors a:target {
	color: var(--color-standart-white);
	padding-left: 20px;
}
.main_side_block .main-side-rules-anchors a.active {
	color: var(--color-standart-white);
	background: var(--color-transparent-light);
	padding-left: 20px;
}
.main_side_block .main-side-rules-anchors a:last-child {
	margin: 0px;
	border: none;
}
.main_wrap_block {
	background: var(--color-standart-black);
	border: 1px solid var(--color-border-black);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	padding: 40px;
	border-radius: 20px;
	color: var(--color-standart-white);
	counter-reset: section;
	position: relative;
	animation: blockEnterPage 0.5s ease forwards;
	animation-iteration-count: 1;
}
.main_wrap_block h1 {
	font-size: 20px;
	font-weight: 600;
	text-align: left;
	counter-reset: subsection;
}
.main_wrap_block h1::before {
	counter-increment: subsection;
    content: counter(section) "." counter(subsection) ". ";
	display: block;
	height: 200px;
	margin-top: -200px; 
	visibility: hidden;
}
.main_wrap_block h1:first-child::before {
	height: 260px;
	margin-top: -260px; 
}
.main_wrap_block h1:first-of-type {margin-block-start: 0px;}
.main_wrap_block h1::before {
	counter-increment: section;
	content: counter(section) ". ";
}
.main_wrap_block h2 {
	font-size: 16px;
	font-weight: 200;
	text-align: justify;
	counter-reset: subsubsection;
	margin-left: 40px;
}
.main_wrap_block h2::before {
	counter-increment: subsection;
	content: counter(section) "." counter(subsection) ". ";
}
.main_wrap_block h3 {
	padding: 0 0 0 30px;
	font-size: 16px;
	font-weight: 200;
	text-align: justify;
	margin-left: 40px;
}
.main_wrap_block h3::before {content: "— ";}
.main_wrap_block_access {
	background: rgba(255, 255, 255, 0.28);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 10px;
	color: var(--color-standart-white);
	counter-reset: section;
	position: relative;
}
/* Блок с частыми вопросами */
.main-questions {
	margin: 20px 0px;
}
.questions-block-content {
	display: grid;
  	grid-template-columns: auto auto auto;
	gap: 20px;
	justify-content: center;
  	flex-direction: column;
}
.questions-block-element {
	padding: 20px;
	border: 1px solid var(--color-border-black);
	border-radius: 20px;
}
.questions-block-element-header {
	margin-bottom: 10px;
	color: var(--color-standart-white);
	font-weight: 500;
	text-align: left;
}
.questions-block-element-content {
	color: var(--color-transparent-halflight);
	text-align: justify;
}

/* Основной нижний (подвальный) блок */
.footer-segment {
	width: -webkit-fill-available;
    opacity: 1;
    transition: opacity .2s ease-out;
    justify-content: space-between;
}
.footer-segment-wrap {
	display: inline-flex;
	justify-content: space-between;
	opacity: 0;
	animation: elementsFadeInOut 2s forwards;
    animation-timeline: view();
    animation-range: entry-crossing 50px;
	margin: 40px auto 0 auto;
    width: 1200px;
}
.footer_left-bl {
    width: 320px;
	height: 180px;
	text-align: left;
	font-size: 20px;
	font-family: 'Roboto';
	font-weight: 300;
	color: var(--color-standart-white);
}
.footer_right-bl {
    width: 320px;
	height: 180px;
	text-align: right;
	font-size: 20px;
	font-family: 'Roboto';
	font-weight: 300;
	color: var(--color-standart-white);
	& span.admin {
		color: var(--color-standart-yellow);
	}
	& span.podsos {
		color: var(--color-standart-pink);
	}
}
/* Сегмент главной страницы со стримерами / Streamers segment on main page */
.streamers-carousel {
	display: inline-flex;
	gap: 20px;
}
.streamers-carousel-block {
	display: flex;
	border-radius: 20px;
	max-width: 300px;
	min-height: 400px;
	padding: 20px 10px;
	background: var(--color-standart-white);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	&.ranova {
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
}
.streamer-avatar {
	& img {
	border-radius: 40px;
	}
}
.streamer-char {
	position: absolute;
	bottom: -100;
	right: -50;
	z-index: -1;
}

/* Таблицы стилей прогресс-бара */
/* Основные стили прогресс-бара */
#progressbar {
	pointer-events: none;
}
#progressbar .bar {
	background: var(--color-standart-white);
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}
#progressbar .peg {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px var(--accent-base-color), 0 0 5px var(--accent-base-color);
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}
.progressbar-custom-parent {
	overflow: hidden;
	position: relative;
}
.progressbar-custom-parent #progressbar .spinner,
.progressbar-custom-parent #progressbar .bar {
	position: absolute;
}

/* Диалоговые окна / Modal windows */
.modal-default {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    color: var(--color-standart-white);
    font-size: 16px;
    font-weight: 300;
    transition: var(--transition-standart-all);
	justify-content: center;
	align-items: center;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.modal-default-content {
	opacity: 0;
}
.modal-default-content.show {
	opacity: 1;
	transition: var(--transition-standart-all);
	transform: translateY(0px);
}
.modal-default-content.hide {
	opacity: 0;
}
.modal-default-content-container {
	position: relative;
	min-width: 400px;
	background: var(--color-standart-black);
	border-radius: 20px;
	transform: translateY(40px);
	transition: var(--transition-standart-all);
	&.access-page {
		width: 550px;
		background-size: cover;
	}
}
.modal-default.show {
	background: rgba(0, 0, 0, 0.75);
	opacity: 1;
	pointer-events: auto;
}
.modal-default.hide {
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	pointer-events: auto;
}
.modal-default-wrapper-controls {
	position: absolute;
	display: flex;
	top: 10px;
	right: 10px;
	background: var(--color-transparent-dark);
    border-radius: 20px;
}
.modal-default-wrapper-controls div {
    display: inline-flex;
    background: var(--main-light-color);
    height: 20px;
    width: 20px;
    cursor: pointer;
    border-radius: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
}
.modal-default-wrapper-controls div svg {
	fill: var(--color-transparent-halflight);
	transition: var(--transition-standart-all);
}
.modal-default-wrapper-controls div:hover svg {
	fill: var(--color-standart-white);
}
.modal-default-wrapper-controls div:not(:first-child) {
	margin-left: 10px;
}
.modal-default-help {
	cursor: help !important;
}
.modal-default-help::after {
	min-width: 230px;
}
.modal-default-close {
	background: var(--color-standart-red) !important;
}
.modal-default-wrapper-box.threefold {
	display: grid;
	grid-template-columns: 250px 1fr 250px;
	grid-column-gap: 40px;
}
.modal-default-wrapper-box.chatfold {
	display: grid;
	grid-template-columns: 400px 1fr 400px;
	grid-column-gap: 30px;
}
.modal-default-wrapper-box-title {
	text-align: left;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 20px;
	color: var(--text-base-color);
}
.modal-default-wrapper-box-content {
	padding: 40px;
}
.modal-default-wrapper-box-buttonsbar {
	background: var(--color-standart-background);
	display: flex;
	gap: 20px;
	padding: 20px 40px;
	align-items: center;
	border-radius: 0px 0px 20px 20px;
	justify-content: end;
}
.modal-default-wrapper-box-buttonsbar button:not(:first-child) {
	margin-left: 10px;
}
.modal-message {
	padding: 10px 20px;
	background: var(--color-transparent-dark);
	border-radius: 10px;
}
.modal-default-wrapper-box-text {
	text-align: justify;
	margin-bottom: 20px;
	& a {
		color: var(--color-standart-yellow);
		text-decoration: underline;
	}
	&.secondary {
		color: var(--color-transparent-halflight);
	}
}

/* Страница информации о сервере / Server info page */
.modal-server-info-ipaddress {
	text-align: left;
	margin-bottom: 20px;
	& .ipaddress-title {
		font-family: Minecraft;
		color: var(--color-transparent-halflight);
		margin-bottom: 10px;
		user-select: none;
	}
	& .ipaddress-textfield {
		font-family: Minecraft;
		padding: 15px 20px;
		margin-bottom: 10px;
		background: var(--color-standart-background);
		border: 2px solid var(--color-transparent-halflight);
	}
	& .ipaddress-description {
		color: var(--color-transparent-halflight);
		user-select: none;
	}
}
.modal-default-wrapper-box-externalelement {
	display: flex	;
	gap: 20px;
	background: var(--color-transparent-dark);
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 20px;
	transition: var(--transition-standart-all);
	user-select: none;
	&:active {
		scale: 95%;
	}
	&:hover {
		.externalelement-icon svg {
			fill: var(--color-standart-white);
			scale: 105%;
		}
	}
	& .externalelement-icon {
		border-radius: 25px;
		background: var(--color-transparent-halfdark);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		width: 50px;
		transition: var(--transition-standart-all);
		& svg {
			fill: var(--color-transparent-halflight);
			transition: var(--transition-standart-all);
		}
	}
	& .externalelement-content {
		display: flex;
        text-align: left;
        text-transform: none;
        flex-direction: column;
        justify-content: center;
		& .externalelement-content-title {
			font-size: 20px;
			font-weight: 700;
			color: var(--color-standart-white);
		}
		& .externalelement-content-desc {
			color: var(--color-transparent-halflight);
		}
	}
}
.modal-default-wrapper-box-socialmedia {
	display: flex;
	margin-top: 30px;
	justify-content: center;
	gap: 20px;
	& .social_el {
		display: inline-flex;
        height: 50px;
        width: 50px;
        border-radius: 25px;
        align-items: center;
        justify-content: center;
        background: var(--color-transparent-light);
		transition: var(--transition-standart-all);
		& svg {
			fill: var(--color-transparent-halflight);
		}
		&:hover {
			scale: 110%;
			& svg {
				fill: var(--color-standart-white);
			}
			&.vk {background: var(--color-social-vk);}
			&.telegram {background: var(--color-social-telegram);}
			&.discord {background: var(--color-social-discord);}
			&.boosty {background: var(--color-social-boosty);}
		}
		&:active {scale: 95%;}
	}
}
/* Страница получения доступа к сервера / Access page to server */
.modal-access-block {
	min-width: 450px;
	padding: 40px;
	& .access-header {
		margin: 120px 0px 20px 0px;
		text-align: center;
	}
}
.access-head-image {
	background: url(/static/images/join_image.png) no-repeat;
	width: 400px;
	height: 210px;
	position: absolute;
	top: -80px;
	left: 0; right: 0;
	margin: auto;
}
.access-header-main {
	color: var(--color-standart-white);
	font-weight: 500;
	font-size: 25px;
}
.access-header-desc {
	color: var(--color-transparent-halflight)
}
.access-string {
	text-align: left;
    display: flex;
    flex-direction: row;
    gap: 20px;
	&:not(:last-child) {
		margin-bottom: 10px;
	}
}
.access-string-element {
	display: flex;
	flex-direction: column;
	width: -webkit-fill-available;
	min-width: 100px;
	& label {
		margin-bottom: 10px;
	}
	& label span {
		color: var(--color-transparent-halflight);
	}
}

.floatpage {
	position: relative;
    margin: 15vh auto 0 auto;
    width: 500px;
}
.floatpage_logo {
	display: flex;
	justify-content: center;
	width: 66px;
    height: 80px;
	margin: 0 auto 40px;
	margin-bottom: 40px;
	transition: var(--transition-standart-all);
	align-items: center;
	& .avatar {
		border-radius: 5px;
		opacity: 1;
		animation-name: fadeInOpacity;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 0.2s;
	}
}
.floatpage_avatar {
	display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 40px;
    margin-bottom: 40px;
    border-radius: 30px;
    transition: var(--transition-standart-all);
}
.floatpage_window {
	position: relative;
    border-radius: 20px;
    text-align: left;
    color: var(--color-standart-white);
    font-size: 16px;
    font-weight: 300;
    transition: var(--transition-standart-all);
    user-select: none;
	& form {
		margin: 0px;
	}
	& .floatpage_window_content {
		background: var(--color-standart-black);
		border-radius: 20px 20px 0px 0px;
		padding: 40px;
	}
	& .floatpage_window_btnblock {
		background: var(--color-standart-background);
		display: flex;
		gap: 20px;
		padding: 20px 40px;
		align-items: center;
		border-radius: 0px 0px 20px 20px;
		justify-content: end;
	}
	& .floar_window_status {
		position: absolute;
		display: none;
        left: 0;
        right: 0;
        margin: auto;
        top: -20px;
        width: fit-content;
        border-radius: 20px;
        background: var(--color-standart-red);
        padding: 10px 20px;
		opacity: 1;
		animation-name: fadeInOpacity;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 0.2s;
	}
}

.floatpage_message {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	background: var(--color-standart-background);
	color: var(--color-transparent-halflight);
	& .icon svg {
		fill: var(--color-transparent-halflight);
	}
} 
.floatpage_window_string {
	display: inline-flex;
	gap: 20px;
	width: -webkit-fill-available;
	& .string_element {
		width: -webkit-fill-available;
	}
	& .string_element label {
		display: block;
		margin-bottom: 10px;
	}
}
/* Профиль пользователя / User profile */
.profilepage_maincontainer {
	width: -webkit-fill-available;
	animation: blockEnterPage 0.5s ease forwards;
    animation-iteration-count: 1;
	& .profilepage_maincontainer_top {
		padding: 40px;
		border-radius: 20px 20px 0px 0px;
		background: url(/static/images/profile_background.jpg) no-repeat center;
		background-size: cover;
	}
	& .profilepage_maincontainer_bottom {
		padding: 20px 40px;
		border-radius: 0px 0px 20px 20px;
		background: var(--color-transparent-dark);
		backdrop-filter: blur(5px);
	}
}
.profilepage_maincontainer_top {
	display: flex;
	align-items: center;
	gap: 40px;
	& .profilepage_avatar img {
		border-radius: 10px;
	}
	& .profilepage_content {
		text-align: left;
		& .personal_data {
			& .nickname {
				font-size: 32px;
				font-weight: 700;
				color: var(--color-standart-white);
			}
			& .birthday {
				font-size: 16px;
				color: var(--color-transparent-halflight);
			}
		}
	}
}
.profilepage_maincontainer_bottom {
	display: flex;
	gap: 40px;
	text-align: left;
	& .profileinfo_block {
		& .title {
			color: var(--color-transparent-halflight);
			font-size: 12px;
		}
		& .value {
			color: var(--color-standart-white);
			font-size: 24px;
			font-weight: 700;
		}
	}
}