/* 
	This is a css style sheet for adoc Studio.
	It is used as a basis for all other factory style sheets in adoc Studio.

	This style sheet is based on the Stylesheet for Asciidoctor available at:
	https://github.com/asciidoctor/asciidoctor/tree/main/src/stylesheets 

	It contains several additions:
	- introduced variables for all fonts and colours
	- introduced an additional dark mode for all bright variants
	- introduced the styling for PDF using the Vivliostyle engine
	- and many more (see the comments at the variable or selector)
	
	Author: 	Frank Blome for ProjectWizards GmbH
	Version:	1.0 from April 17, 2024
	License:	Distributed under the permissive MIT license
*/

:root {
	/* 
		General hint for fonts: 
		Use as few fonts as possible 
		to achieve a homogeneous appearance of the document.
	*/
	--ads-body-font: serif;					/* For all text */ 
	--ads-headline-font: sans-serif;		/* For all headlines */ 
	--ads-monospaced-font: monospace;		/* For all verbatim or literals */ 
	--ads-toc-font: sans-serif;				/* For the table of contents */ 

	/* Set the icon weight for the admonitions: 
		400 -> outlined 
		900 -> Filled
	*/
	--ads-icon-font-weight: 900;

	/* Colors: The default colors are based on the default styles for Asciidoctor.
		
	   Modifications:
		- All colors are transfered from the Asciidoctor stylesheet 
		  into a variable (the naming should be obvious)
		- A dark version was added.
		- Some minor color changes based on our taste
		- Shadows on admonition icons and other symbols are removed
	*/
	--ads-color: #101010;								/* base color for all text */
	--ads-color-dark: #f1f1f1;							/* dark variant of the base color */
	--ads-background-color: #ffffff;					/* base color for the background */
	--ads-background-color-dark: #121212;				/* dark variant of the background color */

	--ads-title-color: #000;							/* base color for all titles */
	--ads-title-color-dark: #eee;						/* dark variant for all titles */
	--ads-headline-color: #eee;							/* base color for all headline */
	--ads-headline-color-dark: #ba3925;					/* dark variant for the headlines */
	--ads-headline-block-color: #7a2518;				/* headline color for any blocks */
	--ads-headline-block-color-dark: #b52812;			/* dark variant for the block headlines */
	--ads-headline-small-color: #e99b8f;				/* color for small headlines */
	--ads-headline-small-color-dark: #b0746b;			/* dark variant for the small headlines */

	--ads-mark-background-color: #ffff00;				/* Text marker with the same in dark mode */

	--ads-a-color: #2156a5;								/* all kind of links */
	--ads-a-color-dark: #2c72db;						/* dark variant of the links */
	--ads-a-hover-color: #1d4b8f;						/* hover variant of the links */
	--ads-a-hover-color-dark: #1d4b8f;					/* dark variant of links hover */
								
	--ads-code-color: dimgray;							/* For general code */
	--ads-code-color-dark: silver;
	--ads-attribute-color: blue;						/* For all attributed stings */
	--ads-attribute-color-dark: cornflowerblue;
	--ads-code-buildin-color: red;
	--ads-code-buildin-color-dark: red;
	--ads-comment-color: gray;							/* For secondary text & comments */
	--ads-comment-color-dark: gray;
	--ads-markup-color: navy; 							/* For all kind of markup text */
	--ads-markup-color-dark: cornflowerblue; 
	--ads-literal-color: blue;							/* For Keywords  */
	--ads-literal-color-dark: cornflowerblue;
	--ads-tag-color: firebrick;							/* For Tags & Keywords */
	--ads-tag-color-dark: indianred;
	--ads-verbatim-color: dimgray; 						/* For Verbatim & other text */
	--ads-verbatim-color-dark: gray;
	
	--ads-single-border-color: #dddddd;					/* Mainly for single lines */
	--ads-border-color: rgb(0 0 0 / 0.6);				/* Light variant for some transparent borders */
	--ads-border-color-dark: rgb(255 255 255 / 0.1);	/* Dark variant for all borders */
	--ads-details-color: rgb(0 0 0 / 0.85);				/* Some borders needs to be less transparent */ 
	--ads-details-color-dark: rgb(255 255 255 / 0.85);	/* dark variant of these borders */
	
	/* Colors for tables */

	--ads-table-border-color: #cccccc;						
	--ads-table-background-color: #ffffff;					
	--ads-table-background-color-dark: #212121;			
	--ads-table-head-background-color: #f7f8f7;
	--ads-table-head-background-color-dark: #323232;
	--ads-table-alternate-background-color: #f8f8f7;
	--ads-table-alternate-background-color-dark: #f8f8f7;
	--ads-table-stripes-background-color: #f7f8f7;
	--ads-table-stripes-background-color-dark: #323232;
	--ads-linenotable-background-color: none;
	--ads-linenotable-background-color-dark: none;

	/* Colors for code blocks & syntax highlighting using predefined colors */
	
	--ads-code-attribute-color: var(--ads-attribute-color);
	--ads-code-attribute-color-dark: var(--ads-attribute-color-dark);
	--ads-code-comment-color: var(--ads-comment-color);
	--ads-code-comment-color-dark: var(--ads-comment-color-dark);
	--ads-code-literal-color: var(--ads-literal-color);
	--ads-code-literal-color-dark: var(--ads-literal-color-dark);
	--ads-code-meta-color: var(--ads-markup-color);
	--ads-code-meta-color-dark: var(--ads-markup-color-dark);
	--ads-code-symbol-color: var(--ads-attribute-color);
	--ads-code-symbol-color-dark: var(--ads-attribute-color-dark);
	--ads-code-tag-color: var(--ads-tag-color);
	--ads-code-tag-color-dark: var(--ads-tag-color-dark);
	
	/* quotes and other blocks */
	
	--ads-quote-color: rgb(0 0 0 / 0.85);
	--ads-quote-color-dark: rgb(255 255 255 / 0.85);
	--ads-pre-color: green;
	--ads-pre-color-dark: #eeeeee;
	--ads-pre-background-color: #f7f7f8;
	--ads-pre-background-color-dark: #7f7f7f;
	--ads-exampleblock-background-color: #ffffff;
	--ads-exampleblock-background-color-dark: #121212;
	--ads-sidebar-background-color: #f3f3f2;
	--ads-sidebar-background-color-dark: #3f3f3f;
	--ads-listingblock-background-color: #f7f7f8;
	--ads-listingblock-background-color-dark: #333333;
	--ads-listingblock-output-background-color: rgb(0 0 0 / 0.9);
	--ads-listingblock-output-background-color-dark: #7f7f7f;

	/* Colors for the UI elements */
	
	--ads-kbd-background-color: #f7f7f7;
	--ads-kbd-background-color-dark: #bababa;
	--ads-kbd-border-color: #cccccc;
	--ads-kbd-border-color-dark: rgb(0 0 0 / 0.8);
	--ads-kbd-color: rgb(0 0 0 / 0.8);
	--ads-kbd-color-dark: rgb(0 0 0 / 0.8);
	--ads-keyseq-color: rgb(51 51 51 / 0.8);
	--ads-keyseq-color-dark: rgb(255 255 255 / 0.1);
	--ads-menu-color: #000000;
	--ads-menu-color-dark: #eeeeee;

	/* Colors for the Table of contents */
	
	--ads-toc-background-color: #f8f8f7; 
	--ads-toc-border-color: #e7e7e9;
	--ads-toc-background-color-dark: #323232;	
	--ads-toc2-background-color: #f8f8f7;
	--ads-toc2-background-color-dark: #323232;	

	/* Colors for the Footer */
	
	--ads-footer-background-color: #606060;
	--ads-footer-background-color-dark: #505050;

	/* Colors for Pretty Print */
	
	--ads-prettyprint-background-color: #f7f7f8;
	--ads-prettyprint-background-color-dark: #7f7f7f;
	--ads-prettyprint-list-background-color: none;
	--ads-prettyprint-list-background-color-dark: none;

	/*  Admonitions: The background color is unused in the base style.
		It is prepared for a style similar to Apple Calendar with dark/light colors */
		
	--ads-admonitionblock-background-color: none;
	--ads-admonitionblock-background-color-dark: none;
	--ads-note-color: #1962d1;
	--ads-note-border-color: #1962d1;
	--ads-note-background-color: #b8d4ff;
	--ads-tip-color: #ebd005;
	--ads-tip-border-color: #ebd005;
	--ads-tip-background-color: #fcf3ae;
	--ads-warning-color: #fc9803;
	--ads-warning-border-color: #fc9803;
	--ads-warning-background-color: #fae1bb;
	--ads-caution-color: #cf2604;
	--ads-caution-border-color: #cf2604;
	--ads-caution-background-color: #fadbd4;
	--ads-important-color: #800101;
	--ads-important-border-color: #800101;
	--ads-important-background-color: #fbd0d0;
}

/* 
	The standard color definitions: can be used as classes for colouring the text 
	We separated these color definitions into a extra root selector for reducing 
	the amount of text when using the 'styles' attribute. Then these colors are not needed.
*/


:root {	
	--ads-aqua-color: #00fafa;
	--ads-aqua-color-dark: #446666;
	--ads-aqua-background-color: #00fafa;
	--ads-aqua-background-color-dark: #446666;
	--ads-black-color: #000000;
	--ads-black-color-dark: #eeeeee;
	--ads-black-background-color: #000000;
	--ads-black-background-color-dark: #eeeeee;
	--ads-blue-color: #0000bf;
	--ads-blue-color-dark: #575778;
	--ads-blue-background-color: #0000bf;
	--ads-blue-background-color-dark: #575778;
	--ads-fuchsia-color: #fa00fa;
	--ads-fuchsia-color-dark: #575778;
	--ads-fuchsia-background-color: #fa00fa;
	--ads-fuchsia-background-color-dark: #575778;
	--ads-gray-color: #7d7d7d;
	--ads-gray-color-dark: #7d7d7d;
	--ads-gray-background-color: #7d7d7d;
	--ads-gray-background-color-dark: #7d7d7d;
	--ads-green-color: #007d00;
	--ads-green-color-dark: #007d00;
	--ads-green-background-color: #007d00;
	--ads-green-background-color-dark: #007d00;
	--ads-lime-color: #00fa00;
	--ads-lime-color-dark: #00fa00;
	--ads-lime-background-color: #00fa00;
	--ads-lime-background-color-dark: #00fa00;
	--ads-maroon-color: #7d0000;
	--ads-maroon-color-dark: #7d0000;
	--ads-maroon-background-color: #7d0000;
	--ads-maroon-background-color-dark: #7d0000;
	--ads-navy-color: #00007d;
	--ads-navy-color-dark: #00007d;
	--ads-navy-background-color: #00007d;
	--ads-navy-background-color-dark: #00007d;
	--ads-olive-color: #7d7d00;
	--ads-olive-color-dark: #616100;
	--ads-olive-background-color: #7d7d00;
	--ads-olive-background-color-dark: #616100;
	--ads-orange-color: #FF9300;
	--ads-orange-color-dark: #C37C2D;
	--ads-orange-background-color: #FF9300;
	--ads-orange-background-color-dark: #C37C2D;
	--ads-purple-color: #7d007d;
	--ads-purple-color-dark: #660066;
	--ads-purple-background-color: #7d007d;
	--ads-purple-background-color-dark: #660066;
	--ads-red-color: #fa0000;
	--ads-red-color-dark: #b00000;
	--ads-red-background-color: #fa0000;
	--ads-red-background-color-dark: #b00000;
	--ads-silver-color: #bcbcbc;
	--ads-silver-color-dark: #878787;
	--ads-silver-background-color: #bcbcbc;
	--ads-silver-background-color-dark: #878787;
	--ads-teal-color: #007d7d;
	--ads-teal-color-dark: #006969;
	--ads-teal-background-color: #007d7d;
	--ads-teal-background-color-dark: #006969;
	--ads-white-color: #fafafa;
	--ads-white-color-dark: #3b3b3b;
	--ads-white-background-color: #fafafa;
	--ads-white-background-color-dark: #3b3b3b;
	--ads-yellow-color: #fafa00;
	--ads-yellow-color-dark: #adad00;
	--ads-yellow-background-color: #fafa00;
	--ads-yellow-background-color-dark: #adad00;
}

/*** End of the vars ***/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-family: var(--ads-body-font);   /* Standard font */
	font-size: 100%;					/* the the users default font size as the basis */
	-webkit-text-size-adjust: 100%;
	hyphens: auto;
	-webkit-hyphens: auto;
}

body {									/* Here are many default values inherited to others */
	background-color: var(--ads-background-color);
	color: var(--ads-color);				
	padding: 0;
	margin: 0;
	font-size: inherit;					/* Font size from <html> */
	line-height: 1;						/* Standard line height */
	position: relative;					/* The main anchor for all postion:absolute elements */
	cursor: auto;						/* show the default cursor based on the detail */
	tab-size: 4;						/* for formatting code */
	word-wrap: anywhere;				/* do word wrap wherever it's possible & needed */
	text-align:	var(--ads-text-align, left);
	-moz-osx-font-smoothing: grayscale;		/* how to antialias the fonts in... */
	-webkit-font-smoothing: antialiased;	/* ... different browsers */
	
	--fa-style: var(--ads-icon-font-weight);	/* Map the ads variable to the font awesome variable */
}

@media (prefers-color-scheme: dark) {	/* this is how all dark variants are done */
	body {								/* modifying only the colors, the rest remains the same */
		background-color: var(--ads-background-color-dark);
		color: var(--ads-color-dark);
	}
}

dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

a {
	background: none;
	color: var(--ads-a-color);
	text-decoration: underline;
	line-height: inherit;
}

@media (prefers-color-scheme: dark) {
	a {
		color: var(--ads-a-color-dark);
	}
}

