/* Hint: if your browser does not get at least 470 points in http://html5test.com/ it will have troubles with this site */
html
{
	/* 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;
	--backdropblur: blur(0.65rem);

	--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;

	--reversethemeforeground: #fff;
	--reversethemebackground: #002b54; /* should usually be identical to --themeforeground */
	/* message colors */
	--themeinfo: #0057a8;
	--themesuccess: #30a136;
	--themewarning: #f56a00;
	--themeerror: #cf3017;

	/* 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);

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

	--gap: 1rem; /* default gap between things */
	--gapbeforeheader: 0rem;
	--hgap: 1.5rem; /* horizontal gap to be increased if lots of horizontal space is available */
	--radius: 2px;
	--bannerradius: 0rem;
	--contentradius: 0;
	--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 */
	--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 */

	--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);
	--focusboxshadow: 0 0 0 0.15rem rgba(255,255,255, 0.25), 0 0 0 0.25rem rgba(0,87,168, 0.25); /* partially transparent link color with offset */
	--accessibilityboxshadow: 0 0 0 3px rgba(255,0,0, 0.75), 0 0 0 5px rgba(255, 255, 255, 0.25); /* heavy red border with faint white outer ring */
	--personmenu-bg-color: #f5f7fa;
	--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));
	
	--pagethumbnail-background-color: #f5f7fa;
	--secondarycontent-background-color: #f5f7fa;

	/* Modal styles for tour and every other modal */
	--modalwhite: #fff;
	--modaltitlecolor: #0057a8;
	--modaltitleborderbottom: solid var(--hairlinewidth) var(--modaltitlecolor);
	--modalcontainerborderradius: 4px;
	--modalbuttonradius: var(--radius);
	--modalprimarybuttonbackground-image: linear-gradient(to bottom, #002d56, #002b54 56%, #001325);
	--modalprimarybuttontextcolor: var(--modalwhite);
	--modalsecondarybuttonbackground-color: var(--modalwhite);
	--modalsecondarybuttonborder: solid var(--linewidth) #002b54;
	--modalsecondarybuttontextcolor: #002b54;
	--modalsecondarybuttonhoverbackground: #003363;
}

/* 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(--themereversebackground);
}

html, input, button, textarea
{
	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;
	font-display: swap; /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display */
}

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

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

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%;
	position: relative;
	line-height: 1.5;
	hanging-punctuation: first allow-end last;
	font-size: 1rem;
}

@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: 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: 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 */
	font-kerning: normal; /* enable kerning in MSIE 10+ */
	font-size-adjust: auto; /* http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop */

	/* 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: 9999998;
	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	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: 9999999;
}

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

body > header
{
	grid-area: header;
}

body > main
{
	grid-area: main;
	padding: 0 var(--hgap) var(--gap) var(--hgap);

	overflow: auto; /* make sure we don't overflow the main content area */
	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-of-type:not(:only-of-type)
{
	margin-bottom: 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: relative;
	top: -6rem; /* height for nav.global plus half the statusbar because this is relative to statusbar middle */
	display: block;
	height: 1em; /* important for pixel perfect alignment to start counting from the middle of the statusbar */
	width: 1px;
	pointer-events: none;
}

/* workaround generic HTML anchor positioning due sticky top banner, source: https://stackoverflow.com/a/22655654 */
/* TODO: try https://caniuse.com/#search=scroll-margin */
/*[id]::before,*/
:target::before
{
	content: '';
	display: block;
	height: 4rem; /* should match the globalnav height below */
	margin-top: -4rem;
	width: 1px;
	visibility: hidden;
	pointer-events: none;
}

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

	align-items: center;
	color: var(--navglobalforeground);
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9999999; /* this must be AT LEAST 9999999 due spectrum using lesser values */
}

.editorfocused body > nav.global,
.editorfocused body > .bottom
{
	position: static;
}

nav.global :link:hover,
nav.global :visited:hover
{
	box-shadow: var(--focusboxshadow);
}

nav.global .logo :link:hover,
nav.global .logo :visited:hover
{
	box-shadow: var(--hoverboxshadow);
}


body > nav.global > *
{
	margin: calc(var(--gap)*0.5);
}

