/* Hint: if your browser does not get at least 470 points in http://html5test.com/ it will have troubles with this site */
html, nav.personmenu
{
	--fontfamily: "Open Sans"; /* optimal font family to use, fallback fonts will be automatically added */
	--fontawesome: "Font Awesome 6 Free"; /* Font awesome with version number for more optimal use in case upgrading to newer versions Check the @font-face if upgrading */

	/* 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, note that this should NOT be used for text because it may have too little contrast */
	--themesubduedforeground: #999;
	--themebackground: #fff; /* the background for content text */
	--themefooterbackground: #eee; /* background color for footer elements. Should be used only for content elements. */
	--backdropblur: blur(0.65rem); /* the amount of blur to apply to backgrounds where ground-glass effect is applied. Note that using this in (at least) sticky or fixed element causes Chrome to remove subpixel antialias from all fonts */

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

	--navglobalbackgroundwithbackdrop: rgba(255,255,255, 0.75); /* the background for the global top navigation area */
	--navglobalbackgroundfallback: rgba(255,255,255, 0.95); /* the background for the global top navigation area in case backdrop-filter is not supported by the browser */
	--navglobalforeground: var(--themeforeground); /* the text color within the global top navigation area */
	--navglobalbackground: var(--navglobalbackgroundfallback); /* the background color within the global top navigation area */

	--menuwidth: min(23rem, 85vw); /* the width of the navigation area for subpage navigation */
	--thememenuforeground: var(--themeforeground); /* text color in menus */
	--thememenubackground: #f5f7fa; /* this is used as a background color of menu and content actions */

	--reversethemeforeground: #fff; /* text color for areas where reverse theme is used, typically same as --themebackground, make sure this has enough contrast to --reversethemebackground for accessibility */
	--reversethemebackground: #002b54; /* should usually be identical to --themeforeground */

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

	--selectionbackground: #c3d5ef; /* background color for selected text */
	--selectionforeground: var(--themetextcolor); /* foreground color for selected text */

	/* message colors */
	--themeinfo: #0057a8; /* The color to us for informational messages, used only for the borders and background with partially transparent white on top to make --themetextcolor readable on top */
	--themesuccess: #30a136; /* The color to use for displaying success confirmation messages, s, used only for the borders and background with partially transparent white on top */
	--themewarning: #f56a00; /* The color to use for warnings (e.g. user input couldn't be fully used as-is but the warning explains the interpretation.) Note that this should be used for borders or other highlight only, not for the text! Used only for the borders and background with partially transparent white on top */
	--themeerror: #cf3017; /* The color to use for errors, used only for the borders and background with partially transparent white on top*/

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

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

	/* banner settings */
	--bannerimage: url("img/bg-abstract.svg"); /* top banner background image */
	--bannerbackground: #0057a8; /* the color for the top banner background, will be seen through the partially transparent parts of the banner image and while the image has is being downloaded */
	--bannerbackgroundposition: 0% 40%; /* the most important pixel in the background image (try to keep this part visible on all screens) */
	--bannerbackgroundsize: cover; /* banner background size relative to the whole element and the image itself, typically "cover" or "contain". */
	--bannerlinkforeground: #fff; /* the color of the links rendered on top of the top banner */
	--bannerlinkbackground: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); /* the background behind the links on top of the banner to have enough contrast to pass accessibility requirements */
	--bannerheight: minmax(max(12rem,20vh), auto); /* the vertical space reserved to render the top banner image */

	/* statusbar */
	--statusbarheight: 5rem; /* the height of the status bar which says e.g. "Your role on page: administrator". TODO: maybe totally remove this bar in the future to have 5rem more usable space to the content above the fold? */

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

	/* private message colors */
	--privatemessagebackground: #f5f7fa; /* message bubble background */
	--privatemessagecolor: #002b54; /* message bubble text color */
	--privatemessagebackgroundmyself: #002b54; /* message bubble background of my own messages */
	--privatemessagecolormyself: #fff; /* message bubble text color of my own messages */

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

	--gap: 1rem; /* default gap between things */
	--gaphalf: calc(0.5 * var(--gap)); /* half of default gap between things */
	--gapbeforeheader: 0rem; /* the amount of page background image visible before the page banner image */
	--biggap: 1.5rem; /* big gap to be used instead of --gap when enough space is available, should be at least equal to --gap */
	--radius: 5px; /* border radius used for most components */
	--bigradius: 8px; /* border radius used for buttons and similar components */
	--bannerradius: 0rem; /* border radius used for the top banner */
	--hairlinewidth: 1px; /* width of very narrow decorative lines, NOTE: due bugs in Blink, we cannot use rem unit here so this should be defined with px unit */
	--hairlinecolor: rgba(0,0,0, 0.1); /* to make narrow lines to look even narrower, we use special color those those */
	--hairlinecolordark: var(--themeforeground); /* optional, darker color, for narrow lines. In most times --hairlinecolor is one to use */
	--linewidth: 2px; /* width of the border for modules and other similar UI components, rendered with --themeforeground, NOTE: due bugs in Blink, we cannot use rem unit here */
	--buttonheight: 2.75rem; /* default minimum button height, also used for width in case of square buttons; try to use a value which results in integer when multiplied with 16 to avoid rounding errors in Blink */
	--font-weight-bold: 650; /* regular bold level to highlight text */
	--opacity-nonessential: 0.7; /* opacity for non-essential text and controls, e.g. reminder texts, info about historical/deleted content, should only be used for content that is okay to be totally ignored */

	--linkcolor: #0057a8; /* the color used for the links; should be visibly different form --themetextcolor and MUST have at least contrast ratio 4.5 relative to --themebackground */
	--linkcoloremphasized: #002b54; /* special color used for link that require extra emphasis, e.g. current page in breadcrumbs, should be similar to --linkcolor but with even higher contrast */
	--reverselinkforeground: #fff; /* link color on areas with reverse background, see --reversethemeforeground */
	--reverselinkbackground: #002b54; /* link color on areas with reverse background, see --reversethemebackground */
	--navopenbackground: rgba(0, 87, 168, 0.05); /* background for the nav element with one or more children in opened state; this should have partial transparency to allow stacking effect when children have been opened on multiple levels */
	--stripewidth: 0.2rem; /* the width of the decorative stripe on the left edge of the page */
	--stripebackground: linear-gradient(to bottom, transparent, transparent 10rem, var(--reversethemebackground)); /* the style for the stripe, rendered using the background area of the stripe */
	--hoverboxshadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0, 0.25); /* hover effect to be used for buttons et al while hovered */
	--boxshadow: 0rem 0rem 0.5rem rgba(0,0,0, 0.25); /* hover effect to be used for buttons at al while not being hovered */
	--prefocusboxshadow: 0 0 0 0.20rem rgba(0,0,0, 0.10), 0 0 0 0.35rem rgba(255,255,255, 0.10); /* extra effect to apply while hovering an area that would be affected by an action, nearly transparent link color with offset white outline */
	--focusboxshadow: 0 0 0 0.20rem rgba(0,87,168, 0.65), 0 0 0 0.35rem rgba(255,255,255, 0.65); /* visible focus effect, partially transparent link color with offset white outline to ensure enough contrast no both light and dark backgrounds to pass accessibility requirements, should have at least contrast ratio 4.5 against BOTH black and white backgrounds. */
	--focusboxerrorshadow: 0 0 0 0.20rem rgba(255,0,0, 0.65), 0 0 0 0.35rem rgba(255,255,255, 0.65); /* visible focus effect, partially transparent link color with offset white outline to ensure enough contrast no both light and dark backgrounds to pass accessibility requirements, should have at least contrast ratio 4.5 against BOTH black and white backgrounds. */
	--linkcolordisabled : #606060; /* disabled color for links*/
	--placeholdercolor: #999; /* color for placeholder text in input fields */

	/* calendar event colors */
	--calendar-eventbackgroundcolor1: #FFF; /* white predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor2: #2E8B57; /* seagreen predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor3: #7FFFD4; /* aquamarine predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor4: #FFA500; /* orange predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor5: #FF6347; /* tomato predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor6: #800080; /* purple predefined color that we currently support for calendar events*/
	--calendar-eventbackgroundcolor7: #191970; /* midnightblue predefined color that we currently support for calendar events*/
	--calendar-eventtextcolordark : #333; /* text color for lighter background*/
	--calendar-eventtextcolorlight : #FFF; /* text color for darker background*/

	/* personmenu. These settings do not follow theme style. Personmenu is personal space and should always follow default blue theme. */
	--personmenu-bg-color: #f5f7fa; /* background color of whole personmenu */
	--personmenu-link-color: var(--linkcolor); /* text color of the links in personmenu */
	--personmenu-highlight-color: var(--linkcoloremphasized); /* text color of the links in personmenu while focused or hovered */
	--personmenu-effect-color: var(--linkcolor); /* the foreground color to use for decorations within the personmenu, e.g. horizontal separator lines */
	--personmenu-gap: calc(0.5 * var(--gap)); /* the horizontal whitespace for items in personmenu, vertical space will use --gap instead */

	--draftbackground: #fff9eb; /* background color of draft services. At the moment this is used only for Evaluations. Kind of 'lets see if this is a good idea' solution */
	--pagethumbnail-background-color: #f5f7fa; /* when page has no content but at least one subpage, the content area will contain big rectangles to play as big click targets to select the subpage, this is the background color of that rectangle */
	--secondarycontent-background-color: #f5f7fa; /* background color of secondary content (used e.g. content action toolbar background and to wrap nested forms inside another content), must be light enough that --linkcolor and --themetextcolor have at least contrast ratio 4.5 when rendered on top of this */
	--pagethumbnail-banner-height: 15rem; /*  page thumbnail banner height */
	--pagethumbnail-banner-height-dense: 10rem; /* page thumbnail banner height with dense style */

	--content-action-toolbar-color: var(--themetextcolor); /* typically not used */
	--content-action-toolbar-background-color: #f5f7fa; /* should be color with minimum contrast ratio of 4.5 compared to --linkcolor */
	--content-action-toolbar-border: solid var(--hairlinewidth) #e4e8eb;

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

	--dropdown-toggle-width: 2rem; /* the width of the clicktarget */
	--dropdown-toggle-width-neg: calc(-1 * var(--dropdown-toggle-width)); /* negative space needed to reverse --dropdown-toggle-width, calc() may not work correctly in older Safari because its buggy */

	/* Modal styles for tour and every other modal. Note! These variable names are used on other files too, e.g. shepherd.css and pn-dialog.css */
	--modalwhite: #fff; /* FIXME: Why "white" in the property name?? Can this be anything but #fff in reality? */
	--modaltitlecolor: var(--themeforeground);
	--modalcontentborder: solid var(--hairlinewidth) var(--themeinfo);
	--modalcontainerborderradius: var(--radius);
	--modalbuttonradius: var(--radius);
	--modalprimarybuttonbackground-image: linear-gradient(to bottom, #002d56, #002b54 56%, #001325);
	--modalprimarybuttonbackground-image-reverse: linear-gradient(to bottom, #001325, #002b54 56%, #002d56);
	--modalprimarybuttontextcolor: var(--modalwhite);
	--modalsecondarybuttonbackground-color: var(--modalwhite);
	--modalsecondarybuttonborder: solid var(--linewidth) #002b54;
	--modalsecondarybuttontextcolor: #002b54;
	--modalsecondarybuttonhoverbackground: #003363;

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

	/* Form disabled styles */
	--disabled-background-color: #f1f1f1; /* background color for disabled form inputs. */
	--disabled-foregound-color: #606060;

	/* Assessment */
	--assessment-highlightcolor-self: #2E8B57; /* color for self assessment (role 1). Same color should be used in main.js where rendering assessment history graph */
	--assessment-highlightcolor-teacher: #002b54; /* color for teacher assessment (role 2). Same color should be used in main.js where rendering assessment history graph */
	--assessment-foregroundcolor-self: #fff; /* foreground color for self assessment (role 1) when backgroundcolor is --assessment-highlightcolor-self */
	--assessment-foregroundcolor-teacher: #fff; /* foreground color for teacher assessment (role 2) when backgroundcolor is --assessment-highlightcolor-teacher */

	/* Evaluation */
	--evaluation-pass-background-color: #21891f; /* background color for evaluation whose type is pass */
	--evaluation-pass-foreground-color: #fff; /* foreground color for evaluation whose type is pass */
	--evaluation-fail-background-color: #cf3017; /* background color for evaluation whose type is fail */
	--evaluation-fail-foreground-color: #fff; /* foreground color for evaluation whose type is fail */
	--evaluation-requiresrevision-background-color: #eed70e; /* background color for evaluation whose type is requires revision */
	--evaluation-requiresrevision-foreground-color: #333; /* foreground color for evaluation  whose type is requires revision */

	--profilecard-width: 18rem; /* profile card width on wide screen */
	--profilecard-width-narrow: 15rem; /* profile card width on narrow screen */
	--profilecard-image-size: 14rem; /* profile card mugshot width on wide screen */
	--profilecard-image-size-narrow: 11rem; /* profile card mugshot width on narrow screen */

	--newfeatureindicatorcolor: #0057a8; /* new feature indicator color */
	--newfeatureindicatorsize: 0.9rem; /* new feature indicator font size */

	--font-icon-peerevaluation: "\f4ff"; /* icon for peer evaluation. */
	--font-icon-draft: "\f06a"; /* circle-exclamation */

	/* Notifications */
	--notification-unread-background: #eee; /* background color for new notification */

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

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

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

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

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

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

@view-transition
{
	/* demo at https://view-transitions.netlify.app/stack-navigator/mpa/ */
	/* enable animations between cross-document transitions */
	/* navigation: auto; */
	/* animation-duration: 0.35s; */
}

@media (prefers-reduced-motion)
{
	@view-transition
	{
		navigation: none;
	}
}

::selection
{
	background: var(--selectionbackground);
	color: var(--selectionforeground);
}

::placeholder
{
	color: var(--placeholdercolor);
}

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

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

input, button, textarea, .xhtmleditor
{
	/* if browser supports inherit for the font-family, use the inherited font always */
	font-family: inherit;
}

/* reset font back to default for selected UI components */
nav.global,
nav.global .searchnav input,
article.modify,
article.privacy,
article.dialog,
.submitorcancel,
nav.actions,
ul.actions,
summary,
nav.phantom,
nav.personmenu,
label,
button,
.button,
legend,
.statusbar,
.message,
.toast-wrap,
input.shortname,
input[type=date],
input[type=time],
input[type=file],
input[type=url],
input[type=radio],
input[type=checkbox],
.systemperson.links,
.systemperson.subscriptions,
.systemperson.assessmenthistory,
.systemperson.evaluationsummary,
.systemperson.connections,
.systemperson.messages,
.systemperson.details,
.systemperson.transactions,
.systemperson.profileentries,
footer.page,
.has-form-pseudo-elements
{
	font-family:
		"Open Sans",
		"Arimo",
		"Proxima Nova",
		"Avenir",
		"Segoe UI",
		"Calibri",
		"Noto Sans",
		"Lato",
		"Droid Sans",
		"Frutiger",
		"Liberation Sans",
		"DejaVu Sans",
		"Roboto",
		"FreeSans",
		"Trebuchet MS",
		sans-serif;
}

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

/*!
 * Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
 @font-face
 {
	 font-family: "Font Awesome 6 Free"; /* for some reason you can't use css variable here */
	 font-style: normal;
	 font-weight: 900;
	 font-display: block;
	 src: url("./awesome/fa-solid-900.woff2") format("woff2"), url("./awesome/fa-solid-900.ttf") format("truetype");
 }

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


:link,
:visited
{
	outline: none;
	border-radius: 3px;
}

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

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

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

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

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

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

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

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

h3
{
	font-size: 1.1rem;
}

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

ul, ol
{
	padding: 0rem 0rem 0rem 2rem;
	margin: 1rem 0rem;
}
div.answers-and-points ul.correct-answers
{
	margin: 0rem;
}

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

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

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

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

blockquote,
code.block
{
	margin: 1rem 0rem;
	padding: 0.5rem 1rem;
	background: #eee;
	border-left: solid 0.25rem #aaa;
	border-color: var(--linkcolor);
}

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

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


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

code,
pre
{
	background: #eee;
	color: #000;
}

pre.parsererror.unformatted
{
	white-space: pre-wrap;
}

code.block
{
	display: block;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

body > footer
{
	grid-row: footer;
	grid-column: lmargin-end / rmargin-start;
	grid-area: footer;
	padding: var(--gap);
	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.page
{
	display: flex;
	column-gap: 5rem;
}

body > footer .help
{
	font-size: 0.9rem;
}

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

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

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

html.minimal body > header
{
	display: flex;
	justify-content: center;
	align-items: center;
}

html.minimal body > header img
{
	height: 4rem;
	margin: 1rem;
	display: inline-block;
}

html.minimal body > footer
{
	text-align: center;
}

html.minimal body > footer h2
{
	font-size: 1.5rem;
}

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

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


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

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

body > header
{
	grid-area: header;
}

body > main
{
	display: block; /* fallback for Trident */
	grid-area: main;
	color: var(--themetextcolor);
}

main > article
{
	margin: 0;
	padding: var(--biggap);
}

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

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

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

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;
	gap: calc(2.0 * var(--biggap));
	margin-top: calc(2.0 * var(--biggap));
}

article article
{
	/* https://web.dev/articles/content-visibility */
	content-visibility: auto;
	contain-intrinsic-size: 20rem;
}

article.dialog article
{
	/* add some invisible margin to allow box shadows and similar to slighly bleed over our default box */
	margin: -1rem;
	padding: 1rem;
}

p
{
	margin: 1rem 0rem;
}

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

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

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

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

a.newwindow:after
{
	content: "\f35d"; /* up-right-from-square */
	font-family: var(--fontawesome);
	font-weight: 900;
	vertical-align: super;
	margin-left: calc(0.25 * var(--gap));
	font-size: 0.7rem;
	display: inline-block; /* inline block to hide underline */
}

html, body
{
	min-height: 100vh;
	min-height: -webkit-fill-available; /* Workaround webkit mobile weirdness: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/ and https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ and https://bugs.webkit.org/show_bug.cgi?id=141832 */
	padding: 0;
	margin: 0;
}

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

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

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


:target
{
	scroll-margin-top: 4rem;
	animation: pulseoutline 5s;
}

a:any-link, button, input, textarea/*, .xhtmleditor*/
{
	scroll-margin-top: 4rem;
}

#top:target
{
	animation: none;
}

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

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

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


/* transparent banner settings */
html.transparentbanner
{
	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);
	background-color: var(--pagebackground);
}
html.transparentbanner body:before
{
	/* remove white banner background and not so nice box shadow */
	background: transparent;
	box-shadow: none;
}
html.transparentbanner body>main.page,
html.transparentbanner body>main.module,
html.transparentbanner body>main.document,
html.transparentbanner body>main.learningresource,
html.transparentbanner body>main.supermodule,
html.transparentbanner body>main.learningresource,
html.transparentbanner.contentwithoutnavigation body>main,
html.transparentbanner body > header > .breadcrumbs,
html.transparentbanner body > nav.main
{
	/* body has transparent background so add background to content areas */
	background-color: var(--themebackground);
}
html.transparentbanner h1.toplevel a:link,
html.transparentbanner h1.toplevel a:visited
{
	/* move page title to bottom right of banner */
	flex-direction: row-reverse;
}
html.transparentbanner h1.toplevel a > span
{
	flex-grow: 0;
}
html.transparentbanner h1.toplevel
{
	position: absolute;
	bottom: 0;
	right: 0;
}

html.transparentbanner h1.toplevel a img
{
	margin-right: 0;
	margin-left: calc(0.5 * var(--gap));
}

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

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

body > nav.global .logo img
{
	height: 2.4rem;
	width: 2.4rem;
	padding: 0;
}

body > nav.global > #showsearch img
{
	padding: 0.35rem;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

body > nav.global a
{
	border-radius: var(--buttonradius);
	margin: 0 calc(0.25 * var(--gap));
}

body > nav.global > .messages,
body > nav.global > .notifications,
#personmenutoggle
{
	border: solid var(--hairlinewidth) var(--linkcolor);
	background: var(--themebackground);
}

body > nav.global > .messages:hover:not(:focus),
body > nav.global > .notifications:hover:not(:focus),
#personmenutoggle:hover:not(:focus)
{
	background-color: var(--buttonbackgroundhover);
}

body > nav.global > .messages:hover:not(:focus) img,
body > nav.global > .notifications:hover:not(:focus) img,
#personmenutoggle:hover:not(:focus) img
{
	filter: brightness(0) invert(1);
}

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

body > nav.global > .messages
{
	padding: 0;
}

body > nav.global .menu a img
{
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
}
body > nav.global .logo a
{
	margin-left: 0;
}

body > nav.global .menu a
{
	margin: 0;
	padding: calc(0.25 * var(--gap));
	background: var(--themebackground);
}


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

	align-items: center;
}

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

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

html.minimal header .statusbar
{
	display: none;
}

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

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

.rootservice body > header .highlight
{
	margin: 2rem auto;
	width: -moz-fit-content;
	width: fit-content;
	max-width: max(19rem, 75%);
	padding: 1rem;
	border-radius: var(--radius);
	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-color: #002D56;
}

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

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

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

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

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

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

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

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


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

.frontpage > body > header > .breadcrumbs > div
{
	height: 0;
}

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


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

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

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

}

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

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

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

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

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


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

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


/* DEFINE ANIMATIONS: */

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

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

@keyframes fadein
{
	from
	{
		opacity: 0.0;
	}
	to
	{
		opacity: 1.0;
	}
}

@keyframes fadein-modalbackdrop
{
	from
	{
		opacity: 0.0;
	}
	to
	{
		opacity: var(--modalbackdrop-opacity);
	}
}

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

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


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

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

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

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

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

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

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


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

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

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

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

.createevaluationui .xhtmleditor
{
	min-height: 194px !important; /* Nasty trick before new tiny mce version: when evaluation editor is loaded inside details it keep it as a single row size. Force editor size. */
}

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

article.taskstypesshortanswerassignment.modify.module.task > div > form > fieldset
{
	padding: 1rem;
	border: 1px solid #808080FF;
}

div.form fieldset
{
	padding: 0.25rem 0.75rem 0.75rem;
	border: var(--hairlinewidth) solid var(--hairlinecolor);
}

div.form fieldset > legend
{
	padding: 0 calc(0.25 * var(--gap));
}

.checkboxgroup
{
	margin-top: 0.5rem;
}

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: 0;
	margin-bottom: 0.3rem;
	user-select: none;
}

article.taskstypesshortanswerassignment.modify.module.task > div > form > fieldset > legend
{
	margin-left: 1rem;
}

legend:empty
{
	display: none;
}

article.module.shortanswerassignment > div.main > form > div.t > input.t + span.maxpoints,
article.module.shortanswerassignment > div.main > div.t > input.t + span.maxpoints
{
	display: block;
	text-align: right;
	margin-bottom: -1rem;
}

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

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

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

input.s:disabled,
button:disabled,
button.primary:disabled,
button.secondary:disabled,
button.action:disabled,
input.s:disabled:hover,
button:disabled:hover,
button.primary:disabled:hover,
button.secondary:disabled:hover,
button.action:disabled:hover
{
	background-color: var(--buttonbackgrounddisabled);
	color: var(--buttoncolordisabled);
	border-color: var(--buttonbackgrounddisabled);
	cursor: not-allowed !important;
	box-shadow: none;
}

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

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

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

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

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


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

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

	/* it seems that Paytrail is using random sized payment method graphics, try to set sensible minimum size for buttons so they end up usually identically sized */
	min-width: 6rem;
	min-height: 6rem;
}

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


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

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

	-webkit-appearance: none; /* Safari 15.3 compatibility */
	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);
	color: var(--reversethemeforeground);
}

input[type=checkbox][disabled]
{
	background: var(--disabled-background-color);
	border: solid var(--disabled-background-color) var(--linewidth);
}
input[type=checkbox][disabled]:after
{
	content: "";
}

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;
	border-radius: 50%;
}
input[type=radio]:checked:disabled:after,
input[type=checkbox]:checked:disabled:after
{
	box-shadow: inset 1em 1em var(--disabled-background-color);
	color: var(--disabled-foregound-color);
	background: var(--disabled-background-color);
}

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

input[type=radio]:checked:after,
input[type=radio][checked]:disabled::after
{
	content: "●";
}
.assignments-tool-undo.inactive,
.assignments-tool-redo.inactive
{
	opacity: 0.5;
	cursor: default;
}
div.assignments-tool-undo.active,
div.assignments-tool-redo.active
{
	opacity: 1.0;
	cursor: pointer;
}
div.assignments-toolbar
{
	background-color: var(--themebackground);
	position: sticky;
	top: 68px;
	width: fit-content;
	display: block;
	margin: 1rem 0.05rem -3.5rem auto;
	border: 2px solid #999;
	border-radius: 0.5rem;
	/*box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);*/
	padding: 0.5rem;
	z-index: 1;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
div.assignments-tool-undo,
div.assignments-tool-redo
{
	display: inline-block;
	padding: 0 0.8rem 0 0;
	border: 1px solid transparent;
}
div.assignments-tool-undo i,
div.assignments-tool-redo i
{
	font-family: var(--fontawesome);
	font-size: 1.1rem;
	padding: 0.1rem 0.5rem;
}
div.assignments-tool-undo i::after
{
	content: "\f0e2";
	font-style: normal;
	font-weight: bold;
}
div.assignments-tool-redo i::after
{
	content: "\f01e";
	font-style: normal;
	font-weight: bold;
}
.assignments-tool-undo.inactive:hover,
.assignments-tool-redo.inactive:hover
{
	border: 1px solid transparent;
	background-color: var(--themebackground);
	box-shadow: unset;
}
.assignments-tool-undo.active:hover,
.assignments-tool-redo.active:hover
{
	/*background-color: var(--themeforeground);*/
	background-color: #eee;
	border: 1px solid #e2e4e7;
	border-radius: 0.5rem;
}
article.assignmentstypesmultiplechoiceassignment.modify form div.checkboxgroup
{
	margin-top: 1rem;
	margin-left: 0.25rem;
}
ul.mc-options input[type=radio][checked]:disabled::after
{
	font-size: 1.5rem;
	padding-bottom: 0.2rem;
}
ul.mc-options li label input[type=radio],
ul.mc-options li label input[type=checkbox]
{
	margin: 0.25rem calc(0.5 * var(--gap)) 0.25rem 0.2rem;
	top: 0;
}
.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]:not([disabled]):hover,
input[type=checkbox]:not([disabled]):hover,
input[type=radio]:not([disabled]):focus,
input[type=checkbox]:not([disabled]):focus,
select:focus
{
	border-color: var(--reversethemebackground);
}

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

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

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

.radiogroup .extracontent
{
	display: none;
	margin-left: calc(1.5 * var(--gap));
	background-color: var(--secondarycontent-background-color);
	padding: calc(0.5 * var(--gap));
}

.radiogroup.checked .extracontent
{
	display: block;
}

.radiogroup .extracontent > .t:first-child
{
	margin-top: 0;
}

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

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

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

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

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

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

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

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

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

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

div.assignment-q-template.hidden,
div.ea-q-template.hidden
{
	display: none;
}

div.mc-questions-grid-wrapper
{
	display: grid;
	grid-template-columns: 3rem auto auto 80px;
	column-gap: 0.25rem;
	align-items: flex-end;
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem;
}
div.mc-questions-grid-wrapper.radio
{
	background: #44749D3D;
}
div.mc-questions-grid-wrapper.checkbox
{
	background: #BDB8AD3D;
}
div.dummy-input-field-hidden
{
	display: block;
	visibility: hidden;
	height: 1.5rem;
}
div.button-div button.remove-row.question-row
{
	margin: 0;
}
div.mc-questions-grid-wrapper > div
{
	/* TODO: remove this when layout is ready */
	/*background-color: rgba(255, 255, 255, 0.8);*/
}
div.saa-add-answer-row
{
	grid-column: 4;
}
div.mc-questions-grid-wrapper div.mc-choice-type,
div.mc-questions-grid-wrapper div.shuffle-checkbox,
div.mc-questions-grid-wrapper div.mc-copy-question
{
	grid-column: 1 / span 4;
}
div.mc-questions-grid-wrapper div.mc-question
{
	grid-column: 1 / span 3;
	align-content: flex-end;
}
div.mc-questions-grid-wrapper div.dummy-choice-checkbox-container
{
	align-content: center;
	margin: 0 1rem;
}
div.t.mc-question
{
	margin: 0;
}
div.mc-copy-question .copy-question
{
	cursor: pointer;
	color: var(--linkcolor);
}
div.mc-copy-question .copy-question:hover
{
	text-decoration: underline;
	color: var(--linkcolor);
}
div.mc-copy-question .copy-question::before
{
	font-family: var(--fontawesome);
	padding: 0.2rem;
}
ul.mc-questions,
ul.mc-options
{
	list-style-type: none;
	margin: 0 0 0 -1.2rem;
}
ul.mc-questions li.mc-question
{
	margin: 0 0 0.5rem 0;
}
ul.mc-questions ul.mc-options
{
	margin: 0 0 0 -2rem;
}
ul.mc-options li label
{
	overflow: hidden;
	display: list-item;
	max-width: 100%;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}
div.mc-questions-grid-wrapper div.options-label.options-count-error
{
	border-bottom: 1px solid #ff0000f1;
	font-weight: bold;
	color: #ff0000;
}

ul.mc-options li label span.label-points-smaller
{
	font-size: 0.8rem;
}
ul.responsesummary li.response ul.mc-questions ul.mc-options li label
{
	cursor: not-allowed;
}
li.mc-question div.points,
.assignmentstypesreorderassignmentsubmission div.points
{
	text-align: right;
	margin-bottom: 0.5rem;
}
div.t.points.inline label
{
	display: inline-block;
}
div.mc-choice-row
{
	grid-column: 1 / span 4;
	display: grid;
	grid-template-columns: subgrid;
	align-items: flex-end;
}
div.mc-choice-row div.t
{
	margin-top: 0.5rem;
}

