/***********************************************************************
* NOTICE: In order to reduce bandwidth usage, a minimized version of   *
* this stylesheet is used by default (style.min.css). Changes in this  *
* file do not have any effect unless it is loaded by the template      *
* (main.tpl).                                                          *
* The minimized version was created with the YUI Compressor            *
* <http://developer.yahoo.com/yui/compressor/>.                        *
***********************************************************************/

/**
 * colour definition for texts and backgrounds in the light and the dark theme
 *
 * bg: background
 * fg: foreground
 * light: light theme (day mode)
 * dark: dark theme (niǵht mode)
 */
:root {
	/* light spot shades */
	--spot-light-plus-15: hsl(220, 24%, 98%);
	--spot-light-plus-10: hsl(220, 24%, 93%);
	--spot-light-plus-5: hsl(220, 24%, 88%);
	--spot-light: hsl(220, 24%, 83%);
	--spot-light-minus-5: hsl(220, 24%, 78%);
	--spot-light-minus-10: hsl(220, 24%, 73%);
	--spot-light-minus-15: hsl(220, 24%, 68%);
	/* dark spot shading */
	--spot-dark-plus-15: hsl(200, 27%, 52%);
	--spot-dark-plus-10: hsl(200, 27%, 47%);
	--spot-dark-plus-5: hsl(200, 27%, 42%);
	--spot-dark: hsl(200, 27%, 37%);
	--spot-dark-minus-5: hsl(200, 27%, 32%);
	--spot-dark-minus-10: hsl(200, 27%, 27%);
	--spot-dark-minus-15: hsl(200, 27%, 22%);
	/* light theme: borders */
	--border-light: var(--spot-light-minus-5);
}

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

/* definitions for the main blocks of the pages */
html,
body,
body > header,
#subnav,
main,
body > footer,
#assistancemenu {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	min-height: 100%;
	text-align: start;
}

body {
	color: #000;
	background: #fff;
	font-family: "Calibri Light", "DejaVu Sans", Caliban, sans-serif;
	font-size: 1rem;
	line-height: 150%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > header {
	display: block;
	background-color: hsl(210, 100%, 95%);
	background-image: linear-gradient(to right, hsl(210, 100%, 98%), hsl(210, 100%, 93%));
	padding: 0.2rem 0.25rem;
	border-bottom: 1px solid var(--border-light);
}

#subnav {
	background: #f4f4f4;
	padding: 0 0.25rem;
	border-bottom: 1px solid var(--border-light);
	line-height: 1.6em;
}

main {
	display: block;
	padding: 0.75rem 0.25rem;
	flex: 1;
}

body > footer {
	display: block;
	clear: both;
	padding: 0 0.25rem;
	font-size: 0.7em;
	background: #f9f9f9;
	border-top: 1px solid var(--border-light);
}
#assistancemenu {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 2;
	background: #f9f9f9;
	list-style: none;
	border-top: 1px solid var(--border-light);
	border-left: 1px solid var(--border-light);
}
/* end: main blocks */

/* commonly used elements */
h1 {
	margin-top: 0;
	font-size: 1.25em;
}
h2 {
	margin-top: 1rem;
	font-size: 1.15em;
}
h3 {
	font-size: 1em;
}
p {
	margin-top: 0;
}
img {
	border: none;
}
label {
	cursor:pointer;
}
.avatar {
	display: block;
	border: 0;
	border-radius: 5px;
	padding: 0;
}
/* end: commonly used elements */

/* default links */
a {
	color: #00c;
	text-decoration: none;
}
a:visited {
	color: #00a;
}
a:focus,
a:hover {
	color: #00f;
	text-decoration: underline;
}
a:active {
	color: #f00;
}
/* end: default links */

/* strong links */
a.stronglink {
	padding-left: 1em;
	font-weight: bold;
	background-image: url(images/arrow-b-right.svg);
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: 0 center;
}
a.stronglink:visited {
	color: #00c;
}
/* end: strong links */

/* links in header, nav, aside and footer*/
header a:link,
header a:visited,
nav a:link,
nav a:visited,
#modmenu a:link,
#modmenu a:visited,
footer a:link,
footer a:visited,
#assistancemenu a:link,
#assistancemenu a:visited {
	color: var(--spot-dark-minus-5);
}
header a:focus,
header a:hover,
nav a:focus,
nav a:hover,
#modmenu a:focus,
#modmenu a:hover,
footer a:focus,
footer a:hover,
#assistancemenu a:focus,
#assistancemenu a:hover {
	color: #00f;
	text-decoration: none;
}
header a:active,
nav a:active,
#modmenu a:active,
footer a:active,
#assistancemenu a:active {
	color: #f00;
}


/* elements of the page header */
.home,
h1,
.index,
#nav {
	margin: 0;
	padding: 0.2em 0 0.1em 0;
	padding: 0.2rem 0 0.1rem 0;
}
h1 a,
h1 a:visited {
	color:#000;
	text-decoration: none;
}
h1 a:focus,
h1 a:hover,
h1 a:active {
	color:#00a;
	text-decoration: underline;
}
.home a[href] {
	padding: 0.1em 0.2em 0.1em 1.15em;
	background: url("images/home.svg") 0.2em center/0.75em 0.75em no-repeat;
}

#topsearch div {
	display: inline;
}
#topsearch #search-input {
	width: 10rem;
}
/* end: elements of the page header */

/* elements of the navigation bar below the page header */

#submenu,
#subnav > * {
	margin: 0;
	padding: 0;
}
#subnav > *:not(:last-child) {
	border-bottom: 1px solid var(--border-light);
}
#subnav ul {
	list-style: none;
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
}

#subnav-2 a {
	background-repeat: no-repeat;
}
#subnav .fold-postings {
	background-position: 0 -993px;
}

