:root {
	interpolate-size: allow-keywords;

	--c1: #d478ac;
	--c2: #662a88;

	--white: #fff;
	--black: #000;
	--black-semi-transparent: rgba(0, 0, 0, 0.5);
	--orange: #ffc363;

	--grey-lighter: #fafafa;
	--grey-light: #eee;
	--grey-medium: #ccc;
	--grey-dark: #777;
	--grey-darker: #555;

	--h1h4-txt: var(--grey-dark);
	--hr-bkg: var(--grey-medium);
	--input-brd: 1px solid #ddd;
	--input-bkg: initial;

	--button-txt: var(--black);
	--button-brd: 1px solid var(--grey-dark);
	--button-bkg: linear-gradient(#e9e9e9 0%, #d7d7d7 100%);
	--button-hvr-brd: 1px solid #26a0da;
	--button-hvr-bkg: #a6f4ff;
	--button-txt-disabled: var(--grey-medium);
	--button-brd-disabled: 1px solid var(--grey-light);
	--button-bkg-disabled: var(--grey-lighter);

	--bold-txt: var(--black);
	--bold-weight: bold;

	--body-txt: var(--black);
	--body-bkg: var(--grey-light);
	--body-small-bkg: var(--white);

	--sheet-brd: 1px solid var(--grey-medium);
	--sheet-bkg: var(--white);
	--sheet-shd: 2px 2px 10px #bbb;

	--header-brd: 1px dotted var(--grey-medium);

	--link-txt: #77c;

	--accordion-sum-bkg: var(--grey-lighter);
	--accordion-brd: 1px solid var(--grey-light);
	--accordion-marker: var(--grey-darker);

	--footer-brd: 1px solid #ddd;
	--progress-bkg: var(--grey-light);
	--org-label: #77a;
	--logo-filter: opacity(0.8);

	--qreport-brd: 1px solid var(--grey-light);
	--qreport-answer-txt: #77c;
	--qreport-sublabel: var(--black);
	--qreport-code: var(--grey-dark);
}

/* start of "reset v2.0 | 20110126", taken from http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe,
/*h1, h2, h3, h4, h5, h6, */ p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
/*b, u, i, */ center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	color: var(--black);
	background-color: var(--white);
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of reset */

html {
	overflow-y: scroll;
}

body {
	font-family: tahoma, sans-serif;
	font-size: 12pt;
	color: var(--body-txt);
	background-color: var(--body-bkg);
	padding: 0.7em 0 0.7em 0;
	line-height: 1.2;
}

input, textarea, select {
	font: inherit;
	font-size: 100%;
	margin: 0 0.1em;
}

input[type=text], input[type=password], input.text, textarea, textarea.text, select.dropdown, input.mandatory, textarea.mandatory, select.mandatory, span.text input, span.text textarea {
	padding: 3px 0.5em;
	border: var(--input-brd);
	background-color: var(--input-bkg)
}

input[type=button], input[type=submit], button {
	color: var(--button-txt);
	padding: 0.2em 0.6em;
	border: var(--button-brd);
	background: var(--button-bkg);
	vertical-align: middle;
}

input[type=button]:hover, input[type=submit]:hover, button:hover {
	border: var(--button-hvr-brd);
	background: var(--button-hvr-bkg);
}

input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
	color: var(--button-txt-disabled);
	border: var(--button-brd-disabled);
	background: var(--button-bkg-disabled);
}

input[type="checkbox"] {
	vertical-align: baseline;
}

p {
	padding: 0.3em 0 0.5em 0;
}

b {
	color: var(--bold-txt);
	font-weight: var(--bold-weight);
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

hr {
	border: none;
	height: 1px;
	background-color: var(--hr-bkg);
	margin: 1.4em 0;
}

h1, h2, h3, h4 {
	font-family: arial, sans-serif;
	color: var(--h1h4-txt);
	margin: 0;
	padding: 0.3em 0em;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 125%;
}

h4 {
	font-size: 110%;
}

h5 {
	font-size: 105%;
}

a {
	color: var(--link-txt);
}

progress {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	background-size: auto;
	height: 0.7em;
}

progress {
	background: var(--progress-bkg);
}

progress::-webkit-progress-bar {
	background: var(--progress-bkg);
}

progress {
	color: var(--c1);
}

progress::-moz-progress-bar {
	background: var(--c1);
}

progress::-webkit-progress-value {
	background: var(--c1);
}

#main {
	position: relative;
	clear: both;
	max-width: 950px;
	margin: 0 auto;
	padding: 0.5em 1em 1em 1.5em;
	background-color: var(--sheet-bkg);
	border: var(--sheet-brd);
	box-shadow: var(--sheet-shd);
	-webkit-box-shadow: var(--sheet-shd);
}

