/* 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: 1.5rem;
	padding-top: 5px;
	padding-bottom: 2px;
	line-height: 110%;
	color: #235e9a;
}
h2 { font-size: 1.25rem; margin-top: 20px; border-bottom: 3px dotted #ddd; color: #204a87;}
h3 { font-size: 1.125rem; margin-top: 15px; border-bottom: 2px dotted #ddd;}
h4 { font-size: 1rem; margin-top: 15px; border-bottom: 1px #999 solid;}
h5 { font-size: 0.875rem; margin-top: 10px; border-bottom: 1px #bbb solid;}
h6 { font-size: 0.875rem; margin-top: 10px;}

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

/* Align text:  */
.side-top			{ caption-side: top; }
.side-bottom		{ caption-side: bottom; }

.text-center		{ text-align: center; }
.text-left			{ text-align: left; }
.text-right			{ text-align: right; }
.text-justify		{ text-align: justify; }

.vertical-top		{ vertical-align: top; }
.vertical-middle	{ vertical-align: middle !important; }
.vertical-bottom	{ vertical-align: bottom !important; }

/* 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: #efe; }
.deletions { background-color: #fee; }
.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: 0.875rem;
	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;
}

.code pre {
	margin: 0;
}

.notes { color: #880; }

.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 ************************************************************/

.table-center	{ margin: 0 auto !important; }
.table-left		{ float: left;  margin: 10px 15px 10px 0; }
.table-right	{ float: right; margin: 10px 0 10px 15px; }