a:active,
a:hover {
	cursor: pointer;
	outline: 0;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:focus {
	color: var(--ads-a-hover-color);
}

@media (prefers-color-scheme: dark) {
	a:hover,
	a:focus {
		color: var(--ads-a-hover-color-dark);
	}
}

abbr {
	font-size: 0.9em;
}

abbr[title] {
	cursor: help;
	border-bottom: 1px dotted var(--ads-single-border-color);
	text-decoration: none;
}

b,
strong {
	font-weight: bold;
	line-height: inherit;
}

strong strong {
	font-weight: 400;
}

code,
kbd,
pre {
	/* 	Sizes and other font variables are inherited from body and need not be listed again.
		Only changed attributes are listed:
	*/
	font-family: var(--ads-monospaced-font);
}

code {
	font-weight: normal; 
	color: var(--ads-code-color);
}

@media (prefers-color-scheme: dark) {
	code {
		color: var(--ads-code-color-dark);
	}
}

.code-subst,
.code-formula,
.code-attr,	
.code-property,	
.code-params {
	color: var(--ads-code-attribute-color);
}

@media (prefers-color-scheme: dark) {
	.code-subst,
	.code-formula,
	.code-attr,
	.code-property,
	.code-params {
		color: var(--ads-code-attribute-color-dark);
	}
}

.code-keyword,
.code-attribute,
.code-selector-tag,
.code-doctag,
.code-name,	
.code-title,
.code-section,
.code-strong {
	font-weight: bold;
}

.code-emphasis {
	font-style: italic;
}

.code-comment {
	color: var(--ads-code-comment-color);
}

@media (prefers-color-scheme: dark) {
	.code-comment {
		color: var(--ads-code-comment-color-dark);
	}
}

.code-keyword,
.code-tag,
.code-link,	
.code-punctuation {	
	color: var(--ads-code-tag-color);
}

@media (prefers-color-scheme: dark) {
	.code-keyword,
	.code-tag,
	.code-link,
	.code-punctuation {
		color: var(--ads-code-tag-color-dark);
	}
}


.code-type,	
.code-string,
.code-number,
.code-selector-id,
.code-selector-class,
.code-quote,
.code-template-tag,
.code-deletion
.code-title,
.code-section {
	color: var(--ads-code-attribute-color);
}

@media (prefers-color-scheme: dark) {
	.code-type,
	.code-string,
	.code-number,
	.code-selector-id,
	.code-selector-class,
	.code-quote,
	.code-template-tag,
	.code-deletion
	.code-title,
	.code-section {
		color: var(--ads-code-attribute-color-dark);
	}
}

.code-regexp,
.code-symbol,
.code-variable,
.code-template-variable,
.code-selector-attr,
.code-operator,
.code-selector-pseudo {
	color: var(--ads-code-meta-color);
}

@media (prefers-color-scheme: dark) {
	.code-regexp,
	.code-symbol,
	.code-variable,
	.code-template-variable,
	.code-selector-attr,
	.code-operator,
	.code-selector-pseudo {
		color: var(--ads-code-meta-color-dark);
	}
}

.code-literal {
	color: var(--ads-code-literal-color);
}

@media (prefers-color-scheme: dark) {
	.code-literal {
		color: var(--ads-code-literal-color-dark);
	}
}

.code-meta {
	color: var(--ads-code-meta-color);
}

@media (prefers-color-scheme: dark) {
	.code-meta {
		color: var(--ads-code-meta-color-dark);
	}
}

.code-built_in,
.code-bullet,
.code-code,
.code-addition {
	color: var(--ads-code-buildin-color);
}

@media (prefers-color-scheme: dark) {
	.code-built_in,
	.code-bullet,
	.code-code,
	.code-addition {
		color: var(--ads-code-buildin-color-dark);
	}
}


pre {
	color: var(--ads-code-color);
	line-height: 1.45;
	text-rendering: optimizeSpeed;
	white-space: pre-wrap;
}

@media (prefers-color-scheme: dark) {
	pre {
		color: var(--ads-code-color-dark);
	}
}

dfn {
	font-style: italic;
}

em,
i {
	font-style: italic;
	line-height: inherit;
}

em em {				/* em in em gets back to normal */
	font-style: normal;
}

hr {
	border: solid var(--ads-single-border-color);
	border-width: 1px 0 0;
	clear: both;
	height: 0;
	margin: 1.25em 0 1.1875em;
}

/* 
	The dark varian of mark is the same as the blight variant
	So there is no definition for dark mode
 */
mark {
	background-color: var(--ads-mark-background-color);
	color: var(--ads-color);
}


p {
	line-height: 1.6;
	margin-bottom: 1.6em;		/* rem is relative to the root definition in <html> */
	text-rendering: optimizeLegibility;
	/* hanging-punctuation: first force-end; */
}

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
	font-size: 60%;
	line-height: inherit;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img,
object[type^="image/"],
svg {
	display: inline-block;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

img {
	border: 0;
}

/* FB: 14.11.2024: Format all inline images at the baseline */
.image img {
	vertical-align: baseline;
}


object {
	max-width: 100%;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

audio,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

/*** Standards for usage in classes ***/

.left {
	float: left !important;
}

.right {
	float: right !important;
}

.top {
	float: top !important;
}

.bottom {
	float: bottom !important;
}

.float-reference-page {
	float-reference: page;
}

.float-reference-column {
	float-reference: column;
}

.float-reference-inline {
	float-reference: inline;
}

.float-reference-region {
	float-reference: region;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}

.text-justify {
	text-align: justify !important;
}

.hide {
	display: none;
}

/*** Title-Definitions ***/

.subheader,
.subtitle,
.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
	line-height: 1.45;
	color: var(--ads-headline-block-color);
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0.25em;
}

@media (prefers-color-scheme: dark) {
	.subheader,
	.subtitle,
	.admonitionblock td.content > .title,
	.audioblock > .title,
	.exampleblock > .title,
	.imageblock > .title,
	.listingblock > .title,
	.literalblock > .title,
	.stemblock > .title,
	.openblock > .title,
	.paragraph > .title,
	.quoteblock > .title,
	table.tableblock > .title,
	.verseblock > .title,
	.videoblock > .title,
	.dlist > .title,
	.olist > .title,
	.ulist > .title,
	.qlist > .title,
	.hdlist > .title {
		color: var(--ads-headline-block-color-dark);
	}
}

p aside {
	font-size: 0.875em;
	line-height: 1.35;
	font-style: italic;
}

h1,
.subtitle,
h2,
h3,
#toctitle,
.sidebarblock > .content > .title,
h4,
h5,
h6 {
	font-family: var(--ads-headline-font); 
	font-weight: 300;
	font-style: normal;
	color: var(--ads-headline-color);
	text-rendering: optimizeLegibility;
	margin-bottom: 0.5em;
	word-spacing: -0.05em;
}

@media (prefers-color-scheme: dark) {
	h1,
	.subtitle,
	h2,
	h3,
	#toctitle,
	.sidebarblock > .content > .title,
	h4,
	h5,
	h6 {
		color: var(--ads-headline-color-dark);
	}
}

h1 small,
h2 small,
h3 small,
#toctitle small,
.sidebarblock > .content > .title small,
h4 small,
h5 small,
h6 small {
	color: var(--ads-headline-small-color);
	line-height: 0;
}

@media (prefers-color-scheme: dark) {
	h1 small,
	h2 small,
	h3 small,
	#toctitle small,
	.sidebarblock > .content > .title small,
	h4 small,
	h5 small,
	h6 small {
		color: var(--ads-headline-small-color-dark);
	}
}

h1 {
	font-size: 2.125em;
}

.subtitle {
	font-size: 1.6875em;	
}

h2 {
	font-size: 1.6875em;
}

h3,
#toctitle,
.sidebarblock > .content > .title {
	font-size: 1.375em;
}

h4,
h5 {
	font-size: 1.125em;
}

h6 {
	font-size: 1em;
}

ul,
ol,
dl {
	line-height: 1.6;
	margin-bottom: 1.25em;
	list-style-position: outside;
}

ul,
ol {
	margin-left: 1.5em;
}

ul li ul,
ul li ol {
	margin-left: 1.25em;
	margin-bottom: 0;
}

ul.square li ul,
ul.circle li ul,
ul.disc li ul {
	list-style: inherit;
}

ul.square {
	list-style-type: square;
}

ul.circle {
	list-style-type: circle;
}

ul.disc {
	list-style-type: disc;
}

ol li ul,
ol li ol {
	margin-left: 1.25em;
	margin-bottom: 0;
}

dl dt {
	margin-bottom: 0.3125em;
	font-weight: bold;
}

dl dd {
	margin-bottom: 1.25em;
	margin-left: 1.125em;
}

blockquote {
	margin: 0 0 1.25em;
	padding: 0.5625em 1.25em 0 1.1875em;
	border-left: 1px solid var(--ads-single-border-color);
}

blockquote,
blockquote p {
	line-height: 1.6;
	color: var(--ads-quote-color);
}

@media (prefers-color-scheme: dark) {
	blockquote,
	blockquote p {
		color: var(--ads-quote-color-dark);
}
}


@media screen and (min-width: 768px) {
	h1 {
		font-size: 2.75em;
	}

	h2 {
		font-size: 2.3125em;
	}

	h3,
	#toctitle,
	.sidebarblock > .content > .title {
		font-size: 1.6875em;
	}

	h4 {
		font-size: 1.4375em;
	}
}

table {
	background-color: var(--ads-table-background-color);
	border: 1px solid var(--ads-single-border-color);
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.25em;
	word-wrap: normal;
}

@media (prefers-color-scheme: dark) {
	table {
		background-color: var(--ads-table-background-color-dark);
	}
}

table thead,
table tfoot {
	background-color: var(--ads-table-head-background-color);
}

@media (prefers-color-scheme: dark) {
	table thead,
	table tfoot	{
		background-color: var(--ads-table-head-background-color-dark);
	}
}

table thead tr th,
table thead tr td,
table tfoot tr th,
table tfoot tr td {
	padding: 0.5em 0.625em 0.625em;
	font-size: inherit;
	color: var(--ads-color);
	text-align: left;
}

@media (prefers-color-scheme: dark) {
	table thead tr th,
	table thead tr td,
	table tfoot tr th,
	table tfoot tr td {
		color: var(--ads-color-dark);
	}
}

table tr th,
table tr td {
	padding: 0.5625em 0.625em;
	font-size: inherit;
	color: var(--ads-color);
}

@media (prefers-color-scheme: dark) {
	table tr th,
	table tr td {
		color: var(--ads-color-dark);
	}
}

table tr.even,
table tr.alt {
	background-color: var(--ads-table-alternate-background-color);
}

@media (prefers-color-scheme: dark) {
	table tr.even,
	table tr.alt {
		background-color: var(--ads-table-alternate-background-color-dark);
	}
}

table thead tr th,
table tfoot tr th,
table tbody tr td,
table tr td,
table tfoot tr td {
	line-height: 1.6;
}

h1 strong,
h2 strong,
h3 strong,
#toctitle strong,
.sidebarblock > .content > .title strong,
h4 strong,
h5 strong,
h6 strong {
	font-weight: 400;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.stretch {
	width: 100%;
}

.clearfix::before,
.clearfix::after,
.float-group::before,
.float-group::after {
	content: "";
	display: table;
}

.clearfix::after,
.float-group::after {
	clear: both;
}

:not(pre).nobreak {
	word-wrap: normal;
}

:not(pre).nowrap {
	white-space: nowrap;
}

:not(pre).pre-wrap {
	white-space: pre-wrap;
}

:not(pre):not([class^=L]) > code {
	font-size: 0.9375em;
	font-style: normal !important;
	letter-spacing: 0;
	padding: 0.1em 0.5em;
	word-spacing: -0.15em;
	background-color: var(--ads-pre-background-color);
	border-radius: 4px;
	line-height: 1.45;
	text-rendering: optimizeSpeed;
}

@media (prefers-color-scheme: dark) {
	:not(pre):not([class^=L]) > code {
		background-color: var(--ads-pre-background-color-dark);
	}
}

pre code,
pre pre {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

pre > code {
	display: block;
}

pre.nowrap,
pre.nowrap pre {
	white-space: pre;
	word-wrap: normal;
}

.keyseq {
	color: var(--ads-keyseq-color);
}

@media (prefers-color-scheme: dark) {
	.keyseq {
		color: var(--ads-keyseq-color-dark);
	}
}

kbd {
	display: inline-block;
	color: var(--ads-kbd-color);
	font-size: 0.65em;
	line-height: 1.5;
	background-color: var(--ads-kbd-background-color);
	border: 1px solid var(--ads-kbd-border-color);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 0 0 0.1em white inset;
	margin: 0 0.2em;
	padding: 0.2em 0.5em;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
	white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
	kbd {
		color: var(--ads-kbd-color-dark);
		background-color: var(--ads-kbd-background-color-dark);
	}
}

.keyseq kbd:first-child {
	margin-left: 0;
}

.keyseq kbd:last-child {
	margin-right: 0;
}

.menuseq,
.menuref {
	color: var(--ads-menu-color);
}

@media (prefers-color-scheme: dark) {
	.menuseq,
	.menuref {
		color: var(--ads-menu-color-dark);
	}
}
.menuseq b:not(.caret),
.menuref {
	font-weight: inherit;
}

.menuseq {
	word-spacing: -0.02em;
}

.menuseq b.caret {
	font-size: 1.25em;
	line-height: 0.8;
}

.menuseq i.caret {
	font-weight: bold;
	text-align: center;
	width: 0.45em;
}

b.button::before,
b.button::after {
	position: relative;
	top: -1px;
	font-weight: 400;
}

b.button::before {
	content: "[";
	padding: 0 3px 0 2px;
}

b.button::after {
	content: "]";
	padding: 0 2px 0 3px;
}

p a > code:hover {
	color: var(--ads-color);
}

@media (prefers-color-scheme: dark) {
	p a > code:hover {
		color: var(--ads-color-dark);
	}
}

body > div[id] {
	margin: 0 auto;
	max-width: 62.5em;
	position: relative;
	padding-left: 0.9375em;
	padding-right: 0.9375em;
	width: 100%;
}


@media screen {
	/* This original asciidoctor rule leads to empty PDF pages when paginating. Therefore we limited it to screen use only */

	body > div[id]::before,
	body > div[id]::after,
	#content #footnotes::before {
		content: "";
		display: table;
		clear: both;
	}
}

#content {
	margin-top: 1.25em;
	margin-bottom: 0.625em;
}

#content::before {
	content: none;
}

#header > h1:first-child {
	color: var(--ads-title-color);
	margin-top: 2.25rem;
	margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
	#header > h1:first-child {
		color: var(--ads-title-color-dark);
	}
}

#header > h1:first-child + .tocbase {
	margin-top: 8px;
	border-top: 1px solid var(--ads-single-border-color);
}

#header > h1:only-child,
body.toc2 #header > h1:nth-last-child(2) {
	border-bottom: 1px solid var(--ads-single-border-color);
	padding-bottom: 8px;
}

#header .details {
	padding-top: 0.25em;
	padding-bottom: 0.5em;
	padding-left: 0.25em;
	color: var(--ads-details-color);
	display: flex;
	flex-flow: row wrap;
}

@media (prefers-color-scheme: dark) {
	#header .details {
		color: var(--ads-details-color-dark);
	}
}