#subnav a {
	padding: 0.275em;
	white-space: nowrap;
	display: flex;
	align-items: center;
}
#subnav a .icon {
	display: inline-block;
	padding:0;
	width: 1em;
	height: 1em;
	margin-right: 0.125em;
	flex: 0 0 1em;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: center center;
}
#subnav a span:not([class]),
#subnav a strong {
	padding: 0 0 0 0.125em;
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; /* added line */
}
#subnav a.create-thread .icon {
	background-image: url(images/arrow-b-right.svg);
}
#subnav a[href*='mode=user&action=edit_profile'] .icon {
	background-image: url(images/user.svg);
}
#subnav a[href*='mode=user&action=show_posts'] .icon {
	background-image: url(images/entries-listing.svg);
}
#subnav a[href*='mode=bookmarks'] .icon {
	background-image: url(images/bookmark.svg);
}
#subnav a[href*='mode=admin'] .icon {
	background-image: url(images/wrench.svg);
}
#subnav a[href$='?mode=user'] .icon {
	background-image: url("images/users.svg");
}
#subnav .ic-log-in .icon {
	background-image: url("images/log-in.svg");
}
#subnav .ic-log-out .icon {
	background-image: url("images/log-out.svg");
}
#subnav a[href$='?mode=register'] .icon {
	background: url("images/sign-add.svg") 0.5em 0.5em/0.6em 0.6em no-repeat, url("images/user.svg") 0.2em center/0.75em 0.75em no-repeat;
}
#subnav a[href*='mode=page'] .icon {
	background-image: url("images/file.svg");
}
#subnav .refresh .icon {
	background-image: url(images/reload.svg);
}
#subnav .fold-1 .icon {
	background-image: url(images/fold.svg);
}
#subnav .fold-2 .icon {
	background-image: url(images/unfold.svg);
}
#subnav .threadview .icon {
	background-image: url(images/threads-nested.svg);
}
#subnav .tableview .icon {
	background-image: url(images/threads-table.svg);
}
#subnav .order-1 .icon {
	background-image: url(images/order-to-top.svg);
}
#subnav .order-2 .icon {
	background-image: url(images/order-to-bottom.svg);
}
#subnav .openthread .icon, #subnav .hierarchic .icon {
	background-image: url(images/thread-entries-nested.svg);
}
#subnav .linear .icon {
	background-image: url(images/thread-entries-linear.svg);
}
#subnav-4 {
	display: flex;
	align-items: center;
}
/* end: elements of the navigation bar below the page header */


/* elements of the main block */
/* general rules */
.xsmall,
.small {
	font-size: 0.69em;
	line-height: 130%;
}

