/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
	(c) 2019-2022 Joachim Legat
	+43 (699) 123 69 874
	joachim.legat@jolegat.com 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
	joHelp
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/

@font-face
{
    font-family: 'PT Sans Narrow';
    font-weight: normal;
    font-style: normal;

    src: url('extern/PTSansNarrow-Regular.ttf') format('truetype');
}

@font-face
{
    font-family: 'PT Sans Narrow';
    font-weight: bold;
    font-style: normal;

    src: url('extern/PTSansNarrow-Bold.ttf') format('truetype');	/* real bold face - without it the browser fakes bold from Regular (blurry) */
}

body 
{
    margin: 0;
	background-color: white;
}

body,
td,
th,
input,
button,
select,
textarea
{
	font-family: 'PT Sans Narrow', Arial, Helvetica sans-serif;
	font-size: 12pt;
}

h1, h2, h3, h4, h5, h6
{
	display: inline-block;
	font-weight: normal;
	font-family: 'PT Sans Narrow', Arial, Verdana, sans-serif;
	margin-top: 0;
}

h1 { font-size: 2.2em; padding-top: 2em; margin-bottom: 0.2em; }
h2 { font-size: 2.0em; padding-top: 1.5em; margin-bottom: 0.2em; }
h3 { font-size: 1.8em; padding-top: 1em; margin-bottom: 0.2em; }
h4 { font-size: 1.6em; padding-top: 0.6em; margin-bottom: 0.2em; }
h5 { font-size: 1.4em; padding-top: 0.6em; margin-bottom: 0; }
h6 { font-size: 1.2em; padding-top: 0.6em; margin-bottom: 0; }
h7 { font-size: 1.1em; padding-top: 0.6em; margin-bottom: 0; }

h1 {
	display: block;
	border-bottom: black 2px solid;
}

button, label
{
    cursor: pointer;
}

button
{
	font-family: Verdana, sans-serif;
	font-size: 11px;
	border: 0;
    color: white;
    background-color: #b5152b !important;
	border-radius: 2px;
	padding: 2px 5px;
	margin: 0 1px;
}

button.typcn
{
	padding-left: 3px;
}

button:disabled
{
	background-color: #ccc !important;
}

button::before
{
	margin-right: 2px;
}

button.only_icon
{
	padding: 2px 3px;
}

button.only_icon::before
{
	margin-right: 0 !important;
}

button.active::before
{
	color: yellow;
}

button.jogeoman_info,
button.jogeoman_info::before
{
	background-color: #d0d0d0 !important;
}

button.jogeoman_info.active,
button.jogeoman_info.active::before,
button.jogeoman_info:hover,
button.jogeoman_info:hover::before
{
	color: white !important;
	background-color: #b5152b !important;
}