#header .details span:first-child {
	margin-left: -0.125em;
}

#header .details span.email a {
	color: var(--ads-details-color);
}

@media (prefers-color-scheme: dark) {
	#header .details span.email a {
		color: var(--ads-details-color-dark);
	}
}

#header .details br {
	display: none;
}

#header .details br + span::before {
	content: "\00a0\2013\00a0";
}

#header .details br + span.author::before {
	content: "\00a0\22c5\00a0";
	color: var(--ads-details-color);
}

@media (prefers-color-scheme: dark) {
	#header .details br + span.author::before {
		color: var(--ads-details-color-dark);
	}
}

#header .details br + span#revremark::before {
	content: "\00a0|\00a0";
}

#header #revnumber {
	text-transform: capitalize;
}

#header #revnumber::after {
	content: "\00a0";
}

#content > h1:first-child:not([class]) {
	color: var(--ads-details-color);
	border-bottom: 1px solid var(--ads-single-border-color);
	padding-bottom: 8px;
	margin-top: 0;
	padding-top: 1rem;
	margin-bottom: 1.25rem;
}

@media (prefers-color-scheme: dark) {
	#content > h1:first-child:not([class]) {
		color: var(--ads-details-color-dark);
	}
}

.tocbase {
	margin-top: 1em;	/* FB: added more space between the header details and TOC */
	border-bottom: 1px solid var(--ads-toc-border-color);
	padding-bottom: 0.5em;
}

.tocbase > ul {
	margin-left: 0.125em;
}

.tocbase ul.sectlevel0 > li > a {
	font-style: italic;
}

.tocbase ul.sectlevel0 ul.sectlevel1 {
	margin: 0.5em 0;
}

.tocbase ul {
	font-family: var(--ads-toc-font); 
	list-style-type: none;
}

.tocbase li {
	line-height: 1.3334;
	margin-top: 0.3334em;
}

.tocbase a {
	text-decoration: none;
}

.tocbase a:active {
	text-decoration: underline;
}

#toctitle {
	color: var(--ads-headline-block-color);
	font-size: 1.2em;
}

@media (prefers-color-scheme: dark) {
	#toctitle {
		color: var(--ads-headline-block-color-dark);
	}
}

@media screen and (min-width: 768px) {
	#toctitle {
		font-size: 1.375em;
	}

	body.toc2 {
		padding-left: 15em;
		padding-right: 0;
	}

	.tocbase.toc2 {
		margin-top: 0 !important;
		background-color: var(--ads-toc2-background-color);
		position: fixed;
		width: 15em;
		left: 0;
		top: 0;
		border-right: 1px solid var(--ads-toc-border-color);
		border-top-width: 0 !important;
		border-bottom-width: 0 !important;
		z-index: 1000;
		padding: 1.25em 1em;
		height: 100%;
		overflow: auto;
	}

	@media (prefers-color-scheme: dark) {
		.tocbase.toc2 {
				background-color: var(--ads-background-toc2-color-dark);
		}
	}

	.tocbase.toc2 #toctitle {
		margin-top: 0;
		margin-bottom: 0.8rem;
		font-size: 1.2em;
	}

	.tocbase.toc2 > ul {
		font-size: 0.9em;
		margin-bottom: 0;
	}

	.tocbase.toc2 ul ul {
		margin-left: 0;
		padding-left: 1em;
	}

	.tocbase.toc2 ul.sectlevel0 ul.sectlevel1 {
		padding-left: 0;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	body.toc2.toc-right {
		padding-left: 0;
		padding-right: 15em;
	}

	body.toc2.toc-right .tocbase.toc2 {
		border-right-width: 0;
		border-left: 1px solid #e7e7e9;
		left: auto;
		right: 0;
	}
}

@media screen and (min-width: 1280px) {
	body.toc2 {
		padding-left: 20em;
		padding-right: 0;
	}

	.tocbase.toc2 {
		width: 20em;
	}

	.tocbase.toc2 #toctitle {
		font-size: 1.375em;
	}

	.tocbase.toc2 > ul {
		font-size: 0.95em;
	}

	.tocbase.toc2 ul ul {
		padding-left: 1.25em;
	}

	body.toc2.toc-right {
		padding-left: 0;
		padding-right: 20em;
	}
}

#content .tocbase {
	border: 0; /* No Border: 1px solid var(--ads-single-border-color) */
	margin-bottom: 1.25em;
	padding: 1.25em;
	background-color: var(--ads-background-toc-color); 
	border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	#content .tocbase {
		background-color: var(--ads-background-toc-color-dark);
	}
}

#content .tocbase > :first-child {
	margin-top: 0;
}

#content .tocbase > :last-child {
	margin-bottom: 0;
}

#footer {
	max-width: none;
	background-color: var(--ads-footer-background-color); 
	padding: 1.25em;
}

@media (prefers-color-scheme: dark) {
	#footer {
		background-color: var(--ads-footer-background-color-dark);
	}
}

#footer-text {
	color: var(--ads-color-dark);	/* Use the dark color as the inverted color */
	line-height: 1.44;
}

@media (prefers-color-scheme: dark) {
	#footer-text {
		color: var(--ads-color-dark);	/* Use the light color as the inverted color */
	}
}

.sect1 {
	padding-bottom: 0.625em;
}

@media screen and (min-width: 768px) {
	#content {
		margin-bottom: 1.25em;
	}

	.sect1 {
		padding-bottom: 1.25em;
	}
}

.sect1:last-child {
	padding-bottom: 0;
}

/* FB: Temporarily deactivated 

.sect1 + .sect1 {
	border-top: 1px solid #e7e7e9;
}
*/

#content h1 > a.anchor,
h2 > a.anchor,
h3 > a.anchor,
#toctitle > a.anchor,
.sidebarblock > .content > .title > a.anchor,
h4 > a.anchor,
h5 > a.anchor,
h6 > a.anchor {
	position: absolute;
	z-index: 1001;
	width: 1.5em;
	margin-left: -1.5em;
	display: block;
	text-decoration: none !important;
	visibility: hidden;
	text-align: center;
	font-weight: 400;
}

#content h1 > a.anchor::before,
h2 > a.anchor::before,
h3 > a.anchor::before,
#toctitle > a.anchor::before,
.sidebarblock > .content > .title > a.anchor::before,
h4 > a.anchor::before,
h5 > a.anchor::before,
h6 > a.anchor::before {
	content: "\00A7";
	font-size: 0.85em;
	display: block;
	padding-top: 0.1em;
}

#content h1:hover > a.anchor,
#content h1 > a.anchor:hover,
h2:hover > a.anchor,
h2 > a.anchor:hover,
h3:hover > a.anchor,
#toctitle:hover > a.anchor,
.sidebarblock > .content > .title:hover > a.anchor,
h3 > a.anchor:hover,
#toctitle > a.anchor:hover,
.sidebarblock > .content > .title > a.anchor:hover,
h4:hover > a.anchor,
h4 > a.anchor:hover,
h5:hover > a.anchor,
h5 > a.anchor:hover,
h6:hover > a.anchor,
h6 > a.anchor:hover {
	visibility: visible;
}

#content h1 > a.link,
h2 > a.link,
h3 > a.link,
#toctitle > a.link,
.sidebarblock > .content > .title > a.link,
h4 > a.link,
h5 > a.link,
h6 > a.link {
	color: var(--ads-headline-color);
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	#content h1 > a.link,
	h2 > a.link,
	h3 > a.link,
	#toctitle > a.link,
	.sidebarblock > .content > .title > a.link,
	h4 > a.link,
	h5 > a.link,
	h6 > a.link {
		color: var(--ads-headline-color-dark);
	}
}

#content h1 > a.link:hover,
h2 > a.link:hover,
h3 > a.link:hover,
#toctitle > a.link:hover,
.sidebarblock > .content > .title > a.link:hover,
h4 > a.link:hover,
h5 > a.link:hover,
h6 > a.link:hover {
	color: var(--ads-a-hover-color);
}

@media (prefers-color-scheme: dark) {
	#content h1 > a.link:hover,
	h2 > a.link:hover,
	h3 > a.link:hover,
	#toctitle > a.link:hover,
	.sidebarblock > .content > .title > a.link:hover,
	h4 > a.link:hover,
	h5 > a.link:hover,
	h6 > a.link:hover {
		color: var(--ads-a-hover-color-dark);
	}
}

details,
.audioblock,
.imageblock,
.literalblock,
.listingblock,
.stemblock,
.videoblock {
	margin-bottom: 1.25em;
}

details {
	margin-left: 1.25rem;
}

details > summary {
	cursor: pointer;
	display: block;
	position: relative;
	line-height: 1.6;
	margin-bottom: 0.625rem;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

details > summary::-webkit-details-marker {
	display: none;
}

details > summary::before {
	content: "";
	border: solid transparent;
	border-left-color: currentColor; /* Use the color from the parent object */
	border-width: 0.3em 0 0.3em 0.5em;
	position: absolute;
	top: 0.5em;
	left: -1.25rem;
	transform: translateX(15%);
}

details[open] > summary::before {
	border: solid transparent;
	border-top-color: currentColor; /* Use the color from the parent object */
	border-width: 0.5em 0.3em 0;
	transform: translateY(15%);
}

details > summary::after {
	content: "";
	width: 1.25rem;
	height: 1em;
	position: absolute;
	top: 0.3em;
	left: -1.25rem;
}

.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
	text-rendering: optimizeLegibility;
	text-align: left;
	font-family: var(--ads-headline-font);
	font-size: 1rem;
	font-style: italic;
}

table.tableblock.fit-content > caption.title {
	white-space: nowrap;
	width: 0;
}

.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
	font-size: 1.15em;	/* .lead should be 15% bigger than the normal font */
	line-height: 1.6;
	color: var(--ads-details-color);
}

@media (prefers-color-scheme: dark) {
	.paragraph.lead > p,
	#preamble > .sectionbody > [class=paragraph]:first-of-type p {
		color: var(--ads-details-color-dark);
	}
}


/* fb: Added a few non typical but useful text formats to the basis. */ 

.allcaps {
	text-transform: uppercase;
}

.smallcaps {
	font-variant: small-caps;
}

.more-spacing {
	letter-spacing: 0.05em;
}

.less-spacing {
	letter-spacing: -0.05em;
}

.admonitionblock > table {
	border-collapse: separate;
	border: 0;
	background-color: var(--ads-admonitionblock-background-color);
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	.admonitionblock > table {
		background-color: var(--ads-admonitionblock-background-color-dark);
	}
}

.admonitionblock > table td.icon {
	text-align: center;
	width: 80px;
	font-weight: normal;
}

.admonitionblock > table td.icon img {
	max-width: none;
}

.admonitionblock > table td.icon .title {
	font-weight: 600;
	font-family: var(--ads-headline-font); 
	text-transform: uppercase;
}

.admonitionblock > table td.content {
	padding-left: 1.125em;
	padding-right: 1.25em;
	border-left: 1px solid var(--ads-single-border-color);
	color: var(--ads-color);
	word-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
	.admonitionblock > table td.content {
		color: var(--ads-color-dark);
	}
}

.admonitionblock > table td.content > :last-child > :last-child {
	margin-bottom: 0;
}

.exampleblock > .content {
	border: 1px solid var(--ads-single-border-color);
	margin-bottom: 1.25em;
	padding: 1.25em;
	background-color: var(--ads-background-exampleblock-color); 
	border-radius: 4px;
	box-shadow: 0 1px 4px #e0e0dc;
}

@media (prefers-color-scheme: dark) {
	.exampleblock > .content {
		background-color: var(--ads-background-exampleblock-color-dark); 
	}
}

.exampleblock > .content > :first-child {
	margin-top: 0;
}

.exampleblock > .content > :last-child {
	margin-bottom: 0;
}

.sidebarblock {
	border: 1px solid var(--ads-single-border-color);
	margin-bottom: 1.25em;
	padding: 1.25em;
	background-color: var(--ads-background-sidebar-color); 
	border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	.sidebarblock {
		background-color: var(--ads-background-sidebar-color-dark); 
	}
}

.sidebarblock > :first-child {
	margin-top: 0;
}

.sidebarblock > :last-child {
	margin-bottom: 0;
}

.sidebarblock > .content > .title {
	color: var(--ads-headline-block-color);
	margin-top: 0;
	text-align: center;
}

@media (prefers-color-scheme: dark) {
	.sidebarblock > .content > .title {
		color: var(--ads-headline-block-color-dark);
	}
}

.exampleblock > .content > :last-child > :last-child,
.exampleblock > .content .olist > ol > li:last-child > :last-child,
.exampleblock > .content .ulist > ul > li:last-child > :last-child,
.exampleblock > .content .qlist > ol > li:last-child > :last-child,
.sidebarblock > .content > :last-child > :last-child,
.sidebarblock > .content .olist > ol > li:last-child > :last-child,
.sidebarblock > .content .ulist > ul > li:last-child > :last-child,
.sidebarblock > .content .qlist > ol > li:last-child > :last-child {
	margin-bottom: 0;
}

.literalblock pre,
.listingblock > .content > pre {
	border-radius: 4px;
	overflow-x: auto;
	padding: 1em;
	font-size: 0.8125em;
}

@media screen and (min-width: 768px) {
	.literalblock pre,
	.listingblock > .content > pre {
		font-size: 0.90625em;
	}
}

@media screen and (min-width: 1280px) {
	.literalblock pre,
	.listingblock > .content > pre {
		font-size: 1em;
	}
}

.literalblock pre,
.listingblock > .content > pre:not(.highlight),
.listingblock > .content > pre[class=highlight],
.listingblock > .content > pre[class^="highlight "] {
	background-color: var(--ads-listingblock-background-color);
}

@media (prefers-color-scheme: dark) {
	.literalblock pre,
	.listingblock > .content > pre:not(.highlight),
	.listingblock > .content > pre[class=highlight],
	.listingblock > .content > pre[class^="highlight "] {
		background-color: var(--ads-listingblock-background-color-dark);
	}
}

.literalblock.output pre {
	color: var(--ads-pre-color);
	background-color: var(--ads-listingblock-background--color);
}

@media (prefers-color-scheme: dark) {
	.literalblock.output pre {
		color: var(--ads-pre-color-dark);
		background-color: var(--ads-listingblock-background-color-dark);
	}
}

.listingblock > .content {
	position: relative;
}

.listingblock code[data-lang]::before {
	display: none;
	content: attr(data-lang);
	position: absolute;
	font-size: 0.75em;
	top: 0.425rem;
	right: 0.5rem;
	line-height: 1;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.5;
}