div.mc-questions-grid-wrapper div.t.points,
div.mc-questions-grid-wrapper div.button-div,
div.mc-questions-grid-wrapper div.button-remove button.remove-row.choice-row
{
	margin: 0;
	align-content: flex-end;
}
button.add-row.choice-row
{
	padding: 0.5rem 0.9rem;
}
div.mc-questions-grid-wrapper > div.add-choice-row
{
	grid-column: 4/4;
}
div.mc-questions-grid-wrapper > div.add-choice-row > button.btn.btn-btncon.btn-btnrow.add-choice-row
{
	float: none;
	padding: 0.25rem 0 0 0;
}
ul.mc-questions ul.mc-options li.mc-correct label input::after,
span.mc-correct
{
	color: rgb(0,128,0);
}
ul.mc-questions ul.mc-options li.mc-incorrect label input::after,
span.mc-incorrect
{
	color: rgb(255,0,0);
}
.shuffle,
.bars-radio
{
	position: relative;
	display: inline-block;
}
.shuffle input,
.bars-radio input
{
	opacity: 0;
	width: 0;
	height: 0;
	margin-right: 0;
}
div.assignmentsettingsrow div.bars-orientation,
div.assignmentsettingsrow div.points-settings,
div.assignmentsettingsrow div.points-settings div.switchgroup,
div.assignmentsettingsrow div.points-settings div.pointsgroup
{
	display: inline-block;
}
div.assignmentsettingsrow div.points-settings div.switchgroup label
{
	display: inline-block;
}
div.assignmentsettingsrow div.points-settings div.pointsgroup label
{
	display: none;
}
article.assignmentstypesreorderassignment.modify fieldset
{
	border: 1px solid #000;
	padding: 0 0.8rem;
	margin-top: 0.5rem;
}
article.assignmentstypesreorderassignment.modify fieldset legend
{
	padding: 0 0.3rem;
}
ul.reorderassignment-items-inputlist,
ul.reorderassignment-items
{
	list-style-type: none;
	padding-left: 0;
}
ul.responsesummary ul.reorderassignment-items
{
	margin-left: -0.8rem;
}
/*ul.reorderassignment-items:not(.horizontal)
{
	padding: 0.5rem 0;
}*/
ul.reorderassignment-items.horizontal
{
	/*text-align: center;*/
	padding-top: 0.5rem;
}
ul.reorderassignment-items-inputlist li label,
ul.reorderassignment-items-inputlist li div.button-remove
{
	display: inline;
}
ul.reorderassignment-items.ui-sortable li
{
	cursor: grab;
}
ul.reorderassignment-items.ui-sortable li:hover
{
	background-color: var(--selectionbackground);
}
ul.reorderassignment-items li.ui-state-highlight
{
	min-width: 5rem;
	height: 1.5rem;
	background-color: var(--theme-highlight-color-light);
}
ul.reorderassignment-items li
{
	border: solid var(--themeforeground) var(--linewidth);
	border-radius: 0.5rem;
	padding: 0.5rem 2rem;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.reorderassignment-items.vertical li
{
	margin: 0.5rem auto;
}
ul.reorderassignment-items.horizontal li
{
	display: inline-block;
	min-width: 5rem;
	margin: 0 0.5rem;
}
ul.reorderassignment-items-inputlist li div.button-remove button
{
	border: 1px solid #999;
}
ul.reorderassignment-items-inputlist li
{
	margin-bottom: 0.4rem;
}
ul.reorderassignment-items-inputlist.inline li
{
	display: inline-block;
	margin-right: 0.3rem;
}
span.onum
{
	padding: 0.5rem 0.8rem;
	border: 1px solid #999;
	border-radius: 0.5rem;
}
ul.reorderassignment-items-inputlist li input
{
	display: inline;
	width: 70%;
}
.reorderassignment-items-inputlist.inline input
{
	width: 13rem;
}

div.bars-orientation label.bars-radio
{
	display: inline-block;
	vertical-align: middle;
}
div.bars-orientation label.bars-radio span.labeltext
{
	display: none;
}
div.reorderassignment-vertical-flex
{
	display: flex;
	column-gap: 0.3rem;
}
div.formresponse.popup.ui-dialog-content ul.reorderassignment-items li,
article.assignmentstypesreorderassignmentsubmission:not(.modify) div.main ul.reorderassignment-items li
{
	border: unset;
	border-radius: unset;
	padding: unset;
	overflow: unset;
	margin-left: 1rem;
	margin-bottom: 0.2rem;
}
ul.reorderassignment-items li div
{
	display: inline-block;
}
ul.reorderassignment-items li div.roas-item
{
	overflow-x: clip;
	text-overflow: ellipsis;
}
div.reorderassignment-vertical-flex ul.reorderassignment-items.vertical
{
	width: 50%;
}
ul.reorderassignment-items.vertical.correct
{
	margin-right: 1rem;
}
p.roas-subheading
{
	visibility: hidden;
	margin: -0.2rem;
}
.popup.ui-dialog-content p.roas-subheading
{
	margin: 0 0 -1em 1em;
}
div.roas-item-container
{
	padding: 0.3rem;
	position: relative;
	border: 1px solid #000;
	border-radius: 0.3rem;
}
.arraykey
{
	border: 1px solid #000;
	padding: 0.3rem 0.8rem;
	border-radius: 0.3rem;
	/*top: -1.6rem;
	position: relative;
	left: 1rem;*/
	background: #fff;
	/*z-index: 9999;*/
	vertical-align: top;
	margin-top: -0.8rem;
	margin-left: -0.8rem;
}

ul.reorderassignment-items li div.roas-item
{
	/*padding: 0.6rem 1rem;
	position: relative;
	border: 1px solid #000;
	border-radius: 0.3rem;*/
	max-width: 16em;
	/*max-height: 1.4rem;*/
	overflow: scroll;
	text-overflow: ellipsis;
	scrollbar-width: none;  /* hide scrollbars while still allowing scrolling */
	vertical-align: top;
}
ul.reorderassignment-items.vertical div.roas-item-container
{
	width: 100%;
}
ul.reorderassignment-items.correct li div.roas-item-container
{
	background: rgba(0, 128, 0, 0.65);
}
ul.reorderassignment-items li.correct div.roas-item-container
{
	background-color: rgba(0,128,0, 0.65);
}
ul.reorderassignment-items li.incorrect div.roas-item-container
{
	background-color: rgba(255, 0, 0, 0.65);
}
ul.reorderassignment-items.correct li div.arraykey,
ul.reorderassignment-items.correct li div.emblem-correct
{
	visibility: hidden;
}
/*ul.reorderassignment-items.correct.vertical li div.arraykey
{
	display: none;
}*/
div.emblem-correct, div.emblem-incorrect { float: right; }
/*
ul.reorderassignment-items li.correct div.roas-item::after*/
div.emblem-correct::after
{
	content: "✓";
	background-color: #fff;
	padding: 0 0.2rem;
	border: 1px solid #000;
	border-radius: 2rem;
	color: #1c741a;
	display: inline-block;
	width: 1.2rem;
	text-align: center;
	margin: 0 0 0 0.2rem;
}
/*ul.reorderassignment-items li.incorrect
{
	background-color: rgb(255,0,0, 0.65);
}*/
/*ul.reorderassignment-items li.incorrect div.roas-item::after*/
div.emblem-incorrect::after
{
	content: "✗";
	background-color: #fff;
	padding: 0 0.2rem;
	border: 1px solid #000;
	border-radius: 2rem;
	color: #ff0000;
	display: inline-block;
	width: 1.2rem;
	text-align: center;
	margin: 0 0 0 0.2rem;
}

.shbox,
.barsbox
{
	cursor: pointer;
}
.shbox::before,
.barsbox::before
{
	font-family: var(--fontawesome);
	color: #999;
	border: 2px solid #999;
	border-radius: 5px;
	font-size: 1.5rem;
	padding: 0.25rem;
	margin-right: 0.25rem;
}
.shbox::before
{
	content: "\f074";
}
.barsbox::before
{
	/*content: "\f0c9";*/
	content: "";
	background: url(icon/vert.svg) no-repeat;
	background-size: 2rem;
	background-position: center;
	display: inline-block;
	width: 2rem;
	height: 2rem;
}
.barsbox.vertical::before
{
	transform: rotate(90deg);
}

input:checked + .shbox::before
{
	content: "\f074";
}
input:checked + .barsbox::before
{
	/*content: "\f0c9";*/
	content: "";
	background: url(icon/vertw.svg) no-repeat;
	background-size: 2rem;
	background-position: center;
	display: inline-block;
	width: 2rem;
	height: 2rem;
}
input:checked + .shbox::before,
input:checked + .barsbox::before
{
	color: #fff;
	background-color: var(--themeforeground);
	border: 2px solid var(--themeforeground);
}
input:focus + .shbox::before,
input:focus + .barsbox::before
{
	box-shadow: var(--focusboxshadow);
}
div.saa-answers-label,
div.options-label
{
	grid-column: 1 / span 2;
	margin-top: 1rem;
}
div.saa-answers-label
{
	grid-column: 2;
}
span.label-hidden
{
	display: none;
}
div.mc-choice-type div.multiplechoice_type_toggle label.switch
{
	display: inline;
}
div.mc-choice-type div.multiplechoice_type_toggle label.switch span.labeltext
{
	display: none;
}
div.dummy-choice-checkbox,
div.dummy-choice-radio
{
	/*vertical-align: middle;*/
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	top: -0.15rem;
	border-radius: 5px;
	border: solid var(--themesubduedforeground) var(--linewidth);
	box-sizing: border-box;
	background: rgba(255,255,255, 0.5);
	cursor: pointer;
}
div.dummy-choice-checkbox.correct,
div.dummy-choice-radio.correct
{
	font-family: var(--fontawesome);
	color: rgb(0,128,0);
}
div.dummy-choice-checkbox.correct::after,
div.dummy-choice-radio.correct::after
{
	position: absolute;
	top: -0.15rem;
	left: 0.12rem;
}
div.dummy-choice-checkbox.correct::after
{
	content: "\f00c";
}
div.dummy-choice-radio.correct::after
{
	content: "\f05d";
}
div.dummy-choice-radio
{
	border-radius: 50%;
}
/*
div.undo-button-div button.undo
{
	padding: 0.5rem 0 0 0;
	margin: auto 0 -3.5rem auto;
}
div.undo-button-div button.question-removed
{
	padding: 0.5rem 0 0 0;
	margin: auto 0 0 auto;
}*/
div.ea-questions-grid-wrapper
{
	display: grid;
	grid-template-columns: auto 20%;
	column-gap: 0.5rem;
}
div.mc-questions-grid-wrapper div.points-remove-wrapper div.t.points,
div.ea-questions-grid-wrapper div.points-remove-wrapper div.t.points,
div.mc-questions-grid-wrapper div.points-remove-wrapper div.button-div,
div.ea-questions-grid-wrapper div.points-remove-wrapper div.button-div
{
	display: inline-block;
}
div.mc-choice-row.deleted.hidden,
div.mc-questions-grid-wrapper.hidden,
div.ea-questions-grid-wrapper.hidden
{
	display: none;
}

div.ea-questions-grid-wrapper div.t.example-answer
{
	grid-column: 1 / 1;
	grid-row: 2;
	padding-left: 4rem;
}
div.mc-questions-grid-wrapper div.t input[type=number],
div.ea-questions-grid-wrapper div.t input[type=number],
div.answer-row div.answer-row-questions div.points div.t input[type=number]
{
	width: 4.5rem;
}
form div.t.maxpoints-right-aligned input.n
{
	width: 4.5rem;
}

.assignmentstypesessayassignmentsubmission div.main div.total-points,
div.module-essayassignment-points-row,
ul.responsesummary form.has-form-pseudo-elements div.total-points
{
	text-align: right;
}

.assignmentstypesessayassignmentsubmission div.main div.answer-row-questions div.total-points
{
	text-align: left;
	grid-column: 2/2;
	margin-left: 1rem;
}

.assignmentstypesessayassignmentsubmission div.answer-row-questions div.disabled-input.disabled-textarea,
div.example-answer-box.disabled-input.disabled-textarea
{
	min-height: 4rem;
	height: 15rem;
	overflow-y: scroll;
	resize: vertical;
}

article.assignmentstypesessayassignmentsubmission div.answer-row div.answer-row-questions div.example-answer,
article.assignmentstypesessayassignmentsubmission.modify div.main form div.example-answer,
article.assignmentstypesessayassignment.essayassignment div.main div.example-answer,
div.ea-questions div.ea-questions-grid-wrapper div.example-answer,
div.formresponse.popup.ui-dialog-content.ui-widget-content div.answer-row-questions div.example-answer
{
	margin: 0.5rem 0 0 2rem;
}

article.assignmentstypesessayassignmentsubmission div.answer-row div.answer-row-questions div.example-answer div.disabled-textarea
{
	min-height: 2rem;
	height: 10rem;
	resize: vertical;
}

.assignmentstypesessayassignmentsubmission div.answer-row-questions div.points
{
	padding: 0 0 0 0.5rem;
	margin: auto 0 0 0;
}
.assignmentstypesmultiplechoiceassignmentsubmission div.answer-row-questions div.points input.n.unitnumber
.assignmentstypesessayassignmentsubmission div.answer-row-questions div.points input.n.unitnumber
{
	width: 3rem;
}

label.label.textarea.hidden,
span.label.hidden
{
	display: none;
}

article.assignmentstypesshortanswerassignment div.main div.spacer
{
	margin-top: 1.5rem;
}

article.assignmentstypesshortanswerassignmentsubmission.modifypoints div.main div.answer-row-question-points
{
	display: grid;
	grid-template-columns: auto 4rem;
	width: 98%;
}

article.assignmentstypesshortanswerassignmentsubmission.modifypoints div.main div.answer-row-points
{
	padding-bottom: 0;
}

article.assignmentstypesshortanswerassignmentsubmission.modifypoints div.main div.answer-row-points input
{
	width: 4rem;
	margin: 0 0.5rem;
}

article.assignmentstypesshortanswerassignmentsubmission.modifypoints div.main div.correct-answers-row div.answer-row-correct-answers
{
	display: grid;
	grid-template-columns: auto 5.5rem;
}

div.answer-row-grid
{
	display: grid;
	grid-template-columns: auto 6rem 4rem;
}

div.answer-row-grid div.t:nth-child(2)
{
	margin-left: 1rem;
}

fieldset.short-answer-questions
{
	padding: 1rem;
	border: 1px solid #000;
}

fieldset.short-answer-questions div.t input[type="number"],
form div.maxpoints-right-aligned div.t input[name=total_points]
{
	width: 4.5rem;
}

fieldset.short-answer-questions div.maxpoints-right-aligned,
form div.maxpoints-right-aligned
{
	text-align: right;
	margin-right: 7.5rem;
}
fieldset.short-answer-questions div.maxpoints-right-aligned label,
article.assignmentstypesessayassignment.modify div.maxpoints-right-aligned label,
form div.maxpoints-right-aligned label
{
	display: inline;
}

span.smaller
{
	font-size: 0.8rem;
}

div.t.timedate-input-row label
{
	display: inline;
}
button.btn.btn-btncon.btn-btnrow.add-choice-row .fa,
button.btn.btn-btncon.btn-btnrow.add-answer-row .fa
{
	margin-right: 0;
}

button.btn.btn-btncon.btn-btnrow.add-choice-row,
button.btn.btn-btncon.btn-btnrow.add-answer-row
{
	padding-right: 0;
	padding-left: 0;
}
button.btn.btn-btncon.btn-btnrow.add-choice-row:hover,
button.btn.btn-btncon.btn-btnrow.add-answer-row:hover
{
	background: none;
	width: fit-content;
}

ul.saa-question-answer-list,
ul.saa-answer-list
{
	list-style-type: none;
}

div.question-row-grid
{
	display: grid;
	grid-template-columns: auto 4rem;
}

div.question-row-grid > div.button-div,
div.answer-row-grid > div.button-div
{
	display: flex;
	align-items: end;
}

div.ea-questions-grid-wrapper > div.button-div
{
	margin: 2rem 0 0 0;
}

div.ea-questions-grid-wrapper > div.button-div > button.remove-row
{
	margin-left: 0;
}

div.answer-row-questions,
div.answer-row-correct-answers
{
	display: grid;
	grid-template-columns: auto 13%;
}

.assignmentstypesessayassignmentsubmission div.answer-row-questions
{
	display: grid;
	grid-template-columns: auto 18%;
}

div.answer-row-questions.fillcontent
{
	display: block;
}

div.answer-row
{
	padding-bottom: 1.5rem;
}

div.answer-row label
{
	display: block;
}

div.answer-row span.points
{
	padding-left: 0.5rem;
}

div.answer-row i.fa
{
	padding-left: 0.2rem;
}

div.answer-row-points
{
	margin: auto 0 0;
	padding-bottom: calc(var(--gap)/3);
}

div.answers-and-points ul.correct-answers
{
	list-style-type: none;
	text-align: right;
}

div.answer-row span.points strong.larger
{
	font-size: 1.15rem;
}

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

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

div.disabled-input
{
	display: block;
	/*width: 100% - calc(0.5 * var(--gap));*/
	padding: calc(0.5 * var(--gap));
}
div.disabled-textarea
{
	min-height: 5rem;
}
input.t:focus,
input.tcustom:focus,
input.n:focus,
textarea:focus,
.xhtmleditor:focus,
.xhtmleditor.mce-edit-focus
{
	border-color: var(--themeforeground);
	outline: none;
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	border-radius: var(--forminputborderradius);
	z-index: 1; /* render focus style on top of other elements which may be close to input elements. See .input-group */
}

input.t[disabled],
input.tcustom[disabled],
textarea[disabled],
div.disabled-input,
form fieldset.short-answer-questions div.t input[type=number][disabled],
form div.t.points input.n[type=number][disabled],
form div.t.maxpoints-right-aligned input.n[type=number][disabled],
div.ea-questions input[type=number][disabled],
div.mc-choice-row input[type=number][disabled],
form div.maxpoints-right-aligned div.t input[name=total_points][disabled]
{
	background: var(--disabled-background-color);
	color: var(--disabled-foregound-color);
	cursor: not-allowed;
}

input.rb:disabled
{
	cursor: not-allowed;
	background: #f1f1f1;
	border-color: #ccc;
}

input.cb:not([disabled]),
input.rb:not([disabled]),
label
{
	cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

div.snowgame
{
	height: 35rem;
	background: url('img/snowgame_background.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
div.topten
{
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	z-index: 1;
	display: inline-block;
	float: right;
	width: 10rem;
}
div.topten div:first-child
{
	font-weight: bold;
	background: #e57b01;
	font-size: 1.1rem;
	padding-left: 0.5rem;
	line-height: 2rem;
}
div.topten div ul
{
	list-style: none;
	list-style-position: inside;
	margin-left: -2.1rem;
}
div.snow_score
{
	display: block;
	float: left;
	color: var(--themetextcolor);
	margin-top: -1.7rem;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 2rem;
	padding-left: 0.5rem;
	width: 10rem;
	-webkit-user-select: none; /* Safari 15.6 compatibility */
	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
{
	-webkit-user-select: none; /* Safari 15.6 compatibility */
	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
{
	/* is this used anywhere anymore? We should be using article.framelessimage */
	/*box-shadow: 0rem 0rem 0.5rem rgba(0, 0, 0, 0.25);*/
	/*border-radius: 0.1rem;*/
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

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

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

div.framelessimage img
{
	/* is this used anywhere anymore? We should be using article.framelessimage */
	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
{
	/* is this used anywhere anymore? We should be using article.framelessimage */
	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
{
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#browser_compatibility */
	/* hyphens: auto; /* Only Firefox and Safari support hyphenation of Finnish as of 2024-02, let's keep this disabled for now that we get similar user experience for everyone */
}

@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;
}
.metadata pre
{
	background: var(--themebackground);
	color: var(--themetextcolor);
	white-space: pre-wrap;
	margin: 0;
}


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

.main > .hint,
.main > .success,
.main > .info,
.main > .notice,
.main > .warning,
.main > .error,
.main > .alert
{
	margin: var(--gap) var(--biggap);
}

.page.rectangle .hint,
.page.rectangle .success,
.page.rectangle .info,
.page.rectangle .notice,
.page.rectangle .warning,
.page.rectangle .error,
.page.rectangle .alert
{
	margin-left: 0;
	margin-right: 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");
	/* use custom size and alignment for this icon to match other icons */
	width: 0.3rem;
	height: 1rem;
	vertical-align: inherit;
}

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

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

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

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

.toast .toast-header-text
{
	font-weight: var(--font-weight-bold);
}

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

.hideoverflow
{
	overflow: hidden !important; /* hide overflow in certain cases like in modal when we don't want the background to be scrollable */
}

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

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

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

.toast.warn
{
	border-color: var(--themewarning);
}

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

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

.toast.warn .toast-header
{
	background-color: var(--themewarning);
	color: #fff;
}

.toast.suc .toast-header
{
	background-color: var(--themesuccess);
	color: #fff;
}

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

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

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

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

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

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

main > article > section > .main > .messages
{
	/* margin: var(--biggap); */
}

div.messages + article,
div.messages + header,
article.wrapper.titleonly > div.messages + header
{
}

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

article.module article.document + article.document,
article.forummodule article.document + article.document
{
	margin-top: var(--gap);
	padding-top: var(--gap);
	position: relative;
}

article.module article.document + article.document:before,
article.forummodule article.document + article.document:before
{
	display: block;
	content: "";
	border-top: solid var(--hairlinewidth) var(--hairlinecolor);
	margin-top: calc(-1.0 * var(--gap) - var(--hairlinewidth));
	padding-top: var(--gap);
}

article.linkmodule article.document + article.document:before
{
	margin-top: calc(-1.0 * var(--gaphalf));
}

article.linkmodule .main > article.link.document header h1 a:before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f0c1"; /* link */
}
article.linkmodule .main > article.link.document
{
	padding: var(--gaphalf) var(--gap);
}
article.linkmodule .main > article.link.document > header > h1
{
	font-size: 1rem;
}
article.linkmodule .main > article.link.document > .main > .description
{
	opacity: var(--opacity-nonessential);
}

article.module.form > .main
{
}

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

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

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

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


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

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

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

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

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

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

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

.nonessential
{
	opacity: var(--opacity-nonessential);
}

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

body > .systemalerts
{
	position: fixed;
	top: 4rem;
	right: 0;
	z-index: 20;
	max-width: 40%;
}

.systemalerts > .alert
{
	border: none;
	border-radius: 0;
	background-color: #222;
	color: #fff;
	margin: 0;
}

.systemalerts > .alert + .alert
{
	margin: var(--gaphalf) 0;
}

.systemalerts > .alert > form button
{
	margin: 0;
}

.systemalerts > .alert > form
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.systemalerts > .alert > form > div
{
	white-space: nowrap;
	padding-left: var(--gap);
	text-align: right;
	flex-grow: 1;
}

.systemalerts > .alert > form > p
{
	margin: 0;
}

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

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

.cookieconsent p
{
	margin: 0;
}

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

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

.important
{
	opacity: 1;
}

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

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

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

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

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

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

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

footer > .backtotop
{
	flex-grow: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

footer > .backtotop > a:before
{
	font-family: var(--fontawesome);
	margin-right: calc(0.5 * var(--gap));
	content: "\f062"; /* arrow-up */
}

.rootservice div.license
{
	display: none;
}

header nav.global
{
	display: block;
}

nav.main > .sticky,
nav.personmenu
{
	padding-bottom: 5rem; /* add extra whitespace to the end to make it visually clear that the end of navigation or menu has been reached */
}

nav.main > .sticky > .actions
{
	padding: var(--gap);
	margin-bottom: -4rem; /* undo most of the added extra whitespace applied via selector nav.main > .sticky above -- once :has() is supported well enough, we could write nav.main > .sticky:not(:has(> .actions)) { padding-bottom: 5rem; } instead */
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nav h2.label
{
	display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


	font-size: 2rem;

	overflow: auto;

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

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

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

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


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

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

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

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


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

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

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

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

/* page main header layout */

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

main > article > header > h1
{
	flex: 1 1 auto;
	padding: 0.2rem 0; /* workaround ascenders or descenders causing overflow:auto (required for Zalgo protection) to show scrollbar */
	margin: 0;
}

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

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

main > article > .main
{
}

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

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

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

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


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

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

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

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

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

nav.main > .sticky
{
	box-sizing: border-box;
	position: sticky;
	max-height: calc(100vh - 4rem);
	overflow: auto;
	top: 4rem;
}

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

nav.main .sitemap li.phantom a:link,
nav.main .sitemap li.phantom a:visited,
nav.main .sitemap li.phantom a
{
	background: var(--linkbuttonbackgroundcolor);
	color: #fff;
}

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

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

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

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


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

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


nav.main h1
{
	display: none;
}

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

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

nav.virtualsub
{
	background: #f00;
}

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

nav.tabs h2
{
	display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

	display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

.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;
	border-color: #002D56;
	color: #002D56;
	background-color: #fff;
}

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

.rootservice article.pages div.search a:before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f002"; /* magnifying-glass */
	margin-right: calc(0.5 * var(--gap));
}

.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; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */

	display: grid;
	justify-content: stretch;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

section + section
{
	clear: both;
}

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

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

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

.atom time
{
	color: #777;
}

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

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

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

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

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

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

article footer:empty
{
	display: none;
}

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

article footer:after
{
	clear: both;
}

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

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

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

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

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

main.page article.enclose.supermodule > footer,
main.page article.enclose.module > footer,
main.page article.enclose.assignment > footer,
article.supermodule article.enclose.module > footer,
article.enclose.page.subscriptions > .main > article > footer
{
	background: var(--themefooterbackground);
	color: var(--themeforeground);
	/* avoid overflowing parent borders: */
	border-bottom-left-radius: calc(0.5 * var(--radius));
	border-bottom-right-radius: calc(0.5 * var(--radius));
}

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

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

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

main > article > section > .main > article + article,
main > article > section > aside > article + article
{
	margin-top: 0;
}

article article.document,
article article.learningresource,
main > article > section > .main > article.document,
main > article > section > aside > article.learningresource
{
	/* bleed element with negative margin but keep content position identical with padding, this is needed for nice lightbox rendering and drop shadows */
	padding: var(--gap);
	margin: calc(-1 * var(--gap));
}

main > article > section > .main > article.document + article.document,
main > article > section > .main > article.document + article.learningresource,
main > article > section > .main > article.learningresource + article.document,
main > article > section > aside > article.document + article.document,
main > article > section > aside > article.document + article.learningresource,
main > article > section > aside > article.learningresource + article.document
{
	/* margin-top: calc(2.0 * var(--biggap) - var(--gap)); */
}

article.document > header,
article.document > .main,
article.learningresource > header,
article.learningresource > .main
{
}

main > article > .main,
article.module.dialog > .main
{
	margin: var(--biggap) 0;
}

article.module > .main > .setup header
{
	margin: 0;
}

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

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

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

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

.selectedformove,
.selectedforcopy
{
	position: relative;
}

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

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


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

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

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

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

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

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

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

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

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

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

main.forum.response
{
	margin: var(--gap);
}

article.forum.response h1
{
	overflow: visible;
}

article.forum.response h1 a span
{
	overflow: auto;
}


main > article.forum.document
{
	margin-bottom: var(--gap);
}

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

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

article.forum.document.response
{
	content-visibility: visible; /* we intentionally overflow the user icon so we cannot have new stacking context here */
}
article.forum.document.response > .main
{
	content-visibility: auto; /* we'll move the new stacking context here */
	contain-intrinsic-size: 10rem;
	margin: -1rem;
	padding: 1rem;
}

article.forum.document.response > .main:has(.popupmenuopen)
{
	/* we need to keep the same stacking context here so that the popup menu is on top of the article */
	content-visibility: visible;
}

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

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

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

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


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

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

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


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

div.votetypes
{
	margin-left: 1rem;
}

div.post-votes-container form
{
	display: inline;
}

div.votes-container
{
	display: block;
	float: right;
}

div.votes-container button
{
	color: var(--reverselinkbackground);
    font-size: 1.5em;
    background-image: none;
    border-radius: unset;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

div.votes-container div.votes-counter a,
div.votes-container div.votes-counter span
{
	padding: 0 0.5rem;
}

div.votes-container button
{
	border: none;
}

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

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

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

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

div.votes-container div.votes-counter
{
	display: inline;
}

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

dl.voters dt div.vote-number,
dl.voters dt div.person
{
	display: inline;
}

div[data-vote="-1"] {
	margin-left: -0.4rem;
}

div.votes-counter a {
	text-decoration: none;
	color: var(--themetextcolor);
}

div.votes-counter a:hover {
	text-decoration: underline;
	color: var(--linkcolor);
}

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

.voters-dialog .ui-dialog-titlebar,
.votes-error-dialog .ui-dialog-titlebar
{
	font-size: 1.3em;
	font-weight: bold;
}

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

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

html.votepage div.upvote,
html.votepage div.downvote,
html.votepage div.removevote
{
	display: inline-flex;
}

html.votepage div.upvote form p.submitorcancel a,
html.votepage div.downvote form p.submitorcancel a
{
	visibility: hidden;
}

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


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

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

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

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

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

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

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

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

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

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

article > footer
{
	clear: both;
}

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

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

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

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

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

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

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

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

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

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

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

main.systemperson > article:last-child
{
	margin-bottom: var(--biggap);
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* create new shortcuts */

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

.createnew .systemmodulepage > div > a { background-image: url("icon/page.svg"); }
.createnew .textmodule > div > a { background-image: url("icon/text.svg"); }
.createnew .etherpadetherpadentry > div > a { background-image: url("icon/etherpad.svg"); }
.createnew .assignmentmodule > div > a { background-image: url("icon/assignment.svg"); }
.createnew .assignmentstypesshortanswerassignment > div > a { background-image: url("icon/short_answer.svg"); background-size: 4rem; }
.createnew .assignmentstypesessayassignment > div > a { background-image: url("icon/essee.svg"); }
.createnew .assignmentstypesmultiplechoiceassignment > div > a { background-image: url("icon/multiplechoice.svg"); }
.createnew .assignmentstypesreorderassignment > div > a { background-image: url("icon/reordermodule.svg"); }
.createnew .mathsassignmentmodule > div > a { background-image: url("icon/mathassignment.svg"); }
.createnew .submissionfoldermodule > div > a { background-image: url("icon/submissionfolder.svg"); }
.createnew .moodmetermodule > div > a { background-image: url("icon/moodmeter.svg"); }

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

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

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

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


.createnew .dikaiosmodule > div > a { background-image: url("icon/edustore.png"); }
.createnew .alfasoftmodule > div > a { background-image: url("icon/opinaika.png"); }
.createnew .mikrolinnamodule > div > a { background-image: url("icon/nettimoppi.png"); }
.createnew .redfoxdictionary > div > a { background-image: url("icon/redfox.png"); }
.createnew .redfoxgrammar > div > a { background-image: url("icon/redfox.png"); }
.createnew .sanomapromodule > div > a { background-image: url("icon/logo-sanoma-pro.svg"); }
.createnew .promentormodule > div > a { background-image: url("icon/promentor.png"); }
.createnew .eventmodule > div > a { background-image: url("icon/eventmodule.svg"); }
.createnew .assessmentmodule > div > a { background-image: url("icon/assessment.svg"); }
.createnew .ellibsmodule > div > a { background-image: url("icon/ellibs.png"); }
.createnew .orxtermodule > div > a { background-image: url("icon/orxter.png"); }
.createnew .jitsimodule > div > a { background-image: url("icon/Poweredby_Jitsi_logo_grey_04_2020_grey.png"); }
.createnew .loadmybookmodule > div > a { background-image: url("icon/LoadMyBook.png"); background-size: 3rem; }
.createnew .learningresourcesmathbook3 > div > a { background-image: url("icon/mathbook3.png"); background-size: 3rem; }
.createnew .learningresourcesmathbook4 > div > a { background-image: url("icon/mathbook4.png"); background-size: 3rem; }
.createnew .learningresourcesmathbook5 > div > a { background-image: url("icon/mathbook5.png"); background-size: 3rem; }
.createnew .learningresourcesmathbook6 > div > a { background-image: url("icon/mathbook6.png"); background-size: 3rem; }
.createnew .learningresourcesstudentguidancebook > div > a { background-image: url("icon/elamaan.png"); background-size: 3rem; }


.createnew li.blogaudioentry > div > a
{
	background-size: 2rem;
}
.createnew li > div > a > span
{
	overflow: hidden;
	text-overflow: ellipsis;
}

.center
{
	margin-left: auto;
	margin-right: auto;
	width: max-content;
}

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

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

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

h1.link a[target="_blank"]:after,
ul.responsesummary article.link div.link > a[target="_blank"]:after
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	background-image: url("icon/openinnew.svg");
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 1rem;
	height: 1rem;
}
article > .main
{
	clear: both; /* avoid pushing this element next to floated content in some edge cases when top margin is negative */
}
main.create > article.create > div.main,
main.modify > article.modify > div.main
{
	overflow: unset;
}
/* Some focusable items have zero margin by default and their outlines will be hidden by .main overflow:auto unless we add extra margin if any of those are at the end: */
article > .main details:last-child,
article > .main > .buttons:last-child,
article > .main > form:last-child
{
}

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

/* content actions */

nav.content.actions
{
	margin: 0;
	padding: calc(0.5 * var(--gap)) var(--gap);
	color: var(--content-action-toolbar-color); /* plain text color, typically should never be used in practice because links and buttons within the toolbar have custom color */
	background-color: var(--content-action-toolbar-background-color);
	border-bottom: var(--content-action-toolbar-border);
}

nav.content.actions + article
{
	margin-top: calc(0.5 * var(--gap));
}

/* documents do not have borders so let's give some space before content actions to make some space for the "3 dots" menu */
article.document > header + nav.content.actions,
article.learningresource > header + nav.content.actions
{
}

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

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

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

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

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

main.systemperson ul.pages,
main.systemperson ul.links
{
	clear: left;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--gap);
}

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 > li,
main.systemperson ul.links > li
{
	border: solid transparent 0.1rem;
	border-radius: var(--radius);
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
}

main.systemperson ul.pages a,
main.systemperson ul.links > li > a
{
	border: solid transparent 0.1rem;
	padding: 0.5rem;
	display: block;
	width: 100%;
	text-decoration: none;
	display: flex;
	align-items: center;
	overflow: auto;
}

main.systemperson ul.links > li .remove
{
	border-radius: inherit;
}

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

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

main.systemperson article li.phantom
{
	border: none;
}

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

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

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

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

.actions li
{
	vertical-align: middle;
}

nav.actions li > a
{
	margin-right: calc(0.5 * var(--gap));
	margin-top: calc(0.25 * var(--gap));
	display: inline-block;
}

.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;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	box-sizing: border-box;
	max-width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.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(--buttonradius);
	min-height: var(--buttonheight);
	display: inline-flex;
	align-items: center;
	box-shadow: var(--buttonboxshadow);
}

.actions.important a:visited:hover,
.actions.important a:link:hover,
.actions.important a:hover
{
	filter: brightness(130%);
}

.actions.important a:visited:focus,
.actions.important a:link:focus,
.actions.important a:focus
{
	box-shadow: var(--focusboxshadow), var(--buttonboxshadow);
}

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

.actions.important li.highlight.dangerous a
{
	background-color: var(--themeerror);
	color: transparent; /* text is mention to be hidden */
}

/* display icons in action buttons unless really narrow display */
@media all and (min-width:10rem)
{
	.actions li a:before
	{
		font-family: var(--fontawesome);
		margin-right: 0.3rem;
	}

	.actions li.button a:before
	{
		margin-right: 0.5rem;
	}

	.menu.popup li a:before,
	nav.main .actions li a:before
	{
		margin-right: 0.5rem;
		/* reserve same space for all icons */
		width: 1.25rem;
		text-align: center;
		display: inline-block;
	}

	.actions li.joinsettings a:before,
	.actions li.settings a:before
	{
		content: "\f013"; /* gear */
	}
	.actions li.modify a:before
	{
		content: "\f304"; /* pen */
	}
	.actions li.about a:before
	{
		content: "\f129"; /* info */
	}
	.actions li.create a:before,
	.actions li.chooseperson.button a:before
	{
		content: "\2b"; /* plus */
	}
	.actions li.create.changeloadmybookcontent a:before
	{
		content: "\f021"; /* arrow-rotate */
	}
	.actions li.organize a:before
	{
		content: "\f0dc"; /* sort */
	}
	.actions li.sitemap a:before
	{
		content: "\f0e8"; /* sitemap */
	}
	.actions li.privacy a:before
	{
		content: "\f023"; /* lock */
	}
	.actions li.remove a:before
	{
		content: "\f00d"; /* xmark */
	}
	.actions li.summary a:before
	{
		content: "\f58d"; /* grip */
	}
	.actions li.move a:before
	{
		content: "\f0b2"; /* up-down-left-right */
	}
	.actions li.copy a:before,
	.copy-question::before
	{
		content: "\f0c5"; /* copy */
	}
	.actions li.evaluations a:before
	{
		content: "\f14a"; /* square-check */
	}
	.actions li.assessmentframework a:before
	{
		content: "\f080"; /* chart-bar */
	}
	.actions li.learningtracking a:before
	{
		content: "\f681"; /* square-poll-vertical */
	}
	.actions li.learningtrackingtable a:before
	{
		content: "\f00a"; /* table-cells */
	}
	.actions li.learningtrackingparticipant a:before
	{
		content: "\f0c0"; /* users */
	}
	.actions li.learningtrackingtask a:before
	{
		content: "\f31c"; /* file-pen */
	}
	.actions li.learningtrackingselect a:before
	{
		content: "\f0ae"; /* list-check */
	}
	.actions li.upload a:before
	{
		content: "\f093"; /* upload */
	}
	.actions.viewer a:before
	{
		content: "\f152"; /* square-caret-right */
	}
	.actions li.responses a:before
	{
		content: "\f019"; /* download */
	}
	.actions li.history a:before
	{
		content: "\f1da"; /* clock-rotate-left */
	}
	.actions li.security a:before
	{
		content: "\f132"; /* shield */
	}
}
@media all and (max-width: 500px)
{
	div.answer-row-grid
	{
		display: grid;
		grid-template-columns: auto 3rem 3rem;
	}
	fieldset.short-answer-questions div.t input[type="number"]
	{
		width: 3.5rem;
		padding-left: 0.2rem;
	}
	div.answer-row-grid div.t:nth-child(2)
	{
		margin-left: 0.5rem;
	}
	button.remove-row
	{
		margin-left: 0rem;
	}
	div.mc-questions-grid-wrapper
	{
		display: grid;
		grid-template-columns: 1.5rem auto auto 50px;
	}
	div.mc-questions-grid-wrapper div.dummy-choice-checkbox-container
	{
		margin: 0;
	}
	div.mc-choice-row input[type=number]
	{
		width: 3.5rem;
	}
}

.actions.important li.subscribe a,
.actions.important li.share a,
.actions.important li.metadata a,
.actions.important li.expandmaincontent a,
.actions.important li.message a,
.actions.important li.connect a,
.actions.important li.emergencynotification a,
.actions.important li.close 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/bell-white.svg");
}
.actions.important li.subscribe.highlight a
{
	background-image: url("icon/bell-yellow.svg");
}
.actions.important li.share a
{
	background-image: url("icon/share-white.svg");
}

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

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

.actions.important li.connect.highlight a
{
	background-image: url("icon/address-book-orange.svg");
}

.actions.important li.emergencynotification a
{
	background-image: url("icon/emergency-white.svg");
}
.actions.important li.emergencynotification.active a
{
	background-image: url("icon/emergency-red.svg");
}

.actions.important li.close a
{
	text-indent: 0;
	background-size: 1.5rem 1.5rem;
	background-color: #fff;
	border: 2px solid #C82038;
	border-radius: var(--buttonradius);
}
.actions.important li.close a:hover
{
	background-color: #b21c32 !important;
	border: 2px solid #b21c32 !important;
}
.actions.important li.close a::before
{
	font-family: var(--fontawesome);
	display: block;
	content: "\f00d";
	color: #b21c32;
}
.actions.important li.close a:hover::before
{
	font-family: var(--fontawesome);
	display: block;
	content: "\f00d";
	color: #fff;
}
/*

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

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

*/

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

/* undo the hiding on special pages without 3-dot menus */
main.systemperson.details nav.actions:not(.content),
main.systemperson.details nav.actions:not(.content) ul.actions:not(.important)
{
	animation: none;
}

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


/* show dark grey overlay over the non-focused content when menu is open, note that Firefox doesn't yet support :has() */
main:has(article.popupmenuopen):before
{
	content: "";
	background: var(--modalbackdrop-background-color);
	opacity: var(--modalbackdrop-opacity);
	animation: fadein-modalbackdrop ease 0.5s;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*pointer-events: none; /* make the overlay totally transparent to touch, too, so links and other menus still work */
}

article:has(article.popupmenuopen),
.modal-open article:has(.modal-dialog),
article:has(div.add-event-modal)
{
	/* .dialogwrapper doesn't need extra styles */
	/* .ui-dialog doesn't need extra styles */
	/* .shepherd-modal-is-visible doesn't need extra styles */
	content-visibility: visible;
}

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

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

article.document.haspopupmenus > header + div.main,
article.document.haspopupmenus > header + nav.actions,
article.learningresource.haspopupmenus > header + div.main,
article.learningresource.haspopupmenus > header + nav.actions
{
	margin-top: calc(0.5 * var(--gap));
}

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

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

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

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


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

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


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

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

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

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

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

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

article.haspopupmenus > header .menutoggle
{
	border: solid var(--linewidth) transparent;
	border-radius: var(--buttonradius);
	width: 2rem;
	height: 2rem;
	width: calc(var(--buttonheight) - 2 * var(--linewidth));
	height: calc(var(--buttonheight) - 2 * var(--linewidth));
	background-color: #fff;
	margin: 0;
	padding: 0;
	background-image: url("icon/more-vertical.svg");
	background-position: 50% 50%;
	background-size: 2rem;
	background-repeat: no-repeat;
	box-shadow: var(--buttonboxshadow);
}

article.haspopupmenus > header .menutoggle > span
{
	overflow: hidden;
	width: 1px;
	height: 1px;
	display: inline-block;
}

article.haspopupmenus > header .menutoggle:hover
{
	background-color: var(--reversethemebackground);
	border-color: #fff1;
	background-image: url("icon/more-vertical-white.svg");
}

article.haspopupmenus > header .menutoggle:focus
{
	box-shadow: var(--focusboxshadow), var(--buttonboxshadow);
}

article.haspopupmenus > header .menutoggle:focus:not(:focus-visible)
{
	box-shadow: var(--buttonboxshadow);
}

.actions.important li.create a
{
	color: #fff;
	background-color: var(--linkbuttonbackgroundcolor);
	overflow: visible; /* needed to show blue dot */
}

article.haspopupmenus.popupmenuopen > header .menutoggle,
article article.haspopupmenus.popupmenuopen:not(.module) > header .menutoggle
{
	box-shadow: none;
	background-color: var(--reversethemebackground);
	background-image: url("icon/more-vertical-white.svg");
	filter: brightness(130%);
}

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

article.haspopupmenus
{
	border-radius: var(--radius);
}


article.popupmenuopen
{
	background-color: var(--themebackground);
	color: var(--themetextcolor);
	position: relative;
	z-index: 1;
}

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

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

	color: var(--linkcolor); /* all text in menu is wanted to be same color (than links) */
	background: var(--themebackground);

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

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

	min-width: 44px;

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

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

.menu.popup li
{
	display: block;
}

.menu.popup li
{
	padding: 0;
}

.menu.popup li a
{
	display: block;
	padding: 0.65rem 1rem;
	text-decoration: none;
	color: var(--linkcolor);
	border-radius: 0;
}

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

.menu.popup li a:hover
{
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}
.menu.popup li a:focus
{
	box-shadow: var(--focusboxshadow);
}

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

.actions.feed,
.actions.plaintext,
.actions.download
{
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}

.actions.feed:last-child,
.actions.plaintext:last-child,
.actions.viewer:last-child,
.actions.download:last-child
{
	margin-bottom: 0;
}

.actions.download a:before,
.actions.feed a:before
{
	font-family: var(--fontawesome);
	margin-right: 0.5rem;
}

.actions.download a:before
{
	content: "\f019"; /* download */
}
.actions.feed a:before
{
	content: "\f09e"; /* rss */
}

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

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

.gallerymodule ul.organize img.icon,
.gallerymodule ul.organize img.thumbnail
{
	height: var(--organize-icon-size-gallery);
}

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

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

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

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

	display: flex;
}

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

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

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

ul.voicebooks
{
	margin: 0;
	padding: 0;
	list-style: none;
	word-wrap: break-word;
}

ul.voicebooks li.voicebook
{
	display: flex;
}

li.voicebook img
{
	margin: 1rem;
	width: 12rem;
	height: 12rem;
}

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

ul.voicebooks span.booktitle
{
	font-weight: bold;
	display: block;
}

iframe.voicebooks
{
	display: block;
	margin: auto;
	width: 100%;
	max-width: 320px;
	height: 660px;
	max-height: none;
	overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

li.extauthservice
{
	display: inline-block;
	margin-bottom: 0.75rem;
}
div.externalfile.recordedaudiofile.preview.audio audio
{
	display: block;
}
div.externalfile.recordedaudiofile.preview.audio button.forward:after
{
	font-family: var(--fontawesome);
	content: "\f051";
	/*content: "\f04e";*/
	margin-left: 0.25rem;
	font-size: 0.7rem;
}
div.externalfile.recordedaudiofile.preview.audio button.backward:before
{
	font-family: var(--fontawesome);
	content: "\f048";
	/*content: "\f04a";*/
	margin-right: 0.25rem;
	font-size: 0.7rem;
}
div.externalfile.recordedaudiofile.preview.audio button
{
	font-weight: bold;
	font-size: 0.8rem;
	line-height: inherit;
}
div.externalfile.recordedaudiofile.preview.audio button:hover
{
	filter: brightness(130%);
}
div.externalfile.recordedaudiofile.preview.audio button.forward
{
	margin-left: 0.2rem;
}

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

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

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

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

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

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

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

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

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

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

ul.registrations > li + li
{
	border-top: solid var(--themetextcolor) 0.1rem;
}


ul.connection :link,
ul.connection :link:hover,
ul.connection :link:active,
ul.connection :link:visited
{
	text-decoration: none;
}

ul.access + div.title.h1
{
	margin-top: 1rem;
}

ul.access + ul.access
{
	margin-top: 1.5rem;
}

ul.access + div.jsselectall
{
	margin-top: 1.5rem;
}

/* generic icon in content area, usually with a link to a service */
img.icon,
.searchresults .searchitem > div.icon img.icon
{
	vertical-align: middle;
	width: var(--icon-size);
	height: var(--icon-size);
	border-radius: 50%;
	object-fit: cover;
	border: none;
}
.searchresults .searchitem > div.icon img.icon
{
	padding: 0;
}

a img.icon
{
	box-shadow: var(--buttonboxshadow);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
}

.banner a img.icon,
#personmenuplaceholder img.icon
{
	box-shadow: none;
	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;
}

article.profile.entry .comments .new.comment p
{
	padding: 0.2rem 0rem;
}

article.profile.entry .comments header img.icon,
article.profile.entry .comments .new.comment img.icon
{
	left: 0.75rem;
}

article.profile.entry .comments article
{
	padding: 0.25rem;
}

.privatemessages.removeuser.action
{
	display: inline-block;
	font-size: 0.8rem;
}
article.privatemessages.thread
{
	padding: 0.9rem;
	clear: both;
}
header > h1 > div.authors.privatemessages
{
	display: inline;
	font-size: 0.6rem;
}
article.privatemessages.list a.bubble
{
	color: var(--themetextcolor);
	text-decoration: none;
}

article.privatemessages.list a.bubble:hover > div
{
	background-color: #fff;
}
article.privatemessages.list a.bubble:hover > div:after
{
	border-top-color: #fff;
	border-bottom-color: #fff;
}


article.privatemessages.list .reply,
article.privatemessages.list .markasread
{
	margin-right: 0.5rem;
}

article.privatemessages.list > a,
article.privatemessages.list > a:link,
article.privatemessages.list > a:visited
{
	display: flex;
	width: 100%;
	text-decoration: none;
	padding: 0.5rem 0;
}
article.privatemessages.list > a:hover
{
	background-color: var(--privatemessagebackground);
}

article.privatemessages.list > a > .icon
{
	flex: 0 0 auto;
}

article.privatemessages.list > a .content > .privatemessage.title
{
	display: flex;
	justify-content: space-between;
}

article.privatemessages.list .authors
{
	font-size: 1rem;
}

article.privatemessages.list .privatemessage.body
{
	display: flex;
	justify-content: space-between;
}

article.privatemessages.list .privatemessage.body > .unread,
article.submissionfolder footer .responses > .count,
article.reorderassignment footer .responses > .count,
article.multiplechoiceassignment footer .responses > .count,
article.essayassignment footer .responses > .count,
article.shortanswerassignment footer .responses > .count,
article.form.module footer .responses > .count,
.highlight.count,
.moodmeterfooter .count,
.moodmetersummarytext .count,
.triggercountchange .count
{
	display: inline-block;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	border-radius: 50%;
	height: 1.25rem;
	min-width: 1.25rem;
	padding: 0.25rem;
	margin-left: calc(0.5 * var(--gap));
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4rem;
}

.moodmeterfooter .count,
.moodmetersummarytext .count
{
	margin-right: calc(0.5 * var(--gap));
}

article.privatemessages.list .privatemessage.body .content
{
	font-size: 0.8rem;
}

article.privatemessages.list > a .content > .privatemessage.title time
{
	font-size: 0.8rem;
}
article.privatemessages.list .privatemessage.title > time,
article.privatemessages.list > a .content > .privatemessage.title time
{
	opacity: var(--opacity-nonessential);
	display: inline-block;
	min-width: 6.5rem;
}

article.privatemessages.list > a > .content
{
	margin: 0 calc(0.5 * var(--gap));
	flex-grow: 1;
}
article.privatemessages.unread
{
	font-weight: var(--font-weight-bold);
	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: var(--font-weight-bold);
	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);
}

main > div.messages
{
	margin: var(--biggap);
	margin-bottom: 0;
}

.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
{
	filter: invert(20%) sepia(52%) saturate(4315%) hue-rotate(339deg) brightness(83%) contrast(92%);
	display: inline;
}

div.message.participantlist
{
	display: inline-block;
	font-size: 0.9rem;
	padding: 0.25rem 0.45rem 0.25rem 0.25rem;
}
div.message.participantlist strong
{
	font-weight: bold;
}
div.message.participantlist span.paticipants.title
{
	font-weight: normal;
}

.main > .comments
{
	margin-top: 1rem;
	margin-bottom: 1px; /* workaround Google Chrome 90 overflowing the content for yet unknown reason - seems to be related to font size in aside */
}

article.response.removed
{
	opacity: var(--opacity-nonessential);
}

article.commoncomment.removed div.main
{
	opacity: var(--opacity-nonessential);
	font-style: italic;
}
.comments > article.commoncomment + article.commoncomment
{
	margin-top: calc(2 * var(--gap));
}

.comments > article.commoncomment
{
	margin: 0;
	padding: var(--gap);
	margin-top: var(--gap);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
	background-color: #fff;
	color: var(--themetextcolor);
	position: relative;
	border-radius: var(--radius);
}

.comments > article.commoncomment.mycomment
{
	background-color: var(--secondarycontent-background-color);
}

.comments > article.commoncomment:before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: '\f0d8';
	font-size: 2.5rem;
	filter: drop-shadow(0px -1px 0 #dbdbdb);
	position: absolute;
	top: -2rem;
	left: 2rem;
	right: 0;
	z-index: 2;
	color: #fff;
}

.comments > article.commoncomment.mycomment:before
{
	position: absolute;
	left: auto;
	right: 2rem;
	color: #f5f5f5;
}

article.commoncomment > header > .header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: calc(0.5 * var(--gap));
}

article.commoncomment.mycomment > header > .header
{
	justify-content: end;
}

article.commoncomment.mycomment > header > .header > div
{
	display: inline-block;
	text-align: right;
}

article.new.comment form .t
{
	margin-top: 0;
}
article.new.comment
{
	margin: 0;
	margin-top: var(--gap);
	padding: var(--gap);
	background-color: var(--secondarycontent-background-color);
	color: var(--themetextcolor);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
	border-radius: var(--radius);
}

a.messages
{
	padding-left: 1.75em;
	background-repeat: no-repeat;
	background-image: url(icon/messages.svg);
	background-size: 1.25em 1.25em;
	background-position: 0% 50%;
	display: inline-block;
	margin-top: 0.5rem;
}

/* dropdown styles from ui/ux project */

div.bannerdropdownmain
{
	position:absolute;
	bottom:1rem;
	left:1rem;
}
div.bannerdropdownmain .dropdown > button::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f030";
}

.dropdown
{
	position: relative;

}

.dropdown > .dropdown-toggle.remove:hover
{
	box-shadow: none;
	background-color: var(--themeforeground);
}

.dropdown > .dropdown-toggle.remove
{
	height: 100%;
	width: var(--dropdown-toggle-width);
	align-items: center;
	padding: 0;
	margin: 0;
	background-color: transparent;
	background-position: 50%;
	background-size: 1.5rem 1.5rem;
	background-repeat: no-repeat;
	border: none;
	box-shadow: none;
}

.dropdown > .dropdown-toggle.remove::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f2ed";
	color: var(--themeforeground);
}

.dropdown > .dropdown-toggle.remove:hover::before
{
	color: var(--reversethemeforeground);
}
.dropdown > .dropdown-toggle.remove > img
{
	vertical-align: middle;
	height: 2.0rem;
	border: none;
	width: 100%;
}

.dropdown > .dropdown-menu
{
	position: absolute;
	display: none;
	list-style: none;
	background: #fff;
	left: 0;
	top: calc(100% - 0.5rem);
	float: left;
	text-align: left;
	background-clip: padding-box;
	padding: 0;
	margin: 0;
	min-width: 15rem;
	z-index: 10;
	box-shadow: var(--boxshadow);
	border: var(--hairlinewidth) solid rgba(0,0,0,.15);
}

.dropdown > .dropdown-menu > li, main.systemperson ul.links .dropdown > .dropdown-menu > li
{
	min-width: 1rem;
	display: flex;
}

.dropdown > .dropdown-menu-toleft
{
	left: auto;
	right: calc(0% + 0.5rem);
}

.dropdown-menu > li > button, .dropdown-menu > li > a
{
	display: block;
	clear: both;
	white-space: nowrap;
	align-content: center;
}

.dropdown-menu > li > a
{
	display: flex;
	align-items: center;
	min-height: 2.5rem;
	text-decoration: none;
}

.dropdown > .dropdown-menu >li > .dropdown-item:hover
{
	color: var(--reversethemeforeground);
	text-decoration: none;
	background-color: var(--reversethemebackground);
	border-radius: 0;
}

.dropdown > .dropdown-menu >li > .dropdown-item
{
	width: 100%;
	padding: .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	margin: 0;
}

/*div containing results*/
ul.nav-tabs > li.nav-item > a,
ul.nav-tabs > li.nav-item > a:link,
ul.nav-tabs > li.nav-item > a:visited
{
	text-decoration: none;
	white-space: nowrap;
}

.searchresults
{
	display: flex;
	flex-direction: column;
}

.searchnav .searchresults
{
	max-height: 70vh;
	max-height: calc(100vh - 14rem);
	overflow: auto;
}

/*list item (div)*/
.searchresult
{
	margin: 1rem 0 .5rem 0;
	padding: 0 0 0 1rem;
}
.searchform.row
{
	position: relative;
}
.searchinfotext
{
	font-size: 1.25rem;
	color: #9b9b9b;
}

.searchnav .searchresultscontainer
{
	position: absolute;
	background: #fff;
	left: 1rem;
	top: 100%;
	top: calc(100% - 0.5 * var(--gap));
	right: 1rem;
	border: var(--linewidth) solid var(--themeforeground);
	border-top: var(--linewidth) solid var(--themeforeground);
	padding: .5rem;
	border-radius: var(--radius);
	box-shadow: var(--boxshadow);
}

#showsearch
{
	display: none;
}

.searchactive
{
	display: flex;
	align-self: stretch;
	align-items: center;
}

.searchnav .closesearch
{
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 2.2rem;
	height: 2.2rem;
	background-color: rgba(222,222,222, 0.8);
	box-shadow: none;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button.closesearch:hover:not(:disabled)
{
	box-shadow: var(--hoverboxshadow);
}

.searchnav .searchresultscontainer .searchresultsbanner p.searchinfotext
{
	display: inline-block;
	margin: 0;
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest
{
	text-decoration: underline;
}

.suggestedwords
{
	color:var(--themeerror);
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest:first-of-type
{
	margin-left: 0.1em;
}

.searchresultscontainer .searchresultsbanner .suggestedwords > a.suggest,
.searchnav .searchresultscontainer .searchresultsbanner a.advancedsearchlink
{
	margin-left: 0.5rem;
	display: inline-block;
}

.searchnav .searchinfotext,
.searchnav .highlightsearchword
{
	color: #002b54;
	font-weight: 600;
	font-size: 1.5rem;
}

.highlightsearchword
{
	font-weight: 400;
	color: #000;
}

.searchresults .nav-item > a > span::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}
.searchresults .nav-item > a > span.persons::before
{
	content: "\f0c0";
}
.searchresults .nav-item > a > span.documents::before
{
	content: "\f15b";
}

.searchiconlabel
{
	position: absolute;
	transform: translateY(10%); /* relative to self */
	margin-left: 0.5rem;
	z-index: 1;
}

.searchiconlabel svg:hover
{
	transform: scale(1.1) rotate(-10deg);
}

.searching .searchiconlabel svg
{
	animation: smoothwobble 3s 20;
	border-radius: 50%;
	background: var(--themebackground);
}

@keyframes smoothwobble
{
	from, to
	{
		transform: translate(0, 0) rotate(0deg);
	}

	25%
	{
		transform: translate(-0.1rem, -0.15rem) rotate(-10deg);
	}

	50%
	{
		transform: translate(0.25rem, 0rem) rotate(0deg);
	}

	75%
	{
		transform: translate(-0.1rem, 0.15rem) rotate(10deg);
	}
}

/**
 Image editor font-awesome icons
 */
.peda-image-editor-icon:after,
.peda-image-editor-icon-no-bg:after
{
	font-style: normal;
}

a.dz-edit-link.action
{
	display: none; /* element created in dz template we don't want it to show if editor isn't injected */
}

.pedaimgeditor a.dz-edit-link.action
{
	text-align: center;
	display: block;
	cursor: pointer;
	border: none;
	font-size: 1.5rem;
	text-decoration: none;
}

.pedaimgeditor a.dz-edit-link.action::before
{
	font-family: var(--fontawesome);
	content: "\f03e";
}

.bi-trash.peda-image-editor-icon:after
{
	content: "\f2ed";
}

.bi-aspect-ratio.peda-image-editor-icon:after
{
	content: "\f565";
}

.bi-image.peda-image-editor-icon:after
{
	content: "\f03e";
}

.bi-fonts.peda-image-editor-icon:after
{
	content: "\54";
}

.bi-pencil.peda-image-editor-icon:after
{
	content: "\f303";
}

.bi-download.peda-image-editor-icon:after
{
	content: "\f019";
}

.bi-question-circle.peda-image-editor-icon-no-bg:after
{
	content: "\3f";
}

.searchnav .searchdocuments input[type="search"]
{
	max-width: 20rem;
	width: 100%;
	appearance: none; /* hide iOS search icon which causes double vision effect here */
}

nav.global .searchdocuments span.error
{
	position: absolute; /* escape from the grid area */
	animation: none;
}

.searchdocuments input[type="search"]
{
	border-color: var(--linkcolor);
	border-width: var(--hairlinewidth);
	text-indent: 2rem;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.searchtitle
{
	color: #444;
	font-weight: 400;
	font-size: 1rem;
}

a.searchtitlelink
{
	font-weight: 600;
	display: inline;
	margin-right: .5rem;
	font-size: 1em;
	background-color: transparent;
}

a.searchtitlelink:hover, a.searchtitlelink:focus
{
	text-decoration: none;
	outline: none;
}

.servicedisplaylink
{
	margin-bottom: .25rem;
	font-size: 0.9em;
	color: #9b9b9b;
	width: 95%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.searchdescription p
{
	font-size: 1em;
	color: #343640;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: 3rem;
}

.searchresults ul.searchitems
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.searchresults ul.searchitems > li
{
	padding: calc(0.5 * var(--gap));
}

.searchresults ul.searchitems > li a
{
	padding: calc(0.5 * var(--gap));
}

.searchresults ul.searchitems > li + li
{
	border-top: var(--hairlinewidth) solid var(--hairlinecolor);
}
.searchresults ul.searchitems .details > h3
{
	font-size: 1rem;
	margin: 0;
}
.searchresults ul.searchitems .searchitem
{
	display: flex;
	gap: calc(0.5 * var(--gap));
}

.searchresults ul.searchitems .searchitem div.icon
{
	flex-basis: var(--icon-size); /* reserve space just for icon */
	flex-shrink: 0;
}

.searchresults ul.searchitems .searchitem .details
{
	min-width: 0; /* trick to get text-overflow ellipsis work inside display flex content */
}

.searchresults ul.searchitems .searchitem  .details > .timestamp,
.searchresults ul.searchitems .searchitem  .details > .username,
body > nav.global > .person .username
{
	font-size: 0.8rem;
	color: var(--color-username);
}
.searchresults ul.searchitems .searchitem  .details > .snippet
{
	color: #000;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.typescontainer
{
	border: none;
	background: transparent;
	padding: 0;
}
.typescontainer > legend
{
	padding: 0;
	border: none;
	background: transparent;
}
.typescontainer .types
{
	display: flex;
	flex-wrap: wrap;
}
.typescontainer .types .type
{
	min-width: 15rem;
	flex: 1 1 15rem;
}

.advancedsearch .settings
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin-top: 1rem;
}

.evaluations article.evaluation,
.peerevaluations article.evaluation
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
}

article.evaluation > header,
article.commoncomment > header
{
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolordark);
	padding-bottom: calc(0.5 * var(--gap));

}

article.evaluation > header > .header
{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--gap);
}

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

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

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

.egradecircle
{
	display: block;
	background-color: var(--evaluation-pass-background-color);
	color: var(--evaluation-pass-foreground-color);
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	margin: auto;
	position: relative;
	overflow: hidden;
}

table.evaluations td div.evaluation,
table.evaluations td div.evaluation a,
ul.taskstracking .evaluation.pass > a
{
	background-color: var(--evaluation-pass-background-color);
	color: var(--evaluation-pass-foreground-color);
}

article.evaluation.requiresrevision .egradecircle,
table.evaluations td div.evaluation.requiresrevision,
table.evaluations td div.evaluation.requiresrevision a,
ul.taskstracking .evaluation.requiresrevision > a
{
	background-color: var(--evaluation-requiresrevision-background-color);
	color: var(--evaluation-requiresrevision-foreground-color);
}


article.evaluation.fail .egradecircle,
table.evaluations td div.evaluation.fail,
table.evaluations td div.evaluation.fail a,
ul.taskstracking .evaluation.fail > a
{
	background-color: var(--evaluation-fail-background-color);
	color: var(--evaluation-fail-foreground-color);
}

.egradecircle span
{
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 90%;
	font-size: 2.5rem;
	word-wrap: normal;
}

.egradecircle .c0
{
	font-size: 3rem;
}
.egradecircle .c1
{
	font-size: 2.5rem;
}
.egradecircle .c2
{
	font-size: 1.5rem;
}
.egradecircle .c3
{
	font-size: 1.1rem;
}
.egradecircle .c4
{
	font-size: 0.9rem;
}

.egradecircle .c5
{
	font-size: 0.7rem;
	word-wrap: break-word;
}

.evaluationtype > label
{
	display: inline-block;
}

.recipientinfo
{
	display: inline-block;
	margin: 0 0.25rem;
}

.readstatus
{
	display: block;
	margin-left: 0.25rem;
}
.noevaluation
{
	background: #E85E27;
	text-align: center;
	color: #fff;
	padding-top: 1rem;
	border-radius: 0 0 var(--radius) var(--radius);
}

.noevaluation a:link,
.noevaluation a:visited,
.noevaluation a
{
	display: block;
	color: #fff;
}

.addevaluationlink
{
	margin-top: var(--gap);
}

a.secondarybutton.addevaluation::before
{

	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f080"; /* chart-bar */
}

main.addevaluation form
{
	padding: var(--gap);
	background-color: var(--secondarycontent-background-color);
}

.gradewrapper input[name="grade"]::placeholder
{
	color: var(--themetextcolor);
}

.gradewrapper input[name="grade"]:focus::placeholder
{
	color: var(--placeholdercolor);
}

.peerevaluations a.secondarybutton.addevaluation::before
{
	content: var(--font-icon-peerevaluation);
}

.evaluationsummary .enclose.document.evaluation[data-draft-type="draft"],
.evaluations article.evaluation[data-draft-type="draft"],
.peerevaluations article.evaluation[data-draft-type="draft"]
{
	color: var(--themetextcolor);
	background-color: var(--draftbackground)
}

span.draft::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: var(--font-icon-draft);
	color: var(--themewarning);
}

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

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

table.evaluations
{
	font-size: 0.9rem;
	min-width: 100%;
}

@media all and (min-width:25rem)
{
	/* use sticky first column in case horizontal scrolling is needed */
	table.evaluations th:first-child
	{
		position: sticky;
		left: -0.2rem; /* match border widths of table and cell */
		max-width: 50%;
		will-change: transform; /* improve rendering performance on Chrome */
	}
}

table.evaluations td,
table.evaluations th
{
	text-align: center;
	vertical-align: middle;
	word-break: normal;
}

table.evaluations td a:link,
table.evaluations td a:visited,
table.evaluations td a
{
	color: #fff;
}

table.evaluations th.person
{
	text-align: left;
}

table.evaluations td div
{
	padding: 0.5rem;
	border-radius: var(--radius);
	display: inline-block;
}

table.evaluations td div
{
	margin: 0.1rem;
}

table.evaluations td div.submission
{
	background-color: #1774bc;
}

table.evaluations details
{
	padding: 0;
	margin: 0;
}

table.evaluations details.open,
table.evaluations details[open]
{
	background: none;
}
table.evaluations details > summary
{
	padding: 0;
	margin: 0;
}
table.evaluations details > summary:after
{
	content: "";
}

table.evaluations details > summary
{
	list-style-type: none;
}

table.evaluations ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.expandinglist,
ul.learningstatistics ul
{
	list-style-type: none;
	padding-left: 0;
}

ul.learningstatistics li.content > div.overview > div.title,
ul.learningstatistics li.header > div.title
{
	flex-basis: 40%;
}

ul.learningstatistics li.content > div.overview  > div.tasks,
ul.learningstatistics li.content > div.overview  > div.evaluations,
ul.learningstatistics li.header > div.tasks,
ul.learningstatistics li.header > div.evaluations
{
	flex-basis: 30%;
}

ul.learningstatistics li.header > div.done
{
	flex-basis: 60%;
}

ul.taskstracking li.task > div.title
{
	flex-basis: 40%;
}
ul.taskstracking li.task > div.submissionwrapper
{
	flex-basis: 60%;
}

ul.taskstracking li.task > div.submissionwrapper > div.submissioncontainer
{
	display: flex;
}

ul.taskstracking div.submissioncontainer > div.submissionmodule,
ul.taskstracking div.submissioncontainer > div.evaluations
{
	flex-basis: 50%;
	overflow: auto;
}

ul.taskstracking li.evaluation > a
{
	display: inline-block;
	margin: var(--hairlinewidth);
	border-radius: var(--radius);
	padding: calc(0.25 * var(--gap));
}

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: var(--assessment-highlightcolor-self);
}
div.goal_skills .role2 meter::-webkit-meter-optimum-value
{
	background: var(--assessment-highlightcolor-teacher);
}

.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;
}
/*
a and b are gaugemeter and c is chart
 */
.overallprogress
{
	display: grid;
	grid-template-rows: min-content minmax(0, 1fr);
	grid-template-columns: 1fr 1fr minmax(0, 3fr);
	grid-template-areas: "a b c";
}

.gradehistorychartcontainer
{
	grid-area: c;
	min-height: 20rem;
}

.GaugeMeter
{
	position: relative;
	text-align: center;
	overflow: hidden;
	display: inline-block;
	grid-area: b;
}

.GaugeMeter:first-of-type
{
	grid-area: a;
}

.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: var(--assessment-highlightcolor-self);
	border-radius: var(--radius);
	padding: 0.25rem 0.5rem;
}
.assessmentcontent .graphradiobutton.type2
{
	border-color: var(--assessment-highlightcolor-teacher);
}

