/* reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

input:focus,
input:active,
.chosen-container-active .chosen-choices {
	outline: none; /*UA reset*/
}

code:focus-visible {
	outline: none;
}

/* global element setup */
:root {
	--color-content-bg: hsl(42 100% 98%);
	--color-text: #333;
	--color-text-inv: white;
	--c-accent: 30 19%;
	--color-accent: hsl(var(--c-accent) 10%);
	--c-input: 40 67.7%;
	--color-input: hsl(var(--c-input) 95%);
	--c-input-btn: 0 0%;
	--color-input-btn: hsl(var(--c-input-btn) 80%);
	--color-input-g: #9bc45e;
	--color-input-r: #c45e5e;
	--color-input-disabled: hsl(0 0% 85%);
	--color-input-text-disabled:hsl(0, 0%, 43%);
	--color-border: #aaa;
	--color-border-active: #333;
	--color-link: #3d6594;
	--color-link-active: #608CBE;
	--c-mod-bg: 0 0% 100%;
	--color-mod-bg: hsl(var(--c-mod-bg));
	--color-highlight: hsl(45, 51%, 54%);

	--color-flair-author: #535c88;
	--color-flair-moderator: #2a6b6f;
	--color-flair-admin: #0e7239;
}

html {
	overflow: hidden; /* move scroll to body */
}

body {
	background-color: #80786e; /* @cleanup */
	background-image: url(https://account.vintagestory.at/public/images/background.jpg);
	background-attachment: fixed;
	background-size: cover;

	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.2;
	text-rendering: optimizeSpeed;

	max-width: 100vw;
	max-height: 100vh;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

blockquote {
	border: solid 1px #CCC; /* @cleanup */
	padding-left: .5em;
	border-left-width: .5em;
	background: rgba(255,255,255,0.25); /* @cleanup */
	font-style: italic;
}

p:not(:last-child) {
	margin-bottom: .5em;
}

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
	margin-top: 1.5em;
}

a { color: var(--color-link); }
a:hover { color: var(--color-link-active); }

/*a[href^="http"]::before */ /* @cleanup needs font or svg image to sue currentcolor */
a.external::before {
	content: '';
	display: inline-block;
	height: 1.1em;
	width: 1.1em;
	vertical-align: sub;
	margin-right: .5ch;

	background-size: contain;
	background-repeat: round;
	background-image: url(/web/img/externallink.png);
}

a[href*="github.com"].external::before  { background-image: url(/web/img/logo-github.svg); }
a[href*="gitlab.com"].external::before  { background-image: url(/web/img/logo-gitlab.svg); }
a[href*="patreon.com"].external::before { background-image: url(/web/img/logo-patreon-b.png); }
a[href*="ko-fi.com"].external::before   { background-image: url(/web/img/logo-kofi-c.svg); }
a[href*="discord.gg"].external::before,
a[href*="discord.com"].external::before { background-image: url(/web/img/logo-discord.svg); }

ul.no-mark, ol.no-mark {
	list-style: none;
}

li {
	margin-left: 1em;
}

ul.no-mark>li, ol.no-mark>li {
	margin-left: unset;
}

small {
	display: inline-block;
	font-size: .8em;
}

pre {
	overflow-x: auto;
}

code {
	word-wrap: break-word;
	font-family: 'Courier New', Courier, monospace;
}

/* generic classes */
.whitetext { color: var(--color-text-inv); }

.flex-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.flex-spacer {
	flex-grow: 1;
	min-width: 0 !important;
	visibility: hidden;
}

.flex-fill {
	flex-basis: 100%;
}

.template { display: none !important; } /* @cleanup replace with actual templates*/

@media (max-width: 450px) {
	.not-mobile { display: none; }
}

/* generic labeling */

[data-label] {
	display: inline-block;
	position: relative;
	margin-top: 1.5rem;
}
[data-label]::before {
	content: attr(data-label);
	position: absolute;
	left: 0;
	top: -1.25rem;
	white-space: nowrap;
}

/* generic ribbon */

.ribbon-tr {
	--d: 1.5em;

	position: absolute;
	top: 0;
	left: 100%;

	transform-origin: top center;
	transform: translateX(-50%) rotate(45deg) translateY(var(--d));

	width: 150%; /*close enough to 100% * sqrt(2)*/
	text-align: center;
	padding: .25em 0;
}

.ribbon-tr.d2 {
	--d: 3.5em;
}

/* generic highlight */

@keyframes highlight {
	30% { background-color: var(--color-highlight); }
}

.highlight {
	animation: 2s alternate ease-out highlight;
}


/* header */
.logo {
	display: block;
	height: 60px;
}

.logo img {
	width: 280px;
	padding-top: 2px;
	padding-left: 5px;
}

/* menu */
#main-nav {
	font-size: 125%;
	width: 100%;
	background: var(--color-accent);
	background: linear-gradient(0deg, rgba(104, 80, 55, 0.65) 0%, rgba(179, 154, 121, 0.65) 100%); /* @cleanup */
	color: var(--color-text-inv);

	border-top-left-radius: .25em;
	border-top-right-radius: .25em;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .125em .5em;

	user-select: none;
}

#main-nav>* {
	min-width: 10ch;
	flex-shrink: 0;
	background-color: rgba(255, 255, 255, 0.2); /* @cleanup */
	color: var(--color-text-inv);
	text-align: center;
	white-space: nowrap;
	padding: .125em .5em;
}

#main-nav>.flex-spacer {
	padding: 0;
	margin: 0 -.5em;
}

#main-nav>.icon-only {
	min-width: 0;
}
#main-nav>.icon-only i {
	font-size: 22px;
	width: 22px; /*prevent layout flash */
	vertical-align: middle;
}

