/* NowCMS default CSS file "screen.css"
	
   Please do not change anything here as this file will be overwritten by 
   every update.
   Customize your website in the CSS files 
      "/_/css/prolog.css" and
      "/_/css/epilog.css" 
   The "prolog.css" is read before the standard screen.css or print.css is read and
   should contain CSS variables and colors, fonts etc.
   The "epilog.css" is read as the last CSS file. It should contain all local 
   adaptations that are unique to this particular installation.
   Thus, the standard CSS files "screen.css" and "print.css" may be updated by NowCMS 
   in the future without breaking anything. 

   Do not forget to reference all CSS files in the
   preferences (htmlheader, htmlfooter and erroronavi-*) 
   
   This file uses these images:
   /_/img/calendar.png
   /_/img/pdf.png
   /_/img/external.png
   
   See also: https://nowcms.org
   
   This file is in the public domain.
   All PHP files are protected by copyright. 
   Individual, personal licenses have to be obtained for each domain and / or
   user of NowCMS.
   
   Are you interested in contributing to NowCMS? You might get a free, personal
   and perpetual license limited to 5 domains.
*/

/* --------- Generic stuff --------- */

/* Feels like a piece of paper when using the entire height */
html { 
	box-sizing: border-box;
	height: 100%; 
}

/* Override all the default margins: */
* { 
	margin: 0px; 
	padding: 0px; 
	font-size: 99%;
}

/* Add padding inside the box */
*, *::before, *::after {
	box-sizing: inherit;
}
body { 
   font: 96% var(--bread-font);
   line-height: 1.1;
   height: 100%;
   background-color: var(--body-background-color);
}

input, textarea, select {
   font: 96% var(--backend-font);
   line-height: 1.1;
   border: 1px solid grey;
}

textarea {
	tab-size: 4;
}

/* Stop Apple from f'ing things up: */
input[type="submit"] {
	appearance: none;
}
/* select {
	-webkit-appearance: none;
} */

