body:has([data-modal].active:not([data-modal].allow-desktop-body-scroll)), body:has(dialog[open]:not(dialog.allow-desktop-body-scroll)) {
	overflow: hidden !important;
}

@media not all and (min-width:768px) {
	body:has([data-modal].active.allow-desktop-body-scroll), body:has(dialog[open].allow-desktop-body-scroll) {
		overflow: hidden !important;
	}
}

dialog {
	background-color: transparent;
	padding: 0;
	position: fixed;
	transition-duration: .2s;
	color: transparent !important;
}

dialog {
	--tw-text-opacity: 1;
	color: rgb(65 40 20/var(--tw-text-opacity));
}

@media not all and (min-width:768px) {
	dialog::backdrop {
		pointer-events: none;
	}
}

dialog::backdrop {
	background-color: rgba(0,0,0,.3);
}

.z-60 {
	z-index: 60;
}

.w-full {
	width: 100%;
}

.fixed {
	position: fixed;
}

.inset-0 {
	inset: 0;
}

.bottom-0 {
	bottom: 0;
}

.max-h-none {
	max-height: none;
}

.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity));
}

.py-\[37px\] {
	padding-bottom: 37px;
	padding-top: 37px;
}

.px-\[30px\] {
	padding-left: 30px;
	padding-right: 30px;
}

.w-\[12px\] {
	width: 12px;
}

.w-\[500px\] {
	width: 500px;
}

.h-\[12px\] {
	height: 12px;
}

.h-\[20px\] {
	height: 20px;
}

.float-end {
	float: inline-end;
}

.ml-2 {
	margin-left: .5rem;
}

.animate-slide-right {
	animation: slide-right .5s ease-in-out;
}

.animate-slide-back-to-right {
	animation: slide-back-to-right .5s ease-out;
}

@keyframes slide-right {
	0% {
		transform: translateX(100%)
	}

	to {
		transform: translateX(0)
	}
}

@keyframes slide-back-to-right {
	0% {
		transform: translateX(0)
	}

	to {
		transform: translateX(100%)
	}
}