/* ==========================================================================
   dreamstyle.css — DreamStudiesAbroad.com & Utlandsstudier.se
   Loaded after bootstrap.min.css. startsidan.css (start page) loads after this.

   1.  Base & layout
   2.  Header & navigation
   3.  Start page & cards
   4.  Articles
   5.  Forms & buttons
   6.  School pages
   7.  Right column & article lists
   8.  Tag / splash pages
   9.  Tags & small links
   10. Discounts
   11. School database (skoldb)
   12. FAQ
   13. Search, video & webinars
   14. Misc components
   15. Footer
   16. Print

   Cascade notes (order matters, don't move these across each other):
   - Rules like `.contentbox a` (0,1,1) must come BEFORE other link rules with
     the same specificity (a.tag, a.studieort-readmore, a.faq-sidebar-link…).
   - `#hkolumnen h2/h3` (section 7) intentionally comes AFTER #faktaruta and
     .tackruta headings (section 6).
   - #hkolumnen/#contarticle media queries sit after the #hkolumnen base rule.
   ========================================================================== */


/* ===== 1. Base & layout ===== */

html, body {
	height: 100%;
	margin: 0;
}

#boverride {
	background-color: #f0eeeb;
	max-width: 100%;
	overflow-x: hidden;
	font-family: Open Sans, Sans-Serif;
	color: #525051;
}

h1 {
	text-transform: uppercase;
	font-size: 30px;
}

h4 {
	font-weight: bold;
}

#boverride h4 {
	margin-top: 20px !important;
}

.row {
	padding-left: 40px;
	padding-right: 40px;
}

@media(max-width: 990px) {
	.row {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.maincontent {
	padding: 0px;
	min-height: 100%;
	margin-bottom: -40px;
}

.push {
	height: 45px;
}

.pagebody {
	padding-top: 145px;
}

@media(max-width: 582px) {
	.pagebody { padding-top: 120px; }
}

.nopadding {
	padding: 0px !important;
}


/* ===== 2. Header & navigation ===== */

.myheader {
	padding: 0px;
}

#headerbild {
	width: 100%;
	min-height: 107px;
}

.logo {
	position: absolute;
	z-index: 2;
	top: 2vw;
	left: 370px;
	height: 8vw;
	width: auto;
}

/* Big header title (start page) */
.utlsvl {
	color: #494c9f;
	font-weight: 500;
	padding-top: 6vw;
	font-family: BebasNeue, Sans-Serif;
	line-height: 45%;
	letter-spacing: 2px;
	position: absolute;
	z-index: 2;
	top: 5vw;
	left: 7vw;
	text-align: left;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.utlsvl::first-letter {
	font-size: 145px;
	display: inline-block;
	vertical-align: -80%;
}

#svh1 { font-size: 85px; }
#enh1 { font-size: 76px; }

#last {
	color: #c18058;
}

.subtitle {
	color: #4d5051;
	font-family: Open Sans, sans-serif;
	font-weight: 400;
	padding-top: 0px;
	margin-top: 0px;
	position: relative;
	letter-spacing: 0px;
	text-shadow: none;
}

#svsub {
	top: -19px;
	font-size: 24px;
	left: 65px;
}

#ensub {
	top: -15px;
	font-size: 25px;
	left: 62px;
}

/* Small header (sub pages) */
#subhead {
	min-height: 107px !important;
	border: solid 1px black;
	background: url("../images/subheader.jpg") no-repeat;
	background-size: cover;
	padding: 0px;
	margin: 0px;
}

#brand {
	margin-left: 5px;
}

#litenlogga {
	position: absolute;
	top: 7px;
	left: 32px;
}

.utlsvl2 {
	color: #494c9f;
	font-size: 50px;
	font-family: BebasNeue, Sans-Serif;
	line-height: 45%;
	position: absolute;
	z-index: 2;
	top: 40px;
	left: 100px;
	letter-spacing: 1px;
}

.utlsvl2::first-letter {
	font-size: 96px;
	display: inline-block;
	vertical-align: -84%;
}

.utlsvl2 .subtitle {
	color: #3f1016;
	letter-spacing: 0px;
}

.utlsvl2 #svsub {
	top: -10px;
	font-size: 14px;
	left: 40px;
}

.utlsvl2 #ensub {
	top: -9px;
	font-size: 16px;
	left: 42px;
}

/* Navigation bar */
.navlist {
	background-color: #2a3034;
	border-radius: 0px;
	padding: 0px;
	margin: 0px;
	border: 0px;
	margin-bottom: 10px;
	font-family: Open Sans, Sans-Serif;
	font-size: 18px;
	text-transform: uppercase;
}

#navlisten {
	margin-top: 107px;
}

#dropdown {
	padding-top: 8px;
}

#dropdownMenu1 {
	background-color: #2a3034;
	color: white;
	border: 0;
}

.nactive {
	font-weight: bold !important;
	color: #c68356 !important;
}

#boverride a.mlink:hover {
	color: #c68356 !important;
}

#boverride ul.cwhite a {
	color: white;
}

#boverride ul.cblack a {
	color: #525051;
}

/* Header responsive */
@media(max-width: 1440px) {
	.logo {
		top: 1.5vw;
		height: 7vw;
	}
	.utlsvl {
		top: 3vw;
	}
	#svh1 {
		font-size: 76px;
	}
	#svsub {
		top: -14px;
		font-size: 21.5px;
	}
}

@media(max-width: 990px) {
	.logo {
		display: none;
	}
	.utlsvl {
		top: 1vw;
		left: 3vw;
	}
}

@media(max-width: 780px) {
	#subhead {
		position: absolute;
	}
	#navlisten {
		position: absolute;
	}
	.utlsvl {
		top: 3px !important;
		left: 15px;
	}
	#svh1 { font-size: 54px; }
	#enh1 { font-size: 44px; }
	.utlsvl::first-letter {
		font-size: 95px;
	}
	#svsub {
		top: -14px;
		font-size: 16px;
		left: 41px;
	}
	#ensub {
		top: -4px;
		font-size: 15px;
		left: 42px;
	}
}

@media(max-width: 582px) {
	#litenlogga { display: none; }
	.utlsvl2 {
		font-size: 37px;
		top: 50px;
		left: 10px;
	}
	.utlsvl2::first-letter {
		font-size: 66px;
	}
	.utlsvl2 #svsub {
		top: -9px;
		font-size: 11px;
		left: 27px;
	}
	.utlsvl2 #ensub {
		top: -8px;
		font-size: 12px;
		left: 31px;
	}
}

@media(max-width: 440px) {
	.utlsvl {
		top: 20px !important;
	}
	#svh1 { font-size: 36px; }
	#enh1 { font-size: 31px; }
	.utlsvl::first-letter {
		font-size: 66px;
	}
	#svsub {
		top: -8px;
		font-size: 11px;
		left: 30px;
	}
	#ensub {
		top: -3px;
		font-size: 11px;
		left: 30px;
	}
}