.listingblock:hover code[data-lang]::before {
	display: block;
}

.listingblock.terminal pre .command::before {
	content: attr(data-prompt);
	padding-right: 0.5em;
	color: inherit;
	opacity: 0.5;
}

.listingblock.terminal pre .command:not([data-prompt])::before {
	content: "$";
}

.listingblock pre.highlightjs {
	padding: 0;
}

.listingblock pre.highlightjs > code {
	padding: 1em;
	border-radius: 4px;
}

.listingblock pre.prettyprint {
	border-width: 0;
}

.prettyprint {
	background-color: var(--ads-prettyprint-background-color);
}

@media (prefers-color-scheme: dark) {
	.prettyprint {
		background-color: var(--ads-prettyprint-background-color-dark);
	}
}

pre.prettyprint .linenums {
	line-height: 1.45;
	margin-left: 2em;
}

pre.prettyprint li {
	background-color: var(--ads-prettyprint-list-background-color);
	list-style-type: inherit;
	padding-left: 0;
}

@media (prefers-color-scheme: dark) {
	pre.prettyprint li {
		background-color: var(--ads-prettyprint-list-background-color-dark);
	}
}

pre.prettyprint li code[data-lang]::before {
	opacity: 1;
}

pre.prettyprint li:not(:first-child) code[data-lang]::before {
	display: none;
}

table.linenotable {
	border-collapse: separate;
	border: 0;
	margin-bottom: 0;
	background-color: var(--ads-linenotable-background-color);
}

@media (prefers-color-scheme: dark) {
	table.linenotable {
		background-color: var(--ads-linenotable-background-color-dark);
	}
}

table.linenotable td[class] {
	color: inherit;
	vertical-align: top;
	padding: 0;
	line-height: inherit;
	white-space: normal;
}

table.linenotable td.code {
	padding-left: 0.75em;
}

table.linenotable td.linenos {
	width: 0.01%;
}

table.linenotable td.linenos,
pre.pygments .linenos,
pre.rouge .linenos {
	border-right: 1px solid;
	opacity: 0.35;
	padding-right: 0.5em;
	user-select: none;
}

pre.pygments span.linenos,
pre.rouge span.linenos {
	display: inline-block;
	margin-right: 0.75em;
}

.quoteblock {
	margin: 0 1em 1.25em 1.5em;
	display: table;
}

.quoteblock:not(.excerpt) > .title {
	margin-left: -1.5em;
	margin-bottom: 0.75em;
}

.quoteblock blockquote,
.quoteblock p {
	color: var(--ads-quote-color);
	font-size: 1.15rem;
	word-spacing: -0.05em;
	line-height: 1.4;
	font-style: italic;
	text-align: justify;
}

@media (prefers-color-scheme: dark) {
	.quoteblock blockquote,
	.quoteblock p {
		color: var(--ads-quote-color-dark);
	}
}

.quoteblock blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.quoteblock blockquote::before {
	content: "\201c";
	float: left;
	font-size: 2.75em;
	font-weight: bold;
	line-height: 0.5em;
	margin-left: -0.6em;
	color: var(--ads-headline-block-color);
}

@media (prefers-color-scheme: dark) {
	.quoteblock blockquote::before {
		color: var(--ads-headline-block-color-dark);
	}
}

.quoteblock blockquote > .paragraph:last-child p {
	margin-bottom: 0;
}

.quoteblock .attribution {
	margin-top: 0.75em;
	margin-right: 0.5em;
	text-align: right;
}

.verseblock {
	margin: 0 1em 1.25em;
}

.verseblock pre {
	font-family: var(--ads-body-font);
	color: var(--ads-pre-color);
	font-weight: normal;
}

@media (prefers-color-scheme: dark) {
	.verseblock pre {
		color: var(--ads-pre-color-dark);
	}
}

.verseblock pre strong {
	font-weight: normal;
}

.verseblock .attribution {
	margin-top: 1.25rem;
	margin-left: 0.5em;
}

.quoteblock .attribution,
.verseblock .attribution {
	font-style: italic;
}

.quoteblock .attribution br,
.verseblock .attribution br {
	display: none;
}

.quoteblock .attribution cite,
.verseblock .attribution cite {
	display: block;
	letter-spacing: -0.025em;
	color: var(--ads-quote-color);
}

@media (prefers-color-scheme: dark) {
	.quoteblock .attribution cite,
	.verseblock .attribution cite {
		color: var(--ads-quote-color-dark);
	}
}

.quoteblock.abstract blockquote::before,
.quoteblock.excerpt blockquote::before,
.quoteblock .quoteblock blockquote::before {
	display: none;
}

.quoteblock.abstract {
	margin: 0 1em 1.25em;
	display: block;
}

.quoteblock.abstract > .title {
	margin: 0 0 0.375em;
	font-size: 1.15em;
	text-align: center;
}

.quoteblock.excerpt > blockquote,
.quoteblock .quoteblock {
	padding: 0 0 0.25em 1em;
	border-left: 0.25em solid var(--ads-single-border-color);
}

.quoteblock.excerpt,
.quoteblock .quoteblock {
	margin-left: 0;
}

.quoteblock.excerpt blockquote,
.quoteblock.excerpt p,
.quoteblock .quoteblock blockquote,
.quoteblock .quoteblock p {
	color: var(--ads-quote-color);
	font-size: 1.0625rem;
}

.quoteblock.excerpt .attribution,
.quoteblock .attribution {			/* Issue #572: I removed an additional .quoteblock */
	color: inherit;
	font-size: 0.85rem;
	text-align: left;
	margin-right: 2em;
	margin-left: 1em;				/* Issue #572: added a left margin */ 
}

p.tableblock:last-child {
	margin-bottom: 0;
}

td.tableblock > .content {
	margin-bottom: 1.25em;
	word-wrap: anywhere;
}

td.tableblock > .content > :last-child {
	margin-bottom: -1.25em;
}

table.tableblock,
th.tableblock,
td.tableblock {
	border: 0 solid var(--ads-table-border-color);
}

table.grid-all > * > tr > * {
	border-width: 1px;
}

table.grid-cols > * > tr > * {
	border-width: 0 1px;	/* For: Top+Bottom Left+Right*/
}

table.grid-rows > * > tr > * {
	border-width: 1px 0;
}

table.frame-all {
	border-width: 1px;
}

table.frame-ends {
	border-width: 1px 0;
}

table.frame-sides {
	border-width: 0 1px;
}

table.frame-none > colgroup + * > :first-child > *,
table.frame-sides > colgroup + * > :first-child > * {
	border-top-width: 0;
}

table.frame-none > :last-child > :last-child > *,
table.frame-sides > :last-child > :last-child > * {
	border-bottom-width: 0;
}

table.frame-none > * > tr > :first-child,
table.frame-ends > * > tr > :first-child {
	border-left-width: 0;
}

table.frame-none > * > tr > :last-child,
table.frame-ends > * > tr > :last-child {
	border-right-width: 0;
}

table.stripes-all > * > tr,
table.stripes-odd > * > tr:nth-of-type(odd),
table.stripes-even > * > tr:nth-of-type(even),
table.stripes-hover > * > tr:hover {
	background-color: var(--ads-table-stripes-background-color);
}

@media (prefers-color-scheme: dark) {
	table.stripes-all > * > tr,
	table.stripes-odd > * > tr:nth-of-type(odd),
	table.stripes-even > * > tr:nth-of-type(even),
	table.stripes-hover > * > tr:hover {
		background-color: var(--ads-table-stripes-background-color-dark);
	}
}

th.halign-left,
td.halign-left {
	text-align: left;
}

th.halign-right,
td.halign-right {
	text-align: right;
}

th.halign-center,
td.halign-center {
	text-align: center;
}

th.valign-top,
td.valign-top {
	vertical-align: top;
}

th.valign-bottom,
td.valign-bottom {
	vertical-align: bottom;
}

th.valign-middle,
td.valign-middle {
	vertical-align: middle;
}

table thead th,
table tfoot th {
	font-weight: bold;
}

tbody tr th {
	background-color: var(--ads-background-table-head-color);
}

@media (prefers-color-scheme: dark) {
	tbody tr th {
		background-color: var(--ads-background-table-head-color-dark);
	}
}

tbody tr th,
tbody tr th p,
tfoot tr th,
tfoot tr th p {
	color: var(--ads-color);
	font-weight: bold;
}

@media (prefers-color-scheme: dark) {
	tbody tr th,
	tbody tr th p,
	tfoot tr th,
	tfoot tr th p {
		color: var(--ads-color-dark);
	}
}

p.tableblock > code:only-child {
	background-color: var(--ads-background-linenotable-color);
	padding: 0;
}

@media (prefers-color-scheme: dark) {
	p.tableblock > code:only-child {
		background-color: var(--ads-background-linenotable-color-dark);
	}
}

p.tableblock {
	font-size: 1em;
}

ul li ol {
	margin-left: 1.5em;
}

dl dd:last-child,
dl dd:last-child > :last-child {
	margin-bottom: 0;
}

li p,
ul dd,
ol dd,
.olist .olist,
.ulist .ulist,
.ulist .olist,
.olist .ulist {
	margin-bottom: 0.625em;
}

ul.checklist,
ul.none,
ol.none,
ul.no-bullet,
ol.no-bullet,
ol.unnumbered,
ul.unstyled,
ol.unstyled {
	list-style-type: none;
}

ul.no-bullet,
ol.no-bullet,
ol.unnumbered {
	margin-left: 0.625em;
}

ul.unstyled,
ol.unstyled {
	margin-left: 0;
}

li > p:empty:only-child::before {
	content: "";
	display: inline-block;
}

ul.checklist > li > p:first-child {
	margin-left: -1em;
}

ul.checklist > li > p:first-child > .fa-square-o:first-child,
ul.checklist > li > p:first-child > .fa-check-square-o:first-child {
	width: 1.25em;
	font-size: 0.8em;
	position: relative;
	bottom: 0.125em;
}

ul.checklist > li > p:first-child > input[type=checkbox]:first-child {
	font: inherit;
	margin: 0 0.25em 0 0;
	padding: 0;
}

ul.inline {
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	margin: 0 0 0.625em -1.25em;
}

ul.inline > li {
	margin-left: 1.25em;
}

.unstyled dl dt {
	font-weight: 400;
	font-style: normal;
}

ol.arabic {
	list-style-type: decimal;
}

ol.decimal {
	list-style-type: decimal-leading-zero;
}

ol.loweralpha {
	list-style-type: lower-alpha;
}

ol.upperalpha {
	list-style-type: upper-alpha;
}

ol.lowerroman {
	list-style-type: lower-roman;
}

ol.upperroman {
	list-style-type: upper-roman;
}

ol.lowergreek {
	list-style-type: lower-greek;
}

.hdlist > table,
.colist > table {
	border: 0;
	background-color: var(--ads-background-linenotable-color);
}

@media (prefers-color-scheme: dark) {
	.hdlist > table,
	.colist > table {
		background-color: var(--ads-background-linenotable-color-dark);
	}
}

.hdlist > table > tbody > tr,
.colist > table > tbody > tr {
	background-color: var(--ads-background-linenotable-color);
}

@media (prefers-color-scheme: dark) {
	.hdlist > table > tbody > tr,
	.colist > table > tbody > tr {
		background-color: var(--ads-background-linenotable-color-dark);
	}
}

td.hdlist1,
td.hdlist2 {
	vertical-align: top;
	padding: 0 0.625em;
}

td.hdlist1 > p,
td.hdlist2 > p {
	margin-bottom: 0;
}

td.hdlist1 {
	font-weight: bold;
	padding-bottom: 0.25em;
}

td.hdlist2 {
	word-wrap: anywhere;
}

.literalblock + .colist,
.listingblock + .colist {
	margin-top: -0.5em;
}

.colist td:not([class]):first-child {
	padding: 0.4em 0.75em 0;
	line-height: 1;
	vertical-align: top;
}

.colist td:not([class]):first-child img {
	max-width: none;
}

.colist td:not([class]):last-child {
	padding: 0.25em 0;
}

.thumb,
.th {
	line-height: 0;
	display: inline-block;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1px #ddd;
}

.imageblock.left {
	margin: 0.25em 0.625em 0.25em 0;
}

.imageblock.right {
	margin: 0.25em 0 0.25em 0.625em;
}

.imageblock > .title {
	margin-bottom: 0;
}

.imageblock.thumb,
.imageblock.th {
	border-width: 6px;
}

.imageblock.thumb > .title,
.imageblock.th > .title {
	padding: 0 0.125em;
}

.image.left,
.image.right {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	display: inline-block;
	line-height: 0;
}

.image.left {
	margin-right: 0.625em;
}

.image.right {
	margin-left: 0.625em;
}

a.image {
	text-decoration: none;
	display: inline-block;
}

a.image object {
	pointer-events: none;
}

sup.footnote,
sup.footnoteref {
	font-size: 0.875em;
	position: static;
	vertical-align: super;
	margin-left: 0.1em;
}

sup.endnote,
sup.endnoteref {
	/* We want endnotes to appear on the same baseline as the regular text, therefore 
	   we need to undo the styling induced by the sup element.*/
	vertical-align: baseline;
	font-size: 100%;
	top: unset;
}

sup.footnote a,
sup.footnoteref a,
sup.endnote a,
sup.endnoteref a {
	text-decoration: none;
}

sup.footnote a:active,
sup.footnoteref a:active,
sup.endnote a:active,
sup.endnoteref a:active {
	text-decoration: underline;
}

#footnotes,
#endnotes {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	margin-bottom: 0.625em;
}

#footnotes hr,
#endnotes hr {
	width: 20%;
	min-width: 6.25em;
	margin: -0.25em 0 0.75em;
	border-width: 1px 0 0;
}

#footnotes .footnote,
#endnotes .endnote {
	padding: 0 0.375em 0 0.225em;
	line-height: 1.3334;
	font-size: 0.875em;
	margin-left: 1.2em;
	margin-bottom: 0.2em;
}

#footnotes .footnote,
#endnotes .endnote {
	 margin-left: 0em;
}

#footnotes .footnote a:first-of-type,
#endnotes .endnote a:first-of-type {
	font-weight: bold;
	text-decoration: none;
}

#footnotes .footnote:last-of-type,
#endnotes .endnote:last-of-type {
	margin-bottom: 0;
}

#content #footnotes,
#content #endnotes {
	margin-top: -0.625em;
	margin-bottom: 0;
	padding: 0.75em 0;
}

div.page-break {
	display: none;
}

div.unbreakable {
	page-break-inside: avoid;
}

.big {
	font-size: larger;
}

