#msgbox-container {
	--msgbox-marginTop: var(--gap);
	--msgbox-paddingTop: var(--gap-2);
	--msgbox-lineHeight: 1.2em;

	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	z-index: var(--msgbox-zIndex);
} #msgbox-container .msgbox {
	display: flex;
	align-items: flex-end;
	margin-top: calc(var(--msgbox-lineHeight) + var(--msgbox-paddingTop) * 2) * -1;
	height: 0;
	opacity: 1;
	transition-property: margin, height, opacity;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
} #msgbox-container .msgbox.show {
	margin-top: var(--msgbox-marginTop);
	height: 3em;
} #msgbox-container .msgbox.hide {
	margin-top: 0;
	height: 0;
	opacity: 0;
} #msgbox-container .msgbox div {
	--bd-color: var(--theme-color);

	background-color: var(--sub-bg-color);
	border: 1px solid var(--bd-color);
	width: 100%;
	min-width: 10em;
	max-width: var(--width);
	border-radius: var(--gap-2);
	padding: var(--msgbox-paddingTop) var(--gap);
	line-height: var(--msgbox-lineHeight);
	text-align: center;
} #msgbox-container .msgbox div.success {
	--bd-color: var(--success-color);
} #msgbox-container .msgbox div.warning {
	--bd-color: var(--warning-color);
} #msgbox-container .msgbox div.error {
	--bd-color: var(--error-color);
}