/* elements in forms */
#edit_avatar,
#edit_avatar > * {
	display: block;
}
#edit_avatar {
	max-width: 8em;
	height: auto;
}
#edit_avatar > * {
	width: 100%;
	height: auto;
}
#edit_avatar > span {
	text-align: center;
}
/* hide all checkboxes and radio buttons visually */
.radio-select input[type="radio"],
[type="checkbox"],
.radio-button-native [type="radio"] {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
/* format the labels of checkboxes as well as "normal" displayed radio buttons */
[type="checkbox"] + label,
.radio-button-native [type="radio"] + label {
	padding: 0.125em 0.25em;
	color: #444;
	display: flex;
	align-items: center;
	font-style: italic;
}
/* format the labels of focussed checkboxes and "normal" displayed radio buttons */
[type="checkbox"]:focus + label,
.radio-button-native [type="radio"]:focus + label {
	color: #311;
	text-decoration: underline dotted 0.2em;
}
/* replace checkboxes and "normal" displayed radio buttons with graphics */
[type="checkbox"] + label .icon,
.radio-button-native [type="radio"] + label .icon {
	display: inline-block;
	padding:0;
	height: 1.15em;
	width: 1.15em;
	flex: 0 0 1.25em;
	margin: 0.125em 0.375em 0.125em 0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}
[type="checkbox"] + label .icon {
	background: url("images/marker-square.svg") center center / 100% no-repeat;
}
[type="checkbox"]:checked + label .icon {
	background: url("images/check-mark.svg") center center / 66% no-repeat, url("images/marker-square.svg") center center / 100% no-repeat;
}
.radio-button-native [type="radio"] + label .icon {
	background: url("images/marker-circle.svg") center center / 100% no-repeat;
}
.radio-button-native [type="radio"]:checked + label .icon {
	background: url("images/marker-dot.svg") center center / 100% no-repeat, url("images/marker-circle.svg") center center / 100% no-repeat;
}
[type="checkbox"]:checked + label,
.radio-button-native [type="radio"]:checked + label {
	color: #031;
	font-style: normal;
}
/* format radio button lists, and their labels, that are displayed as buttons */
.radio-select h3 {
	margin: 0 0 0.5rem 0;
}
.radio-select ul {
	margin: 0 0 0.5rem 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.radio-select:last-of-type ul {
	margin-bottom: 0;
}
.radio-select li {
	flex: auto;
}
.radio-select label {
	display: inline-block;
	padding: 0.25rem;
	width: 100%;
	text-align: center;
	border: 1px solid var(--border-light);
}
.radio-select input[type="radio"]:not(:checked) ~ label {
	background-color: #c8cfdd;
	background-image: linear-gradient(#c8cfdd, #c2cedb);
	color: #444;
	font-style: italic;
}
.radio-select input[type="radio"]:checked ~ label {
	background-color: #467;
	background-image: linear-gradient(#467, #456a79);
	color: #fff;
}
/* format the labels of focussed radiobuttons, that are displayed as buttons */
.radio-select [type="radio"]:focus + label {
	text-decoration: underline dotted 0.2em;
}
/* format radio buttons, displayed as toggle switches */
.radio-toggle-switch ul {
	list-style: none;
	white-space: nowrap;
	display: flex;
	margin: 0.5rem 0;
	padding: 0;
	position: relative;
}
.radio-toggle-switch label {
	display: inline-block;
	line-height: calc(1.5em + 2px);
	position: relative;
	z-index: 2;
	cursor: pointer;
}
.radio-toggle-switch input[type="radio"]:not(:checked) ~ label {
	color: #444;
	font-style: italic;
}
/* format the labels of focussed radiobuttons, that are displayed as toggle switches */
.radio-toggle-switch [type="radio"]:focus + label {
	text-decoration: underline dotted 0.2em;
}
.radio-toggle-switch input {
	opacity: 0;
	position: absolute;
}
.radio-toggle-switch li:first-of-type label {
	padding-right: 4em;
}
.radio-toggle-switch li:last-child label {
	margin-left: -4.25em;
	padding-left: 4.25em;
}
.radio-toggle-switch label.toggle-actor::before,
.radio-toggle-switch label.toggle-actor::after {
	border: 1px solid #aaa;
	content: "";
	height: 1.5em;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	vertical-align: middle;
}
.radio-toggle-switch label.toggle-actor::before {
	background: #f8f8f8;
	border: 1px solid #aaa;
	border-radius: .75em;
	position: absolute;
	right: 0.5em;
	transform: translateX(0em);
	transition: transform .2s ease-in-out;
	width: 1.5em;
	z-index: 2;
}
.radio-toggle-switch label.toggle-actor::after {
	background: #467;
	border-radius: .75em;
	margin: 0 0.5em;
	transition: background .2s ease-in-out;
	width: 3em;
}
.radio-toggle-switch input:first-of-type:checked ~ label:first-of-type::before {
	transform: translateX(-1.5em);
}
.radio-toggle-switch input:first-of-type:checked ~ label:first-of-type::after {
	background: #c8cfdd;
}
.radio-toggle-switch input:last-of-type:checked ~ label:last-of-type {
	z-index: 1;
}
/* upload list */
#uploadlist {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
#uploadlist > li {
	padding: 0.5em;
	border: 1px solid var(--border-light);
}
#uploadlist .image-container {
	width: 16em;
	height: 16em;
}
#uploadlist .image-container img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
.confirm-selection {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
.confirm-selection li {
	display: flex;
	gap: 0.75em;
	align-items: center;
	height: 4.5em;
	padding: 0.25em 0;
}
.confirm-selection li:not(:last-child) {
	border-bottom: 1px solid var(--border-light);
}
.confirm-selection li > * {
	margin: 0;
}
.confirm-selection li p.item {
	height: 100%;
	width: 10em;
	overflow: hidden;
}
.confirm-selection li img {
	display: block;
	max-height: 100%;
	width: auto;
}

/* settings forms without table */
form > div:not(:last-child) {
	margin: 0 0 1rem 0;
	padding: 0 0 0.5rem 0;
	border-bottom: 1px dotted var(--border-light);
}
p.label {
	font-weight: bold;
}
form > div p,
form > div ul,
form > div div {
	margin: 0 0 0.25rem 0;
}

input,
select {
	font-size: 1em;
}
/* end: settings forms without table */
/* end: elements in forms */

/* elements of #sidebar, #bottombar, aside */
aside h2,
#sidebarcontent,
aside section h3,
aside section p,
#latest-postings ul,
#modmenu ul,
#latest-postings li,
#modmenu li,
#latest-postings a,
#modmenu a {
	margin:0;
}
aside,
#sidebar,
#bottombar,
aside h2,
#sidebarcontent,
aside section h3,
#latest-postings ul,
#modmenu ul,
#latest-postings li,
#modmenu li {
	padding: 0;
}
#sidebar,
#bottombar {
	margin: 0 0 1em 0;
}
/* main header with folding link */
aside h2 {
	font-size: 1em;
	font-size: 1rem;
	line-height: 160%;
	font-weight: normal;
	background-color: hsl(210, 100%, 92%);
	border: 1px solid var(--border-light);
	box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
}
aside h2 a {
	display: block;
	height: 100%;
	padding: 0 0.25rem;
	width: 100%;
	text-decoration: none;
}
aside h2 a:link,
aside h2 a:visited {
	color: #000;
}
aside h2 a:focus,
aside h2 a:hover {
	color: #143;
}
aside h2 a:active {
	color: #643;
}
/* box containing the sidebars content boxes, the boxes itself and their headers */
#sidebarcontent,
aside section,
aside section h3 {
	margin: 0;
	padding: 0;
}
aside section {
	margin: 0.25em 0 0 0;
	background: #f9f9f9;
	border: 1px solid var(--border-light);
	box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
}
aside section h3 {
	font-size: 1em;
	font-size: 1rem;
	padding: 0 0.25rem;
	width: 100%;
	line-height: 160%;
	font-weight: normal;
	background: #d2ddea;
}

/* box with the latest postings and the similar working modmenu */
#latest-postings ul,
#modmenu ul {
	list-style: none;
}
#latest-postings li,
#modmenu li {
	word-wrap: break-word;
	overflow: hidden;
}
#latest-postings li:last-child,
#modmenu li:last-child {
	border-bottom: 1px solid var(--border-light);
	border-bottom: none;
}
#latest-postings a,
#modmenu a {
	line-height: 1.5em;
	text-decoration: none;
	display: block;
	padding: 0.1em 0.2em;
	background-color: #f0f0f0;
	color: #00c;
}
#latest-postings a span {
	display: block;
}
#latest-postings a:visited,
#latest-postings a.read {
	background-color: #fff;
}
#latest-postings li a:visited .entry-title,
#latest-postings a.read .entry-title {
	color: #236;
}
#latest-postings a:focus,
#latest-postings a:hover,
#modmenu a:focus,
#modmenu a:hover {
	background-color: #ffffcf;
}
#latest-postings a:focus .entry-title,
#latest-postings a:hover .entry-title,
#modmenu a:focus,
#modmenu a:hover {
	text-decoration: underline;
	color: #013;
}
#latest-postings a .entry-metadata,
#latest-postings a .entry-date {
	color: #666;
	font-size: 0.9em;
}
#mod-options a {
	display: flex;
	align-items: center;
}
#mod-options a .icon {
	display: inline-block;
	padding:0;
	height: 0.85em;
	width: 0.85em;
	margin: 0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