body > nav.global img
{
	height: 1.6rem;
	vertical-align: middle;
}

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

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

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

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

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

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

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

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

body > nav.global > .toggle.modify form button
{
	margin: 0;
}

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

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

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

body > nav.global .logo a
{
	border-radius: 1.25rem;
}

body > nav.global .logo a
{
	border: solid #fff;
}

body > nav.global .logo a img
{

}

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

body > nav.global  a.setlanguage
{
	margin-right: calc(0.5 * 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;
}


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

body > nav.global > .person
{
	grid-area: person;
	display: block;
}

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;
	margin: 0;
}

body > nav.global > .loginlogout .login
{
	margin-right: 0.75rem;
}

.personmenuopen nav.global > .loginlogout
{
	background: var(--thememenubackground);
}


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

	align-items: center;
}

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

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

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

.pagewithsitenav body > header
{
	grid:
		"banner"	auto
		"statusbar"	minmax(5rem, 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);
}

.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;

	color: #fff;
	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));
}

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);
	height: 3rem;
	border-radius: 100%;
	box-shadow: var(--boxshadow);
}

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: 3rem;
}

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

/* 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 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;
	}
}

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: 0.6;
}

.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;
}

fieldset
{
	background-color: #fff;
	color: var(--themetextcolor);
	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: none;
	padding: 0.5rem 1.5rem;
	margin: 0rem;
	display: inline-block;
	-webkit-appearance: none; /* webkit specific workaround for ugly buttons */
	cursor: pointer;
	border-radius: var(--radius);
	box-shadow: 0.1rem 0.1rem 0.4rem rgba(0, 0, 0, 0.25);
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 0.25rem;
}

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-image: linear-gradient(#888a85, #888a85);
	color: rgba(255,255,255, 0.5);
	border-color: #fff;
	cursor: auto;
}

input[type="submit"]:disabled
{
	cursor:not-allowed;
}

input[type="submit"].submitting,
input[type="submit"].submitting:hover,
button.submitting,
button.submitting:hover
{
	cursor:wait;
	color: #fff;
	animation: submitting-progress 1s linear infinite;
	background-repeat: repeat;
	background-size: 3rem 3rem;
	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);
	box-shadow: none;
}

input[type=radio],
input[type=checkbox]
{
	margin: 0;
	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);
}

.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;
}

@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.75 * var(--gap));
	margin: 0.1rem 0rem;
	border: 0.1rem solid #B4C0D1;
	border: var(--linewidth) solid var(--themesubduedforeground);
	-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
{
	border-color: var(--themeforeground);
	outline: none;
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	border-radius: 0;
}

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-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

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

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

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: 100;
	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 */
}

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(--linewidth);
	border-radius: var(--radius);
	box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
	color: var(--themetextcolor);
	padding: calc(0.75 * 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");
}

.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;
}

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

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

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

.notice
{
	border-color: var(--themeinfo);
	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);
	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);
	background: var(--themeerror) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
}

.reminder
{
	font-size: 0.8rem;
	opacity: 0.5;
}

.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;
}

.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;
}

/* Do not allow floated elements outside selected elements */
.enclose:after,
header:after
{
	content: "";
	clear: both;
	display: block;
}

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 .icon
{
	height: 2rem;
	max-width: none;
}

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: 0.8;
}

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: #1470cc;
	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
{
	clear: both;
	padding: 0 0 0.15rem 0;
}
header nav.actions + div.authors
{
	margin-top: 0.5rem;
}

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

div.authors
{
	font-size: 0.8rem;
}

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;
}

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 img
{
	padding-right: var(--gap);
	height: 5rem;
}

h1.toplevel a > span
{
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
}


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 > header > h1
{
	font-size: 2.5rem;
}

/* page main header layout */
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);
	margin-bottom: var(--gap);
}

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: 9999998; /* this must be AT LEAST 9999991 due spectrum using lesser values */
}

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);
	box-shadow: none;
}

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: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
}

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
{
}

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
{
	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: 2;
	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: 2;
	color: transparent;

	opacity: 0.6;
	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: #1470cc;
}

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

section.login
{
	display: grid;
	grid-template-columns: repeat(auto-fit, 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.png");
}

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_nega_rgb.jpg");
}

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;
}


