/* google font */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');*/

/*
@font-face {
	font-family: fontname;
	font-weight: normal;
	src: url('../fonts/file-regular.woff') format('woff');
	font-display: auto;
	}

@font-face {
	font-family: fontname;
	font-weight: bold;
	src: url('../fonts/file-bold.woff') format('woff');
	font-display: auto;
	}
*/




/*

TEMPLATE

xs <=600
s <=900
m >900 <=1280
l >1280

*/



/* RESET */

* {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	}

img {
	display: block;
	max-width: 100%;
	height: auto;
	}
.img--cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

audio,
iframe,
video {
	display: block;
	}



/* TYPOGRAPHY */

/* font */
html,
body,
button,
select,
input,
textarea {
	font: 400 16px/26px poppins, sans-serif;
	color: #000;
	-webkit-font-smoothing: antialiased;
	}

/* headings */
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,h6 {font-weight: 600}

h1,.h1 {font-size: 2.5rem; line-height: 3rem}
h2,.h2 {font-size: 2rem; line-height: 2.5rem}
h3,.h3 {font-size: 1.5rem; line-height: 2rem}
h4,.h4 {font-size: 1rem; line-height: 1.5rem}

/* paragraphs */
h1+p,
h2+p,
h3+p,
h4+p,
p+p {margin-top: 1.5rem}

p+h1,
p+h2,
p+h3,
p+h4 {margin-top: 1.5rem}

/* lists */
ul,ol {
	margin: 2rem 0;
	padding-left: 3rem;
	}
ul:first-child {margin-top: 0}
ul:last-child {margin-bottom: 0}

/* sub-lists */
ul ul,
ol ol,
ul ol,
ol ul {
	margin: 0;
	}


/* text */
.fs--1 {font-size: 1rem; line-height: 1.5rem}
.fs--2 {font-size: 2rem; line-height: 2.5rem}
.fs--3 {font-size: 3rem; line-height: 3.5rem}

.text--xs {font-size: .75rem; line-height: 1rem}
.text--s {font-size: .875rem; line-height: 1.375rem}
.text--m {font-size: 1.5rem; line-height: 2rem}
.text--l {font-size: 2rem; line-height: 2.5rem}

.text--upper {text-transform: uppercase}
.text--lower {text-transform: lowercase}

.td--none {text-decoration: none}
.td--underline {text-decoration: underline}

/* weight, style */
b,
strong,
.bold {font-weight: 600}
.medium {font-weight: 500}
.normal {font-weight: 400}
.italic {font-style: italic}

/* text align */
.ta--c {text-align: center}
.ta--l {text-align: left}
.ta--r {text-align: right}
.ta--j {text-align: justify}

.nowrap {white-space: nowrap}

/* links */
a,
.link {
	color: #000;
	text-decoration: underline;
	font-weight: 600;
	cursor: pointer;
	}

h1 a,
h2 a,
h3 a,
h4 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	}



/* LAYOUT */

.wrapper {
	overflow: hidden;
	}

.inner {
	max-width: 1600px;
	margin: auto;
	padding: 0 2rem;
	}
.inner--s {max-width: 600px}
.inner--m {max-width: 900px}
.inner--l {max-width: 1280px}
.inner--f {max-width: none} /* full */

.inner--vxs {
	padding-top: 1rem;
	padding-bottom: 1rem;
	}
.inner--vs {
	padding-top: 2rem;
	padding-bottom: 2rem;
	}
.inner--vm {
	padding-top: 4rem;
	padding-bottom: 4rem;
	}
.inner--vl {
	padding-top: 6rem;
	padding-bottom: 6rem;
	}
.inner--vxl {
	padding-top: 12rem;
	padding-bottom: 12rem;
	}
.inner--npt {
	padding-top: 0 !important;
	}

.block {display: block}
.inline-block {display: inline-block}
.inline-flex {display: inline-flex}
.inline {display: inline}
.none {display: none}

.static {position: static}
.relative {position: relative}
.absolute {position: absolute}
.fixed {position: fixed}
.sticky {position: sticky}

.center--x,
.center--y,
.center--xy {
	position: absolute;
	}