/* ===== 3. Start page & cards ===== */
/* most start page styles live in startsidan.css */

#startingress {
	font-size: 19px;
	max-width: 1400px;
	padding: 0 0 6px 0;
	margin: 0 auto;
	text-align: center;
}

@media(max-width: 990px) {
	#startingress { font-size: 17px; }
}

@media(max-width: 780px) {
	#startingress { font-size: 14px; }
}

#boverride .jumbo {
	font-size: 3vw;
	text-align: center;
	font-style: italic;
}

/* Cards */
.colheight, .textcard {
	background-color: white;
	margin: 0px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.webinarbox { margin-bottom: 0px !important; }

#boverride .card {
	color: #4a4c9f;
	border: 0px;
	margin: 0px;
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	text-align: center;
	background-color: white;
	border-bottom: 1px solid #efefef;
	border-radius: 10px 10px 0 0;
	padding: 10px 14px;
	font-family: 'BebasNeue', Sans-Serif;
}

#boverride .card h2 {
	font-size: 25px;
	padding: 0px;
	margin: 0px;
	margin-top: 5px;
}

.card h4 {
	margin: 0px;
	padding: 2px;
}

#boverride .cardborder {
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}

#boverride .cardlink {
	color: #525051;
	text-decoration: none;
}

#boverride .cardlink:hover .cardborder {
	box-shadow: 0 6px 18px rgba(0,0,0,0.13);
	transform: translateY(-2px);
}

#boverride .cardlink:hover .card,
.cardlink:hover .paneltext,
.cardlink:hover .colheight {
	background-color: white;
}

.cardimage {
	opacity: 0.8;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.cardlink:hover .cardimage {
	opacity: 1;
}

.paneltext {
	font-family: Open Sans, Sans-Serif;
	color: #525051;
	padding: 0px;
}

.paneltext p {
	padding: 10px;
	padding-bottom: 5px;
}

#boverride .panel-body.paneltext {
	background-color: white;
	border-radius: 0 0 10px 10px;
}

@media(max-width: 780px) {
	.textcard {
		font-size: 90% !important;
	}
}


/* ===== 4. Articles ===== */

.breadcrumb {
	font-size: 15px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
}

#contarticle {
	margin: 30px;
	margin-left: 3vw;
	margin-right: 0vw;
	background-color: #f9f9f9;
	border: 0px;
	padding-top: 30px;
	border-radius: 10px;
	overflow: visible;
}

#bilden {
	padding-right: 45px;
	padding-left: 45px;
	width: 100%;
	height: auto;
	max-width: 880px;
}

.article {
	max-width: 880px;
	padding-right: 45px;
	padding-left: 45px;
	padding-bottom: 30px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-size: 130%;
}

.preamble {
	font-size: 21px;
	font-style: italic;
}

#boverride pre { background-color: #f7f7f7 !important; }

.artimage {
	float: right;
	padding: 10px;
	height: auto;
}

.artimage2 {
	float: right;
	padding: 10px;
	width: 280px;
	height: auto;
}

/* Tables in articles */
.bcell {
	border: solid 1px gray;
}

#boverride .stattab {
	width: 100%;
	margin-top: 30px;
	font-size: 90%;
}

#boverride table.stattab td {
	padding: 10px !important;
	font-size: 90% !important;
}

#boverride table.texttab td {
	margin: 5px !important;
	padding: 5px !important;
	vertical-align: top !important;
}

#boverride table.stattab td p, table.texttab td p {
	font-style: normal !important;
	font-size: 90% !important;
}

#boverride .texttab {
	width: 100%;
	margin-top: 30px;
	font-size: 85%;
}

/* Infobox */
.infobox {
	font-size: 12px;
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	padding: 10px 14px;
	margin-top: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#contarticle .infobox {
	font-size: 16px;
}

.infobox p, p.formtag {
	font-size: 100% !important;
	font-style: normal !important;
}

/* Table of contents */
.toc-box {
	display: block;
	background-color: #f5f4f1;
	border-left: 4px solid #494c9f;
	border-radius: 0 6px 6px 0;
	padding: 14px 20px 12px 18px;
	margin: 6px 0 24px 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.toc-title {
	display: block;
	font-weight: 700;
	font-size: 78%;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #494c9f;
	margin-bottom: 10px;
}

.toc-box ol {
	margin: 0;
	padding-left: 20px;
	columns: 1;
}

.toc-box li {
	font-size: 83%;
	line-height: 1.45;
	margin-bottom: 5px;
	font-style: normal;
}

.toc-box a {
	color: #3f4280;
	text-decoration: none;
}

.toc-box a:hover {
	color: #494c9f;
	text-decoration: underline;
}

@media (min-width: 600px) {
	.toc-box ol {
		columns: 2;
		column-gap: 30px;
	}
}

/* Article footer & share buttons */
.articlefooter {
	background-color: #e8e8e8;
	min-height: 45px;
	padding: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 0 0 10px 10px;
	height: auto !important;
	overflow: hidden;
}

.articlefooter > div {
	display: inline;
	float: right;
	width: 70%;
	text-align: right;
}

ul.share-buttons {
	list-style: none;
	padding: 0px;
	float: left;
}

ul.share-buttons li {
	display: inline;
}

ul.share-buttons .sr-only {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

ul.share-buttons img {
	width: 32px;
}

#schoolbtns.artdesc {
	font-size: 15px;
	padding-bottom: 15px;
}

#schoolbtns.artdesc a { color: #c18058; font-weight: 600; text-decoration: none; }
#schoolbtns.artdesc a:hover { color: #a36844; text-decoration: underline; }

.author-bio {
	border-left-color: #c18058 !important;
	border-radius: 10px !important;
	margin: 20px 0 !important;
}

.author-photo { border-color: #c18058 !important; }

#contarticle h2:first-of-type { margin-top: 8px; }

/* Intresseanmälan page - no space above the heading */
#contarticle.tightop {
	padding-top: 8px;
}

#contarticle.tightop h1:first-of-type {
	margin-top: 0;
}

.scholarshipnotice {
	border: solid 2px red;
	padding: 5px;
}

/* Articles responsive (#contarticle margins: see section 7) */
@media(max-width: 990px) {
	#bilden {
		width: 95%;
		padding-left: 5px;
		padding-right: 5px;
	}
	.article {
		padding-right: 15px;
		padding-left: 15px;
	}
	.articlefooter {
		min-height: 100px;
	}
	.artimage {
		max-width: 300px;
	}
}

@media(max-width: 780px) {
	.table td {
		font-size: 11px;
	}
	#boverride table.stattab td p, table.texttab td p {
		font-size: 100% !important;
	}
}

@media(max-width: 767px) {
	#bilden { margin-top: 10px; }
}

@media(max-width: 440px) {
	article > h1 { font-size: 30px; }
	article > h2 { font-size: 24px !important; }
	article > h3 { font-size: 20px !important; }
	article > h4 { font-size: 20px !important; }
}


/* ===== 5. Forms & buttons ===== */