/* Safari can't do the date picker in pure CSS */
[type="date"] {
  background:#fff url(/_/img/calendar.png)  80% 50% no-repeat;
  font: 96% var(--bread-font);
  width: 120px;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

a { color:  var(--link-color); }
a:visited { color: var(--link-visited-color); }
a:hover { background: var(--hover-color); }
/* We add a "external link icon" to the left of all links... */
a[href^="https://"]:before,
a[href^="http://"]:before {
	background: url(/_/img/external.png) left no-repeat;
	padding-left: 17px;
	content: "";
}
/* ... except links that may lead back to us: */
a[href^="http://" var(--this-domain)]:before,
a[href^="https://" var(--this-domain)]:before,
a[href^="http://www." var(--this-domain)]:before,
a[href^="https://www." var(--this-domain)]:before {
	background: inherit;
	padding-left: 0;
}

a.nolink[href^="https://"]:before,
a.nolink[href^="http://"]:before {
	background: inherit;
	padding-left: 0;
}

/* Automatic display of a PDF icon to the right of a link if the filename 
   ends with ".pdf" */
a[href$=".pdf"] {
	background:url(/_/img/pdf.png) right no-repeat;
	padding-right: 22px;
}

h1, h2, h3, h4, h5 { 
   font: 96% var(--title-font);
   margin-top: 10px;
}
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
/* margin to distinguish two paragraphs: */
p { 
	font-size: 1em; 
	margin-bottom: 0.5em;
}
/* Typewriter usually gets displayed to small */
tt {
	font-size: 1.3em;
	font-weight: bold; /* may not be visible otherwise */
	margin-bottom: 5px;
}
/* Will be used for computer stuff, monospace, must not be too small: */
pre {
	padding: 8px;
	tab-size: 4; /* Textarea needs JavaScript and also tab-size! */
	-moz-tab-size: 4;
	background-color: var(--pre-background-color);
}
/* Will be used for general announcements: */
blockquote {
    background-color: var(--blockquote-background-color);
    margin: 15px 0px 15px 0px;
    padding: 8px;
    border: 1px solid var(--blockquote-border-color);
}
sup {
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
}
/* Otherwise the dots go outside of the left line 
   (we reset all margins, remember?) */
ol, ul {	margin-bottom: 0.5em; }
ul li { margin-left: 2em; }
/* Needs enough space for numbers up to at least 19: */
ol li { margin-left: 2em; }

/* A generic table might be used just for formatting in a HTML block, so we need 
   the generic format be minimal */
table, td, th, tr {
   font: 96% var(--backend-font);
   border-collapse: collapse;
   border-width: 0;
}
td { padding: 3px; }
th { padding: 3px; }

button {
	border: none;
}

/* --------- FT_CHECKBOX as slider version --------- */

.toggle {
	position: relative;
	float: left;
	width: 34px;
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select: none;
	margin-bottom: 2px;
	margin-right: 5px;
}
.toggle-checkbox {
	display: none;
}
.toggle-label {
	display: block; 
	overflow: hidden; 
	cursor: pointer;
	border: 1px solid grey; 
	border-radius: 12px;
}
.toggle-inner {
	display: block; 
	width: 200%; 
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.toggle-inner:before, .toggle-inner:after {
	display: block; 
	float: left; 
	width: 50%; 
	height: 16px; 
	padding: 0; 
	color: white;
	font-weight: bold;
	box-sizing: border-box;
}
.toggle-inner:before {
	content: "✓";
	padding-left: 5px;
	background-color: var(--button-background-color); 
	color: var(--button-color);
}
.toggle-inner:after {
	content: "✗";
	padding-right: 5px;
	background-color: #eeeeee; 
	color: #999999;
	text-align: right;
}
.toggle-switch {
	display: block; 
	width: 16px; 
	margin: 2px;
	background: #ffffff;
	position: absolute; 
	top: 0; 
	bottom: 0;
	right: 14px;
	border: 1px solid #999999; 
	border-radius: 10px;
	transition: all 0.3s ease-in 0s; 
}
.toggle-checkbox:checked + .toggle-label .toggle-inner {
	margin-left: 0;
}
.toggle-checkbox:checked + .toggle-label .toggle-switch {
	right: 0px; 
}

/* --------- Cookie consent banner at the bottom --------- */

#cookieconsent {
	position: fixed;
	width: 100%;
	bottom: 0;
	right: 0;
	left: 0;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background-color: #ffee66;
	font-size: 105%;
}
.cookielong {
	display: inline-block;
}
.cookieshort {
	display: none;
}
/* Show shorter text on narrow devices */

@media screen and (max-width: 700px) {
	.cookielong {
		display: none;
	}
	.cookieshort {
		display: inline-block;
	}
}

#statusline {
	text-align: center;
	color: red;
	font-weight: bold;
	padding: 2px;
	background-color: #ffff99;
	border: 2px solid red;
}

.mgmt {
	background: rgb(159,155,238);
	background: linear-gradient(90deg, rgba(159,155,238,1) 0%, 
		rgba(204,155,55,1) 53%, 
		rgba(121,189,17,1) 100%);
}

@media only screen and (min-width: 800px) {
	#outer {
		margin-left: 2em;
		margin-right: 15%;
  	}
}

/* --------- Classes --------- */

.content {
	position: relative;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.7em;
	padding-right: 0.7em;
	line-height: 1.2;
}

/* --------- Notetype Article has a footer and header --------- */

.articleheader {
	padding-top: 6px;
	padding-bottom: 1px;
	text-align: right;
	border-bottom: 1px solid black;
}

.articlefooter {
	width: 100%;
	padding-top: 1px;
	padding-bottom: 12px;
	border-top: 1px solid black;
}

.articlefooter .le {
    width: 33%;
    float: left;
}
.articlefooter .ri {
    width: 33%;
    float: left;
    text-align: right;
    overflow: hidden !important;
}
.articlefooter .cen {
    float: left;
    width: 33%;
    text-align: center;
}

/* --------- General properties --------- */

