@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&family=Montserrat:wght@500;600;700&family=Work+Sans:wght@100;200;400&family=Yantramanav:wght@100;300;500&display=swap');

* {
	margin: 0;
	padding: 0;
}

.modal_content {
	display: none;
	position: fixed;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;

	background-color: rgba(0,0,0,0.4);
	transition: .8s;	
	-webkit-animation-name: animgegform;
	-webkit-animation-duration: 0.8s;
	animation-name: animgegform;
	animation-duration: 0.8s;	
}

.reg_auth_container {
	position: absolute;
	z-index: 6;
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.63) 0%, rgba(33, 38, 45, 0.63) 100%);
	backdrop-filter: blur(11px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	width: 650px;
	height: 400px;
/*  border-radius: 14px;*/
	overflow: hidden;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
}
.form-container {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.95) 0%, rgba(33, 38, 45, 0.95) 100%);
	backdrop-filter: blur(3.5px);
}
.sign-in-container {
	left: 0;
	width: 50%;
	z-index: 1;
}
.reg_auth_container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}
.sign-up-container {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: -1;
}
.reg_auth_container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
}
@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}
.overlay-container {
	position: absolute;
	width: 50%;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 50; 
}
.reg_auth_container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}
.overlay {
	color: #FFFFFF;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}
.reg_auth_container.right-panel-active .overlay {
	transform: translateX(50%);
}
.overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}
.overlay-left {
	transform: translateX(0);
}
.container.right-panel-active .overlay-left {
	transform: translateX(20%);
}
.overlay-right {
	right: 0;
	transform: translateX(0);
}
.reg_auth_container.right-panel-active .overlay-right {
	transform: translateX(20%);
}
.form_cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: calc(100% - 40px);
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.95) 0%, rgba(33, 38, 45, 0.95) 100%);
	backdrop-filter: blur(3.5px);
	padding: 20px 15px;  
}
.form_cont h2 {
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	line-height: 25px;
	color: #D3D3D3;
	padding: 0 0 20px 0;
	padding-left: 0;
	animation: opacity 2s;
	transition: 0.6s; 
}
.ghost {
	display: flex;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	border: none;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
	color: #474F59;
	padding: 12px 25px 10px;
	font-size: 18px;  
	font-weight: 100;
	letter-spacing: 0.01em;
	transition: 0.8s;
}
.ghost:hover,
.btn_newgame:focus {
	color: #686C8A;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	transition: 0.8s;
}


.registration_form {
	position: absolute;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	width: 650px;
	height: 400px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);

	transition: .8s;
	-webkit-animation-name: animgegform;
	-webkit-animation-duration: 0.8s;
	animation-name: animgegform;
	animation-duration: 0.8s;	
}
@keyframes animgegform {
	from { opacity:0}
	to { opacity:1}
}
@-webkit-keyframes animgegform {
	from { opacity:0} 
	to {opacity:1}
}
@keyframes animclose {
	from { opacity:1}
	to { opacity:0}
}
@-webkit-keyframes animclose {
	from { opacity:1} 
	to {opacity:0}
}
.reg_left_div {
	display: flex;
	flex-direction: column;
	width: 50%;
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.63) 0%, rgba(33, 38, 45, 0.63) 100%);
	backdrop-filter: blur(11px);
}
.reg_right_div {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(50% - 30px);
	height: calc(100% - 40px);
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.95) 0%, rgba(33, 38, 45, 0.95) 100%);
	backdrop-filter: blur(3.5px);
	padding: 20px 15px;
}
.reg_right_div h2 {
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	line-height: 25px;
	color: #D3D3D3;
	padding: 0 0 20px 0;
	padding-left: 0;
	animation: opacity 2s;
	transition: 0.6s;	
}
.warning_text {
	display: flex;
	justify-content: left;
	width: 100%;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-size: 13px;
	line-height: 17px;
	color: rgba(255, 255, 255, 0.4);
}
.sign-up-box,
.sign-in-box {
	position: relative;
	display: flex;
	flex-grow: 1;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 100;
}
.sign-up-box .user-box,
.sign-in-box .user-box {
	position: relative;
	width: 260px;
}
.sign-up-box .user-box input,
.sign-in-box .user-box input {
	width: 100%;
	padding: 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 18px;
	border: none;
	border-bottom: 1px solid var(--background-step-btn);
	outline: none;
	background: transparent;
}
.sign-up-box .user-box label,
.sign-in-box .user-box label {
	position: absolute;
	top:0;
	left: 0;
	padding: 6px 0;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	transition: .5s;
}