label {
	min-width: 175px;
}

.shortlabel {
	display: inline-block;
	min-width: 100px !important;
}

.checklabel {
	min-width: 0 !important;
	font-weight: normal !important;
	cursor: pointer;
}

label.longlabel, textarea {
	width: 635px;
}

textarea {
	height: 150px;
	max-width: 100%;
	border: 1px solid #c8c8c8 !important;
	border-radius: 4px !important;
	padding: 8px;
	margin-top: 2px;
}

.infopic {
	height: 30px;
}

.textfield, .selectfield {
	height: 30px;
	border: 1px solid #c8c8c8 !important;
	border-radius: 4px;
	padding-left: 8px;
}

.textfield, .selectfield, .bbutton {
	width: 360px;
	max-width: 100%;
}

.textfield:focus, .selectfield:focus {
	border-color: #494c9f !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba(73,76,159,0.12);
}

.checkbox {
	border: 1px solid #c8c8c8 !important;
}

input[type='tel'] {
	border: 1px solid #c8c8c8 !important;
	border-radius: 4px !important;
	height: 30px;
	padding-left: 8px;
	vertical-align: middle;
}

select[name='landsnr'] {
	border: 1px solid #c8c8c8 !important;
	border-radius: 4px !important;
	height: 30px;
	vertical-align: middle;
}

.conditions {
	font-size: 11px;
	font-style: italic;
	padding-top: 10px;
}

.formerror {
	color: #a30000;
	background-color: #ffecec;
	border-left: 3px solid #a30000;
	font-style: italic;
	font-size: 14px;
	line-height: 1.4;
	padding: 10px 12px;
	margin: 0 16px 10px 16px;
}

/* Submit buttons */
.bbutton {
	border-radius: 24px !important;
	background-color: #a36844 !important;
	color: white !important;
	border: 0 !important;
	font-family: 'BebasNeue', Sans-Serif !important;
	font-size: 21px !important;
	height: auto !important;
	padding: 13px 24px !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.bbutton:hover {
	background-color: #8a5739 !important;
}

/* Pill buttons (discounts, thank-you popup) */
.btn-offer-primary, .btn-offer-secondary {
	display: inline-block;
	color: white !important;
	font-family: 'BebasNeue', Sans-Serif;
	letter-spacing: 1px;
	padding: 7px 22px;
	border-radius: 21px;
	text-decoration: none !important;
	border: none;
	transition: background-color 0.2s ease;
	margin: 4px;
}

.btn-offer-primary {
	background-color: #c18058;
	font-size: 18px;
}

.btn-offer-primary:hover {
	background-color: #a36844;
	color: white !important;
}

.btn-offer-secondary {
	background-color: #494c9f;
	font-size: 17px;
}

.btn-offer-secondary:hover {
	background-color: #3d408a;
	color: white !important;
}

/* Intresseanmälan form in the sidebar (#intresse) */
#intresse #faktaruta {
	padding: 0 !important;
	background-color: white;
	overflow: hidden;
}

#intresse #faktaruta h2 {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 22px;
	color: #494c9f;
	text-align: center;
	background-color: white;
	padding: 12px 20px 8px 20px;
	border-bottom: 1px solid #dde0f5;
	margin: 0 -20px 12px -20px;
	display: block;
}

#intresse #faktaruta p {
	font-size: 13px;
	padding: 0;
	margin-bottom: 5px;
}

#intresse fieldset {
	background-color: #eef0fb;
	border: none;
	margin: 0;
	padding: 0 20px 8px 20px;
}

#intresse label {
	display: block !important;
	width: auto !important;
	max-width: 100%;
	font-size: 13px;
	color: #525051;
	margin-bottom: 2px;
}

#intresse label + br,
#intresse .longlabel + br { display: none; }

#intresse .formtag {
	background-color: transparent !important;
	border: none !important;
	padding: 0;
	margin-bottom: 6px;
	font-size: 13px !important;
}

#intresse .bbutton {
	display: block !important;
	width: auto !important;
	min-width: 200px;
	margin: 12px auto 8px auto !important;
	padding: 0 32px;
}

#intresse .conditions {
	font-size: 12px !important;
	color: #888;
	padding: 4px 16px 12px 16px;
	display: block;
	background-color: #eef0fb;
}

/* Message field: width per context, short on mobile (grows while typing) */
#boverride textarea#message { width: 540px !important; }
#intresse textarea#message  { width: 100% !important; }

textarea#message {
	height: 170px;
}

/* Form controls must stay ≥16px or iOS Safari zooms on focus */
#intresse .textfield,
#intresse .selectfield,
#intresse textarea,
#intresse input[type='text'],
#intresse input[type='email'],
#intresse input[type='tel'],
#intresse select {
	font-size: 16px;
}

/* Standalone intresseanmälan — no #intresse wrapper, same 16px requirement.
   Only below 1024px: on desktop the fields inherit .article's 130% via
   Bootstrap's font-size:inherit, and forcing 16px there shrinks them. */
@media(max-width: 1024px) {
	#boverride .textfield,
	#boverride .selectfield,
	#boverride textarea,
	#boverride input[type='text'],
	#boverride input[type='email'],
	#boverride input[type='tel'],
	#boverride select {
		font-size: 16px;
	}
}

/* Popup container — form may be injected without the #intresse wrapper */
#ipop .textfield,
#ipop .selectfield,
#ipop textarea,
#ipop input,
#ipop select {
	font-size: 16px;
}

/* US intresse: location checkbox grid */
.locgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	margin-bottom: 10px;
}

.locgrid .loc {
	display: flex;
	align-items: center;
	min-height: 52px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

/* #intresse label{display:block!important} slår annars ut flex-layouten,
   kryssrutan hamnar inline och radbruten text går ut till boxens kant */
#intresse .locgrid .loc {
	display: flex !important;
	margin: 0 !important;
}

.locgrid .loc input {
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	flex: none;
	accent-color: #494c9f;
}

.locgrid .loc:hover {
	border-color: #494c9f;
	background: #f7f7fc;
}

.locgrid .loc:has(input:checked) {
	border-color: #494c9f;
	background: #eef0fa;
	box-shadow: inset 0 0 0 1px #494c9f;
}

.locgrid .loc:has(input:focus-visible) {
	outline: 2px solid #494c9f;
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.locgrid {
		grid-template-columns: 1fr 1fr;
		gap: 8px 12px;
	}
	.locgrid .loc {
		min-height: 44px;
	}
}

/* Forms responsive */
@media(max-width: 780px) {
	.textfield, .selectfield, .bbutton {
		width: 300px;
	}
}

@media (max-width: 767px) {
	.textfield, .selectfield,
	input[type='tel'], select[name='landsnr'] {
		height: 48px;
		padding: 8px 10px;
	}
	.textfield, .selectfield, .bbutton {
		width: 100%;
	}
	select[name='landsnr'] {
		width: 90px !important;
	}
	.bbutton {
		min-height: 50px;
		font-size: 20px !important;
	}
	#intresse .formtag, .formtag {
		margin-bottom: 12px;
	}
	textarea#message {
		height: 82px;
		min-height: 82px;
		overflow-y: hidden;
		transition: height .15s ease;
	}
}