#mod-options a span:not(.icon) {
	padding-left: 0.2em;
}
#mod-options a.delete-marked .icon {
	background-image: url(images/marker-cross.svg), url(images/marker-circle.svg);
}
#mod-options a.manage .icon {
	background-image: url(images/thread-change-no.svg);
}
#mod-options a.include-spam .icon {
	background: url("images/check-mark.svg") 85% 85% / 52% no-repeat, url("images/marker-circle.svg") 102% 102% / 70% no-repeat, url("images/warning.svg") center / 100% no-repeat;
}
#mod-options a.exclude-spam .icon {
	background: url("images/marker-cross.svg") 85% 85% / 52% no-repeat, url("images/marker-circle.svg") 102% 102% / 70% no-repeat, url("images/warning.svg") center / 100% no-repeat;
}
#mod-options a.list-spam .icon {
	background-image: url(images/warning.svg);
}
#mod-options a.delete-spam .icon {
	background-image: url(images/marker-cross.svg);
}
#mod-options a.non-activated-users .icon {
	background: url("images/sign-add.svg") 102% 102% / 60% no-repeat, url("images/user.svg") center / 100% no-repeat;
}

#tagcloud ul,
#usersonline ul {
	margin: 0;
	padding: 5px;
	list-style: none;
}
#tagcloud li,
#usersonline li {
	display: inline;
}
#tagcloud strong {
	font-weight: bold;
}

#usersonline {
	background: #f9f9f9;
	border: 1px solid var(--border-light);
	margin: 0.75em 0;
	margin: 0.75rem 0;
	box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
}
#usersonline h2 {
	padding:0 5px;
	border-top: none;
	border-right: none;
	border-left: none;
	box-shadow: none;
}
#usersonline ul {
	background-color: #fff;
}
#tagcloud a,
#usersonline a {
	display:inline-block;
	margin-right:0.25rem;
}
#tagcloud a:not(:last-child):after,
#usersonline a:not(:last-child):after {
	content:", ";
}
#additional-admin-info p {
	line-height: 1.5em;
	padding: 0.125rem 0.25rem;
}
#releases p {
	padding: 0;
}
#releases p a {
	display: block;
	margin: 0;
	padding: 0.125rem 0.25rem;
}
#install-script-exists h3 {
	color: red;
}
#install-script-exists h3::before  {
	content: url("images/warning.svg"); padding-right: 5px;
}
/* end: elements of #sidebar, #bottombar, aside */

/* search results list */
.searchresults {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
.searchresults li > a {
	padding: 0 0 0 1.2em;
}
.searchresults .thread-search {
	background: url(images/thread-change-no.svg) no-repeat left center/0.95em;
}
.searchresults .reply-search {
	background: url(images/clasp-change-no.svg) no-repeat left 0.05em bottom 0.1em/0.95em;
}

/* main menu in admin page */
.adminmenu {
	padding: 0;
	margin: 0.5rem 0;
	list-style-type: none;
}
.adminmenu + .below-adminmenu {
	margin-top: 0.75em;
}
.adminmenu li {
	margin: 0.25rem 0 0 0;
	padding: 0;
}
.adminmenu a {
	display: flex;
	align-items: center;
	padding: 0.125em;
	text-decoration:none;
	border: 1px solid var(--border-light);
	box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
}
.adminmenu a .icon {
	display: inline-block;
	padding:0;
	height: 1.25em;
	width: 1.25em;
	flex: 0 0 1.25em;
	margin: 0.25em;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}
.adminmenu a span:not([class]) {
	flex: 1 1 auto;
}
.adminmenu a[href*='&action=settings'] .icon {
	background-image: url("images/settings-sliders.svg");
}
.adminmenu a[href*='&action=user'] .icon {
	background-image: url("images/users.svg");
}
.adminmenu a[href*='&action=categories'] .icon {
	background-image: url("images/categories.svg");
}
.adminmenu a[href*='&action=smilies'] .icon,
.adminmenu a[href*='&enable_smilies=true'] .icon {
	background-image: url("images/smilies.svg");
}
.adminmenu a[href*='&action=list_uploads'] .icon {
	background-image: url("images/images.svg");
}
.adminmenu a[href*='&action=pages'] .icon {
	background-image: url("images/files.svg");
}
.adminmenu a[href*='&action=spam_protection'] .icon {
	background-image: url("images/shield.svg");
}
.adminmenu a[href*='&action=update'] .icon {
	background-image: url("images/software-update.svg");
}
.adminmenu a[href*='&action=reset_uninstall'] .icon,
.adminmenu a[href*='&action=clear_userdata'] .icon {
	background-image: url("images/marker-cross.svg");
}
.adminmenu a[href*='&action=register'] .icon {
	background: url("images/sign-add.svg") 102% 102% / 60% no-repeat, url("images/user.svg") center / 100% no-repeat;
}
.adminmenu a[href*='&action=reset_tou'] .icon,
.adminmenu a[href*='&action=reset_dps'] .icon {
	background: url("images/pencil.svg") 102% 102% / 60% no-repeat, url("images/file.svg") center / 100% no-repeat;
}
.adminmenu a[href*='&action=email_list'] .icon {
	background-image: url("images/contact-email.svg");
}
.adminmenu a[href*='&disable_smilies=true'] .icon {
	background: url("images/marker-cross.svg") center center / 100% no-repeat, url("images/smilies.svg") center center / 75% no-repeat;
}
.adminmenu a[href*='&action=edit_page'] .icon {
	background: url("images/sign-add.svg") 102% 102% / 60% no-repeat, url("images/file.svg") center / 100% no-repeat;
}
.adminmenu a[href*='?mode=admin&edit_user='] .icon {
	background: url("images/pencil.svg") 102% 102% / 60% no-repeat, url("images/user.svg") center / 100% no-repeat;
}
.adminmenu a[href*='?mode=admin&delete_user='] .icon {
	background: url("images/sign-remove.svg") 102% 102% / 60% no-repeat, url("images/user.svg") center / 100% no-repeat;
}
.adminmenu a[href*='?mode=admin&user_delete_all_entries='] .icon {
	background: url("images/sign-remove.svg") 102% 102% / 60% no-repeat, url("images/preview-bubble.svg") center / 100% no-repeat;
}
.adminmenu a.lock-user .icon {
	background-image: url(images/lock-closed.svg);
}
.adminmenu a.unlock-user .icon {
	background-image: url(images/lock-open.svg);
}

ul.pagination {
	margin: 0.75rem 0;
	padding: 0;
	list-style-type: none;
}
ul.pagination li {
	display:inline;
	margin-left: 0.5em;
}
ul.pagination li:first-child {
	margin-left: 0;
}
ul.pagination a {
	border: 1px solid var(--border-light);
	background: var(--spot-light-plus-10);
	color: var(--spot-dark-minus-5);
	font-weight: bold;
	padding: 0.1em 0.4em;
}
ul.pagination a[href]:focus,
ul.pagination a[href]:hover,
ul.pagination a[href]:active {
	border:1px solid #00c;
	color: #a42424;
	background:#fffcdf;
	text-decoration:none;
}
ul.pagination a:not([href]) {
	color: var(--spot-light-plus-10);
	background: var(--spot-dark-plus-10);
	text-decoration:none;
}

/* page internal search fields */
#searchbox {
	margin: 0 0 0.75em 0;
	margin: 0 0 0.75rem 0;
}
#searchbox label {
	display: block;
}
#searchfield {
	width: 18em;
}

