/* Wiki Formatting ---------------------------------------- */

/* Definitions: SYNTAX (?RWD Responsive Web Design?) */
dfn {
	font-variant: small-caps;
	letter-spacing: 0.1em;
	font-style: normal;
	cursor: help;
	border-bottom: 1px dotted #000;
}

/* Strike through text: SYNTAX --text-- */
del { color: #999; }

del a:visited,
del a:link { color: #999; }


/* Horizontal rule: SYNTAX ---- */
hr {
	border: 0 none #ccc;
	border-top: 1px solid #ccc;
}

/* No line break */
.nobr {white-space: nowrap;}

/** List-related *************************************************************/

/* SYNTAX "  *", "  1.", etc. */

ul, ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/** Header related ***********************************************************/

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 5px;
	padding: 0;
	font-weight: normal;
	line-height: 1.2;
}

/* SYNTAX ==, ===, ====, =====, ======, ======= */

h1 {
	font-size: 24px;
	padding-top: 5px;
	padding-bottom: 2px;
	line-height: 110%;
	color: #235e9a;
}
h2 { font-size: 20px; margin-top: 20px; border-bottom: 3px dotted #ddd; color: #204a87;}
h3 { font-size: 18px; margin-top: 15px; border-bottom: 2px dotted #ddd;}
h4 { font-size: 16px; margin-top: 15px; border-bottom: 1px #999 solid;}
h5 { font-size: 14px; margin-top: 10px; border-bottom: 1px #bbb solid;}
h6 { font-size: 14px; margin-top: 10px;}

/* Centered text: SYNTAX %%(wacko wrapper=text wrapper_align=center)text%% */
.center{ text-align: center;}

/* Indent text: SYNTAX "  ", "  1.", etc. */
.indent { margin-left: 40px;}

/** Revisions-related *********************************************************/

/* Displays text: "This is an old revision of..." */

.revision-id {
	display: inline-block;
	width: 80px;
}

/* Simple differences */
.additions {
	background-color: #eeffee;
}
.deletions {
	background-color: #ffeeee;
}
.additions, 
.deletions {
	padding: 3px;
}

/* Default differences */
ins.diff {
	font-weight: bold;
	color: #008800;
	text-decoration: underline;
	background-color: #efe;
}
del.diff {
	font-style: italic;
	color: #c00;
	text-decoration: line-through;
	background-color: #fee;
}

/** Code wrapper-related ************************************************************/

/* Code areas: SYNTAX %%code%% */

.code,
.code-break,
div.hl-main {
	background: #fcfcfc;
	border: 1px lightgray solid;
	font-family: var(--ww-font-monospace);
	font-size: 14px;
	border-radius: .1rem;
	padding: 0.25em;
	overflow: auto;
	white-space: pre-wrap;
}

	/* hl numbers li */
	div.hl-main ol {
		white-space: normal;
	}

	/* hl numbers table */
	div .hl-numbers-table div.hl-main{
		border: none;
	}

.code-break {
	white-space: pre-wrap;
}

.code code{
	background: #fff;
}

.notes { color: #888800; }

.cl {
	color: #eee;
	background: #000;
	border: solid #888 2px;
	font-family: var(--ww-font-monospace);
	border-radius: .1rem;
	padding: 0.25em;
	overflow: auto;
	min-height: auto;
}

/** Table-related ************************************************************/

/* Bordered tables: SYNTAX #|| || Here | there || ||# */
.usertable {
	border: 1px none;
	border-collapse: collapse;
	background-color: #fff;
}

.usertable th {
	background-color: #eee;
}

.usertable td,
.usertable th {
	border: 1px solid #ccc;
	padding: 4px;
	vertical-align: top;
}

.usertable tr:hover {
	background-color: var(--ww-hover-primary);
}

/* .usertable > tbody > tr:nth-of-type(2n+1) {
	background-color: #f9f9f9;
} */

/* 100%-width tables: SYNTAX #| || Here | there || |# */
.dtable {
	width: 100%;
	border: 0 none;
	border-collapse: collapse;
	table-layout: fixed;
}
.dtable td { 
	vertical-align: top;
	border: 0 none #999;
	padding: 4px;
}

/* Inside the table of content: SYNTAX {{toc}} */
#toc {
	margin: 0;
	padding: 0;
}
#toc li {
	list-style: none;
	font-weight: bold;
}
#toc li ul {
	padding-left: 15px;
}
#toc li li {
	list-style: none;
	font-weight: normal;
}
span.tocnumber {
	margin: 0 0.3em 0 0;
}
[dir="rtl"] span.tocnumber {
	margin: 0 0 0 0.3em;
}

/** File-related ************************************************************/

figure.caption {
	display: table;
}
.caption figcaption {
	display: table-caption;
	caption-side: bottom;
}

figure.caption audio 
{
	min-width: 800px;
}

.media-left {
	float: left;
}
img.media-default,
img.media-left,
.media-default figcaption,
.media-left figcaption {
	margin: .2em 1em .2em 0;
}
[dir=rtl] img.media-default,
[dir=rtl] img.media-left,
[dir=rtl] .media-default figcaption,
[dir=rtl] .media-left figcaption {
	margin: .2em 0 .2em 1em;
}

.media-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.media-center {
	margin: .2em auto;
}

/* special case to align figure with caption as center */
.figure-center-wrp {
	display: flex;
	justify-content: center;
	clear: both;
}
div.figure-center-wrp .media-center {
	display: table;
}

.media-right {
	float: right;
}
img.media-right,
.media-right figcaption {
	margin: .2em 0 .2em 1em;
}
[dir=rtl] img.media-right,
[dir=rtl] .media-right figcaption {
	margin: .2em 1em .2em 0;
}

/** Email-related ************************************************************/

/* Quoted message on new email */

.email1 {color: #800000;}
.email2 {color: #808000;}
.email-odd {color: #800000;}
.email-even {color: #808000;}

/* Quotes: SYNTAX <[text]> */
blockquote {
	border: 1px solid #f5f5f5;
	color: #444;
	margin: 0;
	padding: 1.5rem 1.875rem 1.5rem 4rem;
	font-family: var(--ww-font-sans-serif);
}
[dir=rtl] blockquote {
	padding: 1.5rem 4rem 1.5rem 1.875rem;
}
blockquote::before {
	color: #9e9e9e;
	content: "❝";
	position: absolute;
	font-size: 3rem;
	height: 3rem;
	width: 3rem;
	text-align: center;
	line-height: normal;
	font-family: var(--ww-font-serif);
	margin-left: -3.5rem;
	margin-top: -0.6rem;
}
[dir=rtl] blockquote::before {
	margin-right: -3.5rem;
}
blockquote p { padding: 0; margin: 5px 0; }

/* Paragraphs */
p.auto { margin: 0; padding: 0; font-size: 100%; }
.pmark { color: #ccc; font: 10px var(--ww-font-sans-serif); }

.pmark a:link,
.pmark a:visited { color: #ccc; }

.pmark a:hover,
.pmark a:active  { color: #cc3300; }

.pright {}

.pright .p- { float:right; padding: 0 0 0 15px;  }
.pright .pbody- { }

.pleft { padding: 0; }
.pleft .p- { float: left; padding: 0 15px 0 0;  }
.pleft .pbody- { padding: 0; }

/** Text highlighter-related *************************************************/

/* SYNTAX %%(chat)%% */
.chat div:hover,
.chat tr:hover {
	background-color: #448aff; 
	color: white;
}
.chat tr {
	vertical-align: top;
}

.chat-user { padding: 5px 10px; white-space: nowrap; font-weight: bold  }
.chat-time { padding: 5px 10px; white-space: nowrap; font: 12px tahoma, arial }
.chat-text { padding: 5px 10px; width: 100% }

.chat-u1 { background: rgba(0,200,83,.1); }
.chat-u2 { background: rgba(255,23,68,.1); }
.chat-u3 { background: rgba(224, 203, 82,.1); }
.chat-u4 { background: rgba(68,138,255,.1); }
.chat-u5 { background: rgba(255,82,82,.1); }
.chat-u6 { background: rgba(100,221,23,.1); }
.chat-u7 { background: rgba(255,145,0,.1); }
.chat-u8 { background: rgba(101,31,255,.1); }

/* SYNTAX %%(css)%% */
.css-attr		{ color: #800000; font-weight: bold; }
.css-attrval	{ color: blue; }
.css-comment	{ color: gray; }
.css-digit		{ color: green; }
.css-entity		{ color: orange; }
.css-tag		{ color: red; }

/* SYNTAX %%(hl xyz)%% */

.hl-main {
	font-family: var(--ww-font-monospace); 
	font-size: 14px; 
	margin: 5px 0;
}
.hl-gutter {
	background-color: #ccc;
	padding-right: 10px;
	font-family: var(--ww-font-monospace);
	font-size: 14px;
}
.hl-table {border: solid 1px lightgray; }

	td.hl-main pre{ margin-left: 1em; }

.hl-brackets	{ color: #009966; }
.hl-builtin		{ color: #996633; }
.hl-code		{ color: #7f7f33; }
.hl-comment		{ color: #7f7f7f; }
.hl-default		{ color: #000; }
.hl-identifier	{ color: #000; }
.hl-inlinedoc	{ color: #0000ff; }
.hl-inlinetags	{ color: #ff0000; }
.hl-number		{ color: #007f00; }
.hl-quotes		{ color: #00007f; }
.hl-reserved	{ color: #7f007f; }
.hl-special		{ color: #0000ff; }
.hl-string		{ color: #7f0000; }
.hl-url			{ color: #ff0000; }
.hl-var			{ color: #0066ff; }

/* SYNTAX %%(html)%% */
.html-attr		{ color: #800000; font-weight: bold; }
.html-attrval	{ color: blue; }
.html-comment	{ color: gray; }
.html-entity	{ color: orange; }
.html-tag		{ color: #000080; font-weight: bold; }

/* SYNTAX %%(ini)%% */
.ini-1 { color: #4400dd; }
.ini-2 { color: #226622; }
.ini-3 { color: #aa0000; font-weight: bold; background: #eee0cc; }

/* SYNTAX %%(sql)%% */
.sql-1 { color: #006666; }
.sql-2 { color: #770055; }
.sql-3 { color: green; font-weight: bold; }
.sql-4 { color: blue; }
.sql-5 { color: #888888; }

/** Wrapper-related **********************************************************/

/* SYNTAX %%(wrapper xyz)%% */

.wrapper-center {
	margin: 0 auto !important;
}
.wrapper-left {
	float: left;
}
.wrapper-right {
	float: right;
}

.wrapper-col2 {
	column-count: 2;
}
.wrapper-col3 {
	column-count: 3;
}
.wrapper-col4 {
	column-count: 4;
}
.wrapper-col5 {
	column-count: 5;
}

div.wrapper,
aside.wrapper {
	margin: 2px;
	background: #f6f7ed;
	border: 1px dotted #ccc;
	max-width: 100%;
}
div.wrapper-content { padding: 10px 10px 25px 10px; }

/* Important colored text: SYNTAX !!(red)text!! */
.cl-red {color: #cc0000;}
.cl-green {color: #008000;}
.cl-blue {color: #0000cc;}
.cl-yellow {color: #ffff00;}

/* Fixed width text: SYNTAX ##monospace## */
code {
	color: #666600; 
	background: #ffffcc;
	padding: 1px 5px;
		/* font-size: 90%; */
	font-family: var(--ww-font-monospace);
}

/* Important text: SYNTAX !!text!! */
.cite {color: #ff0000; font-style: normal;}

/* underline text: SYNTAX __text__ */
.underline { text-decoration: underline; }

/* Highlighted text: SYNTAX ??text?? */
mark {background: #ffffaa;}

/* Highlighted text: SYNTAX ??(green)text?? */
.mark-yellow {background: #ffff00;}
.mark-green {background: #a0ffa4;}
.mark-blue {background: #9ec6ff;}
.mark-red {background: #ffbaba;}

/* InterWiki links: SYNTAX (HostPrefix:Term) */

a.iw-bugs .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/report-bug.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a.iw-commit .icon,
a.iw-revision .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/commit.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a.iw-source .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/repository.svg') no-repeat scroll left center;
	padding-left: 17px;
}

/* Wiki links: SYNTAX (prefix://) */
span.icon{
	/* ! required for span width -> inline element */
	display: inline-block;
	height: 16px;
	width: 0;
	vertical-align: text-bottom;
}

a.external-link .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/web.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a.group-link .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/group.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a.user-link .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/user.svg') no-repeat scroll left center;
	padding-left: 17px;
}

a.file-link .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/file.svg') no-repeat scroll left center;
	padding-left: 17px;
}

a[href^="mailto:"] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/mail.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href^="xmpp:"] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/jabber.svg') no-repeat scroll left center;
	padding-left: 17px;
}

/* lockicon */
a.acl-denied .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/locked.svg') no-repeat scroll left center;
	padding-left: 17px;
}
/* keyicon */
a.acl-customsec .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/unlocked.svg') no-repeat scroll left center;
	padding-left: 17px;
}

/* mime */

a[href $='.pdf'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/pdf.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.epub'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/epub.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.txt'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/text.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.diff'] .icon,
a[href $='.patch'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/patch.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odt'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/document.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.avif'] .icon,
a[href $='.gif'] .icon,
a[href $='.ico'] .icon,
a[href $='.jpe'] .icon,
a[href $='.jpeg'] .icon,
a[href $='.jpg'] .icon,
a[href $='.jxl'] .icon,
a[href $='.png'] .icon, 
a[href $='.webp'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/image.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.rdf'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/xml.svg') no-repeat scroll left center;
	padding-left: 17px;
}

a[href $='.7z'] .icon,
a[href $='.bz2'] .icon,
a[href $='.gz'] .icon,
a[href $='.rar'] .icon,
a[href $='.tar'] .icon,
a[href $='.tgz'] .icon,
a[href $='.zip'] .icon,
a[href $='.zst'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/archive.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.ods'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/spreadsheet.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odp'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/presentation.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odg'] .icon,
a[href $='.svg'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/drawing.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.mp3'] .icon,
a[href $='.m4a'] .icon,
a[href $='.oga'] .icon,
a[href $='.ogg'] .icon,
a[href $='.opus'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/audio.svg') no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.mp4'] .icon,
a[href $='.ogv'] .icon,
a[href $='.webm'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/video.svg') no-repeat scroll left center;
	padding-left: 17px;
}

/* Callouts: SYNTAX %%(info type="warning" title="Warning")text%% */

/* 1. default */
.info,
.wrapper {
	position: relative;
	margin: 1em 0;
	padding: .4rem .6rem;
	border: .05rem solid rgb(147, 154, 69,.1);
	border-left: .2rem solid #939a45;
	border-radius: .1rem;
	overflow: auto;
}
[dir=rtl] .info {
	border-left: unset;
	border-right: .2rem solid #939a45;
}
.info div {
	min-height: 4em;
}

.wrapper-title {
	margin: -.4rem -.6rem .4rem -.6rem;
	padding: .4rem .6rem .4rem 2rem;
	font-weight: 700;
}
[dir=rtl] .wrapper-title {
	padding: .4rem 2rem .4rem .6rem;
}
.info.type-default,
.wrapper.type-default,
.wrapper-title {
	background-color: rgb(147, 154, 69,.1);
}
.wrapper-title {
	border-bottom: .05rem solid rgb(147, 154, 69,.1);
}
.wrapper > .wrapper-title::before {
	position: absolute;
	left: .6rem;
	color: #939a45;
	font-size: 1rem;
	content: "i";
	height: 1rem;
	width: 1rem;
	font-family: var(--ww-font-serif);
}
[dir=rtl] .wrapper > .wrapper-title::before {
	right: .6rem;
}

/* 2. note */
.info.type-note {
	border-color: rgba(68,138,255,.1);
	border-left-color: #448aff;
}
[dir="rtl"] .info.type-note {
	border-left-color: unset;
	border-right-color: #448aff;
}
.info.type-note,
.wrapper.type-note,
.wrapper.type-note > .wrapper-title {
	background-color: rgba(68,138,255,.1);
}
.wrapper.type-note > .wrapper-title {
	border-bottom-color: rgba(68,138,255,.1);
}
.info.type-note > .info-content::before,
.wrapper.type-note > .wrapper-title::before {
	color: #448aff;
	content: "✎";
}

/* 3. warning */
.info.type-warning {
	border-color: rgba(255,145,0,.1);
	border-left-color: #ff9100;
}
[dir="rtl"] .info.type-warning {
	border-left-color: unset;
	border-right-color: #ff9100;
}
.info.type-warning,
.wrapper.type-warning,
.wrapper.type-warning > .wrapper-title {
	background-color: rgba(255,145,0,.1);
}
.wrapper.type-warning > .wrapper-title {
	border-bottom-color: rgba(255,145,0,.1);
}
.info.type-warning > .info-content::before,
.wrapper.type-warning > .wrapper-title::before {
	color: #ff9100;
	content: "⚠";
}

/* 4. success */
.info.type-success {
	border-color: rgba(100,221,23,.1);
	border-left-color: #64dd17;
}
[dir="rtl"] .info.type-success {
	border-left-color: unset;
	border-right-color: #64dd17;
}
.info.type-success,
.wrapper.type-success,
.wrapper.type-success > .wrapper-title {
	background-color: rgba(100,221,23,.1);
}
.wrapper.type-success > .wrapper-title {
	border-bottom-color: rgba(100,221,23,.1);
}
.info.type-success > .info-content::before,
.wrapper.type-success > .wrapper-title::before {
	color: #64dd17;
	content: "✓";
}

/* 5. question */
.info.type-question {
	border-color: rgba(224, 203, 82,.1);
	border-left-color: #e0cb52;
}
[dir="rtl"] .info.type-question {
	border-left-color: unset;
	border-right-color: #e0cb52;
}
.info.type-question,
.wrapper.type-question,
.wrapper.type-question > .wrapper-title {
	background-color: rgba(224, 203, 82,.1);
}
.wrapper.type-question > .wrapper-title {
	border-bottom-color: rgba(224, 203, 82,.1);
}
.info.type-question > .info-content::before,
.wrapper.type-question > .wrapper-title::before {
	color: #e0cb52;
	content: "?";
}

/* 6. error */
.info.type-error {
	border-color: rgba(255,82,82,.1);
	border-left-color: #ff5252;
}
[dir="rtl"] .info.type-error {
	border-left-color: unset;
	border-right-color: #ff5252;
}
.info.type-error,
.wrapper.type-error,
.wrapper.type-error > .wrapper-title {
	background-color: rgba(255,82,82,.1);
}
.wrapper.type-error > .wrapper-title {
	border-bottom-color: rgba(255,82,82,.1);
}
.info.type-error > .info-content::before,
.wrapper.type-error > .wrapper-title::before {
	color: #ff5252;
	content: "✕";
}

/* 7. example */
.info.type-example {
	border-left-color: #651fff;
}
[dir="rtl"] .info.type-example {
	border-left-color: unset;
	border-right-color: #651fff;
}
.info.type-example,
.wrapper.type-example,
.wrapper.type-example > .wrapper-title {
	background-color: rgba(101,31,255,.1);
}
.wrapper.type-example > .wrapper-title {
	border-bottom-color: rgba(101,31,255,.1);
}
.info.type-example > .info-content::before,
.wrapper.type-example > .wrapper-title::before {
	color: #651fff;
	content: "💡";
}

/* 8. quote */
.info.type-quote {
	border-left-color: #9e9e9e;
}
[dir="rtl"] .info.type-quote {
	border-left-color: unset;
	border-right-color: #9e9e9e;
}
.info.type-quote,
.wrapper.type-quote,
.wrapper.type-quote > .wrapper-title {
	background-color: hsla(0,0%,62%,.1);
}
.wrapper.type-quote > .wrapper-title {
	border-bottom-color: hsla(0,0%,62%,.1);
}
.info.type-quote > .info-content::before,
.wrapper.type-quote > .wrapper-title::before {
	color: #9e9e9e;
	content: "❝";
}
/* 9. important */
.info.type-important {
	border-color: rgba(255,23,68,.1);
	border-left-color: #ff1744;
}
[dir="rtl"] .info.type-important {
	border-left-color: unset;
	border-right-color: #ff1744;
}
.info.type-important,
.wrapper.type-important,
.wrapper.type-important > .wrapper-title {
	background-color: rgba(255,23,68,.1);
}
.wrapper.type-important > .wrapper-title {
	border-bottom-color: rgba(255,23,68,.1);
}
.info.type-important > .info-content::before,
.wrapper.type-important > .wrapper-title::before {
	color: #ff1744;
	content: "!";
}

/* Info container */
.info-title {
	margin: -.4rem -.6rem .4rem -.6rem;
	padding: .4rem .6rem .4rem .6rem;
	font-weight: 700;
}
.info-content {
	margin: 0;
	padding: .4rem .6rem .4rem 4.4rem;
}
[dir=rtl] .info-content {
	padding: .4rem 4.4rem .4rem .6rem;
}
.info > .info-content::before {
	position: absolute;
	left: 1rem;
	top: .4rem;
	color: #939a45;
	font-size: 3rem;
	content: "i";
	height: 3rem;
	width: 3rem;
	text-align: center;
	line-height: normal;
	font-family: var(--ww-font-serif);
}
[dir=rtl] .info > .info-content::before {
	right: 1rem;
}
