/**
 * Modal
 *
 */
.nf-modal {
	--nf-dialog-padding:	30px;
	--nf-text-color:		#3e3e3e;
	width:					100%;
	height:					100%;
	position:				fixed;
	inset:					0;
	background:				transparent;
	align-items:			center;
	justify-content:		center;
	transition:				background .5s ease-in-out;
	display:				flex;
	font-weight:			300;
	color:					var( --nf-text-color );
	z-index:				1000000;
}


.nf-modal .nf-modal-dialog {
	background:		var( --nf-white );
	width:			650px;
	max-width:		100%;
	max-height:		80vh;
	margin:			20px;
	padding:		var( --nf-dialog-padding );
	display:		flex;
	flex-direction:	column;
	opacity:		0;
	/* transform:		translateY( -10% ) matrix3d( 1, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1, 0, 0, 0, 0, 1 ); */
	transform:		translateY( -10% );
	transition:		all var( --nf-modal-trs ) ease-in-out;
	box-shadow:		0 9px 30px -10px rgb( 0 0 0 / 45% );
	border-radius:	var( --nf-modal-radius );
	position:		relative;
}
.nf-modal .nf-modal-dialog > * {
	opacity: 0;
	transform: translateY( -10px );
	transition: all 200ms ease, transform 1s cubic-bezier( 0, 0.63, 0.29, 1 );
	will-change: opacity, transform;
}

.nf-modal .nf-modal-dialog .nf-modal-body {
	overflow-y: auto;
}

.nf-modal .nf-modal-dialog .nf-modal-footer {
	padding-top: var( --nf-dialog-padding );
	transition: all 400ms ease;
}

/**
 * Close icon
 *
 */

.nf-modal .close-modal.absolute {
	position: absolute;
	top: -25px;
	right: -25px;
}

.nf-modal.text-center .close-modal {
	position: absolute;
	right: 0;
	top: 0;
}


/**
 * Open modal
 *
 */
.nf-modal.show {
	background:	rgba( 0, 0, 0, .4 );
	display: flex!important;
}

.nf-modal.show .nf-modal-dialog {
	transform:	none;
	opacity:	1;
}

.nf-modal.show .nf-modal-dialog > * {
	opacity:			1;
	transform:			none;
	transition-delay:	var( --nf-modal-trs );
}
.nf-modal.show .nf-modal-dialog .nf-modal-footer {
	transition-delay: calc( var( --nf-modal-trs ) + 100ms ), var( --nf-modal-trs )
}


@media ( prefers-reduced-motion: reduce ) {
	.nf-modal .nf-modal-dialog,
	.nf-modal .nf-modal-dialog > *,
	.nf-modal .nf-modal-dialog .nf-modal-footer {
		transition: none;
	}
}