/* table definitions for all cases */
table {
	border-collapse: collapse;
	width: 100%;
}
th,
td {
	vertical-align: top;
}

.settings {
	margin: 0 0 0.25em 0;
}
.settings th {
	background-color: hsl(210, 100%, 92%);
	text-align: start;
}
.settings th strong {
	display: block;
}
.settings th .description {
	font-weight: normal;
	display: block;
	font-size: 0.92em;
}
.settings td {
	background:#f5f5f5;
}
td.cell-subject {
	font-size: 1em;
	border-bottom: 1px solid var(--border-light);
}
.cell-subject a.item,
.cell-subject label {
	font-weight: bold;
}
td a.user-locked {
	color: #e10;
}
.taglist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.taglist li {
	display: inline;
}
/* form elements */

/* give all textareas and inputs (except radios and checkboxes)
  a proper width for narrow vieworts */
textarea,
input[size="40"] {
	width: 100%;
}
input[size="5"] {
	width: 3.5em;
}
input[size="3"] {
	width: 2.5em;
}
.hp {
	display: none;
}

/* entry form */
#postingform fieldset {
	margin: 0 0 1em 0;
}
#postingform label,
#postingform input[type="text"],
#postingform select {
	display: block;
}

/* thread tree: */
.thread  {
	margin: 0 0 0.75em 0;
	margin: 0 0 0.75rem 0;
	padding: 0;
	list-style-type: none;
	max-width: 100%;
}
td .thread  {
	margin: 0;
}
.fold-expand {
	display: inline;
}
.fold-expand img {
	width: 14px;
	height: 14px;
}
.fold-expand img.expand-thread {
	background: url("images/unfold.svg") left 5% / 90% no-repeat;
}
.fold-expand img.fold-thread {
	background: url("images/fold.svg") left 5% / 90% no-repeat;
}
.fold-expand img.expand-thread-inactive {
	background: url("images/no-fold.svg") left 5% / 90% no-repeat;
}
.thread li > a {
	font-weight: bold;
}
ul.reply li a {
	font-weight: normal;
}

ul.reply,
ul.deep-reply,
ul.very-deep-reply {
	margin:0;
	padding: 0 0 0 0.75rem;
	list-style-type:none;
	max-width:100%;
}
ul.reply ul {
	border-left: 4px dotted #bfc1be;
}
ul.reply li:last-child > ul {
	border: none;
}
ul.reply li {
	line-height: 135%;
}

.thread li > a:link {
	color: #00c;
}
.thread li > a:visited,
.thread li > a.read {
	color: #236;
}
.thread li > a:focus,
.thread li > a:hover {
	color: #00f;
	text-decoration: underline;
}
.thread li > a:not([href]) {
	color: #d00;
	text-decoration: none;
	font-weight: bold;
}
.thread li > a.spam {
	color: #d10;
	font-style: italic;
	background-color: #ffff78;
	padding: 0 3px 0 calc(1.2em + 3px);
}
.registered_user {
	color: #048;
}
.admin {
	color: #b20;
}
.mod {
	color: #082;
}

.opening-entry,
.following-entry {
	padding-left: 1.2em;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: 0 center;
}
.opening-entry {
	background-image: url(images/thread-change-no.svg);
}
.opening-entry.sticky {
	background-image: url(images/thread-pinned.svg), url(images/thread-change-no.svg);
}
.opening-entry.locked {
	background-image: url(images/thread-locked.svg), url(images/thread-change-no.svg);
}
.opening-entry.sticky.locked {
	background-image: url(images/thread-locked.svg), url(images/thread-pinned.svg), url(images/thread-change-no.svg);
}
.opening-entry.new {
	background-image: url(images/thread-change-yes.svg);
}
.following-entry {
	background-image: url(images/clasp-change-no.svg);
}
.following-entry.new {
	background-image: url(images/clasp-change-yes.svg);
}
/* end: thread three */

/* postings of a thread in the nested view */
.reply-wrapper {
	margin: 0 0 0 0.5rem;
	padding:0;
}

.thread-posting {
	border: 1px solid var(--border-light);
	border-left-width: 0.5em;
	margin: 0 0 0.5em 0;
	margin: 0 0 0.5rem 0;
	padding: 0;
	min-width: 16em;
	box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
}
.thread-posting.read {
	border-left-color: var(--border-light);
}
.thread-posting.new {
	border-left-color: #fd4;
}

article header {
	overflow: hidden;
	margin: 0;
	padding: 5px;
}
article.thread-posting header {
	background-color: #d0e8ff;
}

header .avatar {
	float: left;
	margin: 0 5px 5px 0;
	width: auto;
	height: 3.5em;
}

article header h2,
article header p {
	margin: 0 0 5px 0;
	padding: 0;
}

article header .category,
.thread a.category,
.cell-category a.category,
.searchresults a.category {
	font-weight: normal;
	font-size: 1em;
	font-size: 1rem;
	padding: 0.125em;
	border: 1px solid var(--border-light);
	background-color: var(--spot-light-plus-10);
}

article header .author {
	color: #888;
	font-size: 0.82em;
	font-size: 0.82rem;
	margin: 0;
}

article header .posting-hp,
article header .posting-location,
article header .posting-time,
article header .posting-ip,
article header .posting-edited,
article header .posting-views,
article header .op-link,
article header .interpunction {
	display: none;
}

article .tags {
	clear: both;
}
article footer .tags {
	margin: 0 0 0.5em 0;
}