.assessmentcontent .graphradiobutton.checked
{
	background-color: var(--assessment-highlightcolor-self);
	color: var(--assessment-foregroundcolor-self);
	box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.5);
}
.assessmentcontent .graphradiobutton.type2.checked,
.assessmentcontent .skillcontent.type2 .speech-bubble
{
	background-color: var(--assessment-highlightcolor-teacher);
	color: var(--assessment-foregroundcolor-teacher);
}

.assessmentcontent .graphradiobutton:not(.checked):hover
{
	background-color: var(--assessment-highlightcolor-self);
	color: var(--assessment-foregroundcolor-self);
	box-shadow: 0 0 0.25rem var(--themetextcolor);
	transition: background-color 0.5s ease;
}

.assessmentcontent .graphradiobutton.type2:not(.checked):hover
{
	background-color: var(--assessment-highlightcolor-teacher);
	color: var(--assessment-foregroundcolor-teacher);
}

.assessmentcontent .graphradiobutton:not(.checked) div.details
{
	opacity: var(--opacity-nonessential);
}

.assessmentcontent .skillcontent
{
	background-color: #ddd;
	padding: 0.5rem;
	border-radius: var(--radius);
}

.assessmentcontent .skillcontent.noassessment
{
	grid-column: 1 / span 2;
}
.assessmentcontent.range3 .skillcontent.noassessment
{
	grid-column: 1 / span 3;
}
.assessmentcontent.range4 .skillcontent.noassessment
{
	grid-column: 1 / span 4;
}
.assessmentcontent.range5 .skillcontent.noassessment
{
	grid-column: 1 / span 5;
}
.assessmentcontent.range6 .skillcontent.noassessment
{
	grid-column: 1 / span 6;
}
.assessmentcontent.range7 .skillcontent.noassessment
{
	grid-column: 1 / span 7;
}