/* ===== 6. School pages ===== */

#schoolbtns {
	width: 100%;
	text-align: center;
}

#schoolbtns > .btn {
	margin: 15px;
}

/* School mobile info request */
#schoolbtns .btn-warning {
	background-color: #c18058 !important;
	border-color: #a36844 !important;
	color: white !important;
}

#schoolbtns .btn-warning:hover { background-color: #a36844 !important; }

#videoholder {
	width: 100%;
	padding-bottom: 12px;
	margin-top: 5px;
	color: white;
}

#videoleft,
#videoright {
	width: 49%;
	font-size: 15px;
	background-color: #7a7a7a;
	color: white;
	border: none;
	border-radius: 6px;
}

#videoleft { float: left; }
#videoright { float: right; }

#videoleft:hover,
#videoright:hover {
	background-color: #555;
	color: white;
}

.carrows {
	background-image: none !important;
	color: gainsboro !important;
}

.in-iframe .hide-in-iframe {
	display: none !important;
}

/* Content boxes (also used on tag pages, see section 8) */
.contentbox {
	padding: 16px 20px;
	margin-bottom: 12px;
}

.contentbox h2 {
	margin-top: 0;
}

.contentbox a {
	color: #494c9f;
	text-decoration: none;
	font-size: 15px;
}

.contentbox a:hover {
	color: #c18058;
}

.showlinks a {
	color: #494c9f !important;
	text-decoration: none !important;
	display: inline !important;
}

.showlinks a:hover {
	color: #c18058 !important;
	text-decoration: underline !important;
	background-color: transparent !important;
}

/* Faktaruta */
#faktaruta {
	background-color: white;
	border: 1px solid #e4e4e4 !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 20px !important;
	max-width: 600px;
	min-width: 300px;
	overflow: hidden;
	margin-bottom: 16px;
}

#faktaruta #schoollogo {
	padding: 8px 16px 10px 16px;
	max-width: 100%;
	max-height: 130px;
	height: auto;
	display: block;
	margin: 0 auto;
}

#faktaruta h2 {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 25px;
	color: #494c9f;
	text-align: center;
	padding: 10px 20px 5px 20px;
	margin: -20px -20px 12px -20px;
}

#faktaruta h3 {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 22px;
	letter-spacing: 1px;
	color: #c18058;
	text-transform: uppercase;
	padding: 8px 20px 4px 30px;
	margin: 0 -20px;
}

#faktaruta p {
	font-size: 14px;
	padding: 3px 0 3px 10px;
	margin: 0;
	color: #525051;
	line-height: 1.8;
}

#faktaruta > p b {
	color: #2a3034;
}

/* Link lists in the faktaruta (desktop) */
#faktaruta .hidden-xs {
	padding: 0 0 18px 0;
	margin: 8px -20px -20px -20px;
}

/* Inherits the rest from #faktaruta h3. The color is repeated on purpose:
   it must beat #hkolumnen h3 (section 7). */
#faktaruta .hidden-xs h3 {
	color: #c18058;
	margin: 0;
	border-top: 1px solid #efefef;
}

#faktaruta .hidden-xs p {
	padding: 0 !important;
	border: none !important;
	margin: 0;
}

#faktaruta .hidden-xs a {
	display: block;
	position: relative;
	padding: 7px 20px 7px 50px;
	color: #494c9f;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid #f0f0f0;
	line-height: 1.3;
}

#faktaruta .hidden-xs a:last-child {
	border-bottom: none;
}

#faktaruta .hidden-xs a::before {
	content: '›';
	position: absolute;
	left: 34px;
	top: 50%;
	transform: translateY(-50%);
	color: #c18058;
	font-size: 18px;
	line-height: 1;
}

#faktaruta .hidden-xs a:hover {
	background-color: #f8f6ff;
	color: #c18058;
	text-decoration: none;
}

/* School mobile links */
.hidden-lg.hidden-sm.hidden-md a {
	display: block;
	position: relative;
	padding: 7px 12px 7px 26px;
	color: #494c9f;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid #f0f0f0;
}

.hidden-lg.hidden-sm.hidden-md a::before {
	content: '›';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #c18058;
	font-size: 18px;
	line-height: 1;
}

.hidden-lg.hidden-sm.hidden-md a:hover {
	background-color: #f8f6ff;
	color: #c18058;
	text-decoration: none;
}

/* Omdöme */
.omdome {
	border-left: 3px solid #c18058;
	padding-left: 14px;
	color: #525051;
}

/* Tackruta (thank you popup) */
.tackwrap {
	position: absolute;
	top: 205px;
	left: 50%;
}

.tackruta {
	border: none !important;
	border-radius: 10px !important;
	background-color: white !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1) !important;
	padding: 30px !important;
	text-align: left !important;
	border-top: 4px solid #494c9f !important;
	position: relative;
	left: -50%;
	width: 600px;
	z-index: 100;
	max-width: 100%;
}

.tackruta h2 {
	font-family: 'BebasNeue', Sans-Serif;
	color: #494c9f;
	font-size: 28px;
	margin-bottom: 12px;
}

.tackruta .btn-offer-primary {
	display: block;
	width: fit-content;
	margin: 0px auto 0 auto;
}

.tackclose {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: none;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: #E8E8E8;
	cursor: pointer;
}

.tackclose:hover, .tackclose:focus {
	color: #777;
}

@media(max-width: 780px) {
	#schoolbtns > .btn {
		margin: 5px;
	}
	.tackruta {
		width: 440px;
	}
}

/* Mobil: popupen på skolsidan låg utanför skärmen (left:50% + fast bredd), nu full bredd med marginal */
@media(max-width: 500px) {
	.tackwrap {
		left: 10px;
		right: 10px;
	}
	.tackruta {
		left: 0;
		width: auto;
		padding: 20px 16px !important;
	}
}

/* Tacksidan efter intresseanmälan (layout::thankYou) */
.tackblock {
	background: white;
	border-radius: 10px;
	border-top: 4px solid #494c9f;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
	padding: 24px 28px;
	margin-bottom: 30px;
}

.tackblock h2 {
	font-family: 'BebasNeue', Sans-Serif;
	color: #494c9f;
	font-size: 30px;
	margin-top: 0;
}

.tackblock h3 {
	font-size: 19px;
	font-weight: 700;
	color: #333;
	margin-top: 0;
}

.tackcheck {
	display: inline-block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	background: #3c9a5f;
	color: white;
	text-align: center;
	font-size: 22px;
	font-family: Arial, Sans-Serif;
	vertical-align: 3px;
	margin-right: 6px;
}

.tackmail {
	background: #f3f4fb;
	border: 1px solid #d5d7ee;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 18px 0;
	font-size: 16px;
}

.tackmail p {
	margin: 0;
}

