/********** FILE: css/definelayers.css *****************//* SET LAYER PRIORITY LOWEST TO HIGHEST
 * @layer 	root, 
 			main, 
			basicstyles, 
			bottombar, 
			comments, 
			index, 
			main, 
			notes, 
			other, 
			quickreply, 
			settings, 
			sidebar, 
			topbar, 
			topiclists, 
			topics, 
			listusermessages, 
			chat, 
			imagemanager; 
 */
@layer root, fontawesome, settings, grids, notifications, menubars;
/********** FILE: css/____root.css *****************/@layer root {
	/* CONTENTS */
	/*
FONTS
	fokfont

VARIABLES
	dimensions
	scrollbars
	fonts
	font-sizes
	gutters
	borders
	hsla
	backgrounds
	basic colors
	link colors
	themakleuren
	overige kleuren

CLASSES
	light theme
	dark theme
*/

	/* latin-ext */
	@font-face {
		font-family: "Archivo Narrow";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(https://fonts.gstatic.com/s/archivonarrow/v28/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFG6rXmsJCQ.woff2) format("woff2");
		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	/* latin */
	@font-face {
		font-family: "Archivo Narrow";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(https://fonts.gstatic.com/s/archivonarrow/v28/tss5ApVBdCYD5Q7hcxTE1ArZ0Zz8oY2KRmwvKhhvLFG6o3ms.woff2) format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
			U+2215, U+FEFF, U+FFFD;
	}

	:root {
		/* THEMES 
    	* colors in HSL are like that for a reason. It's so that we can use calc() on them from CSS */

		/* DIMENSIONS */
		--content-sidebar: 340px;
		--content-width: 990px;
		--topbar-height: 50px;
		--bottombar-height: 40px;
		--bottombar-width: 30px;
		--content-width-full: calc(var(--content-sidebar) + var(--gutter-std) + var(--content-width));
		/* breedte:  content-width + content-sidebar + 10px */
		--tooltip-width: 300px;

		/* SCROLLBARS */
		--scrollbar-width: 6px;
		--light-scrollbar: hsla(0, 0%, 0%, 0.2);
		/* TODO: --dark-scrollbar */

		/* FONTS */
		--font-awesome: "Font Awesome 5 Pro";
		--font-fok: "fokfont";
		--font-narrow: "Archivo Narrow";
		--font-pre: "Courier New", courier, fixedsys, monospace;
		--font-standard: Arial, helvetica, sans-serif;

		/* FONT-SIZES (NIET AANPASSEN -- TOEVOEGEN IS OK, MAAR LAAT DE WAARDEN GELIJK!)
	 * f16 = 16px, f12 = 12px etc 
	 * Dat is allemaal relatief aan de browserinstelling van de user. We zijn uitgegaan van 16px standaard */
		--default-font-size: 16px;
		--line-height: 1.3;
		--f45: 2.8125rem;
		--f22: 1.375rem;
		--f20: 1.25rem;
		--f18: 1.125rem;
		--f16: 1rem;
		--f15: 0.9375rem;
		--f14: 0.875rem;
		--f13: 0.8125rem;
		--f12: 0.75rem;
		--f11: 0.6875rem;
		--f10: 0.625rem;

		/* GROUPED SIZES
	 * vervang font-normal: var(--f14) bv door font-normal: var(--f16) om alle font-normal declarations groter te maken */
		--h1-size: var(--f22);

		/* FIXME: oud. moet in de html/css vervangen worden door bovenstaande (behalve waar de font-size vast dient te staan */
		--font-smallest: var(--f10); /* xxxs */
		--font-smaller: var(--f11); /* xxs */
		--font-small: var(--f12); /* xs */
		--font-medium: var(--f13); /* s */
		--font-normal: var(--f14); /* m */
		--font-plus: var(--f15); /* l */
		--font-big: var(--f16); /* xl */
		--font-bigger: var(--f18); /* xxl */
		--font-biggest: var(--f22); /* xxxl */

		/* GUTTERS */
		--gutter-micro: 2px;
		--gutter-tiny: 4px;
		--gutter-small: 8px;
		--gutter-medium: 10px;
		--gutter-std: 12px;
		--gutter-plus: 16px;
		--gutter-wide: 24px;

		/* BORDERS */
		--groupBorderWidth: 4px;
		--radius: var(--gutter-small);

		/* HSLA */
		--h: 0;
		--s: 0;
		--l: 255;
		--a: 1;
		--cperc: 50;
		--switch-threshold: 70;

		/* MAIN BACKGROUND */
		--l-light: 100; /* lum value */
		--l-dark: 0; /* lum value */

		/* POST BACKGROUND */
		--l-post-light: 90;
		--l-post-dark: 10;

		/* NOTIFICATIONS */
		--l-notificacions-light: 90;
		--l-notifications-dark: 20;

		/* QUOTE / SPOILER / CODE / PHP BACKGROUND */

		/* BASIC COLORS (NEW) */
		--headerTextColor: hsla(0, 0%, 100%, 1);
		--headerTextShadow: hsla(0, 0%, 0%, 1);

		/* LINK COLORS */
		--link-blue: hsla(205, 60%, 50%, 1);

		/* THEMAKLEUREN HSL */
		--h-blue: 205;
		--s-blue: 60;
		--l-blue: 50;
		--h-green: 100;
		--s-green: 60;
		--l-green: 50;
		--h-red: 0;
		--s-red: 60;
		--l-red: 50;
		--h-midred: 0;
		--s-midred: 60;
		--l-midred: 60;
		--h-lightred: 0;
		--s-lightred: 60;
		--l-lightred: 70;
		--h-sienna: 12;
		--s-sienna: 60;
		--l-sienna: 50;
		--h-yellow: 57;
		--s-yellow: 92;
		--l-yellow: 50;
		--h-grey: 0;
		--s-grey: 0;
		--l-grey: 50;
		/* GRIJSTINTEN */
		--h-midgrey: 0;
		--s-midgrey: 0;
		--l-midgrey: 75;
		--h-lightgrey: 0;
		--s-lightgrey: 0;
		--l-lightgrey: 95;
		--h-darkergrey: 240;
		--s-darkergrey: 2;
		--l-darkergrey: 90;
		/* BACKGROUND */
		--def-backgroundDark-hex: 0d0d0d;
		--def-backgroundDark-h: 0;
		--def-backgroundDark-s: 0;
		--def-backgroundDark-l: 5;
		--def-backgroundLight-hex: ffffff;
		--def-backgroundLight-h: 0;
		--def-backgroundLight-s: 100;
		--def-backgroundLight-l: 100;

		/* SIDEBAR */
		--def-sidebarDark-hex: 404040;
		--def-sidebarDark-h: 0;
		--def-sidebarDark-s: 0;
		--def-sidebarDark-l: 25;
		--def-sidebarLight-hex: 404040;
		--def-sidebarLight-h: 0;
		--def-sidebarLight-s: 0;
		--def-sidebarLight-l: 25;
		/* POSTS */
		--def-postDark-hex: 242424;
		--def-postDark-h: 0;
		--def-postDark-s: 0;
		--def-postDark-l: 14;
		--def-postLight-hex: f2f2f2;
		--def-postLight-h: 0;
		--def-postLight-s: 0;
		--def-postLight-l: 95;
		--def-postTsDark-hex: 122a36;
		--def-postTsDark-h: 200;
		--def-postTsDark-s: 50;
		--def-postTsDark-l: 14;
		--def-postTsLight-hex: d9e6f2;
		--def-postTsLight-h: 209;
		--def-postTsLight-s: 49;
		--def-postTsLight-l: 90;
		--def-postSelfDark-hex: 281f1f;
		--def-postSelfDark-h: 0;
		--def-postSelfDark-s: 12;
		--def-postSelfDark-l: 14;
		--def-postSelfLight-hex: e3dddd;
		--def-postSelfLight-h: 0;
		--def-postSelfLight-s: 10;
		--def-postSelfLight-l: 88;
		--def-postFriendDark-hex: 212d1b;
		--def-postFriendDark-h: 100;
		--def-postFriendDark-s: 25;
		--def-postFriendDark-l: 14;
		--def-postFriendLight-hex: e3ecdf;
		--def-postFriendLight-h: 100;
		--def-postFriendLight-s: 25;
		--def-postFriendLight-l: 90;

		/* THEMAKLEUREN VAR */
		--blue: hsla(var(--h-blue), calc(var(--s-blue) * 1%), calc(var(--l-blue) * 1%), 1);
		--green: hsla(var(--h-green), calc(var(--s-green) * 1%), calc(var(--l-green) * 1%), 1);
		--red: hsla(var(--h-red), calc(var(--s-red) * 1%), calc(var(--l-red) * 1%), 1);
		--midred: hsla(var(--h-midred), calc(var(--s-midred) * 1%), calc(var(--l-midred) * 1%), 1);
		--lightred: hsla(var(--h-lightred), calc(var(--s-lightred) * 1%), calc(var(--l-lightred) * 1%), 1);
		--sienna: hsla(var(--h-sienna), calc(var(--s-sienna) * 1%), calc(var(--l-sienna) * 1%), 1);
		--yellow: hsla(var(--h-yellow), calc(var(--s-yellow) * 1%), calc(var(--l-yellow) * 1%), 1);
		--lightgrey: hsla(var(--h-lightgrey), calc(var(--s-lightgrey) * 1%), calc(var(--l-lightgrey) * 1%), 1);
		--midgrey: hsla(var(--h-midgrey), calc(var(--s-midgrey) * 1%), calc(var(--l-midgrey) * 1%), 1);

		/* OVERIGE NOODZAKELIJKE KLEUREN */
		--alert-color-a: yellow;
		--alert-color-b: black;
		--error-color-a: red;
		--error-color-b: white;
		--ok-color-a: green;
		--ok-color-b: white;
		--black: black;
		--blue: #0088ee;
		--white: white;
		--green: green;
		--gray: #333;
		--grey: var(--gray);
		--female: #ff69b4;
		--male: #1e90ff;

		/* HOOFDGROEPKLEUREN */
		--cat1: #ff3030;
		--cat1-txt: #ffffff;

		/* FOK!  						#ff6666;*/
		--cat2: #0c7bff;
		--cat2-txt: #ffffff;

		/* Community  					#ACCCF2;*/
		--cat3: #00b900;
		--cat3-txt: #ffffff;

		/* Media & Glamour  			#9CE29C;*/
		--cat4: #8d77ff;
		--cat4-txt: #ffffff;

		/* Mind, Body & Living  		#C8C0F2;*/
		--cat5: #ea7831;
		--cat5-txt: #ffffff;

		/* Techniek & Computers 		#EFA87C;*/
		--cat6: #967575;
		--cat6-txt: #ffffff;

		/* Hobbies						#E0C5C5;*/
		--cat7: #f0c500;
		--cat7-txt: #ffffff;

		/* Crew Only 					#F7DE6E;*/
		--cat8: #43b3b0;
		--cat8-txt: #ffffff;

		/* Nieuws, Wetenschap & Cultuur #87DEDC;*/
		--cat12: #ff5ab4;
		--cat12-txt: #ffffff;

		/* Tijdelijke fora  			#F0C6DD;*/
		--cat14: #ff5fe6;
		--cat14-txt: #ffffff;

		/* Sport 	 					#EFA2E3;*/

		/* BGS and COLORS FOR WHEN AUTOTEXTCOLOR IS NOT NEEDED */
		--color-red: hsla(var(--h-red), calc(var(--s-red) * 1%), calc(var(--l-red) * 1%), 1);
		--color-lightgrey: hsla(var(--h-lightgrey), calc(var(--s-lightgrey) * 1%), calc(var(--l-lightgrey) * 1%), 1);
		--color-darkergrey: hsla(var(--h-darkergrey), calc(var(--s-darkergrey) * 1%), calc(var(--l-darkergrey) * 1%), 1);
	}
} /* @layer root */
/********** FILE: css/___main.css *****************/@layer root {
	/* STANDAARD HTML EN BODY CLASSES VAN ZAKEN DIE SITEBREED ZIJN OF OP MEERDERE PAGINA'S WORDEN GEBRUIKT
 *
 * html/body classes
 * basis kleurclasses (--vars staan in ____root.css)
 * pills e.d.
 */
	html {
		/* standaardinstellingen voor de pagina */
		box-sizing: border-box;
		font-family: var(--font-standard); /* test */
		font-size: var(--default-font-size);
		line-height: var(--default-font-size);
		overflow-x: hidden;
		scroll-padding-top: calc(var(--topbar-height) + 8px);
		text-rendering: optimizeLegibility;
		touch-action: manipulation;
		-ms-touch-action: manipulation;
	}
	*,
	*::before,
	*::after {
		box-sizing: inherit;
		-webkit-box-decoration-break: clone;
		-o-box-decoration-break: clone;
		box-decoration-break: clone;
		/* zorgt dat we elk element een achtergrondkleur kunnen geven met --h --s --l --a en vervolgens een background-color: var(--color) dat de tekstkleur kan meeveranderen naar wit/zwart door 
	color: var(--switch); */
		--color: hsla(var(--h), calc(var(--s) * 1%), calc(var(--l) * 1%), var(--a));
		--autocolor: calc((var(--l) - var(--switch-threshold)) * -100%);
		--switch: hsla(0, 0%, var(--autocolor), 1);
		--mix: color-mix(in hsl, currentColor, var(--color) calc(var(--cperc) * 1%));
		--mix-invert: color-mix(in hsl, var(--color), currentColor calc(var(--cperc) * 1%));
	}
	blockquote,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	ol,
	ul {
		margin: 0;
		padding: 0;
		font-weight: normal;
	}
	ol,
	ul {
		list-style: none;
	}
	html.smooth,
	.smoothscroll {
		/* zorgt dat de pagina zichtbaar naar de anchor scrollt */
		scroll-behavior: smooth;
	}
	body {
		/* basisinstellingen voor de body 
	grid-instellingen en specieke css staan in de relevant _grid_*.css files */
		font-size: var(--f16);
		line-height: var(--f16);
		margin: 0 auto;
		max-width: var(--content-width);
		padding: 0;
		width: 100%;
	}
	body.sidebar {
		/* Indien we een ingeschakelde sidebar hebben */
		max-width: var(--content-width-full);
	}

	@media only screen and (max-width: 1419px) {
		/* max-width: var(--content-width); */
	}

	body #stylebot {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		width: 0 !important;
		position: absolute !important;
		top: -100000px !important;
	}
	i {
		width: fit-content;
	}

	html,body,#mainwrap,#pagebutton,article {
		overflow-anchor: auto;
	}

	#pageWrapper {
		max-width: 99.9vw;
		border-radius: var(--gutter-std);
		grid-area: content;
	}

	/* WE STELLEN DE PLEKKEN IN DIE EEN AUTOMATISCHE TEKSTKLEUR MOETEN HEBBEN EN 
 	* EEN HSLA ACHTERGROND */
	body,
	.themedbg,
	body :is(#bottombar, #mainwrap, #pagewrapper #sidebar, .quickreply),
	body :is(#systemholder, #notificationholder, #dmholder, #multi, #dropdown_usermenu) {
		background-color: var(--color);
		color: var(--switch);
	}
	#bottombar {
		z-index: 2;
	}

	.themedtxt {
		color: var(--color);
	}

	/* WAT COLOR CLASSES DIE VAN BELANG ZIJN */
	body.dark {
		--h: 0;
		--s: 0;
		--l: 05;
	}
	body.light {
		--h: 0;
		--s: 100;
		--l: 100;
	}

	/* GRID PREPARE */
	.grid {
		display: grid;
		grid-template-rows: minmax(0, auto); /* minmax(10px, auto) of auto of 10px of 10fr :: 1 instelling voor alle rijen of elke rij apart */
		grid-gap: var(--gutter-micro) var(--gutter-medium); /* y(rows)  x(columns) <= zonder komma! */
	}
	.inline-grid {
		display: inline-grid;
		grid-template-rows: minmax(0, auto); /* minmax(10px, auto) of auto of 10px of 10fr :: 1 instelling voor alle rijen of elke rij apart */
		grid-gap: var(--gutter-micro) var(--gutter-medium); /* y(rows)  x(columns) <= zonder komma! */
	}
	.grid > *,
	.inline-grid > * {
		position: relative;
	}

	/* LIGHT */
	.light :is(.postbg) {
		--h: var(--def-postLight-h);
		--s: var(--def-postLight-s);
		--l: var(--def-postLight-l);
	}
	.light :is(.isTs) {
		--h: var(--def-postTsLight-h);
		--s: var(--def-postTsLight-s);
		--l: var(--def-postTsLight-l);
	}
	.light :is(.isSelf) {
		--h: var(--def-postSelfLight-h);
		--s: var(--def-postSelfLight-s);
		--l: var(--def-postSelfLight-l);
	}

	.light :is(.pageWrapper) {
		--h: 0;
		--s: 0;
		--l: 99;
	}
	.light :is(#notificationholder, #dmholder, #systemholder, #multi, #dropdown_usermenu) {
		--h: 0;
		--s: 0;
		--l: 90;
	}

	.dark :is(#notificationholder, #dmholder, #systemholder, #multi, #dropdown_usermenu) {
		--h: 0;
		--s: 0;
		--l: 10;
	}

	/* hele rij on-hover */
	.light .isrow {
		border-bottom: 1px solid #eee;
	}
	.light :is(.isrow):hover {
		--l: calc(var(--l) - 10);
	}
	/* wells / heroes / blocks */
	.light :is(.okbg) {
		background-color: var(--light-theme-ok);
		color: var(--light-theme-ok-contrast);
	}
	.light .okbg a {
		color: var(--light-theme-ok-contrast);
	}
	.light .ga-posttime.hasnew {
		color: var(--light-theme-link-new);
	}
	.light #navbar {
		background-color: #07c;
		position: fixed;
		top: 0px;
		white-space: nowrap;
	}
	.light #navbar a {
		color: #ffffff;
	}
	.light #navbar .new {
		color: yellow;
	}
	.light .quickreply {
		--h: 200;
		--s: 90;
		--l: 80;
	}
	.light input,
	.light select,
	.light button,
	.light .formbutton,
	.light textarea {
		border: 1px solid var(--light-theme-messageborders);
	}

	/* DARK */
	.dark :is(.postbg, .isrow) {
		--h: var(--def-postDark-h);
		--s: var(--def-postDark-s);
		--l: var(--def-postDark-l);
	}
	.dark :is(.isTs) {
		--h: var(--def-postTsDark-h);
		--s: var(--def-postTsDark-s);
		--l: var(--def-postTsDark-l);
	}
	.dark :is(.isSelf) {
		--h: var(--def-postSelfDark-h);
		--s: var(--def-postSelfDark-s);
		--l: var(--def-postSelfDark-l);
	}

	.dark .pageWrapper {
		--h: 0;
		--s: 0;
		--l: 08;
	}

	.dark .quickreply {
		--h: var(--h-blue);
		--s: var(--s-blue);
		--l: 25;
	}
	/* hele rij on-hover */
	.dark .isrow {
		border-bottom: 1px solid #222;
	}
	.dark .isrow:hover {
		--l: calc(var(--l) + 10);
	}
	.dark .okbg {
		background-color: var(--dark-theme-ok);
		color: var(--dark-theme-ok-contrast);
	}
	/* wells / heroes / blocks */
	.dark .okbg a {
		color: var(--dark-theme-ok-contrast);
	}
	.dark .hasnew .ga-lastpost {
		color: var(--dark-theme-link-new);
	}
	.dark .ga-posttime.hasnew {
		color: var(--dark-theme-link-new);
	}
	.dark #navbar {
		background-color: #07c;
		position: fixed;
		top: 0px;
		white-space: nowrap;
		color: var(--dark-theme-link2);
	}
	.dark #navbar a {
		color: #ffffff;
	}
	.dark #navbar .new {
		color: yellow;
	}
	.dark input,
	.dark select,
	.dark button,
	.dark .formbutton,
	.dark textarea {
		border: 1px solid var(--dark-theme-messageborders);
	}

	/* COLOR CLASSES FOR SPECIFIC PURPOSES */
	:is(.p-post, .reportheader, .colorlink, .no-content, .topicWarningContents) a {
		color: var(--link-blue);
	}
	:is(.p-post, .reportheader, .colorlink, .no-content, .topicWarningContents) a:hover {
		color: #b00000;
		opacity: 0.8;
	}

	#thanks {
		border-radius: var(--radius);
		margin-block: var(--gutter-std) calc(var(--gutter-wide) * 1.8);
		padding: var(--gutter-plus);
		background-color: var(--color);
		color: var(--switch);
		--h: 0;
		--l: 25;
		--s: 0;
		font-family: var(--font-narrow);
		font-size: var(--f13);
		text-align: center;
	}

	.dark :is(input, select, textarea):not([type="button"]) {
		color-scheme: dark;
	}
} /* @layer root */
/********** FILE: css/__basicstyles.css *****************/@layer root {
	/*
INDEX

- TEXT
	> h1, .h1
	> .heading
- LINKS
	> a | .a
- IMAGES
	> img
- SHADOWS
	> .dropshadow
- MEDIA
	> youtube, embed, video etc
- TOOLTIPS
	> .tooltip | .tooltip > span | .tooltip > span p | .tooltip:hover > span
- BUTTONS
	> .tvp | button | .button etc
- DROPDOWNS & POPMENUS
	> .dropdown
	> .popmenu
- MISC
	> details | .pointer
	> textarea
	> .hidden
	> .ellipsis
	> mark | .mark
	> .opacity50
	> [unselectable] | button | .button | i | .unselectable
- HEADER
	> #header | #header .forumtitel | #header .headerOms
- DESIGN ELEMENTS
	> .pills
	> .seconds | .opacity
- FORUMGRID
	> .forumgrid
- CUSTOM SELECT
	> .custom-select
- SCROLLBARS
	> .sbstyle
- CHECKBOXES
	> .slider
- DIALOGS
	> dialog
*/

	/*/

/* TEXT */
	h1,
	.h1 {
		/* standaardformaat h1 elementen (te vinden in ____root.css) */
		font-size: var(--h1-size);
		line-height: var(--h1-size);
		letter-spacing: -0.05em;
	}
	.heading {
		font-size: var(--font-medium);
		margin: var(--gutter-std) 0 var(--gutter-tiny) var(--gutter-small);
		margin-bottom: var(--gutter-tiny);
		font-weight: bold;
	}

	span.s {
		text-decoration: line-through;
	}
	span.u {
		text-decoration: underline;
	}

	/* LINKS */
	a,
	.a {
		color: inherit;
		text-decoration: none;
	}

	/* IMAGES */


	/* SHADOWS */
	.dropshadow {
		filter: drop-shadow(0 0.2rem 0.25rem hsla(0, 0%, 0%, 0.2));
	}

	/* MEDIA */
	video {
		width: auto;
		height: auto;
		/* max-height: 340px; */
		max-width: 95%;
	}
	.twitter-tweet-rendered > iframe {
		max-width: 300px;
	}
	.youtube_video {
		aspect-ratio: 16 / 9;
		width: 560px;
		max-width: 95%;
		display: block;
	}
	.youtube_embed {
		aspect-ratio: 16 / 9;
		display: block;
		max-width: 560px;
		width: 105%;
		overflow: hidden;
	}
	.youtube_video a:first-child {
		visibility: hidden;
		height: 315px;
	}
	.youtube_video br,
	.youtube_embed + br {
		display: none;
	}
	.embed_youtube a:last-child {
		position: relative;
		top: -4px;
	}
	.embed_youtube:has(iframe) a:last-child {
		top: 0px;
	}
	.embedwarn {
		display: block;
		width: 90%;
		background-color: var(--blue);
		color: var(--white);
		font-family: var(--font-narrow);
		padding: var(--gutter-small);
		margin-bottom: var(--gutter-small);
	}
	.embedwarntitle {
		font-size: var(--font-bigger);
		margin-bottom: var(--gutter-std);
	}
	.tussenkopje {
		font-size: var(--f20);
	}
	.policylinks {
		padding: var(--gutter-tiny);
		background-color: #ddd;
		margin-bottom: var(--gutter-std);
	}

	.cookieWarnButton {
		padding: var(--gutter-small);
		background: var(--grey);
		margin-bottom: var(--gutter-wide);
	}

	/* TOOLTIPS */
	.tip {
		display: inline-block;
		position: relative;
	}
	.tip > span {
		--h: 0;
		--s: 0;
		--l: 0;
		--a: 0.9;
		background-color: var(--color);
		color: var(--switch);
		display: block;
		font-family: var(--font-narrow);
		font-size: var(--f13);
		left: 50%;
		margin-left: calc(var(--tooltip-width) * -1 / 2);
		padding: var(--gutter-small);
		position: absolute;
		top: 100%;
		visibility: hidden;
		width: var(--tooltip-width);
		z-index: 1;
	}
	.tip > span p {
		margin-top: var(--gutter-small);
	}
	.tip:hover > span {
		visibility: visible;
	}

	/* BUTTONS */
	.tvp {
		font-family: var(--font-narrow);
		font-size: var(--font-small);
		padding: var(--gutter-small);
		border: 1px solid #ddd;
		cursor: pointer;
		text-align: center;
	}
	.tvp i {
		margin-right: 3px;
	}

	.button,
	.pagebutton {
		--h: var(--h-blue);
		--s: var(--s-blue);
		background-color: var(--color);
		color: var(--switch);
		white-space: nowrap;
		width: fit-content;
		height: fit-content;
		display: inline-block;
		cursor: pointer;
		font-family: var(--font-narrow);
		font-size: var(--font-small);
	}
	.button {
		--l: var(--l-blue);
		padding: var(--gutter-small);
		border: 1px solid var(--themecolor-darker);
	}
	.button.green {
		--h: var(--h-green);
		--l: var(--l-green);
		--s: var(--s-green);
	}
	.pagebutton {
		--l: calc(var(--l-blue) * 0.25);
		padding: var(--gutter-small);
	}
	/*.dark .button					{ color: #333; }*/

	/* DROPDOWNS */
	.dropdown {
		display: none;
		position: fixed;
		padding: 0;
		overflow: auto;
		z-index: 2;
		min-width: 100px;
		max-width: 90%;
		background-color: var(--light-theme-lighter); /* TODO: kleur in --h --s --l --a) */
		border: 1px solid var(--light-border); /* TODO: kleur in --h --s --l --a) */
	}
	.dropdown a {
		display: block;
		padding: var(--gutter-tiny);
	}
	.dropdown a:hover {
		--l: 50;
		--a: 0.2;
		background-color: var(--color);
	}

	/* modmenu */
	.pop-modmenuNw {
		transform: translateX(-50%);
		margin: 0;
		overflow-x: hidden;
		width: 240px;
		height: fit-content;
		background-color: var(--color);
		color: var(--switch);
		font-family: var(--font-narrow);
		position: absolute;
		z-index: 2147483647;
	}
	.pop-modmenuNw.c {
		transform: translateX(-7%);
	}
	.dark .pop-modmenuNw {
		--h: 0;
		--s: 0;
		--l: 20;
		border: 1px solid color-mix(in hsl, currentColor, black 80%);
		filter: drop-shadow(0 0 3px #444);
	}
	.light .pop-modmenuNw {
		--h: 0;
		--s: 0;
		--l: 97;
		border: 1px solid color-mix(in hsl, currentColor, white 80%);
		filter: drop-shadow(0 0 3px #bbb);
	}
	.pop-modmenu {
		top: 34px;
		left: -18px;
		width: 240px;
		height: fit-content;
		background-color: var(--color);
		color: var(--switch);
		font-family: var(--font-narrow);
		position: absolute;
		z-index: 2147483647;
	}
	.menutoggler.opened + .pop-modmenu {
		display: block !important;
	}
	.dark .pop-modmenu {
		--h: 0;
		--s: 0;
		--l: 20;
		border: 1px solid #202020;
	}
	.light .pop-modmenu {
		--h: 0;
		--s: 0;
		--l: 97;
		border: 1px solid #d0d0d0;
	}

	:is(.pop-listitem):hover {
		color: var(--switch) !important;
	}

	.popmenu,
	.pop-modmenu {
		background-color: var(--color);
		color: var(--switch);
		display: block;
		font-family: var(--font-narrow);
		font-size: var(--font-small);
		padding: var(--gutter-tiny);
		position: absolute;
		z-index: 2147483647;
	}
	.popmenu i,
	.pop-modmenu i,
	.pop-modmenuNw i {
		margin-right: var(--gutter-micro);
		text-align: center;
		width: 20px;
	}

	.post :is(.popmenu, .pop-modmenu) a:hover {
		color: inherit;
	}

	.light .popmenu {
		background-color: #f8f8f8; /* TODO: kleur in --h --s --l --a) */
		border: 1px solid #ddd; /* TODO: kleur in --h --s --l --a) */
		color: #080808; /* TODO: kleur in --h --s --l --a) */
	}
	.dark .popmenu {
		background-color: #666; /* TODO: kleur in --h --s --l --a) */
		color: #fafafa; /* TODO: kleur in --h --s --l --a) */
	}

	.pop-usermenu {
		background-color: var(--color);
		color: var(--switch);
		display: block;
		font-family: var(--font-narrow);
		font-size: var(--font-small);
		/* dit zou een grid moeten worden */
	}

	.pop-member {
		background-color: var(--color);
		color: var(--switch);
		font-size: var(--font-normal);
		display: block;
		font-weight: bold;
		width: 100%;
		padding: var(--gutter-small);
		margin-bottom: var(--gutter-small);
		overflow-wrap: break-word;
	}
	.menuTinytxt {
		font-size: var(--f11);
		font-weight: normal;
	}
	.dark .pop-member {
		--h: 0;
		--s: 0;
		--l: 5;
	}
	.light .pop-member {
		--h: 0;
		--s: 0;
		--l: 95;
	}

	.pop-listitem {
		display: block;
		padding: var(--gutter-tiny) var(--gutter-small);
		overflow-wrap: break-word;
		cursor: pointer;
	}
	.light .post :is(.popmenu, .pop-modmenu) :is(.pop-listitem):hover {
		--l: 85;
		--a: 1;
		background-color: var(--color);
		color: var(--switch);
		--s: 0;
		--h: 0;
	}
	.dark .post :is(.popmenu, .pop-modmenu) :is(.pop-listitem):hover {
		--l: 15;
		--a: 1;
		background-color: var(--color);
		color: var(--switch);
		--s: 0;
		--h: 0;
	}

	.pop-splitter {
		height: 0;
		border-top: 1px solid #ccc;
		margin: var(--gutter-tiny) 0;
	}

	.popup_noNew {
		padding: var(--gutter-std);
		font-family: var(--font-narrow);
		text-align: center;
		font-weight: bold;
	}

	.dm-grid + .popup_noNew {
		display: none;
	}
	/* ANNOUNCEMENTS */
	.grid-announcements.descr {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		grid-template-areas: " desc1			desc2 		desc3		 ";
	}
	.grid-announcements {
		--l: 50;
		--a: 0.15;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		grid-template-rows: minmax(15px, auto);
		grid-template-columns: 30px 3fr 1fr;
		grid-template-areas: " topicicon		titel 	 	topicstarter ";
		background-color: var(--color);
		padding: var(--gutter-small);
	}
	.grid-announcements:hover {
		--l: 30;
	}
	.grid-announcements:hover h1 {
		--l: 50;
	}
	.an-desc1 {
		grid-area: desc1;
	}
	.an-desc2 {
		grid-area: desc2;
	}
	.an-desc3 {
		grid-area: desc3;
	}
	.an-topicicon {
		grid-area: topicicon;
	}
	.an-titel {
		grid-area: titel;
		font-size: var(--f14);
	}
	.an-topicstarter {
		grid-area: topicstarter;
	}

	.announcements .ga-topicstarter,
	.announcements .ga-postcount,
	.announcements .ga-lastpost,
	.ga-usertitle {
		font-size: var(--font-smaller);
	}
	.an-titel {
		grid-area: titel;
	}
	.an-topicicon {
		grid-area: topicicon;
	}
	.an-topicstarter {
		grid-area: topicstarter;
	}

	/* MISC */
	summary,
	.pointer,
	[data-click] {
		/* pointer weergeven in details/summary pair */
		cursor: pointer;
	}
	textarea {
		display: block;
	}

	[unselectable],
	.unselectable,
	.button,
	button,
	.fa,
	.fab,
	.fad,
	.fal,
	.far,
	.fas {
		/* zorgen dat bepaalde zaken niet selecteerbaar zijn:
	voorkomt dat bij per ongeluk dubbelklikken de helft van de pagina geselecteerd wordt */
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.hidden {
		display: none !important;
	}

	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mark {
		outline: 2px solid gold;
	}
	img.mark {
		margin-left: 2px;
		margin-top: 2px;
	}

	/* HEADER */
	#header {
		background-position: center;
		background-size: cover;
		border-radius: var(--radius);
		height: 180px;
		max-width: var(--content-width);
		overflow: hidden;
		padding: 0;
		margin: 0 auto;
	}
	.forumheader_overlay {
		background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
		display: grid;
		height: 100%;
	}
	.forumheader_overlay .forumtitel {
		align-self: center;
		color: var(--headerTextColor);
		font-size: clamp(var(--f20), 4vw, var(--f45));
		justify-self: center;
		line-height: 0.85em;
		margin-top: 50px;
		text-align: center;
		text-shadow: 0px 0px 7px var(--headerTextShadow);
		vertical-align: middle;
		width: 100%;
	}

	.forumheader_overlay .headerOms {
		align-self: center;
		color: var(--headerTextColor);
		font-size: clamp(var(--f11), 2.5vw, var(--f14));
		justify-self: center;
		line-height: calc(1.2em);
		margin-top: -8px;
		max-width: 90%;
		text-align: center;
		text-shadow: 0px 0px 7px var(--headerTextShadow);
		vertical-align: middle;
	}

	/* DESIGN ELEMENTS */
	.pills .afkorting,
	.pills .pill {
		border-radius: 4px;
		display: inline-block;
		font-size: 10px;
		text-align: center;
		margin: 1px 0;
		padding: 1px 4px 0px 4px;
		vertical-align: text-bottom;
		width: 35px;
	}

	input,
	select,
	button,
	.formbutton {
		padding: var(--gutter-small);
		font-size: var(--font-normal);
	}
	button,
	.formbutton {
		font-size: var(--font-normal);
		cursor: pointer;
		font-size: var(--font-normal);
		cursor: pointer;
		background-color: #e8e8e8;
	}

	a.nonew,
	.nonew .afkorting,
	.nonew .pill {
		filter: opacity(50%);
	}

	.seconds,
	.offline,
	.lighter,
	.opacity50 {
		filter: opacity(50%);
	}

	.forumgrid {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		/* padding: 0 var(--gutter-std) var(--gutter-srd) var(--gutter-std); */
		margin-top: calc(var(--topbar-height) + var(--gutter-small));
		text-align: center;
		width: var(--content-width);
	}

	#header + #subnewsbar + .forumgrid {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		padding: var(--gutter-std);
		text-align: center;
		width: var(--content-width);
	}

	.forumgrid:empty {
		display: none;
	}

	/* CUSTOM SELECT */
	.custom-select {
		position: relative;
		font-family: var(--font-narrow);
		margin-right: var(--gutter-medium);
	}

	.custom-select select {
		display: none; /*hide original SELECT element: */
	}

	.select-selected {
		background-color: DodgerBlue; /* TODO: kleur in --h --s --l --a) */
	}
	/* Style the arrow inside the select element: */
	.select-selected:after {
		position: absolute;
		content: "";
		top: 14px;
		right: 10px;
		width: 0;
		height: 0;
		border: 6px solid transparent;
		border-color: #fff transparent transparent transparent;
	}

	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after {
		border-color: transparent transparent #fff transparent;
		top: 7px;
	}

	/* style the items (options), including the selected item: */
	.select-items div,
	.select-selected {
		color: #ffffff;
		padding: 8px 16px;
		border: 1px solid transparent;
		border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
		cursor: pointer;
	}

	/* Style items (options): */
	.select-items {
		position: absolute;
		background-color: DodgerBlue;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
	}

	/* Hide the items when the select box is closed: */
	.select-hide {
		display: none;
	}

	.select-items div:hover,
	.same-as-selected {
		background-color: rgba(0, 0, 0, 0.1);
	}

	/* SCROLLBARS */
	.moz .sbstyle {
		scrollbar-width: thin;
	}
	.sbstyle::-webkit-scrollbar {
		width: 2px;
		height: 8px;
	}
	.sbstyle::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	.sbstyle::-webkit-scrollbar-thumb {
		background: #888;
	}
	.sbstyle::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	/* CHECKBOXES SLIDETOGGLES */
	/* The switch - the box around the slider */
	.switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 34px;
	}

	/* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	/* The slider */
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scale(0.6);
		background-color: #ccc;
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}

	input:checked + .slider {
		background-color: #2196f3;
	}

	input:focus + .slider {
		box-shadow: 0 0 1px #2196f3;
	}

	input:checked + .slider:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
	}

	/* Rounded sliders */
	.slider.round {
		border-radius: 34px;
	}

	.slider.round:before {
		border-radius: 50%;
	}

	/* TODO: WORDEN ONDERSTAANDE UBERHAUPT GEBRUIKT? ZO NEE -> TRASH, ZO JA -> INDELEN OP DE JUISTE PLEK */
	.pageLinks .a {
		padding: var(--gutter-medium);
		background-color: var(--light-theme-theme);
		color: var(--light-theme-alt);
	}
	.pageLinks a {
		padding: var(--gutter-medium);
		cursor: pointer;
	}
	.pageLinks a:hover {
		text-decoration: underline;
	}
	.pageLinks {
		text-align: right;
		display: block;
	}

	#navbar {
		padding: var(--gutter-small);
		width: var(--content-width);
	}

	.ga-topicicon,
	.ga-posticon,
	.pi,
	.posticon,
	.topicicon {
		height: 15px;
		margin-right: var(--gutter-small);
		width: auto;
	}
	.ga-pages a {
		padding: 2px;
		font-size: var(--small);
		color: #888888 !important;
	}
	.ga-pages a:hover {
		text-decoration: underline;
	}

	.well {
		padding: var(--gutter-std);
		border: 1px dotted var(--switch);
		font-family: var(--font-narrow);
		font-size: var(--f13);
		margin-block: var(--gutter-std);
	}
	.box {
		padding: var(--gutter-std);
		font-family: var(--font-narrow);
		font-size: var(--f13);
		margin-bottom: var(--gutter-std);
	}

	.warn {
		--h: 0;
		--s: 80;
		--l: 80;
		--a: 0.9;
		background-color: var(--color);
		color: var(--switch);
	}
	.warn p {
		opacity: 0.9;
	}

	/* adzooi */
	div[style*="privacy-logo"] {
		display: none;
	}

	@media screen and (max-width: 1067px) {
		.st-display-render.st-reset {
			bottom: 190px !important;
		}
	}
	/* DIALOGS */
	dialog {
		width: fit-content;
		max-width: calc(var(--content-width) * 0.98);
		border: 0;
		border-radius: var(--gutter-medium);
		--h: 80;
		--s: 0;
		--l: 0;
		--a: 0.9;
		background-color: var(--color);
		color: var(--switch);
		outline: 2px solid var(--black);
		filter: drop-shadow(0px 0px 4px black);
		overflow-x: hidden;
	}

	#loading {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 3px solid green;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		--h: 0;
		--s: 0;
		--l: 0;
		--a: 0.6;
		background-color: var(--color);
		color: var(--switch);
	}

	#loading i {
		font-size: 8rem;
	}

	.smalltxt {
		font-size: var(--f14);
	}

	h1.th-topictitel {
		word-break: break-word;
	}

	#bottombar,
	.topbar {
		--h: 205;
		--s: 80;
		--l: 40;
		--a: 0.8;
		background-color: var(--color);
		color: var(--switch);
		backdrop-filter: blur(5px);
	}

	.externalPolicy {
		top: 0;
		color: inherit;
		font-weight: bold;
		text-decoration: underline;
	}

	@media screen and (max-width: 799px) {
		.select-selected {
			padding: 1px 16px;
		}
		.select-selected:after {
			top: 8px;
		}
		.select-selected.select-arrow-active:after {
			top: 2px;
		}
		.select-items {
			position: absolute;
			top: 20px;
		}
		.prefsbox {
			padding-top: var(--gutter-small);
		}
	}
} /* @layer root */
/********** FILE: css/notifications.css *****************/@layer notifications {
	/* DM EN NOTIFICATIES */
	#dmbell,
	#notifybell,
	#pmbell,
	#systembell {
		font-size: var(--f16);
		position: relative;
		padding: 17px var(--gutter-small);
	}

	#dmholder,
	#notificationholder,
	#systemholder,
	#multi {
		width: 370px;
		max-height: 92%;
		overflow: hidden;
		padding: 0;
		border: 1px solid #dddddd; /* TODO: kleur in --h --s --l --a) */
	}

	.title .markread {
		float: right;
		font-size: var(--f12);
		padding: 5px;
		cursor: pointer;
	}
	
	.title .markread:is(:active,:hover) {
		background-color: var(--color);
		--l: 30;
		border-radius: var(--gutter-small);
	}

	#dropdown_usermenu{
		width: fit-content;
		transform: translateX(-50%)!important;
	}

	#systemholder,
	#notificationholder,
	#dmholder,
	#dropdown_usermenu {
		max-height: calc(98vh - var(--topbar-height) - 15px) !important;
	}

	#dropdown_usermenu a {
		margin: 0;
		display: block;
		height: 24px;
		padding: var(--gutter-small);
		line-height: normal;
	}
	#dropdown_usermenu a:hover{
		background-color: color-mix(in hsl, var(--color), var(--switch) 0%);
	}

	body:has(#dmholder[style*="block"]) #dmbell {
		--l: 30;
		background-color: var(--color);
	}
	body:has(#notificationholder[style*="block"]) #notifybell {
		--l: 30;
		background-color: var(--color);
	}
	body:has(#systemholder[style*="block"]) #systembell {
		--l: 30;
		background-color: var(--color);
	}
	body:has(#dropdown_usermenu[style*="block"]) .topbarusername {
		--l: 30;
		outline: 4px solid var(--color);
	}

	#notificationholder,
	#systemholder,
	#dmholder,
	#dropdown_usermenu {
		position: absolute;
		top: calc(var(--topbar-height) + var(--gutter-small));
		filter: drop-shadow(0px 0px 3px #888);
		right: 10px;
		max-height: 90vh;
		background-color: var(--color);
		color: var(--switch);
		/* transform: translateX(-75%); */
		height: fit-content;
	}
	#dropdown_usermenu{
		right: -50px;
	}
	.details {
		line-height: initial;
	}

	.dark :is(.dropdown, .details) .title {
		background-color: color-mix(in hsl, currentColor, black 90%);
	}
	.light :is(.dropdown, .details) .title {
		background-color: color-mix(in hsl, currentColor, white 75%);
	}
	:is(.dropdown, .details) .title {
		padding: var(--gutter-plus) var(--gutter-std);
		display: block;
		width: auto;
		font-size: var(--f16);
		font-family: var(--font-narrow);
	}

	.dropcontent {
		max-height: calc(100dvh - var(--topbar-height) * 3);
		overflow-y: auto;
		overflow-x: hidden;
	}

	[data-dmaantal] {
		line-height: var(--f18);
	}

	:not(#notificationAlerter) [data-dmaantal]:after {
		content: attr(data-dmaantal);
		font-family: var(--font-narrow);
		margin-left: var(--gutter-tiny);
		position: absolute;
		bottom: 2px;
		left: 0px;
		width: 25px;
		line-height: var(--f13);
		text-align: center;
		font-size: var(--f12);
		border-radius: var(--radius);
		background-color: #f5e917; /* TODO: kleur in --h --s --l --a) */
		color: #000000; /* TODO: kleur in --h --s --l --a) */
	}

	[data-dmaantal="0"]:after {
		display: none; /* geen dm's/notificaties? toon geen teller bij icoontje */
	}

	.hidden[data-dmaantal]:after {
		display: none;
	}

	/* MARKEER AL GELEZEN ANIMATIE BIJ NOTIFICATIONS */
	.markedRead {
		transform: translateX(-100%);
		transition: 50ms transform ease-in-out, 150ms height ease-in-out;
	}
	.markedRead2 {
		height: 0px;
	}

	/* DM CHAT GRID */
	.dm-grid :is(.close) {
		position: absolute;
		right: 0px;
		top: 2px;
		cursor: pointer;
		padding: 5px;
		font-size: var(--f16);
		color: var(--sienna); /* TODO: kleur in --h --s --l --a) */
		display: none;
	}
	.dm-grid:hover :is(.close) {
		display: block;
	}

	/* DM's in dropdown */
	.dm-from {
		grid-area: sentby;
		font-family: var(--font-narrow);
		font-weight: bold;
		font-size: var(--f18);
	}
	.dm-time {
		grid-area: time;
		font-size: var(--f10);
		font-family: var(--font-narrow);
	}
	.dm-contents {
		grid-area: message;
		align-self: start;
		width: 100%;
		overflow: hidden;
		justify-self: left;
		padding-top: var(--gutter-std);
		font-size: var(--font-small);
		letter-spacing: -0.015em;
		word-wrap: break-word;
		white-space: normal;
	}
	.dm-options {
		grid-area: options;
		justify-self: right;
		font-size: var(--f12);
		font-family: var(--font-narrow);
		margin-top: var(--gutter-small);
	}
	.dm-settings {
		grid-area: settings;
	}
	.dm-type {
		grid-area: soort;
	}
	.dm-ui,
	.dm-icon {
		grid-area: ui;
		--a: 0.985;
	}
	.dm-ui {
		align-self: start;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	#notificationholder .dm-icon {
		font-size: var(--f10);
		--l: 0;
		background-color: var(--color);
		padding: 6px;
		border-radius: 50%;
		color: var(--switch);
		position: absolute;
		top: 29px;
		margin-left: 26px;
		filter: drop-shadow(0px 0px 1px black);
	}
	.dark #notificationholder .dm-icon {
		filter: invert();
	}

	.notifyWarn {
		--h: 0;
		--s: 100;
		color: var(--color);
	}
	.dark .notifyWarn {
		--l: 80;
	}
	.light .notifyWarn {
		--l: 30;
	}

	i.newreg {
		--l: 0;
	}
	i.donation {
		--h: 110;
		--l: 30 !important;
		--s: 80;
	}
	i.suspiciousreg {
		--h: 0;
		--l: 45;
		--s: 90;
	}

	i:is(.newreg, .donation, .suspiciousreg, .subforumban).dm-icon {
		position: relative;
		top: 5px;
		left: 4px;
		background-color: var(--color);
		color: var(--switch);
		height: min-content;
		padding: 8px;
		border-radius: 50%;
	}
	.subforumban.dm-icon {
		--h: 0;
		--s: 100;
		--l: 70;
		color: var(--color);
		background-color: var(--switch);
	}
	.dm-options .more {
		font-size: var(--f13);
		font-family: var(--font-narrow);
		padding: var(--gutter-small);
		padding-right: 0;
		--h: 20;
		--s: 100;
		--l: 75;
		color: var(--color);
	}
	.dm-options .more:hover {
		--l: 85;
	}
	.dm-contents > i:first-child {
		display: none;
	}
	:is(.dm-contents, .dm-options) a {
		display: inline;
		color: var(--link-blue);
	}
	.dm-contents a:hover {
		background-color: transparent;
	}
	.dm-grid {
		position: relative;
		transition: transform 0.1s;
	}
	#dmholder .dm-from {
		margin-bottom: var(--gutter-small);
	}
	#dmholder .dm-ui {
		margin: var(--gutter-micro) var(--gutter-small) 0 0;
	}

	#dmholder .close {
		grid-area: close;
	}

	#dmholder .dm-grid {
		display: grid;
		border-bottom: 1px solid #dddddd; /* TODO: kleur in hsla */
		grid-gap: var(--gutter-micro);
		padding: var(--gutter-small) var(--gutter-std);
		grid-template-rows: 0 23px 10px auto 30px;
		grid-template-columns: 46px auto auto;
		grid-template-areas:
			"   soort   soort    close   "
			"	ui 		sentby 	 sentby		"
			"   ui 		time  	 time 		"
			"	.		message  message    "
			"   . 		options  options	";
	}

	#notificationholder .dm-grid,
	#systemholder .dm-grid {
		display: grid;
		border-bottom: 1px solid #dddddd;
		/* color: #000; */
		padding: var(--gutter-small) var(--gutter-wide) var(--gutter-small) var(--gutter-std);
		grid-gap: var(--gutter-micro);
		/*
	grid-template-columns: 
		20px 	46px 	auto  	 ;
	grid-template-areas: 
	"	icoon 	ui 		message  "
	"   icoon 	.		time	 ";
*/
		grid-template-columns: 58px auto;
		grid-template-areas:
			"	ui		message  "
			"   .		time	 ";
	}
	.dark #notificationholder .dm-grid,
	.dark #systemholder .dm-grid {
		border-bottom: 1px solid #4c4c4c;
	}

	#notificationholder .dm-icon,
	#systemholder .dm-icon {
		grid-area: ui;
	}

	#notificationholder .dm-ui {
		margin: var(--gutter-tiny) var(--gutter-small) 0 0;
	}

	.dm-grid[onclick]:hover {
		background-color: #d0d0d0; /* TODO: kleur in hsla) */
		cursor: pointer;
	}

	details[open] i[data-dmaantal] {
		--h: 188;
		--l: 47;
		background-color: var(--color);
	}

	@media only screen and (max-width: 480px){
	#notificationholder, #systemholder, #dmholder, #dropdown_usermenu {
		position: fixed;
		right: 0px;
		top: var(--topbar-height);
		filter: drop-shadow(0px 0px 10px black);
		max-height: calc(100dvh - var(--topbar-height) - var(--bottombar-height));
		background-color: var(--color);
		color: var(--switch);
		/* transform: translateX(-75%); */
		height: calc(100dvh - var(--topbar-height) - var(--bottombar-height));
		width: 100%;
		max-width:480px;
		border-inline: 0;
	}
	#dropdown_usermenu {
		right: auto;
		max-width: max-content;
		padding: 0 20px;
	}
	}

} /* @layer notifications */
/********** FILE: css/_grid_bottombar.css *****************/@layer menubars {
	#bottombar {
		position: fixed;
		padding: var(--gutter-small);
	}

	.mod #bottombar {
		--h: var(--h-red) !important;
		--s: var(--s-red) !important;
		--l: var(--l-red) !important;
		filter: drop-shadow(2px 4px 6px var(--color));
	}

	/* side/bottombar met up/down/mod knop */
	@media only screen and (max-width: 1067px) {
		#bottombar {
			bottom: 0;
			left: 0;
			height: var(--bottombar-height);
			width: 100vw;
		}
		#bottombar i {
			cursor: pointer;
			margin: calc(var(--gutter-micro) * -1) var(--gutter-tiny);
			padding: var(--gutter-small);
		}
		#bottombar .refresh {
			display: inline-block;
		}
	}

	@media only screen and (min-width: 1068px) {
		#bottombar {
			/* top: 0;
		left: 0;
		height: 100vh;
		width: var(--bottombar-width);
		padding-top: 50px; */
			top: calc(var(--topbar-height) + var(--gutter-small));
			left: var(--gutter-small);
			height: fit-content;
			width: var(--bottombar-width);
			padding-top: 0px;
			border-radius: 6px;
			padding-left: 7px;
			--h: var(--def-sidebarLight-h);
			--s: var(--def-sidebarLight-s);
			--l: var(--def-sidebarLight-l);
		}
		#bottombar i {
			margin: var(--gutter-small) 0 0 0;
			padding: var(--gutter-micro);
		}
		#admintools {
			margin-left: -1px !important;
		}
		#scrollbottom {
			/* position: absolute; */
			bottom: var(--gutter-small);
			left: var(--gutter-small);
		}
		#bottombar .refresh {
			display: none;
		}
	}

	@media only screen and (min-width: 1068px) and (max-width: 1419px) {
		#bottombar {
			left: var(--gutter-tiny);
			top: calc(var(--topbar-height) + 40px);
		}
	}

	@media only screen and (min-width: 1420px) {
		#bottombar {
			top: calc(var(--topbar-height) + var(--gutter-small));
		}
	}
} /* @layer menubars */
/********** FILE: css/_grid_comments.css *****************/@layer grids {
	/* body.ab-pending zolang de ab-check niet is voltooid */
	.ab-pending :is(.fok_embedded, .twitter-tweet) {
		visibility: hidden;
	}

	.p-time::after {
		content: attr(data-seconds);
		opacity: 0.3;
	}
	.p-time:hover::after {
		opacity: 0.7;
	}

	@media screen and (min-width: 800px) {
		article.post {
			display: grid;
			position: relative;
			border-top: 3px solid transparent;
			grid-gap: var(--gutter-micro);
			grid-template-rows: 0 0 0 20px;
			grid-template-columns: 10px 18px 45px 80px 30px 30px 190px 1fr 64px 150px auto 40px 32px 25px 10px;
			grid-template-areas:
				"  	anch	anch 	anch	anch	anch	anch	anch	.	 	.		.		.		.		.		.		.		"
				"  	.		pinfo 	pinfo	pinfo 	pinfo	pinfo	pinfo	pinfo 	pinfo	pinfo 	pinfo	pinfo	pinfo	pinfo	.		"
				"  	.		afk 	tt		tt 		tt		tt		tt		.	 	.		.		.		.		.		.		.		"
				"  	.		ver		nick 	nick	nick 	count	time	time	contact	eq		eq		report	tscore	thumb	.		"
				"  	.		ondertt ondertt ondertt ondertt ondertt	.		.		.		.		.		.		.		.		.		"
				"   .		thumbed thumbed	thumbed	thumbed	thumbed	thumbed	thumbed thumbed	thumbed	thumbed	thumbed	thumbed	thumbed	.		"
				"   .		ts		ts		. 		pi		post	post	post	post	post	post	post	post	post	.		"
				"   .		uicon	uicon	stars	pi		post	post	post	post	post	post	post	post	post	.		"
				"	.		uicon 	uicon 	.		.		post	post	post	post	post	post	post	post	post	.		"
				"   .  		utitle 	utitle 	utitle 	.		post	post	post	post	post	post	post	post	post	.		"
				"	.		.		.		.		.		post	post	post	post	post	post	post	post	post	.		"
				"	.		.		.		.		sig 	sig		sig		sig		sig		sig		sig		sig		sig		sig		.		";
		}
		:is(.list_user_messages, .mycroft, .userposts) article.post {
			grid-template-rows: max-content max-content max-content 20px;
		}
		.p-eq {
			margin-right: var(--gutter-wide);
			justify-self: end;
		}
		.p-count {
			grid-area: count;
		}
		.p-time::before {
			content: attr(data-long);
		}
		.txtad a {
			justify-self: center;
		}
		.txtad a:first-of-type {
			justify-self: left;
		}
		.txtad a:last-of-type {
			justify-self: right;
		}

		.txtad {
			display: grid;
			grid-template-columns: 33fr 33fr 33fr;
		}
		.embed_youtube {
			min-height: 350px;
		}
	} /* @media screen and (min-width: 800px) */

	@media screen and (min-width: 560px) and (max-width: 799px) {
		article.post {
			display: grid;
			position: relative;
			border-top: 3px solid transparent;
			grid-gap: var(--gutter-micro);
			grid-template-rows: auto;
			grid-template-columns: 0px 20px 30px 20px 160px 1fr 100px 30px 25px;
			grid-template-areas:
				"   anch		anch			anch			anch			anch			.				.				.				count			"
				"  	.			pinfo 			pinfo			pinfo 			pinfo			pinfo			pinfo			pinfo 			pinfo			"
				"   .			uicon			uicon  			ver				nick 			utitle			stars			tscore			thumb			"
				"   .			uicon			uicon			ondertt 		ondertt		 	time			eq				eq				eq				"
				"   .			thumbed 		thumbed			thumbed			thumbed			thumbed			thumbed			thumbed			thumbed			"
				" 	pi			post			post	 		post	 		post	 		post	 		post	 		post	 		post			"
				" 	.			sig				sig	 			sig	 			sig	  			sig	 			sig	 			sig	 			. 				"
				"	.			.				.				.				.				.				ts				ts				report			";
		}
		img.p-ui {
			width: 40px;
			height: 40px;
			margin-top: calc(var(--gutter-micro) * -1);
		}
		.quote {
			width: 90%;
			margin-inline: auto;
			display: block;
		}

		.p-count, article::before {
			grid-area: time!important;
			position: absolute;
			left: -40px;
			top: -18px;
		}
		.p-eq {
			justify-self: end;
			margin-right: 0;
			white-space: nowrap;
		}
		.p-stars {
			justify-self: end;
		}
		.p-time::before {
			content: attr(data-short);
		}
		.post :is(.p-nick, .p-stars, .p-tscore, .p-thumb) {
			margin-top: 4px;
			/* margin-bottom: -2px; */
		}
		.post :is(.p-ver, .p-ver.fa-crown) {
			margin-top: -3px;
		}
		.post :is(.p-ondertt, .p-count, .p-time, .p-eq, .p-utitle:not(.usercrewtag)) {
			margin-top: -18px;
		}
		.p-ts {
			justify-self: end;
			margin-right: var(--gutter-small);
		}
	} /* @media screen and (min-width: 560px) and (max-width: 799px)  */

	@media screen and (max-width: 619px) {
		.p-time::before {
			content: attr(data-short);
		}
	} /* @media screen and (max-width: 619px) */

	@media screen and (max-width: 559px) {
		article.post {
			display: grid;
			position: relative;
			border-top: 3px solid transparent;
			grid-gap: var(--gutter-micro) 0;
			grid-template-rows: max-content;
			/*
			grid-template-columns: 0px 20px 30px 20px 1fr auto 50px 30px 25px;
			grid-template-areas:
				"   anch		anch			anch			anch			anch			anch			anch			.				count			"
				"  	.			pinfo 			pinfo			pinfo 			pinfo			pinfo			pinfo			pinfo 			pinfo			"
				"   .			uicon			uicon  			ver				nick 			nick			stars			tscore			thumb			"
				"   .			uicon			uicon			ondertt 		ondertt		 	ondertt			utitle			utitle			utitle			"
				"	.			pi				time			time			time			eq				eq				eq				eq				"
				"   .			thumbed 		thumbed			thumbed			thumbed			thumbed			thumbed			thumbed			thumbed			"
				" 	.			post			post	 		post	 		post	 		post	 		post	 		post	 		post			"
				" 	.			.				.				.				.				.				.				.				.				"
				" 	.			sig				sig	 			sig	 			sig	  			sig	 			sig	 			sig	 			.		 		"
				" 	.			.				.	 			.	 			.	  			.	 			ts	 			ts	 			report	 		";
			*/
			grid-template-columns: 0px 20px 30px 20px 1fr 55px auto 50px 30px 25px;
			grid-template-areas:
			" anch anch anch anch anch anch anch anch . count "
			" . pinfo pinfo pinfo pinfo pinfo pinfo pinfo pinfo pinfo "
			" . uicon uicon ver nick nick nick stars tscore thumb "
			" . uicon uicon ondertt ondertt ondertt ondertt utitle utitle utitle "
			" . pi time time time report eq eq eq eq "
			" . thumbed thumbed thumbed thumbed thumbed thumbed thumbed thumbed thumbed "
			" . post post post post post post post post post "
			" . . . . . . . . . ."
			" . sig sig sig sig sig sig sig sig . "
			" . . . . . . . ts ts ts ";
		}
		.post :is(.p-nick, .p-stars, .p-tscore, .p-thumb) {
			margin-top: 6px;
			/* margin-bottom: -2px; */
		}
		.post :is(.p-ver, .p-ver.fa-crown) {
			margin-top: -2px;
		}
		.p-post {
			padding-top: var(--gutter-std);
		}
		.p-count, article::before {
			grid-area: none;
			color: var(--switch);
			font-size: var(--f10);
			letter-spacing: -0.005em;
			position: absolute;
			right: -1px;
			top: -14px;
			opacity: 0.4;
		}
		article.post::after {
			margin-top:-22px;
		}
		.quote {
			margin-inline: auto !important;
			width: 95% !important;
			max-width: 95% !important;
		}
		.p-ui {
			width: 40px;
			height: 40px;
		}
		.post :is(.p-ondertt, .utitle) {
			margin-top: -18px;
		}
		.post :is(.p-ts) {
			display: none;
		}
	} /* @media screen and (max-width: 559px) */

	/* GRID POSITIONS */
	.p-thumb.disabled {
		display: none;
	}
	.p-postinfo {
		grid-area: pinfo;
		font-family: var(--font-narrow);
		font-size: var(--f16);
		min-height: max-content;
	}
	.p-postinfo i.fad.fa-lock {
		color: inherit;
		font-size: var(--f11);
		top: -1px;
		position: relative;
		margin-left: var(--gutter-tiny);
	}
	.p-eq details {
		display: inline-block;
		margin-right: var(--gutter-small);
	}
	.p-eq :is([data-click="quickmenu"], summary)::before {
		content: "\f107";
		filter: opacity(0.4);
		font-family: var(--font-awesome);
		font-weight: 900;
		margin-right: var(--gutter-tiny);
		top: 2px;
		position: relative;
	}

	.p-eq {
		grid-area: eq;
		font-size: var(--f11);
		white-space: nowrap;
	}
	.p-eq span {
		cursor: pointer;
		padding: var(--gutter-tiny) var(--gutter-small);
	}
	.p-eq > span {
		margin-left: var(--gutter-micro);
	}

	.post .edit {
		font-size: var(--font-smallest);
		opacity: 0.4;
	}
	.p-ver {
		grid-area: ver;
	}
	.p-ver.fa-crown {
		margin-top: -4px;
	}
	.p-utitle {
		grid-area: utitle;
		background-color: var(--color);
		color: var(--switch);
		padding: var(--gutter-micro) var(--gutter-tiny) 0;
		width: fit-content;
		font-size: var(--f10);
		border-radius: var(--gutter-tiny);
	}
	.p-utitle.usercrewtag {
		grid-area: anch;
		border-radius: var(--gutter-small) 0 var(--gutter-tiny) 0;
		color: #fff; /* basic kleur. override via inline css en de dokleurtjes js-functie) */
		font-size: var(--f11);
		left: -8px;
		line-height: var(--f11);
		padding: var(--gutter-micro) var(--gutter-small) 1px;
		/* position: absolute;
	top: -15px; */
		margin-top: -15px;
		margin-left: -8px;
	}
	.p-nick {
		grid-area: nick;
		color: var(--switch);
		font-size: var(--font-bigger);
		letter-spacing: -0.05em;
		max-height: fit-content;
		max-width: fit-content;
		min-height: var(--font-bigger);
		overflow: hidden;
		padding-right: var(--gutter-tiny);
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.p-time {
		grid-area: time;
		color: var(--switch);
		font-size: var(--f11);
		letter-spacing: -0.005em;
		text-decoration: none;
		width: fit-content;
	}
	.p-time.isNew {
		color: var(--red); /* TODO: hsla kleur) */
	}
	.p-report {
		grid-area: report;
		font-size: var(--f11);
		justify-self: center;
		top: 2px;
	}
	.p-count {
		color: var(--switch);
		font-size: var(--f11);
		letter-spacing: -0.005em;
	}
	.p-tscore {
		color: var(--switch);
		grid-area: tscore;
		justify-self: end;
		cursor: pointer;
		height: fit-content;
	}
	.p-tscore::before {
		content: attr(data-value);
		font-size: var(--font-normal);
		font-weight: bold;
		position: relative;
	}

	.light .p-thumb {
		--h: 0;
		--s: 0;
		--l: 0;
		--a: 0.5;
	}
	.dark .p-thumb {
		--h: 0;
		--s: 0;
		--l: 100;
		--a: 0.5;
	}

	.p-thumb {
		grid-area: thumb;
		color: var(--color);
		cursor: pointer;
		justify-self: center;
		padding: var(--gutter-micro) var(--gutter-tiny);
		position: relative;
		top: -1px;
		width: fit-content;
		height: fit-content;
	}

	.p-thumb[data-noclick] {
		color: var(--midgrey);
		cursor: not-allowed;
	}
	.p-thumb[data-noclick]:hover {
		color: var(--midgrey);
	}

	.p-ui {
		grid-area: uicon;
		border-radius: var(--gutter-tiny);
	}
	.p-pi {
		grid-area: pi;
	}
	.p-ondertt {
		grid-area: ondertt;
		font-size: var(--f12);
		margin-top: -3px;
		opacity: 0.6;
		padding-bottom: var(--gutter-std);
	}

	.p-stars {
		grid-area: stars;
		color: gold;
		display: inline;
		letter-spacing: -0.6em;
		max-width: -webkit-fit-content;
		max-width: -moz-fit-content;
		max-width: fit-content;
		padding-right: var(--gutter-std);
		-webkit-text-stroke: 0.03em #222;
		/* text-stroke: 0.03em #222; */
	}
	.p-stars.noabo {
		color: var(--switch);
		height: fit-content;
		opacity: 0.15;
	}
	.p-stars:not(.noabo) {
		color: gold;
		-webkit-text-stroke: 0.03em #222;
		/* text-stroke: 0.03em #222; */ /* FIXME: when text-stroke is standard */
		letter-spacing: -0.6em;
	}
	.p-newuser {
		grid-area: stars;
		position: absolute;
		top: 43px;
		--h: 0;
		--s: 80;
		--l: 60;
		--a: 0.5;
		color: var(--color);
	}
	.p-post {
		grid-area: post;
		position: relative;
		overflow-x: hidden;
		white-space: pre;
		white-space: pre-wrap;
		white-space: pre-line;
		white-space: -pre-wrap;
		white-space: -o-pre-wrap;
		white-space: -moz-pre-wrap;
		word-wrap: break-word;
		transition: opacity 0.3s ease, height 0.3s ease;
	}
	.p-post section {
		overflow-x: initial;
		white-space: initial;
		word-wrap: initial;
	}

	#tempedit {
		display: none;
	}

	.p-post :is(.info, .success, .warning, .error, .validation) {
		width: 88%;
		max-width: 88%;
		margin: var(--gutter-tiny) auto;
		padding: 17px 0px 16px 40px;
		background-repeat: no-repeat;
		background-position: 10px center;
		position: relative;
	}

	.p-post :is(.modbreak.error) {
		padding: 0 0 var(--gutter-small) var(--gutter-small);
	}

	.p-post :is(.info, .success, .warning, .error:not(.modbreak), .validation)::before {
		font-family: var(--font-awesome);
		font-size: var(--f22);
		font-weight: 900;
		position: absolute;
		top: 5px;
		left: 0px;
		padding: var(--gutter-std);
	}

	.p-post .info {
		color: #00529b;
		background-color: #bde5f8;
	}
	.p-post .info::before {
		content: "\f30f";
	}

	.p-post .warning {
		color: #9f6000;
		background-color: #feefb3;
	}
	.p-post .warning::before {
		content: "\f321";
	}

	.p-post .success {
		color: #4f8a10;
		background-color: #dff2bf;
		/* background-image: url(success.png); */
	}
	.p-post .success::before {
		content: "\f14a";
	}

	.p-post :is(.error, .modbreak.error) {
		--h: 0;
		--s: 100;
		--l: 86;
		--a: 1;
		background-color: var(--color);
		color: #d6000b;
	}
	.p-post .error:not(.modbreak)::before {
		content: "\f2d3";
	}

	.p-post .validation {
		color: #d63301;
		background-color: #ffccba;
	}

	.p-post .validation::before {
		content: "\f2fd";
	}

	.p-post .modbreak {
		outline: 3px solid hsl(0, 100%, 47%);
		--s: 0;
		--l: 90;
		--a: 0.9;
		--switch-threshold: 20;
		background-color: var(--color);
		color: var(--switch);
		padding-top: calc(var(--gutter-wide) + var(--gutter-wide)) !important;
		position: relative;
	}

	.p-post .modbreak::before {
		content: "MODBREAK";
		position: absolute;
		top: 8px;
		left: 0;
		--h: 0;
		--s: 100;
		--l: 47;
		--a: 1;
		--switch-threshold: 90;
		background-color: var(--color);
		color: var(--switch);
		padding: var(--gutter-small) var(--gutter-small) var(--gutter-tiny) var(--gutter-small);
	}

	.p-sig {
		grid-area: sig;
		border-top: 1px dotted var(--switch);
		font-size: var(--f11);
		line-height: var(--f11);
		margin-top: var(--gutter-std);
		padding-top: var(--gutter-tiny);
		/* color: var(--mix); */
		opacity: 0.6;
	}
	.p-sig a {
		color: var(--link-blue);
	}

	/* MAIN COMMENT CSS */
	.p-post img {
		max-width: 98%;
		height: auto;
	}

	:is(.list_user_messages, .mycroft, .userposts) .p-postinfo {
		--h: 50;
		--s: 0;
		--l: 60;
		--a: 0.5;
		background-color: var(--color);
		padding: var(--gutter-small);
		margin-bottom: var(--gutter-small);
	}

	article,
	.txtad {
		font-size: var(--f13);
		border-radius: var(--gutter-small);
		padding: var(--gutter-std) var(--gutter-small);
		margin: var(--gutter-small) auto 0 auto;
		line-height: calc(var(--f13) * var(--line-height));
		margin-left: auto;
		margin-right: auto;
		max-width: var(--content-width);
		background-color: var(--color);
		color: var(--switch);
	}

	article i.fa-badge-check {
		--h: 205;
		--s: 60;
		--l: 50;
		--a: 1;
		color: var(--color);
		font-size: var(--f15);
	}

	/* closed topics / messages / reports */
	.closedmsg {
		display: none;
	}
	body.isclosed :is(.closedmsg),
	.topicadmin_reports {
		display: block;
		padding: var(--gutter-tiny) var(--gutter-small);
		font-size: var(--font-small);
		font-family: var(--font-narrow);
		margin-left: calc(var(--gutter-tiny) * -1);
		width: inherit;
	}
	body.isclosed :is(.closedmsg) {
		--h: 50;
		--s: 100;
		--l: 50;
		--switch-threshold: 50;
	}
	.topicadmin_reports {
		--h: 0;
		--s: 50;
		--l: 45;
	}

	/* LINKS ETC */
	.me {
		color: var(--color);
		--a: 0.8;
		--h: 206;
		--s: 91;
		--l: 50;
	}
	.post :is(a, .p-thumb, .p-tscore, [data-click]):hover {
		color: #b00000; /* TODO: kleur in hsla */
		opacity: 0.8; /* TODO: opacity in --a */
	}
	.dark .post :is(a, .p-thumb, .p-tscore, [data-click]):hover {
		color: #ff0000; /* TODO: kleur in hsla */
		opacity: 0.8; /* TODO: opacity in --a */
	}
	:is(.light, .dark) .p-thumb.hasVoted {
		--h: 205;
		--s: 60;
		--l: 50;
		--a: 1;
		color: var(--color);
		filter: drop-shadow(0px 0px 1px black);
	}

	:is(.light, .dark) .p-thumb.hasVoted:is(.fa-laugh, .fa-sad-tear, .fa-surprise) {
		--h: 50;
		--s: 100;
		filter: drop-shadow(0px 0px 1px #404040);
	}

	:is(.light, .dark) .p-thumb.hasVoted:is(.fa-heart, .fa-angry) {
		--h: 0;
		--s: 100;
		filter: drop-shadow(0px 0px 1px #808080);
	}

	.post :is(.p-nick, .p-count, .p-ondertt, .p-utitle) {
		font-family: var(--font-narrow);
	}

	/* QUOTES & SPOILERS*/
	.light :is(.quote, .spoilerTitle, .spoiler) {
		--l: 100;
		background-color: var(--color);
		color: var(--switch);
	}
	.light .quote :is(.spoilerTitle, .spoiler) {
		--l: 98;
		color: var(--switch);
	}
	.dark :is(.quote, .spoilerTitle, .spoiler) {
		--l: calc(var(--l-post-dark) - 5);
		background-color: var(--color);
		color: var(--switch);
	}
	.dark .quote :is(.spoilerTitle, .spoiler) {
		--l: calc(var(--l-post-dark) + 10);
	}

	.imdb-review :is(.spoilerTitle) {
		margin-top: var(--gutter-small);
	}
	.imdb-review :is(.spoilerTitle, .spoiler) {
		--a: 0.8;
		--l: 95;
		max-width: 98%;
		width: 95%;
	}

	.light :is(.isTs .isTs, .isSelf .isSelf, .isFriend .isFriend) {
		filter: brightness(0.95);
	}

	.dark :is(.isTs .isTs, .isSelf .isSelf, .isFriend .isFriend) {
		filter: brightness(1.35);
	}

	.quote {
		background-color: var(--color);
		border-radius: var(--gutter-small);
		color: var(--switch);
		display: block;
		font-size: 0.9em;
		line-height: 1.4em;
		margin: 0px var(--gutter-wide) var(--gutter-std) var(--gutter-wide);
		max-width: 80%;
		width: 80%;
		overflow-x: hidden;
		overflow-y: auto;
		padding: var(--gutter-std);
	}
	.markspoiler:not(.open) {
		outline: 2px solid gold;
	}

	.quoteTitel,
	.quoteTitle {
		display: none;
	}
	.spoilerTitle {
		font-weight: bold;
	}
	.spoilerTitle,
	.spoiler {
		cursor: pointer;
		display: block;
		position: relative;
		margin: 0 0 var(--gutter-std) var(--gutter-std);
		max-width: 80%;
		padding: var(--gutter-std);
		width: 80%;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.spoiler {
		border-top: 0;
		display: none;
		margin: 0 0 var(--gutter-std) var(--gutter-std);
		overflow-x: hidden;
		overflow-y: hidden;
		padding-top: 0;
	}

	.spoilerTitle.open,
	.openspoilers .spoilerTitle {
		border-bottom: 0;
		font-size: var(--font-smaller);
		margin-bottom: 0;
	}

	.spoilerTitle.open + .spoiler,
	.openspoilers .spoiler {
		display: block;
		max-height: 2500px;
		overflow-y: auto;
	}

	.spoilercontent {
		display: inline-flex;
		position: absolute;
		right: var(--gutter-small);
	}
	.spoilercontent > span {
		margin-left: var(--gutter-small);
	}

	.post blockquote:not(:first-of-type) {
		margin-top: var(--gutter-wide);
	}
	.miniPI {
		border: 0;
		float: left;
		height: 12px;
		width: auto;
		margin-right: var(--gutter-tiny);
		position: relative;
		top: 1px;
	}
	.quote .miniPI + b {
		display: block;
		font-size: var(--f12);
		letter-spacing: -0.02rem;
		margin-bottom: var(--gutter-small);
	}
	.miniPI + b + br {
		display: none;
	}

	/* BANNED OR DELETED */
	.isBanned .p-nick {
		text-decoration: line-through;
	}
	.isDeleted {
		--h: 0 !important;
		--s: 50 !important;
		--l: 80 !important;
	}
	article.isLive {
		border-left: 4px solid dodgerblue;
	}
	article.isDeleted:not(.mark)
		:is(.p-post, .p-ui, .p-stars, .p-pi, .p-thumb, .p-tscore, .p-ts, .p-utitle, .p-report, .p-ondertt, .p-postinfo, .p-eq, .p-sig) {
		display: none;
	}
	article.isDeleted.subforumban:not(.mark)::before {
		display: inline;
		right: var(--gutter-tiny);
		top: 8px;
		height: var(--f16);
		border-radius: var(--gutter-tiny);
		--a: 0.3;
	}
	article.isDeleted:not(.mark) {
		border: 0;
		height: 32px;
		/* margin: 1px 0; */
		padding: var(--gutter-tiny) var(--gutter-medium);
	}
	article:not(.isDeleted) + input + article.isDeleted:not(.mark) {
		margin-top: var(--gutter-small);
	}
	article.isFoe:not(.iscrew)
		:is(.p-nick, .p-verified, .p-count, .p-time, .p-post, .p-ui, .p-stars, .p-pi, .p-thumb, .p-tscore, .p-ts, .p-utitle, .p-report, .p-ondertt, [data-click="edit"], [data-click="quote"]) {
		display: none;
	}
	article.isFoe:not(.iscrew) {
		padding: 0;
		max-height: 33px;
	}

	/* POSTCOUNT */
	article::before {
		content: "#" attr(data-teller);
		grid-area: count;
		font-family: var(--font-narrow);
		font-size: var(--f10);
		margin-top: 1px;
	}
	article::after {
		content: attr(data-ondertitel);
		grid-area: ondertt;
		font-size: var(--f12);
		font-family: var(--font-narrow);
		margin-top: -3px;
		opacity: 0.6;
		padding-bottom: var(--gutter-std);
	}
	.mention a {
		color: var(--green);
		font-size: var(--font-small);
		letter-spacing: -0.05em;
		padding: 0 0 1px;
		text-decoration: none;
	}
	.dark .mention a {
		color: var(--yellow);
	}

	/* VERIFIED ICONS */
	.male {
		color: var(--male);
	}
	.female {
		color: var(--female);
	}
	.lm-verified {
		padding: 12px;
		position: absolute;
		margin-top: -11px;
		margin-left: -13px;
	}
	.p-ver {
		padding: 6px;
		margin-top: -5px;
		margin-left: -6px;
	}
	.iscrew .p-ver {
		font-size: var(--font-small);
	}

	.p-ts {
		grid-area: ts;
		--h: 205;
		--s: 40;
		--l: 50;
		background-color: var(--color);
		color: var(--switch);
		padding: 2px 8px;
		width: max-content;
		max-height: 19px;
		border-radius: var(--gutter-tiny);
		font-size: var(--font-smallest);
	}
	.dark .p-ts {
		--s: 30;
		--l: 40;
	}

	/* EDITHISTORY */
	details.edithistory {
		margin-top: var(--gutter-small);
	}
	.edithistory > summary {
		font-family: var(--font-narrow);
		margin-bottom: var(--gutter-small);
	}
	.edithistory details summary {
		font-size: var(--font-small);
	}
	.edithistory details[open] {
		margin-bottom: var(--gutter-small);
	}

	/* HASHTAGS 
 * TODO: hsla kleuren */
	.hashtag {
		padding: var(--gutter-micro) var(--gutter-small);
		border-radius: var(--gutter-small);
	}
	.dark .hashtag {
		background: hsla(0, 0%, 100%, 0.15);
	}
	.light .hashtag {
		background: hsla(0, 0%, 0%, 0.1);
	}

	/* PHP/CODE TAGS 
 * TODO: hsla kleuren */
	.forum_code,
	.codeDisplayTable {
		width: 95%;
		max-width: 95%;
		max-height: 80vh;
		height: fit-content;
		margin-left: 0px;
		display: block;
		overflow-x: auto;
		overflow-y: auto;
	}
	.forum_code {
		margin: var(--gutter-small) var(--gutter-small) var(--gutter-small) var(--gutter-micro);
		font-family: var(--font-pre);
		font-size: var(--font-small);
		white-space: pre !important;
		overflow-x: auto;
		color: hsla(0, 0%, 0%, 0.7);
	}
	table.codeDisplayTable {
		width: 650px;
		max-width: 650px;
		padding: 0;
		margin: 0;
	}
	.light table.codeDisplayTable {
		background-color: #e6e6e6;
		border: 1px solid #555;
	}
	.dark table.codeDisplayTable {
		background-color: #e6e6e6;
		border: 1px solid #555;
	}
	.codeDisplayTableLines {
		padding: var(--gutter-tiny);
		background: #ccc;
		text-align: right;
	}
	.codeDisplayTableCode {
		padding: var(--gutter-tiny);
		align-self: top;
	}

	/* LIJST MET USERS DIE EEN DUIMPJE HEBBEN GEGEVEN */
	.thumbUserList {
		--l: 50;
		--a: 0.2;
		grid-area: thumbed;
		padding: var(--gutter-std);
		background-color: var(--color);
	}
	.liketitle {
		background-color: var(--color);
		padding: var(--gutter-tiny) 0 0 0;
		margin-top: var(--gutter-medium);
		font-size: var(--f15);
	}
	.thumbUserList * {
		list-style-type: none;
	}
	.closeThumbUL {
		position: absolute;
		right: 30px;
		cursor: pointer;
	}
	.thumbUserList ul {
		max-height: 300px;
		overflow-y: auto;
	}
	.thumbUserList li {
		display: inline-block;
		width: 185px;
		font-size: 12px;
		padding: 3px 0;
	}
	.thumbUserList img {
		width: 16px;
		height: auto;
		border-radius: 50%;
		vertical-align: bottom;
		margin-right: 7px;
	}

	/* SMILIES */
	.post :is(img.rde_img_smiley) {
		position: relative;
		top: 1px;
	}

	/* Images */
	.rde_img_rightalign {
		display: block;
		margin-left: auto;
	}

	/* MOD */
	.mod .massdelete {
		display: block;
	}
	#delmsgs {
		position: relative;
		margin: var(--gutter-medium) auto;
		max-width: var(--content-width);
		width: 100%;
	}

	/* MODTOOL MASSDELETE SELECTION */
	input.massdelete {
		width: 17px;
		height: 17px;
		position: absolute;
		left: -11px;
		margin-top: 28px;
		z-index: 1;
		display: none;
	}
	.massdelete:checked + article {
		outline: 1px solid #a00;
	}

	/* IMDB REVIEWS */
	.imdb-poster {
		grid-area: poster;
		justify-self: start;
	}
	.imdb-title {
		grid-area: title;
		font-size: var(--f20);
		line-height: var(--f20);
		font-family: var(--font-narrow);
		font-weight: bold;
		margin-bottom: var(--gutter-medium);
	}
	a.imdb-title {
		color: inherit;
	}
	.imdb-scores {
		grid-area: scores;
	}
	.imdb-castdir {
		grid-area: castdir;
	}
	.imdb-plot {
		grid-area: plot;
		position: relative;
		margin-top: var(--gutter-wide);
	}
	.imdb-plot::before {
		content: "Verhaal:";
		background-color: transparent;
		position: absolute;
		top: calc(-1 * var(--gutter-small) * 2);
		font-weight: bold;
		left: 0;
	}
	.imdb-eptitle {
		grid-area: eptitle;
		font-size: var(--f15);
		font-weight: bold;
		font-family: var(--font-narrow);
		margin-top: calc(-1 * var(--gutter-small));
		margin-bottom: var(--gutter-medium);
	}
	.imdb-reviewtext {
		grid-area: reviewtext;
		font-size: var(--f13);
		padding: var(--gutter-medium) 0;
	}
	.imdb-bigscoreself {
		grid-area: bigscoreself;
		font-family: var(--font-narrow);
		justify-self: end;
		align-self: center;
		font-size: var(--f18);
		font-weight: bold;
	}

	.imdb-year {
		font-size: var(--f12);
		font-weight: normal;
		margin-left: var(--gutter-small);
	}
	.imdb-scoreself {
		display: none;
	}
	.imdb-strong {
		font-weight: bold;
	}

	.imdb-scores {
		margin-bottom: var(--gutter-medium);
	}
	.imdb-score::before {
		content: "IMDb: ";
		font-weight: bold;
	}
	.imdb-score::after {
		content: "|";
		font-weight: normal;
		margin: 0 var(--gutter-tiny);
	}
	.imdb-genre::before {
		content: "Genres: ";
		font-weight: bold;
	}
	.imdb-genre::after {
		content: "|";
		font-weight: normal;
		margin: 0 var(--gutter-tiny);
	}
	.imdb-runtime::before {
		content: "Speelduur: ";
		font-weight: bold;
	}
	.imdb-runtime::after {
		content: "|";
		font-weight: normal;
		margin: 0 var(--gutter-tiny);
	}

	.imdb-mpaa::before {
		content: "USA: ";
		font-weight: bold;
	}
	.imdb-mpaa::after {
		content: "|";
		font-weight: normal;
		margin: 0 var(--gutter-tiny);
	}
	.imdb-kijkwijzer::before {
		content: "NL: ";
		font-weight: bold;
	}

	.imdb-regie,
	.imdb-writers,
	.imdb-cast {
		display: block;
		word-break: keep-all;
	}
	.imdb-regie::before {
		content: "Regie:";
		font-weight: bold;
		float: left;
		width: 5em;
		margin-right: var(--gutter-small);
	}
	.imdb-writers::before {
		content: "Schrijvers:";
		font-weight: bold;
		float: left;
		width: 5em;
		margin-right: var(--gutter-small);
	}
	.imdb-cast::before {
		content: "Cast:";
		font-weight: bold;
		float: left;
		width: 5em;
		margin-right: var(--gutter-small);
	}
	:is(.tvshow, .episode) .imdb-cast::before {
		width: fit-content;
	}
	.imdb-links a {
		margin-right: var(--gutter-small);
	}
	.imdb-links a i.fa-imdb {
		background-color: #000;
		color: gold;
		line-height: calc(var(--f22) / 2);
		width: calc(var(--f22) / 1.25);
	}
	.imdb-links a i.fa-youtube {
		background-color: #000;
		color: red;
		line-height: calc(var(--f22) / 2);
		width: calc(var(--f22) / 1.4);
	}
	.imdb-links a i.fa-youtube::before {
		margin-left: -2px;
	}

	.light :is(.imdb-review) {
		--l: 100;
	}
	.dark :is(.imdb-review) {
		--l: 0;
	}

	.imdb-review {
		background-color: var(--color);
		margin-top: calc(-1 * var(--gutter-plus));
		padding: var(--gutter-plus);
	}
	.imdb-gridlinks {
		grid-area: links;
		font-size: var(--f22);
		justify-self: end;
		align-self: center;
		/* display: block; */
		display: none;
	}
	.imdb-links {
		grid-area: links;
		font-size: var(--f22);
		justify-self: start;
		align-self: center;
		display: block;
	}

	.imdb,
	.imdb-footer {
		display: grid;
		background-color: var(--color);
		max-width: 100%;
		margin-bottom: var(--gutter-plus);
	}
	.imdb + .imdb-footer {
		margin-top: calc(-1 * var(--gutter-plus));
	}

	.imdb.movie {
		/* grid-template-rows: 1em 0em 1.8em 3.6em auto 0; */
		grid-template-rows: auto 0px auto auto auto auto 0;
	}

	.imdb.episode {
		grid-template-rows: 1.8em 1.5em 1.8em 1.5em auto 0;
	}

	.imdb {
		row-gap: var(--gutter-tiny);
		padding: var(--gutter-plus);
		font-family: var(--font-narrow);
		font-size: var(--f14);
		grid-template-columns: 120px auto;
		grid-template-areas:
			"poster title "
			"poster eptitle "
			"poster scores "
			"poster castdir "
			"poster plot "
			"poster plot "
			"links plot ";
	}

	.imdb.tvshow {
		grid-template-rows: auto;
		grid-template-areas:
			"poster			title		"
			"poster			scores		"
			"poster			castdir		"
			"poster			plot	 	"
			"poster			plot	 	"
			"links			plot		";
	}

	.imdb-footer {
		grid-template-columns: 80px auto;
		grid-template-areas: "links bigscoreself ";
		padding: var(--gutter-medium);
		padding-bottom: var(--gutter-small);
	}

	.light :is(.imdb, .imdb-footer) {
		--l: 0;
		--a: 0.05;
	}
	.dark :is(.imdb, .imdb-footer) {
		--l: 100;
		--a: 0.08;
	}

	.light .quote :is(.imdb-review) {
		filter: brightness(0.98);
	}
	.dark .quote :is(.imdb-review) {
		filter: brightness(1.32);
	}

	:is(.spoiler, .quote) :is(.imdb-scores, .imdb-poster, .imdb-plot, .imdb-castdir, .imdb-gridlinks) {
		display: none;
	}
	.quote :is(.imdb) {
		display: block;
	}

	/* STAR RATING */
	:root {
		--star-size: var(--f16);
		--star-color: #fff;
		--star-background: #fc0;
	}

	.Stars {
		--percent: calc(var(--rating) / 10 * 100%);
		display: inline-block;
		font-size: var(--star-size);
		font-family: Times;
		line-height: 1;
		margin-right: var(--gutter-medium);
		position: relative;
		top: -1px;
	}
	.Stars::before {
		content: "\f005\f005\f005\f005\f005\f005\f005\f005\f005\f005";
		font-family: var(--font-awesome);
		font-weight: 900;
		letter-spacing: -0.05em;
		background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: drop-shadow(0px 0px 1px black);
	}

	#img_preview img {
		max-width: 150px;
		max-height: 150px;
		margin-top: var(--gutter-small);
		outline: dashed 1px;
	}

	:is(.list_messages, .post_topic) :is(#image, #saveimg) {
		display: none;
	}

	/* SOCIAL MEDIA */
	.fok_embedded.insta {
		max-height: 510px;
		overflow-y: auto;
		width: fit-content;
	}

	.fok_embedded.fb {
		--l: 100;
		background-color: var(--color);
		border-radius: var(--radius);
		overflow: auto;
		padding: 5px;
		width: fit-content;
	}

	.fok_embedded.facebook_post {
		aspect-ratio: 500 / 615;
		padding: 0;
		width: 380px;
	}

	.fok_embedded.facebook_photo {
		aspect-ratio: 380 / 476;
		padding: 0;
		width: 380px;
	}

	.fok_embedded.facebook_video {
		aspect-ratio: 380 / 476;
		padding: 0;
		width: 380px;
	}

	.fok_embedded.fb > iframe {
		height: min(100% - 5px);
		width: 100%;
	}

	.fok_embedded.tiktok {
		display: inline-block;
		width: fit-content;
	}

	blockquote.tiktok-embed {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: fit-content;
	}

	.fok_embedded.noConsent {
		--a: 0.5;
		--l: 80;
		display: grid;
		background: var(--color);
		border: dashed 2px var(--color);
		font-family: var(--font-narrow);
		font-size: var(--f14);
		max-width: 98%;
		padding: var(--gutter-wide);
		grid-template-columns: 40px 1fr;
		grid-template-areas:
			"logo txt"
			"buttons buttons";
	}

	img.fok_embedded.noConsent {
		display: none;
	}

	.fok_embedded :is(button, .button) {
		--h: 200;
		--s: 100;
		--l: 35;
		--a: 1;
		background-color: var(--color);
		color: var(--switch);
		margin: var(--gutter-small) var(--gutter-tiny) 0 0;
		font-family: var(--font-narrow);
		font-size: var(--f13);
		padding: var(--gutter-small) var(--gutter-small);
		min-height: 33px;
		min-width: 200px;
		display: block;
		text-align: center;
	}

	:is(.fok_embedded, .fok_youtube) i {
		grid-area: logo;
		font-size: var(--f20);
		margin-top: var(--gutter-tiny);
	}

	:is(.fok_embedded, .fok_youtube) .noconsent_txt {
		grid-area: txt;
	}

	:is(.fok_embedded, .fok_youtube) .noconsent_buttons {
		grid-area: buttons;
		margin-top: var(--gutter-std);
		justify-self: center;
	}

	:is(.fok_embedded, .fok_youtube) .button {
		position: relative;
		top: -1px;
	}

	:is(.fok_embedded, .fok_youtube) :is(button, .button):hover {
		color: var(--switch);
		--l: 40;
	}

	.p-count > i.fa-ban {
		position: absolute;
		margin-left: -13px;
		margin-top: 2px;
	}
	#dialog .titel {
		font-family: var(--font-narrow);
		font-size: var(--f22);
		margin-bottom: var(--gutter-wide);
	}
	#dialog > span {
		display: block;
		width: fit-content;
		max-width: 98%;
		margin: var(--gutter-small) 0;
	}
	dialog .reportheader :is(span, input, b) {
		display: inline !important;
		width: fit-content;
	}
	#dialog :is(input, textarea, select) {
		border: 1px solid #bbb;
		font-size: var(--f13);
		padding: var(--gutter-tiny);
		display: block;
		margin: var(--gutter-small) 0;
	}
	#dialog .close {
		position: absolute;
		right: -2px;
		top: -2px;
		font-size: calc(var(--f14) + var(--f14));
	}
	#dialog :is(section, .box) {
		--l: 25;
		background-color: var(--color);
		color: var(--switch);
	}

	article.subforumban::before {
		font-size: var(--f10);
		--h: 0;
		--s: 90;
		--l: 30;
		--a: 0.7;
		background-color: var(--color);
		color: var(--switch);
		content: "subforumban tot " attr(data-banuntil);
		width: fit-content;
		padding: 0 var(--gutter-small);
		border-radius: 0 var(--gutter-tiny) 0 var(--gutter-small);
		bottom: 0px;
		position: absolute;
	}
	span.fa_tools {
		--h: 202;
		--s: 40;
		--l: 40;
		--a: 1;
		background-color: var(--color);
		color: var(--switch);
		display: block;
	}
	span.pop-listitem[data-click*="ban"] {
		--h: 0;
		--s: 60;
		--l: 30;
		background-color: var(--color);
		color: var(--switch);
	}
	body:not(.useriscrew) i.p-ver {
		margin-top: 2px!important;
	}
	body:not(.useriscrew) i.p-ver::after {
		content: " ";
		height: 16px;
		display: block;
	}

	.useriscrew i.p-ver::after {
		content: "\f107";
		background-color: var(--color);
		color: var(--switch);
		top: -7px;
		padding: 1px 1px 2px 2px;
		position: relative;
		left: -6px;
		border-radius: 50% 50%;
		width: 7px;
		height: 7px;
		display: inline-block;
		overflow: hidden;
		font-size: var(--f10);
		--a: 0.8;
		--l: 80;
		--s: 0;
		--h: 0;
	}

	.p-report a {
		padding: 3px 4px;
	}

	/* sneakpeek */
	#dialog :is(.p-post) {
		padding: var(--gutter-std);
		border-radius: var(--gutter-small);
		--l: 5;
	}

	/* text area actief? ads onzichtbaar */
	body.shownsidebar :is(.inScreen, ins, #inScreen) *,
	body:has(textarea:focus) :is(.inScreen, ins, #inScreen) * {
		display: none !important;
		/* transform: translateY(100vw) !important; */
	}

	/* in memoriam */
	.inmemoriam {
		filter: grayscale();
	}

	/* TOUCH DEVICES */
	@media (pointer: coarse) {
		.p-post {
			font-size: var(--f14);
		}
	}
} /* @layer grids */
/********** FILE: css/_grid_index.css *****************/@layer grids {
	@media only screen and (min-width: 1068px) {
		/* FORUMINDEX */
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual.desc) {
			grid-template-areas: "	.	hoofdgroep	hoofdgroep	desc1		desc2		desc3		desc4 		";
		}
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual) {
			grid-template-columns: 0px 35px 380px 248px 60px 60px 105px;
			grid-template-areas:
				" .		afkorting	forumtitel	moderators	topics		postcount	lastpost 	"
				" .		.			forumdesc 	.		 	. 			.			.			"
				" .		.			subforums	subforums	subforums	subforums	subforums  	";
		}
		:is(.forumindex, .list_archives) :is(.hoofdgroep) {
			margin: 0 auto var(--gutter-wide) auto;
			padding: 0;
			width: var(--content-width);
		}
	}

	@media only screen and (min-width: 831px) and (max-width: 1067px) {
		/* FORUMINDEX */
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual.desc) {
			grid-template-areas: "	.	hoofdgroep	hoofdgroep	desc1		desc2		desc3		desc4 		";
		}
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual) {
			/* grid-template-columns:	  0px	35px		380px		248px		60px		60px		105px;
		grid-template-areas: 	" .		afkorting	forumtitel	moderators	topics		postcount	lastpost 	"
							 	" .		.			subforums	subforums	subforums	subforums	.	    	"; */
			grid-template-columns: 0px 35px auto 248px 60px 60px 60px;
			grid-template-areas:
				" .		afkorting	forumtitel	moderators	topics		postcount	lastpost	"
				" .		.			forumdesc 	.		 	.		 	.			.			"
				" .		.			subforums	subforums	subforums	.			.			";
		}
	}

	@media only screen and (min-width: 580px) and (max-width: 830px) {
		/* FORUMINDEX */
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual.desc) {
			grid-template-columns: 0px 35px auto 60px 60px 60px;
			grid-template-areas: "	.	hoofdgroep	hoofdgroep	 desc2		desc3		desc4 		";
		}
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual):not(.desc) {
			/* grid-template-columns:	  0px	35px		380px		248px		60px		60px		105px;
            grid-template-areas: 	" .		afkorting	forumtitel	moderators	topics		postcount	lastpost 	"
                                    " .		.			subforums	subforums	subforums	subforums	.	    	"; */
			grid-template-columns: 0px 35px auto 60px 60px 60px;
			grid-template-areas:
				" .		afkorting	forumtitel	topics		postcount	lastpost"
				" .		.			moderators	moderators 	.			.		"
				" .		.			forumdesc 	. 			.		 	.		"
				" .		.			subforums	subforums	subforums	.		";
		}
		:is(.forumindex, .list_archives) :is(.ga-moderators, .ga-desc1) {
			display: none !important;
		}
		.ga-desc1 {
			grid-area: hoofdgroep;
		}
		.ga-desc1::before {
			content: "moderator(s):";
		}
	}

	@media only screen and (min-width: 420px) and (max-width: 579px) {
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual.desc) {
			grid-template-columns: 0px 10px auto 42px 60px 65px;
			grid-template-areas:
				"	.	hoofdgroep	hoofdgroep	hoofdgroep  hoofdgroep	hoofdgroep "
				"	.	.			.			desc2		desc3		desc4";
		}
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual):not(.desc) {
			grid-template-columns: 0px 10px auto 42px 60px 65px;
			grid-template-areas:
				" .		afkorting	forumtitel	topics 		postcount 	lastpost	"
				" .		.			moderators	moderators	.			.			"
				" .		.			forumdesc 	forumdesc	forumdesc 	.			"
				" .		.			subforums	subforums	subforums	subforums	";
		}
		:is(.forumindex, .list_archives) :is(.ga-moderators, .ga-desc1) {
			display: none !important;
		}
		:is(.forumindex, .list_archives) :is(.ga-hoofdgroep) {
			font-size: var(--font-bigger);
		}
		.ga-afkorting {
			transform: scale(0.75) rotate(-90deg);
			align-self: baseline !important;
			justify-self: center;
			top: 7px;
		}
	}

	@media only screen and (max-width: 419px) {
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual.desc) {
			grid-template-columns: 0px 10px auto 65px;
			grid-template-areas:
				"	.	hoofdgroep	hoofdgroep	 hoofdgroep 	"
				"	.	.	 		.			 desc4	 		";
		}
		:is(.forumindex, .list_archives) :is(.grid-forumlist-individual):not(.desc) {
			grid-template-columns: 0px 10px auto 65px;
			grid-template-areas:
				" .		afkorting	forumtitel	lastpost	"
				" .		.			moderators	.			"
				" .		.			forumdesc	.			"
				" .		.			subforums	subforums	";
		}
		:is(.forumindex, .list_archives) :is(.ga-topiccount, .ga-moderators, .ga-postcount, .ga-desc1, .ga-desc2, .ga-desc3) {
			display: none !important;
		}
		:is(.forumindex, .list_archives) :is(.ga-desc4) {
			margin-top: -16px;
		}
		:is(.forumindex, .list_archives) :is(.ga-hoofdgroep) {
			font-size: var(--font-bigger);
		}
		.ga-afkorting {
			transform: scale(0.75) rotate(-90deg);
			align-self: baseline !important;
			justify-self: center;
			top: 7px;
		}
	}

	/* GRID AREAS */
	/* STANDAARD GRID AREA DESCRIPTION POSITIONING */
	.ga-desc1 {
		grid-area: desc1;
	}
	.ga-desc2 {
		grid-area: desc2;
	}
	.ga-desc3 {
		grid-area: desc3;
	}
	.ga-desc4 {
		grid-area: desc4;
	}
	.ga-desc5 {
		grid-area: desc5;
	}
	.ga-desc6 {
		grid-area: desc6;
	}
	.ga-desc7 {
		grid-area: desc7;
	}
	.ga-desc8 {
		grid-area: desc8;
	}
	.ga-afkorting {
		grid-area: afkorting;
	}
	.ga-forumtitel {
		grid-area: forumtitel;
		padding: var(--gutter-small) 0;
		font-size: var(--f16);
		width: fit-content;
		font-weight: bold;
		max-width: 100%;
		font-family: var(--font-narrow);
	}
	.ga-moderators {
		grid-area: moderators;
	}
	.ga-lastpost {
		grid-area: lastpost;
	}
	/* GRID HACKS */
	.ga-center {
		align-self: center;
		justify-self: center;
		place-self: center;
	}
	.ga-hcenter {
		justify-self: center;
	}
	.ga-vcenter {
		align-self: center;
	}
	.ga-left {
		justify-self: left;
		align-self: center;
	}
	.ga-right {
		justify-self: right;
	}
	.ga-bar {
		grid-area: bar;
	}
	.ga-topiccount {
		grid-area: topics;
	}
	.ga-postcount {
		grid-area: postcount;
	}
	:is(.forumindex, .list_archives) .ga-hoofdgroep {
		margin-bottom: var(--gutter-std);
	}

	.ga-forumdesc {
		grid-area: forumdesc;
		font-size: var(--f11);
		--l: 60;
		color: var(--color);
		margin-top: -8px;
		line-height: var(--f12);
		margin-bottom: 7px;
	}
	.ga-subforums {
		grid-area: subforums;
		margin: var(--gutter-tiny) 0;
	}

	/* FORUMINDEX EN TOPICLISTS */
	.subforums a:hover {
		text-decoration: underline;
	}
	.subforums a {
		font-size: var(--f11) !important;
		font-weight: bold;
		padding: 4px 2px;
	}
	.subforums {
		font-size: var(--f11);
	}
	.desc {
		font-size: var(--f10);
	}
	.hoofdgroep {
		margin: 0 0 var(--gutter-wide) 0;
		padding: 0;
	}
	.hoofdgroep h1 {
		margin-left: var(--gutter-std);
	}

	/* OTHER */
	.grid.desc {
		font-family: var(--font-narrow);
	}
	.grid-topiclist .ga-titel {
		line-height: var(--f18);
	}
	.grid-topiclist .ga-lastpost {
		line-height: normal;
	}
	.ga-topicstarter {
		justify-self: left;
	}

	.filter {
		white-space: nowrap;
	}

	/* POSITIONING */
	:is(.forumindex, .list_archives) :is(.ga-desc2, .ga-desc3) {
		display: inline;
		justify-self: center;
	}

	:is(.forumindex, .list_archives) :is(.ga-desc1, .ga-desc4) {
		display: inline;
		justify-self: start;
	}

	:is(.forumindex, .list_archives) :is(.ga-postcount) {
		display: inline;
	}

	:is(.forumindex, .list_archives) :is(.ga-postcount, .ga-topiccount, .ga-lastpost, .ga-moderators, .ga-topicstarter) {
		font-size: var(--font-smaller);
	}
	:is(.forumindex, .list_archives) .subforums .afkorting {
		font-size: 8px;
		height: 15px;
		vertical-align: bottom;
		width: 25px;
	}
	:is(.forumindex, .list_archives) .subforums a.subforum {
		font-size: var(--font-smallest);
		margin-right: var(--gutter-small);
	}
	/* SPOTLIGHT FORUMS */
	[data-spotlight] {
		--h: 62;
		--s: 80;
		--l: 80;
		background-color: var(--color);
		color: var(--switch);
	}
	a.ga-hoofdgroep .fa-hand-point-right {
		margin-left: var(--gutter-tiny);
		font-size: var(--f16);
	}
} /* @layer grids */
/********** FILE: css/_grid_main.css *****************/@layer grids {
	#mainWrap {
		margin-top: calc(var(--topbar-height) + var(--gutter-small));
	}
	@media only screen and (min-width: 1420px) {
		body.sidebar #mainWrap {
			display: grid;
			grid-gap: var(--gutter-std);
		}

		body.sidebar.leftside #mainWrap {
			grid-template-columns: var(--content-sidebar) var(--content-width);
			grid-template-areas: "	sidebar		content		";
		}
		body.sidebar.rightside #mainWrap {
			grid-template-columns: var(--content-width) var(--content-sidebar);
			grid-template-areas: "	content		sidebar		";
		}
	}
} /* @layer grids */
/********** FILE: css/_grid_notes.css *****************/@layer grids {
	/* GRIDS | FIXME: ipv portrait en landscape gebruik maken van min-width en max-width */
	@media only screen and (max-width: 1067px) {
		.no-time {
			justify-self: right;
			align-self: top;
		}
		.no-fuzzydate {
			justify-self: right;
		}
		.no-postcount {
			justify-self: right;
			margin-right: var(--gutter-small);
		}
		.no-content {
			padding: var(--gutter-small);
		}
		.no-actions {
			text-align: center;
		}

		.notesheader {
			display: grid;
			margin: var(--gutter-small) auto 0 auto;
			padding: var(--gutter-small);
			border-top: 3px solid transparent;
			position: relative;
			width: 96%;
			grid-gap: 3px 0;
			grid-template-columns: var(--gutter-small) 20px 30px 20px 1fr auto 50px 25px 35px var(--gutter-small);
			grid-template-areas:
				"   anchor	usericon	member 		member 			member 			.				.				.				.			.					"
				"   .	  	usericon	memberinfo	memberinfo		memberinfo		memberinfo		memberinfo		memberinfo		memberinfo	.					"
				"	.		.			.			.				.				.				.				.				.			.					";
		}
		.notesgrid {
			display: grid;
			margin: var(--gutter-small) auto 0 auto;
			padding: 0;
			border-top: 3px solid transparent;
			position: relative;
			width: 96%;
			max-width: 96%;

			grid-gap: 3px 0;
			grid-template-columns: 0px minmax(180px, 1fr) auto 35px 0px;
			grid-template-areas:
				"	anchor 		notedby 			fuzzydate	fuzzydate	.		"
				"	.			usernoted			time		postcount	.		"
				"	.			notecontent 		notecontent notecontent . 		"
				"	.			actions  			actions  	actions  	.		";
		}
	}

	@media only screen and (min-width: 1068px) {
		.no-time {
			margin-top: var(--gutter-plus);
			margin-left: var(--gutter-small);
		}
		.no-postcount {
			background-color: #ddd;
			padding: var(--gutter-small);
		}
		.no-actions {
			justify-self: right;
		}
		.notesheader {
			display: grid;
			margin: var(--gutter-small) auto 0 auto;
			padding: 6px 6px 6px 3px;
			border-top: 3px solid transparent;
			position: relative;
			width: 96%;
			grid-gap: 3px 0;
			grid-template-columns: 0px 60px 30px 20px 1fr auto 50px 25px 35px;
			grid-template-areas:
				"   anchor	usericon	member 			member 			member 			.				.				.				.				"
				"   .	  	usericon	memberinfo		memberinfo		memberinfo		memberinfo		memberinfo		memberinfo		memberinfo		"
				"	.		.			.				.				.				.				.				.				.				";
		}
		.notesgrid {
			display: grid;
			margin: var(--gutter-small) auto 0 auto;
			padding: var(--gutter-small);
			border-top: 3px solid transparent;
			position: relative;
			width: 96%;

			grid-gap: 3px 0;
			grid-template-columns: 0px 180px 1fr auto 35px 0px;
			grid-template-areas:
				"	anchor 		notedby 	fuzzydate		actions 	postcount	.		"
				"	.			usernoted	notecontent		notecontent	.			.		"
				"	.			time 		notecontent		notecontent	.			.		"
				"	.			.			notecontent 	notecontent	.			.		";
		}
	}

	/* GRID AREAS */
	.no-member {
		grid-area: member;
		font-family: var(--font-narrow);
		letter-spacing: -0.003em;
		font-size: var(--font-bigger);
	}
	.no-usericon {
		grid-area: usericon;
	}
	.no-memberinfo {
		grid-area: memberinfo;
	}

	.no-fuzzydate {
		grid-area: fuzzydate;
		font-family: var(--font-narrow);
		letter-spacing: -0.03em;
		font-size: var(--font-normal);
		padding: var(--gutter-small);
	}
	.no-notedby {
		grid-area: notedby;
		font-family: var(--font-narrow);
		letter-spacing: -0.003em;
		font-size: var(--font-bigger);
		font-weight: bold;
		padding: var(--gutter-small);
	}
	.no-postcount {
		grid-area: postcount;
		font-family: var(--font-narrow);
		font-size: var(--font-smaller);
	}
	.no-usernoted {
		grid-area: usernoted;
		font-family: var(--font-narrow);
		font-size: var(--font-normal);
		margin-left: var(--gutter-small);
	}
	.no-time {
		grid-area: time;
		font-family: var(--font-narrow);
		font-size: var(--font-small);
	}
	.no-content {
		grid-area: notecontent;
		margin-top: var(--gutter-plus);
		color: #ff6060;
		font-size: var(--f14);
	}
	.note-linktotopic {
		padding: 0 0 var(--gutter-small);
	}
	.no-actions {
		grid-area: actions;
		font-family: var(--font-narrow);
		letter-spacing: -0.03em;
		font-size: var(--font-normal);
		padding: var(--gutter-small);
	}

	/* MISC STYLINGS */
	.no-actions span {
		cursor: pointer;
		margin-left: var(--gutter-wide);
	}
	.no-actions span:first-of-type {
		margin-left: 0;
	}
	.no-actions span:hover {
		color: var(--red);
	}

	.no-content .miniPI {
		float: left;
		margin-right: var(--gutter-micro);
	}
	.no-content .miniPI + b {
		letter-spacing: -0.03em;
	}

	.no-edit {
		font-size: var(--font-smaller);
		margin-top: var(--gutter-plus);
		font-family: var(--font-narrow);
		font-weight: bold;
		border-top: 1px dotted;
	}

	.editnote,
	.canceleditnote {
		display: inline-block;
		margin: 0 var(--gutter-tiny) 0 0;
	}

	.notesgrid {
		--h: 0;
		--s: 0;
		background-color: var(--color);
		color: var(--switch);
	}
	.light .notesgrid {
		--l: 90;
	}
	.dark .notesgrid {
		--l: 20;
	}
	.isban {
		--h: 0;
		--s: 60;
		--l: 90;
	}
	.notesgrid.isban:before {
		padding: var(--gutter-micro) var(--gutter-small);
		content: "BAN";
		position: absolute;
		top: -20px;
		left: -1px;
		font-family: var(--font-narrow);
	}
	.notesgrid.isban {
		border: 1px solid var(--color);
		margin-top: 23px;
	}
	.notesgrid.isfp:before {
		--h: 210;
		--s: 100;
		--l: 80;
		background-color: var(--color);
		color: var(--switch);
		padding: var(--gutter-micro) var(--gutter-small);
		content: "FRONTPAGE";
		position: absolute;
		top: -20px;
		left: -1px;
		font-family: var(--font-narrow);
	}
	.notesgrid.isforum:before {
		background-color: var(--color);
		color: var(--switch);
		padding: var(--gutter-micro) var(--gutter-small);
		content: "FORUM";
		position: absolute;
		top: -20px;
		left: -1px;
		font-family: var(--font-narrow);
	}

	.notesgrid.isfp {
		border: 1px solid hsla(210, 100%, 80%, 1);
		margin-top: 23px;
	}
	.notesgrid.isforum {
		border: 1px solid var(--color);
		margin-top: 23px;
	}
	.notesgrid.isdeleted {
		opacity: 0.6;
	}
	.no-notesinputfield {
		margin: var(--gutter-small) auto 0 auto;
		padding: var(--gutter-small);
		border-top: 3px solid transparent;
		position: relative;
		width: 96%;
		max-width: 96%;
		overflow: hidden;
	}
	.no-fuzzydate,
	.no-notedby,
	.no-postcount,
	.no-actions {
		background-color: var(--color);
		color: var(--switch);
	}
	.light :is(.no-fuzzydate, .no-notedby, .no-postcount, .no-actions) {
		filter: brightness(90%);
		--l: 88;
	}

	.dark :is(.no-fuzzydate, .no-notedby, .no-postcount, .no-actions) {
		filter: brightness(90%);
		--l: 20;
	}

	.no-location {
		font-family: var(--font-narrow);
		color: var(--white);
		background-color: var(--sienna);
		padding: 0 var(--gutter-micro);
		display: block;
		width: fit-content;
		margin: calc(var(--gutter-std) * -1) 0 var(--gutter-std) 0;
	}

	.old {
		opacity: 0.5;
	}
	.noteswarn {
		margin: 0 var(--gutter-medium) 80px var(--gutter-medium);
	}
} /* @layer grids */
/********** FILE: css/_grid_other.css *****************//* topicreports */
@layer grids {
	.reportheader {
		margin-top: var(--gutter-small);
		display: inline-block;
		padding: 0 var(--gutter-tiny);
		font-family: var(--font-narrow);
		width: 100%;
		grid-template-areas: 20px 20px 1fr auto;
	}
	#topicreports {
		overflow: hidden;
	}
	#topicreports .readby {
		float: right;
		margin-top: 3px;
	}
	#topicreports summary {
		list-style: none;
	}
	#topicreports summary::webkit-details-marker {
		display: none;
	}
	#topicreports section {
		background-color: var(--color);
		padding: var(--gutter-std);
		font-size: 90%;
		width: 90vw;
		max-width: 650px;
	}

	/* mycroft */
	body:is(.mycroft, .userposts) .lm-postnr {
		grid-area: lmpostnr;
		justify-self: left;
	}
	body:is(.mycroft, .userposts) .mycroft .p-editquote {
		grid-area: lmpostnr;
		margin-right: -4px;
	}

	/* ERRORPAGE */
	article.error {
		margin: 0 var(--gutter-medium);
		font-size: var(--f16);
		font-weight: bold;
		font-family: var(--font-narrow);
	}
	article.error a {
		color: var(--blue);
	}
} /* @layer grids */
/********** FILE: css/_grid_quickreply.css *****************/@layer grids {
	.editorbar--section {
		display: inline-block;
	}

	/* GRID AREAS */
	@media only screen and (max-width: 419px) {
		#quickreply {
			width: 98%;
			margin: 0 auto;
			padding: var(--gutter-small) 0;
			display: grid;
			grid-gap: var(--gutter-micro);
			grid-template-rows: 5px;
			grid-template-columns: 10px auto auto 90px 10px;
			grid-template-areas:
				"	.		.				.				.			.		"
				"	.		adminmenu		.				.			.		"
				"	.		topictitel		topictitel		topictitel	.		"
				"	. 		forum 			forum			forum		.		"
				"	. 		filters 		filters			filters		.		"
				"	.		status			status			status		.		"
				"	.		robots			robots			robots		.		"
				"	.		chain			chain			chain		.		"
				"	.		posticons		posticons		posticons	.		"
				"	.		topicwarn		topicwarn		topicwarn	.		"
				"	.		mod				mod				mod			.		"
				"	.		editorbar		editorbar		editorbar	.		"
				"	.		addpoll			addpoll			addpoll		.		"
				"	.		textarea	 	textarea		textarea	.	 	"
				"	.		notice			notice			notice		.		"
				"	.		buttons			buttons			buttons		.		"
				"	.		disclaimer 		disclaimer 		disclaimer	.		"
				"	.		emoticons		emoticons		emoticons	.		"
				"	.		logboek			logboek			logboek		.		";
		}
		.qr-adminmenu {
			justify-self: end;
		}
		.qr-forum {
			max-width: 89%;
		}
		.qr-robots {
			justify-self: left;
		}
		.editorbar--section {
			margin-right: var(--gutter-small);
		}
		.editorbar--section:nth-of-type(3):after {
			content: "\a";
			white-space: pre;
		}
		.editorbar icon {
			padding: var(--gutter-small) var(--gutter-tiny);
		}
		.editorbar icon:hover {
			background-color: #999;
		}
		.qr-editorbar {
			margin-top: var(--gutter-wide);
			width: auto;
			min-width: 300px;
			max-width: 100%;
			margin-bottom: -4px;
			padding: 0 var(--gutter-tiny);
		}
		.qr-logboek {
			margin-top: var(--gutter-wide);
			font-size: var(--font-small);
		}
		.qr-notice {
			grid-area: notice;
		}
		.qr-posticons {
			margin: var(--gutter-std) 0 0 0;
		}
		.qr-topicwarn {
			margin-top: var(--gutter-std);
			font-family: var(--font-narrow);
		}
		.qr-buttons button {
			margin-bottom: var(--gutter-tiny);
		}
		textarea#form_message,
		textarea[id^="Q"] {
			width: 100%;
			min-width: 300px;
			max-width: 100%;
			min-height: 180px;
			height: 180px;
			max-height: 400px;
		}
		.topicWarningContents {
			width: 100%;
			min-width: 300px;
			max-width: 100%;
			height: auto;
			padding: var(--gutter-small);
			font-size: var(--font-normal);
			font-family: var(--font-narrow);
		}
		.topicWarningContents + .topicnoticeEdit {
			position: relative;
		}
	}

	@media only screen and (min-width: 420px) and (max-width: 549px) {
		#quickreply {
			width: 98%;
			margin: 0 auto;
			padding: var(--gutter-small) 0;
			display: grid;
			grid-gap: var(--gutter-micro);
			grid-template-rows: 5px;
			grid-template-columns: 10px auto auto 90px 10px;
			grid-template-areas:
				"	.		.				.				.			.		"
				"	.		topictitel		topictitel		adminmenu	.		"
				"	. 		forum 			forum			forum		.		"
				"	. 		filters 		filters			filters		.		"
				"	.		status			robots			robots		.		"
				"	.		chain			chain			chain		.		"
				"	.		posticons		posticons		posticons	.		"
				"	.		topicwarn		topicwarn		topicwarn	.		"
				"	.		mod				mod				mod			.		"
				"	.		editorbar		editorbar		editorbar	.		"
				"	.		addpoll			addpoll			addpoll		.		"
				"	.		textarea	 	textarea		textarea	.	 	"
				"	.		notice			notice			notice		.		"
				"	.		buttons			buttons			buttons		.		"
				"	.		disclaimer 		disclaimer 		disclaimer	.		"
				"	.		emoticons		emoticons		emoticons	.		"
				"	.		logboek			logboek			logboek		.		";
		}
		.qr-adminmenu {
			justify-self: end;
		}
		.qr-robots {
			justify-self: left;
		}
		.editorbar--section {
			margin-right: var(--gutter-small);
		}
		.editorbar--section:nth-of-type(3):after {
			content: "\a";
			white-space: pre;
		}
		.editorbar icon {
			padding: var(--gutter-small) var(--gutter-tiny);
		}
		.editorbar icon:hover {
			background-color: #999;
		}
		.qr-editorbar {
			margin-top: var(--gutter-wide);
			width: auto;
			min-width: 300px;
			max-width: 100%;
			margin-bottom: -4px;
			padding: 0 var(--gutter-tiny);
		}
		.qr-logboek {
			margin-top: var(--gutter-wide);
			font-size: var(--font-small);
		}
		.qr-notice {
			grid-area: notice;
		}
		.qr-posticons {
			margin: var(--gutter-std) 0 0 0;
		}
		.qr-topicwarn {
			margin-top: var(--gutter-std);
			font-family: var(--font-narrow);
		}
		.qr-buttons button {
			margin-bottom: var(--gutter-tiny);
		}
		textarea#form_message,
		textarea[id^="Q"] {
			width: 100%;
			min-width: 300px;
			max-width: 100%;
			min-height: 180px;
			height: 180px;
			max-height: 400px;
		}
		.topicWarningContents {
			width: calc(100% - 30px);
			min-width: 300px;
			max-width: 100%;
			height: auto;
			padding: var(--gutter-small);
			font-size: var(--font-normal);
			font-family: var(--font-narrow);
		}
		.topicWarningContents + .topicnoticeEdit {
			position: absolute;
			right: -2px;
		}
	}

	@media only screen and (min-width: 550px) and (max-width: 779px) {
		#quickreply {
			width: 98%;
			margin: 0 auto;
			padding: var(--gutter-small) 0;
			display: grid;
			grid-gap: var(--gutter-micro);
			grid-template-rows: 5px;
			grid-template-columns: 10px 180px auto 90px 10px;
			grid-template-areas:
				"	.		.				.				.			.		"
				"	.		topictitel		topictitel		adminmenu	.		"
				"	. 		forum 			forum			forum		.		"
				"	. 		filters 		filters			filters		.		"
				"	.		status			robots			chain		.		"
				"	.		posticons		posticons		posticons	.		"
				"	.		topicwarn		topicwarn		topicwarn	.		"
				"	.		mod				mod				mod			.		"
				"	.		editorbar		editorbar		editorbar	.		"
				"	.		addpoll			addpoll			addpoll		.		"
				"	.		textarea	 	textarea		textarea	.	 	"
				"	.		notice			notice			notice		.		"
				"	.		buttons			buttons			buttons		.		"
				"	.		disclaimer 		disclaimer 		disclaimer	.		"
				"	.		emoticons		emoticons		emoticons	.		"
				"	.		logboek			logboek			logboek		.		";
		}
		.qr-adminmenu {
			justify-self: end;
		}
		.qr-robots {
			justify-self: left;
		}
		.editorbar--section {
			margin-right: var(--gutter-small);
		}
		.editorbar--section:nth-of-type(3):after {
			content: "\a";
			white-space: pre;
		}
		.editorbar icon {
			padding: var(--gutter-small) var(--gutter-tiny);
		}
		.editorbar icon:hover {
			background-color: #999;
		}
		.qr-editorbar {
			margin-top: var(--gutter-wide);
			width: auto;
			min-width: 300px;
			max-width: 100%;
			margin-bottom: -4px;
			padding: 0 var(--gutter-tiny);
		}
		.qr-logboek {
			margin-top: var(--gutter-wide);
			font-size: var(--font-small);
		}
		.qr-notice {
			grid-area: notice;
		}
		.qr-posticons {
			margin: var(--gutter-std) 0 0 0;
		}
		.qr-topicwarn {
			margin-top: var(--gutter-std);
			font-family: var(--font-narrow);
		}
		.qr-buttons button {
			margin-bottom: var(--gutter-tiny);
		}
		textarea#form_message,
		textarea[id^="Q"] {
			width: 100%;
			min-width: 300px;
			max-width: 90vw;
			min-height: 180px;
			height: 180px;
			max-height: 400px;
		}
		.topicWarningContents {
			width: calc(100% - 30px);
			min-width: 300px;
			max-width: 100%;
			height: auto;
			padding: var(--gutter-small);
			font-size: var(--font-normal);
			font-family: var(--font-narrow);
		}
		.topicWarningContents + .topicnoticeEdit {
			position: absolute;
			right: -2px;
		}
	}

	/* portrait */
	@media only screen and (min-width: 780px) and (max-width: 1067px) {
		#quickreply {
			width: 98%;
			margin: 0 auto;
			padding: var(--gutter-small) 0;
			display: grid;
			grid-gap: var(--gutter-micro);
			grid-template-rows: 5px;
			grid-template-columns: 10px auto auto 1fr auto 10px;
			grid-template-areas:
				"	.		.				.				.				.			.		"
				"	.		topictitel		topictitel		topictitel		adminmenu	.		"
				"	. 		forum 			forum			filters			.			.		"
				"	.		status			robots			chain			.			.		"
				"	.		posticons		posticons		posticons		posticons	.		"
				"	.		topicwarn		topicwarn		topicwarn		topicwarn	.		"
				"	.		mod				mod				mod 			mod			.		"
				"	.		editorbar		editorbar		editorbar 		editorbar	.		"
				"	.		addpoll			addpoll			addpoll			addpoll		.		"
				"	.		textarea	 	textarea		textarea		textarea	.	 	"
				"	.		notice			notice			notice			notice		.		"
				"	.		buttons			buttons			buttons			buttons		.		"
				"	.		disclaimer 		disclaimer 		disclaimer 		disclaimer	.		"
				"	.		emoticons		emoticons		emoticons		emoticons	.		"
				"	.		logboek			logboek			logboek			logboek		.		";
		}
		select.qr-robots {
			max-width: 220px;
			height: 34px;
			justify-self: end;
		}
		.editorbar--section {
			margin-right: var(--gutter-small);
		}
		.editorbar--section:nth-of-type(3):after {
			content: "\a";
			white-space: pre;
		}
		.editorbar icon {
			padding: var(--gutter-small) var(--gutter-tiny);
		}
		.editorbar icon:hover {
			background-color: #999;
		}
		.qr-editorbar {
			margin-top: var(--gutter-wide);
			width: auto;
			min-width: 300px;
			max-width: 100%;
			margin-bottom: -4px;
			padding: 0 var(--gutter-tiny);
		}
		.qr-logboek {
			margin-top: var(--gutter-wide);
			font-size: var(--font-small);
		}
		.qr-notice {
			grid-area: notice;
		}
		.qr-posticons {
			margin: var(--gutter-std) 0 0 0;
		}
		.qr-topicwarn {
			margin-top: var(--gutter-std);
			font-family: var(--font-narrow);
		}
		.qr-buttons button {
			margin-bottom: var(--gutter-tiny);
		}
		textarea#form_message,
		textarea[id^="Q"] {
			width: 100%;
			min-width: 300px;
			max-width: 100%;
			min-height: 180px;
			height: 180px;
			max-height: 400px;
		}
		.topicWarningContents {
			width: calc(100% - 30px);
			min-width: 300px;
			max-width: 100%;
			height: auto;
			padding: var(--gutter-small);
			font-size: var(--font-normal);
			font-family: var(--font-narrow);
		}
		.topicWarningContents + .topicnoticeEdit {
			position: absolute;
			right: -2px;
		}
	}

	@media only screen and (min-width: 1068px) {
		body.isclosed #form_buttons:before {
			content: "\f023";
			position: absolute;
			left: -173px;
			top: -100px;
			font-size: 170px;
			font-family: "Font Awesome 5 Pro";
			font-weight: 900;
			opacity: 0.2;
		}
		#quickreply {
			padding: var(--gutter-small) 0;
			display: grid;
			grid-gap: var(--gutter-micro);
			margin-top: var(--gutter-small);
			grid-template-rows: 5px;
			/* grid-template-columns: 10px 180px 240px 120px auto 240px 10px;
		grid-template-areas:
			"	.				.				.				.				.			.			.		"
			"	.				adminmenu		topictitel		topictitel		topictitel	topictitel	.		"
			"	. 				mod				forum 			forum			filters		filters		.		"
			"	.				.				status			chain			robots		robots		.		"
			"	.				.				posticons		posticons		posticons	posticons	.		"
			"	.				.				topicwarn		topicwarn		topicwarn	topicwarn	.		"
			"	.				.				editorbar		editorbar		editorbar 	editorbar 	.		"
			"	.				.				addpoll			addpoll			addpoll		addpoll		.		"
			"	.				.	 			textarea	 	textarea		textarea	textarea	.	 	"
			"	.				.				notice			notice			notice		notice		.		"
			"	.				.				buttons			buttons			buttons		buttons		.		"
			" 	.				.				disclaimer 		disclaimer 		disclaimer 	disclaimer 	.		"
			"	.				.				emoticons		emoticons		emoticons	emoticons	.		"
			"	.				.				logboek			logboek			logboek		logboek		.		"; */

			grid-template-columns: 10px 180px 180px 211px auto 240px 72px;
			grid-template-areas:
				"	.				.				.				.				.			.			.		"
				"	.				adminmenu		topictitel		topictitel		topictitel	topictitel	.		"
				"	. 				mod				forum 			forum			filters		filters		.		"
				"	.				.				status			robots			chain		.			.		"
				"	.				.				posticons		posticons		posticons	posticons	.		"
				"	.				.				topicwarn		topicwarn		topicwarn	topicwarn	.		"
				"	.				.				editorbar		editorbar		editorbar 	editorbar 	.		"
				"	.				.				addpoll			addpoll			addpoll		addpoll		.		"
				"	.				.	 			textarea	 	textarea		textarea	textarea	.	 	"
				"	.				.				notice			notice			notice		notice		.		"
				"	.				.				buttons			buttons			buttons		buttons		.		"
				" 	.				.				disclaimer 		disclaimer 		disclaimer 	disclaimer 	.		"
				"	.				.				emoticons		emoticons		emoticons	emoticons	.		"
				"	.				.				logboek			logboek			logboek		logboek		.		";
		}
		#quickreply :is(.qr-chain, .qr-forum, .qr-filters, .qr-status, .qr-robots) {
			/* display: inline !important; */
		}

		/* specific styling */
		.editorbar--section {
			margin-right: var(--gutter-std);
		}
		.editorbar icon {
			padding: var(--gutter-small) var(--gutter-tiny);
		}
		.editorbar icon:hover {
			background-color: #999;
		}
		.qr-editorbar {
			margin-top: var(--gutter-wide);
			width: 720px;
			min-width: 720px;
			max-width: 720px;
			margin-bottom: -4px;
			padding: 0 var(--gutter-tiny);
		}
		.qr-logboek {
			margin-top: var(--gutter-wide);
			font-size: var(--font-small);
		}
		.qr-notice {
			grid-area: notice;
			color: white;
			background-color: red;
			width: 720px;
			min-width: 720px;
			max-width: 720px;
			padding: var(--gutter-std);
			font-size: var(--font-small);
		}
		.qr-posticons {
			margin: var(--gutter-std) 0 0 0;
		}
		.qr-topicwarn {
			margin-top: var(--gutter-std);
			font-family: var(--font-narrow);
		}
		textarea#form_message,
		textarea[id^="Q"] {
			width: 720px;
			min-width: 720px;
			max-width: 720px;
			min-height: 180px;
			height: 180px;
			max-height: 80vh;
		}
		input#form_titel {
			width: 720px;
			min-width: 720px;
			max-width: 720px;
		}
		.topicWarningContents,
		#topicwarn {
			width: 720px;
			min-width: 720px;
			max-width: 720px;
			height: auto;
			padding: var(--gutter-small);
			font-size: var(--font-normal);
			font-family: var(--font-narrow);
		}

		.qr-mod {
			position: absolute;
			margin-top: 57px;
			margin-left: 9px;
			font-family: var(--font-narrow);
		}
		.topicWarningContents + .topicnoticeEdit {
			position: absolute;
			right: -28px;
		}
	}

	/* GRID AREAS */
	.qr-emoticons {
		grid-area: emoticons;
		max-width: 95%;
	}
	.qr-topictitel {
		grid-area: topictitel;
		max-width: 90vw;
	}
	.qr-editorbar {
		grid-area: editorbar;
		font-size: var(--f15);
		--s: 0;
		--l: 85;
	}
	.qr-forum {
		grid-area: forum;
	}
	.qr-filters {
		grid-area: filters;
		max-width: max-content;
	}
	.qr-status {
		grid-area: status;
	}
	.qr-chain {
		grid-area: chain;
	}
	.qr-textarea {
		grid-area: textarea;
	}
	.qr-buttons {
		grid-area: buttons;
		position: relative;
	}
	.qr-robots {
		grid-area: robots;
		max-width: 220px;
		justify-self: end;
	}
	.qr-addpoll {
		grid-area: addpoll;
	}
	.qr-notice {
		grid-area: notice;
	}
	.qr-logboek {
		grid-area: logboek;
	}
	.qr-mod {
		grid-area: mod;
	}
	.qr-adminmenu {
		grid-area: adminmenu;
	}
	.qr-posticons {
		grid-area: posticons;
	}
	.qr-topicwarn {
		grid-area: topicwarn;
	}
	.qr-emoticons {
		grid-area: emoticons;
	}
	.qr-disclaimer {
		grid-area: disclaimer;
		font-family: var(--font-narrow);
		font-size: var(--font-small);
	}
	.qr-disclaimer > a {
		color: var(--blue);
	}
	.qr-adminmenu {
		width: fit-content;
		padding: var(--gutter-small);
		cursor: pointer;
	}
	.qr-posticons {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(30px, 45px));
		max-width: 95%;
	}
	.qr-posticons span {
		white-space: nowrap;
		line-height: 25px;
	}

	/* MASS DELETE EN NOTEBUTTONS WORDEN PAS ZICHTBAAR ALS DE MODFUNCTIE IN DE BOTTOMBAR ACTIEF IS */
	#massdelbutton,
	#massnotebutton {
		display: none;
	}
	body.mod:has(.massdelete:checked) :is(#massdelbutton, #massnotebutton) {
		display: revert;
	}
	/* PREVIEW (main en edit) */
	#mainPreview {
		border: 2px solid var(--green) !important;
		border-top: var(--font-biggest) solid var(--green) !important;
	}
	#mainPreview:before {
		content: "PREVIEW";
		background-color: var(--green);
		position: absolute;
		margin-top: -18px;
		color: var(--white);
		font-weight: bold;
		font-family: var(--font-narrow);
		margin-left: var(--gutter-plus);
	}
	.editpreview {
		padding: var(--gutter-small) 0;
	}
	.editpreview:before {
		content: "PREVIEW";
		display: block;
		background-color: var(--green);
		color: var(--white);
		padding: var(--gutter-tiny);
		margin-bottom: var(--gutter-small);
		font-family: var(--font-narrow);
	}

	/* FORM ELEMENTS */
	#quickreply {
		background-color: var(--color);
		border-radius: var(--radius);
		color: var(--switch);
		margin: var(--gutter-medium) auto;
		max-width: var(--content-width);
		width: 100%;
	}
	.postreply .editorbar {
		display: block;
		padding: var(--gutter-tiny);
		margin: 0;
	}
	.postreply textarea {
		margin-bottom: var(--gutter-small);
	}
	button.smiliesbutton {
		padding-bottom: 5px;
		position: relative;
		top: 3px;
	}
	button.navreplyfield {
		margin: var(--gutter-small) auto;
		display: block;
		background: #888;
		color: white;
		padding: var(--gutter-std);
		border: 1px solid #808080;
		cursor: pointer;
	}
	i.forumfilterIcon,
	i.topicChainIcon {
		position: absolute;
		margin: 10px var(--gutter-small);
	}
	input#chainInput {
		padding-left: var(--gutter-wide);
		max-width: 96px;
		height: 34px;
	}
	select#form_filter {
		padding-left: var(--gutter-wide);
		max-width: max-content;
		height: 34px;
	}
	select#topicstatus {
		width: 175px;
	}

	/* SMILIES */
	.emoticons img:hover {
		filter: drop-shadow(0px 0px 1px #444);
	}
	.emoticons img {
		padding: var(--gutter-micro) var(--gutter-tiny);
		cursor: pointer;
	}

	/* ADD POLL | TODO: grid van maken */
	#pollInputHolder {
		font-size: var(--f14);
	}
	#pollInputHolder :is(input,option,select,textarea)::placeholder {
		font-family: var(--font-narrow);
	}
	#pollinput i {
		position: relative;
		top: 2px;
		margin-left: var(--gutter-small);
		cursor: pointer;
		-webkit-user-select: none; /* Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */
		user-select: none; /* Standard */
	}
	#pollinput i:hover {
		color: #000;
	}
	#expireCheckbox:checked + #expireInputs {
		display: block !important;
		margin-top: 8px;
	}
	.poll {
		display: block;
		background-color: #07d;
		color: #eee;
		padding: 8px;
		max-width: 60px;
		text-align: center;
	}
	.pollHolder {
		font-family: var(--font-narrow);
		--h: 220;
		--s: 75;
		--l: 44;
		--a: 0.9;
		background-color: var(--color);
		color: var(--switch);
		padding: var(--gutter-wide) var(--gutter-std) var(--gutter-medium);
		max-width: 95%;
		user-select: none;
		position: relative;
		margin: 5px 0 18px 0;
		border-radius: var(--gutter-small);
	}
	.pollHolder:before {
		content: "poll";
		--l: 65;
		--a: 0.8;
		background-color: var(--color);
		position: relative;
		color: var(--switch);
		padding: var(--gutter-micro) var(--gutter-small);
		margin: 0px var(--gutter-std) 0 var(--gutter-tiny);
		text-transform: uppercase;
		border-radius: var(--gutter-small);
		font-size: var(--f12);
		top: -1px;
	}
	.pollTitle {
		font-size: var(--font-bigger);
	}
	.makepollbuttonHolder {
		display: block;
	}
	#savePollButton,
	#cancelPollButton {
		display: inline-block !important;
		padding: var(--gutter-small);
		margin: 14px 1px 6px;
		display: block;
		font-family: var(--font-narrow);
		font-size: var(--f12);
		width: fit-content;
		text-align: center;
		background-color: var(--color);
		color: var(--switch);
		cursor: pointer;
		border: 1px solid color-mix(in hsl, currentColor, var(--color) 20%);
	}
	#savePollButton:hover,
	#cancelPollButton:hover {
		background-color: #caecff;
	}
	#pollInputHolder {
		width: 720px;
		max-width: 100%;
		background-color: #07c;
		color: #eee;
		padding: var(--gutter-std);
	}
	input.pollTitel {
		width: 80%;
	}
	input.pollOption {
		width: 75%;
	}
	.invalidpoll {
		padding: 8px;
		background-color: #ddd;
		color: #800;
		width: 200px;
		border: 1px solid;
	}
	ul.pollOptions {
		list-style-type: none;
		display: list-item;
		padding: var(--gutter-medium) var(--gutter-small);
	}
	li.castpollvote {
		padding: 6px 12px 4px 12px;
		cursor: pointer;
	}
	li.castpollvote:hover {
		background-color: #08e;
	}
	li.showpollOption {
		max-width: 80%;
		position: relative;
		display: block;
	}
	.pollinfo a {
		color: var(--white);
	}
	.pollinfo {
		font-size: var(--font-smaller);
		border-top: 1px dashed;
		padding: 2px 0 0 0;
		color: var(--midgrey);
		text-align: right;
		margin-top: var(--gutter-std);
	}
	.pollbar {
		height: 14px;
		min-width: 3px;
		width: 3px;
		transition: width 0.4s 1s ease-in-out;
		min-width: 3px;
		margin-bottom: 12px;
		background-color: #eee;
		position: relative;
	}
	.pollbar:after {
		content: attr(data-votes);
		font-size: 12px;
		color: #eee;
		background-color: transparent;
		position: absolute;
		right: -68px;
	}
	.pollHolder .showpollOption:first-of-type .pollbar {
		background-color: var(--yellow);
	}
	.totalvotecount {
		float: left;
	}
	#topicwarn {
		background-color: var(--white);
		color: black;
	}
	#topicwarn.hide {
		position: absolute;
		visibility: hidden;
	}
	.topicnoticeEdit + .topicWarningContents {
		display: none;
	}
	.topicWarningContents:empty {
		visibility: hidden;
	}
	.topicWarningContents:not(:empty)::before {
		content: "voordat je reageert:";
		font-weight: bold;
		display: block;
		margin-bottom: var(--gutter-small);
	}
	#topicwarn.hide + .topicWarningContents {
		display: block;
	}
	.topicWarningContents {
		--h: 10;
		--s: 100;
		--l: 80;
	}
	.qr-topicwarn {
		position: relative;
	}
	i.qr-topictitel {
		margin-top: 7px;
		margin-left: -20px;
	}
	i.qr-topictitel.locked {
		color: gold;
		filter: drop-shadow(0px 0px 0px black);
	}
	i.qr-topictitel.deleted {
		color: var(--red);
	}

	.topicnoticeEdit {
		/* position: absolute; */
		/* right: -28px; */
		/* top: 0; */
		--l: 100;
	}
	.topicnoticeEdit::after {
		content: " Plaats topicpointer";
	}
	.topicWarningContents + .topicnoticeEdit {
		top: 0;
	}
	#topicwarn:not(.hide) + .topicnoticeEdit {
		display: none;
	}

	.topicWarningContents + .topicnoticeEdit::after {
		content: "";
	}

	textarea#form_message,
	textarea[id^="Q"] {
		padding: var(--gutter-small) var(--gutter-tiny);
	}

	/* touch devices */
	@media (pointer: coarse) {
		textarea {
			font-size: var(--f16);
			padding: var(--gutter-std) var(--gutter-tiny);
		}
		.editorbar {
			margin-bottom: var(--gutter-small);
		}
	}
} /* @layer grids */
/********** FILE: css/_grid_settings.css *****************/@layer settings {
	/* TODO: kleuren van edit_prefspagina */
	.dark .showonlight {
		display: none;
	}
	.light .showondark {
		display: none;
	}

	input[type="color"] {
		width: var(--gutter-wide);
		height: var(--gutter-wide);
		display: inline-flex;
		padding: 0px;
		margin-right: var(--gutter-plus);
		border: none;
		outline: none;
		-webkit-appearance: none;
	}

	/* edit_prefs */
	.grid-editprefs {
		font-family: var(--font-narrow);
		grid-template-rows: minmax(25px, auto);
		grid-template-columns: 0px 1fr auto 70px 0px;
		grid-template-areas:
			" 	. 	option 	setting setting . "
			" 	. 	desc 	desc 	. 		.";
	}
	.prefsbox {
		font-family: var(--font-narrow);
		padding: var(--gutter-wide);
		margin-bottom: var(--gutter-medium);
	}
	.light .prefsbox {
		--hue: calc(var(--hue-grey) * 1);
		--sat: calc(var(--sat-grey) * 1);
		--lum: calc(var(--lum-grey) * 1.9);
	}
	.dark .prefsbox {
		--hue: calc(var(--hue-grey) * 1);
		--sat: calc(var(--sat-grey) * 1);
		--lum: calc(var(--lum-grey) * 0.3);
	}
	.prefsbox h1 {
		margin-bottom: var(--gutter-std);
	}
	.ep-option {
		grid-area: option;
		align-self: center;
		font-weight: bold;
		font-size: var(--f16);
	}

	.ep-setting {
		grid-area: setting;
		justify-self: right;
	}
	.ep-desc {
		grid-area: desc;
		font-size: var(--font-normal);
		margin-bottom: 9px;
		margin-top: -7px;
	}
	.light .ep-desc {
		color: #888;
	}
	.dark .ep-desc {
		color: #aaa;
	}
	.ep-setting .spinner {
		float: right;
		margin-right: -30px;
		margin-top: 6px;
		font-size: var(--font-biggest);
	}
	.edit_prefs .custom-input input {
		width: 60px;
	}
	.edit_prefs .custom-input {
		font-family: var(--font-narrow);
		font-size: var(--f16);
		border: 1px solid var(--color);
		--l: 75;
		width: fit-content;
		height: fit-content;
		margin-right: var(--gutter-medium);
	}
	.edit_prefs i.fa-undo {
		font-size: var(--f13);
		position: relative;
		top: -3px;
		left: -6px;
	}

	@media screen and (max-width: 799px) {
		.ep-option {
			width: fit-content;
			line-height: var(--f18);
			padding-bottom: var(--gutter-small);
		}
		.edit_prefs .custom-input {
			font-size: var(--f14);
		}
		.grid-editprefs {
			grid-template-areas:
			" 	. 	option 	setting setting . "
			" 	. 	desc 	desc 	desc	.";
		}
	}
} /* @layer settings */
/********** FILE: css/_grid_sidebar.css *****************/@layer menubars {
	@media only screen and (max-width: 1419px) {
		body.sidebar #sidebar {
			width: var(--content-sidebar);
			height: calc(100vh - var(--topbar-height));
			position: fixed;
			z-index: 9999999999999999;
			overflow-y: auto;
			top: calc(var(--topbar-height));
		}
		#sidebartoggle.shownsidebar + #sidebar {
			left: 0;
			max-width: 100vw;
		}
		#sidebartoggle:not(.shownsidebar) + #sidebar {
			left: calc(var(--content-sidebar) * -1);
		}
		body.sidebar.shownsidebar #mainWrap {
			left: calc(var(--content-sidebar));
			position: relative;
		}
		#mainWrap,
		#sidebar,
		#sidebartoggle {
			transition: left 0.3s ease-in-out;
			left: 0;
			position: relative;
		}
		body.sidebar #mainWrap {
			display: grid;
			justify-content: center;
			grid-gap: var(--gutter-micro);
			grid-template-columns: 96vw;
			grid-template-areas: " content ";
		}
		#sidebartoggle {
			border-radius: 0 6px 6px 0;
		}
		body.sidebar #sidebartoggle {
			display: inline;
			position: fixed;
			top: calc(var(--topbar-height) + var(--gutter-tiny));
			padding: var(--gutter-small) 14px;
			background-color: var(--color);
			--h: var(--def-sidebarLight-h);
			--s: var(--def-sidebarLight-s);
			--l: var(--def-sidebarLight-l);
			color: var(--switch);
		}
		#sidebartoggle.shownsidebar {
			left: var(--content-sidebar);
			transform: rotate(180deg);
			border-radius: 6px 0 0 6px;
		}
	} /* @media only screen and (max-width: 1419px) */

	@media only screen and (min-width: 1420px) {
		/* SIDEBAR */
		.sidebar #pageWrapper {
			grid-area: content;
		}
		.sidebar #sidebar {
			grid-area: sidebar;
			width: var(--content-sidebar);
			max-width: var(--content-sidebar);
			overflow-x: hidden;
			height: calc(100vh - var(--topbar-height) - (var(--gutter-small) * 2));
			position: sticky;
			top: calc(var(--topbar-height) + var(--gutter-small));
			border-radius: var(--radius);
		}
	} /* @media only screen and (min-width: 1420px) */

	/* STYLES */
	/* TODO: kleuren in -h -s -l -a */
	#sidebartoggle {
		display: none;
	}
	#sidebar a {
		display: block;
		font-size: var(--font-small);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#sidebar {
		--h: calc(var(--hue-grey) * 1);
		--s: calc(var(--sat-grey) * 1);
		font-family: var(--font-narrow);
		background-color: var(--color);
		color: var(--switch);
	}
	.newlive,
	.live {
		transition: all 300ms;
	}
	.newlive :is(.sidebar_afkorting, i) {
		--h: 60;
		--s: 100;
		--l: 52;
		color: var(--color);
	}
	.opacity0 {
		opacity: 0;
	}
	.light #sidebar {
		--l: calc(var(--lum-grey) * 0.5);
	}

	.dark #sidebar {
		--l: calc(var(--lum-grey) * 0.4);
	}

	div[id*="sidebar_"] {
		padding: 0 var(--gutter-std);
	}
	#sidebar a.sidebar_title {
		font-size: var(--font-big);
		margin: var(--gutter-plus) 0 0;
		border-bottom: 1px solid;
		margin-bottom: var(--gutter-tiny);
	}
	#sidebar a.sidebar_title:hover {
		color: inherit;
	}
	div[id*="sidebar_"] a i:last-of-type {
		margin-right: var(--gutter-tiny);
		font-size: 70%;
		width: 25px;
		justify-content: center;
		display: inline-flex;
		background-color: #555;
		line-height: 12px;
	}
	.sidebar_afkorting {
		font-size: 70%;
		width: 25px;
		background-color: #555;
		display: inline-flex;
		justify-content: center;
		line-height: 11px;
		align-content: center;
		margin-right: var(--gutter-tiny);
		padding: 1px 0 0 1px;
	}

	.light #sidebar .topictag,
	.dark #sidebar .topictag {
		background-color: #444;
		color: #aaa;
		font-size: var(--font-smaller);
		margin-right: var(--gutter-tiny);
		top: 0px;
		position: relative;
		padding: 0 var(--gutter-tiny);
	}
	#sidebar i {
		display: inline-flex;
	}
} /* @layer menubars */
/********** FILE: css/_grid_topbar.css *****************/@layer menubars {
	/*
 * TOP BAR GRID AREA POSITIONING 
 */

	#topbar details {
		display: inline-block;
	}
	details > summary {
		list-style: none;
	}
	details > summary::-webkit-details-marker {
		display: none;
	}

	.tb-links {
		grid-area: links;
		max-height: calc(var(--topbar-height) + var(--gutter-medium));
	}
	.tb-links,
	.tb-info {
		white-space: nowrap;
		overflow: hidden;
	}

	.tb-userinfo {
		grid-area: userinfo;
		padding: 0 var(--gutter-plus);
		text-align: right;
	}

	#topbar {
		align-content: center;
		font-size: var(--f13);
		font-weight: normal;
		max-height: var(--topbar-height);
		padding: var(--gutter-small);
		position: relative;
	}

	.topbar {
		line-height: var(--topbar-height);
		min-height: var(--topbar-height);
		max-height: var(--topbar-height);
		/* overflow: hidden; */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999913;

		.fa,
		.fas,
		.fad {
			font-weight: normal;
		}
	}

	@scope (.topbar) to (details) {
		.topbar :is(a, i, span) {
			color: var(--switch);
			font-style: normal;
			font-weight: normal;
			text-decoration: none;
		}
		.topbar #foklogo {
			padding: var(--gutter-tiny) 0;
		}
		.topbar :is(a, i):hover {
			/*--h: 205;*/
			--s: 60;
			--l: 40;
			background-color: var(--color);
		}

		#topbar :is(a, .a):not(#foklogo) {
			font-family: var(--font-narrow);
			padding: 20px var(--gutter-small);
		}

		/* FOKLOGO */
		#foklogo {
			font-size: 45px;
			margin-top: 0;
			max-height: var(--topbar-height);
			padding: 0;
			float: left;
		}
		.foklogo:before {
			font-family: var(--font-fok);
			content: "\e630";
		}

		#topbarlinks {
			top: 3px;
			position: relative;
		}
	}

