/* frame top right bottom left    */


:root {
	/* --circ-border: 0.1em solid black; */
	--circ-border: unset;
	--page-width-min: 400px;
	--page-width-max: unset;
	--margin: 0 0 0 10px;
	--padding: 0;
	--border: 0;

	--font: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	--font-size: 0.875rem;

	--header-font-size: 18pt;

	--link-color: #0091dc;

	--itemize-icon-color: #0091dc;

	--button-table-font-size: 12pt;
	--button-table-frame-color: #9dc3e6;
	--button-table-background-color: #f2f2f2;

	--note-background-color: #ecedf1;

	--symbol-caption-font-size: 12pt;

	--header-color: #00b0f0;
	--header-background-color: #595959;

	--gray-text: lightgray;
	--icon-width: 32px;
	--itemize-icon-width: 9px;
	--image-padding-left: 10px;
	--text-column-min-width: 300px;
 }

* {
	box-sizing: border-box;
	font-family: var(--font);
}

svg *[font-family="Arial"][font-size="10"]
{
	font-family: Arial;
	font-size: 10pt;
}


body, html {
	margin: var(--margin);
	padding: var(--padding);
	border: var(--border);
	min-width: var(--page-width-min);
}

body {
	font-size: var(--font-size);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

p
{
	margin-top: 0;
	margin-bottom: 1em;
}

q {
	quotes: '“' '”' '‘' '’';
}

html[lang="de"] q {
	quotes: '„' '“' '‚' '‘';
}

html[lang="fr"] q {
	quotes: '« ' ' »' '‹ ' ' ›';
}

ol {
	list-style-type: none;
	margin-left: 0.5em;
}

ol[start="2"] {counter-reset: count-me 1}
ol[start="3"] {counter-reset: count-me 2}
ol[start="4"] {counter-reset: count-me 3}
ol[start="5"] {counter-reset: count-me 4}
ol[start="6"] {counter-reset: count-me 5}

ol > li {
	counter-increment: count-me;
	margin-bottom: 10px;
}

ol > li::before {
	content: counter(count-me) ". ";
	display: block;
	position: relative;
	max-width: 0px;
	max-height: 0px;
	left: -1.3em;
	top: .05em;
	color: var(--itemize-icon-color);
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6
{
	font-weight: unset;
}

a
{
	color: var(--link-color);
	text-decoration: none;
}

table
{
	margin-bottom: 1em;
	border-collapse: separate;
	caption-side: bottom;
}

table.failure-parameters
{
	caption-side: top;
}

table.failure-parameters caption
{
	font-weight: bold;
	font-style: italic;
}

tr
{
	background: #f5f6f8;
}

th {
	background-color: #dcebf6;
	font-weight: bold;
	text-align: left;
}

th, td
{
	padding: 5px;
}

table caption
{
	margin-top: 10px;
	text-align: left;
}

mark {
	background: unset;
	color: unset;
}

mark *{
	background: unset;
	color: unset;
}

mark.menuitem {
	/* border: 0.1em solid black; */
	background-color: #f0f0f0;
}

mark.button {
	font-family: "Microsoft Sans Serif", "Calibri", sans-serif;
	font-size: 10pt;
	border: 0.1em solid #adadad;
	background-color: #e1e1e1;
}

mark.key {
	border: 0.08em solid black;
	border-radius: 5px;
	background-color: lightgray;
}

mark.path {
	font-weight: bold;
}

[data-add-parent-header="type_hs"]
{
	display: none;
}

.header-hs
{
	display: flex;
	justify-content: flex-start;
	min-width: 300px;
}

.header-hs .hp
{
	font-size: var(--header-font-size);
	font-weight: unset;
	margin-top: 30px;
	margin-bottom: 30px;
}

.hs
{
	width: 2px;
	height: 53px;
	color: var(--header-color);
	background-color: var(--header-color);
	margin-top: auto;
	margin-bottom:auto;
	margin-left: 10px;
	margin-right: 10px;
}

.header-hs .hc
{
	font-size: var(--header-font-size);
	color: var(--header-color);
	margin-top: auto;
	margin-bottom: auto;
}

.circ
{
	border: var(--circ-border);
	display: block;
	margin: auto;
}

div[data-layout="competence"],
div[data-layout="evaluation"],
div[data-layout="note"],
div[data-layout="order"],
div[data-layout="solution"]
{
	background-color: var(--note-background-color);
	min-width: 350px;
}

p.adjustable-parameters
{
	font-weight: bold;
	font-style: italic;
}

p.failure-models
{
	font-weight: bold;
	font-style: italic;
}

div.relatedtopics > p
{
	font-style: italic;
}

table.adjustable-parameters, table.failure-models, table.failure-parameters
{
	border-collapse: separate;
	width: 600px;
}

table.adjustable-parameters caption
{
	caption-side: top;
	margin: 2px;
	border: 2px transparent;
	padding: 5px;
	background-color: rgb(127,127,127);
	color: white;
	text-align: left;
}

svg.festo-icon
{
	width: var(--icon-width);
}

img.festo-icon
{
	width: var(--icon-width);
}

figure
{
	text-align: center;
}

svg.formula
{
	display: block;
	margin: 1em auto;
}

img.formula
{
	display: block;
	margin: 1em auto;
}

ul li
{
	margin: 0;
	list-style: none;
	/*	IconSquare.svg	*/
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAgMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiMwMDkxZGMiIHBvaW50cz0iMCwwIDAsMTAgMTAsMTAgMTAsMCIvPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-position: left 7px;
	background-size: 12px;
	padding: 0 0 16px 25px;
}

ul.sub-headers li
{
	/*	IconFolder.svg	*/
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDA5MURDO30KCS5zdDF7ZmlsbDojQTNCMkJDO30KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojQTNCMkJDO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDN7ZmlsbDpub25lO3N0cm9rZTojQTNCMkJDO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDR7ZmlsbDojMzMzMzMzO30KCS5zdDV7ZmlsbDojRkZGRkZGO30KCS5zdDZ7ZmlsbDpub25lO30KCS5zdDd7ZGlzcGxheTpub25lO30KCS5zdDh7ZGlzcGxheTppbmxpbmU7fQoJLnN0OXtmaWxsOm5vbmU7c3Ryb2tlOiNGRjAwRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLW9wYWNpdHk6MC41O30KCS5zdDEwe2ZpbGw6bm9uZTtzdHJva2U6IzI4QzgxOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utb3BhY2l0eTowLjU7fQo8L3N0eWxlPgo8ZyBpZD0iY29udGVudF8xXyI+Cgk8Zz4KCQk8cmVjdCB4PSIxIiB5PSIyIiBjbGFzcz0ic3Q0IiB3aWR0aD0iNyIgaGVpZ2h0PSIyIi8+CgkJPHJlY3QgeD0iMSIgeT0iNSIgY2xhc3M9InN0NCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjkiLz4KCTwvZz4KCTxyZWN0IGNsYXNzPSJzdDYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgo8L2c+CjxnIGlkPSJndWlkZXMiIGNsYXNzPSJzdDciPgo8L2c+Cjwvc3ZnPg==");
	background-size: 18px;
	background-position-y: 2px;
	padding-left: 30px;
}


.note-box, [data-layout="note-box"]
{
	max-width: 440px;
	margin-bottom: 1em;
	padding: 0 10px;
	border: 0.1em solid var(--button-table-frame-color);
	background-color: var(--button-table-background-color);
}


main.didaentry div.didaentry-comment p
{
	background-color:var(--note-background-color);
}

main.didaentry #animation
{
	grid-area: 2 / 1 / 4 / 2;
}

#animationSlider
{
	width: 100%;
}

video.didaentry
{
	width: 100%;
}


/* GRID didaentry */

main.didaentry
{
	display: grid;
	gap: 1em;
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: minmax(200px, 600px) minmax(300px, 600px) 1fr;
}

main.didaentry .header-hs
{
	grid-area: 1 / 1 / 2 / 4;
}

main.didaentry svg.didaentry
{
	grid-area: 2 / 1 / 4 / 2;
	align-self: start;
}

main.didaentry img.didaentry
{
	grid-area: 2 / 1 / 4 / 2;
	align-self: start;
	width: 100%;
}

main.didaentry div.didaentry-description
{
	grid-area: 2 / 2 / 3 / 3;
}

main.didaentry div.didaentry-comment
{
	grid-area: 3 / 2 / 4 / 3;
}

main.dida-h1
{
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: minmax(400px, 1000px) 1fr;
}

main.dida-h1 h1
{
	grid-area: 1 / 1 / 2 / 2;
	margin-top: 20px;
	margin-bottom: 20px;
	color: var(--header-color);
	font-size: var(--header-font-size);
}

main.dida-h1 .s1
{
	grid-area: 2 / 1 / 3 / 2;
}

main.dida-h1 .sub-headers
{
	grid-area: 3 / 1 / 4 / 2;
}

.slide
{
	width: 100%;
	display: none;
}

/* GRID didaexentry */

main.didaexentry
{
	display: grid;
	gap: 1em;
	grid-template-rows: auto auto auto auto 1fr;
	grid-template-columns: minmax(400px, 1000px) minmax(400px, 1000px) 1fr;
}

main.didaexentry .header-hs
{
	grid-area: 1 / 1 / 2 / 4;
}

main.didaexentry .slideshow
{
	grid-area: 2 / 1 / 5 / 2;
}

main.didaexentry .didaentry-problem
{
	grid-area: 2 / 2 / 3 / 3;
}

main.didaexentry .didaentry-solution
{
	grid-area: 3 / 2 / 4 / 3;
}

main.didaexentry .didaentry-comment
{
	grid-area: 4 / 2 / 5 / 3;
	background-color:var(--note-background-color);
}


/* GRID dida-h2 */

main.dida-h2
{
	display: grid;
	gap: 1em;
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: minmax(400px, 1000px) auto 1fr;
}

main.dida-h2 .header-hs
{
	grid-area: 1 / 1 / 2 / 3;
}

main.dida-h2 .s1
{
	grid-area: 2 / 1 / 3 / 2;
}

main.dida-h2 .sub-headers
{
	grid-area: 3 / 1 / 4 / 2;
}


/* GRID mdida-video */

main.mdida-video
{
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-template-columns: auto 1fr;
}

main.mdida-video .header-hs
{
	grid-area: 1 / 1 / 2 / 2;
}

main.mdida-video .educational-video
{
	grid-area: 2 / 1 / 3 / 2;
}

/* GRID symbolentry */

table.failure-parameters caption
{
	margin-bottom: 1em;
}

main.symbolentry * 
{
	/* border: 1px solid black; */
}

main.symbolentry
{
	/* display: grid; */
	grid-template-rows: auto auto auto auto auto auto auto auto auto 1fr;
	grid-template-columns: auto minmax(auto, 400px) 1fr;
}

main.symbolentry h1
{
	grid-area: 1 / 1 / 2 / 3;
	margin-top: 0.5em;
	margin-bottom: 1em;
	/* color: var(--header-color); */
	font-size: var(--header-font-size);
}

main.symbolentry .symbol-photo
{
	grid-area: 2 / 1 / 6 / 2;
	/* margin:0 3em auto 2em; */

	/* height: 9em; */
	max-height: 9em;
	max-width: 9em;
	margin-left: 3em;
	margin-bottom: 1em;
}

main.symbolentry .symbol-icon
{
	grid-area: 2 / 2 / 3 / 3;
	margin-bottom: 1em;
}

main.symbolentry .symbol-description
{
	grid-area: 3 / 2 / 4 / 3;
	margin-top:1em;
	margin-bottom:1em;
}

main.symbolentry p.adjustable-parameters
{
	grid-area: 4 / 2 / 5 / 3;
	margin-bottom: 0;
}

main.symbolentry .adjustable-parameters-tables
{
	grid-area: 5 / 2 / 6 / 3;
	margin-top:1em;
	margin-bottom:1em;
}

main.symbolentry p.failure-models
{
	grid-area: 6 / 2 / 7 / 3;
	margin-bottom: 0;
}

main.symbolentry .failure-models
{
	grid-area: 7 / 2 / 8 / 3;
	margin-top:1em;
	margin-bottom:1em;
}

main.symbolentry .failure-parameters
{
	grid-area: 8 / 2 / 9 / 3;
}

main.symbolentry .relatedtopics
{
	grid-area: 9 / 2 / 10 / 3;
	margin-top:2em;
}


/* GRID dida-trans-video */

main.dida-trans-video
{
	display: grid;
	gap: 1em;
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: auto minmax(300px, 800px) 1fr;
}

main.dida-trans-video .header-hs
{
	grid-area: 1 / 1 / 2 / 4;
}

main.dida-trans-video video
{
	grid-area: 2 / 1 / 4 / 2;
}

main.dida-trans-video .circ-symbol
{
	grid-area: 2 / 2 / 3 / 3;
}

main.dida-trans-video .description
{
	grid-area: 3 / 2 / 4 / 3;
}