.tackmail #tackadress {
	word-break: break-all;
	margin-right: 8px;
}

.tackmail #rattaform {
	margin-top: 10px;
}

.tackmail #rattaform .form-control {
	width: 320px;
	max-width: 100%;
}

.tackmail #rattasvar:not(:empty) {
	margin-top: 10px;
	font-weight: 600;
}

.tacksteg ol {
	padding-left: 22px;
	margin-bottom: 20px;
}

.tacksteg li {
	margin-bottom: 8px;
	line-height: 1.5;
}

.tacksocial {
	border-top: 1px solid #e8e8e8;
	padding-top: 18px;
}

.tacksocialknappar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tacksocialknapp {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 8px;
	color: white !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tacksocialknapp:hover, .tacksocialknapp:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.tacksocialknapp svg {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	flex-shrink: 0;
}

.ts-tiktok { background: #111; }
.ts-instagram { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.ts-youtube { background: #e00; }
.ts-facebook { background: #1877f2; }
.ts-podd { background: #494c9f; }

.tacknyanmalan {
	margin: 10px 0 30px 0;
}

.tacktillbaka {
	margin: 20px 0 0 0;
}

/* Samma tackblock i popupen på skolsidan (.tackruta), utan eget kort */
.tackblock.tackskola {
	background: none;
	border-top: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.tackskola h2 {
	padding-right: 20px;
}

.tackcta {
	margin: 20px 0 0 0;
}

.tackcta .btn {
	font-size: 18px;
	padding: 12px 26px;
	white-space: normal;
}

/* Mobil: skolpopupen högst upp på skärmen och kortare, så att knappen till skolans hemsida syns utan att skrolla */
@media(max-width: 767px) {
	.tackwrap:has(.tackskola) {
		top: 10px;
		z-index: 1100;/* över sidhuvudet (navbar), under formulärpopupen #ipop (1200) */
	}
	.tackskola .tackskolnamn {
		display: none;
	}
	.tackskola #tackgmail {
		display: none !important;
	}
}

@media(max-width: 767px) {
	.tackblock {
		padding: 18px 16px;
	}
	.tacksocialknapp {
		width: calc(50% - 5px);
		justify-content: center;
		padding: 10px 8px;
	}
}


/* ===== 7. Right column & article lists ===== */

#hkolumnen {
	margin-top: 30px;
	margin-left: 3vw;
	margin-right: 2vw;
}

#hkolumnen h2, #hkolumnen h3, .contentbox h2, .splashcol h2 {
	color: #4a4c9f;
	font-family: 'BebasNeue', Sans-Serif;
}

#hkolumnen > div,
#hkolumnen > ul,
#hkolumnen .panel,
#hkolumnen #faktaruta {
	margin-bottom: 12px;
}

#hkolumnen h2.h2t {
	margin-top: 18px;
	margin-bottom: 6px;
}

#hkolumnen iframe {
	display: block;
	margin-bottom: 8px;
}

#hkolumnen .articlelist {
	margin-bottom: 4px;
}

/* Right column + article margins */
@media(max-width: 1440px) {
	#hkolumnen, #contarticle {
		margin-left: 2vw;
		margin-right: 0px;
	}
}

@media(max-width: 990px) {
	#hkolumnen, #contarticle {
		margin: 0;
		padding-right: 0px;
		padding-left: 0px;
	}
}

.h2t {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 26px;
	color: #494c9f;
	padding: 0;
	border: none;
	margin-top: 30px;
}

/* City headings in school lists */
h3.stad {
	color: white;
	background-color: #494c9f;
	border-radius: 4px;
	padding: 5px 10px;
	margin-bottom: 6px;
	margin-top: 16px;
	font-size: 18px;
	display: inline-block;
}

h4.stad {
	color: white;
	background-color: #c18058;
	border-radius: 4px;
	padding: 4px 10px;
	margin-top: 12px;
	margin-bottom: 4px;
	font-size: 15px;
	display: inline-block;
}

/* Article teaser lists */
.articlelist {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}

.listarticle {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	min-height: 75px !important;
	max-height: 235px !important;
	max-width: 100%;
	border: 1px solid #e4e4e4 !important;
	border-radius: 10px !important;
	overflow: hidden;
	background-color: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	align-items: stretch;
	position: relative;
}

.articlethumb {
	width: 45%;
	min-width: 120px;
	max-width: 240px;
	flex-shrink: 0;
	display: block;
	object-fit: cover;
	object-position: center;
	opacity: 0.85;
	height: 100% !important;
	min-height: 100% !important;
	align-self: stretch;
}

.listarticle:hover .articlethumb {
	opacity: 1;
}

.teasercontainer {
	float: none;
	flex: 1;
	padding: 4px 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

@media(min-width: 441px) {
	.teasercontainer {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: min(45%, 240px);
	}
}

.teaser-title-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
	overflow: hidden;
}

.teasertext {
	font-weight: 700;
	color: #2a3034;
	font-size: 14px;
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	line-height: 1.3;
}

.date {
	font-size: 11px;
	color: #c18058;
	white-space: normal;
	flex-shrink: 1;
	min-width: 0;
	max-width: 45%;
	overflow-wrap: anywhere;
}

.artdesc {
	font-size: 12px;
	color: #525051;
	line-height: 1.4;
	overflow: hidden;
	flex: 1;
	min-height: 0;
}

.artdesc a {
	color: #c18058;
	font-style: normal;
	font-weight: 600;
	text-decoration: none;
}

.artdesc a:hover {
	color: #a36844;
	text-decoration: underline;
}

a.artlink {
	color: #525051 !important;
}

a.artlink:hover {
	text-decoration: none;
}

@media(min-width: 990px) {
	.artwrap {
		white-space: nowrap;
	}
}

/* Article teasers responsive */
@media(max-width: 780px) {
	.teasercontainer {
		padding: 5px;
	}
}

@media(max-width: 767px) {
	.articlethumb { width: 40%; min-width: 90px; }
	.teasertext { font-size: 12px; }
}