/* FIREFOX ONLY UNTIL @SCOPE COMPATIBILITY */
.moz .topbar :is(a, i, span) {
	color: var(--switch);
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}
.moz .topbar #foklogo {
	padding: var(--gutter-tiny) 0;
}
.moz .topbar :is(a, i):hover {
	/*--h: 205;*/
	--s: 60;
	--l: 40;
	background-color: var(--color);
}

.moz #topbar :is(a, .a):not(#foklogo) {
	font-family: var(--font-narrow);
	padding: 20px var(--gutter-small);
}

.topbarusername {
	font-family: var(--font-narrow);
	margin-left: var(--gutter-tiny);
	padding: var(--gutter-small);
	width: 38px;
	height: 38px;
	padding: 0;
	vertical-align: middle;
	border-radius: 38px;
	margin: 0 var(--gutter-tiny);
}

/* FOKLOGO */
.moz #foklogo {
	font-size: 45px;
	margin-top: 0;
	max-height: var(--topbar-height);
	padding: 0;
	float: left;
}
.moz .foklogo:before {
	font-family: var(--font-fok);
	content: "\e630";
}

.moz #topbarlinks {
	top: 3px;
	position: relative;
}
/* END FIREFOX ONLY */




	#notificationAlerter {
		position: absolute;
		top: 54px;
		--h: 0;
		--s: 90;
		--l: 50;
		--a: 1;
		background-color: var(--color);
		color: var(--switch);
		display: none;
		right: 8px;
		border-radius: var(--gutter-small);
	}

	#notificationAlerter > i {
		margin: 0;
	}

	.newNotifications #notificationAlerter {
		display: flex;
	}

	:is(.shownsidebar, .shownsidebar.newNotifications) #notificationAlerter {
		display: none;
	}

	#notificationAlerter i:first-of-type {
		border-radius: var(--gutter-small) 0 0 var(--gutter-small);
	}
	#notificationAlerter i:last-of-type {
		border-radius: 0 var(--gutter-small) var(--gutter-small) 0;
	}

	#notificationAlerter :is(i[data-dmaantal]):after {
		content: attr(data-dmaantal);
		font-family: var(--font-narrow);
		margin-left: var(--gutter-tiny);
		position: relative;
		width: auto;
		text-align: left;
		font-size: var(--f12);
		background-color: var(--color);
		color: var(--switch);
	}

	#notificationAlerter :is(#dmbell, #notifybell, #pmbell, #systembell) {
		font-size: var(--f16);
		position: relative;
		padding: 10px var(--gutter-small);
	}

	#notificationAlerter::before {
		content: "\f04b";
		font-family: var(--font-awesome);
		font-weight: 600;
		position: absolute;
		top: -26px;
		right: 19px;
		color: var(--color);
		transform: rotate(-90deg);
		font-size: var(--f14);
	}

	/* TOPBAR MAIN GRID */
	#topbar {
		display: grid;
		grid-gap: var(--gutter-micro);
		grid-template-columns: auto auto;
		grid-template-areas: "	links	userinfo		";
	}

	#leftHamburger {
		display: none;
	}

	.notif {
		display: block;
		height: 35px;
		background: #ff493e;
		color: #fff;
		filter: drop-shadow(0px 0px 5px rgba(233, 89, 80, 0.6));
		position: fixed;
		top: 58px;
		right: 105px;
		border-radius: 7px;
	}

	.notif:after {
		content: "";
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #e95950;
		position: absolute;
		left: 25%;
		top: -7px;
		-webkit-transform: translateX(-65%);
		transform: translateX(-65%);
	}

	.notifItem {
		display: inline-block;
		color: #fff;
		font-family: sans-serif;
		font-weight: 600;
		padding: 8px 5px;
		margin-right: 0px;
	}

	.topbarusername:hover {
		--l: 30;
		outline: 4px solid var(--color);
	}

	/* TOPBAR CSS VIND JE IN inc_head_inlinestyles */
	/* < 1024px */
	@media only screen and (max-width: 1023px) {
		#leftHamburger {
			display: inline;
			margin-left: var(--gutter-small);
			padding: 20px var(--gutter-small);
			position: relative;
			top: -1px;
			max-height: var(--topbar-height);
			overflow: hidden;
		}
		#leftHamburger::before {
			position: relative;
			top: 4px;
		}
		.burger a {
			margin: 0;
			padding: 0 !important;
			display: block;
			line-height: 21px;
		}
		.burger {
			display: none;
			position: fixed !important;
			left: 80px;
			width: fit-content;
			background-color: var(--color);
			height: fit-content;
			top: 38px !important;
			padding: var(--gutter-small) var(--gutter-medium);
			--a: 1;
			z-index: 999999999999;
		}
		#leftHamburger.opened + .burger {
			display: block;
		}

	} /* @media only screen and (max-width: 1023px) */

	@media only screen and (min-width: 1024px) {
		#topbar .burger {
			display: inline !important;
		}
	} /* @media only screen and (min-width: 1024px) */

	@media only screen and (min-width: 1024px) and (max-width: 1419px) {
	} /* @media only screen and (max-width: 1419px) */

	/* >=1420px */
	@media only screen and (min-width: 1420px) {
		#topbar {
			width: var(--content-width);
			margin: 0 auto;
			padding: 0 var(--gutter-std) 0 0px;
		}
		.sidebar #topbar {
			width: var(--content-width-full);
		}
		#topbar .burger {
			display: inline;
		}
		.topbar :is(a, i, span) {
			margin-top: -1px;
		}
	} /* @media only screen and (min-width: 1420px) */

	@media only screen and (max-width: 1419px) {
		.topbar :is(a, i, span) {
			margin-top: -1px;
		}
	}

	/* TOUCH DEVICES */
	@media (pointer: coarse) {
		.dm-grid :is(.close) {
			display: inline-block;
		}
	}
} /* @layer menubars */
/********** FILE: css/_grid_topiclists.css *****************//* ALLE GRIDZOOI VOOR DE INDEX EN TOPICLIJSTEN */
@layer grids {
	.tl-pageselect {
		padding: 0;
		font-size: var(--f11);
		--l: 96;
		margin-inline: var(--gutter-tiny);
		cursor: pointer;
		position: absolute;
		right: -5px;
		top: 8px;
		background-color: var(--color);
	}

	.bookmarkDescription {
		font-size: var(--f11);
		margin-top: -17px;
	}
	.bm-del {
		grid-area: del;
		padding: 4px;
		width: 14px;
		height: 14px;
		justify-self: center;
		align-self: center;
	}
	.bm-edit {
		grid-area: edit;
		font-size: var(--f15);
		justify-self: center;
		align-self: center;
		margin-left: 3px;
	}
	.resized {
		border: 1px dashed var(--switch);
	}

	@media only screen and (max-width: 339px) {
		.br,
		.seconds,
		.lapotime,
		.tl-reeks {
			display: none;
		}
	}
	@media only screen and (min-width: 340px) {
		.lapotime {
			margin-left: var(--gutter-small);
		}
	}

	@media only screen and (max-width: 1067px) {
		.bookmarkDescription {
			font-size: var(--f11);
			margin-top: 0px;
		}
		.tl-titel {
			margin-top: -4px;
		}
		.bm-del,
		.bm-edit {
			align-self: normal;
		}
		.bm-edit {
			margin-top: 2px;
		}
		.grid-topiclist.desc {
			display: grid;
			grid-template-rows: minmax(25px, auto);
			margin-top: var(--gutter-wide);
			grid-template-columns: 0px 30px 8px 1fr 0px 100px 0px;
			grid-template-areas: " 	.		hoofdgroep	hoofdgroep	hoofdgroep	desc5			desc3		.	";
		}
		.grid-topiclist:not(.desc) {
			display: grid;
			font-size: var(--font-smaller);
			grid-template-columns: 0px 8px 4px 1fr 1fr 20px 5px 93px 10px 0px;
			grid-template-areas:
				" 	.		afkorting 	type		titel		titel			.			reeks 		pages		postcount	.	"
				" 	.		afkorting	.			nickname	lastpost		lastpost 	lastpost	lastpost	lastpost	.	"
				" 	.		.			.			.			. 				.			.			.			.			.	";
		}
		.noreeks.grid-topiclist:not(.desc) {
			grid-template-areas:
				" 	.		afkorting 	type		titel		titel			titel		titel 		pages		postcount	.	"
				" 	.		afkorting	.			nickname	lastpost		lastpost 	lastpost	lastpost	lastpost	.	"
				" 	.		.			.			.			. 				.			.			.			.			.	";
		}
		.list_bookmarks .grid-topiclist:not(.desc) {
			grid-template-columns: 0px 8px 4px 1fr 70px 20px 5px 18px 10px 20px;
			grid-template-areas:
				" 	.		afkorting 	type		titel		titel			reeks 		pages		edit 		del 		postcount	.	"
				" 	.		afkorting	.			nickname	lastpost		lastpost 	lastpost	lastpost	lastpost 	lastpost	.	"
				" 	.		.			.			.			. 				.			.			.			.		 	.			.";
		}
		.list_bookmarks .grid-topiclist.desc {
			grid-template-columns: 0px 30px 8px 1fr 0px 100px 0px;
		}
		.tl-status {
			grid-area: type;
			left: -1px;
			align-self: start;
			top: 3px;
		}
		.light .tl-status {
			color: var(--light-theme-dark);
		}
		.dark .tl-status {
			color: var(--dark-theme-dark);
		}

		.tl-afkorting {
			align-self: start;
		}
		.tl-pageselect {
			right: 0px;
			top: 2px;
		}
		.tl-lastpost {
			justify-self: right;
			text-align: right;
			align-self: start;
			margin-top: 2px;
		}

		.tl-titel {
			font-size: var(--font-normal);
			font-weight: bold;
			align-self: start;
			margin-top: 1px;
			word-break: break-word;
		}
		.tl-isrow .topictag {
			top: 3px;
		}
		.tl-type {
			grid-area: postcount;
			justify-self: left;
			align-self: start;
			top: 2px;
			left: -4px;
		}
		.tl-views {
			display: none;
		}

		.tl-postcount {
			justify-self: right;
			align-self: start;
		}
		.tl-postcount > span {
			width: 20px;
			text-align: center;
			top: 2px;
			position: absolute;
			right: 0px;
		}
		i.tl-postcount {
			justify-self: right;
			margin-top: 2px;
			font-size: 20px;
		}

		.ga-desc1 {
			display: none;
		}
		.ga-desc2 {
			display: none;
		}
		.ga-desc4 {
			display: none;
		}

		.grid-topiclist.isrow {
			padding: 4px 0 0 0;
		}
		.ga-desc5 {
			justify-self: right;
			grid-area: desc3;
			margin-right: var(--gutter-medium);
			font-size: var(--font-normal);
			margin-bottom: var(--gutter-wide);
		}
		.ga-desc3 {
			justify-self: right;
			display: none;
		}
		.ga-desc4 {
			display: none;
		}
		.ga-hoofdgroep {
			font-size: var(--f22);
		}
		.tl-afkorting {
			transform: scale(0.75) rotate(-90deg);
			align-self: baseline;
			justify-self: center;
			top: 7px;
		}
	} /* @media only screen and (max-width: 1067px) */

	@media only screen and (min-width: 1068px) {
		.grid-topiclist.desc {
			display: grid;
			grid-template-rows: minmax(25px, auto);
			grid-template-columns: 0px 35px 12px 1fr 12px 90px 130px 130px 27px 0px;
			grid-template-areas: " .		hoofdgroep	hoofdgroep	hoofdgroep	.			desc1		desc2		desc5		desc3 		.	";
			margin: var(--gutter-wide) auto 0;
			max-width: var(--content-width);
		}
		.list_bookmarks .grid-topiclist.desc {
			grid-template-columns: 0px 35px 12px 1fr 12px 90px 130px 130px 72px 0px;
		}
		.grid-topiclist:not(.desc) {
			display: grid;
			grid-template-rows: minmax(25px, auto);
			grid-template-columns: 0px 35px 12px 1fr 12px 90px 130px 130px 27px 0px;
			grid-template-areas: " .		afkorting	type		titel		reeks		pages		nickname	lastpost	postcount 	.	";
			font-size: var(--font-normal);
		}
		.noreeks.grid-topiclist:not(.desc) {
			grid-template-areas: " .		afkorting	type		titel		titel		pages		nickname	lastpost	postcount 	.	";
		}
		.list_bookmarks .grid-topiclist:not(.desc) {
			grid-template-columns: 0px 35px 12px 1fr 12px 90px 130px 130px 17px 17px 17px 0px;
			grid-template-areas: " .		afkorting	type		titel		reeks		pages		nickname	lastpost	edit  del postcount 	.	";
			/* grid-template-areas:
				" 	.		afkorting 	type		titel		titel			.			reeks 		pages		postcount	.	"
				" 	.		afkorting	.			nickname	lastpost		lastpost 	lastpost	lastpost	lastpost	.	"
				" 	.		.			.			.			. 				.			.			.			.			.	"; */
		}
		.tl-status {
			grid-area: type;
			font-size: var(--font-small);
		}
		i.tl-status.locked {
			font-size: var(--f12);
			align-self: baseline;
			top: 10px;
			--l: 65;
			color: var(--color);
		}
		i.tl-status.central {
			font-size: 12px;
			top: 10px;
			color: #00a000;
		}
		i.tl-status.deleted {
			font-size: 12px;
			align-self: baseline;
			top: 10px;
			color: var(--red);
		}
		.deleted .tl-titel {
			text-decoration: line-through;
			opacity: 0.6;
		}
		i.tl-status.info {
			top: 10px;
			color: #24a4ff;
			text-shadow: 0px 0px 1px #888888;
			-webkit-text-stroke: 0.03em #222;
		}
		.light .tl-status {
			color: var(--light-theme-dark);
		}
		.dark .tl-status {
			color: var(--dark-theme-dark);
		}

		.tl-afkorting {
			align-self: center;
			line-height: 18px;
		}
		.tl-pages {
			font-size: inherit; /* TODO: pages in topiclists */
		}
		.tl-lastpost {
			justify-self: right;
			text-align: right;
			align-self: center;
			line-height: 12px;
		}
		.tl-postcount {
			justify-self: right;
		}
		.tl-nickname {
			font-size: var(--font-small);
			align-self: center;
		}

		.tl-titel {
			font-family: var(--font-narrow);
			font-size: var(--f15);
			align-self: center;
			line-break: anywhere;
			word-break: break-all;
		}
		.tl-type {
			grid-area: type;
			font-size: var(--font-small);
		}
		.tl-views {
			display: none;
		}

		.tl-postcount > span {
			width: 20px;
			text-align: center;
			align-self: center;
			justify-self: center;
			display: block;
			font-size: var(--font-smaller);
		}
		i.tl-postcount {
			justify-self: right;
			align-self: center;
			font-size: 22px;
			margin: 3px -1px 0 0;
		}

		.grid-topiclist.isrow {
			line-height: 32px;
		}

		.ga-desc5 {
			justify-self: right;
		}
		.ga-desc3 {
			justify-self: right;
			display: none;
		}
		.ga-desc4 {
			display: none;
		}
		.br {
			display: block;
		}
	} /* @media only screen and (min-width: 1068px) */

	.tl-pages {
		font-size: var(--f12);
		font-family: var(--font-narrow);
		align-self: start;
	}
	.tl-pages > a.pagelink {
		font-family: var(--font-narrow);
		background-color: var(--color);
		color: var(--switch);
		--l: 92;
		padding: var(--gutter-micro);
	}
	.jumptofirstnew {
		font-size: var(--f10);
		padding: var(--gutter-tiny);
	}
	/* GRID AREA'S 
 * (grid area's voor descs vind je in _grid_index.css omdat de index en topiclijsten die grid delen) */
	/* TOPICLIJST GRID AREA POSITIONING */
	.ga-hoofdgroep {
		grid-area: hoofdgroep;
	}

	.tl-afkorting {
		grid-area: afkorting;
	}
	.tl-lastpost {
		grid-area: lastpost;
	}
	.tl-nickname {
		grid-area: nickname;
		width: min-content;
	}
	.tl-pages {
		grid-area: pages;
	}
	.tl-postcount {
		grid-area: postcount;
	}
	.tl-views {
		grid-area: views;
	}
	.tl-titel {
		grid-area: titel;
	}
	.tk-topicicon {
		grid-area: topicicon;
	}
	.tl-reeks {
		grid-area: reeks;
		font-size: var(--font-small);
		align-self: self-start;
	}

	/* POSITIONING AND COLORING */
	.light i.tl-postcount {
		color: var(--color-darkergrey);
	} /* TODO: use --a opacity */
	.dark i.tl-postcount {
		color: var(--color-darkergrey);
	} /* TODO: use --a opacity */
	.light .isrow {
		border-bottom: 1px solid #f4f4f4;
		--hue: 0;
		--sat: 0;
		--lum: 99;
	}
	.dark .isrow {
		border-bottom: 1px solid #222;
		--hue: 0;
		--sat: 0;
		--lum: 5;
	}
	.light .hasreports,
	.dark .hasreports {
		--hue: 0;
		--sat: 60;
		--lum: 85;
	}
	.light .hasreports:hover,
	.dark .hasreports:hover {
		--hue: 0;
		--sat: 60;
		--lum: 85;
	}

	/* INLINE ELEMENTS */
	.topictag {
		padding: var(--gutter-tiny);
		font-size: var(--font-plus);
		position: relative;
		top: -1px;
		margin-right: var(--gutter-small);
		white-space: nowrap;
		background-color: var(--color);
		color: var(--switch);
	}
	.isrow .topictag {
		padding: var(--gutter-micro) var(--gutter-tiny);
		top: 0px;
		font-size: var(--f11);
		text-transform: uppercase;
		max-width: 101%;
		display: inline-block;
		overflow-x: auto;
		line-height: initial;
		top: 5px;
	}
	.light .topictag {
		--h: 40;
		--s: 0;
		--l: 90;
	}
	.dark .topictag {
		--l: 30;
	}
	h1.th-topictitel .topictag {
		padding-inline: var(--gutter-small);
		border-radius: var(--gutter-tiny);
	}

	.reportwarningicon {
		color: var(--red);
		font-size: var(--font-plus);
		/* position: absolute;
		top: -7px; */
	}

	.announcements {
		max-width: var(--content-width) !important;
		margin: 0 auto var(--gutter-wide) auto !important;
		padding: 0 !important;
	}
	.grid-topiclist:not(.desc) {
		max-width: var(--content-width) !important;
		margin: 0 auto !important;
	}

	.grid-topiclist .ga-hoofdgroep {
		margin-bottom: var(--gutter-std);
	}
	.dark .tl-pageselect {
		--l: 25;
	}

	.forummod_checkbox {
		display: none;
	}
	body.list_topics.mod .forummod_checkbox {
		display: inline;
	}
	body.list_topics.mod a.afkorting {
		display: none;
	}

	.live .afkorting {
		margin-left: -1px;
	}
	.live {
		border-left: 1px solid #c44;
	}

	/* minimal for mobile */
	@media only screen and (max-width: 1067px) {
		.isTouch.minimal :is(#forumGrid, #header, 
							 /*.fipo, .lapo */ .jumptofirstnew,
							 .th-topicoptions, .th-actions, .grid-topiclist.desc) {
			display: none;
		}
		.isTouch.minimal .grid-topiclist.desc {
			margin-top: var(--gutter-small);
		}
		.isTouch.minimal .tl-titel {
			font-size: var(--f14);
			font-weight: normal;
			font-family: var(--font-narrow);
			line-height: var(--f18);
			top: -2px;
		}
		.isTouch.minimal .isrow .topictag {
			text-transform: uppercase;
		}
		.isTouch.minimal:not(.list-bookmarks) .grid-topiclist:not(.desc) {
			display: grid;
			font-size: var(--font-smaller);
			grid-gap: 2px 0;
			grid-template-rows: max-content;
			grid-template-columns: 0px 23px 14px 1fr 1fr 28px 20px 2px;
			grid-template-areas:
				" . afkorting type titel titel reeks postcount ."
				" . afkorting . nickname lastpost lastpost lastpost .";
		}
		.isTouch.minimal .tl-pages {
			display: none;
		}

		.isTouch.minimal .tl-reeks {
			top: 2px;
		}

		.isTouch.minimal :is(.tl-nickname,.tl-lastpost) {
			margin-top: -4px;
		}
		.isTouch.minimal .topictag {
			padding: 0 2px;
			top: 3px;
			position: relative;
		}
		.isTouch.minimal .tl-afkorting {
			width: 50px;
		}
			/* " 	afkorting	.			nickname	lastpost		lastpost 	lastpost	lastpost	lastpost"; */

	}

	@media only screen and (max-width: 699px) {
	body.isTouch.minimal:not(.list_topics) .topicHeader {
		grid-template-columns: 10px 100px 100px 1fr 1fr 10px;
		grid-template-areas:
			" . crumbtrail crumbtrail crumbtrail actions . "
			" . topictitel topictitel topictitel topictitel . "
			" . menulist menulist menulist menulist . "
			" . pages pages pages pages . ";
		}
	}

} /* @layer grids */
/********** FILE: css/_grid_topics.css *****************/@layer grids {
	/* TOPICGALLERY */
	#topicgallery {
		border: 8px solid transparent;
		border-top: 0;
		border-bottom: 0;
		height: 75px;
		margin-top: var(--gutter-std);
		outline: 0;
		overflow-x: auto;
		padding: 2px;
		white-space: nowrap;
		width: 100%;
		overflow-y: hidden;
		/* margin: var(--gutter-medium) auto; */
		max-width: var(--content-width);
	}
	#topicgallery a {
		padding: 4px;
		width: auto;
	}
	#topicgallery a img {
		border: 1px solid #444; /* TODO: kleur in --h --s --l --a) */
		height: 60px;
		width: auto;
	}

	.topicHeader {
		display: grid;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 6px !important;
		grid-gap: 3px 0;
		margin: 0 auto 0 auto;
		max-width: var(--content-width);
		width: 100%;
	}

	img.fok_embedded.noConsent {
		display: none;
	}

	.th-actions {
		grid-area: actions;
	}
	.th-crumbtrail {
		grid-area: crumbtrail;
	}
	.th-topictitel {
		grid-area: topictitel;
	}
	.th-menu {
		grid-area: menulist;
	}
	.th-topicoptions {
		grid-area: topicoptions;
	}
	.th-topicinfo {
		grid-area: topicinfo;
	}
	.th-pages {
		grid-area: pages;
		align-self: center;
	}
	.th-forumdesc {
		grid-area: desc;
		font-family: var(--font-narrow);
		margin-bottom: var(--gutter-plus);
	}
	.th-mods {
		grid-area: mods;
		font-family: var(--font-narrow);
		font-size: var(--f14);
		justify-self: right;
		padding: var(--gutter-plus) 0 0 0;
	}
	.th-mods :is(a, i) {
		padding: var(--gutter-tiny) 0 var(--gutter-tiny) var(--gutter-tiny);
		cursor: pointer;
	}
	.moderatorsTitle {
		margin-right: var(--gutter-small);
	}
	.th-mods i {
		font-size: var(--font-smaller);
	}

	/* HEADERGRID */
	.th-actions {
		justify-self: right;
		position: absolute;
		margin-top: -30px;
		display: none;
	}
	.th-menu a {
		margin-top: -4px;
		white-space: nowrap;
	}
	.th-crumbtrail {
		padding: 0;
	}
	.th-topicinfo {
		font-family: var(--font-narrow);
		font-size: var(--font-small);
	}
	.th-topicinfo > span {
		margin: 0 var(--gutter-small) 0 0;
	}

	.th-actions,
	.th-crumbtrail,
	.th-topictitel,
	.th-menu {
		font-family: var(--font-narrow);
	}
	.th-menu {
		justify-self: right;
		text-align: right;
	}
	.th-menu.dropdown {
	}
	.th-menu.slide {
		max-width: 100%;
		height: var(--f22);
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 8px;
		direction: rtl;
	}
	.th-crumbtrail a,
	.th-actions a,
	.th-menu a {
		margin: var(--gutter-small);
		font-size: var(--font-small);
	}
	.th-menu a:last-of-type {
		margin-right: 0;
	}

	.th-crumbtrail a:first-of-type {
		margin-left: 0;
	}
	.th-actions a:last-of-type {
		margin-right: 0;
	}
	.th-topicoptions {
		margin: var(--gutter-wide) 0;
		justify-self: right;
		text-align: right;
	}
	.chainnav {
		font-size: var(--font-bigger);
	}
	.light .th-topictitel a.chainnav {
		color: #888; /* TODO: kleur in hsla */
	}
	.dark .th-topictitel a.chainnav {
		color: #bbb; /* TODO: kleur in hsla */
	}
	.followed i {
		color: var(--color-red);
	}

	@media only screen and (max-width: 1419px) {
	} /* @media only screen and (max-width: 1419px) */

	@media only screen and (min-width: 1420px) {
	} /* @media only screen and (min-width: 1420px) */

	@media only screen and (min-width: 1000px) {
		/* TOPICHEADER */
		.topicHeader {
			grid-template-columns: 10px 95px 1fr auto 320px 10px;
			grid-template-areas:
				"	.		crumbtrail 		crumbtrail		crumbtrail		actions			.		"
				"	.		topictitel 		topictitel 		topictitel		topictitel		.		"
				"	.		desc 			desc 			desc 			desc 			.		"
				"	.		topicinfo		topicinfo 		menulist		menulist		.		"
				"	.		.	 			mods			mods	 		mods			.		"
				"	.		pages			pages			topicoptions 	topicoptions 	.		";
		}
		.th-menu {
			margin-top: 0px;
		}
	}

	/* @media only screen and (max-width: 829px) {
		.th-menu {
			display: grid;
			position: absolute;
			margin-top: -40px;
		}
		.th-menu::before {
			content: "ACTIES";
			font-family: var(--font-narrow);
		}
		.th-menu:not(.opened) > a {
			display: none;
		}
	} */

	@media only screen and (min-width: 700px) and (max-width: 999px) {
		/* TOPICHEADER */
		.topicHeader {
			grid-template-columns: 10px 8vw auto 1fr 1fr 10px;
			grid-template-areas:
				"	.		crumbtrail 		crumbtrail		crumbtrail		actions			.		"
				"	.		topictitel 		topictitel 		topictitel		topictitel		.		"
				"	.		desc 			desc 			desc 			desc 			.		"
				"	.		topicinfo		topicinfo 		topicinfo		topicinfo		.		"
				"	. 		menulist		menulist		menulist		menulist		.		"
				"	.		mods 			mods 			mods	 		mods			.		"
				"	.		pages			pages			pages 			topicoptions 	.		"
				/*"	.		.				.				. 				.				.		"*/;
		}
		.th-menu {
			margin-top: calc(var(--gutter-small));
		}
	}

	@media only screen and (max-width: 699px) {
		/* TOPICHEADER */
		.topicHeader {
			grid-template-columns: 10px 100px 100px 1fr 1fr 10px;
			grid-template-areas:
				"	.		crumbtrail 		crumbtrail		crumbtrail		actions			.		"
				"	.		topictitel 		topictitel 		topictitel		topictitel		.		"
				"	.		desc 			desc 			desc 			desc 			.		"
				"	.		topicinfo		topicinfo 		topicinfo		topicinfo		.		"
				"	. 		menulist		menulist		menulist		menulist		.		"
				"	.		mods	 		mods			mods	 		mods			.		"
				"	.		pages			pages			pages 			pages			.		"
				"	.		topicoptions	topicoptions	topicoptions	topicoptions	.		";
		}
	}
} /* @layer grids */
/********** FILE: css/_grid_listusermessages.css *****************//* .lm-postinfo {
	grid-area: pinfo;
}

.lm-eq {
	grid-area: eq;
}
.lm-time {
	grid-area: time;
}
.lm-count {
	grid-area: count;
}
.lm-ui {
	grid-area: uicon;
}
.lm-pi {
	grid-area: pi;
}
.lm-ts {
	grid-area: ts;
}
.lm-ondertt {
	grid-area: ondertt;
}
.lm-stars {
	grid-area: stars;
}
.lm-utitle {
	grid-area: utitle;
}
.lm-post {
	grid-area: post;
}
.lm-ver {
	grid-area: ver;
} */
/********** FILE: css/_grid_chat.css *****************/@layer root {
	/* INLINE CHAT BOX */
	.chatbox * {
		background-color: var(--color);
		color: var(--switch);
	}
	.chatbox {
		width: 100%;
		max-width: 400px;
		max-height: 78vh;
		--h: 0;
		--s: 0;
		--l: 98;
		position: fixed;
		top: var(--topbar-height);
		overflow-y: auto;
		right: 26px;
		border: 1px solid #ccc;
		z-index: 9999999999999999;
	}
	.dark .chatbox {
		--h: 0;
		--s: 0;
		--l: 10;
	}

	.cb-info {
		background-color: #333;
		padding: var(--gutter-std);
		display: block;
		width: 100%;
		color: #fefefe;
	}
	.cb-fromchat,
	.cb-tochat {
		padding: var(--gutter-tiny) var(--gutter-std);
		font-size: var(--font-small);
		max-width: 90%;
		width: fit-content;
		display: block;
		border-radius: 8px;
		position: relative;
		word-break: break-word;
	}
	.cb-fromchat {
		--h: 0;
		--s: 0;
		--l: 80;
		margin: var(--gutter-micro) 0 0 0;
	}
	.dark .cb-fromchat {
		--h: 0;
		--s: 0;
		--l: 25;
	}
	.cb-tochat {
		--h: 180;
		--s: 60;
		--l: 70;
		margin: var(--gutter-micro) 0 0 auto;
	}
	.dark .cb-tochat {
		--h: 180;
		--s: 30;
		--l: 20;
	}

	.cb-time {
		font-size: var(--f10);
		width: auto;
		display: block;
		text-align: right;
		margin-right: -6px;
		opacity: 0.4;
		position: relative;
	}
	.cb-fromchat .cb-time {
		left: var(--gutter-micro);
	}
	.cb-tochat .cb-time {
		right: 4px;
		text-align: right;
	}

	.chatnick {
		display: block;
		--h: 120;
		--s: 74;
		--l: 30;
		color: var(--switch);
		background-color: var(--color);
		width: fit-content;
		padding: 0px var(--gutter-tiny);
		margin-left: -12px;
		margin-top: -4px;
		border-radius: 4px 0 4px 0;
		font-size: var(--f11);
		font-family: var(--font-narrow);
		margin-bottom: var(--gutter-tiny);
	}

	.dm-inputholder {
		--h: 0;
		--s: 0;
		--l: 93;
		display: block;
		bottom: 0px;
		width: 100%;
		position: relative;
		padding: var(--gutter-micro);
		display: flex;
	}
	.dark .dm-inputholder{
		--h: 0;
		--s: 0;
		--l: 0;
	   }
	}
	.dm-inputholder::before {
		content: attr(data-left) " / " attr(data-max);
		width: auto;
		position: absolute;
		padding: 0px var(--gutter-small);
		top: -13px;
		font-size: var(--f10);
		--h: 62;
		--s: 0;
		--l: 10;
		--a: 0.4;
		background-color: var(--color);
		color: var(--switch);
	}
	.dm-messages {
		max-height: calc(70vh - 50px);
		padding: 0 var(--gutter-small) var(--gutter-wide) var(--gutter-small);
		overflow-y: auto;
		color: #000;
	}
	.dm-messages a {
		color: var(--link-blue);
	}
	.dm-messages::-webkit-scrollbar-thumb {
		background-color: #ddd;
	}
	.dm-messages::-webkit-scrollbar {
		width: 4px;
	}
	.dm-inputholder .red {
		padding: var(--gutter-small);
		color: var(--red);
		font-family: var(--font-narrow);
	}
	.dm-inputholder textarea {
		width: 90%;
		resize: none;
		overflow-y: auto;
		padding: var(--gutter-small);
		border-radius: 12px;
		font-size: var(--font-small); /* kleur geregeld door light/dark scheme */
	}

	.dm-inputholder > .editable {
		bottom: 0;
		width: 90%;
		padding: var(--gutter-small);
		border-radius: 12px;
		background-color: #fdfdfd;
		font-size: var(--font-small);
		display: inline-block;
	}
	.dmsend {
		background-color: var(--color);
    	color: var(--switch);
		position: absolute !important;
		padding: var(--gutter-small);
		right: 0;
		font-size: var(--font-big);
		cursor: pointer;
	}
	.dm-options span {
		cursor: pointer;
	}

	.newchatdate:after {
		content: "-------";
		color: #ddd;
		margin-left: var(--gutter-wide);
	}
	.newchatdate:before {
		content: "-------";
		color: #ddd;
		margin-right: var(--gutter-wide);
	}
	.newchatdate {
		display: block;
		text-align: center;
		color: #888;
		margin-top: var(--gutter-wide);
		font-size: var(--font-small);
	}

	@media screen and (max-width: 500px) {
		.chatbox {
			width: 100vw;
			max-width: 100vw;
			max-height: 100vh;
			margin-top: 0px;
			height: calc(100vh - 90px);
			left: 0;
		}
		.dm-messages {
			height: calc(100vh - 210px);
			max-height: calc(100vh - 180px);
		}
	}
} /* @layer root */
/********** FILE: css/_grid_image_manager.css *****************/@layer grids {
	.imgHolder {
	}

	.imgthumbgrid .size {
		grid-area: filesize;
		font-size: var(--f12);
		justify-self: center;
		opacity: 0.5;
	}

	.imgthumbgrid .name {
		grid-area: name;
		justify-self: center;
		max-width: 98%;
		font-size: var(--f13);
	}
	.imgthumbgrid .thumbcheck,
	.thumbcheck {
		grid-area: thumb;
		justify-self: start;
		align-self: flex-start;
		display: none;
	}
	.imgthumbgrid .thumb {
		grid-area: thumb;
		justify-self: center;
		align-self: flex-end;
	}
	.imgthumbgrid {
		display: inline-grid;
		align-self: self-start;
		overflow: hidden;
		grid-template-columns: 160px;
		margin-bottom: var(--gutter-tiny);
		grid-template-rows: 150px auto 25px;
		position: relative;
		grid-template-areas:
			"thumb"
			"name"
			"filesize";
		font-family: var(--font-narrow);
	}
	.thumbnail {
		display: inline-block;
		padding: var(--gutter-small);
		margin-right: var(--gutter-small);
		max-width: 150px;
		max-height: 150px;
		margin-inline: auto;
		user-drag: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
	}

	.thumbcheck:checked + :is(.imgthumbgrid, label) {
		--h: 200;
		--s: 80;
		--l: 80;
		--a: 1;
		background-color: var(--color);
	}
	.image_manager :is(#image, #saveimg) {
		display: none;
	}
	.dropfile {
		width: 250px;
		height: 100px;
		--l: 80;
		--a: 0.1;
		background-color: var(--color);
		font-family: var(--font-narrow);
		font-size: var(--f14);
		padding: var(--gutter-small);
		display: grid;
		justify-items: center;
	}
	.dropfile > p {
		text-align: center;
		margin-inline: auto;
	}
} /* @layer grids */
/********** FILE: css/_page_chat.css *****************/.chat #pageWrapper {
	max-height: calc(100dvh - var(--topbar-height) - 85px);
	height: calc(100dvh - var(--topbar-height));
}
.chatwindow .contactlist,
.chatwindow,
.contactlist,
.chatwindow .chatlist,
.chatlist,
.contact .menu,
.contact {
	display: block;
}
.chatwindow {
	overflow: hidden;
	padding: var(--gutter-std);
	position: relative;
}
.chatwindow .message a {
	color: var(--link-blue);
}
.contactlist {
	overflow-x: hidden;
	overflow-y: auto;
}
.chatlist {
	overflow-x: hidden;
}

