/************************************/
/*** Variables                    ***/
/************************************/

:root {
	
/* Fonts */	
	--global-font-family:		'Ubuntu', sans-serif;			/* Used for most GUI elements. */
	--global-font-size: 			1em;									/* Meant to set the base font size to 15px in most browsers. */
	--global-line-height:		140%;									/* Best value depends on the font. */

	--input-font-family:			'Open Sans Semibold';			/* Used for <input> and <textarea> elements. */
	--input-font-size:			95%;									/* Can be used to scale the input text size. */	
	--input-line-height:			inherit;								/* Best value depends on the font. */

	--h1-font-family:				'Ubuntu', serif;					/* Used for h1 headings. */
	--h1-font-size:				190%;									/* The relative size of h1 headings. */	
	--h1-line-height:				110%;									/* Best value depends on the font. */

	--title-font-family:			'Ubuntu Condensed', serif;		/* Used for titles and h2 headings. */
	--title-font-size:			150%;									/* The relative size of titles and h2 headings. */	
	--title-line-height:			inherit;								/* Best value depends on the font. */

	--mono-font-family:			'Dejavu Mono', monospace;		/* Used for the 'Published URL' display */
	--mono-font-size:				90%;									/* Can be used to scale the monospace text size. */	

/* Special color classes */
	--blue-color:							#2065BF;
	--blue-gradient-top:					#55789E;
	--blue-gradient-bottom:				#22384F;
	--blue-gradient-top-lit:			#5090E6;
	--blue-gradient-bottom-lit:		#314C6E;
	--blue-backgnd:						#EBF5FF;

	--red-color:							#C70606;
	--red-gradient-top:					#B33D20;
	--red-gradient-bottom:				#510F00;
	--red-gradient-top-lit:				#CC5133;
	--red-gradient-bottom-lit:			#7A1C07;
	--red-backgnd:							#FDE9E9;

	--green-color:							#42902F;
	--green-gradient-top:				#468046;
	--green-gradient-bottom:			#1E401E;
	--green-gradient-top-lit:			#84CA73;
	--green-gradient-bottom-lit:		#437339;
	--green-backgnd:						#F2FAF0;

	--cyan-color:							#2F8090;
	--cyan-gradient-top:					#497E8A;
	--cyan-gradient-bottom:				#1C4145;
	--cyan-gradient-top-lit:			#62949E;
	--cyan-gradient-bottom-lit:		#325F63;
	--cyan-backgnd:						#EEFAFA;
	
	--gray-color:							#595959;
	--gray-gradient-top:					#6B6B6B;
	--gray-gradient-bottom:				#2B2B2B;
	--gray-gradient-top-lit:			#999999;
	--gray-gradient-bottom-lit:		#4F4F4F;
	--gray-backgnd:						#F4F4F4;

/* Global colors and backgrounds */
	--global-color:				#1F2920;								/* Used for all GUI elements. */
	--global-backgnd:				white;
	--input-backgnd:				white;								/* Used for <input> and <textarea> elements. */
	--help-backgnd:				#FFFFFF;								/* Background for help pop-ups */
	--title-backgnd:				#EEEEEE;

	--global-border-color:		gray;									/* Borders around widgets, inputs, windows and submenus. */
	--input-border-color:		gray;									/* Borders around widgets, inputs, windows and submenus. */
	--global-line-color: 		#B5B5B5;								/* Used for separator lines, less contrasting than borders. */
 
/* Widgets (buttons, <select>, checkbox overlays; the border radius is also applied to <input> and <textarea> elements) */	
	--widget-color:				inherit;
	--widget-backgnd:				linear-gradient(to bottom, #E6E6E5, #D1D1CF);
	--widget-disabled-color:	gray;									/* Text in disabled buttons and other widgets. */
	--widget-disabled-backgnd: lightgray;
	--widget-hover-backgnd:		linear-gradient(to bottom, #FAFAF9, #E6E6E3);
	--widget-active-backgnd:	linear-gradient(to bottom, #B8B8B8, #C5C5C5);
	--widget-border-radius:		4px;
	--widget-shadow: 				1px 1px 1px rgba(128, 128, 128, 0.7);

/* Sections */
	--menu-backgnd:			#EEEEEE;								/* The background for drop-down menus */

/* Modal windows and submenus */
	--window-backgnd: 			#FFFFFF;
	--window-border-radius:		8px;
	--window-shadow:		 		4px 4px 10px 2px rgba(0, 0, 0, 0.5);

/* Covers, i.e. the semi-transparent overlays used to deactivate parts of the application */
	--cover-backgnd:				rgba(0, 0, 0, 0.7);
	
/* The left and right margin around slides */
	--slide-margin-hor:			20px;

}

:root[data-page='home'] {
	--selected-color:				white;								/* For selected list entries. */
	--selected-backgnd:			linear-gradient(to bottom, var(--cyan-gradient-top), var(--cyan-gradient-bottom));	/* The background for the above. */
}

:root[data-page='teachers'] {
	--selected-color:				white;								/* For selected list entries. */
	--selected-backgnd:			linear-gradient(to bottom, var(--blue-gradient-top), var(--blue-gradient-bottom));	/* The background for the above. */
}

:root[data-page='institutions'] {
	--selected-color:				white;								/* For selected list entries. */
	--selected-backgnd:			linear-gradient(to bottom, var(--gray-gradient-top), var(--gray-gradient-bottom));	/* The background for the above. */
}

:root[data-page='students'] {
	--selected-color:				white;								/* For selected list entries. */
	--selected-backgnd:			linear-gradient(to bottom, var(--green-gradient-top), var(--green-gradient-bottom));	/* The background for the above. */
}

/************************************/
/*** Fonts                        ***/
/************************************/

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-b-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-b-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-bi-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-bi-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-r-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-ri-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-ri-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Ubuntu Condensed';
    src: url('./fonts/ubuntu-c-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-c-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Open Sans Semibold';
	src: url('./fonts/opensans-semibold.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
    font-family: 'Dejavu Mono';
    src: url('./fonts/dejavu-mono.woff') format('woff'),
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Dejavu Mono';
    src: url('./fonts/dejavu-mono-bold.woff') format('woff'),
    font-weight: bold;
    font-style: normal;
}

/*** Basic layout ***/

* {
  box-sizing: border-box;
}

html {
	height: 100%;
	overflow: hidden;
	font-family: var(--global-font-family);
	font-size: var(--global-font-size);
	line-height: var(--global-line-height); 
	background: var(--global-backgnd);
}

body {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.page {
	overflow: hidden;
}

/*** Elements ***/

h2 {
	font-family: 'Ubuntu Condensed';
	font-size: 200%;
	line-height: 120%;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0.2em 0 0.5em 0;
}

h3 {
	font-size: 110%;
	font-weight: bold;
	margin: 0.6em 0 1em 0;
}

h4 {
	font-size: 100%;
	font-weight: bold;
	margin: 1em 0 0.5em 0;
}

p {
	margin: 0 0.5em 0;
}


p, ul, p > br, li {
	margin: 0 0 0.5em 0;
}

a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover, a:hover * {
	text-decoration: underline;
}

a .fa, a:hover .fa {
	text-decoration: none;
	margin-right: 0.5em;
}

.contact a:hover .fa {
	text-decoration: underline;
}

ul {
	margin: 0;
	padding: 0 1.2em;
}

li {
	margin: 0.5em 0.5em;
}

table {
	border-collapse: collapse;
}

input, textarea, optgroup, option {
	font-family: var(--input-font-family);
	font-size: var(--input-font-size);
	line-height: var(--input-line-height);
}

input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
input[type="date"], textarea {
	background: var(--input-backgnd); 
	margin: 0.2em;
	padding: 0.3em 0.5em 0.25em 0.5em;
	border: 1px solid var(--global-border-color);
	border-radius: var(--widget-border-radius);
}

input[type="checkbox"], input[type="radio"] {
	margin: 0 0.7em 0.2em 0.4em;
	vertical-align: middle;
	transform: scale(1.5);
}

:root[data-page='teachers'] input[type="checkbox"] {
	accent-color: var(--blue-color);
}

:root[data-page='institutions'] input[type="checkbox"] {
	accent-color: var(--gray-color);
}

drop-down {
	font-family: var(--global-font-family);
	font-size: 1rem;
	line-height: var(--global-line-height); 
	font-weight: normal;
	color: var(--global-color);
   background: var(--widget-backgnd);
	margin: 0.2em;
	height: 2em;
	padding: 0.3em 0.5em 0em 0.5em;
	border: 1px solid var(--global-border-color);
	border-radius: var(--widget-border-radius);
	box-shadow: var(--widget-shadow);
}

drop-down:hover {
   background: var(--widget-hover-backgnd); 
}

.option {
	line-height: 200%;
}

.button {
	font-family: var(--title-font-family);
	font-size: 1.2rem;
	letter-spacing: 0.3px;
	line-height: var(--global-line-height);
	display: inline-block;
	color: var(--global-color); 
	background: var(--widget-backgnd);
	padding: 0.3em 0.8em;
	border: 1px solid var(--global-border-color);
	box-shadow: var(--widget-shadow);
	margin: 1em 0.2em 0.4em 0em;
	border-radius: var(--widget-border-radius);
	text-align: center;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
	cursor: default;
}

.button.disabled, select:disabled {
	background: var(--widget-disabled-backgnd) !important;
	color: var(--global-border-color) !important;
	box-shadow: none !important;
}

.button:not(.disabled):hover {
	background: var(--widget-hover-backgnd);
	color: var(--global-color);
	border: 1px solid var(--global-border-color);
	box-shadow: var(--widget-shadow);
}

.button:not(.disabled):active, .button:not(.disabled).active {
	background: var(--widget-active-backgnd);
	box-shadow: none;
}

.button.blue {
	background: linear-gradient(to bottom, var(--blue-gradient-top), var(--blue-gradient-bottom));
	color: white;
}

.button.cyan {
	background: linear-gradient(to bottom, var(--cyan-gradient-top), var(--cyan-gradient-bottom));
	color: white;
}

.button.red {
	background: linear-gradient(to bottom, var(--red-gradient-top), var(--red-gradient-bottom));
	color: white;
}

.button.green {
	background: linear-gradient(to bottom, var(--green-gradient-top), var(--green-gradient-bottom));
	color: white;
}

.button.gray {
	background: linear-gradient(to bottom, var(--gray-gradient-top), var(--gray-gradient-bottom));
	color: white;
}

.button.blue:not(.disabled):hover {
	background: linear-gradient(to bottom, var(--blue-gradient-top-lit), var(--blue-gradient-bottom-lit));
	color: white;
}

.button.cyan:not(.disabled):hover {
	background: linear-gradient(to bottom, var(--cyan-gradient-top-lit), var(--cyan-gradient-bottom-lit));
	color: white;
}

.button.red:not(.disabled):hover {
	background: linear-gradient(to bottom, var(--red-gradient-top-lit), var(--red-gradient-bottom-lit));
	color: white;
}

.button.green:not(.disabled):hover {
	background: linear-gradient(to bottom, var(--green-gradient-top-lit), var(--green-gradient-bottom-lit));
	color: white;
}

.button.gray:not(.disabled):hover {
	background: linear-gradient(to bottom, var(--gray-gradient-top-lit), var(--gray-gradient-bottom-lit));
	color: white;
}

.button.blue:not(.disabled):active {
	background: linear-gradient(to bottom, var(--blue-gradient-bottom), var(--blue-gradient-bottom-lit));
	color: white;
}

.button.cyan:not(.disabled):active {
	background: linear-gradient(to bottom, var(--cyan-gradient-bottom), var(--cyan-gradient-bottom-lit));
	color: white;
}

.button.red:not(.disabled):active {
	background: linear-gradient(to bottom, var(--red-gradient-bottom), var(--red-gradient-bottom-lit));
	color: white;
}

.button.green:not(.disabled):active {
	background: linear-gradient(to bottom, var(--green-gradient-bottom), var(--green-gradient-bottom-lit));
	color: white;
}

.button.gray:not(.disabled):active {
	background: linear-gradient(to bottom, var(--gray-gradient-bottom), var(--gray-gradient-bottom-lit));
	color: white;
}

.button .fa {
	margin-right: 0.5em;
}

.button.bare {
	background: none;
	border-color: transparent;
	box-shadow: none;
}

.checkbox, .radiobutton {
	padding: 0.15em 0.4em 0.2em 0.2em;
	border: 1px solid transparent;
}

.checkbox input, .checkbox label, .radiobutton input, .radiobutton label {
	vertical-align: middle;
}

.toolbutton {
	width: 1em;
}

.toolbutton .fa {
	margin-right: 0 !important;
}

.toolicon {
	font-size: 200%;
	text-align: center;
	color: var(--global-line-color);
}

.toolicon:hover {
	color: var(--global-color);
}

.toolicon.disabled {
	color: var(--widget-disabled-color);
	opacity: 0.3;
}

.icon {
	height: 1.5em;
	position: relative;
	top: 0.4em;
	margin-right: 0.3em;
}

.section-content table {
	width: 100%;
	margin: 0.5em 0;
	border-collapse: collapse;
}

.share-link .fa {
	font-size: 250%;
	color: var(--global-line-color);
}

.share-link:hover .fa {
	color: var(--green-color);
}

.media-link img, .media-link span {
	vertical-align: middle;
}

.media-logo {
	width: 2em;
	margin-right: 0.8em;
}

/* Header, menus and footer */

header {
	z-index: 100;
	position: sticky;
	top: 0;
	width: 100%;
	padding: 0 1em;
	background: var(--global-backgnd);
	border-bottom: 2px solid var(--global-line-color);
	display: grid;
	color: white;
	user-select: none;
}

header.small {
	box-shadow: var(--window-shadow);
	border-bottom-width: 0;
}

#app-title {
	display: inline-block;
	margin: 0.4em 0 0.5em 0; 
	font-family: var(--title-font-family);
	font-size: 200%;
	line-height: 100%;
	font-weight: normal !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: font-size 0.3s ease-in-out 0s;
	user-select: none;
	cursor: pointer;
}

#app-title.current {
	cursor: default;
	pointer-events: none;
}

header.small #app-title {
	font-size: 120%;
	transition: font-size 0.3s ease-in-out 0.1s;
}

#app-description-area {
	display: table;
	height: 100%;
	margin: 0 2em;
	padding: 0.4em 0;
	user-select: none;
}

#app-description, #app-page  {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	top: 0.02em;
}