.assessmentcontent.canassess .skillcontent:not(.checked):not(.noassessment)
{
	display: none;
}

.assessmentcontent .skillcontent .speech-bubble
{
	background-position: 0.5rem 50%;
	background-repeat: no-repeat;
	background-size: 1.5rem auto, 100% 100%;
	padding: 0.25rem 0.5rem;
}

.assessmentcontent .skillcontent.checked.type1 .speech-bubble
{
	background-image: url("icon/person-white.svg");
}

.assessmentcontent .skillcontent.checked.type2 .speech-bubble
{
	background-image: url("icon/school-white.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: var(--assessment-highlightcolor-self);
	color: var(--assessment-foregroundcolor-self);
	border-radius: var(--radius);
	margin-bottom: 0.25rem;
}

.assessmentcontent .skillcontent .speech-bubble:after
{
	border-top-color: var(--assessment-highlightcolor-self);
	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.685em;
}

.assessmentcontent .skillcontent .speech-bubble:after
{
	border-top-color: var(--assessment-highlightcolor-self);
}

.assessmentcontent .skillcontent.type2 .speech-bubble:after
{
	border-top-color: var(--assessment-highlightcolor-teacher);
}

.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: var(--assessment-highlightcolor-self);
	color: var(--assessment-foregroundcolor-self);
}

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

.triggercountchange
{
	margin-left: var(--gap);
}
.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 var(--assessment-highlightcolor-self);
}
.assessmenthistory ul.criteria li.criterion div.assessments  div.role2.positive
{
	border-right: 0.5rem solid var(--assessment-highlightcolor-teacher);
}
.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);
}

.rssreadermodule > .main > h1,
.rss_errors,
.rss_feedlist,
.rssreadermodule article
{
	margin: var(--gap) 0;
}

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

/* Styles to prevent user generated content bleeding all around the place if somebody writes Zalgo text such as "T̠̬̘̯̙̲̪̪͇̜̭̣̘̟̲͇̳̬͕̖̜̯̘͉͈͉͎̱͓̣̰̳̳͉̙̯̙̰͚͇͎͕̘̯̳̞̲̼̱̖̩͙͕̤͂̋͌ͤ̒ͬ̀͒͂͒ͩ̌͗̋̓ͭ́̀̿͒ͣͮ̓̋ͭ͊͒͐ͩ̆̓͂ͫ̐͂̇͛͑̓̚ͅẽ̗̙͚̮̭̮̬̠͈̻̦̭̭̳̹̯̹̦̔̌ͯ͂̎̈̊̍ͣ̿̈̈̿̄ͦͭ̍͑̽̎̅͛͗͐ͬ̂̊̽̌̎̋ͭ͆̈́̓ͦͦ̑͛ͯs̭̠͖̝͙̩̫̫̥̦͚̝̼̣̥̗ͣͦ͑́͐ͭ͊ͧ̽͐̈̔͛ͨ́̎̔ͤ͐͒̓̀̅̈́̊̋͋̀̿̎͒̉̽͂ͮͬt̾͒̂̽̐ͪ̆̾ͮ͌̽͛̌͒̔ͧ͗̿ͩ̄̿̿̌ͪͩ̊̏͑͌̀̋ͩ͆ͣ̑̏́̽̐͐̔ͪ̓̓ͭ͆ ̯̘͙̠̦̩̝͎̭̖̪̗̞̖̟̲͖̥͙͕̟̝̹͎̽o̼̮̭̞ͯͬ̀͐͗̿ͣ͛ͮͭ̎ͨ͒̌̾̐̉̍͗̎̈́̆ͪͦ̌ͧͦ̓ͨ̐ͯ͒͑͛ͯ̽ͅf̝̪̼̠͎͇̹̝̙̰̟̼͎̱͂ͩ̈́̌ͬ̒ͧ̽̅̉ͧ́͒̒͊ͦͭͭͭ͗́̽ͦ ͚̝̝̠̪͍̰̺̳̫̭͎͔̭̟͍͎͇͎͈͔̠̬͇̦͈̟̰̱̹̲̰̭̲̭̺̜͚̰̹̮̣̤̲̪̙̞͇̦͙͆ͪͨ̐ͨ̽̒͛ͩ̐ͤ͌̂́͒̌ͭͩͦ̎́̈ͬ̓̑̔͐̎͒̔̄ͥ̏ͥͯͧ͐ͪͧͥ̂ͬ̒̀̉̓ͭ̚ͅͅͅͅZ̘̥̲͍̠͎̱̺̘͈͍̟̤̠̮͖͉͕̙̩̲̣̠͎̥̣̜͚̜͕̻͔̰̞̫̭̹͕͙̝̠̮̣̰ͤͦ̍̓ͪͥ̒ͩ̋͆̍͋̽̅͗̈ͨ̂ͨ͋̔̔̓ͪͣ̅̇̏͒ͬ͐ͩ̇ͨ̋ͣ̌̔ͨ́ͪ̔̾̄ͤ̅͑̚ͅA̞̜̺̣͓̼̭̭͈̳̞͚̭̭͕̺͉̜̗̼̣̩̪͂ͯ̈́̍̍͛ͮ̂ͯ̽̎ͬͯ͆̋͌̍͐̌͗ͤ̒ͤ͊̐̈́ͧ̓̇ͬͦ̾ͭ̐̆̚ͅͅͅL̪͉̬̦̝̠̲͖̘̮̙̳͓͇͇̪̱͉̱͓̺͙͓̲̇́̍̽̇̎͊̍̐ͩ̔̋́ͬ̍ͮͫͮ͗̍͋ͭͯ̑̉̈́̄̾̂̀͆̅͑̽̃̚G̣̺̼͔̺̖̣̥̝̰͙̖͖̮̻̩͓̞͈̜̗̤̺̥̻̞͇̩͕̲̙̝̲̤̤̜̐͗͐ͦ̉͐͗ͩ̿ͩ̑ͫ̍͛̄ͦ̔̚O͇͎̬̰̦̜̻͔͇̖͇̞̪͉͉͔͕̥͇̬̮̰̠̟̤̰̹͖̗̺̙͍ͮͨ̿ͪͯ̈́ͫ̔̽̃̀ ̺͕̠̰̝͎̰̟̠̲̗͈̬̥͈͎̺̮̗͍̺͚̟̠̙̠̜̘̹͉̖̤͉̫̰̱̭̠̲̲̗͒ͥͯ̎͐ͨ̓̓ͮ͒ͧ̒̾́̍̍ͦͥ̈́͒͊̃̓̈̈́̀ͮ̂ͪ̓̄̏ͫ̄̓̓̿̓̔̋̎ͧͪͩͪ͋ͫt̘̥̳̺̳̟̯̜̱̯̬̣̣͔̬̟͈͖̗̹͉̫̯́̋͒͂̈́̎͐̇́ͫ̒͛ͥͦ̐̿͂͒͗̃ͮ͒ͪ̌͆̏ͯ̏ͯ̊ͣ̾̃͋ͩ̃̿͐e̹̠̻̟̪̪͎̭̭͎͎̮̹̬̮̪̓̑ͨ̐͐̈́̓ͤͦ͂̿̅͋ͭ̑̓ͬ͐͐ͤ͐ͪ̒ͥ̀̈́ͪ̇̆ͤ̏̏̄̾̌͒ͬ̊ͬ͛̄̄̌̍͋ͥͅͅx̪͇̞̫̰̠͓̣̻̯̞̭̙̝̣͉̱̘̤͇̦̘̙̥͚̫̩̲̘̻͈͉̱͙͇͙ͫ̐̌͛̓͛ͨ͒̂t̩̖̮̙̻ͬ͗͛̍̅̌ͧ͒ͫ̓ͮ̈͒̾ͮͣͮͨͪ͆ͥ̐̍ͮ̽̅̈́̿ͫ͐̍̉ͦͮ͆͗̔̎̿̇ͧ̋ͨͮ̐̓͑̽̑ͤ̊̚̚ͅ ̝͔̺̩͔͈̰͈̣̫̤͉͚͇̟̹̘͔͇̥̘̘̝͛͛̒ͭͣͮͥͦ̿̏ͥͦ̀͂̾͆ͯͧͮͤ͌̌́͗ͨ̎̒ͬ̈́ͧ̊ͨ̓͂̾̉͐ͦ̃̃̚ͅẖ̰̠̮͓̣̯̭̥̹̜̟͍͍͇̀ͧ̽͑̄͊̋̐͋ͨ̔ͭͬ́̀̐͌͗ͥ̓̇͗̂̊ͅe͇͙͕̺̖̰̟̠̩̘̪̳̻̳͉͔̺̳̲̦̘̞̬̬̝͓̬̣̟͕̘͓̬̍͗̋ͮ͑ͣ͗̓̓̎̈̃̾̊̃ͧ̊ͪ̃̀͋̋̄͑̈́̂́͒̔̎̎ͥ͛͌̃͒̈́ͤ͛ͬͫͪ̚r͉̮̼̙̩͖͍̗̣̘͚̭̩͙͙̻͓̦̱̣͉̮̲͇̥͉͚̲͕͖̩̦̫̪̬͔̟͔̦̻̼̼̫̫̯̣̮͈̺͓͖̬̂̾͛̉̆̍ͥ̈́̓̆ͫ͑̄̔̅̈̏̅̓ͨ͐̊ͮ̋̈́ͣͮ̋̓̾ͤ͊ͬ̀̑ͣ͊̇͌ͯ̚ͅḙ̲͍͙͕̯̘͓͔͔͈̹͈̗͎͕̬̖̟̖͚̳͎̖ͩ͊̃ͫ̔̓͒͗ͩ͋̂ͩͩͧ̍͛̿͒ͩͅ" */

article > header h1,
.pagethumbnails .pagethumbnail > a,
.content.enclose,
.modal-content .day-events > div,
.events-container a.event-url,
.description.maybeshorten,
.assignmentmodule .description,
.module.essayassignment .question,
.module.essayassignment div.t,
.module.shortanswerassignment > .main,
.responsesummary .answer-row-question,
.responsesummary article.commoncomment .main,
.module.form .form,
nav.personmenu li.item,
.sitemap .item,
ul.sitemap.tree li,
.forum.content
{
	overflow: auto;
}

/* fix overflow:auto cutting intentional bleed (box shadow at al) */
.module.shortanswerassignment > .main,
.module.essayassignment div.t,
.module.form div.form
{
	padding: 1rem;
	margin: -1rem;
}

main.page article.shortanswerassignment > .main
{
	margin: 0;
}

table
{
	border-collapse: collapse;
	border: none;
	overflow: auto;
	max-width: 100%;
	background: #fff;
	color: var(--themetextcolor);
}

table > caption
{
	background: rgba(0, 0, 0, 0.05);
}

/* workaround the fact that CSS up to version 3.x does not allow display:table and overflow:auto to really work, use extra wrapper added by JS */
.tablewrap
{
	max-width: 100%;
	overflow: auto;
}
.tablewrap > table
{
	overflow: visible;
	max-width: none;
}

table[border] td,
table[border] th
{
	border: solid var(--themetextcolor) 0.1rem;
}

table[border="0"] td,
table[border="0"] th
{
	border: none;
}
table.borderless td,
table.borderless th
{
	border: none;
}

.xhtmleditor table[border="0"] td,
.xhtmleditor table[border="0"] th
{
	border: dashed #777 0.1rem;
	border: dashed rgba(0,0,0,0.1) 0.1rem;
}

.xhtmleditor table.borderless td,
.xhtmleditor table.borderless th
{
	border: dashed #777 0.1rem;
	border: dashed rgba(0,0,0,0.1) 0.1rem;
}

table.details tr:not(:first-of-type)
{
	border-top: 0.1rem solid #d8dbde;
}

table.details th,
table.details td
{
	border: none;
	background: #fff;
	color: #000;
	font-weight: normal;
	vertical-align: baseline;
}

table.details th
{
	opacity: var(--opacity-nonessential);
	font-size: 0.8rem;
}

article.details .section:not(:first-of-type)
{
	margin-top: 2rem;
}

article.details .section > h1
{
	margin: 0;
	border-bottom: 0.05rem solid var(--themeforeground);

}

hr.break.float
{
	clear: both;
	border: none;
	margin: 0;
}
.xhtmleditor hr.break.float
{
	border-top:  dotted #777 0.1rem;
}

table.summary td,
table.summary th
{
	border: solid #fff 0.2rem;
}

table.summary th
{
	padding: 0.5em;
}

table.highlighted td,
table.highlighted th
{
	border: solid #000 0.3rem;
}
body .mce-item-table,
body .mce-item-table td,
body .mce-item-table th,
body .mce-item-table caption
{
	border: solid rgba(0,0,0,0.1) 0.1rem;
}

table.mceLayout
{
	/* workaround TinyMCE brain-damage: it cannot handle border-collapse: collapse correctly */
	border-collapse: separate;
}

table th,
table td
{
	vertical-align: top;
	text-align: left;
	border: solid #ccc 1px; /* we cannot use rem units here to avoid Google Chrome off-by-one rendering issues, and this only fixes the 100% font size of Chrome */
	background: #f7f7f7;
	padding: 0.2rem 0.5rem;
}

table th
{
	color: #000;
	background: #eee;
}

table.stickyheader thead tr th
{
	position: -webkit-sticky;
	position: sticky;
	top: -0.1rem; /* match border width */
}

table.details tr td img.lock
{
	position: relative;
	float: right;
	max-height: 0.9rem;
}

html.frontpage > footer
{
	margin-top: 0;
	padding-left: 0rem;
}

article#uuid-00000000-0000-1301-8000-000000000000
{
	padding-top: 1.0rem;
}

article.titleonly#uuid-00000000-0000-1301-8000-000000000000
{
	padding-top: 0rem;
}

main.frontpage,
aside.frontpage
{
	float: left;
	width: 49%;
	margin-right: 0.1rem;
}

main.frontpage h2
{
	text-shadow: none;
	color: #fff;
	margin: 0;
	padding: 0;
}

div.highlight.frontpage a
{
	text-decoration: none;
}

html.frontpage article.pinned a:link,
html.frontpage article.pinned a:visited
{
	display: block;
	padding: 1rem;
	margin-left: calc(0rem - var(--gap));
}

html.frontpage article.pinned .actions a:link,
html.frontpage article.pinned .actions a:visited
{
	font-size: 0.8rem;
	padding: 0;
	padding-left: 2rem;
}

.frontpage .ui-accordion li
{
	padding: 0rem;
}

.frontpage div.accordion
{
	clear: both;
	user-select: none;
}

div.accordion li + li
{
	margin-top: 0.5rem;
}

.frontpage .ui-accordion .ui-accordion-header
{
	width: 3.5rem;
	height: 3.5rem;
	float: left;
	box-sizing: border-box;
	color: #003a70;
	background: #fff;
	border-radius: var(--buttonradius);
	border: none;
	margin: calc(0.5 * var(--gap));
	text-align: center;
	padding: 0;
	font-size: 2.5rem;
	transition: all 0.3s ease;
}

.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.5rem;
	background-color: #0055a3;
	color: #fff;
}

.frontpage .ui-accordion .ui-accordion-header:hover,
.frontpage .ui-accordion .ui-accordion-header:active
{
	color: #fff;
	background: #003a70;
}

.frontpage .ui-accordion .ui-accordion-header:active
{
	background: #0055a3;
}

.frontpage .ui-accordion .ui-accordion-header:focus
{
	outline: none;
}

.frontpage .ui-accordion .ui-accordion-content-active
{
	border: none;
	background: #fff;
	border-radius: var(--radius);
	margin-left: calc(4rem + var(--gap));
	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;
}

html .tox.tox-tinymce-inline
{
	animation: fadeinwithdelay 0.7s ease-in;
}

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%;
	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%;
	box-sizing: border-box;

	display: flex;
	align-items: center;
}

.mce-floatpanel.mce-menu .mce-container-body
{
	display: block;
}

.mce-floatpanel > .mce-container-body.mce-abs-layout
{
	/* workaround menu overflowing the container for some reason */
	/* margin-top: -2px; */
}

.mce-floatpanel .mce-menubar .mce-flow-layout .mce-menubtn
{
	max-width: 20%;
	box-sizing: border-box;
}

.mce-menubtn button,
.mce-btn button,
button.mce-close
{
	box-shadow: none;
	max-width: 100%;
	overflow: hidden;
	word-wrap: normal;
	text-overflow: ellipsis;
	box-sizing: content-box;
}

.mce-menubtn button
{
	display: inline-flex;
	align-items: center;
}

.mce-menubtn button:hover,
.mce-btn button:hover,
button.mce-close:hover
{
	box-shadow: none;
}

.mce-toolbar-grp.mce-container.mce-panel
{
	/* TinyMCE has off-by-some positioning error for the absolutely positioned panel (e.g. menu button bar with B/I/U actions), workaround with transform */
	transform: translateY(-0.1rem);
	/* the .mce-panel is rendered above .mce-floatpanel which renders rounded corners so we have to stay within those corners, too */
	border-radius: var(--radius);
}

html .mce-btn .mce-caret
{
	/* workaround insane default styles */
	margin-top: 0;
	margin-left: 0.5em;
}

html .mce-menu.mce-menu-align .mce-menu-shortcut,
html .mce-menu.mce-menu-align .mce-caret
{
	right: 0.5rem;
}

/* Workaround TinyMCE "invisible" iframes leaking outside the parent element
  (e.g. parent having overflow:auto causing overflow because of iframe
  contents in Chrome 96.x) */
html .mce-floatpanel iframe[width="0"][height="0"]
{
	display: none;
}

form.inline
{
	display: inline;
}

div.t label
{
	display: block;
}
label.block.ui-sortable-handle
{
	cursor: grab;
}
.dragging
{
	cursor: grabbing;
	border: 2px solid var(--reverselinkbackground);
	background: var(--selectionbackground);
}
ul.saa-question-answer-list.ui-sortable > li.ui-sortable-helper
{
	cursor: grabbing;
}

ul.sat-answerlist li
{
	list-style-type: none;
}
ul.sat-answerlist li input[type=number]
{
	width: 3rem;
}
ul.sat-answerlist li span.inline.label
{
	margin: 0 0.25rem 0 0.5rem;
}

.fa-arrow-rotate-left::before
{
	content: "\f0e2";
	font-style: normal;
}

.fa-plus::before {
	content: "\f067";
	font-style: normal;
}
.fa-bars:before {
	content: "\f0c9";
}

.btn
{
	box-sizing: content-box;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	line-height: 1.5;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	box-shadow: none;
}
.btn.btn-btncon {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	border-radius: 0.75rem;
	color: #0057a8;
	clip-path: none;
}
.btn.btn-btncon.hidden
{
	display: none;
}
.btn.btn-btncon.btn-btnrow:disabled,
.btn.btn-btncon.btn-btnrow:disabled:hover,
.btn.btn-btncon.btn-btnrow:disabled i.fa,
.btn.btn-btncon.btn-btnrow:disabled:hover i.fa
{
	background-color: var(--disabled-background-color);
	color: var(--disabled-foregound-color);
}
.btn.btn-btncon.btn-btnrow:disabled i.fa,
.btn.btn-btncon.btn-btnrow:disabled:hover i.fa
{
	border: 2px solid var(--disabled-foregound-color);
}
@media (hover: hover) {
	.btn.btn-btncon:hover
	{
		/*background: #00386e;
		border: #00386e;*/
		background: var(--buttonbackgroundhover);
		border: var(--buttonbackgroundhover);
		color: #fff;
	}
}
@media (hover: hover) {
	button.undo.btn.btn-btncon:hover
	{
		background: none;
	}
}

.btn.btn-btnrow {
	align-items: center;
	flex-direction: row;
	padding-left: .25rem;
	padding-right: .25rem;
}

.btn.btn-btnrow .fa {
	margin-bottom: 0;
	margin-right: .5rem;
}
.btn.btn-btncon .fa
{
	box-sizing: content-box;
	background: var(--themeforeground);
	border: 2px solid var(--themeforeground);
	color: #fff;
	border-radius: 0.75rem;
	height: 2.625rem;
	line-height: 2.625rem;
	padding: 0;
	text-align: center;
	width: 2.625rem;
	box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
	.btn.btn-btncon:hover .fa
	{
		background: #fff !important;
		color: var(--buttonbackgroundhover) !important;
	}
}
div.shortname label.prefix
{
	display: inline;
	word-break: break-word;
}

input.s:hover:not(:disabled),
button:hover:not(:disabled)
{
	box-shadow: var(--buttonboxshadow);
}
button.btn.btn-btncon:hover:not(:disabled)
{
	box-shadow: none;
}

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

input.s:focus:not(:focus-visible):not(.submitting),
button:focus:not(:focus-visible):not(.submitting)
{
	box-shadow: none;
}

input.s:active,
button:active
{
	box-shadow: none;
	box-shadow: var(--hoverboxshadow);
}

input.t,
textarea
{
	width: 100%;
	box-sizing: border-box;
	border-radius: var(--forminputborderradius);
}
input.short-answer-task-question,
input.short-answer-task-answer,
input.short-answer-task-points
{
	width: 90%;
	box-sizing: border-box;
	border-radius: var(--forminputborderradius);
	margin-right: 0.5rem;
}

input.short-answer-task-points
{
	width: 50%;
}
input.t
{
	display: block;
	-webkit-appearance: textarea; /* webkit specific workaround for ugly single line text inputs */
}
input.t,
input.tcustom,
input.n,
input.short-answer-task-question,
input.short-answer-task-answer,
input.short-answer-task-points,
textarea
{
	font-size: 1rem;
}
input.n.unitnumber
{
	text-align: right;
}

input.hunajapurkki
{
	position: absolute;
	clip: rect(0,0,0,0);
	max-width: 1px;
}

li.invalidorderkey input
{
	border-color:#f00;
	box-shadow: 0px 0px 0.3rem #f00;
	outline: none;
}
input.order
{
	width: 4rem;
}
input.order:invalid
{
	border-color: #f00;
	box-shadow: 0px 0px 0.2rem #f00;
	outline: none;
}

input.order:focus
{
	outline: none;
	box-shadow: none;
}

/* Workaround broken MSIE/Mobile where invalid input has no explanation at all */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:35rem)
{
	input.order:invalid:focus
	{
		box-shadow: 0px 0px 0.2rem #f00;
		border-color: #f00;
	}
}


textarea
{
	overflow: auto;
	resize: vertical;
}

textarea[name="comment"]
{
	margin-top: calc(0.5 * var(--gap));
}

div.t
{
	margin-top: 1rem;
}

div.t + div.messages
{
	margin-top: 1rem;
}

div.c
{
	margin-top: 1rem;
	margin-bottom: -0.6rem;
}

.inputextra > div.t
{
	margin-top: 0rem;
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
}

label, legend
{
	font-size: 1em;
}

p.submitorcancel,
html p.submitorcancel /* add more specificity to override .retangle p -selector */
{
	margin: var(--gap) -0.25rem calc(0.5 * var(--gap)) -0.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top: var(--gap);
	border-top: solid var(--hairlinecolor) var(--hairlinewidth);
}

p.submitorcancel button,
.submitorcancel a
{
	margin: 0.25rem;
}

.submitorcancel a
{
	font-size: 1rem;
	display: flex;
	align-items: center;
	padding: 0.5rem;
	color: var(--themeerror);
	text-decoration: none;
}
.submitorcancel a:hover,
.author a:hover
{
	text-decoration: underline;
}