article .tags h3,
article .tags ul {
	font-size: 0.82em;
	font-weight: normal;
	margin: 0;
}

article .tags h3,
article .tags ul,
article .tags li {
	display: inline;
	padding: 0 0.15em 0 0;
	padding: 0 0.15rem 0 0;
}

article .tags li:not(:last-child):after {
	content: ", ";
}

article .body {
	margin: 0;
	padding: 5px;
	background: #fff;
	display: flow-root;
}

article .body > *:not(:last-child) {
	margin: 0 0 0.5em 0;
	margin: 0 0 0.5rem 0;
}

article blockquote {
	color: #777;
	font-style: italic;
	border-left: 5px solid var(--border-light);
	padding: 0 0 0 1.25rem;
	margin: 0;
}

.body img {
	max-width: 100%;
	height: auto;
}
.body .thumbnail {
	width: 9em;
	height: auto;
}
.body img.thumbnail.left,
.body img.left {
	float: left;
	margin: 0.25em 0.25em 0.25em 0;
}
.body img.thumbnail.right,
.body img.right {
	float: right;
	margin: 0.25em 0 0.25em 0.25em;
}
#image-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: url(images/canvas_bg.png);
}
#image-canvas img {
	display: block;
	margin: auto;
	max-width: 90vw;
	max-height: 90vw;
	height: auto;
	z-index: 3;
}

.wrapper .signature {
	margin: 0.5em 0 0 0;
	margin: 0.5rem 0 0 0;
	padding: 0 5px 5px 5px;
	color: #808080;
	font-size: 0.82em;
	line-height: 1.4em;
}
.wrapper .signature p:last-child {
	margin: 0;
}

.body pre {
	padding: 0;
	white-space: pre-wrap;
	border: 1px solid var(--border-light);
	background-color: #ffd;
	color: #224;
}
.body pre > code {
	padding: 0.5em;
}
code {
	color: #224;
}
article .tags h3 {
	display: inline-block;
	background: url(images/tags.svg) left center / 0.95em no-repeat;
	padding-left: 1.25em;
}
article footer {
	margin: 0;
	padding: 5px 5px 0 5px;
}

article.thread-posting footer {
	background-color: #f0f0ff;
}

article footer ul.options {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

article footer .options li {
	float: left;
	margin: 0 5px 5px 0;
	padding: 0;
}

article footer .options li a,
article footer .options li > span {
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin: 0;
	padding: 0 0.25em 0 0.125em;
	border: 1px solid var(--border-light);
}
article footer .options li > span {
	border-color: #888;
	color: #888;
	background-color: #f0f0eb;
}
article .options li a .icon,
article .options li > span .icon {
	display: inline-block;
	padding: 0;
	width: 1em;
	height: 1em;
	margin-right: 0.125em;
	flex: 0 0 1em;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: center center;
}
article footer .options li a:link,
article footer .options li a:visited {
	background-color: #f9f9f9;
}
article footer .options li a:focus,
article footer .options li a:hover {
	background-color: #d9efff;
}
article footer .options li a:active {
	background-color: #e9f8ff;
}
article footer a.add-bookmark .icon {
	background: url("images/sign-add.svg") 100% 100% / 57.5% no-repeat, url("images/bookmark.svg") center / 100% no-repeat;
}
article footer a.delete-bookmark .icon {
	background: url("images/sign-remove.svg") 100% 100% / 57.5% no-repeat, url("images/bookmark.svg") center / 100% no-repeat;
}
article footer a.edit .icon {
	background-image: url(images/pencil.svg), url(images/file.svg);
}
article footer a.delete .icon {
	background-image: url(images/marker-cross.svg);
}
article footer a.move .icon {
	background-image: url(images/move-item.svg);
}
article footer a.report .icon {
	background-image: url(images/warning.svg);
}
article footer a.lock .icon,
article footer a.lock-thread .icon,
article footer li .locked .icon {
	background-image: url(images/lock-closed.svg);
}
article footer a.unlock .icon,
article footer a.unlock-thread .icon {
	background-image: url(images/lock-open.svg);
}
/* special rules for thread tree below singe posting view*/
section.thread-tree header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column-reverse;
}
section.thread-tree header h2 {
	margin: 0 0 0.5em 0;
}
section.thread-tree header p {
	margin: 0 0 0.25em 0;
}
/* ajax preview element */
#ajax-preview {
	position: absolute;
	width: 30em;
	max-width: calc(100% - 2px);
	border: 1px solid var(--border-light);
}
#ajax-preview-header {
	background-color: #118;
	text-align: end;
	padding: 0 0.2em;
}
#ajax-preview-content {
	max-height: 18em;
	overflow: auto;
	padding: 0 0.5em 0.5em 0.5em;
	background-color: #fff8aa;
}
/* end: elements of the posting views */

/* login and registration forms */
.hover-layer {
	margin: 1em 0;
	padding: 1em;
}
.hover-layer > :last-child {
	margin-bottom: 0;
}
.hover-layer input[type="text"],
.hover-layer input[type="password"],
.hover-layer input[type="email"] {
	width: 15.5em;
}
.hover-layer input[type="checkbox"] {
	width: 1em;
}
/* end: login and registration forms */