header.small #menu {
	padding: 0;
	transition: padding 0.3s ease-in-out 0.1s;
}

.menuitem, .menureference {
	display: inline-block;
	font-family: 'Ubuntu Condensed';
	font-size: 1.2rem;
	line-height: var(--title-line-height);
	text-transform: uppercase;
	padding: 0.4em 0.5em 0.3em 0.5em;
	border-radius: var(--widget-border-radius);
	background-color: transparent;
	user-select: none;
	cursor: pointer;
}

.menureference {
	position: relative;
	left: -0.4em;
	top: 0.1em;
	padding: 0.2em 0.2em 0.2em 0.4em;
	vertical-align: bottom;
}

.menuitem:not(.current):hover {
	background-color: white;
	color: var(--global-color);
	cursor: pointer;
	transition: background-color 0.05s ease-in-out 0s;
}

.menuitem.current {
	cursor: default;
	color: #CCCCCC;
	pointer-events: none;
}

.menureference:not(:hover)::after {
	display: inline-block;
	content: ":";
	width: 0.2em;
}

.menureference:hover::after {
	display: inline-block;
	content: " ";
	width: 0.2em;
}

.menureference:hover {
	color: white;
	box-shadow: var(--widget-shadow);
}

#menubar-options {
	margin-left: 1em;
}