.small {
	font-size: smaller;
}

.underline {
	text-decoration: underline;
}

.overline {
	text-decoration: overline;
}

.line-through {
	text-decoration: line-through;
}

/*******************************************************************
 Standard color usage: the classes are each for light and dark mode.
********************************************************************/
.aqua {
	color: var(--ads-aqua-color);
}

@media (prefers-color-scheme: dark) {
	.aqua {
		color: var(--ads-aqua-color-dark);
	}
}

.aqua-background {
	background-color: var(--ads-aqua-background-color);
}

@media (prefers-color-scheme: dark) {
	.aqua-background {
		background-color: var(--ads-aqua-background-color-dark);
	}
}

.black {
	color: var(--ads-black-color);
}

@media (prefers-color-scheme: dark) {
	.black {
		color: var(--ads-black-color-dark);
	}
}

.black-background {
	background-color: var(--ads-black-background-color);
}

@media (prefers-color-scheme: dark) {
	.black-background { 
		background-color: var(--ads-black-background-color-dark);
	}
}

.blue {
	color: var(--ads-blue-color);
}

@media (prefers-color-scheme: dark) {
	.blue {
		color: var(--ads-blue-color-dark);
	}
}

.blue-background {
	background-color: var(--ads-blue-background-color);
}

@media (prefers-color-scheme: dark) {
	.blue-background { 
		background-color: var(--ads-blue-background-color-dark);
	}
}

.fuchsia {
	color: var(--ads-fuchsia-color);
}

@media (prefers-color-scheme: dark) {
	.fuchsia {
		color: var(--ads-fuchsia-color-dark);
	}
}

.fuchsia-background {
	background-color: var(--ads-fuchsia-background-color);
}

@media (prefers-color-scheme: dark) {
	.fuchsia-background { 
		background-color: var(--ads-fuchsia-background-color-dark);
	}
}

.gray {
	color: var(--ads-gray-color);
}

@media (prefers-color-scheme: dark) {
	.gray {
		color: var(--ads-gray-color-dark);
	}
}

.gray-background {
	background-color: var(--ads-gray-background-color);
}

@media (prefers-color-scheme: dark) {
	.gray-background { 
		background-color: var(--ads-gray-background-color-dark);
	}
}

.green {
	color: var(--ads-green-color);
}

@media (prefers-color-scheme: dark) {
	.green {
		color: var(--ads-green-color-dark);
	}
}

.green-background {
	background-color: var(--ads-green-background-color);
}

@media (prefers-color-scheme: dark) {
	.green-background { 
		background-color: var(--ads-green-background-color-dark);
	}
}

.lime {
	color: var(--ads-lime-color);
}

@media (prefers-color-scheme: dark) {
	.lime {
		color: var(--ads-lime-color-dark);
	}
}

.lime-background {
	background-color: var(--ads-lime-background-color);
}

@media (prefers-color-scheme: dark) {
	.lime-background { 
		background-color: var(--ads-lime-background-color-dark);
	}
}

.maroon {
	color: var(--ads-maroon-color);
}

@media (prefers-color-scheme: dark) {
	.maroon {
		color: var(--ads-maroon-color-dark);
	}
}

.maroon-background {
	background-color: var(--ads-maroon-background-color);
}

@media (prefers-color-scheme: dark) {
	.maroon-background { 
		background-color: var(--ads-maroon-background-color-dark);
	}
}

.navy {
	color: var(--ads-navy-color);
}

@media (prefers-color-scheme: dark) {
	.navy {
		color: var(--ads-navy-color-dark);
	}
}

.navy-background {
	background-color: var(--ads-navy-background-color);
}

@media (prefers-color-scheme: dark) {
	.navy-background { 
		background-color: var(--ads-navy-background-color-dark);
	}
}

.olive {
	color: var(--ads-olive-color);
}

@media (prefers-color-scheme: dark) {
	.olive {
		color: var(--ads-olive-color-dark);
	}
}

.olive-background {
	background-color: var(--ads-olive-background-color);
}

@media (prefers-color-scheme: dark) {
	.olive-background { 
		background-color: var(--ads-olive-background-color-dark);
	}
}

.orange {
	color: var(--ads-orange-color);
}

@media (prefers-color-scheme: dark) {
	.orange {
		color: var(--ads-orange-color-dark);
	}
}

.orange-background {
	background-color: var(--ads-orange-background-color);
}

@media (prefers-color-scheme: dark) {
	.orange-background { 
		background-color: var(--ads-orange-background-color-dark);
	}
}

.purple {
	color: var(--ads-purple-color);
}

@media (prefers-color-scheme: dark) {
	.purple {
		color: var(--ads-purple-color-dark);
	}
}

.purple-background {
	background-color: var(--ads-purple-background-color);
}

@media (prefers-color-scheme: dark) {
	.purple-background { 
		background-color: var(--ads-purple-background-color-dark);
	}
}

.red {
	color: var(--ads-red-color);
}

@media (prefers-color-scheme: dark) {
	.red {
		color: var(--ads-red-color-dark);
	}
}

.red-background {
	background-color: var(--ads-red-background-color);
}

@media (prefers-color-scheme: dark) {
	.red-background { 
		background-color: var(--ads-red-background-color-dark);
	}
}

.silver {
	color: var(--ads-silver-color);
}

@media (prefers-color-scheme: dark) {
	.silver {
		color: var(--ads-silver-color-dark);
	}
}

.silver-background {
	background-color: var(--ads-silver-background-color);
}

@media (prefers-color-scheme: dark) {
	.silver-background { 
		background-color: var(--ads-silver-background-color-dark);
	}
}

.teal {
	color: var(--ads-teal-color);
}

@media (prefers-color-scheme: dark) {
	.teal {
		color: var(--ads-teal-color-dark);
	}
}

.teal-background {
	background-color: var(--ads-teal-background-color);
}

@media (prefers-color-scheme: dark) {
	.teal-background { 
		background-color: var(--ads-teal-background-color-dark);
	}
}

.white {
	color: var(--ads-white-color);
}

@media (prefers-color-scheme: dark) {
	.white {
		color: var(--ads-white-color-dark);
	}
}

.white-background {
	background-color: var(--ads-white-background-color);
}

@media (prefers-color-scheme: dark) {
	.white-background { 
		background-color: var(--ads-white-background-color-dark);
	}
}

.yellow {
	color: var(--ads-yellow-color);
}

@media (prefers-color-scheme: dark) {
	.yellow {
		color: var(--ads-yellow-color-dark);	
	}
}

.yellow-background {
	background-color: var(--ads-yellow-background-color);
}

@media (prefers-color-scheme: dark) {
	.yellow-background { 
		background-color: var(--ads-yellow-background-color-dark);
	}
}

span.icon > .fa {
	cursor: default;
}

a span.icon > .fa {
	cursor: inherit;
}

/*******************************************************************
 The Admonitions as Standard Text or only Icons
********************************************************************/

.admonitionblock td.icon [class^="fa icon-"] {
	font-size: 2.5em;			/* The size of the icon if displayed */
	cursor: default;
}

.admonitionblock td.icon .icon-note::before {
	content: "\f05a";			/* The font icon for NOTE */
	color: var(--ads-note-color); 	
}

.admonitionblock td.icon .icon-tip::before {
	content: "\f0eb";			/* The font icon for TIP */
	color: var(--ads-tip-color);
}

.admonitionblock td.icon .icon-warning::before {
	content: "\f071";			/* The font icon for WARNING */
	color: var(--ads-warning-color);
}

.admonitionblock td.icon .icon-caution::before {
	content: "\f06d";			/* The font icon for CAUTION */
	color: var(--ads-caution-color);
}

.admonitionblock td.icon .icon-important::before {
	content: "\f06a";			/* The font icon for IMPRTDANT */
	color: var(--ads-important-color);
}

/***********************************************************************************
To control the style of callout numbers inside verbatim blocks and in callout lists.
************************************************************************************/

.conum[data-value] {
	display: inline-block;
	color: #fff !important;
	background-color: var(--ads-footer-background-color);
	border-radius: 50%;
	text-align: center;
	font-size: 0.85em;
	width: 1.67em;
	height: 1.67em;
	line-height: 1.8;
	font-family: var(--ads-body-font);
	font-style: normal;
	font-weight: bold;
}

@media (prefers-color-scheme: dark) {
	.conum[data-value] {
		background-color: var(--ads-footer-background-color-dark);
	}
}

.conum[data-value] * {
	color: #fff !important;
}

.conum[data-value] + b {
	display: none;
}

.conum[data-value]::after {
	content: attr(data-value);
}

pre .conum[data-value] {
	position: relative;
	top: -0.125em;
}

b.conum * {
	color: inherit !important;
}

.conum:not([data-value]):empty {
	display: none;
}

dt,
th.tableblock,
td.content,
div.footnote,
div.endnote {
	text-rendering: optimizeLegibility;
}

h1,
h2,
p,
td.content,
span.alt,
summary {
	letter-spacing: -0.01em;
}

p strong,
td.content strong,
div.footnote strong,
div.endnote strong {
	letter-spacing: -0.005em;
}

/*  I have no clue why Dan resized this!
	This causes that every first paragraph in DL is bigger than the following.
	Switched of by FB on 2025-01-09
	
p,
blockquote,
dt,
td.content,
span.alt,
summary {
	font-size: 1.0625rem;
} */

.sidebarblock p,
.sidebarblock dt,
.sidebarblock td.content,
p.tableblock {
	font-size: 1em;
}

.hyphens-none {
	hyphens: none;
	-webkit-hyphens: none;
}

.hyphens-auto {
	hyphens: auto;
	-webkit-hyphens: auto;
}

.hyphens-manual {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* SF Symbols */

.sf-1x {
  font-size: 1em; }

.sf-2x {
  font-size: 2em; }

.sf-3x {
  font-size: 3em; }

.sf-4x {
  font-size: 4em; }

.sf-5x {
  font-size: 5em; }

.sf-6x {
  font-size: 6em; }

.sf-7x {
  font-size: 7em; }

.sf-8x {
  font-size: 8em; }

.sf-9x {
  font-size: 9em; }

.sf-10x {
  font-size: 10em; }

.sf-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }

.sf-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }

.sf-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.sf-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }

.sf-fw {
  text-align: center;
  width: 1.25em; }

.sf-rotate-90 {
  transform: rotate(90deg); }

.sf-rotate-180 {
  transform: rotate(180deg); }

.sf-rotate-270 {
  transform: rotate(270deg); }

.sf-flip-horizontal {
  transform: scale(-1, 1); }

.sf-flip-vertical {
  transform: scale(1, -1); }

.sf-flip-both,
.sf-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1); }

/***********************************************************************************
Printing 
************************************************************************************/

/*** These rules apply for printing HTML AND PDF pagination inside adoc Studio ***/
@media print {
	html {
		font-size: 80%;
	}

	abbr[title] {
		border-bottom: 1px dotted;
	}

	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	pre,
	blockquote,
	tr,
	img,
	object,
	svg {
		page-break-inside: avoid;
	}

	p,
	blockquote,
	dt,
	td.content {
		font-size: 1em;		/* Resets the whole text to default based on their parents */
		orphans: 3;
		widows: 3;
	}

	h2,
	h3,
	#toctitle,
	.sidebarblock > .content > .title {
		page-break-after: avoid;
	}

	body > div[id] {
		max-width: none;
	}
	
	.bottom-right {
		background: none !important;
	}

}