@media(max-width: 540px) {
	.artdesc {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.teasertext {
		font-size: 11px;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media(max-width: 440px) {
	.listarticle {
		flex-direction: column;
		height: auto !important;
		max-height: none !important;
	}
	.articlethumb {
		width: 100% !important;
		max-width: 100% !important;
		height: 180px !important;
		object-fit: cover !important;
		object-position: center !important;
	}
	.teasercontainer {
		position: static;
		width: 100%;
		left: auto;
		padding: 8px 10px;
		margin-left: 0;
	}
	.teasertext {
		font-size: 13px;
		white-space: normal;
		overflow: visible;
		-webkit-line-clamp: unset;
	}
	.artdesc {
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		white-space: normal;
	}
}


/* ===== 8. Tag / splash pages ===== */

#splashdiv {
	margin-left: auto;
	margin-right: auto;
	min-height: 765px;
	padding: 30px;
	max-width: 1620px;
	background-color: #f0eeeb;
	padding-top: 0;
	margin-top: 0;
}

.splashcol {
	margin-bottom: 0;
	padding-right: 15px !important;
	padding-left: 0 !important;
}

.splashcol .articlelist {
	margin-bottom: 0;
}

.studybild {
	width: 100%;
	border: solid 0px #3f1016;
	margin-bottom: 1vw;
}

#splashdiv .breadcrumb,
.tag-header-card .breadcrumb {
	background-color: transparent;
	margin-bottom: 4px;
	padding: 0;
}

.tag-header-card {
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 16px 20px 12px 20px;
	margin-top: 12px;
	margin-bottom: 12px;
}

.tag-header-card h1 { font-size: 28px; margin-top: 4px; margin-bottom: 8px; }
.tag-header-card .preamble { font-size: 16px; margin-bottom: 10px; }

#splashdiv .shortcuts-list {
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#splashdiv .shortcuts-list li a {
	display: inline-block;
	padding: 5px 14px;
	background: white;
	border: 2px solid #494c9f;
	border-radius: 21px;
	color: #494c9f;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#splashdiv .shortcuts-list li a:hover {
	background-color: #494c9f;
	color: white;
	text-decoration: none;
}

#splashdiv .splashcol a:not(.tag):not(.artlink):not(.btn):not(.shortcuts-list a):not(.podcast-button) {
	text-decoration: none;
	color: #494c9f;
}

#splashdiv .splashcol a:not(.tag):not(.artlink):not(.btn):not(.shortcuts-list a):not(.podcast-button):hover {
	color: #c18058;
	text-decoration: underline;
}

#splashdiv .splashcol:last-child > h2:first-child,
#splashdiv .splashcol:last-child > div:first-child > h2:first-child,
#splashdiv .splashcol > ul.articlelist:first-child,
#splashdiv .splashcol .h2t:first-of-type {
	margin-top: 0;
	padding-top: 0;
}

#splashdiv .splashcol > h2.h2t:first-child {
	margin-top: 10px;
}

/* Tag banner fallback (no image) */
.tag-banner-fallback {
	width: 100%;
	height: 90px;
	background-color: #2a3034;
	background-image:
		repeating-linear-gradient(47deg, rgba(193,128,88,0.12) 0px, rgba(193,128,88,0.12) 1px, transparent 1px, transparent 18px),
		repeating-linear-gradient(-47deg, rgba(193,128,88,0.08) 0px, rgba(193,128,88,0.08) 1px, transparent 1px, transparent 18px);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5vw;
	position: relative;
	overflow: hidden;
}

.tag-banner-fallback::before,
.tag-banner-fallback::after {
	content: '';
	position: absolute;
	top: 0;
	width: 6px;
	height: 100%;
	background-color: #c18058;
}

.tag-banner-fallback::before { left: 0; }
.tag-banner-fallback::after { right: 0; }

.tag-banner-label {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: clamp(28px, 4vw, 52px);
	color: white;
	letter-spacing: 4px;
	text-transform: uppercase;
	opacity: 0.9;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
	padding-top: 15px;
}