#language-selector-area {
	margin: 1em 0.5em 0 0;
	transition: margin 0.3s ease-in-out 0.1s;
}

header.small #language-selector-area {
	margin: 0.6em 0 0 0;
	transition: margin 0.3s ease-in-out 0.1s;
}

.language-icon {
	display: inline-block;
	height: 1.8em;
	border: 1px solid var(--global-border-color);
	transition: height 0.3s ease-in-out 0.1s;
}

header.small .language-icon {
	height: 1.1em;
	transition: height 0.3s ease-in-out 0.1s;
}

main {
	display: grid;
	overflow: hidden;
	padding: 0;
}

section {
	display: grid;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--global-line-color);
}

section:last-child {
	padding-bottom: 1em;
}

.app-logo {
	display: block;
	position: relative;
	top: 0.05em;
	height: 10em;
	margin: -0.5em 0.5em -0.3em -1em;
}

.intro h2 {
	margin-bottom: 0;
	vertical-align: top;
}

footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 2em 4em;
	padding: 0.2em 2em 4em 2em;
	background: #444444;
}

footer, footer a, footer a:hover, footer a:hover * {
	color: #FFFFFF !important;
}

footer a:not(:hover), footer a:not(:hover) * {
	text-decoration: none;
}

.footer-section {
	width: 20em;
}