/*** These rules only apply for paginating PDFs inside adoc Studio ***/
@media vivliostyle {
	
	body {
		/* For PDF exports we don't apply the configured background color to the
		   body but to the whole page background. Therefore we need to reset the body
		   background-color back to transparent */
		background-color: transparent;
	}
	
	@page {
    	size: var(--ads-page-size, A4 portrait);	/* --ads-page-size transfers the set dimensions */
   	 	margin: var(--ads-page-margin, 2.5cm);		/* to the print dialog of adoc Studio.*/
   	 	/* See comment for body background-color above */
   	 	background-color: var(--ads-background-color) !important;
	}
	
	@media (prefers-color-scheme: dark) {
		@page {
   	 		/* See comment for body background-color above */
			background-color: var(--ads-background-color-dark) !important;
		}
	}

	/*
    Named page types:
	
	front-cover			Appears at the beginning of the document, if activated by the 
						:front-cover-image: attribute. Is not included in the page count.
	                      
	front-cover-counted	Appears at the beginning of the document if activated by the 
	                    :front-cover-image: attribute AND :pagenums: attribute is set
	                    to "cover". It is included in the page count.
	
	title				Appears at the beginning of the document after the optional front
					    cover page, but only if :title-page: attribute is set and
	                    :pagenums: is NOT set to "cover" or "title". It is not included in 
	                    the page count.
	                      
	title-counted		Appears at the beginning of the document after the optional front
	                    cover page, but only if :title-page: attribute is set and
	                    :pagnums: is set to "cover" or "title". It is included in the
	                    page count.
	
	toc 			    If :title-page: attribute is set and :toc: is active but not set
	                    to :preamble:, the toc will appear on its own pages of this type
	                    after the title page. They are not included in the page count.
	
	toc-counted 		If :title-page: attribute is set and :toc: is active but not set
	                    to :preamble:, the toc will appear on its own pages of this type.
	                    after the title page. They are included in the page count.
	                    
    preamble			If :title-page: attribute is set and :toc: is set to "preamble",
                        the toc is put together with the preamble and behind it on its own 
                        pages of this type after the title page. They are not included in 
                        the page count. 

    preamble-counted    If :title-page: attribute is set and :toc: is set to "preamble",
                        the toc is put together with the preamble and behind it on its own 
                        pages of this type after the title page. They are included in 
                        the page count. 
	
	body 				The regular document content is paginated on pages of this type if
	                    :pagenums: is not set.
	                      
	body-counted 		The regular document content is paginated on pages of this type if
	                    :pagenums: is set to any value.

	back-cover 		    Appears at the end of the document, if activated by the 
	                    :back-cover-image: attribute. 
	*/
	
	/* Store the text content of the document title element in the CSS content variable
	   "doctitle" so that it can be picked up in the @page rules below. */
	h1 { string-set: doctitle content(text); }
	
	/* Store the text content of the titles of level-1-sections in the CSS content variable
	   "section1-title" so that it can be picked up in the @page rules below. */
	h2 { string-set: section1-title content(text); }
	
	/* Put the doctitle on the top and the current first level section title on the
	   bottom of all left non-title and non-cover pages. */
	@page toc:left, 
	      toc-counted:left,
	      preamble:left,
	      preamble-counted:left,
	      body:left, 
	      body-counted:left {
		@top-right {
			content: string(doctitle);
		}
		@bottom-right {
			content: string(section1-title, first);
		}
	}

	/* Put the doctitle on the top and the current first level section title on the
	   bottom of all right non-title and non-cover pages. */
    @page toc:right,
          toc-counted:right,
	      preamble:right,
	      preamble-counted:right,
          body:right, 
          body-counted:right {
		@top-right {
			content: string(doctitle);
		}
		@bottom-left {
			content: string(section1-title, first);
		}
	}

	/* Define a shared counter for all page types which should take part in page numbering.
	   Note: The regular body pages also increment the counter even if they don't show it.
	   This is the default behaviour for having a toc with unset :pagenums: attribute.
	   (Which however does not make much sense in practice.) */
	@page front-cover-counted,
	      title-counted, 
	      toc-counted,
	      preamble-counted,
	      body-counted, body {
		counter-increment: counted-page;
	}

	/* Put the counter on the bottom all left pages which should take part in page numbering */
	@page title-counted:left, 
	      toc-counted:left, 
	      preamble-counted:left, 
	      body-counted:left {
		@bottom-left {
			content: counter(counted-page);
		}
	}

	/* Put the counter on the bottom all right pages that should take part in page numbering */
	@page title-counted:right, 
	      toc-counted:right, 
	      preamble-counted:right, 
	      body-counted:right {
		@bottom-right {
			content: counter(counted-page);
		}
	}
	
	/* If a special page background is provided for all recto pages, use it, otherwise
       fall back to the general page background. */
	@page :recto {
		background: var(--ads-page-background-recto, var(--ads-page-background));
	}

	/* If a special page background is provided for all verso pages, use it, otherwise
       fall back to the general page background. */
	@page :verso {
		background: var(--ads-page-background-verso, var(--ads-page-background));
	}	
	
	/* If a special page background is provided for the title page, use it, otherwise
       fall back to the recto or general page background */
	@page title, title-counted {
		background: var(--ads-title-page-background, var(--ads-page-background-recto, var(--ads-page-background))); 
	}

	/* The only purpose of front cover pages is to show a background image. */
	@page front-cover, front-cover-counted {
		background: var(--ads-front-cover);
	}
	
	/* The only purpose of back cover pages is to show a background image. */
	@page back-cover {
		background: var(--ads-back-cover);
	}

	body {
	    /* By default, all pages are assigned to the uncounted body content page type. 
	      The rules below override this to assign special content to different page types. */
		page: body;
		
		/* To be able to use position:absolute to position the title-image logo relatively
		   to the body start, we need to switch the body position back to "static"", back 
		   from "relative" which is the standard. Otherwise, the body can collapse on
		   the title page which messes with the positioning. */
		position: static;
	}
	
	/* If any page numbering style is active, we overrule the rule above to put all 
	   content on a counted page type. Rules below override this further to assign special 
	   content to different page types. */
	body[data-pagenums="cover"],
	body[data-pagenums="title"],
	body[data-pagenums="toc"],
	body[data-pagenums="body"] {
		page: body-counted;
	} 
	
	/* When the :front-cover-image: attribute is set, an empty div with id #front-cover
	   is added as the first child of the body element. This rule makes sure it gets
	   assigned to its own page type which then shows the image as its background.
	*/
	#front-cover {
		page: front-cover;
	}
	
	/* If the page numbering is set to include cover pages, the rule above is overruled
	   to assign the #front-cover div to a counted page type. */
	body[data-pagenums="cover"] #front-cover {
		page: front-cover-counted;
	}

	/* When the :back-cover-image: attribute is set, an empty div with id #back-cover
	   is added as the last child of the body element. This rule makes sure it gets
	   assigned to its own page type which then shows the image as its background */
	#back-cover {
		page: back-cover;
	}

	/* If the :title-page: attribute is set, all header content and the optional title 
       page logo are put onto its own page. */
	body.title-page #header,
	body.title-page .logo {
		page: title;
	}

	/* If the page numbering is set to include cover or title pages, the rule above is 
	   overruled to assign all header content to the counted title page type instead. */
	body[data-pagenums="cover"].title-page #header,
	body[data-pagenums="title"].title-page #header {
		page: title-counted;
	}
	
	/* If the :title-page: attribute is set and :toc: is NOT set to "preamble" or "macro", 
	   the toc is contained in the #header element and we assign it to its own page. */
	body.title-page #header .toc {
		page: toc;
	}
	
	/* If the page numbering is set to include cover, title or toc pages, the rule above is 
	   overruled to assign the toc to the counted toc page type instead. */
	body[data-pagenums="cover"].title-page #header .toc,
	body[data-pagenums="title"].title-page #header .toc,
	body[data-pagenums="toc"].title-page #header .toc {
		page: toc-counted;
	}
	
	/* If the :title-page: attribute is set and :toc: is set to "preamble", the toc 
	   is contained in the #preamble element. In this case the whole preamble is 
	   assigned to its own page type together with the contained toc. */
	body.title-page #preamble:has(.toc) {
		page: preamble;
	}
	
	/* If the page numbering is set to include cover, title or toc pages, the rule above is 
	   overruled to assign the preamble to the counted preamble page type instead. */
	body[data-pagenums="cover"].title-page #preamble:has(.toc),
	body[data-pagenums="title"].title-page #preamble:has(.toc),
	body[data-pagenums="toc"].title-page #preamble:has(.toc) {
		page: preamble-counted;
	}
	
	/* Show target page numbers for links in the toc and fill the gap between the link
	   text and the page number with dots. */
	.tocbase a::after {
  		content: leader('.') target-counter(attr(href), counted-page);
	}
	
	#header {
		font-size: 1.4em;
		left: -0.5em;
		padding-bottom: 1.2em;
	}
	
	/* Prevent an empty header from opening new pages */
	#header:empty { display: none; }				   
	
	body.title-page #header {
		margin-top: 15pvh;
	}

	#header > h1:first-child {
		font-size: 1.4em;
		margin-bottom: 0.6em;
	}
	
	#header .details {
		color: var(--ads-color);
		display: inline;
	}

	#header #revnumber::before {
		content: " – ";
	}

	/* Special formatting for book type PDFs to set a page break before a new part */
	h1.sect0 {
		break-before: page;
	}

	.partintro {
		break-after: page;
	}
	
	/* defining special parts */ 
	body[data-media="print"] .tocbase,
	body[data-media="print"] .sidebarblock,
	body[data-media="print"] .exampleblock > .content, 
	body[data-media="prepress"] .tocbase,
	body[data-media="prepress"] .sidebarblock,
	body[data-media="prepress"] .exampleblock > .content {
		background: none !important;
	}
	
	body[data-media="print"] a[href^="http:"]:not(.bare)::after,
	body[data-media="print"] a[href^="https:"]:not(.bare)::after,
	body[data-media="prepress"] a[href^="http:"]:not(.bare)::after,
	body[data-media="prepress"] a[href^="https:"]:not(.bare)::after  {
		content: "\00a0(" attr(href) ")";
		display: inline-block;
		font-size: 0.8em;
		color: var(--ads-color);
	}

	.tocbase {
		font-size: 85%;
		margin-top: 3pvh;
	}

	/* Style the look of the separator between the page and the footnotes area */
	@-adapt-footnote-area ::before {
		border-block-start-width: 1px;
		border-block-start-style: solid;
		border-block-start-color: var(--ads-single-border-color);
  		width: 20%;
  		min-width: 6.25em;
  		margin: -0.25em 0 0.75em;
	}

	html {
	    counter-reset: footnote;
	}

	/* Put paginated footnotes into the footnote region of the page and increment the counter. */ 
	span.footnote { 
		float: footnote; 
    	counter-increment: footnote;
    	font-size: 0.875rem;
    	font-weight: normal;
	}

	/* For explicit paginated footnotes, use the footnote counter as the call (inline in text)
	   and marker (in the page footnotes area)*/
	span.footnote::footnote-call {
	    content: counter(footnote);
	}

	span.footnote::footnote-marker {
	    content: counter(footnote) ".";
	}

    /* For footnotes which don't carry own text but reference other footnotes via an id,
     use the counter of the target element pointed to in the data-target attribute */
	span.footnoteref::before {
    	content: target-counter(attr(data-target), footnote);
	}
	
	/* Define the look of the inline call part of explicit and referencing footnotes */
	span.footnote::footnote-call, span.footnoteref::before {
    	font-size: 0.875em;
    	vertical-align: super;
    	display: inline;
   	    line-height: 1;
        text-indent: 0;
	}
	
	/* Define the look of the footnote marker before the footnote text in the footnote
	   region of the page. */
	span.footnote::footnote-marker {
    	margin-right: 0.5em;
	}
	    	
	/* Here a few examples */
	
	table thead,
	table tfoot {
		background-color: var(--ads-table-head-background-color);
	}

	table.stripes-all > * > tr,
	table.stripes-odd > * > tr:nth-of-type(odd),
	table.stripes-even > * > tr:nth-of-type(even),
	table.stripes-hover > * > tr:hover {
		background-color: var(--ads-table-stripes-background-color);
	}

	:not(pre):not([class^=L]) > code {
		background-color: var(--ads-pre-background-color);
	}

	/* No orphan headline on one page and the definition on the other page */
	dt {
		break-after: avoid;
	}

	/* Overwrite the default settings 2+2 */
	p {		
		orphans: 3;
		widows: 2;
	}

	/* Moved from Manual style to support this in all styles */
	.bottom-left {
		break-before: page;
		float: bottom;
		float-reference: page;
		text-align: left;
	}

	.bottom-right {
		break-before: page;
		float: bottom;
		float-reference: page;
		text-align: right;
	}

	.middle-center {
		min-height: 100vh;
		display: flex;
		align-items: center; 
		justify-content: center;
	}
}

/*** These rules are only for printing HTML documents and are NOT applied for PDF pagination ***/
@media print {
	@media not vivliostyle {
	
		* {
			box-shadow: none !important;
			text-shadow: none !important;
		}
	
		a {
			color: inherit !important;
			text-decoration: underline !important;
		}

		a.bare,
		a[href^="#"],
		a[href^="mailto:"] {
			text-decoration: none !important;
		}

		a[href^="http:"]:not(.bare)::after,
		a[href^="https:"]:not(.bare)::after {
			content: "\00a0(" attr(href) ")";	/* Add a space between Text and Link */
			display: inline-block;
			font-size: 0.875em;
			padding-left: 0.25em;
			color: var(--ads-color);
		}

		thead {
			display: table-header-group;
		}

		.tocbase {
			border-bottom: 0 !important; /* removed: 1px solid var(--ads-single-border-color) */
			padding-bottom: 0 !important;
		}
		
		.tocbase,
		.sidebarblock,
		.exampleblock > .content {
			background: none !important;
		}

		body.book #header > h1:first-child {
			border: 0 !important;
			margin: 2.5em 0 1em;
		}

		body.book #header .details {
			border: 0 !important;
			display: block;
			padding: 0 !important;
		}

		body.book #header .details span:first-child {
			margin-left: 0 !important;
		}

		body.book #header .details br {
			display: block;
		}

		body.book #header .details br + span::before {
			content: none !important;
		}

		body.book .tocbase {
			border: 0 !important;
			text-align: left !important;
			padding: 0 !important;
			margin: 0 !important;
		}

		.listingblock code[data-lang]::before {
			display: block;
		}

		div.page-break {
			display: block;
			page-break-after: always;
		}

		#footer {
			padding: 0 0.9375em;
		}

		.hide-on-print {
			display: none !important;
		}

		.print-only {
			display: block !important;
		}

		.hide-for-print {
			display: none !important;
		}

		.show-for-print {
			display: inherit !important;
		}
		
		#header > h1:first-child {
			margin-top: 1.25rem;
		}

		.sect1 {
			padding: 0 !important;
		}

		.sect1 + .sect1 {
			border: 0;
		}

		#footer {
			background: none;
		}

		#footer-text {
			color: var(--ads-color-dark);
			font-size: 0.9em;
		}
	}
}

/*** Special Styles for Amazon Devices ***/
@media amzn-kf8 {
	#header > h1:first-child {
		margin-top: 1.25rem;
	}

	.sect1 {
		padding: 0 !important;
	}

	.sect1 + .sect1 {
		border: 0;
	}

	#footer {
		background: none;
	}

	#footer-text {
		color: var(--ads-color-dark);
		font-size: 0.9em;
	}
	
	body > div[id] {
		padding: 0;
	}
}

/* 
	This is the CLASSIC css stylesheet for adoc Studio.
	It is based on the Base.css (see info.json) and in some cases
	it is also used as the basis for other factory stylesheets in adoc Studio.

	This css file works as a supplement to the base styles.

	It contains several changes to the base style:

	- it resets all fonts and colors
	- it adds new icons for the notes
	- other minor changes (see the comments)
	
	Author: Frank Blome for ProjectWizards GmbH
	Version: 1.0 from April 17, 2024
	License: Distributed under the permissive MIT license
*/