chatwindow .dateline {
	margin: var(--gutter-std) 0px;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-family: var(--font-narrow);
	font-size: var(--f12);
	filter: opacity(0.4);
}
.contact {
	width: 100%;
	padding: var(--gutter-small);
	background-color: var(--color);
	color: var(--switch);
	margin-bottom: var(--gutter-tiny);
	display: grid;
	grid-template-rows: min-content;
	grid-template-columns: 24px 1fr 90px;
	grid-template-areas:
		" icon 		member 	time "
		" message 	message message ";
}

.chatmsg {
	width: 90%;
	max-width: 500px;
	position: relative;
	padding: 0 var(--gutter-std) 0 var(--gutter-std);
	background-color: var(--color);
	color: var(--switch);
	border-left: 3px solid transparent;
	margin-bottom: var(--gutter-tiny);
	display: grid;
	border-radius: 0 var(--gutter-std) var(--gutter-std) var(--gutter-std);
	grid-template-rows: var(--f10) 1fr min-content;
	grid-template-columns: 0px 40px 1fr 0;
	grid-template-areas:
		" . icon 		member		. 	 "
		" . message		message 	. 	 "
		" . .			time		time ";
}

.grow-wrap {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	grid-area: input;
	display: grid;
	height: min-content;
	max-height: 100px;
	position: absolute;
	width: 100%;
	bottom: 0;
	overflow: auto;
}
.grow-wrap::after {
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";

	/* This is how textarea text behaves */
	white-space: pre-wrap;

	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
}
.grow-wrap > textarea:is(:active, :focus) {
	border: 0;
	outline: none;
	border-color: transparent;
}
.chat .grow-wrap > textarea {
	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
	resize: none;
	font-size: var(--f12);
	border: 0;
	outline: none;
	border-radius: 0;
	background-color: transparent;
	/* Firefox shows scrollbar on growth, you can hide like this. */
	overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
	padding: 0 35px 0 var(--gutter-medium);
	font: inherit;
	grid-area: 1 / 1 / 2 / 2;
}

