/*
	Rejsa.nu forum - mallen rejsa3, ombyggd från grunden 2026-10-28.
	Samma utseende som resten av sajten (rejsa_sida.css): ljusgrå bakgrund, vita kort,
	mörka länkar, orange accent, tunna ramar och raka hörn (design D). Mobilen först.
	Originalet finns i W:\FORUM\_backup\rejsa3_20261028.
*/

/* ---------- Grund ---------- */

body {
	margin: 0;
	background-color: var(--farg-bakgrund, #f0f3f7);
	font-family: var(--text-font);
	font-size: var(--text-l);
	line-height: 1.45;
	color: var(--farg-text, #333);
}
a, a:link, a:visited {
	color: var(--farg-bla, #3D5C98);
	text-decoration: none;
}
a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
	text-decoration: none;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}

/* Sidans innehåll mellan menyerna */
.forum {
	display: block;
}


/* ---------- Banners och tack-raden ---------- */

/* Annonserna har fast min-bredd inline (490px) - på mobilen får de krympa i stället */
/* Rutan, bredden och marginalerna finns i /rejsa_layout.css */
.f-ads br {
	display: none;
}
.f-ads div, .f-ads img {
	min-width: 0 !important;
	max-width: 100% !important;
}
/* Banners förstoras aldrig, de visas i sin egen storlek och krymps bara om det inte får plats */
.f-ads img {
	width: auto !important;
	height: auto !important;
}
.f-ads div[onclick] {
	height: auto !important;
}

div.f-tack, div.f-tack a {
	font-size: var(--text-xs);
}
div.f-tack {
	padding: var(--luft-2, 8px) var(--luft-2, 8px) 0 var(--luft-2, 8px);
	text-align: center;
	line-height: 1.3;
}
@media only screen and (max-width: 760px) {
	div.f-tack, div.f-tack a {
		font-size: 10px;
	}
}


/* ---------- Forumets meny (genvägar) ---------- */

/* Ett vitt kort i full bredd med två rader och sex lika breda kolumner, så raderna står i linje.
   Rad 1: snabbvalen - Allt nytt och Mina trådar (orange), Favoriter 1 och 2 (grönt), Bevakade, Sök.
   Rad 2: verktyg på en rad - Mina PM till vänster, Ändra favoriter under favoriterna, Inställningar, Logga ut.
   Utan sparade favoriter (klassen f-m-ingafav från skriptet) blir de två gröna till "Välj dina favoritforum".
   Utloggad: bara inloggningsraden (formuläret i overall_header), sidfotsmenyn döljs.
   Ikonerna i rad 1 visas från 1000px bredd; på mobilen är Inställningar och Logga ut bara ikoner. */
.f-nav {
	padding: var(--luft-2, 8px);
	font-family: var(--text-font);
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
}
.f-m-rad, .f-nav .f-m-login {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--luft-2, 8px);
}
.f-m-rad + .f-m-rad, .f-nav .f-m-login {
	margin-top: var(--luft-2, 8px);
}
.f-m-w2 {
	grid-column: span 2;
}
.f-m-kort {
	display: none;
}
.f-m-ik {
	display: block;
	flex: none;
	width: 1.2em;
	height: 1.2em;
}

/* Rad 1: stora knappar, färgen styrs av --f-farg */
.f-m-knapp {
	--f-farg: var(--farg-bla, #1f2329);
	--f-text: color-mix(in srgb, var(--f-farg) 60%, var(--farg-text, #333));
}
.f-nav a.f-m-knapp, .f-nav a.f-m-knapp:link, .f-nav a.f-m-knapp:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--luft-2, 8px);
	min-width: 0;
	min-height: 54px;
	box-sizing: border-box;
	padding: var(--luft-2, 8px) var(--luft-1, 4px);
	border: 1px solid color-mix(in srgb, var(--f-farg) 40%, var(--farg-kort, #fff));
	border-radius: var(--knapp-radie, 2px);
	background-color: color-mix(in srgb, var(--f-farg) 10%, var(--farg-kort, #fff));
	color: var(--f-text);
	font-family: var(--rubrik-font);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
}
.f-nav a.f-m-knapp:hover {
	background-color: color-mix(in srgb, var(--f-farg) 20%, var(--farg-kort, #fff));
	color: var(--f-text);
	text-decoration: none;
}
.f-nav a.f-m-knapp .f-m-ik {
	display: none;
}
.f-nav a.f-m-nytt {
	--f-farg: var(--farg-accent, #ff761e);
	--f-text: var(--farg-accent-text, #b84300);
}
.f-nav a.f-m-fav {
	--f-farg: var(--farg-gron, #40b010);
}
.f-nav a.f-m-sok, .f-nav a.f-m-sok:link, .f-nav a.f-m-sok:visited {
	border-color: var(--farg-ram, #c9ced6);
	background-color: var(--farg-yta, #f7f9fc);
}
.f-nav a.f-m-sok:hover {
	background-color: var(--farg-yta-hover, #e6e9ee);
}
/* "Favoriter" som liten etikett ovanför siffran */
.f-m-fav span {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.f-m-knapp small.f-m-lang, .f-m-knapp small.f-m-kort {
	font-family: var(--text-font);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Utan favoriter: en streckad knapp över båda gröna platserna */
.f-nav a.f-m-knapp.f-m-valj, .f-nav a.f-m-knapp.f-m-valj:link, .f-nav a.f-m-knapp.f-m-valj:visited, .f-nav span.f-m-valj {
	display: none;
}
.f-nav.f-m-ingafav a.f-m-knapp.f-m-valj, .f-nav.f-m-ingafav a.f-m-knapp.f-m-valj:link, .f-nav.f-m-ingafav a.f-m-knapp.f-m-valj:visited {
	display: flex;
	border: 1px dashed var(--farg-gron, #40b010);
}
.f-nav.f-m-ingafav span.f-m-valj {
	display: block;
}
.f-nav.f-m-ingafav .f-m-harfav, .f-nav.f-m-ingafav a.f-m-harfav:link, .f-nav.f-m-ingafav a.f-m-harfav:visited {
	display: none;
}
/* Utloggad: låsta knappar */
.f-nav a.f-m-last, .f-nav a.f-m-last:link, .f-nav a.f-m-last:visited {
	--f-farg: var(--farg-text-ljus, #999);
	--f-text: var(--farg-text-svag, #666);
	border-style: dashed;
	border-color: var(--farg-ram, #c9ced6);
	background-color: var(--farg-yta, #f7f9fc);
	font-weight: 600;
}
.f-nav a.f-m-last .f-m-ik {
	display: block;
	width: 1em;
	height: 1em;
}
@media only screen and (min-width: 1000px) {
	.f-nav a.f-m-knapp .f-m-ik {
		display: block;
	}
}

/* Rad 2: en rad med ikon och text */
.f-nav a.f-m-v, .f-nav a.f-m-v:link, .f-nav a.f-m-v:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--luft-2, 8px);
	min-width: 0;
	box-sizing: border-box;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c9ced6);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	color: var(--farg-bla, #1f2329);
	font-size: var(--text-m);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
}
.f-nav a.f-m-v:hover {
	border-color: var(--farg-accent, #ff761e);
	color: var(--farg-accent-text, #b84300);
	text-decoration: none;
}
.f-nav a.f-m-svag, .f-nav a.f-m-svag:link, .f-nav a.f-m-svag:visited {
	color: var(--farg-text-svag, #666);
}
.f-m-v span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.f-m-antal {
	margin-left: var(--luft-2, 8px);
	padding: 1px var(--luft-2, 8px);
	border-radius: 9px;
	background-color: var(--farg-fel, #c0392b);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: bold;
}

.f-nav a.f-m-primar:hover {
	color: var(--farg-primar-text, #fff);
	opacity: 0.85;
}

/* Forumets förstasida, utloggad: inloggningen som rad 2 (flyttas hit av skriptet i overall_footer) */
.f-nav .f-m-login {
	margin-bottom: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	align-items: stretch;
}
.f-nav .f-m-login .f-falt {
	grid-column: span 2;
}
.f-nav .f-m-login .f-falt span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.f-nav .f-m-login .f-falt input.post {
	box-sizing: border-box;
	height: 100%;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
}
.f-nav .f-m-login .f-login-knapp {
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: inherit;
}
.f-nav .f-m-login .f-login-knapp input.f-knapp {
	width: 100%;
	padding: var(--luft-2, 8px) var(--luft-1, 4px);
	font-size: var(--text-m);
}
.f-nav .f-m-login .f-login-knapp a.f-m-v {
	align-self: stretch;
	box-sizing: border-box;
	font-size: var(--text-m);
	line-height: 1.3;
}
.f-m-login-mer {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--luft-3, 12px);
	font-size: var(--text-s);
}
/* Utloggad: Sök i forumet bredvid Loginproblem (inloggade har Sök-knappen i menyn) */
.f-m-login-lankar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--luft-1, 4px) var(--luft-4, 16px);
}
.f-m-login-mer a.f-m-login-sok {
	display: inline-flex;
	align-items: center;
	gap: var(--luft-1, 4px);
}
.f-m-login-sok .f-m-ik {
	width: 1.15em;
	height: 1.15em;
}
.f-m-login-mer .f-kryss {
	display: inline-flex;
	align-items: center;
	gap: var(--luft-2, 8px);
}
.f-m-login-mer .f-kryss input[type=checkbox] {
	margin: 0;
	vertical-align: baseline;
}
.f-m-login-mer a {
	color: var(--farg-text-svag, #666);
	text-decoration: none;
}

@media only screen and (max-width: 760px) {
	.f-nav {
		padding: var(--luft-2, 8px);
	}
	.f-m-rad, .f-nav .f-m-login {
		gap: var(--luft-1, 4px);
	}
	.f-m-rad + .f-m-rad, .f-nav .f-m-login {
		margin-top: var(--luft-1, 4px);
	}
	.f-nav a.f-m-knapp, .f-nav a.f-m-knapp:link, .f-nav a.f-m-knapp:visited {
		flex-direction: column;
		gap: 2px;
		min-height: 50px;
		padding: var(--luft-1, 4px) 2px;
		font-size: var(--text-l);
	}
	.f-m-lang, .f-m-knapp small.f-m-lang {
		display: none;
	}
	.f-m-kort, .f-m-knapp small.f-m-kort {
		display: inline;
	}
	.f-nav a.f-m-v, .f-nav a.f-m-v:link, .f-nav a.f-m-v:visited {
		gap: var(--luft-1, 4px);
		padding: var(--luft-2, 8px) var(--luft-1, 4px);
		font-size: var(--text-s);
	}
	.f-nav a.f-m-ikon span {
		display: none;
	}
	.f-nav .f-m-login .f-falt {
		grid-column: span 3;
	}
	.f-nav .f-m-login .f-login-knapp {
		grid-column: 1 / -1;
	}
}

.f-nav .f-m-login:first-child {
	margin-top: 0;
}
#forummenufoot:not(:has(a)) {
	display: none;
}

#forummenufoot {
	margin-top: var(--luft-4, 16px);
}

/* ---------- Byggstenar som alla sidor använder ---------- */

/* Vitt kort, samma som .card på sajten */
.f-kort {
	background-color: var(--farg-kort, #fff);
	border: 1px solid var(--farg-linje, #e1e8f5);
	padding: var(--luft-4, 16px) var(--luft-5, 24px);
}

/* Knappar: färger, storlekar och hovring kommer från /rejsa_knappar.css (.f-knapp = standardknapp, .f-primar = huvudknapp) */
.f-knapp, a.f-knapp:link, a.f-knapp:visited, input.f-knapp, button.f-knapp {
	line-height: 1.3;
}



/* Textfält */
input.post, textarea.post, select {
	box-sizing: border-box;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	font-family: inherit;
	font-size: var(--text-l);
}


/* ---------- Forumlistan (index_body.tpl) ---------- */

.f-topp {
	margin-bottom: var(--luft-3, 12px);
	font-size: var(--text-m);
}
/* Inloggningen (utloggad): kort med etikett ovanför fälten, en rad på datorn */
.f-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: var(--luft-3, 12px) var(--luft-4, 16px);
	align-items: end;
	margin-bottom: var(--luft-5, 24px);
}
.f-falt span {
	display: block;
	margin-bottom: var(--luft-1, 4px);
	font-size: var(--text-s);
	font-weight: bold;
	color: var(--farg-text-2, #555);
}
.f-falt input.post {
	width: 100%;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
}
.f-login-knapp {
	display: flex;
	align-items: center;
	gap: var(--luft-3, 12px);
}
.f-login-knapp .f-knapp {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}
.f-kryss {
	white-space: nowrap;
	font-size: var(--text-m);
	color: var(--farg-text-2, #555);
	cursor: pointer;
}
.f-kryss input[type=checkbox] {
	vertical-align: -1px;
}
.f-kat {
	padding: 0 0 var(--luft-1, 4px) 0;
}
.f-kat-rubrik, .f-forum {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) 80px 70px 150px;
	column-gap: var(--luft-4, 16px);
	align-items: center;
	padding: 0 var(--luft-5, 24px);
}
.f-kat-rubrik {
	padding-top: var(--luft-4, 16px);
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.f-kat-rubrik h2 {
	grid-column: 1 / 3;
	margin: 0;
	font-size: var(--text-xxl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-kol {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
	text-align: right;
}
.f-kol-senaste {
	text-align: left;
}

.f-forum {
	padding-top: var(--luft-3, 12px);
	padding-bottom: var(--luft-3, 12px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	cursor: pointer;
}
.f-forum:last-child {
	border-bottom: none;
}
.f-forum:hover {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-forum:hover .forumlink {
	color: var(--farg-accent, #ff761e);
}
/* Trådnamnet blir orange när man hovrar över raden, som forumnamnen */
.f-trad:hover .topictitle {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
/* Ingen understrykning på forum- och trådnamn vid hovring, bara orange */
.forumlink:hover, .topictitle:hover {
	text-decoration: none;
}

/* Nya inlägg eller inte: bilden döljs, en orange prick visar nytt, en grå ring inget nytt */
.f-status {
	display: block;
	width: 12px;
	height: 12px;
	margin-left: var(--luft-1, 4px);
	border: 2px solid var(--farg-ram, #c4d2ed);
	border-radius: 50%;
	box-sizing: border-box;
}
.f-status img {
	display: none;
}
.f-forum:has(img[src*="_new"]) .f-status {
	border-color: var(--farg-accent, #ff761e);
	background-color: var(--farg-accent, #ff761e);
}

.f-namn .forumlink {
	display: block;
	font-size: var(--text-xl);
	font-weight: bold;
}
.f-beskr {
	display: block;
	margin-top: 2px;
	font-size: var(--text-m);
	color: var(--farg-text-svag, #666);
}
.f-antal {
	font-size: var(--text-m);
	color: var(--farg-text-2, #555);
	text-align: right;
}
.f-senaste {
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
	line-height: 1.35;
}

.f-info {
	font-size: var(--text-s);
	color: var(--farg-text-2, #555);
	line-height: 1.6;
}
/* Knapparna under statistikrutan, utanför kortet */
.f-info-lank {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	margin: -6px 0 20px 0;
}

/* ---------- Sidhuvud, verktygsrad och sidnummer (används på flera sidor) ---------- */

.f-sidhuvud {
	margin: var(--luft-3, 12px) 0 var(--luft-5, 24px) 0;
}
/* Rubriken (Forumlista > ...) lika långt från rutan ovanför som korten från varandra: --kort-glapp i .forum */
.forum > div.f-sidhuvud:first-of-type {
	margin-top: 0;
}
@media only screen and (max-width: 760px) {
	/* Korten har bara 12px marginal på mobilen - rubriken nederst tar själv 16px */
	.forum .f-nere {
		margin-top: 0;
	}
	.forum .f-nere .f-sidhuvud {
		margin-top: var(--luft-4, 16px);
	}
}
/* Två rader i nästan samma storlek, som i gamla designen: Forumlista (tillbaka) och forumets namn */
.f-brod {
	font-size: var(--text-xxl);
	font-weight: bold;
	line-height: 1.3;
	color: var(--farg-accent, #ff761e); /* bara pilarna mellan länkarna, länkarna har egen färg */
}
.f-sidhuvud h1 {
	margin: var(--luft-2, 8px) 0 0 0;
	font-size: var(--text-xxl);
	line-height: 1.2;
}
.f-sidhuvud h1 a, .f-sidhuvud h1 a:link, .f-sidhuvud h1 a:visited {
	color: var(--farg-rubrik, #3b3b3b);
}
.f-sidhuvud h1 a:hover {
	color: var(--farg-accent, #ff761e);
	text-decoration: none;
}

.f-besok {
	margin-top: var(--luft-1, 4px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-nere {
	margin-top: var(--luft-1, 4px);
}
.f-sidhuvud-nere {
	margin-top: var(--luft-2, 8px);
}

.f-verktyg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--luft-4, 16px) var(--luft-5, 24px);
	margin-bottom: var(--luft-5, 24px);
}
/* Tom verktygsrad (t.ex. sökresultat på en enda sida) tar ingen plats */
.f-verktyg:not(:has(a, b)) {
	display: none;
}
.f-verktyg-vanster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
}
.f-verktyg-nere {
	margin-top: -6px;
}

/* Sidnummer: phpBB skriver "1, 2, 3 ... 91 >>" - kommatecken och punkter döljs, länkarna blir rutor */
.f-sidor {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-1, 4px);
	font-size: 0;
}
.f-sidor a, .f-sidor b {
	display: inline-block;
	min-width: 32px;
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	box-sizing: border-box;
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	font-size: var(--text-m);
	text-align: center;
	line-height: 1.3;
}
.f-sidor b {
	border-color: var(--farg-accent, #ff761e);
	color: var(--farg-accent, #ff761e);
}
.f-sidor a:hover {
	border-color: var(--farg-accent, #ff761e);
	text-decoration: none;
}

.f-sidor .f-glapp {
	display: inline-block;
	padding: 0 var(--luft-2, 8px);
	font-size: var(--text-l);
	line-height: 30px;
	color: var(--farg-gra-bla, #9aa6bd);
	letter-spacing: 1px;
}

.f-lasta {
	margin-top: var(--luft-1, 4px);
}


/* ---------- Trådlistan (viewforum_body.tpl) ---------- */

.f-tradar {
	padding: 0 0 var(--luft-1, 4px) 0;
}
.f-trad {
	display: grid;
	grid-template-columns: 0 minmax(0, 1fr) 78px 52px 56px 150px;
	column-gap: var(--luft-2, 8px);
	align-items: center;
	padding: var(--luft-2, 8px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-trad:last-child {
	border-bottom: none;
}
.f-trad:hover {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-trad-rubrik {
	padding-top: var(--luft-3, 12px);
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-trad-rubrik:hover {
	background-color: transparent;
}
.f-trad-tom {
	padding: var(--luft-5, 24px);
	color: var(--farg-text-svag, #666);
}

/* Ny-prick: orange om tråden har olästa inlägg (phpBB skriver då en länk till det första olästa) */
.f-trad .f-status {
	align-self: start;
	margin-top: var(--luft-2, 8px);
}
.f-trad:has(.f-t-ny a) .f-status {
	border-color: var(--farg-accent, #ff761e);
	background-color: var(--farg-accent, #ff761e);
}

/* Sökresultat: pricken i höjd med trådens titel, inte med forumnamnet ovanför */
.f-trad:has(.f-t-forum) .f-status {
	margin-top: var(--luft-5, 24px);
}
/* Forumets ikon och namn över tråden i sökresultaten */
.f-t-forum, a.f-t-forum:link, a.f-t-forum:visited {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin-bottom: 2px;
	font-size: var(--text-xs);
	color: var(--farg-bla, #3D5C98);
}
.f-t-forum img {
	height: 16px;
	width: auto;
}
a.f-t-forum:hover {
	color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.f-t-namn .topictitle {
	font-size: var(--text-xl);
	font-weight: bold;
}
.topic_announcement, .topic_sticky, .f-t-namn > span[class^="topic_"] {
	display: block;
	margin: 0 0 1px 0;
	padding: 0;
	color: var(--farg-gra-bla, #9aa6bd);
	line-height: 1.2;
	font-size: var(--text-xs);
	font-weight: normal;
	vertical-align: 1px;
}
/* Hopp-knapparna (som de två pilarna i gamla designen): orange = till första olästa inlägget
   (bara när det finns olästa), grå = till senaste inlägget. Bilderna byts mot CSS-knappar. */
.f-t-hopp {
	display: flex;
	justify-content: flex-end;
	gap: var(--luft-2, 8px);
}
/* Sokresultat: lite mer luft mellan Till forsta olasta och Till senaste (alla skarmbredder) */
.f-sokres .f-t-hopp {
	gap: var(--luft-3, 12px);
}
@media only screen and (max-width: 760px) {
	.f-sokres .f-t-hopp {
		gap: var(--luft-2, 8px);
	}
}
@media only screen and (min-width: 1000px) {
	.f-sokres .f-t-hopp {
		gap: var(--luft-4, 16px);
	}
}
.f-t-ny a img, .f-t-pil a img {
	display: none;
}
.f-t-ny a, .f-t-pil a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border-radius: var(--knapp-radie, 2px);
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
}
.f-t-ny a:hover, .f-t-pil a:hover {
	text-decoration: none;
}
.f-t-ny a, .f-t-ny a:link, .f-t-ny a:visited {
	background-color: var(--farg-accent, #ff761e);
	color: var(--farg-pa-farg, #fff);
}
.f-t-ny a:after {
	content: "\203A";
	font-size: 34px;
	margin-top: -4px;
}
.f-t-ny a:hover {
	background-color: var(--farg-accent-mork, #e0600a);
	color: var(--farg-pa-farg, #fff);
}
.f-t-pil a, .f-t-pil a:link, .f-t-pil a:visited {
	border: 1px solid var(--farg-ram, #c4d2ed);
	background-color: transparent;
	color: var(--farg-gra-bla, #9aa6bd);
}
.f-t-pil a:after {
	content: "\203A|";
	letter-spacing: -1px;
	font-size: 22px;
	margin-top: -2px;
}
.f-t-pil a:hover {
	border-color: var(--farg-accent, #ff761e);
	color: var(--farg-accent, #ff761e);
}/* Sidlänkarna i långa trådar (1 ... 131, 132, 133): små rutor som sidnumren, kommatecken döljs */
.f-t-sidor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-1, 4px);
	margin: var(--luft-1, 4px) 0 1px 0;
	font-size: 0;
}
.f-t-sidor:empty {
	display: none;
}
.f-t-sidor br {
	display: none;
}
.f-t-sidor a, .f-t-sidor a:link, .f-t-sidor a:visited {
	display: inline-block;
	min-width: 22px;
	padding: 1px var(--luft-1, 4px);
	box-sizing: border-box;
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	font-size: var(--text-xs);
	font-weight: normal;
	text-align: center;
	line-height: 1.4;
}
.f-t-sidor a:hover {
	border-color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.f-t-sidor .f-glapp {
	padding: 0 2px;
	font-size: var(--text-xs);
	color: var(--farg-gra-bla, #9aa6bd);
}
.f-t-av {
	display: block;
	margin-top: 2px;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-t-sista {
	padding-left: var(--luft-2, 8px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
	line-height: 1.35;
}

/* ---------- Inloggningssidan (login_body.tpl) ---------- */

.f-login-sida-huvud, .f-login-sida {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}
.f-login-sida {
	display: flex;
	flex-direction: column;
	gap: var(--luft-3, 12px);
	padding: var(--luft-5, 24px) var(--luft-5, 24px) var(--luft-5, 24px) var(--luft-5, 24px);
}
.f-login-sida h1 {
	margin: 0 0 var(--luft-1, 4px) 0;
	font-size: var(--text-xxl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-login-sida .f-kryss {
	align-self: flex-start;
}
.f-login-sida-knapp {
	width: 100%;
	padding: var(--knapp-l-pad) !important;
	font-size: var(--knapp-l-fs) !important;
}
.f-login-sida-lankar {
	display: flex;
	flex-direction: column;
	gap: var(--luft-2, 8px);
	margin-top: var(--luft-1, 4px);
	padding-top: var(--luft-3, 12px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-m);
	text-align: center;
}

/* ---------- Söksidan (search_body.tpl) ---------- */

.f-sok-kort h2 {
	margin: 0 0 var(--luft-3, 12px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-sok-rad {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--luft-3, 12px) var(--luft-5, 24px);
}
.f-sok-ord input.post {
	font-size: var(--text-xl);
}
.f-sok-val {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px) var(--luft-5, 24px);
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-m);
}
/* Alla ord / minst ett ord: ett val per rad */
.f-sok-rad + .f-sok-val {
	flex-direction: column;
	gap: var(--luft-2, 8px);
}
.f-sok-val label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--luft-2, 8px);
}
.f-sok-val input[type=radio] {
	margin: 0;
	flex: none;
}
.f-sok-val select {
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	font-size: var(--text-m);
}
.f-sok-hjalp {
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-sok-knapp {
	margin-top: var(--luft-4, 16px);
}
.f-sok-knapp .f-knapp {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}
.f-sok-grid {
	display: grid;
	/* Max två kolumner: varje kolumn minst halva bredden */
	grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - var(--luft-5, 24px)) / 2)), 1fr));
	gap: var(--luft-4, 16px) var(--luft-5, 24px);
}
.f-sok-grid select {
	width: 100%;
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
}
.f-sok-grid .f-sok-val {
	margin-top: var(--luft-2, 8px);
}
.f-sok-grid .f-sok-val select {
	width: auto;
}
.f-sok-bred .f-sok-val {
	flex-direction: column;
	gap: var(--luft-2, 8px);
}
.f-sok-bred {
	grid-column: 1 / -1;
}
.f-sok-tips {
	margin-top: var(--luft-4, 16px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-sok-fot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--luft-2, 8px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}

/* ---------- Bevakade trådar (watched_topics_body.tpl) ---------- */

/* Kolumner som sökresultaten (prick, titel, hoppknappar, svar, läst, senaste) plus kryssruta */
.f-bevakade .f-trad {
	grid-template-columns: 0 minmax(0, 1fr) 78px 52px 56px 150px 36px;
}
.f-kol-valj {
	text-align: center;
}
.f-t-kryss {
	display: flex;
	justify-content: center;
	cursor: pointer;
}
.f-t-kryss input {
	width: 18px;
	height: 18px;
	cursor: pointer;
}
/* Högerställt under kryssrutorna: Markera/Avmarkera på en rad, Sluta bevaka på nästa */
.f-bev-verktyg {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--luft-2, 8px);
	margin: -6px 0 20px 0;
	font-size: var(--text-m);
}
.f-bev-rad {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--luft-2, 8px);
}

/* ---------- Profilen (profile_add_body.tpl) ---------- */

.f-profil-kort h2 {
	margin: 0 0 var(--luft-2, 8px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-prad {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--luft-2, 8px) var(--luft-5, 24px);
	align-items: center;
	padding: var(--luft-3, 12px) 0;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-prad:last-child {
	border-bottom: none;
}
.f-plabel {
	font-size: var(--text-l);
	font-weight: bold;
	color: var(--farg-rubrik, #3b3b3b);
}
.f-plabel small {
	display: block;
	margin-top: 2px;
	font-size: var(--text-xs);
	font-weight: normal;
	color: var(--farg-text-svag, #666);
}
.f-pfalt input.post, .f-pfalt textarea.post, .f-pfalt select {
	width: 100%;
	max-width: 420px;
}
.f-pfalt textarea.post {
	max-width: 560px;
	min-height: 110px;
}
.f-pfalt-rad {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
}
.f-pfalt-rad input.post {
	flex: 1 1 220px;
}
.f-pinfo {
	margin: var(--luft-2, 8px) 0;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-jn {
	display: flex;
	gap: var(--luft-5, 24px);
}
.f-jn label {
	cursor: pointer;
}
.f-avatar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-3, 12px) 30px;
	align-items: flex-start;
	padding: var(--luft-2, 8px) 0;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-avatar-bild {
	display: flex;
	flex-direction: column;
	gap: var(--luft-2, 8px);
}
.f-avatar-intro {
	margin: 0 0 var(--luft-1, 4px);
}
/* Tredje kolumnen: två val, ladda upp ny bild eller ta bort */
.f-avatar-val {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--luft-2, 8px);
}
.f-avatar-val .f-kryss {
	margin-top: var(--luft-2, 8px);
}
/* Ingen nuvarande bild = inget att ta bort */
.f-avatar:not(:has(.f-avatar-bild:not(.f-avatar-ny) img)) #avatar-tabort {
	display: none;
}
.f-avatar-bild > .f-pinfo, .f-avatar-val > .f-pinfo {
	margin: 0;
}
.f-avatar-bild img {
	max-width: 114px;
}
/* Ny avatar vald i uppladdningsfönstret, inte sparad än */
.f-avatar-ny[hidden] {
	display: none;
}
.f-avatar-ny img {
	outline: 2px solid var(--farg-accent, #ff761e);
}
.f-avatar-spara {
	max-width: 114px;
	font-size: var(--text-s);
	color: var(--farg-accent-text, #c4520c);
}
.f-profil-spara {
	display: flex;
	gap: var(--luft-2, 8px);
	margin-bottom: var(--luft-5, 24px);
}
.f-profil-spara .f-primar {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}

/* Signaturens hjälptext (egen text i mallen): röd uppmaning och en rad om forumreglerna */
.f-prad-signatur {
	align-items: start;
}
.f-prad-signatur .f-plabel small span {
	display: block;
	font-size: var(--text-s);
	line-height: 1.4;
}
.f-sig-krav {
	margin-top: var(--luft-2, 8px);
	font-weight: bold;
	color: var(--farg-fel, #c0392b);
}
.f-sig-krav2 {
	color: var(--farg-fel, #c0392b);
}
.f-sig-regler {
	margin-top: var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}

/* ---------- Avatargalleriet (profile_avatar_gallery.tpl) ---------- */

.f-galleri-kat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin-bottom: var(--luft-4, 16px);
	font-size: var(--text-m);
}
.f-galleri-kat select {
	margin-left: var(--luft-2, 8px);
}
.f-galleri-rutor {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--luft-2, 8px);
}
/* Utan script: bilderna och knapparna i var sin rad, i samma kolumner */
.f-galleri-rad {
	display: contents;
}
.f-galleri-ruta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--luft-2, 8px);
	padding: var(--luft-2, 8px) var(--luft-1, 4px);
	border: 2px solid var(--farg-linje, #E1E8F5);
	border-radius: 8px;
	background-color: var(--farg-kort, #fff);
	cursor: pointer;
}
.f-galleri-ruta:hover {
	border-color: var(--farg-ram, #c4d2ed);
}
.f-galleri-ruta:has(input:checked) {
	border-color: var(--farg-accent, #ff761e);
	background-color: var(--farg-accent-yta, #fff6f0);
}
.f-galleri-ruta img {
	max-width: 80px;
	max-height: 80px;
}
.f-galleri-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	margin-top: var(--luft-4, 16px);
}

/* ---------- Tråden (viewtopic_body.tpl) ---------- */

.f-inlagg {
	margin-bottom: var(--luft-2, 8px);
}
.f-post {
	display: grid;
	grid-template-columns: 135px minmax(0, 1fr);
	gap: 0 var(--luft-5, 24px);
	padding: var(--luft-4, 16px) var(--luft-5, 24px);
	margin-bottom: var(--luft-3, 12px);
}
/* Ankaret (#inläggsnummer) ska inte ta en plats i rutnätet */
.f-post {
	position: relative;
}
.f-post > a[name] {
	position: absolute;
	top: -10px;
}
/* Författaren */
/* Hela författarrutan är en länk till profilen (kontakta, bilar, varvtider) */
.f-post-forf {
	display: block;
	cursor: pointer;
	align-self: start;
	margin: -8px;
	padding: var(--luft-2, 8px);
	border-radius: 8px;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.f-post-forf:hover {
	background-color: var(--farg-yta, #f7f9fc);
	text-decoration: none;
}
.f-post-forf:hover .f-post-namn {
	color: var(--farg-accent, #ff761e);
}
/* Knapparna i författarrutan */
.f-post-forf-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-1, 4px);
	margin-top: var(--luft-2, 8px);
}
.f-post-forf-knappar .f-knapp, .f-post-forf-knappar a.f-knapp:link, .f-post-forf-knappar a.f-knapp:visited {
	padding: var(--knapp-s-pad);
	font-size: var(--knapp-s-fs);
}
.f-post-avatar img {
	display: block;
	max-width: 114px;
	max-height: 114px;
	margin-bottom: var(--luft-2, 8px);
	border-radius: 6px;
}
.f-post-avatar:empty {
	display: none;
}
.f-post-forf-text {
	display: flex;
	flex-direction: column;
	gap: var(--luft-1, 4px);
}
.f-post-namn {
	font-size: var(--text-l);
	color: var(--farg-bla, #3D5C98);
}
.f-post-rang img {
	display: block;
	margin: var(--luft-1, 4px) 0 2px 0;
}
.f-post-start:empty, .f-post-ort:empty, .f-post-rang:empty {
	display: none;
}
.f-post-start {
	color: var(--farg-accent-mork, #e0600a);
	font-weight: bold;
}

/* Texten */
.f-post-main {
	min-width: 0;
}
.f-post-topp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--luft-1, 4px) var(--luft-3, 12px);
	padding-bottom: var(--luft-2, 8px);
	margin-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-post-datum, a.f-post-datum:link, a.f-post-datum:visited {
	color: var(--farg-text-svag, #666);
}
a.f-post-datum:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
/* Moderatorernas namn har en färg inline från phpBB (grön): orange vid hovring ändå */
.f-info a[style]:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e)) !important;
}
/* Ändra-knappen (bara på egna inlägg) under datumet */
.f-post-tid {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--luft-2, 8px);
}
.f-post-redigera {
	display: flex;
	gap: var(--luft-2, 8px);
}
.f-post-redigera:empty {
	display: none;
}
.f-post-redigera .f-knapp, .f-post-redigera a.f-knapp:link, .f-post-redigera a.f-knapp:visited {
	/* samma storlek som Kontakta/Mina bilar */
	padding: var(--knapp-s-pad);
	font-size: var(--knapp-s-fs);
	line-height: 1.3;
}
/* Mobil: Skicka uppskattning, Citera och Svara lika sma som Andra/Radera inlagg */
@media only screen and (max-width: 760px) {
	.f-post-knappar-h .f-knapp, .f-post-knappar-h a.f-knapp:link, .f-post-knappar-h a.f-knapp:visited {
		padding: var(--knapp-s-pad);
		font-size: var(--knapp-s-fs);
		line-height: 1.3;
	}
}
.f-post-rubrik {
	display: block;
	margin-bottom: var(--luft-2, 8px);
	font-size: var(--text-xxl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-post-rubrik br {
	display: none;
}
.f-post-rubrik:empty {
	display: none;
}
.f-post-text {
	padding-bottom: var(--luft-3, 12px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5); /* en linje under texten, ovanför signatur och knappar */
	font-size: var(--text-l);
	line-height: 1.55;
	overflow-wrap: anywhere;
}
.f-post-text img {
	max-width: 100%;
	height: auto;
}
.f-post-text iframe, .f-post-text video, .f-post-text embed, .f-post-text object {
	max-width: 100%;
}
.f-post-sign {
	margin-top: var(--luft-3, 12px);
	/* varje rad pa en rad - for lang rad kapas med ... (bilder krymps i stallet) */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-post-sign:empty {
	display: none;
}

/* Knapparna under inlägget */
.f-post-knappar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin-top: var(--luft-3, 12px);
}
.f-post-knappar-v, .f-post-knappar-h {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
}
.f-post-knappar .f-knapp, .f-post-knappar a.f-knapp:link, .f-post-knappar a.f-knapp:visited {
	line-height: 1.3;
}
/* Moderatorns knappar pa en egen rad under tradens knappar (viewtopic_body); utan knappar (vanliga anvandare) syns ingen rad */
.f-mod-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin: -6px 0 20px;
	padding-top: var(--luft-3, 12px);
	border-top: 1px dashed var(--farg-ram, #c4d2ed);
}
.f-mod-rad:not(:has(a)) {
	display: none;
}
.f-mod-rubrik {
	margin-right: 2px;
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
/* Mobil: ingen 'Moderator:'-text, sa att alla moderatorknappar far plats pa en rad */
@media only screen and (max-width: 760px) {
	.f-mod-rubrik {
		display: none;
	}
}
.f-mod {
	display: contents;
}
.f-tack {
	color: var(--farg-accent-mork, #e0600a);
}
.f-tackade {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
/* Antalet uppskattningar (inline-stil från PHP: absolut, 28px) blir en liten orange bubbla som ligger lite över knappens högra hörn */
.f-tackade {
	position: relative;
	width: 0;
	align-self: stretch;
}
.f-tackade span {
	position: absolute !important;
	top: -10px;
	left: -22px;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	margin: 0 !important;
	padding: 0 var(--luft-2, 8px) !important;
	border-radius: 10px !important;
	font-size: var(--text-xs) !important;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--farg-kort, #fff);
	z-index: 1;
}
.f-tackade:empty {
	display: none;
}
/* Bevaka/sluta bevaka: en knapp i verktygsraden under tråden, efter Svara (som Markera som läst på forumsidorna) */
.f-bevaka {
	display: contents;
}

/* Signatur och knappar under linjen: signaturen till vänster (mitt för knapparna), knapparna till höger i två rader */
/* (Gäller alla bredder) Signaturen till vänster på samma rad som knapparna */
.f-post-main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	/* Raderna packas upptill - ett kort inlägg bredvid en hög författarruta hamnar överst, inte i mitten */
	align-content: flex-start;
	column-gap: var(--luft-2, 8px);
}
.f-post-topp, .f-post-text {
	flex: 0 0 100%;
}
.f-post-sign {
	flex: 1 1 120px;
	align-self: flex-start; /* overst, i linje med forsta knappraden */
	min-width: 0;
	margin-top: var(--luft-3, 12px);
	font-size: var(--text-xs);
}
.f-post-sign:empty + .f-post-knappar {
	flex-basis: 100%;
}
.f-post-knappar {
	flex: 0 1 auto;
	margin-left: auto;
}
/* Skicka uppskattning på en egen rad, Citera och Svara under, allt högerställt */
.f-post-knappar-h {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto;
	justify-content: end;
	gap: var(--luft-2, 8px);
}
.f-post-knappar-h .f-knapp {
	text-align: center;
}
.f-post-knappar-h .f-tack {
	order: -1;
	grid-column: 1 / -1;
	justify-self: end;
}
.f-post-knappar-h {
	position: relative;
}
.f-tackade {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
}
.f-tackade span {
	top: -9px;
	left: -14px;
}


/* ---------- Visa profil (profile_view_body.tpl) ---------- */

.f-visaprofil {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px);
	gap: var(--luft-4, 16px) var(--luft-5, 24px);
	align-items: start;
	padding: var(--luft-5, 24px) var(--luft-5, 24px);
}
.f-vp-bild img {
	display: block;
	max-width: 114px;
	max-height: 114px;
	border-radius: 8px;
}
.f-vp-bild:empty {
	display: none;
}
.f-vp-bild { grid-column: 1; }
.f-vp-fakta { grid-column: 2; }
.f-vp-knappar { grid-column: 3; }
.f-vp-namn {
	font-size: var(--text-xxl);
	font-weight: bold;
	color: var(--farg-bla, #3D5C98);
}
.f-vp-ort {
	margin-bottom: var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}
.f-vp-rad {
	font-size: var(--text-m);
	color: var(--farg-text-svag, #666);
}
.f-vp-rang {
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-m);
	color: var(--farg-accent-mork, #e0600a);
	font-weight: bold;
}
.f-vp-rang img {
	display: block;
	margin-bottom: var(--luft-1, 4px);
}
.f-vp-knappar {
	display: flex;
	flex-direction: column;
	gap: var(--luft-2, 8px);
}
/* Tomma rutor (t.ex. ingen e-post eller hemsida) visas inte */
.f-vp-knapp:not(:has(a)) {
	display: none;
}
.f-vp-knapp a, .f-vp-knapp a:link, .f-vp-knapp a:visited {
	display: block;
	text-align: center;
}



.f-vp-knapp img {
	display: none;
}

/* ---------- Sidfoten ---------- */

.f-stil {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--luft-2, 8px);
	padding: var(--luft-5, 24px) var(--luft-2, 8px) var(--luft-2, 8px) var(--luft-2, 8px);
}


.f-admin {
	padding: var(--luft-1, 4px) var(--luft-2, 8px) 30px var(--luft-2, 8px);
	text-align: center;
	font-size: var(--text-s);
}


/* Mellanbredd: kolumnen Läst döljs och senaste inlägg blir smalare, så trådens titel får plats */
@media only screen and (min-width: 761px) and (max-width: 960px) {
	.f-bevakade .f-trad {
		grid-template-columns: 0 minmax(0, 1fr) 78px 50px 130px 36px;
	}
	.f-trad {
		grid-template-columns: 0 minmax(0, 1fr) 78px 50px 130px;
		column-gap: var(--luft-2, 8px);
		padding-left: var(--luft-3, 12px);
		padding-right: var(--luft-3, 12px);
	}
	.f-trad .f-t-visn, .f-trad-rubrik > span:nth-child(5) {
		display: none;
	}
	.f-kat-rubrik, .f-forum {
		grid-template-columns: 22px minmax(0, 1fr) 70px 60px 130px;
		column-gap: var(--luft-3, 12px);
	}
}
/* ---------- Mobil ---------- */

@media only screen and (max-width: 760px) {
	/* Visa profil: bild och fakta bredvid varandra, knapparna under */
	.f-visaprofil {
		grid-template-columns: auto minmax(0, 1fr);
		padding: var(--luft-4, 16px) var(--luft-3, 12px);
	}
	.f-vp-bild img {
		max-width: 80px;
		max-height: 80px;
	}
	.f-vp-knappar {
		grid-column: 1 / -1;
	}
	/* Tråden: författaren som en rad överst med liten avatar */
	.f-post {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--luft-3, 12px) var(--luft-3, 12px);
	}
	.f-post-forf {
		display: flex;
		align-items: center;
		gap: var(--luft-2, 8px);
		margin-bottom: var(--luft-2, 8px);
	}
	/* Knapparna i författarrutan */
.f-post-forf-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-1, 4px);
	margin-top: var(--luft-2, 8px);
}
.f-post-forf-knappar .f-knapp, .f-post-forf-knappar a.f-knapp:link, .f-post-forf-knappar a.f-knapp:visited {
}
.f-post-avatar img {
		max-width: 44px;
		max-height: 44px;
		margin: 0;
	}
	.f-post-forf-text {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px var(--luft-2, 8px);
	}
	/* Datumet högerställt på första raden, i höjd med namnet */
	.f-post-datum, a.f-post-datum:link, a.f-post-datum:visited {
		position: absolute;
		top: 14px;
		right: 12px;
		font-size: var(--text-xs);
		line-height: 23px; /* samma radhöjd som namnet, så texten står på samma linje */
	}
	.f-post-forf-text {
		padding-right: 110px;
	}
	.f-post-redigera {
		position: absolute;
		top: 42px;
		right: 12px;
	}
	.f-post-topp {
		padding: 0;
		border: none;
		margin: 0;
	}
	.f-post-forf {
		padding-bottom: var(--luft-2, 8px) !important;
		border-bottom: 1px solid var(--farg-linje, #E1E8F5);
		border-radius: 8px 8px 0 0;
	}
	/* Signaturen till vänster på samma rad som knapparna */
	.f-post-main {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		column-gap: var(--luft-2, 8px);
	}
	.f-post-topp, .f-post-text {
		flex: 0 0 100%;
	}
	.f-post-sign {
		flex: 1 1 120px;
		align-self: flex-start; /* overst, i linje med forsta knappraden */
		min-width: 0;
		margin-top: var(--luft-3, 12px);
		font-size: var(--text-xs);
	}
	.f-post-sign:empty + .f-post-knappar {
		flex-basis: 100%;
	}
	.f-post-knappar {
		flex: 0 1 auto;
		margin-left: auto;
	}
	/* Skicka uppskattning på en egen rad, Citera och Svara under, allt högerställt */
	.f-post-knappar-h {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: auto auto;
		justify-content: end;
		gap: var(--luft-2, 8px);
	}
	.f-post-knappar-h .f-knapp {
		text-align: center;
	}
	.f-post-knappar-h .f-tack {
		order: -1;
		grid-column: 1 / -1;
		justify-self: end;
	}
	.f-post-knappar-h {
		position: relative;
	}
	.f-tackade {
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
	}
	.f-tackade span {
		top: -9px;
		left: -14px;
	}

	.f-post-fakta, .f-post-ort, .f-post-rang img, .f-post-rang br, .f-post-forf-knappar {
		display: none;
	}
	.f-post-text {
		font-size: var(--text-l);
	}
	/* Profilen: etikett ovanför fältet */
	.f-prad {
		grid-template-columns: minmax(0, 1fr);
	}
	.f-pfalt input.post, .f-pfalt textarea.post, .f-pfalt select {
		max-width: none;
	}
	.f-profil-spara .f-primar {
		flex: 1 1 auto;
	}
	.f-bevakade .f-trad {
		grid-template-columns: 0 minmax(0, 1fr) auto auto;
		grid-template-areas:
			"status namn hopp kryss"
			". sista hopp kryss";
	}
	.f-t-kryss { grid-area: kryss; align-self: center; }
	/* Trådlistan: titel överst, författare och senaste inlägg i liten text under */
	/* Mer luft runt rubriken, knapparna och sidnumren */
	.f-sidhuvud {
		margin: var(--luft-2, 8px) 0 var(--luft-4, 16px) 0;
	}
	.f-sidhuvud h1 {
		margin-top: var(--luft-1, 4px);
	}
	.f-verktyg {
		row-gap: var(--luft-5, 24px);
		margin-bottom: var(--luft-5, 24px);
	}
	.f-brod {
		font-size: var(--text-xxl);
	}
	.f-sidhuvud h1 {
		font-size: var(--text-xxl);
	}
	.f-trad {
		grid-template-columns: 0 minmax(0, 1fr) auto;
		grid-template-areas:
			"status namn hopp"
			". sista hopp";
		column-gap: var(--luft-2, 8px);
		row-gap: var(--luft-1, 4px);
		padding: var(--luft-2, 8px) var(--luft-2, 8px) var(--luft-2, 8px) var(--luft-2, 8px);
	}
	.f-trad-rubrik {
		display: none;
	}
	.f-trad .f-status { grid-area: status; margin-top: 5px; margin-left: 0; }
	.f-t-namn { grid-area: namn; }
	.f-t-hopp { grid-area: hopp; align-self: center; }
	.f-trad .f-antal { display: none; }
	.f-t-sista {
		grid-area: sista;
		padding-left: 0;
		font-size: var(--text-xs);
		color: var(--farg-text-svag, #666);
	}
	.f-t-sista:before {
		content: "Senaste: ";
	}
	/* Sökresultat: pricken i höjd med trådens titel, inte med forumnamnet ovanför */
.f-trad:has(.f-t-forum) .f-status {
	margin-top: var(--luft-5, 24px);
}
/* Forumets ikon och namn över tråden i sökresultaten */
.f-t-forum, a.f-t-forum:link, a.f-t-forum:visited {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin-bottom: 2px;
	font-size: var(--text-xs);
	color: var(--farg-bla, #3D5C98);
}
.f-t-forum img {
	height: 16px;
	width: auto;
}
a.f-t-forum:hover {
	color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.f-t-namn .topictitle {
		font-size: var(--text-xl);
	}
	/* Enklare på mobilen: ingen startare/startdatum, sidlänkarna på egen rad */
	.f-t-av {
		display: none;
	}
	.f-t-sidor {
		display: flex;
		margin: var(--luft-1, 4px) 0 0 0;
		gap: var(--luft-1, 4px);
	}
	.f-t-sidor a, .f-t-sidor a:link, .f-t-sidor a:visited {
		min-width: 25px;
		padding: 2px var(--luft-1, 4px);
		font-size: var(--text-xs);
	}
	.f-t-sidor .f-glapp {
		font-size: var(--text-s);
	}
	.f-sidor {
		gap: var(--luft-2, 8px);
	}
	.f-sidor a, .f-sidor b {
		min-width: 38px;
		padding: var(--luft-2, 8px) var(--luft-2, 8px);
		font-size: var(--text-l);
	}
	/* Forumlistan: namnet överst, siffrorna och senaste inlägg på en rad under */
	.f-kort {
		padding: var(--luft-3, 12px) var(--luft-3, 12px);
	}
	.f-kat {
		padding: 0 0 2px 0;
	}
	.f-kat-rubrik, .f-forum {
		grid-template-columns: 16px minmax(0, 1fr);
		column-gap: var(--luft-2, 8px);
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-3, 12px);
	}
	.f-kat-rubrik .f-kol {
		display: none;
	}
	.f-forum {
		grid-template-areas:
			"status namn"
			". info";
	}
	.f-status { grid-area: status; align-self: start; margin-top: 5px; margin-left: 2px; }
	.f-namn   { grid-area: namn; }
	.f-antal {
		display: none;
	}
	.f-senaste {
		display: none;
	}
	.f-namn .forumlink {
		font-size: var(--text-l);
	}
	.f-beskr {
		font-size: var(--text-s);
	}
	.f-login {
		grid-template-columns: minmax(0, 1fr);
	}
	.f-sok-rad {
		grid-template-columns: minmax(0, 1fr);
	}
	.f-sok-knapp .f-knapp {
		width: 100%;
	}
	.f-login-knapp {
		justify-content: space-between;
	}
	.f-login-knapp .f-knapp {
		flex: 1 1 auto;
	}
	/* Tatare mobil: mindre text och mindre luft, narmare gamla mobilsidan */
	body {
		font-size: var(--text-m);
	}
	.f-sidhuvud {
		margin: var(--luft-2, 8px) 0 var(--luft-4, 16px) 0;
	}
	.f-sidhuvud h1 {
		margin-top: var(--luft-1, 4px);
	}
	.f-verktyg {
		row-gap: var(--luft-2, 8px);
		margin-bottom: var(--luft-2, 8px);
	}
	.f-verktyg-vanster {
		gap: var(--luft-2, 8px);
	}
	.f-knapp, a.f-knapp:link, a.f-knapp:visited, input.f-knapp, button.f-knapp {
	}
	.f-sidor a, .f-sidor b {
		min-width: 30px;
		padding: var(--luft-1, 4px) var(--luft-2, 8px);
		font-size: var(--text-s);
	}
	.f-sidor .f-glapp {
		padding: 0 var(--luft-1, 4px);
		font-size: var(--text-m);
		line-height: 26px;
	}
	.f-kort {
		padding: var(--luft-2, 8px) var(--luft-2, 8px);
	}
	.f-trad {
		column-gap: var(--luft-2, 8px);
		row-gap: 1px;
		padding: var(--luft-2, 8px) 2px;
	}
	.f-trad .f-status {
		margin-top: var(--luft-1, 4px);
	}
	.f-t-namn .topictitle {
		font-size: var(--text-m);
	}
	.topic_announcement, .topic_sticky, .f-t-namn > span[class^="topic_"] {
		margin-right: var(--luft-1, 4px);
		padding: 0;
		background: none;
		font-size: 10px;
		font-weight: normal;
		vertical-align: 1px;
	}
	/* Senaste: namn och datum pa en rad */
	.f-t-sista {
		font-size: var(--text-xs);
	}
	.f-t-sista br {
		display: none;
	}
	.f-t-sista-namn {
		margin-right: var(--luft-2, 8px);
	}
	.f-t-ny a, .f-t-pil a {
		width: 30px;
		height: 30px;
		font-size: 18px;
	}
	.f-t-ny a:after {
		font-size: 28px;
	}
	.f-t-pil a:after {
		font-size: 18px;
	}
	.f-t-sidor a, .f-t-sidor a:link, .f-t-sidor a:visited {
		min-width: 22px;
		padding: 1px var(--luft-1, 4px);
		font-size: var(--text-xs);
	}
	.f-namn .forumlink {
		font-size: var(--text-m);
	}
	.f-beskr {
		font-size: var(--text-xs);
	}
	.f-post {
		padding: var(--luft-2, 8px);
	}
	.f-post-text {
		font-size: var(--text-m);
	}
	/* Annu lugnare mobil: farre ramar, rutor och prickar i tradlistan */
	.f-kort:has(.f-trad) {
		margin-left: calc(-1 * var(--sida-luft));
		margin-right: calc(-1 * var(--sida-luft));
		padding: 0 var(--sida-luft);
		box-shadow: none;
		border-top: 1px solid var(--farg-linje, #E1E8F5);
		border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	}
	.f-trad {
		grid-template-columns: 0 minmax(0, 1fr) auto;
		column-gap: var(--luft-2, 8px);
		padding: var(--luft-2, 8px) 0;
	}
	.f-trad .f-status {
		width: 8px;
		height: 8px;
		margin-top: var(--luft-2, 8px);
		border: none;
	}
	.f-trad:has(.f-t-ny a) .f-status {
		background-color: var(--farg-accent, #ff761e);
	}
	.f-t-hopp {
		gap: 2px;
	}
	.f-t-ny a, .f-t-pil a {
		width: 26px;
		height: 26px;
	}
	.f-t-pil a, .f-t-pil a:link, .f-t-pil a:visited {
		border: 1px solid var(--farg-ram, #c4d2ed);
		background: none;
		color: var(--farg-gra-bla, #9aa6bd);
	}
	.f-t-sidor {
		gap: 0 var(--luft-2, 8px);
		margin-top: 1px;
	}
	.f-t-sidor a, .f-t-sidor a:link, .f-t-sidor a:visited {
		min-width: 0;
		padding: 0;
		border: none;
		background: none;
		font-size: var(--text-xs);
	}
	.f-sidor a, .f-sidor b {
		min-width: 26px;
		padding: var(--luft-1, 4px) var(--luft-1, 4px);
		font-size: var(--text-xs);
	}
	.f-sidor .f-glapp {
		line-height: 22px;
	}
	.f-knapp, a.f-knapp:link, a.f-knapp:visited, input.f-knapp, button.f-knapp {
	}
	.f-verktyg {
		row-gap: var(--luft-2, 8px);
		margin-bottom: var(--luft-3, 12px);
	}
}


/* ---------- Editorn ---------- */

/* Etiketter på egna knappar för YouTube och Facebook-video */
/* YouTube har egen ikon i temat; Facebook-video far en bla ruta med ett vitt f (temat har ingen Facebook-ikon) */
.sceditor-toolbar .sceditor-button-fbvideo div {
	position: relative;
	background: #1877f2 !important;
	border-radius: 3px;
}
.sceditor-toolbar .sceditor-button-fbvideo div:after {
	content: "f";
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	text-indent: 0;
	text-align: center;
	color: var(--farg-pa-farg, #fff);
	font: bold 14px/17px Arial, sans-serif;
}

/* Tradlistorna: inga sidlankar per trad - man gar till forsta inlagget, senaste eller forsta olasta */
.f-trad .f-t-sidor {
	display: none !important;
}

/* Bladdring: Forsta / Foregaende / [Sida X av Y v] / Nasta / Sista - byggs av skriptet i overall_footer.tpl.
   Mittknappen oppnar en liten ruta (.f-blad-pop) dar man skriver in ett sidnummer. */
.f-blad {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--luft-1, 4px);
	flex: 0 0 auto;
	margin-left: auto; /* alltid till hoger, aven nar den ar ensam pa raden (sokresultaten) */
}
.f-blad a.f-knapp, .f-blad a.f-knapp:link, .f-blad a.f-knapp:visited, .f-blad span.f-knapp, .f-blad button.f-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--luft-1, 4px);
	min-width: 36px;
	padding-left: var(--luft-2, 8px);
	padding-right: var(--luft-2, 8px);
	white-space: nowrap;
}
.f-blad-ik {
	display: block;
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
}
.f-blad .f-av {
	opacity: 0.35;
	cursor: default;
}
.f-blad .f-av:hover {
	border-color: var(--farg-ram, #c4d2ed);
}
.f-blad-nr .f-blad-ik {
	width: 1em;
	height: 1em;
	opacity: 0.6;
}
.f-blad-nr[aria-expanded="true"] {
	border-color: var(--farg-accent, #ff761e) !important;
}
.f-sidhuvud > .f-blad {
	align-self: center;
}
.f-blad button.f-blad-nr {
	padding-left: 11px;
}
.f-blad-kort {
	display: none;
}
.f-blad-pop {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;
	margin-top: var(--luft-1, 4px);
	padding: var(--luft-3, 12px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-kort, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.f-blad-pop[hidden] {
	display: none;
}
.f-blad-pop form {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	margin: 0;
	white-space: nowrap;
}
.f-blad-pop label {
	font-size: var(--text-s);
	color: var(--farg-text, #222);
}
.f-blad-pop input {
	width: 4.5em;
	margin: 0 var(--luft-1, 4px);
	padding: var(--luft-1, 4px) var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	background-color: var(--farg-yta, #fff);
	color: var(--farg-text, #222);
	font-size: 16px; /* under 16px zoomar iPhone in */
}

/* Mobil: texten blir "X/Y" och Bevaka blir en klocka - da far bladdringen plats
   pa samma rad som Nytt amne / Markera forum som last / Svara + Bevaka */
@media only screen and (max-width: 760px) {
	.f-verktyg {
		column-gap: var(--luft-2, 8px);
	}
	.f-verktyg:has(> .f-blad) {
		flex-wrap: nowrap;
	}
	.f-verktyg:has(> .f-blad) > .f-verktyg-vanster {
		flex-wrap: nowrap;
		min-width: 0;
	}
	.f-blad {
		gap: 3px;
	}
	.f-blad a.f-knapp, .f-blad a.f-knapp:link, .f-blad a.f-knapp:visited, .f-blad span.f-knapp, .f-blad button.f-knapp {
		min-width: 32px;
		padding-left: var(--luft-1, 4px);
		padding-right: var(--luft-1, 4px);
	}
	.f-blad button.f-blad-nr {
		padding-left: 9px;
		padding-right: 6px;
	}
	.f-blad-lang {
		display: none;
	}
	.f-blad-kort {
		display: inline;
	}
}
.f-bevaka-ik {
	display: none;
	width: 1.3em;
	height: 1.3em;
}
/* Datorn: klockan framfor texten - gra nar man inte bevakar, orange och ifylld nar man bevakar */
@media only screen and (min-width: 761px) {
	.f-bevaka a.f-knapp, .f-bevaka a.f-knapp:link, .f-bevaka a.f-knapp:visited {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.f-bevaka-ik {
		display: block;
		flex: 0 0 auto;
		width: 1.15em;
		height: 1.15em;
		color: var(--farg-text-svag, #666);
	}
	.f-bevaka a.f-bevakar .f-bevaka-ik {
		color: var(--farg-accent, #ff761e);
	}
}
@media only screen and (max-width: 760px) {
	.f-bevaka a.f-knapp, .f-bevaka a.f-knapp:link, .f-bevaka a.f-knapp:visited {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-2, 8px);
	}
	.f-bevaka-ik {
		display: block;
	}
	.f-bevaka a.f-bevakar {
		color: var(--farg-accent, #ff761e) !important;
	}
	.f-bevaka-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Tradlistorna: ingen ny-prick - den orange hoppknappen till hoger visar redan olasta inlagg */
.f-trad .f-status {
	visibility: hidden;
	width: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Rubriken: Forumlista > namn pa en rad om det far plats, annars tva rader. Traden har alltid tva rader. */
.f-sidhuvud:not(.f-tva-rader) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--luft-2, 8px);
}
/* Forumlista-raden far samma luft ovanfor som rubriken: pa en rad trycker rubrikens marginal ner hela raden,
   och utan detta hamnar en tvaradig rubrik 6px narmare rutan ovanfor */
.f-sidhuvud:not(.f-tva-rader):has(h1) .f-brod {
	margin-top: var(--luft-2, 8px);
}
@media only screen and (max-width: 760px) {
	.f-sidhuvud:not(.f-tva-rader):has(h1) .f-brod {
		margin-top: var(--luft-1, 4px);
	}
}

/* Profilen: knapp till integritetspolicyn langst ner */
.f-integritet {
	margin: var(--luft-5, 24px) 0 var(--luft-5, 24px) 0;
}
.f-integritet a.f-knapp, .f-integritet a.f-knapp:link, .f-integritet a.f-knapp:visited {
	padding: var(--knapp-l-pad) !important;
	font-size: var(--knapp-l-fs) !important;
}
/* Integritetspolicyn och Skicka centrerade under varandra */
.f-integritet {
	text-align: center;
}
.f-profil-spara {
	justify-content: center;
}
.f-profil-spara .f-primar {
	flex: 0 1 auto !important;
}
/* Mobil: inlaggen har 10px luft upptill (inte 12), sa datumet och Andra flyttas upp lika mycket */
@media only screen and (max-width: 760px) {
	.f-post-datum, a.f-post-datum:link, a.f-post-datum:visited {
		top: 8px; /* samma baslinje som namnet */
	}
	.f-post-redigera {
		top: 38px;
	}
	/* namnet i hojd med datumet, aven nar ingen rang star under */
	.f-post-forf {
		align-items: flex-start;
	}
	/* Andra-knappen under datumet: extra luft sa linjen hamnar under knappen */
	.f-post:has(.f-post-redigera:not(:empty)) .f-post-forf {
		padding-bottom: var(--luft-3, 12px) !important;
		box-sizing: border-box;
		min-height: 74px; /* knapparna slutar ca 60px ner - linjen minst 10px under dem */
	}
	/* Radera/Andra-knapparna ar bredare an datumet: texten halls till vanster om dem, sa rang och Tradstartare bryts i stallet for att hamna under knapparna */
	.f-post:has(.f-post-redigera:not(:empty)) .f-post-forf-text {
		padding-right: 160px;
	}
}
@media only screen and (max-width: 760px) {
	.f-rang-ny {
		display: none;
	}
}

/* Citat och kod i inlaggen (bbcode.tpl skriver en tabell: rubrikrad "X skrev:" och en cell .quote/.code) */
.f-post-text table:has(td.quote, td.code) {
	width: 100%;
	margin: var(--luft-2, 8px) 0;
	border-collapse: separate;
	border-spacing: 0;
}
.f-post-text table:has(td.quote, td.code) td {
	padding: 0;
}
.f-post-text table:has(td.quote, td.code) .genmed {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-post-text td.quote, .f-post-text td.code {
	padding: var(--luft-2, 8px) var(--luft-3, 12px) !important;
	border: 1px solid var(--farg-linje, #e1e8f5);
	border-left: 4px solid var(--farg-ram, #c4d2ed);
	border-radius: 6px;
	background-color: var(--farg-yta, #f7f9fc);
}
.f-post-text td.code {
	font-family: Consolas, 'Courier New', monospace;
	font-size: var(--text-s);
	white-space: pre-wrap;
	word-break: break-word;
}
/* Pa mobilen: smalare marginaler sa att citat i citat inte ater upp bredden */
@media only screen and (max-width: 760px) {
	.f-post-text td.quote, .f-post-text td.code {
		padding: 6px 6px 6px 8px !important;
		border-left-width: 2px;
	}
	/* inre citat gar ut till hoger kant, bara vanstra strecket tar plats */
	.f-post-text td.quote td.quote, .f-post-text td.quote td.code {
		padding-right: 0 !important;
		border-right: 0;
		border-radius: 6px 0 0 6px;
	}
}

/* Forfattarrutan: pa datorn ligger allt (bild, text, rang, knappar) i samma vansterkant */
@media only screen and (max-width: 760px) {
	/* pa mobilen ar luften till vanster mellanrummet mellan delarna pa raden */
	.f-post-forf-text > :not(.f-post-forf-knappar) {
		padding-left: var(--luft-2, 8px);
	}
	/* pa mobilen: alla delar har samma luft till vanster (aven Tradstartare nar den hamnar pa en ny rad), luften blir mellanrummet */
	.f-post-forf-text {
		column-gap: 0;
	}
}
/* Inlaggstexten: lite mer luft under linjen ovanfor och over linjen nedanfor */
.f-post-text {
	padding-top: var(--luft-2, 8px);
	padding-bottom: var(--luft-4, 16px);
}
/* Besoksraden (X besok idag) alltid pa egen rad under rubriken */
.f-sidhuvud .f-besok {
	flex-basis: 100%;
	font-size: var(--text-xs);
	color: var(--farg-accent, #ff761e);
}
/* Rang med egen farg fran databasen (t.ex. Moderator i rott): samma utseende som Tradstartare */
.f-post-rang span[style], .f-post-rang font {
	color: var(--farg-accent-mork, #e0600a) !important;
	font: inherit !important;
	font-weight: bold !important;
}

/* ---------- Editorn (posting_body, posting_poll_body, posting_preview, posting_topic_review) ---------- */

.f-pm-mappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px) var(--luft-3, 12px);
	margin: var(--luft-2, 8px) 0;
	font-size: var(--text-m);
}
.f-editor h2, .f-forhands h2, .f-granskning h2 {
	margin: 0 0 var(--luft-3, 12px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-erad {
	display: flex;
	flex-direction: column;
	gap: var(--luft-1, 4px);
	margin-bottom: var(--luft-3, 12px);
}
.f-erad > label {
	font-size: var(--text-m);
	font-weight: bold;
	color: var(--farg-rubrik, #3b3b3b);
}
.f-erad input.post {
	width: 100%;
	max-width: none;
	font-size: var(--text-l);
}
.f-erad small {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-erad-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px);
}
.f-erad-rad input.post {
	flex: 1 1 200px;
	width: auto;
	min-width: 0;
}
.f-editor .sceditor-container {
	box-sizing: border-box;
	max-width: 100%;
	border-color: var(--farg-ram, #c4d2ed);
	border-radius: 6px;
}
.f-smilies {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-1, 4px) var(--luft-2, 8px);
	margin: -4px 0 14px 0;
}
.f-smilies img {
	display: block;
}
.f-smilies-fler {
	margin-left: var(--luft-2, 8px);
	font-size: var(--text-s);
}
.f-ladda-upp {
	margin-bottom: var(--luft-4, 16px);
}
.f-val {
	display: flex;
	flex-direction: column;
	gap: var(--luft-2, 8px);
	margin-bottom: var(--luft-4, 16px);
	font-size: var(--text-m);
}
.f-val:not(:has(label, .f-val-typ)) {
	display: none;
}
.f-val label {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	cursor: pointer;
}
.f-val-typ input {
	margin: 0 var(--luft-1, 4px) 0 0;
	vertical-align: -2px;
}
.f-poll-skapa {
	margin: var(--luft-1, 4px) 0 var(--luft-4, 16px) 0;
	padding-top: var(--luft-3, 12px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
}
.f-editor-knappar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--luft-2, 8px);
	padding-top: var(--luft-3, 12px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
}
.f-editor-knappar .f-primar {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}
.f-editor-info {
	margin: 0 0 var(--luft-5, 24px) 0;
	text-align: center;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-forhands-info {
	margin-bottom: var(--luft-2, 8px);
	font-size: var(--text-s);
}
.f-forhands-info span {
	margin-left: var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}
.f-forhands .f-post-text {
	border-bottom: none;
}
.f-granskning-ram {
	display: block;
	width: 100%;
	height: 420px;
	border: none;
}
/* Sidan inne i iframen (simple_header.tpl) */
body.f-enkel {
	margin: 0;
	padding: 0 var(--luft-1, 4px);
	background-color: var(--farg-kort, #fff);
}
.f-granskning-post {
	padding: var(--luft-2, 8px) 0;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-granskning-huvud {
	margin-bottom: var(--luft-1, 4px);
	font-size: var(--text-s);
}
.f-granskning-huvud span {
	margin-left: var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}
.f-granskning-post .f-post-text {
	padding: 0;
	border-bottom: none;
	font-size: var(--text-m);
}
@media only screen and (max-width: 760px) {
	.f-editor-knappar .f-knapp {
		flex: 1 1 auto;
	}
	.f-granskning-ram {
		height: 320px;
	}
}
/* Senast andrad: overst i inlaggstexten, direkt under linjen */
.f-post-andrad {
	display: block;
	flex: 0 0 100%;
	margin-top: -6px; /* narmare linjen ovanfor */
	margin-bottom: var(--luft-4, 16px);
	font-size: var(--text-xs);
	color: var(--farg-text-ljus, #999);
}
.f-post-andrad:empty {
	display: none;
}

/* ---------- Personliga meddelanden (privmsgs_*.tpl) ---------- */

.f-pm-flikar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	font-size: var(--text-m);
}
.f-pm-flikar > span {
	display: inline-block;
	padding: var(--knapp-pad);
	border: 1px solid var(--farg-accent, #ff761e);
	border-radius: var(--knapp-radie);
	background-color: var(--farg-kort, #fff);
	color: var(--farg-rubrik, #3b3b3b);
	font-size: var(--knapp-fs);
}
.f-pm-flikar > span:has(a) {
	padding: 0;
	border: none;
	background: none;
}


.f-pm-storlek {
	margin: -6px 0 10px 0;
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-pm-lista {
	padding-top: var(--luft-1, 4px);
	padding-bottom: var(--luft-1, 4px);
}
.f-pm-rad {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--luft-3, 12px);
	padding: var(--luft-2, 8px) 0;
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-pm-rad:last-child {
	border-bottom: none;
}
/* Prick: orange om meddelandet ar olast (phpBB visar da folder_new-bilden) */
.f-pm-status img {
	display: none;
}
.f-pm-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.f-pm-rad:has(img[src*="_new"]) .f-pm-status {
	background-color: var(--farg-accent, #ff761e);
}
.f-pm-rad:has(img[src*="_new"]) .f-pm-amne {
	color: var(--farg-accent-mork, #e0600a);
}
.f-pm-amne, a.f-pm-amne:link, a.f-pm-amne:visited {
	display: block;
	font-size: var(--text-l);
	font-weight: bold;
}
.f-pm-fran {
	display: block;
	margin-top: 2px;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-pm-datum {
	margin-left: var(--luft-2, 8px);
}
.f-pm-kryss {
	width: 18px;
	height: 18px;
	margin: 0;
}
.f-pm-knappar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--luft-2, 8px);
	margin: 0 0 var(--luft-4, 16px) 0;
}
.f-pm-markera {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	row-gap: var(--knapp-radavstand);
}
.f-pm-fakta {
	display: grid;
	gap: var(--luft-1, 4px);
	margin-bottom: var(--luft-2, 8px);
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-m);
}
.f-pm-fakta span {
	display: inline-block;
	min-width: 60px;
	margin-right: var(--luft-2, 8px);
	color: var(--farg-text-svag, #666);
}
.f-pm-fakta .f-pm-mapp {
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-pm-las .f-post-text {
	margin-bottom: var(--luft-3, 12px);
}
.f-pm-las .f-pm-knappar {
	margin-bottom: 0;
}
.f-pm-popup {
	margin: var(--luft-5, 24px);
	text-align: center;
}
@media only screen and (max-width: 760px) {
	.f-pm-flikar {
		font-size: var(--text-s);
	}
	.f-pm-flikar > span, .f-pm-flikar a, .f-pm-flikar a:link, .f-pm-flikar a:visited {
		padding: var(--luft-1, 4px) var(--luft-2, 8px);
	}
	.f-pm-amne, a.f-pm-amne:link, a.f-pm-amne:visited {
		font-size: var(--text-m);
	}
	.f-pm-fran {
		font-size: var(--text-xs);
	}
	.f-pm-rad {
		column-gap: var(--luft-2, 8px);
		padding: var(--luft-2, 8px) 0;
	}
}
/* Bara en orange flik at gangen: nar man hovrar en annan mapp blir den aktuella vanlig */
.f-pm-flikar:has(a:hover) > span:not(:has(a)) {
	border-color: var(--farg-ram, #c4d2ed);
}

/* ---------- Meddelande, bekraftelse och fel (message_body, confirm_body, error_body) ---------- */

.f-meddelande {
	font-size: var(--text-l);
	line-height: 1.6;
}
/* Sidor som skickar vidare sjalva: gron bock fore texten och en tidslinje under knapparna */
.f-meddelande-ok > p:first-child:before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	margin-right: var(--luft-2, 8px);
	border-radius: 50%;
	background: var(--farg-gron, #40b010);
	color: #fff;
	font-weight: bold;
	font-size: 0.9em;
	vertical-align: 0.1em;
}
.f-meddelande-tid {
	margin-top: var(--luft-4, 16px);
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-meddelande-tid i {
	display: block;
	height: 3px;
	margin-top: var(--luft-2, 8px);
	background: var(--farg-linje, #e1e8f5);
	overflow: hidden;
}
.f-meddelande-tid b {
	display: block;
	width: 0;
	height: 100%;
	background: var(--farg-accent, #ff761e);
	transition-property: width;
	transition-timing-function: linear;
}
.f-meddelande-tid.f-igang b {
	width: 100%;
}
/* Meddelandesidan ar kort: ingen andra annonsrad och forummeny under den */
body:has(.f-meddelande) #adsblockfoot,
body:has(.f-meddelande) #forummenufoot {
	display: none;
}

/* Kort notis efter sparat inlagg / skickat PM (overall_footer.tpl) */
.f-notis {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	padding: var(--luft-3, 12px) var(--luft-5, 24px);
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: 'Barlow Condensed', var(--text-font, sans-serif);
	font-size: 1.15em;
	font-weight: bold;
	text-transform: uppercase;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	border-bottom: 3px solid var(--farg-accent, #ff761e);
	transform: translateX(-50%);
	animation: f-notis-in .25s ease-out;
	transition: opacity .5s;
}
.f-notis svg {
	width: 20px;
	height: 20px;
	color: var(--farg-gron, #40b010);
}
.f-notis-ut {
	opacity: 0;
}
@keyframes f-notis-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
}
.f-meddelande p {
	margin: 0;
}
.f-meddelande-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	margin-top: var(--luft-4, 16px);
}
.f-meddelande-knappar .f-primar {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}
.f-fel {
	border-left: 4px solid var(--farg-fel, #c0392b);
	color: var(--farg-fel, #c0392b);
}

/* ---------- Sokresultat som inlagg (search_results_posts) ---------- */

.f-sokpost .topictitle {
	display: block;
	font-size: var(--text-xl);
	font-weight: bold;
}
.f-sokpost-info {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--luft-2, 8px);
	margin: var(--luft-1, 4px) 0 var(--luft-2, 8px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-sokpost-info b {
	color: var(--farg-bla, #3D5C98);
}
.f-sokpost .f-post-text {
	border-bottom: none;
	padding-bottom: var(--luft-2, 8px);
}
.f-sokpost-knapp {
	text-align: right;
}
@media only screen and (max-width: 760px) {
	.f-sokpost .topictitle {
		font-size: var(--text-l);
	}
	.f-sokpost-info {
		font-size: var(--text-xs);
	}
}
/* Skicka e-post (profile_send_email) */
.f-epost {
	max-width: 720px;
}
.f-epost-till {
	font-size: var(--text-l);
	font-weight: bold;
	color: var(--farg-bla, #3D5C98);
}
.f-epost textarea.post {
	width: 100%;
	max-width: none;
	font-size: var(--text-l);
}

/* PM pa mobilen: Skriv nytt + mapparna pa en rad */
@media only screen and (max-width: 760px) {
	.f-bara-pc {
		display: none;
	}
	.f-verktyg:has(.f-pm-flikar) {
		flex-wrap: nowrap;
		column-gap: var(--luft-2, 8px);
	}
	.f-pm-flikar {
		flex-wrap: nowrap;
		gap: var(--luft-1, 4px);
		font-size: var(--text-xs);
	}
	.f-pm-flikar > span, .f-pm-flikar a, .f-pm-flikar a:link, .f-pm-flikar a:visited {
		padding: var(--luft-1, 4px) var(--luft-2, 8px);
	}
	.f-verktyg:has(.f-pm-flikar) .f-knapp {
		white-space: nowrap;
	}
	/* Lasa PM: Svara/Citera ar for breda for en rad med mapparna - mapparna pa egen rad under */
	.f-verktyg:has(> .f-verktyg-vanster.f-bildknapp) {
		flex-wrap: wrap;
	}
	.f-verktyg:has(> .f-verktyg-vanster.f-bildknapp) .f-pm-flikar {
		flex-basis: 100%;
	}
	.f-verktyg:has(> .f-verktyg-vanster.f-bildknapp) .f-pm-flikar :is(a, span) {
		white-space: nowrap;
	}
}
/* Inloggningen: Skapa konto, Glomt losenord och Login FAQ som knappar pa en rad */
.f-login-sida:has(a[href*="sendpassword"]) .f-login-sida-lankar {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--luft-2, 8px);
}
.f-login-sida-lankar a.f-knapp, .f-login-sida-lankar a.f-knapp:link, .f-login-sida-lankar a.f-knapp:visited {
	padding: var(--knapp-s-pad);
	font-size: var(--knapp-s-fs);
	white-space: nowrap;
}

/* Skapa konto: veckodagsfragan (bild fran sprakfilen) och rutan centrerade */
.f-profil-kort:has(input[name="confirm_code"]) {
	text-align: center;
}
.f-profil-kort:has(input[name="confirm_code"]) h2 img {
	max-width: 100%;
	height: auto;
}
.f-profil-kort:has(input[name="confirm_code"]) .f-pfalt input {
	display: block;
	margin: 0 auto;
	text-align: center;
}
/* PM-listan: Spara/Ta bort ensamma pa raden, hogerstallda */
.f-pm-knappar > .f-pm-markera:only-of-type {
	margin-left: auto;
}
/* Lasa PM: inga knappar under texten, sa ingen linje och luft dar */
.f-pm-las .f-post-text {
	margin-bottom: 0;
	padding-bottom: var(--luft-1, 4px);
	border-bottom: none;
}

/* Sok anvandarnamn (search_username.tpl, eget litet fonster) */
.f-sokanv {
	margin: var(--luft-2, 8px) var(--luft-2, 8px);
}
.f-sokanv h2 {
	margin: 0 0 var(--luft-3, 12px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-sokanv select {
	flex: 1 1 160px;
	min-width: 0;
}
.f-sokanv-stang {
	text-align: right;
}

/* Editorns verktygsrad: text efter ikonerna (fet/kursiv/understruken har bokstaven i ikonen) */
.f-editor .sceditor-toolbar a.sceditor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--luft-1, 4px);
	width: auto;
	float: left;
}
.f-editor .sceditor-toolbar a.sceditor-button div {
	flex: 0 0 16px;
}
.f-editor .sceditor-toolbar a.sceditor-button:after {
	font-size: 12px;
	line-height: 16px;
	color: var(--farg-rubrik, #3b3b3b);
	white-space: nowrap;
}
@media only screen and (max-width: 760px) {
	.f-editor .sceditor-toolbar a.sceditor-button:after {
		font-size: 11px;
	}
}
.f-editor .sceditor-button-quote:after { content: "Citat"; }
.f-editor .sceditor-button-size:after { content: "Storlek"; }
.f-editor .sceditor-button-code:after { content: "Kod"; }
.f-editor .sceditor-button-link:after { content: "L\00E4nk"; }
.f-editor .sceditor-button-youtube:after { content: "YouTube"; }
.f-editor .sceditor-button-fbvideo:after { content: "Facebook"; }
.f-editor .sceditor-button-horizontalrule:after { content: "Linje"; }
.f-editor .sceditor-button-removeformat:after { content: "Rensa"; }
.f-editor .sceditor-button-source:after { content: "BBCode"; }
.f-editor .sceditor-button-emoticon:after { content: "Smilies"; }
/* forumets egen smiley som ikon (inte inverterad i morkt lage) */
.f-editor .sceditor-toolbar a.sceditor-button-emoticon div {
	background: url(/forum/images/smiles/smile.gif) center no-repeat !important;
}
:root[data-theme="dark"] .f-editor .sceditor-toolbar a.sceditor-button-emoticon div {
	filter: none;
}
/* Sma bilder: bara text, ingen ikon */
.f-editor .sceditor-toolbar a.sceditor-button-miniatyr div { background-position: 0 -416px; }
.f-editor .sceditor-button-miniatyr:after { content: "D\00F6lj bilder tillf\00E4lligt"; }
/* Dolj bilder ligger alltid uppe till hoger, de andra knapparna radbryts bredvid */
.f-editor div.sceditor-group.rp-mini-grupp {
	float: right;
	margin-right: 0;
}
/* Pilknapp som visar/doljer de andra knapparna, bara pa mobilen */
.f-editor div.sceditor-group.rp-fler-grupp {
	display: none;
}
.f-editor .sceditor-toolbar a.sceditor-button-fler div {
	display: none;
}
.f-editor .sceditor-toolbar a.sceditor-button-fler:before {
	content: "\25BE";
	font-size: 22px;
	line-height: 16px;
	padding-left: 2px;
	color: var(--farg-rubrik, #3b3b3b);
}
.f-editor .sceditor-toolbar.rp-knappar-oppna a.sceditor-button-fler:before {
	content: "\25B4";
}
.f-editor .sceditor-toolbar a.sceditor-button-fler:after {
	content: "Toolbar";
}
/* Smiley-knapp med meny, bara pa mobilen (dar ar smiley-kolumnen till vanster dold) */
.f-editor div.sceditor-group.rp-smiley-grupp {
	display: none;
}
.f-editor .sceditor-emoticons > div {
	/* fyra jamna rader, antal kolumner satts i posting_body.tpl */
	display: grid;
	grid-template-columns: repeat(var(--rp-smiley-kol, 5), auto);
	align-items: center;
	justify-items: center;
	max-width: min(300px, calc(100vw - 48px));
}
.f-editor .sceditor-emoticons > div > div {
	display: contents;
}
.f-editor .sceditor-emoticons img {
	flex: none;
	width: auto;
	height: auto;
	padding: 6px;
	cursor: pointer;
}
.f-editor .sceditor-emoticons .sceditor-more {
	display: none;
}
@media only screen and (max-width: 760px) {
	.f-editor div.sceditor-group.rp-fler-grupp,
	.f-editor div.sceditor-group.rp-smiley-grupp {
		display: inline-block;
	}
	.f-editor .sceditor-toolbar:not(.rp-knappar-oppna) div.sceditor-group:not(.rp-mini-grupp):not(.rp-fler-grupp):not(.rp-smiley-grupp) {
		display: none;
	}
	.f-editor .f-smilies-kolumn {
		display: none;
	}
}
/* text overst i verktygsraden nar Dolj bilder ar pa */
.f-editor .sceditor-toolbar .rp-mini-info {
	padding: 4px 4px 6px;
	text-align: right;
	font-size: 12px;
	line-height: 16px;
	color: var(--farg-text-svag, #666);
}
/* Fler smilies (posting_smilies.tpl, eget fonster) */
.f-smilies-fonster .f-smilies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: var(--luft-1, 4px);
	margin: 0 0 var(--luft-3, 12px) 0;
}
.f-smilies-fonster .f-smilies a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
}
.f-smilies-fonster .f-smilies a:hover {
	border-color: var(--farg-primar, #f60);
}
/* Visa fler Smilies som liten knapp efter smileyraden */
.f-editor-knappar a.f-knapp.f-smilies-fler, .f-editor-knappar a.f-knapp.f-smilies-fler:link, .f-editor-knappar a.f-knapp.f-smilies-fler:visited {
	margin-left: 0;
	text-align: center;
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
}

/* Visa fler Smilies, Ladda upp bilder och Lagg till omrostning till vanster pa knappraden, Forhandsgranska och Skicka till hoger */
.f-editor-knappar .f-ladda-upp-knapp {
	text-align: center;
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
	cursor: pointer;
}
.f-editor-knappar .f-omrostning-knapp {
	padding: var(--knapp-l-pad);
	font-size: var(--knapp-l-fs);
	cursor: pointer;
}
/* Omrostningen oppen: orange text och ram som sidans andra aktiva knappar */
.f-editor-knappar .f-omrostning-knapp.active {
	color: var(--val-aktiv, #ff761e);
	border-color: var(--val-aktiv, #ff761e);
	outline: 1px solid var(--val-aktiv, #ff761e);
}
/* Kontakta mig vid svar: egen rad under Skicka, hogerstalld */
.f-editor-knappar .f-svar-val {
	flex: 1 1 100%;
	display: flex;
	justify-content: flex-end;
}
.f-editor-knappar .f-svar-val label {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	font-size: var(--text-m);
	cursor: pointer;
}
.f-editor-knappar .f-svar-val input {
	margin: 0;
}
/* Forhandsgranska + Skicka till hoger */
.f-editor-knappar input[name=preview] {
	margin-left: auto;
}
@media only screen and (max-width: 760px) {
	.f-editor-knappar .f-ladda-upp-knapp, .f-editor-knappar .f-omrostning-knapp, .f-editor-knappar a.f-knapp.f-smilies-fler {
		flex: 1 1 100%;
		margin-right: 0;
	}
}

/* Registreringens regler (agreement.tpl) */
.f-avtal {
	max-width: 760px;
}
.f-avtal-text ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.f-avtal-text {
	font-size: var(--text-l);
	line-height: 1.6;
}
.f-avtal-text p {
	margin: 0 0 var(--luft-3, 12px) 0;
}

/* ---------- Omrostning i traden (viewtopic_poll_ballot, viewtopic_poll_result) ---------- */

.f-poll {
	max-width: 760px;
}
.f-poll-fraga {
	margin: 0 0 var(--luft-3, 12px) 0;
	padding-bottom: var(--luft-2, 8px);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
	font-size: var(--text-xl);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-poll-val {
	display: flex;
	flex-direction: column;
	gap: var(--luft-1, 4px);
	margin-bottom: var(--luft-4, 16px);
}
.f-poll-val label {
	display: flex;
	align-items: center;
	gap: var(--luft-2, 8px);
	padding: var(--luft-2, 8px) var(--luft-2, 8px);
	border: 1px solid var(--farg-linje, #E1E8F5);
	border-radius: 6px;
	cursor: pointer;
}
.f-poll-val label:hover, .f-poll-val label:has(input:checked) {
	border-color: var(--farg-ram, #c4d2ed);
	background-color: var(--farg-yta, #f7f9fc);
}
.f-poll-val input {
	margin: 0;
	flex: none;
}
.f-poll-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
}
.f-poll-resultat {
	display: flex;
	flex-direction: column;
	gap: var(--luft-3, 12px);
	margin-bottom: var(--luft-3, 12px);
}
.f-poll-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7.5em;
	grid-template-areas: "text text" "stapel siffror";
	align-items: center;
	column-gap: var(--luft-3, 12px);
	row-gap: var(--luft-1, 4px);
}
.f-poll-text {
	grid-area: text;
}
.f-poll-stapel {
	grid-area: stapel;
	height: 12px;
	border-radius: 6px;
	background-color: var(--farg-linje, #E1E8F5);
	overflow: hidden;
}
.f-poll-stapel span {
	display: block;
	height: 100%;
	background-color: var(--farg-accent, #ff761e);
	border-radius: 6px;
}
.f-poll-siffror {
	grid-area: siffror;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
	white-space: nowrap;
}
.f-poll-siffror b {
	color: var(--farg-text, #333);
}
.f-poll-totalt {
	padding-top: var(--luft-2, 8px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-m);
	color: var(--farg-text-svag, #666);
}


/* ---------- Design D: rubriker, länkar i texten och editorn ---------- */

/* Rubriker i Barlow Condensed med versaler, som på startsidan */
.f-brod, .f-sidhuvud h1, .f-kat-rubrik h2,
.f-editor h2, .f-forhands h2, .f-granskning h2,
.f-sok-kort h2, .f-profil-kort h2, .f-login-sida h1 {
	font-family: var(--rubrik-font);
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.f-brod, .f-sidhuvud h1 {
	font-size: var(--text-rubrik, 24px);
	line-height: 1.15;
}
/* Skrivformularet pa mobilen: hela stigen (forum > trad > Svara pa amne) blir lang - mindre text */
@media only screen and (max-width: 760px) {
	.f-skriv-sidhuvud .f-brod, .f-skriv-sidhuvud h1 {
		font-size: var(--text-xl);
		line-height: 1.25;
		display: inline;
		margin: 0;
	}
	/* stigen och Svara pa amne flyter som en text och radbryts dar det behovs */
	.f-sidhuvud.f-skriv-sidhuvud {
		display: block;
	}
}
.f-kat-rubrik h2 {
	font-size: var(--text-rubrik, 24px);
	line-height: 1.1;
}
@media only screen and (max-width: 760px) {
	.f-kat-rubrik h2 {
		font-size: 22px;
	}
}
.f-editor h2, .f-forhands h2, .f-granskning h2, .f-sok-kort h2, .f-profil-kort h2 {
	font-size: var(--text-xxl);
	line-height: 1.15;
}
.f-trad-rubrik, .f-kol {
	font-family: var(--rubrik-font);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Forum- och trådnamn: mörka och halvfeta, som trådarna på startsidan */
.forumlink, a.forumlink:link, a.forumlink:visited,
.topictitle, a.topictitle:link, a.topictitle:visited {
	font-weight: 600;
	color: var(--farg-rubrik, #3b3b3b);
}

/* Länkar i inläggen och signaturerna: orange som länkar i löpande text på sidorna, ingen understrykning */
.f-post-sign img {
	max-width: 100%;
	height: auto;
}
.f-post-text a, .f-post-text a:link, .f-post-text a:visited,
.f-post-sign a, .f-post-sign a:link, .f-post-sign a:visited {
	color: var(--lank-text, var(--farg-accent-text, #b84300));
	text-decoration: none;
}
.f-post-text a:hover, .f-post-sign a:hover {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}

/* Forummenyn: grå kant på de neutrala rutorna i stället för svart */
.f-grupp, .f-ruta, a.f-ruta:link, a.f-ruta:visited {
	border-top-color: var(--farg-ram, #c9ced6);
}
.f-nav .f-nytt, .f-nav a.f-nytt:link, .f-nav a.f-nytt:visited,
.f-nav .f-fav, .f-nav a.f-fav:link, .f-nav a.f-fav:visited {
	border-top-color: var(--f-farg);
}
.f-grupp-rubrik {
	font-family: var(--rubrik-font);
	letter-spacing: 1px;
}

/* Editorn (SCEditor): verktygsraden i sidans färger. Texten inne i editorn får färgerna av posting_body.tpl */
.f-editor .sceditor-container {
	border-radius: 2px;
	background-color: var(--farg-kort, #fff);
}
.f-editor div.sceditor-toolbar {
	background: var(--farg-yta, #f7f9fc);
	border-bottom: 1px solid var(--farg-linje, #e1e8f5);
}
.f-editor div.sceditor-group {
	background: var(--farg-kort, #fff);
	border-color: var(--farg-linje, #e1e8f5);
	border-radius: 2px;
}
.f-editor a.sceditor-button:hover, .f-editor a.sceditor-button:active, .f-editor a.sceditor-button.active {
	background: var(--farg-yta-hover, #e6e9ee);
	box-shadow: none;
}
.f-editor div.sceditor-container textarea {
	background: var(--farg-kort, #fff);
	color: var(--farg-text, #333);
}
div.sceditor-dropdown {
	background: var(--farg-kort, #fff);
	border-color: var(--farg-ram, #c9ced6);
	color: var(--farg-text, #333);
}
div.sceditor-dropdown input {
	background: var(--farg-yta, #f7f9fc);
	color: var(--farg-text, #333);
	border-color: var(--farg-ram, #c9ced6);
}
:root[data-theme="dark"] .sceditor-button:not(.sceditor-button-youtube):not(.sceditor-button-fbvideo) div {
	filter: invert(0.88);
}
:root[data-theme="dark"] .sceditor-grip {
	filter: invert(0.88);
}

/* Fält och listor i mörkt läge */
input.post, textarea.post, select, input.post:focus, textarea.post:focus {
	color: var(--farg-text, #333);
	border-color: var(--farg-ram, #c9ced6);
}

/* Klockslaget för inlägg från idag (scriptet i overall_footer.tpl) */
.f-idag {
	font-weight: 600;
	color: var(--farg-accent-text, #b84300);
}

/* "(41 sidor)" efter startaren i tradlistorna (skriptet i overall_footer.tpl). Mobilen: sist pa Senaste-raden i stallet */
.f-t-antal {
	white-space: nowrap;
}
.f-t-antal-m {
	display: none;
}
@media only screen and (max-width: 760px) {
	.f-t-antal-m {
		display: inline;
	}
}

/* ---------- Medlemslistan och grupperna (memberlist_body.tpl, groupcp_*.tpl - bara admin) ---------- */

.f-ml-verktyg:not(:has(a, b)) {
	display: flex;
}
.f-ml-sortera {
	align-items: center;
	font-size: var(--text-m);
}
.f-medlemmar {
	padding: 0 0 var(--luft-1, 4px) 0;
	margin-bottom: var(--luft-5, 24px);
}
.f-medlem {
	display: grid;
	grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 96px 64px 170px;
	column-gap: var(--luft-2, 8px);
	align-items: center;
	padding: var(--luft-2, 8px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-medlem:last-child {
	border-bottom: none;
}
.f-medlem:hover {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-medlem:hover .topictitle {
	color: var(--lank-hover, var(--farg-accent, #ff761e));
}
.f-medlem-rubrik {
	padding-top: var(--luft-3, 12px);
	padding-bottom: var(--luft-2, 8px);
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-medlem-rubrik:hover {
	background-color: transparent;
}
.f-ml-namn {
	overflow-wrap: anywhere;
}
.f-ml-nr {
	color: var(--farg-text-svag, #666);
}
.f-ml-ort {
	font-size: var(--text-m);
	color: var(--farg-text-2, #555);
	overflow-wrap: anywhere;
}
/* PM / E-post / Webb: phpBB skriver ikonlankar - ikonen doljs och en kort text visas i stallet */
.f-ml-kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	justify-content: flex-end;
}
.f-ml-kontakt img {
	display: none;
}
.f-ml-kontakt a {
	display: inline-block;
	padding: 2px var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	font-size: var(--text-s);
	line-height: 1.4;
}
.f-ml-kontakt a:hover {
	border-color: var(--farg-accent, #ff761e);
	text-decoration: none;
}
.f-k-pm a:before { content: "PM"; }
.f-k-epost a:before { content: "E-post"; }
.f-k-webb a:before { content: "Webb"; }

/* Grupperna */
.f-gr-kort, .f-gr-info {
	margin-bottom: var(--luft-5, 24px);
}
.f-gr-kort h2 {
	margin: 0 0 var(--luft-2, 8px) 0;
	font-size: var(--text-xl);
}
.f-gr-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--luft-2, 8px) var(--luft-2, 8px);
	margin: var(--luft-2, 8px) 0;
}
.f-gr-etikett {
	min-width: 220px;
	font-size: var(--text-m);
}
.f-gr-lagg {
	margin: 0 0 var(--luft-5, 24px) 0;
}
.f-gr-fakta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--luft-2, 8px) var(--luft-5, 24px);
	align-items: baseline;
	margin: 0;
}
.f-gr-fakta dt {
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-gr-fakta dd {
	margin: 0;
}
.f-gr-fakta dd .f-knapp {
	margin-left: var(--luft-2, 8px);
}
.f-gr-typ label {
	margin-right: var(--luft-3, 12px);
	white-space: nowrap;
}
.f-gr-medlem {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 64px 170px 24px;
}
.f-gr-del {
	padding: var(--luft-3, 12px) var(--luft-5, 24px) var(--luft-2, 8px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
	font-size: var(--text-m);
	font-weight: bold;
	color: var(--farg-rubrik, #3b3b3b);
}
.f-gr-valj {
	text-align: right;
}
.f-gr-fot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-2, 8px);
	padding: var(--luft-3, 12px) var(--luft-5, 24px) var(--luft-2, 8px) var(--luft-5, 24px);
	border-top: 1px solid var(--farg-linje, #E1E8F5);
}

@media only screen and (max-width: 760px) {
	/* Telefon: namn och ort under varandra, knapparna till hoger */
	.f-medlem, .f-gr-medlem {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"namn kontakt valj"
			"ort kontakt valj";
		row-gap: var(--luft-1, 4px);
		padding: var(--luft-2, 8px) var(--luft-2, 8px);
	}
	.f-medlem-rubrik, .f-ml-nr, .f-ml-sedan, .f-ml-inlagg {
		display: none;
	}
	.f-ml-namn { grid-area: namn; }
	.f-ml-ort { grid-area: ort; font-size: var(--text-xs); }
	.f-ml-kontakt { grid-area: kontakt; }
	.f-gr-valj { grid-area: valj; }
	.f-gr-del, .f-gr-fot {
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-2, 8px);
	}
	.f-gr-fakta {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
	.f-gr-fakta dd {
		margin-bottom: var(--luft-2, 8px);
	}
	.f-gr-etikett {
		min-width: 0;
		width: 100%;
	}
}

/* ---------- FAQ (faq_body.tpl) ---------- */

.f-faq-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--luft-4, 16px) 32px;
	margin-bottom: var(--luft-5, 24px);
}
.f-faq-grupp h2, .f-faq-block h2 {
	margin: 0 0 var(--luft-2, 8px) 0;
	font-size: var(--text-xl);
}
.f-faq-grupp ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.f-faq-grupp li {
	margin: 0 0 var(--luft-1, 4px) 0;
	font-size: var(--text-m);
	line-height: 1.4;
}
.f-faq-block {
	margin-bottom: var(--luft-5, 24px);
}
.f-faq-fraga {
	padding: var(--luft-3, 12px) 0;
	border-top: 1px solid var(--farg-linje, #E1E8F5);
}
.f-faq-fraga h3 {
	margin: 0 0 var(--luft-2, 8px) 0;
	font-size: var(--text-l);
	color: var(--farg-rubrik, #3b3b3b);
}
.f-faq-svar {
	font-size: var(--text-m);
	line-height: 1.55;
	color: var(--farg-text, #333);
}
.f-faq-upp {
	display: inline-block;
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-s);
}


/* ---------- Vem ar online (viewonline_body.tpl) ---------- */

.f-vo-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 110px;
	column-gap: var(--luft-2, 8px);
	align-items: center;
	padding: var(--luft-2, 8px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-vo-rad:last-child {
	border-bottom: none;
}
.f-vo-rad:hover {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-vo-rad.f-medlem-rubrik:hover {
	background-color: transparent;
}
.f-vo-tid {
	font-size: var(--text-m);
	color: var(--farg-text-2, #555);
	text-align: right;
	white-space: nowrap;
}
.f-vo-plats {
	font-size: var(--text-m);
	overflow-wrap: anywhere;
}
.f-vo-forklaring {
	margin: 0 0 var(--luft-5, 24px) 0;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}

@media only screen and (max-width: 760px) {
	.f-faq-index {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Telefon: namn och tid pa forsta raden, var i forumet under */
	.f-vo-rad {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"namn tid"
			"plats plats";
		row-gap: var(--luft-1, 4px);
		padding: var(--luft-2, 8px) var(--luft-2, 8px);
	}
	.f-vo-rad.f-medlem-rubrik {
		display: none;
	}
	.f-vo-rad .f-ml-namn { grid-area: namn; }
	.f-vo-tid { grid-area: tid; font-size: var(--text-xs); }
	.f-vo-plats { grid-area: plats; font-size: var(--text-xs); }
}

/* Uppladdning av inklistrade bilder i editorn (posting_body.tpl) */
.rp-bildstatus {
	margin-top: var(--luft-2, 8px);
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}

/* Smilies i en kolumn till vanster om editorn (Visa fler Smilies ligger i knappraden) */
.f-editor-rad {
	display: flex;
	align-items: flex-start;
	gap: var(--luft-2, 8px);
}
.f-editor-falt {
	flex: 1 1 auto;
	min-width: 0;
}
/* sista raden slutar vid editorns underkant, sa smilie-kolumnen (lika hog som raden) slutar pa samma stalle */
.f-editor-rad {
	margin-bottom: var(--luft-3, 12px);
}
.f-editor-falt > .f-erad:last-child {
	margin-bottom: 0;
}
.f-editor .f-smilies-kolumn {
	flex: 0 0 auto;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--luft-2, 8px);
	margin: 0;
	padding: var(--luft-1, 4px) 2px;
	margin-top: calc(var(--text-m) * 1.45 + var(--luft-1, 4px));
}
/* nar editorn ar skapad (posting_body.tpl) blir kolumnen lika hog som editorn och smilies sprids ut */
.f-editor-rad.rp-lika-hog {
	align-items: stretch;
}
.f-editor-rad.rp-lika-hog .f-smilies-kolumn {
	justify-content: space-between;
}

/* Forumikoner i sokresultat, Bevakade och sokta inlagg: bara utvalda forum har ikon (data-f = forum-id).
   16 Off topic, 19 Vara race- och banakarbilar, 35 Skruva, 10 Infor traffar, 23 Eftersnack, 26 Moderatorforum, 29 + 34 (rott utropstecken som 26) */
.f-ikon {
	display: none;
}
.f-ikon[data-f="16"], .f-ikon[data-f="19"], .f-ikon[data-f="35"],
.f-ikon[data-f="10"], .f-ikon[data-f="23"], .f-ikon[data-f="26"],
.f-ikon[data-f="29"], .f-ikon[data-f="34"] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background-color: var(--ikon-bg);
}
.f-ikon::before {
	content: "";
	width: 72%;
	height: 72%;
	background-color: var(--ikon-fg);
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
}
.f-ikon[data-f="16"] { --ikon-bg: #fff0b3; --ikon-fg: #7a5900; --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 9h11v5a5 5 0 0 1 -5 5h-1a5 5 0 0 1 -5 -5z M16 10.5h1.5a2.5 2.5 0 0 1 0 5h-1.5 M8 3v3 M11 3v3 M14 3v3'/%3E%3C/svg%3E"); }
.f-ikon[data-f="19"] { --ikon-bg: #e6f1fb; --ikon-fg: #0c447c; --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M5 17h-2v-5l3 -1l3 -3h6l5 3.5c.6 .4 1 1 1 1.7v3.8h-2 M9 17h6 M2 7h5 M4.5 7v4'/%3E%3C/g%3E%3C/svg%3E"); }
.f-ikon[data-f="35"] { --ikon-bg: #eceef2; --ikon-fg: #3a4150; --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'/%3E%3C/svg%3E"); }
.f-ikon[data-f="10"], .f-ikon[data-f="23"] { --ikon-bg: #faece7; --ikon-fg: #712b13; --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='2' width='2' height='20' rx='0.5'/%3E%3Crect x='5.75' y='3.75' width='14.5' height='10.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5 3h4v4h-4z M13 3h4v4h-4z M9 7h4v4h-4z M17 7h4v4h-4z M5 11h4v4h-4z M13 11h4v4h-4z'/%3E%3C/svg%3E"); }
.f-ikon[data-f="26"], .f-ikon[data-f="29"], .f-ikon[data-f="34"] { --ikon-bg: #d62828; }
.f-ikon[data-f="26"]::before, .f-ikon[data-f="29"]::before, .f-ikon[data-f="34"]::before {
	content: "!";
	width: auto;
	height: auto;
	-webkit-mask: none;
	mask: none;
	background: none;
	color: #fff;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
}
:root[data-theme="dark"] .f-ikon[data-f="16"] { --ikon-bg: #4a3b00; --ikon-fg: #ffd84d; }
:root[data-theme="dark"] .f-ikon[data-f="19"] { --ikon-bg: #0c2f52; --ikon-fg: #9cc8f2; }
:root[data-theme="dark"] .f-ikon[data-f="35"] { --ikon-bg: #2c3038; --ikon-fg: #c9ced8; }
:root[data-theme="dark"] .f-ikon[data-f="10"], :root[data-theme="dark"] .f-ikon[data-f="23"] { --ikon-bg: #4a2014; --ikon-fg: #f0a487; }
/* Tradlistorna: egen ikonkolumn till vanster om forumnamn och titel, samma bredd aven utan ikon */
.f-trad .f-t-namn:has(.f-ikon) {
	position: relative;
	padding-left: 46px;
}
/* left: mitt i det vita mellan kortets kant och titeln (30px till vanster, 12px till titeln utan flytt) */
.f-trad .f-t-forum .f-ikon {
	position: absolute;
	left: -9px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 8px;
}
.f-trad .f-t-forum .f-ikon[data-f="26"]::before, .f-trad .f-t-forum .f-ikon[data-f="29"]::before, .f-trad .f-t-forum .f-ikon[data-f="34"]::before {
	font-size: 22px;
}
/* Moderatorforumet ska inte kunna missas: rod kant pa hela raden */
.f-trad:has(.f-ikon[data-f="26"]), .f-trad:has(.f-ikon[data-f="29"]), .f-trad:has(.f-ikon[data-f="34"]) {
	box-shadow: inset 4px 0 0 #d62828;
}
@media only screen and (max-width: 760px) {
	.f-trad .f-t-namn:has(.f-ikon) {
		padding-left: 36px;
	}
	/* Senaste-raden i samma kolumn som titeln */
	.f-trad:has(.f-ikon) .f-t-sista {
		padding-left: 36px;
	}
	.f-trad .f-t-forum .f-ikon {
		left: 0;
		width: 28px;
		height: 28px;
		border-radius: 6px;
	}
	.f-trad .f-t-forum .f-ikon[data-f="26"]::before, .f-trad .f-t-forum .f-ikon[data-f="29"]::before, .f-trad .f-t-forum .f-ikon[data-f="34"]::before {
		font-size: 18px;
	}
}

/* Tradlistorna (forum + sokresultat): hela raden ar lanken till traden, som traderna pa startsidan.
   Titelns :after tacker raden; ovriga lankar i raden lyfts ovanfor den. */
.f-trad {
	position: relative;
}
.f-trad .topictitle:after {
	content: "";
	position: absolute;
	inset: 0;
}
.f-trad .f-t-hopp a, .f-trad .f-t-sidor a, .f-trad .f-t-av a, .f-trad .f-t-sista a, .f-trad .f-t-kryss {
	position: relative;
	z-index: 1;
}
/* Sokresultat: forumnamnet ar bara klickbart over ikon + text (inte hela bredden).
   Flex-kolumn sa att forumlanken kan lyftas med z-index utan position (ikonen ska utga fran raden). */
.f-trad .f-t-namn:has(.f-t-forum) {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.f-trad .f-t-namn .f-t-forum {
	z-index: 1;
}
.f-trad .f-t-forum .f-ikon {
	left: 21px;
}
/* Hovring over forumnamnet: bara forumnamnet blir orange, inte tradens titel */
.f-trad:has(.f-t-forum:hover) .topictitle {
	color: var(--farg-rubrik, #3b3b3b);
}
@media only screen and (max-width: 760px) {
	/* ikonen mitt pa hela raden (forumnamn, titel och Senaste-raden) */
	.f-trad .f-t-forum .f-ikon {
		left: 6px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ---------- Moderatorpanelen (modcp_body, modcp_split, modcp_viewip) ---------- */

.f-mc-forklaring {
	margin: 0 0 var(--luft-3, 12px) 0;
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
/* Trådlistan: prick, titel, svar, senaste, kryssruta. Hela raden kryssar i */
.f-mc .f-trad {
	grid-template-columns: 0 minmax(0, 1fr) 52px 150px 36px;
	cursor: pointer;
}
/* Ingen klickbar hel rad här: raden kryssar i rutan, bara titeln öppnar Dela tråd */
.f-mc .f-trad .topictitle:after {
	content: none;
}
.f-mc .f-trad-rubrik {
	cursor: default;
}
/* Låsta trådar: en liten etikett efter titeln (prickarna är av i trådlistorna) */
.f-mc .f-trad:has(.f-status img[src*="_lock"]) .f-t-namn:after {
	content: "L\e5st";
	margin-left: var(--luft-2, 8px);
	padding: 0 var(--luft-2, 8px);
	border: 1px solid var(--farg-ram, #c4d2ed);
	border-radius: var(--knapp-radie, 2px);
	font-size: var(--text-xs);
	color: var(--farg-text-svag, #666);
}
.f-mc .f-trad:has(input:checked) {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-mc .f-t-sista {
	font-size: var(--text-s);
}
.f-mc-fot {
	justify-content: flex-end;
}
/* Dela tråd */
.f-mc-knappar {
	margin: var(--luft-3, 12px) 0 0 0;
}
.f-mc-inlagg {
	padding-top: 0;
	padding-bottom: 0;
}
/* Inläggen ligger i en div.f-post-text: bbcode skriver tabeller och en lös </span> för citat och kod */
.f-mc-post {
	padding: var(--luft-3, 12px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-mc-post:has(input:checked) {
	background-color: var(--farg-yta, #f7f9fc);
}
.f-mc-post-topp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--luft-1, 4px) var(--luft-3, 12px);
	align-items: baseline;
	margin-bottom: var(--luft-2, 8px);
	cursor: pointer;
}
.f-mc-post-topp .f-t-kryss {
	margin-left: auto;
	align-self: center;
}
.f-mc-post-tid, .f-mc-post-rubrik {
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-mc-post .f-mc-post-text {
	padding: 0;
	border-bottom: none;
	font-size: var(--text-m);
}
.f-mc-post .f-t-kryss input {
	width: 18px;
	height: 18px;
}
/* IP-information */
.f-mc-ip-rad {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--luft-2, 8px) var(--luft-3, 12px);
	padding: var(--luft-2, 8px) var(--luft-5, 24px);
	border-bottom: 1px solid var(--farg-linje, #E1E8F5);
}
.f-mc-ip-rad:last-child {
	border-bottom: none;
}
.f-mc-antal {
	font-size: var(--text-s);
	color: var(--farg-text-svag, #666);
}
.f-mc-antal:before { content: "("; }
.f-mc-antal:after { content: ")"; }

@media only screen and (max-width: 760px) {
	.f-mc .f-trad {
		grid-template-columns: 0 minmax(0, 1fr) auto;
		grid-template-areas:
			"status namn kryss"
			". sista kryss";
	}
	.f-mc .f-t-sista:before {
		content: "";
	}
	.f-mc .f-t-kryss { grid-area: kryss; align-self: center; }
	.f-mc-post, .f-mc-ip-rad {
		padding-left: var(--luft-2, 8px);
		padding-right: var(--luft-2, 8px);
	}
}

/* ---------- Forfattarkolumnen (dator): tre grupper - vem (namn, ort), siffror (sedan, inlagg), roll (rang, Tradstartare) ---------- */
@media only screen and (min-width: 761px) {
	.f-post-namn {
		line-height: 1.25;
		color: var(--farg-text, #333);
	}
	/* siffrorna mindre och ljusare, med luft ovanfor */
	.f-post-fakta {
		margin-top: var(--luft-2, 8px);
		font-size: var(--text-xs);
		color: var(--farg-text-ljus, #999);
	}
	/* rollen: egen grupp */
	.f-post-rang {
		margin-top: var(--luft-2, 8px);
	}
	.f-post-start {
		font-size: var(--text-xs);
	}
	.f-post-rang + .f-post-start {
		margin-top: 2px;
	}
	.f-post-forf-knappar {
		margin-top: var(--luft-2, 8px);
	}
}
/* Mobil: korten, annonserna och menyn går ända ut till skärmkanten, med en tunn linje där ytorna möts (som trädlistan) */
@media only screen and (max-width: 760px) {
	.f-post, .f-pm-lista, .f-pm-las, .f-editor, .f-forhands, .f-granskning, .f-poll, .f-medlemmar, .f-sok-kort, .f-login-sida, .f-avtal, .f-profil-kort, .f-avatargalleri, .f-visaprofil, .f-faq-index, .f-faq-block, .f-gr-info, .f-gr-kort, .f-mc, .f-mc-inlagg, .f-mc-ip, .f-mc-flytta, .f-kat, .f-info, .f-ads, .f-nav {
		margin-left: calc(-1 * var(--sida-luft, 8px));
		margin-right: calc(-1 * var(--sida-luft, 8px));
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.f-ads, .f-nav {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}