main > article.systemrootpage > header,
main > article.systemmodulepage > header,
article
{
/*	color: #000;
	background: rgba(255,255,255, 0.95);*/
	/*box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);*/
/*	padding: 0.5rem 1.0rem 1rem 1rem;
	position: relative;
	border-radius: 0.1rem;*/
}

main > article.systemrootpage,
main > article.systemmodulepage,
article.titleonly,
.atom main > article
{
	background: transparent;
	padding: 0;
	box-shadow: none;
}

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

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

.atom time
{
	color: #777;
}

.modifyenabled main.page article.document
{
	border: dashed var(--hairlinewidth) var(--themetextcolor);
	padding: var(--gap);
	border-radius: var(--radius);
}

/* remove borders within subscription listing */
.modifyenabled article.page.subscriptions > .main > article > .main > article
{
	padding: unset;
	border: unset;
}

/* except restore borders within subscription listing for these components */
.modifyenabled article.page.subscriptions > .main > article > .main > article.supermodule,
.modifyenabled article.page.subscriptions > .main > article > .main > article.module
{
	border: solid var(--linewidth) var(--themeforeground);
}

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
{
	float: left;
	padding: 0;
	margin: 0;
	font-size: 1.4rem;
	min-width: 50%;
	max-width: 100%;
}

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

article > header > h1 a
{
	display: block;
}

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: 1rem;
}

article article > .main > article
{
	margin-top: var(--gap);
	margin-bottom: 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;
}

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

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

main.page article.supermodule > header,
main.page article.supermodule > 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);
}

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

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

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);
}

article.document + article.document
{
	margin-top: var(--gap);
	border-top: solid var(--linkcolor) var(--hairlinewidth);
	padding-top: var(--gap);
}


.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: 2;
	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);
}
/*
article + article,
article + div.framelessimage,
div.framelessimage + article,
div.framelessimage + div.framelessimage
{
	margin-top: 1.0rem;
}
*/

article.forum .main article.response
{
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	margin-right: -1rem;
}

.forum .response article
{
	border: solid #aaf 0.05rem;
	border-right: none;
}

.forum .response article article
{
	border-color: #afa;
}

.forum .response article article article
{
	border-color: #faa;
}

.forum .response article article article article
{
	border-color: #aaf;
}

.forum .response article article article article article
{
	border-color: #afa;
}

.forum .response article article article article article article
{
	border-color: #faa;
}

.forum .response article.titleonly
{
	border: none;
}
div.forumreply
{
	padding: 0.8rem 0 0;
}
div.forumreply.link a
{
	/* TODO: do not hardcode special type for one link type */
	display: inline-block;
	color: #fff;
	font-weight: bold;
	background-color: #1470cc;
	padding: 0.4rem 0.9rem;
	margin: 0;
	vertical-align: middle;
	box-sizing: border-box;
	border: none;
	border-radius: var(--radius);
	text-decoration: none;
}
div.votetypes
{
	margin-left: 1rem;
}
div.post-votes-container form
{
	display: inline;
}

div.forum-post
{
	display: inline;
    vertical-align: top;
}
div.votes-container
{
	display: block;
    text-align: right;
    vertical-align: text-top;
}
div.votes-container button
{
	color: #ccc;
    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.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: #1470cc;
}

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;
}

body.votepage div.upvote,
body.votepage div.downvote,
body.votepage div.removevote
{
	display: inline-flex;
}
body.votepage div.upvote form p.submitorcancel a,
body.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;
}

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);
}

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;
	border: solid #bbb 0.1rem;
	background-color: #fff;
	background-size: 5rem;
	background-repeat: no-repeat;
	background-position: 50% 40%;
}

.createnew li > div:hover
{
	border-color: #777;
	box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
}

.createnew li > div:active
{
	box-shadow: none;
}

.createnew li > div > a
{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 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: -0.1rem;
	right: -0.1rem;
	left: auto;
	bottom: auto;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border: solid #aaa 0.1rem;
	opacity: 1.0;
}

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


.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: #1470cc;
}

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

.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.other:before { background-image: url("icon/more-vertical.svg"); }

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

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

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

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

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


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

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

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

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

h1.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;
}

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

/* content actions */