.chat .dmsend {
	grid-area: button;
	background-color: transparent;
	right: 15px;
	bottom: 4px;
}

.chat .dm-inputholder {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 20px;
	grid-template-areas: " input button ";
	position: absolute;
	bottom: 83px;
	right: 7px;
}
.dm-inputholder::before {
	bottom: 0px;
	right: 0px;
}

.blocked_user {
	display: grid;
	width: 100%;
	position: relative;
	margin-bottom: var(--gutter-micro);
	padding: 0 var(--gutter-std) 0 var(--gutter-std);
	grid-template-columns: 1fr 80px 40px;
	grid-template-areas: "member	 menu  unblock	";
}
.dark .blocked_user {
	background-color: color-mix(in hsl, currentColor, black 85%);
}
.light .blocked_user {
	background-color: color-mix(in hsl, currentColor, white 95%);
}

.bl_member {
	grid-area: member;
	padding: var(--gutter-small);
	font-family: var(--font-narrow);
}
.bl_usermenu {
	grid-area: menu;
	padding: var(--gutter-small);
}
.bl_unblock {
	grid-area: unblock;
	padding: var(--gutter-small);
}

#chatholder {
	width: 100%;
	max-height: 100%;
	height: 100%;
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	grid-template-columns: minmax(30%, 250px) 60px 1fr 60px;
	grid-template-areas:
		"menu	  menu  menu	menu"
		"chats	  icon 	member 	options"
		"contacts chat 	chat	chat"
		"contacts input input	input";
}