@media (max-width: 768px) {
	table.usertable {
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}

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

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

.usertable caption {
	/* border: 1px solid #ccc; */
	margin: 5px 0;
	padding: 2px;
}

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

.usertable td:target,
.usertable th:target {
	border: 2px solid #ff6600;
}

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

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

.sticky > tbody > tr:first-child th {
	position: sticky;
	top: 0;
}

/* 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;
}

/* colum alignment */

.defaultleft,
.col1left td:nth-child(1),
.col1left th:nth-child(1),
.col2left td:nth-child(2),
.col3left td:nth-child(3),
.col4left td:nth-child(4),
.col5left td:nth-child(5),
.col6left td:nth-child(6),
.col7left td:nth-child(7),
.col8left td:nth-child(8),
.col9left td:nth-child(9),
.col10left td:nth-child(10),
.col11left td:nth-child(11),
.col12left td:nth-child(12),
.col13left td:nth-child(13),
.col14left td:nth-child(14),
.col15left td:nth-child(15),
.col16left td:nth-child(16),
.col17left td:nth-child(17),
.col18left td:nth-child(18),
.col19left td:nth-child(19),
.col20left td:nth-child(20),
.col21left td:nth-child(21),
.col22left td:nth-child(22),
.col23left td:nth-child(23),
.col24left td:nth-child(24),
.col25left td:nth-child(25),
.col-1left td:nth-last-child(1),
.col-2left td:nth-last-child(2),
.col-3left td:nth-last-child(3),
.col-4left td:nth-last-child(4),
.col-5left td:nth-last-child(5),
.col-6left td:nth-last-child(6),
.col-7left td:nth-last-child(7),
.col-8left td:nth-last-child(8),
.col-9left td:nth-last-child(9) {
	text-align: left;
}

.defaultcenter,
.col1center td:nth-child(1),
.col2center td:nth-child(2),
.col3center td:nth-child(3),
.col4center td:nth-child(4),
.col5center td:nth-child(5),
.col6center td:nth-child(6),
.col7center td:nth-child(7),
.col8center td:nth-child(8),
.col9center td:nth-child(9),
.col10center td:nth-child(10),
.col11center td:nth-child(11),
.col12center td:nth-child(12),
.col13center td:nth-child(13),
.col14center td:nth-child(14),
.col15center td:nth-child(15),
.col16center td:nth-child(16),
.col17center td:nth-child(17),
.col18center td:nth-child(18),
.col19center td:nth-child(19),
.col20center td:nth-child(20),
.col21center td:nth-child(21),
.col22center td:nth-child(22),
.col23center td:nth-child(23),
.col24center td:nth-child(24),
.col25center td:nth-child(25),
.col-1center td:nth-last-child(1),
.col-2center td:nth-last-child(2),
.col-3center td:nth-last-child(3),
.col-4center td:nth-last-child(4),
.col-5center td:nth-last-child(5),
.col-6center td:nth-last-child(6),
.col-7center td:nth-last-child(7),
.col-8center td:nth-last-child(8),
.col-9center td:nth-last-child(9) {
	text-align: center;
}

.defaultright,
.col1right td:nth-child(1),
.col2right td:nth-child(2),
.col3right td:nth-child(3),
.col4right td:nth-child(4),
.col5right td:nth-child(5),
.col6right td:nth-child(6),
.col7right td:nth-child(7),
.col8right td:nth-child(8),
.col9right td:nth-child(9),
.col10right td:nth-child(10),
.col11right td:nth-child(11),
.col12right td:nth-child(12),
.col13right td:nth-child(13),
.col14right td:nth-child(14),
.col15right td:nth-child(15),
.col16right td:nth-child(16),
.col17right td:nth-child(17),
.col18right td:nth-child(18),
.col19right td:nth-child(19),
.col20right td:nth-child(20),
.col21right td:nth-child(21),
.col22right td:nth-child(22),
.col23right td:nth-child(23),
.col24right td:nth-child(24),
.col25right td:nth-child(25),
.col-1right td:nth-last-child(1),
.col-2right td:nth-last-child(2),
.col-3right td:nth-last-child(3),
.col-4right td:nth-last-child(4),
.col-5right td:nth-last-child(5),
.col-6right td:nth-last-child(6),
.col-7right td:nth-last-child(7),
.col-8right td:nth-last-child(8),
.col-9right td:nth-last-child(9) {
	text-align: right;
}

.vertical-align-top tr,
.defaulttop tr,
.col1top td:nth-child(1),
.col2top td:nth-child(2),
.col3top td:nth-child(3),
.col4top td:nth-child(4),
.col5top td:nth-child(5),
.col6top td:nth-child(6),
.col7top td:nth-child(7),
.col8top td:nth-child(8),
.col9top td:nth-child(9),
.col10top td:nth-child(10),
.col11top td:nth-child(11),
.col12top td:nth-child(12),
.col13top td:nth-child(13),
.col14top td:nth-child(14),
.col15top td:nth-child(15),
.col16top td:nth-child(16),
.col17top td:nth-child(17),
.col18top td:nth-child(18),
.col19top td:nth-child(19),
.col20top td:nth-child(20),
.col21top td:nth-child(21),
.col22top td:nth-child(22),
.col23top td:nth-child(23),
.col24top td:nth-child(24),
.col25top td:nth-child(25),
.col-1top td:nth-last-child(1),
.col-2top td:nth-last-child(2),
.col-3top td:nth-last-child(3),
.col-4top td:nth-last-child(4),
.col-5top td:nth-last-child(5),
.col-6top td:nth-last-child(6),
.col-7top td:nth-last-child(7),
.col-8top td:nth-last-child(8),
.col-9top td:nth-last-child(9) {
	vertical-align: top;
}

.defaultmiddle tr,
.col1middle td:nth-child(1),
.col2middle td:nth-child(2),
.col3middle td:nth-child(3),
.col4middle td:nth-child(4),
.col5middle td:nth-child(5),
.col6middle td:nth-child(6),
.col7middle td:nth-child(7),
.col8middle td:nth-child(8),
.col9middle td:nth-child(9),
.col10middle td:nth-child(10),
.col11middle td:nth-child(11),
.col12middle td:nth-child(12),
.col13middle td:nth-child(13),
.col14middle td:nth-child(14),
.col15middle td:nth-child(15),
.col16middle td:nth-child(16),
.col17middle td:nth-child(17),
.col18middle td:nth-child(18),
.col19middle td:nth-child(19),
.col20middle td:nth-child(20),
.col21middle td:nth-child(21),
.col22middle td:nth-child(22),
.col23middle td:nth-child(23),
.col24middle td:nth-child(24),
.col25middle td:nth-child(25),
.col-1middle td:nth-last-child(1),
.col-2middle td:nth-last-child(2),
.col-3middle td:nth-last-child(3),
.col-4middle td:nth-last-child(4),
.col-5middle td:nth-last-child(5),
.col-6middle td:nth-last-child(6),
.col-7middle td:nth-last-child(7),
.col-8middle td:nth-last-child(8),
.col-9middle td:nth-last-child(9) {
	vertical-align: middle;
}

.vertical-align-bottom tr,
.defaultbottom tr,
.col1bottom td:nth-child(1),
.col2bottom td:nth-child(2),
.col3bottom td:nth-child(3),
.col4bottom td:nth-child(4),
.col5bottom td:nth-child(5),
.col6bottom td:nth-child(6),
.col7bottom td:nth-child(7),
.col8bottom td:nth-child(8),
.col9bottom td:nth-child(9),
.col10bottom td:nth-child(10),
.col11bottom td:nth-child(11),
.col12bottom td:nth-child(12),
.col13bottom td:nth-child(13),
.col14bottom td:nth-child(14),
.col15bottom td:nth-child(15),
.col16bottom td:nth-child(16),
.col17bottom td:nth-child(17),
.col18bottom td:nth-child(18),
.col19bottom td:nth-child(19),
.col20bottom td:nth-child(20),
.col21bottom td:nth-child(21),
.col22bottom td:nth-child(22),
.col23bottom td:nth-child(23),
.col24bottom td:nth-child(24),
.col25bottom td:nth-child(25),
.col-1bottom td:nth-last-child(1),
.col-2bottom td:nth-last-child(2),
.col-3bottom td:nth-last-child(3),
.col-4bottom td:nth-last-child(4),
.col-5bottom td:nth-last-child(5),
.col-6bottom td:nth-last-child(6),
.col-7bottom td:nth-last-child(7),
.col-8bottom td:nth-last-child(8),
.col-9bottom td:nth-last-child(9) {
	vertical-align: bottom;
}

/* 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: 0.875rem; 
	margin: 5px 0;
}
.hl-gutter {
	background-color: #ccc;
	padding-right: 10px;
	font-family: var(--ww-font-monospace);
	font-size: 0.875rem;
}
.hl-table {border: solid 1px lightgray; }

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

.hl-brackets	{ color: #096; }
.hl-builtin		{ color: #963; }
.hl-code		{ color: #7f7f33; }
.hl-comment		{ color: #7f7f7f; }
.hl-default		{ color: #000; }
.hl-identifier	{ color: #000; }
.hl-inlinedoc	{ color: #00f; }
.hl-inlinetags	{ color: #ff0000; }
.hl-number		{ color: #007f00; }
.hl-quotes		{ color: #00007f; }
.hl-reserved	{ color: #7f007f; }
.hl-special		{ color: #00f; }
.hl-string		{ color: #7f0000; }
.hl-url			{ color: #ff0000; }
.hl-var			{ color: #06f; }

/* 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: #40d; }
.ini-2 { color: #262; }
.ini-3 { color: #a00; font-weight: bold; background: #eee0cc; }

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

/** 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; }

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

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

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

/* Important colored text: SYNTAX !!(red)text!! */
.cl-blue	{color: #00c;}
.cl-green	{color: #008000;}
.cl-red		{color: #c00;}
.cl-yellow	{color: #ff0;}

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

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

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

a .icon {
	padding-left: 17px;
}

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

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

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

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

/* InterWiki links: SYNTAX (HostPrefix:Term) */
a.iw-archive .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/ia.svg') no-repeat scroll left center;
}
a.iw-bugs .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/report-bug.svg') no-repeat scroll left center;
}
a.iw-commit .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/commit.svg') no-repeat scroll left center;
}
a.iw-diff .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/diff.svg') no-repeat scroll left center;
}
a.iw-source .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/repository.svg') no-repeat scroll left center;
}
/* Interwiki links with generic icon */
a.iw-brave .icon,
a.iw-rfc .icon,
a.iw-ppr .icon,
a.iw-wackowiki .icon,
a.iw-wikipedia .icon {
	/* background: rgba(0, 0, 0, 0) url('./../icon/light/open-link.svg') no-repeat scroll left center; */
	padding-left: 0;
}

/* MIME */

a[href $='.pdf'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/pdf.svg') no-repeat scroll left center;
}
a[href $='.epub'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/epub.svg') no-repeat scroll left center;
}
a[href $='.txt'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/text.svg') no-repeat scroll left center;
}
a[href $='.diff'] .icon,
a[href $='.patch'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/patch.svg') no-repeat scroll left center;
}
a[href $='.odt'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/document.svg') no-repeat scroll left center;
}
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;
}
a[href $='.rdf'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/xml.svg') no-repeat scroll left center;
}

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;
}
a[href $='.ods'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/spreadsheet.svg') no-repeat scroll left center;
}
a[href $='.odp'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/presentation.svg') no-repeat scroll left center;
}
a[href $='.odg'] .icon,
a[href $='.svg'] .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/light/drawing.svg') no-repeat scroll left center;
}
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;
}
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;
}

/* 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;
	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;
}
