/* Scroll navigation */
#stickynav			{ overflow-y: auto; position: sticky; top: 90px; max-height: calc(100vh - 100px); margin-left: -15px; }
#stickynav > ul 		{ padding: 0 0 0 15px; }

#stickynav > ul > li > ul 	{ padding: 4px 0 16px 20px; list-style: none; }

/* Tabnav without a tags */
main > div ul.tn li 		{ color: #aaa; cursor: pointer; }
main > div ul.tn li.ta 		{ cursor: default; color: #06c; }


code {
	display: none; padding: 6px; width: calc(100% - 12px); height: 250px; overflow: auto; background: #eee; border: 1px solid #ccc;
	unicode-bidi: embed; font-family: monospace; white-space: pre; font-size: 1.3em;
}
code.active			{ display: block; }

/* Copy feature */
p.copy				{ margin: 6px 0; }
span.copy			{ margin-left: 10px; }
.copy a				{ color: #666; text-decoration: none; transition: background-color 0.2s linear; outline: none; font-weight: normal; }
.copy a svg			{ width: 14px !important; height: 14px !important; margin: -2px 6px 0 0; }
.copy a svg:nth-child(2)	{ display: none; }
.copy a svg			{ fill: #999; }
.copy a svg:nth-child(2),
.copy a svg:nth-child(2) path	{ fill: #5fc331 !important; }

/* Syntax highlighting */
.jsonbrace			{ color: #000; }
body.dark .jsonbrace		{ color: #eee; }
.jsonkey			{ color: #37a2d7; }
.jsonstring			{ color: #ed2655; }
.xmltag				{ color: #37a2d7; }
.xmlattr			{ color: #ed2655; }
.xmlval				{ color: #6569ff; }

/* EW */
.ewtxt span			{ color: #f60 }		/* text: easy */
.ewtxt				{ color: #444; }	/* text: webshop */
body.dark .ewtxt		{ color: #ddd; }

.center				{ text-align: center; }

/* Dark mode */
body.dark code			{ background: #111; }

table.borders			{ border-collapse: collapse; }
table.borders th,
table.borders td		{ padding: 6px; border: 1px solid #ccc; vertical-align: top; }
textarea.code			{ width: 100%; height: 250px; background: #eee; }