.footer-section h2 {
	font-size: 140%;
	margin: 2em 0 0.7em 0;
}

/*** Pages ***/

:root[data-page='home'] header {
	background: linear-gradient(to bottom, var(--cyan-gradient-top), var(--cyan-gradient-bottom));
}

:root[data-page='home'] section:nth-child(odd) { 
	background: var(--cyan-backgnd);
}

:root[data-page='teachers'] header, .menureference.teachers:hover {
	background: linear-gradient(to bottom, var(--blue-gradient-top), var(--blue-gradient-bottom));
}

:root[data-page='teachers'] section:nth-child(odd) { 
	background: var(--blue-backgnd);
}

:root[data-page='institutions'] header, .menureference.institutions:hover {
	background: linear-gradient(to bottom, var(--gray-gradient-top), var(--gray-gradient-bottom));
}

:root[data-page='institutions'] section:nth-child(odd) { 
	background: var(--gray-backgnd);
}

:root[data-page='students'] header, .menureference.students:hover {
	background: linear-gradient(to bottom, var(--green-gradient-top), var(--green-gradient-bottom));
}

:root[data-page='students'] section:nth-child(odd) { 
	background: var(--green-backgnd);
}

:root[data-page='home'] a {
	color: var(--cyan-gradient-bottom-lit);
}
:root[data-page='home'] a:hover, :root[data-page='teachers'] a:hover * {
	color: var(--cyan-color);	
}

:root[data-page='teachers'] a {
	color: var(--blue-gradient-bottom-lit);
}
:root[data-page='teachers'] a:hover, :root[data-page='teachers'] a:hover * {
	color: var(--blue-color);	
}

:root[data-page='institutions'] a {
	color: var(--gray-gradient-bottom-lit);
}
:root[data-page='institutions'] a:hover, :root[data-page='institutions'] a:hover * {
	color: var(--gray-color);	
}

:root[data-page='students'] a {
	color: var(--green-gradient-bottom-lit);
}
:root[data-page='students'] a:hover, :root[data-page='students'] a:hover * {
	color: var(--green-color);	
}

/*** Menus ***/

.flag {
	height: 1em;
	position: relative;
	top: 0.17em;
	margin-right: 0.3em;
}

.dropdown {
	position: relative;
}

.dropdown .submenu {
	display: block;
	opacity: 0;
	pointer-events: none;
}

.dropdown:not(.disabled):hover .submenu {
	pointer-events: auto;
	animation: 0.3s linear 0s 1 normal forwards appear;
	opacity: 1;
}

.submenu {
	position: absolute;
	width: max-content;
	left: -0.5em;
	margin-top: -1px;
	z-index: 200;
	padding: 0;
	color: var(--global-color);
	background: var(--menu-backgnd);
	border: 1px solid var(--global-border-color);
	box-shadow: var(--window-shadow);
}

.submenu.right {
	left: auto;
	right: -0.2em;
}

#language-menu {
	margin-top: -4px;
	z-index: 400;
}

.submenu-listheader {
	height: max-content;
	text-align: center;
	margin: 0;
	padding: 0.2em 1em;
	border-bottom: 1px solid var(--global-line-color);
	cursor: default;
	user-select: none;
}

.submenu ul {
	list-style: none;
	cursor: default;
	text-align: left;
	background: var(--input-backgnd);
	margin: 1px;
	padding: 0;
}

