@keyframes openDialog {
	from {
		opacity: 0;
		translate: 0 -20px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes closeDialog {
	to {
		opacity: 0;
		translate: 0 -20px;
	}
}

body:has(dialog[open]) {
	overflow: hidden;
}

body dialog {
	border: none;
	padding: 0;
	border: none;
	background: transparent;
	overflow-x: clip;
	overflow-y: auto;
}

body dialog>svg {
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: pointer;
	height: 13px;
	width: 13px;
	z-index: 2;
}

body dialog>svg path {
	transition: fill 0.3s ease-in-out;
}

/* body dialog>svg:hover path {
	fill: #C5FF86;
} */

body dialog>.dialog-wrapper {
	width: calc(100vw - 40px);
	max-width: 840px;
}

body dialog[open] {
	animation: openDialog 0.5s ease normal;
	-webkit-animation: openDialog 0.5s ease normal;
}

body dialog.hideDialog {
	animation: closeDialog 0.5s ease normal;
	-webkit-animation: closeDialog 0.5s ease normal;
}

body dialog.hideDialog::backdrop {
	opacity: 0;
	background-color: rgba(5, 13, 50, 0);
}

body dialog::backdrop {
	transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
	opacity: 1;
	background-color: rgba(5, 13, 50, 0.8);
}

body dialog>.dialog-wrapper .dialog-content {
	position: relative;
	z-index: 1;
}