.sign-up-box .user-box input:hover,
.sign-up-box .user-box input:focus,
.sign-in-box .user-box input:hover,
.sign-in-box .user-box input:focus {
	color: rgba(211, 211, 211, .6);
	transition: 0.8s;
}

.sign-up-box .user-box input:focus ~ label,
.sign-up-box .user-box input:valid ~ label,

.sign-in-box .user-box input:focus ~ label,
.sign-in-box .user-box input:valid ~ label {
	top: -18px;
	left: 0;
	color: rgb(94, 186, 201);
	font-size: 12px;
}

/*стили автозаполнения*/
.sign-up-box .user-box input:-internal-autofill-selected,
.sign-in-box .user-box input:-internal-autofill-selected {
	appearance: menulist-button;
	background-image: none !important;
	background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
	color: fieldtext !important;
}

.sign-up-box .user-box input:-webkit-autofill,
.sign-up-box .user-box input:-webkit-autofill:hover, 
.sign-up-box .user-box input:-webkit-autofill:focus,
.sign-in-box .user-box input:-webkit-autofill,
.sign-in-box .user-box input:-webkit-autofill:hover, 
.sign-in-box .user-box input:-webkit-autofill:focus {
	width: 100%;
	padding: 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 18px;
	border: none;
	border-bottom: 1px solid var(--background-step-btn);
	outline: none;
	background: transparent;
}
.sign-up-box .user-box input:auto-fill,
.sign-in-box .user-box input:auto-fill {
	width: 100%;
	padding: 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 18px;
	border: none;
	border-bottom: 1px solid var(--background-step-btn);
	outline: none;
	background: transparent;	
}
/*.login-box .user-box select {
	width: 100%;
	padding: 10px 0;
	font-size: 15px;
	color: rgba(211, 211, 211, 1);
	outline: none;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	border-bottom: 1px solid var(--background-step-btn);
	margin-bottom: 18px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: transparent;
	transition: 0.8s;
}
.login-box .user-box select:hover {
	color: rgba(211, 211, 211, .6);
	transition: 0.8s;
}
.login-box .user-box label {
	position: absolute;
	top:0;
	left: 0;
	padding: 6px 0;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	transition: .5s;
}

.login-box .user-box select:focus ~ label,
.login-box .user-box select:valid ~ label {
	top: -18px;
	left: 0;
	color: rgb(94, 186, 201);
	font-size: 12px;
}

.login-box .user-box select option {
	display: flex;
	outline: none;
	border: none;
	background: #283039;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35);
	color: #D2D2D2;
}
.login-box .user-box select option:hover {
	background: #191E25;
}*/




.input-container {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	transition: .6s;
}
.username_p::before {
	position: relative;
	display: flex;
	padding: 7px 10px 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 10px;
	border: none;
	outline: none;
	background: transparent;  
	content: "Логин";
	width: 55px;
}
.password_p::before {
	position: relative;
	display: flex;
	padding: 7px 10px 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 10px;
	border: none;
	outline: none;
	background: transparent;  
	content: "Пароль";
	width: 55px;
}
.team_p::before {
	position: relative;
	display: flex;
	padding: 7px 10px 10px 0;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 10px;
	border: none;
	outline: none;
	background: transparent;  
	content: "Команда";
	width: 55px;
}
.password_r_p::before {
	position: relative;
/*	display: flex;*/
/*	padding: 8px 20px 10px 0;*/
	font-size: 15px;
	color: #D3D3D3;
/*	margin-bottom: 18px;*/
/*	border: none;
	outline: none;*/
	background: transparent;  
/*	content: "Повторите пароль";*/
/*	width: 50px;*/
}
.reg_inp {
	padding: 10px 5px 10px 10px;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 18px;
	border: none;
	border-bottom: 1px solid var(--background-step-btn);
	outline: none;
	background: transparent;
	transition: .6s;
}
.reg_inp:hover,
.reg_inp:focus {
	background: rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgb(94, 186, 201);
	transition: .6s;
	color: rgb(94, 186, 201);
}

.reg_inp_select {
	position: relative;
	width: 100%;
	display: block;
	padding: 10px 5px 10px 10px;
	font-size: 15px;
	color: #D3D3D3;
	margin-bottom: 18px;
	box-sizing: border-box; 
	border-top: 1px solid var(--background-step-btn);
	border-left: 1px solid var(--background-step-btn);
	border-right: 1px solid var(--background-step-btn);
	border-bottom: 1px solid var(--background-step-btn);
	outline: none;
	background: transparent;
	-webkit-appearance: none;
	text-align-last: left;
	appearance: none;
	cursor: pointer;
	transition: .6s;
}
.reg_inp_select:hover,
.reg_inp_select:focus {
	background: transparent;
	border-top: 1px solid var(--background-step-btn);
	border-left: 1px solid var(--background-step-btn);
	border-right: 1px solid var(--background-step-btn);
	border-bottom: 1px solid rgb(94, 186, 201);
	transition: .6s;
	color: rgb(94, 186, 201);
}