.submenu ul > li {
	margin: 2px 1px;
	padding: 0.3em 0.6em;
	cursor: default;
	user-select: none;
}

.submenu ul > li:hover {
	color: var(--selected-color);
	background: var(--selected-backgnd);
}

.submenu ul > li .fa {
	width: 1.2em;
	text-align: center;
	position: relative;
	top: -0.05em;
	margin-right: 0.3em !important;
}

/*** Warning iframe ***/

#warning {
	width: 100%;
	height: 98%;
	margin: 0;
	border: none;
	overflow: auto;
}

/*** Slideshow ***/

.slideshow-control {
	display: table-cell;
	vertical-align: middle;
	padding: 0.5em;
}

.slideshow {
	display: table-cell;
	width: 100%;
}

.slideshow-wrapper {
	width: max-content;
	margin: auto;
	position: relative;
}

.slides {
	overflow: hidden;
	width: max-content;
	white-space: nowrap;
}

.slideshow-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.slideshow-icon {
	text-align: center;
	color: var(--global-line-color);
	border-radius: 0.3em;
	background-color: transparent;
}

.slideshow-icon .fa-backward {
	position: relative;
	left: -0.1em;
}

.slideshow-icon .fa-forward {
	position: relative;
	left: 0.1em;
}

.slideshow-icon:hover {
	background-color: #CCCCCC88;
	color: var(--global-color);
	transition: background-color 0.1s ease-in-out 0s;
}

.slideshow-icon.disabled {
	visibility: hidden;
}

.slideshow-overlay .slideshow-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3em;
	background: #CCCCCCDD;
	opacity: 0;
}

.slideshow-overlay:hover .slideshow-icon {
	color: var(--global-color);
	opacity: 1;
	transition: opacity 0.1s ease-in-out 0s;
}

.slide {
	display: inline-block;
	width: auto;
	margin: 0 var(--slide-margin-hor);
	overflow: hidden;
	white-space: normal;
	cursor: default;
	user-select: none;
}

.slide img {
	max-width: 100%;
	height: auto;
	margin: 1em auto;
}

.slideshow p {
	height: auto;
	padding-right: 0.2em;
	margin-bottom: 0;
}

.slide-number {
	position: relative;
	top: 0.05em;
	font-size: 180%;
	font-weight: bold;
	color: var(--cyan-color);
	margin-right: 0.3em;
}

/*** Screenshots ***/

.thumbnails {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	row-gap: 2.4em;
	column-gap: 1.5em;
	margin: 1.6em auto 0.5em auto;
}

.thumbnails .description {
	display: none;
}
 
.thumbnail {
	position: relative;
	width: 150px;
	height: 150px;
	cursor: pointer;
}

.thumbnail img {
	width: 300px;
	height: 240px;
	border: 2px solid gray;
	border-radius: 4px;
	transform: scale(0.5);
	transform-origin: top left;
	border: 2px solid transparent;
	box-shadow: var(--window-shadow);
}

.thumbnail:hover img {
	border-color:  var(--global-border-color);
}

.thumbnail .caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2em;
	margin: 0; 
	padding: 0.35em 0.5em 0.3em 0.5em;
	font-size: 90%;
	line-height: 120%;
	text-align: center;
	white-space: nowrap;
} 

.thumbnail:hover .caption {
	text-decoration: underline;
}

/*** Lightbox ***/


#lightbox-close {
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.6rem;
	padding: 0.8rem;
}


.lightbox-content {
	display: table;
	overflow: hidden;
	padding: 0 0.5em 0.7em 0.5em;
}

.lightbox-control {
	display: table-cell;
	vertical-align: middle;
	padding: 0.5em;
}

#lightbox-wrapper {
	overflow: hidden;
}

.lightbox {
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
	grid-template-rows: auto;
	overflow: hidden;
	white-space: nowrap;
}

.lightbox .slide {
	overflow: hidden;
	display: inline-grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr auto auto;
	height: 100%;
}

.lightbox .slide img {
	overflow: hidden;
}

.lightbox .slide .caption {
	font-weight: bold;
} 

.lightbox .slide .description {
	margin-bottom: 1em;
}

/*** Features tables, details and drawers ***/ 

.features {
	margin-bottom: 0.7em;
}

.features tr {
	height: 3em;
	background: white;
}

:root[data-page='home'] .features tbody tr:nth-child(even) {
	background: var(--cyan-backgnd);
}

:root[data-page='teachers'] .features tbody tr:nth-child(even) {
	background: var(--blue-backgnd);
}

:root[data-page='institutions'] .features tbody tr:nth-child(even) {
	background: var(--gray-backgnd);
}

:root[data-page='students'] .features tbody tr:nth-child(even) {
	background: var(--green-backgnd);
}

.features td {
	width: 33%;
	text-align: left;
	border: 1px solid var(--global-line-color);
	padding: 0.3em 0.7em;
	line-height: 150%;
}

.features td .fa {
	width: 1.2em;
	text-align: center;
	margin-right: 0.4em;
	font-size: 130%;
	position: relative;
	top: 0.1em;
}

.features .fa-pencil-square-o {
	position: relative;
	left: 0.07em;
}