:root {
	--ads-headline-font: -apple-system, "SF Pro", sans-serif;
	--ads-body-font: "STIX Two Text", "Times New Roman", ui-serif, serif;
	--ads-quote-font: "STIX Two Text", "Times New Roman", ui-serif, serif;
	--ads-monospaced-font: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
	--ads-toc-font: var(--ads-body-font);
	
	/* Set the icon weight for the admonitions: 
		400 -> outlined 
		900 -> Filled
	*/
	--ads-icon-font-weight: 400;			

	--ads-color: black;									/* base color for all text */
	--ads-color-dark: whitesmoke;						/* dark variant of the base color */
	--ads-background-color: white;						/* base color for the background */
	--ads-background-color-dark: #1e1e1e;				/* dark variant of the background color */

	--ads-headline-color: #1f4068;						/* base color for all headline */
	--ads-headline-color-dark: #54B0F2;					/* dark variant for the headlines */
	--ads-headline-block-color: #54B0F2;				/* headline color for any blocks */
	--ads-headline-block-color-dark: #54B0F2;			/* dark variant for the block headlines */
	--ads-headline-small-color: #3f658e;				/* color for small headlines */
	--ads-headline-small-color-dark: #c1e1f5;			/* dark variant for the small headlines */

	--ads-mark-background-color: #ffff00;				/* Text marker with the same in dark mode */

	--ads-a-color: #2c72db;								/* all kind of links */
	--ads-a-color-dark: #c1e1f5;						/* dark variant of the links */
	--ads-a-hover-color: #1d4b8f;						/* hover variant of the links */
	--ads-a-hover-color-dark: #c1e1f5;					/* dark variant of links hover */
		
	--ads-single-border-color: #dddddf;					/* Mainly for single lines */
	--ads-border-color: rgb(0 0 0 / 0.6);				/* Light variant for some transparent borders */
	--ads-border-color-dark: rgb(255 255 255 / 0.1);	/* Dark variant for all borders */
	--ads-details-color: rgb(0 0 0 / 0.85);				/* Some borders needs to be less transparent */ 
	--ads-details-color-dark: rgb(255 255 255 / 0.85);	/* dark variant of these borders */
	
	/* Colors for syntax highlighting */	

	--ads-code-color: dimgray;							/* For standard code and non highlighting syntax */
	--ads-code-color-dark: whitesmoke;
	--ads-attribute-color: blue;						/* For all attributed stings */
	--ads-attribute-color-dark: #54B0F2;
	--ads-code-buildin-color: purple;
	--ads-code-buildin-color-dark: orchid;
	--ads-comment-color: green;							/* For secondary text & comments */
	--ads-comment-color-dark: green;
	--ads-markup-color: navy; 							/* For all kind of markup text */
	--ads-markup-color-dark: #54B0F2; 
	--ads-literal-color: blue;							/* For Keywords  */
	--ads-literal-color-dark: #54B0F2;
	--ads-tag-color: darkslateblue;						/* For Tags & Keywords */
	--ads-tag-color-dark: powderblue;
	--ads-verbatim-color: dimgray; 						/* For Verbatim & other text */
	--ads-verbatim-color-dark: gray;
	
	/* Colors for tables */
	
	--ads-table-background-color: white;					
	--ads-table-background-color-dark: #212121;			
	--ads-table-head-background-color: #f7f8f7;
	--ads-table-head-background-color-dark: #323232;
	--ads-table-alternate-background-color: #f8f8f7;
	--ads-table-alternate-background-color-dark: #f8f8f7;
	--ads-table-stripes-background-color: #f7f8f7;
	--ads-table-stripes-background-color-dark: #323232;
	--ads-linenotable-background-color: none;
	--ads-linenotable-background-color-dark: none;

	/* Colors for various kinds of blocks */
	
	--ads-quote-color: rgb(0 0 0 / 0.85);
	--ads-quote-color-dark: rgb(255 255 255 / 0.85);
	--ads-pre-color: dimgray;
	--ads-pre-color-dark: #eee;
	--ads-pre-background-color: #f7f7f8;
	--ads-pre-background-color-dark: #7f7f7f;
	--ads-exampleblock-background-color: white;
	--ads-exampleblock-background-color-dark: #121212;
	--ads-sidebar-background-color: #f3f3f2;
	--ads-sidebar-background-color-dark: #3f3f3f;
	--ads-listingblock-background-color: #f7f7f8;
	--ads-listingblock-background-color-dark: #7f7f7f;
	--ads-listingblock-output-background-color: rgb(0 0 0 / 0.9);
	--ads-listingblock-output-background-color-dark: #7f7f7f;

	/* Colors for the UI elements */
	
	--ads-kbd-background-color: #f7f7f7;
	--ads-kbd-background-color-dark: #bababa;
	--ads-kbd-color: rgb(0 0 0 / 0.8);
	--ads-kbd-color-dark: rgb(0 0 0 / 0.8);
	--ads-keyseq-color: black;
	--ads-keyseq-color-dark: whitesmoke;
	--ads-menu-color: #000;
	--ads-menu-color-dark: #eee;

	/* Colors for the Table of contents */
	
	--ads-toc-background-color: #f8f8f7;
	--ads-toc-background-color-dark: #323232;	
	--ads-toc2-background-color: #f8f8f7;
	--ads-toc2-background-color-dark: #323232;	

	/* Colors for Pretty Print */
	
	--ads-prettyprint-background-color: #f7f7f8;
	--ads-prettyprint-background-color-dark: #7f7f7f;
	--ads-prettyprint-list-background-color: none;
	--ads-prettyprint-list-background-color-dark: none;

	/*  Admonitions: The background color is unused in the base style.
		It is prepared for a style similar to Apple Calendar with dark/light colors */
		
	--ads-admonitionblock-background-color: none;
	--ads-admonitionblock-background-color-dark: none;
	--ads-note-color: #1962d1;
	--ads-note-border-color: #1962d1;
	--ads-note-background-color: #b8d4ff;
	--ads-tip-color: #ebd005;
	--ads-tip-border-color: #ebd005;
	--ads-tip-background-color: #fcf3ae;
	--ads-warning-color: #fc9803;
	--ads-warning-border-color: #fc9803;
	--ads-warning-background-color: #fae1bb;
	--ads-caution-color: #cf2604;
	--ads-caution-border-color: #cf2604;
	--ads-caution-background-color: #fadbd4;
	--ads-important-color: #800101;
	--ads-important-border-color: #800101;
	--ads-important-background-color: #fbd0d0;

}

html {
	/* Use the most common ligatures from the body font */
	font-variant-ligatures: common-ligatures;
	-moz-font-feature-settings: "liga", "clig";
	-webkit-font-feature-settings: "liga", "clig";
	font-feature-settings: "liga", "clig";
}

/* Unify the weight for headlines */
h1,
h2 {
	font-weight: 700;
}

h3,
h4 {
	font-weight: 600;
}

h5,
h6, 
#toctitle,
.sidebarblock > .content > .title {
	font-weight: 500;
}

.sidebarblock {
	line-height: 1.25;
}


/* reduce the space between list items */ 
li p {
	margin-bottom: 0em;
}

/* Keyboard Shortcuts a bit larger and in semi bold */
kbd {
	font-size: 0.75em;
	font-weight: 600;
}

/* The .lead text AKA Preamble AKA abstract in medium bold and a bit larger */

.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
	font-size: 1.2em;	/* .lead should be ~15% bigger than the normal font */
	font-weight: 500;
}


/*** A new style for quotes ***/

.quoteblock {
	margin: 0 1em 1.25em 0em;
	border-left: 0.5em solid var(--ads-headline-block-color);
	display: table;
}

@media (prefers-color-scheme: dark) {
	.quoteblock {
		border-left: 0.5em solid var(--ads-headline-block-color-dark);
	}
}

.quoteblock:not(.excerpt) > .title {
	margin-left: 0.7em;
}

.quoteblock blockquote,
.quoteblock p {
	font-family: var(--ads-quote-font);
	font-style: italic;
	word-spacing: -0.025em;
	margin-left: 0.5em;
}

.quoteblock blockquote::before {
	display:none;
}

/*** New Icons for the Admonitions ***/

.admonitionblock td.icon [class^="fa icon-"] {
	font-size: 2.5em;			/* The icon size, if displayed */
	cursor: default;
}

.admonitionblock td.icon .icon-note::before {
	content: "\f075";			/* The font icon for NOTE */
	color: var(--ads-note-color); 	
}

.admonitionblock td.icon .icon-tip::before {
	content: "\f0eb";			/* The font icon for TIP */
	color: var(--ads-tip-color);
}

.admonitionblock td.icon .icon-warning::before {
	content: "\f0f3";			/* The font icon for WARNING */
	color: var(--ads-warning-color);
}

.admonitionblock td.icon .icon-caution::before {
	content: "\f25a";			/* The font icon for CAUTION */
	color: var(--ads-caution-color);
}

.admonitionblock td.icon .icon-important::before {
	content: "\f256";			/* The font icon for IMPORTANT */
	color: var(--ads-important-color);
}


/* Helper Classes for bordering in tweo sizes and colors */
.thin-border {
	border: thin solid silver;
}

.thick-border {
	border: thick solid silver;
}

.thin-border-red {
	border: thin solid red;
}

.thick-border-red {
	border: thick solid red;
}



/*** The @media vivliostyle is used for the PDF View in adoc Studio ***/

@media vivliostyle {

	p {
		font-size: 100%;
	}
	
	/* Color fix for the left border of a quoteblock */		
	.quoteblock {
		border-left: 0.5em solid var(--ads-headline-block-color) !important;
	}
}

/* 
	This is the WHITEPAPER css stylesheet for adoc Studio.
	It is based on the Base.css (see info.json) and it may can be also used 
	as the basis for other factory stylesheets in adoc Studio.

	This css file works as a supplement to the base styles.

	It contains several changes to the base style:

	- it redefines all fonts and colors
	- it adds new icons for the notes
	- other minor changes (see the comments)
	
	Author: Frank Blome for ProjectWizards GmbH
	Version: 1.0 from April 17, 2024
	License: Distributed under the permissive MIT license
*/


/* define all contained fonts */
@font-face {
  font-family: "Roboto Slab";
  src: url("RobotoSlab-VariableFont_wght.ttf");
}

@font-face {
  font-family: "PT Sans";
  src: url("PTSans.ttc");
}

@font-face {
  font-family: "PT Mono";
  src: url("PTMono.ttc");
}


:root {
	--ads-headline-font: "Roboto Slab", serif;
	--ads-body-font: "PT Sans", sans-serif;
	--ads-quote-font: serif;
	--ads-admonitions-font: var(--ads-body-font);
	--ads-toc-font: var(--ads-body-font);
	--ads-monospaced-font: "PT Mono", monospace;
	--ads-system-font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--ads-template-fore-color: RoyalBlue;
	--ads-template-fore-color-dark: RoyalBlue;
	--ads-template-back-color: rgba(65,105,225, 0.08);	/* transparent version */
	--ads-template-back-color-dark: rgba(65,105,225, 0.08);
	
	--ads-icon-font-weight: 400;						/* Fill all font awesome icons: 400 or 900 */
	--ads-menu-color: #3378F7;							/* For the menu macro */
	--ads-menu-color-dark: RoyalBlue;

	--ads-color: Black;									/* base color for all text */
	--ads-color-dark: #f1f1f1;							/* dark variant of the base color */
	--ads-background-color: White;						/* base color for the background */
	--ads-background-color-dark: #1e1e1e;				/* dark variant of the background color */
	--ads-code-color: DimGray;							/* For general code */
	--ads-code-color-dark: White;
	--ads-pre-background-color: var(--ads-template-back-color);
	--ads-pre-background-color-dark: #7f7f7f;
	--ads-listingblock-background-color: #eee;
	--ads-listingblock-background-color-dark: #333;

	--ads-headline-color: var(--ads-template-fore-color);					/* base color for all headline */
	--ads-headline-color-dark: var(--ads-template-fore-color-dark);			/* dark variant for the headlines */
	--ads-headline-block-color: var(--ads-template-fore-color);				/* headline color for any blocks */
	--ads-headline-block-color-dark: var(--ads-template-fore-color-dark);	/* dark variant for the block headlines */
	--ads-headline-small-color: var(--ads-template-fore-color);				/* color for small headlines */
	--ads-headline-small-color-dark: var(--ads-template-fore-color-dark);	/* dark variant for the small headlines */

	--ads-mark-background-color: Yellow;					/* Text marker with the same in dark mode */

	--ads-a-color: var(--ads-template-fore-color);			/* all kind of links */
	--ads-a-color-dark: var(--ads-template-fore-color-dark);	/* dark variant of the links */
	--ads-a-hover-color: var(--ads-template-fore-color);	/* hover variant of the links */
	--ads-a-hover-color-dark: #f1f1f1;						/* dark variant of links hover */
		
	--ads-single-border-color: var(--ads-template-fore-color);	/* Mainly for single lines */
	--ads-border-color: rgb(0 0 0 / 0.6);				/* Light variant for some transparent borders */
	--ads-border-color-dark: rgb(255 255 255 / 0.1);	/* Dark variant for all borders */
	--ads-details-color: rgb(0 0 0 / 0.85);				/* Some borders needs to be less transparent */ 
	--ads-details-color-dark: rgb(255 255 255 / 0.85);	/* dark variant of these borders */

	/* Colors for syntax highlighting */	

	--ads-attribute-color: var(--ads-headline-color);
	--ads-attribute-color-dark: var(--ads-headline-color-dark);
	--ads-comment-color: darkgray;
	--ads-comment-color-dark: gray;
	--ads-markup-color: darkorange; 
	--ads-markup-color-dark: orange; 
	--ads-literal-color: darkred;
	--ads-literal-color-dark: firebrick;
	--ads-tag-color: green;
	--ads-tag-color-dark: forestgreen;
	--ads-verbatim-color: purple; 
	--ads-verbatim-color-dark: purple;

	/* Colors for Tables */
	--ads-table-border-color: var(--ads-template-fore-color);						
	--ads-table-background-color: White;
	--ads-table-background-color-dark: #212121;
	--ads-table-head-background-color: color-mix(in srgb, var(--ads-template-fore-color) 50%, transparent);
	--ads-table-head-background-color-dark: #323232;
	--ads-table-alternate-background-color: color-mix(in srgb, var(--ads-template-fore-color) 25%, transparent);;
	--ads-table-alternate-background-color-dark: #f8f8f7;
	--ads-table-stripes-background-color: color-mix(in srgb, var(--ads-template-fore-color) 10%, transparent);;
	--ads-table-stripes-background-color-dark: #323232;
	--ads-linenotable-background-color: none;
	--ads-linenotable-background-color-dark: none;

	/* Colors for Admonitions */
	--ads-admonitionblock-background-color: none;
	--ads-admonitionblock-background-color-dark: none;
	--ads-note-color: var(--ads-template-fore-color);
	--ads-note-border-color: var(--ads-template-fore-color);
	--ads-note-background-color: var(--ads-template-back-color);
	--ads-tip-color: var(--ads-template-fore-color);
	--ads-tip-border-color: var(--ads-template-fore-color);
	--ads-tip-background-color: var(--ads-template-back-color);
	--ads-warning-color: var(--ads-template-fore-color);
	--ads-warning-border-color: var(--ads-template-fore-color);
	--ads-warning-background-color: var(--ads-template-back-color);
	--ads-caution-color: var(--ads-template-fore-color);
	--ads-caution-border-color: var(--ads-template-fore-color);
	--ads-caution-background-color: var(--ads-template-back-color);
	--ads-important-color: var(--ads-template-fore-color);
	--ads-important-border-color: var(--ads-template-fore-color);
	--ads-important-background-color: var(--ads-template-back-color);

}

/* Styles & Sizes */

html {
	font-size: 12pt;
}

.paragraph > p {
	font-size: 1em;
	margin-bottom: 1em;
}

#header > h1:first-child {
	font-size: 2em;
	font-weight: 500;
	margin-bottom: 0.5em;
	border: 0;
}

.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
	font-size: 1.15em;
	line-height: 1.35;
	font-weight: 500;
}