.reg_inp_select option {
	background-color:#292F38;
	color: rgba(211, 211, 211, .6);
    }

/*модальные окна------------------------------------------*/
.modal_warning {
	position: absolute;
	top:40px;
	margin-bottom: 15px;
	display: flex;/* меняем на flex, когда алерт активен */
	flex-direction: row;
	max-width: 80%;
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.63) 0%, rgba(33, 38, 45, 0.63) 100%);
	border: 1px solid #5EBAC9;
	backdrop-filter: blur(11px);
	border-radius: 10px;	
	overflow: hidden;
	z-index: 7;
	transition: .8s;
	-webkit-animation-name: animgegform;
	-webkit-animation-duration: 0.8s;
	animation-name: animgegform;
	animation-duration: 0.8s;	
}
.warn_description {
	position: relative;
	display: flex;
	justify-content: left;
	padding: 15px 30px 15px 5px;
	transition: 0.8s;
}
.warn_description p {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-size: 13px;
	line-height: 17px;
	display: flex;
	align-items: center;
	color: #97E7F4;
	transition: 0.8s;
}
.warn_icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 15px 0 25px;
	transition: 0.8s;
}
.warn_alert {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-self: center;
	text-align: center;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	align-self: center;
	vertical-align: middle;
	background-color: transparent;
	border: 2px solid #97E7F4;
	border-radius: 50%;
	text-align: center;
}
.warn_svg_alert {
	position: relative;
	margin: auto 0;
	color: #97E7F4;
	fill: #97E7F4;
}
.btn_close_modal {
	position: absolute;
	right: 10px;
	top: 5px;
	color: rgba(94, 186, 201, 0.46);
	cursor: pointer;
	font-size: 13px;
	transition: 0.6s;
	z-index: 8;
}
.btn_close_modal {
	color: rgba(94, 186, 201, 1);
	transition: 0.6s;
}

.modal_warning_center {
	position: absolute;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;/* меняем на flex, когда алерт активен */
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 80%;
	background: linear-gradient(180deg, rgba(50, 56, 63, 0.63) 0%, rgba(33, 38, 45, 0.63) 100%);
	border: 1px solid #5EBAC9;
	backdrop-filter: blur(11px);
	border-radius: 10px;	
	padding: 30px 40px;
	overflow: hidden;
	z-index: 7;
	transition: .8s;
	-webkit-animation-name: animgegform;
	-webkit-animation-duration: 0.8s;
	animation-name: animgegform;
	animation-duration: 0.8s;	
}

.modal_warning_center h3 {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100;
	font-size: 16px;
	line-height: 18px;
	margin: 0 0 15px 0;
	color: white;
}

.modal_warning_center p {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
	display: flex;
	align-items: center;
	color: #97E7F4;
	transition: 0.8s;
}

/* warning */
.form_warning {
	position: relative;
	display: block;
	background: rgba(255, 71, 71, 0.13);
	padding: 2px 0;
	border-radius: 5px;
	justify-content: center;
	text-align: center;
	top:-10px;
	color: rgba(255, 139, 139, 1);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-size: 13px;
}

/* ползунок---------------------------------------------------------------------- */
.complexity_range_div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35.33px;
  text-align: center;
  z-index: 20;
}
.compl_range[type="number"] {
  width: 40px;
  padding: 4px 5px;
  border: 1px solid #bbb;
  border-radius: 3px;
}
.compl_range[type="range"]:focus,
.compl_range[type="number"]:focus {
  opacity: 1;
} 
.compl_range[type="range"] {
  -webkit-appearance: none;
  width: 80%;
  height: 4px;
  background: #32383F;
  border-radius: 5px;
  background-image: linear-gradient(#5CB8C7, #5CB8C7);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}
.compl_range[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:  #5CB8C7;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
.compl_range[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5CB8C7;
  cursor: ew-resize;
  transition: background .3s ease-in-out;
}
.compl_range[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5CB8C7;
  cursor: ew-resize;
  transition: background .3s ease-in-out;
}
.compl_range[type="range"]::-webkit-slider-thumb:hover {
  background:#5CB8C7;
}

.compl_range[type="range"]::-moz-range-thumb:hover {
  background: #5CB8C7;
}

.compl_range[type="range"]::-ms-thumb:hover {
  background: #5CB8C7;
}
.compl_range[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.compl_range[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.compl_range[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}  
/*-----------------------------*/