/* elements of admin interface */
.item-tools ul {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
span.tail {
	margin: 0;
	padding: 0;
}
.item-tools li:not(:last-child) {
	margin: 0 0.125em 0 0;
	margin: 0 0.125rem 0 0;
}
.item-tools a,
.item-tools span.replace-tool {
	display: flex;
	align-items: center;
}
.item-tools .icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.125em;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: center center;
}
span.tail a img {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.125em;
}
.item-tools a span:not([class="icon"]),
span.tail a span,
.item-tools span.replace-tool span:not([class="icon"]) {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
span.user-not-locked .icon {
	background: url("images/semitransparence.svg"), url("images/lock-open.svg") 100% 100% / 80% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
span.user-locked .icon {
	background: url("images/semitransparence.svg"), url("images/lock-closed.svg") 100% 100% / 80% no-repeat, url("images/semitransparence.svg") left top / 57.5% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
a.user-not-locked .icon {
	background: url("images/lock-open.svg") 100% 100% / 80% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
a.user-locked .icon {
	background: url("images/lock-closed.svg") 100% 100% / 80% no-repeat, url("images/semitransparence.svg") left top / 57.5% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
span.user-inactive .icon {
	background: url("images/semitransparence.svg"), url("images/file.svg") 100% 100% / 80% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
a.user-profile .icon {
	background: url("images/file.svg") 100% 100% / 80% no-repeat, url("images/user.svg") left top / 57.5% no-repeat;
}
.editor .icon {
	background-image: url(images/pencil.svg), url(images/file.svg);
}
.terminator .icon,
.backup-terminator .icon {
	background-image: url(images/marker-cross.svg);
}
.move-item-up .icon {
	background-image: url(images/arrow-b-up.svg);
}
.move-item-down .icon {
	background-image: url(images/arrow-b-down.svg);
}
.download-backup .icon {
	background: url("images/arrow-b-down.svg") 100% 100% / 75% no-repeat, url("images/floppy-disc.svg") left top / 60% no-repeat;
}
.restore-backup .icon {
	background: url("images/arrow-b-up.svg") 100% 100% / 75% no-repeat, url("images/floppy-disc.svg") left top / 60% no-repeat;
}
.ok, .errormessage {
	padding: 0.25em 0.25em 0.25em 1.5em;
	margin: 1em 0;
}
.ok {
	border: 1px solid #0c4;
	color: #062;
	background: url(images/check-mark.svg) no-repeat 0.2em center / 1em 1em #afd;
}
.errormessage {
	border: 1px solid #f80800;
	color: #620;
	background: url(images/marker-cross.svg) no-repeat 0.2em center / 1em 1em #fda;
}
.ok h2,
.ok h3,
.ok p,
.ok ul,
.errormessage h2,
.errormessage h3,
.errormessage p,
.errormessage ul {
	margin: 0.25em 0;
	margin: 0.25rem 0;
}

/* elements in the user profile edit */
.checkboxlist,
.radio-button-native ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* end: elements of the main block */

/* elements of the footer */
#footer-1,
#footer-2,
#footermenu,
#footermenu li {
	margin: 0;
	padding: 0;
}
#footermenu {
	margin-bottom: 1rem;
	list-style-type: none;
}
#footermenu li {
	display: inline;
	margin-left: 0.25em;
}
#footermenu li:first-child {
	margin-left: 0;
}
.rss,
.contact {
	padding-left: 1.2em;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: 0 center;
}
.rss {
	background-image: url(images/rss-logo.svg);
}
.contact {
	background-image: url(images/contact-email.svg);
}

#pbmlf {
	clear: both;
	margin: 0;
	padding: 0 0 1em 0;
	font-size: 0.69em;
	color: #808080;
}
#pbmlf a {
	color: #808080;
	text-decoration: none;
}
/* end: elements of the footer */



/* buttonbar below the textarea */

#bbcode-options ul,
#bbcode-options table,
#bbcode-options table td,
#bbcode-options table a {
	margin: 0;
	padding: 0;
}
#bbcode-options:not(.js-display-none) {
	display: block;
	position: absolute;
	border: 1px solid var(--border-light);
	max-width: calc(100% - 2rem);
	background: #efefef;
}
#bbcode-options ul {
	list-style-type: none;
}
#bbcode-options ul a {
	color: #000;
	display: block;
	text-decoration: none;
	padding: 3px 5px;
	min-width: 100px;
}
#bbcode-options ul a:hover {
	background: #e0e0e0;
}
#bbcode-options table {
	background:#bbb;
	border:none;
	border-collapse:collapse;
}
#bbcode-options table td {
	width:15px !important;
	height:15px !important;
}
#bbcode-options table a {
	border:1px solid #bbb;
	width:15px;
	height:15px;
}
#bbcode-options table a:hover {
	border:1px solid #fff;
	text-decoration:none;
}

/* end: buttonbar below the textarea */


/* assistance menu*/
#assistancemenu a {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.125em  0.25em 0.125em 0.125em;
}

#assistancemenu a .icon {
	display: inline-block;
	padding: 0;
	height: 1.05em;
	width: 1.05em;
	flex: 0 0 1.15em;
	margin: 0.125em;
	background-repeat: no-repeat;
	background-size: 85%;
	background-position: center center;
}
#assistancemenu a[href="#top"] .icon {
	background-image: url("images/arrow-b-up.svg");
}
#assistancemenu a[href="./"] .icon {
	background-image: url("images/threads-nested.svg");
}

/* JS classes */
.js-display-none         { display: none; }
.js-display-block        { display: block; }
.js-visibility-hidden    { visibility:hidden; }
.js-cursor-pointer       { cursor: pointer; }
.js-cursor-move          { cursor: move; }
.js-display-fold .wrapper,
.js-display-fold #sidebarcontent #latest-postings,
.js-display-fold #sidebarcontent #tagcloud {
	display: none;
}
article.js-display-fold header {
	padding-bottom: 0;
}
.js-display-fold img.avatar {
	width: 1.6em;
	height: 1.6em;
}
.js-display-fold h2 {
	font-size: 1em;
	margin: 0;
}

/* Admin Warning */
div.warning {
	border: 5px solid red;
	padding: 0.75em;
	font-size:1.3em;
}

/* tables in narrow viewports */
@media screen and (width < 48em) {
	/* table definitions */
	table {
		border: none;
		width: 100%;
	}
	thead {
		display: none;
	}
	tbody,
	tr,
	th,
	td {
		display: block;
	}
	tr {
		border: 1px solid var(--border-light);
		margin-bottom: 0.25rem;
		box-shadow: 0.1em 0.1em 0.25em 0.1em #ced;
	}
	tr:last-child {
		margin-bottom: 0;
	}
	th,
	td {
		padding: 0.125em 0.25em;
		padding: 0.125rem 0.25rem;
	}
	.normaltab .subject,
	table.normaltab td.c,
	.settings th {
		border-bottom: 1px dotted var(--border-light);
		background: 
	}
	td[data-header] {
		background-color: #fff;
		font-size: 0.82em;
		line-height: 1.3em;
	}
	td[data-header]::before {
		content: attr(data-header) ': ';
	}
	#main-thread-list tbody .cell-subject {
		background-color: #dfefff;
		border-bottom: 1px solid var(--border-light);
	}
	td.cell-category a.category {
	 font-size: inherit;
	 background-color: transparent;
	 border: none;
	 padding: 0;
	}
}