h2, h3, h4, h5, h6,
.tocbase #toctitle {
	font-size: 1.15em;
	font-weight: 500;
}

.subheader,
.admonitionblock td.content > .title,
.sidebarblock > .content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
	font-size: 0.85em;
	font-weight: 400;
	text-align: left;
	margin-bottom: 1em;
}

#toctitle {
	font-weight: 500;
	font-size: 2em;
}

#content .tocbase {
	padding-left: 0;
}

.partintro {
	font-weight: 600;
}

dl p {
	margin-top: 0.25em;
	margin-bottom: 1em;
}
	

dl dt {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--ads-headline-color);
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

dt:after {
  content:':';
}

dl dd {
	margin-bottom: 0;
}

.ulist ul li {
	list-style-type: square;
	list-style
}

.ulist ul li:first-of-type {
	margin-top: 0;
}

.checklist li {
	margin-left: -0.4em;
}

.checklist ul li {
	list-style-type: none;
}

.checklist .fas, 
.checklist .fa-classic, 
.checklist .fa-solid, 
.checklist .far, 
.checklist .fa-regular {
	color: var(--ads-menu-color);
}

/* Mimic the standard look of key on the keyboard */
kbd {
	font-family: var(--ads-system-font);
	font-size: 0.75em;
	font-weight: 500;
	font-style: normal !important; 
	padding: 0.1em 0.5em;
}

/* Mimic the standard look of a pulldown menu but from left to right instead of top-down */
.menuseq::before,
.menuref::before {
	display: inline-block;
	white-space: nowrap;
	height: 20px;
	width: 24px;
	vertical-align: -2px;
	background-size: contain;
	background-repeat: no-repeat;
	padding-right: 5px;
	content: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%2014.3555%2010.7871%22%3E%3Cg%3E%3Crect%20height%3D%2210.7871%22%20opacity%3D%220%22%20width%3D%2214.3555%22%20x%3D%220%22%20y%3D%220%22/%3E%3Cpath%20d%3D%22M13.8164%201.81641L13.8164%208.97656C13.8164%2010.1836%2013.207%2010.7871%2011.9766%2010.7871L1.83984%2010.7871C0.615234%2010.7871%200%2010.1836%200%208.97656L0%201.81641C0%200.609375%200.615234%200%201.83984%200L11.9766%200C13.207%200%2013.8164%200.609375%2013.8164%201.81641ZM1.85156%200.943359C1.26562%200.943359%200.943359%201.25977%200.943359%201.86914L0.943359%208.92383C0.943359%209.5332%201.26562%209.84375%201.85156%209.84375L11.9648%209.84375C12.5449%209.84375%2012.873%209.5332%2012.873%208.92383L12.873%201.86914C12.873%201.25977%2012.5449%200.943359%2011.9648%200.943359ZM8.30859%208.19727C8.30859%208.39648%208.15625%208.54883%207.94531%208.54883L2.98828%208.54883C2.77734%208.54883%202.625%208.39648%202.625%208.19727C2.625%207.99219%202.77734%207.82812%202.98828%207.82812L7.94531%207.82812C8.15625%207.82812%208.30859%207.99219%208.30859%208.19727ZM8.30859%202.58984C8.30859%202.79492%208.15625%202.95312%207.94531%202.95312L2.98828%202.95312C2.77734%202.95312%202.625%202.79492%202.625%202.58984C2.625%202.39062%202.77734%202.23242%202.98828%202.23242L7.94531%202.23242C8.15625%202.23242%208.30859%202.39062%208.30859%202.58984Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.85%22/%3E%3Cpath%20d%3D%22M12.1289%204.79297L12.1289%205.98828C12.1289%206.46875%2011.8418%206.77344%2011.3555%206.77344L2.4668%206.77344C1.98047%206.77344%201.69336%206.46875%201.69336%205.98828L1.69336%204.79297C1.69336%204.3125%201.98047%204.00781%202.4668%204.00781L11.3555%204.00781C11.8418%204.00781%2012.1289%204.3125%2012.1289%204.79297ZM2.99414%205.0332C2.7832%205.0332%202.625%205.19141%202.625%205.39062C2.625%205.5957%202.7832%205.75391%202.99414%205.75391L5.87695%205.75391C6.08789%205.75391%206.24023%205.5957%206.24023%205.39062C6.24023%205.19141%206.08789%205.0332%205.87695%205.0332Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.85%22/%3E%3C/g%3E%3C/svg%3E");
}

.menuseq,
.menuref {
	font-family: var(--ads-system-font);
	font-size: 0.85em;
	font-weight: 700;
	font-style: normal !important; 
	white-space: nowrap;
	vertical-align: 1px;
	line-height: 1.5;
	padding: 2px 4px;
	color: white;	
	border-radius: 4px;
	background-color: var(--ads-menu-color);
}

@media (prefers-color-scheme: dark) {
	.menuseq,
	.menuref {
		color: var(--ads-color-dark);
		background-color: var(--ads-menu-color-dark);
	}
}

/* Mimic the look of an button */

b.button {
    background-color: white;
    border: thin solid silver;
    border-radius: 5px;
    box-sizing: border-box;
    color: black;
    cursor: pointer;
    display: inline-block;
    font-family: var(--ads-system-font);
    font-weight: 500;
    font-size: 0.75em;
	font-style: normal !important; 
    line-height: 1.5em;
    
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

b.button::before {
	content: "";
	padding: 0.5em;
}

b.button::after {
	content: "";
	padding: 0.5em;
}

/* Design the Q&A definitionlist – declared in AsciiDoc with [qanda] – as a circled Question markt */

.qanda > ol {
	list-style-type: none;
}

.qanda > ol > li {
	margin-left: -1.5em;
}

.qanda > ol > li::before {
	border: 2px solid var(--ads-headline-color);
	content: "?";
	font-weight: 900;
	font-size: 2.25em;
	color: var(--ads-headline-color);
	text-align: center;
	display: inline-block;
	width: 40px;	/* Position the ? */
	height: 40px;
	line-height: 40px;
	position: relative;
	padding-left: 1px;	/* Fix the unjustified ? */
	border-radius: 50%;
	top: 2px;
}

.qanda > ol > li > p {
  	margin-left: 3em;
}

.qanda > ol > li > p:first-child {
  	margin-top: -2.5em;
}

.qanda > ol > li > p:last-child {
  	margin-bottom: 0.85em;
}

/* Finally design the questions */
.qanda em {
	color: var(--ads-headline-color);
	font-style: normal;
	font-weight: 600;
}

/* Give the menu items within the menuseq a bit more space */
.submenu,
.menuitem {
	padding-left: 3px;
}

.quoteblock:not(.excerpt) > .title {
	margin-left: 0.5em;
}

.literalblock,
.exampleblock,
.sidebarblock {
	background-color: var(--ads-pre-background-color);
	border: 0;
}

.conum[data-value] {
	/* Some adjustments for this style */
	background-color: var(--ads-template-fore-color);
	font-size: 0.86em;
	width: 1.65em;
	height: 1.65em;
	line-height: 1.75;
}

/* Show an arrow after each https link */
a[href^="https://"]::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpolygon points='7 7 15.586 7 5.293 17.293 6.707 18.707 17 8.414 17 17 19 17 19 5 7 5 7 7'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    a[href^="https://"]::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpolygon points='7 7 15.586 7 5.293 17.293 6.707 18.707 17 8.414 17 17 19 17 19 5 7 5 7 7'/%3E%3C/svg%3E");
    }
}

li p,
ul dd,
ol dd,
.olist .olist,
.ulist .ulist,
.ulist .olist,
.olist .ulist {
	margin-bottom: 0;
}

/* A Style especially for a passthrough macro for displaying a label as an macOS tag: 
	:icons: font
	:icon-set: apple
	:v3: pass:[<div class=tag>icon:tag[]v3</div>]
	
	Then {v3} will generate a blue label with the tag icon from DSF Symbols.
*/
.tag {
	display: inline;
	font-size: 0.85em;
	border-radius: 4px;
	background-color: var(--ads-template-fore-color);;
	padding-top: 2px;
	padding-bottom: 1px;
	padding-left: 3px;
	padding-right: 4px;
	color: var(--ads-color-dark);
}


/*** ADMONITIONS ***/

/* Set the left side of the admonition block in general */
.admonitionblock {
	background-color: var(--ads-template-back-color);
	border-left: 3px solid;
}

/* Set the admonition title (if ":icons: font" is NOT SET) */
.admonitionblock > table td.icon .title {
	font-family: var(--ads-headline-font); 
	text-transform: none;
	font-weight: 500;
	text-align: left;
	margin-left: 0em;
	width: 400px;
}
.admonitionblock > table td.icon {
	vertical-align: top;
	padding-top: 1em;
	text-align: left;
}

/* Put the admonition icon (if ":icons: font" IS SET) */
.admonitionblock td.icon {
	position: absolute;
	margin-top: -0.5em;
}

/* Size and put the admonition title */
.admonitionblock td.icon i::after {
	content: " " attr(title) " \00a0";		/* HACK: I need space before & after the title */
	font-family: var(--ads-headline-font); 
	text-align: left;
	white-space: nowrap;
	font-weight: 500;
}

/* no border between icon and text */
.admonitionblock > table td.content {
    border: 0;
	padding-top: 2.5em;
    padding-left: 0.6em;
}

/*** New Icons for the Admonitions ***/

.admonitionblock td.icon [class^="fa icon-"] {
	font-size: 1em;			/* The size of the icon if displayed */
	cursor: default;
}

.admonitionblock td.icon .icon-note::before {
	content: "\f249";			/* The font icon for NOTE */
	color: var(--ads-note-color); 	
}

.admonitionblock td.icon .icon-tip::before {
	content: "\f0eb";			/* The font icon for TIP */
	color: var(--ads-tip-color);
}

.admonitionblock td.icon .icon-warning::before {
	content: "\f0f3";			/* The font icon for WARNING */
	color: var(--ads-warning-color);
}

.admonitionblock td.icon .icon-caution::before {
	content: "\f25a";			/* The font icon for CAUTION */
	color: var(--ads-caution-color);
}

.admonitionblock td.icon .icon-important::before {
	content: "\f256";			/* The font icon for IMPRTDANT */
	color: var(--ads-important-color);
}

/* Set the Colors for NOTE */
.admonitionblock.note td.icon {
	color: var(--ads-note-color);
}

.admonitionblock.note {
  color: var(--ads-note-border-color) !important;	/* without !important it doesn't work in PDF */
  background-color: var(--ads-note-background-color) !important;
}

@media (prefers-color-scheme: dark) {
	.admonitionblock.note td.icon,
	.admonitionblock td.icon .icon-note::before {
  		color: var(--ads-color-dark) !important;
	}
}


/* Set the Colors for TIP */
.admonitionblock.tip td.icon {
	color: var(--ads-tip-color);
}

.admonitionblock.tip {
  color: var(--ads-tip-border-color) !important;	/* without !important it doesn't work in PDF */
  background-color: var(--ads-tip-background-color) !important;
}

@media (prefers-color-scheme: dark) {
	.admonitionblock.tip td.icon,
	.admonitionblock td.icon .icon-tip::before {
  		color: var(--ads-color-dark) !important;
	}
}

/* Set the Colors for WARNING */
.admonitionblock.warning td.icon {
	color: var(--ads-warning-color);
}

.admonitionblock.warning {
  color: var(--ads-warning-border-color) !important;	/* without !important it doesn't work in PDF */
  background-color: var(--ads-warning-background-color) !important;
}

@media (prefers-color-scheme: dark) {
	.admonitionblock.warning td.icon,
	.admonitionblock td.icon .icon-warning::before {
  		color: var(--ads-color-dark) !important;
	}
}

/* Set the Colors for CAUTION */
.admonitionblock.caution td.icon {
	color: var(--ads-caution-color);
}

.admonitionblock.caution {
  color: var(--ads-caution-border-color) !important;	/* without !important it doesn't work in PDF */
  background-color: var(--ads-caution-background-color);
}

@media (prefers-color-scheme: dark) {
	.admonitionblock.caution td.icon,
	.admonitionblock td.icon .icon-caution::before {
  		color: var(--ads-color-dark) !important;
	}
}

/* Set the Colors for IMPORTANT */
.admonitionblock.important td.icon {
	color: var(--ads-important-color);
}

.admonitionblock.important {
  color: var(--ads-important-border-color) !important;	/* without !important it doesn't work in PDF */
  background-color: var(--ads-important-background-color);
}

@media (prefers-color-scheme: dark) {
	.admonitionblock.important td.icon,
	.admonitionblock td.icon .icon-important::before {
  		color: var(--ads-color-dark) !important;
	}
}

/* END of Admonitions */

.border {
	border: thin solid silver;
}

.shaddow {
	filter: drop-shadow(3px 3px 3px #aaa);
}

/* Styles for PDF Output */
@media vivliostyle {

	@page {
    	size: var(--ads-page-size, A4 portrait);	/* --ads-page-size transfers the set dimensions */
   	 	margin: var(--ads-page-margin, 2cm);		/* to the print dialog of adoc Studio.*/
   	 	/* See comment for body background-color above */
	}
	
	html {
		font-size:90%;
	}
	
	body {
		/* Enable common ligatures */
		font-variant-ligatures: common-ligatures;
		
		/* Enable discretionary ligatures */
		font-variant-ligatures: discretionary-ligatures;

		/* Enable historical ligatures */
		font-variant-ligatures: historical-ligatures;
		
		/* Enable contextual alternates */
		font-variant-ligatures: contextual;
	}
	
	#preamble .tocbase {		/* only when the TOC is set after preamble */
		font-size: 100%;
		margin-top: -1.2em;
		margin-bottom: 2em;
		align-content: top;
		border: 0;
	}
			
	.tocbase {
		font-size: 80%;
		margin-top: 5pvh;
	}
	
	#header .details {
		font-size: 0.8em;
		border-bottom: 0;
	}
	
	/* Special formatting for book type PDFs to set a page break before a new part */
	h1.sect0 {
		margin-top: 4.35em;
		margin-bottom: 2em;
		font-size: 3.5em;
	}

	.partintro {
		margin-left: 4em;
		font-size: 1.5em;
	}

	
	h2 {
		break-before: page;
		font-size: 2em;
		margin-top: 4em;
		margin-bottom: 4em;
	}
	
	h3, h4, h5, h6 {
		font-size: 1.5em;
		margin-top: 2em;
		margin-bottom: 1.5em;		
	}

	/* Fix for the vertical align if displayed as PDF */
	.menuseq::before,
	.menuref::before {
		vertical-align: -5px;
	}
}