details {
	position: relative;
	margin: 0.5em 0.2em;
}

summary {
	position: relative;
	left: 0.4em;
	padding-left: 0.9em;
	cursor: pointer;
	user-select: none;
	list-style: none;
}

summary:focus {
	outline: none;
}

summary::before {
	font-size: 120%;
	font-family: 'FontAwesome';
	content: "\f0da";
	position: absolute;
	top: 0.05em;
	left: -0.25em;
	transform: rotate(0);
	transform-origin: 50% 50%;
	transition: .25s transform ease;
}

summary::marker, summary::-webkit-details-marker {
  display: none;
}

details.open > summary::before {
	transform: rotate(90deg);
	transition: .25s transform ease;
}

.drawer {
	padding: 0.6em 0.5em 0.05em 0.6em;
}

#thumbnail-teacherguide {
	display: inline-block;
	height: 10em;
	border: 1px solid gray;
	margin: 0.5em 1em 0 0;
}

#payment-terms {
	margin-bottom: 1em;
}

#pricing-drawer p:last-child {
	margin-top: 0.5em;
	margin-bottom: 0;
}

#pricing-table {
	max-width: 35em;
	margin: 1em 0;
}

#pricing-table tr {
	height: 2em;
}

#pricing-table tr:first-of-type td {
	background: linear-gradient(to bottom, var(--blue-gradient-top), var(--blue-gradient-bottom));
	color: white;
	font-weight: bold;
	text-align: center;
}

#pricing-table td {
	width: 33%;
	border: 1px solid var(--global-line-color);
	padding: 0.3em 0.7em;
	line-height: 150%;
	text-align: center;
}

.pricing-price {
	font-family: var(--title-font-family);
	font-size: 150%;
}

.pricing-equivalent {
	font-size: 90%;
}

.pricing-equivalent-amount {
	font-family: var(--title-font-family);
	font-size: 120%;
}

#open-playground, #open-testing {
	margin-bottom: 1em;
}

/*** Registration and contact forms ***/

#registration-form {
	margin-top: 1em;
}

#registration-form tr {
	height: 3em;
}

#registration-form td > * {
	vertical-align: middle;
}

#registration-form td:first-of-type {
	width: 1%;
	padding-right: 1em;
	white-space: nowrap;
	user-select: none;
	cursor: default;
}

#registration-form input[type="text"], #registration-form input[type="email"], #registration-form drop-down {
	width: 18em;
	margin-right: 1em;
	vertical-align: middle;
}

#registration-form record-picker {
	width: 17em;
	margin-right: 1em;
}

#uname-checking .fa {
	font-size: 1.5em;
	position: relative;
	top: 0.05em;
}

#uname_checking-text {
	position: relative;
	top: -0.1em;
}

#host-languages {
	margin-left: 0.3em;
}

#host-flag-image {
	vertical-align: middle;
	position: relative;
	top: -0.1em;
	height: 1.1em;
	margin-left: 0.3em;
	margin-right: 0.3em;
	border: 1px solid var(--global-border-color);
}

#host-language {
	padding-left: 0.3em;
}

.fa.wide {
	margin-right: 0.5em;
}

#agree-gtc-area {
	margin: 1em 0;
}

text-area.inquiry-large {
	height: 4.8em;
	resize: vertical;
}

#inquiry-contact-area {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	column-gap: 2em;
	row-gap: 0.2em;
}

#contact-form input[type="email"], #contact-form input[type="tel"] {
	margin: 0.2em 0;
}

.inquiry-contact-item {
	flex-grow: 1;
	flex-shrink: 1;
	display: grid;
	grid-template-columns: auto 1fr;
}

.inquiry-contact-item label {
	margin: 0.5em 0.5em 0 0;
}

.inquiry-copy-area {
	margin: 0 1em;
}

.feedback {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1em;
	margin: 2em 1em 2em 0;
}

.feedback .fa {
	font-size: 200%;
	margin-top: 0.1em;
}

.inquiry-label {
	margin: 1em 0 0.1em 0;
}

#send-registration-inquiry {
	margin-top: 0.3em;
}

#author td, #data td, #teacherguide td {
	vertical-align: top;
}

#author td:first-of-type, #data td:first-of-type, #teacherguide td:first-of-type {
	width: 1%;
}

#photo {
	height: 6.5em;
	border-radius: 0.6em;
	margin: 0.1em 1.2em 0.4em 0;
}

#data-model {
	height: 10em;
	margin: 0.1em 1.2em 0.4em 0;
}

/*** Dialogs ***/

.cover {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(140, 140, 140, 0.7);
}

.modal {
	position: fixed;
	left: 50%;
	top: 50%;
 	transform: translate(-50%, -50%);
 	max-width: 95%;
 	max-height: 95%;
	padding-bottom: 0.3em;
	background: var(--window-backgnd);
	background-repeat: repeat;
	border: 1px solid var(--global-border-color);
	border-radius: var(--window-border-radius);
	box-shadow: var(--window-shadow);
}

