/*Диалог*/
.no-scroll
{
	overflow: hidden;
}

.dialog
{
	position: fixed;
	align-content: center;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 100vw;
	height: 100vh;
	height:100svh;
	top: 0px;
	bottom: 0px;
	padding: 5px;
	border: none;
	background-color: rgba(0, 0, 0, 0.3);
	animation: none;
	z-index: 255;
	will-change:opacity, transform;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	backdrop-filter:blur(15px);
	-webkit-backdrop-filter: blur(15px);
	z-index: 999;
}

.dialog__background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.dialog.show
{
	animation-name: show-backdrop;
}

.dialog.hide
{
	animation-name: hide-backdrop;
	animation-delay: 0.2s;
	animation-fill-mode: backwards;
}

.dialog__window
{
	animation: none;
	opacity: 0;
	will-change:transform, opacity;
	/*+border-radius: 10px;*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	padding:60px var(--indent) var(--indent);
	margin: 0 auto;
	background-color:var(--white);
	color:var(--black);
	height: auto;
}

.dialog__window a
{
	color:var(--black);
	text-decoration: underline;
}

.dialog__content
{
}

.show .dialog__window
{
	animation-name: show-dialog;
	animation-delay: 0.2s;
	animation-duration:var(--transition-time);
	animation-fill-mode: forwards;
}

.hide .dialog__window
{
	animation-name: hide-dialog;
	animation-duration:var(--transition-time);
	animation-fill-mode: backwards;
}

.dialog__close
{
	position: absolute;
	top: 15px !important;
	right: 27px !important;
	width: 32px;
	height: 32px;
	background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32.5307' height='2.50236' transform='matrix(0.710701 0.703494 -0.710701 0.703494 1.7793 0)' fill='black'/%3E%3Crect width='32.5307' height='2.50236' transform='matrix(0.710701 -0.703494 0.710701 0.703494 0.103516 23.2396)' fill='black'/%3E%3C/svg%3E%0A");
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 2;
	margin-left: auto;
	transition:var(--transition);
}

@media (min-width: 990px)
{
	.dialog__window
	{
		width: 600px;
		height: auto;
		padding: 60px 40px 40px;
	}
	
	.dialog__close
	{
		top: 15px;
		right: 40px;
	}
}

/*Офорление*/
.dialog__header
{
	margin-bottom: 25px;
}

.dialog__text
{
	font-size: 14px;
	margin-bottom: 25px;
}

.dialog__agree
{
	display: grid;
	grid-template-columns: 40px auto;
	margin-bottom: 25px;
}

.dialog__agree-checkbox
{
	width: 20px;
	height: 20px;
	accent-color:var(--blue);
}

.dialog__agree-label
{
	font-size: 10px;
	text-align: left;
}

.dialog__policy
{
	font-size: 11px;
	line-height: 1.2;
	font-weight: 400;
}

@media (min-width: 990px)
{
	.dialog__header
	{
		font-size: 36px;
	}
}

/*Форма в диалоге*/
.dialog__field
{
	font-size: 16px;
	width: 100%;
	border: 1px solid #999999;
	/*+border-radius:var(--radius);*/
	-moz-border-radius: var(--radius);
	-webkit-border-radius: var(--radius);
	-khtml-border-radius: var(--radius);
	border-radius:var(--radius);
	padding: 15px;
	height: 50px;
	margin-bottom: 15px;
}

.dialog__form .btn
{
	width: 100%;
	margin-bottom: 25px;
}

@media (min-width: 990px)
{
	.dialog__field
	{
		height: 75px;
		margin-bottom: 25px;
	}
}

/*Comment*/
@keyframes show-dialog
{
	from
	{
		opacity: 0;
		transform: translateY(100px);
	}
	
	to
	{
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes hide-dialog
{
	from
	{
		opacity: 1;
		transform: translateY(0px);
	}
	
	to
	{
		opacity: 0;
		transform: translateY(100px);
	}
}

@keyframes show-dialog-from-left
{
	from
	{
		opacity: 0;
		transform: translateX(-200px);
	}
	
	to
	{
		opacity: 1;
		transform: translateX(0px);
	}
}

@keyframes hide-dialog-to-left
{
	from
	{
		opacity: 1;
		transform: translateX(0px);
	}
	
	to
	{
		opacity: 0;
		transform: translateX(-200px);
	}
}

@keyframes show-backdrop
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}

@keyframes hide-backdrop
{
	from
	{
		opacity: 1;
	}
	
	to
	{
		opacity: 0;
	}
}

@media (min-width: 990px)
{
	@keyframes show-backdrop
	{
		from
		{
			opacity: 0;
		}
		
		to
		{
			opacity: 1;
		}
	}
	
	@keyframes hide-backdrop
	{
		from
		{
			opacity: 1;
		}
		
		to
		{
			opacity: 0;
		}
	}
}