div.qactions {
	z-index: 5;
	position: absolute;
	top: 0.5em;
	right: 0.6em;
	font-size: 150%;
	background-color: var(--sheet-bkg);
}

div.qactions.no_header {
	position: relative;
	text-align: right;
	top: initial;
	right: initial;
}

div.qactions span.internet-search a {
	padding-left: 0.3em;
	color: var(--body-txt);
	text-decoration: none;
}

span.darkmode-toggle {
	cursor: pointer;
}

div.header {
	position: relative;
	margin-bottom: 1em;
	border-bottom: var(--header-brd);
}

div.header h1 {
	color: var(--c1);
	font-size: 150%;
	font-weight: normal;
	margin-right: 1em;
}

div.sheet {
	min-height: 400px;
	margin-bottom: 4em;
}

ul {
	list-style-type: square;
	margin: 0.5em 1.5em;
}

ul li {
	margin-bottom: 0.3em;
}

div.flex {
	display: flex;
	flex-wrap: wrap;
}

div.lpanel {
	margin-right: 1.5em;
}

div.question, div.message {
	position: relative;
	margin: 1em 0em 1.5em 0em;
}

div.sync {
	text-align: center;
	background-color: #ffc;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.5em 1em;
	margin: 1em 0em;
	clear: both;
}

footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	bottom: 0;
	left:0;
	right:0;
	text-align: left;
}

footer div.info {
	margin-right: 1em;
}

footer div.logo {
	background-image: url(ixperium.png);
	background-repeat: no-repeat;
	background-size: 154px;
	width: 154px;
	height: 38px;
	filter: var(--logo-filter);
}

footer span.progress {
	font-size: 120%;
	font-style: normal;
}

footer span.progress span.done {
	color: var(--c1);
}

footer span.progress span.left {
	color: var(--progress-bkg);
}

footer progress {
	margin-bottom: 0.2em;
}

footer span.organisation {
	display: block;
	color: var(--org-label);
	font-size: 90%;
	margin-bottom: 0.5em;
}

div.alerts, div.error, div.log {
	font-family: verdana, sans-serif;
	font-size: 85%;
	padding: 0.5em 0.7em;
	text-align: left;
}

div.error {
	white-space: pre;
	/*margin-top: 1em;
	margin-bottom: 1em;*/
}

div.alerts, div.log {
	color: white;
	background-color: #447; /*#006;*/
	margin: 1em 0 1em 0;
}

div.alerts {
	margin: -0.8em 0 1em 0;
}

div.log {
	margin: 1em 0 1em 0;
}

div.alerts .entry {
}

div.alerts .prefix {
	color: yellow;
	white-space: pre;
	display: block;
}

div.alerts .stack {
	color: silver;
	white-space: pre;
	display: block;
}

div.error {
	color: black;
	background-color: yellow;
	border: 2px solid blue;
}

div.log {
	height: 7em;
	overflow-y: scroll;
}

div.debug {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 1em 0em;
	margin: 2em 0em;
}

.floatr {
	float: right;
}

.floatl {
	float: left;
}

.right {
	float: right;
	margin: 0 0 0 1em;
}

.left {
	float: left;
	margin: 0 1em 0 0;
}

input.button {
	min-width: 4em;
}

i {
	color: #999;
}

div.remark {
	font-family: georgia, times roman, serif;
	font-style: italic;
	font-size: 105%;
	border-left: 4px solid #f8f800;
	background-color: #ffc;
	padding: 0.5em 0.7em;
	margin: 1.7em 1em 2.5em 0em;
	box-shadow: 2px 2px 5px #ddd;
}

div.sync {
	color: #cd0042;
	font-weight: bold;
	background-color: #fff;
	margin: 0.5em 0;
	border: none;
}

div.note {
	font-size: 80%;
	color: #669;
	margin: 0.2em 0;
}

/* accordion */

div.accordion {
	margin: 1em 0;
}

div.accordion details {
	margin-block: 0.2em;
}

div.accordion details > div {
	display: flow-root;
	padding: 0.5em;
	border: var(--accordion-brd);
	border-top: none;
}

div.accordion details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.4s, content-visibility 0.4s;
	transition-behavior: allow-discrete;
}

div.accordion details[open]::details-content {
	block-size: auto;
}

div.accordion details .audiocontrol {
	float: left;
}

div.accordion summary {
	padding: 0.5em;
	background-color: var(--accordion-sum-bkg);
	border: var(--accordion-brd);
	cursor: pointer;
}

div.accordion summary::marker {
	color: var(--accordion-marker);
}

div.accordion summary span.score {
	float: right;
	color: var(--table-th-clr);
	background-color: transparent;
}