.chatinfo_icon {
	grid-area: icon;
	align-self: center;
	height: 50px;
	padding: 7px 0px 5px 10px;
}
.dark :is(.chatinfo_icon, .chatinfo_member, .chatinfo_options, .chats) {
	background-color: color-mix(in hsl, currentColor, black 70%);
}
.light :is(.chatinfo_icon, .chatinfo_member, .chatinfo_options, .chats) {
	background-color: color-mix(in hsl, currentColor, white 80%);
}

.chatinfo_icon img {
	border-radius: 50%;
	width: 35px;
	height: 35px;
	margin-right: var(--gutter-std);
}
.chatinfo_member {
	grid-area: member;
	background-color: transparent;
	font-family: var(--font-narrow);
	align-self: center;
	padding: 17px 0;
	overflow: hidden;
	height: 100%;
}
.chatinfo_options {
	grid-area: options;
	font-family: var(--font-narrow);
	font-size: var(--f12);
	height: 100%;
	padding: var(--gutter-std);
}
.block_user {
	vertical-align: sub;
}
.currentchat,
.chats {
	grid-area: 2 / 3;
	font-family: var(--font-narrow);
	font-size: var(--f16);
	padding: var(--gutter-tiny);
	height: 50px;
}
.chats {
	grid-area: chats;
	border-radius: var(--gutter-small) 0 0 0;
	border-right: 1px solid var(--color);
	display: block;
	height: 50px;
	padding: 16px var(--gutter-small);
}
.currentchat {
	grid-area: member;
}
#chatholder #reply {
	grid-area: input;
	/* height:auto; */
	height: 100px;
	max-height: 100px;
	overflow: hidden;
	position: relative;
}