button.negative
{
	color: var(--themeerror);
	padding: 0 0.5rem 0 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

button.negative:hover
{
	text-decoration: underline;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

p.description
{
	font-style: italic;
}

.access .world,
.access .logged
{
	font-weight: bold;
}

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

dl.files,
dl.attachments
{
	margin: 0;
}

dl.files dt,
dl.attachments dt
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

dl.files dd,
dl.attachments dd
{
	font-size: 0.8rem;
}

dl.failure.details dt
{
	font-weight: bold;
}

ul.persons
{
	padding: 0;
	list-style-type: none;
}

ul.persons.withoutresponse
{
	margin-top: 0;
}

ul.persons.withoutresponse .person > a
{
	display: flex;
	padding: calc(0.5 * var(--gap)) var(--gap);
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

ul.persons.withoutresponse .person > a:hover
{
	text-decoration: underline;
	background-color: #E4E8EB; /* not sure if this is correct color */
}

ul.persons.withoutresponse :link,
ul.persons.withoutresponse :visited,
ul.persons.withoutresponse :focus
{
	border-radius: 0;
}
ul.persons.withoutresponse > li
{
	margin-top: 0;
}

dl.persons > dd + dt,
ul.special > li + li,
ul.persons > li + li
{
	margin-top: 1.2rem;
}

dl.persons dd
{
	margin-left: 3.8rem;
}

dl.persons.selectable input.cb,
ul.special.selectable input.cb,
ul.persons.selectable input.cb
{
	margin-right: 0.5rem;
	margin-top: 1rem;
	float: left;
}

ul.persons.connection li.enclose div.person
{
	float: left;
}

dl.persons.selectable dd
{
	margin-left: 5.8rem;
}

dl.persons div.person a,
ul.persons div.person a
{
	display: inline-block;
	text-decoration: none;
}

dl.persons div.personinfo,
ul.persons div.personinfo
{
	display: inline-block;
	vertical-align: middle;
}

dl.persons div.personinfo div.username,
ul.persons div.personinfo div.username
{
	color: #505050;
	font-size: 0.9em;
}

dl.persons div.personinfo div.username::before,
ul.persons div.personinfo div.username::before,
body > nav.global > .person .username::before,
.searchresults ul.searchitems .username::before
{
	content: "@";
}

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

header time,
header .timestamp,
header .draft.secondrow
{
	font-size: 0.8rem;
}


.timestamp,
.timestamp a:link,
.timestamp a:visited
{
	opacity: 0.85;
}

time
{
	white-space: nowrap;
}

time::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: "\f017"; /* clock */
}

/** Form and FormResponse classes **/

.form input[disabled],
.form textarea[disabled],
.form input[type="radio"][disabled],
.form input[type="radio"][disabled]:active,
.form input[type="radio"][disabled]:hover,
.form input[type="checkbox"][disabled],
.form input[type="checkbox"][disabled]:active,
.form input[type="checkbox"][disabled]:hover
{
	color: var(--themetextcolor);
	background: #eee;
}

.form .formresponsetext.fillintheblanks
{
	margin: 0;
	border: solid var(--hairlinewidth) var(--hairlinecolor);
}

.form .formresponsetext
{
	padding: 0 0.25rem;
	margin: 1px 1px  calc(0.5 * var(--gap)) calc(1 * var(--gap));
	background: #fff;
	border-radius: 0.1rem;
	min-height: 1rem;
	min-width: 1rem;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
}

.form span.formresponsetext
{
	display: inline;
}

.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;
	overflow: auto;
}
.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 .likert .formresponsetext
{
	margin: 0;
}
.form thead th.number
{
	text-align: center;
}
.form tbody td.average,
.form tbody td.total.count
{
	text-align: right;
}

#MathJax_Zoom
{
	max-width: none !important;
}

#MathJax_ZoomFrame
{
	top: -3rem;
}

#MathJax_Message
{
	display: none;
}

p > span.MathJax nobr:after
{
	vertical-align: bottom;
	content: "";
	height: 1rem;
	display: block;
	float: right;
	margin-bottom: 2rem;
}

span.MathJax, div.MathJax_Display
{
	page-break-inside: avoid;
	break-inside: avoid;
	position: relative;
}

.content img
{
	border-radius: var(--radius);
}

a img
{
	border: none;
}

img.inline
{
	max-width: 100%;
}

img.left
{
	clear: left;
	float: left;
	margin-right: var(--gap);
	max-width: 50%;
}
img.right
{
	clear: right;
	float: right;
	margin-left: var(--gap);
	max-width: 50%;
}

img.left.small,
img.right.small
{
	max-width: 25%;
}

img.left.medium,
img.right.medium
{
	max-width: 33%;
}

a.customwidthimg:has(img.left),
span.customwidthimg:has(img.left)
{
	float: left;
	margin-right: var(--gap);
}

a.customwidthimg:has(img.right),
span.customwidthimg:has(img.right)
{
	float: right;
	margin-left: var(--gap);
}

img.leftblock
{
	display: block;
	margin-right: auto;
}

img.rightblock
{
	display: block;
	margin-left: auto;
}

img.center
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.small, img.center.small
{
	max-width: 50%;
}

img.medium, img.center.medium
{
	max-width: 75%;
}

.alt.text.preview
{
	font-size: 0.8rem;
}

table.center
{
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	overflow: auto;
	width: intrinsic;
	width: -moz-fit-content;
	width: fit-content;
}

table.right
{
	float: right;
	display: block;
	margin: 0.5rem 0rem 0.5rem 0.5rem;
}
table.left
{
	float: left;
	display: block;
	margin: 0.5rem 0.5rem 0.5rem 0rem;
}
td.center, tr.center, th.center, p.center {
	text-align: center;
}
td.left, tr.left, th.left {
	text-align: left;
}
td.right, tr.right, th.right {
	text-align: right;
}

span.wider
{
	letter-spacing: 0.1em;
}
span.right
{
	max-width: 48%;
	max-width: calc(50% - 0.5rem);
	float: right;
	margin: 0.5rem 0.0rem 0.2rem 0.5rem;
}
span.right.small, span.left.small
{
	max-width: 25%;
}
span.right.medium, span.left.medium
{
	max-width: 40%;
}
span.medium
{
	display: block;
	max-width: 75%;
}
span.small
{
	display: block;
	max-width: 50%;
}

span.left
{
	max-width: 48%;
	max-width: calc(50% - 0.5rem);
	float: left;
	margin: 0.5rem 0.5rem 0.2rem 0.0rem;
}

span.leftblock
{
	display: block;
	text-align: left;
}
span.rightblock
{
	display: block;
	text-align: right;
}

span.center
{
	display: block;
	text-align: center;
}
span.center.medium
{
	max-width: 75%;
	margin-left: auto;
	margin-right: auto;
}
span.center.small
{
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

span.right img.inline,
span.left img.inline
{
	max-width: 100%;
	border-radius: var(--radius);
}

table img,
table img.inline,
table img.left,
table img.right
{
	max-width: 10rem;
	vertical-align: middle;
}

@media all and (min-width:59rem) { table img, table img.inline, table img.left, table img.right { max-width: 20rem; max-width: min(20rem, 100%); } }
@media all and (max-width:60rem) { table img, table img.inline, table img.left, table img.right { max-width: 15rem; max-width: min(15rem, 100%); } }
@media all and (max-width:45rem) { table img, table img.inline, table img.left, table img.right { max-width: 10rem; max-width: min(10rem, 100%); } }
@media all and (max-width:35rem) { table img, table img.inline, table img.left, table img.right { max-width: 7rem; max-width: min(17rem, 100%); } }
@media all and (max-width:25rem) { table img, table img.inline, table img.left, table img.right { max-width: 5rem; max-width: min(5rem, 100%); } }

table span.center.small,
table span.right img.inline,
table span.left img.inline,
table span.right.medium,
table span.left.medium
{
	max-width: 5rem;
}

iframe
{
	max-width: 100%;
	max-height: 80vh;
	box-sizing: border-box;
}

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

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

.main > .externalfile.preview:first-child
{
	margin-top: var(--gap);
}

.externalfile.preview
{
	text-align: center;
}
.recordedaudiofile.preview
{
	text-align: left;
}
.externalfile.preview img,
.externalfile.preview video,
.externalfile.preview audio
{
	max-width: 100%;
}

.externalfile.preview img
{
	box-shadow:  0 0 1rem #0002;
}

.externalfile.preview video
{
	max-height: 70vh;
	width: 100%;
}

main.sitemap .sitemap.tree li > .item > a
{
	text-decoration: none;
}

main.sitemap .sitemap.tree li > .item > a:hover
{
	text-decoration: underline;
}

main.sitemap .sitemap.tree li.toplevel > .item > a:first-child
{
	font-weight: 700; /* slighly bolder than default bold text looks nicer */
}


.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;
	text-decoration: none;
}

.sitemap ul li a.label:hover
{
	text-decoration: underline;
}

.sitemap li.customprivacy > a.label:link,
.sitemap li.customprivacy > a.label:visited,
.sitemap li.customprivacy > a.label,
.sitemap li.extendedprivacy > a.label:link,
.sitemap li.extendedprivacy > a.label:visited,
.sitemap li.extendedprivacy > a.label
{
	color: var(--themetextcolor);
	background: #ddd;
}

.customprivacy .label img,
.extendedprivacy .label img
{
	height: 0.8rem;
}

.customprivacy .label em,
.extendedprivacy .label em
{
	padding-left: 0.4rem;
}

/* "Loading..." THROBBER */
.throbber
{
	position: fixed;
	width: 200px;
	margin-left: -100px;
	height: 1.3rem;
	margin-top: -20px;
	top: 33%;
	left: 50%;
	padding: 0.15rem 0.25rem 0.30rem 0.25rem;
	background: #eee;
	border: solid #777 1px;
	vertical-align: middle;
	text-align: center;
	box-shadow: 0 0 1rem #fff;
	box-shadow: 0 0 1rem #fff, 0 0 3rem #fff;
}
.throbber *
{
	vertical-align: middle;
}
.throbber img
{
	padding-right: 0.25rem;
	position: relative;
	top: -0.1rem;
}

p.centered
{
	text-align: center;
}
.editor.red
{
	color: #ff0000;
}
.editor.underline
{
	text-decoration: underline;
	text-decoration-skip: ink;
}
.editor.italic
{
	font-style: italic;
}
.editor.bold
{
	font-weight: bold;
}

div.gallery
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.gallery ul,
.gallery li
{
	margin: 0;
	padding: 0rem;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.gallery li
{
	padding: 0.5rem;
	list-style: none;
	min-width: 160px;
}

.gallery.centered
{
	text-align: center;
}

div.galleriaviewer
{
	height: 80vh;
	width: 100%;
	visibility:hidden;
}

.galleria-container *
{
	touch-action: pan-y;
}

.galleria-fscr
{
	width:60px;
	height:60px;
	position:absolute;
	top:0px;
	right:0px;
	background: url("icon/fullscreen_white.svg");
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: top right;
	z-index: 1;
	cursor: pointer;
	opacity: 0.3;
}

.galleria-fscr:hover
{
	opacity: 1;
}

.galleria-container.fullscreen .galleria-fscr
{
	background: url("icon/fullscreen_exit_white.svg");
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: top right;
}

article.submissionfolder > .main > ul.actions,
article.submissionfolder > .main > ul.actions > li
{
	padding: 0;
	margin: 0;
}

article.submissionfolder > .main > ul.actions > li > a
{
	display: block;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.buttonslist.submissions .button::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}
.buttonslist.submissions .file::before,
ul.responsesummary .commonexternalfileattachment .overview .title::before
{
	content: "\f1c5"; /* file-image */
}
.buttonslist.submissions .entry::before,
ul.responsesummary .blogentry .overview .title::before
{
	content: "\f15c"; /* file-text */
}
.buttonslist.submissions .link::before,
ul.responsesummary .link .overview .title::before
{
	content: "\f0c1"; /* link */
}

.buttonslist.submissions .recordvoice::before,
ul.responsesummary .commonrecordedaudiofile .overview .title::before
{
	content: "\f130"; /* microphone */
}

audio.recordedaudio
{
	height: 2.2rem;
}

.submissionfolder .description + div.buttons
{
	margin-top: 1rem;
	border-top: solid var(--hairlinecolordark) var(--hairlinewidth);
}

div.assignment.submission.list li
{
	list-style-type: none;
}
div.assignment.submission.list li > span
{
	font-size: 0.8rem;
}

.submission.list > ul
{
	border: solid rgba(0,0,0,0.3) 0.1rem;
	border-radius: 0.1rem;
	margin: 0.25rem;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	background: #fff;
	color: #000;
}

.submission.list > ul + ul
{
	margin-top: 0.5rem;
}

table.submissionfolder.responses.summary,
table.form.responses.summary
{
	width: 100%;
}

table.submissionfolder.responses.summary td:first-child,
table.form.responses.summary td:first-child
{
	width: 100%;
}

table.submissionfolder.responses.summary td div.actions,
table.form.responses.summary td div.actions
{
	 white-space: nowrap;
}

ul.forumreplies
{
	list-style: none outside none;
	padding-left: 1.5rem;
}

.forumreply.content time
{
	float: right;
	max-width: 100%;
}
article.document.reply
{
	padding: 0.8rem;
}

details,
summary
{
	display: block;
	outline: none;
}
summary
{
	display: list-item;
} /* anything but list-item breaks Firefox native implementation (Firefox 49) */

details summary
{
	user-select: none;
}

details summary:focus
{
	text-decoration-skip-ink: auto;
	text-decoration-skip-ink: all;
}
details summary:active
{
	background-color: var(--buttonbackgroundactive);
}

details
{
	margin-top: var(--gap);
	border: solid var(--hairlinewidth) var(--themesubduedforeground);
	border-radius: var(--radius);
}

details.page-toc
{
	margin-bottom: 1rem;
}

/*
	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(--biggap);
	margin-bottom: var(--biggap);
}

details.open > summary,
details[open] > summary
{
	margin-left: calc( -1 * var(--gap));
	margin-right: calc( -1 * var(--gap));
	margin-bottom: 0.5rem;
}

/* Apply a pointer cursor and style the background upon hover to indicate <summary> is a clickable element. */
/* These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }

/* HTML5 <details> polyfill styles */
.details-polyfill summary:hover { text-decoration: underline; text-decoration-skip: ink; }

/* The style for IE8 (does not support triangle pointing to right or ::before syntax) */
.details-polyfill details > summary:before { float: left; width: 1.25rem; content: '►'; position: relative; left: 0.25rem; opacity: 0.8; }
/* The style for newer browsers, that support ::before syntax */
.details-polyfill details > summary::before { float: left; width: 1.25rem; content: '▶'; position: relative; left: 0.25rem; opacity: 0.8; }
.details-polyfill details.open > summary:before { content: '▼'; }
.details-polyfill summary { list-style-type: none; }

/* custom Peda.net style for details summary */

details > summary:after
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-left: calc(0.25 * var(--gap));
	content: "\f078";
	font-size: 1.2rem;
	position: absolute;
	top: 50%;
	margin-top: -1.5rem;
	line-height: 3rem;
	right: 1rem;
}

details[open] > summary:after
{
	content: "\f077";
}

details > summary
{
	position:relative;
	box-shadow: var(--buttonboxshadow);
	border-radius: var(--radius);
	padding: calc(0.5 * var(--gap)) 1rem;
	display: block;
	padding-right: 3rem; /* avoid rendering text over down arrow symbol */
	list-style: none; /* hide the UA default triangle */
}

details > summary:hover
{
	color: var(--reversethemeforeground);
	background-color: var(--buttonbackgroundhover);
}

details > summary h1,
details > summary h2,
details > summary h3
{
	color: var(--themeforeground);
	font-weight: normal;
	display: inline-block;
	padding: 0;
	margin: calc(0.5 * var(--gap)) 0;
}

details > summary:hover h1,
details > summary:hover h2,
details > summary:hover h3
{
	color: var(--reversethemeforeground);
}

details > summary h1
{
	font-size: 1.5rem;
}
details > summary h2
{
	font-size: 1.125rem;
}
details > summary h3
{
	font-size: 1.15rem;
}

/* for course Apple Safari has special way to surpress the triangle... */
details > summary::-webkit-details-marker,
details > summary::marker
{
	display:none;
}

details.open,
details[open]
{
	box-shadow: var(--buttonboxshadow);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	padding-top: 0;
}

details.open > summary,
details[open] > summary
{
	box-shadow: none;
}

details.open > summary,
details[open] > summary,
details.open > summary:focus,
details[open] > summary:focus
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: solid var(--hairlinewidth) #ddd;
}

/* custom focus styles for keyboard users */
details > summary:focus
{
	box-shadow: var(--focusboxshadow);
	border-radius: var(--radius);
}

/* custom focus styles for mouse users */
details > summary:focus:not(:focus-visible),
details > summary:focus:not(:focus-visible)
{
	box-shadow: var(--buttonboxshadow);
}

details.open > summary:focus:not(:focus-visible),
details[open] > summary:focus:not(:focus-visible)
{
	box-shadow: none;
}

/* personmenu start */

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

#personmenutoggle
{
	margin-right: var(--gap);
}

#personmenutoggle img
{
	transition: transform 0.25s ease-out;
	transform: rotate(0deg);
	filter: var(--themefilter);
}

#personmenutoggle:hover img
{
	transform: rotate(90deg);
}

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

/* person menu toggle button */
div.loginlogout > span.personmenu
{
	height: 2rem;
	width: 2rem;
	opacity: var(--opacity-nonessential);
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
}

div.loginlogout > span.personmenu img
{
	vertical-align: initial;
}

div.loginlogout > span.personmenu:hover
{
	opacity: 1;
}

nav.personmenu > *
{
	box-sizing: border-box;
	width: var(--menuwidth);
	width: max(100%, calc(var(--menuwidth) - 3rem)); /* HACK: we really would want var(--menuwidth) minus the width of scrollbar if one exists but this is the closest that can be emulated with current browsers */
}

nav.personmenu
{
	grid-area: globalnav;
	grid-row-end: rmargin-end;
	justify-self: right;
	overflow-anchor: none;
	position: -webkit-sticky; /* Note! iOS 12 does not support `sticky` but it supports `-webkit-sticky` which mostly works */
	position: sticky;
	height: calc(100vh - 4rem);
	box-sizing: border-box;
	top: 4rem;
	display: block;
	width: 0; /* will be animated to correct amount when menu is open */
	overflow-y: auto;
	overflow-x: hidden; /* we need to overflow the children so that animation looks good */
	transition: width 0.3s ease-out;
	background: var(--thememenubackground);
	color: var(--thememenuforeground);
	font-size: 0.9rem;
	box-shadow: none;
}

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

nav.personmenu img.icon
{
	width: var(--personmenu-icon-size);
	height: var(--personmenu-icon-size);
	box-shadow: none;
}

body.personmenuopen nav.personmenu
{
	z-index: 20;
	width: var(--menuwidth);
	box-shadow: var(--boxshadow);
}

nav.personmenu .section
{
	padding: 0;
}

nav.personmenu :link,
nav.personmenu :visited
{
	border-radius: 0;
}

nav.personmenu > .section:not(:first-child)
{
	border-top: solid var(--personmenu-effect-color) 0.05rem;
}

nav.personmenu h1
{
	text-transform: uppercase;
	padding: 0 var(--personmenu-gap);
	font-size: 0.7rem;
	margin: 0.3rem 0;
	letter-spacing: 0.04rem;
}

nav.personmenu .item a,
nav.personmenu .item a:link,
nav.personmenu .item a:visited,
nav.personmenu .item a:active
{
	color: var(--personmenu-link-color);
	display: block;
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
	text-decoration: none;
	border-radius: 0;
}

nav.personmenu .messages a
{
	display: contents;
}

nav.personmenu .item a > img + span,
nav.personmenu button > img + span
{
	margin-left: 0.5rem;
}

nav.personmenu .item a:hover,
nav.personmenu .item a:focus,
nav.personmenu .locale ul.languages li:hover,
nav.personmenu .locale ul.languages li:focus
{
	background-color: var(--personmenu-highlight-color);
	color: #fff;
	cursor: pointer;
}

nav.personmenu .item a:hover img.icon.static,
nav.personmenu .item a:focus img.icon.static,
nav.personmenu .locale ul.languages li:hover img.icon.static,
nav.personmenu .locale ul.languages li:focus img.icon.static
{
	filter: brightness(0) invert(1);
}

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

nav.personmenu > div.section.logout:not(.extended) > .othersessions,
nav.personmenu > div.section.locale:not(.extended) > div.change
{
	display: none;
}

/* personmenu logout */

nav.personmenu button img
{
	vertical-align: top;
}

nav.personmenu button span
{
	vertical-align: sub;
}

nav.personmenu h1
{
	margin: 0;
	padding: calc(0.5 * var(--gap));
}

nav.personmenu .currentsession form
{
	display: flex;
}

nav.personmenu .currentsession form button
{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

nav.personmenu .currentsession #logouttoggle
{
	display: flex;
	width: 3rem;
	align-items: center;
	justify-content: center;
}

nav.personmenu .currentsession #logouttoggle:hover,
nav.personmenu .currentsession #logouttoggle:focus
{
	color: var(--personmenu-highlight-color);
	background-color: var(--personmenu-highlight-color);
}

nav.personmenu .currentsession #logouttoggle:hover img,
nav.personmenu .currentsession #logouttoggle:focus img
{
	filter: brightness(0) invert(1);
}


nav.personmenu .logout .currentsession button
{
	box-shadow: none;
	background-image: none;

	border: none;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	box-shadow: none;
	margin: 0;
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
	border-radius: 0;
}

nav.personmenu .logout .currentsession button:hover,
nav.personmenu .logout .currentsession button:focus,
nav.personmenu .logout .currentsession button:active
{
	color: var(--personmenu-highlight-color);
	color: #fff !important;
	background: #fff;
	background-image: none !important;
	background-color: #fff !important;
	background-color: var(--personmenu-highlight-color) !important;
	box-shadow: none !important;
}

nav.personmenu .logout .currentsession button:hover img.static,
nav.personmenu .logout .currentsession button:focus img.static
{
	filter: brightness(0) invert(1);
}
nav.personmenu .logout .othersessions
{
	padding: var(--personmenu-gap);
}

/* personmenu change locale */

.toggleminimenu > span + img
{
	height: 1.25rem;
	vertical-align: middle;
}

nav.personmenu div.locale
{
	color: var(--personmenu-link-color);
}

nav.personmenu .toggleminimenu
{
	padding: calc(0.5 * var(--gap)) var(--personmenu-gap);
}

nav.personmenu .toggleminimenu:hover,
nav.personmenu .toggleminimenu:focus
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
}

nav.personmenu .toggleminimenu:hover img,
nav.personmenu .toggleminimenu:focus img
{
	filter: brightness(0) invert(1);
}

nav.personmenu div.locale ul.languages > li span
{
	margin-left: 4rem;
	display: block;
	padding: calc(0.5 * var(--gap)) 0;
}

nav.personmenu div.locale ul.languages > li img
{
	display: block;
	position: absolute;
	left: var(--gap);
}

nav.personmenu .toggleminimenu > img + span
{
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* personmenu personal space */
nav.personmenu .ownspace .helpandsupport a > div
{
	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;
}

.dropzone.dz-clickable
{
	border-radius: var(--radius);
}

.rectangle header,
.rectangle .main
{
	padding-top: 0;
	padding-bottom: 0;
}

.rectangle p
{
	margin: 0.5rem 0rem;
}

.dialog.interrupt
{
	margin-bottom: 1rem;
}

.dialogwrapper
{
	position: fixed;
	width: auto;
	height: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	margin: 0;
	padding: var(--gap);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	will-change: opacity;
}

.dialogwrapper.delayshow
{
	animation: fadeinwithdelay 0.9s ease;
}

.dialogwrapper.busy
{
	cursor: wait;
}

.dialogwrapper .dialog
{
	min-width: 40vw;
	box-shadow: var(--boxshadow);
	background: var(--themebackground);
	padding: var(--gap);
	border-radius: var(--bigradius);
	border: solid var(--linewidth) var(--themebackground);
	color: var(--themetextcolor);
	text-align: center;
	cursor: default;
	overflow: auto;
	max-height: 100%;
	box-sizing: border-box;
}

.dialogwrapper.delayshow .dialog
{
	animation: pullup 1.1s ease;
}

.dialog.upload.progress .progressbar.submitting
{
	border: solid var(--linewidth) var(--reversethemebackground);
	border-radius: var(--bigradius);
	padding: var(--linewidth);
	background: var(--reversethemebackground);
}

.dialog.upload.progress .progressbar .indicator
{
	transition: width 1s linear;
}

.dialog.upload.progress .progressbar.submitting .indicator
{
	box-sizing: border-box;
	height: var(--gap);
	border: solid var(--linewidth) var(--reversethemeforeground);
	border-radius: var(--radius);
	background: var(--reversethemeforeground);
	background-size: 3rem 3rem;
	background-image: linear-gradient(-45deg, rgba(170, 170, 170, 0.15) 25%, transparent 25%, transparent 50%, rgba(170, 170, 170, 0.15) 50%, rgba(170, 170, 170, 0.15) 75%, transparent 75%, transparent);
	animation: submitting-progress 1s linear infinite;
}

.dialog.upload.progress .status
{
	white-space: pre-wrap;
	margin-bottom: var(--gap);
}

/* jQuery UI dialog styles: */

.ui-dialog.ui-widget
{
	z-index: 1; /* raise above .ui-widget-overlay which comes in the source order AFTER this element because of jQuery UI braindamage */
}

.ui-widget-overlay
{
	grid-row: globalnav-end / footer-end;
	grid-column: lmargin-start / rmargin-end;
	background-color: var(--modalbackdrop-background-color);
	opacity: var(--modalbackdrop-opacity);
}


a.button:link,
a.button:visited,
a.button,
a.secondarybutton:link,
a.secondarybutton:visited,
a.secondarybutton,
a.primarybutton:link,
a.primarybutton:visited,
a.primarybutton,
a.dangerousbutton:link,
a.dangerousbutton:visited,
a.dangerousbutton,
span.button,
label.button,
button.secondary,
button.primary,
li.button > a
{
	border-style: solid;
	border-width: var(--buttonborderwidth);
	border-radius: var(--buttonradius);
	padding: var(--buttonpadding);
	display: inline-block;
	text-decoration: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-shadow: var(--buttonboxshadow);
	min-height: var(--buttonheight);
	box-sizing: border-box;
}

a.button:link,
a.button:visited,
a.button,
span.button,
label.button,
li.button > a,
button.action
{
	border-color: var(--linkbuttonbackgroundcolor);
	color: #fff;
	background-color: var(--linkbuttonbackgroundcolor);
}

a.secondarybutton:link,
a.secondarybutton:visited,
a.secondarybutton,
.actions.important li.secondary a,
button.secondary
{
	color: var(--reverselinkbackground);
	background-color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);

}

a.primarybutton:link,
a.primarybutton:visited,
a.primarybutton,
button.primary
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);
}

.form + button.primary
{
	margin-top: var(--gap);
}

a.primarybutton:hover,
button.primary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

div.forumreply.link a
{
	padding-left: 1.4em; /* optical adjustment for space between the icon and text */
	background-repeat: no-repeat;
	background-image: url(icon/message.svg);
	background-size: 1.25em 1.25em;
	background-position: 0% 50%;
}

a.button:hover,
label.button:hover,
li.button > a:hover,
button.action:hover
{
	color: #fff;
	background-color: var(--linkbuttonbackgroundcolorhover)
}

a.secondarybutton:hover,
.actions.important li.secondary a:hover,
button.secondary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

a.button:active,
label.button:active,
li.button > a:active,
button.action:active
{
	color: #fff;
	border-color: var(--linkbuttonbackgroundcolor);
	background-color: var(--linkbuttonbackgroundcoloractive);
}

button.secondary:active,
a.primarybutton:active,
a.secondarybutton:active
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundactive);
}


button.secondary:focus,
a.primarybutton:focus,
a.secondarybutton:focus
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundfocus);
}

a.button:focus:not(.submitting),
li.button > a:focus:not(.submitting)
{
	box-shadow: var(--hoverboxshadow), var(--focusboxshadow);
	outline: none;
}

button.btn-icon,
a.btn-icon:link,
a.btn-icon:visited,
a.btn-icon
{
	width: var(--buttonheight);
	height: var(--buttonheight);
	padding: 0.5rem;
	text-align: center;
}

.btn-icon::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
}

.btn-icon.changeimage::before
{
	content: "\f030";
}

.btn-icon.download::before
{
	content: "\f019";
}

.btn-icon > span
{
	display: none;
}

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

input.s.dangerous,
button.dangerous,
a.dangerousbutton:link,
a.dangerousbutton:visited,
a.dangerousbutton
{
	color: #fff;
	background: #C82038;
	border-color: #C82038;
}

input.s.dangerous:hover,
button.dangerous:hover,
a.dangerousbutton:hover
{
	color: #fff;
	background: #b21c32;
}

input.s.dangerous:focus,
button.dangerous:focus,
a.dangerousbutton:focus
{
	color: #fff;
	background: #9c192c;
}

input.s.dangerous:active,
button.dangerous:active,
a.dangerousbutton:active
{
	color: #fff;
	background: #861526;
}

.formcontext
{
	margin-top: 0.5rem;
}

iframe.etherpad
{
	border: 1px solid #aaa;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	border-radius: 0.1rem;
	-webkit-background-clip: padding-box; /* http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed */
	height: 70vh;
}



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

.regglyph:before
{
	font-family: var(--fontawesome);
	display: inline-block;
	width: 1rem;
	margin-right: 0.3rem;
}

.calendar-container .regglyph:before
{
	margin: 0 0.125rem;
	font-size: 0.8rem; /* use slightly smaller icon to make four events visible in a day */
	vertical-align: text-bottom;
}

.calendarmodule .agenda .regglyph:before
{
	width: 1.3rem;
}

.regglyph.open:before
{
	content: "\f234"; /* user-plus */
}
.regglyph.later:before
{
	content: "\f4fd"; /* user-clock */
}

.regglyph.registered:before
{
	content: "\f4fc"; /* user-check */
}

.regglyph.full:before,
.regglyph.closed:before
{
	content: "\f406"; /* user-large */
}

.onlyjs,
.jshidden
{
	display: none !important;
}

div.ui-dialog
{
	position: absolute;
	background-color: #fff;
	padding: var(--gap);
	border: 0.1rem solid #000;
}
div.ui-dialog .message
{
	padding-top: 1rem;
}

noscript.analytics
{
	display: none;
}

img.noscript.analytics
{
	border: none;
	opacity: 0.05;
	height: 1px;
	width: 1px;
	position: absolute;
	left: -1px;
}

div.agenda
{
	padding-top: 1rem;
}

article.calendar.agenda article.item > footer > div
{
	border-top: none;
}

article.agenda article.item h1 time.calendarevent
{
	white-space: normal;
}

article.agenda > .main > article
{
	padding: 0.5rem 1.0rem 0rem 1rem;
}

div.viewevent.source,
li.viewevent.attachment
{
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
}

table.registrations dt.question
{
	opacity: var(--opacity-nonessential);
	font-size: 0.9rem;
}
table.registrations dd.answer
{
	margin-left: 1rem;
}
table.registrations dl.responses
{
	margin-top: 0;
	margin-bottom: 0;
}

/* Event Module */

.event.module > .main > article
{
	margin: calc(-1.0 * var(--gap));
	padding: calc(1.0 * var(--gap));
}

.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
{
	margin: calc(0.5 * var(--gap)) 0;
	margin-right: var(--biggap);
}

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

footer.page .logo a
{
	display: flex;
}


footer.page .logo img
{
	height: 5.5rem;
}

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-type: none;
	padding: 0;
	margin-bottom: 0;
}

ul.registration li + li
{
	margin-top: 1rem;
}

ul.registration li a.button
{
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 3rem;
	padding: 1.5rem;
	font-size: 1.2rem;
	border-radius: 0.75rem;
	text-align: center;
}

.registration a span.buttontext
{
	line-height: 1.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	flex: 1;
	white-space: normal;
}

.registration i.fa
{
	display: inline-block;
	font-size: 5rem;
	position: relative;
	line-height: 1;
}

.icongroup .fa
{
	color: #eee;
}

.icongroup .fa.primaryicon
{
	color: #002b54;
}

.registration .icongroup .fa.primaryicon
{
	font-size: 4rem;
}

.registration .icongroup .fa + .fa
{
	margin-left: -1rem;
}

.fa-male:before
{
	content: "\f183";
}

.fa-child:before
{
	content: "\e59d";
}

ul.registration li.connect a,
ul.registration li.register a
{
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.5rem;
	padding: 1.5rem;
	font-size: 1.2rem;
	border-radius: 0.75rem;
	text-align: center;

	padding-left: 8rem;
	background-repeat: no-repeat;
	background-size: auto 5rem;
	background-position: 1.5rem 50%;
}

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: #002b54;
}

ul.registration li a:visited:hover
{
	color: #fff;
}

span.bold
{
	font-weight: bold;
}

ul.languages, ul.timezones
{
	list-style: none;
	padding: 0;
}
article.systemrootservice.login.page.dialog div.main ul.languages.login.list
{
	text-align: center;
}

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

.iconcluster > div
{
	margin-right: -1.5rem;
	display: inline-block;
}

.iconcluster > div:last-child
{
	margin-right: 0rem;
}

.subscriptions .iconcluster div.contenttype img
{
	background-color: var(--themebackground); /* images may be transparent, add background color */
	object-fit: contain;
	box-shadow: var(--buttonboxshadow);
	border: solid var(--hairlinewidth) var(--hairlinecolor);
}

.subscriptions ul.notifications
{
	padding: 0;
}
.subscriptions li.notification
{
	display: flex;
	padding: calc(0.5 * var(--gap));
	gap: calc(0.5 * var(--gap));
}

.subscriptions li.notification .iconcluster
{
	flex-shrink: 0;
	min-width: calc(2 * var(--icon-size) - 0.9rem); /* reserve always space for two overlapping icons */
}

.subscriptions li.notification .additional
{
	display: block;
	opacity: 0.8;
	font-size: 0.8rem;
}

.subscriptions li.notification .additional .page:before
{
	content: "/";
}

.subscriptions li.notification .servicesinfo.calendarmodule
{
	margin-left: var(--gap);
	font-size: 0.8rem;
}

.subscriptions li.notification .servicesinfo.calendarmodule .event
{
	margin-top: var(--gaphalf);
}

.subscriptions li.notification .servicesinfo.calendarmodule .event time
{
	display: block;
	white-space: normal;
}

.subscriptions li.notification.timegroup1
{
	background-color: var(--notification-unread-background);
}

.subscriptions .markasread
{
	margin: 0;
}
.subscriptions .markasread::before
{
	content: "\f00c";
	font-family: var(--fontawesome);
	font-weight: 900;
}

.subscriptions .markasread > span
{
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.subscriptions li.notification + li.notification
{
	border-top: var(--hairlinewidth) solid var(--hairlinecolor);
}

.subscriptions li.notification .details
{
	flex-grow: 1;
}

.modifysubscriptions ul.subscriptions
{
	padding: 0;
}

.modifysubscriptions ul.subscriptions > li
{
	display: flex;
	justify-content: space-between;
	padding: calc(0.5 * var(--gap)) 0 calc(0.5 * var(--gap))  calc(0.5 * var(--gap));
}

.modifysubscriptions ul.subscriptions > li.selected
{
	background-color: #f1f1f1;
}

.modifysubscriptions ul.subscriptions > li.selected > .label,
.modifysubscriptions ul.subscriptions > li:not(.selected) .fa
{
	display: none;
}

.modifysubscriptions ul.subscriptions > li.hover
{
	background-color: #ddd;
}

.modifysubscriptions ul.subscriptions > li input.removesubscription
{
	/* override default values */
	border: none;
	top: 0;
}

.modifysubscriptions ul.subscriptions > li input.removesubscription::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f2ed"; /* trash-can */
	font-size: 1.2rem;
}

.modifysubscriptions ul.subscriptions > li input.removesubscription:checked
{
	color: var(--themeforeground);
	background: transparent;
}

.modifysubscriptions ul.subscriptions > li input.removesubscription:checked::before
{
	content: "\f2ea"; /* rotate-left */
}

.modifysubscriptions ul.subscriptions > li input.removesubscription:checked:after
{
	content: "";
	width: 0; /* override default */
	padding-left: 0; /* override default */
}

.modifysubscriptions ul.subscriptions > li .fa-trash-can:before
{
	padding-right: 0.8rem;
	color: #999;
	font-size: 1.2rem;
}

.modifysubscriptions ul.subscriptions > li .label
{
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(0.25 * var(--gap));
}

.serviceinfo .subscriptionpage
{
	display: block;
	text-align: right;
}

.serviceinfo .subscriptionpage:before
{
	content: "/";
}

ul.pagethumbnails
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: var(--biggap);
	grid-row-gap: var(--biggap);
	margin-top: 0;
	padding: 0;
}

ul.pagethumbnails.dense
{
	grid-template-columns: repeat(3, 1fr);
}

/* 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
{
	position: relative;
	list-style: none;
	background-color: var(--pagethumbnail-background-color);
	border-radius: var(--buttonradius);
	padding: 0;
	margin: 0;
}

.thumbnail-banner
{
	border-radius: var(--buttonradius) var(--buttonradius) 0 0;
}
.thumbnail-banner > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--buttonradius) var(--buttonradius) 0 0;
}
.pagethumbnaildropdownmain
{
	position: absolute;
	top: calc(var(--pagethumbnail-banner-height) - var(--buttonheight) - 1rem); /* position menu at left bottom corner */
	left: 1rem;
}

.pagethumbnails.dense .pagethumbnaildropdownmain
{
	top: calc(var(--pagethumbnail-banner-height-dense) - var(--buttonheight) - 1rem); /* position menu at left bottom corner */
}

li.pagethumbnail a:hover
{
	box-shadow: var(--hoverboxshadow);
}

li.pagethumbnail a
{
	display: block;
	text-decoration: none;
	border-radius: var(--buttonradius);
	height: 100%; /* make sure the link fills the whole parent li element */
}

li.pagethumbnail .thumbnail-banner
{
	display: block;
	height: var(--pagethumbnail-banner-height);
	background-size: cover;
}

.pagethumbnails.dense li.pagethumbnail .thumbnail-banner
{
	height: var(--pagethumbnail-banner-height-dense);
}

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;
}
/* using min-width and -height because Samsung touchscreen devices want to pretend they have mouse. Other devices work fine with media hover */
@media (hover: hover) and (min-width: 31rem) and (min-height: 31rem)
{
	.pagethumbnaildropdownmain
	{
		display: none;
	}

	ul.links > li .dropdown
	{
		visibility: hidden;
	}

	li.pagethumbnail:hover .pagethumbnaildropdownmain
	{
		display: block;
	}

	ul.links > li:hover .dropdown
	{
		visibility: visible;
	}

	.icondropdownmain
	{
		display: none;
	}

	.profilecard:hover .icondropdownmain
	{
		display: block;
	}

	.subscriptions li.notification .markasread
	{
		visibility: hidden;
	}

	.subscriptions li.notification:hover .markasread
	{
		visibility: visible;

	}
}

