/* ModalPopup */
@keyframes hourGateModalSlideDown {
	from {
		transform: translateY(-1.5rem);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.hourgate-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	z-index: var(--hourgate-popup-z-index);
}
.hourgate-modal-content {
	position: relative;
	box-sizing: border-box;
	animation: hourGateModalSlideDown 0.2s ease-out forwards;
	background-color: #fff;
	padding: 1.25rem;
	margin-top: 10vh;
	border-radius: 0.3125rem;
	box-shadow: 0rem 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
	width: 37.5rem;
	max-width: calc(100% - 2rem);
	max-height: 80vh;
	overflow-y: auto;
}
.hourgate-modal-small {
	width: 25rem;
}
.hourgate-modal-large {
	width: 50rem;
}
.hourgate-modal-content:focus {
	outline: none;
}
.hourgate-modal-title {
	margin: 0 2.5rem 1rem 0;
	font-size: 1.125rem;
	line-height: 1.4;
}
.hourgate-modal-close-icon {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	cursor: pointer;
	font-size: 1.5rem;
	color: rgba(0, 0, 0, 0.55);
}
.hourgate-modal-close-icon:hover {
	color: rgba(0, 0, 0, 0.85);
}
.hourgate-modal-close-icon:focus-visible {
	outline: 0.125rem solid var(--hourgate-primary-color);
}

@media (prefers-reduced-motion: reduce) {
	.hourgate-modal-content {
		animation: none;
	}
}