/* App.notice toasts. The box is a manual popover so it can be raised above an open modal dialog. */

#notifier-box {

	position: fixed;

	top: 16px;

	right: 20px;

	bottom: auto;

	left: auto;

	z-index: 9999;

	display: grid;

	gap: 10px;

	width: min(340px, calc(100vw - 32px));

	height: auto;

	margin: 0;

	padding: 0;

	border: 0;

	background: none;

	color: inherit;

	overflow: visible;

}



div.message-box {

	position: relative;

	padding: 14px 48px 14px 18px;

	border: 1px solid rgba(255, 255, 255, .1);

	border-left: 3px solid var(--blue, #2baaff);

	border-radius: 14px;

	background: linear-gradient(145deg, #17294e, #1b3768);

	box-shadow: 0 18px 50px rgba(3, 9, 18, .55);

	color: #c4d0e3;

	font: 14px/1.5 DreamText, Arial, sans-serif;

	text-shadow: none;

}



div.message-box.is-error {

	border-left-color: #ff6b6b;

}



div.message-box.is-success {

	border-left-color: #4fd17c;

}



div.message-box div.error,

div.message-box div.success {

	margin: 0 0 4px;

	font: 600 15px/1.4 DreamText, Arial, sans-serif;

}



div.message-box div.error {

	color: #ff8f8f;

}



div.message-box div.success {

	color: #6fe39a;

}



div.message-box .message-close {

	position: absolute;

	top: 12px;

	right: 12px;

	width: 26px;

	height: 26px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, .35);

	border-radius: 50%;

	background: transparent;

	color: #fff;

	font: 18px/1 Arial, sans-serif;

	cursor: pointer;

	opacity: .65;

}



div.message-box .message-close:hover,

div.message-box .message-close:focus-visible {

	background: rgba(255, 255, 255, .1);

	opacity: 1;

}



div.message-box div.message-body {

	overflow-wrap: anywhere;

}



@media (max-width: 700px) {

	#notifier-box {

		top: 12px;

		right: 16px;

	}

}