@media all and (max-width:48rem)
{
	section.login
	{
		display: grid;
		grid-template-columns: repeat(auto-fit, 100%);
		gap: var(--biggap);
	}

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

div.spleopen
{
	margin-top: 0.5rem;
}
div.mce-container-body.mce-abs-layout.warning
{
	background: #FFFF00 none repeat scroll 0 0;
	text-align: center;
}

.refresh.btn-icon:before
{
	content: "\f2f9"; /* rotate-right */
}

.metadata
{
	word-break: break-word;
}

div.meta-table-row
{
	display: flex;
	border-bottom: solid var(--hairlinecolor) var(--hairlinewidth);
	flex-wrap: wrap;
}
div.meta-table-row.tworows > div.meta-table-cell
{
	flex-basis: 100%;
}
div.meta-table-row > div.meta-table-cell:first-child
{
	min-width: 7.6rem;
	font-size: 0.8rem;
	opacity: var(--opacity-nonessential);
	padding-left: calc(0.5 * var(--gap));
}
div.meta-table-cell
{
	padding: 0.2rem 0.5rem 0.2rem 0;
}
div.meta-table-cell span.cell-author-id
{
	font-size: 0.8rem;
}
html.deleted .enclose.page main
{
	background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #aaa, #aaa 10px, #ccc 10px, #ccc 20px) repeat scroll 0 0;
}

.ui-dialog-buttonset button.ui-button + button.ui-button
{
	margin-left: 0.5rem;
}


/* links with special icons */

a.responses:before
{
	content: "";
	display: inline-block;
	background-image: url("icon/response.svg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 0.8rem 0.8rem;
	opacity: var(--opacity-nonessential);
	width: 0.8rem;
	height: 0.8rem;
	margin-right: 0.5rem;
	vertical-align: baseline;
}


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

div.more span.more
{
	background-image: url("icon/more-vertical.svg");
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: 1.5rem auto;
	padding: 0.1rem 0.3rem 0.1rem 1.5rem;
	display: inline-block;
}

div.more span.more a
{
	color: #000;
	text-decoration: none;
}

div.more span.more a:hover
{
	text-decoration: underline;
}

ul.showall
{
	padding-left: 1em;
}

ul.showall li
{
	list-style-type: none;
}

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

.graphradiobutton,
.graphcheckbox
{
	cursor: pointer;
}

.graphradiobutton input[type=radio]
{
	display:none;
}

#mc-topbar-container, #mc-toast-container, #mc-download-overlay-container, #mc-sidebar-container
{
	display: none !important;
}

.frontpage .actions.alerts.active > span
{
	margin-left: 0.5rem;
	background-color: #a00;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	color: #fff;
	border-radius: 50%;
	text-align: center;
}

.frontpage .actions.alerts.active > span:before
{
	display: inline;
	content: "1";
}

.privacy button.createjoincode
{
	font-size: 0.8rem;
	padding: 0.4rem 0.9rem;
}

.privacy > summary .draft
{
	margin-left: calc(0.5 * var(--gap));
}

nav.privacy.content.actions
{
	display: inline-flex;
}

.actions.important .joinsettings a:visited,
.actions.important .joinsettings a:link,
.actions.important .joinsettings a
{
	color: #000;
	font-weight: 400;
	background-color: transparent;
	padding:  0.25rem 0.5rem 0.25rem 1.8rem;
}

.joincodewrapper
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin: -0.5rem calc(-1 * var(--gap)) 0; /* use negative margins to fill background from the borders of details element */
}

.joincodewrapper #currentjoincode
{
	min-width: 10rem;
	text-align: center;
	padding: 0;
}

.joincodewrapper button
{
	background-color: transparent;
	color: #000;
	border: none;
	box-shadow: none;
	font-size: 1rem;
	font-weight: 400;
}

.joincodewrapper nav.actions.privacy
{
	display: inline-flex;
}

.joincodewrapper div.actions,
.joincodewrapper #joincode
{
	display: flex;
	column-gap: calc(0.5 * var(--gap));
	flex-wrap: wrap;
}

.joincodewrapper button:hover:not(.disabled)
{
	box-shadow: none;
	text-decoration: underline;
	background-color: transparent;
}

.joincodewrapper .joincodelink
{
	word-wrap: break-word;
}

.joincodewrapper button
{
	padding: 0.25rem 0.5rem;
	font-size: 0.8rem;
}

.joincodewrapper button:before
{
	font-family: var(--fontawesome);
	margin-right: 0.3rem;
}

.joincodewrapper button.renew:before
{
	content: "\f2f9"; /* rotate-right */
}
.joincodewrapper button.copy:before
{
	content: "\f0c5"; /* copy */
}
.joincodewrapper button.remove:before
{
	content: "\f00d"; /* xmark */
}

.joincodedata.reset #joincode,
.joincodedata.reset #joincodelink
{
	opacity: var(--opacity-nonessential);
}
.joincodedata #joincode
{
	font-size: 1.5rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1rem;
}

ul.simple
{
	list-style-type: none;
}

div.username > label .popovertoggle
{
	margin-right: -3rem; /*ugly hack instead of redoing translations for login inputs*/
}
.popovertoggle
{
	cursor: pointer;
	color: var(--themeforeground);
	padding: 0 calc(1.5 *var(--gap)) 0 calc(0.5 * var(--gap)); /* reserve empty space more on right side to make toggle look nicer but keep width 48px to fullfill accessibility */
}

.popovertoggle:hover
{
	color: var(--themetextcolor);
}

.popovertoggle::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f059";
}

.select-field .select {
	padding-right: 2rem;
	line-height: 2.75;
}
select.select
{
	display: block;
	height: calc(2.25rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--themetextcolor);
	background-color: var(--themebackground);
	background-clip: padding-box;
	border: var(--forminputborderlinewidth) solid var(--forminputbordercolor);
	border-radius: var(--buttonradius);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

select.select:disabled
{
	background: #f1f1f1;
	cursor: not-allowed;
}

.actions li a.disabled,
a.disabled
{
	color: var(--linkcolordisabled);
	cursor: not-allowed;
	opacity: 1;
	filter: unset;
}

div[data-chartsaasummarymodal] > .modal-dialog .chartsaasummarycontainer
{
	display: grid;
	grid-template-rows: min-content;
	grid-template-columns: max-content;
	grid-template-areas:"canvas";
}

.chartsaasummarycontainer > canvas
{
	grid-area: canvas;
}


/*Moodmeter*/
.moodmetersummarycontainer
{
	position: relative;
}

div.moodmetersummarytext
{
	float: right;
}

div.moodmeterfooter > a
{
	text-decoration: none;
}

button.moodmeter
{
	background: transparent;
	border: none;
	box-shadow: none;
}

div.radiogroup > label > input[name="moodmetercustomnumber"]
{
	margin-left: 0;
	margin-right: 0.5rem;
}

button.moodmeter i
{
	font-family: var(--fontawesome);
	font-size: 4rem;
	font-style: normal;
}

button.moodmeter.smiley0 i::before
{
	color: #cf3017;
	content: "\f119";
}

button.moodmeter.smiley1 i::before
{
	color: #FF7651;
	content: "\f57a";
}

button.moodmeter.smiley2 i::before
{
	color: #EED70E;
	content: "\f11a";
}

button.moodmeter.smiley3 i::before
{
	color: #60C054;
	content: "\f118";
}

button.moodmeter.smiley4 i::before
{
	color: #21891f;
	content: "\f599";
}

/*Keep this last unless you want to make selector even more strict*/
button.moodmeter.moodmetershowmarker
{
	box-shadow: var(--boxshadow);
}

button.moodmeter.moodmetershowmarker i::before
{
	color: #21891f;
	content: "\f00c";
}

button.moodmeter.moodmetershowmarker.moodmetererror i::before
{
	color: #cf3017;
	content: "\f05e";
}

aside .moodmetermodule .main form > button.moodmeter
{
	width: 100%;

}

aside .moodmetermodule .main form > button.moodmeter i
{
	font-size: 3rem;
}

aside button.moodmeter
{
	background: var(--themefooterbackground);
}

.triggertogglemoodmeterchart > span::after,
.triggertogglemoodmeterchart > label::after
{
	font-family: var(--fontawesome);
	margin: calc(0.5 * var(--gap));
	font-size: 1.2rem;
}

.triggertogglemoodmeterchart > span::after
{
	content: "\e0e3";
	cursor: pointer;
}

.triggertogglemoodmeterchart > label::after
{
	content: "\f201";
}

canvas.moodmetersummary
{
	min-height: 30rem;
}

.tippy-box
{
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	font-size: 0.9rem;
	box-shadow: var(--boxshadow);
	border-radius: var(--radius);
}
.tippy-box[data-placement=right] > .tippy-arrow:before
{
	border-right-color: var(--reversethemebackground);
}
.tippy-box[data-placement=top] > .tippy-arrow:before
{
	border-top-color: var(--reversethemebackground);
}
.tippy-box[data-placement=bottom] > .tippy-arrow:before
{
	border-bottom-color: var(--reversethemebackground);
}
.tippy-box[data-placement=left] > .tippy-arrow:before
{
	border-left-color: var(--reversethemebackground);
}
.tippy-box > .tippy-backdrop
{
	background-color: var(--reversethemebackground);
}
.tippy-box > .tippy-svg-arrow
{
	fill: var(--reversethemebackground);
}

@media all and (max-width:80rem)
{
	a.assessmentcard.embedded .personwrapper div.name,
	a.assessmentcard.embedded .personwrapper div.courseprogress
	{
		flex-basis: 100%;
		text-align: center;
		justify-content: center;
	}
	a.assessmentcard.embedded div.personwrapper,
	a.assessmentcard.embedded div.goallevels
	{
		flex-basis: 50%;
	}
	.assessmentcontent
	{
		grid-template-columns: repeat(1, 1fr);
	}
	.assessmentcontent .level1
	{
		grid-column: 1;
	}
	.assessmentcontent .graphradiobutton
	{
		grid-row: auto;
		grid-column: auto;
	}
	.assessmentcontent .graphradiobutton.level0,
	.assessmentcontent .graphradiobutton.level1,
	.assessmentcontent .graphradiobutton.level2,
	.assessmentcontent .graphradiobutton.level3,
	.assessmentcontent .graphradiobutton.level4,
	.assessmentcontent .graphradiobutton.level5,
	.assessmentcontent .graphradiobutton.level6,
	.assessmentcontent .skillcontent.noassessment,
	.assessmentcontent.range3 .skillcontent.noassessment,
	.assessmentcontent.range4 .skillcontent.noassessment,
	.assessmentcontent.range5 .skillcontent.noassessment,
	.assessmentcontent.range6 .skillcontent.noassessment,
	.assessmentcontent.range7 .skillcontent.noassessment,
	.assessmentcontent .skillcontent
	{
		grid-column: 1 / span 2;
	}

	.assessmentcontent .skillcontent.level0
	{
		grid-row: 2;
	}

	.assessmentcontent .skillcontent.level1
	{
		grid-row: 3;
	}
	.assessmentcontent .skillcontent.level2
	{
		grid-row: 4;
	}
	.assessmentcontent .skillcontent.level3
	{
		grid-row: 5;
	}
	.assessmentcontent .skillcontent.level4
	{
		grid-row: 6;
	}
	.assessmentcontent .skillcontent.level5
	{
		grid-row: 7;
	}

}

@media all and (max-width:70rem)
{
	a.assessmentcard.embedded div.personwrapper,
	a.assessmentcard.embedded div.goallevels
	{
		flex-basis: 100%;
	}
}

main > .message > .copycodebutton,
.message > .copybutton
{
	color: var(--linkcolor);
	text-decoration: underline;
}

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

.jssharecontainer > a.jstarget,
.jssharecontainer > .jstarget,
.joincodewrapper .currentjoincode
{
	border: 0.0625rem solid #dbdbdb;
	box-shadow: 0  0.0625rem 0.625rem rgba(0,0,0,0.06);
	display: inline-block;
	height: 2rem;
	line-height: 2rem;
	margin:0;
	padding: 0 1rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

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

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-white.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1rem 1rem;
}

.jsexpandmaincontent .actions.important .expandmaincontent a
{
	background-image: url("icon/restorecontent-white.svg");
	background-color: var(--linkcoloremphasized);
}

body.jsexpandmaincontent,
.contentwithoutnavigation 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, 90rem) auto;

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

body.jsexpandmaincontent nav.main
{
	border-top: solid var(--hairlinewidth) var(--themeforeground);
	z-index: 0;
}

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

.rootadminenabled nav.global .toggle.rootadmin button
{
	background-color: var(--rootadminhighlightcolor);
	border-color: var(--rootadminhighlightcolor);
}

nav.global > .toggle.rootadmin button
{
	overflow: hidden;
}

nav.global > .toggle.rootadmin button span
{
	position: absolute;
	width: 0rem;
	height: 0rem;
	overflow: hidden;
	color: transparent;
}

nav.global > .toggle.rootadmin button
{
	margin: 0;
	padding: 0;
	width: 2.4rem;
	height: 2.4rem;
	min-height: auto;
	background-image: url("icon/enable-rootadmin-white.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1.5rem 1.5rem;
	box-shadow: none;
}

nav.global > .toggle.rootadmin button:focus
{
	box-shadow: var(--focusboxshadow);
}

nav.global > .toggle.rootadmin button:hover
{
	box-shadow: var(--hoverboxshadow);
}

.rootadminenabled nav.global > .toggle.rootadmin button
{
	display: flex;
	background-image: url("icon/disable-rootadmin-white.svg");
	border-width: var(--hairlinewidth);
}

/* Submissionfolder response summary view */
ul.responsesummary
{
	list-style: none;
	padding: 0;
	margin: 0;
	min-height: 25rem; /* reserve vertical space for sort dropdownmenu */
}

ul.responsesummary > .inforow
{
	background-color: var(--navopenbackground);
	color: var(--themetextcolor);
	padding: calc(0.5 * var(--gap));
	padding-right: var(--gap);
	font-size: 0.8rem;
	text-align: right;
}

ul.responsesummary > li
{
	border-bottom: solid var(--hairlinecolordark) var(--hairlinewidth);
	border-radius: 0;
}

ul.responsesummary > li.toolbar
{
	background-color: #E4E8EB; /* not sure if this is correct color */
	display: grid;
	grid-column-gap: var(--gap);
	grid-template-columns: 1fr auto;
	padding: var(--gap);
}

ul.responsesummary > li > article.open
{
	margin-bottom: 0;
}

li.toolbar > .sortandfilter,
li.toolbar > .pointsandopenall
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gap);
}

li.toolbar button
{
	margin-top: 0; /* override default button setting */
}

li.toolbar button::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
}
li.toolbar .dropdown.sort > button::before
{
	margin-right: calc(0.75 * var(--gap)); /* slightly more margin because icon is so narrow */
	content: "\f338"; /* arrows-alt-v */
}

li.toolbar button.summary::before
{
	margin-right: calc(0.5 * var(--gap));
	content: "\f00a"; /* th */
}

li.toolbar button.downloadcsv::before
{
	content: "\f019"
}

.sortandfilter .filter .input-group-text.search::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f002"; /* magnifying-glass */
}

.dropdown.sort .dropdown-menu a.selected:after
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-left: var(--gap);
	content: "\f00c"; /* check */
}

.taskstoselect .path
{
	opacity: 0.8;
	font-size: 0.8rem;
}
li.toolbar button.openall::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f078"; /* chevron-down */
}

li.toolbar button.openall.closeall::before
{
	content: "\f077"; /* chevron-up */
}

li.toolbar .featuresdisabled::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f071"; /* triangle-exclamation*/
}

ul.responsesummary > li.response > article > header
{
	display: flex;
	flex-wrap: nowrap;
	gap: 0em 0.5rem;
	justify-content: start;
	align-items: center;
	cursor: pointer;
	padding: calc(0.5 * var(--gap)) var(--gap);
}

ul.responsesummary > li.response > article.open header
{
	border-bottom: solid var(--hairlinewidth) var(--hairlinecolor);
}

ul.responsesummary > li.response > article > header:after
{
	font-size: 1.2rem;
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-left: calc(0.25 * var(--gap));
	content: "\f077"; /* chevron-up */
	margin-bottom: 0; /* override setting */
	display: inline-block /* override setting */
}

.form.module li.response > article.unseen:not(.seen) > header .person
{
	font-weight: var(--font-weight-bold);
}

ul.responsesummary > li.response > article > header:hover,
ul.responsesummary > li.response > article > header:hover a,
ul.responsesummary > li.response > article > header:hover .timestamp,
ul.responsesummary > li.response > article > header:hover .timestamp > .overdue,
ul.responsesummary > li.response > article > header:hover .timestamp > .parentmodified
{
	color: var(--reversethemeforeground);
	background-color: var(--buttonbackgroundhover);
	opacity: 1;
}


ul.responsesummary > li.response > article.closed > header:after
{
	content: "\f078"; /* chevron-down */
}

ul.responsesummary > li.response > article > header > .summary
{
	display: flex;
	gap: calc(1.5 * var(--gap));
	justify-content: flex-end;
	margin-right: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header > .summary > span::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header > .summary > .evaluations::before
{
	content: "\f080"; /* chart-bar */
}

ul.responsesummary > li.response > article > header > .summary > .peerevaluations::before
{
	content: var(--font-icon-peerevaluation);
}

ul.responsesummary > li.response > article > header > .summary > .comments::before
{

	content: "\f086"; /* comments */
}

ul.responsesummary > li.response > article > header .menutoggle,
ul.responsesummary > li.response > article > header:hover .menutoggle
{
	background-color: rgba(255,255,255, 0.8)
}

ul.responsesummary > li.response > article > header .title
{
	font-size: 1.15rem;
}

ul.responsesummary > li.response > article.formresponse > header .title,
ul.responsesummary > li.response > article.assignmentstypesshortanswerassignmentsubmission > header .title
{
	display: none;
}

ul.responsesummary.showpoints > li.response > article > header .summary .points
{
	display: block;
}

ul.responsesummary > li.response > article > header .summary .points
{
	color: var(--reversethemeforeground);
	background-color: var(--reversethemebackground);
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius);
	text-align: center;
	min-width: 1.5rem;
	font-size: 0.8rem;
	font-weight: 900;
	display: none;
}

ul.responsesummary > li.response > article > header:hover .summary .points
{
	background-color: var(--themebackground);
	color: var(--themeforeground);
}

ul.responsesummary > li.response > article.closed > header .title > span
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block; /* note: old Safari versions only supported ellipsis with display:block so we might overflow the UI with Safari 12.x or older */
	max-width: calc(100% - 3rem); /* reserve space for unread indicator on right side */
	vertical-align: bottom;
}

ul.responsesummary > li.response > article > header > .overview
{
	flex-grow: 100;
	min-width: 0; /* trick to get .title text-overflow act like ellipsis. see https://css-tricks.com/flexbox-truncated-text/ */
}

ul.responsesummary > li.response > article > header .title::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	font-size: 0.8rem;
	vertical-align: middle;
	float: left;
	margin-top: calc(0.35 * var(--gap));
}

ul.responsesummary > li.response > article.unseen > header .title::after,
ul.responsesummary > li.response > article.formresponse.unseen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesshortanswerassignmentsubmission.unseen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesessayassignmentsubmission.unseen > header .authors::after,
.modal article.unseen > header > h1::after,
ul.responsesummary > li.response > article > header > .summary > .unseen::after,
ul.responsesummary .highlight.count.unseen::after
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-left: calc(0.5 * var(--gap));
	content: "\f111"; /* circle */
	color: var(--themeerror);
}

ul.responsesummary > li.response > article.unseen.seen > header .title::after,
ul.responsesummary > li.response > article.formresponse.unseen.seen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesshortanswerassignmentsubmission.unseen.seen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesessayassignmentsubmission.unseen.seen > header .authors::after,
.modal article.unseen.seen > header > h1::after,
ul.responsesummary > li.response > article > header > .summary > .unseen.seen::after,
ul.responsesummary .highlight.count.unseen.seen::after
{
	opacity: 0.2;
}

ul.responsesummary > li.response > article.unseen > header .title::after,
ul.responsesummary > li.response > article.formresponse.unseen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesshortanswerassignmentsubmission.unseen > header .authors::after,
ul.responsesummary > li.response > article.assignmentstypesessayassignmentsubmission.unseen > header .authors::after,
.modal article.unseen > header > h1::after
{
	font-size: 0.85rem;
}

ul.responsesummary > li.response > article.unseen:not(.seen) > header .title
{
	font-weight: var(--font-weight-bold);
}


ul.responsesummary > li.response > article > header .secondrow
{
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5 * var(--gap));
	align-items: baseline;
	margin-top: calc(0.25 * var(--gap));
}

ul.responsesummary > li.response > article > header .timestamp > .overdue,
ul.responsesummary > li.response > article > header .timestamp > .parentmodified
{
	color: var(--themeerror);
	margin-left: calc(0.5 * var(--gap));
}

ul.responsesummary > li.response > article > header .timestamp > .overdue::before,
ul.responsesummary > li.response > article > header .timestamp > .parentmodified::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.25 * var(--gap));
	content: "\f071"; /* exclamation-triangle*/
}

ul.responsesummary > li.response > article > header .authors .person a:hover
{
	text-decoration: underline;
}


ul.responsesummary > li.response > article > header > .actions
{
	flex: 0 0 auto;
}


ul.responsesummary > li.response > article.closed > .main
{
	display: none;
}

ul.responsesummary > li.response > article > div.main
{
	margin: 0;
}

ul.responsesummary > li.response > article > div.main .late.warning
{
	display: none; /* similar warning is rendered in title already */
}

ul.responsesummary > li.response .main .preview + .description,
ul.responsesummary > li.response .main .link + .description,
ul.responsesummary > li.response .main .download
{
	border-top: dashed var(--hairlinewidth) var(--hairlinecolordark);
	margin-top: var(--gap);
	padding-top: var(--gap);
}

ul.responsesummary > li.response > article > header > .summary > .unseen,
ul.responsesummary .highlight.count.unseen
{
	position: relative;
}

ul.responsesummary > li.response > article > header > .summary > .unseen::after,
ul.responsesummary .highlight.count.unseen::after
{
	font-size: 0.55rem;
	position: absolute;
}

ul.responsesummary > li.response > article > header > .summary > .unseen::after
{
	/* move unseen icon on top of other content */
	left: 0.3rem;
	top: 0;
}

ul.responsesummary .highlight.count.unseen::after
{
	/* move unseen icon on top of other content */
	left: 0.8rem;
	top: -0.3rem;
}

ul.responsesummary > li.response > article.link  > .main div.link > a
{
	border: solid var(--hairlinecolor) var(--hairlinewidth);
	box-shadow: var(--buttonboxshadow);
	display: inline-block;
	margin: 0;
	padding: var(--gap);
	text-decoration: none;
}

ul.responsesummary > li.response > article.link > .main div.link > a:hover
{
	text-decoration: underline;
}
input.maxcharlength-error,
input.invalid-text-input,
input.invalid-number-input
{
	color: var(--themeerror);
}
input.maxcharlength-error:focus,
input.invalid-text-input:focus,
input.invalid-number-input:focus,
input:invalid
{
	border-color: var(--themeerror);
	outline: none;
	box-shadow: var(--hoverboxshadow), var(--focusboxerrorshadow);
	border-radius: var(--forminputborderradius);
}

button.popout::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f35d"; /* up-right-from-square */
}

button.evaluationview
{
	margin-left: calc(0.5 * var(--gap));
}

.createevaluationui
{
	background-color: var(--secondarycontent-background-color);
	padding: var(--gap);
	margin-top: var(--gap);
}

.createevaluationui > h4
{
	margin-top: 0;
}

.createevaluationui .formcontext
{
	display: none;
}

.evaluationmodal .modal-body nav.actions
{
	display: none;
}

.nav-item.all > a::before,
.nav-item.others > a::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f0c0";
}

.input-group
{
	display: flex;
}

