.auth-container {
	background: linear-gradient(180deg, #7dbfdd 0%, #9181dc 100%);
}

.auth-title {
	font-weight: 600;
	font-size: 32px;
	margin-inline: auto;
}

p {
	margin: 0;
}

.auth-main-block {
	background-color: #fff;
	padding: 30px 50px 40px 50px;
	border-radius: 10px;
	max-width: 440px;
	width: 100%;
	height: fit-content;
	margin-bottom: 40px;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.auth-slide-container {
	position: relative;
	display: flex;
	align-items: center;
	width: 500% !important;
}

.button-group-switch {
	background-color: #f6f6f6;
	border-radius: 10px;
	border: 1px solid #DCDCDC;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	height: 40px;
}

.button-switch {
	color: #696e76;
	width: 50%;
	border-radius: 10px;
	padding: 7px 0;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
}

.slider {
	max-width: 340px;
	width: 100%;
	overflow: hidden;
}

.auth-form {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.policy {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-block: 20px;
}

.policy-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 21px;
	height: 21px;
	display: flex;
	position: relative;
	align-content: center;
	justify-content: center;
	border: 2px solid #DDDDDD;
	border-radius: 5px;
	cursor: pointer;
}

.policy-checkbox:checked {
	border: 0;
}

.policy-checkbox:checked::before {
	opacity: 1;
}

.policy-checkbox::before {
	content: "";
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background: url('../../images/checked.svg') no-repeat center, #49C7C2;
}

.policy-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	display: flex;
	position: relative;
	align-content: center;
	justify-content: center;
	border: 2px solid #DDDDDD;
	border-radius: 5px;
	cursor: pointer;
}

.policy-checkbox-error {
	border: 2px solid #FF0000;
	animation: shake 0.7s cubic-bezier(.36, .07, .19, .97) both;
}

.policy-text {
	font-size: 12px;
	color: #6C6C6C;
	font-weight: 400;
	margin: 0;
	width: 90%;
	line-height: 14px;
	padding-top: 3px;
	text-align: justify;
}

.field:nth-child(3),
.field-phone:nth-child(2) {
	margin-right: 40px;
}

.form-control {
	padding: 15px 0 15px 18px;
	font-size: 20px !important;
}

#email:checked+input+div label[for="email"] {
	background-color: #fff;
	color: #000;
	box-shadow: 0px 2px 14px 0px #00000040;
}

#tel:checked+div label[for="tel"] {
	background-color: #fff;
	color: #000;
	box-shadow: 0px 2px 14px 0px #00000040;
}

#tel:checked~.tel-input-container-signin,
#email:checked~.email-input-container-signin {
	display: block;
}

.name-input-container {
	margin-bottom: 20px;
}

.email-input-container-signin,
.tel-input-container-signin {
	display: none;
}

#search-toggle:checked~.mobile-toggle-search-btn,
#search-toggle:checked~.btn-light,
#search-toggle:checked~.dropdown {
	display: none;
}

.green-button {
	width: 100% !important;
	margin-bottom: 20px;
	padding: 17px !important;
	font-size: 20px !important;
}

.green-link {
	display: block;
	color: #12a49d;
}

.grey-text {
	color: #686868;
	font-size: 14px;
	line-height: 17px;
	text-align: left;
}

a.grey-text:hover,
.not-remember-password:hover {
	cursor: pointer;
	color: #12a49d;
	text-decoration: underline;
}

.not-remember-password {
	color: #686868;
	font-size: 16px;
	line-height: 17px;
	text-align: left;
}

.already-register-text {
	color: #686868;
	font-size: 16px;
	line-height: 17px;
	text-align: left;
}

.grey-text-info {
	margin-bottom: 10px;
}

.small-text {
	font-size: 12px;
	color: #C0C0C0;
	margin-bottom: 42px;
}

.link-container {
	display: flex;
	gap: 15px;
	align-items: center;
}

.auth-info {
	margin: 18px 0;
}

.password-input-container-signup {
	margin: 10px 0 10px 0;
}

.password-input-container,
.password-input-container-signin {
	border: transparent 1px solid;
}

.password-input-container-recovery {
	margin-bottom: 20px;
}

