/* attention.css */
:root {
	--attention-bg: #ffffff;
	--attention-text: #172033;
	--attention-muted: #5a667a;
	--attention-border: rgba(23, 32, 51, 0.14);
}

#messages,
.attention_messages {
	position: fixed;
	top:calc(var(--header-height) + var(--margin-s));
	right:var(--margin-s);
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(380px, calc(100vw - 36px));
	pointer-events: none;
}

.attention {
	box-sizing: border-box;
	color: var(--attention-text);
}

.attention_message {
	pointer-events: auto;
	position: relative;
	padding: 12px 42px 12px 14px;
	background: var(--blue);
	color:var(--white);
	border-radius: var(--radius-tight);
	box-shadow:var(--shadow);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 260ms ease, transform 260ms ease;
}

.attention_message.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.attention_message.is-dismissing {
	opacity: 0;
	transform: translateY(-8px);
}

.attention_message p {
	margin: 0;
}

.attention_message.green,
.attention_message.good,
.attention_message.success,
.attention_message.positive {
	background-color: var(--attention-success);
}

.attention_message.warning {
  	background-color: var(--attention-warning);
}

#messages .attention_message.bad,
#messages .attention_message.red,
#messages .attention_message.danger,
#messages .attention_message.negative,
#messages .attention_message.error {
	background-color: var(--attention-danger);
}

.attention_close {
	cursor: pointer !important;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index:20000;
	padding:0px;
	margin:var(--margin-xs);
	min-width:0px;
	min-height:0px;
	height:18px;
	width:18px;
	box-shadow:none;
	font-weight:bold;
}

	.attention_close svg {
		height:18px !important;
		width:18px !important;
	}

.attention_message .attention_close,
.attention_message .close-btn {
	font-size: 24px;
	opacity: 0.65;
}

.attention_message .attention_close:hover,
.attention_message .close-btn:hover {
 	opacity: 1;
}

.attention_overlay {
	position: fixed;
	inset: 0;
	z-index: 9100;
	background: rgba(15, 23, 42, 0.46);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.attention_overlay.is-visible {
	opacity: 0;
	pointer-events: auto;
}

.attention.attention_popup.neutral,
.attention.attention_popup.danger,
.attention.attention_popup.success,
.attention.attention_popup {
	background: rgba(0,0,0,.15) !important;
}

.attention_popup {
	position: fixed;
	inset: 0;
	z-index: 9110;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(0.985);
	transition: opacity 180ms ease, transform 180ms ease;
}

.attention_popup.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.attention_popup_panel {
	position: relative;
	width: 60vw;
	min-width:320px;
	height:auto;
	padding: 24px;
	background: var(--white);
	border-radius: var(--radius-tight);
	border:1px solid var(--orange);
	outline:2px solid white;
	box-shadow:var(--shadow);
}

.attention_popup_x {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 22px;
	opacity: 0.65;
}

.attention_title {
	color:var(--gray-1) !important;
	font-family:var(--body-font) !important;
	font-size: 18px !important;
	font-weight:bold;
	border-bottom:none !important;
	margin:0;
	padding:0;
}

.attention_body {
	color: var(--attention-muted);
	line-height: 1.45;
	margin-bottom:10px;
}

.attention_actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
	height:44px;
}

	.attention_actions button.attention_button:first-child{
		position:absolute;
		right:0px;
		background-color:var(--blue) !important;
	}
	
	.attention_actions button.attention_button:last-child{
		position:absolute;
		left:0px;
		background-color:var(--red) !important;
	}

.attention_button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 15px;
	border-radius: var(--radius-tight);
	border: 1px solid var(--attention-border);
	background: #f8fafc;
	color: var(--white);
	text-decoration: none;
	cursor: pointer;
	font: inherit;
}

.attention_button.info,
.attention_button.success,
.attention_button.warning,
.attention_button.danger {
	color: #fff;
	border-color: transparent;
}

.attention_button.info { background: var(--attention-info); }
.attention_button.success { background: var(--attention-success); }
.attention_button.warning { background: var(--attention-warning); }
.attention_button.danger { background: var(--attention-danger); }

.attention_tooltip {
	display:block;
	position: fixed;
	z-index: 9200;
	max-width: 280px;
	padding: 8px 10px;
	background: var(--gray-2) !important;
	color: #fff;
	border-radius: var(--radius-tight);
	box-shadow:var(--shadow);
	font-size: 0.88rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
}

.attention_tooltip.large {
	max-width: min(520px, calc(100vw - 24px));
	padding: 14px 16px;
	font-size: 0.95rem;
}

.attention_tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.tooltip_small {
}

td .tooltip_small svg,
td .tooltip_large svg {
	opacity:.33;
	height:10px;
	width:10px;
	position:relative;
	left:4px;
	top:2px;
}

h2 .tooltip_small svg,
h2 .tooltip_large svg {
	height:22px;
	width:22px;
	position:relative;
	top:3px;
	left:6px;
	opacity:.33;
}

h3 .tooltip_small svg,
h3 .tooltip_large svg {
	height:16px;
	width:16px;
	position:relative;
	top:3px;
	left:6px;
	opacity:.33;
}

.tooltip_small svg:hover,
.tooltip_large svg:hover {
	opacity:1;
}

@media (prefers-reduced-motion: reduce) {
	.attention_message,
	.attention_overlay,
	.attention_popup,
	.attention_tooltip,
	.attention_popin {
	transition: none !important;
	transform: none !important;
	}
}







.attention_popin.is-visible {
	opacity: 1;
	margin:var(--margin-m) 0px;
}


.attention_popin {
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	margin:0;
	animation-delay:.5s;
	transition: max-height 1s ease, opacity 1s ease, margin 260ms ease;
}

div.pop_in_content {
	position: relative;
	width: 100%;
	padding:var(--margin-xs);
	padding-bottom:4px;
	background-color: var(--gray-10);
	border-radius: var(--radius-tight);
}

	.pop_in_content.tutorial:before {
		content:'tutorial';
		text-transform:uppercase;
		font-size:11px;
		font-weight:400;
		width:100%;
		position:absolute;
		top:6px;
		color:var(--purple);
		opacity:.66;
	}
	.pop_in_content.tutorial{
		background:var(--blue-soft);
		box-shadow:inset 1px 1px 4px var(--gray-6);
		}

	.pop_in_content.tutorial h3 {
		font-size:14px;
		color: var(--blue-dark) !important;
		max-width:90%;
		margin-top:10px;
	}

	div.pop_in_content p {
		font-size: 15px;
		line-height: 21px;
		color:var(--gray-1);
		margin-bottom: var(--margin-xs);
		max-width:90%;
	}
	
	.tutorial_close svg{
		color:var(--blue);
	}