#main-nav>.active {
	background-color: var(--color-content-bg);
	color: var(--color-text);
}

#main-nav>:first-child { border-top-left-radius: .25em; }
#main-nav>:last-child { border-top-right-radius: .25em; }

#main-nav>:not(.active):hover {
	background-color: rgba(255, 255, 255, 0.4);
}

#main-nav a {
	display: block;
	text-decoration: none;
	color: currentColor;
}

#main-nav img {
	height: .8em;
	width: .8em;
	margin-right: .25em;
}

#main-nav>.active img {
	/* @cleanup quick recolor hack, its an image; cannot use currentcolor */
	filter: invert(80%);
}
#main-nav a.external::before {
	/* @cleanup quick recolor hack, its an image; cannot use currentcolor */
	filter: invert();
}

@media (max-width: 767px)  {
	#main-nav {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	#main-nav>* {
		flex-grow: 1;
	}
	#main-nav>.flex-spacer {
		display: none;
	}

	#main-nav>:first-child { border-top-left-radius: 0; }
	#main-nav>:last-child { border-top-right-radius: 0; }
}

/* submenus */

#main-nav>.submenu {
	position: relative;
	padding: 0;
}
.submenu>:first-child {
	padding: .125em .5em;
	vertical-align: middle;
}
.submenu>nav {
	position: absolute;
	z-index: 9999;
	background-color: hsla(var(--c-accent) 33% / 0.9);
	color: var(--color-text-inv);
	left: 0;
	display: none;
}

.submenu:hover>nav, .submenu:focus-within>nav, .submenu:active>nav { /* focus / active + tabindex for mobile*/
	display: block;
}


.submenu.notifications>nav {
	min-width: 400px;
	font-size: 75%;
	left: unset;
	right: 0px;
}

.submenu>nav>* {
	text-align: initial;
	padding: .5em 1em;
}

.submenu>nav>*:hover {
	background-color: rgba(255, 255, 255, 0.2); /* @cleanup */
}

/* mod boxes */


.mods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-template-rows: auto;
	gap: 1em;
	justify-content: start;
}

@media (max-width: 450px) {
	.mods {
		grid-template-columns: 100%;
	}
}

.mods>h3 {
	grid-column: 1/-1;
}

.mod {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;

	background-color: hsl(var(--c-mod-bg));
	border-radius: .25rem;
	border: 1px solid white;
	box-shadow: 1px 1px 4px var(--color-border);
}

.mod.draft {
	border: 1.5px dashed gray;
}

.mods .mod:only-child {
	max-width: 300px;	
}

.mod a {
	color: var(--color-text);
	text-decoration: none;
}

.mod>a>img  {
	width: 100%;
	border-radius: .25rem .25rem 0 0;
}
.mod.legacy>a>img{ /* :LegacyModLogos */
	height: calc(2/3 * 100%);
	object-fit: contain;
}


.mod .moddesc {
	position: absolute;
	top: calc(2/3 * 100%);
	bottom: 0;
	width: 100%;
	padding: .25em;
	background-color: white; /* fallback */
	background-color: hsla(var(--c-mod-bg) / .8);
	text-shadow: 1px white;
}
body.opaque-desc .mod .moddesc {
	background-color: white;
}

.mod .stats {
	float: right;
}


.mod .stats a {
	vertical-align: middle;
	padding: 0px 2px;
}

.mod .stats a:hover {
	background: var(--color-input);
}

.mod .stats img {
	height: 16px;
	vertical-align: middle;
	margin-right: 3px;
}



/* messages (top of the screen) */

#message-container {
	background-color: var(--color-content-bg);
	display: flex;
	flex-direction: column;
	gap: .5em;
}
#message-container:not(:empty) { /* be careful to not get any whitespace into the node so this works */
	position: sticky;
  top: 0;
  z-index: 99;

	padding: .5em;
	border-bottom: solid 1px var(--color-border);
}
#message-container>* {
	position: relative;
	padding: .5em 1em;
	border: solid 1px var(--color-border);
	border-radius: .25em;
}

#message-container>*:not(.permanent)::before {
	content: '\2716';
	position: absolute;
	left: .25em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 200%;
}
#message-container>*.bg-success:not(.permanent)::before {
	content: '\2713';
}

#message-container>*:not(.permanent) {
	padding-left: 3em;
	animation: .5s bounce;
}

@keyframes bounce {
	50% { transform: translateY(-.25em) }
	100% { transform: translateY(0) }
}

#message-container>*>.dismiss {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: .25em;
	padding: 0 .25em;
	cursor: pointer;
}
#message-container>*>.dismiss::before {
	font-size: 150%;
	content: '\2716';
}

/* from here on: TODO @cleanup */


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

.interactbox .off, .interactbox .on {
	text-decoration: underline;
}

.interactbox i {
	padding-right: 5px;
}

.interactbox .count {
	background: rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 3px;
}

.interactbox.off .on { display: none; }
.interactbox.on .off { display: none; }

.followed-star {
	position: absolute;
	top: 0;
	right: 0;
	width: 1em;
	color: #5189ca;
	text-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
}

.notificationcount.visible {
	display: inline-block;
}

.notificationcount {
	display: none;
	position: absolute;
	top: -5px;
	font-size: 13px;
	color: #fff;
	text-indent: 0%;
	line-height: 18px;
	padding: 0 6px;
	border-radius: 8px;
	z-index: 2;
	font-weight: bold;
	background: #91A357;
	right: -1px;
}



.comment:target {
	background-color: #DDE5CB;
	border-color: #abb29c;
}