.modal .titlebar {
	display: block;
	margin: 0;
	padding: 0.8em 0.5em 0.5em 0.5em;
	text-align: center;
	overflow: hidden;
	background: var(--title-backgnd);
	color: var(--title-color);
	border-bottom: 1px solid var(--global-border-color);
	border-top-left-radius: var(--window-border-radius);
	border-top-right-radius: var(--window-border-radius);
	cursor: default;
	user-select: none;
}

.modal-title {
	display: inline-block;
	font-family: var(--title-font-family);
	font-size: 1.4rem;
	letter-spacing: 0.3px;
	line-height: 120%;
	text-transform: uppercase;
}

.modal-content {
	min-height: 4em;
	overflow: hidden;
	padding: 1.5em 2em;
}

.modal-content h1 {
	font-size: 150%;
	text-align: center;
	margin: 0 0 0.5em 0;
}

.modal-content h2 {
	margin: 0.4em 0 0.5em 0;
}

.modal-content h3 {
	font-size: 110%;
	margin: 0.5em 0 1em 0;
	text-align: center;
}

hr {
	margin: 0.4em 0 1em 0; 
}

.modal-content p {
	margin: 1em 0; 
	text-align: center;
}

.modal-content br {
	margin-bottom: 0.6em;
}

.modal-content p:last-child {
/*	margin-bottom: 0.4em; */
}

.modal-content table {
	margin: 0.5em;
}

.modal-content td {
	padding: 0.2em 1em;
}

.modal-progress {
	position: relative;
	min-height: 20.5em;
}

.modal-progress .spinner {
	position: absolute;
	left: 50%;
	top: 48%;
 	transform: translate(-50%, -50%);
}

.modal-progress .spinner .fa {
	color: gray;
	font-size: 400%;
	opacity: 0.5;
}

.modal .toolbar {
	height: auto;
	overflow: visible;
	border: none;
	padding: 0 0.8em;
	text-align: right;
}

.modal .toolbar .button {
	margin: 0.8em 0.4em;
	min-width: 6em;
}

#dialog {
 	width: 48em;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

/*** Captchas ***/

.oc-options {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;	
	margin: 2em auto 1em auto;
}

.oc-caption {
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	margin: 1em 0 2em 0;
}

.oc-option {
	flex: none;
	padding: 0.5em;
	border: 3px solid gray;
	border-radius: 4px;
	cursor: pointer;	
}

.oc-option:hover {
	border-color: var(--blue-color);
}

.oc-option:hover:active, .oc-option.active {
	border-color: var(--blue-color);
	background-color: var(--blue-backgnd);
}

/*** Help ***/

.help {
	display: inline-block;
	font-size: 1.4em !important;
	color: var(--blue-color);
	margin: 0 0.4em 0 0;
	cursor: pointer;
}

.popup {
	position: absolute;
	height: max-content;
	overflow: hidden;
	z-index: 400;
	padding: 0.3em 1em 0.4em;
	background-color: white;
	border: 1px solid var(--global-border-color);
	box-shadow: var(--window-shadow);
	cursor: default;
	user-select: none;
}

.popup h3 {
	font-size: 110%;
	margin: 0.5em 0 0.3em 0;
}

.popup br {
	display: block;
	content: " ";
	margin-bottom: 0.5em;
}

.popup.help-popup {
	max-width: 30em;
	background-color: var(--help-backgnd);
	border-radius: var(--window-border-radius);
}

.popup.help-popup .fa {
	font-size: 1.3em;
	margin-right: 0.4em;
	position: relative;
	top: 0.05em;
}

/*** General classes ***/

.fa {
}

.hidden, .nocontext {
	display: none !important;
}

.invisible {
	visibility: hidden !important;
}

.disabled {
/*	cursor: not-allowed; */
}

.selected {
	color: var(--selected-color) !important;
	background: var(--selected-backgnd) !important;
}

.nowrap {
	white-space: nowrap;
}

.text-rev {
	display: inline-block;
	unicode-bidi: bidi-override;
	direction: rtl;
}

.inline-spacing::before, .inline-spacing::after {
	display: inline-block;
	content: "\a0";
	width: 0.2em;
}

a:hover .inline-spacing::before, a:hover .inline-spacing::after {
	text-decoration: underline;
}

a .fa-at {
	margin: 0 !important;
}

a .fa-at:hover {
	text-decoration: underline;
}

.floatright {
	float: right !important;
}

.red {
	color: var(--red-color);
}

.red-backgnd {
	background: var(--red-backgnd) !important;
}

.orange {
	color: var(--orange-color);
}

.orange-backgnd {
	background: var(--orange-backgnd) !important;
}

.yellow {
	color: var(--yellow-color);
}

.yellow-backgnd {
	background: var(--yellow-backgnd) !important;
}

.green {
	color: var(--green-color);
}

.green-backgnd {
	background: var(--green-backgnd) !important;
}

.blue {
	color: var(--blue-color);
}

.blue-backgnd {
	background: var(--blue-backgnd) !important;
}

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

.gray-backgnd {
	background: var(--gray-backgnd) !important;
}

.lightgray {
	color: var(--global-line-color);
}

.bold {
	font-weight: bold;
}

.center {
	text-align: center !important;
}

.fade-in {
	animation: 0.2s ease-out 0s 1 normal forwards fade-in;
}