/* navigation on wider screens */
@media screen and (min-width: 32em) {
	body > header,
	nav#subnav,
	main,
	body > footer {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	#subnav li:not(:first-child),
	#subnav-2 li:not(:first-child) {
		margin-left: 0.25em;
	}
	#subnav a {
		padding: 0 0.25em;
	}
	#subnav a .icon {
		background-size: 0.85em 0.85em;
	}
	#subnav a span:not([class]),
	#subnav a strong {
		flex: 1 1 auto;
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
	#subnav ul li:not(:first-child) a {
		border-left: 1px solid var(--border-light);
	}
	aside section {
		margin: 0.5em 0 0 0;
	}
	.adminmenu li {
		margin: 0.5rem 0 0 0;
	}
	.new-forms {
		border: 1px solid var(--border-light);
		padding: 1em;
	}
	.reply-wrapper {
		margin: 0 0 0 0.75rem;
	}
	article header .posting-hp,
	article header .posting-location,
	article header .posting-time,
	article header .posting-ip,
	article header .posting-edited,
	article header .op-link,
	article header .interpunction {
		display: inline;
	}
	article.js-display-fold h2,
	article.js-display-fold .author {
		display: inline;
	}
	article header .posting-ago,
	.js-display-fold .author *,
	.js-display-fold .tags {
		display: none;
	}
	.js-display-fold .author strong,
	.js-display-fold .author strong * {
		display: inline;
	}
	.hover-layer {
		width: 25em;
		margin: 1rem auto;
		border: 1px solid var(--border-light);
		border-radius: 0.375rem;
	}
	#pbmlf {
		text-align: center;
		padding: 0 20px 1em 20px;
		padding-bottom: 1rem;
	}
	input[size="40"] {
		width: 26em;
		max-width: 100%;
	}
}


@media screen and (min-width: 36em) {
	/* special rules for thread tree below singe posting view*/
	section.thread-tree header {
		flex-direction: row;
	}
	section.thread-tree header p {
		margin: 0 0 0.5em 0;
	}
	.thread-feed {
		text-align: end;
	}
}

@media screen and (min-width: 48em) {
	body > header,
	nav#subnav,
	main,
	body > footer {
		padding-left: 1em;
		padding-right: 1em;
	}
	body > header {
		display: flex;
		justify-content: space-between;
	}
	#bottombar {
		margin-top: 0;
	}
	#admin-menu-container,
	#main-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#main-container {
		flex-direction: row-reverse;
	}
	#admin-menu-container #additional-admin-info,
	#main-container #main-thread-list {
		margin-right: 0.5em;
	}
	#admin-menu-container .adminmenu,
	#main-container #sidebar,
	#main-container #bottombar {
		margin-left: 0.5em;
	}
	#additional-admin-info section:first-child {
		margin-top: 0;
	}
	#additional-admin-info,
	#sidebar, #bottombar {
		flex: 0 0 15em;
	}
	.adminmenu, #main-thread-list {
		flex: 1 1 auto;
	}
	.adminmenu {
		margin: 0;
		display: grid;
		grid-gap: 0.75em;
		grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	}
	.adminmenu li {
		margin: 0;
	}
	.adminmenu a {
		margin: 0;
		padding: 0;
		font-size: 1em;
	}
	.adminmenu a .icon {
		width: 2.25em;
		height: 2.25em;
		flex: 0 0 2.25em;
	}
	aside h2,
	aside section,
	.thread-posting,
	.adminmenu a {
		box-shadow: 0.2em 0.2em 0.4em 0.2em #ced;
	}
	/* table definitions */
	table {
		border: 1px solid var(--border-light);
		box-shadow: 0.2em 0.2em 0.4em 0.2em #ced;
	}
	thead {
		background: #d2ddea;
	}
	tr {
		box-shadow: none;
	}
	tbody tr:nth-child(odd) {
		background:#eee;
	}
	tbody tr:nth-child(even) {
		background:#fff;
	}
	th,
	td {
		border-right: 1px dotted var(--border-light);
	}
	th {
		font-weight: bold;
		text-align: start;
		padding: 0.1rem 0.25rem;
	}
	th span.header-cell {
		display: flex;
		align-content: start;
		align-items: center;
	}
	th .sorting-ui {
		margin-left: 0.25em;
		display: flex;
		align-content: start;
		align-items: center;
	}
	th .sorting-ui a {
		display: inline-block;
		width: 0.9em;
		height: 1.35em;
		border: 1px solid var(--border-light);
		background: #f4f4f4;
	}
	th .sorting-ui a:focus,
	th .sorting-ui a:hover {
		background: #fafac0;
	}
	th .sorting-ui a:first-of-type {
		text-align: end;
		border-top-left-radius: 0.25em;
		border-bottom-left-radius: 0.25em;
	}
	th .sorting-ui a:last-of-type {
		text-align: start;
		border-top-right-radius: 0.25em;
		border-bottom-right-radius: 0.25em;
	}
	th .sorting-ui a img {
		height: 80%;
		width: auto;
	}
	td {
		font-weight: normal;
		padding: 0.25rem;
	}
	td.subject {
		min-width:55%;
	}
	td.cell-subject {
		border-bottom: none;
		background-color: transparent;
	}
	td[data-header] {
		background-color: transparent;
		font-size: 1em;
	}
	td[data-header]::before {
		content: '';
	}
	table td.item-tools {
		width: 6em;
	}
	.hover-layer {
		min-width: 28em;
		width: 64vw;
	}
	.settings th {
		width: 40%;
		max-width: 24em;
	}
}

@media screen and (min-width: 64em) {
	#additional-admin-info,
	#sidebar,
	#bottombar {
		flex: 0 0 17.5em;
	}
}

@media screen and (min-width: 72em) {
	#additional-admin-info,
	#sidebar,
	#bottombar {
		flex: 0 0 20em;
	}
}