nav.content.actions
{
	margin: 0.25rem 0rem;
	padding: 0;
}

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

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 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: #1470cc;
}

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;
}

.actions ul
{
	font-size: 0.8rem;
}

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;
}

.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;
}

nav.actions ul.actions
{
	clear: left;
	float: left;
	line-height: 1.3;
}

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;
}

main > article > header ul.actions:not(.important)
{
	width: 100%;
}

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

details.privacy h1,
details.privacy h2
{
	font-size: 1em;
	font-weight: bold;
}

details.privacy summary h1
{
	color: var(--linkcolor);
	font-size: 1.4rem;
	font-weight: normal;
	display: inline-block;
	padding: 0;
	margin: 0;
}

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);
}

body.cssfilterbug header .actions a
{
}

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

header .actions a:hover
{
	box-shadow: 0 0 0.25rem var(--themetextcolor);
	text-decoration: none;
}

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);
}

.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.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.download a,
	.actions li.assessmentframework a,
	.actions li.learningtracking a,
	.actions.feed a,
	.actions.plaintext 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.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.modify a
	{
		background-image: url("icon/modify.png");
	}
	.actions li.create a
	{
		background-image: url("icon/create.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");
	}
	body.cssfilterbug .actions li.remove a
	{
	}
	.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");
	}
	.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.viewer a
	{
		background-image: url("icon/slideshow.svg");
		background-size: 1.5rem;
	}
	.actions.download a
	{
		background-image: url("icon/download.svg");
		background-size: 1.5rem;
	}
	.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.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;
}

.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");
}

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

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

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,
ul.buttonslist li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.buttonslist
{
	margin-top: 1rem;
}

article.assessmentmodule ul.buttonslist,
article.assessmentcard ul.buttonslist
{
	margin-bottom: 1rem;
}

ul.buttonslist li
{
	display: inline-block;
	margin-top: 0.5rem;
}

a.resourcelink:link,
a.resourcelink:visited,
a.resourcelink,
a.button:link,
a.button:visited,
a.button
{
	padding: 0.3rem 1.0rem;
	display: inline-block;
	margin-top: 0.25rem;
}

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

	aside ul.buttonslist li a.button
	{
		text-align: center;
		display: block; /* render one button per line */
	}
}

@media all and (max-width:45rem)
{
	ul.buttonslist li
	{
		display: block; /* render one button per line */
	}

	ul.buttonslist li a.button
	{
		text-align: center;
		display: block; /* render one button per line */
	}
}

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;
}

article.shortened
{
	overflow: hidden;
	height: 21rem;
	position: relative;
}
article.shortened:after
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1rem;
	content: "";
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.3));
	border-bottom: solid rgba(0, 0, 0, 0.4) 0.06rem;
	z-index: 1;
}
article.shortened > a.showmore
{
	left: 2rem;
	bottom: 0rem;
	position: absolute;
	z-index: 2;
	text-decoration: none;
	color: #fff;
	background: #1470cc;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 0.25rem;
	transition: padding 0.5s;
}

article.shortened > a.showmore:hover
{
	padding-bottom: 0.4rem;
}

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;
	height: 2.0rem;
	border: none;
}

.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;
}

div.comments .new.comment div.t,
div.comments .new.comment p
{
	margin-top: 0rem;
	margin-bottom: 0rem;
}

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
{
	width: 3rem;
	min-width: 3rem;
}

article.privatemessages.list > a > .icon img.icon
{
	width: 100%;
	height: 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 .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: 0.6;
}

article.privatemessages.list > a > .content
{
	margin-left: 0.5rem;
	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: contrast(50%) brightness(130%) sepia(100%) saturate(150%) hue-rotate(300deg);
	filter: url("../../:themefilters/1470cc#dangerous");
}
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;
}

.comments > article
{
	margin-top: 0.5rem;
}

.comments .removed .icon,
.reply.removed .icon
{
	opacity: 0.4;
}
.comments .removed a,
.reply.removed a
{
	color: #ccc;
}
.comment .removed,
.reply .removed
{
	color: #aaa;
}

.evaluationcontent
{
	display: table;
	width: 100%;
}

.etextsegment
{
	display: table-cell;
	overflow: auto;
	padding-left: 1rem;
	vertical-align: middle;
}