/* questionnaire report */

div.qreport {
	padding: 0 0.5em;
	border: var(--qreport-brd);
	max-height: 20em;
	overflow-y: scroll;
}

div.qreport div.ritem {
	page-break-inside: avoid;
	padding: 0.2em 0 0.3em 0;
}

div.qreport div.rlabel {
	font-size: 110%;
	color: var(--c2);
	padding: 0.2em 0.5em 0.2em 0;
}

div.qreport div.rsublabel {
	color: var(--qreport-sublabel);
}

div.qreport div.ranswer, div.qreport div.rsubanswer {
	color: var(--qreport-answer-txt);
	margin-bottom: 0.5em;
}

div.qreport div.rsubanswer {
	padding: 0.2em 0 0.5em 0;
}

div.qreport span.code {
	color: var(--qreport-code);
	margin-right: 0.5em;
}

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

body {
	background-color: var(--body-small-bkg);
	margin: 0em 0.5em;
}

#main {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

div.qactions {
	top: 0.2em;
	right: 0;
}

div.sheet {
	min-height: 150px;
}

div.header h1 {
	margin-right: 2.5em;
}

footer {
	align-items: flex-start;
	border-top: var(--footer-brd);
	padding: 0.3em 0;
}

footer div.info {
	margin-right: 1em;
}

}

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

div.qactions {
	font-size: 125%;
}

footer div.logo {
	background-size: 120px;
	width: 120px;
	height: 30px;
}

div.header h1 {
	font-size: 125%;
}

}

@media print {

@page {
	margin: 0;
	padding: 1em 0.5em;
}

body {
	background-color: var(--sheet-bkg);
}

.noprint, input, textarea, select, option, button {
	display: none;
}

.print {
	display: inline;
}

h1, h2, h3 {
	page-break-after: avoid;
}

table {
	page-break-inside: avoid;
}

.darkmode-toggle,
.internet-search {
	display: none;
}

#main {
	border: initial;
	box-shadow: initial;
}

div.accordion summary {
	page-break-after: avoid;
}

div.accordion details::details-content {
	page-break-inside: avoid;
	block-size: auto;
	content-visibility: visible;
}

div.accordion details div.audiocontrol {
	display: none;
}

div.qreport {
	z-index: 10;
	position: absolute;
	top: 0;
	background-color: var(--sheet-bkg);
	padding: initial;
	border: initial;
	max-height: initial;
	overflow-y: initial;
}

footer {
	display: none;
}

}

.darkmode {
	--c1: #ff98d2;
	--c2: #d6a8ef;

	--grey-blue-bkg: #445;

	--grey-blue-lighter: #889;
	--grey-blue-light: #778;
	--grey-blue-medium: #667;
	--grey-blue-dark: #556;
	--grey-blue-darker: #334;
	--grey-blue-darkest: #223;

	--h1h4-txt: var(--grey-medium);
	--hr-bkg: var(--grey-dark);
	--input-brd: 1px solid var(--grey-blue-medium);
	--input-bkg: var(--grey-blue-darker);

	--button-txt: var(--grey-lighter);
	--button-brd: 1px solid var(--grey-blue-lighter);
	--button-bkg: linear-gradient(var(--grey-blue-light) 0%, var(--grey-blue-medium) 100%);
	--button-hvr-brd: 1px solid var(--grey-medium);
	--button-hvr-bkg: var(--grey-blue-lighter);
	--button-txt-disabled: var(--grey-blue-lighter);
	--button-brd-disabled: 1px solid var(--grey-blue-medium);
	--button-bkg-disabled: var(--grey-blue-dark);

	--bold-txt: var(--orange);
	--bold-weight: normal;

	--body-txt: var(--grey-lighter);
	--body-bkg: var(--grey-blue-darker);
	--body-small-bkg: var(--grey-blue-bkg);

	--sheet-brd: none;
	--sheet-bkg: var(--grey-blue-bkg);
	--sheet-shd: 2px 2px 10px var(--black-semi-transparent);

	--header-brd: 1px dotted var(--grey-dark);

	--link-txt: #adf;

	--accordion-sum-bkg: var(--grey-blue-darker);
	--accordion-brd: 1px solid var(--grey-blue-dark);
	--accordion-marker: var(--grey-blue-lighter);

	--footer-brd: 1px solid var(--grey-dark);
	--progress-bkg: var(--grey-blue-darker);
	--org-label: var(--grey-medium);
	--logo-filter: opacity(0.5) brightness(2);

	--qreport-brd: 1px solid var(--grey-dark);
	--qreport-answer-txt: #adf;
	--qreport-sublabel: var(--grey-light);
	--qreport-code: var(--grey-medium);
}