.dark #chatholder #reply {
	background-color: color-mix(in hsl, currentColor, black 70%);
	border-top: 1px solid color-mix(in hsl, currentColor, black 80%);
}

.light #chatholder #reply {
	background-color: color-mix(in hsl, currentColor, white 70%);
	border-top: 1px solid color-mix(in hsl, currentColor, white 80%);
}

#chatwindow {
	max-height: calc(80vh - 100px);
	overflow-y: auto;
	background-color: var(--color);
}

#contactlist {
	max-height: calc(80vh);
	overflow-y: auto;
}

#chatmenu {
	grid-area: nav;
	padding: var(--gutter-std);
	background-color: var(--color);
	color: var(--switch);
	font-family: var(--font-narrow);
	font-size: var(--f15);
	height: fit-content;
	margin: 0 auto;
	display: block;
	width: fit-content;
}
ul.chatmenu li {
	padding: var(--gutter-tiny) var(--gutter-std);
	display: inline-block;
}
.dark .chatmenu {
	--h: var(--def-postDark-h);
	--s: var(--def-postDark-s);
	--l: var(--def-postDark-l);
}
.light .chatmenu {
	--h: var(--def-postLight-h);
	--s: var(--def-postLight-s);
	--l: var(--def-postLight-l);
}

.chatwindow {
	grid-area: chat;
}
.contactlist {
	grid-area: contacts;
}

