@keyframes openDialog {
	from {
		opacity: 0; translate: 0 -20px;
	}
	to {
		opacity: 1; translate: 0 0;
	}
}
@keyframes closeDialog {
	to {
		opacity: 0; translate: 0 -20px;
	}
}
body .dialog {
    isolation: isolate;
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 150;
}

body dialog,
body .dialog {
	border: none; padding: 0;
	overflow: visible;
	border-radius: 10px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
body dialog > .dialog-wrapper,
body .dialog > .dialog-wrapper {
	width: calc(100vw - 120px); max-width: 1100px;
	padding: clamp(20px, 4.5vw, 80px);
	position: relative;
}
body dialog > .dialog-wrapper *,
body .dialog > .dialog-wrapper * {
	color: black;
}
body .fl-page dialog > .btn_close,
body .fl-page .dialog .btn_close {
	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; width: 50px; height: 50px;
	background-color: transparent;
	font-size: 40px;
	font-weight: 100;
	transform: translate(100%, -100%);
}
body .fl-page dialog > .btn_close i,
body .fl-page .dialog .btn_close i{
	color: white;
}
body dialog[open],
body .dialog.open {
	animation: openDialog 0.5s ease normal;
	-webkit-animation: openDialog 0.5s ease normal;
}
body .dialog.open {
    display: flex;
    align-items: center; justify-content: center;
}
body dialog.hideDialog,
body .dialog.hideDialog {
	animation: closeDialog 0.5s ease normal;
	-webkit-animation: closeDialog 0.5s ease normal;
}
body dialog.hideDialog::backdrop,
body .dialog.hideDialog::before {
	opacity: 0;
}
body dialog::backdrop,
body .dialog::before {
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.5s ease-in-out,
				backdrop-filter 0.5s ease-in-out,
				-webkit-backdrop-filter 0.5s ease-in-out;
}
body .dialog::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 0;
}

body dialog form input,
body .dialog form input{
	border-radius: 50px !important;
	padding: 1em 2em !important;
}
body .dialog form input[type=submit],
body dialog form input[type=submit]{
	margin-top: 20px;
}

@media only screen and (max-width: 767px){
	body .fl-page dialog > .btn_close,
	body .fl-page .dialog .btn_close {
		width: 30px; height: 30px;
		transform: translate(0, -150%);
	}
	body dialog > .dialog-wrapper,
	body .dialog > .dialog-wrapper{
		width: calc(100vw - 40px);
	}

}





/* admin dialog alterations */
#loginPopup{
	border-radius: 50px;
}
#loginPopup .dialog-wrapper{
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border-radius: 50px;
}
#loginPopup .dialog-wrapper > div{
	padding: 50px;
	aspect-ratio: 1;
	display: flex; align-items: center;
	justify-content: center; text-align:center;
	flex-direction: column;
}
#loginPopup .dialog-wrapper .saas{
	background-color: #9D0A61;
	background-image: url(https://whitevision.com/wp-content/uploads/2024/02/hero_pattern_V5.png);
	background-size: cover; background-position: center;
}
#loginPopup .dialog-wrapper .saas,
#loginPopup .dialog-wrapper .saas h2{
	color: white;
}
#loginPopup .dialog-wrapper .saas .fl-button{
	background-color: black;
}
#loginPopup .dialog-wrapper .saas .fl-button-text{
	color: white;
	transition: color 300ms ease-in-out;
}
#loginPopup .dialog-wrapper .saas .fl-button:hover{
	background-color: white;
}
#loginPopup .dialog-wrapper .saas .fl-button:hover .fl-button-text{
	color: black;
}

#loginPopup .dialog-wrapper .portal .fl-button{
	background-color: #FCC214;
	border-color: #FCC214;
}
#loginPopup .dialog-wrapper .portal .fl-button:hover{
	background-color: white;
	border-color: black;
}
#loginPopup .dialog-wrapper .portal .fl-button:hover .fl-button-text{
	color: black;
}



.dialog.user_popup .dialog-wrapper{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 50px;
	background-color: white;
	border-radius: 50px;
}
.dialog.user_popup .image{
	width: 100%; height: auto;
	aspect-ratio: 4/5;
	border-bottom-left-radius: 50px;
	overflow: hidden;
}
.dialog.user_popup .image img{
	object-fit: cover; object-position: center;
	width: 100%; height: 100%;
}

@media only screen and (min-width: 993px){
	#loginPopup .dialog-wrapper .mobile{
		display: none;
	}
}
@media only screen and (max-width: 992px){
	#loginPopup .dialog-wrapper{
		grid-template-columns: 1fr;
	}
	#loginPopup .dialog-wrapper > div{
		aspect-ratio: unset;
		text-align: left;
	}
	#loginPopup .dialog-wrapper > div > *:not(.mobile){
		display: none;
	}
	.dialog.user_popup .dialog-wrapper{
		grid-template-columns: 1fr;
	}
	.dialog.user_popup .dialog-wrapper .image{
		display: none;
	}
}