/*------------------------------------------------- NEW HINT BADGE ICON ----------------------------------------------*/

ws-icon[name="hint"] {cursor: help;width: 20px !important;height: 20px !important;padding: 0;vertical-align: middle;}
ws-icon[name="hint"] svg { fill: var(--base-txt-tertiary); width: 16px !important; height: 16px !important; }
ws-icon[name="hint"] svg use:last-child { display: none; }
ws-icon[name="hint"]:hover svg use:first-child { display: none; }
ws-icon[name="hint"]:hover svg use:last-child { display: inline; }
ws-icon[name="hint"]:hover svg { fill: var(--base-txt-alt-info) !important; }

ws-icon[name="hint-exclam"] {cursor: help;width: 20px !important;height: 20px !important;padding: 0;vertical-align: middle;}
ws-icon[name="hint-exclam"] svg { fill: var(--base-txt-notice-minor); width: 16px !important; height: 16px !important; }
ws-icon[name="hint-exclam"]:hover svg { fill: var(--base-txt-notice-major) !important; }

/*------------------------------------------------- NEW HINT BADGE ICON ----------------------------------------------*/

i.help, em.help, span.drophelp {color:var(--base-txt-alt-info); font:italic 13px/20px var(--font-serif); position:relative; cursor:help; overflow:hidden}
span.help, a.help {position:relative; cursor:help; overflow:hidden}
i.help font, em.help font, span.help font, a.help font {display:none}
#mobileHintMenu { color:var(--base-txt-secondary); font:13px/20px var(--font-base);}
#mobileHintMenu u { text-decoration:none; color:var(--base-btn-notice-minor)}
#mobileHintMenu b {color:var(--costs-money-major); font-weight:normal}

/*--------------------------------------------------------------------------------------------------------------------*/

#hint {z-index: 3000; position:fixed; left:0; top:0;}
#hint .in {
    box-sizing: border-box;padding:6px 8px;background:var(--colors-alpha-dark-80);color:var(--white-accent);font:13px/20px var(--font-base);border-radius:6px;opacity:0;
    transition:opacity 0.25s ease;-webkit-transition:opacity 0.5s ease;white-space:pre-wrap;word-break: break-word;box-shadow:0 0 2px var(--base-cont-top);max-width:350px;backdrop-filter:blur(2px);
	text-wrap: balance;
}
#hint.hint_gr .in {color:var(--white-tertiary);}
#hint.hint_wr .in {white-space:pre-wrap; width:320px;}

#hint.ar_l .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent var(--colors-alpha-dark-80) transparent transparent; left:-8px; top:calc(50% - 4px)}
#hint.ar_r .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent transparent transparent var(--colors-alpha-dark-80); right:-8px; top:calc(50% - 4px)}
#hint.ar_b .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:var(--colors-alpha-dark-80) transparent transparent transparent; bottom:-8px; left:calc(50% - 4px)}
#hint.ar_t .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent transparent var(--colors-alpha-dark-80) transparent; top:-8px; left:calc(50% - 4px)}

#hint.ar_t.ar_s .in:before, #hint.ar_b.ar_s .in:before {left:10px}
#hint.ar_t.ar_e .in:before, #hint.ar_b.ar_e .in:before {left:calc(100% - 18px)}