/* Studieort readmore */
a.studieort-readmore {
	display: block;
	clear: both;
	margin-top: 0px !important;
	margin-bottom: 8px;
	padding: 4px 14px;
	background-color: white;
	border: 1px solid #c18058;
	border-radius: 21px;
	color: #c18058;
	font-size: 13px;
	text-decoration: none;
	width: fit-content;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.studieort-readmore:hover {
	background-color: #c18058;
	color: white !important;
	text-decoration: none;
}

/* Skoldb lucka */
.dbrubrik {
	margin-top: 5px;
	padding-top: 5px;
}

.ankare {
	position: relative !important;
	top: -150px !important;
	height: 0px !important;
	display: inline !important;
}

/* ── Country fact box (taggar.php $cat==1, content from tagfiles/*.php) ──
   Scoped with :has(p b) so it ONLY targets the label/text fact boxes and
   leaves the auto-generated link-list .showlinks boxes (cat>6, cat==18)
   and the plain .contentbox boxes (layout.php, pages.php) untouched.
   :not(:has(h3, h4)) excludes long-form article tagfiles (e.g. university.php)
   that also contain <p><b> rows but use <h3>/<h4> subheadings — they render as
   plain contentboxes instead of getting the fact-box row treatment.
   Degrades gracefully: no :has() support → box keeps its current look. */

.contentbox.showlinks:has(p b):not(:has(h3, h4)) {
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > h2 {
	margin: 0;
	padding: 13px 20px 10px 22px;
	background: #f7f7fb;
	border-bottom: 1px solid #ececf3;
	border-left: 4px solid #c18058;
	font-size: 27px;
	line-height: 1.1;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > p {
	margin: 0;
	padding: 11px 20px 11px 26px;
	border-bottom: 1px solid #f0f0f3;
	font-size: 15px;
	line-height: 1.6;
	color: #525051;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > p > b {
	display: block;
	margin-bottom: 1px;
	color: #c18058;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* ── Article-style country fact box (prose + subheadings, e.g. Japan) ──
   Detected by the <br> these boxes contain. They're article intros, not
   label:value tables, so drop the per-row dividers and the double gap.
   Boxes without a <br> (Korea, USA…) keep the original row design. */

.contentbox.showlinks:has(p b):not(:has(h3, h4)):has(br) > p {
	border-bottom: none;
	padding: 2px 20px 12px 22px;
}

/* One divider only where a new section actually starts (a bold subheading) */
.contentbox.showlinks:has(p b):not(:has(h3, h4)):has(br) > p:has(b) {
	border-top: 1px solid #f0f0f3;
	margin-top: 4px;
	padding-top: 12px;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)):has(br) > p:first-of-type {
	border-top: none;
	margin-top: 0;
	padding-top: 6px;
}

/* Bold text becomes an inline subheading; the <br> supplies the single break */
.contentbox.showlinks:has(p b):not(:has(h3, h4)):has(br) > p > b {
	display: inline;
	font-size: 16px;
}

/* "Utbildningar vi kan hjälpa dig med" — link row + program list */

/* Label row directly above its list — no divider between them */
.contentbox.showlinks:has(p b):not(:has(h3, h4)):not(:has(br)) > p:has(+ ul) {
	border-bottom: none;
	padding-bottom: 2px;
}

/* Closing link row after the list — pull it up, give it air below */
.contentbox.showlinks:has(p b):not(:has(h3, h4)):not(:has(br)) > ul + p:last-child {
	padding-top: 0;
	padding-bottom: 16px;
}

/* No divider under the last row */
.contentbox.showlinks:has(p b):not(:has(h3, h4)) > p:last-of-type {
	border-bottom: none;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > ul {
	margin: 0;
	padding: 2px 20px 14px 42px;	/* aligns with the p rows (26px) + bullet room */
	list-style: none;
	font-size: 14px;
	line-height: 1.55;
	color: #525051;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > ul > li {
	position: relative;
	padding: 3px 0;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > ul > li::before {
	content: '›';	/* same orange arrow marker as the faktaruta links */
	position: absolute;
	left: -16px;
	top: 2px;
	color: #c18058;
	font-size: 17px;
	line-height: 1.4;
}

.contentbox.showlinks:has(p b):not(:has(h3, h4)) > ul > li i {
	color: #2a3034;	/* dark lead-in, e.g. "Bachelors på engelska i Seoul" */
	font-weight: 600;
}

/* [stipendier(x)] offers table (layout.php writeOffers) inside the fact box —
   styled like the ul link list above instead of the gray zebra table.
   #boverride prefix needed to beat the #boverride .stattab rules (section 5)
   and !important to beat the inline border/background from writeOffers. */

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > p:has(+ table.stattab) {
	border-bottom: none;
	padding-bottom: 2px;
}

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > table.stattab {
	width: 100%;
	margin: 0 0 14px;
	border: none !important;
	font-size: 14px;
}

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > table.stattab tr {
	background-color: transparent !important;
}

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > table.stattab td {
	position: relative;
	padding: 3px 20px 3px 42px !important;	/* same indent as the ul list */
	border: none;
	font-size: 14px !important;
	line-height: 1.55;
	color: #525051;
}

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > table.stattab td::before {
	content: '›';
	position: absolute;
	left: 26px;
	top: 2px;
	color: #c18058;
	font-size: 17px;
	line-height: 1.4;
}

#boverride .contentbox.showlinks:has(p b):not(:has(h3, h4)) > table.stattab td a {
	font-size: inherit;
}

/* Tag pages responsive */
@media(max-width: 780px) {
	#splashdiv {
		padding-right: 5px;
		padding-left: 10px;
	}
}

@media(max-width: 767px) {
	.studybild {
		margin-top: 36px !important;
	}
	.tag-banner-fallback { margin-top: 10px; }
}


/* ===== 9. Tags & small links ===== */

a.tag {
	color: white;
	background-color: #7b7fc4;
	margin: 2px;
	padding: 5px;
	font-size: 14px;
	line-height: 30px;
	white-space: nowrap;
	border-radius: 4px;
}

a.tag:hover {
	text-decoration: none;
	background-color: #494c9f;
}

/* Mobile tags — prevent school page arrow styles bleeding onto tags */
.hidden-sm.hidden-md.hidden-lg a.tag {
	display: inline !important;
	padding: 5px !important;
	background-color: #7b7fc4 !important;
	color: white !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	position: static !important;
	border: none !important;
}

.hidden-sm.hidden-md.hidden-lg a.tag::before { display: none !important; }

.sublinks { color: #888 !important; font-size: 12px; text-decoration: none; }
.sublinks:hover { color: #494c9f !important; text-decoration: underline; }


/* ===== 10. Discounts ===== */

.discounts-header {
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 16px 20px 14px 20px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.discounts-header h1 {
	font-size: 28px;
	margin: 0 0 8px 0;
	padding: 0;
}

.discounts-header .preamble {
	font-size: 16px;
	margin: 0;
	padding: 0;
}

/* Sort selector */
.discounts-sort {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 15px;
	color: #525051;
}

.sort-select {
	height: 34px;
	padding: 0 16px;
	font-size: 15px;
	font-family: 'Open Sans', Sans-Serif;
	color: #494c9f;
	background: white;
	border: 2px solid #494c9f;
	border-radius: 21px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sort-select:hover,
.sort-select:focus {
	background-color: #494c9f;
	color: white;
	outline: none;
}

/* Offers */
.offerdiv {
	border: none !important;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 16px 18px;
	margin-bottom: 20px;
	color: #525051;
}

.odiv1 { background-color: #fdf8ee; border-left: 4px solid #c18058 !important; border-radius: 0 10px 10px 0 !important; }
.odiv2 { background-color: #f0f6ff; border-left: 4px solid #494c9f !important; border-radius: 0 10px 10px 0 !important; }
.odiv3 { background-color: #fff0f0; border-left: 4px solid #d04040 !important; border-radius: 0 10px 10px 0 !important; }
.odiv0 { background-color: #f0faf0; border-left: 4px solid #4a9f4a !important; border-radius: 0 10px 10px 0 !important; }

/* Libsyn-podden (standardspelaren) */
.libsyn-player { display: block; box-sizing: border-box; border: none; border-left: 4px solid #c18058; border-radius: 0 10px 10px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.op {
	font-size: 90%;
	color: #666666;
	text-align: right;
}

.oh {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 20px;
	letter-spacing: 1px;
	color: #2a3034;
	margin: 0 0 8px 0;
}

.oh-small {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 17px;
	letter-spacing: 0.5px;
	color: #2a3034;
	margin: 10px 0 4px 0;
}

.olink {
	color: #666666;
	text-decoration: underline;
}

.opad {
	margin: 20px !important;
	margin-bottom: 0px !important;
}

@media(max-width: 767px) {
	.opad {
		max-width: 275px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}
}


/* ===== 11. School database (skoldb) ===== */

.skoldb-hero {
	display: flex;
	align-items: stretch;
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	margin-top: 30px;
	margin-bottom: 15px;
	overflow: hidden;
}

.skoldb-hero-content {
	flex: 1;
	padding: 16px 20px 2px 20px;
	min-width: 0;
}

.skoldb-subsection { margin-bottom: 10px; }

.skoldb-sub-title {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 18px;
	color: #494c9f;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.skoldb-section-title {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 24px;
	color: #494c9f;
	margin: 20px 0 0 0;
	padding: 0;
	border: none;
}

.country-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.country-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px 4px 8px;
	background: white;
	border: 1px solid #e4e4e4;
	border-radius: 21px;
	color: #525051;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.country-pill img { width: 16px; height: 12px; flex-shrink: 0; }

.country-pill:hover {
	background-color: #7b7fc4;
	color: white !important;
	text-decoration: none;
}

.skoldb-subject-card {
	background-color: white;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 16px 20px;
	margin-bottom: 12px;
}

.subject-group { margin-bottom: 10px; }

.subject-group-title {
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 16px;
	color: #2a3034;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.subject-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.subject-pill {
	display: inline-block;
	padding: 3px 12px;
	background: white;
	border: 1px solid #e4e4e4;
	border-radius: 21px;
	color: #525051;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.subject-pill:hover {
	background-color: #7b7fc4;
	color: white !important;
	text-decoration: none;
}

/* Hero image: beside the text on wide screens, floated in 992–1550px,
   hidden below 992px */
.skoldb-img-side {
	width: 40%;
	flex-shrink: 0;
	object-fit: cover;
	object-position: center;
	border-radius: 0 10px 10px 0;
	display: block;
	align-self: stretch;
	height: auto;
	min-height: 100%;
	max-height: 100%;
	position: relative;
}

.skoldb-img-float { display: none; }

@media(min-width: 992px) and (max-width: 1550px) {
	.skoldb-hero { display: block; }
	.skoldb-hero-content { display: block; overflow: hidden; }
	.skoldb-img-side { display: none; }
	.skoldb-img-float {
		display: block;
		float: right;
		width: 35%;
		max-width: 380px;
		height: auto;
		border-radius: 0 10px 0 0;
		margin: -16px -20px 8px 16px;
		object-fit: contain;
	}
}

@media(max-width: 991px) {
	.skoldb-img-side { display: none; }
}


/* ===== 12. FAQ ===== */

/* Expander button (FAQ instructions) */
.expander .glyphicon-minus {
	position: relative;
	left: -1px;
}

.expander.btn-xs {
	background-color: #e6e6e6;
	border-color: #adadad;
	padding: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
}

.faq-search-form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	align-items: center;
}

.faq-search-input {
	flex: 1;
	height: 38px;
	padding: 0 14px;
	border: 1px solid #d0d0d0;
	border-radius: 21px;
	font-size: 15px;
	font-family: 'Open Sans', Sans-Serif;
	outline: none;
	transition: border-color 0.2s ease;
}

.faq-search-input:focus { border-color: #494c9f; }

.faq-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 4px 0;
}

.faq-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	background: white;
	border: 1px solid #e4e4e4;
	border-radius: 21px;
	color: #525051;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-cat-pill:hover,
.faq-cat-pill.active {
	background-color: #494c9f;
	color: white !important;
	text-decoration: none;
}

.faq-cat-count {
	display: inline-block;
	background: rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 0 6px;
	font-size: 11px;
}

.faq-cat-pill.active .faq-cat-count { background: rgba(255,255,255,0.25); }

.faq-total { font-size: 14px; color: #888; margin: 8px 0 0px 2px; }

.faq-show-more {
	display: inline-block;
	margin: 8px 8px 4px 8px;
	padding: 4px 16px;
	background-color: white;
	border: 1px solid #494c9f;
	border-radius: 21px;
	color: #494c9f;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-show-more:hover {
	background-color: #494c9f;
	color: white !important;
	text-decoration: none;
}

.faq-sidebar-links { display: flex; flex-direction: column; }

a.faq-sidebar-link, div.faq-sidebar-link {
	display: block;
	padding: 6px 8px 6px 24px;
	position: relative;
	color: #525051;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid #f0eeeb;
	line-height: 1.3;
}

a.faq-sidebar-link:hover {
	background-color: #f8f6ff;
	color: #494c9f;
	text-decoration: none;
}

.faq-sidebar-active { background-color: #f5f3ff; color: #494c9f; font-weight: 600; }

.faq-sidebar-arrow {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #c18058;
	font-size: 18px;
	line-height: 1;
}

.faq-q-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

@media(max-width: 767px) {
	.faq-q-list { grid-template-columns: 1fr; }
}


/* ===== 13. Search, video & webinars ===== */

/* Search results */
.search-result {
	padding: 10px 0;
	border-bottom: 1px solid #e4e4e4;
}

a.search-result-title {
	font-size: 16px;
	font-weight: 600;
	color: #494c9f;
	text-decoration: none;
}

a.search-result-title:hover { color: #c18058; text-decoration: underline; }
.search-result-url { font-size: 12px; color: #6a9a5a; margin: 2px 0; }
.search-result-desc { font-size: 13px; color: #525051; }

/* YouTube facade */
.yt-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	background: #ff0000;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.youtube-facade {
	position: relative;
	cursor: pointer;
	background: #000;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* Webinar teaser (dwrite2.php) — used on taggar.php, skolsida.php etc. */
.webinar-teaser {
	background-color: white;
	border: 1px solid #e4e4e4;
	border-left: 4px solid #494c9f;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 0 18px 0 18px;
	margin-bottom: 12px;
	overflow: hidden;
}

.webinar-teaser-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #494c9f;
	color: white;
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 18px;
	margin: 0 -18px 0 -18px;
}

.webinar-teaser-label .btn {
	margin: 0;
}

.webinar-body {
	padding: 14px 0 14px 0;
}

.webinar-teaser-title {
	font-family: 'BebasNeue', Sans-Serif;
	color: #2a3034;
	font-size: 20px;
	margin: 0 0 6px 0;
}

.webinar-teaser-label + .webinar-teaser-title {
	margin-top: 14px;
}

.webinar-teaser-title ~ .webinar-teaser-title {
	border-top: 1px solid #e4e4e4;
	padding-top: 12px;
	margin-top: 12px;
}

.webinar-teaser-school { font-size: 14px; margin: 0 0 4px 0; }
.webinar-teaser-time { font-size: 14px; color: #525051; margin: 0 0 6px 0; }
.webinar-teaser-desc { font-size: 13px; color: #525051; margin: 0 0 10px 0; }
.webinar-teaser-btn-wrap { margin: 0 0 14px 0; }

.webinar-teaser-btn {
	display: inline-block;
	background-color: #c18058;
	color: white !important;
	font-family: 'BebasNeue', Sans-Serif;
	font-size: 17px;
	letter-spacing: 1px;
	padding: 6px 20px;
	border-radius: 21px;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.webinar-teaser-btn:hover {
	background-color: #a36844;
	color: white !important;
}


/* ===== 14. Misc components ===== */

/* Insurance reminder */
.insurance-box {
	background-color: #f4a4a4;
	border: 1px solid #e49494;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 16px 20px;
	margin-bottom: 12px;
}

.insurance-box h3 { font-family: 'BebasNeue', Sans-Serif; font-size: 22px; color: #2a3034 !important; margin: 0; }
.insurance-box:hover h3 { color: #c18058; }

/* Background image pages (CSN calculator, insurance, handbook) */
.bgimage-panel {
	border-left: 4px solid #c18058;
	box-shadow: 4px 4px 24px rgba(0,0,0,0.18), -2px 4px 16px rgba(0,0,0,0.12);
	border-radius: 10px !important;
}

/* Scholarship form sections */
.scholarship-section {
	border: 1px solid #e4e4e4;
	border-left: 4px solid #494c9f;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 16px;
	background-color: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.scholarship-section h2 {
	font-family: 'BebasNeue', Sans-Serif;
	color: #494c9f;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 12px;
}


/* ===== 15. Footer ===== */

#footer {
	padding: 10px;
	width: 100%;
	height: 45px;
	background-color: #2a3034;
	margin-top: 0px;
	text-align: center;
	color: white;
	font-family: Open Sans, Sans-Serif;
	font-size: 18px;
}

#footer2 {
	padding: 10px;
	width: 100%;
	background-color: #2a3034;
	margin-top: 0px;
	color: white;
	font-family: Open Sans, Sans-Serif;
	font-size: 15px;
}

a.flink {
	color: white;
	padding-right: 5px;
	padding-left: 5px;
}

a.flink:hover {
	text-decoration: underline;
}

.sicon {
	height: 30px;
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}


/* ===== 16. Print ===== */

@media print {
	#footer2, #hkolumnen, .articlefooter, #schoolbtns, .noprint, .infobox {
		display: none !important;
	}
}