:root {
	--info-fill: #f7f8ff;
	--info-border: #a4d0ff;
	--info-text: #899199;

	--error-fill: #fff8f8;
	--error-border: #f1a8a8;
	--error-text: #b75d5d;
}

.alert {
	display: none;
	border-radius: 3px;
	position: fixed;
	left: 50%;
	top: -5rem;
	/* top: -4rem; */
	/* top: 0; */
	transform: translate(-50%, 35vh);
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	width: min(90%, 43em);
}

/* .alert span {
	display: flex;
	min-height: 3em;
	padding: 0.5em 1em;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	text-transform: lowercase;
	font-weight: 600;
	text-align: center;
	font-family: 'Avenir Light', sans-serif;
}

.alert.info {
	background-color: var(--info-fill);
	border: 3px solid var(--info-border);
	color: var(--info-text) !important;
}

.alert.error {
	background-color: var(--error-fill);
	border: 3px solid var(--error-border);
	color: var(--error-text) !important;
} */