/* AlertContainer */
.hourgate-alert-container {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 1.25rem;
	box-sizing: border-box;
	width: 31.25rem;
	max-height: 80vh;
	overflow-y: auto;
	z-index: var(--hourgate-popup-z-index);
	pointer-events: none;
}
@media (max-width: 48rem) {
	.hourgate-alert-container {
		width: 100vw;
		max-height: 100vh;
	}
}
@keyframes hourGateAlertSlide {
	0% {
		transform: translateY(-0.625rem) scale(0.98);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes hourGateAlertFadeOut {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(0.375rem) scale(0.98);
	}
}

.hourgate-alert {
	padding: 0.625rem 1.25rem;
	border-radius: 0.25rem;
	border: 0.0625rem solid;
	animation: hourGateAlertSlide 0.28s ease-out;
	position: relative;
	box-shadow: 0 0.375rem 1.125rem rgba(15, 23, 42, 0.14);
	pointer-events: auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hourgate-alert:hover {
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.2);
}

.hourgate-alert.hourgate-alert-leaving {
	animation: hourGateAlertFadeOut 0.22s ease-in forwards;
	pointer-events: none;
}
.hourgate-alert svg {
	position: absolute;
	top: 0.3125rem;
	right: 0.3125rem;
	cursor: pointer;
	font-size: 1.125rem;
	opacity: 0.6;
}
.hourgate-alert svg:hover {
	opacity: 1;
}
.hourgate-alert-success {
	background-color: #f6ffed;
	border-color: #b7eb8f;
	color: #389e0d;
}
.hourgate-alert-info {
	background-color: #e6f7ff;
	border-color: #91d5ff;
	color: #1966da;
}
.hourgate-alert-warning {
	background-color: #fffbe6;
	border-color: #ffe58f;
	color: #d48806;
}
.hourgate-alert-error {
	background-color: #fff1f0;
	border-color: #ffa39e;
	color: #cf1322;
}