.egradesegment
{
	width: 6rem;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.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;
	line-height: 1.1;
	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
{
	padding-top: 0.2rem;
}

.evaluationsummary span.person a
{
	white-space: nowrap;
}

.evaluationsummary .enclose.document.evaluation.draft
{
	background-color: #ffe;
}

.evaluation .authors > div
{
	margin: 0.25rem 0;
}
.evaluation .authors > div.recipientinfo
{
	margin: 0 0.25rem;
}

table.evaluations
{
	font-size: 0.9rem;
	min-width: 100%;
}
table.evaluations td,
table.evaluations th
{
	text-align: center;
	vertical-align: middle;
	word-break: normal;
}

table.evaluations td,
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::-webkit-details-marker
{
	display: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: #1470cc;
}

.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: #1470cc;
}

.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: #1470cc;
}

.assessmentcontent .graphradiobutton:not(.checked) div.details
{
	opacity: 0.5;
}

.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.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: #1470cc;
}

.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: auto; /* 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: 0.5;
	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;
	background: rgba(0,0,0,0.1);
}

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;
}

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;
}

.mce-floatpanel > .mce-container-body.mce-abs-layout
{
	margin-top: -0.1rem;
}

.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:hover,
.mce-btn button:hover,
button.mce-close:hover
{
	box-shadow: none;
}

/* override styles applied by TinyMCE 4.0.17+ */
.mce-floatpanel.mce-container
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom-color: #f0f0f0;
}

/* override styles applied by TinyMCE 4.0.17+ */
.mce-toolbar-grp.mce-container.mce-panel
{
	background: #f0f0f0;
}

/* override styles applied by TinyMCE 4.9.1+ */
.mce-floatpanel > .mce-container-body.mce-abs-layout
{
	margin-top: 0.1rem;
}

label.editorfocus
{
	background: #f0f0f0;
	border-left: 1px solid #c5c5c5;
	border-right: 1px solid #c5c5c5;
	border-top: 1px solid #c5c5c5;
	margin-bottom: -1.3px;
}

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: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
	background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05), rgba(0,0,0,0.1));
}

input.s:focus:not(.submitting),
button:focus:not(.submitting)
{
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	outline: none;
	border-color: #000;
}

input.s:active,
button:active
{
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0), rgba(255,255,255,0.1));
	box-shadow: none;
	box-shadow: var(--hoverboxshadow);
}

input.s.dangerous,
button.dangerous
{
	color: #fff;
	background: #f00;
}


input.t,
textarea
{
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

textarea.monospace
{
	font-family: monospace;
}

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;
}

div.t
{
	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;
}

.submitorcancel a
{
	font-size: 0.8rem;
}

.submitorcancel button
.submitorcancel a
{
	margin-right: calc(0.5 * var(--gap));
}

.submitorcancel button:last-child
.submitorcancel a:last-child
{
	margin-right: 0;
}


p.submitorcancel
{
	margin: 0.5rem 0rem;
	padding: 0;
}

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.azure.details dt
{
	font-weight: bold;
}

ul.persons
{
	padding: 0;
	list-style-type: none;
}
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
{
	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
{
	content: "@";
}

dl.persons img.icon,
ul.persons img.icon,
ul.access img.icon
{
	height: 3rem;
	margin-right: 0.5rem;
}

header time,
header .timestamp
{
	font-size: 0.8rem;
}
time
{
	white-space: nowrap;
}

/** 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: #eee;
	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_Message
{
	display: none;
}

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%;
}

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;
	/*
	border: solid #777 0.1rem;
	box-shadow: 0 0 0.5rem rgba(0,0,0,0.25);
	*/
}

iframe.twitter-timeline
{
	max-height: none;
}

mark.reference_id
{
	font-family: monospace;
	background: transparent;
}

.externalfile.preview
{
	padding-top: 0.5rem;
}

.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
{
	/* display: block; */

	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: #e6e6e6;*/
	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:4;
	cursor: pointer;
	opacity: .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;
}

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: rgba(255,255,255,0.25);
}

details
{
	margin-top: var(--gap);
}

/*
	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);
	border-radius: var(--contentradius);
}

details.open > summary,
details[open] > summary
{
	margin-left: calc( -1 * var(--hgap));
	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; }

/* different style for :privacy */

