:root {
	--jjll-modal-close-button-top: 32px;
	--jjll-modal-close-button-right: 32px;
	--jjll-modal-close-button-width: 24px;
}
@keyframes showModal {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	99% {
	}
	100% {
		display: block;
		opacity: 1;
	}
}
@keyframes hideModal {
	0% {
		display: block;
		opacity: 1;
	}
	1% {
	}
	99% {
		display: block;
		opacity: 0;
	}
	100% {
		display: none;
		opacity: 0;
	}
}
.jjll-modal-bkgd {
	/* Set background properties, but background is hidden by default */
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 80000;
	background-color: rgba(0, 0, 0, 1.0);
	/* TODO: Blur */
	opacity: 0;
}
.jjll-modal {
	--margin-horz: 0px;
	--margin-vert: 0px;
	--padding-horz: 12%;
	--padding-vert: 8%;
	/* TODO: */
	/* Set preferred and max size */
	/* Center in viewport */
	/* Transition in/out? */
	/* Hide overflow (overflow-y will scroll within .jjll-modal-conent) */
	position: fixed;
	top: var(--margin-vert);
	left: var(--margin-horz);
	width: 100vw;
	max-width: calc(100vw - (2 * var(--margin-horz)));
	height: 100vh;
	max-height: calc(100vh - (2 * var(--margin-vert)));
	margin: 0;
	padding: max(var(--padding-vert), calc(var(--jjll-modal-close-button-top) + var(--jjll-modal-close-button-width) + 10px)) var(--padding-horz) 0px var(--padding-horz);
	opacity: 0;
	z-index: -99999;
	box-sizing: border-box;
	background-color: #ffffff;
	/* transition: opacity 0.2s ease; */
	/* animation: hideModal 0.2s forwards; */
}
/* Modal visible */
.jjll-modal.visible {
	opacity: 1;
	z-index: 90000;
	/* animation: showModal 0.2s forwards; */
}
/* Prevent scrolling */
body:has(.jjll-modal.visible) {
	overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
body:has(.jjll-modal.visible) .jjll-modal-bkgd {
	/* Show background */
	opacity: 1;
}

.jjll-modal-close-button {
	position: absolute;
	top: var(--jjll-modal-close-button-top);
	right: var(--jjll-modal-close-button-right);
	width: var(--jjll-modal-close-button-width);
	height: var(--jjll-modal-close-button-width);
	margin: 0;
	padding: 0;
	z-index: 99999;
	background-color: #1983C6;
	border: unset;
	mask-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%20123)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M10.6%2C8l4.7-4.7c.4-.4.4-1%2C0-1.4l-1.1-1.1c-.4-.4-1-.4-1.4%2C0l-4.7%2C4.7L3.3.7c-.4-.4-1-.4-1.4%2C0L.7%2C1.8c-.4.4-.4%2C1%2C0%2C1.4l4.7%2C4.7L.7%2C12.7c-.4.4-.4%2C1%2C0%2C1.4l1.1%2C1.1c.4.4%2C1%2C.4%2C1.4%2C0l4.7-4.7%2C4.7%2C4.7c.4.4%2C1%2C.4%2C1.4%2C0l1.1-1.1c.4-.4.4-1%2C0-1.4l-4.7-4.7Z%22%2F%3E%0A%3C%2Fsvg%3E');
	mask-size: contain;
	mask-position: center;
}
.jjll-modal-close-button:hover {
	cursor: pointer;
}
.jjll-modal-content {
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	/* TODO: Hide scroll bars? Maybe not unless it is asked for */

	/* Hide scrollbar for IE, Edge and Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;     /* Firefox */
}
/* Chromne and Safari */
.jjll-modal-content::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
	.jjll-modal {
		padding-top: max(calc(var(--padding-vert) + var(--jjll-modal-close-button-top)), calc(var(--jjll-modal-close-button-top) + var(--jjll-modal-close-button-width) + 25px));
	}
}