.chatmsg.isSelf {
	float: right;
	border-left: 3px solid transparent !important;
	border-radius: var(--gutter-std) 0 var(--gutter-std) var(--gutter-std);
}

.contactlist img.icon {
	grid-area: icon;
	width: 16px;
	height: 16px;
}
.chatlist img.icon {
	grid-area: icon;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0px;
	left: -14px;
}
body.chat .topicHeader {
	display: none;
}
.contactlist .member,
.contactlist .time,
.chatlist .member,
.chatlist .time {
	font-family: var(--font-narrow);
}

.contactlist .member {
	grid-area: member;
	font-size: var(--f15);
}

.chatlist .member {
	grid-area: member;
	font-size: var(--f11);
	position: absolute;
	top: 0px;
	left: -38px;
	background-color: var(--color);
	color: var(--switch);
	--h: 120;
	--s: 74;
	--l: 30;
	padding: 0 var(--gutter-tiny);
}

.contactlist .time,
.chatlist .time {
	grid-area: time;
	font-size: var(--f10);
	justify-self: right;
}

.chatlist .time {
	justify-self: end;
}

.contactlist .message {
	grid-area: message;
	display: -webkit-box;
	padding-top: var(--gutter-std);
	font-size: var(--f12);
	line-height: var(--f14);
	-webkit-line-clamp: 1;
	overflow: hidden;
	-webkit-box-orient: vertical;
	opacity: 0.7;
}