.input-group-append
{
	display: flex;
	margin-left: -1px;
}
.input-group > input.tcustom
{
	border-radius: var(--buttonradius) 0 0 var(--buttonradius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.menu.popup .switchgroup
{
	padding: 0.65rem 1rem 0.65rem 0.5rem;
	border-bottom: var(--hairlinewidth) solid var(--hairlinecolor);
}

.input-group-text
{
	border-radius: 0 var(--buttonradius) var(--buttonradius) 0;
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid var(--forminputbordercolor);
}

ul.infotvpace
{
	list-style-type: none;
	padding: 0;
}

a.startinfotv:before
{
	font-family: var(--fontawesome);
	margin-right: 0.3rem;
	content: "\f152"; /* square-caret-right */
}

main.profile article.profile > header ul.actions.important > li.subscribe,
main.profile article.profile > header ul.actions.important > li.share,
main.profile article.profile > header ul.actions.important > li.metadata,
main.profile article.profile > header ul.actions.important > li.message,
main.profile article.profile > header ul.actions.important > li.connect
{
	display: none;
}

.profilecard
{
	box-shadow: var(--boxshadow);
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: var(--radius);
	margin: var(--gap);
}

.profilecard .profileimage
{
	margin: calc(2 * var(--gap));
	margin-bottom: 0;
	object-fit: cover;
}

.profilecard > div
{
	text-align: center;
}

.profilecard .profilename
{
	padding: 0 var(--gap);
}

.profilecard .profilename h2
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profilecard .profileactions .actions
{
	animation: none;
}

.profilecard .profileactions ul.actions
{
	float: unset;
	display: flex;
	gap: 0.5rem 0.25rem;
	flex-wrap: wrap;
	justify-content: center;
}

.profilecard .profileactions .create
{
	display: none;
}

.profilecard .icondropdownmain button > span
{
	position: absolute;
	width: 0rem;
	height: 0rem;
	overflow: hidden;
	color: transparent;
}
.profilecard div.icondropdownmain
{
	top: -1.5rem;
	left: -1.2rem;
	position: absolute;
}

[data-unseenfeature]:after,
.spottedunseenfeature:after
{

	font-size: var(--newfeatureindicatorsize);
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f111"; /* circle */
	color: var(--newfeatureindicatorcolor);
}

.hidenewfeature:after
{
	display: none;
}

#navigation ul.sitemap a[data-unseenfeature]:after,
a.dropdown-item[data-unseenfeature]:after,
#navigation ul.sitemap a.spottedunseenfeature:after,
a.dropdown-item.spottedunseenfeature:after
{
	margin-top: -0.75rem;
	margin-left: calc(0.5 * var(--gap));
}

.actions.popup li a[data-unseenfeature]:after,
.actions.popup li a.spottedunseenfeature:after,
span[data-unseenfeature]:after,
span.spottedunseenfeature:after,
label[data-unseenfeature]:after,
label.spottedunseenfeature:after
{
	margin-left: calc(0.5 * var(--gap));
	vertical-align: super;
	line-height: 0; /* keep menu items same height: do not reserve space above for vertical-align: super */
}

.menutoggle[data-unseenfeature]:after,
.menutoggle.spottedunseenfeature:after,
a.btn-icon[data-unseenfeature]:after,
a.btn-icon.spottedunseenfeature:after,
button[data-unseenfeature]:after,
button.spottedunseenfeature:after,
details[data-unseenfeature]:after,
details.spottedunseenfeature:after
{
	position: absolute;
	right: -0.4rem;
	top: -0.5rem;
}

li.create a[data-unseenfeature]:after,
li.create a.spottedunseenfeature:after
{
	position: absolute;
	right: -0.3rem;
	top: -0.4rem;
}

.list.tools.enclose [data-unseenfeature]:after,
.list.tools.enclose .spottedunseenfeature:after
{
	position: absolute;
	right: 0.8rem;
	bottom: 0.8rem;
}

.pagethumbnail a[data-unseenfeature]:after,
.pagethumbnail a.spottedunseenfeature:after
{
    position: absolute;
    right: -0.3rem;
    top: -0.6rem;
}

main.systemperson ul.pages li[data-unseenfeature]:after,
main.systemperson ul.pages li.spottedunseenfeature:after
{
    position: relative;
    right: -0.5rem;
    top: -0.8rem;
}

.spottedunseenfeature:after
{
	opacity: 0.2;
}

.menutoggle[data-unseenfeature],
.menutoggle.spottedunseenfeature,
li.create a[data-unseenfeature],
li.create a.spottedunseenfeature,
a.btn-icon[data-unseenfeature],
a.btn-icon.spottedunseenfeature,
button[data-unseenfeature],
button.spottedunseenfeature,
details[data-unseenfeature],
details.spottedunseenfeature
{
	position: relative;
}

.copyselftoclipboard
{
	color: var(--linkcolor);
}
.copyselftoclipboard:hover
{
	cursor: grabbing;
	color: var(--linkcoloremphasized);
}
.copyselftoclipboard:after
{
	font-family: var(--fontawesome);
	font-weight: 900;
	content: "\f0c5"; /* copy */
	font-size: 0.7em; /* relative size to the parent */
	margin-left: calc(0.25 * var(--gap));
	vertical-align: middle;
}

@media all and (max-width:80rem)
{
	body > .systemalerts
	{
		max-width: 60%;
	}
}

@media all and (max-width:73rem)
{
	body
	{
		grid:
		"lmargin 	globalnav	rmargin" auto
		"lmargin 	searchxsinput	rmargin" auto
		"lmargin	systemmessages	rmargin" auto
		"lmargin	gap1		rmargin" var(--gapbeforeheader)
		"lmargin	header		rmargin" auto
		"lmargin	main		rmargin" minmax(0,1fr)
		"lmargin	nav		rmargin" auto
		"lmargin	footer		rmargin" auto
		/ auto minmax(0, 1fr) auto;

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

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

	li.expandmaincontent
	{
		display: none;
	}

	/* adjust margin to make it look nice with the newly added menu button below */
	body > nav.global > .logo
	{
		margin-left: 0;
	}

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

	/* bring nav toggle button visible on narrow viewports */
	body.jsnav nav.global > .menu
	{
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		padding-left: var(--gap);
		padding-right: calc(0.25 * var(--gap));
	}

	/* ... except on rootservice */
	.rootservice body.jsnav nav.global > .menu
	{
		display: none;
	}

	body.jsnav nav.main
	{
		position: fixed;
		top: 4rem;
		left: calc(-2rem - var(--menuwidth));
		width: var(--menuwidth);
		max-width: calc(100vw - 2rem);
		height: 100vh;
		max-height: calc(100vh - 4rem);
		box-sizing: border-box;
		background: var(--themebackground);
		overflow: auto;
		box-shadow: var(--hoverboxshadow);
		transition: left 0.3s ease-out;
		will-change: left;
	}

	/* undo the default top setting for sticky because the nav.main now has fixed position (see above) and we don't need any extra space for the top here */
	body.jsnav nav.main > .sticky
	{
		top: 0;
	}

	body.jsnav.jsnavopen nav.main
	{
		left: 0;
		z-index: 20;
	}

	/* tweaks to nav toggle button while menu is open */

	body.jsnav.jsnavopen #navtoggle img
	{
		display: none;
	}

	body.jsnav.jsnavopen nav.global > .menu
	{
		background: var(--reverselinkbackground);
	}

	body.jsnav.jsnavopen #navtoggle:before
	{
		display: block;
		content: url("icon/close-darkblue.svg");
		/*filter: brightness(0) invert(1);*/
		height: 1.6rem;
		width: 1.6rem;
	}

	ul.organize li.jsorganize
	{
		/*Reserve space for scrolling the page on touch devices*/
		margin-right: 4rem;
	}

	ul.organize img.thumbnail
	{
		/*Make image thumbnails smaller on narrow devices*/
		width: 5rem;
		height: 5rem;
	}
	canvas.moodmetersummary
	{
		min-height: 20rem;
	}
	div[data-chartsaasummarymodal] > .modal-dialog
	{
		min-width: 80vw;
	}
	div[data-chartsaasummarymodal] > .modal-dialog .chartsaasummarycontainer
	{
		grid-template-columns: auto;
		grid-template-rows: min-content;
	}
	.overallprogress
	{
		grid-template-areas:
			"a b f"
			"c c c";
		grid-template-columns: min-content min-content minmax(0, 3fr);
	}
	.form.summary .highlighttool
	{
		max-width: 40vw;
	}
}

@media all and (max-width:65rem)
{
	body > footer.page
	{
		column-gap: 3rem;
	}
}

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

@media all and (max-width:58rem)
{
	body > nav.global > .person > a
	{
		padding: 0;
	}

	nav.global > .person div.details
	{
		display: none;
	}

	body > footer.page
	{
		column-gap: 2rem;
	}
}

@media all and (max-width:54rem)
{
	main.page > article > section
	{
		grid-template-columns: auto;
	}

	body > .systemalerts
	{
		max-width: 100%;
	}
	footer > .backtotop a > span
	{
		display: none;
	}
	footer > .backtotop a:before
	{
		margin-right: 0;
	}
}

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

	nav.global > .toggle.modify button span
	{
		position: absolute;
		width: 0rem;
		height: 0rem;
		overflow: hidden;
		color: transparent;
	}

	nav.global > .toggle.modify button
	{
		margin: 0;
		padding: 0;
		width: 2.2rem;
		height: 2.2rem;
		background-image: url("icon/enable-modify-white.png");
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 1.3rem 1.3rem;
		border-radius: 50%;
	}

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

	body > footer
	{
		flex-wrap: wrap;
	}

	body > footer .footeractions
	{
		order: 3;
		flex-basis: 100%;
		margin-left: 7.5rem; /* adjust content to content above */
	}

	html.profilepage body > header > .banner
	{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column-reverse;
	}

	html.profilepage div.bannerdropdownmain
	{
		position: static;
		align-self: flex-start;
		margin: calc(0.5 * var(--gap));
	}

	.bannerdropdownmain button.dropdown-toggle > span
	{
		position: absolute;
		width: 0rem;
		height: 0rem;
		overflow: hidden;
		color: transparent;
	}

	div.bannerdropdownmain .dropdown > button::before
	{
		margin-right: 0;
	}

	html.transparentbanner h1.toplevel.hasbannerdropdown
	{
		/* reserve space for modify style button */
		margin-left: 5rem;
	}

	.profilecard
	{
		width: var(--profilecard-width-narrow);
		min-height: 8rem;
		position: relative;
		margin-top: calc(1.5 * var(--gap)); /* reserve space for icon change button */
	}

	.profilecard .profileactions
	{
		margin-bottom: var(--gap);
	}

	.profilecard .profileimage
	{
		width: var(--profilecard-image-size-narrow);
		height: var(--profilecard-image-size-narrow);
	}

	canvas.moodmetersummary
	{
		min-height: 20rem;
	}

	div[data-chartsaasummarymodal] > .modal-dialog .modal-body
	{

		max-width: 100%;
		overflow: auto;
	}

	div[data-chartsaasummarymodal] > .modal-dialog .modal-body .chartsaasummarycontainer
	{
		min-width: 30rem;
	}

	li.toolbar button
	{
		width: var(--buttonheight);
		height: var(--buttonheight);
		padding: 0.5rem;
		text-align: center;
	}

	html > body > main.submissions ul.responsesummary > li.toolbar button::before /* high specificity to override default setting */
	{
		margin-right: 0;
	}

	li.toolbar button > span
	{
		display: none;
		position: absolute;
		width: 0rem;
		height: 0rem;
		overflow: hidden;
		color: transparent;
	}

	.toolbar a.btn-icon:link
	{
		padding: 0.5rem;
	}

	ul.pagethumbnails.dense
	{
		grid-template-columns: repeat(2, 1fr);
	}
	.form.summary .highlighttool
	{
		max-width: 50vw;
	}
}

@media all and (min-width: 48rem)
{
	html.transparentbanner h1.toplevel.hasbannerdropdown
	{
		/* reserve space for modify style button */
		margin-left: 12rem;
	}

	html.profilepage body > header > .banner
	{
		position: relative;
	}

	html.profilepage body > header > .statusbar
	{
		padding-right: calc(4rem + var(--profilecard-width));
	}

	/* reserve statusbar space so profilecard will not float over description text */
	html.profilepage.anonymous
	{
		--statusbarheight: 5rem;
	}
	html.profilepage.anonymous body > header > .statusbar
	{
		background: transparent;
		color: transparent;
	}

	main.profile article.profile:first-child > header,
	main.profile > .messages
	{
		margin-right: calc(3rem + var(--profilecard-width));
	}

	html.profilepage body > header > .breadcrumbs > div
	{
		margin-right: calc(4rem + var(--profilecard-width));
	}

	.profilecard
	{
		width: var(--profilecard-width);
		min-height: 25rem;
		right: var(--gap);
		position: absolute;
		bottom: -17rem;
		z-index: 1;
	}

	.profilecard .profileimage
	{
		width: var(--profilecard-image-size);
		height: var(--profilecard-image-size);
	}

	.profilecard .profilename h2
	{
		font-size: 1.5rem;
	}

	.profilecard .profileactions
	{
		margin-bottom: calc(2 * var(--gap));
	}
}

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

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

	body > nav.global > .searchnav
	{
		grid-area: searchxsinput;
		grid-column: lmargin-start / rmargin-end;
		display: none;
		padding: var(--gap);
	}

	.showsearch body > nav.global > .searchnav
	{
		display: flex;
	}

	body > nav.global > .searchnav form
	{
		margin: 0;
	}

	.searchnav .searchdocuments input[type="search"]
	{
		max-width: 100%;
		width: 100%;
	}

	#showsearch
	{
		display: flex;
	}

	a.resourcelink:link,
	a.resourcelink:visited,
	a.resourcelink,
	a.button:link,
	a.button:visited,
	a.button,
	a.primarybutton:link,
	a.primarybutton:visited,
	a.primarybutton,
	a.secondarybutton:link,
	a.secondarybutton:visited,
	a.secondarybutton,
	span.button,
	label.button
	{
		padding: var(--buttonpaddingnnarrow);
	}

	ul.responsesummary > li.response > article > header
	{
		flex-wrap: wrap;
		position: relative;
	}

	ul.responsesummary > li.response > article > header > .overview
	{
		flex-basis: 100%;
		margin-bottom: calc(0.5 * var(--gap));
		padding-bottom: calc(0.5 * var(--gap));
		border-bottom: dashed var(--hairlinewidth) var(--hairlinecolor);
	}
	ul.responsesummary > li.response > article > header > .summary
	{
		margin-right: auto;
	}

	ul.responsesummary > li.response > article > header:after
	{
		position: absolute;
		right: 1.5rem;
		top: 0.5rem; /* position open toggle icon on the same height than title */
	}

	ul.responsesummary > li.response > article > header .title
	{
		padding-right: 1.75rem; /* leave space for open toggle icon */
	}

	div.meta-table-cell
	{
		flex-basis: 100%;
	}
	div.meta-table-cell:first-child
	{
		padding-left: 0;
	}

	ul.pagethumbnails
	{
		grid-template-columns: repeat(1, 1fr);
	}
	canvas.moodmetersummary
	{
		min-height: 15rem;
	}
	button.moodmeter i
	{
		font-size: 3rem;
	}
	ul.reorderassignment-items.horizontal li
	{
		display: block;
		margin: 0.5rem auto;
	}
	div.reorderassignment-vertical-flex
	{
		display: block;
	}
	div.reorderassignment-vertical-flex ul.reorderassignment-items.vertical
	{
		width: unset;
	}
	div.roas-item-container
	{
		width: 96%;
	}
	ul.reorderassignment-items li div.roas-item
	{
		max-width: unset;
	}
	p.roas-subheading,
	popup.ui-dialog-content p.roas-subheading
	{
		visibility: visible;
		font-weight: bold;
		margin: 1rem 0 0 0.2rem;
	}
}

@media all and (max-width:33rem)
{
	footer.page .logo img
	{
		height: 2.75rem;
		margin-left: -0.2rem; /* adjust image to match text below */
	}
	body > footer .footerlinks
	{
		order: 2;
		flex-basis: 100%;
		margin-left: 0;
	}
	body > footer .footeractions
	{
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
	}
	footer > .backtotop a,
	footer > .backtotop a:visited
	{
		padding: var(--buttonpadding);
	}
	footer > .backtotop a > span
	{
		display: inline;
	}
	footer > .backtotop a:before
	{
		margin-right: 0.3rem;
	}

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

	article.forum
	{
		--biggap: 0.6rem;
	}
	article.forum.document > header .person img
	{
		margin-right: 0.2rem;
	}
	div.bannerdropdownmain
	{
		bottom: 0.5rem;
		left: 0.5rem;
	}
	.toolbar .sortandfilter > .filter,
	.toolbar .sortandfilter > .filter input
	{
		width: 100%;
	}

	ul.pagethumbnails.dense
	{
		grid-template-columns: repeat(1, 1fr);
	}
	.evaluationtype > label
	{
		display: block;
	}
	.systemalerts > .alert > form
	{
		flex-wrap: wrap;
	}
}

@media all and (min-width:33rem)
{
	ul.pagethumbnails.dense.subpages-2
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

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

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

	nav.global .person .icon
	{
		width: 1.9rem;
		height: 1.9rem;
	}

	nav.global > .toggle.rootadmin button
	{
		width: calc(1.9rem + var(--hairlinewidth));
		height: calc(1.9rem + var(--hairlinewidth));
	}

	footer > .backtotop a > span
	{
		display: none;
	}
	footer > .backtotop a:before
	{
		margin-right: 0;
	}

	article.forum
	{
		--biggap: 0.3rem;
	}
	article.forum.document > header .person img
	{
		margin-right: 0.2rem;
	}

	article.evaluation > header > .header
	{
		grid-template-columns: 1fr;
	}
	canvas.moodmetersummary,
	canvas.chartsaasummary
	{
		min-height: 10rem;
	}

	.form.summary .highlighttool
	{
		max-width: 80vw;
	}
}

@media all and (max-width:21rem)
{
	body > nav.global > .loginlogout a.primarylink, body > nav.global > .loginlogout a.secondarylink
	{
		font-size: 0.8rem;
	}
	/* Quick fix: do not render meta-tag on narrow views because it would be rendered on wrong position */
	span.beta-feature
	{
		display: none;
	}
}

@media print
{
	/* TODO: improve form rendering: http://www.inserthtml.com/2013/09/custom-checkbox-set/ */
	/* long selectors to articially increase specificity to avoid using !important anywhere, see especially "html " prefix */

	html body
	{
		--reversethemeforeground: var(--themeforeground);
		--reversethemebackground: var(--themebackground);
	}

	html,
	body,
	body > header,
	body > main,
	main,
	article > .main,
	body > header > .breadcrumbs,
	h1.toplevel a:link, h1.toplevel a:visited
	{
		display: block;
		padding: 0;
		margin: 0;
		min-height: auto;
		border: none;
	}

	.breadcrumbs > a,
	.breadcrumbs > span
	{
		min-width: auto;
		width: auto;
		height: auto;
		color: inherit;
		background: none;
		margin: 0;
		padding: 0;
	}

	.breadcrumbs > span
	{
		padding: 0 0.5rem;
	}

	body > header > .breadcrumbs
	{
		overflow: hidden;
		text-overflow: ellipsis;
	}

	html
	{
		font-size: 10pt;
		margin: auto;
		widows: 3;
		orphans: 2;
	}

	div.main.page,
	main,
	section,
	.rootservice .hero ul,
	.rootservice .hero li,
	.rootservice main .wrapper,
	ul.extauthservices,
	ul.extauthservices li,
	main.systemperson ul.pages,
	main.systemperson ul.links,
	main > article,
	main > div.main,
	section > .main
	{
		/* workaround Firefox printing bug: display:flex renders only first page */
		display: block;
		width: auto;
	}



	html:before
	{
		display: none;
	}

	button.moodmeter
	{
		display: inline-block;
	}

	body > nav.global,
	nav.personmenu,
	ul.actions,
	.forum.replytools,
	.forum.content > .post-votes-container .votes-container,
	nav.actions,
	article.haspopupmenus > header > .actions,
	.calendar-wrapper .calendar-header .view-container *,
	.calendar-wrapper .calendar-header .navigation-date *,
	.calendar-wrapper .calendar-header .navigation-container .navigation-arrow,
	div.actions,
	article article > header ul.actions,
	body > header > .statusbar,
	nav.phantom.create.content,
	nav.main,
	footer,
	footer .license,
	footer > .backtotop,
	.reminder,
	main > .messages,
	.main > .messages,
	div.buttons,
	button.primary,
	button.secondary,
	a.button,
	.messages .info,
	.messages .warning,
	.messages .error,
	.info.autosaver,
	article.haspopupmenus > header nav.actions a,
	nav.phantom,
	article.privatemessages > a.reply,
	article.privatemessages > a.markasread,
	article.titleonly > header > h1 > a:after,
	main.systemperson ul.pages li.phantom,
	main.systemperson ul.links li.phantom,
	a.showmore,
	h1.toplevel a img,
	body > .systemmessages
	{
		display: none;
	}

	main > article > header
	{
		padding-bottom: 0;
		border-bottom: none;
		margin-bottom: var(--gap);
	}

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

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

	body > header > .banner
	{
		background: transparent;
		margin: auto;
		margin-bottom: 2rem;
	}

	.shortened
	{
		height: auto;
	}

	.shortened:after
	{
		display: none;
	}

	div.shortenedfooter
	{
		display: none;
	}

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

	aside:not(:empty),
	section > .main article+article,
	section > aside article+article
	{
		margin-top: var(--gap);
	}


	html,
	html body,
	html main, html footer.page,
	html header.page
	{
		color: #000;
		background: #fff;
		box-shadow: none;
	}

	body article,
	body article article,
	body article.module,
	body article.supermodule,
	body article.learningresource,
	main > article.systemrootpage > header,
	main > article.systemmodulepage > header,
	main > article.titleonly,
	article.wrapper.titleonly > header
	{
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		box-shadow: none;
		background: #fff;
		color: #000;
	}

	html article article,
	html div.framelessimage,
	html nav.main nav.virtualsub li a,
	html nav.main nav.sub .service a
	{
		border-color: #000;
	}

	body article article
	{
		margin-bottom: 0.5rem;
	}

	html article li > article
	{
		margin-bottom: 0rem;
	}

	article article header
	{
		padding: 0;
	}

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

	.externalfile.preview video
	{
		box-sizing: border-box;
		width: 100%;
		display: block;
		margin: auto;
	}

	.maincontentwithnavigation,
	.contentwrapper,
	main.content,
	body .maincontentwithnavigation.withsidebar > .contentwrapper > .content > .maincontent,
	aside,
	.maincontentwithnavigation.withsidebar > .contentwrapper > .content,
	.maincontentwithnavigation.withsidebar > .contentwrapper > .content > aside
	{
		position: static;
		padding: 0;
		margin: 0;
		float: none;
		width: auto;
	}

	article,
	article article
	{
		page-break-inside: auto;
		break-inside: auto;

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

		content-visibility: visible;
	}

	article.calendarmodule,
	article.commonexternalfileimage,
	article.framelessimage
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	article > header
	{
		page-break-inside: avoid;
		break-inside: avoid;
		page-break-after: avoid;
		break-after: avoid;
	}

	article:not(.calendarmodule):not(.commonexternalfileimage):not(.framelessimage):not(.forum.response) > header::before
	{
		/* Hack to avoid placing header at the end of the page, source: https://stackoverflow.com/a/53742871/334451 */
		content: "";
		display: block;
		height: 8rem; /* pretend that end of header is 6rem high so this header cannot fit near the end of page */
		margin-bottom: -8rem; /* however, reduce the margin the same amount that the following content can stay in its usual place */
		break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	article.module:not(.calendarmodule):not(.commonexternalfileimage):not(.framelessimage) > header::before
	{
		height: 20rem;
		margin-bottom: -20rem;
	}

	article article.document,
	article article.learningresource,
	main > article > section > .main > article.document,
	main > article > section > aside > article.learningresource
	{
		margin: 1rem 0;
		padding: 1rem 0;
	}

	ul.gallery
	{
		widows: 1;
		orphans: 1;
	}

	.gallery li
	{
		min-width: auto;
	}

	img.thumbnail
	{
		width: 16vw;
		height: 16vw;
	}

	.framelessimage img
	{
		object-fit: contain;
		max-height: 100vh;
		max-width: 100vw;
	}

	article article header,
	article article .main
	{
		padding-left: 0;
		padding-right: 0;
	}

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

	.pdf > section > article > header
	{
		break-inside: avoid;
		break-after: avoid;
	}

	.pdf > section > article > .maincontent
	{
		break-before: avoid;
	}

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

	html.html2pdf iframe
	{
		display: none; /* Ugly workaround for bug https://github.com/electron/electron/issues/27605 */
	}

	.main > article > div > div > .main > div > article:first-child
	{
		page-break-inside: auto;
		break-inside: auto;
	}

	table.likert label
	{
		white-space: nowrap;
		font-size: 0.6rem;
	}
	.customprivacy .label,
	.extendedprivacy .label
	{
		display: none;
	}

	a:link,
	a:visited,
	a
	{
		color: #0c478c;
		text-decoration: none;
	}


	a.skiptonav,
	a.skiptocontent
	{
		display: none;
	}

	html input.s,
	html button,
	html a.resourcelink, html a.resourcelink:link, html a.resourcelink:visited,
	html a.button, html a.button:link, html a.button:visited,
	html label.button, html span.button,
	html fieldset,
	html input.t, html input.t[disabled],
	html .form textarea, html .form textarea[disabled]
	{
		background: #fff;
		color: #000;
		border: solid 0.05rem #666;
		border-radius: 0rem;
	}

	html input.s,
	html button
	{
		display: none;
	}

	/* styles for pdf printing */
	html article + article, div.framelessimage + article
	{
		margin-top: 0;
	}

	main.content
	{
		display: inline;
	}

	main.content div.maincontent > article h1.privacy, div.actions
	{
		display: none;
	}
	main.content div.maincontent article.enclose.module > .main div.gallery.list ul.gallery
	{
		page-break-inside: auto;
		break-inside: auto;
		display: inline;
	}

	h1.maincontent
	{
		page-break-after: avoid;
		break-after: avoid;
		margin-bottom: 1rem;
	}

	article.withoutnavigation.page article.enclose > header h1 {
		float: none;
		font-size: 1.5rem;
		margin: 0;
		padding-bottom: 0;
	}

	article.enclose::after
	{
		display: block;
	}

	h1.maincontent,
	article div.maincontent article.enclose > header h1,
	article div.maincontent article.enclose > header h2,
	article div.maincontent article.enclose > header h3
	{
		page-break-after: avoid;
		break-after: avoid;
		margin: 0;
		padding-bottom: 0.2rem;
	}

	h1, h2, h3, h4, h5
	{
		page-break-inside: avoid;
		break-inside: avoid;
		page-break-after: avoid;
		break-after: avoid;
		clear: both;
	}

	body > header > .breadcrumbs > div
	{
		flex-wrap: wrap;
		padding-left: 0;
	}

	body > header > .breadcrumbs > div a
	{
		max-width: 100%;
	}

	article article > header h1
	{
		float: none;
	}

	time,
	header time
	{
		font-size: 0;
	}

	time::after
	{
		content: attr(title);
		font-size: 1rem;
	}

	.MathJax,
	.MathJax_Display
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.MathJax_Display
	{
		/* workaround chromium bug that causes clipped top of formulas on page change */
		border-top: solid 0.25rem transparent;
	}


	table
	{
		font-size: 0.9rem;
	}

	table
	{
		/*page-break-inside: avoid;*/
		display: block;
		overflow: hidden;
		max-width: 100%;
		font-size: 0.8rem;
		table-layout: fixed;
		width: 100%; /* workaround old enough chromium engine in electron-pdf */
		box-sizing: border-box;
		empty-cells: show;
		/* try to make tables look balanced on their own row: */
		margin-left: auto;
		margin-right: auto;
	}

	table.center
	{
		width: 100%; /* workaround old enough chromium engine in electron-pdf */
	}

	table td, table th
	{
		min-width: auto !important; /* make sure we can fit the cells to a page */
	}

	table th, table td
	{
		border-width: 0.5mm;
		border-color: #ddd;
	}

	tr, th, td, th > *, td > *
	{
		page-break-inside: avoid;
		break-inside: avoid;
	}

	table,
	tr,
	li,
	img,
	iframe,
	.authors
	{
		page-break-before: avoid;
		break-before: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* users are using bold text as a replacement for titles, avoid breaking after bold text */
	div.content > b
	{
		page-break-after: avoid;
		break-after: avoid;
	}

	.iframe.placeholder
	{
		border: solid var(--themeforeground) var(--linewidth);
		margin: 0;
		padding: var(--gap);
		box-sizing: border-box;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		align-content: center;
	}

	.iframe.placeholder a
	{
		font-family: monospace;
	}

	.iframe.placeholder img
	{
		/* QR code within a placeholder */
		display: block;
		text-align: center;
		margin: auto;
		height: 15rem;
		image-rendering: pixelated
	}

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

	div.coverpage
	{
		page-break-after: always;
		break-after: page;
	}
	html div.coverpage span
	{
		text-align: center;
	}

	html div.coverpage h1.covertitle
	{
		margin-top: 30vh;
		font-size: 3rem !important;
		font-weight: 400;
		text-align: center;
	}

	article > .main,
	.enclose
	{
		overflow: visible;
	}

	@page
	{
		size: auto;
		margin: 19mm 12.5mm;
		/*@bottom-center
		{
			content: counter(page);
		}*/
	}

	@page :first
	{
		/*@bottom-center
		{
			content: flow(docuserfullname);
		}*/
	}

	div.coverpage > span
	{
		/*flow: static(docuserfullname);*/
		font-weight: normal;
		font-size: 0.8rem;
		color: transparent;
	}

	/* TOC */
	ul.tocList
	{
		page-break-after: always;
		break-after: page;
	}

	ul.tocList, ul.tocList ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	ul.tocList ul
	{
		margin-left: 1rem;
		font-weight: normal;
	}

	ul.tocList li
	{
		line-height: 1.8rem;
		height: auto;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	ul.tocList li a
	{
		color: #000 !important;
	}

	ul.tocList a::after
	{
		content: leader('.') target-counter(attr(href), page);
		font-style: normal;
	}

	ul.tocList > li.frontmatter a::after
	{
		content: leader('.') target-counter(attr(href), page, lower-roman);
		font-style: normal;
	}

	ul.tocList > li.endmatter a::after
	{
		content: leader('.') target-counter(attr(href), page);
		font-style: normal;
	}
}

/* workaround a bug that causes MSIE 10.0 to go into infinite loop if break-inside:avoid is set on an element that is longer than a page -- -ms-high-contrast test is for MSIE 10.0 or higher */
@media print and (-ms-high-contrast: active), (-ms-high-contrast: none) { article, article article { break-inside: auto; } }

table.diff
{
	font-family: monospace;
	font-size: 0.8rem;
}
table.diff td.diffDeleted
{
	border: 1px solid #ffc0c0;
	background-color: #ffe0e0;
}
del.versionhistory, del.versionhistory > *  { background-color: #ffe0e0; }
ins.versionhistory, ins.versionhistory > * { background-color: #e0ffe0; }
table.diff td.diffInserted
{
	border: 1px solid #c0ffc0;
	background-color: #e0ffe0;
}
p.diff.identical
{
	background-color: #fcfcc0;
	border: 1px solid #ccc;
	padding: 0.8rem;
}

/*
 * Override shepherd.css styles
 */
.touractive .shepherd-element.shepherd-has-title[data-popper-placement] > .shepherd-arrow:before
{
	background-color: var(--themeforeground);
}

.touractive .shepherd-content
{
	background: var(--modalwhite);
	border-radius: var(--modalcontainerborderradius);
}

.touractive .shepherd-footer
{
	gap: var(--gap);
}

.touractive .shepherd-header
{
	border-bottom: var(--modalcontentborder);
}

.touractive .shepherd-has-title .shepherd-content .shepherd-header
{
	background: var(--modalwhite);
	padding: 0.75rem 0 0;
	margin: 0 0.5rem
}

.touractive .shepherd-text
{
	color: var(--themetextcolor);
	background: var(--modalwhite);
}

.touractive .shepherd-cancel-icon:hover
{
	color: var(--themeerror);
}

.touractive .shepherd-has-title .shepherd-content .shepherd-cancel-icon
{
	color: var(--themeerror);
	box-shadow: none;
}

.touractive .shepherd-header > span
{
	margin-right: 1em;
}

.touractive .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover
{
	color: var(--themeerror);
}

.touractive .shepherd-title
{
	color: var(--modaltitlecolor);
	font-size: 1.2rem;
}

.touractive .shepherd-content button.primary
{
	background-color: var(--reverselinkbackground);
	color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);
}

.touractive .shepherd-content button.primary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

.touractive .shepherd-content a.secondarybutton:link,
.touractive .shepherd-content a.secondarybutton:visited,
.touractive .shepherd-content a.secondarybutton,
.touractive .shepherd-content button.secondary
{
	color: var(--reverselinkbackground);
	background-color: var(--reverselinkforeground);
	border-color: var(--reverselinkbackground);
}

.touractive .shepherd-content a.secondarybutton:hover,
.touractive .shepherd-content button.secondary:hover
{
	color: var(--reverselinkforeground);
	background-color: var(--buttonbackgroundhover);
}

.touractive .shepherd-button-secondary.button.negative.shepherd-button
{
	color: var(--themeerror);
	padding: 0 0.5rem 0 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/*!
 * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
 */
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

.modal-header h4
{
	font-size: 1.2rem;
}

.modal button.close,
button.peda-image-editor-close-button.close
{
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	height: var(--buttonheight);
	background: #fff;
	color:#C82038;
	border-radius: 0.75rem;
	min-width: var(--buttonheight);
	box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.25);
	border: 2px solid #C82038;
}
.modal button.close:hover,
button.peda-image-editor-close-button.close:hover
{
	background: #b21c32;
	border: 2px solid #b21c32;
	color: #fff;
}

button.remove-row
{
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	height: var(--buttonheight);
	background: inherit;
	color:#000;
	/*border-radius: 0.75rem;*/
	min-width: var(--buttonheight);
	border-style: none;
	border-width: none;
	border-color: none;
	border-radius: var(--buttonradius);
	box-shadow: none;
}

button.remove-row:hover
{
	background: #808080;
	/*border: 2px solid #b21c32;*/
	color: #fff;
}

.modal button.close i,
button.remove-row i,
button.peda-image-editor-close-button.close i
{
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-family: var(--fontawesome);
	text-rendering: auto;
	position: relative;
}

.modal button.close i::before,
button.peda-image-editor-close-button.close::before
{
	content: "\f00d";
}

button.remove-row i::before
{
	/*content: "\f068";*/
	content : "\f00d";
}

.modal.hidecloseactions .modal-actions button.close,
.modal.hidecloseactions .modal-footer button.negative
{
	display: none;
}
.nav
{
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.nav > li > a
{
	display: block;
	padding: var(--buttonpadding);
}
.nav > li > a:hover,
.nav > li > a:focus
{
	text-decoration: none;
	background-color: #eeeeee;
}
.nav > li.disabled > a
{
	color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus
{
	color: #777777;
	text-decoration: none;
	cursor: not-allowed;
	background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus
{
	background-color: #eeeeee;
	border-color: #337ab7;
}
.nav .nav-divider
{
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}
.nav > li > a > img
{
	max-width: none;
}
.nav-tabs
{
	border-bottom: 1px solid var(--hairlinecolordark);
	display: flex;
	flex-wrap: wrap;
}

.nav-tabs > li > a,
body > nav.global .searchresultscontainer .nav-tabs > li > a /* override global nav styles */
{
	border-radius: 0;
	border: 1px solid transparent;
	border-top-left-radius: var(--buttonradius);
	border-top-right-radius: var(--buttonradius);
	line-height: 3.1rem;
	height: 3.1rem;
	margin: 0;
}

.nav-tabs > li > a > img + span
{
	margin-left: calc( 0.5 * var(--gap) );
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus
{
	background-color: #fff;
	color: var(--linkcolor);
}
.nav-tabs > li:not(.active) > a:hover,
.nav-tabs > li:not(.active) > a:focus
{
	border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs > li.active > a
{
	color: #fff;
	background-color: var(--themeforeground);
}

.nav-tabs > li.active > a .highlight.count
{
	background-color: #fff;
	color: var(--themeforeground);
}
.nav-tabs > li.active > a:hover
{
	color: #fff;
	background-color: var(--buttonbackgroundhover);
}
.nav-tabs > li.active > a:focus
{
	color: #fff;
	background-color: var(--buttonbackgroundfocus);
}
.nav-tabs.nav-justified
{
	width: 100%;
	border-bottom: 0;
}
.nav-tabs.nav-justified > li
{
	float: none;
}
.nav-tabs.nav-justified > li > a
{
	margin-bottom: 5px;
	text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu
{
	top: auto;
	left: auto;
}
@media (min-width: 768px)
{
	.nav-tabs.nav-justified > li
	{
		display: table-cell;
		width: 1%;
	}
	.nav-tabs.nav-justified > li > a
	{
		margin-bottom: 0;
	}
}
.nav-tabs.nav-justified > li > a
{
	margin-right: 0;
	border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus
{
	border: 1px solid #dddddd;
}
@media (min-width: 768px)
{
	.nav-tabs.nav-justified > li > a
	{
		border-bottom: 1px solid #dddddd;
		border-radius: 4px 4px 0 0;
	}
	.nav-tabs.nav-justified > .active > a,
	.nav-tabs.nav-justified > .active > a:hover,
	.nav-tabs.nav-justified > .active > a:focus
	{
		border-bottom-color: #ffffff;
	}
}
.nav-pills > li
{
	float: left;
}
.nav-pills > li > a
{
	border-radius: 4px;
}
.nav-pills > li + li
{
	margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus
{
	color: #ffffff;
	background-color: #337ab7;
}
.nav-stacked > li
{
	float: none;
}
.nav-stacked > li + li
{
	margin-top: 2px;
	margin-left: 0;
}
.nav-justified
{
	width: 100%;
}
.nav-justified > li
{
	float: none;
}
.nav-justified > li > a
{
	margin-bottom: 5px;
	text-align: center;
}
.nav-justified > .dropdown .dropdown-menu
{
	top: auto;
	left: auto;
}
@media (min-width: 768px)
{
	.nav-justified > li
	{
		display: table-cell;
		width: 1%;
	}
	.nav-justified > li > a
	{
		margin-bottom: 0;
	}
}
.nav-tabs-justified
{
	border-bottom: 0;
}
.nav-tabs-justified > li > a
{
	margin-right: 0;
	border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus
{
	border: 1px solid #dddddd;
}
@media (min-width: 768px)
{
	.nav-tabs-justified > li > a
	{
		border-bottom: 1px solid #dddddd;
		border-radius: 4px 4px 0 0;
	}
	.nav-tabs-justified > .active > a,
	.nav-tabs-justified > .active > a:hover,
	.nav-tabs-justified > .active > a:focus
	{
		border-bottom-color: #ffffff;
	}
}
.tab-content > .tab-pane
{
	display: none;
}
.tab-content > .active
{
	display: block;
}
.nav-tabs .dropdown-menu
{
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.clearfix:before,
.clearfix:after,
.nav:before,
.nav:after {
	display: table;
	content: " ";
}
.clearfix:after,
.nav:after {
	clear: both;
}

.modal-open
{
	overflow: hidden;
}
.modal
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}
.modal.fade .modal-dialog
{
	transform: translate(0, -25%);
	transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog
{
	transform: translate(0, 0);
}

.modal.in.formsummarymodal .modal-dialog
{
	transform: none; /* set to none so fixed positioned highlighttool will flow nicely */
}
.modal-open .modal
{
	overflow-x: hidden;
	overflow-y: auto;
}
.modal-dialog
{
	position: relative;
	width: auto;
}
.modal-content
{
	width: 100%;
	position: relative;
	background-color: #ffffff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999999;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	outline: 0;
	padding: 0 1rem;
	min-height: 100%;
	box-sizing: border-box;
}
.modal-backdrop
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 29;
	background-color: #000000;
}
.modal-backdrop.fade
{
	opacity: 0;
}
.modal-backdrop.in
{
	opacity: 0.5;
}
.modal-header
{
	padding: 1rem 0;
	border-bottom: var(--modalcontentborder);
}
.modal-actions button
{
	margin-top: 0;
}
.modal-title
{
	margin: 0;
	color: var(--modaltitlecolor);
	font-size: 1.5rem;
	font-weight: 600;
}
.modal-body
{
	position: relative;
	padding: 1rem 0.5rem;
}

.emergencynotification .modal-body
{
	text-align: center;
	padding: 10rem 0;
}

.emergencynotification .modal-title
{
	text-align: center;
}
.emergencynotification .modal-title img.icon
{
	margin: var(--gap);
}

.modal-footer
{
	padding: 1rem 0;
	border-top: var(--modalcontentborder);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.modal-actions
{
	float: right;
	display: flex;
	gap: 0.5rem;
}

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

.modal button.prev:before,
.modal button.next:before
{
	font-family: var(--fontawesome);
	font-weight: 900;
}

.modal-footer button.prev:before,
.modal-footer button.next:before
{
	margin-right: calc(0.5 * var(--gap));
}

.modal button.prev::before
{
	content: "\f053"; /* chevron-left */
}

.modal button.next::before
{
	content: "\f054"; /* chevron-right */
}

.modal-footer .btn + .btn
{
	margin-bottom: 0;
	margin-left: 0.5rem;
}

.modal-footer .btn-block + .btn-block
{
	margin-left: 0;
}
.modal-scrollbar-measure
{
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}
.modal-dialog-centered
{
	display: flex;
	align-items: center;
}
@media (min-width: 576px)
{
	.modal-dialog-centered
	{
		min-height: calc(100% - (1.75rem * 2));
	}
}
@media (min-width: 576px)
{
	.modal-dialog
	{
		max-width: 500px;
		margin: 1.75rem auto;
	}
}
@media (min-width: 768px)
{
	.modal-dialog
	{
		max-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 > .modal-dialog
	{
		max-width: 300px;
	}
}
@media (min-width: 992px)
{
	.modal-lg > .modal-dialog,
	.modal-xl > .modal-dialog
	{
		max-width: 900px;
	}
}

@media (min-width: 1200px)
{
	.modal-xl > .modal-dialog
	{
		max-width: 1140px;
	}
}

.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header: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: var(--font-weight-bold);
}

.nearbyevents .event > .time
{
	font-size: 0.8rem;
}

.disabledAttachmentLinks a
{
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	color: #000000;
}

input.inputAsText {
	background-color: transparent;
	border: none;
	color: #000;
	font-size: 1rem;
	outline: none;
	/*clip-path: inset(0 17px 0 0); /*removes clear-cross from mozilla input/date -field -- if we *really* want plain text input for Mozilla, why not change the field type to text via JS instead? */
}

.inputAsText[type="date"]
{
	-webkit-appearance: none;
}

/* Workaround iOS Safari lineheight issues: */
input.n[type=date],
input.n[type=time]
{
	vertical-align: middle;
}

/* Styles for aria begins */

.aria-container {
	display: none !important;
}

.aria-only {
	clip: rect(1px,1px,1px,1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Styles for aria ends */


/* Styles for calendar-header begins */

.calendar-header {
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
}

.calendar-header a {
	color: var(--themetextcolor);
	padding: 0.3rem 0.5rem;
	text-decoration: none;
	border: solid var(--themetextcolor) 0.05rem;
	border-radius: 0.1rem;
}

.calendar-header .navigation-arrow {
	padding: 0;
}

.calendar-header .navigation-arrow img {
	height: 1.3rem;
	padding-top: 0.2rem;
}

.calendar-header a:hover {
	box-shadow: 0 0 0.25rem #000000;
}

.calendar-header .view-container {
	display: flex;
	white-space: nowrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0.6rem 0;
}

.calendar-header .view-container a:nth-child(2) {
	margin: 0 0.1rem 0 0.1rem;
}

.calendar-header .navigation-container {
	display: flex;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0.6rem 0;
}

.calendar-header .navigation-container h1 {
	margin: 0 0.3rem 0 0.3rem;
	color: var(--themetextcolor);
}

.monthview .calendar-header .navigation-container h1 {
	font-size: 1.6em;
	min-width: 200px;
}

.weekview .calendar-header .navigation-container h1 {
	font-size: 1.5em;
	min-width: 219px;
}

.dayview .calendar-header .navigation-container h1 {
	font-size: 1.5em;
	min-width: 245px;
}

.calendar-header .current-view {
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.calendar-header .navigation-date {
	display: flex;
	white-space: nowrap;
	justify-content: flex-end;
	margin: 0.6rem 0;
}

.calendar-header .today-link {
	margin-right: 0.6rem;
}

.calendar-header .date-selection {
	border: solid var(--themetextcolor) 0.05rem;
	font-size: 1em;
	padding-left: 0.2rem;
}

.jumpToDate {
	display: flex;
}

.jumpToDate input[type="submit"] {
	border: solid var(--themetextcolor) 0.05rem;
	border-radius: 0.1rem;
	background: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	padding: 0.2em;
	cursor: pointer;
	font-size: 0.9em;
}

aside .dayview .calendar-header .navigation-container, aside .dayview .calendar-header .navigation-date {
	width: 100%;
	justify-content: space-between;
	white-space: normal;
}

aside .dayview .calendar-header .today-link {
	margin: 0;
}

aside .dayview .calendar-header .navigation-container h1 {
	min-width: 0;
}
/* Styles for calendar-header ends */

.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,
span.agendashowless
{
	cursor: pointer;
	padding: 1.2rem 0.2rem 0rem;
	display: inline-block;
}

span.agendashowmore > img,
span.agendashowless > img
{
	vertical-align: bottom;
}

/* Styles for MONTH-VIEW begins */
/* Styles for MONTH-VIEW's calendar-container begins */
.monthview .row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
}

.monthview .row .weekday {
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
	height: 1.7rem;
	align-items: center;
	display: flex;
	justify-content: center;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	text-align: center;
}

.monthview .row .weeknumber {
	font-size: 0.8em;
	position: absolute;
	z-index: 1;
	padding: 0.4rem;
	color: var(--reversethemeforeground);
}

.monthview .row .col:hover .weeknumber
{
	color: var(--themeforeground);
	background-color: var(--themebackground);
}

aside .monthview .row .weeknumber {
	color: var(--themeforeground);
	opacity: var(--opacity-nonessential);
}

.monthview .row .col {
	width: 8rem;
	height: 7.3rem;
	padding: 0.1rem;
	text-align: right;
	overflow: hidden;
	position: relative;
	background-color: var(--themebackground);
	border: 0.05rem solid var(--pagebackground);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}

.loggedin:not(.anonymous):not(.noaccess) .monthview:not(.calendar-aside) .row .col:hover
{
	opacity: 1;
	cursor: pointer;
	border-color: var(--bannerbackground);
}

.monthview:not(.calendar-aside) .row .col:hover .top-container
{
	color: var(--themeforeground);
	background-color: var(--themebackground);
}
.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover .top-container .day
{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding-top: 0.1rem; /* ??? */
	padding-right:0.3em; /* ??? */
	display: block;
	color: var(--themeforeground);
	background-color: var(--themebackground);
}

.monthview:not(.calendar-aside) .row .currentday.col:not(.hasevents):hover .top-container .day
{
	font-weight: bold;
}

.anonymous .btn-add-event-modal, .noaccess .btn-add-event-modal
{
	cursor: not-allowed;
}

.loggedin:not(.anonymous):not(.noaccess) .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before
{
	content: "+";
	height: 100%;
	color: var(--linkcolor);
	font-size: 3rem;
	font-size: min(max(3rem, 10vw), 4rem);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0.25rem); /* 1/4 of the date number display at the top of the box to make the sign visually more centered to the remaining of the box */
}

.monthview:not(.calendar-aside) .row .col.currentday:hover
{
	opacity: 1;
}

.monthview .row .col a {
	text-decoration: none;

}
/* Styles for MONTH-VIEW's calendar-container ends */

/* previous and/or next month's days that are visible
in the view are shown lighter than the actual month's days */
.monthview .inactive-month
{
	opacity: 0.5;
}

/* current day is shown differently than others */

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

.monthview .row .col.currentday .day {
	font-weight: bold;
}
aside .monthview .row .col.currentday .day{
	font-weight: normal;
}
aside .monthview .row .col,
aside .monthview .calendar-container .row .col
{
	height: 3rem;
}

.loggedin:not(.anonymous):not(.noaccess) aside .monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before
{
	font-size: 2rem; /* adjust hover icon size to match the reduced height above */
	transform: translateY(0.5rem); /* visually center the icon, compromise between current date vs other dates */
}


/* Styles for MONTH-VIEW's top-container begins */
.monthview .top-container {
	padding-right: 0.2rem;
	color: #fff;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}
aside .monthview .top-container
{
	background-color: transparent;
	color: #000;
}
/* Styles for MONTH-VIEW's top-container ends */

/* Styles for MONTH-VIEW's events-container begins */

.monthview .events-container {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
}
aside .monthview .events-container
{
	text-align: center;
}
aside .monthview .events-container img.hasevents
{
	height: 0.5rem;
}

.calendar-wrapper .event
{
	font-size: 0.9rem;
	padding: 0 0.1rem;
	box-sizing: border-box;
}
.calendar-wrapper .events-container a.event-url + a.event-url div.event,
.calendar-wrapper .events-container div.more-events
{
	border-top: 1px solid #888;
}

.monthview .events-container .event.regglyph span:first-of-type
{
	padding-left: 0rem;
}

.calendar-wrapper .remote-event
{
	background-color: var(--personmenu-bg-color);
}

.monthview .events-container .time
{
	text-align: center;
	font-weight: bold;
}

.monthview .events-container .heading
{
	text-align: center;
	margin-left: 0.2rem;
}

.monthview .events-container a
{
	text-decoration: none;
	color: var(--themetextcolor);
}

.monthview .events-container .more-events
{
	font-size: 0.8em;
	color: var(--themetextcolor);
	display: flex;
	align-items: flex-start;
	margin-left: 0.1rem;
}

/* Styles for MONTH-VIEW's events-container ends */

/* Styles for MONTH-VIEW's bottom-container begins */

.monthview .bottom-container
{
	position: absolute;
	bottom: 0;
	right: 0.1rem;
	text-align: right;
	height: 1rem;
	padding-bottom: 0.2rem;
	opacity: 0.5;
}

.monthview .bottom-container .add-event{
	padding-left: 2rem;
}

/* Styles for MONTH-VIEW's bottom-container ends */
/* Styles for MONTH-VIEW ends */


/* Styles for WEEK- and DAY-VIEWs' header-container begins */
.dayview a, .weekview a {
	color: var(--themetextcolor);
	text-decoration: none;
}
.header-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	background: #d9d9d9;
	min-height: 1.7rem;
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
}

.header-container .weeknumber-container {
	font-size: 1em;
	color: var(--themetextcolor);
}

.header-container .weeknumber-container .text {
	font-size: 0.8em;
	margin-right: 0.15rem;
}

.header-container .weeknumber-container .number {
	font-size: 1.1em;
}

/* Styles for WEEK- and DAY-VIEWs' header-container ends */

/* Styles for WEEK- and DAY-VIEWs' leftmost-divs (weeknumber and times) begins */

.leftmost {
	min-width: 2.9rem;
	text-align: center;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	box-sizing: border-box;
	font-size: 0.85em;
}

/* Styles for WEEK- and DAY-VIEWs' leftmost-divs (weeknumber and times) ends */

/* Styles for WEEK- and DAY-VIEWs' scroll-viewer begins */

.scroll-viewer {
	max-height: 540px;
	overflow-x: hidden;
	overflow-y: auto;
}

.scroll-viewer .calendar-content {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
}

.scroll-viewer .calendar-content .lines-container {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.scroll-viewer .calendar-content .lines-container .line {
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
	position: relative;
}

.scroll-viewer .calendar-content .event {
	border-radius: 0.2rem;
	width: 100%;
	overflow: hidden;
	position: absolute;
	min-height: 30px;
}

.scroll-viewer .calendar-content .event .details {
	padding: 0.2rem 0 0 0.3rem;
	font-size: 1rem;
}

.scroll-viewer .calendar-content .event .details .time {
	text-align: center;
	font-weight: bold;
}

.scroll-viewer .calendar-content .event .details .heading {
	text-align: center;
}

.scroll-viewer .calendar-content .event .details span {
	vertical-align: middle;
}

.scroll-viewer .calendar-content .times-container {
	height: 100%;
	background: #f3f3f3;
}

.scroll-viewer .calendar-content .times-container .time
{
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #c8c8c8;
	box-sizing: border-box;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.weekview .time,
.weekview .line,
.dayview .time,
.dayview .line
{
	height: 60px;
}

.scroll-viewer .calendar-content .add-event
{
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	z-index: 1;
	opacity: 0.5;
	height: 18px;
}
.anonymous .scroll-viewer .calendar-content .add-event img, .noaccess .scroll-viewer .calendar-content .add-event img  {
	display:none
}
.scroll-viewer .calendar-content .add-event img {
	max-width: 82%;
	text-decoration: none;
	color: var(--themetextcolor);
	font-size: 0.9em;
}

.calendar-wrapper .weekview .event,
.calendar-wrapper .dayview .event
{
	box-shadow: inset 0 0 0 1px #0a7cc3;
	border-radius: 0.1rem;
	background-color: rgba(164, 219, 255, 0.7);
	margin-bottom: 0.0625rem;
}

/* Styles for WEEK- and DAY-VIEWs' scroll-viewer ends */

/* Styles for WEEK-VIEW's header-container begins */

.weekview .header-container .weekday-header {
	display: flex;
	flex: 1;
}

.weekviewheader{
	width: 100%;
}

.weekview .header-container .weekday-header .weekday {
	min-height: 25px;
	font-size: 0.97em;
	border-right: 1px solid #c8c8c8;
	justify-content: center;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	text-align: center;
	align-items: center;
	background-color: var(--reversethemebackground);
	color: var(--reversethemeforeground);
}

.weekview .header-container .weekday-header .weekday a,
.weekview .header-container .weekday-header .weekday a:link,
.weekview .header-container .weekday-header .weekday a:visited
{
	color: var(--reverselinkforeground);
}


.weekview .weekday .label {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.weekview .header-container .weekday-header .currentday
{
	background-color: var(--pagebackground);
}

.weekview .header-container .weekday-header .currentday  a,
.weekview .header-container .weekday-header .currentday  a:link,
.weekview .header-container .weekday-header .currentday  a:visited
{
	color: var(--linkcoloremphasized);
}

.weekview .header-container .weekday-header .weekday:last-of-type {
	margin-right: 17px;
	border-right: 1px solid #ccc;
}

.weekview .header-container .weekday-header .weekday .text {
	margin-right: 0.2rem;
}

.weekview .header-container .weekday-header .weekday .number {
	word-wrap: normal;
}

/* Styles for WEEK-VIEW's header-container ends */

/* Styles for WEEK-VIEW's scroll-viewer begins */

.weekview .scroll-viewer .calendar-content .days-container {
	display: flex;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.weekview .scroll-viewer .calendar-content .days-container .day-container {
	border-right: 1px solid #c8c8c8;
	height: 100%;
	display: flex;
	flex-grow: 1;
	position: relative;
	text-align: left;
}

.weekview .scroll-viewer .calendar-content .lines-container {
	position: absolute;
}

/* Styles for WEEK-VIEW's scroll-viewer ends */

/* Styles for DAY-VIEWs' scroll-viewer begins */
.dayview .scroll-viewer {
	border-top: 1px solid #c8c8c8;
}

.dayview .scroll-viewer .calendar-content .day-container {
	flex-grow: 1;
	border-right: 1px solid #c8c8c8;
	height: 100%;
	flex-basis: 0;
	overflow: hidden;
	position: relative;
}

.dayview .scroll-viewer .calendar-content .lines-container {
	border-right: 1px solid #c8c8c8;
	text-align: left;
}

.dayview .scroll-viewer .calendar-content .add-event {
	bottom: 0.2rem;
}

/* Styles for DAY-VIEWs' scroll-viewer ends */
fieldset.eventcolors
{
	display: grid;
	grid-template-columns: repeat(7, 3rem);
	grid-template-rows: auto auto;
	column-gap: var(--gap);
	row-gap: var(--gap);
	justify-items: start;
	align-content: start;
}

fieldset.eventcolors label span
{
	display: inline-block;
	height: var(--icon-size);
	min-width: var(--icon-size);
	line-height: var(--icon-size);
	color: var(--calendar-eventtextcolorlight);
	border: solid var(--linewidth);
	text-align: center;
	border-radius: var(--buttonradius);
}

fieldset.eventcolors input[type=radio]
{
	display: none;
}

fieldset.eventcolors label input[type=radio] + span:before
{
	content: "\2714";
	font-size: 1.8rem;
	font-weight: normal;
	font-family: var(--fontawesome);
	width: var(--icon-size);
	height: var(--icon-size);
	color: transparent;
	transition: .2s;
	text-align: center;
	line-height: var(--icon-size);
	vertical-align: middle;
}

fieldset.eventcolors label input[type=radio] + span:active:before
{
	transform: scale(0);
}

fieldset.eventcolors label input[type=radio]:checked + span:before
{
	background-color: inherit;
	border-color: inherit;
	color: inherit;
}

fieldset.eventcolors span.color1
/*div.event.color1,
.calendar-wrapper .weekview .event.color1:not(.remote-event), .calendar-wrapper .dayview .event.color1:not(.remote-event)*/
{
	background-color: var(--calendar-eventbackgroundcolor1);
	border-color: var(--calendar-eventtextcolordark);
	color: var(--calendar-eventtextcolordark);
}

fieldset.eventcolors span.color2,
div.event.color2,
.calendar-wrapper .weekview .event.color2:not(.remote-event), .calendar-wrapper .dayview .event.color2:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor2);
	border-color: var(--calendar-eventbackgroundcolor2);
	color: var(--calendar-eventtextcolorlight);
}

fieldset.eventcolors span.color3,
div.event.color3,
.calendar-wrapper .weekview .event.color3:not(.remote-event), .calendar-wrapper .dayview .event.color3:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor3);
	border-color: var(--calendar-eventbackgroundcolor3);
	color: var(--calendar-eventtextcolordark);
}

fieldset.eventcolors span.color4,
div.event.color4,
.calendar-wrapper .weekview .event.color4:not(.remote-event), .calendar-wrapper .dayview .event.color4:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor4);
	border-color: var(--calendar-eventbackgroundcolor4);
	color: var(--calendar-eventtextcolordark);
}

fieldset.eventcolors span.color5,
div.event.color5,
.calendar-wrapper .weekview .event.color5:not(.remote-event), .calendar-wrapper .dayview .event.color5:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor5);
	border-color: var(--calendar-eventbackgroundcolor5);
	color: var(--calendar-eventtextcolorlight);
}

fieldset.eventcolors span.color6,
div.event.color6,
.calendar-wrapper .weekview .event.color6:not(.remote-event), .calendar-wrapper .dayview .event.color6:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor6);
	border-color: var(--calendar-eventbackgroundcolor6);
	color: var(--calendar-eventtextcolorlight);
}

fieldset.eventcolors span.color7,
div.event.color7,
.calendar-wrapper .weekview .event.color7:not(.remote-event), .calendar-wrapper .dayview .event.color7:not(.remote-event)
{
	background-color: var(--calendar-eventbackgroundcolor7);
	border-color: var(--calendar-eventbackgroundcolor7);
	color: var(--calendar-eventtextcolorlight);
}

.calendar.agenda article.item.local
{
	border-left: solid 0.5rem var(--calendar-eventbackgroundcolor1);
	margin-bottom: var(--gap);
}
.calendar.agenda article.item.local.color1
{
	border-color: var(--calendar-eventbackgroundcolor1);
}
.calendar.agenda article.item.local.color2
{
	border-color: var(--calendar-eventbackgroundcolor2);
}
.calendar.agenda article.item.local.color3
{
	border-color: var(--calendar-eventbackgroundcolor3);
}
.calendar.agenda article.item.local.color4
{
	border-color: var(--calendar-eventbackgroundcolor4);
}
.calendar.agenda article.item.local.color5
{
	border-color: var(--calendar-eventbackgroundcolor5);
}
.calendar.agenda article.item.local.color6
{
	border-color: var(--calendar-eventbackgroundcolor6);
}
.calendar.agenda article.item.local.color7
{
	border-color: var(--calendar-eventbackgroundcolor7);
}


/* Styles for JS MODAL begins */
button.close:hover
{
	box-shadow: none;
	background: #eee;
}
.required {
	border: 2px solid #f00;
}

.warning-text, .notification-text
{
	display:none;
	background: transparent;
	border: solid var(--themewarning) var(--linewidth);
	background: var(--themewarning) linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
	color: #333;
	padding: calc(0.5 * var(--gap)) var(--gap);
	border-radius: var(--radius);
	margin-top:0;
}
.android .add-event-modal {
	position: absolute;
}
.add-event-modal {
	display: none;
	position: fixed;
	z-index: 11; /* position modal element above popup menus if both co-exist */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	background-color: rgba(0, 0, 0, 0.4);
}

.add-event-modal .content-wrapper
{
	display: flex;
	height: 100%;
	align-items:center;
	overflow: auto;
	box-sizing: border-box;
	padding-top: 4rem;
}

.add-event-modal .content-wrapper .content {
	background-color: #fefefe;
	margin: auto;
	border: 1px solid #888;
	border-radius: 0.1rem;
	box-shadow: 0 0 0.6rem 0.2rem #808080;
	padding: 0.2rem 1rem 0.2rem 1rem;
	width: 100%;
	max-width: 25.63rem;
}

.add-event-modal .confirm-exit, .edit-event-modal .confirm-exit{
	display: none;
}

.add-event-modal .content-wrapper .content .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.8rem;
}

.add-event-modal .content-wrapper .content .header .close:hover {
	color: var(--themetextcolor);
	cursor: pointer;
}

.add-event-modal .content-wrapper .content .row {
	display: flex;
	margin-bottom: 0.7rem;
	align-items: center;
	justify-content: space-between;
}

.add-event-modal .content-wrapper .content .notification-container
{
	display: block;
}

.add-event-modal .content-wrapper .content .row .label-container {
	width: auto;
}

.add-event-modal .content-wrapper .content .row .input-container {
	display: flex;
	flex-grow: 1;
	width: 100%;
	max-width: 300px;
	gap: calc(0.25 * var(--gap));
}

.add-event-modal .content-wrapper .content .row .input-container input.t,
.add-event-modal .content-wrapper .content .row .input-container input.n
{
	width: 100%;
	padding: 0.3rem 0.2rem;
	font-size:1rem;
}

.add-event-modal .content-wrapper .content .row .input-container input[type="time"] {
	max-width: 40%;
}
.add-event-modal .content-wrapper .content .row .input-container input[type="date"] {
	max-width: 60%;
}

.add-event-modal .content-wrapper .content .row .input-container input:disabled{
	cursor: not-allowed;
	background-color: rgb(235, 235, 228);
	color: rgb(84, 84, 84);
}

.add-event-modal .content-wrapper .content .row .buttons-container {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	margin-top: 0.2rem;
}

.add-event-modal .content-wrapper .content .row .buttons-container .secondary {
	color:var(--themetextcolor);
	background: #fff;
	margin-left: calc(0.5 * var(--gap));
	border:1px solid #414141;
}

.add-event-modal .content-wrapper .content .row:last-of-type {
	margin-top: 1rem;
}
.add-event-modal .content-wrapper .content .row .label-container label {
	font-size: 1rem;
	cursor: text;
}

.day-events .modal-event-list .eventinfo
{
	display: flex;
	justify-content: space-between;
}
.day-events .modal-event-list .eventinfo .time
{
	font-size: 0.8rem;
	flex-basis: 29%;
}
.day-events .modal-event-list .eventinfo .summary
{
	flex-basis: 70%;
}
.day-events .registrationscount
{
	margin-left: 30%;
}

.modal-event-list .regglyph
{
	font-size: 0.8rem;
}
/* Styles for JS MODAL ends */
/*
	Cropper styles
 */
/*
	cropperpreview needs to match main.js
	var canvas = cropper.getCroppedCanvas({
						width: 256, < this
						height: 256 < and this
					});
 */
.cropperpreview
{
	width: 256px;
	height: 256px;
	overflow: hidden;
	aspect-ratio: 1;
	margin: var(--gap);
}
.cropperround
{
	border-radius: 50%;
}

.croppergrouper
{
	display: flex;
	margin: 1rem 0;
}

.tempcroppercontainer
{
	max-width: 75%;
}

.previewrow
{
	min-width: 20%;
	max-width: 23%;
}

.fa,
.fas
{
	font-family: var(--fontawesome);
	font-weight: 900;
	font-style: normal;
}

.fa-trash-can:before
{
	content: "\f2ed";
}
/** Styles for voice recording start **/
aside .voicerecordercontainer
{
	font-size: 1rem;
}
div.recordoutputcontainer
{
	align-content: end;
	padding-top: 1rem;
}
div.recordtoolcontainer
{
	white-space: nowrap;
	text-align: center;
	min-height: 11rem;
}
.audiorecording-help-text
{
	margin-top: 2rem;
}

.entryform
{
	padding: 1rem;
	background: #E4E8EB;
	border: 1px solid #dbdbdb;
	margin-bottom: 1rem;
}
.entryform .form-group
{
	display: flex;
	flex-direction: column;
}
.form-group label
{
	margin-bottom: .3em;
	color: #333;
}
.form-control
{
	display: block;
	width: 100%;
	font-size: 1rem;
	background-color: #fff;
	background-clip: padding-box;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	border: 1px solid #999;
	border-radius: 0.75rem;
	color: #000 !important;
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0;
}
.recordtoolcontainer .form-group
{
	text-align: left;
}
.form-group
{
	margin-bottom: 1.5rem;
}
div.recordtoolcontainer select
{
	margin-right: 0.3rem;
	width: 100%;
	display: block;
}

i.fas.fa-arrow-circle-up::before,
i.fas.fa-circle-arrow-up::before
{
	content: "\f0aa";
}

i.fas.fa-arrow-circle-up,
i.fas.fa-circle-arrow-up
{
	font-style: normal;
	font-size: 1.5rem;
	margin-left: 1rem;
}

i.fa.fa-check::before
{
	content: "\f00c";
}
i.fa.fa-divide::before
{
	/* Atleast in firefox \f529 is not working, so using ÷ instead */
	content: "÷";
}
i.fa.fa-minus::before
{
	content: "\f068";
}
i.fa.fa-xmark::before
{
	content: "\f00d";
}
i.fa.fa-check.correct
{
	color: rgb(0,128,0);
	font-weight: bold;
	font-size: 1.2rem;
}
i.fa.fa-divide.partially-correct
{
	color: rgb(255, 165, 0);
	font-weight: bold;
	font-size: 1.2rem;
}

i.fa.fa-minus.incorrect
{
	color: rgb(255, 0, 0);
	font-weight: bold;
	font-size: 1.2rem;
}
.startrecording i.fa-microphone,
.pauserecording i.fa-microphone,
.newstartrecording i.fa-refresh,
.pauserecording i.fa-pause,
.stoprecording i.fa-stop
{
	font-size: 1.5rem;
}

button.newstartrecording
{
	color: #002b54;
	background-color: var(--modalsecondarybuttonbackground-color);
}
button.stoprecording
{
	background-color: rgb(203, 0, 0);
}

button.stoprecording:disabled,
button.stoprecording:disabled:hover
{
	background-color: rgba(203, 0, 0,  0.15);
}
button.startrecording:disabled,
button.pauserecording.off,
button.pauserecording.on
{
	background: #fff;
}

button.pauserecording.off i.fa-pause,
button.pauserecording.on i.fa-microphone
{
	color: #002b54;
}
button.pauserecording.off:hover i.fa-pause,
button.pauserecording.on:hover i.fa-microphone
{
	color: var(--modalsecondarybuttonbackground-color);
}
button.startrecording,
button.pauserecording,
button.stoprecording,
button.newstartrecording
{
	position: relative;
	padding: 0;
	width: 4rem;
	height: 4rem;
	margin-right: 1rem;
}
button.pauserecording.off:hover,
button.pauserecording.on:hover,
button.startrecording:hover
{
	background: var(--modalsecondarybuttonhoverbackground);
}
button.newstartrecording:hover
{
	background: var(--modalsecondarybuttonhoverbackground);
	color: var(--modalwhite);
}
button.stoprecording:hover
{
	background-color: #a12512;
}

button.startrecording,
button.stoprecording,
button.pauserecording,
button.newstartrecording,
button.startrecording:hover,
button.stoprecording:hover,
button.pauserecording:hover,
button.newstartrecording:hover
{
	border: solid var(--hairlinewidth) var(--linkcolor);
}
.recordtoolcontainer button .button-bottom-text
{
	position: absolute;
	top: 3.75rem;
	color: #333;
	display: block;
	width: 4rem;
	text-align: center;
	line-height: 2rem;
	left: 0rem;
}

.recordtoolcontainer button.newstartrecording .button-bottom-text
{
	width: auto;
	left: -0.5rem;
}

.btn.btn-primary.btn-custom-modal:disabled
{
	background: var(--buttonbackgrounddisabled) !important;
	color: var(--buttoncolordisabled) !important;
	border: none;
	box-shadow: none;
	opacity: 1;
}

span.beta-feature
{
	background-color: rgb(203, 0, 0);
	color: rgb(238, 238, 238);
	font-weight: bold;
	font-size: 0.7rem;
	padding: 0.1rem 0.5rem;
	border-radius: 0.2rem;
	z-index: 1;
}

.createnew .list.enclose ul li > div > span.beta-feature
{
	position: relative;
	top: -0.3rem;
	left: 0rem;
}

@media (min-width: 60rem)
{
	aside ul.buttonslist li span.beta-feature
	{
		top: -2.9rem;
		left: 15.4rem;
	}
	div[data-chartsaasummarymodal] > .modal-dialog
	{
		min-width: 60vw;
		max-width: 70vw;
	}
}
div.recordertimer
{
	width: 100%;
	text-align: center;
}
div.audiorecoding-help-text
{
	font-size: 0.8rem;
	height: inherit;
}
canvas.visualizer
{
	height: 4rem;
	width: 100%;
	text-align: center;
	background-color: #fffcf2;
}
/** Voice recording end **/

button.refillform::before
{
	font-family: var(--fontawesome);
	font-weight: 900;
	margin-right: calc(0.5 * var(--gap));
	content: "\f2ea";
	color: #fff;
}

/* Styles for MEDIA-QUERYs begins */
@media only screen and (max-width: 1100px) {
	.calendar-header {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.calendar-header .view-container {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 1;
	}

	.calendar-header .navigation-container {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 2;
	}

	.calendar-header .navigation-date {
		justify-content: center;
		margin: 0 0 0.6rem 0;
		width: 100%;
		order: 0;
	}

	aside .dayview .calendar-header .navigation-container {
		order: 0;
		margin-right: 0.1rem;
	}

	.monthview .calendar-container {
		font-size: 1em;
	}

	.monthview .calendar-container .row .col {
		height: 7rem;
	}

	.monthview .add-event img {
		max-width: 80%;
	}
}

@media only screen and (max-width: 1018px) {
	.weekday span {
		display: flex;
		flex-direction: column;
	}
}

@media only screen and (max-width: 980px) {
	.weekview .scroll-viewer .calendar-content .event {
	white-space: nowrap;
	}
	.weekview .scroll-viewer .calendar-content .event .details .time {
	display: none;
	}

}

@media only screen and (max-width: 960px) {
	.monthview .events-container .event {
		margin-bottom: 0.05rem;
	}

	.weekview .weekday .label {
		flex-direction: column;
	}

	.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before {
		font-size: 6rem;
	}
}

@media only screen and (max-width: 600px) {
	.monthview .calendar-container {
		font-size: 0.9em;
	}

	.monthview .bottom-container {
	padding-bottom: 0;
	}

	.monthview .calendar-container .row .col {
		height: 6rem;
	}

	.monthview:not(.calendar-aside) .row .col:not(.hasevents):hover::before {
		font-size: 4rem;
	}

	.add-event-modal .content-wrapper {
		display: flex;
		margin: 0.8rem;
	}

	.add-event-modal .content-wrapper .content {
		width: auto;
		position: static;
		margin: auto;
		align-items: stretch;
		max-width:320px;
	}

	.add-event-modal .content-wrapper .content .row {
		flex-direction: column;
		align-items: stretch;
	}

	.add-event-modal .content-wrapper .content .row .input-container input[type="time"] {
		max-width: 40%;
	}

	.add-event-modal .content-wrapper .content .row .buttons-container {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 0.2rem;
	}

	.add-event-modal .content-wrapper .content .row .input-container {
		max-width: 100%;
	}
	.nav > li > a
	{
		padding: var(--buttonpaddingnnarrow);
	}
	fieldset.eventcolors
	{
		grid-template-columns: repeat(4, 3rem);
	}
}

@media only screen and (max-width: 424px) {
	.calendar-container .row .weeknumber {
		display: none;
	}

	.calendar-container {
	font-size: 0.9rem;
	}

	.leftmost {
		min-width: 2.4rem;
	}
}
@media only screen and (max-width: 20rem) {
	.add-event-modal .content-wrapper {
		margin: 0;
	}
	.add-event-modal .content-wrapper .content{
		padding-left: 0.4rem;
	}
}

/* Dropzone.js style fixes */
html .dropzone .dz-preview .dz-error-message
{
    top: 150px;
}

.dropzone .dz-message .dz-button
{
	box-shadow: none;
}

/* Cropper mobile styles */
@media all and (max-width: 38rem)
{
	.croppergrouper
	{
		flex-wrap: wrap;
	}
	.tempcroppercontainer
	{
		max-width: 100%;
	}
	.previewrow
	{
		display:flex;
		flex-wrap: nowrap;
		min-width: 100%;
	}
	.cropperpreview
	{
		max-width: 35%;
	}
	.assignmentstypesessayassignmentsubmission div.answer-row-questions
	{
		display: block;
	}
	.assignmentstypesessayassignmentsubmission div.answer-row-questions div.points div.t label
	{
		display: inline;
	}
	.assignmentstypesessayassignmentsubmission div.answer-row-questions div.points
	{
		margin: 0;
		padding: 0;
		text-align: right;
	}
	i.fa.fa-check.correct
	{
		font-size: 1rem;
	}
	i.fa.fa-divide.partially-correct
	{
		font-size: 1rem;
	}

	i.fa.fa-minus.incorrect
	{
		font-size: 1rem;
	}
	div.answer-row-questions,
	div.ea-questions-grid-wrapper
	{
		display: block;
	}
	div.points-remove-wrapper div.t.points
	{
		margin: 0;
	}
	div.answer-row-questions div.answer-row-points
	{
		text-align: right;
	}
	div.answers-and-points
	{
		grid-column: none;
	}
}

/* Styles for MEDIA-QUERYs ends */