article.privacy details,
article.privacy details summary
{
	/* margin-left: 0; */
	/* padding: 0; */
}

/* personmenu start */

#menutoggle
{
	/*display: none; /* hide the menutoggle if JavaScript is not available */
}

#personmenutoggle
{
	display: block;
	margin: 0.7rem;
}

.personmenu .placeholder
{
	display: block;
	margin: var(--personmenu-gap);
	opacity: 50%;
}

/* person menu toggle button */
div.loginlogout > span.personmenu
{
	height: 1.5rem;
	width: 1.5rem;
	opacity: 0.6;
	display: inline-block;
	cursor: pointer;
}

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: var(--boxshadow);
}

nav.personmenu:focus,
nav.personmenu li.item.toggleminimenu:focus
{
	outline: unset;
	border-radius: unset;
	box-shadow: var(--boxshadow);
}

body.personmenuopen nav.personmenu
{
	z-index: 9999998;
	width: var(--menuwidth);
}

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 a,
nav.personmenu a:link,
nav.personmenu a:visited,
nav.personmenu 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;
}

input.btn2:hover,
input.btn2:active,
button.btn2:hover,
button.btn2:active,
button.btn2:focus,
button.btn2:focus
{
}

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);
}

nav.personmenu .logout .othersessions button
{
}

nav.personmenu .logout .othersessions button:after
{
}

nav.personmenu .logout .othersessions button:hover,
nav.personmenu .logout .othersessions button:active
{
}

/* 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;
}

a.button:link,
a.button:visited,
a.button,
ul.buttonslist > li > a:link,
ul.buttonslist > li > a:visited,
ul.buttonslist > li > a,
span.button
{
	color: #fff;
	background-color: #21891f;
	border: solid #21891f 0.1rem;
	border-radius: 0.1rem;
	padding: 0.4rem 1.4rem;
	margin: 0rem;
	display: inline-block;
	text-decoration: none;
	-webkit-appearance: none;
	cursor: pointer;
}

a.button:hover,
ul.buttonslist > li > a:hover
{
	color: #fff;
	border-color: #408c00;
}

a.button:active,
ul.buttonslist > li > a:active
{
	color: #fff;
	border-color: #78dc25;
}

span.button.disabled
{
	color: #222;
	background-color: #888a85;
	border: solid #888a85 0.1rem;
}

.formcontext
{
	margin-top: 0.5rem;
}

.license
{
	display: inline;
}

iframe.etherpad
{
	border: 1px solid #aaa;
	width: 100%;
	-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 */
}

.fullcalendar table.fc-header
{
	width: intrinsic !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	margin: auto;
}

.fullcalendar table.fc-header td
{
	background: transparent;
}

.fullcalendar .fc-header-left,
.fullcalendar .fc-header-right
{
	width: auto;
}

.fullcalendar .fc-header-left
{
	padding-right: 1rem;
}

.fullcalendar .fc-header-center
{
	padding-right: 1rem;
}

.calendar.changemonth
{
	padding: 0;
	margin: 0;
	margin-top: 1rem;
}

.fc-header td
{
	border: none;
}

.fc-view-basicDay .fc-event-time
{
	padding-right: 0.5rem;
}

.fc-header tbody, .fc-header tr
{
	display: block;
	width: intrinsic;
	width: -moz-fit-content;
	width: fit-content;
}

.fc-header-left,
.fc-header-center,
.fc-header-right
{
	display: block;
	float: left;
}

.fc-event-title,
.fc-event-time
{
	white-space: nowrap;
	text-overflow: clip;
}

.fc-view-month .fc-state-highlight
{
	background: #eee;
}

.fc-today .fc-day-number
{
	font-weight: bold;
}

.fc-event.remote
{
	background: #88919D;
	color: #fff;
	border: 1px solid #999;
}

.onlyjs
{
	display: none !important;
}

div.ui-dialog
{
	background-color: #fff;
	padding: 1rem;
	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: 0.5;
	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;
}

footer ul.help li
{
	display: inline-block;
	margin: 1rem;
}

footer.page .logo
{
	float: right;
	max-width: 100%;
}

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);
	}
}

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;
}