.content {
	margin: 1em 1em 0 1em;
}

.content, footer {
	margin-left: 1em;
	margin-right: calc(1em - (100vw - 100%)); /* remove scrollbar */
}

.padded {
	padding: 1em;
}

.innercontent {
	position: relative;
	background-color: var(--color-content-bg);
	--content-min-h: 100vh - 80px - 6em;
	min-height: calc(var(--content-min-h));
}

.mod-draft, .mod-locked {
	position: relative;
}

.edit-asset.mods {
	position: relative;
}


.showmod-draftnotice {
	position: absolute;
	right: 0;
	top: 0;
	padding: .25em 1.5em;
	text-align: right;
}



.imageslideshow {
	float: left;
	max-width: min(800px, 100%);
	margin-right: 20px;
}

.fotorama__stage {
	background: rgba(166, 159, 125, 0.3);
	border-radius: 0px;
}



.infobox {
	float: left;

	line-height: 25px;
}

.infobox.nomedia {
	height: auto;
}


.stdtable {
	border: 1px solid gray;
	border-collapse: collapse;
}

.stdtable thead th {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 4px;
}

.stdtable > a {
	display: block;
	color: black;
	text-decoration: none;
}

.stdtable th, .stdtable td:not(.collapsable) {
	border: 1px solid gray;
	padding:2px;
}

