

/* block */


.modal_overflow
{
	overflow-y: hidden;
}
.modal
{
	display: unset;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	background-color: rgba(var(--c-black) / .90);
	z-index: 5;
}
.modal:not(.modal_active):not(.modal_load)
{
	display: none;
}
.modal__wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
/*	max-width: calc(var(--limiter) + var(--limiter-padding) * 2);*/
	max-width: calc(var(--limiter));
	min-height: 100%;
	margin-inline: auto;
	padding-top: calc(var(--gap) * 2);
	padding-bottom: calc(var(--gap) * 2);
	padding-inline: var(--limiter-padding);
}
.modal_medium .modal__wrapper {
/*	max-width: calc(var(--limiter-medium) + var(--limiter-padding) * 2);*/
	max-width: calc(var(--limiter-medium));
}
.modal_small .modal__wrapper {
/*	max-width: calc(var(--limiter-small) + var(--limiter-padding) * 2);*/
	max-width: calc(var(--limiter-small));
}
.modal_auto .modal__wrapper {
	max-width: unset;
}
.modal_auto .modal__container {
	width: auto;
}
.modal__container {
	width: 100%;
/*	max-width: var(--content-limit);*/
/*	background-color: rgba(var(--c-white) / 1);*/
	background-color: rgba(var(--c-black) / 1);
	color: rgba(var(--c-white) / 1);
/*	background-image: url(../img/plate-bg.webp);*/
/*		background-size: 480px;*/
/*		background-repeat: repeat;*/
/*		background-position: center top;*/
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
}
.modal__container {
    box-shadow: 0px 2px 8px rgba(var(--c-white) / .125);
    border: solid .5px rgba(var(--c-white) / .25);
}
.modal_fit .modal__container{
	width: auto;
}
.modal_fill .modal__container{
	width: 100%;
}
.modal__content
{
	padding: calc(var(--gap-big)) calc(var(--gap) * 4);
	display: grid;
	gap: var(--gap);
}
.modal__x {
	display: block;
	position: relative;
}
.modal__x::after
{
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	content: "\f00d";
/*	content: "\f00d";*/
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--gap) * 1.5 + var(--gap));
	height: calc(var(--gap) * 1.5 + var(--gap));
	font-size: calc(var(--gap) * 1.5);
	cursor: pointer;
	z-index: 1;
}
.modal__footer {
	text-align: center;
}
.modal__footer {
	position: relative;
}
.modal__footer .modal__close {
	position: absolute;
	transform: translateX(-50%);
}
.modal__footer .modal__close {
	text-decoration: underline;
	cursor: pointer;
	opacity: .5;
}
.modal__footer .modal__close:hover {
	opacity: .75;
}




.modal.modal_load {
	animation: modal-bg-open .2s ease-in forwards;
}
@keyframes modal-bg-open {
	0% {
		display: none;
		left: -999999px;
		background-color: transparent;
	}
	0.001% {
		display: block;
		left: 0;
		background-color: transparent;
	}
	100% {
		left: 0;
		background-color: rgba(var(--c-black) / .70);
/*		background-color: rgba(var(--c-black-dark), .90);*/
	}
}




.modal.modal_load:not(.modal_active){
	animation: modal-bg-close .2s ease-in forwards ;
}
@keyframes modal-bg-close {
	0% {
		left: 0;
		background-color: rgba(var(--c-black) / .70);
/*		background-color: rgba(var(--c-black-dark), .90);*/
	}
	99.999% {
		display: block;
		left: 0;
		background-color: transparent;
	}
	100% {
		display: none;
		left: -999999px;
		background-color: transparent;
	}
}




.modal.modal_load .modal__container {
	animation: modal-container-open .3s ease-out forwards;
}

@keyframes modal-container-open {
	0% {
		opacity: 0;
		transform: translateY(10vh);
		transform: translateY(10svh);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(0%);
	}
}




.modal.modal_load:not(.modal_active) .modal__container {
	animation: modal-container-close .3s ease-out forwards;
}

@keyframes modal-container-close {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	50% {
/*		opacity: 0;*/
	}
	100% {
		opacity: 0;
		transform: translateY(10vh);
		transform: translateY(10svh);
	}
}

/* /block */