.center--x {left: 50%; transform: translateX(-50%)}
.center--y {top: 50%; transform: translateY(-50%)}
.center--xy {left: 50%; top: 50%; transform: translate(-50%, -50%)}

.scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	}

.overflow--hidden {overflow: hidden}
.overflow--auto {overflow: auto}


/* FLEX */

.flx {display: flex}
.aic {align-items: center}
.ais {align-items: flex-start}
.aie {align-items: flex-end}
.jcc {justify-content: center}
.jcb {justify-content: space-between}
.jca {justify-content: space-around}
.jcs {justify-content: flex-start}
.jce {justify-content: flex-end}

.fcc {
	display: flex;
	align-items: center;
	justify-content: center;
	}
.fcb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

.fdr {flex-direction: row}
.fdc {flex-direction: column}
.fdrr {flex-direction: row-reverse}
.fdcr {flex-direction: column-reverse}

.flx--wrap {flex-wrap: wrap}

/* flex children */
.fg--0 {flex-grow: 0}
.fg--1 {flex-grow: 1}
.f2--0 {flex-shrink: 0}
.fs--1 {flex-shrink: 1}



/* GRID */

.grd {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	}
.gg--1 {grid-gap: 1rem}
.gg--2 {grid-gap: 2rem}
.gg--3 {grid-gap: 3rem}

.grd--2 {grid-template-columns: repeat(2, 1fr)}
.grd--3 {grid-template-columns: repeat(3, 1fr)}
.grd--4 {grid-template-columns: repeat(4, 1fr)}
.grd--5 {grid-template-columns: repeat(5, 1fr)}
.grd--6 {grid-template-columns: repeat(6, 1fr)}

.gc--1 {grid-column: span 1}
.gc--2 {grid-column: span 2}
.gc--3 {grid-column: span 3}
.gc--4 {grid-column: span 4}
.gc--5 {grid-column: span 5}
.gc--6 {grid-column: span 6}
.gc--7 {grid-column: span 7}
.gc--8 {grid-column: span 8}
.gc--9 {grid-column: span 9}
.gc--10 {grid-column: span 10}
.gc--11 {grid-column: span 11}
.gc--12 {grid-column: span 12}




/* MARGINS */

.m--0 {margin: 0} /* reset */
.mt--0 {margin-top: 0rem}
.mt--1 {margin-top: 1rem}
.mt--2 {margin-top: 2rem}
.mt--3 {margin-top: 3rem}
.mt--4 {margin-top: 4rem}

.mr--1 {margin-right: 1rem}
.mr--2 {margin-right: 2rem}

.mb--0 {margin-bottom: 0rem}
.mb--1 {margin-bottom: 1rem}
.mb--2 {margin-bottom: 2rem}
.mb--3 {margin-bottom: 3rem}
.mb--4 {margin-bottom: 4rem}

.ml--1 {margin-left: 1rem}
.ml--2 {margin-left: 2rem}

.p--0 {padding: 0} /* reset */
.p--1 {padding: 1rem}
.p--2 {padding: 2rem}
.p--3 {padding: 3rem}



/* OTHER */

/* video/iframe */
.iframe,
.video {
	position: relative;
	padding-bottom: 56.25%;
	}
.iframe>iframe,
.video>video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border: none;
	}

/* cursor */
.cursor--default {cursor: default}
.cursor--move {cursor: move}
.cursor--not-allowed {cursor: not-allowed}
.cursor--pointer {cursor: pointer}

/* background cover */
.cover {
	background: center center / cover no-repeat;
	}



/* INPUTS */
button,
input,
textarea {
	-webkit-appearance: none;
	appearance: none;
	}
input[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: checkbox;
	}
input[type="radio"] {
	-webkit-appearance: radio;
	appearance: radio;
	}



/* MEDIA */

/* large */
/*@media only screen and (min-width: 1281px) {

.l--hide {display: none !important}
.l--show {display: block !important}

}*/

/* medium */
/*@media only screen and (min-width: 901px) and (max-width: 1280px) {

.m--hide {display: none !important}
.m--show {display: block !important}

}*/