.fade-out {
	animation: 0.5s ease-in 0.2s 1 normal forwards fade-out;
}

.disappear {
	animation: 0.1s linear 0s 1 normal forwards disappear;
}

/*** Media queries ***/

@media (max-width: 600px) {

	header {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto;
		padding: 0 0.5em;
	}

	#app-title {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		font-size: 150%;
		margin: 0;
		padding: 0.4em 0.32em 0.5em 0.32em; 
	}

	#menu {
		padding: 0.2em 0 0.8em 0;
	}

	header.small #app-title {
		font-size: 150%;
	}

	header.small #menu {
		height: 0;
	}

	header.small #menu * {
		display: none;
	}

	#menubar-options {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	.language-icon, header.small .language-icon {
		height: 1.5em !important;
	}

	#language-selector-area, header.small #language-selector-area {
		margin: 0.6em 0.5em 0 0;
		transition: none;
	}
	
	#app-description-area {
		display: none;
	}

	section {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.section-heading {
		padding: 1.2em 1.5em 0.2em 1.5em;		
	}

	.section-content {
		padding: 0.2em 1.5em 1.2em 1.5em;		
	}

	h3 {
		margin-top: 0.7em;
	}

	.thumbnails {
		justify-content: flex-start;
	}

	#registration-form input[type="text"], #registration-form input[type="email"], #registration-form drop-down {
		width: 12em;
	}
	
	#registration-form record-picker {
		width: 11.5em;
	}

	#lightbox-content {
		font-size: 90%;
	}

	.slideshow-icon {
		font-size: 150% !important;
		padding: 0.3em;
	}

}

@media (max-height: 600px) {

	#lightbox-titlebar {
		display: none;
	}

	#lightbox-content {
		font-size: 90% !important;
	}
	
	#lightbox-content .caption {
		display: none;
	}
	
}

@media (min-width: 601px) and (max-width: 840px) {
	
	header {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		padding: 0 0.5em;
	}
	
	header.small {
		padding: 0 0.5em;
	}
	
	#app-title {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		margin: 0.4em 0 0 0.05em; 
	}

	header.small #app-title {
		margin: 0.4em 0; 
	}

	#menu {
		padding: 0.8em 0 0.5em 0;
	}
	
	#menubar-options {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	#app-description-area {
		display: none;
	}

/*	#app-description-area {
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
		margin: 0 0.5em 1.5em 0.2em;
	} */
	
	#app-description {
		display: none;
	}

	header.small #app-description-area {
		display: none;
	}

	section {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.section-heading {
		padding: 1.2em 1.5em 0.2em 1.5em;		
	}

	.section-content {
		padding: 0.2em 1.5em 1.2em 1.5em;		
	}

	h3 {
		margin-top: 0.7em;
	}

	#lightbox-content {
		font-size: 90%;
	}

	.slideshow-icon {
		font-size: 150% !important;
		padding: 0.3em;
	}

}

@media (min-width: 841px) {

	header {
		grid-template-columns: auto 1fr auto auto;
		grid-template-rows: auto;
	}
	
	#app-title {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}

	#app-description-area {
		display: none;
	}

	#app-page {
		display: none;
	}

	#menu {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding: 0.8em 0 0.5em 0;
	}

	#menubar-options {
		grid-column: 4 / span 1;
		grid-row: 1 / span 1;
	}

	section {
		grid-template-columns: 32% 65%;
		grid-column-gap: 0em;
		grid-template-rows: auto;
	}

	.section-heading, .section-content {
		padding: 1.25em 2em;		
	}

	section.reverse {
		grid-template-columns: 65% 32%;
	}

	section.reverse .section-heading {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	section.reverse .section-content {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}

	section.equal {
		grid-template-columns: 1fr 1fr;
	}

	section.single {
		grid-template-columns: 1fr;
	}

	#registration-section {
		grid-template-columns: 40% 60%;
		grid-column-gap: 2em;
	}

	#registration-form td:first-of-type {
		width: 1%;
	}

	#contact-section {
		grid-column-gap: 2em;
	}
	
	#contact-form {
		margin-right: 2em;
	}

	#lightbox-content {
		font-size: 100%;
	}

	.slideshow-icon {
		font-size: 200% !important;
		padding: 0.5em;
	}

}

@media (min-width: 1200px) {

	#app-description-area {
		display: table;
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	#menu {
		padding: 0.8em 0 0.5em 0;
	}

	.intro {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 1em;
	}
	
	#intro h2 {
		margin-top: 0.4em;
		margin-right: 0.5em;
	}
	
	.large, .large p {
		margin-top: 0.5em;
		margin-bottom: 1em;
		line-height: calc(var(--global-line-height) * 1.15);
	}

	#contact-form {
		margin-right: 4em;
	}

}


/*** Animations ***/

@keyframes fade-in { 
	from { opacity: 0; } 
	to { opacity: 1; }  
}

@keyframes fade-out { 
	from { opacity: 1; } 
	to { opacity: 0; }  
}

@keyframes shrink {
  from { font-size: 300%; }
  to { font-size: 150%; }
}

@keyframes disappear { 
  0%   {	opacity: 1; }
  50%  {	opacity: 0.75; }
  100% {	opacity: 0; }
}