.zebra tr:nth-of-type(even) { background-color: #eef; }
.textright { text-align: right; }
.textcenter { text-align: center; }
.textleft { text-align: left; }
.nowrap { white-space: nowrap; }
.nounderline { text-decoration: none; }
.border { border: 1px solid black; }
.fullwidth { width: 100%;}
.third { width: 33%; }
.fourth { width: 25%; }
.half { width: 50%; }
.yellow { background: yellow; }
.naked {
	color: inherit;
	background: inherit;
	font-size: 1.5em;
/*	padding: 3px 3px 3px 3px;
	box-shadow: none; */
}

/* --------- Pagination --------- */
.pagination span.active {
    background-color: #5d97cd;
    border: 1px solid #303030;
    color: #ffffff;
    padding: 1px 5px 2px 5px;
}

.pagination span {
    display: block;
    float: left;
    line-height: 13px;
    margin: 2px 6px 2px 0;
}

.pagination span a {
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
    color: #303030;
    display: block;
    padding: 1px 5px 2px 5px;
    text-decoration: none;
}

/* --------- Horizontal selector --------- */
.horselector {
	background-color: #dddddd;
	text-align: center;
/*	height: 20px; delete this */
	padding: 5px;
}

.horselector span.active {
    background-color: #5d97cd;
    border: 1px solid #303030;
    color: #ffffff;
}

.horselector span { line-height: 20px; }

.horselector span a {
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
    color: #303030;
    text-decoration: none;
    padding: 0 3px 0 3px;
}

/* --------- Calendar --------- */
.caltable { 
	line-height: 16px; 
	width: 100%;
}
.caltable tr { vertical-align: top; }
.caltable tr:nth-of-type(odd) { background-color: #eeeeee; }
.caltable tr:nth-of-type(even) { background-color: #ffffff; }
.caltable td { padding: 3px; }
}
.caltable th { 
	padding: 3px; 
	background-color: #cccccc;
}
.caltable .leftcolumn { 
	text-align: right; 
	white-space: nowrap;
}

/* td cell able to carry events that overlap into other td cells: */
.calcell {
	position: relative;
	border: 1px solid grey;
}

/* div inside .calcell carrying the colored and rounded area to display the event color: */
.event {
	position: absolute;
	width: 93%;
}

/* The events are rounded, except in the calendar month view: */
.rounded {
/*	border: 1px solid;
	border-radius: 5px; */
	padding: 3px;
/*	box-shadow: 2px 2px 6px hsla(0, 0, 0, 0.6); */
}

/* The dataset of any event waits inside each .event (in mask form) to be displayed by hovering over the root td cell of the event */
.event .tooltip {
  visibility: hidden;
  margin-left: 5px;
  margin-top: -25px;
  padding: 3px;
  background-color: white;
  color: black;
  position: absolute;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

/* Display the title on white ground so it is visible, no matter what the event colors are: */
.event span {
	background-color: white;
	font-size: 90%;
}

/* Make the .tooltip visible when hovering over .event: */
.event:hover .tooltip {
	visibility: visible;
	z-index: 100;
}

.event:hover {
	border: 3px solid var(--hover-color));
}

/* FIXME Check if necessary */
.event .tooltip table:hover {
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 1);
}
.event .tooltip td {
  white-space: nowrap;
  height: 13px;
  border: none !important;
}

/* the calendar month view has events that push the height of a cell if necessary. */
.monthlist {
	position: unset;
	padding: 3px;
	margin-bottom: 2px;
	height: auto;
}

/* --------- The hour grid for the calendar --------- */
.satsun {
/*	background-color: #ddf0ff !important;  override the zebra */
	background-color: #ddf0ff;
/* Dirty trick: https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o/16337203#16337203 */
	background-clip: padding-box;
}
.today {
	background-color: #b0d0ff;
	z-index: 2;
/*	background-color: #94e2fc !important; */
/* Dirty trick: https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o/16337203#16337203 */
	background-clip: padding-box;
}

/* horizontal line as clock, hr with style="top: x%;" must be provided, x = seconds/864 */
.today hr {
	position: absolute;
	margin-top: 12.5%;
	width: 100%;
	border-top: 2px solid red;
}
/* daylight savings time border! 2:00 = 8.3% of the day */
.dst::before {
	content: '';
	position: absolute;
	margin-top: 8.3%;
	width: 100%;
	border-top: 5% solid #9999ff;
}

.past {
/*	background-color: #dddddd;
	color: #888888;
	background-image: repeating-linear-gradient(0deg, white, white 8px, #ddd 8px, #ddd 16px); */
	color: black;
	background: repeating-linear-gradient(45deg, transparent, transparent 10px, #eee 10px, #eee 20px), linear-gradient(to bottom, #fff, #eee);
}

.calglossary {
	display: grid; 
	grid-template-columns: repeat(auto-fill, 140px); 
	grid-gap: 0.5em; 
	justify-content: space-between;
}

.calglossary div {
	padding: 2px;
}


/* This is to keep the options in RADIOBUTTONS and CHECKBOXES in vertical line: */
.fieldbox {
	float: left;
	margin-right: 5px;
}
.fieldbox label { display: block; }
.mandatory input, .mandatory textarea {
	border: 2px solid orange;
}

.notvalid { background-color: yellow; }

.errorspan {
	color: red; 
	padding: 1px; 
	font-size: 110%;
}

.errorfilter {
	background-color: yellow;
}

.activefilter {
	outline: 2px solid orange;
	background-color: #ffee99;
}

/* Do we need this? */
.errorbox {
   color: black;
   padding: 15px;
   font-size: 120%;
   background-image: repeating-linear-gradient(45deg, white, white 15px, 
   	#fdd 15px, #fdd 30px);
}

.editsymbol {
	line-height: 1;
	text-decoration: none;
	font-size: 1.3em;
}

.debug {
	width: 100%;
	color: black;
	padding: 5px;
	background-image: 
		repeating-linear-gradient(
			45deg, 
			orange, 
			orange 15px, 
			black 15px, 
			black 30px
		);
}

/* --------- Table styles --------- */

.tbl { 
   line-height: 16px; 
   background-color: var(--background-color);
}
.tbl tr { vertical-align: top; }
.tbl tr:nth-of-type(odd) { background-color: #eeeeee; }
.tbl tr:nth-of-type(even) { background-color: #ffffff; }
.tbl tr:hover { background: var(--row-hover-color); }
.tbl td { padding: 3px; }
.tbl th { 
	padding: 3px; 
	background-color: #cccccc;
}
.tbl .leftcolumn { 
	text-align: right; 
	white-space: nowrap;
}
.tbltitle td {
	font-size: 2.0em;
	padding-top: 0.6em;
	padding-bottom: 0.3em;
	font-weight: bold;
	color: var(--title-color)
}
.tbltitle td a {
	font-size: 1em;
}

.ilist {
}

.ilist li {
	background-color: yellow;
	outline: 1px solid grey;
}


/* --------- (Horizontal) navigation --------- */

/* Navigation menus (horizontal)
   It is quite difficult to center them  */
.navi {
	font: 96% var(--title-font);
	width: 100%;
	overflow: hidden;
	box-shadow: inset 0 -10px 10px -10px #000000;
}
.navi ul {
   position: relative;
   float: left; /* This does the centering! */
   left: 50%;
   margin: 0;
}
.navi li {
   float: left;
   list-style: none;
   margin: 0;
   padding-right: 2px;
   position: relative;
   right: 50%;
}

/* Change background to yellow if we have 9 or more list elements: */
.navi li:first-child:nth-last-child(n + 9),
.navi li:first-child:nth-last-child(n + 9) ~ li {
	background-color: yellow;
}

.navi a {
   display: block;
   margin: 4px 1px 3px 1px;
   padding: 0px 5px; 
   background: #eeeeee;
   text-decoration: none;
   line-height: 1.6em;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.navi a:hover,
.navi a:focus {
   background: var(--hover-color);
   color: white;
}
/* We move the active tab down a little so it covers the shadow */
.navi a.active {
   color: #df5d00;
   position: relative;
   top: 5px;
   background: #ffffff;
   font-weight:bold;
}
.navi li .extra {
	background-color: var(--button-background-color);
	color: white;
	text-decoration: none;
}
.navi a.extra {
	background-color: var(--button-background-color);
	color: white;
	text-decoration: none;
}
/* We need a span or a div around a href (link) if we want to make it a 
   button: */
.btn {
	background-color: var(--button-background-color);
	/* Longer buttons are more clickable */
	padding: 4px 15px 4px 15px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	/* So there is minimal distance to an upper span / div: */
	margin-top: 4px;
	margin-left: 4px;
	margin-right: 4px;
	/* We need these for input buttons: */
	color: white;
	text-decoration: none;
	font-weight: bold;
	/* Needed for divs: */
	display: inline-block;
	/* We need this for input fields: */
	border: none;
}

.btn a {
	/* We need these for spans around links: */
	color: white;
	text-decoration: none;
	font-weight: bold;
}
.btn:hover {
	color: white;
	background-color: orange;
	/* Looks like the button is already pressed:*/
	box-shadow: none;
}

.delete {
	background-color: #dd1100;
}

.hdrbtn {
	background-color: white;
	box-shadow: none;
	border: 1px solid grey;
	padding: 0px 8px 0px 8px;
	color: black;
	text-decoration: none;
}
.btnlink {
	float: right;
	margin-top: 7px;
	margin-left: 5px;
	background-color: white;
	box-shadow: none;
	border: 1px solid grey;
	padding: 0px 8px 0px 8px;
	color: black;
	text-decoration: none;
}
input + .hdrbtn {
	padding: 2px 8px 2px 8px;
}
.hdrbtn a,
.btnlink a {
	color: black;
	text-decoration: none;
}
.hdrbtn:hover,
.btnlink:hover {
	background-color: orange;
}

/* --------- FT_BUTTON --------- */

.btn2 {
	background-color: red;
}
.btn32 {
	background-color: teal;
}
.btn4,
.btn8 {
	background-color: blue;
}

.btn64,
.btn128 {
	background-color: #bbbbbb;
}

/* --------- Datanode and management buttons --------- */

/* Box to the right of the contect div: */
.datanode {
	position: relative;
	min-height: 25px;
	margin-bottom: 5px;
}
.datanode:hover {
	outline: 1px solid orange;
}
.btnfloat {
	position: absolute;
	overflow: hidden;
	z-index: 100;
	top: -5px;
	right: -5px;
}

/* Datanode modification button is inside to the top right 
   of the datanode frame */
.dnbtn {
	position: absolute;
	overflow: hidden;
	z-index: 1000;
	top: -12px;
	right: -2px;
	padding: 2px;
	font-size: 13px;
	border: 1px solid grey;
	/* 20% transparent white */
	background-color: rgba(255,255,255,0.9); 
}

.dnbtn a {
	text-decoration: none;
	font-weight: bold;
}

.mgmt {
	background-color: var(--management-background-color);
	width: 100%;
	text-align: right;
	padding-top: 1px;
	height: 22px;
	color: white;
}

.mgmt div {
	float: right;
	margin-left: 6px;
	margin-right: 1px;
	padding: 2px;
	font-size: 13px;
	border: 1px solid grey;
	/* 20% transparent white */
	background-color: rgba(255,255,255,0.9); 
	color: green;
}

.mgmt div a {
	text-decoration: none;
	font-weight: bold;
}

.mgmt div:hover {
	background-color: orange;
} 

/* File upload buttons are a nightmare. You just can't format the "select"
   button part: */
.mgmt .upl {
	font-size: 13px;
	padding: 0;
	margin: 0;
}
.mgmt .upl input {
	padding: 0;
	margin: -4px;
	margin-left: 4px;
	margin-right: 4px;
	font-size: 13px;
	border: none;
}
.mgmt .upl label {
	padding: 0;
	margin: -4px;
	font-size: 13px;
	width: 200px;
}
.mgmt .upl input[type=submit] {
	padding: 2px;
	margin: 0;
	color: green;
	font-weight: bold;
}

input[type=file]::file-selector-button {
	display: none;
}
/*
input[type=file]::file-selector-button {
	color: var(--bread-font);
	border-radius: 0;
	border: 1px solid grey;
	padding: 1px;
	padding-left: 4px;
	padding-right: 4px;
}
*/

.mgmt .upl input:hover {
	background-color: orange;
}


/* --------- Datanode gallery --------- */

.gridglry {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
}
.glry-item {
	background: white;
	max-width: 100%;
	height: 200px;
}

.glry-desc {
	padding: 1em;
}

.glry-title {
	font-size: 1.1em;
	margin-top: 0;
}
.glry-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.glry-lightbox {
	position: fixed;
	top: 20px;
	left: 20px;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(1, 0);
	transform-origin: bottom;
	transition: transform ease-in-out 500ms;
}
.glry-lightbox:target {
	transform: scale(1, 1);
	transform-origin: top;
}

.glry-lightbox-content {
	max-width: 100%;
	background: black;
	padding: 1em;
	position: relative;
}

.glry-lightbox-content img {
	object-fit: cover;
	height: 80vh;
}

.close {
	position: absolute;
	width: 2em;
	height: 2em;
	top: -1em;
	right: -1em;
	border-radius: 50%;
	background: orange;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.close::after {
	content: 'X';
	color: white;
	font-weight: 700;
}

.glry {
	float: left; 
	background-color: #dddddd; 
	margin: 2px; 
	text-align: center;
}

/* Used with btn for dangerous actions: */
.danger:hover {
	color: white;
	/* make it jump a little before clicking */
	padding: 10px 20px 10px 20px;
	margin-top: 0px;
	background-color: red;
	/* Looks like the button is already pressed:*/
   box-shadow: none;
}
.danger a:hover {
	color: white;
	background-color: red;
	/* Looks like the button is already pressed:*/
}

/* floating box on the right, floating into the following text: */
.right {
	position: relative;
	float: right;
	margin-right: 0;
	margin-left: 8px;
	/* makes the contents of the div float right, too: */
	text-align: right;
}

/* floating box on the left, floating into the following text: */
.left {
	position: relative;
	float: left;
	margin-left: 0;
	margin-right: 8px;
	display: inline-;
}

.center {
/*	width: 100%; */
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --------- Page header and footer --------- */

* { box-sizing: border-box; }

/* page header has responsive layout: */
header {
/*	max-width: 960px; */
	width: 100%;
	text-align: center;
	line-height: 1.1;
	overflow: auto; /* so the height does not collapse */
}

header br {
	display: block;
	margin-top: 6px;
}

footer {
	text-align: center;
	margin-bottom: 5px;
	padding: 4px;
	padding-top: 10px;
	line-height: 1;
	box-shadow: inset 0 10px 10px -10px rgba(0,0,0,1);
	background-color: var(--background-color);
}

/* --------- Media queries (responsive stuff) --------- */

/* it is getting too narrow: the right columns gets pushed below */
@media screen and (max-width: 800px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
}
/* even narrower: switch so all header parts to vertical succession */
@media screen and (max-width: 640px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
}
/* This can be a sheet of paper.. */
#outer { 
	background-color: var(--outer-background-color);
}
/* no logo image, we use text: */
#logo {
   font-weight: 300;
   font-size: 40px;
   text-decoration: none;
}
/* This suppresses the automatic link image while the domain name 
   remains clickable */
#logo[href^="https://"]:before,
#logo[href^="http://"]:before { 
	background-color: yellow;
	content: none;
}

/* Yes we may click but not bothered with coloring */
#logo:hover { background-color: white; }

/* we may chose different backgrounds for different navigation levels 
   (navi0, navi1, navi2 ...) */
#navi1, #navi2, #navi3 {
	background-color: white;
}

/* Progress bar for the logout button: 
See also https://codepen.io/brunjo/pen/ByjRPy
*/

.logoutbar {
    position: relative;
    font-size: 5em
}
.logoutbar:before {
    content: attr(data-text); 
    position: absolute;
    overflow: hidden;
    max-width: 7em;
    white-space: nowrap;
    background-color: red;
    animation: loading 300s linear;
}
@keyframes loading {
    0% {
        max-width: 0;
    }
}


/* --------- Meesages, warnings and error messages (fly in) --------- */

@keyframes slideDown {
    from { transform: translateY(-300px); }
    to { transform: translateY(0%); }
}

#messages {
   position: sticky;
   z-index: 6001;
   bottom: 15px;
   left: 20%;
   right: 20%;
   box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.6);
   font-size: 1.1em;
   line-height: 1.1;
   overflow: hidden;
   animation-duration: 1.2s;
   animation-name: slideDown;
}

#errormessages {
	background-color: var(--error-background-color); 
	color: black; 
	padding: 10px;
}
#resultmessages {
	color: black;
	background-color: var(--result-background-color);
	padding: 10px;
}
#warnings {
	background-color: var(--warning-background-color);
	color: #cc0000; 
	padding: 10px;
}

/* --------- Search result box  --------- */

#searchresults {
	background-color: #cde4fe; 
	padding: 10px; 
	margin-top: 30px; 
	margin-bottom: 30px;
}