/* small */
@media only screen and (max-width: 900px) {

/*.s--hide {display: none !important}
.s--show {display: block !important}*/

html,
body,
button,
input,
textarea {
	font-size: 14px;
	line-height: 22px;
	}

.inner {padding: 0 1.5rem}
.inner--vs {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	}
.inner--vm {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	}
.inner--vl {
	padding-top: 4rem;
	padding-bottom: 4rem;
	}

}

/* x-small */
/*@media only screen and (max-width: 600px) {

.xs--hide {display: none !important}
.xs--show {display: block !important}

}*/



/* COLORS */

:root {
	--black: #000000;
	--blue: #102542;
	--gray: #e1e6ec;
	--gray-bg: #FCFCFC;
	--green: #76C666;
	--red: #EE7171;
	--darkred: #BF4848;
	}


.text--black {color: var(--black)}
.text--red {color: var(--red)}
.text--white {color: #fff}

.bg--black {background-color: var(--black)}
.bg--blue {background-color: var(--blue)}
.bg--gray {background-color: var(--gray-bg)}
.bg--white {background-color: #fff}

.grid {display: grid; grid-gap: 1.5rem}
.grid--2 {grid-template-columns: repeat(2, 1fr)}
.grid--3 {grid-template-columns: repeat(3, 1fr)}
.grid--4 {grid-template-columns: repeat(4, 1fr)}

.video {overflow: hidden; border-radius: .5rem}



/* buttons */
.btn {
	appearance: none;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	
	border: 1px solid transparent;
	border-radius: .25rem;
	background: none;
	padding: .75rem 2rem;
	
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	}

.btn--wide {width: 100%}
.btn--thin {
	padding: .25rem 1rem;
	}

.btn--red {
	background-color: var(--red);
	color: #fff;
	}

.btn--blue {
	background-color: var(--blue);
	color: #fff;
	}

.btn--gray {
	background-color: var(--gray);
	}

.btn--borderwhite {
	border-color: #fff;
	color: #fff;
	border-radius: 2rem;
	padding: .5rem 1.25rem;
	}

.btn:disabled {
	opacity: .5;
	}



.btns {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	}
.btns--l {justify-content: flex-start}
.btns--r {justify-content: flex-end}
.btns--c {justify-content: center}
.btns--j {justify-content: space-between}




/* cols */
.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3rem;
	}

.list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	list-style: none;
	}
.list li {
	position: relative;
	}
.list li::before {
	content: '';
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	left: -1.5rem;
	top: 0;
	transform: translate(-100%);
	background: url(../img/icons/check.svg) left top / 100% no-repeat;
	}
/*.list li:nth-child(2n) {color: #436ABB}
.list li:nth-child(2n)::before {background-image: url(../img/icons/check--blue.svg)}*/



/* header */
html {
	padding-top: 76px;
	scroll-padding: 76px;
	}
.header {
	position: fixed;
	z-index: 1000;
	width: 100%;
	left: 0;
	top: 0;
	background: var(--blue);
	}
.header,
.header a {
	color: #fff;
	}
.header a {
	text-decoration: none;
	}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	}

.header__nav,
.header__usr {
	display: flex;
	align-items: center;
	gap: 3rem;
	}

.header__username {
	font-weight: 400;
	}

.header__mob,
.toggle {
	display: none;
	}






/* hero */

.hero {
	background: linear-gradient(180deg, #445476 0%, #102542 100%);
	color: #fff;
	/*border-radius: 0 0 1rem 1rem;*/
	}

/*.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3rem;
	}*/

.hero h1 {
	font-size: 4.5rem;
	line-height: 5rem;
	}




/* people */
.person h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	}
.person p {
	margin-top: 1rem;
	}




/* form */
.input {
	display: block;
	width: 100%;
	border: 1px solid;
	background: none;
	padding: .75rem;
	border-radius: .25rem;
	}
.input:disabled,
.checkbox:has(:disabled),
.label:has(+:disabled) {
	opacity: .25;
	}
.input:read-only {
	cursor: not-allowed;
	}


