.zmodal_window {
  display: none;
}

.zmodal_window.is_open {
  display: block;
}

.zmodal_overlay {
	position: fixed;
	z-index: 7022;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(16,25,35,.87);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
}

.zmodal {
	--padding: 34px;
	--header-height: 50px;
	background-color: #fff;
	width: 100%;
	max-width: 800px;
	/*max-height: 100vh;*/
	max-height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	box-shadow: rgb(0,0,0,.3) 0 8px 18px;
}

.zmodal_header {
	padding: 0 var(--padding);
	display: flex;
	align-items: center;
	font-size: 18px;
	/*flex: 0 0 0%;*/
	flex: 0 0 var(--header-height);
	position: sticky;
}

.zmodal_inner {
	flex: 1 1 auto;
	overflow: auto;
	/*-webkit-overflow-scrolling: touch;*/
	padding: var(--padding);
	padding-bottom: 0;
	margin-bottom: var(--padding);
	/*margin-top: var(--padding);*/
}

.zmodal_content {
	margin-top: calc(-1 * var(--padding));
	display:none; /* пока этот блок без обертки - он скрыт */
}

.zmodal_inner .zmodal_content { 
	display:block;
}

button.zmodal_close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	text-align: center;
	font-family: Arial,sans-serif;
	background: none;
	color: #333;
	border: none;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.zmodal_close * {
	pointer-events:none;
}

.zmodal_close svg.zmodal_close_mobile {
	height: 16px;
	width: 16px;
	display: none;
	fill: currentcolor;
}

.zmodal_close svg.zmodal_close_desktop {
	height: 18px;
	width: 18px;
	display: block;
	fill: none;
	stroke: currentcolor;
	stroke-width: 3;
	display: none;
}

.zmodal_close span.zmodal_close_desktop {
	font-size: 20px;
	line-height: 1;
	font-family: Arial,sans-serif;
}


.zmodal_loader {
	display:none;
	position: relative;
	margin: 0 auto;
}

.zmodal_loader:after {
	content: '';
	position: absolute;
	width: 38px;
	height: 8px;
	left: 50%;
	top: 50%;
	margin-left: -19px;
	margin-top: -3px;
	/*background: url(/i/loader.svg) center no-repeat;*/
	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' xml:space='preserve'%3E%3Ccircle fill='%23666' stroke='none' cx='4' cy='4' r='4'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.1'/%3E%3C/circle%3E%3Ccircle fill='%23666' stroke='none' cx='19' cy='4' r='4'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.2'/%3E%3C/circle%3E%3Ccircle fill='%23666' stroke='none' cx='34' cy='4' r='4'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.3'/%3E%3C/circle%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}


/* noclose-режим */

.zmodal.noclose .zmodal_header {
	display:none;
}

.zmodal.noclose .zmodal_inner {
	margin-top: var(--padding);
}


/* animation */

@keyframes loaded_ani {
	from {transform: translateY(35%) scale(0.8);opacity:0; }
	to { transform: translateY(0) scale(1);opacity:1; }
}
	
@keyframes mmfadeIn {
	from { opacity: 0; }
	  to { opacity: 1; }
}

@keyframes mmfadeOut {
	from { opacity: 1; }
	  to { opacity: 0; }
}

@keyframes mmslideIn {
  	from { 
		-webkit-transform: translateY(35%) scale(0.8); 
		transform: translateY(35%) scale(0.8); 
	}
	to { 
		-webkit-transform: translateY(0) scale(1); 
		transform: translateY(0) scale(1); 
	}
}

@keyframes mmslideOut {
	from { 
		-webkit-transform: translateY(0) scale(1); 
		transform: translateY(0) scale(1); 
	}
	to { 
		-webkit-transform: translateY(35%) scale(0.9); 
		transform: translateY(35%) scale(0.9); 
	}
}


/* animation mobile */

@keyframes mmslideIn_mobile {
  	from {transform: translateY(50%);}
	to {transform: translateY(0);}
}

@keyframes mmslideOut_mobile {
	from {transform: translateY(0);opacity:1;}
	to {transform: translateY(70%);opacity:0;}
}

/* animation mobile iOS */
/*
@-webkit-keyframes mmslideIn_mobile {
	from {-webkit-transform: translateY(50%);}
  	to {-webkit-transform: translateY(0);}
}

@-webkit-keyframes mmslideOut_mobile {
  	from {-webkit-transform: translateY(0);opacity:1;}
  	to {-webkit-transform: translateY(70%);opacity:0;}
}
*/


/* zmodal_overlay */
.zmodal_window[aria-hidden="false"] .zmodal_overlay {
  animation: mmfadeIn .2s;
}

.zmodal_window[aria-hidden="true"] .zmodal_overlay {
  animation: mmfadeOut .2s;
}


/* zmodal */

.zmodal_window[aria-hidden="false"] .zmodal {
  animation: mmslideIn .3s;
}

.zmodal_window[aria-hidden="true"] .zmodal {
  animation: mmslideOut .3s;
}


/* ajax loader */
.zmodal_window.loading .zmodal_header,
.zmodal_window.loading .zmodal_inner {
	display:none;
}

.zmodal_window.loaded .zmodal {
	animation: loaded_ani .3s;
}
	
.zmodal_window.loading .zmodal_loader {
	display:block;
}
	
	
/*
.zmodal_window .zmodal_overlay {
  will-change: transform;
}
*/



/* media */

@media (max-width:600px){
	
	/* анимация на мобильных */
	
	.zmodal_window[aria-hidden="false"] .zmodal_overlay {
		animation: mmfadeIn .2s forwards;
	}

	.zmodal_window[aria-hidden="true"] .zmodal_overlay {
		animation: mmfadeOut .2s;
	}

	.zmodal_window[aria-hidden="false"] .zmodal {
		animation: mmslideIn_mobile .5s forwards;
	}
	
	.zmodal_window[aria-hidden="true"] .zmodal {
	  animation: mmslideOut_mobile .5s;
	}

	.zmodal_overlay {
		padding: 0;
		padding-top: 12px;
		align-items: flex-end;
		background: rgba(16,25,35,.7);
	}
	
	.zmodal {
		--padding: 24px;
		--header-height: 60px;
		box-shadow: none;
		max-width: none;
		border-radius: 12px 12px 0 0;
		width: 100%;
		height: auto;
		/*transform: translateY(50%) scale(1);*/
	}
	
	.zmodal_inner {
		padding: var(--padding);
		margin-bottom: 0;
		margin-top: 0;
		max-height: calc(100vh - 12px - var(--header-height));
	}
	
	.zmodal_header {
		flex: 0 0 var(--header-height);
	}
	
	.zmodal_close {
		right: auto;
		left: 15px;
		top: 15px;
	}
	
	.zmodal_close svg.zmodal_close_mobile {
		display: block;
	}
	
	
	.zmodal_close .zmodal_close_desktop {
		display: none;
	}

}