div.more
{
	margin-top: 1rem;
	text-align: center;
}

div.more span.more
{
	background-image: url("icon/more-vertical.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;
}

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]
{
	background-color: #1470cc !important;
}

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";
}

.joincodedata.reset #joincode,
.joincodedata.reset #joincodelink
{
	opacity: 0.5;
}
.joincodedata #joincode
{
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.1rem;
}

@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 .skillcontent.noassessment,
	.assessmentcontent.range5 .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%;
	}
}

.jssharecontainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.jssharecontainer > a.jstarget
{
	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;
}

.jssharecontainer > button.copyurl
{
	border-radius: 0;
	line-height: 2rem;
	font-size: 1rem;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	cursor:pointer;
	border: 0.0625rem solid transparent;
}

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);
}


/* if jsnav is available, hide menu nav toggle button by default */
body.jsnav nav.global > .menu
{
	display: none;
}

@media all and (max-width:73rem)
{
	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(0, 1fr) auto;

		--hgap: var(--gap);
	}

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

	li.expandmaincontent
	{
		display: none;
	}

	/* bring nav toggle button visible on narrow viewports */
	body.jsnav nav.global > .menu
	{
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		width: 3rem;
		margin: 0;
	}

	/* ... 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: 9999999;
	}

	/* 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;
	}
}

@media all and (max-width:60rem)
{
	nav.global > .loginlogout a.logout span
	{
		display: none;
	}

	body.jsnav nav.global > .menu,
	body > nav.global > .loginlogout
	{
		/*width: 3rem;*/
	}
}

@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:40rem)
{
	body > nav.global > *
	{
		margin: calc(var(--gap)*0.25);
	}
}

@media all and (max-width:38rem)
{
	nav.global > .logo span
	{
		display: none;
	}

	body > nav.global .logo a
	{
		border-radius: 50%;
	}
}

@media all and (max-width:33rem)
{
	nav.global > .toggle.modify button
	{
		overflow: hidden;
	}

	nav.global > .toggle.modify button span
	{
		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%;
	}

	.modifyenabled nav.global > .toggle.modify button
	{
		background-image: url(icon/disable-modify-white.png);
	}

	.privatemessage.bubble
	{
		max-width: 80%;
	}
}

@media all and (max-width:25rem)
{
	nav.global > .toggle.modify button
	{
		width: 2.2rem;
		height: 2.2rem;
	}

	body > nav.global img
	{
		height: 1.4rem;
	}

	body > nav.global > *
	{
		margin: 2px;
	}
}

@media all and (max-width:21rem)
{
	body.jsnav nav.global > .menu
	{
		width: 2.5rem;
	}
}

@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
	{
		font-size: 10pt;
		max-width: 50rem;
		margin: auto;
		orphans: 3;
		widows: 3;
	}

	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
	{
		/* workaround Firefox printing bug: display:flex renders only first page */
		display: block;
		width: auto;
	}



	html:before
	{
		display: none;
	}

	ul.actions,
	nav.actions,
	div.actions,
	article article > header ul.actions,
	nav.main,
	footer,
	.reminder,
	.messages .info,
	.messages .warning,
	.messages .error,
	.info.autosaver,
	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
	{
		display: none;
	}

	nav.breadcrumbs,
	header nav.global
	{
		display: none;
	}

	header .banner
	{
		background: transparent;
		margin: auto;
	}

	header .banner h1,
	header .banner h1 *
	{
		color: #000 !important;
		background: transparent !important;
		margin: auto;
		padding: 0;
	}

	article.shortened
	{
		height: auto;
	}
	article.shortened:after,
	article.enclose.shortened:after
	{
		display: none !important;
	}

	.atom header.page,
	section,
	section > .main,
	section > aside
	{
		display: block;
		width: auto;
	}

	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-top: 0.5rem;
		padding-bottom: 0.25rem;
	}

	article article header + .main
	{
		padding-bottom: 0.5rem;
	}

	.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, p
	{
		orphans: 3;
		widows: 2;
	}

	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 article header,
	article article .main
	{
		padding-left: 0;
		padding-right: 0;
	}

	article div div article article,
	.privatemessage.bubble,
	li
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	html article article,
	html div.framelessimage,
	html div.framelessimage img,
	html iframe
	{
		box-shadow: none;
		border-radius: 0rem;
	}

	.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;
	}

	html .fc-button
	{
		display: none;
	}

	.fc-content a.fc-event
	{
		padding-left: 0.25rem;
		color: #000;
		background: #ccc;
		background: rgba(128, 128, 128, 0.5);
		border-color: #444;
		border-color: rgba(0,0,0, 0.4);
		border-width: 0.15rem;
	}

	.fc-view-month .fc-today.fc-state-highlight
	{
		background: transparent;
	}

	.fc-today .fc-day-number
	{
		font-weight: normal;
	}

	/* 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: inline !important;
	}

	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;
		orphans: 2;
		widows: 3;
	}


	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;
	}

	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;
	}

	article,
	article article
	{
		page-break-inside: auto !important;
	}

	article article.enclose,
	img,
	iframe,
	.authors
	{
		page-break-before: avoid;
		break-before: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	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: 100%;
		height: 100%;
	}
	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%);
	}

	.enclose
	{
		overflow: hidden;
	}

	@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 */