#hint b { font-weight:590; color:var(--white-accent); }
#hint span.gray { color:var(--white-tertiary); }
#hint small { font:12px/16px var(--font-base); }
#hint span.tag { font: 11px/16px var(--font-base);display: inline-block;border-radius:2px;padding: 0 5px;margin: 0 0 1px;background: var(--tag-bg);color: var(--tag-color); }
#hint span.red { color:var(--colors-red-600); }
#hint span.time { color: var(--costs-time-minor); }
#hint span.money { color: var(--costs-money-minor); }
#hint span.date { font:12px/16px var(--font-base); color:var(--white-muted); display:block; text-align:right; margin:10px 0 0 0; }
#hint span.yellow { color:var(--colors-yellow-100); }
#hint span.violet { color:var(--base-txt-btn-b); }
#hint span.green { color:var(--colors-pine-500); }
#hint span.blue { color:var(--colors-interblue-600); }
#hint span.upgrade { color:var(--base-btn-notice-minor); font:14px/16px bold var(--font-base); }
#hint span.hkey { border:1px solid var(--white-primary); padding:1px 4px; border-radius:3px; font: 11px / 20px var(--font-base); }
#hint .note_normal { font-size:12px; color:var(--base-txt-accent); }
#hint .nowrap { white-space:pre-wrap; min-width:0; max-width:300px; }
#hint .nowrap2 { white-space:pre-wrap; max-width:300px; }
#hint.hint_hp .in { white-space:normal; width:200px; }
#hint.hint_hpb .in { width:320px; }
#hint.hint_hp u { text-decoration:none; color:var(--colors-yellow-100)}
#hint.hint_hp b {color:var(--colors-teal-desat-400); font-weight:normal}
#hint font.h { display:block; padding:5px 0;font:bold 14px/20px var(--font-base);margin: 0 0 -25px;}
#hint .in ws-icon.inline_ico { --icon-color: var(--white-accent); }
#hint.hint_w .in { background:var(--hint-w-bg); box-shadow:var(--shadow-brd-enable);backdrop-filter: blur(6px);max-width:480px }
#hint.hint_w.hint_wm .in { background:var(--base-cont-mod-top); }

#hint.hint_w.ar_l .in:before { border-color:transparent var(--base-line-secondary) transparent transparent;}
#hint.hint_w.ar_r .in:before { border-color:transparent transparent transparent var(--base-line-secondary);}
#hint.hint_w.ar_b .in:before { border-color:var(--base-line-secondary) transparent transparent transparent;}
#hint.hint_w.ar_t .in:before { border-color:transparent transparent var(--base-line-secondary) transparent;}

#hint.hint_w .in { color: var(--base-txt-primary); }
#hint.hint_w b { color: var(--base-txt-primary); }
#hint.hint_w span.gray { color: var(--base-txt-tertiary); }
#hint.hint_w span.red { color:var(--base-txt-alert-major)}
#hint.hint_w span.red_opacity {color: var(--base-txt-alert-major); opacity: 0.8}
#hint.hint_w span.yellow { color:var(--base-txt-notice-minor)}
#hint.hint_w span.green { color:var(--base-btn-fresh-minor)}
#hint.hint_w span.hkey { border-color: var(--base-txt-tertiary); color: var(--colorize-lbl-txt-primary); }
#hint.hint_w span.money { color: var(--costs-money-text); }
#hint.hint_w span.time { color: var(--costs-time-text); }


#hint.w_overflow .in,
#hint.h_overflow .in {
    margin: 0 !important;
}
#hint.w_overflow .in:before,
#hint.h_overflow .in:before {
    display: none;
}

#hint .av_sm {margin: -2px 4px -2px -2px;vertical-align: bottom;transform:scale(0.8);}
#hint .av_svg {--icon-color: var(--white-accent); border-color: var(--white-accent);}
#hint .av_def0, #hint .av_def1, #hint .av_def2 {background-color:var(--white-muted); box-shadow:0 0 0 1px var(--white-muted)}
.hint_line {border-top:1px solid var(--white-muted); margin:8px 0; height:0}
.hint_nline {margin:10px 0; height:0}
.hint_txt {display:none}