.stdtable tbody tr:nth-child(odd) { background-color: rgba(230, 223, 208, 0.9); }
.stdtable tbody tr:nth-child(even) { background-color: rgba(255, 248, 234, 0.9); }
.stdtable tbody tr:hover { background-color:#ddd; }

.stdtable tr.latest td {
	font-weight:bold;
}

.bg-error   { background-color: #F6D2CA; }
.bg-success { background-color: #E1F6CA; }
.bg-warning { background-color: #F6F1CA; }


.text-warning { color: #D1C13B; }
.text-error   { color: #9b0906; }
.text-success { color: #468847; }
.text-info    { color: #3A87AD; }

.text-weak { opacity: 0.7; }

/******** Tabs *******/

/* The idea is to have a bunch of labels that set radio inputs next to tab-content elements that will get un-hidden when selected. No js needed. */

ul.tabs {
	width: 100%;
	border-bottom: 2px solid #888;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

ul.tabs>li, ul.tabs>li>* {
	height: 2em;
	line-height: 2em;
	user-select: none;
}

ul.tabs>li {
	border: 1px solid var(--color-border);
	border-bottom: none;
	box-sizing: content-box;
	background-color: var(--color-input-btn);
	flex-grow: 1;
}

@media (min-width: 768px)  {
	ul.tabs>li {
		flex-grow: unset;
	}
}

ul.tabs>li:not(.active):hover {
	background-color: hsl(var(--c-input-btn) 95%);
}

ul.tabs>li>* {
	cursor: pointer;
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 0 1em;
	border: 1px solid #fff;
	border-bottom: none;
	outline: none;
}

ul.tabs>li>* img {
	vertical-align: sub;
}

.mod-draft .tabs,
.mod-locked .tabs {
	border-bottom-style: dashed;
}

.tab-trigger {
	display: none;
}

.tab-content {
	padding: 1em 0;
	display: none;
}

.tab-trigger:checked + .tab-content {
	display: unset;
}

/* hardcoded so we can put the further out and highlight the buttons aswell */
.tab-trigger#tab-description:checked ~ .tab-container>.tab-content.description { display: unset; }
.tab-trigger#tab-description:checked ~ .tabs>li:first-child { background-color: hsl(var(--c-input-btn) 90%); }
.tab-trigger#tab-files:checked ~ .tab-container>.tab-content.files { display: unset; }
.tab-trigger#tab-files:checked ~ .tabs>li:nth-child(2) { background-color: hsl(var(--c-input-btn) 90%); }

td {
	position: relative;
}

h2 .title {
	display:inline-block;
	padding:2px;
}

/* uniform styling for mixed chosen and normal inputs */

input:focus,
.chosen-container-active .chosen-choices {
	border-color: var(--color-border-active);
}

input:not(.chosen-search-input, [type="checkbox"]),
button, select,
.chosen-container,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices,
.chosen-container-single .chosen-single span,
.prefixed-input {
	height: 1.75rem;
	vertical-align: bottom;
}

.chosen-container-multi,
.chosen-container-multi .chosen-choices,
.prefixed-input {
	height: unset;
	min-height: 1.75rem;
}

input, select, textarea,
.chosen-container-single .chosen-single,
.prefixed-input {
	border-radius: 0;
	background-color: var(--color-input);
	border: 1px solid var(--color-border);
}

input, button,
.prefixed-input {
	padding: 0 .25em;
}

input:disabled,
button:disabled,
.prefixed-input.disabled {
	background-color: var(--color-input-disabled);
}

/* TODO(Rennorb) @cleanup: use buttons as buttons... */
button[type="submit"],
input[type="submit"],
.button {
	display: inline-block;
	text-align: center;
	color: var(--color-text);
	background-color: var(--color-input-btn);
	border: none;
	padding: .25em .75em;
	cursor: pointer;
	text-decoration: none;
	border-radius: .25em;
	box-shadow: 0px 2px 3px #0008;
	user-select: none;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover {
	color: var(--color-text);
	background-color: hsl(var(--c-input-btn) 87%);
}
.button.submit:hover, .button.btndelete:hover {
	color: var(--color-text-inv);
}

button[type="submit"]:active,
input[type="submit"]:active,
.button:active {
	color: var(--color-text);
	background-color: hsl(var(--c-input-btn) 90%);
}


.prefixed-input {
	display: inline-block;
	white-space: nowrap;
	height: 1.75rem;
}
.prefixed-input:focus-within {
	border-color: var(--color-border-active);
}
.prefixed-input::before {
	content: attr(data-prefix);
	display: inline-block;
}
.prefixed-input::before,
.prefixed-input input {
	font-size: initial;
	vertical-align: baseline;
	background-color: transparent;
}
.prefixed-input input {
	padding: 0;
	border: none;
	height: calc(1.75em - 1px);
}

input:disabled,
.prefixed-input.disabled {
	color: var(--color-input-text-disabled);
}


.button.large {
	font-weight: bold;
	padding: .5em 0;
	min-width: 150px;
}

.button.submit    { background-color: var(--color-input-g); }
.button.btndelete { background-color: var(--color-input-r); }

.shine {
	position: relative;
}
.shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.0) 100%);

	height: 17px;
	width: 100%;
	box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	border-bottom-right-radius: 100px 40px;
	border-bottom-left-radius: 100px 40px;
}

#buttons-overlay {
	position: absolute;
	top: 1em;
	right: 1em;
	display: flex;
	flex-direction: column;
	gap: .5em;
	z-index: 999;
}

.button.square {
	font-size: 120%;
	border-radius: 0;
	box-shadow: 1px 1px 3px #aaa;
}

.button.ico-button {
	position: relative;
	padding-left: calc(2em + .5ch);
}
.button.ico-button::before {
	content: '';
	position: absolute;
	left: 0.75em;
	top: 0;
	height: 100%;
	width: 1.2em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.button.mod-dl {
	background-color: hsl(217 45% 51%);
	color: white;
}
.button.mod-dl:hover {
	background-color: hsl(217 45% 54%);
}

.button.mod-dl::before {
	vertical-align: sub;
	background-image: url(/web/img/download-w.png);
}

.button.one-click-dl::before {
	vertical-align: text-top;
	background-image: url(/web/favicon/favicon-32x32.png);
}

.chosen-container-single .chosen-single {
	background: linear-gradient(hsla(var(--c-input) 95%) 20%, hsla(var(--c-input) 98%) 50%, hsla(var(--c-input) 95%) 52%, hsla(var(--c-input) 97%) 100%);
}

.chosen-container-multi .chosen-choices {
  background: var(--color-input);
  cursor: text;
}

.chosen-container-multi .search-field {
	width: 60px; /* weird */
}


label.toggle {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 3rem;
	height: 1.75rem;
	background-color: var(--color-input);
	border: solid 1px var(--color-border);
	border-radius: .25em;
	cursor: pointer;
	user-select: none;
}

label.toggle>input[type="checkbox"] {
	appearance: none;
	position: absolute;
	left: 2px;
	top: 2px;
	height: calc(1.75rem - 6px);
	width: calc(1.75rem - 6px);
	border-radius: .25em;
	cursor: pointer;

	transform: translateX(0);
	background-color: var(--color-input);
	transition: transform .3s, background-color .3s;
}
label.toggle>input[type="checkbox"]:checked {
	transform: translateX(calc(1.25rem - 2px));
	background-color: var(--color-input-g);
}


.button.moderator,
button.moderator {
	padding-top: 1.25em;
	padding-bottom: .5em;
	position: relative;
}
.button.moderator::before,
button.moderator::before {
	content: 'Moderator Action';
	white-space: pre;
	background-color: var(--color-flair-moderator);
	color: var(--color-text-inv);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 0 0 .25em .25em;
	padding: 0 .25em;
}

/* button row on the bottom */

.with-buttons-bottom {
	display: flex;
	flex-direction: column;
}

.with-buttons-bottom>.buttons {
	position: sticky;
	z-index: 99;
	bottom: 0;

	display: flex;
	gap: 1em;
	justify-content: space-between;
	flex-wrap: wrap;

	margin-top: 1em;
	padding: 1em;
	border-top: solid 1px var(--color-border);
	background-color: var(--color-content-bg);
}

.with-buttons-bottom>.buttons>* {
	min-height: 3em;
	align-content: center;
}

/* spoiler toggles TODO(Rennorb): @cleanup */

.spoiler-toggle:not(.expanded) ~ * {
	display: none;
}

.spoiler.crash-report .spoiler-toggle ~ * {
	font-family: 'Courier New', Courier, monospace;
}
.spoiler.crash-report .spoiler-toggle.expanded ~ * {
	display: block;
	padding: .25em;
	overflow-x: auto;
}

/* uniform styling of editboxes */

.editbox {
	background-color: hsl(var(--c-accent) 86%);
	padding: .25rem;
	border: 1px solid hsl(var(--c-accent) 58%);
	border-radius: 2px;
	
	width: calc(15ch * 2 + .5em); /*2 small + gap*/
}

.editbox.short { width: 15ch; }
.editbox.wide { width: 45ch; }
.editbox.file-upload { width: 46ch; }

.editbox.mandatory {
	color: #790202;
	background-color: #E9D9D7;
}

.editbox label {
	display: block;
	margin-bottom: .25em;
}

.editbox input,
.editbox select {
	width: 100%;
}

@media (max-width: 450px) {
	.editbox, .editbox.wide, .editbox.short, .editbox.file-upload {
		width: 100%;
	}
}


/* file box */

.file {
	min-width: calc(15ch * 2 + .5em);;
	position: relative;

	background-color: hsl(var(--c-accent) 86%);
  padding: .25rem;
	padding-right: 2em;
  border: 1px solid hsl(var(--c-accent) 58%);
}

.file>a {
	text-decoration: none;
	display: flex;
	flex-direction: row;
	gap: .5em;
}
.file>a>div:nth-of-type(2) {
	flex-grow: 1;
}

.file img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}
.file .fi {
	height: 50px;
}

.file small {
	display: block;
	font-size: x-small;
}

.file .delete,
.file .download {
	position: absolute;
	z-index: 5;
	right: .25em;

	/* @cleanup */
	width: 1em; height: 1em;
	line-height: .75em;
  padding: 0 .125em;
}

.file .delete {
	bottom: .25em;
}

.file .download {
	font-weight: bold;
	top: .25em;
}

/* release changelogs (animated collapse wrapper) */

.collapsable>input {
	display: none;
	overflow-y: hidden;
}

.collapsable>div {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s ease-out;
}

.collapsable>input:checked + div {
	grid-template-rows: 1fr;
}

.collapsable>div>* {
	overflow-y: hidden;
}

.release-changelog {
	padding: .25em;
}

@media (max-width: 767px) { /* @perf */
	.collapsable.cl-changelog {
		position: absolute;
		z-index: 99;
		background-color: var(--color-content-bg);
		margin: 0 -.5em;
		max-width: calc(100vw - 3em);
	}
}



.release-table {
	min-width: 900px;
}

/* download count */
.release-table.gv tr>td:nth-child(3),
.release-table.no-gv tr>td:nth-child(2) { text-align: right; }
/* release date */
.release-table.gv tr>td:nth-child(4),
.release-table.no-gv tr>td:nth-child(3) { text-wrap: nowrap; }
/* changelog button */
.release-table.gv tr>td:nth-child(5),
.release-table.no-gv tr>td:nth-child(4) { text-align: center; }

.release-table tr:not(.collapsable)>td:nth-last-child(n+4) {
	padding-left: .25em;
	padding-right: .25em;
}

.release-table.gv tr>td:nth-child(n+5)>*,
.release-table.no-gv tr>td:nth-child(n+4)>* {
	width: 100%;
}

/* from here on: todo @cleanup */

.ck.ck-editor {
	width: 100%;
}

.ck.ck-content.ck-editor__editable {
	min-height: 100px;
}


.buttonlinks.template {
	display: none;
}
.buttonlinks {
	display: inline-block;
}

.comments .comment {
	margin-bottom: .5em;
}

.comment {
	width: 100%;
	word-break: break-word;
}

.comment .title {
	min-height: 20px;
	padding: 4px;
}
.comment .body {
	padding: 4px;
	background-color: rgba(255,255,255,0.4);
}

.comment .body img, table.latestcomments img  {
	position: static; /* fix for images copy pasted with hiding classes */
	opacity: initial; /* fix for images copy pasted with hiding classes */
	max-width: 100%;
}


p:first-child {
	margin-top: 0px;
}
p:last-child {
	margin-bottom: 0px;
}

.editbox.comment {
	position: relative; /* fix for escaping elements covering other parts of the site */
	overflow: hidden;
	padding: 0px;
	background: rgba(219, 208, 182, 0.7);
}

.comment.deleted {
	background: rgb(228, 131, 131);
}

.comment.deleted .ribbon-tr {
	background-color: rgb(184, 37, 37);
	color: var(--color-text-inv);
}

/* sticky top bar on tiny */
.tox-tinymce, .tox-editor-container {
	overflow: visible !important;
}
.tox .tox-menubar, .tox .tox-toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
}
.tox .tox-toolbar {
	top: 39px;
	border-bottom: 1px solid #ccc;
}


.tox .tox-edit-area__iframe {
	background-color: var(--color-input) !important;
}
.tox .tox-statusbar {
	background-color: var(--color-content-bg) !important;
}
.tox .tox-menubar, .tox .tox-toolbar {
	background: left 0 top 0 var(--color-content-bg) !important;
}



a.add {
	text-decoration: none;
	border: 2px solid #A19487;
	border-radius: 3px;
	padding: 3px 0px 0px 3px;
	font-size: 30px;
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align:middle;

	background-color:#E4E0DC;
	background: radial-gradient(ellipse at center, #E4E0DC 0%,#E4E0DC 54%,#90A2B8 100%);
}

a.edit:before {
	content: "edit";
}

a.delete, a.download {
	text-decoration: none;
	border: 2px solid #A19487;
	border-radius: 3px;
	padding: 0px 1px 5px 5px;
	font-size: 24px;
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	color: #B94A48;
	background-color:#E4E0DC;
	background: radial-gradient(ellipse at center, #E4E0DC 0%,#E4E0DC 54%,#CD9696 100%);
}

a.delete:before {
	content: "x";
}


a.add:hover, a.delete:hover, a.download:hover {
	border-color: #BBB1A7;
	background-color: #F8F6F4;
}


a.add:before {
	content: "+";
}

.edit-asset h2:first-child {
	margin-bottom: 1em;
}

.edit-asset h3 {
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
	margin-top: 40px;
	font-size: 120%;
	line-height: 19px;
}

.edit-asset a.add {
	position: relative;
	top: -14px;
	float: right;
}



.tags {
	margin-top: 3px;
	margin-bottom: 3px;
}

.tag {
	padding: 1px 3px;
	border-radius: 3px;
	text-decoration: none;
	color: #333;
	background-color: #ccc;
	border: 1px solid gray;
	display: inline-block;
	font-size: 90%;
	line-height: 13px;
}


.tag:hover {
	color: #333;
	opacity: 0.5;
}


footer {
	margin-top: 1em;
	margin-bottom: 1em;
}
footer>ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;
	padding: .5em;
	background: hsla(0, 0%, 100%, 0.6);
}



/*!
 * CSS file icons v0.0.5 (https://colorswall.github.io/CSS-file-icons)
 * Copyright 2018 The CSS file icons Authors
 * Licensed under MIT
 */
.fi{width:36px;height:46px;padding:10px 0 0;position:relative;margin:0 auto;transition:all .2s ease-in-out;cursor:pointer;box-sizing:border-box;font-family:sans-serif;text-decoration:none;display:block}
.fi:after,.fi:before{position:absolute;content:"";pointer-events:none}
.fi:before{top:0;height:100%;left:0;background-color:#007bff;right:10px}
.fi:after{width:0;height:0;border-style:solid;border-width:10px 0 0 10px;border-color:transparent transparent transparent #66b0ff;top:0;right:0}
.fi-content{background-color:#007bff;top:10px;color:#fff;left:0;bottom:0;right:0;padding:16.5px .3em 0;font-size:13px;font-weight:500;position:absolute}
.fi-doc.fi:before{background-color:#235d9c}
.fi-doc.fi:after{border-left-color:#317dd1}
.fi-doc.fi .fi-content{background-color:#235d9c;color:#fff}
.fi-docx.fi:before{background-color:#2980b9}
.fi-docx.fi:after{border-left-color:#4da1d8}
.fi-docx.fi .fi-content{background-color:#2980b9;color:#fff}
.fi-log.fi:before{background-color:#accff3}
.fi-log.fi:after{border-left-color:#e6f0fb}
.fi-log.fi .fi-content{background-color:#accff3;color:#fff}
.fi-txt.fi:before{background-color:#8bc6d6}
.fi-txt.fi:after{border-left-color:#bcdee7}
.fi-txt.fi .fi-content{background-color:#8bc6d6;color:#fff}
.fi-wps.fi:before{background-color:#297eff}
.fi-wps.fi:after{border-left-color:#6ba6ff}
.fi-wps.fi .fi-content{background-color:#297eff;color:#fff}
.fi-csv.fi:before{background-color:#579704}
.fi-csv.fi:after{border-left-color:#7cd806}
.fi-csv.fi .fi-content{background-color:#579704;color:#fff}
.fi-dat.fi:before{background-color:#0463ea}
.fi-dat.fi:after{border-left-color:#3587fc}
.fi-dat.fi .fi-content{background-color:#0463ea;color:#fff}
.fi-ppt.fi:before{background-color:#ce4123}
.fi-ppt.fi:after{border-left-color:#e26b52}
.fi-ppt.fi .fi-content{background-color:#ce4123;color:#fff}
.fi-xml.fi:before{background-color:#0e886b}
.fi-xml.fi:after{border-left-color:#14c49a}
.fi-xml.fi .fi-content{background-color:#0e886b;color:#fff}
.fi-mp3.fi:before{background-color:#156aea}
.fi-mp3.fi:after{border-left-color:#5291ef}
.fi-mp3.fi .fi-content{background-color:#156aea;color:#fff}
.fi-wav.fi:before{background-color:#36af14}
.fi-wav.fi:after{border-left-color:#4be520}
.fi-wav.fi .fi-content{background-color:#36af14;color:#fff}
.fi-avi.fi:before{background-color:#40c1e6}
.fi-avi.fi:after{border-left-color:#7bd4ee}
.fi-avi.fi .fi-content{background-color:#40c1e6;color:#fff}
.fi-mov.fi:before{background-color:#ff5838}
.fi-mov.fi:after{border-left-color:#ff907a}
.fi-mov.fi .fi-content{background-color:#ff5838;color:#fff}
.fi-mp4.fi:before{background-color:#4163b4}
.fi-mp4.fi:after{border-left-color:#6d89ca}
.fi-mp4.fi .fi-content{background-color:#4163b4;color:#fff}
.fi-3ds.fi:before{background-color:#015051}
.fi-3ds.fi:after{border-left-color:#029192}
.fi-3ds.fi .fi-content{background-color:#015051;color:#fff}
.fi-max.fi:before{background-color:#02b4b6}
.fi-max.fi:after{border-left-color:#03f4f7}
.fi-max.fi .fi-content{background-color:#02b4b6;color:#fff}
.fi-gif.fi:before{background-color:#aaa}
.fi-gif.fi:after{border-left-color:#cbcbcb}
.fi-gif.fi .fi-content{background-color:#aaa;color:#fff}
.fi-ai.fi:before{background-color:#f67503}
.fi-ai.fi:after{border-left-color:#fd983f}
.fi-ai.fi .fi-content{background-color:#f67503;color:#fff}
.fi-svg.fi:before{background-color:#e6a420}
.fi-svg.fi:after{border-left-color:#edbc5c}
.fi-svg.fi .fi-content{background-color:#e6a420;color:#fff}
.fi-pdf.fi:before{background-color:#f88e21}
.fi-pdf.fi:after{border-left-color:#faaf61}
.fi-pdf.fi .fi-content{background-color:#f88e21;color:#fff}
.fi-xls.fi:before{background-color:#86d44c}
.fi-xls.fi:after{border-left-color:#aae181}
.fi-xls.fi .fi-content{background-color:#86d44c;color:#fff}
.fi-xlsx.fi:before{background-color:#6cbf2e}
.fi-xlsx.fi:after{border-left-color:#8ed758}
.fi-xlsx.fi .fi-content{background-color:#6cbf2e;color:#fff}
.fi-sql.fi:before{background-color:#157efb}
.fi-sql.fi:after{border-left-color:#56a2fc}
.fi-sql.fi .fi-content{background-color:#157efb;color:#fff}
.fi-exe.fi:before{background-color:#0e63ab}
.fi-exe.fi:after{border-left-color:#1386e8}
.fi-exe.fi .fi-content{background-color:#0e63ab;color:#fff}
.fi-js.fi:before{background-color:#f0db4f}
.fi-js.fi:after{border-left-color:#f5e78c}
.fi-js.fi .fi-content{background-color:#f0db4f;color:#323330}
.fi-html.fi:before{background-color:#e54c21}
.fi-html.fi:after{border-left-color:#ec7c5c}
.fi-html.fi .fi-content{background-color:#e54c21;color:#fff}
.fi-xhtml.fi:before{background-color:#55a9ef}
.fi-xhtml.fi:after{border-left-color:#92c8f5}
.fi-xhtml.fi .fi-content{background-color:#55a9ef;color:#fff}
.fi-css.fi:before{background-color:#264de4}
.fi-css.fi:after{border-left-color:#617deb}
.fi-css.fi .fi-content{background-color:#264de4;color:#fff}
.fi-asp.fi:before{background-color:#5c2d91}
.fi-asp.fi:after{border-left-color:#7c3dc3}
.fi-asp.fi .fi-content{background-color:#5c2d91;color:#fff}
.fi-ttf.fi:before{background-color:#14444b}
.fi-ttf.fi:after{border-left-color:#22737f}
.fi-ttf.fi .fi-content{background-color:#14444b;color:#fff}
.fi-dll.fi:before{background-color:#960a4a}
.fi-dll.fi:after{border-left-color:#d40e69}
.fi-dll.fi .fi-content{background-color:#960a4a;color:#fff}
.fi-7z.fi:before{background-color:#f63}
.fi-7z.fi:after{border-left-color:#ff9875}
.fi-7z.fi .fi-content{background-color:#f63;color:#fff}
.fi-zip.fi:before{background-color:#ffb229}
.fi-zip.fi:after{border-left-color:#ffca6b}
.fi-zip.fi .fi-content{background-color:#ffb229;color:#fff}
.fi-c.fi:before{background-color:#3747a5}
.fi-c.fi:after{border-left-color:#5767c7}
.fi-c.fi .fi-content{background-color:#3747a5;color:#fff}
.fi-cs.fi:before{background-color:#013467}
.fi-cs.fi:after{border-left-color:#0255a9}
.fi-cs.fi .fi-content{background-color:#013467;color:#fff}
.fi-java.fi:before{background-color:#ea2c2e}
.fi-java.fi:after{border-left-color:#f0686a}
.fi-java.fi .fi-content{background-color:#ea2c2e;color:#fff}
.fi-jsp.fi:before{background-color:#e5000c}
.fi-jsp.fi:after{border-left-color:#ff2834}
.fi-jsp.fi .fi-content{background-color:#e5000c;color:#161419}
.fi-swift.fi:before{background-color:#f32a20}
.fi-swift.fi:after{border-left-color:#f6665f}
.fi-swift.fi .fi-content{background-color:#f32a20;color:#fff}
.fi-torrent.fi:before{background-color:#55ac44}
.fi-torrent.fi:after{border-left-color:#7bc56d}
.fi-torrent.fi .fi-content{background-color:#55ac44;color:#fff}
.fi-php.fi:before{background-color:#4f5b93}
.fi-php.fi:after{border-left-color:#717db3}
.fi-php.fi .fi-content{background-color:#4f5b93;color:#fff}
.fi-hh.fi:before{background-color:#505050}
.fi-hh.fi:after{border-left-color:#717171}
.fi-hh.fi .fi-content{background-color:#505050;color:#fff}
.fi-go.fi:before{background-color:#e0ebf5}
.fi-go.fi:after{border-left-color:#fff}
.fi-go.fi .fi-content{background-color:#e0ebf5;color:#000}
.fi-py.fi:before{background-color:#ffd542}
.fi-py.fi:after{border-left-color:#ffe484}
.fi-py.fi .fi-content{background-color:#ffd542;color:#3472a3}
.fi-rss.fi:before{background-color:#fd8b33}
.fi-rss.fi:after{border-left-color:#feb075}
.fi-rss.fi .fi-content{background-color:#fd8b33;color:#fff}
.fi-rb.fi:before{background-color:#a20d01}
.fi-rb.fi:after{border-left-color:#e41201}
.fi-rb.fi .fi-content{background-color:#a20d01;color:#fff}
.fi-psd.fi:before{background-color:#181040}
.fi-psd.fi:after{border-left-color:#2c1d75}
.fi-psd.fi .fi-content{background-color:#181040;color:#3db6f2}
.fi-png.fi:before{background-color:#dc7460}
.fi-png.fi:after{border-left-color:#e8a496}
.fi-png.fi .fi-content{background-color:#dc7460;color:#fff}
.fi-bmp.fi:before{background-color:#459fa0}
.fi-bmp.fi:after{border-left-color:#69bdbe}
.fi-bmp.fi .fi-content{background-color:#459fa0;color:#fff}
.fi-vb.fi:before{background-color:#19aad9}
.fi-vb.fi:after{border-left-color:#4ac3ea}
.fi-vb.fi .fi-content{background-color:#19aad9;color:#fff}
.fi-size-xs.fi{width:28.8px;height:36.8px;padding-top:8px}
.fi-size-xs.fi:before{right:8px}
.fi-size-xs.fi:after{border-top-width:8px;border-left-width:8px}
.fi-size-xs.fi .fi-content{top:8px;padding-top:13.2px;font-size:10.4px}
.fi-size-sm.fi{width:36px;height:46px;padding-top:10px}
.fi-size-sm.fi:before{right:10px}
.fi-size-sm.fi:after{border-top-width:10px;border-left-width:10px}
.fi-size-sm.fi .fi-content{top:10px;padding-top:16.5px;font-size:13px}
.fi-size-md.fi{width:43.2px;height:55.2px;padding-top:12px}
.fi-size-md.fi:before{right:12px}
.fi-size-md.fi:after{border-top-width:12px;border-left-width:12px}
.fi-size-md.fi .fi-content{top:12px;padding-top:19.8px;font-size:15.6px}
.fi-size-lg.fi{width:54px;height:69px;padding-top:15px}
.fi-size-lg.fi:before{right:15px}
.fi-size-lg.fi:after{border-top-width:15px;border-left-width:15px}
.fi-size-lg.fi .fi-content{top:15px;padding-top:24.75px;font-size:19.5px}
.fi-size-xl.fi{width:72px;height:92px;padding-top:20px}
.fi-size-xl.fi:before{right:20px}
.fi-size-xl.fi:after{border-top-width:20px;border-left-width:20px}
.fi-size-xl.fi .fi-content{top:20px;padding-top:33px;font-size:26px}
.fi-content-xs .fi-content{font-size:11px;padding-top:55%}
.fi-list{font-size:0;margin:0 -10px}
.fi-list .fi{margin:0 10px 10px;display:inline-block}

i.ico {
	font-style: normal;
}
i.ico,
i.ico::before {
	display: inline-block;
}

i.ico.alert::before { content: '⚠' }
.ico.star::before { content: '★'; }



div.betanotice {
	width: 114px;
	height: 36px;
	position: absolute;
	color: white;
	left: 275px;
	top: 13px;
	font-size: 130%;
	transform: rotate(-19deg);
	font-weight: bold;
}

.stdtable.latestcomments .textCol {
	word-wrap: anywhere;
}

.stdtable.latestcomments .textCol > div {
	max-height: 100px;
	overflow:auto;
	cursor:pointer;
}

.stdtable.latestcomments .textCol pre {
	white-space: break-spaces;
}

.stdtable.latestmods a {
	display: block;
}

.mention {
	border-radius: 4px;
	padding: 2px 3px;
	text-decoration: none;
}

.mention.username:before {
	content: "@";
}

.mention.username {
	background-color: rgba(159, 207, 52, 0.5);
}





.rte-autocomplete{
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	z-index: 1000;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
}

.rte-autocomplete:before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-bottom-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	top: -7px;
	left: 9px;
}

.rte-autocomplete:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid white;
	position: absolute;
	top: -6px;
	left: 10px;
}

.rte-autocomplete > li.loading {
	background: url("/web/img/loading.gif") center no-repeat;
	height: 16px;
}

.rte-autocomplete > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 20px;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
}

.rte-autocomplete >li > a:hover, .rte-autocomplete > li > a:focus, .rte-autocomplete:hover > a, .rte-autocomplete:focus > a {
	color: #fff;
	text-decoration: none;
	background-color: #0081c2;
	background-image: linear-gradient(to bottom,#08c,#0077b3);
	background-repeat: repeat-x;
}

.rte-autocomplete >.active > a, .rte-autocomplete > .active > a:hover, .rte-autocomplete > .active > a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #0081c2;
	background-image: linear-gradient(to bottom,#08c,#0077b3);
	background-repeat: repeat-x;
	outline: 0;
}


.flair {
	display: unset; /* collapses on chrome with small screens if set to inline-block */
}
.flair::before {
	padding: 1px .25em;
	border: 1px solid #3E372F;
	border-radius: 5px;
	unicode-bidi: isolate;
	line-height: 1rem;

	background: var(--color-content-bg);
	color: var(--color-text);
}

.flair-moderator::before {
	content: 'Moderator';
	background: var(--color-flair-moderator);
	color: var(--color-text-inv);
}

.flair-admin::before {
	content: 'Administrator';
	background: var(--color-flair-admin);
	color: var(--color-text-inv);
}

.flair-author::before {
	content: 'Author';
	background: var(--color-flair-author);
	color: var(--color-text-inv);
}

body.banned .overlay-when-banned {
	position: relative;
	pointer-events: none;
}
body.banned .overlay-when-banned::before {
	content: 'Unavailable';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 116, 116, 0.353);
	color: red;
	display: flex;
	justify-content: center;
	align-items: center;
}

body.banned .strikethrough-when-banned {
	pointer-events: none;
	background-color: rgba(255, 116, 116, 0.353);
	color: red;
	text-decoration: line-through;
}

.teaminvite {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 25px;
	background: linear-gradient(0deg, rgba(104, 80, 55, 0.65) 0%, rgba(179, 154, 121, 0.65) 100%);
	border: 1px solid #3E372F;
	border-radius: 5px;
	padding: 5px;
}

.teaminvite .button {
	min-width: 175px;
}

.pending-markers .search-choice:not(.accepted)::after,
.pending-markers .result-selected:not(.accepted)::after,
#teameditors-box .active-result:not(.accepted)::after {
  content: ' [pending]';
  color: gray;
}

.pending-markers .result-selected::before {
	content: '✔ ';
}

@media (max-width: 767px) { /* @perf */
	.teaminvite {
		flex-direction: column;
		align-items: start;
		width: fit-content;
	}
}

#notifications-list>* {
	width: 100%;
	display: flex;
	margin: 0;
	padding: 1em 0;
	flex-direction: row;
	gap: 1em;
}

#notifications-list>[data-label]::before {
	font-size: small;
	top: 0;
}

#notifications-list>:hover {
	background-color: var(--color-input);
}