[role="button"] {
	cursor: pointer;
}
.close {
	float: right;
	font-size: 21px;
	font-weight: bold;
	line-height: 1;
	color: #000000;
	text-shadow: 0 1px 0 #ffffff;
	opacity: 0.2;
}
.close:hover,
.close:focus {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.5;
}
button.close {
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}
.modal-open {
	overflow: hidden;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	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: hidden;
}
.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;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000000;
}
.modal-backdrop.fade {
	opacity: 0;
}
.modal-backdrop.in {
	opacity: 0.5;
}
.modal-header {
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
	margin-top: -2px;
}
.modal-title {
	margin: 0;
	line-height: 1.42857143;
}
.modal-body {
	position: relative;
	padding: 15px;
}
.modal-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
	margin-bottom: 0;
	margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
	margin-left: -1px;
}
.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;
	height: 100%;
	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;
}

/* 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;
	line-height: 1.1rem;
}

.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 .view-container {
	display: none;
}

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: 100;
	padding: 0.4rem;
	color: var(--reversethemeforeground);
}

.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.0;
	cursor: pointer;
	border-color: var(--bannerbackground);
}

.monthview:not(.calendar-aside) .row .col:hover .top-container
{
	background-color: var(--bannerbackground);
}
.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover .top-container .day
{
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding-top: 0.1rem;
	padding-right:0.2em;
	display: block;
	background-color: var(--bannerbackground);
}

.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(--bannerbackground);
	font-size: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.linux .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before, .mac .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before{
	padding-top: 0.8rem;
}

.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.4;
}

/* current day is shown differently than others */

.monthview .row .col.currentday
{
	background-color: var(--pagebackground);
}
.currentday,
.monthview .row .col.currentday .top-container {

}
.monthview .row .col.currentday .day {
	font-weight: bold;
}
aside .monthview .row .col.currentday .day{
	font-weight: normal;
}
aside .monthview .row .col {
	height: 2.3rem;
}

/* 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.4;
}

.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: 50;
	opacity: 0.4;
	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: none;
}
.required {
	border: 2px solid #f00;
}
.warning-text, .notification-text {
	display:none;
	background: transparent;
	color: var(--themewarning);
	margin-top:0;
}
.android .add-event-modal {
	position: absolute;
}
.add-event-modal {
	display: none;
	position: fixed;
	z-index: 999;
	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;
}

.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{
	align-items:flex-start;
	flex-direction:column;
}

.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;
}

.add-event-modal .content-wrapper .content .row .input-container input  {
	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%;
	border-right: transparent;
}

.add-event-modal .content-wrapper .content .row .input-container input[type="checkbox"]  {
	width: auto;
	margin-right: 0;
	min-width: 2.1rem;
}
.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: 0.2rem;
	border:1px solid #414141;
}

.add-event-modal .content-wrapper .content .row .buttons-container .secondary:hover {
	box-shadow: 0 0 0.25rem #000;
}

.add-event-modal .content-wrapper .content .row .buttons-container .primary:hover {
	background: #1161b1;
}

.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 */

/* 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%;
	}
}

@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;
	}
}

/* Styles for MEDIA-QUERYs ends */