/* Hint: if your browser does not get at least 470 points in http://html5test.com/ it will have troubles with this site */
html, nav.personmenu
{
	--fontfamily: "Open Sans";

	/* we never render any text directly on the background so there's no color for page text color */
	--pagebackground: #e6e9ef; /* full page background - often covered by --pagebackgroundimage */
	--pagebackgroundimage: url("img/bg-abstract.svg");

	/* theme colors */
	--themetextcolor: #333; /* all body text rendered on --themebackground */
	--themeforeground: #002b54; /* colored hairlines and borders */
	--themesubduedforeground: #999;
	--themebackground: #fff;
	--themefooterbackground: #eee; /* background color for footer elements. Should be used only for content elements. */
	--backdropblur: blur(0.65rem);

	--themefilter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%20width%3D%228%22%20height%3D%228%22%3E%0A%3Cdefs%3E%0A%09%3Cfilter%20id%3D%22filter%22%20color-interpolation-filters%3D%22sRGB%22%3E%0A%09%09%3CfeComponentTransfer%3E%0A%09%09%09%3CfeFuncR%20type%3D%22table%22%20tableValues%3D%220.02%201%22%2F%3E%0A%09%09%09%3CfeFuncG%20type%3D%22table%22%20tableValues%3D%220.11%201%22%2F%3E%0A%09%09%09%3CfeFuncB%20type%3D%22table%22%20tableValues%3D%220.19%201%22%2F%3E%0A%09%09%3C%2FfeComponentTransfer%3E%0A%09%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E#filter");

	--navglobalbackgroundwithbackdrop: rgba(255,255,255, 0.75);
	--navglobalbackgroundfallback: rgba(255,255,255, 0.95);
	--navglobalforeground: var(--themeforeground);
	--navglobalbackground: var(--navglobalbackgroundfallback);

	--menuwidth: min(23rem, 85vw);
	--thememenuforeground: var(--themeforeground);
	--thememenubackground: #f5f7fa; /* this is used as a background color of menu and content actions */

	--reversethemeforeground: #fff;
	--reversethemebackground: #002b54; /* should usually be identical to --themeforeground */

	--theme-highlight-color-light: #0092D1; /* light highlight color */
	--theme-highlight-color-lighter: #A9D1FF; /* extra light highlight color */

	/* message colors */
	--themeinfo: #0057a8;
	--themesuccess: #30a136;
	--themewarning: #f56a00; /* Note that this should be used for borders or other highlight only, not for the text! */
	--themeerror: #cf3017;

	/* buttons and other elements (link, span etc) which should look like buttons*/
	--buttonpadding: 0.5rem 1.5rem; /* Padding size of button elements. */
	--buttonpaddingnnarrow: 0.5rem 1rem; /* padding size of buttons element when viewport is narrow */
	--buttonradius: 0.75rem; /* border radius of button element */
	--buttonboxshadow: 0rem 0.25rem 1rem rgba(0, 0, 0, 0.25); /* shadow setting of button element */
	--buttonborderwidth: 2px; /* border width of button element */
	--buttonbackgroundhover: #003a70; /* background color of button element when element is hovered */
	--buttonbackgroundfocus: #004889; /* background color of button element when element is focused */
	--buttonbackgroundactive: #0055a3; /* background color of button element when element is activated */

	/* link button (button style which are meant to differ from regular primary and secondary button styles. These colors should be same all over the system and not follow color theme selected by customer.)*/
	--linkbuttonbackgroundcolor: #21891f; /* background color of link element */
	--linkbuttonbackgroundcolorhover: #1c741a;/* background color of link element when element is hovered */

	/* banner settings */
	--bannerimage: url("img/bg-abstract.svg");
	--bannerbackground: #0057a8;
	--bannerbackgroundposition: 0% 40%; /* the most important pixel in the background image (try to keep this part visible on all screens) */
	--bannerbackgroundsize: cover;
	--bannerlinkforeground: #fff;
	--bannerlinkbackground: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
	--bannerheight: minmax(max(12rem,20vh), auto);

	/* statusbar */
	--statusbarheight: 5rem;

	/* icon */
	--icon-size: 2.75rem; /* default icon size (width and height) */
	--discussion-icon-size: 1.5rem; /* calc(2rem - var(--linewidth) * 2); */
	--personmenu-icon-size: 2rem; /* icon size to use in personmenu */

	/* private message colors */
	--privatemessagebackground: #f5f7fa;
	--privatemessagecolor: #002b54;
	--privatemessagebackgroundmyself: #002b54;
	--privatemessagecolormyself: #fff;

	/* form settings */
	--forminputborderlinewidth: 1px; /* form input element border line width */
	--forminputborderradius: var(--buttonradius); /* border radius of form input element */
	--forminputbordercolor: #999; /* form input element border color */

	--gap: 1rem; /* default gap between things */
	--gapbeforeheader: 0rem;
	--hgap: 1.5rem; /* horizontal gap to be increased if lots of horizontal space is available, should be at least equal to --gap */
	--radius: 5px;
	--bigradius: 8px;
	--bannerradius: 0rem;
	--hairlinewidth: 1px; /* very narrow lines, NOTE: due bugs in Blink, we cannot use rem unit here */
	--hairlinecolor: rgba(0,0,0, 0.1); /* to make narrow lines to look even narrower, we use special color those those */
	--hairlinecolordark: var(--themeforeground); /* optional, darker color, for narrow lines. In most times --hairlinecolor is one to use */
	--linewidth: 2px; /* module borders etc, NOTE: due bugs in Blink, we cannot use rem unit here */
	--buttonheight: 2.2rem; /* default button height, also used for width for square buttons */

	--opacity-nonessential: 0.7; /* opacity for non-essential text and controls, e.g. reminder texts, info about historical/deleted content */

	--linkcolor: #0057a8;
	--linkcoloremphasized: #002b54;
	--reverselinkforeground: #fff;
	--reverselinkbackground: #002b54;
	--navopenbackground: rgba(0, 87, 168, 0.05);
	--stripewidth: 0.2rem;
	--stripebackground: linear-gradient(to bottom, transparent, transparent 10rem, var(--reversethemebackground));
	--hoverboxshadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0, 0.25);
	--boxshadow: 0rem 0rem 0.5rem rgba(0,0,0, 0.25);
	--prefocusboxshadow: 0 0 0 0.20rem rgba(0,0,0, 0.10), 0 0 0 0.35rem rgba(255,255,255, 0.10); /* nearly transparent link color with offset white outline */
	--focusboxshadow: 0 0 0 0.20rem rgba(0,87,168, 0.65), 0 0 0 0.35rem rgba(255,255,255, 0.65); /* partially transparent link color with offset white outline */

	/* personmenu. These settings do not follow theme style. Personmenu is personal space and should always follow default blue theme. */
	--personmenu-bg-color: #f5f7fa; /* background color of whole personmenu */
	--personmenu-link-color: var(--linkcolor);
	--personmenu-highlight-color: var(--linkcoloremphasized);
	--personmenu-primary-text-color: var(--themetextcolor);
	--personmenu-effect-color: var(--linkcolor);
	--personmenu-gap: calc(0.5 * var(--gap));

	--draftbackground: #fff9eb; /* background color of draft services. At the moment this is used only for Evaluations. Kind of 'lets see if this is a good idea' solution */
	--pagethumbnail-background-color: #f5f7fa;
	--secondarycontent-background-color: #f5f7fa; /* background color of secondary content (used e.g. to wrap forms inside another content) */

	--rootadminhighlightcolor: #f00; /* highlight color to use if root admin access level is activated. */

	--dropdown-toggle-width: 2rem;
	--dropdown-toggle-width-neg: calc(-1 * var(--dropdown-toggle-width)); /* may not work correctly in older Safari */

	/* Modal styles for tour and every other modal. Note! These variable names are used on other files too, e.g. shepherd.css and pn-dialog.css */
	--modalwhite: #fff;
	--modaltitlecolor: var(--themeforeground);
	--modalcontentborder: solid var(--hairlinewidth) var(--themeinfo);
	--modalcontainerborderradius: 4px;
	--modalbuttonradius: var(--radius);
	--modalprimarybuttonbackground-image: linear-gradient(to bottom, #002d56, #002b54 56%, #001325);
	--modalprimarybuttonbackground-image-reverse: linear-gradient(to bottom, #001325, #002b54 56%, #002d56);
	--modalprimarybuttontextcolor: var(--modalwhite);
	--modalsecondarybuttonbackground-color: var(--modalwhite);
	--modalsecondarybuttonborder: solid var(--linewidth) #002b54;
	--modalsecondarybuttontextcolor: #002b54;
	--modalsecondarybuttonhoverbackground: #003363;

	--modalbackdrop-background-color: #000; /* fill color for the modal dialog backdrop that prevents seeing the rest of the page */
	--modalbackdrop-opacity: 0.45; /* opacity of the modal dialog backdrop, combined with --modalbackdrop-background-color */

	/* Form disabled styles */
	--disabled-background-color: #f1f1f1;

	/*
		Z-INDEX VALUES USED IN THIS STYLE:
		1: any time content needs to be raised above the default
		2-9: try to avoid these but use if needed to order the content, if used add a comment to explain why
		10: popup-menus within the content that should stay under nav.global and its menus but above all normal content
		11-18: try to avoid these, if used add a comment to explain why
		19: nav.global background (white background bar while scrolled to top, div.bottom)
		20: nav.global (and all menus that want to stay on the same level - note that menus attached to scrolling content should not go above the nav.global!)
		21-28: try to avoid these, if used add a comment to explain why
		29: full viewport modal backdrops
		30: full viewport modals (float above the nav.global, too)
	*/
}

html.anonymous
{
	--statusbarheight: 0rem;
}

/* if UA supports backdrop blurring we can use more transparency */
@supports (backdrop-filter: var(--backdropblur))
{
	html
	{
		--navglobalbackground: var(--navglobalbackgroundwithbackdrop);
	}
}

/* CSS hack for iOS Safari 13 because it's too buggy to understand the standard declaration above but is still able to render backdrop blur */
@media not all and (min-resolution:.001dpcm) { @media {
	html
	{
		--navglobalbackground: var(--navglobalbackgroundwithbackdrop);
	}
}}

/* Microsoft Edge lesser than version 69 implement custom CSS properties incorreclty and fail silently if nested functions are used, workaround */
html.workaround-missing-nested-custom-properties
{
	--menuwidth: 23rem; /* assume that nobody tries to run broken Edge on mobile screens */
	--bannerheight: auto; /* we have to use hardcoded value for all pages for Edge */
	--personmenu-gap: 0.5rem;
}

html.frontpage
{
	--bannerlinkbackground: rgba(0, 21, 40, 0.8)
}


::selection
{
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

/* Font config for browsers without support for CSS custom properties */
html, input, button, textarea, .xhtmleditor
{
	font-family:
		"Open Sans",
		"Arimo",
		"Proxima Nova",
		"Avenir",
		"Segoe UI",
		"Calibri",
		"Noto Sans",
		"Lato",
		"Droid Sans",
		"Frutiger",
		"Liberation Sans",
		"Noto Color Emoji",
		"Twitter Color Emoji",
		"DejaVu Sans",
		"Roboto",
		"FreeSans",
		"Trebuchet MS",
		sans-serif;
	font-display: swap; /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display */
}

/* Use --fontfamily by default for everything */
html, input, button, textarea, .xhtmleditor
{
	font-family:
		var(--fontfamily),
		"Open Sans",
		"Arimo",
		"Proxima Nova",
		"Avenir",
		"Segoe UI",
		"Calibri",
		"Noto Sans",
		"Lato",
		"Droid Sans",
		"Frutiger",
		"Liberation Sans",
		"Noto Color Emoji",
		"Twitter Color Emoji",
		"DejaVu Sans",
		"Roboto",
		"FreeSans",
		"Trebuchet MS",
		sans-serif;
}

/* reset font back to default for selected UI components */
nav.global,
nav.global .searchnav input,
article.modify,
article.privacy,
article.dialog,
.submitorcancel,
nav.actions,
ul.actions,
summary,
nav.phantom,
nav.personmenu,
label,
button,
.button,
legend,
input.shortname,
input[type=date],
input[type=time],
input[type=file],
input[type=url],
input[type=radio],
input[type=checkbox],
footer.page
{
	font-family:
		"Open Sans",
		"Arimo",
		"Proxima Nova",
		"Avenir",
		"Segoe UI",
		"Calibri",
		"Noto Sans",
		"Lato",
		"Droid Sans",
		"Frutiger",
		"Liberation Sans",
		"DejaVu Sans",
		"Roboto",
		"FreeSans",
		"Trebuchet MS",
		sans-serif;
}

div.form summary,
div.form label,
div.form button,
div.form .button,
div.form input.shortname,
div.form legend
{
	font-family:
		var(--fontfamily),
		"Open Sans",
		"Arimo",
		"Proxima Nova",
		"Avenir",
		"Segoe UI",
		"Calibri",
		"Noto Sans",
		"Lato",
		"Droid Sans",
		"Frutiger",
		"Liberation Sans",
		"Noto Color Emoji",
		"Twitter Color Emoji",
		"DejaVu Sans",
		"Roboto",
		"FreeSans",
		"Trebuchet MS",
		sans-serif;
}

input[name=date]:disabled, input[name=time]:disabled,
input[name=date]:disabled:hover, input[name=time]:disabled:hover
{
	background: var(--disabled-background-color);
	cursor: not-allowed;
}
/* Exception: do not set font for <label> for font previews */
.fontsample > label
{
	font-family: inherit;
}


:link,
:visited
{
	outline: none;
	border-radius: var(--buttonradius);
}

:focus
{
	outline: none;
	border-radius: var(--buttonradius);
	box-shadow: var(--focusboxshadow);
}

:focus:not(:focus-visible)
{
	box-shadow: none;
}

a:focus
{
	/* try to make sure the focus outline is fully visible when items are close to each other - without this next item may partially render over the outline */
	z-index: 1;
	position: relative;
}
a.event-url:focus
{
	position: static;
}

.searching nav.global form.searchdocuments,
nav.breadcrumbs a.loading,
nav.main a.loading,
main a.loading
{
	position: relative;
}

.searching nav.global form.searchdocuments:after,
nav.breadcrumbs a.loading:after,
nav.main a.loading:after,
main a.loading:after
{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: var(--linewidth);
	width: 0%;
	background: var(--themeforeground);
	box-sizing: border-box;
	/* see also: https://css-tricks.com/a-css-only-animated-wrapping-underline/ and https://codepen.io/NMeuleman/pen/JjGeGar and https://stackoverflow.com/questions/54616139/how-to-animate-underline-from-left-to-right */
	animation: animatetowidth100andvanish 2s;
	animation-timing-function: ease-out;
}

.searching nav.global form.searchdocuments:after
{
	/* tweak "progress bar" position for global search */
	bottom: calc(-0.5 * var(--gap));
}

@keyframes animatetowidth100andvanish
{
	from
	{
		opacity: 0%;
		width: 0%;
	}
	10%
	{
		opacity: 0%;
	}
	20%
	{
		opacity: 100%;
	}
	90%
	{
		width: 100%;
		opacity: 1.0;
	}
	to
	{
		opacity: 0.0;
		width: 100%;
	}
}

h1, h2, h3
{
	font-weight: 400;
	letter-spacing: 0.015em;
}

html
{
	background: var(--pagebackground);
	background-attachment: fixed;
	background-size: cover;
	color: #f00; /* no text should be rendered with this color! */
	height: 100%;
	line-height: 1.5;
	hanging-punctuation: first allow-end last;
	font-size: 1rem;
}

ul, ol
{
	padding: 0rem 0rem 0rem 2rem;
	margin: 1rem 0rem;
}

li
{
	padding: 0rem;
	margin: 0rem;
}

ol + br,
ul + br
{
	display: none;
}

br + ol,
br + ul
{
	margin-top: 0rem; /* do not use top margin if list is followed by line break */
}

ul ol,
ol ul,
ul ul,
ol ol
{
	margin: 0;
}

@media all and (min-width:90rem)
{
	html
	{
		background-image: var(--pagebackgroundimage), radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 75rem, rgba(0,0,0,0.05) 80rem, rgba(0,0,0,0.5) 105rem, rgba(0,0,0,0.55) 110rem);
		--gapbeforeheader: min(calc((100vw - 90rem) * 0.25), 1rem);
		--bannerradius: var(--radius);
	}

	html body > nav.global
	{
		box-shadow: none;
	}
}


textarea.monospace
{
	font-family: "Source Code Pro", "DejaVu Sans Mono", "Droid Sans Mono", "Menlo", "FreeMono", "Ubuntu Mono", "Consolas", "Lucida Console", "Andale Mono", monospace;
}

html.atom body,
html.atom header.page
{
	display: block;
	grid: none;
}

html.atom header.page
{
	text-align: center;
}

html.atom main
{
	background: var(--themebackground);
	color: var(--themetextcolor);

	max-width: 60rem;
	margin: auto;
	border-radius: var(--radius);
	box-shadow: var(--boxshadow);
}

html.atom article + article
{
	margin-top: calc( 2 * var(--gap) );
}

body
{
	color: #000;
	background: #fff;

	color: var(--themetextcolor);
	background: var(--themebackground);
	font-size: 100%;
	margin: 0;
	padding: 0;

	text-rendering: optimizeLegibility; /* or geometricPrecision */
	font-feature-settings: "kern" 1, "liga" 1, "tnum" 1; /* causes problems with MSIE 10.0 */

	/* Allow breaking words if a single word is longer than the available horizontal space */
	/*word-wrap: break-word;*/
	background: transparent;

	display: grid;
	grid:
		"lmargin	globalnav		globalnav		rmargin"	auto
		"lmargin	systemmessages		systemmessages		rmargin"	auto
		"lmargin	gap1			gap1			rmargin"	var(--gapbeforeheader)
		"lmargin	header			header			rmargin"	auto
		"lmargin 	nav 			main			rmargin"	minmax(0,1fr)
		"lmargin 	footer			footer			rmargin"	auto
	/	auto		minmax(10rem,20rem)	minmax(20rem,70rem)	auto;
}

.pagewithsitenav body
{
	grid:
		"lmargin	globalnav		rmargin"	auto
		"lmargin	systemmessages		rmargin"	auto
		"lmargin	gap1			rmargin"	var(--gapbeforeheader)
		"lmargin	header			rmargin"	auto
		"lmargin 	main			rmargin"	minmax(0,1fr)
		"lmargin 	nav			rmargin"	auto
		"lmargin 	footer			rmargin"	auto
	/	auto		minmax(10rem, 90rem)	auto;
}


body > .top
{
	grid-row: globalnav;
	grid-column: lmargin-start / rmargin-end;
	background: var(--themebackground);
}

/* background for the nav.global */
body > .bottom
{
	grid-row: globalnav;
	grid-column: lmargin-start / rmargin-end;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 19;
	background: var(--navglobalbackground);

	-webkit-backdrop-filter: var(--backdropblur); /* Safari is still missing support for the non-prefixed version in year 2020 */
	backdrop-filter: var(--backdropblur);
	box-shadow: var(--boxshadow);
}

body > footer
{
	grid-row: footer;
	grid-column: lmargin-end / rmargin-start;

	background: var(--reversethemebackground) no-repeat;
	background-image: linear-gradient(to bottom, rgba(0,0,0, 0.1), rgba(0,0,0, 0.1), rgba(0,0,0, 0.5));
	color: #ddd;
}

body > footer a:link,
body > footer a:visited
{
	color: #fff;
	text-decoration: none;
}

body > footer a:hover,
body > footer a:active
{
	text-decoration: underline;
}

.rootservice:not(.frontpage) body
{
	grid:
		"lmargin		systemmessages		rmargin"	auto
		"lmargin		gap1			rmargin"	minmax(1rem, 1fr)
		"lmargin		header			rmargin"	auto
		"lmargin		main			rmargin"	auto
		"lmargin		footer			rmargin"	auto
		"lmargin		gap2			rmargin"	minmax(1rem, 1fr)
	/	minmax(1rem,auto)	minmax(10rem, 70rem)	minmax(1rem,auto);
}

.rootservice:not(.frontpage) body > header
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.rootservice:not(.frontpage) body > header img
{
	height: 4rem;
	margin: 1rem;
	display: inline-block;
}

.rootservice:not(.frontpage) body > footer
{
	text-align: center;
}

.rootservice:not(.frontpage) body > footer h2
{
	font-size: 1.5rem;
}

.rootservice.frontpage body
{
	grid:
		"lmargin	globalnav	rmargin"	auto
		"lmargin 	searchxsinput	rmargin" auto
		"lmargin	systemmessages	rmargin"	auto
		"lmargin	gap1		rmargin"	var(--gapbeforeheader)
		"lmargin	header		rmargin"	auto
		"lmargin	main		rmargin"	minmax(0,1fr)
		"lmargin	nav		rmargin"	minmax(0,auto)
		"lmargin	gap2		rmargin"	var(--gap)
		"lmargin	footer		rmargin"	auto
	/	auto		minmax(10rem, 90rem)	auto;
}

/* draw background for the content area to make sure readability stays good */
body:before
{
	content: "";
	display: block;
	grid-column: lmargin-end / rmargin-start;
	grid-row: header-start / footer-end;
	background: var(--themebackground);
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
	border-radius: var(--radius);
}

/* style: render colored stripe next to left content margin */
body:after
{
	content: "";
	display: block;
	grid-column: 2;
	grid-row: header-start / footer-start;
	position: relative;
	width: var(--stripewidth);
	left: 0;
	background: var(--stripebackground);
	border-top-left-radius: var(--stripewidth);
}

body > .systemmessages
{
	/* grid-area: systemmessages; */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

body > .systemmessages:not(:empty)
{
	color: var(--themeforeground);
	background: var(--themebackground);
	padding: 0 var(--gap);
}

body > header
{
	grid-area: header;
}

body > main
{
	display: block; /* fallback for Trident */
	padding: 1rem;

	grid-area: main;
	padding: var(--linewidth) var(--gap) var(--gap) var(--hgap);

	color: var(--themetextcolor);
}

body > main.page
{
	margin: 0;
}

body > nav.main
{
	grid-area: nav;
	color: var(--themetextcolor);
	scroll-anchor: none;
}

body > footer
{
	grid-area: footer;
	padding: var(--gap) var(--hgap);
}

main.page > article > section
{
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,20rem);
}

main.emptyaside > article > section
{
	grid-template-columns: minmax(0,1fr);
}

main.page > article > section > .main,
main.page > article > section > aside
{
	display: grid;
	grid-auto-flow: row;
	grid-auto-columns: minmax(0,100%);
	grid-auto-rows: auto;
	align-self: start;
}

main.page > article > section,
main.page > article > section > .main,
main.page > article > section > aside
{
	gap: var(--gap) var(--hgap);
}

p
{
	margin: 1rem 0rem;
}

p:first-child
{
	margin-top: 0;
}

p:last-child
{
	margin-bottom: 0;
}

hr
{
	border: none;
	border-bottom: solid var(--hairlinewidth) var(--themeforeground);
	margin: var(--gap) auto;
	padding: 0;
}

a:link,
a:visited
{
	color: var(--linkcolor);
	word-wrap: break-word;
}

html, body
{
	min-height: 100vh;
	padding: 0;
	margin: 0;
}

div.main.page
{
	display: flex;
	flex-direction: column;
}

.main.page
{
	border: solid #f00 1rem;
}

/* special handling for page top anchor */
#top
{
	position: absolute;
	top: 0; /* height for nav.global plus half the statusbar because this is relative to statusbar middle */
	display: block;
	height: 1rem;
	width: 1px;
	pointer-events: none;
}

:target
{
	scroll-margin-top: 4rem; /* reserve space for the .globalnav */
	animation: pulseoutline 5s;
}

#top:target
{
	animation: none;
}

body > nav.global
{
	grid-area: globalnav;
	display: grid;
	grid:
		"lmargin	menu	logo	personsearch	space	search	rootadmintoggle	language	messages	notifications	person	loginlogout	rmargin"	4rem
	/	auto		auto	auto	auto	1fr	auto	auto		auto		auto		auto		auto	auto		auto;

	align-items: center;
	color: var(--navglobalforeground);
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 20;
}

/* move position:sticky elements to original positions while focus is in TinyMCE editor and screen is short (this allows using more of the screen estate for the editor) */
@media all and (max-height: 40rem)
{
	.editorfocused body > nav.global,
	.editorfocused body > .bottom
	{
		position: static;
	}
}

nav.global :link:hover:not(:focus),
nav.global :visited:hover:not(:focus),
nav.global input[type=search]:hover:not(:focus)
{
	box-shadow: var(--hoverboxshadow);
}

body > nav.global img,
.searchiconlabel svg
{
	height: 1.6rem;
	width: 1.6rem;
	vertical-align: middle;
	display: flex;
}

body > nav.global a:link,
body > nav.global a:visited
{
	text-decoration: none;
	display: block;
}

body > nav.global .person a
{
	display: flex;
	align-items: center;
}

body > nav.global > .logo
{
	grid-area: logo;
	margin-left: var(--gap);
}

body > nav.global > .logo > a
{
	display: flex;
	align-items: center;
	margin-left: var(--gap);
}

body > nav.global > .logo span
{
	display: none;
	margin-left: 0.25rem;
}

body > nav.global > .menu
{
	grid-area: menu;
}

body > nav.global > .personsearch
{
	grid-area: personsearch;
}

body > nav.global > .searchnav
{
	grid-area: search;
}

body > nav.global > .searchnav form
{
	margin: 0 calc(0.25 * var(--gap));
}

body > nav.global > #showsearch
{
	grid-area: searchxs;
	padding: calc(0.25 * var(--gap));
	border-radius: 50%;
	border-width: var(--hairlinewidth);
	box-shadow: none;
	margin: 0 calc(0.25 * var(--gap));
}

.showsearch body > nav.global > #showsearch
{
	background: var(--linkcolor);
}


body > nav.global > .toggle.modify
{
	grid-area: language; /* we don't yet have search so let's put this there for now... */
	display: none;
}

.toggle.rootadmin
{
	grid-area: rootadmintoggle;
}

body > nav.global > .toggle.modify form
{
	display: flex;
}

body > nav.global > .toggle.modify form button,
body > nav.global > .toggle.rootadmin form button
{
	margin: 0 calc(0.25 * var(--gap));
}

body > nav.global > .messages
{
	grid-area: messages;
}

body > nav.global > .notifications
{
	grid-area: notifications;
}

body > nav.global .menu a,
body > nav.global .logo a,
body > nav.global a.setlanguage,
body > nav.global > .personsearch,
body > nav.global > .messages,
body > nav.global > .notifications,
body > nav.global .person a img,
#personmenutoggle,
body > nav.global .loginlogout a
{
	border: solid var(--hairlinewidth) var(--linkcolor);
	border-radius: 50%;
	padding: calc(0.25 * var(--gap));
	margin: 0 calc(0.25 * var(--gap));
	background: var(--themebackground);
}

body > nav.global .logo a
{
	margin-left: 0;
}

body > nav.global .menu a
{
	margin: 0;
}


nav.global .person :link:hover,
nav.global .person :visited:hover,
nav.global .person :link:focus,
nav.global .person :visited:focus
{
	border-radius: 1.25rem; /* half the icon hight */
	background-color: var(--themebackground);
}

body > nav.global .person a img
{
	padding: 0;
	background: var(--linkcolor); /* match image background with border color to workaround poor antialising with Google Chrome */
}

body > nav.global .person span
{
	padding-left: calc(0.25 * var(--gap));
	padding-right: calc(0.25 * var(--gap)); /* add whitespace to allow nicer border/box-shadow on hover */
}

body > nav.global .menu a,
body > nav.global .logo a
{
	border: solid var(--hairlinewidth) #fff;
}

body > nav.global .menu a
{
	animation: bordercolorthemetowhite 2.0s ease 0s 1 alternate;
}

body > nav.global  a.setlanguage,
body > nav.global > .personsearch
{
	border-color: transparent;
}

body > nav.global  a.setlanguage
{
	margin-left: calc(0.25 * var(--gap));
	margin-right: calc(0.25 * var(--gap));
}


body > nav.global a.setlanguage:hover,
body > nav.global > .personsearch:hover,
body > nav.global > .messages:hover,
body > nav.global > .notifications:hover
{
	box-shadow: var(--hoverboxshadow);
}

body > nav.global a.setlanguage:active,
body > nav.global > .personsearch:active,
body > nav.global > .messages:active,
body > nav.global > .notifications:active
{
	box-shadow: none;
}

#personmenutoggle img,
body > nav.global a.setlanguage img,
body > nav.global > .personsearch img,
body > nav.global > .messages img,
body > nav.global > .notifications img
{
	vertical-align: middle;
	display: flex;
}

body > nav.global > .person
{
	grid-area: person;
	display: block;
	margin-left: calc(0.25 * var(--gap));
	margin-right: calc(0.25 * var(--gap));
}

body > nav.global > .person a:hover span
{
	text-decoration: underline;
}

body > nav.global > .loginlogout
{
	grid-area: loginlogout;
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
}

body > nav.global > .loginlogout .login
{
	margin-left: calc(0.25 * var(--gap));
	margin-right: calc(0.25 * var(--gap));
}

body > nav.global > .loginlogout a.primarylink,
body > nav.global > .loginlogout a.secondarylink
{
	font-weight: 600;
	border-radius: 1.25rem;
	padding: 0.3rem 0.6rem;
	border: var(--reversethemebackground) solid var(--hairlinewidth);
}

body > nav.global > .loginlogout a.primarylink:hover,
body > nav.global > .loginlogout a.secondarylink:hover
{
	box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
}

body > nav.global > .loginlogout a.primarylink:hover
{
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

body > nav.global > .loginlogout a.primarylink
{
	background-color: var(--themebackground);
	color: var(--themeforeground);
}

body > nav.global > .loginlogout a.secondarylink
{
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	margin-left: calc(0.25 * var(--gap));
	margin-right: var(--gap);
}

body > nav.global > .loginlogout a.secondarylink:hover
{
	color: var(--reversethemebackground);
	background: var(--reversethemeforeground);
}

body > header
{
	display: grid;
	grid:
		"banner"	var(--bannerheight)
		"statusbar"	minmax(0, auto)
		"breadcrumbs"	minmax(5rem, auto)
	/	minmax(0,1fr);

	align-items: center;
}

.rootservice body > header
{
	grid:
		"banner"	4rem
		"statusbar"	minmax(0, auto)
		"breadcrumbs"	minmax(0, auto)
	/	minmax(0,1fr);
}

.rootservice.frontpage body > header
{
	grid:
		"banner"	var(--bannerheight)
		"statusbar"	minmax(0, auto)
		"breadcrumbs"	minmax(0, auto)
	/	minmax(0,1fr);
}

.rootservice:not(.frontpage) header .statusbar
{
	display: none;
}

.pagewithsitenav body > header
{
	grid:
		"banner"	auto
		"statusbar"	minmax(0, auto)
		"breadcrumbs"	minmax(5rem, auto)
	/	minmax(0,1fr);
}

body > header > .banner
{
	grid-area: banner;
	align-self: stretch;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: var(--bannerbackgroundsize);
	background-image: var(--bannerimage);
	background-color: var(--bannerbackground);
	background-position: var(--bannerbackgroundposition);
	position: relative;
}

.rootservice body > header .highlight
{
	margin: 2rem auto;
	width: -moz-fit-content;
	width: fit-content;
	max-width: max(19rem, 75%);
	padding: 1rem;
	background: rgba(0, 45, 86, 0.9);
	color: #fff;
	text-align: center;
	font-size: 1.2rem;
}

@media  all and (max-width: 50rem)
{
	.rootservice body > header .highlight
	{
		max-width: 85%;
	}
}

.rootservice body > header .highlight h2
{
	font-weight: 550;
	font-size: 2rem;
}


.rootservice body > header .highlight .buttons
{
	margin: 0;
}

.rootservice body > header .highlight a:link,
.rootservice body > header .highlight a:visited
{
	margin: 0.5rem 0.75rem;
	display: inline-block;
	color: #002D56;
	background: #fff;
	border: solid var(--linewidth) #fff;
	padding: calc(3 / 8 * var(--gap)) calc(6 / 8 * var(--gap));
}

.rootservice body > header .highlight a:hover,
.rootservice body > header .highlight a:active
{
	color: #fff;
	border-color: #fff;
	background: #003a70;
}


.rootservice body > header .highlight a:hover
{
	box-shadow: var(--hoverboxshadow);
}

body > header > .statusbar
{
	padding: 0 var(--gap);
	grid-area: statusbar;
	align-self: stretch;
	display: flex;
	align-items: center;
	height: var(--statusbarheight);

	color: var(--reversethemeforeground);
	background: var(--reversethemebackground) no-repeat;
	background-image: linear-gradient(to bottom, rgba(0,0,0, 0.1), rgba(0,0,0, 0.1), rgba(0,0,0, 0.5));

	position: relative; /* this is container for position absolute items within the statusbar */
}

body > header > .statusbar :link,
body > header > .statusbar :visited
{
	color: #fff;
}

body > header .statusbar .person,
body > header .statusbar .person a
{
	display: contents;
}

body > header > .statusbar .person a .icon
{
	margin-right: var(--gap);
	border-radius: 100%;
	object-fit: cover;
}

body > header > .statusbar .person a span
{
	display: none;
}


body > header,
body > header > .banner
{
	/* due Chrome bug we have to define border-radius for both these elements */
	border-top-left-radius: var(--bannerradius);
	border-top-right-radius: var(--bannerradius);
}

body > header > .breadcrumbs
{
	padding: 0 var(--gap);
	grid-area: breadcrumbs;
	align-self: stretch;
	display: flex;
	align-items: center;
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
	overflow: auto;
}


.breadcrumbs .icon
{
	height: 1.2rem;
	padding-right: 0.2rem;
	display: none;
}

.breadcrumbs
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.breadcrumbs > a,
.breadcrumbs > span
{
	white-space: nowrap;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;

}

.breadcrumbs > span
{
	color: transparent;
	width: 1.5rem;
	height: 1.5rem;
	background: url(icon/path-separator.svg);
	min-width: 1rem;
	flex-shrink: 0.1;
}

.breadcrumbs > a
{
	flex-shrink: 1;
	min-width: 44px; /* minimum target size for accessibility */
}

.breadcrumbs > a:first-child,
.breadcrumbs > a:last-child
{
	flex-shrink: 0.6;
}

/* use horizontal scroll to display breadcrumbs on touch screens */
.touchscreen .breadcrumbs > a,
.touchscreen .breadcrumbs > a:first-child,
.touchscreen .breadcrumbs > a:last-child,
.touchscreen .breadcrumbs > span
{
	flex-shrink: 0;
}

.touchscreen .breadcrumbs > a:last-child
{
	padding-right: var(--gap);
}


.breadcrumbs > a.toplevel,
.breadcrumbs > a.middlelevel
{
	font-weight: bold;
}

.breadcrumbs > a.redundant,
.breadcrumbs > a.redundant + span
{
	display: none;
}


/* DEFINE ANIMATIONS: */

@keyframes bordercolorthemetowhite
{
	from
	{
		border-color: var(--themeforeground);
	}
	to
	{
		border-color: #fff;
	}
}

@keyframes fadeinwithdelaynospace
{
	from
	{
		opacity: 0.0;
		max-height: 0vh;
		position: absolute;
		width: auto;
	}
	79%
	{
		position: absolute;
	}
	80%
	{
		opacity: 0.0;
		max-height: 0vh;
		position: unset;
		width: unset;
	}
	99%
	{
		max-height: 100vh;
	}
	to
	{
		opacity: 1.0;
		max-height: none;
		max-height: unset;
	}
}

@keyframes fadeinwithdelay
{
	from
	{
		opacity: 0.0;
	}
	80%
	{
		opacity: 0.0;
	}
	to
	{
		opacity: 1.0;
	}
}

@keyframes pullup
{
	from
	{
		transform: scale(0.5) translate(0, 500px);
	}
	to
	{
		transform: scale(1.0) translate(0, 0);
	}
}


@keyframes pulsein
{
	from
	{
		opacity: 0;
	}
	to
	{
		opacity: 1.0;
	}
}

@keyframes pulsein50
{
	from
	{
		opacity: 0.5;
	}
	25%
	{
		opacity: 1.0;
	}
	to
	{
		opacity: 1.0;
	}
}

@keyframes fadeandvanish
{
	from
	{
		right: 0;
		clip: rect(0rem 10rem 10rem 0rem);
	}
	to
	{
		right: -10rem;
		clip: rect(0rem 0rem 10rem 0rem);
		opacity: 0.0;
		display: none;
	}
}

@keyframes pulseoutline
{
	from
	{
		outline: solid transparent var(--linewidth);
		transition: outline-color 0.1s;
	}
	10%
	{
		outline-color: var(--themeforeground);
	}
	90%
	{
		outline-color: var(--themeforeground);
	}
	to
	{
		outline-color: transparent;
	}
}

div.accordion
{
	animation: pulsein 3.0s ease 0s 1 alternate;
}

.success,
.info
{
	animation: pulsein 1.0s linear 0s 1 alternate;
}

.notice, .warning, .error,
header nav.global a.flag.on:link,
header nav.global a.flag.on:visited,
header nav.global a.flag.on
{
	animation: pulsein50 1.0s linear 1s 5 alternate;
}


body.mce-content-body
{
	background: transparent;
}
.deleted body
{
	background: repeating-linear-gradient(
	-45deg,
	#aaa,
	#aaa 10px,
	#ccc 10px,
	#ccc 20px);
}
.timezone
{
	opacity: var(--opacity-nonessential);
}

.xhtmleditor
{
	display: block;
	padding: 0.2rem;
	border: solid 0.1rem var(--themetextcolor);
	background-color: #fff;
	overflow: hidden;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

.xhtmleditor.loading
{
	color: #aaa;
	font-style: italic;
}

form.loadingeditor,
form.loadingeditor button,
form.loadingeditor .xhtmleditor
{
	cursor: wait;
}

fieldset
{
	background-color: transparent; /* https://bugs.chromium.org/p/chromium/issues/detail?id=1150803 */
	color: inherit;
	padding: 0.25rem 0.75rem 0.75rem;
	margin: 0rem;
	margin-top: 1rem;
	border: 0.05rem solid rgba(0,0,0, 0.3);
	border-radius: var(--radius);
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
	min-width: auto;
}

fieldset + fieldset
{
	margin-top: 1em;
}

legend
{
	background-color: #fff;
	color: var(--themetextcolor);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	padding-left: 0.5em;
	padding-right: 0.5em;
}

legend:empty
{
	display: none;
}

input.s,
button
{
	color: var(--reversethemeforeground);
	border-color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
	border-style: solid;
	border-width: var(--linewidth);
	border-color: var(--reversethemebackground);
	padding: var(--buttonpadding);
	margin: 0rem;
	display: inline-block;
	-webkit-appearance: none; /* webkit specific workaround for ugly buttons */
	cursor: pointer;
	border-radius: var(--buttonradius);
	box-shadow: var(--buttonboxshadow);
	font-size: 1rem;
	margin-top: 0.25rem;
	user-select: none;
}

input.s + a,
input.s + input.s,
button + a,
button.link
{
	background-color: transparent;
	color: var(--personmenu-link-color);
	box-shadow: none;
	font-size: inherit;
	padding: 0;

}
button.link:hover
{
	background-image: none;
	box-shadow: none;
}

input.s:disabled,
button:disabled
{
	background-color: #eee;
	color: #000;
	border-color: #eee;
	cursor:not-allowed;
	box-shadow: none;
}

input[type="submit"].submitting,
input[type="submit"].submitting:hover,
button.submitting,
button.submitting:hover
{
	cursor: wait;
	color: #fff;
	background-repeat: repeat;
	background-size: 3rem 3rem;
	background-image: none;
	box-shadow: none;
}

button.submitting.submitter,
button.submitting.submitter:hover
{
	animation: submitting-progress 1s linear infinite;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

fieldset.payment.methods
{
	border: none;
	padding: 0;
	margin: 0;

	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	justify-content: space-between;
}

fieldset.payment.methods form
{
	display: flex;
	align-items: stretch;
}


button.payment.method
{
	background-color: #fff;
	color: var(--reversethemebackground);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
	justify-content: center;
}

button.payment.method img
{
	min-width: 8rem;
}


input[type=radio],
input[type=checkbox]
{
	margin: 0.25rem 0rem; /* accessibility requirements say that three lines each starting with a radio button must be separated at least 44px */
	margin-right: calc(0.5 * var(--gap));
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1.6rem;
	height: 1.6rem;
	position: relative;
	top: -0.15rem; /* half of difference between line height and this element */

	-webkit-appearance: none;
	appearance: none;

	border-radius: 50%;
	border: solid var(--themesubduedforeground) var(--linewidth);
	box-sizing: border-box;

	background: rgba(255,255,255, 0.5);
}

input[type=radio]:checked,
input[type=checkbox]:checked
{
	background: var(--reversethemebackground);
	border-color: var(--reversethemebackground);
}

input[type=radio]:checked:after,
input[type=checkbox]:checked:after
{
	display: block;
	content: "✓";
	padding-left: 0.25rem; /* tweak the balance for the checkmark */
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.5rem;
	line-height: 0.88em; /* no logic here, just a compromise value for gecko/blink - logically this should be 1.0 or 1.2 */
	box-sizing: border-box;
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	border-radius: 50%;
}

input[type=radio]:checked:after
{
	content: "●";
}

.android input[type=radio]:checked:after
{
	/* Workaround: it turns out that Android devices render HUGE "●" so it will look bad - use different marker here to workaround the problem. */
	content: "✓";
}

input[type=radio]:hover,
input[type=checkbox]:hover,
input[type=radio]:focus,
input[type=checkbox]:focus
{
	border-color: var(--reversethemebackground);
}

input[type=radio]:focus,
input[type=checkbox]:focus
{
	box-shadow: var(--focusboxshadow);
}

input[type=checkbox],
input[type=checkbox]:checked:after
{
	border-radius: var(--radius);
}

input[type=color]
{
	height: 3rem;
	min-width: 3rem;
}

.radiogroup .extracontent
{
	display: none;
	margin-left: calc(1.5 * var(--gap));
	background-color: var(--secondarycontent-background-color);
	padding: calc(0.5 * var(--gap));
}
.radiogroup.checked .extracontent
{
	display: block;
}
.radiogroup .extracontent > .t:first-child
{
	margin-top: 0;
}

.switchgroup label
{
	position: relative;
	height: 1.75rem;
	padding-left: 2.5rem;
	margin-left: 0.5rem;
	margin-bottom: 0;
}

.switchgroup input
{
	opacity: 0;
	width: 0;
	height: 0;
}

.switchgroup .slider
{
	width: 2.8rem;
	border-radius: 1.5rem;
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--disabled-background-color);
	box-shadow: none;
	transition: .4s;
	border: 1px solid #dbdbdb;
	height: 1.5rem;
}

.switchgroup input:checked + .slider
{
	background-color: var(--linkbuttonbackgroundcolor);
}

.switchgroup .slider:before
{
	border-radius: 50%;
	box-shadow: var(--buttonboxshadow);
	position: absolute;
	content: "";
	height: 1.5rem;
	width: 1.5rem;
	left: 0;
	bottom: 0.05rem;
	background-color: #fff;
	transition: .4s;
}

.switchgroup input:checked + .slider:before
{
	transform: translateX(1.25rem);
}

.modifycss div.input.color
{
	margin-left: calc(1.6rem + 0.5 * var(--gap));
}

.modifycss div.input.color input
{
	vertical-align: middle;
	margin: 0;
	padding: calc(0.25 * var(--gap));
	border: none;
	width: auto;
	border-radius: min(var(--radius), 5px);
}

@keyframes submitting-progress
{
	to { background-position: 3rem 0; } /* should match background-size above */
}

.toolbar button
{
	margin-bottom: 0.25rem;
}

input.t,
input.tcustom,
input.n,
textarea,
.xhtmleditor
{
	background-color: var(--themebackground);
	color: var(--themetextcolor);
	padding: calc(0.5 * var(--gap));
	margin: 0rem;
	border: 1px solid #B4C0D1;
	border: var(--forminputborderlinewidth) solid var(--forminputbordercolor);
	border-radius: var(--forminputborderradius);
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

input.t:hover,
input.tcustom:hover,
input.n:hover,
textarea:hover,
.xhtmleditor:hover
{
	border-color: var(--themeforeground);
}

input.t:focus,
input.tcustom:focus,
input.n:focus,
textarea:focus,
.xhtmleditor:focus,
.xhtmleditor.mce-edit-focus
{
	border-color: var(--themeforeground);
	outline: none;
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	border-radius: var(--forminputborderradius);
	z-index: 1; /* render focus style on top of other elements which may be close to input elements. See .input-group */
}

input.t[disabled],
input.tcustom[disabled],
textarea[disabled]
{
	background-color: #ddd;
	color: #333;
}

input.cb,
input.rb,
label
{
	cursor: pointer;
}

div.radiogroup > label
{
	padding-left: calc(1.6rem + 0.5 * var(--gap));
	display: inline-block;
}
div.radiogroup > label > input
{
	margin-left: calc(-1.6rem - 0.5 * var(--gap));
}

body .mce-floatpanel
{
	border-radius: var(--radius);
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
	border-color: var(--themesubduedforeground);
	border-width: var(--linewidth) !important; /* important because TinyMCE sets this one via attribute "style" */
	background: var(--themebackground);
	overflow: auto; /* clip the contents on the border radius */
}

html .mce-menu
{
	padding: calc(0.25 * var(--gap));
	box-shadow: var(--boxshadow);
}

html .mce-menu.mce-animate,
html .mce-menu.mce-in.mce-animate
{
	transform: none;
	transition: none;
}

.mce-menubtn button:hover:not(:disabled),
.mce-btn button:hover:not(:disabled)
{
	color: inherit;
	background: inherit;
	border-color: var(--themeforeground);
	box-shadow: none;
}

.mce-btn.mce-active button:hover:not(:disabled)
{
	color: var(--reversethemeforeground);
	background: var(--reversethemebackground);
}

html .mce-menubar .mce-menubtn.mce-active,
html .mce-menubar .mce-menubtn:hover
{
	border-color: transparent;
}

html .mce-menubar .mce-menubtn.mce-active button,
html .mce-menubar .mce-menubtn:hover button,
.mce-menubtn.mce-active button:hover:not(:disabled)
{
	color: #333;
	background: #eee;
}

/* Workaround TinyMCE randomly applying color/background to <button> or it's container - this fixes the "Formatting" submenu on the second row of the toolbar */
.mce-menubtn.mce-active.mce-btn-has-text:not(.mce-toolbar-item) button:hover:not(:disabled)
{
	color: inherit;
	background: inherit;
}

html .mce-btn i
{
	vertical-align: middle;
}

html .mce-menubar .mce-menubtn:focus
{
	border-color: var(--themeforeground);
}

html .mce-menubar .mce-menubtn:focus:not(:focus-visible)
{
	border-color: transparent;
}


html .mce-menu-item
{
	border-radius: var(--radius);
}

html .mce-btn
{
	border-radius: var(--radius);
}

html .mce-btn:hover
{
	background: #eee;
}

html .mce-arrow.mce-arrow-up:before
{
	border-bottom-color: var(--themeforeground);
}

html .mce-edit-focus
{
	outline: none;
}

body .mce-floatpanel.mce-fixed
{
	box-shadow: var(--boxshadow);
}

html .mce-btn-group:not(:first-child)
{
	border-left-color: transparent;
}

html .mce-menubar
{
	border-color: transparent;
}

html .mce-tooltip
{
	opacity: 1;
}
html .mce-tooltip-inner
{
	font-size: 1em;
}

button + .searchresultcontainer:not(:empty)
{
	margin-top: var(--gap);
}

.form .points
{
	color: #fff;
	background-color: #1C77D2;
	padding: 0rem 0.25rem;
}

.form .formresponsetext
{
	border-color: #ccc;
}

.form.summary .formresponsedata.clickable:hover
{
	cursor: pointer;
}

.form.summary .highlight .formresponselabel
{
	color: var(--theme-highlight-color-light);
	background-color: #fff;
}

.form.summary .highlight > .formresponsetext,
.form.summary .highlight.formresponsetext
{
	background-color: var(--theme-highlight-color-lighter);
	color: var(--themetextcolor);
}

.form.summary .highlighttool
{
	position: fixed;
	right: 1rem;
	top: 5rem;
	background-color: #fff;
	color: var(--theme-highlight-color-light);
	border: solid var(--hairlinewidth) var(--hairlinecolordark);
	padding: calc(0.5 * var(--gap)) calc(0.25 * var(--gap)) calc(0.5 * var(--gap))  var(--gap);
	border-radius: var(--radius);
	z-index: 1;
}

.form.summary .highlighttool .close
{
	cursor: pointer;
}

.form.summary .highlighttool .close::after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: calc(0.5 * var(--gap));
	content: "\f057";
	position: relative;
	top: -0.5rem;
}

div.snowgame
{
	height: 35rem;
	background: url('img/snowgame_background.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
div.topten
{
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	z-index: 1;
	display: inline-block;
	float: right;
	width: 10rem;
}
div.topten div:first-child
{
	font-weight: bold;
	background: #e57b01;
	font-size: 1.1rem;
	padding-left: 0.5rem;
	line-height: 2rem;
}
div.topten div ul
{
	list-style: none;
	list-style-position: inside;
	margin-left: -2.1rem;
}
div.snow_score
{
	display: block;
	float: left;
	color: var(--themetextcolor);
	margin-top: -1.7rem;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 2rem;
	padding-left: 0.5rem;
	width: 10rem;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

div.snowgame > div > div#snowgametimer
{
	display: block;
	width: 3.5rem;
	margin: 0 auto;
	padding-top: 0.5rem;
	text-align: center;
}
div.sgamemessagecontent {
	padding: 1rem;
}
div.topten div ul li.result.link.row a
{
	font-size: 0.75rem;
	font-weight: bold;
}
ul.modifyicon.list
{
	list-style-type: none;
	margin-left: -2.5rem;
}
@media all and (max-width: 23rem)
{
	div.snow_score
	{
		width: 8rem;
	}
	div.topten
	{
		width: 8rem;
	}
}
img.snowgameflake
{
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

div.element
{
	font-family: monospace;
	font-size: 0.8rem;
	margin-bottom: 0.25rem;
}

div.element .name
{
	font-weight: bold;
}

div.element .aname
{
	font-style: italic;
}

ul.accordion-content-list
{
	margin: 0;
	list-style-type: none;
}
span.pn-code-cc-wrap
{
	display: inline-block;
	max-width: 100%;
}
div.pn-code-cc
{
	position: relative;
	display: inline-block;
	width: max-content;
	max-width: 100%;
}

div.framelessimage
{
	/*box-shadow: 0rem 0rem 0.5rem rgba(0, 0, 0, 0.25);*/
	/*border-radius: 0.1rem;*/
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

.framelessimage a,
.framelessimage a img,
.main > .externalfile > a,
.main > .externalfile > a img,
li.thumbnail > a,
li.thumbnail > a img
{
	display: inline-block;
	vertical-align: bottom;
	border-radius: var(--radius);
}

img.thumbnail
{
	width: 10rem;
	height: 10rem;
	object-fit: cover;
	border-radius: var(--radius);
}

div.framelessimage img
{
	vertical-align: bottom;
	width: 100%;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

div.framelessimage > div.pn-code-cc
{
	position: relative;
	display: block;
	width: 100%;
}
.pn-code-cc:hover .pn-img-tb a
{
	opacity: 0.3;
}
div.pn-code-cc a img
{
	vertical-align: bottom;
}
div.pn-img-tb
{
	position:absolute;
	top: 0;
	right: 0;
	margin: 2px;
	padding: 2px;
}
div.pn-img-tb a
{
	cursor:pointer;
	opacity: 0.01;
	background-color: rgba(255,255,255,0.45);
	padding: 1px;
}

.pn-code-cc:hover .pn-img-tb a:hover
{
	opacity: 1.0;
}
a.pn-img-tb-modify {
	background: url('icon/ratas.png') no-repeat center center;
	background-size: 100% 100%;
	display: inline-block;
	width: 24px;
	height: 24px;
	max-width: 100%;
	max-height: 100%;
}

a.pn-img-tb-modify:link,
a.pn-img-tb-modify:visited
{
	color: rgba(0,0,0,0);
	overflow: hidden;
}

/*
.youtube,
.prezi,
.geogebra,
.slideshare
{
	margin-left: -1rem;
	margin-right: -1rem;
}
*/

.youtube div,
.prezi div,
.geogebra div,
.slideshare div
{
	display: block;
	font-size: 0.8rem;
	/*
	margin-left: 1rem;
	margin-right: 1rem;
	*/
}

.youtube > iframe,
.prezi > iframe,
.geogebra > iframe,
.slideshare > iframe
{
	border: 0;
}

.g-recaptcha
{
	margin-top: 0.5rem;
	border: 0;
}

.g-recaptcha iframe
{
	border: 0;
	box-shadow: none;
}

ul.link.list .rectangle .main
{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

ul.link.list,
ul.link.list li
{
	margin: 0;
	padding: 0;
	margin-top: 0.5rem;
	list-style: none;
}

article
{
	/* enable automatic hyphenation: http://blog.fontdeck.com/post/9037028497/hyphens */
	/* https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable */

	/* -webkit-hyphens: auto; /* http://crbug.com/47083 suggests that this does not work in Chrome/Chromium, Safari/OSX+English only, see also: http://webkit.org/b/48610 . In addition, some iOS versions of Safari would require custom CSS (http://stackoverflow.com/questions/7907097/css-hyphenation-language), Android 2.3.7 does not support hyphenation */
	/* -moz-hyphens: auto; /* Firefox 8.0+ needed for Finnish hyphenation */
	/* -ms-hyphens: auto; /* MSIE 10.0 supports hyphens for selected languages but not for Finnish */
	/* -o-hyphens: auto; /* not really supported as of 2012-04, tested Opera 11.62/Linux x86_64 */
	/* hyphens: auto; /* not really supported as of 2012-04 by any UA */
}

article.description
{
	margin-top: 1rem;
}

@viewport
{
	width: device-width;
}

@-ms-viewport
{
	/* http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ */
	/* http://msdn.microsoft.com/en-us/library/ie/hh869615%28v=vs.85%29.aspx */
	width: device-width;
}

header,
article,
aside,
footer
{
	display: block;
}

/* Disable double-click to zoom on links, input fields and buttons to improve responsiveness */
a, input, button
{
	-ms-touch-action: none !important;
	-ms-touch-action: manipulation !important;
	touch-action: manipulation !important;
}

img
{
	max-width: 100%;
	border: none;
}

pre
{
	overflow: auto;
	max-height: 80vh;
}

kbd
{
	display: inline-block;
	margin: 0rem 0.1rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.9em;
	color: #222;
	text-shadow: 0 1px 0 #FFF;
	background-color: #ddd;
	border: 0.05rem solid #aaa;
	border-radius: 0.15em;
	box-shadow: 0 0.1rem 0 rgba(15,15,15,0.2), 0 0 0 0.15rem #fff inset;
	white-space: nowrap;
}
.invalid
{
	background: #ffb200;
}
.hint,
.success,
.info,
.notice,
.warning,
.error,
.alert
{
	border: solid var(--themeinfo) var(--hairlinewidth);
	border-radius: var(--radius);
	color: var(--themetextcolor);
	padding: calc(0.75 * var(--gap)) calc(1.25 * var(--gap));
	box-sizing: border-box;
	font-size: 0.9rem;
	margin: var(--gap) 0;
}

.error404, .error404:first-child
{
	margin-top: 2rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.success:before,
.info:before,
.hint:before,
.notice:before,
.warning:before,
.error:before,
.error404:before
{
	display: inline-block;
	margin-right: 0.5rem;
	height: 1.8rem;
	width: 1.8rem;
	vertical-align: middle;
}

.success:before
{
	content: url("icon/success.svg");
}

.info:before
{
	content: url("icon/info.svg");
}

.hint:before
{
	content: url("icon/hint.svg");
}

.notice:before
{
	content: url("icon/notice.svg");
}

.warning:before
{
	content: url("icon/warning.svg");
}

.error:before,
.error404:before
{
	content: url("icon/error.svg");
}

.toast .toast-header-text
{
	font-weight: 900;
}

.toast .toast-header-text:before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	margin-left: var(--gap);
}
.toast.err .toast-header-text:before
{
	content: "\f071"; /* triangle-exclamation */
}
.toast.suc .toast-header-text:before
{
	content: "\f00c"; /* check */
}


.toast button.toast-close
{
	background: transparent;
	color: #fff;
	padding: calc(0.5 * var(--gap));
	border: none;
	box-shadow: none;
	opacity: 0.5;
}
.toast button.toast-close:hover
{
	opacity: 1;
	box-shadow: none;
}

.toast button.toast-close:before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00d"; /* xmark */
	margin: calc(0.5 * var(--gap));
}

.toast.err
{
	border-color: var(--themeerror);
}

.toast.suc
{
	border-color: var(--themesuccess);
}

.toast .toast-header
{
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-between;
	line-height: 3rem;
}
.toast.err .toast-header
{
	background-color: var(--themeerror);
	color: #fff;
}
.toast.suc .toast-header
{
	background-color: var(--themesuccess);
	color: #fff;
}

.toast-wrap .toast-body
{
	padding: var(--gap);
}
.toast-wrap .toast
{
	background-color: var(--themebackground);
	border-width: var(--hairlinewidth);
	border-style: solid;
	border-radius: var(--radius);
	box-shadow: var(--boxshadow);
	flex-basis: auto;
	overflow: hidden;
}

.toast-wrap
{
	position: fixed;
	bottom: var(--gap);
	right: var(--gap);
	max-width: 90%;
	width: auto;
	z-index: 29;
}

.toast-wrap .container
{
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	padding: 0;
	row-gap: calc(1.5 * var(--gap));
}

.page.main > .hint,
.page.main > .success,
.page.main > .info,
.page.main > .notice,
.page.main > .warning,
.page.main > .error
{
	border: solid #f00 1rem; /* should be nested in .messages container instead */
}

.page.main > header + .hint,
.page.main > header + .success,
.page.main > header + .info,
.page.main > header + .notice,
.page.main > header + .warning,
.page.main > header + .error
{
	margin-top: 1rem;
}

main > .messages
{
	margin-top: var(--gap);
}

main > article > section > .main > .messages
{
	/*margin-bottom: 1rem;*/
}

div.messages + article,
div.messages + header,
article.wrapper.titleonly > div.messages + header
{
	margin-top: 1rem;
}

div.messages.fixed
{
	top: 6rem;
	position: fixed;
	z-index: 99999;
}

article + article.document
{
	margin-top: var(--gap);
}

article.module article.document + article.document
{
	margin-top: var(--gap);
	padding-top: var(--gap);
	border-top: solid var(--hairlinewidth) var(--hairlinecolor);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

article.module article.document + article.document.hoverpopupmenutoggle,
article.module article.document + article.document.popupmenuopen
{
	border-radius: var(--radius);
}

.message[role=status] span[role=button]
{
	color: var(--linkcolor);
	text-decoration: underline;
}

div.messages .message a.close
{
	display: inline-block;
	float: right;
	height: 2rem;
	width: 2rem;
	background-image: url("icon/close.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1rem 1rem;
	border-radius: 50%;
	opacity: 0.5;
}

div.messages .message:hover a.close,
p.message:hover a.close
{
	background-color: rgba(0,0,0, 0.2);
	opacity: 0.8;
}

div.messages .message:hover a.close:hover,
p.message:hover a.close
{
	opacity: 1.0;
}


.success
{
	border-color: var(--themesuccess);
	color: #333;
	background: var(--themesuccess) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.info
{
	border-color: var(--themeinfo);
	color: #333;
	background: var(--themeinfo) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.hint
{
	border-color: var(--themeinfo);
	color: #333;
	background: var(--themeinfo) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.notice
{
	border-color: var(--themeinfo);
	color: #333;
	background: var(--themeinfo) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.warning
{
	font-weight: bold;
	border-color: var(--themewarning);
	color: #333;
	background: var(--themewarning) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.error
{
	font-weight: bold;
	border-color: var(--themeerror);
	color: #333;
	background: var(--themeerror) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.reminder
{
	font-size: 0.8rem;
	opacity: var(--opacity-nonessential);
}

.alert
{
	color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
}

.systemmessages > .alert
{
	margin: 0 calc(-1 * var(--gap)); /* undo the padding set for .systemmessages */
	border: none;
	border-radius: 0;
	text-align: center;
}

.systemmessages > .alert > form,
.systemmessages > .alert > form button
{
	display: inline-block; /* make alert forms single-line */
	margin: 0 0.5rem;
}

.systemmessages > .cookieconsent
{
	margin: 0 calc(-1 * var(--gap)); /* undo the padding set for .systemmessages */
	color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
	padding: var(--gap);
	font-size: 0.9rem;
}

.cookieconsent form
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.cookieconsent p
{
	margin: 0;
}

.cookieconsent a:link,
.cookieconsent a:visited
{
	background: transparent;
	color: var(--reversethemeforeground);
}

.cookieconsent button
{
	margin: 0 0 0 var(--gap);
	border-color: var(--reversethemeforeground);
}

.important
{
	opacity: 1;
}

.receipt
{
	/* render a plain text receipt */
	border: 1px dashed var(--themetextcolor);
	padding: 0.5rem;
	font-family: monospace;
}

.robottest div {
	margin-bottom: 0.5rem;
}

html .sp-container
{
	z-index: 1; /* workaround spectrum.js brain damage with z-index values */
}

/* Do not allow floated elements outside selected elements */
.enclose:after
{
	content: "";
	clear: both;
	display: block;
	margin-bottom: 0.3rem; /* workaround content overflowing (randomly?) with Blink (Chrome 90) – this appears to be some kind of font metrics issue so depending on actual font used this may need some extra margin, should be kept in sync with "main.page article.enclose.supermodule > footer" */
}

header.enclose:after
{
	margin-bottom: 0;
}

.forum.content
{
	padding-bottom: 0.3rem; /* workaround content overflowing (randomly?) with Blink (Chrome 90) – this appears to be some kind of font metrics issue so depending on actual font used this may need some extra margin */
}

.enclose > footer
{
	margin-bottom: -2px; /* offset the above Blink workaround to avoid extra single line after footer */
}

footer .start
{
	text-align: center;
}

footer .start span.backtotop
{
	background-image: url("icon/uparrow-white.svg");
	background-position: 0 50%, 0 0;
	background-repeat: no-repeat;
	background-size: 1.5rem auto, 100% 100%;
	padding: 0.1rem 0.3rem 0.1rem 1.5rem;
}

.rootservice div.license
{
	display: none;
}

header nav.global
{
	display: block;
}

.touchscreen header nav.global
{
	/*font-size: 1.2rem;*/
}

.touchscreen nav.main,
.touchscreen nav.personmenu
{
	padding-bottom: 7rem;
}

header nav.global .loginlogout
{
	display: inline;
}

nav.global .person .icon
{
	width: 2.1rem; /* manually match the icon to other buttons with the padding */
	height: 2.1rem;
	max-width: none;
	object-fit: cover;
	margin: 0;
}

header nav.global .links > span,
header nav.global .sessioncontrol > div,
header nav.global .sessioncontrol > div > form,
header nav.global .sessioncontrol > div > form input.s
{
	display: inline-block;
	vertical-align: bottom;
}

header nav.global .links > span a,
header nav.global .sessioncontrol > div > form input.s
{
	vertical-align: middle;
}

header nav.global .links > span.frontpage,
header nav.global .links > span.persondirectory
{
	margin-right: 0.1rem;
}

header nav.global .links > span a
{
	display: inline-block;
	padding: 0;
	vertical-align: middle;
	line-height: 2.0rem;
}


header nav.global nav.links
{
	float: left;
	max-width: 100%;
	background: #fff;
	border-radius: 0rem 0rem var(--radius) 0rem;
}

nav.links > span img
{
	height: 1.7rem;
	width: 1.7rem;
	vertical-align: top;
	margin-left: 0.2rem;
	position: relative;
	top: 0.2rem;
	cursor: pointer;
}

nav.links > span img:not(:hover)
{
	opacity: var(--opacity-nonessential);
}

header nav.global nav.sessioncontrol
{
	float: right;
	max-width: 100%;
	background: #fff;
	border-radius: 0rem 0rem 0rem var(--radius);
	overflow: hidden;
	padding: 0rem 0.25rem 0.25rem 0.25rem;
}

header nav.global nav.sessioncontrol .loginlogout a.logout,
header nav.global nav.sessioncontrol .loginlogout a.login
{
	padding: 0rem 0.5rem;
}

header nav.global .sessioncontrol .status,
header nav.global .sessioncontrol .status a.flag
{
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: bottom;
}

header nav.global .sessioncontrol .status a.flag img
{
	height: 2rem;
}

header nav.global:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

header nav.global a.logout,
header nav.global a.login,
header nav.global a.flag,
header nav.global a.setlanguage
{
	height: 2.0rem;
	display: inline-block;
}

header nav.global a.setlanguage img
{
	height: 1.5rem;
	vertical-align: middle;
	position: relative;
	top: -0.1rem;
}

header nav.global a.setlanguage:active,
header nav.global a.setlanguage:focus
{
	color: var(--themetextcolor);
	background: #ccc;
	background: rgba(255,255,255,1.0);
}

header nav.global img.logout
{
	height: 2.0rem;
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: bottom;
	position: relative;
	top: -0.05rem;
	background: var(--linkcolor);
	border-radius: 0 0 var(--radius) var(--radius);
}

header nav.global a.flag.on:link,
header nav.global a.flag.on:visited
{
	background: var(--themebackground);
	color: var(--themetextcolor);
}

header nav.global a.flag:active,
header nav.global a.flag:focus
{
	background: #777;
	color: var(--themebackground);
}

nav.global img.logout
{
	display: none;
}

header .path h2.label
{
	display: none;
}

nav h2.label
{
	display: none;
}

header div.timestamp,
header div.authors
{
	padding: 0;
}

header h1 + div.authors
{
	margin-top: 0.3rem;
}

div.authors div.author
{
	display: inline-block;
	margin: 0.1rem 0;
}

header .path
{
	padding: 0;
	padding-top: 0.5rem;
}

header .path .service,
header .path .pathitem
{
	display: inline;
}

/* remove ALL .toplevel stuff */
header .path .pathitem.toplevel .pathitem.redundant a
{
	color: #fff;
}

header .path .pathitem a
{
	padding: 0rem 0.5rem;
	white-space: nowrap;
}

header nav.global a
{
	white-space: nowrap;
}

nav.global .toggle.modify.actionshidden button
{
	background-color: #21891f;
	border-color: #21891f;
}

nav.global .toggle.modify button img
{
	height: 1.5rem;
	vertical-align: middle;
	margin-top: -0.1rem;
	margin-bottom: -0.1rem;
}

header .path .pathitem a
{
	margin-right: -0.4rem;
}

header nav.global .loginlogout a
{
	display: inline-block;
	line-height: 2rem;
}

header nav.global .d
{
	display: none;
}

header nav.global .loginlogout a.service span
{
	padding: 0rem 0.5rem;
}

header nav.global .loginlogout img.icon
{
	vertical-align: bottom;
}


/* icon for the toplevel part */
h1.toplevel
{
	padding: 0;
	margin: 0;
}

h1.toplevel a:link,
h1.toplevel a:visited
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;


	font-size: 2rem;

	overflow: auto;

	color: var(--bannerlinkforeground);
	background: var(--bannerlinkbackground);

	border-radius: var(--bannerradius) var(--bannerradius) 0 0;

	padding: var(--gap);
	box-sizing: border-box;
}

h1.toplevel a:focus
{
	box-shadow: none;
}


h1.toplevel a:focus > span,
h1.toplevel a:active > span
{
	border-radius: var(--radius);
	box-shadow: var(--focusboxshadow);
}

h1.toplevel a:focus:not(:focus-visible) > span
{
	box-shadow: none;
}

h1.toplevel a img
{
	margin-right: calc(0.5 * var(--gap));
	height: 5rem;
	width: auto;
	border-radius: var(--radius);
}

h1.toplevel a > span
{
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-left: calc(0.5 * var(--gap));
}


h1.toplevel a .subtitle1,
h1.toplevel a .subtitle2
{
	display: block;
	font-size: 0.9rem;
}

/* Special styles for frontpage */
.frontpage header .banner span { line-height: 1.2; letter-spacing: 0; }
.frontpage header .banner span span { font-size: 2.5rem; }
.frontpage header .banner span .subtitle2 { text-transform: uppercase; font-size: 1.5rem; }

main > article
{
	margin-top: var(--linewidth); /* reserve space for outline */
}

main > article > header > h1
{
	font-size: 2.5rem;
}

main header h1 .subtitle
{
	font-size: 1rem; /* don't inherit big font size to avoid huge line-height but do not set line-height here to avoid further issues with nested content */
}

/* page main header layout */
main.page > article > header
{
	margin-bottom: var(--gap);
}

main > article > header
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: var(--gap);
	padding-bottom: var(--gap);
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

main > article > header > h1
{
	flex: 1 1 auto;
	padding: 0;
	margin: 0;
}

main > article > header > nav.actions
{
	display: contents;
}

main > article > header > .authors,
main > article > header > .timestamp
{
	flex-basis: 100%;
}

nav.sub
{
	border: solid #f00 1rem;
}

nav.sub ul,
nav.sub ul li,
nav.sub ul ul li,
nav.virtualsub ul,
nav.virtualsub ul li
{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav.sub
{
	position: relative;
}

nav.sub li.inpath.beforetoplevel > a
{
	padding-left: 1.45rem;
}

nav.sub li.inpath.toplevel > a
{
	padding-left: 0;
}

nav.sub > .sitemap
{
	color: var(--themetextcolor);
	background: var(--themebackground);
	border-radius: var(--radius);
	position: relative;
	padding: 0.5rem;
}

nav.sub ul.actions
{
	display: block;
}

nav.sub a
{
	text-decoration: none;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	display: block;
}

nav.main
{
	border-right: solid var(--hairlinewidth) var(--hairlinecolor);
	z-index: 15;
}

nav.main li.inpath > .item > a:first-child
{
	font-weight: bold;
	color: var(--linkcoloremphasized);
}

nav.main .togglechildren
{
	width: 4rem;
	background: no-repeat 50% 50% url(icon/opennav.svg);
	border-left: solid var(--hairlinewidth) var(--hairlinecolor);
}

nav.main .togglechildren:hover,
nav.main .togglechildren:focus
{
	background-image: url(icon/opennav-white.svg);
}


nav.main li.open > .item > .togglechildren
{
	background: no-repeat 50% 50% url(icon/closenav.svg);
}

nav.main li.open > .item > .togglechildren:hover,
nav.main li.open > .item > .togglechildren:focus
{
	background-image: url(icon/closenav-white.svg);
}

nav.main li.open
{
	background: var(--navopenbackground);
}

nav.main li.open > .item a:first-child
{
	color: var(--linkcoloremphasized);
}

nav.main .children.hidden
{
	display: none;
}

nav.main ul.sitemap,
nav.main .sitemap li,
nav.main ul.sitemap ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

nav.main ul.sitemap .item
{
	display: grid;
	grid:
		"item		arrow"		minmax(4rem, 1fr)
	/	1fr	auto;
	align-items: stretch;
}

nav.main ul.sitemap .item a
{
	display: flex;
	align-items: center;
	text-decoration: none;
	word-break: break-word;
	overflow: auto;
	border-radius: 0;
}

nav.main ul.sitemap li .item
{
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

nav.main ul.sitemap li li li .item
{
	border-bottom-color: transparent;
}

nav.main li li li .togglechildren
{
	border-left: none;
}

nav.main ul.sitemap ul
{
	grid-area: children;
}


nav.main ul.sitemap li li li .item
{
	grid-template-rows: minmax(2.5rem, 1fr);
}

nav.main ul.sitemap .item a
{
	padding: calc(0.5 * var(--gap));
}

nav.main ul.sitemap .item a.togglechildren
{
	padding: 0;
}

nav.main ul.sitemap .item a:hover
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
	box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0, 0.25);
}

nav.main ul.sitemap .item a:focus
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
}

nav.main ul.sitemap .item a:active
{
	box-shadow: none;
}


nav.main ul.sitemap .item a:first-child
{
	padding-left: var(--gap);
}

nav.main ul.sitemap ul .item a:first-child
{
	padding-left: calc(2 * var(--gap));
}

nav.main ul.sitemap ul ul .item a:first-child
{
	padding-left: calc(3 * var(--gap));
}

nav.main ul.sitemap ul ul ul .item a:first-child
{
	padding-left: calc(4 * var(--gap));
}

nav.main ul.sitemap ul ul ul ul .item a:first-child
{
	padding-left: calc(5 * var(--gap));
}

nav.main ul.sitemap ul ul ul ul ul .item a:first-child
{
	padding-left: calc(6 * var(--gap));
}

nav.main .sitemap li.current > a,
nav.main .sitemap li.current > .person > a
{
	font-weight: bold;
}

/* special style for current page */
nav.main ul.sitemap li.current > .item > a:link,
nav.main ul.sitemap li.current > .item > a:visited
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
}

nav.main ul.sitemap li.current > .item > a.togglechildren:link,
nav.main ul.sitemap li.current > .item > a.togglechildren:visited
{
	background-image: url(icon/opennav-white.svg);
}

nav.main ul.sitemap li.current.open > .item > a.togglechildren:link,
nav.main ul.sitemap li.current.open > .item > a.togglechildren:visited
{
	background-image: url(icon/closenav-white.svg);
}

ul.sitemap .item img
{
	margin-left: calc(0.5 * var(--gap));
}
ul.sitemap .item img + img
{
	margin-left: calc(0.25 * var(--gap));
}

ul.sitemap .item span.person
{
	display: contents;
}

nav.main > .actions
{
	margin: var(--gap);
}

h1 a:link,
h1 a:visited,
h1 a,
nav.main ul.sitemap a:link,
nav.main ul.sitemap a:visited,
nav.main ul.sitemap a
{
	color: var(--linkcolor);
}

nav.main .sitemap li.phantom a:link,
nav.main .sitemap li.phantom a:visited,
nav.main .sitemap li.phantom a
{
	background: #21891f;
	color: #fff;
}

nav.main .sitemap li.phantom a:link:before,
nav.main .sitemap li.phantom a:visited:before,
nav.main .sitemap li.phantom a
{
	content: "+ ";
	font-weight: bold;
}

nav.main .sitemap li.phantom a:hover,
nav.main .sitemap li.phantom a:focus,
nav.main .sitemap li.phantom a:hover:before,
nav.main .sitemap li.phantom a:focus:before
{
	color: var(--reverselinkforeground);
	background-color: var(--reverselinkbackground);
}

nav.main .omitted.children.hasjshandler a
{
	display: block;
	padding: 0;
	margin: 0;
	background: transparent url("icon/more-vertical.svg") no-repeat;
	background-size: 1rem 1rem;
	background-position: 50% 50%;
	width: 4rem;
	height: 100%;
	border-left: solid var(--hairlinewidth) var(--hairlinecolor);
}

nav.main .omitted.children.loading,
div.throbber.loading
{
	min-height: 2.5rem;
	background: no-repeat 50% 50% url("icon/throbber.gif");
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}


.systemperson nav.sub li.pages + li,
.systemperson nav.sub li.evaluations + li,
.systemperson nav.sub li.messages + li
{
	border-top: solid 0.1rem rgba(0,0,0, 0.1);
}

.personmenu li a.pages,
.personmenu li a.evaluations,
.personmenu li a.messages
{
	padding-bottom: 1rem;
}


nav.main h1
{
	display: none;
}

nav.main .actions li
{
	display: block;
	padding: 0.25rem;
}

nav.main nav.sub .actions ul li,
nav.main nav.virtualsub .actions ul li
{
	padding: 0.35rem 0rem;
}

nav.virtualsub
{
	background: #f00;
}

nav.tabs
{
	border: solid #f00 1rem;
}

nav.tabs h2
{
	display: none;
}

nav.tabs ul,
nav.tabs ul li
{
	display: inline;
	list-style: none;
	padding: 0;
	margin: 0;
}

nav.tabs ul
{
	margin-left: 1rem;
}

nav.tabs a
{
	display: inline-block;
	padding: 0.5rem;
	margin-right: 0.8rem;
	margin-top: 0.4rem;
	text-decoration: none;
	font-weight: normal;
	font-size: 0.8rem;
	background: #ddd;
	color: #555;
	border: solid #555 0.1rem;
	position: relative;
}

nav.tabs a.current
{
	top: 0.15rem;
	border: solid #555 0.1rem;
	border-bottom: solid #555 2px;
	padding-top: 0.6rem;
}

nav.main nav.virtualsub li a,
nav.main nav.sub .service a
{
	display: block;
	padding: 0.35rem 0rem;
	padding-left: 0.1rem;
}

nav.main nav.virtualsub li a,
nav.main nav.sub .service a
{
	color: var(--themetextcolor);
	text-decoration: none;
}

a.lock img
{
	height: 1rem;
	vertical-align: middle;
}

div.jsselectall > a
{
	font-size: 0.8rem;
	cursor: pointer;
	text-decoration: none;
	color: #3E5D99;
}

div.jsselectall > a:hover
{
	text-decoration: underline;
	text-decoration-skip: ink;
}

ul.access li label span.list.item
{
	padding-left: 0.5rem;
}

body .mainwrapper
{
	border: solid #f00 2px;
}

body.full nav.main
{
	clear: left;
	float: left;
	width: 10rem;
	position: relative;
	z-index: 20;
	border: solid #f00 2px;
}

nav.main nav+nav
{
	margin-top: 0.5rem;
}

nav.main nav.virtualsub li a,
nav.main nav.sub .service a,
nav.main nav.main h2
{
	padding: 0.5rem 0rem;
	font-weight: normal;
}

nav.sub div.actions
{
	font-size: 0.9rem;
	background: #f7f7f7;
	box-sizing: border-box;
	position: relative;
	border-radius: 0rem 0 var(--radius) var(--radius);
	padding: 0rem;
	margin: 0rem;
	box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
	border-top: rgba(0, 0, 0, 0.1) solid 0.1rem;
	overflow: auto; /* enclose floats */
}

nav.sub div.actions > ul
{
	margin-left: 1rem;
}


nav.sub div.actions:before
{
	position: absolute;
	content: "";
	width: 100%;
	height: 0.1rem;
	left: 0; /* avoid https://bugzilla.mozilla.org/show_bug.cgi?id=1392575 */
	top: -0.25rem;
	box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
}

nav.sub .actions li:first-child::before,
nav.sub .actions li:not(:last-child)::after
{
	display: none;
}


nav.main a.current
{
	border-top: solid 0.1rem var(--themetextcolor);
	border-bottom: solid 0.1rem var(--themetextcolor);
}

nav.main nav.sub .beforetoplevel > ul
{
	margin-left: 0rem;
}

.beforetoplevel > a
{
	font-style: italic;
}

nav.main .sitemap .beforetoplevel > a,
nav.main .sitemap .beforetoplevel > .person > a
{
	display: none;
}

.beforetoplevel.inpath > a
{
	display: block;
}

nav.main .sitemap img.icon
{
	height: 1.2rem;
	display: none; /* hide icons in main sidebar navigation */
}

/* Layout */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

article.wrapper.titleonly > header
{
	margin: 0rem 0rem 0rem 0.25rem;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 0 var(--radius) 0 0;
	position: relative;
	padding: 0.5rem 1rem;
	padding-right: 2.6rem; /* reserve space for close button */

	display: none;
}

article.wrapper.titleonly > article:not(.titleonly)
{
	margin-top: var(--gap);
}

article.wrapper.titleonly > header h1
{
	font-size: 1rem;
}

article.wrapper.titleonly > header a
{
	display: block;
}

article.wrapper.titleonly > .main > article > header
{
	margin-top: 0rem;
}

article.wrapper.titleonly.depth2 > header
{
	margin: 0rem 0rem 0rem 0.5rem;
}

article.wrapper.titleonly.depth3 > header
{
	margin: 0rem 0rem 0rem 0.75rem;
}

article.wrapper.titleonly.depth4 > header
{
	margin: 0rem 0rem 0rem 1rem;
}

article.wrapper.titleonly.depth5 > header
{
	margin: 0rem 0rem 0rem 1.25rem;
}

article.wrapper.titleonly.depth6 > header
{
	margin: 0rem 0rem 0rem 1.5rem;
}

article.wrapper.titleonly.depth7 > header
{
	margin: 0rem 0rem 0rem 1.75rem;
}

article.wrapper.titleonly.depth8 > header
{
	margin: 0rem 0rem 0rem 2rem;
}

article.wrapper.titleonly.depth9 > header
{
	margin: 0rem 0rem 0rem 2.25rem;
}

article.wrapper.titleonly.depth10 > header
{
	margin: 0rem 0rem 0rem 2.5rem;
}

article.wrapper.titleonly.depth11 > header
{
	margin: 0rem 0rem 0rem 2.75rem;
}

article.wrapper.titleonly.depth12 > header
{
	margin: 0rem 0rem 0rem 3rem;
}

article.titleonly > header > h1 > a:after
{
	content: "";
	position: absolute;
	bottom: -2.25rem;
	right: 0.5rem;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 50%;
	height: 1.5rem;
	width: 1.5rem;
	display: block;
	text-align: center;
	z-index: 1;
	color: transparent;

	opacity: var(--opacity-nonessential);
	background: url(icon/close.png);
	background-size: 1rem 1rem;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/*background-color: rgba(0,0,0, 0.1);*/
}

main > article > .messages > p:first-child
{
	margin-top: 0;
}

.titleonly .main.content > article > header
{
	margin-right: 1.3rem; /* reserve space for close button */
}


.rootservice.frontpage main
{
	display: grid;
	grid:	"menu		pages"		minmax(0,auto)
		"infofeed	infofeed"	minmax(0,auto)
	/	min(18rem,25vw)	1fr		;


	padding: var(--gap);
	padding-bottom: 0;
	background: #002D56;
	color: #fff;
}

.rootservice.frontpage main h1
{
	font-size: 1.5rem;
}

.rootservice.frontpage main a:link,
.rootservice.frontpage main a:visited
{
	color: #fff;
}

.rootservice.frontpage main a:hover,
.rootservice.frontpage main a:active
{
	text-decoration: underline;
	background: #fff;
	color: #002D56;
}

.rootservice.frontpage main .pinned
{
	grid-area: menu;
	padding-right: var(--gap);
	margin-bottom: 1rem;
}

.rootservice.frontpage main .pages
{
	grid-area: pages;
	min-width: 50%;
	margin-bottom: var(--hgap);
}

.rootservice.frontpage main .infofeed
{
	grid-area: infofeed;
	text-align: center;
}

.rootservice main
{
	display: block;
}

@media all and (max-width: 50rem)
{
	.rootservice.frontpage main
	{
		grid:	"pages"		minmax(0,auto)
			"menu"		minmax(0,auto)
			"infofeed"	minmax(0,auto)
		/	1fr;
	}
}

.rootservice article.pages div.search
{
	float: right;
	margin: 0.5rem 0rem;
	font-size: 1.2rem;
}

.rootservice article.pages div.search a:link,
.rootservice article.pages div.search a:visited
{
	font-size: 1rem;
	padding: 0.375rem 0.75rem;
	border: solid #002D56 var(--linewidth);
	border-radius: 0;
	text-decoration: none;
	color: #002D56;
	background: #fff;
}

.rootservice article.pages div.search a:hover,
.rootservice article.pages div.search a:active
{
	color: #fff;
	border-color: #fff;
	background: #003a70;
}


.rootservice article.pages div.search a:before
{
	content: "";
	display: inline-block;
	background: no-repeat url("icon/search.png");
	background-size: 1rem 1rem;
	height: 1.2rem;
	width: 1.5rem;
	vertical-align: middle;
}

.rootservice article.pages div.search a:hover:before
{
	filter: invert(1);
}

.rootservice article.hero.list
{
	background: transparent;
	color: var(--themetextcolor);
	box-shadow: none;
	padding: 0;
}

.rootservice .hero > ul
{
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	grid-gap: 1rem;
	justify-content: stretch;
	align-content: stretch;
}

.rootservice .hero > ul > li
{
	list-style: none;
	padding: 0;
	margin: 0rem;
	background: var(--themebackground);
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.1rem;
	-webkit-background-clip: padding-box;

	display: grid;
	justify-content: stretch;
}

.rootservice .hero li a
{
	color: var(--themetextcolor);
	overflow: hidden;
	text-decoration: none;
}

.rootservice .hero .modify.button
{
	display: block;
	content: ".";
	padding: 0;
	text-align: center;
}

.rootservice .infofeed:not(:empty)
{
	margin: 0 -1rem;
	background: #fff;
	color: #333;
	padding: 1rem;
	width: 100%;
}

.rootservice.frontpage main .infofeed a:link,
.rootservice.frontpage main .infofeed a:visited
{
	color: var(--linkcolor);
	background: var(--themebackground);
}

.rootservice div.infofeed li
{
	list-style: disc;
}

.rootservice .hero li a span
{
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.rootservice .hero li a small
{
	color: #000;
}

.rootservice .hero li a i
{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 70%;
	height: 6rem;
	height: 12vmin;
	display: block;
	border-radius: 0.1rem 0.1rem 0 0; /* workaround chrome bug which causes this background to bleed over parent border-radius */
}

.rootservice .hero li a.heroinfo i
{
	background-image: url("img/bg5.jpg");
	background-color: #1364B6;
}

.rootservice .hero li a.ajankohtaista i
{
	background-image: url("img/bg6.jpg");
	background-color: #75507b;
}

.rootservice .hero a.help i
{
	background-image: url("img/bg4.jpg");
}

.rootservice .hero a.training i
{
	background-image: url("img/bg2.jpg");
}

.rootservice .hero a.learningmaterial i
{
	background-image: url("img/bg3.jpg");
}

.rootservice .hero a.ops2016 i
{
	background-image: url("img/bg1.jpg");
}

.rootservice .hero li a b
{
	color: var(--linkcolor);
}

.rootservice .hero li a:hover b
{
	text-decoration: underline;
	text-decoration-skip: ink;
}

article.login.dialog > header
{
	/* hide visually but keep this for screen readers */
	height: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

section.login
{
	display: grid;
	grid-template-columns: [pedalogin] minmax(15rem, 1fr) [line] calc(var(--linewidth)*2) [otherlogin] minmax(15rem, 1fr);
	gap: var(--hgap);
}

section.login a
{
	text-decoration: none;
}

section.login ul.buttons,
section.login ul.buttons li
{
	margin: 0;
	padding: 0;
	list-style: none;
}

section.login .buttons a
{
	display: block;
	padding: 0.5rem 0rem;
}

section.login .buttons a:hover,
section.login .buttons a:active
{
	text-decoration: underline;
	text-decoration-skip: ink;
}

ul.extauthservices
{
	clear: both;
	display: flex;
	flex-wrap: wrap;
	margin: -0.5rem;
}

ul.extauthservices li
{
	display: flex;
	flex: 1 1 15rem;
	margin: 0.5rem;
}

ul.extauthservices li a
{
	display: block;
	flex: 1 1 12rem;
	text-align: left;
	margin: 0;
	padding: 0.5rem 0.5rem 0.5rem 3rem;
	text-decoration: none;
	background-image: url("icon/baseline_exit_to_app_white_48dp.png");
	background-position: 0.5rem center;
	background-repeat: no-repeat;
	background-size: 2rem auto, 100% 100%;
	border-radius: var(--radius);
}

ul.extauthservices li.extauthservice.msliveid a:link,
ul.extauthservices li.extauthservice.msliveid a:visited,
ul.extauthservices li.extauthservice.msliveid a
{
	background-color: #575352;
	color: #fff;
	background-image: url("icon/microsoft-logo.svg");
}

ul.extauthservices li.extauthservice.google a:link,
ul.extauthservices li.extauthservice.google a:visited,
ul.extauthservices li.extauthservice.google a
{
	background-color: #4285F4;
	color: #fff;
	background-image: url("icon/btn_google_light_normal_ios.svg");
}

ul.extauthservices li.extauthservice.facebook a:link,
ul.extauthservices li.extauthservice.facebook a:visited,
ul.extauthservices li.extauthservice.facebook a
{
	background-color: #3B5998;
	color: #fff;
	background-image: url("icon/flogo-HexRBG-Wht-72.png");
	background-size: 1.5rem auto, 100% 100%;
	background-position: 0.75rem center;
}

ul.extauthservices li.extauthservice.opinsys a:link,
ul.extauthservices li.extauthservice.opinsys a:visited,
ul.extauthservices li.extauthservice.opinsys a
{
	background-color: #ED7113;
	color: #fff;
}

ul.extauthservices li.extauthservice.windowsazure a:link,
ul.extauthservices li.extauthservice.windowsazure a:visited
{
	background-color: #EB3C00;
	color: #fff;
	background-image: url("icon/office-365-icon-0.png");
}

ul.extauthservices li.extauthservice.educloud a:link,
ul.extauthservices li.extauthservice.educloud a:visited
{
	background: #00AEEF;
	color: #fff;
}

ul.extauthservices li.extauthservice.mpass a:link,
ul.extauthservices li.extauthservice.mpass a:visited,
ul.extauthservices li.extauthservice.mpass a
{
	background-color: #0061AF;
	color: #fff;
}

ul.extauthservices li.extauthservice.jy-idp a:link,
ul.extauthservices li.extauthservice.jy-idp a:visited,
ul.extauthservices li.extauthservice.jy-idp a
{
	background-color: #002957;
	color: #fff;
	background-image: url("icon/jyu-soihtu-valkonen-taytto.png");
	background-size: 0.75rem auto, 100% 100%;
	background-position: 1rem center;
}

ul.extauthservices li.extauthservice.sple a:link,
ul.extauthservices li.extauthservice.sple a:visited,
ul.extauthservices li.extauthservice.sple a
{
	background-color: #2dac44;
	color: #fff;
}

ul.extauthservices li.extauthservice.haka a:link,
ul.extauthservices li.extauthservice.haka a:visited,
ul.extauthservices li.extauthservice.haka a
{
	background-color: #830050;
	color: #fff;
	background-image: url("icon/haka-logo.svg");
}

ul.personlist
{
	padding-left: 0;
	list-style: none;
}

ul.personlist li
{
	background: #f7f7f7;
	padding: 0.2em;
}

ul.personlist li + li
{
	margin-top: 0.5em;
}

article.eula
{
	margin: 1rem auto;
	max-width: 40rem;
}

.eula nav.breadcrumbs,
.eula .sessioncontrol .toggle.modify,
.eula .sessioncontrol .loginlogout .status,
.eula .sessioncontrol .loginlogout > .service,
.eula .sessioncontrol .loginlogout > .d,
.eula nav.global .personmenu
{
	display: none;
}

/*
section
{
	margin-top: 1.5rem;
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
}

section > .main
{
	order: 1;
	width: 10rem;
	flex: 1 2 auto;
}

section > aside
{
	order: 2;
	width: 18rem;
	flex: 0 1 auto;
	margin-left: 1rem;
}

aside:empty
{
	display: none;
}
*/

section + section
{
	clear: both;
}

header a:link,
header a:visited,
header a
{
	text-decoration: none;
}

.atom header.page
{
	padding: 0.5rem;
}

.atom footer.page
{
	padding: 0.5rem;
	text-align: center;
	font-weight: bold;
}

.atom time
{
	color: #777;
}

article.page.subscriptions > .main > article > header button.markasread,
article.page.subscriptions > .main > article > footer button.markasread
{
	color: var(--themeforeground);
	background: var(--themebackground);
}


article > header > h1
{
	padding: 0;
	margin: 0;
	font-size: 1.4rem;
	min-width: 50%;
	max-width: 100%;
	padding-bottom: 0.1rem;
}

aside article > header > h1
{
	font-size: 1.2rem;
}

article > header > h1 a
{
	min-width: 44px;
}

article.link > header > h1
{
	max-width: 100%;
}

article.link > header > h1 a
{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

article article > .main
{
	padding-top: var(--gap);
}

article article > .main > article
{
	/* margin-top: var(--gap); */
	/* margin-bottom: var(--gap); */
}

article.module > .main > article.module + article.module
{
	margin-top: var(--gap);
}

article footer:empty
{
	display: none;
}

article footer
{
	/* TODO: get rid of this rule to not clip outlines / shadows */
	overflow: auto;
}

article footer:after
{
	clear: both;
}

div.logindivider
{
	width: var(--linewidth);
	height: 100%;
	background: #5555554a;
}

/* the article selector needs high specificy to avoid getting default styles */
main.page article.supermodule,
main.page article.module,
article.supermodule article.module,
article.page.subscriptions > .main > article
{
	border: solid var(--themeforeground) var(--linewidth);
	padding: 0;
	border-radius: var(--radius);
}

article.module > header,
article.supermodule > header,
article.page.subscriptions > .main > article > header
{
	/* special tweak to avoid leaking header corners outside the module border – we cannot use just overflow:auto in the article to allow focus box-shadow to work */
	border-top-left-radius: calc(0.5*var(--radius));
	border-top-right-radius: calc(0.5*var(--radius));
}

article.page.subscriptions > .main > article + article
{
	margin-top: var(--gap);
}

main.page article.supermodule > header,
main.page article.supermodule > footer,
article.supermodule article.module > header,
article.supermodule article.module > footer,
main.page article.module > header,
main.page article.module > footer,
article.page.subscriptions > .main > article > header,
article.page.subscriptions > .main > article > footer
{
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	padding: calc(0.5 * var(--gap)) var(--gap);
	margin: 0;
}

main.page article.supermodule > .main > article + article,
article.supermodule > .main > article + article
{
	margin-top: var(--gap);
}

main.page article.enclose.supermodule > footer,
main.page article.enclose.module > footer,
article.supermodule article.enclose.module > footer,
article.enclose.page.subscriptions > .main > article > footer
{
	background: var(--themefooterbackground);
	color: var(--themeforeground);
	margin-bottom: -0.3rem; /* offset the hack done for .enclose to avoid extra white row of pixels, see .enclose:after, header:after */
	/* avoid overflowing parent borders: */
	border-bottom-left-radius: calc(0.5 * var(--radius));
	border-bottom-right-radius: calc(0.5 * var(--radius));
}

article article.forum > .main
{
	padding: 0;
	margin: 0;
	margin-top: calc(0.5 * var(--gap));
	overflow: visible;
}

.subscriptions div.main > article.forum.response + article.forum.response
{
	padding-top: 0;
	margin-top: var(--gap);
}


main.page article.supermodule > .main,
main.page article.module > .main,
article.supermodule article.module > .main,
article.page.subscriptions > .main > article > .main
{
	margin: 0;
	padding: var(--gap);
}

.main > article:first-child
{
	margin-top: 0;
	margin-top: 0.20rem; /* reserve space for drawing border around nested content -- should match the --focusboxshadow */
}

.main > article:last-child
{
	margin-bottom: 0;
	margin-bottom: 0.20rem; /* reserve space for drawing border around nested content -- should match the --focusboxshadow */
}

main.page article.supermodule > header a:link,
main.page article.supermodule > header a:visited,
main.page article.module > header a:link,
main.page article.module > header a:visited,
article.supermodule article.module > header a:link,
article.supermodule article.module > header a:visited,
article.page.subscriptions > .main > article > header a:link,
article.page.subscriptions > .main > article > header a:visited
{
	color: var(--reversethemeforeground);
}

main.page article.supermodule > footer a:link,
main.page article.supermodule > footer a:visited,
main.page article.module > footer a:link,
main.page article.module > footer a:visited,
article.supermodule article.module > footer a:link,
article.supermodule article.module > footer a:visited,
article.page.subscriptions > .main > article > footer a:link,
article.page.subscriptions > .main > article > footer a:visited
{
	color: var(--linkcoloremphasized);
	text-decoration: none;
}

main.page article.supermodule > footer a:hover,
main.page article.module > footer a:hover,
article.supermodule article.module > footer a:hover,
article.page.subscriptions > .main > article > footer a:hover
{
	text-decoration: underline;
}

main.page article.supermodule > header ul.actions:not(.important) a:link,
main.page article.supermodule > header ul.actions:not(.important) a:visited,
main.page article.module > header ul.actions:not(.important) a:link,
main.page article.module > header ul.actions:not(.important) a:visited,
article.page.subscriptions > .main > article > header ul.actions:not(.important) a:link,
article.page.subscriptions > .main > article > header ul.actions:not(.important) a:visited
{
	color: var(--themeforeground);
	background-color: var(--themebackground);
}

.selectedformove,
.selectedforcopy
{
	position: relative;
}

.selectedformove:before,
.selectedforcopy:before
{
	display: flex;
	align-items: center;
	justify-content: center;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border: solid #67B021 0.5rem;
	background: rgba(255, 255, 255, 0.5);
	z-index: 1;
}

.selectedformove:after,
.selectedforcopy:after
{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	content: "You're moving this object";
	top: 0.5rem;
	right: 0.5rem;
	left: 0.5rem;
	color: #527D2D;
	background: #E2EFD5;
	z-index: 1;
	padding: 0.5rem 0.25rem;
}


.selectedforcopy:after
{
	content: "You're copying this object";
}

:lang(fi) .selectedformove:after
{
	content: "Olet siirtämässä tätä kohdetta";
}

:lang(fi) .selectedforcopy:after
{
	content: "Olet kopioimassa tätä kohdetta";
}

div.target
{
	box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
	padding: 0.25rem 0.5rem;
	display: inline-block;
	border-radius: var(--radius);
}

main > article.forum > .main > article.response
{
	margin-left: calc(0.5 * var(--discussion-icon-size));
}

article.forum > .main > .content + article
{
	margin-top: var(--gap);
}

.main article.forum.document.response > header > h1
{
	font-size: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.5 * var(--gap));
}

article.forum.document > header .person a
{
	display: flex; /* eat whitespace between the icon and person name */
	align-items: center;
}

article.forum.document > header .person img
{
	vertical-align: middle;
	width: var(--discussion-icon-size);
	height: var(--discussion-icon-size);
	border-radius: 50%;
	object-fit: cover;
	margin-right: calc(var(--hgap) - var(--linewidth) - 0.5 * var(--discussion-icon-size)); /* space between icon and person name */
	border: solid var(--themebackground) var(--linewidth);
	margin-left: calc(-1 * var(--hgap) - var(--linewidth) - 0.5 * var(--discussion-icon-size));
	z-index: 1;
}

main > article.forum.document > header .person img
{
	padding: 0;
	margin: 0;
	margin-right: calc(0.5 * var(--gap));
	height: 3rem;
	width: 3rem;
}

article.forum.document > header .person a:before
{
	/* fill top of the border with white */
	content: "";
	width: calc(var(--linewidth));
	height: calc(var(--discussion-icon-size) + 0.5 * var(--gap));
	top: 0; /* -1px;*/
	left: calc(-1 * var(--hgap) - var(--linewidth));
	background: var(--themebackground);
	display: block;
	position: absolute;
	z-index: 0;
}

article.forum.document.topic.reply article > header .person span
{
	font-size: 1rem;
}

article.forum article.response,
article.forum.reply article
{
	margin-left: 0;
	padding-left: var(--hgap);
	border-left: solid #aaf var(--linewidth);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-color: var(--linkcolor);
}

article.forum article.response.removed
{
	padding-top: 0;
	padding-bottom: 0;
}

article.forum article.response.removed time
{
	font-size: 1em;
}


.forum.content
{
	overflow: auto;
}

.forum .response article + article
{
	/* by default we render border between two non-module articles - we don't want that in discussion forum area */
}


.forum .response article.titleonly
{
	border: none;
}

article.forum article.response > header
{
	position: relative;
}

article.forum article.response > .main
{
	margin-top: 0;
}


article.response
{
	padding: 0;
	padding-left: calc(0.5 * var(--gap));
}

div.votetypes
{
	margin-left: 1rem;
}
div.post-votes-container form
{
	display: inline;
}

div.votes-container
{
	display: block;
	float: right;
}
div.votes-container button
{
	color: var(--reverselinkbackground);
    font-size: 1.5em;
    background-image: none;
    border-radius: unset;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}
div.votes-container div.votes-counter a,
div.votes-container div.votes-counter span
{
	padding: 0 0.5rem;
}
div.votes-container button
{
	border: none;
}
div.votes-container button.default
{
	background-color: transparent;
}

div.votes-container button.button-vote-up.thumb
{
	color: transparent;
	background: url(icon/thumb_up_outline.svg) no-repeat bottom;
}
div.votes-container button.button-vote-down.thumb
{
	color: transparent;
	background: url(icon/thumb_down_outline.svg) no-repeat bottom;
}

div.votes-container button:hover
{
	background-color: transparent;
}

div.votes-container div.votes-counter
{
	display: inline;
}
div.votes-container form a.showvoters
{
	display: block;
    font-size: 0.8rem;
    padding-right: 0.5rem;
}

dl.voters dt div.vote-number,
dl.voters dt div.person
{
	display: inline;
}
div[data-vote="-1"] {
	margin-left: -0.4rem;
}
div.votes-counter a {
	text-decoration: none;
	color: var(--themetextcolor);
}
div.votes-counter a:hover {
	text-decoration: underline;
	color: var(--linkcolor);
}

dl.voters dt
{
	margin-top: 1rem;
}

.voters-dialog .ui-dialog-titlebar,
.votes-error-dialog .ui-dialog-titlebar
{
	font-size: 1.3em;
	font-weight: bold;
}
.votes-error-dialog .error.ui-dialog-content
{
	font-weight: normal;
	background-color: #eee;
	box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5), 0 0 0.5rem rgba(181, 181, 181, 0.5);
	animation: none;
}

.voters-dialog .ui-dialog-buttonset .ui-button,
.votes-error-dialog .ui-dialog-buttonset .ui-button
{
	font-size: 0.95rem;
}

html.votepage div.upvote,
html.votepage div.downvote,
html.votepage div.removevote
{
	display: inline-flex;
}
html.votepage div.upvote form p.submitorcancel a,
html.votepage div.downvote form p.submitorcancel a
{
	visibility: hidden;
}

article.forum.titleonly > .main > article.response
{
	margin-top: 0rem;
	margin-right: 0rem;
}


article.forum.dialog .main article
{
	margin: 0;
	margin-left: calc(0.5 * var(--discussion-icon-size));
}

article article .main.frontpage
{
	padding: 0rem;
}

article.forum.topic.dialog label.context,
article.forum.response.dialog label.context
{
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
}

article.forum.topic.dialog article,
article.forum.response.dialog article
{
	border-radius: 0 0 var(--radius) var(--radius);
	border-radius: 0;
}

article.forum.topic.dialog article header,
article.forum.response.dialog article header
{
	padding: 0rem 1.0rem 0.5rem;
}
article.forum.topic.reply.dialog article header,
article.forum.response.reply.dialog article header
{
	padding: 0;
}
article article > header ul.actions.important
{
	clear: none;
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
	margin-top: 0.25rem;
}

img.minierror
{
	display: block;
	width: 70%;
	max-height: 50vh;
	max-width: 50vh;
	margin: auto;
	text-align: center;
}

header.subscriptions.list h1
{
	float: left;
	margin-top: 0;
}

header.subscriptions.list ul.actions
{
	margin-top: 0.3rem;
	margin-bottom: 0.5rem;
}

article article.document > header ul.actions.important
{
	background: transparent;
}

article article main > article
{
	margin-right: -0.75rem;
}

article > footer
{
	clear: both;
}

.create.new.service
{
	text-align: center;
	padding: 1rem;
}

.create.new.service .list
{
	display: inline-block;
	vertical-align: top;
	padding: 0rem 1rem;
}

.create.new.service .list ul,
.create.new.service .list li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

.createnew ul
{
	padding-left: 2rem;
}
.createnew li
{
	padding: 0;
	list-style-type: disc;
}

.createnew a.help:link,
.createnew a.help:visited,
.createnew a.help
{
	font-size: 0.8rem;
}

nav.phantom.create.content
{
	display: block;
	border: dashed var(--hairlinewidth) var(--themetextcolor);
	box-shadow: none;
	border-radius: var(--radius);
	padding: var(--gap) 0;
}

nav.phantom.create.content span,
nav.phantom.create.content a
{
	display: inline-block;
	margin: 0 var(--gap);
	text-decoration: none;
}

nav.phantom.create.content a
{
	font-weight: bold;
}

nav.phantom.create.content a:focus,
nav.phantom.create.content a:hover
{
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-skip-ink: all;
	background: unset;
}

.movehere > form
{
	border: dashed var(--hairlinewidth) var(--themetextcolor);
	box-shadow: none;
	border-radius: var(--radius);
	display: flex;
	justify-content: center;
	background-color: transparent;
	padding: 0.3rem 0.4rem;
	text-decoration: none;
}

main.systemperson article li.phantom a
{
	border-radius: var(--radius);
	display: flex;
	justify-content: center;
	color: #fff;
	background-color: #21891f;
	padding: 0.3rem 0.4rem;
	text-decoration: none;
}

.touchscreen nav.main li.phantom a > span,
.touchscreen .phantom.create.content a > span
{
	padding: 0.4rem 0.2rem;
}

.touchscreen nav.main a
{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}


nav.main li.phantom a:hover,
.phantom.create.content a:hover
{
	border-color: var(--themetextcolor);
	background-color: #1C77D2;
}

main nav.phantom,
div.movehere
{
	background: rgba(255, 255, 255, 0.5);
	border-radius: var(--radius);
}

.createnew ul,
.createnew li
{
	display: block;
	margin: 0;
	padding: 0;
}

.createnew li > div
{
	float: left;
	list-style-type: none;
	min-height: 8.5rem;
	min-width: 8.5rem;
	position: relative;
	display: block;
	margin: 0.5rem;
	padding: 0rem;
}

.createnew li > div > a
{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: solid #bbb 0.1rem;
	background-color: #fff;
	background-size: 5rem;
	background-repeat: no-repeat;
	background-position: 50% 40%;
	border-radius: var(--radius);
}

.createnew li > div a:hover
{
	border-color: #777;
	box-shadow: var(--hoverboxshadow);
	z-index: 0;
}

.createnew li > div a:focus
{
	z-index: 0;
}

.createnew li > div > a > span
{
	font-size: 0.9rem;
	position: absolute;
	bottom: 0.5rem;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	display: block;
	padding: 0rem 0.5rem;
}

.createnew li > div > a.help
{
	top: 0rem;
	right: 0rem;
	left: auto;
	bottom: auto;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border: solid #aaa 0.1rem;
	opacity: 1.0;
}

.createnew li > div > a.help:not(:hover)
{
	opacity: var(--opacity-nonessential);
}

.createnew li > div > a.help:hover
{
	box-shadow: var(--hoverboxshadow);
}

.createnew li > div > a.help
{
	background-image: url("icon/help-white.svg");
	background-size: 80%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: var(--linkcolor);
}

.createnew li > div > a.help:focus,
.createnew li > div > a.help:link,
.createnew li > div > a.help:visited
{
	border-radius: 0 var(--radius);
}

.createnew li > div > a.help > span
{
	display: none;
}

/* create new shortcuts */

nav.phantom.create.content a.page:before,
nav.phantom.create.content a.module:before,
nav.phantom.create.content a.document:before,
nav.phantom.create.content a.other:before
{
	display: inline-block;
	width: 2rem;
	height: 2rem;
	content: "";
	vertical-align: middle;
	background-size: auto 1.5rem;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
nav.phantom.create.content a.page:before { background-image: url("icon/page.svg"); }
nav.phantom.create.content a.textmodule:before { background-image: url("icon/text.svg"); }
nav.phantom.create.content a.commonexternalfileimage:before { background-image: url("icon/image.svg"); }
nav.phantom.create.content a.submissionfoldermodule:before { background-image: url("icon/submissionfolder.svg"); }
nav.phantom.create.content a.jitsimodule:before { background-image: url("icon/Poweredby_Jitsi_logo_grey_04_2020_grey.png"); }
nav.phantom.create.content a.other:before { background-image: url("icon/more-vertical.svg"); }

.createnew .systemmodulepage > div > a { background-image: url("icon/page.svg"); }
.createnew .textmodule > div > a { background-image: url("icon/text.svg"); }
.createnew .etherpadetherpadentry > div > a { background-image: url("icon/etherpad.svg"); }
.createnew .assignmentmodule > div > a { background-image: url("icon/assignment.svg"); }
.createnew .mathsassignmentmodule > div > a { background-image: url("icon/mathassignment.svg"); }
.createnew .submissionfoldermodule > div > a { background-image: url("icon/submissionfolder.svg"); }

.createnew .peersubmissionfoldermodule > div > a { background-image: url("icon/peersubmissionfolder.svg"); }
.createnew .formmodule > div > a { background-image: url("icon/formmodule.svg"); }
.createnew .formform > div > a { background-image: url("icon/form.svg"); }
.createnew .gallerymodule > div > a { background-image: url("icon/gallery.svg"); }
.createnew .commonexternalfileimage > div > a { background-image: url("icon/image.svg"); }

.createnew .forummodule > div > a { background-image: url("icon/forummodule.svg"); }
.createnew .forumforum > div > a { background-image: url("icon/forum.svg"); }
.createnew .calendarmodule > div > a { background-image: url("icon/calendar.svg"); }
.createnew .announcementmodule > div > a { background-image: url("icon/announcementmodule.svg"); }
.createnew .announcemententry > div > a { background-image: url("icon/announcement.svg"); }

.createnew .foldermodule > div > a { background-image: url("icon/folder.svg"); }
.createnew .commonexternalfileattachment > div > a { background-image: url("icon/file.svg"); }
.createnew .blogmodule > div > a { background-image: url("icon/blog.svg"); }
.createnew .blogentry > div > a { background-image: url("icon/blogentry.svg"); }
.createnew .linkmodule > div > a { background-image: url("icon/linklist.svg"); }

.createnew .rssreadermodule > div > a { background-image: url("icon/rss.svg"); }
.createnew .sketchboardsketchboard > div > a { background-image: url("icon/sketchboardio.svg"); }


.createnew .dikaiosmodule > div > a { background-image: url("icon/edustore.png"); }
.createnew .alfasoftmodule > div > a { background-image: url("icon/opinaika.png"); }
.createnew .mikrolinnamodule > div > a { background-image: url("icon/nettimoppi.png"); }
.createnew .redfoxdictionary > div > a { background-image: url("icon/redfox.png"); }
.createnew .redfoxgrammar > div > a { background-image: url("icon/redfox.png"); }
.createnew .sanomapromodule > div > a { background-image: url("icon/logo-sanoma-pro.svg"); }
.createnew .promentormodule > div > a { background-image: url("icon/promentor.png"); }
.createnew .eventmodule > div > a { background-image: url("icon/eventmodule.svg"); }
.createnew .assessmentmodule > div > a { background-image: url("icon/assessment.svg"); }
.createnew .ellibsmodule > div > a { background-image: url("icon/ellibs.png"); }
.createnew .orxtermodule > div > a { background-image: url("icon/orxter.png"); }
.createnew .jitsimodule > div > a { background-image: url("icon/Poweredby_Jitsi_logo_grey_04_2020_grey.png"); }

.createnew li > div > a > span
{
	overflow: hidden;
	text-overflow: ellipsis;
}

h1, h2, h3
{
	padding: 0;
	margin: 0.5rem 0rem;
	font-size: 1.2rem;
}

/* temporary BETA label for math assignment module */
.createnew .mathsassignmentmodule > div > a:first-child:after
{
	content: "BETA";
	background: #e33;
	color: #fff;
	display: inline-block;
	margin: 0rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius) 0rem;
	font-size: 0.8rem;
	font-weight: bold;
}

.mathsassignmentmodule.addmathsassignmentanswer .main .description
{
	margin-bottom: 0.75rem;
}

.accordion h1
{
	margin-top: 0.1rem;
	padding-top: 0.5rem;
	padding-left: 0.5rem;
}

h1.link a[target="_blank"]:after,
ul.responsesummary article.link div.link > a[target="_blank"]:after
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	background-image: url("icon/openinnew.svg");
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 1rem;
	height: 1rem;
}

article > .main
{
	overflow: auto;
	margin: calc(-0.5 * var(--gap)) calc(-1.0 * var(--gap));
	padding: calc(0.5 * var(--gap)) calc(1.0 * var(--gap));
	clear: both; /* avoid pushing this element next to floated content in some edge cases when top margin is negative */
}

/* Some focusable items have zero margin by default and their outlines will be hidden by .main overflow:auto unless we add extra margin if any of those are at the end: */
article > .main details:last-child,
article > .main > .buttons:last-child,
article > .main > form:last-child
{
	margin-bottom: 0.5rem;
}

article.systemperson.page > .main
{
	/* allow box-shadow to leak here */
	overflow: visible;
}

/* content actions */

nav.content.actions
{
	padding: 0.25rem var(--gap);
	background-color: var(--thememenubackground);
	color: var(--thememenuforeground);
}

details.privacy nav.content.actions
{
	margin: -0.5rem calc(-1 * var(--gap)) 0; /* use negative margins to fill background from the borders of details element */
}

.actions.feed a:not(:hover),
.actions.plaintext a:not(:hover),
.actions.viewer a:not(:hover),
.actions.download a:not(:hover)
{
	opacity: var(--opacity-nonessential);
}

ul.actions.important:not(:hover) a
{
	opacity: 1.0;
}

aside > article > header,
aside > article > .main,
aside > article > footer
{
	font-size: 0.8rem;
}

main.systemperson ul.pages,
main.systemperson ul.pages li,
main.systemperson ul.links,
main.systemperson ul.links li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

main.systemperson ul.pages,
main.systemperson ul.links
{
	clear: left;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: -0.5rem;
}

main.systemperson ul.pages li,
main.systemperson ul.links li
{
	min-width: 15rem;
	flex: 1 1 15rem;
	display: flex;
	align-items: stretch;
}


main.systemperson ul.pages a,
main.systemperson ul.links > li > a
{
	border: solid transparent 0.1rem;
	padding: 0.5rem;
	margin: 0.5rem;
	display: block;
	width: 100%;
	text-decoration: none;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
}

main.systemperson ul.pages img.icon
{
	margin-right: 0.5rem;
}

main.systemperson ul.pages a:hover,
main.systemperson ul.pages a:focus,
main.systemperson ul.links a:hover,
main.systemperson ul.links a:focus
{
	border-color: var(--linkcolor);
}

main.systemperson article li.phantom a:hover,
main.systemperson article li.phantom a:active
{
	border-color: #21891f;
	border-style: solid;
	background-color: #4ed24b;
	color: #000;
}

ul.details .actions
{
	display: inline-block;
	vertical-align: middle;
}

ul.details li
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.actions ul,
.actions li
{
	margin: 0;
	padding: 0;
	display: inline;
	list-style: none;
}

.actions li a,
.actions.feed a:link,
.actions.plaintext a:link,
.actions.viewer a:link,
.actions.download a:link
{
	color: var(--themetextcolor);
	text-decoration: none;
}

.actions li a:hover,
.actions li a:active,
.actions.feed a:hover,
.actions.feed a:active,
.actions.plaintext a:hover,
.actions.plaintext a:active,
.actions.viewer a:hover,
.actions.viewer a:active,
.actions.download a:hover,
.actions.download a:active
{
	text-decoration: underline;
	text-decoration-skip: ink;
}

.actions li.button a:hover,
.actions li.button a:active
{
	text-decoration: none;
}

.files > dt > .actions
{
	display: inline;
	font-size: 0.8rem;
	vertical-align: middle;
}

.main > article > header ul.actions.important
{
	margin-left: 0.25rem;
}

.main > article h1.privacy
{
	vertical-align: middle;
	margin-right: 0.3rem;
}
article > nav.actions > ul.actions
{
	margin-top: 0.3rem;
}

nav.actions ul.actions
{
	clear: left;
	float: left;
}

nav.actions:after
{
	display:block;
	content: "";
	clear: left;
}

main > article > header ul.actions.important
{
	/* try to push important buttons to right */
	flex: 1 1 auto;
	text-align: right;

	display: flex;
	gap: 0.25rem;
	justify-content: flex-end;
}

article.privacy form
{
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}

div.deadline.time
{
	font-size: 0.8rem;
}

header .actions a
{
	display: inline-block;
	margin-right: 0.5rem; /* empty space between actions */
	margin-top: 0.25rem;
	padding: 0.25rem 0.5rem;

	color: var(--themetextcolor);
	background: transparent;

	border: solid var(--themetextcolor) 0.05rem;
	border-radius: var(--radius);
}

header .actions a img
{
	font-size: 1rem;
}

header .actions a:hover
{
	box-shadow: var(--focusboxshadow);
	text-decoration: none;
}

header .actions .create a:hover
{
	box-shadow: 0 0 0 0.20rem rgba(1, 66, 0, 0.75), 0 0 0 0.35rem rgba(255,255,255, 0.65);;
}

header .actions a:hover:before,
header .actions a:focus:before
{
	box-shadow: none;
}

header .actions.important a
{
	margin-right: 0;
}

header .actions.important a:before
{
	display: none;
}

.actions.important a:visited,
.actions.important a:link,
.actions.important a
{
	display: inline-block;
	color: var(--reverselinkforeground);
	font-weight: bold;
	background-color: var(--reverselinkbackground);
	padding: 0.4rem 0.9rem;
	margin: 0;
	vertical-align: middle;
	box-sizing: border-box;
	border: none;
	border-radius: var(--radius);
	min-height: var(--buttonheight);
	display: inline-flex;
	align-items: center;
}

.actions.important li.highlight a
{
	background-color: var(--linkcoloremphasized);
	color: #fff;
}

/* display icons in action buttons unless really narrow display */
@media all and (min-width:10rem)
{
	.actions li.modify a,
	.actions li.about a,
	.actions li.create a,
	.actions li.organize a,
	.actions li.sitemap a,
	.actions li.search a,
	.actions li.settings a,
	.actions li.privacy a,
	.actions li.remove a,
	.actions li.return a,
	.actions li.summary a,
	.actions li.move a,
	.actions li.copy a,
	.actions li.restore a,
	.actions li.evaluations a,
	.actions.viewer a,
	.actions li.upload a,
	.actions.download a,
	.actions li.assessmentframework a,
	.actions li.learningtracking a,
	.actions.feed a,
	.actions.plaintext a,
	.actions li.joinsettings a,
	.actions li.history a
	{
		padding-left: 1.8rem; /* reserve space for the action icon */
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-right: 0.5rem;

		background-repeat: no-repeat;
		background-position: 0.4rem 50%;
		background-position: 0.4rem 50%, 0 0;
		background-size: 1.1rem;
		background-size: 1.1rem, 100% 100%;
		display: inline-block;
	}
	.actions li.button:not(.iconless) a
	   {
		padding: var(--buttonpadding);
		padding-left: 2.8rem; /* reserve space for the action icon */
		background-repeat: no-repeat;
		background-position: 1.2rem 50%;
		background-position: 1.2rem 50%, 0 0;
		background-size: 1.1rem;
		background-size: 1.1rem, 100% 100%;
		display: inline-block;
	   }


	/* special extra styles when action is displayed as important action (always visible action) */
	.actions.important li.create a,
	.actions.important li.move a,
	.actions.important li.copy a
	{
		padding-left: 2.0rem;
		background-position: 0.5rem 50%;
		background-position: 0.5rem 50%, 0 0;
	}

	.actions.important li.create a
	{
		background-image: url("icon/create-white.png");
	}

	.actions.important li.move a
	{
		background-image: url("icon/move-white.png");
	}

	.actions li.joinsettings a
	{
		background-image: url("icon/ratas.png");
	}
	.actions li.modify a
	{
		background-image: url("icon/modify.png");
	}
	.actions li.modify.button a
	{
		background-image: url("icon/enable-modify-white.png");
	}
	.actions li.about a
	{
		background-image: url("icon/info.svg");
	}
	.actions li.create a
	{
		background-image: url("icon/create.png");
	}
	.actions li.create.button a
	{
		background-image: url("icon/create-white.png");
	}
	.actions li.organize a
	{
		background-image: url("icon/organize.png");
	}
	.actions li.sitemap a
	{
		background-image: url("icon/sitemap.png");
	}
	.actions li.search a
	{
		background-image: url("icon/search.png");
	}
	.actions li.settings a
	{
		background-image: url("icon/preferences.png");
	}
	.actions li.privacy a
	{
		background-image: url("icon/lock.png");
	}
	.actions li.remove a
	{
		background-image: url("icon/remove.png");
	}
	.actions li.return a
	{
		background-image: url("icon/return.png");
	}
	.actions li.summary a
	{
		background-image: url("icon/summary.png");
	}
	.actions li.move a
	{
		background-image: url("icon/move.png");
	}
	.actions li.copy a
	{
		background-image: url("icon/copy.png");
	}
	.important.actions li.copy a
	{
		background-image: url("icon/copy-white.png");
	}

	.actions li.restore a
	{
		background-image: url("icon/trash.png");
	}
	.actions li.evaluations a
	{
		background-image: url("icon/evaluation.png");
	}
	.actions li.assessmentframework a
	{
		background-image: url("icon/files.png");
	}
	.actions li.learningtracking a
	{
		background-image: url("icon/stats.svg");
	}
	.actions li.upload a
	{
		background-image: url("icon/upload.svg");
	}
	.actions li.upload.button a
	{
		background-image: url("icon/upload-white.svg");
	}
	.actions.viewer a
	{
		background-image: url("icon/slideshow.svg");
		background-size: 1.5rem;
	}
	.actions.download a
	{
		background-image: url("icon/download.svg");
	}
	.actions.feed a
	{
		background-image: url("icon/feed.png");
	}
	.actions.plaintext a
	{
		background-image: url("icon/files.png");
	}
	.actions li.history a
	{
		background-image: url("icon/history.png");
	}
	.actions li.chooseperson.button a
	{
		background-image: url("icon/create-white.png");
	}
}

.actions.important li.subscribe a,
.actions.important li.share a,
.actions.important li.metadata a,
.actions.important li.expandmaincontent a
{
	color: transparent;
	width: var(--buttonheight);
	height: var(--buttonheight);
	background-position: 50%;
	background-size: 1rem 1rem;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 1.5rem;
	white-space: nowrap;
	border-radius: 50%;
}

.actions.important li.subscribe a
{
	background-image: url("icon/staroff.svg");
}
.actions.important li.subscribe.highlight a
{
	background-image: url("icon/staron.svg");
}
.actions.important li.share a
{
	background-image: url("icon/share.svg");
}

.actions.important li.metadata a
{
	background-image: url("icon/info-white.svg");
}

/*

We move article actions to pop-up menus if possible, additional styles for those:

Note that if article.haspopupmenus matches, the inline action menus have been
moved to JS popup menus and the whole action list has reparented to <body> but
the original locations now contains the menu toggle button.

*/

nav.actions:not(.content),
nav.actions:not(.content) ul.actions:not(.important)
{
	animation: fadeinwithdelaynospace 3.5s ease;
}

.haspopupmenus nav.phantom.create.content,
.haspopupmenus nav.actions,
.haspopupmenus nav.actions ul.actions
{
	animation: none;
}

article.haspopupmenus > header > .actions
{
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

article.haspopupmenus > header
{
	display: flex;
	flex-wrap: wrap;
	gap: 0em 0.5rem;
	justify-content: start;
	align-items: center;
}

section article.haspopupmenus > header h1,
main > article article.haspopupmenus > header h1,
article article.haspopupmenus > header div.header
{
	flex: 1 1 auto;
	flex-basis: 80%; /* fallback if following more exact calculation doesn't work */
	flex-basis: calc(max(5rem, 100% - 4rem)); /* min 5rem, otherwise just enough to fit the popup menu toggle, too */
}

section article.haspopupmenus > header nav.actions
{
	flex: 0 0 auto;
	align-self: baseline;
}

main.page article.supermodule.haspopupmenus > header,
main.page article.module.haspopupmenus > header
{
	padding-right: calc(0.5 * var(--gap));
}


/* special case for modules to allow text to wrap the toggle button – this is bad for accessibility for we cannot do better with real world user agents */
article.haspopupmenus.floattoggle > header
{
	display: block;
}

article.haspopupmenus.floattoggle > header > nav.actions
{
	float: right;
	position: relative;
	display: block;
	top: -0.15rem; /* visual offset to make it look centered on single line module header */
}


article.haspopupmenus > header > .actions
{
	display: flex;
	align-self: center;
	flex: 1 1 auto;
	gap: 0.25rem;
}

.main article.haspopupmenus.forum.response > header > .actions
{
	align-self: baseline;
}


article.haspopupmenus > header > h1
{
	min-width: 44px; /* min accessible size */
	flex: 0 0 auto;
}

article.haspopupmenus > header:after,
article.haspopupmenus > header nav.actions:after
{
	display: none;
}

article.haspopupmenus > header nav.actions a
{
	display: block;
}

article.haspopmenus > header nav.actions ul.actions
{
	float: none;
	clear: none;
}

article.haspopupmenus > header > nav.actions .menutoggle
{
	user-select: none;
}

article.haspopupmenus > header > nav.actions ul.important
{
	align-self: center;
}

article.haspopupmenus > header .menutoggle
{
	border: solid var(--linewidth) transparent;
	border-radius: var(--buttonradius);
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	background-color: rgba(222,222,222, 0.8);
	margin: 0;
	padding: 0;
	background-image: url("icon/more-vertical.svg");
	background-position: 50% 50%;
	background-size: 2rem;
	background-repeat: no-repeat;
}

article article.haspopupmenus:not(.module) > header .menutoggle
{
	background-color: rgba(255,255,255, 0.8);
}

article.haspopupmenus > header .menutoggle:hover,
article.haspopupmenus > header .menutoggle:active
{
	background-color: #fff;
}

.actions.important li.create a
{
	border-radius: 1.5rem;
	color: #fff;
	background-color: #21891f;
	background-position: 0.75rem;
	padding-left: 2.25rem;
	padding-right: 1rem;
}

article.haspopupmenus.popupmenuopen > header .menutoggle,
article article.haspopupmenus.popupmenuopen:not(.module) > header .menutoggle
{
	box-shadow: none;
	background-color: rgba(192,192,192, 0.7);
}

article.haspopupmenus > header .menutoggle span
{
	color: transparent; /* this label is only used for accessibility */
}

article.haspopupmenus
{
	transition: box-shadow 0.5s, border-radius 0.5s;
	border-radius: var(--radius);
}

article.hoverpopupmenutoggle
{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	box-shadow: var(--prefocusboxshadow);
}


article.popupmenuopen
{
	box-shadow: var(--focusboxshadow);
}

.forum .response article.popupmenuopen,
article.forum.topic article.popupmenuopen,
article.forum.reply article.popupmenuopen
{
	border-radius: var(--radius);
}

.menu.popup
{
	position: absolute;
	z-index: 15;
	top: 4rem;
	left: 0;
	display: block;

	color: var(--themeforeground);
	background: var(--themebackground);

	padding: 0;
	margin: 0;
	box-shadow: var(--boxshadow);

	border: solid var(--hairlinewidth) var(--themesubduedforeground);
	border-radius: var(--radius);

	min-width: 44px;

	opacity: 1;
	transform: scale(1.0) translateY(0) translateX(0);
	transition: transform 0.2s, opacity 0.2s;
}

.menu.popup.hidden
{
	opacity: 0;
	transform: scale(0.8) translateY(-1rem) translateX(0.5rem);
	pointer-events: none;
	user-select: none;
}

.menu.popup li
{
	display: block;
}

.menu.popup li
{
	padding: 0;
}

.menu.popup li a
{
	display: block;
	padding: 0.75rem 1.5rem;
	padding-left: 3rem;
	background-position: 1rem 50%;
	text-decoration: none;
	filter: var(--themefilter);
}

.menu.popup li a.tabcapture,
.menu.popup li a.tabcapture:focus
{
	display:block;
	padding: 0;
	box-shadow: none;
}

.menu.popup li a:hover,
.menu.popup li a:focus
{
	box-shadow: var(--focusboxshadow);
}

.menu.popup li a:active
{
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.actions.feed,
.actions.plaintext,
.actions.viewer,
.actions.download
{
	margin-top: 0.5rem;
}

ul.organize,
ul.organize li
{
	margin: 0;
	padding: 0;
	list-style: none;
	word-wrap: break-word;
}
ul.organize
{
	margin-top: 2rem;
	position: relative;
}

ul.organize img.icon,
ul.organize img.thumbnail
{
	margin-right: 0.5rem;
	width: auto;
	border-radius: min(var(--radius), 4px);
}

ul.organize li.jsorganize span
{
	overflow: auto;
	align-self: center;
}

ul.organize li.jsorganize
{
	/* reserve space for the action icon */
	padding-left: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 3rem;

	background-image: url("icon/grip-lines-solid.svg");
	background-repeat: no-repeat;
	background-position: 0.4rem 50%;
	background-position: right 1rem center;
	background-size: 1rem, 100% 100%;
	background-color: rgba(255, 255, 255, 1);

	border: solid var(--themeforeground) var(--linewidth);
	border-radius: var(--radius);

	display: flex;
}

ul.organize li.jsorganize
{
	margin-bottom: 1rem;
}

ul.organize li.jsorganize:hover
{
	box-shadow: var(--hoverboxshadow);
	cursor: row-resize;
}

/*"Popout" effect for Drag&Drop organize active component*/
ul.organize li.ui-sortable-helper
{
	transform: scale(1.02);
}

ul.connection,
ul.access,
ul.registrations,
ul.restore.items,
ul.persons
{
	padding: 0;
}

ul.registrations,
ul.restore.items
{
	margin: 0;
}

ul.connection li,
ul.access li,
ul.registrations li,
ul.restore.items li,
ul.persons li
{
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.connection ul.actions,
ul.connection ul.actions li,
ul.access ul.actions,
ul.access ul.actions li,
ul.registrations ul.actions,
ul.registrations ul.actions li
{
	margin: 0;
	padding: 0;
	display: inline;
}

ul.connection ul.actions,
ul.access ul.actions,
ul.registrations ul.actions
{
	clear: right;
	float: right;
	max-width: 100%;
	font-size: 0.8rem;
	position: relative;
	top: 0.5rem;
}

ul.buttonslist
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin: var(--gap) 0 0 0;
}

ul.buttonslist,
ul.buttonslist li
{
	padding: 0;
	list-style: none;
}

aside ul.buttonslist
{
	flex-direction: column;
}

a.resourcelink:link,
a.resourcelink:visited,
a.resourcelink,
a.button:link,
a.button:visited,
a.button
{
	padding: var(--buttonpadding);
	display: inline-block;
	margin-top: 0.25rem;
}

@media all and (min-width:60rem)
{
	aside ul.buttonslist li a.button,
	aside ul.buttonslist li span.button
	{
		display: block; /* render one button per line */
		text-align: center;
	}
}

ul.extauthservices,
li.extauthservice
{
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.extauthservices
{
	margin: 0 -0.5rem; /* our nested flex children have 0.5rem margin so we need to compensate here */
	margin-top: 0.75rem;
}

li.extauthservice
{
	display: inline-block;
	margin-bottom: 0.75rem;
}

/*@media all and (max-width:30rem)
{
	ul.extauthservices li.extauthservice a:link
	{
		white-space: normal;
		text-align: center;
		width: 100%;
		padding: 0.3rem 0rem;
		margin-right: 0rem;
	}
}*/

body.person .maincontent aside.sidecontent
{
	display: none;
}

.shortened
{
	overflow: hidden;
	height: 10rem;
	position: relative;
	display: block
}

.shortened:after
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3rem;
	content: "";
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	z-index: 1;
}

div.shortenedfooter
{
	border-top: solid var(--linkcolor) var(--hairlinewidth);
	text-align: center;
	opacity: var(--opacity-nonessential);
	display: flow-root;
}

div.shortenedfooter a.showmore::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f103";
}

div.shortenedfooter a.showmore
{
	text-decoration: none;
	color: var(--linkcolor);
	border-radius: 0 0 var(--bigradius) var(--bigradius);
	border: var(--hairlinewidth) solid;
	border-top: none;
	padding: 0.2rem 0.8rem;
	display: inline-block;
}

div.shortenedfooter:hover
{
	cursor: pointer;
	opacity: 1;
}

div.shortenedfooter:hover a.showmore
{
	color: var(--reverselinkforeground);
	background: var(--reverselinkbackground);
}

ul.registrations > li
{
	padding: 0.5rem 0.5rem;
}

ul.registrations > li + li
{
	border-top: solid var(--themetextcolor) 0.1rem;
}


ul.connection :link,
ul.connection :link:hover,
ul.connection :link:active,
ul.connection :link:visited
{
	text-decoration: none;
}

ul.access + div.title.h1
{
	margin-top: 1rem;
}

ul.access + ul.access
{
	margin-top: 1.5rem;
}

ul.access + div.jsselectall
{
	margin-top: 1.5rem;
}

/* generic icon in content area, usually with a link to a service */
img.icon
{
	vertical-align: middle;
	width: var(--icon-size);
	height: var(--icon-size);
	border-radius: 50%;
	object-fit: cover;
	border: none;
}

a img.icon
{
	box-shadow: var(--buttonboxshadow);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
}

.profile.newentry ul.privacy,
.profile.newentry ul.privacy li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

article.profile.newentry
{
	margin-bottom: 1rem;
}

article.profile.entry header img.icon,
article.profile.entry .comments .new.comment img.icon
{
	position: absolute;
	left: 0rem;
	height: 2rem;
}

article.profile.entry header div.title.h3,
article.profile.entry header h3
{
	font-size: 1.0rem;
	padding: 0;
	margin: 0;
}

article.profile.entry .comments
{
	margin-top: 1.0rem;
	padding-left: 3rem;
	position: relative;
}

article.profile.entry .comments .new.comment p
{
	padding: 0.2rem 0rem;
}

article.profile.entry .comments header img.icon,
article.profile.entry .comments .new.comment img.icon
{
	left: 0.75rem;
}

article.profile.entry .comments article
{
	padding: 0.25rem;
}

.privatemessages.removeuser.action
{
	display: inline-block;
	font-size: 0.8rem;
}
article.privatemessages.thread
{
	padding: 0.9rem;
	clear: both;
}
header > h1 > div.authors.privatemessages
{
	display: inline;
	font-size: 0.6rem;
}
article.privatemessages.list a.bubble
{
	color: var(--themetextcolor);
	text-decoration: none;
}

article.privatemessages.list a.bubble:hover > div
{
	background-color: #fff;
}
article.privatemessages.list a.bubble:hover > div:after
{
	border-top-color: #fff;
	border-bottom-color: #fff;
}


article.privatemessages.list .reply,
article.privatemessages.list .markasread
{
	margin-right: 0.5rem;
}

article.privatemessages.list > a,
article.privatemessages.list > a:link,
article.privatemessages.list > a:visited
{
	display: flex;
	width: 100%;
	text-decoration: none;
	padding: 0.5rem 0;
}
article.privatemessages.list > a:hover
{
	background-color: var(--privatemessagebackground);
}

article.privatemessages.list > a > .icon
{
	flex: 0 0 auto;
}

article.privatemessages.list > a .content > .privatemessage.title
{
	display: flex;
	justify-content: space-between;
}

article.privatemessages.list .authors
{
	font-size: 1rem;
}

article.privatemessages.list .privatemessage.body
{
	display: flex;
	justify-content: space-between;
}

article.privatemessages.list .privatemessage.body > .unread,
article.submissionfolder footer .responses > .count,
article.form.module footer .responses > .count,
.highlight.count
{
	display: inline-block;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	border-radius: 50%;
	height: 1.25rem;
	min-width: 1.25rem;
	padding: 0.25rem;
	margin-left: calc(0.5 * var(--gap));
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4rem;
}

article.privatemessages.list .privatemessage.body .content
{
	font-size: 0.8rem;
}

article.privatemessages.list > a .content > .privatemessage.title time
{
	font-size: 0.8rem;
}
article.privatemessages.list .privatemessage.title > time,
article.privatemessages.list > a .content > .privatemessage.title time
{
	opacity: var(--opacity-nonessential);
	display: inline-block;
	min-width: 6.5rem;
}

article.privatemessages.list > a > .content
{
	margin: 0 calc(0.5 * var(--gap));
	flex-grow: 1;
}
article.privatemessages.unread
{
	/*border: solid var(--themetextcolor) 0.06rem;*/
	font-weight: 800;
	background-color: var(--privatemessagebackground);
}

div.recipientrow > a
{
	padding-left: 1rem;
}

.privatemessage.title > .authors,
.privatemessage.title > .time,
.privatemessage.title > .count,
.privatemessage.title > .actions
{
	display: inline;
}
.privatemessage.title > time
{
	font-size: 0.8rem;
	white-space: normal;
}

.privatemessage.title > .count,
.privatemessage.title > .count > a
{
	color: #8d8d8d;
}
.privatemessage.title > .count.unread > a
{
	color: var(--themetextcolor);
}
.privatemessage.title > .count:before
{
	content: "( ";
}
.privatemessage.title > .count:after
{
	content: " )";
}
.privatemessage.title.right
{
	text-align: right;
}

.privatemessage div.authors.right
{
	text-align: right;
}

.privatemessage.nomembers
{
	padding: 1rem 0.5rem 1rem 2.2rem;
	background-image: url('icon/ic_sds.svg');
	background-size: 2rem 2rem;
	background-position: 0;
	background-repeat: no-repeat;
}
.privatemessage.bubble
{
	position: relative;
	margin-top: 0.7rem;
	max-width: 65%;
}
.privatemessages.list .privatemessage.bubble
{
	max-width: 100%;
}

.privatemessage.bubble > .content
{
	padding: 0.5rem;
	background: var(--privatemessagebackground);
	color: var(--privatemessagecolor);
}

.privatemessage.bubble > .content > .authors
{
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.privatemessage.bubble > .content > .authors a
{
	text-decoration: none;
}

.privatemessage.bubble.left
{
	margin-left: 0;
	float: left;
}

.privatemessage.bubble.right
{
	margin-right: 0;
	float: right;
}
.privatemessage.bubble.right > .content
{
	background: var(--privatemessagebackgroundmyself);
	color: var(--privatemessagecolormyself);
}

.privatemessage.bubble.right > .content a,
.privatemessage.bubble.right > .content a:link,
.privatemessage.bubble.right > .content a:visited
{
	color: var(--privatemessagecolormyself);
}

.systemperson.messages div.separator,
.messages div.privatemessage.thread
{
	clear: both;
}

.messages .privatemessages.list
{
	border-top: 0.05rem solid var(--hairlinecolor);
}

.privatemessage .actions li.remove a,
.messages header .actions li.remove a
{
	background-image: url("icon/remove.png");
	filter: invert(20%) sepia(52%) saturate(4315%) hue-rotate(339deg) brightness(83%) contrast(92%);
}

div.message.participantlist
{
	display: inline-block;
	font-size: 0.9rem;
	padding: 0.25rem 0.45rem 0.25rem 0.25rem;
}
div.message.participantlist strong
{
	font-weight: bold;
}
div.message.participantlist span.paticipants.title
{
	font-weight: normal;
}

.main > .comments
{
	margin-top: 1rem;
	margin-bottom: 1px; /* workaround Google Chrome 90 overflowing the content for yet unknown reason - seems to be related to font size in aside */
}

article.response.removed
{
	opacity: var(--opacity-nonessential);
}

article.commoncomment.removed div.main
{
	opacity: var(--opacity-nonessential);
	font-style: italic;
}
.comments > article.commoncomment + article.commoncomment
{
	margin-top: calc(2 * var(--gap));
}

.comments > article.commoncomment
{
	padding: var(--gap);
	margin-top: var(--gap);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
	background-color: #fff;
	color: var(--themetextcolor);
	position: relative;
	border-radius: var(--radius);
}

.comments > article.commoncomment.mycomment
{
	background-color: var(--secondarycontent-background-color);
}

.comments > article.commoncomment:before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f0d8';
	font-size: 2.5rem;
	filter: drop-shadow(0px -1px 0 #dbdbdb);
	position: absolute;
	top: -2.3rem;
	left: 2rem;
	right: 0;
	z-index: 2;
	color: #fff;
}

.comments > article.commoncomment.mycomment:before
{
	position: absolute;
	left: auto;
	right: 2rem;
	color: #f5f5f5;
}

article.commoncomment > header > .header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: calc(0.5 * var(--gap));
}

article.commoncomment.mycomment > header > .header
{
	justify-content: end;
}

article.commoncomment.mycomment > header > .header > div
{
	display: inline-block;
	text-align: right;
}

article.new.comment form .t
{
	margin-top: 0;
}
article.new.comment
{
	margin-top: var(--gap);
	background-color: var(--secondarycontent-background-color);
	color: var(--themetextcolor);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
	border-radius: var(--radius);
	padding: var(--gap);
}

a.messages
{
	padding-left: 1.75em;
	background-repeat: no-repeat;
	background-image: url(icon/messages.svg);
	background-size: 1.25em 1.25em;
	background-position: 0% 50%;
	display: inline-block;
	margin-top: 0.5rem;
}

/* dropdown styles from ui/ux project */

div.bannerdropdownmain
{
	position:absolute;
	bottom:1rem;
	left:1rem;
}
div.bannerdropdownmain .dropdown > button::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f030";
}

.dropdown
{
	position: relative;

}
ul.links .dropdown
{
	padding: 0.5rem 0.5rem 0.5rem 0;
	left: var(--dropdown-toggle-width-neg);
}

.dropdown > .dropdown-toggle.remove:hover
{
	box-shadow: none;
	background-image:url("icon/trashbin_white.svg");
	background-color: var(--themeforeground);
}

.dropdown > .dropdown-toggle.remove
{
	height: 100%;
	width: var(--dropdown-toggle-width);
	align-items: center;
	padding: 0;
	margin: 0;
	background-color: transparent;
	background-image:url("icon/trashbin.svg");
	background-position: 50%;
	background-size: 1.5rem 1.5rem;
	background-repeat: no-repeat;
	border: none;
	box-shadow: none;
}

.dropdown > .dropdown-toggle.remove > img
{
	vertical-align: middle;
	height: 2.0rem;
	border: none;
	width: 100%;
}

.dropdown > .dropdown-menu
{
	position: absolute;
	display: none;
	list-style: none;
	background: #fff;
	left: 0;
	top: calc(100% - 0.5rem);
	float: left;
	text-align: left;
	background-clip: padding-box;
	padding: 0;
	margin: 0;
	min-width: 15rem;
	z-index: 10;
	box-shadow: var(--boxshadow);
	border: var(--hairlinewidth) solid rgba(0,0,0,.15);
}

.dropdown > .dropdown-menu > li, main.systemperson ul.links .dropdown > .dropdown-menu > li
{
	min-width: 1rem;
	display: flex;
}

.dropdown > .dropdown-menu-toleft
{
	left: auto;
	right: calc(0% + 0.5rem);
}

.dropdown-menu > li > button, .dropdown-menu > li > a
{
	display: block;
	clear: both;
	white-space: nowrap;
}

.dropdown-menu > li > a
{
	display: flex;
	align-items: center;
	min-height: 2.5rem;
	text-decoration: none;
}

.dropdown > .dropdown-menu >li > .dropdown-item:hover
{
	color: var(--reversethemeforeground);
	text-decoration: none;
	background-color: var(--reversethemebackground);
	border-radius: 0;
}

.dropdown > .dropdown-menu >li > .dropdown-item
{
	width: 100%;
	padding: .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	margin: 0;
}

main.systemperson ul.links > li > a
{
	margin: 0.5rem 0 0.5rem 0.5rem;
	padding-right: var(--dropdown-toggle-width);
}

/*div containing results*/
ul.nav-tabs > li.nav-item > a,
ul.nav-tabs > li.nav-item > a:link,
ul.nav-tabs > li.nav-item > a:visited
{
	text-decoration: none;
	white-space: nowrap;
}

.searchresults
{
	display: flex;
	flex-direction: column;
}

.searchnav .searchresults
{
	max-height: 70vh;
	max-height: calc(100vh - 14rem);
	overflow: auto;
}

/*list item (div)*/
.searchresult
{
	margin: 1rem 0 .5rem 0;
	padding: 0 0 0 1rem;
}
.searchform.row
{
	position: relative;
}
.searchinfotext
{
	font-size: 1.25rem;
	color: #9b9b9b;
}

.searchnav .searchresultscontainer
{
	position: absolute;
	background: #fff;
	left: 1rem;
	top: 100%;
	top: calc(100% - 0.5 * var(--gap));
	right: 1rem;
	border: var(--linewidth) solid var(--themeforeground);
	border-top: var(--linewidth) solid var(--themeforeground);
	padding: .5rem;
	border-radius: var(--radius);
	box-shadow: var(--boxshadow);
}

#showsearch
{
	display: none;
}

.searchactive
{
	display: flex;
	align-self: stretch;
	align-items: center;
}

.searchnav .closesearch
{
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 2.2rem;
	height: 2.2rem;
	background-color: rgba(222,222,222, 0.8);
	box-shadow: none;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button.closesearch:hover:not(:disabled)
{
	box-shadow: var(--hoverboxshadow);
}

.searchnav .searchresultscontainer .searchresultsbanner p.searchinfotext
{
	display: inline-block;
	margin: 0;
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest
{
	text-decoration: underline;
}

.suggestedwords
{
	color:var(--themeerror);
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest:first-of-type
{
	margin-left: 0.1em;
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest,
.searchnav .searchresultscontainer .searchresultsbanner a.advancedsearchlink
{
	margin-left: 0.5rem;
	display: inline-block;
}

.searchnav .searchinfotext,
.searchnav .highlightsearchword
{
	color: #002b54;
	font-weight: 600;
	font-size: 1.5rem;
}

.highlightsearchword
{
	font-weight: 400;
	color: #000;
}

.searchresults .nav-item > a > span::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}
.searchresults .nav-item > a > span.persons::before
{
	content: "\f0c0";
}
.searchresults .nav-item > a > span.documents::before
{
	content: "\f15b";
}

.searchiconlabel
{
	position: absolute;
	top:50%; /* relative to parent */
	transform: translateY(-50%); /* relative to self */
	margin-left: 0.5rem;
	z-index: 1;
}

.searchiconlabel svg:hover
{
	transform: scale(1.1) rotate(-10deg);
}

.searching .searchiconlabel svg
{
	animation: smoothwobble 3s 20;
	border-radius: 50%;
	background: var(--themebackground);
}

@keyframes smoothwobble
{
	from, to
	{
		transform: translate(0, 0) rotate(0deg);
	}

	25%
	{
		transform: translate(-0.1rem, -0.15rem) rotate(-10deg);
	}

	50%
	{
		transform: translate(0.25rem, 0rem) rotate(0deg);
	}

	75%
	{
		transform: translate(-0.1rem, 0.15rem) rotate(10deg);
	}
}

.searchnav .searchdocuments input[type="search"]
{
	max-width: 20rem;
	width: 100%;
}

nav.global .searchdocuments span.error
{
	position: absolute; /* escape from the grid area */
	animation: none;
}

.searchdocuments input[type="search"]
{
	border-color: var(--linkcolor);
	border-width: var(--hairlinewidth);
	border-radius: 1.25rem;
	text-indent: 2rem;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.searchtitle
{
	color: #444;
	font-weight: 400;
	font-size: 1rem;
}

a.searchtitlelink
{
	font-weight: 600;
	display: inline;
	margin-right: .5rem;
	font-size: 1em;
	background-color: transparent;
}

a.searchtitlelink:hover, a.searchtitlelink:focus
{
	text-decoration: none;
	outline: none;
}

.servicedisplaylink
{
	margin-bottom: .25rem;
	font-size: 0.9em;
	color: #9b9b9b;
	width: 95%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.searchdescription p
{
	font-size: 1em;
	color: #343640;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: 3rem;
}

.searchresults ul.searchitems
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.searchresults ul.searchitems > li
{
	padding: calc(0.5 * var(--gap));
}

.searchresults ul.searchitems > li a
{
	padding: calc(0.5 * var(--gap));
}

.searchresults ul.searchitems > li + li
{
	border-top: var(--hairlinewidth) solid var(--hairlinecolor);
}
.searchresults ul.searchitems > li a > h3
{
	font-size: 1rem;
	margin-bottom: 0;
}
.searchresults ul.searchitems > li a > .timestamp,
.searchresults ul.searchitems > li a > .username
{
	font-size: 0.8rem;
	color: #666;
}
.searchresults ul.searchitems > li a > .snippet
{
	color: #000;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.typescontainer
{
	border: none;
	background: transparent;
	padding: 0;
}
.typescontainer > legend
{
	padding: 0;
	border: none;
	background: transparent;
}
.typescontainer .types
{
	display: flex;
	flex-wrap: wrap;
}
.typescontainer .types .type
{
	min-width: 15rem;
	flex: 1 1 15rem;
}

.advancedsearch .settings
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin-top: 1rem;
}

.evaluations article.evaluation
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
}

article.evaluation > header,
article.commoncomment > header
{
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolordark);
	padding-bottom: calc(0.5 * var(--gap));

}

article.evaluation > header > .header
{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--gap);
}

.evaluationcontent
{
	display: table;
	width: 100%;
}

.etextsegment
{
	display: table-cell;
	overflow: auto;
	padding-left: 1rem;
	vertical-align: top;
}

.egradesegment
{
	width: 6rem;
	text-align: center;
	display: table-cell;
	vertical-align: top;
}

.egradecircle
{
	display: block;
	background: #55B000;
	color: #fff;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	margin: auto;
	position: relative;
	overflow: hidden;
}

.egradecircle.nocontent
{
	background: #D2CFCF;
}

.egradecircle span
{
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 90%;
	font-size: 2.5rem;
	word-wrap: normal;
}

.egradecircle .c0
{
	font-size: 3rem;
}
.egradecircle .c1
{
	font-size: 2.5rem;
}
.egradecircle .c2
{
	font-size: 1.5rem;
}
.egradecircle .c3
{
	font-size: 1.1rem;
}
.egradecircle .c4
{
	font-size: 0.7rem;
	word-wrap: break-word;
}

.recipientinfo
{
	display: inline-block;
	margin: 0 0.25rem;
}

.readstatus
{
	display: block;
	margin-left: 0.25rem;
}
.noevaluation
{
	background: #E85E27;
	text-align: center;
	color: #fff;
	padding-top: 1rem;
	border-radius: 0 0 var(--radius) var(--radius);
}

.noevaluation a:link,
.noevaluation a:visited,
.noevaluation a
{
	display: block;
	color: #fff;
}

.addevaluationlink
{
	margin-top: var(--gap);
}

a.secondarybutton.addevaluation::before
{

	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f080"; /* chart-bar */
}

.evaluationsummary .enclose.document.evaluation.draft,
.evaluations article.evaluation.draft
{
	color: var(--themetextcolor);
	background-color: var(--draftbackground)
}

article.evaluation.draft > header > .header .draft::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: "\f044"; /* edit */
	color: var(--themewarning);
}

.evaluationsummary span.person a
{
	white-space: nowrap;
}

.evaluation .authors > div
{
	margin: 0.25rem 0;
}
.evaluation .authors > div.recipientinfo
{
	margin: 0 0.25rem;
}

table.evaluations
{
	font-size: 0.9rem;
	min-width: 100%;
}

@media all and (min-width:25rem)
{
	/* use sticky first column in case horizontal scrolling is needed */
	table.evaluations th:first-child
	{
		position: sticky;
		left: -0.2rem; /* match border widths of table and cell */
		max-width: 50%;
		will-change: transform; /* improve rendering performance on Chrome */
	}
}

table.evaluations td,
table.evaluations th
{
	text-align: center;
	vertical-align: middle;
	word-break: normal;
}

table.evaluations td a:link,
table.evaluations td a:visited,
table.evaluations td a
{
	color: #fff;
}

table.evaluations th.person
{
	text-align: left;
}

table.evaluations td div
{
	padding: 0.5rem;
	border-radius: var(--radius);
	display: inline-block;
}

table.evaluations td div
{
	margin: 0.1rem;
}

table.evaluations td div.evaluation
{
	background-color: #55B000;
}

table.evaluations td div.submission
{
	background-color: #1774bc;
}

table.evaluations details
{
	padding: 0;
	margin: 0;
}

table.evaluations details.open,
table.evaluations details[open]
{
	background: none;
}
table.evaluations details > summary
{
	padding: 0;
	margin: 0;
}
table.evaluations details > summary:after
{
	content: "";
}

table.evaluations details > summary
{
	list-style-type: none;
}

table.evaluations ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.expandinglist,
ul.learningstatistics ul
{
	list-style-type: none;
	padding-left: 0;
}

ul.learningstatistics li.content > div.overview > div.title,
ul.learningstatistics li.header > div.title
{
	flex-basis: 40%;
}

ul.learningstatistics li.content > div.overview  > div.tasks,
ul.learningstatistics li.content > div.overview  > div.evaluations,
ul.learningstatistics li.header > div.tasks,
ul.learningstatistics li.header > div.evaluations
{
	flex-basis: 30%;
}

ul.learningstatistics li.header > div.done
{
	flex-basis: 60%;
}

ul.taskstracking li.task > div.title
{
	flex-basis: 40%;
}
ul.taskstracking li.task > div.submissionwrapper
{
	flex-basis: 60%;
}

ul.taskstracking li.task > div.submissionwrapper > div.submissioncontainer
{
	display: flex;
}

ul.taskstracking div.submissioncontainer > div.submissionmodule,
ul.taskstracking div.submissioncontainer > div.evaluations
{
	flex-basis: 50%;
	overflow: auto;
}

ul.learningstatistics > li.content div.overview,
ul.learningstatistics > li.header
{
	display:flex;
}
ul.learningstatistics > li.content,
ul.learningstatistics > li.header
{
	border: 0.1rem solid #555;
	margin-top: 0;
}

ul.learningstatistics > li.content
{
	border-top: none;
}

ul.learningstatistics > li.content > div.overview,
ul.learningstatistics > li.content > div.details,
ul.learningstatistics > li.header
{
	padding: 0.1rem 0.5rem;
}

ul.learningstatistics > li.content > div.overview:hover
{
	background-color: #ddd;
	color: var(--themetextcolor);
	cursor: pointer;
}
ul.learningstatistics > li.content.open > div.overview,
ul.learningstatistics > li.content.open > div.overview:hover,
ul.learningtracking.navigation li.active a
{
	background-color: var(--themetextcolor);
	color: #fff;
}

ul.learningstatistics > li.content > div.details
{
	display: none;
}

ul.learningstatistics > li.content.open > div.details
{
	display: block;
}

ul.learningstatistics ul.taskstracking > li
{
	display: flex;
	border-top: 0.1rem solid #eee;
}

ul.learningstatistics ul.taskstracking > li > div,
ul.learningstatistics li.content > div.overview > div
{
	overflow: auto;
}

ul.criteria
{
	list-style-type: none;
	padding-left: 0;
}
ul.criteria li.criterion
{
	padding: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: var(--radius);
}
ul.criteria li + li
{
	margin-top: 1rem;
}

article.assessmentframework .description,
article.assessmentframework div.gradesformat
{
	padding: 0.5rem 0;
}

article.frameworks article.framework .showmore
{
	font-size: 0.8rem;
	padding-top: 0.5rem;
}

article.assessmentframework article.goal > header > h1 > a
{
	display: inline;
}

article.frameworks a.button
{
	margin: 0.5rem 0 1rem 0;
}

article.frameworkaccesslist ul.access > li
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

img.assessmentgrade
{
	vertical-align: middle;
	height: 1.5rem;
}

.assessmentcontent img.assessmentgrade
{
	height: 3rem;
}

dl.assessmentcriteria dt
{
	display: list-item;
	list-style-position: inside;
}

ul.assessmentcards,
.assessmentcards li
{
	display: block;
	margin: 0;
	padding: 0;
}

ul.assessmentcards li.assessmentcard + li.assessmentcard
{
	border-top: 0.2rem solid #eee;
}
a.assessmentcard.embedded
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0.25rem;
}
a.assessmentcard.embedded:hover
{
	text-decoration: none;
	background-color: #eee;
	color: var(--themetextcolor);
}

a.assessmentcard.embedded div.personwrapper
{
	flex-basis: 60%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

a.assessmentcard.embedded div.name
{
	flex-basis: 40%;
	font-size: 1.2rem;
}
a.assessmentcard.embedded div.courseprogress
{
	flex-basis: 60%;
	display: flex;
	justify-content: center;
}

a.assessmentcard.embedded div.courseprogress > div
{
	padding: 0.5rem;
	text-align: center;
}
a.assessmentcard.embedded div.goallevels
{
	flex-basis: 40%;
}

article.systemrootpage a.assessmentcard.embedded div.personwrapper,
article.systemmodulepage a.assessmentcard.embedded div.personwrapper,
article.systemrootpage a.assessmentcard.embedded div.goallevels,
article.systemmodulepage a.assessmentcard.embedded div.goallevels
{
	flex-basis: 100%;
}

div.assessmentprogress
{
	display: flex;
	align-items: center;
}
div.assessmentprogress div.role img
{
	vertical-align: bottom;
}
div.assessmentprogress div.meterset
{
	flex-grow: 2;
	display: flex;
	align-items: center;
}
div.meterset div.meter
{
	flex-grow: 2;
	margin: 0.25rem;
}
div.meter meter
{
	width: 100%;
}
div.meterset div.label
{
	min-width: 2rem;
}

span.role img,
div.role img
{
	height: 1.5rem;
}

.profile div.goal_skills span.meter meter
{
	max-width: 55%;
}

div.goal_skills .role1 meter::-webkit-meter-optimum-value
{
	background: #58B024;
}
div.goal_skills .role2 meter::-webkit-meter-optimum-value
{
	background: #1470CC;
}

.goal_skills + .goal_skills
{
	border-top: 0.2rem solid #aaa;
}

.goal_skills h1
{
	font-size: 1rem;
	margin: 0.1rem 0;
}

.goallevels
{
	font-size: 0.8rem;
}

.GaugeMeter
{
	position: relative;
	text-align: center;
	overflow: hidden;
	display: inline-block;
}

.GaugeMeter span,
.GaugeMeter b
{
	width: 54%;
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 23%;
}

.GaugeMeter b
{
	color: var(--themetextcolor);
	font-weight: 200;
}

.assessmentmodule .setup .goal
{
	font-weight: 600;
}

.assessmentmodule .setup .framework
{
	border-bottom: 0.1rem solid #999;
}

.assessmentcontainer h1
{
	padding-right: 2rem;
	font-size: 1rem;
}
.assessmentcontainer table.reasonings
{
	width: 100%;
}
.assessmentcontainer table.reasonings span.role
{
	margin-right: 0.25rem;
}

.assessmentcontainer details
{
	margin-top: 0.25rem;
}

.assessmentcontent
{
	display: grid;
	grid-auto-columns: 1fr;
	grid-column-gap: 0.2rem;
	grid-row-gap: 0.2rem;
	text-align: center;
}

.assessmentcontent .level0
{
	grid-column: 1;
}

.assessmentcontent .level1
{
	grid-column: 2;
}
.assessmentcontent .level2
{
	grid-column: 3;
}

.assessmentcontent .level3
{
	grid-column: 4;
}

.assessmentcontent .level4
{
	grid-column: 5;
}

.assessmentcontent .level5
{
	grid-column: 6;
}

.assessmentcontent .level6
{
	grid-column: 7;
}


.assessmentcontent .grade,
.assessmentcontent .grade
{
	font-weight: 600;
}

.assessmentcontent .description
{
	font-size: 0.8rem;
}

.assessmentcontent .details
{
	text-align: right;
	font-size: 0.8rem;
	font-weight: 400;
}

.assessmentcontent .graphradiobutton
{
	grid-row: 1;
	border-width: 0.1rem;
	border-style: solid;
	border-color: #3caf3a;
	border-radius: var(--radius);
	padding: 0.25rem 0.5rem;
}
.assessmentcontent .graphradiobutton.type2
{
	border-color: var(--linkcolor);
}

.assessmentcontent .graphradiobutton.checked
{
	background-color: #3caf3a;
	box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.5);
}
.assessmentcontent .graphradiobutton.type2.checked,
.assessmentcontent .skillcontent.type2 .speech-bubble
{
	background-color: var(--linkcolor);
}

.assessmentcontent .graphradiobutton:not(.checked):hover
{
	background-color: #3caf3a;
	box-shadow: 0 0 0.25rem var(--themetextcolor);
	transition: background-color 0.5s ease;
}

.assessmentcontent .graphradiobutton.type2:not(.checked):hover
{
	background-color: var(--linkcolor);
}

.assessmentcontent .graphradiobutton:not(.checked) div.details
{
	opacity: var(--opacity-nonessential);
}

.assessmentcontent .skillcontent
{
	background-color: #ddd;
	padding: 0.5rem;
	border-radius: var(--radius);
}

.assessmentcontent .skillcontent.noassessment
{
	grid-column: 1 / span 2;
}
.assessmentcontent.range3 .skillcontent.noassessment
{
	grid-column: 1 / span 3;
}
.assessmentcontent.range4 .skillcontent.noassessment
{
	grid-column: 1 / span 4;
}
.assessmentcontent.range5 .skillcontent.noassessment
{
	grid-column: 1 / span 5;
}
.assessmentcontent.range6 .skillcontent.noassessment
{
	grid-column: 1 / span 6;
}
.assessmentcontent.range7 .skillcontent.noassessment
{
	grid-column: 1 / span 7;
}

.assessmentcontent.canassess .skillcontent:not(.checked):not(.noassessment)
{
	display: none;
}

.assessmentcontent .skillcontent .speech-bubble
{
	background-position: 0.5rem 50%;
	background-repeat: no-repeat;
	background-size: 1.5rem auto, 100% 100%;
	padding: 0.25rem 0.5rem;
}

.assessmentcontent .skillcontent.checked.type1 .speech-bubble
{
	background-image: url("icon/person.svg");
}

.assessmentcontent .skillcontent.checked.type2 .speech-bubble
{
	background-image: url("icon/school.svg");
}

.assessmentcontent .skillcontent .speech-bubble + .person
{
	text-align: right;
	padding-top: 0.5rem;
	font-size: 0.8rem;
}

.assessmentcontent .skillcontent .speech-bubble
{
	position: relative;
	background-color: #3caf3a;
	border-radius: var(--radius);
	margin-bottom: 0.25rem;
}

.assessmentcontent .skillcontent .speech-bubble:after
{
	border-top-color: #3caf3a;
	content: '';
	position: absolute;
	bottom: 0;
	right: 2rem;
	width: 0;
	height: 0;
	border: 0.725em solid transparent;
	border-bottom: 0;
	margin-left: -0.725em;
	margin-bottom: -0.725em;
}

.assessmentcontent .skillcontent .speech-bubble:after
{
	border-top-color: #3caf3a;
}

.assessmentcontent .skillcontent.type2 .speech-bubble:after
{
	border-top-color: var(--linkcolor);
}

.assessmentcontent .skillcontent:not(.checked) .speech-bubble
{
	background-color: #fff;
}

.assessmentcontent .skillcontent:not(.checked) .speech-bubble:after
{
	border-top-color: #fff;
}

.assessmentcontainer.learninggoal
{
	background-image: url("icon/star.svg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 2.5rem 2.5rem;
}

.assessmentcontainer.graphcheckbox,
ul.learninggoals li
{
	border-radius: 0.5rem;
	margin: 0.25rem 0;
	padding: 0.25rem;
	background-color: #ccc;
}

ul.learninggoals li.graphcheckbox.checked
{
	background-color: #3caf3a;
}

ul.learninggoals
{
	list-style-type: none;
	padding-left: 0;
}

.assessmentstatus
{
	display: inline-block;
}

.assessmentstatus span
{
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	vertical-align: middle;
	background-size: contain;
}

.assessmentstatus .role1
{
	background-image: url("icon/person.svg");
}

.assessmentstatus .role2
{
	background-image: url("icon/school.svg");
}

.assessmenthistory ul.criteria li.criterion
{
	display:flex;
	flex-wrap: wrap;
	background-color: #fff;
	color: var(--themetextcolor);
}
.assessmenthistory ul.criteria li.criterion .title,
.assessmenthistory ul.criteria li.criterion .assessments
{
	flex-basis: 40%;
}

.assessmenthistory ul.criteria li.criterion .share
{
	flex-basis: 20%;
	text-align: center;
	font-size: 1.5rem;
}

.assessmenthistory ul.criteria li.criterion div.assessments  div.negative
{
	border-right: 0.5rem solid #ddd;
}

.assessmenthistory ul.criteria li.criterion div.assessments  div.role1.positive
{
	border-right: 0.5rem solid #58B024;
}
.assessmenthistory ul.criteria li.criterion div.assessments  div.role2.positive
{
	border-right: 0.5rem solid #1470CC;
}
.assessmenthistory ul.criteria li.criterion div.assessments
{
	display: flex;
	text-align: center;
}
.assessmenthistory ul.criteria li.criterion div.assessments div
{
	flex-basis: 50%;
	box-sizing: border-box;
}
.assessmenthistory ul.criteria li.criterion div.assessments div img
{
	height: 2.5rem;
}

.assessmenthistory .goalwrapper
{
	background-color: #eee;
	color: var(--themetextcolor);
}

.blogentry .t
{
	padding-top: 0.5rem;
}


.learningdiary_entries header ul.actions {
    margin: 0;
    padding: 0;
    display: inline;
}
.learningdiary_entries article header img {
    width: 1.8rem;
    position: absolute;
    left: 0.3rem;
    top: 0.1rem;
}

.learningdiary_entries article {
    margin-left: 2.5rem;
}

.learningdiary_entries {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.learningdiary_entries header {
    margin-bottom: 0.5rem;
}

.learningdiary_entries > li {
    position: relative;
    margin-top: 0.5rem;
    padding: 0.2rem;
    background-color: #fafafa;
    box-shadow: 5px 5px 2px #888;
}
.learningdiary_entries article header .publicity {
    font-size: 0.8rem;
}
.learningdiary_entries article header span {
    font-size: 0.8rem;
}

.rss_src_link
{
	list-style-type: none;
}

article.rssitem > .main
{
	padding-top: 0rem;
}

article.rssitem h1
{
	font-size: 1.2rem;
}

.main.content > aside article.rssitem > .main
{
	padding-bottom: 0.4rem;
}

table
{
	border-collapse: collapse;
	border: none;
	overflow: auto;
	max-width: 100%;
	background: #fff;
	color: var(--themetextcolor);
}

/* workaround the fact that CSS up to version 3.x does not allow display:table and overflow:auto to really work, use extra wrapper added by JS */
.tablewrap
{
	max-width: 100%;
	overflow: auto;
}
.tablewrap > table
{
	overflow: visible;
	max-width: none;
}

table[border] td,
table[border] th
{
	border: solid var(--themetextcolor) 0.1rem;
}

table[border="0"] td,
table[border="0"] th
{
	border: none;
}
table.borderless td,
table.borderless th
{
	border: none;
}

.xhtmleditor table[border="0"] td,
.xhtmleditor table[border="0"] th
{
	border: dashed #777 0.1rem;
	border: dashed rgba(0,0,0,0.1) 0.1rem;
}

.xhtmleditor table.borderless td,
.xhtmleditor table.borderless th
{
	border: dashed #777 0.1rem;
	border: dashed rgba(0,0,0,0.1) 0.1rem;
}

table.details tr:not(:first-of-type)
{
	border-top: 0.1rem solid #d8dbde;
}

table.details th,
table.details td
{
	border: none;
	background: #fff;
	color: #000;
	font-weight: normal;
	vertical-align: baseline;
}

table.details th
{
	opacity: var(--opacity-nonessential);
	font-size: 0.8rem;
}

article.details .section:not(:first-of-type)
{
	margin-top: 2rem;
}

article.details .section > h1
{
	margin: 0;
	border-bottom: 0.05rem solid var(--themeforeground);

}

hr.break.float
{
	clear: both;
	border: none;
	margin: 0;
}
.xhtmleditor hr.break.float
{
	border-top:  dotted #777 0.1rem;
}

table.summary td,
table.summary th
{
	border: solid #fff 0.2rem;
}

table.summary th
{
	padding: 0.5em;
}

table.highlighted td,
table.highlighted th
{
	border: solid #000 0.3rem;
}
body .mce-item-table,
body .mce-item-table td,
body .mce-item-table th,
body .mce-item-table caption
{
	border: solid rgba(0,0,0,0.1) 0.1rem;
}

table.mceLayout
{
	/* workaround TinyMCE brain-damage: it cannot handle border-collapse: collapse correctly */
	border-collapse: separate;
}

table th,
table td
{
	vertical-align: top;
	text-align: left;
	border: solid #ccc 0.1rem;
	background: #f7f7f7;
	padding: 0.2rem 0.5rem;
}

table th
{
	color: #000;
	background: #eee;
}

table.stickyheader thead tr th
{
	position: -webkit-sticky;
	position: sticky;
	top: -0.1rem; /* match border width */
}

table.details tr td img.lock
{
	position: relative;
	float: right;
	max-height: 0.9rem;
}

html.frontpage > footer
{
	margin-top: 0;
	padding-left: 0rem;
}

article#uuid-00000000-0000-1301-8000-000000000000
{
	padding-top: 1.0rem;
}

article.titleonly#uuid-00000000-0000-1301-8000-000000000000
{
	padding-top: 0rem;
}

main.frontpage,
aside.frontpage
{
	float: left;
	width: 49%;
	margin-right: 0.1rem;
}

main.frontpage h2
{
	text-shadow: none;
	color: #fff;
	margin: 0;
	padding: 0;
}

div.highlight.frontpage a
{
	text-decoration: none;
}

html.frontpage article.pinned a:link,
html.frontpage article.pinned a:visited
{
	display: block;
	padding: 1rem;
	margin-left: calc(0rem - var(--gap));
}

html.frontpage article.pinned .actions a:link,
html.frontpage article.pinned .actions a:visited
{
	font-size: 0.8rem;
	padding: 0;
	padding-left: 2rem;
}

.frontpage .ui-accordion li
{
	padding: 0rem;
}

.frontpage div.accordion
{
	clear: both;
	user-select: none;
}

div.accordion li + li
{
	margin-top: 0.5rem;
}

.frontpage .ui-accordion .ui-accordion-header
{
	width: 3.5rem;
	height: 3.5rem;
	float: left;
	box-sizing: border-box;
	color: #003a70;
	background: #fff;
	border-radius: 0rem;
	border: none;
	margin: calc(0.5 * var(--gap));
	text-align: center;
	padding: 0;
	font-size: 2.5rem;
}

.frontpage .ui-accordion .ui-accordion-header.ui-state-active,
.frontpage .ui-accordion-content-active
{
	clear: left;
}

.frontpage .ui-accordion .ui-accordion-header.ui-state-active
{
	margin: 0.25rem 0 -3.5rem 0.25rem;
}

.frontpage .ui-accordion .ui-accordion-header:hover,
.frontpage .ui-accordion .ui-accordion-header:active
{
	color: #fff;
	border-color: #fff;
	background: #003a70;
}

.frontpage .ui-accordion .ui-accordion-header:focus
{
	outline: none;
}

.frontpage .ui-accordion .ui-accordion-content-active
{
	border: none;
	background: #fff;
	border-radius: 0.1rem;
	border-left: solid #003a70 3.5rem;
	margin-left: 0.25rem;
	margin-bottom: 0.25rem;
	font-size: 1rem;
	min-height: 2.5rem;
}

.frontpage main .ui-accordion-content-active a:link,
.frontpage main .ui-accordion-content-active a:visited
{
	display: block;
	padding: 0.25rem 0rem 0.25rem 0.25rem;
	color: #164675;
	text-decoration: none;
}

.frontpage main .ui-accordion-content-active a:hover
{
	text-decoration: underline;
}

.frontpage nav.actions
{
	border: solid #f00 1rem;
}

div.frontpage.pedanet ul,
div.frontpage.pedanet li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

div.frontpage.pedanet li a
{
	display: block;
	padding: 0.25rem 0;
}

div.frontpage.infofeed div.youtube a
{
	display: block;
	padding: 0rem 0.5rem;
}

/* Ugly hack: we use borderless table on the frontpage to markup the content to be rendered side-by-side if enough space is available. We'll immediately tear down the table structure, though. */

.frontpage p + .tablewrap
{
	margin-top: 1.5rem;
}

.frontpage table.borderless,
.frontpage table.borderless tbody,
.frontpage table.borderless tr
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	align-content: stretch;
}

.frontpage table.borderless td
{
	background: transparent;
	flex: 1 1 15rem;
	width: 15%;
	min-width: 15rem;
	padding: 0;
	margin: 0.5rem;
}

@media all and (max-width: 55rem)
{
	.frontpage table.borderless td
	{
		flex: 1 1 100%;
		margin: 0 0 3rem 0;
	}
}

.frontpage table.borderless td img
{
	width: 100%;
	max-width: 100%;
}


code.permalink
{
	color: #000;
}

code.permalink span
{
	color: #777;
}

table.mceLayout
{
	/* restore default TinyMCE behavior */
	display: table;
}

.mceContentBody
{
	padding: 0.25rem 0.5rem;
}

.mce-content-body code.pedanet
{
	border: dotted #f00 0.1rem;
	background: #ffc;
	color: #000;
	padding: 0.25rem;
	margin: 0.15rem;
	display: inline-block;
}

.mce-floatpanel
{
	max-width: 90%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mce-floatpanel .mce-container-body,
.mce-floatpanel .mce-menubar,
.mce-floatpanel .mce-menubar .mce-flow-layout,
.mce-panel .mce-foot
{
	max-width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	display: flex;
	align-items: center;
}

.mce-floatpanel.mce-menu .mce-container-body
{
	display: block;
}

.mce-floatpanel > .mce-container-body.mce-abs-layout
{
	/* workaround menu overflowing the container for some reason */
	/* margin-top: -2px; */
}

.mce-floatpanel .mce-menubar .mce-flow-layout .mce-menubtn
{
	max-width: 20%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mce-menubtn button,
.mce-btn button,
button.mce-close
{
	box-shadow: none;
	max-width: 100%;
	overflow: hidden;
	word-wrap: normal;
	text-overflow: ellipsis;
	box-sizing: content-box;
}

.mce-menubtn button
{
	display: inline-flex;
	align-items: center;
}

.mce-menubtn button:hover,
.mce-btn button:hover,
button.mce-close:hover
{
	box-shadow: none;
}

.mce-toolbar-grp.mce-container.mce-panel
{
	/* TinyMCE has off-by-some positioning error for the absolutely positioned panel (e.g. menu button bar with B/I/U actions), workaround with transform */
	transform: translateY(-0.1rem);
	/* the .mce-panel is rendered above .mce-floatpanel which renders rounded corners so we have to stay within those corners, too */
	border-radius: var(--radius);
}

html .mce-btn .mce-caret
{
	/* workaround insane default styles */
	margin-top: 0;
	margin-left: 0.5em;
}

html .mce-menu.mce-menu-align .mce-menu-shortcut,
html .mce-menu.mce-menu-align .mce-caret
{
	right: 0.5rem;
}

/* Workaround TinyMCE "invisible" iframes leaking outside the parent element
  (e.g. parent having overflow:auto causing overflow because of iframe
  contents in Chrome 96.x) */
html .mce-floatpanel iframe[width="0"][height="0"]
{
	display: none;
}

form.inline
{
	display: inline;
}

div.t label
{
	display: block;
}
div.shortname label.prefix
{
	display: inline;
}

input.s:hover:not(:disabled),
button:hover:not(:disabled)
{
	box-shadow: var(--buttonboxshadow);
}

input.s:focus:not(.submitting),
button:focus:not(.submitting)
{
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	outline: none;
}

input.s:focus:not(:focus-visible):not(.submitting),
button:focus:not(:focus-visible):not(.submitting)
{
	box-shadow: none;
}

input.s:active,
button:active
{
	box-shadow: none;
	box-shadow: var(--hoverboxshadow);
}

input.t,
textarea
{
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: var(--forminputborderradius);
}

input.t
{
	display: block;
	-webkit-appearance: textarea; /* webkit specific workaround for ugly single line text inputs */
}
input.t,
input.tcustom,
input.n,
textarea
{
	font-size: 1rem;
}
input.n.unitnumber
{
	text-align: right;
}

input.hunajapurkki
{
	position: absolute;
	clip: rect(0,0,0,0);
}

li.invalidorderkey input
{
	border-color:#f00;
	box-shadow: 0px 0px 0.3rem #f00;
	outline: none;
}
input.order
{
	width: 4rem;
}
input.order:invalid
{
	border-color: #f00;
	box-shadow: 0px 0px 0.2rem #f00;
	outline: none;
}

input.order:focus
{
	outline: none;
	box-shadow: none;
}

/* Workaround broken MSIE/Mobile where invalid input has no explanation at all */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:35rem)
{
	input.order:invalid:focus
	{
		box-shadow: 0px 0px 0.2rem #f00;
		border-color: #f00;
	}
}


textarea
{
	overflow: auto;
	resize: vertical;
}

textarea[name="comment"]
{
	margin-top: calc(0.5 * var(--gap));
}

div.t
{
	margin-top: 1rem;
}

div.t + div.messages
{
	margin-top: 1rem;
}

div.c
{
	margin-top: 1rem;
	margin-bottom: -0.6rem;
}

.inputextra > div.t
{
	margin-top: 0rem;
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
}

label, legend
{
	font-size: 1em;
	user-select: none;
}

p.submitorcancel,
html p.submitorcancel /* add more specificity to override .retangle p -selector */
{
	margin: var(--gap) -0.25rem calc(0.5 * var(--gap)) -0.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top: var(--gap);
	border-top: solid var(--hairlinecolor) var(--hairlinewidth);
}

p.submitorcancel button,
.submitorcancel a
{
	margin: 0.25rem;
}

.submitorcancel a
{
	font-size: 1rem;
	display: flex;
	align-items: center;
	padding: 0.5rem;
	color: var(--themeerror);
	text-decoration: none;
}
.submitorcancel a:hover
{
	text-decoration: underline;
}
p.description
{
	font-style: italic;
}

.access .world,
.access .logged
{
	font-weight: bold;
}

dl.files,
dl.attachments
{
	margin: 0;
}

dl.files dt,
dl.attachments dt
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

dl.files dd,
dl.attachments dd
{
	font-size: 0.8rem;
}

dl.failure.details dt
{
	font-weight: bold;
}

ul.persons
{
	padding: 0;
	list-style-type: none;
}

ul.persons.withoutresponse
{
	margin-top: 0;
}

ul.persons.withoutresponse .person > a
{
	display: flex;
	padding: calc(0.5 * var(--gap)) var(--gap);
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

ul.persons.withoutresponse .person > a:hover
{
	text-decoration: underline;
	background-color: #E4E8EB; /* not sure if this is correct color */
}

ul.persons.withoutresponse :link,
ul.persons.withoutresponse :visited,
ul.persons.withoutresponse :focus
{
	border-radius: 0;
}
ul.persons.withoutresponse > li
{
	margin-top: 0;
}

dl.persons dd + dt,
ul.special li + li,
ul.persons li +li
{
	margin-top: 1.2rem;
}

dl.persons dd
{
	margin-left: 3.8rem;
}

dl.persons.selectable input.cb,
ul.special.selectable input.cb,
ul.persons.selectable input.cb
{
	margin-right: 0.5rem;
	margin-top: 1rem;
	float: left;
}

ul.persons.connection li.enclose div.person
{
	float: left;
}

dl.persons.selectable dd
{
	margin-left: 5.8rem;
}

dl.persons div.person a,
ul.persons div.person a
{
	display: inline-block;
	text-decoration: none;
}

dl.persons div.personinfo,
ul.persons div.personinfo
{
	display: inline-block;
	vertical-align: middle;
}

dl.persons div.personinfo div.username,
ul.persons div.personinfo div.username
{
	color: #505050;
	font-size: 0.9em;
}

dl.persons div.personinfo div.username::before,
ul.persons div.personinfo div.username::before,
.searchresults ul.searchitems > li a > .username::before
{
	content: "@";
}

dl.persons img.icon,
ul.persons img.icon,
ul.access img.icon
{
	margin-right: 0.5rem;
}

header time,
header .timestamp
{
	font-size: 0.8rem;
}


.timestamp,
.timestamp a:link,
.timestamp a:visited
{
	color: #767676;
}

time
{
	white-space: nowrap;
}

time::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: "\f017"; /* clock */
}

/** Form and FormResponse classes **/

.form input[disabled],
.form textarea[disabled],
.form input[type="radio"][disabled],
.form input[type="radio"][disabled]:active,
.form input[type="radio"][disabled]:hover,
.form input[type="checkbox"][disabled],
.form input[type="checkbox"][disabled]:active,
.form input[type="checkbox"][disabled]:hover
{
	color: var(--themetextcolor);
	background: #eee;
}

.form .formresponsetext
{
	border: solid #000 1px;
	padding: 0.1rem 0.25rem;
	margin: 1px;
	background: #fff;
	border-radius: 0.1rem;
	min-height: 1rem;
	min-width: 1rem;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

.form span.formresponsetext
{
	display: inline;
	padding-right: 0.25rem;
	padding-left: 0.25rem;
}

.form .wrong
{
	background: #fcc;
	text-decoration: line-through;
}
.form .correct
{
	font-weight: bold;
	font-style: italic;
}
.form acronym
{
	background: #cfc;
	vertical-align: super;
	font-size: 0.8rem;
	border: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.form table.likert
{
	background: #fff;
	color: #000;
}

.form .likert thead th
{
	background: #eee;
}
.form .likert tbody th
{
	font-weight: normal;
}
.form table.likert tr:hover td,
.form table.likert tr:hover th
{
	border-color: #bbb;
	background: #fff;
}
.form table.likert tr:hover th
{
	background: #eee;
}
.form .likert label
{
	display: inline-block;
	color: #eee;
}
.form .likert label:hover
{
	color: #000;
}
.form thead th.number
{
	text-align: center;
}
.form tbody td.average,
.form tbody td.total.count
{
	text-align: right;
}

#MathJax_Zoom
{
	max-width: none !important;
}

#MathJax_ZoomFrame
{
	top: -3rem;
}

#MathJax_Message
{
	display: none;
}

p > span.MathJax nobr:after
{
	vertical-align: bottom;
	content: "";
	height: 1rem;
	display: block;
	float: right;
	margin-bottom: 2rem;
}

span.MathJax, div.MathJax_Display
{
	page-break-inside: avoid;
	position: relative;
}

a img
{
	border: none;
}

img.inline
{
	max-width: 100%;
}
img.left
{
	float: left;
	max-width: 50%;
}
img.right
{
	float: right;
	max-width: 50%;
}
img.left.small,img.right.small
{
	max-width: 25%;
}
img.left.medium,img.right.medium
{
	max-width: 33%;
}

img.leftblock
{
	display: block;
	margin-right: auto;
}
img.rightblock
{
	display: block;
	margin-left: auto;
}
img.center
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.small, img.center.small
{
	max-width: 50%;
}
img.medium, img.center.medium
{
	max-width: 75%;
}

.alt.text.preview
{
	font-size: 0.8rem;
}

table.center
{
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	overflow: auto;
	width: intrinsic;
	width: -moz-fit-content;
	width: fit-content;
}

table.right
{
	float: right;
	display: block;
	margin: 0.5rem 0rem 0.5rem 0.5rem;
}
table.left
{
	float: left;
	display: block;
	margin: 0.5rem 0.5rem 0.5rem 0rem;
}
td.center, tr.center, th.center, p.center {
	text-align: center;
}
td.left, tr.left, th.left {
	text-align: left;
}
td.right, tr.right, th.right {
	text-align: right;
}

span.wider
{
	letter-spacing: 0.1em;
}
span.right
{
	max-width: 48%;
	max-width: calc(50% - 0.5rem);
	float: right;
	margin: 0.5rem 0.0rem 0.2rem 0.5rem;
}
span.right.small, span.left.small
{
	max-width: 25%;
}
span.right.medium, span.left.medium
{
	max-width: 40%;
}
span.medium
{
	display: block;
	max-width: 75%;
}
span.small
{
	display: block;
	max-width: 50%;
}

span.left
{
	max-width: 48%;
	max-width: calc(50% - 0.5rem);
	float: left;
	margin: 0.5rem 0.5rem 0.2rem 0.0rem;
}

span.leftblock
{
	display: block;
	text-align: left;
}
span.rightblock
{
	display: block;
	text-align: right;
}

span.center
{
	display: block;
	text-align: center;
}
span.center.medium
{
	max-width: 75%;
	margin-left: auto;
	margin-right: auto;
}
span.center.small
{
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

span.right img.inline,
span.left img.inline
{
	max-width: 100%;
	border-radius: var(--radius);
}

table img,
table img.inline,
table img.left,
table img.right
{
	max-width: 10rem;
}

@media all and (min-width:59rem) { table img, table img.inline, table img.left, table img.right { max-width: 20rem; max-width: min(20rem, 100%); } }
@media all and (max-width:60rem) { table img, table img.inline, table img.left, table img.right { max-width: 15rem; max-width: min(15rem, 100%); } }
@media all and (max-width:45rem) { table img, table img.inline, table img.left, table img.right { max-width: 10rem; max-width: min(10rem, 100%); } }
@media all and (max-width:35rem) { table img, table img.inline, table img.left, table img.right { max-width: 7rem; max-width: min(17rem, 100%); } }
@media all and (max-width:25rem) { table img, table img.inline, table img.left, table img.right { max-width: 5rem; max-width: min(5rem, 100%); } }

table span.center.small,
table span.right img.inline,
table span.left img.inline,
table span.right.medium,
table span.left.medium
{
	max-width: 5rem;
}

iframe
{
	max-width: 100%;
	max-height: 80vh;
	box-sizing: border-box;
}

iframe.twitter-timeline
{
	max-height: none;
}

mark.reference_id
{
	font-family: monospace;
	background: transparent;
}

.externalfile.preview
{
	text-align: center;
}

.externalfile.preview img,
.externalfile.preview video,
.externalfile.preview audio
{
	max-width: 100%;
}

.externalfile.preview video
{
	max-height: 70vh;
	width: 100%;
}


.sitemap ul li a.label:link,
.sitemap ul li a.label:visited,
.sitemap ul li a.label
{
	font-size:0.8rem;
	font-weight:normal;
	padding: 0rem 0.4rem;
	margin: 0rem 0.3rem;
	white-space: nowrap;
}

.sitemap li.customprivacy > a.label:link,
.sitemap li.customprivacy > a.label:visited,
.sitemap li.customprivacy > a.label,
.sitemap li.extendedprivacy > a.label:link,
.sitemap li.extendedprivacy > a.label:visited,
.sitemap li.extendedprivacy > a.label
{
	color: var(--themetextcolor);
	background: #ddd;
}

.customprivacy .label img,
.extendedprivacy .label img
{
	height: 0.8rem;
}

.customprivacy .label em,
.extendedprivacy .label em
{
	padding-left: 0.4rem;
}

/* "Loading..." THROBBER */
.throbber
{
	position: fixed;
	width: 200px;
	margin-left: -100px;
	height: 1.3rem;
	margin-top: -20px;
	top: 33%;
	left: 50%;
	padding: 0.15rem 0.25rem 0.30rem 0.25rem;
	background: #eee;
	border: solid #777 1px;
	vertical-align: middle;
	text-align: center;
	box-shadow: 0 0 1rem #fff;
	box-shadow: 0 0 1rem #fff, 0 0 3rem #fff;
}
.throbber *
{
	vertical-align: middle;
}
.throbber img
{
	padding-right: 0.25rem;
	position: relative;
	top: -0.1rem;
}

p.centered
{
	text-align: center;
}
.editor.red
{
	color: #ff0000;
}
.editor.underline
{
	text-decoration: underline;
	text-decoration-skip: ink;
}
.editor.italic
{
	font-style: italic;
}
.editor.bold
{
	font-weight: bold;
}

div.gallery
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.gallery ul,
.gallery li
{
	margin: 0;
	padding: 0rem;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.gallery li
{
	padding: 0.5rem;
	list-style: none;
	min-width: 160px;
}

.gallery.centered
{
	text-align: center;
}

div.galleriaviewer
{
	height: 80vh;
	width: 100%;
	visibility:hidden;
}

.galleria-container *
{
	touch-action: pan-y;
}

.galleria-fscr
{
	width:60px;
	height:60px;
	position:absolute;
	top:0px;
	right:0px;
	background: url("icon/fullscreen_white.svg");
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: top right;
	z-index: 1;
	cursor: pointer;
	opacity: 0.3;
}

.galleria-fscr:hover
{
	opacity: 1;
}

.galleria-container.fullscreen .galleria-fscr
{
	background: url("icon/fullscreen_exit_white.svg");
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: top right;
}

article.submissionfolder > .main > ul.actions,
article.submissionfolder > .main > ul.actions > li
{
	padding: 0;
	margin: 0;
}

article.submissionfolder > .main > ul.actions > li > a
{
	display: block;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.buttonslist.submissions .button::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}
.buttonslist.submissions .file::before,
ul.responsesummary .commonexternalfileattachment .overview .title::before
{
	content: "\f1c5"; /* file-image */
}
.buttonslist.submissions .entry::before,
ul.responsesummary .blogentry .overview .title::before
{
	content: "\f15c"; /* file-text */
}
.buttonslist.submissions .link::before,
ul.responsesummary .link .overview .title::before
{
	content: "\f0c1"; /* link */
}

.buttonslist.submissions .recordvoice::before,
ul.responsesummary .commonrecordedaudiofile .overview .title::before
{
	content: "\f130"; /* microphone */
}

.submissionfolder .description + div.buttons
{
	margin-top: 1rem;
	border-top: solid var(--hairlinecolordark) var(--hairlinewidth);
}

div.assignment.submission.list li
{
	list-style-type: none;
}
div.assignment.submission.list li > span
{
	font-size: 0.8rem;
}

.submission.list > ul
{
	border: solid rgba(0,0,0,0.3) 0.1rem;
	border-radius: 0.1rem;
	margin: 0.25rem;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	background: #fff;
	color: #000;
}

.submission.list > ul + ul
{
	margin-top: 0.5rem;
}

table.submissionfolder.responses.summary,
table.form.responses.summary
{
	width: 100%;
}

table.submissionfolder.responses.summary td:first-child,
table.form.responses.summary td:first-child
{
	width: 100%;
}

table.submissionfolder.responses.summary td div.actions,
table.form.responses.summary td div.actions
{
	 white-space: nowrap;
}

ul.forumreplies
{
	list-style: none outside none;
	padding-left: 1.5rem;
}

.forumreply.content time
{
	float: right;
	max-width: 100%;
}
article.document.reply
{
	padding: 0.8rem;
}

details,
summary
{
	display: block;
	outline: none;
}
summary
{
	display: list-item;
} /* anything but list-item breaks Firefox native implementation (Firefox 49) */

details summary
{
	user-select: none;
}

details summary:focus
{
	text-decoration-skip-ink: auto;
	text-decoration-skip-ink: all;
}
details summary:active
{
	background-color: var(--buttonbackgroundactive);
}

details
{
	margin-top: var(--gap);
	border: solid var(--hairlinewidth) var(--themesubduedforeground);
	border-radius: var(--radius);
}

/*
	Note: we have zero margin and padding on details by default. However,
	when the details is open, we add padding so we need to set negative
	margin for the summary to keep it visually in the same place as before
	opening the details.
*/

details.open,
details[open]
{
	padding-left: var(--hgap);
	margin-bottom: var(--hgap);
}

details.open > summary,
details[open] > summary
{
	margin-left: calc( -1 * var(--gap));
	margin-right: calc( -1 * var(--gap));
	margin-bottom: 0.5rem;
}

/* Apply a pointer cursor and style the background upon hover to indicate <summary> is a clickable element. */
/* These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }

/* HTML5 <details> polyfill styles */
.details-polyfill summary:hover { text-decoration: underline; text-decoration-skip: ink; }

/* The style for IE8 (does not support triangle pointing to right or ::before syntax) */
.details-polyfill details > summary:before { float: left; width: 1.25rem; content: '►'; position: relative; left: 0.25rem; opacity: 0.8; }
/* The style for newer browsers, that support ::before syntax */
.details-polyfill details > summary::before { float: left; width: 1.25rem; content: '▶'; position: relative; left: 0.25rem; opacity: 0.8; }
.details-polyfill details.open > summary:before { content: '▼'; }
.details-polyfill summary { list-style-type: none; }

/* custom Peda.net style for details summary */

details > summary:after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: calc(0.25 * var(--gap));
	content: "\f078";
	font-size: 1.2rem;
	position: absolute;
	top: 50%;
	margin-top: -1.5rem;
	line-height: 3rem;
	right: 1rem;
}

details[open] > summary:after
{
	content: "\f077";
}

details > summary
{
	position:relative;
	box-shadow: var(--buttonboxshadow);
	border-radius: var(--radius);
	padding: calc(0.5 * var(--gap)) 1rem;
	display: block;
	padding-right: 3rem; /* avoid rendering text over down arrow symbol */
	list-style: none; /* hide the UA default triangle */
}

details > summary:hover
{
	color: var(--reversethemeforeground);
	background-color: var(--buttonbackgroundhover);
}

details > summary h1,
details > summary h2,
details > summary h3
{
	color: var(--themeforeground);
	font-weight: normal;
	display: inline-block;
	padding: 0;
	margin: calc(0.5 * var(--gap)) 0;
}

details > summary:hover h1,
details > summary:hover h2,
details > summary:hover h3
{
	color: var(--reversethemeforeground);
}

details > summary h1
{
	font-size: 1.5rem;
}
details > summary h2
{
	font-size: 1.125rem;
}
details > summary h3
{
	font-size: 1.15rem;
}

/* for course Apple Safari has special way to surpress the triangle... */
details > summary::-webkit-details-marker,
details > summary::marker
{
	display:none;
}

details.open,
details[open]
{
	box-shadow: var(--buttonboxshadow);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	padding-top: 0;
}

details.open > summary,
details[open] > summary
{
	box-shadow: none;
}

details.open > summary,
details[open] > summary,
details.open > summary:focus,
details[open] > summary:focus
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: solid var(--hairlinewidth) #ddd;
}

/* custom focus styles for keyboard users */
details > summary:focus
{
	box-shadow: var(--focusboxshadow);
	border-radius: var(--radius);
}

/* custom focus styles for mouse users */
details > summary:focus:not(:focus-visible),
details > summary:focus:not(:focus-visible)
{
	box-shadow: var(--buttonboxshadow);
}

details.open > summary:focus:not(:focus-visible),
details[open] > summary:focus:not(:focus-visible)
{
	box-shadow: none;
}

/* personmenu start */

#menutoggle
{
	/*display: none; /* hide the menutoggle if JavaScript is not available */
}

#personmenutoggle
{
	border-radius: 50%;
	margin-right: var(--gap);
}

#personmenutoggle img
{
	transition: transform 0.25s ease-out;
	transform: rotate(0deg);
	filter: var(--themefilter);
}

#personmenutoggle:hover img
{
	transform: rotate(90deg);
}

.personmenu .placeholder
{
	display: block;
	margin: var(--personmenu-gap);
	opacity: 0.5;
}

/* person menu toggle button */
div.loginlogout > span.personmenu
{
	height: 2rem;
	width: 2rem;
	opacity: var(--opacity-nonessential);
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
}

div.loginlogout > span.personmenu img
{
	vertical-align: initial;
}

div.loginlogout > span.personmenu:hover
{
	opacity: 1;
}

nav.personmenu > *
{
	box-sizing: border-box;
	width: var(--menuwidth);
	width: max(100%, calc(var(--menuwidth) - 3rem)); /* HACK: we really would want var(--menuwidth) minus the width of scrollbar if one exists but this is the closest that can be emulated with current browsers */
}

nav.personmenu
{
	grid-area: globalnav;
	grid-row-end: rmargin-end;
	justify-self: right;
	scroll-anchor: none;
	position: -webkit-sticky; /* Note! iOS 12 does not support `sticky` but it supports `-webkit-sticky` which mostly works */
	position: sticky;
	height: calc(100vh - 4rem);
	box-sizing: border-box;
	top: 4rem;
	display: block;
	width: 0; /* will be animated to correct amount when menu is open */
	overflow-y: auto;
	overflow-x: hidden; /* we need to overflow the children so that animation looks good */
	transition: width 0.3s ease-out;
	background: var(--thememenubackground);
	color: var(--thememenuforeground);
	font-size: 0.9rem;
	box-shadow: none;
}

nav.personmenu:focus,
nav.personmenu li.item.toggleminimenu:focus
{
	outline: unset;
	border-radius: unset;
	box-shadow: var(--boxshadow);
}

nav.personmenu img.icon
{
	width: var(--personmenu-icon-size);
	height: var(--personmenu-icon-size);
	box-shadow: none;
}

body.personmenuopen nav.personmenu
{
	z-index: 20;
	width: var(--menuwidth);
	box-shadow: var(--boxshadow);
}

nav.personmenu .section
{
	padding: 0;
}

nav.personmenu :link,
nav.personmenu :visited
{
	border-radius: 0;
}

nav.personmenu > .section:not(:first-child)
{
	border-top: solid var(--personmenu-effect-color) 0.05rem;
}

nav.personmenu h1
{
	text-transform: uppercase;
	padding: 0 var(--personmenu-gap);
	font-size: 0.7rem;
	margin: 0.3rem 0;
	letter-spacing: 0.04rem;
}

nav.personmenu .item a,
nav.personmenu .item a:link,
nav.personmenu .item a:visited,
nav.personmenu .item a:active
{
	color: var(--personmenu-link-color);
	display: block;
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
	text-decoration: none;
	border-radius: 0;
}

nav.personmenu .messages a
{
	display: contents;
}

nav.personmenu .item a > img + span,
nav.personmenu button > img + span
{
	margin-left: 0.5rem;
}

nav.personmenu .item a:hover,
nav.personmenu .item a:focus,
nav.personmenu .locale ul.languages li:hover,
nav.personmenu .locale ul.languages li:focus
{
	background-color: var(--personmenu-highlight-color);
	color: #fff;
	cursor: pointer;
}

nav.personmenu .item a:hover img.icon.static,
nav.personmenu .item a:focus img.icon.static,
nav.personmenu .locale ul.languages li:hover img.icon.static,
nav.personmenu .locale ul.languages li:focus img.icon.static
{
	filter: brightness(0) invert(1);
}

nav.personmenu ul,
nav.personmenu li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

nav.personmenu > div.section.logout:not(.extended) > .othersessions,
nav.personmenu > div.section.locale:not(.extended) > div.change
{
	display: none;
}

/* personmenu logout */

nav.personmenu button img
{
	vertical-align: top;
}

nav.personmenu button span
{
	vertical-align: sub;
}

nav.personmenu h1
{
	margin: 0;
	padding: calc(0.5 * var(--gap));
}

nav.personmenu .currentsession form
{
	display: flex;
}

nav.personmenu .currentsession form button
{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

nav.personmenu .currentsession #logouttoggle
{
	display: flex;
	width: 3rem;
	align-items: center;
	justify-content: center;
}

nav.personmenu .currentsession #logouttoggle:hover,
nav.personmenu .currentsession #logouttoggle:focus
{
	color: var(--personmenu-highlight-color);
	background-color: var(--personmenu-highlight-color);
}

nav.personmenu .currentsession #logouttoggle:hover img,
nav.personmenu .currentsession #logouttoggle:focus img
{
	filter: brightness(0) invert(1);
}


nav.personmenu .logout .currentsession button
{
	box-shadow: none;
	background-image: none;

	border: none;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	box-shadow: none;
	margin: 0;
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
	border-radius: 0;
}

nav.personmenu .logout .currentsession button:hover,
nav.personmenu .logout .currentsession button:focus,
nav.personmenu .logout .currentsession button:active
{
	color: var(--personmenu-highlight-color);
	color: #fff !important;
	background: #fff;
	background-image: none !important;
	background-color: #fff !important;
	background-color: var(--personmenu-highlight-color) !important;
	box-shadow: none !important;
}

nav.personmenu .logout .currentsession button:hover img.static,
nav.personmenu .logout .currentsession button:focus img.static
{
	filter: brightness(0) invert(1);
}
nav.personmenu .logout .othersessions
{
	padding: var(--personmenu-gap);
}

/* personmenu change locale */

.toggleminimenu > span + img
{
	height: 1.25rem;
	vertical-align: middle;
}

nav.personmenu div.locale
{
	color: var(--personmenu-link-color);
}

nav.personmenu .toggleminimenu
{
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
}

nav.personmenu .toggleminimenu:hover,
nav.personmenu .toggleminimenu:focus
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
}

nav.personmenu .toggleminimenu:hover img,
nav.personmenu .toggleminimenu:focus img
{
	filter: brightness(0) invert(1);
}

nav.personmenu div.locale ul.languages > li span
{
	margin-left: 4rem;
	display: block;
	padding: calc(0.5 * var(--gap)) 0;
}

nav.personmenu div.locale ul.languages > li img
{
	display: block;
	position: absolute;
	left: var(--gap);
}

nav.personmenu .toggleminimenu > img + span
{
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* personmenu personal space */
nav.personmenu .ownspace .helpandsupport a > span
{
	margin-left: 3.5rem;
}

nav.personmenu .ownspace:not(.helpextended) div.helpandsupport
{
	display: none;
}

/* personmenu join code */
nav.personmenu div.joincode .joincodeform
{
	padding: var(--personmenu-gap);
}

nav.personmenu div.joincode .joincodeform div.t
{
	margin-top: 0;
}

/* personmenu visit history */
nav.personmenu .visithistory div.novisits
{
	margin-left: var(--personmenu-gap);
}

/* personmenu links*/
nav.personmenu .links div.nolinks
{
	margin-left: var(--personmenu-gap);
}

/* personmenu end */

div.sitemap
{
	margin-top: 0.7rem;
	padding-left: 1rem;
}

.moveitem ul,
.copyitem ul,
.sitemap ul
{
	padding: 0;
	margin: 0;
}

.moveitem ul ul,
.copyitem ul ul,
.sitemap ul ul
{
	margin-left: 2rem;
}

.moveitem li,
.copyitem li,
.sitemap li
{
	list-style: none;
	list-style-position: outside;
	padding: 0;
	margin: 0;
}

.sitemap ul ul li
{
	list-style: disc;
}

.moveitem .other div.t
{
	padding: 0;
	margin: 0.25rem 0rem;
	margin-left: 2.5rem;
}


.rectangle header,
.rectangle .main
{
	padding-top: 0;
	padding-bottom: 0;
}

.rectangle p
{
	margin: 0.5rem 0rem;
}

.dialog.interrupt
{
	margin-bottom: 1rem;
}

.dialogwrapper
{
	position: fixed;
	width: auto;
	height: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	margin: 0;
	padding: var(--gap);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	will-change: opacity;
}

.dialogwrapper.delayshow
{
	animation: fadeinwithdelay 0.9s ease;
}

.dialogwrapper.busy
{
	cursor: wait;
}

.dialogwrapper .dialog
{
	min-width: 40vw;
	box-shadow: var(--boxshadow);
	background: var(--themebackground);
	padding: var(--gap);
	border-radius: var(--bigradius);
	border: solid var(--linewidth) var(--themebackground);
	color: var(--themetextcolor);
	text-align: center;
	cursor: default;
	overflow: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.dialogwrapper.delayshow .dialog
{
	animation: pullup 1.1s ease;
}

.dialog.upload.progress .progressbar.submitting
{
	border: solid var(--linewidth) var(--reversethemebackground);
	border-radius: var(--bigradius);
	padding: var(--linewidth);
	background: var(--reversethemebackground);
}

.dialog.upload.progress .progressbar .indicator
{
	transition: width 1s linear;
}

.dialog.upload.progress .progressbar.submitting .indicator
{
	box-sizing: border-box;
	height: var(--gap);
	border: solid var(--linewidth) var(--reversethemeforeground);
	border-radius: var(--radius);
	background: var(--reversethemeforeground);
	background-size: 3rem 3rem;
	background-image: linear-gradient(-45deg, rgba(170, 170, 170, 0.15) 25%, transparent 25%, transparent 50%, rgba(170, 170, 170, 0.15) 50%, rgba(170, 170, 170, 0.15) 75%, transparent 75%, transparent);
	animation: submitting-progress 1s linear infinite;
}

.dialog.upload.progress .status
{
	white-space: pre-wrap;
	margin-bottom: var(--gap);
}

/* jQuery UI dialog styles: */

.ui-dialog.ui-widget
{
	z-index: 1; /* raise above .ui-widget-overlay which comes in the source order AFTER this element because of jQuery UI braindamage */
}

.ui-widget-overlay
{
	grid-row: globalnav-end / footer-start;
	grid-column: lmargin-start / rmargin-end;
	background-color: var(--modalbackdrop-background-color);
	opacity: var(--modalbackdrop-opacity);
}


a.button:link,
a.button:visited,
a.button,
a.secondarybutton:link,
a.secondarybutton:visited,
a.secondarybutton,
span.button,
button.secondary,
button.primary,
li.button > a
{
	border-style: solid;
	border-width: var(--buttonborderwidth);
	border-radius: var(--buttonradius);
	padding: var(--buttonpadding);
	display: inline-block;
	text-decoration: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-shadow: var(--buttonboxshadow);
}

a.button:link,
a.button:visited,
a.button,
span.button,
li.button > a
{
	border-color: #21891f;
	color: #fff;
	background-color: #21891f;
}

a.secondarybutton:link,
a.secondarybutton:visited,
a.secondarybutton,
button.secondary
{
	color: var(--reverselinkbackground);
	background-color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);

}

button.primary
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);
}

button.primary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

div.forumreply.link a
{
	padding-left: 1.4em; /* optical adjustment for space between the icon and text */
	background-repeat: no-repeat;
	background-image: url(icon/message.svg);
	background-size: 1.25em 1.25em;
	background-position: 0% 50%;
}

a.button:hover,
li.button > a:hover
{
	color: #fff;
	background-color: var(--linkbuttonbackgroundcolorhover)
}

a.secondarybutton:hover,
button.secondary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

a.button:active,
li.button > a:active
{
	color: #fff;
	border-color: #78dc25;
}

button.secondary:active,
a.secondarybutton:active
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundactive);
}


button.secondary:focus,
a.secondarybutton:focus
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundfocus);
}

a.button:focus:not(.submitting),
li.button > a:focus:not(.submitting)
{
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	outline: none;
}

span.button.disabled
{
	color: #222;
	background-color: #888a85;
	border: solid #888a85 0.1rem;
}

input.s.dangerous,
button.dangerous
{
	color: #fff;
	background: #C82038;
	border-color: #C82038;
}

input.s.dangerous:hover,
button.dangerous:hover
{
	color: #fff;
	background: #b21c32;
}

input.s.dangerous:focus,
button.dangerous:focus
{
	color: #fff;
	background: #9c192c;
}

input.s.dangerous:active,
button.dangerous:active
{
	color: #fff;
	background: #861526;
}

.formcontext
{
	margin-top: 0.5rem;
}

.license
{
	display: block;
	padding: calc(0.5 * var(--gap)) 0;
}

iframe.etherpad
{
	border: 1px solid #aaa;
	width: 100%;
	margin: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.1rem;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
	height: 70vh;
}



.calendar.changemonth
{
	padding: 0;
	margin: 0;
	margin-top: 1rem;
}

.onlyjs,
.jshidden
{
	display: none !important;
}

div.ui-dialog
{
	position: absolute;
	background-color: #fff;
	padding: var(--gap);
	border: 0.1rem solid #000;
}
div.ui-dialog .message
{
	padding-top: 1rem;
}

noscript.analytics
{
	display: none;
}

img.noscript.analytics
{
	border: none;
	opacity: 0.05;
	height: 1px;
	width: 1px;
	position: absolute;
	left: -1px;
}

div.agenda
{
	padding-top: 1rem;
}

article.calendar.agenda article.item > footer > div
{
	border-top: none;
}

article.agenda article.item h1 time.calendarevent
{
	white-space: normal;
}

article.agenda > .main > article
{
	padding: 0.5rem 1.0rem 0rem 1rem;
}

div.viewevent.source,
li.viewevent.attachment
{
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
}

table.registrations dt.question
{
	opacity: var(--opacity-nonessential);
	font-size: 0.9rem;
}
table.registrations dd.answer
{
	margin-left: 1rem;
}
table.registrations dl.responses
{
	margin-top: 0;
	margin-bottom: 0;
}

/* Event Module */
.eventmodify div.question
{
	padding: 1rem;
	margin-top: 1rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	border-radius: 0.1rem;
}
.eventmodify div.question .header
{
	display: flex;
	justify-content: space-between;
}
.eventmodify div.question div.organize
{
	display: table;
}
.eventmodify div.question div.organize button
{
	display: block;
	padding: 0.25rem 0.75rem;
}
.eventmodify div.question div.organize button img
{
	height: 1em;
	vertical-align: middle;
}
.eventmodify div.question div.organize button + button
{
	margin-top: 0.25rem;
}
.eventmodify div.question .choiceslist input[type="text"]
{
	width: 80%;
	margin-right: 0.25rem;
}

table.registrations td span
{
	display: block;
}

footer ul.help
{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

footer ul.help li
{
	display: block;
	margin: calc(0.5 * var(--gap)) 0;
	padding: 0;
	margin-right: var(--hgap);
}

footer.page .logo
{
	float: right;
	max-width: 100%;
}

footer.page .logo a
{
	display: flex;
}


footer.page .logo img
{
	height: 2.75rem;
}

div.regnotice
{
	border: solid 1px #ccc;
	background: #eee url("icon/userreg.png") no-repeat center center;
	float:left;
	min-height: 18rem;
	color: #000;
	box-sizing: border-box;
	width:48%;
	margin-right: 2%;
	padding: 1rem;
}

div.regnotice.minor
{
	background: #eee url("icon/minor.png") no-repeat center center;
}

div.regnotice.connect.existing
{
	background: #eee url("icon/extauth-connect.svg") no-repeat center center;
	background-size: 10rem;
}

div.regnotice.create.account
{
	background: #eee url("icon/extauth-connect-register.svg") no-repeat center center;
	background-size: 10rem;
}

div.regnotice > p
{
	margin: 15rem auto 0 auto;
	text-align: center;
}

ul.registration
{
	list-style-position: inside;
	list-style-type: none;
	padding: 0px;
}

ul.registration li
{
	background-color: #eee;
	display: table;
	width: 100%;
}

ul.registration li a
{
	padding: 1rem 1rem 1rem 10rem;
	height: 8rem;
	background-repeat: no-repeat;
	background-size: 8rem;
	background-position: 1rem center;
	display: table-cell;
	vertical-align: middle
}

@media all and (max-width:45rem)
{
	ul.registration li a
	{
		padding: 1rem 1rem 1rem 6rem;
		height: 4rem;
		background-size: 4rem;
		background-position: 1rem center;
	}
}

ul.registration li + li
{
	margin-top: 1rem;
}

ul.registration li.minor a
{
	background-image: url("icon/minor.png");
}

ul.registration li.major a
{
	background-image: url("icon/userreg.png");
}

ul.registration li.connect a
{
	background-image: url("icon/extauth-connect.svg");
}

ul.registration li.register a
{
	background-image: url("icon/extauth-connect-register.svg");
}

ul.registration li a,
ul.registration li a:visited
{
	color: #000;
}

span.bold
{
	font-weight: bold;
}

ul.languages, ul.timezones
{
	list-style: none;
	padding: 0;
}

ul.languages.login.list
{
	clear: both;
}

ul.languages.login.list > li
{
	display: inline;
	font-size: 0.8rem;
}

ul.languages.login.list > li + li::before
{
	content: "∙ ";
	color: #555;
}

ul.languages.login.list a:hover
{
	text-decoration: underline;
}

li.bold > a
{
	font-weight: bold;
}

ul.queuelist
{
	list-style: none;
	margin-left: -2.6rem;
}
ul.queuelist > li > span
{
	font-size: 0.8rem;
}

ul.pagethumbnails
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	grid-column-gap: var(--hgap);
	grid-row-gap: var(--hgap);
	margin-top: 0;
	padding-left: 0;
}

/* special case: number of sub pages == 1 */
ul.pagethumbnails.subpages-1
{
	grid-template-columns: repeat(1, 1fr);
}

.create.content + ul.pagethumbnails
{
	margin-top: 1rem;
}

li.pagethumbnail
{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: 1fr;
	list-style: none;
	background-color: var(--pagethumbnail-background-color);
	border-radius: 0.1rem;
	padding: 0;
	margin: 0;
}

li.pagethumbnail a:hover
{
	box-shadow: var(--hoverboxshadow);
}

li.pagethumbnail a
{
	text-decoration: none;
	/*box-shadow: var(--boxshadow);*/
}

li.pagethumbnail .thumbnail-banner
{
	display: block;
	height: 15rem;
	background-size: cover;
}

li.pagethumbnail.background-1 .thumbnail-banner
{
	background-image: url("img/bg1.jpg");
}

li.pagethumbnail.background-2 .thumbnail-banner
{
	background-image: url("img/bg2.jpg");
}

li.pagethumbnail.background-3 .thumbnail-banner
{
	background-image: url("img/bg3.jpg");
}

li.pagethumbnail.background-4 .thumbnail-banner
{
	background-image: url("img/bg4.jpg");
}

li.pagethumbnail.background-5 .thumbnail-banner
{
	background-image: url("img/bg5.jpg");
}

li.pagethumbnail.background-6 .thumbnail-banner
{
	background-image: url("img/bg6.jpg");
}

li.pagethumbnail .thumbnail-text
{
	display: block;
	color: var(--themetextcolor);
	padding: var(--gap);
}

li.pagethumbnail .pagetitle
{
	font-weight: 600;
}

li.pagethumbnail .lock img
{
	height: 1em;
}

li.pagethumbnail .lockinfo
{
	font-size: 0.8em;
	font-style: italic;
	display: block;
	color: var(--themetextcolor);
	padding: 0;
}

@media all and (max-width:48rem)
{
	ul.pagethumbnails
	{
		grid-template-columns: repeat(1, 1fr);
	}

	section.login
	{
		display: grid;
		grid-template-columns: repeat(auto-fit, 100%);
		gap: var(--hgap);
	}

	div.logindivider {
		margin-top: 0.5rem;
		height: var(--linewidth);
		width: 100%;
		background: #5555554a;
	}
}

div.notificationsubmit
{
	float: right;
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
}
footer > div.notificationsubmit
{
	/* get rid of negative margins - these are just an ugly hack to render button "on the same line" */
	margin-top: -1.5rem;
	border-top: none;
	font-size: 1.25rem;
}
div.notificationsubmit p
{
	margin: 0;
	padding: 0;
}

div.spleopen
{
	margin-top: 0.5rem;
}
div.mce-container-body.mce-abs-layout.warning
{
	background: #FFFF00 none repeat scroll 0 0;
	text-align: center;
}

div.meta-table
{
	display: table;
}
div.meta-table-row
{
	display: table-row;
}
div.meta-table-cell
{
	display: table-cell;
	padding: 0.2rem 0.5rem 0.3rem 0;
}
div.meta-table-cell span.cell-author-id
{
	font-size: 0.8rem;
}
html.deleted .enclose.page main
{
	background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #aaa, #aaa 10px, #ccc 10px, #ccc 20px) repeat scroll 0 0;
}

.ui-dialog-buttonset button.ui-button + button.ui-button
{
	margin-left: 0.5rem;
}


/* links with special icons */

a.responses:before
{
	content: "";
	display: inline-block;
	background-image: url("icon/response.svg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 0.8rem 0.8rem;
	opacity: var(--opacity-nonessential);
	width: 0.8rem;
	height: 0.8rem;
	margin-right: 0.5rem;
	vertical-align: baseline;
}


div.more
{
	margin-top: 1rem;
	text-align: center;
}

div.more span.more
{
	background-image: url("icon/more-vertical.svg");
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: 1.5rem auto;
	padding: 0.1rem 0.3rem 0.1rem 1.5rem;
	display: inline-block;
}

div.more span.more a
{
	color: #000;
	text-decoration: none;
}

div.more span.more a:hover
{
	text-decoration: underline;
}

ul.showall
{
	padding-left: 1em;
}

ul.showall li
{
	list-style-type: none;
}

ul.showall li + li
{
	margin-top: 0.5em;
}

.graphradiobutton,
.graphcheckbox
{
	cursor: pointer;
}

.graphradiobutton input[type=radio]
{
	display:none;
}

#mc-topbar-container, #mc-toast-container, #mc-download-overlay-container, #mc-sidebar-container
{
	display: none !important;
}


header .alerts form
{
	display: inline;
}

header .alerts form input[type=submit]
{
	color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
}

header .alerts > .alert
{
	margin: 0;
}

header .alerts input.s
{
	font-size: 0.8rem;
	padding: 0.2rem 0.5rem;
	margin-left: 0.5rem;
}

header .alerts + .breadcrumbs
{
	margin-top: 0;
}

.frontpage .actions.alerts.active > span
{
	margin-left: 0.5rem;
	background-color: #a00;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	color: #fff;
	border-radius: 50%;
	text-align: center;
}

.frontpage .actions.alerts.active > span:before
{
	display: inline;
	content: "1";
}

.privacy button.createjoincode
{
	font-size: 0.8rem;
	padding: 0.4rem 0.9rem;
}

nav.privacy.content.actions
{
	display: inline-flex;
}

.actions.important .joinsettings a:visited,
.actions.important .joinsettings a:link,
.actions.important .joinsettings a
{
	color: #000;
	font-weight: 400;
	background-color: transparent;
	padding:  0.25rem 0.5rem 0.25rem 1.8rem;
}

.joincodewrapper
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin: -0.5rem calc(-1 * var(--gap)) 0; /* use negative margins to fill background from the borders of details element */
}

.joincodewrapper #currentjoincode
{
	min-width: 10rem;
	text-align: center;
	padding: 0;
}

.joincodewrapper button
{
	background-color: transparent;
	color: #000;
	border: none;
	box-shadow: none;
	font-size: 1rem;
	font-weight: 400;
}

.joincodewrapper nav.actions.privacy
{
	display: inline-flex;
}

.joincodewrapper div.actions,
.joincodewrapper #joincode
{
	display: flex;
	column-gap: calc(0.5 * var(--gap));
	flex-wrap: wrap;
}

.joincodewrapper button:hover:not(.disabled)
{
	box-shadow: none;
	text-decoration: underline;
	background-color: transparent;
}

.joincodewrapper .joincodelink
{
	word-wrap: break-word;
}

.joincodewrapper button
{
	padding-left: 1.8rem; /* reserve space for the action icon */
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-right: 0.5rem;

	background-repeat: no-repeat;
	background-position: 0.4rem 50%;
	background-position: 0.4rem 50%, 0 0;
	background-size: 1.1rem;
	background-size: 1.1rem, 100% 100%;
	font-size: 0.8rem;
}

.joincodewrapper button.renew,
.joincodewrapper button.renew:hover:not(:disabled)
{
	background-image: url("icon/redo.svg");
}

.joincodewrapper button.copy,
.joincodewrapper button.copy:hover:not(:disabled)
{
	background-image: url("icon/copy.png");
}
.joincodewrapper button.remove,
.joincodewrapper button.remove:hover:not(:disabled)
{
	background-image: url("icon/remove.png");
}

.joincodedata.reset #joincode,
.joincodedata.reset #joincodelink
{
	opacity: var(--opacity-nonessential);
}
.joincodedata #joincode
{
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.1rem;
}

ul.simple
{
	list-style-type: none;
}

.popovertoggle
{
	cursor: pointer;
	color: var(--themeforeground);
	background-color: var(--themebackground);
	padding: 0 var(--gap);
}

.popovertoggle:hover
{
	color: var(--themetextcolor);
	background-color: var(--themebackground);
}

.popovertoggle::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f059";
}

.tippy-box
{
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	font-size: 0.9rem;
	box-shadow: var(--boxshadow);
	border-radius: var(--radius);
}
.tippy-box[data-placement=right] > .tippy-arrow:before
{
	border-right-color: var(--reversethemebackground);
}
.tippy-box[data-placement=top] > .tippy-arrow:before
{
	border-top-color: var(--reversethemebackground);
}
.tippy-box[data-placement=bottom] > .tippy-arrow:before
{
	border-bottom-color: var(--reversethemebackground);
}
.tippy-box[data-placement=left] > .tippy-arrow:before
{
	border-left-color: var(--reversethemebackground);
}
.tippy-box > .tippy-backdrop
{
	background-color: var(--reversethemebackground);
}
.tippy-box > .tippy-svg-arrow
{
	fill: var(--reversethemebackground);
}

@media all and (max-width:80rem)
{
	a.assessmentcard.embedded .personwrapper div.name,
	a.assessmentcard.embedded .personwrapper div.courseprogress
	{
		flex-basis: 100%;
		text-align: center;
		justify-content: center;
	}
	a.assessmentcard.embedded div.personwrapper,
	a.assessmentcard.embedded div.goallevels
	{
		flex-basis: 50%;
	}
	.assessmentcontent
	{
		grid-template-columns: repeat(1, 1fr);
	}
	.assessmentcontent .level1
	{
		grid-column: 1;
	}
	.assessmentcontent .graphradiobutton
	{
		grid-row: auto;
		grid-column: auto;
	}
	.assessmentcontent .graphradiobutton.level0,
	.assessmentcontent .graphradiobutton.level1,
	.assessmentcontent .graphradiobutton.level2,
	.assessmentcontent .graphradiobutton.level3,
	.assessmentcontent .graphradiobutton.level4,
	.assessmentcontent .graphradiobutton.level5,
	.assessmentcontent .graphradiobutton.level6,
	.assessmentcontent .skillcontent.noassessment,
	.assessmentcontent.range3 .skillcontent.noassessment,
	.assessmentcontent.range4 .skillcontent.noassessment,
	.assessmentcontent.range5 .skillcontent.noassessment,
	.assessmentcontent.range6 .skillcontent.noassessment,
	.assessmentcontent.range7 .skillcontent.noassessment,
	.assessmentcontent .skillcontent
	{
		grid-column: 1 / span 2;
	}

	.assessmentcontent .skillcontent.level0
	{
		grid-row: 2;
	}

	.assessmentcontent .skillcontent.level1
	{
		grid-row: 3;
	}
	.assessmentcontent .skillcontent.level2
	{
		grid-row: 4;
	}
	.assessmentcontent .skillcontent.level3
	{
		grid-row: 5;
	}
	.assessmentcontent .skillcontent.level4
	{
		grid-row: 6;
	}
	.assessmentcontent .skillcontent.level5
	{
		grid-row: 7;
	}

}

@media all and (max-width:70rem)
{
	a.assessmentcard.embedded div.personwrapper,
	a.assessmentcard.embedded div.goallevels
	{
		flex-basis: 100%;
	}
}

main > .message > .copycodebutton,
.message > .copybutton
{
	color: var(--linkcolor);
	text-decoration: underline;
}

.jssharecontainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.jssharecontainer > a.jstarget,
.jssharecontainer > .jstarget,
.joincodewrapper .currentjoincode
{
	border: 0.0625rem solid #dbdbdb;
	box-shadow: 0  0.0625rem 0.625rem rgba(0,0,0,0.06);
	display: inline-block;
	height: 2rem;
	line-height: 2rem;
	margin:0;
	padding: 0 1rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.jssharecontainer > button.copyurl
{
	line-height: 2rem;
	font-size: 1rem;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	cursor:pointer;
	border: 0.0625rem solid transparent;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* hide copy to clipboard toggles if browser does not support copying to clipboard */
.clipboardcopytoggle
{
	display: none;
}

ul.share,
ul.share li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.share a:before
{
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	vertical-align: middle;
	content: "";
}

ul.share .facebook a:before
{
	content: url("icon/share-facebook.svg");
}

ul.share .twitter a:before
{
	content: url("icon/share-twitter.svg");
}

.actions.important .expandmaincontent a
{
	background-image: url("icon/expandcontent.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1rem 1rem;
}

.jsexpandmaincontent .actions.important .expandmaincontent a
{
	background-image: url("icon/restorecontent.svg");
	background-color: var(--linkcoloremphasized);
}

body.jsexpandmaincontent
{
		grid:
		"lmargin 	globalnav	rmargin" auto
		"lmargin	systemmessages	rmargin" auto
		"lmargin	gap1		rmargin" var(--gapbeforeheader)
		"lmargin	header		rmargin" auto
		"lmargin	main		rmargin" minmax(0,1fr)
		"lmargin	nav		rmargin" auto
		"lmargin	footer		rmargin" auto
		/ auto minmax(0, 90rem) auto;

		--hgap: var(--gap);
}

body.jsexpandmaincontent nav.main
{
	border-top: solid var(--hairlinewidth) var(--themeforeground);
	z-index: 0;
}

/* if jsnav is available, hide menu nav toggle button by default */
body.jsnav nav.global > .menu
{
	display: none;
}

.rootadminenabled nav.global .toggle.rootadmin button
{
	background-color: var(--rootadminhighlightcolor);
	border-color: var(--rootadminhighlightcolor);
}

nav.global > .toggle.rootadmin button
{
	overflow: hidden;
}

nav.global > .toggle.rootadmin button span
{
	position: absolute;
	width: 0rem;
	height: 0rem;
	overflow: hidden;
	color: transparent;
}

nav.global > .toggle.rootadmin button
{
	margin: 0;
	padding: 0;
	width: 2.2rem;
	height: 2.2rem;
	background-image: url("icon/enable-rootadmin-white.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1.5rem 1.5rem;
	border-radius: 50%;
	box-shadow: none;
}

nav.global > .toggle.rootadmin button:focus
{
	box-shadow: var(--focusboxshadow);
}

nav.global > .toggle.rootadmin button:hover
{
	box-shadow: var(--hoverboxshadow);
}

.rootadminenabled nav.global > .toggle.rootadmin button
{
	display: flex;
	background-image: url("icon/disable-rootadmin-white.svg");
	border-width: var(--hairlinewidth);
}

/* Submissionfolder response summary view */
ul.responsesummary
{
	list-style: none;
	padding: 0;
	margin: 0;
	min-height: 25rem; /* reserve vertical space for sort dropdownmenu */
}

ul.responsesummary > .inforow
{
	background-color: var(--navopenbackground);
	color: var(--themetextcolor);
	padding: calc(0.5 * var(--gap));
	padding-right: var(--gap);
	font-size: 0.8rem;
	text-align: right;
}

ul.responsesummary > li > article,
ul.responsesummary > li.inforow
{
	border-bottom: solid var(--hairlinecolordark) var(--hairlinewidth);
	border-radius: 0;
}

ul.responsesummary > li.toolbar
{
	background-color: #E4E8EB; /* not sure if this is correct color */
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	justify-content: space-between;
	padding: var(--gap);
}

li.toolbar > .sortandfilter
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gap);
}

li.toolbar .dropdown.sort > button::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.75 * var(--gap)); /* slightly more margin because icon is so narrow */
	content: "\f338"; /* arrows-alt-v */
}

.sortandfilter .filter .input-group-text.search::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f002"; /* magnifying-glass */
}

.dropdown.sort .dropdown-menu a.selected:after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: var(--gap);
	content: "\f00c"; /* check */
}

li.toolbar button.openall::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f078"; /* chevron-down */
}

li.toolbar button.openall.closeall::before
{
	content: "\f077"; /* chevron-up */
}

li.toolbar .featuresdisabled::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f071"; /* triangle-exclamation*/
}

ul.responsesummary > li.response > article > header
{
	display: flex;
	flex-wrap: nowrap;
	gap: 0em 0.5rem;
	justify-content: start;
	align-items: center;
	cursor: pointer;
	padding: calc(0.5 * var(--gap)) var(--gap);
}

ul.responsesummary > li.response > article.open header
{
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

ul.responsesummary > li.response > article > header:after
{
	font-size: 1.2rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: calc(0.25 * var(--gap));
	content: "\f077"; /* chevron-up */
	margin-bottom: 0; /* override setting */
	display: inline-block /* override setting */
}


li.response > article.unseen:not(.seen) > header
{
	background-color: #E4E8EB;
}
.form.module li.response > article.unseen:not(.seen) > header .person
{
	font-weight: 900;
}

ul.responsesummary > li.response > article > header:hover,
ul.responsesummary > li.response > article > header:hover a,
ul.responsesummary > li.response > article > header:hover .timestamp,
ul.responsesummary > li.response > article > header:hover .timestamp > .overdue
{
	color: var(--reversethemeforeground);
	background-color: var(--buttonbackgroundhover);
	opacity: 1;
}


ul.responsesummary > li.response > article.closed > header:after
{
	content: "\f078"; /* chevron-down */
}

ul.responsesummary > li.response > article > header > .summary
{
	display: flex;
	gap: calc(1.5 * var(--gap));
	justify-content: flex-end;
	margin-right: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header > .summary > span::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header > .summary > .evaluations::before
{
	content: "\f080"; /* chart-bar */
}

ul.responsesummary > li.response > article > header > .summary > .comments::before
{

	content: "\f086"; /* comments */
}

ul.responsesummary > li.response > article > header .menutoggle,
ul.responsesummary > li.response > article > header:hover .menutoggle
{
	background-color: rgba(255,255,255, 0.8)
}

ul.responsesummary > li.response > article > header .title
{
	font-size: 1.15rem;
}

ul.responsesummary > li.response > article.formresponse > header .title
{
	display: none;
}

ul.responsesummary.showpoints > li.response > article > header .summary .points
{
	display: block;
}

ul.responsesummary > li.response > article > header .summary .points
{
	color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius);
	text-align: center;
	min-width: 1.5rem;
	font-size: 0.8rem;
	font-weight: 900;
	display: none;
}

ul.responsesummary > li.response > article > header:hover .summary .points
{
	background-color: var(--themebackground);
	color: var(--themeforeground);
}

ul.responsesummary > li.response > article.closed > header .title
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.responsesummary > li.response > article > header > .overview
{
	flex-grow: 100;
	min-width: 0; /* trick to get .title text-overflow act like ellipsis. see https://css-tricks.com/flexbox-truncated-text/ */
}

ul.responsesummary > li.response > article > header .title::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	font-size: 0.8rem;
	vertical-align: middle;
}

ul.responsesummary > li.response > article > header > .summary > .unseen::after,
ul.responsesummary .highlight.count.unseen::after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: calc(0.5 * var(--gap));
	content: "\f111"; /* circle */
	color: var(--themeerror);
}

ul.responsesummary > li.response > article.unseen.seen > header .title::after,
ul.responsesummary > li.response > article > header > .summary > .unseen.seen::after,
ul.responsesummary .highlight.count.unseen.seen::after
{
	opacity: 0.2;
}

ul.responsesummary > li.response > article.unseen > header .title::after
{
	font-size: 0.85rem;
}

ul.responsesummary > li.response > article.unseen:not(.seen) > header .title
{
	font-weight: 900;
}


ul.responsesummary > li.response > article > header .secondrow
{
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5 * var(--gap));
	align-items: baseline;
	margin-top: calc(0.25 * var(--gap));
}

ul.responsesummary > li.response > article > header .timestamp > .overdue
{
	color: var(--themeerror);
	margin-left: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header .timestamp > .overdue::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: "\f071"; /* exclamation-triangle*/
}

ul.responsesummary > li.response > article > header .authors .person a:hover
{
	text-decoration: underline;
}


ul.responsesummary > li.response > article > header > .actions
{
	flex: 0 0 auto;
}


ul.responsesummary > li.response > article.closed > .main
{
	display: none;
}

ul.responsesummary > li.response > article > div.main
{
	margin: 0;
}

ul.responsesummary > li.response > article > div.main .late.warning
{
	display: none; /* similar warning is rendered in title already */
}

ul.responsesummary > li.response .main .preview + .description,
ul.responsesummary > li.response .main .link + .description,
ul.responsesummary > li.response .main .download
{
	border-top: dashed var(--hairlinewidth) var(--hairlinecolordark);
	margin-top: var(--gap);
	padding-top: var(--gap);
}

ul.responsesummary > li.response > article > header > .summary > .unseen,
ul.responsesummary .highlight.count.unseen
{
	position: relative;
}

ul.responsesummary > li.response > article > header > .summary > .unseen::after,
ul.responsesummary .highlight.count.unseen::after
{
	font-size: 0.55rem;
	position: absolute;
}

ul.responsesummary > li.response > article > header > .summary > .unseen::after
{
	/* move unseen icon on top of other content */
	left: 0.3rem;
	top: 0;
}

ul.responsesummary .highlight.count.unseen::after
{
	/* move unseen icon on top of other content */
	left: 0.6rem;
	top: -0.1rem;
}

ul.responsesummary > li.response > article.link  > .main div.link > a
{
	border: solid var(--hairlinecolor) var(--hairlinewidth);
	box-shadow: var(--buttonboxshadow);
	display: inline-block;
	margin: 0;
	padding: var(--gap);
	text-decoration: none;
}

ul.responsesummary > li.response > article.link > .main div.link > a:hover
{
	text-decoration: underline;
}

.createevaluationui
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin-top: var(--gap);
}

.createevaluationui > h4
{
	margin-top: 0;
}

ul.responsesummary .createevaluationui .formcontext
{
	display: none;
}

.nav-item.all > a::before,
.nav-item.others > a::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f0c0";
}

.input-group
{
	display: flex;
}

.input-group-append
{
	display: flex;
	margin-left: -1px;
}
.input-group > input.tcustom
{
	border-radius: var(--buttonradius) 0 0 var(--buttonradius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.menu.popup .switchgroup
{
	padding-bottom: 1rem;
	padding-top: 1rem;
	padding-right: 1rem;
	border-bottom: var(--hairlinewidth) solid var(--hairlinecolor);
}

.input-group-text
{
	border-radius: 0 var(--buttonradius) var(--buttonradius) 0;
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid var(--forminputbordercolor);
}

ul.infotvpace
{
	list-style-type: none;
	padding: 0;
}

@media all and (max-width:73rem)
{
	body
	{
		grid:
		"lmargin 	globalnav	rmargin" auto
		"lmargin 	searchxsinput	rmargin" auto
		"lmargin	systemmessages	rmargin" auto
		"lmargin	gap1		rmargin" var(--gapbeforeheader)
		"lmargin	header		rmargin" auto
		"lmargin	main		rmargin" minmax(0,1fr)
		"lmargin	nav		rmargin" auto
		"lmargin	footer		rmargin" auto
		/ auto minmax(0, 1fr) auto;

		--hgap: var(--gap);
	}

	main > article > header > h1
	{
		font-size: 2rem;
	}

	li.expandmaincontent
	{
		display: none;
	}

	/* adjust margin to make it look nice with the newly added menu button below */
	body > nav.global > .logo
	{
		margin-left: 0;
	}

	body > nav.global .logo a
	{
		margin-left: calc(var(--gap)*0.25);
	}

	/* bring nav toggle button visible on narrow viewports */
	body.jsnav nav.global > .menu
	{
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		padding-left: var(--gap);
		padding-right: calc(0.25 * var(--gap));
	}

	/* ... except on rootservice */
	.rootservice body.jsnav nav.global > .menu
	{
		display: none;
	}

	body.jsnav nav.main
	{
		position: fixed;
		top: 4rem;
		left: calc(-2rem - var(--menuwidth));
		width: var(--menuwidth);
		max-width: calc(100vw - 2rem);
		height: 100vh;
		max-height: calc(100vh - 4rem);
		box-sizing: border-box;
		background: var(--themebackground);
		overflow: auto;
		box-shadow: var(--hoverboxshadow);
		transition: left 0.3s ease-out;
		will-change: left;
	}

	body.jsnav.jsnavopen nav.main
	{
		left: 0;
		z-index: 20;
	}

	/* tweaks to nav toggle button while menu is open */

	body.jsnav.jsnavopen #navtoggle img
	{
		display: none;
	}

	body.jsnav.jsnavopen nav.global > .menu
	{
		background: var(--reverselinkbackground);
	}

	body.jsnav.jsnavopen #navtoggle:before
	{
		display: block;
		content: url("icon/close-darkblue.svg");
		/*filter: brightness(0) invert(1);*/
		height: 1.6rem;
		width: 1.6rem;
	}

	ul.organize li.jsorganize
	{
		/*Reserve space for scrolling the page on touch devices*/
		margin-right: 4rem;
	}

	ul.organize img.thumbnail
	{
		/*Make image thumbnails smaller on narrow devices*/
		width: 5rem;
		height: 5rem;
	}
}

@media all and (max-width:60rem)
{
	nav.global > .loginlogout a.logout span
	{
		display: none;
	}
}

@media all and (max-width:58rem)
{
	nav.global > .person span
	{
		display: none;
	}
}

@media all and (max-width:54rem)
{
	main.page > article > section
	{
		grid-template-columns: auto;
	}
}

@media all and (max-width: 48rem)
{
	nav.global > .toggle.modify button
	{
		overflow: hidden;
	}

	nav.global > .toggle.modify button span
	{
		position: absolute;
		width: 0rem;
		height: 0rem;
		overflow: hidden;
		color: transparent;
	}

	nav.global > .toggle.modify button
	{
		margin: 0;
		padding: 0;
		width: 2.2rem;
		height: 2.2rem;
		background-image: url("icon/enable-modify-white.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 1.3rem 1.3rem;
		border-radius: 50%;
	}

	nav.global > .toggle.modify button
	{
		background-image: url("icon/disable-modify-white.png");
	}
}

@media all and (max-width:38rem)
{
	nav.global > .logo span
	{
		display: none;
	}

	body > nav.global .logo a
	{
		border-radius: 50%;
	}


	body > nav.global
	{
		grid:
		"lmargin	menu	logo	personsearch	space	searchxs	rootadmintoggle	language	messages	notifications	person	loginlogout	rmargin"	4rem
	/	auto		auto	auto	auto		1fr	auto		auto		auto		auto		auto		auto	auto		auto;
	}

	body > nav.global > .searchnav
	{
		grid-area: searchxsinput;
		grid-column: lmargin-start / rmargin-end;
		display: none;
		padding: var(--gap);
	}

	.showsearch body > nav.global > .searchnav
	{
		display: flex;
	}

	body > nav.global > .searchnav form
	{
		margin: 0;
	}

	.searchnav .searchdocuments input[type="search"]
	{
		max-width: 100%;
		width: 100%;
	}

	#showsearch
	{
		display: flex;
	}

	a.resourcelink:link,
	a.resourcelink:visited,
	a.resourcelink,
	a.button:link,
	a.button:visited,
	a.button,
	a.secondarybutton:link,
	a.secondarybutton:visited,
	a.secondarybutton,
	span.button
	{
		padding: var(--buttonpaddingnnarrow);
	}

	ul.responsesummary > li.response > article > header
	{
		flex-wrap: wrap;
		position: relative;
	}

	ul.responsesummary > li.response > article > header > .overview
	{
		flex-basis: 100%;
		margin-bottom: calc(0.5 * var(--gap));
		padding-bottom: calc(0.5 * var(--gap));
		border-bottom: dashed var(--hairlinewidth) var(--hairlinecolor);
	}
	ul.responsesummary > li.response > article > header > .summary
	{
		margin-right: auto;
	}

	ul.responsesummary > li.response > article > header:after
	{
		position: absolute;
		right: 1.5rem;
		top: 0.5rem; /* position open toggle icon on the same height than title */
	}

	ul.responsesummary > li.response > article > header .title
	{
		padding-right: 1.75rem; /* leave space for open toggle icon */
	}
}

@media all and (max-width:33rem)
{
	.privatemessage.bubble
	{
		max-width: 80%;
	}

	article.forum
	{
		--hgap: 0.6rem;
	}
	article.forum.document > header .person img
	{
		margin-right: 0.2rem;
	}
	div.bannerdropdownmain
	{
		bottom: 0;
		left: 0.5rem;
	}
}

@media all and (max-width:25rem)
{
	nav.global > .toggle.modify button
	{
		width: 2.2rem;
		height: 2.2rem;
	}

	body > nav.global img
	{
		width: 1.4rem;
		height: 1.4rem;
	}

	nav.global .person .icon
	{
		width: 1.9rem;
		height: 1.9rem;
	}

	nav.global > .toggle.rootadmin button
	{
		width: calc(1.9rem + var(--hairlinewidth));
		height: calc(1.9rem + var(--hairlinewidth));
	}

	article.forum
	{
		--hgap: 0.3rem;
	}
	article.forum.document > header .person img
	{
		margin-right: 0.2rem;
	}

	article.evaluation > header > .header
	{
		grid-template-columns: 1fr;
	}
}

@media all and (min-width:25rem)
{
	.form.summary .highlighttool
	{
		max-width: 50vw;
	}
}

@media all and (max-width:21rem)
{
	body > nav.global > .loginlogout a.primarylink, body > nav.global > .loginlogout a.secondarylink
	{
		font-size: 0.8rem;
	}
	/* Quick fix: do not render meta-tag on narrow views because it would be rendered on wrong position */
	span.beta-feature
	{
		display: none;
	}
}

@media print
{
	/* TODO: improve form rendering: http://www.inserthtml.com/2013/09/custom-checkbox-set/ */
	/* long selectors to articially increase specificity to avoid using !important anywhere, see especially "html " prefix */

	html body
	{
		--reversethemeforeground: var(--themeforeground);
		--reversethemebackground: var(--themebackground);
	}

	html,
	body,
	body > header,
	body > main,
	main,
	article > .main,
	body > header > .breadcrumbs,
	h1.toplevel a:link, h1.toplevel a:visited
	{
		display: block;
		padding: 0;
		margin: 0;
		min-height: auto;
		border: none;
	}

	.breadcrumbs > a,
	.breadcrumbs > span
	{
		min-width: auto;
		width: auto;
		height: auto;
		color: inherit;
		background: none;
		margin: 0;
		padding: 0;
	}

	.breadcrumbs > span
	{
		padding: 0 0.5rem;
	}

	body > header > .breadcrumbs
	{
		overflow: hidden;
		text-overflow: ellipsis;
	}

	html
	{
		font-size: 10pt;
		margin: auto;
		widows: 3;
		orphans: 2;
	}

	div.main.page,
	main,
	section,
	.rootservice .hero ul,
	.rootservice .hero li,
	.rootservice main .wrapper,
	ul.extauthservices,
	ul.extauthservices li,
	main.systemperson ul.pages,
	main.systemperson ul.links,
	main > article,
	main > div.main,
	section > .main
	{
		/* workaround Firefox printing bug: display:flex renders only first page */
		display: block;
		width: auto;
	}



	html:before
	{
		display: none;
	}

	body > nav.global,
	nav.personmenu,
	ul.actions,
	nav.actions,
	article.haspopupmenus > header > .actions,
	.calendar-wrapper .calendar-header .view-container *,
	.calendar-wrapper .calendar-header .navigation-date *,
	.calendar-wrapper .calendar-header .navigation-container .navigation-arrow,
	div.actions,
	article article > header ul.actions,
	body > header > .statusbar,
	nav.phantom.create.content,
	nav.main,
	footer,
	.reminder,
	main > .messages,
	.main > .messages,
	div.buttons,
	.messages .info,
	.messages .warning,
	.messages .error,
	.info.autosaver,
	article.haspopupmenus > header nav.actions a,
	nav.phantom,
	article.privatemessages > a.reply,
	article.privatemessages > a.markasread,
	article.titleonly > header > h1 > a:after,
	main.systemperson ul.pages li.phantom,
	main.systemperson ul.links li.phantom,
	a.showmore,
	h1.toplevel a img,
	body > .systemmessages
	{
		display: none;
	}

	main > article > header
	{
		padding-bottom: 0;
		border-bottom: none;
		margin-bottom: var(--gap);
	}

	nav.breadcrumbs,
	header nav.global
	{
		display: none;
	}

	body > header > .banner,
	header .banner h1,
	header .banner h1 *
	{
		color: #000 !important;
		background: transparent !important;
		margin: auto;
		padding: 0;
	}

	body > header > .banner
	{
		background: transparent;
		margin: auto;
		margin-bottom: 2rem;
	}

	.shortened
	{
		height: auto;
	}

	.shortened:after
	{
		display: none;
	}

	div.shortenedfooter
	{
		display: none;
	}

	.atom header.page,
	section,
	section > .main,
	section > aside,
	main.page > article > section,
	main.page > article > section > .main,
	main.page > article > section > aside,
	section article.haspopupmenus > header
	{
		display: block;
		width: auto;
	}

	aside:not(:empty),
	section > .main article+article,
	section > aside article+article
	{
		margin-top: var(--gap);
	}


	html,
	html body,
	html main, html footer.page,
	html header.page
	{
		color: #000;
		background: #fff;
		box-shadow: none;
	}

	body article,
	body article article,
	body article.module,
	body article.supermodule,
	body article.learningresource,
	main > article.systemrootpage > header,
	main > article.systemmodulepage > header,
	main > article.titleonly,
	article.wrapper.titleonly > header
	{
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		box-shadow: none;
		background: #fff;
		color: #000;
	}

	html article article,
	html div.framelessimage,
	html nav.main nav.virtualsub li a,
	html nav.main nav.sub .service a
	{
		border-color: #000;
	}

	body article article
	{
		margin-bottom: 0.5rem;
	}

	html article li > article
	{
		margin-bottom: 0rem;
	}

	article article header
	{
		padding: 0;
	}

	article article header + .main
	{
		padding-bottom: 0.5rem;
	}

	.externalfile.preview video
	{
		box-sizing: border-box;
		width: 100%;
		display: block;
		margin: auto;
	}

	.maincontentwithnavigation,
	.contentwrapper,
	main.content,
	body .maincontentwithnavigation.withsidebar > .contentwrapper > .content > .maincontent,
	aside,
	.maincontentwithnavigation.withsidebar > .contentwrapper > .content,
	.maincontentwithnavigation.withsidebar > .contentwrapper > .content > aside
	{
		position: static;
		padding: 0;
		margin: 0;
		float: none;
		width: auto;
	}

	article,
	article article
	{
		page-break-inside: auto;
		break-inside: auto;

		-webkit-hyphens: auto; /* http://crbug.com/47083 suggests that this does not work in Chrome/Chromium, Safari/OSX+English only, see also: http://webkit.org/b/48610 . In addition, some iOS versions of Safari would require custom CSS (http://stackoverflow.com/questions/7907097/css-hyphenation-language), Android 2.3.7 does not support hyphenation */
		-moz-hyphens: auto; /* Firefox 8.0+ needed for Finnish hyphenation */
		-ms-hyphens: auto; /* MSIE 10.0 supports hyphens for selected languages but not for Finnish */
		-o-hyphens: auto; /* not really supported as of 2012-04, tested Opera 11.62/Linux x86_64 */
		hyphens: auto; /* not really supported as of 2012-04 by any UA */
	}

	article.calendarmodule,
	article.commonexternalfileimage,
	article.framelessimage
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	article > header
	{
		break-inside: avoid;
		page-break-inside: avoid;
		break-after: avoid;
		page-break-after: avoid;
	}

	article:not(.calendarmodule):not(.commonexternalfileimage):not(.framelessimage) > header::before
	{
		/* Hack to avoid placing header at the end of the page, source: https://stackoverflow.com/a/53742871/334451 */
		content: "";
		display: block;
		height: 8rem; /* pretend that end of header is 6rem high so this header cannot fit near the end of page */
		margin-bottom: -8rem; /* however, reduce the margin the same amount that the following content can stay in its usual place */
		break-inside: avoid;
		page-break-inside: avoid;
	}

	article.module:not(.calendarmodule):not(.commonexternalfileimage):not(.framelessimage) > header::before
	{
		height: 20rem;
		margin-bottom: -20rem;
	}

	ul.gallery
	{
		widows: 1;
		orphans: 1;
	}

	.gallery li
	{
		min-width: auto;
	}

	img.thumbnail
	{
		width: 16vw;
		height: 16vw;
	}

	.framelessimage img
	{
		object-fit: contain;
		max-height: 100vh;
		max-width: 100vw;
	}

	article article header,
	article article .main
	{
		padding-left: 0;
		padding-right: 0;
	}

	article div div article article,
	.privatemessage.bubble,
	li,
	img,
	a
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.pdf > section > article > header
	{
		break-inside: avoid;
		break-after: avoid;
	}

	.pdf > section > article > .maincontent
	{
		break-before: avoid;
	}

	html article article,
	html div.framelessimage,
	html div.framelessimage img,
	html iframe
	{
		box-shadow: none;
		border-radius: 0rem;
	}

	html.html2pdf iframe
	{
		display: none; /* Ugly workaround for bug https://github.com/electron/electron/issues/27605 */
	}

	.main > article > div > div > .main > div > article:first-child
	{
		page-break-inside: auto;
		break-inside: auto;
	}

	table.likert label
	{
		white-space: nowrap;
		font-size: 0.6rem;
	}
	.customprivacy .label,
	.extendedprivacy .label
	{
		display: none;
	}

	a:link,
	a:visited,
	a
	{
		color: #0c478c;
		text-decoration: none;
	}


	a.skiptonav,
	a.skiptocontent
	{
		display: none;
	}

	html input.s,
	html button,
	html a.resourcelink, html a.resourcelink:link, html a.resourcelink:visited,
	html a.button, html a.button:link, html a.button:visited,
	html fieldset,
	html input.t, html input.t[disabled],
	html .form textarea, html .form textarea[disabled]
	{
		background: #fff;
		color: #000;
		border: solid 0.05rem #666;
		border-radius: 0rem;
	}

	html input.s,
	html button
	{
		display: none;
	}

	/* styles for pdf printing */
	html article + article, div.framelessimage + article
	{
		margin-top: 0;
	}

	main.content
	{
		display: inline;
	}

	main.content div.maincontent > article h1.privacy, div.actions
	{
		display: none;
	}
	main.content div.maincontent article.enclose.module > .main div.gallery.list ul.gallery
	{
		page-break-inside: auto;
		break-inside: auto;
		display: inline;
	}

	h1.maincontent
	{
		page-break-after: avoid;
		break-after: avoid;
		margin-bottom: 1rem;
	}

	article.withoutnavigation.page article.enclose > header h1 {
		float: none;
		font-size: 1.5rem;
		margin: 0;
		padding-bottom: 0;
	}

	article.enclose::after
	{
		display: block;
	}

	h1.maincontent,
	article div.maincontent article.enclose > header h1,
	article div.maincontent article.enclose > header h2,
	article div.maincontent article.enclose > header h3
	{
		page-break-after: avoid;
		break-after: avoid;
		margin: 0;
		padding-bottom: 0.2rem;
	}

	h1, h2, h3, h4, h5
	{
		page-break-inside: avoid;
		break-inside: avoid;
		page-break-after: avoid;
		break-after: avoid;
		clear: both;
	}


	article article > header h1
	{
		float: none;
	}

	.MathJax,
	.MathJax_Display
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.MathJax_Display
	{
		/* workaround chromium bug that causes clipped top of formulas on page change */
		border-top: solid 0.25rem transparent;
	}


	table
	{
		font-size: 0.9rem;
	}

	table
	{
		/*page-break-inside: avoid;*/
		display: block;
		overflow: hidden;
		max-width: 100%;
		font-size: 0.8rem;
		table-layout: fixed;
		width: 100%; /* workaround old enough chromium engine in electron-pdf */
		box-sizing: border-box;
		empty-cells: show;
		/* try to make tables look balanced on their own row: */
		margin-left: auto;
		margin-right: auto;
	}

	table.center
	{
		width: 100%; /* workaround old enough chromium engine in electron-pdf */
	}

	table td, table th
	{
		min-width: auto !important; /* make sure we can fit the cells to a page */
	}

	table th, table td
	{
		border-width: 0.5mm;
		border-color: #ddd;
	}

	tr, th, td, th > *, td > *
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	table,
	tr,
	li,
	img,
	iframe,
	.authors
	{
		page-break-before: avoid;
		break-before: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* users are using bold text as a replacement for titles, avoid breaking after bold text */
	div.content > b
	{
		page-break-after: avoid;
		break-after: avoid;
	}

	.iframe.placeholder
	{
		border: solid var(--themeforeground) var(--linewidth);
		margin: 0;
		padding: var(--gap);
		box-sizing: border-box;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		align-content: center;
	}

	.iframe.placeholder a
	{
		font-family: monospace;
	}

	.iframe.placeholder img
	{
		/* QR code within a placeholder */
		display: block;
		text-align: center;
		margin: auto;
		height: 15rem;
		image-rendering: pixelated
	}

	article div div article
	{
		page-break-inside: auto !important;
		break-inside: auto !important;
	}

	div.coverpage
	{
		page-break-before: right;
		break-before: right;
	}

	div.coverpage
	{
		/*page: cover;*/
		background-color: #ddd;
		width: 100vw;
		height: 100vh;
	}
	html div.coverpage span
	{
		text-align: center;
	}

	html div.coverpage h1.covertitle
	{
		position: absolute;
		left: 50%; top: 80mm;
		font-size: 3rem !important;
		font-weight: 400;
		transform: translate(-50%, -50%);
	}

	article > .main,
	.enclose
	{
		overflow: visible;
	}

	@page
	{
		size: auto;
		margin: 19mm 12.5mm;
		/*@bottom-center
		{
			content: counter(page);
		}*/
	}

	@page :first
	{
		/*@bottom-center
		{
			content: flow(docuserfullname);
		}*/
	}

	div.coverpage > span
	{
		/*flow: static(docuserfullname);*/
		font-weight: normal;
		font-size: 0.8rem;
		color: transparent;
	}

	/* TOC */
	ul.tocList
	{
		page-break-after: always;
		break-after: page;
	}

	ul.tocList, ul.tocList ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	ul.tocList ul
	{
		margin-left: 1rem;
		font-weight: normal;
	}

	ul.tocList li
	{
		line-height: 1.8rem;
		height: auto;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	ul.tocList li a
	{
		color: #000 !important;
	}

	ul.tocList a::after
	{
		content: leader('.') target-counter(attr(href), page);
		font-style: normal;
	}

	ul.tocList > li.frontmatter a::after
	{
		content: leader('.') target-counter(attr(href), page, lower-roman);
		font-style: normal;
	}

	ul.tocList > li.endmatter a::after
	{
		content: leader('.') target-counter(attr(href), page);
		font-style: normal;
	}
}

/* workaround a bug that causes MSIE 10.0 to go into infinite loop if break-inside:avoid is set on an element that is longer than a page -- -ms-high-contrast test is for MSIE 10.0 or higher */
@media print and (-ms-high-contrast: active), (-ms-high-contrast: none) { article, article article { break-inside: auto; } }

table.diff
{
	font-family: monospace;
	font-size: 0.8rem;
}
table.diff td.diffDeleted
{
	border: 1px solid #ffc0c0;
	background-color: #ffe0e0;
}
del.versionhistory, del.versionhistory > *  { background-color: #ffe0e0; }
ins.versionhistory, ins.versionhistory > * { background-color: #e0ffe0; }
table.diff td.diffInserted
{
	border: 1px solid #c0ffc0;
	background-color: #e0ffe0;
}
p.diff.identical
{
	background-color: #fcfcc0;
	border: 1px solid #ccc;
	padding: 0.8rem;
}
/*!
 * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
 */
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

.modal-header h4
{
	font-size: 1.2rem;
}
.modal-footer button.secondary
{
	color: var(--themeerror);
	padding: 0 0.5rem 0 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.modal-footer button.secondary:hover
{
	text-decoration: underline;
	background: transparent;
	border-color: transparent;
}

.modal button.close
{
	float: right;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	height: 2.5rem;
	background: #fff;
	color:#C82038;
	border-radius: 0.75rem;
	min-width: 2.5rem;
	box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.25);
	border: 2px solid #C82038;
}
.modal button.close:hover
{
	background: #b21c32;
	border: 2px solid #b21c32;
	color: #fff;
}

.modal button.close i
{
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-family: "Font Awesome 5 Free";
	text-rendering: auto;
	position: relative;
}

.modal button.close i::before
{
	content: "\f00d";
}

.nav
{
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.nav > li > a
{
	display: block;
	padding: var(--buttonpadding);
}
.nav > li > a:hover,
.nav > li > a:focus
{
	text-decoration: none;
	background-color: #eeeeee;
}
.nav > li.disabled > a
{
	color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus
{
	color: #777777;
	text-decoration: none;
	cursor: not-allowed;
	background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus
{
	background-color: #eeeeee;
	border-color: #337ab7;
}
.nav .nav-divider
{
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}
.nav > li > a > img
{
	max-width: none;
}
.nav-tabs
{
	border-bottom: 1px solid var(--hairlinecolordark);
	display: flex;
	flex-wrap: wrap;
}

.nav-tabs > li > a
{
	border-radius: 0;
	border: 1px solid transparent;
	border-top-left-radius: var(--buttonradius);
	border-top-right-radius: var(--buttonradius);
	line-height: 3.1rem;
	height: 3.1rem;
}
.nav-tabs > li > a > img + span
{
	margin-left: calc( 0.5 * var(--gap) );
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus
{
	background-color: #fff;
	color: var(--linkcolor);
}
.nav-tabs > li:not(.active) > a:hover,
.nav-tabs > li:not(.active) > a:focus
{
	border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs > li.active > a
{
	color: #fff;
	background-color: var(--themeforeground);
}

.nav-tabs > li.active > a .highlight.count
{
	background-color: #fff;
	color: var(--themeforeground);
}
.nav-tabs > li.active > a:hover
{
	color: #fff;
	background-color: var(--buttonbackgroundhover);
}
.nav-tabs > li.active > a:focus
{
	color: #fff;
	background-color: var(--buttonbackgroundfocus);
}
.nav-tabs.nav-justified
{
	width: 100%;
	border-bottom: 0;
}
.nav-tabs.nav-justified > li
{
	float: none;
}
.nav-tabs.nav-justified > li > a
{
	margin-bottom: 5px;
	text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu
{
	top: auto;
	left: auto;
}
@media (min-width: 768px)
{
	.nav-tabs.nav-justified > li
	{
		display: table-cell;
		width: 1%;
	}
	.nav-tabs.nav-justified > li > a
	{
		margin-bottom: 0;
	}
}
.nav-tabs.nav-justified > li > a
{
	margin-right: 0;
	border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus
{
	border: 1px solid #dddddd;
}
@media (min-width: 768px)
{
	.nav-tabs.nav-justified > li > a
	{
		border-bottom: 1px solid #dddddd;
		border-radius: 4px 4px 0 0;
	}
	.nav-tabs.nav-justified > .active > a,
	.nav-tabs.nav-justified > .active > a:hover,
	.nav-tabs.nav-justified > .active > a:focus
	{
		border-bottom-color: #ffffff;
	}
}
.nav-pills > li
{
	float: left;
}
.nav-pills > li > a
{
	border-radius: 4px;
}
.nav-pills > li + li
{
	margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus
{
	color: #ffffff;
	background-color: #337ab7;
}
.nav-stacked > li
{
	float: none;
}
.nav-stacked > li + li
{
	margin-top: 2px;
	margin-left: 0;
}
.nav-justified
{
	width: 100%;
}
.nav-justified > li
{
	float: none;
}
.nav-justified > li > a
{
	margin-bottom: 5px;
	text-align: center;
}
.nav-justified > .dropdown .dropdown-menu
{
	top: auto;
	left: auto;
}
@media (min-width: 768px)
{
	.nav-justified > li
	{
		display: table-cell;
		width: 1%;
	}
	.nav-justified > li > a
	{
		margin-bottom: 0;
	}
}
.nav-tabs-justified
{
	border-bottom: 0;
}
.nav-tabs-justified > li > a
{
	margin-right: 0;
	border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus
{
	border: 1px solid #dddddd;
}
@media (min-width: 768px)
{
	.nav-tabs-justified > li > a
	{
		border-bottom: 1px solid #dddddd;
		border-radius: 4px 4px 0 0;
	}
	.nav-tabs-justified > .active > a,
	.nav-tabs-justified > .active > a:hover,
	.nav-tabs-justified > .active > a:focus
	{
		border-bottom-color: #ffffff;
	}
}
.tab-content > .tab-pane
{
	display: none;
}
.tab-content > .active
{
	display: block;
}
.nav-tabs .dropdown-menu
{
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.clearfix:before,
.clearfix:after,
.nav:before,
.nav:after {
	display: table;
	content: " ";
}
.clearfix:after,
.nav:after {
	clear: both;
}

.modal-open {
	overflow: hidden;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}
.modal.fade .modal-dialog {
	transform: translate(0, -25%);
	transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
	transform: translate(0, 0);
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}
.modal-dialog {
	position: relative;
	width: auto;
}
.modal-content {
	width: 100%;
	position: relative;
	background-color: #ffffff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999999;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	outline: 0;
	padding: 0 1rem;
	min-height: 100%;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 29;
	background-color: #000000;
}
.modal-backdrop.fade {
	opacity: 0;
}
.modal-backdrop.in {
	opacity: 0.5;
}
.modal-header {
	padding: 1rem 0;
	border-bottom: var(--modalcontentborder);
}
.modal-header .close {
	margin-top: 0;
}
.modal-title {
	margin: 0;
	color: var(--modaltitlecolor);
	font-size: 1.5rem;
	font-weight: 600;
}
.modal-body {
	position: relative;
	padding: 1rem 0.5rem;
}
.modal-footer {
	padding: 1rem 0;
	border-top: var(--modalcontentborder);
}
.modal-footer .btn + .btn {
	margin-bottom: 0;
	margin-left: 0.5rem;
}

.modal-footer .btn-block + .btn-block {
	margin-left: 0;
}
.modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}
.modal-dialog-centered {
	display: flex;
	align-items: center;
}
@media (min-width: 576px){
	.modal-dialog-centered {
		min-height: calc(100% - (1.75rem * 2));
	}
}
@media (min-width: 576px){
	.modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
}
@media (min-width: 768px) {
	.modal-dialog {
		width: 600px;
		margin: 30px auto;
	}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	}
	.modal-sm {
		width: 300px;
	}
}
@media (min-width: 992px) {
	.modal-lg {
		width: 900px;
	}
}
.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
	display: table;
	content: " ";
}
.clearfix:after,
.modal-header:after,
.modal-footer:after {
	clear: both;
}
.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.pull-right {
	float: right !important;
}
.pull-left {
	float: left !important;
}
.hide {
	display: none !important;
}
.show {
	display: block !important;
}
.invisible {
	visibility: hidden;
}
.text-hide {
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}
.hidden {
	/* NOTE: Before trying to re-add this rule, use a better selector - this one is too generic and it's not safe to just set display:none for every thing that might use this class */
	/* display: none; */
	border: solid #f00 1rem;
}
.affix {
	position: fixed;
}

/*
* @Pedantti tyylit 2018
* @license MIT, 2018
* @author Halonen Merja, Kyyhkynen Sami, Kämäräinen Viivi, Mäkinen Erkko, Saareks Jani
*/

div.nearbyevents
{
	background-color: var(--pagebackground);
	padding: 0.25rem 0.5rem;
	margin: var(--gap) 0;
	font-size: 0.9rem;
}
.nearbyevents ul
{
	padding-left: 1rem;
}
.nearbyevents .event > .title
{
	font-weight: 900;
}

.nearbyevents .event > .time
{
	font-size: 0.8rem;
}

.disabledAttachmentLinks a{
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   color: #000000;
}

input.inputAsText {
	background-color: transparent;
	border: none;
	color: #000;
	font-size: 1rem;
	outline: none;
	/*clip-path: inset(0 17px 0 0); /*removes clear-cross from mozilla input/date -field -- if we *really* want plain text input for Mozilla, why not change the field type to text via JS instead? */
}

.inputAsText[type="date"]
{
	-webkit-appearance: none;
}

/* Workaround iOS Safari lineheight issues: */
input.n[type=date],
input.n[type=time]
{
	vertical-align: middle;
}

/* Styles for aria begins */

.aria-container {
	display: none !important;
}

.aria-only {
	clip: rect(1px,1px,1px,1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Styles for aria ends */


/* Styles for calendar-header begins */

.calendar-header {
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
}

.calendar-header a {
	color: var(--themetextcolor);
	padding: 0.3rem 0.5rem;
	text-decoration: none;
	border: solid var(--themetextcolor) 0.05rem;
	border-radius: 0.1rem;
}

.calendar-header .navigation-arrow {
	padding: 0;
}

.calendar-header .navigation-arrow img {
	height: 1.3rem;
	padding-top: 0.2rem;
}

.calendar-header a:hover {
	box-shadow: 0 0 0.25rem #000000;
}

.calendar-header .view-container {
	display: flex;
	white-space: nowrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0.6rem 0;
}

.calendar-header .view-container a:nth-child(2) {
	margin: 0 0.1rem 0 0.1rem;
}

.calendar-header .navigation-container {
	display: flex;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0.6rem 0;
}

.calendar-header .navigation-container h1 {
	margin: 0 0.3rem 0 0.3rem;
	color: var(--themetextcolor);
}

.monthview .calendar-header .navigation-container h1 {
	font-size: 1.6em;
	min-width: 200px;
}

.weekview .calendar-header .navigation-container h1 {
	font-size: 1.5em;
	min-width: 219px;
}

.dayview .calendar-header .navigation-container h1 {
	font-size: 1.5em;
	min-width: 245px;
}

.calendar-header .current-view {
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.calendar-header .navigation-date {
	display: flex;
	white-space: nowrap;
	justify-content: flex-end;
	margin: 0.6rem 0;
}

.calendar-header .today-link {
	margin-right: 0.6rem;
}

.calendar-header .date-selection {
	border: solid var(--themetextcolor) 0.05rem;
	font-size: 1em;
	padding-left: 0.2rem;
}

.jumpToDate {
	display: flex;
}

.jumpToDate input[type="submit"] {
	border: solid var(--themetextcolor) 0.05rem;
	border-radius: 0.1rem;
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	padding: 0.2em;
	cursor: pointer;
	font-size: 0.9em;
}

aside .dayview .calendar-header .navigation-container, aside .dayview .calendar-header .navigation-date {
	width: 100%;
	justify-content: space-between;
	white-space: normal;
}

aside .dayview .calendar-header .today-link {
	margin: 0;
}

aside .dayview .calendar-header .navigation-container h1 {
	min-width: 0;
}
/* Styles for calendar-header ends */

.regglyph::before, .item.local > footer > div::before{
	content:"";
	background: url("icon/registration.svg") no-repeat center center;
	height: 1rem;
	width: 1rem;
	display: inline-block;
	position:relative;
	vertical-align: middle;
	margin: 0.1rem 0.125rem;
	overflow: hidden;
	text-align: center;
}
.monthview .row .col.boldevent
{
	font-weight:bold;
}
/* Styles for general calendar-container begins */

.calendar-container {
	margin: 0 auto;
	width: 100%;
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 0.1rem;
	box-shadow: 0 0 0.5rem rgba(190,190,190,0.5);
	font-size: 1.1em;
	box-sizing: border-box;
}
.col.hasevents:hover{
	cursor: pointer;
}
.anonymous .col:not(.hasevents):hover,.noaccess .col:not(.hasevents):hover{
	cursor: not-allowed;
}

/* Styles for general calendar-container ends */

.agenda-days-container {
	display: none;
}

span.agendashowmore {
	cursor: pointer;
	padding: 1.2rem 0.2rem 0rem;
	display: inline-block;
}
span.agendashowmore > img {
	vertical-align: bottom;
}

/* Styles for MONTH-VIEW begins */
/* Styles for MONTH-VIEW's calendar-container begins */
.monthview .row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
}

.monthview .row .weekday {
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	height: 1.7rem;
	align-items: center;
	display: flex;
	justify-content: center;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	text-align: center;
}

.monthview .row .weeknumber {
	font-size: 0.8em;
	position: absolute;
	z-index: 1;
	padding: 0.4rem;
	color: var(--reversethemeforeground);
}

.monthview .row .col:hover .weeknumber
{
	color: var(--themeforeground);
	background-color: var(--themebackground);
}

aside .monthview .row .weeknumber {
	color: var(--themeforeground);
	opacity: var(--opacity-nonessential);
}

.monthview .row .col {
	width: 8rem;
	height: 7.3rem;
	padding: 0.1rem;
	text-align: right;
	overflow: hidden;
	position: relative;
	background-color: var(--themebackground);
	border: 0.05rem solid var(--pagebackground);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}

.loggedin:not(.anonymous):not(.noaccess) .monthview:not(.calendar-aside) .row .col:hover
{
	opacity: 1;
	cursor: pointer;
	border-color: var(--bannerbackground);
}

.monthview:not(.calendar-aside) .row .col:hover .top-container
{
	color: var(--themeforeground);
	background-color: var(--themebackground);
}
.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover .top-container .day
{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding-top: 0.1rem; /* ??? */
	padding-right:0.3em; /* ??? */
	display: block;
	color: var(--themeforeground);
	background-color: var(--themebackground);
}

.monthview:not(.calendar-aside) .row .currentday.col:not(.hasevents):hover .top-container .day
{
	font-weight: bold;
}

.anonymous .btn-add-event-modal, .noaccess .btn-add-event-modal
{
	cursor: not-allowed;
}

.loggedin:not(.anonymous):not(.noaccess) .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before
{
	content: "+";
	height: 100%;
	color: var(--linkcolor);
	font-size: 3rem;
	font-size: min(max(3rem, 10vw), 4rem);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0.25rem); /* 1/4 of the date number display at the top of the box to make the sign visually more centered to the remaining of the box */
}

.monthview:not(.calendar-aside) .row .col.currentday:hover
{
	opacity: 1;
}

.monthview .row .col a {
	text-decoration: none;

}
/* Styles for MONTH-VIEW's calendar-container ends */

/* previous and/or next month's days that are visible
in the view are shown lighter than the actual month's days */
.monthview .inactive-month
{
	opacity: 0.5;
}

/* current day is shown differently than others */

.monthview .row .col.currentday
{
	background-color: var(--pagebackground);
}

.monthview .row .col.currentday .day {
	font-weight: bold;
}
aside .monthview .row .col.currentday .day{
	font-weight: normal;
}
aside .monthview .row .col,
aside .monthview .calendar-container .row .col
{
	height: 3rem;
}

.loggedin:not(.anonymous):not(.noaccess) aside .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before
{
	font-size: 2rem; /* adjust hover icon size to match the reduced height above */
	transform: translateY(0.5rem); /* visually center the icon, compromise between current date vs other dates */
}


/* Styles for MONTH-VIEW's top-container begins */
.monthview .top-container {
	padding-right: 0.2rem;
	color: #fff;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}
aside .monthview .top-container
{
	background-color: transparent;
	color: #000;
}
/* Styles for MONTH-VIEW's top-container ends */

/* Styles for MONTH-VIEW's events-container begins */

.monthview .events-container {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
}
aside .monthview .events-container
{
	text-align: center;
}
aside .monthview .events-container img.hasevents
{
	height: 0.5rem;
}

.calendar-wrapper .event
{
	font-size: 0.9rem;
	padding: 0 0.1rem;
	box-sizing: border-box;
}
.calendar-wrapper .events-container a.event-url + a.event-url div.event,
.calendar-wrapper .events-container div.more-events
{
	border-top: 1px solid #888;
}

.monthview .events-container .event.regglyph span:first-of-type{
	padding-left: 0rem;
}

.calendar-wrapper .remote-event {
	background-color: var(--personmenu-bg-color);
}

.monthview .events-container .time {
	text-align: center;
	font-weight: bold;
}

.monthview .events-container .heading {
	text-align: center;
	margin-left: 0.2rem;
}

.monthview .events-container a {
	text-decoration: none;
	color: var(--themetextcolor);
}

.monthview .events-container .more-events {
	font-size: 0.8em;
	color: var(--themetextcolor);
	display: flex;
	align-items: flex-start;
	margin-left: 0.1rem;
}

/* Styles for MONTH-VIEW's events-container ends */

/* Styles for MONTH-VIEW's bottom-container begins */

.monthview .bottom-container
{
	position: absolute;
	bottom: 0;
	right: 0.1rem;
	text-align: right;
	height: 1rem;
	padding-bottom: 0.2rem;
	opacity: 0.5;
}

.monthview .bottom-container .add-event{
	padding-left: 2rem;
}

/* Styles for MONTH-VIEW's bottom-container ends */
/* Styles for MONTH-VIEW ends */


/* Styles for WEEK- and DAY-VIEWs' header-container begins */
.dayview a, .weekview a {
	color: var(--themetextcolor);
	text-decoration: none;
}
.header-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	background: #d9d9d9;
	min-height: 1.7rem;
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
}

.header-container .weeknumber-container {
	font-size: 1em;
	color: var(--themetextcolor);
}

.header-container .weeknumber-container .text {
	font-size: 0.8em;
	margin-right: 0.15rem;
}

.header-container .weeknumber-container .number {
	font-size: 1.1em;
}

/* Styles for WEEK- and DAY-VIEWs' header-container ends */

/* Styles for WEEK- and DAY-VIEWs' leftmost-divs (weeknumber and times) begins */

.leftmost {
	min-width: 2.9rem;
	text-align: center;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	box-sizing: border-box;
	font-size: 0.85em;
}

/* Styles for WEEK- and DAY-VIEWs' leftmost-divs (weeknumber and times) ends */

/* Styles for WEEK- and DAY-VIEWs' scroll-viewer begins */

.scroll-viewer {
	max-height: 540px;
	overflow-x: hidden;
	overflow-y: auto;
}

.scroll-viewer .calendar-content {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
}

.scroll-viewer .calendar-content .lines-container {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.scroll-viewer .calendar-content .lines-container .line {
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
	position: relative;
}

.scroll-viewer .calendar-content .event {
	border-radius: 0.2rem;
	width: 100%;
	overflow: hidden;
	position: absolute;
	min-height: 30px;
}

.scroll-viewer .calendar-content .event .details {
	padding: 0.2rem 0 0 0.3rem;
	font-size: 1rem;
}

.scroll-viewer .calendar-content .event .details .time {
	text-align: center;
	font-weight: bold;
}

.scroll-viewer .calendar-content .event .details .heading {
	text-align: center;
}

.scroll-viewer .calendar-content .event .details span {
	vertical-align: middle;
}

.scroll-viewer .calendar-content .times-container {
	height: 100%;
	background: #f3f3f3;
}

.scroll-viewer .calendar-content .times-container .time
{
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.weekview .time,
.weekview .line,
.dayview .time,
.dayview .line
{
	height: 60px;
}

.scroll-viewer .calendar-content .add-event
{
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	z-index: 1;
	opacity: 0.5;
	height: 18px;
}
.anonymous .scroll-viewer .calendar-content .add-event img, .noaccess .scroll-viewer .calendar-content .add-event img  {
	display:none
}
.scroll-viewer .calendar-content .add-event img {
	max-width: 82%;
	text-decoration: none;
	color: var(--themetextcolor);
	font-size: 0.9em;
}

.calendar-wrapper .weekview .event,
.calendar-wrapper .dayview .event
{
	box-shadow: inset 0 0 0 1px #0a7cc3;
	border-radius: 0.1rem;
	background-color: rgba(164, 219, 255, 0.7);
	margin-bottom: 0.0625rem;
}

/* Styles for WEEK- and DAY-VIEWs' scroll-viewer ends */

/* Styles for WEEK-VIEW's header-container begins */

.weekview .header-container .weekday-header {
	display: flex;
	flex: 1;
}

.weekviewheader{
	width: 100%;
}

.weekview .header-container .weekday-header .weekday {
	min-height: 25px;
	font-size: 0.97em;
	border-right: 1px solid #c8c8c8;
	justify-content: center;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	text-align: center;
	align-items: center;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.weekview .header-container .weekday-header .weekday a,
.weekview .header-container .weekday-header .weekday a:link,
.weekview .header-container .weekday-header .weekday a:visited
{
	color: var(--reverselinkforeground);
}


.weekview .weekday .label {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.weekview .header-container .weekday-header .currentday
{
	background-color: var(--pagebackground);
}

.weekview .header-container .weekday-header .currentday  a,
.weekview .header-container .weekday-header .currentday  a:link,
.weekview .header-container .weekday-header .currentday  a:visited
{
	color: var(--linkcoloremphasized);
}

.weekview .header-container .weekday-header .weekday:last-of-type {
	margin-right: 17px;
	border-right: 1px solid #ccc;
}

.weekview .header-container .weekday-header .weekday .text {
	margin-right: 0.2rem;
}

.weekview .header-container .weekday-header .weekday .number {
	word-wrap: normal;
}

/* Styles for WEEK-VIEW's header-container ends */

/* Styles for WEEK-VIEW's scroll-viewer begins */

.weekview .scroll-viewer .calendar-content .days-container {
	display: flex;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.weekview .scroll-viewer .calendar-content .days-container .day-container {
	border-right: 1px solid #c8c8c8;
	height: 100%;
	display: flex;
	flex-grow: 1;
	position: relative;
	text-align: left;
}

.weekview .scroll-viewer .calendar-content .lines-container {
	position: absolute;
}

/* Styles for WEEK-VIEW's scroll-viewer ends */

/* Styles for DAY-VIEWs' scroll-viewer begins */
.dayview .scroll-viewer {
	border-top: 1px solid #c8c8c8;
}

.dayview .scroll-viewer .calendar-content .day-container {
	flex-grow: 1;
	border-right: 1px solid #c8c8c8;
	height: 100%;
	flex-basis: 0;
	overflow: hidden;
	position: relative;
}

.dayview .scroll-viewer .calendar-content .lines-container {
	border-right: 1px solid #c8c8c8;
	text-align: left;
}

.dayview .scroll-viewer .calendar-content .add-event {
	bottom: 0.2rem;
}

/* Styles for DAY-VIEWs' scroll-viewer ends */

/* Styles for JS MODAL begins */
button.close:hover
{
	box-shadow: none;
	background: #eee;
}
.required {
	border: 2px solid #f00;
}

.warning-text, .notification-text
{
	display:none;
	background: transparent;
	border: solid var(--themewarning) var(--linewidth);
	background: var(--themewarning) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
	color: #333;
	padding: calc(0.5 * var(--gap)) var(--gap);
	border-radius: var(--radius);
	margin-top:0;
}
.android .add-event-modal {
	position: absolute;
}
.add-event-modal {
	display: none;
	position: fixed;
	z-index: 11; /* position modal element above popup menus if both co-exist */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	background-color: rgba(0, 0, 0, 0.4);
}

.add-event-modal .content-wrapper
{
	display: flex;
	height: 100%;
	align-items:center;
	overflow: auto;
	box-sizing: border-box;
	padding-top: 4rem;
}

.add-event-modal .content-wrapper .content {
	background-color: #fefefe;
	margin: auto;
	border: 1px solid #888;
	border-radius: 0.1rem;
	box-shadow: 0 0 0.6rem 0.2rem #808080;
	padding: 0.2rem 1rem 0.2rem 1rem;
	width: 100%;
	max-width: 25.63rem;
}

.add-event-modal .confirm-exit, .edit-event-modal .confirm-exit{
	display: none;
}

.add-event-modal .content-wrapper .content .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.8rem;
}

.add-event-modal .content-wrapper .content .header .close:hover {
	color: var(--themetextcolor);
	cursor: pointer;
}

.add-event-modal .content-wrapper .content .row {
	display: flex;
	margin-bottom: 0.7rem;
	align-items: center;
	justify-content: space-between;
}

.add-event-modal .content-wrapper .content .notification-container
{
	display: block;
}

.add-event-modal .content-wrapper .content .row .label-container {
	width: auto;
}

.add-event-modal .content-wrapper .content .row .input-container {
	display: flex;
	flex-grow: 1;
	width: 100%;
	max-width: 300px;
	gap: calc(0.25 * var(--gap));
}

.add-event-modal .content-wrapper .content .row .input-container input.t,
.add-event-modal .content-wrapper .content .row .input-container input.n
{
	width: 100%;
	padding: 0.3rem 0.2rem;
	font-size:1rem;
}

.add-event-modal .content-wrapper .content .row .input-container input[type="time"] {
	max-width: 40%;
}
.add-event-modal .content-wrapper .content .row .input-container input[type="date"] {
	max-width: 60%;
}

.add-event-modal .content-wrapper .content .row .input-container input:disabled{
	cursor: not-allowed;
	background-color: rgb(235, 235, 228);
	color: rgb(84, 84, 84);
}

.add-event-modal .content-wrapper .content .row .buttons-container {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	margin-top: 0.2rem;
}

.add-event-modal .content-wrapper .content .row .buttons-container .secondary {
	color:var(--themetextcolor);
	background: #fff;
	margin-left: calc(0.5 * var(--gap));
	border:1px solid #414141;
}

.add-event-modal .content-wrapper .content .row:last-of-type {
	margin-top: 1rem;
}
.add-event-modal .content-wrapper .content .row .label-container label {
	font-size: 1rem;
	cursor: text;
}

.day-events .modal-event-list .eventinfo
{
	display: flex;
	justify-content: space-between;
}
.day-events .modal-event-list .eventinfo .time
{
	font-size: 0.8rem;
	flex-basis: 29%;
}
.day-events .modal-event-list .eventinfo .summary
{
	flex-basis: 70%;
}

.modal-event-list .regglyph
{
	font-size: 0.8rem;
}
/* Styles for JS MODAL ends */
/*
	Cropper styles
 */
/*
	cropperpreview needs to match main.js
	var canvas = cropper.getCroppedCanvas({
						width: 256, < this
						height: 256 < and this
					});
 */
.cropperpreview
{
	width: 256px;
	height: 256px;
	overflow: hidden;
	aspect-ratio: 1;
	margin: var(--gap);
}
.cropperround
{
	border-radius: 50%;
}

.croppergrouper
{
	display: flex;
	margin: 1rem 0;
}

.tempcroppercontainer
{
	max-width: 75%;
}

.previewrow
{
	min-width: 20%;
	max-width: 23%;
}

/*!
 * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face
{
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("awesome/fa-solid-900.eot");
	src: url("awesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("awesome/fa-solid-900.woff2") format("woff2"), url("awesome/fa-solid-900.woff") format("woff"), url("awesome/fa-solid-900.ttf") format("truetype"), url("awesome/fa-solid-900.svg#fontawesome") format("svg");
}

.fa,
.fas
{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
/** Styles for voice recording start **/
aside .voicerecordercontainer
{
	font-size: 1rem;
}
div.recordoutputcontainer
{
	align-content: end;
	padding-top: 1rem;
}
div.recordtoolcontainer
{
	white-space: nowrap;
	text-align: center;
	min-height: 11rem;
}
.audiorecording-help-text
{
	margin-top: 2rem;
}

.entryform
{
	padding: 1rem;
	background: #E4E8EB;
	border: 1px solid #dbdbdb;
	margin-bottom: 1rem;
}
.entryform .form-group
{
	display: flex;
	flex-direction: column;
}
.form-group label
{
	margin-bottom: .3em;
	color: #333;
}
.form-control
{
	display: block;
	width: 100%;
	font-size: 1rem;
	background-color: #fff;
	background-clip: padding-box;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	border: 1px solid #999;
	border-radius: 0.75rem;
	color: #000 !important;
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0;
}
.recordtoolcontainer .form-group
{
	text-align: left;
}
.form-group
{
	margin-bottom: 1.5rem;
}
div.recordtoolcontainer select
{
	margin-right: 0.3rem;
	width: 100%;
	display: block;
}
.startrecording i.fa-microphone,
.pauserecording i.fa-microphone,
.newstartrecording i.fa-refresh,
.pauserecording i.fa-pause,
.stoprecording i.fa-stop
{
	font-size: 1.5rem;
}

button.newstartrecording
{
	color: #002b54;
	background-color: var(--modalsecondarybuttonbackground-color);
}
button.stoprecording
{
	background-color: rgb(203, 0, 0);
}

button.stoprecording:disabled,
button.stoprecording:disabled:hover
{
	background-color: rgba(203, 0, 0,  0.15);
}
button.startrecording:disabled,
button.pauserecording.off,
button.pauserecording.on
{
	background: #fff;
}

button.pauserecording.off i.fa-pause,
button.pauserecording.on i.fa-microphone
{
	color: #002b54;
}
button.pauserecording.off:hover i.fa-pause,
button.pauserecording.on:hover i.fa-microphone
{
	color: var(--modalsecondarybuttonbackground-color);
}
button.startrecording,
button.pauserecording,
button.stoprecording,
button.newstartrecording
{
	position: relative;
	padding: 0;
	width: 4rem;
	height: 4rem;
	margin-right: 1rem;
}
button.pauserecording.off:hover,
button.pauserecording.on:hover,
button.startrecording:hover
{
	background: var(--modalsecondarybuttonhoverbackground);
}
button.newstartrecording:hover
{
	background: var(--modalsecondarybuttonhoverbackground);
	color: var(--modalwhite);
}
button.stoprecording:hover
{
	background-color: #a12512;
}

button.startrecording,
button.stoprecording,
button.pauserecording,
button.newstartrecording,
button.startrecording:hover,
button.stoprecording:hover,
button.pauserecording:hover,
button.newstartrecording:hover
{
	border: solid var(--hairlinewidth) var(--linkcolor);
}
.recordtoolcontainer button .button-bottom-text
{
	position: absolute;
	top: 3.75rem;
	color: #333;
	display: block;
	width: 4rem;
	text-align: center;
	line-height: 2rem;
	left: 0rem;
}

.recordtoolcontainer button.newstartrecording .button-bottom-text
{
	width: auto;
	left: -0.5rem;
}

.btn.btn-primary.btn-custom-modal:disabled
{
	background: #eee !important;
	color: #000 !important;
	border: none;
	box-shadow: none;
	opacity: 1;
}

span.beta-feature {
	background-color: rgb(203, 0, 0);
	color: rgb(238, 238, 238);
	font-weight: bold;
	font-size: 0.7rem;
	padding: 0.1rem 0.5rem;
	border-radius: 0.2rem;
	position: relative;
	top: -1.2rem;
	left: -2.2rem;
	z-index: 1;
}
@media (min-width: 60rem)
{
	aside ul.buttonslist li span.beta-feature
	{
		top: -2.9rem;
		left: 15.4rem;
	}
}
div.recordertimer
{
	width: 100%;
	text-align: center;
}
div.audiorecoding-help-text
{
	font-size: 0.8rem;
	height: inherit;
}
canvas.visualizer
{
	height: 4rem;
	width: 100%;
	text-align: center;
	background-color: #fffcf2;
}
/** Voice recording end **/

button.refillform::before
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f2ea";
	color: #fff;
}

/* Styles for MEDIA-QUERYs begins */
@media only screen and (max-width: 1100px) {
	.calendar-header {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.calendar-header .view-container {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 1;
	}

	.calendar-header .navigation-container {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 2;
	}

	.calendar-header .navigation-date {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 0;
	}

	aside .dayview .calendar-header .navigation-container {
		order: 0;
		margin-right: 0.1rem;
	}

	.monthview .calendar-container {
		font-size: 1em;
	}

	.monthview .calendar-container .row .col {
		height: 7rem;
	}

	.monthview .add-event img {
		max-width: 80%;
	}
}

@media only screen and (max-width: 1018px) {
	.weekday span {
		display: flex;
		flex-direction: column;
	}
}

@media only screen and (max-width: 980px) {
	.weekview .scroll-viewer .calendar-content .event {
	white-space: nowrap;
	}
	.weekview .scroll-viewer .calendar-content .event .details .time {
	display: none;
	}

}

@media only screen and (max-width: 960px) {
	.monthview .events-container .event {
		margin-bottom: 0.05rem;
	}

	.weekview .weekday .label {
		flex-direction: column;
	}

	.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before {
		font-size: 6rem;
	}
}

@media only screen and (max-width: 600px) {
	.monthview .calendar-container {
		font-size: 0.9em;
	}

	.monthview .bottom-container {
	padding-bottom: 0;
	}

	.monthview .calendar-container .row .col {
		height: 6rem;
	}

	.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before {
		font-size: 4rem;
	}

	.add-event-modal .content-wrapper {
		display: flex;
		margin: 0.8rem;
	}

	.add-event-modal .content-wrapper .content {
		width: auto;
		position: static;
		margin: auto;
		align-items: stretch;
		max-width:320px;
	}

	.add-event-modal .content-wrapper .content .row {
		flex-direction: column;
		align-items: stretch;
	}

	.add-event-modal .content-wrapper .content .row .input-container input[type="time"] {
		max-width: 40%;
	}

	.add-event-modal .content-wrapper .content .row .buttons-container {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 0.2rem;
	}

	.add-event-modal .content-wrapper .content .row .input-container {
		max-width: 100%;
	}
	.nav > li > a
	{
		padding: var(--buttonpaddingnnarrow);
	}
}

@media only screen and (max-width: 424px) {
	.calendar-container .row .weeknumber {
		display: none;
	}

	.calendar-container {
	font-size: 0.9rem;
	}

	.leftmost {
		min-width: 2.4rem;
	}
}
@media only screen and (max-width: 20rem) {
	.add-event-modal .content-wrapper {
		margin: 0;
	}
	.add-event-modal .content-wrapper .content{
		padding-left: 0.4rem;
	}
}

/* Dropzone.js style fixes */
html .dropzone .dz-preview .dz-error-message {
    top: 150px;
}

/* Cropper mobile styles */
@media all and (max-width: 38rem)
{
	.croppergrouper
	{
		flex-wrap: wrap;
	}
	.tempcroppercontainer
	{
		max-width: 100%;
	}
	.previewrow
	{
		display:flex;
		flex-wrap: nowrap;
		min-width: 100%;
	}
	.cropperpreview
	{
		max-width: 35%;
	}
}

/* Styles for MEDIA-QUERYs ends */