@keyframes openDialog {
	from {
		opacity: 0; translate: 0 -20px; backdrop-filter: blur(0px);
	}
	to {
		opacity: 1; translate: 0 0; backdrop-filter: blur(4px);
	}
}
@keyframes closeDialog {
	to {
		opacity: 0; translate: 0 -20px; backdrop-filter: blur(0px);
	}
}

body dialog {
	border: none; padding: 0; border: none;
}
body dialog > .dialog-wrapper {
	max-width: 1240px;
	padding: clamp(20px, 4.5vw, 80px);
}
body .fl-page dialog > button {
	position: absolute; top: 0; right: 0; left: auto; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	border-radius: 0; border: none;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	width: 50px; height: 50px;
}
body dialog[open] {
	animation: openDialog 0.5s ease-in-out normal;
	-webkit-animation: openDialog 0.5s ease-in-out normal;
}
body dialog.hideDialog {
	animation: closeDialog 0.5s ease-in-out normal;
	-webkit-animation: closeDialog 0.5s ease-in-out normal;
}
body dialog.hideDialog::backdrop {
	animation: fadeOut 0.5s ease-in-out forwards;
}
body dialog::backdrop {
	background: rgba(118, 3, 34, 0.50);
	backdrop-filter: blur(8px);
    opacity: 0;
	animation: fadeIn 0.5s ease-in-out forwards;
}

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

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

dialog.user_popup[open] {
    max-height: 100vh;
	height: 100vh;

	display: flex;
    flex-direction: column;
}

.user_popup {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
    border: none;
    padding: 0;
    background: white;
    height: 100vh;
    overflow-y: auto;
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
	left: unset;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    transform-origin: right center;
}

#fl-page-esl .user_popup .gfield_label.gform-field-label{
	display: none;
}


#fl-page-esl .user_popup .gform_wrapper .gfield input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']), #fl-page-esl .user_popup .pp-gf-content .gform_wrapper .gfield textarea, #fl-page-esl .user_popup .gform_wrapper.gravity-theme .gfield textarea.medium {
    transition: all 250ms ease-in-out;
    background: #fff;
    padding-inline: 20px;
}

#fl-page-esl .user_popup .gform_wrapper{
	position: relative;
	margin-top: 40px;
}

.user_popup .dialog-wrapper {
    width: 100%;
    height: 100%;
    padding: clamp(20px, 4.5vw, 80px);
    box-sizing: border-box;
    background-color: white;
    position: relative;
    z-index: 1;
}

.user_popup .dialog-wrapper::before{
    width: 100%;
	max-width: 50%;
    height: 100%;
    background-color: #C5C9CA;
    opacity: 12%;
    clip-path: polygon(0% 0%, 100% 0%, 15% 35%, 100% 100%, 0% 100%);
    position: absolute;
    content: '';
    top: 0; left: 0;
    pointer-events: none;
	z-index: 0;
}

.user_popup > .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
	background-color: #E4B9C1;
    border: none;
    appearance: none;
    width: 55px;
    height: 55px;
    cursor: pointer;
	opacity: 1;
	padding: 15px;
	transition: all 250ms ease-in-out;
}

.user_popup > .close-btn span{
	color: #760322;
}

.user_popup > .close-btn:hover {
    background-color: #760322;
}
.user_popup > .close-btn svg path{
	transition: all 250ms ease-in-out;
}

.user_popup > .close-btn:hover svg path{
	fill: #fff;
}

.user_popup .dialog-wrapper h1,
.user_popup .dialog-wrapper h2,
.user_popup .dialog-wrapper h3,
.user_popup .dialog-wrapper h4,
.user_popup .dialog-wrapper h5,
.user_popup .dialog-wrapper h6 {
	margin-bottom: 40px;
}

#fl-page-esl .user_popup .gform_footer a.esl-button{
	padding: 15px 50px;
	margin-top: 20px;
	text-decoration: none;
}

@media (max-width: 768px) {
    .user_popup {
        max-width: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
    }

	#fl-page-esl .user_popup .dialog-wrapper{
		padding: 60px 20px 55em 20px;
	}

	#fl-page-esl .user_popup .gform_wrapper{
		margin-top: 20px;
	}

	.user_popup .dialog-wrapper h1,
	.user_popup .dialog-wrapper h2,
	.user_popup .dialog-wrapper h3,
	.user_popup .dialog-wrapper h4,
	.user_popup .dialog-wrapper h5,
	.user_popup .dialog-wrapper h6 {
		margin-bottom: 20px;
	}

	.user_popup > .close-btn{
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		padding: 10px;
	}
}