.contact.isSelf .message::before {
	font-family: var(--font-awesome);
	content: "\f00c";
	margin-right: var(--gutter-tiny);
}

.contactlist .contact.read,
.chatmsg.read {
	border-left: 3px solid transparent;
}
.contactlist .contact.unread,
.chatmsg.unread {
	border-left: 3px solid #1ec1ff;
}

.chatlist .message {
	grid-area: message;
	padding: var(--gutter-std) 0;
	font-size: var(--f13);
}

.dark .contact,
.dark .chatmsg {
	--h: var(--def-postDark-h);
	--s: var(--def-postDark-s);
	--l: var(--def-postDark-l);
}
.light .contact,
.light .chatmsg {
	--h: var(--def-postLight-h);
	--s: var(--def-postLight-s);
	--l: var(--def-postLight-l);
}

/* GROTER DAN 600px? */
@media screen and (max-width: 1067px) {
	#chatholder {
		padding: 0;
		/*max-height: calc(100dvh - (var(--topbar-height)) - (var(--bottombar-height)));*/
	}
}

@media screen and (max-width: 699px) {
	/*
	"menu	  menu  menu	menu"
	"chats	  icon 	member 	options"
	"contacts chat 	chat	chat"
	"contacts input input	input";
	*/
	.chat #pageWrapper {
		max-height: calc(100dvh - var(--topbar-height) * 2 - var(--bottombar-height) - 20px);
		height: calc(100dvh - var(--topbar-height) - var(--bottombar-height));
	}
	body:is(.chat_open, .chat_blocked) #chatholder {
		grid-template-columns: 0px 60px 1fr 60px;
	}

	
	body:not(.chat_open, .chat_blocked) #chatholder {
		grid-template-columns: 1fr 0 0 0;
	}
}
/********** FILE: css/_gallery.css *****************/:root {
    --primary-color: #4682B4;
    --text-color: #333;
    --bg-color: #fff;
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --thumbnail-border: #4682B4;
    --thumbnail-bg: #f5f5f5;
    --button-bg: rgba(255, 255, 255, 0.2);
    --button-hover: rgba(255, 255, 255, 0.4);
    --settings-bg: rgba(0, 0, 0, 0.8);
}

.darkmode {
    --text-color: #eee;
    --bg-color: #222;
    --overlay-bg: rgba(0, 0, 0, 0.9);
    --thumbnail-bg: #333;
    --settings-bg: rgba(0, 0, 0, 0.9);
}

.carousel-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    z-index: 1000;
    overflow: hidden;
}

.carousel-modal.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.carousel-header {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    color: white;
}

.carousel-counter {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.carousel-author {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 0.25rem;
    opacity: 0.8;
}

.carousel-info {
    text-align: center;
}

.carousel-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

.carousel-close:hover {
    transform: scale(1.2);
}

.carousel-settings-toggle {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

.carousel-settings-toggle:hover {
    transform: scale(1.2);
}

.carousel-settings {
    position: absolute;
    top: 50px;
    left: 20px;
    background-color: var(--settings-bg);
    border-radius: 8px;
    padding: 15px;
    color: white;
    z-index: 1100;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.carousel-settings.active {
    display: block;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-label {
    margin-right: 15px;
    font-size: 0.9rem;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.settings-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .settings-slider {
    background-color: var(--primary-color);
}

input:checked + .settings-slider:before {
    transform: translateX(26px);
}

.carousel-content {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-image-container {
    position: relative;
    max-width: 90%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity 0.3s;
}

.fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    z-index: 1100;
    display: none;
    justify-content: center;
    align-items: center;
}

.fullscreen-container.active {
    display: flex;
}

.fullscreen-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

.fullscreen-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}

.carousel-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.carousel-nav-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--button-bg);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
    pointer-events: auto;
    margin: 0 10px;
}

.carousel-nav-btn:hover {
    background-color: var(--button-hover);
}

.carousel-thumbnails {
    width: 100%;
    height: 20vh;
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.carousel-thumbnails.hidden {
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.carousel-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.carousel-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.carousel-thumbnails::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}

.carousel-thumbnail {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.2s;
    background-color: var(--thumbnail-bg);
}

.carousel-thumbnail.active {
    border-color: var(--thumbnail-border);
}

.rde_img_default {
    cursor: pointer;
}

@media (max-width: 768px) {
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .carousel-thumbnail {
        width: 60px;
        height: 60px;
    }

    .carousel-content {
        height: 60vh;
    }

    .carousel-thumbnails {
        height: 25vh;
    }

    .carousel-settings {
        width: 80%;
        left: 10%;
        right: 10%;
    }
}/********** FILE: css/overrides.css *****************//* OUTSIDE OF LAYERS: OVERRIDES EVERYTHING! */

/* FORMAAT YOUTUBE THUMBNAILS */
.embed_youtube {
	width: 100%;
	max-width: 560px;
	position: relative;
}
.embed_youtube > a:first-child {
	position: relative;
	display: block;
}
.embed_youtube > a:first-child + br {
	display: none;
}
.embed_youtube > a:first-child::after {
	content: "\f167";
	color: red;
	font-size: 8em;
	position: absolute;
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-150%);
}
.embed_youtube > a:first-child::before {
	width: 40px;
	height: 40px;
	display: block;
	content: " ";
	position: absolute;
	background-color: white;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-100%);
}
img.yti,
img[src^='https://i.ytimg.com/']
{
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}