.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	}
.checkbox input {
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	background: var(--gray) center center / 16px no-repeat;
	}
.checkbox input:checked {
	background-color: var(--blue);
	background-image: url(../img/icons/check--white.svg);
	animation: checkbox .15s 2;
	}
@keyframes checkbox {
	0% {transform: scale(1)}
	50% {transform: scale(1.1)}
	100% {transform: scale(1)}
	}


.form__row+.form__row,
.form__group+.form__group {
	margin-top: 1.5rem;
	}

.form__row--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1.5rem;
	}

.form__row:has(:disabled) {
	display: none;
	}

.label {
	font-weight: 500;
	margin-bottom: .25rem;
	}
.label:has(+:required)::after {
	content: '*';
	color: var(--red);
	}

.form {
	position: relative;
	}
.form.loading::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #ffffffaa;
	cursor: wait;
	}


.form__resp:not(:empty) {
	margin-top: 2rem;
	padding: 1rem;
	border-radius: .5rem;
	color: #fff;
	}
.form__resp.success {background-color: var(--green)}
.form__resp.error {background-color: var(--red)}


.hidden {display: none}
.invisible {visibility: hidden}

.info {
	background: var(--gray);
	padding: 1.5rem;
	border-radius: .25rem;
	}


hr {
	height: 1px;
	background: var(--gray);
	border: none;
	margin: 2rem 0;
	}



.links {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
	}
.links a {
	text-decoration: none;
	background: var(--gray);
	padding: .25rem 1rem;
	border-radius: .25rem;
	}
.links a.active {
	background: var(--red);
	color: #fff;
	}




/* quiz */
.quiz-heading {
	color: var(--red);
	margin-top: 1rem;
	margin-bottom: 2rem;
	}

.quiz-btm .quiz {
	max-width: 800px;
	}

.quiz-top {
	display: grid;
	grid-template-columns: .7fr .3fr;
	grid-gap: 2rem;
	}
.quiz-btm {
	margin-top: 6rem;
	}

.video-meta {
	display: flex;
	gap: 3rem;
	margin-top: 2rem;
	}
#duration {
	background: url(../img/icons/duration.svg) left center / 20px no-repeat;
	padding-left: 36px;
	}
.approval {
	font-size: .875rem;
	line-height: 1.25rem;
	margin-top: 1rem;
	white-space: nowrap;
	}

.chapters {
	list-style-type: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}
.chapters li {
	position: relative;
	padding-left: 1.5em;
	}
.chapters a {
	text-decoration: none;
	}
.chapters a:hover {
	text-decoration: underline;
	}
.chapters li::before {
	position: absolute;
	content: '';
	left: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gray);
	transition: .3s;
	}
.chapters li.complete::before {
	background-color: var(--green);
	}
.chapters a {
	font-weight: 400;
	transition: .3s;
	}
.chapters li.current a {
	font-weight: bold;
	}
.chapters li.complete a,
.chapters li.complete a {
	color: inherit;
	cursor: pointer;
	}
.chapters li.complete+li a {
	color: inherit !important;
	cursor: pointer;
	}




.quiz__title {
	color: var(--red);
	font-weight: bold;
	}

.quiz__progress {
	position: relative;
	height: 6px;
	border-radius: 4px;
	background: var(--gray);
	margin: 1rem 0;
	}
.quiz__progress__bar {
	position: absolute;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--red);
	transition: width .6s;
	}

.quiz__items {
	display: flex;
	gap: 1rem;
	overflow: hidden;
	scroll-behavior: smooth;
	}

.quiz__item {
	flex-shrink: 0;
	width: 100%;
	}

.quiz__item__options {
	counter-reset: items;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
	}
.quiz__item__option {
	counter-increment: items;
	border: 1px solid #C1C1C1;
	border-radius: .25rem;
	padding: 1rem 1.5rem;
	cursor: pointer;
	text-align: center;
	}
.quiz__item__option::before {
	content: counter(items, upper-alpha) ". ";
	}

.quiz__item__option.selected {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--blue);
	}

.quiz__item__option.true {
	border-color: var(--green);
	}
.quiz__item__option.true.selected {
	background-color: var(--green);
	}