#hint .hint__html {
	white-space: initial;
}
#hint .hint__title {
	--icon-color: var(--colors-alpha-light-90);
	display: flex;
	font: var(--font-ui-14-regular-semi);
	color: var(--colors-alpha-light-90);
	gap: 4px;
	padding: 4px 0;
}
#hint .hint__title-in {
	flex-grow: 1;
}
#hint .hint__html .hotKey {
	display: inline-flex;
	margin: 0;
	gap: 2px;
	flex-shrink: 0;
}
#hint .hint__html .hotKey .key {
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--colors-alpha-light-20);
	border-radius: 4px;
	background: var(--colors-alpha-light-10);
	color: var(--colors-alpha-light-90);
	text-transform: capitalize;
}
#hint .hint__divider {
	border: none;
	height: 1px;
	background-color: var(--colors-alpha-light-20);
	margin: 8px 0;
}
#hint .hint__subtitle {
	font: var(--font-ui-13-small-semi);
	color: var(--colors-alpha-light-90);
}
#hint .hint__text {
	font: var(--font-txt-13-small-reg);
	color: var(--colors-alpha-light-70);
	padding: 2px 0;
}
.hint__grid {
	display: grid;
	align-items: center;
	gap: 4px;
}
.hint__grid-2 {
	grid-template-columns: max-content max-content;
}
.hint__grid-column-end {
	justify-self: end;
}
#hint .cnt_hot {
	color: var(--colors-red-trans-600);
	border-color: var(--colors-red-trans-600);
}
#hint .cnt_warm {
	color: var(--colors-violet-trans-600);
	border-color: var(--colors-violet-trans-600);
}
#hint .cnt_all {
	color: var(--colors-graphite-600);
	border-color: var(--colors-graphite-600);
}
/* DO NOT OVERRIDE INNER content STYLE of HTML hint IT IS breaking height calculations */

#hint .hint__body {
	padding: 2px;
	width: 200px;
}
#hint .hint__title-alert {
	--icon-color: var(--colors-red-700);
	color: var(--colors-red-700);
}
#hint .hint__body .hint__text {
	display: flex;
}

/* Guide Tour colorizing and misc */
#hint.hint_tour .in {
	background: var(--colors-interblue-800);
	color: var(--white-accent);
	padding: 16px 20px 8px 20px;
	border-radius: 16px;
	box-shadow: 0 1px 1.5px -0.5px rgba(17, 74, 120, 0.40), 0 4px 8px -2px rgba(17, 74, 120, 0.25), 0 6px 16px -4px rgba(17, 74, 120, 0.20);
}

#hint.hint_tour .hint_close {
	position: absolute;
	top: 12px;
	right: 12px;
	--icon-color: var(--white-accent);
	cursor: pointer;
}

#hint.hint_tour .hint_gap {
	height: 2px;
}

#hint.hint_tour .hint_buttons {
	display: flex;
	gap: 8px;
	padding-top: 8px;
	margin: 0 -12px 0 0;

	.hint_dots {
		margin-right: auto;
		display: flex;
		gap: 4px;
		align-items: center;

		.dot {
			width: 6px;
			height: 6px;
			border-radius: 3px;
			background: var(--white-accent);

			&.opa { opacity: 0.4; }
		}
	}

	button {
		border-radius: 8px;
	}
}

#hint.hint_tour.ar_l .in:before {
	content: '';
	position: absolute;
	left: -8px;
	top: calc(50% - 8px);

	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent var(--colors-interblue-800) transparent transparent;
}

#hint.hint_tour.ar_r .in:before {
	content: '';
	position: absolute;
	right: -8px;
	top: calc(50% - 8px);

	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--colors-interblue-800);
}

#hint.hint_tour.ar_b .in:before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: calc(50% - 8px);

	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: var(--colors-interblue-800) transparent transparent transparent;
}

#hint.hint_tour.ar_t .in:before {
	content: '';
	position: absolute;
	top: -8px;
	left: calc(50% - 8px);

	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--colors-interblue-800) transparent;
}

#guide_tour_overlay {
	position: fixed;
	inset: 0;
	background-color: var(--colors-alpha-dark-15);
	pointer-events: auto;
	z-index: 1050;
}