.name-validate-error,
.password-check-error,
.password-validate-error,
.password-not-written,
.password-check-incorrect,
.tel-validate-error,
.tel-not-found,
.tel-not-written,
.email-validate-error,
.email-not-written,
.email-exists,
.email-not-found {
	border: red 1px solid;
	border-radius: 10px;
	position: relative;
}

.name-validate-error input,
.password-check-error input,
.password-validate-error input,
.password-not-written input,
.password-check-incorrect input,
.tel-validate-error input,
.tel-not-found input,
.tel-not-written input,
.email-validate-error input,
.email-not-written input,
.email-exists input,
.email-not-found input {
	box-shadow: none !important;
	border: 1px solid transparent !important;
}


.name-validate-error input:focus,
.password-check-error input:focus,
.password-validate-error input:focus,
.password-not-written input:focus,
.password-check-incorrect input:focus,
.tel-validate-error input:focus,
.tel-not-found input:focus,
.tel-not-written input:focus,
.email-validate-error input:focus,
.email-not-written input:focus,
.email-exists input:focus,
.email-not-found input:focus {
	box-shadow: none !important;
	border: 1px solid transparent !important;
}


.email-not-found::after {
	content: "Email не найден";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.email-validate-error::after {
	content: "Некорректный email";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.email-exists::after {
	content: "Данный email занят";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.email-not-written::after {
	content: "Введите Email";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.tel-not-found::after {
	content: "Номер телефона не найден";
	position: absolute;
	font-size: 0.7rem;
	bottom: -22px;
	left: 0;
	color: red;
}

.tel-not-written::after {
	content: "Введите номер телефона";
	position: absolute;
	font-size: 0.7rem;
	bottom: -22px;
	left: 0;
	color: red;
}

.tel-validate-error::after {
	content: "Некорректный номер телефона";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.password-not-written::after {
	content: "Введите пароль";
	position: absolute;
	font-size: 0.7rem;
	bottom: -17px;
	left: 0;
	color: red;
}

.password-check-incorrect::after {
	content: "Некорректный пароль";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.password-check-error::after {
	content: "Пароли не совпадают";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.password-validate-error::after {
	content: "Ненадежный пароль";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.code-validate-error {
	position: relative;
}

.code-validate-error::after {
	content: "Некорректный код";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.name-validate-error::after {
	content: "Введите свое имя";
	position: absolute;
	font-size: 0.7rem;
	bottom: -20px;
	left: 0;
	color: red;
}

.user-tel,
.user-email {
	color: #2CAAA4;
}

.auth-info-tel,
.auth-info-email {
	color: #282B2D;
}

@keyframes appear {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes disapear {
	to {
		opacity: 0;
		transform: translateX(-10%);
	}
}

.auth-header {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}

.previous-screen {
	position: absolute;
	background-color: transparent;
	border: 0;
	left: -8px;
	top: -35px;
	font-size: 16px;
	color: #FFFFFF;
}

.previous-screen:hover {
	opacity: 0.6;
}

.password-input-container,
.password-input-container-signin {
	position: relative;
}

.password-input-container,
.password-input-container-signin button {
	position: absolute;
	bottom: 8px;
	right: 0;
}

.spinner-border {
	color: #000000;
}

.preloader-container {
	display: none;
	position: absolute;
	border-radius: 20px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.preloader-container.active_prel {
	visibility: visible;
	opacity: 0.7;
}

.auth-text {
	font-size: 18px;
	text-align: center;
	margin-bottom: 20px;
}

.auth-text-title {
	margin-bottom: 0px;
}

@media (max-width: 768px) {
	.slider {
		max-width: 100%;
		overflow: hidden;
	}
}

@media (max-width: 500px) {
	.link-container {
		flex-direction: column;
		gap: 30px;
		align-items: center;
		margin-bottom: 20px;
	}

	.field:nth-child(3) {
		margin-right: 15px;
	}

	.field-phone:nth-child(2) {
		margin-right: 20px;
	}

	.auth-main-block {
		margin-top: 30px;
		padding: 30px;
	}
}

@media (max-width: 420px) {
	.auth-main-block {
		padding: 14px;
	}
}

@keyframes shake {

	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		transform: translate3d(-2px, 0, 0);
	}

	40%,
	60% {
		transform: translate3d(2px, 0, 0);
	}
}