::-webkit-scrollbar 
{
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-thumb 
{
	border-radius: 0px;
	background-color: #bfbfbf;
}   

input[type='checkbox']
{
	cursor: pointer;
	margin: 0 2px;
	vertical-align: middle;
}


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

#johelp_main_menu
{
	float: left;
	margin-top: 40px;
	height: calc(100% - 41px);	/* border-box; UpdateTopOffsets (jo_help.js) refines this for the real bar height */
	overflow-x: auto;
	overflow-y: auto;
	white-space: nowrap;	/* no wrapping in the topics tree - the user widens it via the drag strip instead */
	padding: 10px 0 0 10px;	/* bottom spacing lives on the ul - a bottom padding here would lift the sticky footer's anchor */
	font-size: 0.9em;
	box-sizing: border-box;	/* height incl. the paddings - the height formulas (UpdateTopOffsets) treat tree and drag strip alike */
}

body.johelp_embedded_full #johelp_main_menu		/* full help in the WIDE popover (jo_MVC_gui .joMVC_help_dlg_full, 75vw): */
{												/* the topics tree gets a quarter of the help width by default          */
	width: 25%;
	box-sizing: border-box;
}

#johelp_main_menu ul
{
	margin: 0;
	padding: 0;
}

#johelp_main_menu > ul
{
	margin-top: 12px;
	margin-bottom: 20px;	/* the tree's former bottom padding (see #johelp_main_menu) */
}

#johelp_main_menu > ul > li
{
	margin-bottom: 10px;
}

#johelp_main_menu > ul > li > .johelp_menu_item
{
	padding-bottom: 4px;
	border-bottom: #ccc 1px solid;
	margin-bottom: 4px;
	font-weight: bold;
}

#johelp_main_menu li
{
	list-style: none;
	padding-right: 5px;
}

#johelp_main_menu .johelp_menu_item
{
	padding: 1px 0;
	display: inline-block;
}

#johelp_main_menu .module
{
	padding-top: 10px;
}

#johelp_main_menu .module > .johelp_menu_item
{
	display: block;
}

#johelp_main_menu li li li
{
	margin-left: 15px;
}

#johelp_main_menu a
{
	color: black;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer !important;
}

#johelp_main
{
	clear: both;
}

#johelp_menu_tools		/* sticky footer of the topics tree: expand / collapse all chapters */
{
	position: sticky;
	bottom: 0;
	margin-left: -10px;			/* span the menu's left padding */
	padding: 5px 8px 5px 10px;
	background-color: white;
	border-top: #ccc 1px solid;
}

#johelp_menu_tools .johelp_menu_tool
{
	display: inline-block;
	margin-right: 6px;
	cursor: pointer;
}

#johelp_menu_tools .johelp_menu_tool::before	/* identical box to the tree toggles: all styling on the ::before */
{
	color: white;
	background-color: #aaa;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.8em;
	padding: 1px;
}

#johelp_menu_tools .johelp_menu_tool:hover::before
{
	background-color: #b5152b;
}

.toggle::before
{
	font-family: typicons;
	content: '\e0cf';	
    color: white;
    background-color: #aaa;
	border-radius: 2px;
	margin-right: 4px;
	cursor: pointer;
	font-size: 0.8em;
	padding: 1px;
}

.toggle.none::before
{
	color: #aaa;
	cursor: default;
}

.toggle.expanded::before
{
	content: '\e0bd';	
}

#johelp_main_menu .johelp_menu_item:hover a,
#johelp_main_menu .johelp_menu_item:hover .toggle.none::before
{
	color: #b5152b !important;
}

#johelp_main_menu .johelp_menu_item:hover .toggle::before
{
	background-color: #b5152b !important;
}

.scroll_to_top
{
	font-size: 15px;
	padding: 0 7px 5px 8px;
	background-color: #5097da !important;
	font-weight: bold;
	position: fixed;
	bottom: 8px;
	right: 8px;
	z-index: 10;
	border-width: 0;
	border-radius: 4px;
	box-shadow: 4px 5px 10px -7px rgba(0,0,0,0.6);
	cursor: pointer;
	color: #ffffff;
}

#johelp_main_menu .scroll_to_top
{
	left: 8px;
	right: auto;		/* MEE fix 20260903: base rule sets right:8px too -> left+right stretched the button across the full width */
}

/* -------------------------------------------------------------------------- */
/* content */

#johelp_main_content p,
#johelp_main_content div
{
	margin: 1em 0;
	max-width: 100%;
}

.johelp_title
{
	cursor: pointer;
}

.framed 
{
	background-color: #f8f8f8;
	padding: 0.5em 1em 1em 1em;
	border-radius: 4px;
}

.remark::before,
.customizable::before
{
	font-family: typicons;
	display: inline-block;
	padding-right: 0.3em;
	font-size: 1.5em;
	color: #aaa;
	vertical-align: bottom;
}

#johelp_main_content div > .remark,
#johelp_main_content div > .customizable
{
	margin: 0;
}

.remark::before
{
	content: '\e093';
}

.customizable::before
{
	content: '\e050';
}

#johelp_main_content img
{
	max-width: 100%;
}

#johelp_main_content figcaption
{
	font-size: 0.8em;
}

#johelp_main_content .content
{
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

#johelp_main_content .content::before
{
	font-family: typicons;
	margin-right: 2px;
	content: '\e047';
}

#johelp_main_content .content::after
{
	font-family: typicons;
	margin-left: 2px;
	content: '\e049';
}

#johelp_main_content .content_box
{
	font-family: Verdana, sans-serif;
	font-size: 11px;
	display: inline-block;
	border: #aaa 1px solid;
	padding: 1px 2px;
}

#johelp_main_content .text_active
{
	color: #b5152b;
}

#johelp_main_content .bg_active
{
	background-color: #b5152b;
    color: white;
    border-radius: 2px;
    line-height: 0.8em;
    padding: 0 1px;
	font-size: 0.8em;
}

.todo
{
	padding: 0 2px;
	background-color: yellow;
}

.error
{
	padding: 0 2px;
	background-color: red;
}

#johelp_main_content a
{
	text-decoration: none;
}

#johelp_main_content ul,
#johelp_main_content ol
{
	padding: 0 0 0 18px;
	margin: 0;
}

#johelp_main_content div > ul,
#johelp_main_content div > ol
{
	padding-top: 2px;
	padding-bottom: 2px;
}

#johelp_main_content li
{
	padding: 4px 0;
}

.abc > li
{
	list-style-type: lower-latin;			/* fallback: 'a.' where ::marker content is unsupported */
}

.abc > li::marker
{
	content: counter(list-item, lower-latin) ')\00a0\00a0';	/* 'a)' instead of the default 'a.' */
}

#johelp_main_content ul.none
{
	padding-left: 0;
	list-style-type: none;
}

table.framed
{
	width: 100%;
	border-collapse: collapse;
	border-top: #aaa 2px solid;
	border-bottom: #aaa 2px solid;
	background: #fff;
}

.framed > * > tr > *
{
	border-top: #ccc 1px solid;
	text-align: left;
	vertical-align: top;
	padding: 3px 6px;
}

.framed > * > tr.separated > *
{
	border-top: #aaa 2px solid;
	border-bottom: #aaa 2px solid;
}

.framed > * > tr.level_1 > *:first-child
{
	padding-left: 26px;
}

.framed > * > tr.level_2 > *:first-child
{
	padding-left: 46px;
}

#johelp_main_content table .flag
{
	text-align: center;
}

#johelp_main_content table .flag.on::before
{
	content: '\e11e';
	color: rgb(19, 153, 19);
	font-family: typicons;
}

tr.group
{
	font-weight: bold;
}

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

@media screen {

	@page {
		margin: 0px auto;
	}
	
	#johelp_main
	{
		/*position: fixed; */
		position: absolute;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

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

	#johelp_main_bar
	{
		background-color: #eee;
		position: fixed;
		width: 100%;
		min-height: 40px;		/* grows when the toolbar wraps below the title (narrow popover); flow-root contains the floats */
		display: flow-root;
		vertical-align: middle;
		z-index: 10;
		box-shadow: 0px 5px 10px -7px rgba(0,0,0,0.6);
	}

	.johelp_main_title
	{
		float: left;
		padding: 0.3em 1em;
		font-size: 1.2em;
	}

	.johelp_main_subtitle
	{
		display: inline-block;
		padding: 0 10px;
		color: #aaa;
		font-size: 0.75em;		/* version number, clearly smaller than the 'Measuree Help' title */
	}

	#johelp_tools
	{
		float: right;
		min-height: 40px;		/* one bar row; centered items -> equal spacing above and below each tool */
		display: flex;
		align-items: center;
		padding: 0 6px;
	}

	#johelp_tools > *
	{
		display: inline-block;
	}

	#johelp_lang_selector .johelp_lang,
	.johelp_tool
	{
		padding: 2px 5px;
		margin: 0;
		background-color: white;
		border-radius: 2px;
		text-transform: uppercase;
		font-size: 0.8em;
	}

	#johelp_lang_selector a.johelp_lang
	{
		cursor: pointer;
		color: black;
		text-decoration: none;
	}

	.johelp_tool
	{
		cursor: pointer;
		margin-right: 10px;
		height: 18px;
	}

	#johelp_show_all::before
	{
		margin-right: 6px;		/* gap between the eye glyph and the 'Gesamte Hilfe' label */
	}

	#johelp_tools .active
	{
		background-color: #b5152b;
		color: white;
	}

	#johelp_lang_selector a.johelp_lang:hover,
	#johelp_tools .johelp_tool:hover
	{
		background-color: #5097da;
		color: white;
	}
		
	#johelp_main_content
	{
		margin-top: 40px;
		height: calc(100% - 80px);
		overflow-y: auto;
		padding: 20px 15px 20px 15px;
	}

	#johelp_main_content a
	{
		color: #5097da;
		transition: color .15s ease-in, background-color .35s ease-in, border-color .35s ease-in;
		font-weight: bold;
	}
	
	/* arrow glyph before in-page links removed on request (jolegat 2026-09-06)
	#johelp_main_content a.johelp_link::before
	{
		content: '\e01b';
		font-family: typicons;
		margin-right: 0.2em;
	}
	*/
	
	#johelp_main_content a:hover
	{
		color: #b5152b;
	}

	.link_to_menu_item
	{
		font-size: 0.8em;
		display: inline-block;
		color: #b5152b;
	}
	
	#johelp_main_menu .johelp_active > a.johelp_title		/* active marker only in the tree, not in the content text */
	{
		color: #b5152b !important;
	}
	
	#johelp_main_menu .johelp_active > .toggle::before
	{
		background-color: #b5152b !important;
		color: white;
	}
	
	#johelp_main_menu .johelp_active > .toggle.none::before
	{
		color: #b5152b !important;
	}
	
	.onlyprint
	{
		display: none;
	}
}

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

@media print {
	
	@page {
		margin: 10mm 15mm 10mm 20mm;
	}

	.johelp_breadcrumb
	{
		color: #aaa;
		padding-bottom: 15mm;
	}

	.johelp_breadcrumb span
	{
		white-space: nowrap;
	}

	.johelp_breadcrumb span::before
	{
		content: '\e049';
		font-family: 'typicons';
		margin: 0 2mm;
	}

	.johelp_breadcrumb span:first-child::before
	{
		content: '';
	}
	
	.do_not_print,
	.onlyscreen
	{
		display: none !important;
	}

	.module
	{
		page-break-before: always;
	}

	.module.first_module
	{
		page-break-before: avoid;
	}

	.link_to_menu_item,
	.johelp_title_tools
	{
		display: none;
	}

	.johelp_sheet_header
	{
		text-align: left;
		padding-bottom: 10mm;
		white-space: nowrap;
	}

	.johelp_sheet_header *
	{
		vertical-align: baseline;
	}

	.johelp_main_title
	{
		padding: 2mm 0;
		border-bottom: black 0.1mm solid;
	}

	.johelp_main_subtitle
	{
		padding: 0 2mm;
		color: #aaa;
	}

	.johelp_main_today
	{
		float: right;
	}

	.johelp_main_today::before
	{
		margin-right: 2mm;
		color: #aaa;
	}

	#johelp_main_bar,
	#johelp_main_menu 
	{
		display: none;
	}

	#johelp_main_content a
	{
		color: black;
	}
}
/* -------------------------------------------------------------------------- */
/* svg icons of the application (johelp_icon placeholders, see jo_help.js) */

.johelp_icon img
{
	vertical-align: text-bottom;
	margin: 0 2px;
}

/* -------------------------------------------------------------------------- */
/* application buttons shown in MEE CI (see measuree.css: button / .view_generic) */

#johelp_main_content .typcn,
.johelp_icon.button
{
	display: inline-block;
	box-sizing: border-box;
	width: 16px;				/* square by design (help only) - MEE toolbar buttons themselves are 18x16 */
	height: 16px;
	padding: 1px 0;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
	background-color: #5097da;
	color: #fff;
	border-radius: 2px;
	vertical-align: text-bottom;
}

#johelp_main_content .johelp_title .johelp_icon.button		/* topic headings: the loader turns <header> into h1-h3.johelp_title */
{
	width: 21px;
	height: 21px;
	vertical-align: baseline;	/* with a block img inside, the box baseline is its BOTTOM edge -> the pill sits exactly ON the text baseline */
}

#johelp_main_content .johelp_title .johelp_icon.button img
{
	display: block;				/* no line box inside -> inline-block baseline = box bottom (see rule above) */
	margin: 2px auto 0;
}

#johelp_main_content .typcn.view_generic
{
	background-color: #7d9fbe;
}

.johelp_icon.button img
{
	vertical-align: middle;
	margin: 0;
}

.johelp_icon.toggle_button
{
	display: inline-block;
	box-sizing: border-box;
	width: 26px;					/* original size of the vertical toolbar display toggles (measuree.css .geobly_display_buttons: 26x26, */
	height: 26px;					/* round, orange when active) - smaller would make the fine icon strokes illegible                    */
	text-align: center;
	line-height: 24px;
	background-color: #fc954f;
	border-radius: 50%;
	vertical-align: middle;
}

.johelp_icon.toggle_button img
{
	vertical-align: middle;
	margin: 0;
}

#johelp_main_content .typcn.toggle_button		/* left-bar toggles drawn with a typicon glyph (cog etc.) */
{
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 26px;
	font-size: 20px;
	text-align: center;
	background-color: #fc954f;
	border-radius: 50%;
	vertical-align: middle;
}

#johelp_main_content .typcn.toggle_button::before
{
	display: inline-block;			/* center the glyph box inside the round badge */
	width: auto;
	line-height: 26px;
	vertical-align: top;
}

/* -------------------------------------------------------------------------- */
/* drag strip for resizing the topics tree (see jo_help.js InitMenuResizer) */

#johelp_menu_resizer
{
	float: left;
	width: 6px;
	margin-top: 40px;
	height: calc(100% - 41px);	/* UpdateTopOffsets (jo_help.js) refines this for the real bar height */
	cursor: col-resize;
}

#johelp_menu_resizer:hover
{
	background-color: #ddd;
}

/* -------------------------------------------------------------------------- */
/* full text search, leftmost in the title bar toolbar (see jo_help.js InitSearch) */

#johelp_search_box
{
	position: relative;			/* anchor for the absolute 'no hits' hint below the field */
	margin-right: 10px;
	vertical-align: middle;
}

#johelp_search
{
	box-sizing: border-box;
	width: 150px;
	height: 24px;
	padding: 2px 6px;
	border: #ccc 1px solid;
	border-radius: 3px;
	outline: none;
	background-color: #fff;
	font: inherit;
	font-size: 0.9em;
	vertical-align: middle;
}

#johelp_search:focus
{
	border-color: #5097da;
}

#johelp_search_hint
{
	position: absolute;			/* drops out of the bar without changing its height */
	left: 0;
	top: 100%;
	margin-top: 4px;
	padding: 2px 8px;
	background-color: #fff;
	border: #ccc 1px solid;
	border-radius: 3px;
	box-shadow: 0px 3px 8px -4px rgba(0,0,0,0.4);
	white-space: nowrap;
	color: #999;
	font-style: italic;
}

mark.johelp_search_hit
{
	background-color: #ffe27a;
	color: inherit;
	padding: 0;
	border-radius: 2px;
}

/* hit list while the topics tree is hidden (see jo_help.js ShowSearchResults) */

#johelp_search_results .johelp_result
{
	margin: 0.5em 0;
}

.johelp_result .johelp_result_path
{
	color: #888;
	font-size: 0.85em;
}

.johelp_result .johelp_breadcrumb_sep
{
	margin: 0 6px;
	color: #aaa;
	font-size: 0.85em;
}

#johelp_main_content .johelp_menu_icon			/* mimic of the application's blue main menu button (measuree.css .joMenu_root_icon) */
{
	display: inline-flex;
	align-items: center;						/* centers the glyph box vertically ... */
	justify-content: center;
	box-sizing: border-box;
	min-width: 18px;
	height: 16px;
	padding: 0 3px 2px;							/* ... the bottom padding compensates the high optical center of the glyph itself */
	font-size: 15px;
	font-weight: bold;
	background-color: #5097da;
	color: #fff;
	border-radius: 2px;
	vertical-align: text-bottom;
}

#johelp_main_content .typcn.typcn-lightbulb,	/* the application's help button color (see measuree.css) */
#johelp_main_content .typcn.splash_button		/* splash link buttons: MEE colors them ALL in the help red (measuree.css .cc_splash_links button) */
{
	background-color: #ab4949;
}

/* plain data symbols (statusbar glyphs etc.): typicon WITHOUT the button pill look */
#johelp_main_content .typcn.symbol
{
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	color: #444;
	vertical-align: baseline;
}

#johelp_main_content .typcn.symbol.ok			{ color: #1dbc1d; }		/* colors as in the application statusbar (measuree.css) */
#johelp_main_content .typcn.symbol.acceptable	{ color: #e0a65a; }
#johelp_main_content .typcn.symbol.bad,
#johelp_main_content .typcn.symbol.invalid		{ color: red; }

#johelp_main_content p.johelp_shortcut		/* 'Tastaturkürzel: [x]' as the first line of a chapter */
{
	color: #888;
	font-size: 0.9em;
	margin-bottom: 0;
}

#johelp_main_content p.johelp_video a,		/* button-style link into the first-steps page, starting on the matching video */
#johelp_main_content a.johelp_video			/* (the 'Videos' chapter uses the anchor directly in its list) */
{
	display: inline-block;
	background-color: #b5152b;
	color: white;
	border-radius: 2px;
	padding: 2px 8px;
	font-size: 0.9em;
	text-decoration: none;
}

#johelp_main_content p.johelp_video a:hover,
#johelp_main_content a.johelp_video:hover
{
	background-color: #5097da;	/* same hover as the toolbar buttons */
}

#johelp_main_content p.johelp_video a::before,
#johelp_main_content a.johelp_video::before
{
	font-family: 'typicons';
	content: '\e130';		/* typcn-video-outline */
	margin-right: 5px;
	display: inline-block;
}

#johelp_main_content ul.johelp_videolist	/* the 'Videos' chapter: one button + summary per line */
{
	list-style: none;
	padding-left: 0;
}

#johelp_main_content ul.johelp_videolist li
{
	margin: 7px 0;
}

#johelp_tools .johelp_tool.disabled
{
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* hover tools right of a topic heading: side by side, small, on the text baseline */

#johelp_main_content .johelp_title
{
	display: block;					/* full content width, so the tools container can float to the right edge */
}

#johelp_main_content .johelp_title .johelp_title_tools
{
	float: right;
	margin-left: 16px;
}

#johelp_main_content .johelp_title .johelp_parent_section,
#johelp_main_content .johelp_title .link_to_menu_item,
#johelp_main_content .johelp_title .johelp_print_section
{
	opacity: .3;					/* always visible, but pale - full blue only when hovering the button itself */
	display: inline-block;
	width: auto;
	height: auto;
	box-sizing: border-box;
	padding: 2px 5px;
	margin-left: 10px;
	font-size: 14px;
	line-height: 1;
	vertical-align: baseline;
	color: #fff;
	background-color: #5097da;
	border-radius: 2px;
	cursor: pointer;
}

#johelp_main_content .johelp_title .johelp_parent_section + .link_to_menu_item,
#johelp_main_content .johelp_title .johelp_print_section
{
	margin-left: 4px;
}

#johelp_main_content .johelp_title .johelp_parent_section:hover,
#johelp_main_content .johelp_title .link_to_menu_item:hover,
#johelp_main_content .johelp_title .johelp_print_section:hover
{
	opacity: 1;
}

#johelp_main_content .johelp_title .johelp_parent_section,
#johelp_main_content .johelp_title .link_to_menu_item,
#johelp_main_content .johelp_title .johelp_print_section
{
	position: relative;			/* lift the fixed-size box so its bottom edge sits ON the text baseline */
	top: -4.7px;				/* box metrics are constant (font 14px, line-height 1, padding 2px) -> constant offset */
}

/* -------------------------------------------------------------------------- */
/* mimic of the app's element menu in the layers view (measuree.css: .geobly_layers_pulldown) */

.johelp_mee_menu_col
{
	display: inline-block;
	vertical-align: top;
	margin: 0 28px 8px 0;
}

.johelp_mee_menu
{
	display: inline-block;
	background-color: #fff;
	border: #ccc 1px solid;
	padding: 2px;
	box-shadow: 4px 5px 10px -7px rgba(0,0,0,0.6);
	font-size: 11px;
	color: #000;
}

#johelp_main_content .johelp_mee_menu > div		/* beat the global '#johelp_main_content div' margin rule */
{
	margin: 0;
	padding: 6px 4px;
	white-space: nowrap;
	cursor: default;
}

#johelp_main_content .johelp_mee_menu .typcn		/* undo the button-pill look inside the menu mimic */
{
	display: block;
	width: auto;
	height: auto;
	padding: 6px 4px;
	line-height: normal;
	font-size: 11px;
	background-color: transparent;
	color: #000;
	border-radius: 0;
	text-align: left;
	vertical-align: baseline;
}

.johelp_mee_menu .typcn::before
{
	font-size: 12px;
	margin-right: 6px;
	vertical-align: middle;
}

#johelp_main_content .johelp_mee_menu .blue::before		{ color: #5097da; }
#johelp_main_content .johelp_mee_menu .grey::before		{ color: #ddd; }

#johelp_main_content .johelp_mee_menu > div.sep
{
	border-top: #ccc 1px solid;
	padding: 0;
}

#johelp_main_content .johelp_mee_menu > div.center_icon
{
	background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCA0MDAgNDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iMjI0LjE3MSwxLjQzNyAyMjQuMTcxLDk0LjYzOSAyNzIuMDY3LDk0LjYzOSAyMDEuMDgzLDE3NS40MTQgMTk5Ljc3LDE3NS40MTQgMTI4Ljc4Niw5NC42MzkgMTc2LjY4NCw5NC42MzkgMTc2LjY4NCwxLjQzNyAiLz48cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjE3NS44MzEsMzk4LjU2MyAxNzUuODMxLDMwNS4zNjIgMTI3LjkzNSwzMDUuMzYyIDE5OC45MTYsMjI0LjU4NyAyMDAuMjMsMjI0LjU4NyAyNzEuMjEyLDMwNS4zNjIgMjIzLjMxNywzMDUuMzYyIDIyMy4zMTcsMzk4LjU2MyAiLz48cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjM5OC41NjMsMjI0LjE3MSAzMDUuMzYyLDIyNC4xNzEgMzA1LjM2MiwyNzIuMDY2IDIyNC41ODYsMjAxLjA4MyAyMjQuNTg2LDE5OS43NyAzMDUuMzYyLDEyOC43ODYgMzA1LjM2MiwxNzYuNjg0IDM5OC41NjMsMTc2LjY4NCAiLz48cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjEuNDM2LDE3NS44MzEgOTQuNjM5LDE3NS44MzEgOTQuNjM5LDEyNy45MzUgMTc1LjQxMywxOTguOTE2IDE3NS40MTMsMjAwLjIzIDk0LjYzOSwyNzEuMjEzIDk0LjYzOSwyMjMuMzE2IDEuNDM2LDIyMy4zMTYgIi8+PC9zdmc+");
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 11px 11px;
	padding-left: 24px;
}

.johelp_mee_menu_note
{
	font-size: 0.85em;
	color: #555;
}

/* menu mimic entries that jump to their explanation below (jo_help.js johelp_jump handler) */

#johelp_main_content .johelp_mee_menu > div[johelp_jump]
{
	cursor: pointer;
}

#johelp_main_content .johelp_mee_menu > div[johelp_jump]:hover
{
	background-color: #eef4fb;
}

#johelp_main_content li.johelp_jump_flash		/* highlight on the explanation entry after a jump */
{
	background-color: #ffe27a;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------- */
/* mimic of a modal dialog (jo_popover .JOP_popover look) */

.johelp_mee_dlg
{
	display: inline-block;
	background-color: #fff;
	border: #ccc 1px solid;
	box-shadow: 4px 5px 10px -7px rgba(0,0,0,0.6);
	padding: 10px 14px;
	font-size: 12px;
	color: #000;
}

#johelp_main_content .johelp_mee_dlg > div		/* beat the global '#johelp_main_content div' margin rule */
{
	margin: 0;
	padding: 3px 0;
	white-space: nowrap;
}

#johelp_main_content .johelp_mee_dlg > div.johelp_mee_dlg_title
{
	font-size: 15px;
	font-weight: bold;
	padding: 0 0 8px 0;
}

#johelp_main_content .johelp_mee_dlg > div.gap
{
	padding-top: 12px;
}

.johelp_mee_dlg input[type='checkbox']
{
	pointer-events: none;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

.johelp_mee_dlg .johelp_icon img
{
	vertical-align: middle;
	margin-right: 3px;
}

.johelp_mee_dlg_btn
{
	display: inline-block;
	background-color: #5097da;
	color: #fff;
	border-radius: 2px;
	padding: 3px 6px;
	margin-right: 4px;
	font-size: 11px;
	cursor: default;
}

#johelp_main_content .johelp_mee_dlg > div.johelp_mee_dlg_footer
{
	border-top: #ccc 1px solid;
	margin-top: 10px;
	padding-top: 8px;
	text-align: right;
}

.johelp_mee_dlg_footer .johelp_mee_dlg_btn.help_btn
{
	background-color: #ab4949;
	float: left;
	margin-right: 0;
}

/* -------------------------------------------------------------------------- */
/* chapter intro paragraph: 1-2 sentence topic summary, visually set apart */

#johelp_main_content p.johelp_intro
{
	background-color: #f2f7fc;			/* light tint of the MEE blue */
	border-left: #5097da 3px solid;
	padding: 8px 12px;
	border-radius: 0 3px 3px 0;
}

/* -------------------------------------------------------------------------- */
/* keyboard keys: '[x]' tokens are wrapped into <kbd> at load time (jo_help.js PrepareContent) */

#johelp_main_content kbd
{
	display: inline-block;
	min-width: 13px;
	padding: 0 4px;
	text-align: center;
	font-family: Verdana, sans-serif;
	font-size: 0.75em;
	line-height: 1.5em;
	color: #333;
	background-color: #f7f7f7;
	border: #ccc 1px solid;
	border-bottom-width: 2px;
	border-radius: 3px;
	vertical-align: 1px;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* scenario sub-heading inside a chapter ('Was moechte ich?' recipes) */

#johelp_main_content p.johelp_scenario
{
	font-weight: bold;
	font-size: 1.1em;
	margin: 1.6em 0 0.2em 0;
}

/* -------------------------------------------------------------------------- */
/* application scenario box ('Beispiele'): reusable across chapters */

#johelp_main_content div.johelp_use_case
{
	background-color: #fdf6ea;			/* light tint of the MEE layout orange */
	border-left: #F5A623 3px solid;
	border-radius: 0 3px 3px 0;
	padding: 2px 12px 10px 12px;
	margin: 1.2em 0;
}

#johelp_main_content div.johelp_use_case > p.johelp_scenario
{
	margin-top: 0.7em;
}

/* -------------------------------------------------------------------------- */
/* layout buttons of the app's left bar (PNG icons, see measuree.css .layout_button_*) */

#johelp_main_content .johelp_layout_icon
{
	display: inline-block;
	width: 28px;
	height: 23px;
	background-color: #F5A623;		/* active state of the left bar's layout buttons */
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 2px;
	vertical-align: baseline;		/* icon bottom exactly on the text baseline (measured; text-bottom sat 7px too low) */
	margin-right: 2px;
}

#johelp_main_content a .johelp_layout_icon,
#johelp_main_content li > .johelp_layout_icon	/* inline in link text and list rows: half the header size */
{
	width: 14px;
	height: 11px;
	background-size: contain;
	background-origin: content-box;
	padding: 1px;
	box-sizing: border-box;
	border-radius: 1px;
	margin-right: 3px;
}

.johelp_layout_icon.navigator			{ background-image: url('../images/layout_button_nav.png'); }
.johelp_layout_icon.previews			{ background-image: url('../images/layout_button_previews.png'); }
.johelp_layout_icon.nadir				{ background-image: url('../images/layout_button_nadir.png'); }
.johelp_layout_icon.default				{ background-image: url('../images/layout_button_default.png'); }
.johelp_layout_icon.perspective			{ background-image: url('../images/layout_button_perspective.png'); }
.johelp_layout_icon.declassification	{ background-image: url('../images/layout_button_footprints.png'); }

/* left bar chapter: the button icons act as bullets - no list markers */
#johelp_main_content [johelp_id="left_bar"] ul
{
	list-style: none;
	padding-left: 0;
}

/* toolbar button lists ('Buttons der Titelleiste'): the icons act as bullets */
#johelp_main_content ul.johelp_buttons
{
	list-style: none;
	padding-left: 0;
}

/* breadcrumb trail above the focused chapter's heading (jo_help.js ShowFocusBreadcrumbs) */
#johelp_main_content #johelp_breadcrumbs
{
	font-size: 0.75em;
	color: #888;
	margin: 1.6em 0 0 0;
}

#johelp_breadcrumbs + .johelp_title
{
	padding-top: 0.1em;			/* the trail sits tight above its heading */
}

#johelp_breadcrumbs a
{
	color: #000;
	font-weight: normal;
}

#johelp_breadcrumbs a:hover
{
	color: #5097da;
}

#johelp_breadcrumbs .johelp_breadcrumb_sep
{
	margin: 0 6px;
	color: #aaa;
}

#johelp_breadcrumbs .johelp_breadcrumb_subsep
{
	margin: 0 5px;
	color: #bbb;
}

/* previous/next chapter links at the end of a focused chapter (jo_help.js ShowFocusPrevNext) */
#johelp_main_content #johelp_prevnext
{
	display: flex;
	justify-content: space-between;
	font-size: 0.9em;
	margin: 1.6em 0 0 0;
	border-top: #eee 1px solid;
	padding-top: 0.6em;
}

#johelp_prevnext a
{
	color: #000;
	font-weight: normal;
	cursor: pointer;	/* the links carry no href (avoids the browser's status bar url preview) */
}

#johelp_prevnext a:hover
{
	color: #5097da;
}

#johelp_prevnext .johelp_next
{
	margin-left: auto;			/* next stays right even without a previous link */
}

/* hosted (popover or MEE window): pin the prev/next bar to the bottom so it does not jump with the content length */
body.johelp_embedded #johelp_main_content #johelp_prevnext
{
	position: fixed;
	left: var(--johelp_menu_width, 0px);	/* only as wide as the content area - starts right of the topics tree (jo_help.js UpdateMenuWidthVar) */
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 8px 16px;
	background-color: #fff;
	border-top: #ddd 1px solid;
	z-index: 20;
}

body.johelp_embedded #johelp_main_content::after
{
	content: '';				/* spacer INSIDE the scroller: room for the pinned bar without growing the */
	display: block;				/* element itself (padding-bottom made the page taller -> second scrollbar) */
	height: 44px;
}