.quiz__item__option.true.selected::after {
	content: ' - RÄTT';
	}
.quiz__item__option.false {
	border-color: var(--darkred);
	}
.quiz__item__option.false.selected {
	background-color: var(--darkred);
	}
.quiz__item__option.false.selected::after {
	content: ' - FEL';
	}




.quiz__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	margin-top: 1rem;
	}

.quiz:not(.finished) #comp:disabled {
	display: none;
	}
#comp:not(:disabled)+#next,
.quiz.finished #next {
	display: none;
	}

.quiz-info {
	background: url(../img/icons/info.svg) left top 4px / 22px no-repeat;
	padding-left: 36px;
	margin-top: 1rem;
	}

.btn.disabled {
	opacity: .5;
	transition: .3s;
	cursor: not-allowed;
	}


.more {
	position: fixed;
	bottom: -4rem;
	right: 2rem;
	background: url(../img/icons/chevron-down.svg) var(--gray)  right 1rem center / 20px no-repeat;
	padding: .5rem 1rem;
	padding-right: calc(2rem + 20px);
	border-radius: .5rem .5rem 0 0;
	font-weight: bold;
	transition: bottom .3s;
	}
.more.open {
	bottom: 0;
	}



/* result */
.result {
	padding: 2rem;
	border-radius: .5rem;
	margin-top: 2rem;
	color: #fff;
	}
.result a {
	color: inherit;
	}
.result--success {
	background: var(--green);
	}
.result--fail {
	background: var(--red);
	}


.answers {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	
	list-style: upper-alpha;
	}

.answers .true {color: var(--green)}
.answers .true, .selected {font-weight: bold}
.answers .selected:not(.true) {color: var(--darkred)}

.answers li {
	position: relative;
	}
.answers .selected::before {
	content: '';
	position: absolute;
	left: -52px;
	top: 0;
	width: 24px;
	height: 24px;
	background: center center / contain no-repeat;
	}
.answers .selected.true::before {background-image: url(../img/icons/check--green.svg)}
.answers .selected:not(.true)::before {background-image: url(../img/icons/x--red.svg)}




/* footer */
.footer {
	background: #021329; /* correct color? */
	color: #fff;
	}

.textlogo {
	font-size: 1.5rem;
	line-height: 1em;
	font-weight: 600;
	}




@media only screen and (max-width: 600px) {

html {
	padding-top: 63px;
	scroll-padding: 63px;
	}

.header__nav,
.header__usr,
.header__mob {
	display: none;
	}

.header__mob a {
	color: var(--black);
	font-size: 1.5rem;
	line-height: 1em;
	padding: 0;
	border: none;
	}

.header__mob.open {
	position: fixed;
	width: 100%;
	height: calc(100% - 63px);
	left: 0;
	top: 63px;
	background: #fff;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	
	padding: 3rem 1rem;
	}
.header__usr {
	display: none;
	}

.header .inner {
	padding-top: .5rem;
	padding-bottom: .5rem;
	}


.toggle {
	display: block;
	position: relative;
	width: 30px;
	height: 14px;
	}
.toggle span {
	position: absolute;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: .15s;
	}
.toggle span:first-child {
	width: 100%;
	top: 0;
	}
.toggle span:last-child {
	width: 50%;
	top: 12px;
	}
.toggle.open span:first-child {
	width: 100%;
	top: 7px;
	transform: rotate(-45deg);
	}
.toggle.open span:last-child {
	width: 100%;
	top: 7px;
	transform: rotate(45deg);
	}




.hero h1 {
	font-size: 2rem;
	line-height: 1.5em;
	}
.hero p {
	font-size: 1.125rem;
	line-height: 1.5em;
	}

#frontpage-box {
	padding: 2rem !important;
	}


.cols,
.grid,
.form__row--2,
.quiz-top {
	grid-template-columns: 1fr;
	}
.quiz-btm .fcb {
	flex-direction: column;
	gap: 1.5rem;
	align-items: stretch;
	}
.quiz-btm .btn {
	margin: 0;
	}

.links {
	flex-wrap: wrap;
	}

}