@font-face {
	font-family: 'Exo 2';
	src: url("/fonts/Exo2-Regular.woff2") format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inconsolata';
	src: url("/fonts/Inconsolata-Regular.woff2") format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   COLOR TOKENS
   ---------------------------------------------------------------------------
   Light values here match this file's previous hardcoded colors exactly.
   The dark theme below overrides these same names - every rule in this file
   and in app_booking/app_modal resolves its colors through these tokens, so
   nothing outside this block needs to change.

   Brand navy/blue and the derivation approach (fold near-black surfaces into
   a narrow dark band instead of pure black; invert body text to near-white;
   lighten - not darken - saturated status colors for contrast on dark
   surfaces; compress borders toward the middle so they read either way)
   match www.myweblog.se's own shipped dark theme, which uses the same two
   brand colors.
   --------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--mwl-bg-page:#ffffff;
	--mwl-text-page:#202020;
	--mwl-text-muted:#666666;

	--mwl-bg-brand-dark:#002959;
	--mwl-border-brand-dark:#002959;
	--mwl-bg-brand:#336699;
	--mwl-text-brand:#336699;

	--mwl-text-success:green;
	--mwl-text-danger:red;
	--mwl-text-danger-strong:#CC3333;
	--mwl-text-brand-strong:#002959;
	--mwl-text-warning:#F4BA0B;
	--mwl-text-confirm:#229922;
	--mwl-icon-disabled:#b0b0c0;

	--mwl-bg-surface:#F5F5FF;
	--mwl-border-surface:#cccccc;
	--mwl-border-soft:#ccccee;
	--mwl-bg-panel:#ffffff;
	--mwl-bg-bottombar:#eeeeee;
	--mwl-bg-row-alt:#f7f7ff;
	--mwl-bg-table-2:#fafafa;
	--mwl-placeholder:#B0B0BB;

	--mwl-shadow-1:#bbbbbb;
	--mwl-shadow-2:#888888;

	--mwl-bg-warning:#FCFFB9;
	--mwl-status-danger-bg:red;
	--mwl-status-warning-bg:#F0F060;
	--mwl-status-danger-tint:#FFE8E8;
	--mwl-status-warning-tint:#FFFFE8;

	--mwl-modal-overlay:rgba(0,0,0,0.4);
	--mwl-modal-bg:#ffffff;
	--mwl-modal-border:#222222;
	--mwl-modal-divider:#a0a0c0;

	--mwl-booking-own:#44cc44;
	--mwl-booking-ownsch:#44eeee;
	--mwl-booking-otr:#8899ee;
	--mwl-booking-otrsch:#dd88dd;
	--mwl-booking-maint:#dd5555;
	--mwl-booking-stud:#eeee44;
	--mwl-booking-border:#225522;
	--mwl-booking-old-bg:#eeeeee;
	--mwl-booking-old-border:#888888;
	--mwl-booking-frame-bg:#f5f5f5;
	--mwl-booking-frame-border:#555555;
	--mwl-daylight-1:#CCE;
	--mwl-daylight-2:#DDF;
	--mwl-daylight-3:#FDFDFF;
	--mwl-ticker-minor:#666666;
	--mwl-ticker-major:#333333;
	--mwl-timeline-now:red;
	--mwl-past-text:#cccccc;
	--mwl-queue-text:#888888;

	/* Start page illustration (images/app_home_schedule.svg), the same colours as www.myweblog.se's */
	--mwl-ill-panel:#eef4fa;
	--mwl-ill-bg:#dde9f5;
	--mwl-ill-card:#ffffff;
	--mwl-ill-line:#d3dce6;
	--mwl-ill-grid:#edf1f6;
	--mwl-ill-text:#6b7b8c;
	--mwl-ill-blue:#336699;
	--mwl-ill-teal:#2a9db0;
	--mwl-ill-green:#5fae4f;
	--mwl-ill-soft:#e6eff8;
	--mwl-ill-phone:#1f2d3d;
	--mwl-ill-shadow:rgba(30,60,100,0.10);
	--mwl-ill-accent:#d9534f;

	/* Green notice on the start page after a logout */
	--mwl-notice-success-icon:#3c8a3f;
	--mwl-notice-success-bg:#edf7eb;
	--mwl-notice-success-border:#bfe0b8;
}
/* Dark theme. data-theme is set on <html> by the script in appPage's <head>:
   either the user's own choice, or the device setting when they chose
   "system". Screen only, so printing always uses the light palette. */
@media screen {
	:root[data-theme="dark"] {
		color-scheme: dark;

		--mwl-bg-page:#1b1c1e;
		--mwl-text-page:#eff0f1;
		--mwl-text-muted:#9a9fa7;

		--mwl-bg-brand-dark:#193f6b;
		--mwl-border-brand-dark:#5686b5;
		--mwl-bg-brand:#2f5070;
		--mwl-text-brand:#9fbcd8;

		--mwl-text-success:#6fae7c;
		--mwl-text-danger:#f07a7a;
		--mwl-text-danger-strong:#e57373;
		--mwl-text-brand-strong:#c3d6ea;
		--mwl-text-warning:#f5c842;
		--mwl-text-confirm:#6fae7c;
		--mwl-icon-disabled:#6d737e;

		--mwl-bg-surface:#2b2f38;
		--mwl-border-surface:#3a3e43;
		--mwl-border-soft:#33363b;
		--mwl-bg-panel:#26282b;
		--mwl-bg-bottombar:#242528;
		--mwl-bg-row-alt:#202329;
		--mwl-bg-table-2:#24262b;
		--mwl-placeholder:#7c838d;

		--mwl-shadow-1:rgba(0,0,0,0.6);
		--mwl-shadow-2:rgba(0,0,0,0.5);

		--mwl-bg-warning:#3c3c1a;
		--mwl-status-danger-bg:#e57373;
		--mwl-status-warning-bg:#d4d449;
		--mwl-status-danger-tint:#3c1a1a;
		--mwl-status-warning-tint:#3c3c1a;

		--mwl-modal-overlay:rgba(0,0,0,0.6);
		--mwl-modal-bg:#26282b;
		--mwl-modal-border:#46494f;
		--mwl-modal-divider:#40434a;

		--mwl-booking-own:#5dd446;
		--mwl-booking-ownsch:#5ddddd;
		--mwl-booking-otr:#9aa8f2;
		--mwl-booking-otrsch:#e0a0e0;
		--mwl-booking-maint:#e57373;
		--mwl-booking-stud:#d4d449;
		--mwl-booking-border:rgba(0,0,0,0.45);
		--mwl-booking-old-bg:#33363b;
		--mwl-booking-old-border:#51555d;
		--mwl-booking-frame-bg:#26282b;
		--mwl-booking-frame-border:#4a4e57;
		--mwl-daylight-1:#17202b;
		--mwl-daylight-2:#1e2c3d;
		--mwl-daylight-3:#2a3b52;
		--mwl-ticker-minor:#6d737e;
		--mwl-ticker-major:#9a9fa7;
		--mwl-timeline-now:#f07a7a;
		--mwl-past-text:#555a62;
		--mwl-queue-text:#8b919a;

		--mwl-ill-panel:#1a2632;
		--mwl-ill-bg:#1b2a3a;
		--mwl-ill-card:#1f2c3a;
		--mwl-ill-line:#34465a;
		--mwl-ill-grid:#28384b;
		--mwl-ill-text:#93a3b5;
		--mwl-ill-blue:#6f9fd3;
		--mwl-ill-teal:#4fc0d0;
		--mwl-ill-green:#83c973;
		--mwl-ill-soft:#26384c;
		--mwl-ill-phone:#0b1118;
		--mwl-ill-shadow:rgba(0,0,0,0.35);
		--mwl-ill-accent:#f08a7e;

		--mwl-notice-success-icon:#6fae7c;
		--mwl-notice-success-bg:#1d2b21;
		--mwl-notice-success-border:#2f4a35;
	}
}

html {
  scroll-behavior: smooth;
  /* Body backgrounds are sized against the html box, so let it fill the viewport on short pages */
  min-height: 100%;
}
body
{
	color:var(--mwl-text-page);
	background-color:var(--mwl-bg-page);
	font-size:1.1em;
	margin:0;
	padding:calc(11vh + env(safe-area-inset-top, 0px)) 0 calc(12vh + env(safe-area-inset-bottom, 0px)) 0;
	padding:calc(11dvh + env(safe-area-inset-top, 0px)) 0 calc(12dvh + env(safe-area-inset-bottom, 0px)) 0;
	text-align:left;
	font-family: "Exo 2","Helvetica Neue", Verdana, Arial, sans-serif;
}
@media print {
	body { padding:0; margin:0 10mm 0 20mm; }
}
h1
{
	font-size:1.6em;
	padding-left:3vw;
	padding-right:3vw;
}
h1.c {
	text-align:center;
}
h2
{
	font-size:1.3em;
	color:var(--mwl-text-success);
	padding-left:3vw;
	padding-right:3vw;
}
h3 {
	color:var(--mwl-text-success);
	padding-left:3vw;
	padding-right:3vw;
}
a
{
	text-decoration:none;
	color:var(--mwl-text-success);
}
p {
	padding-left:3vw;
	padding-right:3vw;
}
input, select
{
	width:80vw;
	max-width:80vw;
	/* height:30px; */
	height:2.1em;
	font-size:16px;
	margin:0 auto 0 auto;
	display:block;
	/* padding:10px; */
	padding:0.3em;
	background-color:var(--mwl-bg-surface);
	border:1px solid var(--mwl-border-brand-dark);
	border-radius:3px;
	font-family: "Exo 2","Helvetica Neue", Verdana, Arial, sans-serif;
	color:var(--mwl-text-page);
	-ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
}



/*select {
	width:75vw;
	height:2.3em;
	margin:auto;
	display:block;

	background-color:#F5F5FF;
	border:1px solid #002959;
	padding:0.4em;
	border-radius:3px;
	font-size:16px;
	color:black;
}*/
option:checked {
	background-color:var(--mwl-bg-brand);
	color:white;
}
::placeholder {
	color:var(--mwl-placeholder);
	font-size:16px;
}
table { border-collapse:collapse; }
td { padding: 1vh; }
button
{
	color:white;
	font-size:1em;
	font-weight:normal;
	margin:auto;
	display:block;
	background-color:var(--mwl-bg-brand);
	border:1px solid var(--mwl-border-brand-dark);
	border-radius:1vw;
	padding:0.4em 0.8em 0.4em 0.8em;

}
button:active {
	background-color:var(--mwl-bg-brand-dark);
}
button i {
	margin-right:0.8em;
	font-size:0.9em;
}

div.formDiv {
	width:80vw;
	margin:0 auto 0 auto;
	text-align:left;
}
div.formDiv label {
	color:var(--mwl-text-brand);
	font-size:0.8em;
	margin-top:1vh;
	display:block;
}
div.formDiv label:first-of-type {
	margin-top:0;
}

div.formDiv select,
div.formDiv input {
	width:100%;
}



/* ERROR PAGE FORMATTING */
h1.e404,
h2.e404
{	color:var(--mwl-text-danger); text-align:center; }
p.e404
{	text-align:center; }
img.e404
{
	display: block;
  margin-left: auto;
  margin-right: auto;
	max-width:50vw;
	max-height:40vh;
}

#cookieDisclaimer {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:black;
	z-index:10;
	opacity:0.6;
	visibility:visible;
}
#cookieDisclaimer.accepted,
#cookieText.accepted {
	visibility:hidden;
	z-index:-10;
}
div#cookieText {
	margin:auto;
	display:block;
	color:var(--mwl-text-page);
	background-color:var(--mwl-bg-panel);
	border:2px solid var(--mwl-text-success);
	border-radius:1vw;
	width:80vw;
	opacity:1;
	z-index:20;
	position:fixed;
	left:10vw;
	top:20vh;
	text-align:left;

}
#cookieText #cookieButton {
	cursor:pointer;
	background-color:var(--mwl-text-success);
	width:40vw;
	max-width:80vw;
	margin:auto;
	display:block;
	margin-bottom:20px;
	text-align:center;
	color:white;
	padding:10px;
	border-radius:1vw;
}
#cookieText #cookieButton i {
	padding-right:10px;
}
#cookieText div:last-of-type {
	text-align:center;
	padding-bottom:1em;
	padding-top:1.5em;
}
#cookieText div:last-of-type > a {
	padding:0.5em;
}
.navbar-menu {
	position:fixed;
	right:5px;
	top: calc(9vh + env(safe-area-inset-top, 0px));
	top: calc(9dvh + env(safe-area-inset-top, 0px));
	background-color:var(--mwl-bg-panel);
	border:1px solid var(--mwl-border-brand-dark);
	border-top:none;
	max-width:80vw;
	min-width:50vw;
	visibility:hidden;
	opacity:0;
	transition: visibility 1s, opacity 0.3s linear;
	box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2);
	-moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	-webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	padding:0;margin:0;
	z-index:11;
}
.navbar-menu.active {
	visibility:visible;
	opacity:1;
}
.navbar-menu a {
	display: block;
	background-color:var(--mwl-bg-surface);
	color:var(--mwl-text-brand);
	padding:12px 15px 12px 15px;
	border-bottom:1px solid var(--mwl-border-soft);
}
.navbar-menu a:last-of-type { border-bottom:none; }
.navbar-menu a.logout { color:var(--mwl-text-danger); }
.navbar-menu i {
	margin-right:0.8em;
	font-size:0.9em;
	opacity:0.7;
}
/* Light / dark / system row, last in the hamburger menu */
.navbar-menu .themeChooser {
	display:flex;
	gap:6px;
	padding:8px;
	background-color:var(--mwl-bg-surface);
	border-top:1px solid var(--mwl-border-soft);
}
/* Each button is a centered column: icon above its label */
.navbar-menu .themeChooser div {
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding:8px 4px;
	font-size:0.8em;
	color:var(--mwl-text-brand);
	border-radius:6px;
	cursor:pointer;
}
/* svg too, in case the Font Awesome kit swaps the <i> for an <svg> */
.navbar-menu .themeChooser i,
.navbar-menu .themeChooser svg {
	margin:0;
	font-size:1.4em;
}
.navbar-menu .themeChooser div.selected {
	background-color:var(--mwl-bg-brand);
	color:white;
}
.navbar-menu .themeChooser div.selected i,
.navbar-menu .themeChooser div.selected svg { opacity:1; }
.bottombar-menu {
	position:fixed;
	right:5px;
	bottom: calc(7vh + env(safe-area-inset-bottom, 0px));
	bottom: calc(7dvh + env(safe-area-inset-bottom, 0px));
	background-color:var(--mwl-bg-panel);
	border:1px solid var(--mwl-border-brand-dark);
	max-width:80vw;
	min-width:50vw;
	visibility:hidden;
	opacity:0;
	transition: visibility 1s, opacity 0.3s linear;
	box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2);
	-moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	-webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	padding:0;margin:0;
	z-index:11;
}
.bottombar-menu.active {
	visibility:visible;
	opacity:1;
}
.bottombar-menu a {
	display: block;
	background-color:var(--mwl-bg-surface);
	color:var(--mwl-text-brand);
	padding:12px 15px 12px 15px;
	border-bottom:1px solid var(--mwl-border-soft);
}
.bottombar-menu a:last-of-type { border-bottom:none; }
.bottombar-menu a.current_lang { color:var(--mwl-text-danger); }
.bottombar-menu img { padding-right:10px; position:relative;top:2px;}

#pageContents
{
	max-width:100vw;
}
/* Start page (index.php) for visitors who are not logged in, in the style of the www.myweblog.se front page */
div.homePage {
	display:flex;
	flex-direction:column;
	gap:14px;
	max-width:480px;
	margin:0 auto;
	padding:2vh 16px 0 16px;
	box-sizing:border-box;
}
div.homePage h1 {
	margin:6px 0 0 0;
	padding:0;
	font-size:1.5em;
	line-height:1.15;
	color:var(--mwl-text-brand);
}
div.homePage p.homeLede {
	margin:0;
	padding:0;
	color:var(--mwl-text-muted);
}
div.homePage a.homeButton {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.5em;
	margin-top:10px;
	padding:0.6em 1em;
	border:1px solid var(--mwl-border-brand-dark);
	border-radius:8px;
	background-color:var(--mwl-bg-brand);
	color:white;
	font-weight:600;
}
div.homePage a.homeButton:active {
	background-color:var(--mwl-bg-brand-dark);
}
div.homePage a.homeLink {
	font-size:0.85em;
	font-weight:600;
	text-align:center;
	color:var(--mwl-text-brand);
}

/* Shown above the illustration right after a logout (index.php?loggedOut) */
div.homePage div.homeNotice {
	display:flex;
	align-items:center;
	gap:0.6em;
	padding:10px 14px;
	border:1px solid var(--mwl-notice-success-border);
	border-radius:12px;
	background-color:var(--mwl-notice-success-bg);
	font-size:0.85em;
	line-height:1.4;
}
div.homePage div.homeNotice i {
	flex:none;
	font-size:1.2em;
	color:var(--mwl-notice-success-icon);
}

/* The illustration, on a soft panel. Its parts are coloured by the hi-* classes in the SVG. */
div.homeIll {
	padding:6px;
	border-radius:8px;
	background-color:var(--mwl-ill-panel);
}
div.homeIll svg {
	display:block;
	width:100%;
	height:auto;
}
div.homeIll text {
	font-family: "Exo 2","Helvetica Neue", Verdana, Arial, sans-serif;
}
.hi-bg { fill:var(--mwl-ill-bg); }
.hi-card { fill:var(--mwl-ill-card); stroke:var(--mwl-ill-line); stroke-width:1; }
.hi-shadow { fill:var(--mwl-ill-shadow); }
.hi-gridline { stroke:var(--mwl-ill-grid); stroke-width:1; }
.hi-gridfill { fill:var(--mwl-ill-grid); }
.hi-text { fill:var(--mwl-ill-text); }
.hi-on { fill:#ffffff; }
.hi-blue { fill:var(--mwl-ill-blue); }
.hi-teal { fill:var(--mwl-ill-teal); }
.hi-green { fill:var(--mwl-ill-green); }
.hi-fade { opacity:0.4; }
.hi-soft { fill:var(--mwl-ill-soft); }
.hi-trail { fill:none; stroke:var(--mwl-ill-text); stroke-width:1.5; stroke-dasharray:3 5; stroke-linecap:round; opacity:0.7; }
.hi-phone { fill:var(--mwl-ill-phone); }
.hi-now { stroke:var(--mwl-ill-accent); stroke-width:2; }
.hi-nowdot { fill:var(--mwl-ill-accent); }
.hi-check { fill:none; stroke:#ffffff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* The resource icons are symbols drawn in currentColor */
.hi-icon-blue { color:var(--mwl-ill-blue); }
.hi-icon-on { color:#ffffff; }

div.forgotpage {
	text-align:center;
}
div.forgotpage:first-child {
	margin-top:12vh;
}
div.forgotpage > i:first-of-type {
	font-size:5em;
	margin-bottom:0.2em;
	color:var(--mwl-text-success);
}

#burger
{
	cursor:pointer;
}
div#topbar
{
	background-color:var(--mwl-bg-brand-dark);
	color:white;
	box-shadow: 0px 3px 6px 1px var(--mwl-shadow-1);
	-moz-box-shadow:0px 3px 6px 1px var(--mwl-shadow-1);
	-webkit-box-shadow:0px 3px 6px 1px var(--mwl-shadow-1);
	position:fixed;top:0;left:0;
	width:100vw;
	height:calc(9vh + env(safe-area-inset-top, 0px));
	height:calc(9dvh + env(safe-area-inset-top, 0px));
	padding-top:env(safe-area-inset-top, 0px);
	box-sizing:border-box;
	z-index:10;
}
div#topbar a { color:white;	text-decoration:none; padding-left:5px;}
div#topbar a:hover { color:#b0b0b0; }
div#topbar a:visited { color:white; }

div#topbar table { width:100%;	height:100%; }
div#topbar table img { max-height:7vh; vertical-align:middle;}

div#topbar table td:last-of-type { text-align:right; padding-right:20px;font-size:1.3em;width:35px;}
div#topbar a.loginbutton { border:1px solid white; padding:3px 15px 4px 15px;border-radius:2px;}

div#topbar.loggedin table td:first-of-type { width:35px;}
div#topbar.loggedin table td:nth-of-type(2) { padding-left:10px;text-align:left;}
div#topbar table td:nth-of-type(2) { padding-right:10px;text-align:right;}

div#topbar div#fullName
{
	font-size:0.9em;
}
div#topbar div#orgName
{
	font-size:0.7em;
}

div#bottombar
{
	position:fixed;bottom:-1px;left:0;
	width:100vw;
	height:calc(7vh + env(safe-area-inset-bottom, 0px));
	height:calc(7dvh + env(safe-area-inset-bottom, 0px));
	padding-bottom:env(safe-area-inset-bottom, 0px);
	box-sizing:border-box;
	text-align:right;
	box-shadow: 0px -3px 6px -1px var(--mwl-shadow-1);
	-moz-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1);
	-webkit-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1);
	background-color:var(--mwl-bg-bottombar);
	color:var(--mwl-text-muted);
	display: table;
	z-index:10;

}
@media print {
	div#topbar { display:none; }
	div#bottombar { display:none; }
}
div#bottombar > div {
	display: table-cell;
	text-align:center;
	font-size:1.3em;
	vertical-align:middle;
}



div#bottomlinks
{
	width:100vw;
	text-align:right;
	box-shadow: 0px -3px 6px -1px var(--mwl-shadow-1);
	-moz-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1);
	-webkit-box-shadow:0px -3px 6px -1px var(--mwl-shadow-1);
	background-color:var(--mwl-bg-bottombar);
	color:#777;
}

#transactionList
{
	font-size:0.75em;
	border-collapse:collapse;
	width:100%;
	/*border:1px solid #336699;*/
}
.neg { color:var(--mwl-text-danger); }
#transactionList tr:nth-child(odd)
{
	background-color:var(--mwl-bg-row-alt);
}
#transactionList tr:last-of-type
{
	color:var(--mwl-text-brand);
	font-weight:bold;
}
#transactionList td
{
	border-bottom:1px solid var(--mwl-border-soft);
	padding:0.8em 0.2em 0.8em 0.2em;
	letter-spacing:-0.05em;
	white-space: nowrap;
	height:4vh;
}
#transactionList th
{
	background-color:var(--mwl-bg-brand);
	padding:0.8em 0.3em 0.8em 0.3em;
	height:4vh;
	vertical-align:middle;
	color:white;
	font-weight:normal;
	letter-spacing:0.1em;
}

#transactionList td:nth-of-type(1) { white-space: nowrap; }
#transactionList td:nth-of-type(2) { text-align:left; padding-right:0.2em; max-width: 135px;
	overflow: hidden;
	text-overflow: ellipsis;}
#transactionList td:nth-of-type(3),
#transactionList td:nth-of-type(4) { white-space: nowrap; text-align:right;	width:8vw;	padding-left:10px; }
#transactionList td:nth-of-type(5) { text-align:center;color:var(--mwl-text-brand);font-size:1.1em; width:2vw;}


#transactionList th:nth-of-type(3),
#transactionList th:nth-of-type(4) { text-align:right; }

#transactionList tr.initialBalance td:nth-of-type(2) { text-align:right; font-weight:normal;}
#transactionList tr.initialBalance td { border-bottom:1px solid var(--mwl-bg-brand);letter-spacing:0.1em;}

div.transactionsSummary {
	margin-left:3vw;
	margin-right:3vw;
}

div.transactionsSummary > div {
	float:left;
	width:46vw;
	margin-bottom:1em;
}
div.transactionsSummary > div:last-of-type {
	float:right;
	text-align:right;
}
div.transactionsSummary > div > span {
	font-weight:bold;
}


.lobbyContents > div {
	padding:1em;
	margin-left:3vw;
	margin-right:3vw;
	border:1px solid var(--mwl-border-surface);
	border-radius:0.5em;
	background-color:var(--mwl-bg-surface);
	margin-top:2vh;
}
.lobbyContents > div.red {
	background-color:var(--mwl-status-danger-bg);
	color:white;
}

.eachRemarkList {
	/**/
}
.eachRemarkList > div {
	margin-left:3vw;
	margin-right:3vw;
	border:1px solid #777;
	background-color:var(--mwl-bg-surface);
	margin-top:2vh;
	clear:both;
	box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2);
	-moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	-webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	padding:0;
}
.eachRemarkList > div > table {
	width:100%;
	background-color:var(--mwl-bg-table-2);
}
.eachRemarkList > div > table td {
	padding:1em;
}
.eachRemarkList > div > table td:first-of-type{
	width:2vw;
	height:100%;
	padding:0;
}
.eachRemarkList > div.remCat_2 > table td:first-of-type{
	background-color:var(--mwl-status-danger-bg);
}
.eachRemarkList > div.remCat_1 > table td:first-of-type{
	background-color:var(--mwl-status-warning-bg);
	border-right:1px solid var(--mwl-booking-stud);
}


.eachRemarkList > div > table td div:last-of-type {
	font-size:0.7em;
	text-align:right;
	width:100%;
	margin-top:1em;
}

.remarkAircraftList {
	width:100%;
	letter-spacing:-0.03em;
}
.remarkAircraftList i {
	padding:0.5em;
	font-size:0.7em;
}
.remarkAircraftList td {
	height:6vh;
	border-top:1px solid var(--mwl-text-muted);
	box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.2);
	white-space:nowrap;
	text-align:left;
}
.remarkAircraftList tr:last-of-type td {
	border-bottom:1px solid var(--mwl-text-muted);
}
.remarkAircraftList td:last-of-type {
	text-align:right;
}
.remarkAircraftList td:first-of-type {
	width:1vw;
	padding:0;
}
.remarkAircraftList tr.objStatus_2 > td:first-of-type {
	background-color:var(--mwl-status-danger-bg);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--mwl-status-danger-bg) 75%, black), color-mix(in srgb, var(--mwl-status-danger-bg) 75%, white), color-mix(in srgb, var(--mwl-status-danger-bg) 75%, black));
}
.remarkAircraftList tr.objStatus_2 > td:nth-of-type(2),
.remarkAircraftList tr.objStatus_2 > td:nth-of-type(3) {
	background-color:var(--mwl-status-danger-tint);
}
.remarkAircraftList tr.objStatus_1 > td:nth-of-type(2),
.remarkAircraftList tr.objStatus_1 > td:nth-of-type(3) {
	background-color:var(--mwl-status-warning-tint);
}
/*.remarkAircraftList tr.objStatus_ > td:nth-of-type(2),
.remarkAircraftList tr.objStatus_ > td:nth-of-type(3),
.remarkAircraftList tr.objStatus_0 > td:nth-of-type(2),
.remarkAircraftList tr.objStatus_0 > td:nth-of-type(3) {
	background-color:#F2FFF2;
}
*/
.remarkAircraftList tr.objStatus_1 > td:first-of-type {
	background-color:var(--mwl-status-warning-bg);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--mwl-status-warning-bg) 75%, black), color-mix(in srgb, var(--mwl-status-warning-bg) 75%, white), color-mix(in srgb, var(--mwl-status-warning-bg) 75%, black));
}
/*
.remarkAircraftList tr.objStatus_ > td:first-of-type,
.remarkAircraftList tr.objStatus_0 > td:first-of-type {
	background-color:green;
	background: linear-gradient(to bottom, #559955, #33dd33, #559955);
}
*/

div.supportText {
	margin-bottom:3em;
}
div.supportText h2>i:last-of-type {
	margin-right:0.8em;
}
div.supportText p:last-of-type > a {
	margin-left:0.5em;
	letter-spacing:-1px;
}
.fa-external-link {
	margin-left:0.5em;
}
div.loginErrors > p {
	color:var(--mwl-text-danger);
	text-align:center;
}
div.login > div:last-of-type {
	text-align:center;
	margin-top:3em;
	font-size:0.8em;
}
div.login label.rememberMe {
	display:flex;
	align-items:center;
	gap:0.6em;
	width:80vw;
	margin:0.5em auto 1.5em auto;
	font-size:0.85em;
	cursor:pointer;
}
div.login label.rememberMe input {
	width:1.3em;
	height:1.3em;
	margin:0;
	padding:0;
	flex-shrink:0;
}

div.errorMessage {
	color:var(--mwl-text-danger);
	margin:auto;
	width:80vw;
	background-color:var(--mwl-bg-warning);
	border:3px solid var(--mwl-text-danger);
	border-radius:2vw;
	text-align:center;
	padding:1em;
	margin-top:20vh;
	box-shadow: 0px 3px 6px -1px var(--mwl-shadow-2);
	-moz-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
	-webkit-box-shadow:0px 3px 6px -1px var(--mwl-shadow-2);
}
div.errorMessage > div:first-of-type {
	font-size:3em;
	margin-bottom:3vh;
}
div.windowConfirmationContents {
	text-align:center;
	margin-top:4vh;
}
div.windowConfirmationContents > p.caution {
	color:var(--mwl-text-danger);
	font-weight:bold;
	font-size:1.2em;
	margin-bottom:5vh;
}
.touch {
	cursor:pointer;
}
.touch:hover,
.touch:active {
	background-color:var(--mwl-bg-brand);
	color:#ffffff;
}

#navSpinner {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.35);
	z-index:100;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	transition: visibility 0.5s, opacity 0.3s linear;
	display:flex;
	align-items:center;
	justify-content:center;
}
@media screen {
	[data-theme="dark"] #navSpinner { background-color:rgba(0,0,0,0.6); }
}
#navSpinner.active {
	visibility:visible;
	opacity:1;
	pointer-events:auto;
	/* At once, not faded in: the page may be left (and iOS stop painting) before a fade would have got far */
	transition:none;
}
#navSpinner i {
	font-size:3em;
	color:white;
}

/* ---------------------------------------------------------------------------
   COLOR UTILITY CLASSES
   ---------------------------------------------------------------------------
   For the PHP pages' one-off colored text and icons, instead of inline
   style='color:...' which can't follow the dark theme.
   --------------------------------------------------------------------------- */
.text-brand-strong { color:var(--mwl-text-brand-strong); }
.text-brand { color:var(--mwl-text-brand); }
.text-danger { color:var(--mwl-text-danger); }
.text-success { color:var(--mwl-text-success); }
.text-warning { color:var(--mwl-text-warning); }
.text-confirm { color:var(--mwl-text-confirm); }
.icon-disabled { color:var(--mwl-icon-disabled); }
.status-bar-danger { background-color:var(--mwl-status-danger-bg); }
.status-bar-warning { background-color:var(--mwl-status-warning-bg); }

div.login p.loginInfo {
	width:80vw;
	margin:10vh auto 1.5em auto;
	text-align:center;
	font-size:0.9em;
}

/* Swish (swish.php). Swish's own logo for each theme; the QR code sits on white, so it scans in dark mode too. */
div.swishBox {
	width:86vw;
	max-width:30em;
	margin:0 auto 4vh auto;
	text-align:center;
}
div.swishBox > div,
div.swishBox form > div {
	margin:0.8em 0;
}
div.swishBox form {
	margin:2em 0;
}
div.swishBox form.swishFee {
	padding-top:2em;
	border-top:1px solid var(--mwl-border-soft);
}
div.swishBox button {
	margin:1em auto;
}
div.swishBox button.swishCancel {
	background-color:transparent;
	color:var(--mwl-text-danger);
	border-color:var(--mwl-text-danger);
}
/* The amount: centred in its field, on one centred line with its label and the currency */
div.swishBox input[type='number'] {
	width:7em;
	display:inline-block;
	vertical-align:middle;
	margin:0 0.4em;
	text-align:center;
}
/* Quick amounts under the field: small and light, so they do not compete with the Pay button */
div.swishBox div.swishQuick {
	display:flex;
	justify-content:center;
	gap:0.5em;
}
div.swishBox div.swishQuick button {
	display:inline-block;
	margin:0;
	min-width:4em;
	padding:0.4em 0.6em;
	font-size:0.9em;
	background-color:transparent;
	color:var(--mwl-text-page);
	border:1px solid var(--mwl-border-soft);
}
div.swishBox div.swishQuick button:active {
	background-color:var(--mwl-bg-surface);
}
div.swishBox div.swishQuick button.selected {
	background-color:var(--mwl-bg-brand);
	border-color:var(--mwl-bg-brand);
	color:white;
}
/* Some air between the quick amounts and the Pay button under them */
div.swishBox div.swishQuick + button {
	margin-top:2em;
}
img.swishLogo {
	width:10em;
	margin-top:1.5em;
}
img.swishLogoDark,
[data-theme="dark"] img.swishLogoLight {
	display:none;
}
[data-theme="dark"] img.swishLogoDark {
	display:inline;
}
/* The colour Swish symbol in front of a button's text */
img.swishSymbol {
	height:1.3em;
	vertical-align:middle;
	margin:-0.1em 0.6em 0 0;
}
/* A button with the Swish symbol. Swish wants its logo on white or a very light background, or on a dark one
   (then with white text), never on a colour: so the page's own background, a faint border and the page's text colour. */
button.swishButton {
	background-color:var(--mwl-bg-page);
	color:var(--mwl-text-page);
	border:1px solid var(--mwl-border-soft);
	padding:0.6em 1.2em;
}
button.swishButton:active {
	background-color:var(--mwl-bg-surface);
}
[data-theme="dark"] button.swishButton {
	border-color:#4a4e55;
}
/* On a touch screen the QR code is hidden until the small "QR" link is used: the member pays on this phone */
div.swishQrLink {
	display:none;
	font-size:0.85em;
}
div.swishQrLink a {
	color:var(--mwl-text-muted);
}
@media (hover: none) and (pointer: coarse) {
	div.swishQrBox {
		display:none;
	}
	div.swishQrBox.shown,
	div.swishQrLink {
		display:block;
	}
}
img.swishQr {
	width:14em;
	height:14em;
	background-color:#ffffff;
	padding:0.5em;
	border-radius:0.5em;
}
div.swishAmount {
	font-size:1.6em;
	font-weight:bold;
}
div.swishInfo {
	font-size:0.9em;
	color:var(--mwl-text-muted);
}
div.swishResult {
	font-size:1.2em;
	font-weight:bold;
	color:var(--mwl-text-danger);
}
div.swishResult.swish_paid {
	color:var(--mwl-text-success);
}

/* The Swish button on the transactions page */
div.transactionsPay {
	text-align:center;
	margin:1em 0;
}

/* Switch profile (profiles.php): one button per profile, the member's name under the organization when it differs.
   Every button is as high as one with two lines, with the text centred in it, and the icon in a column of its own
   on the left. A name too long for one line ends with "...", so that it cannot make its button higher.
   The lobby says which profile is open after a switch. */
div.profileList {
	width:86vw;
	max-width:30em;
	margin:0 auto 4vh auto;
}
div.profileList button {
	display:flex;
	align-items:center;
	box-sizing:border-box;
	width:100%;
	min-height:4.2em;
	margin:1em auto;
	padding:0.6em 1em;
	text-align:left;
}
div.profileList button i {
	flex:0 0 1.4em;
	margin-right:0.8em;
	font-size:1.2em;
	text-align:center;
}
div.profileList span.profileText {
	flex:1 1 auto;
	min-width:0;
}
div.profileList span.profileOrg,
div.profileList span.profileName {
	display:block;
	line-height:1.3;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
div.profileList span.profileName {
	font-size:0.78em;
	margin-top:0.2em;
	opacity:0.75;
}
.lobbyContents > div.profileSwitched {
	color:var(--mwl-text-confirm);
}
.lobbyContents > div.profileSwitched i {
	margin-right:0.6em;
}

/* The ways of paying on the transactions page (nets, swish, bank): one button under the other, the same width */
div.transactionsPay button {
	min-width:16em;
	margin:0.6em auto;
}
button.payButton i {
	margin-right:0.6em;
}

/* A payment page that is not Swish's (bank.php, nets.php), laid out as the Swish page: an icon as the heading's
   mark, labels with their values under them, the OCR reference and the amount large. */
div.payBox {
	width:86vw;
	max-width:30em;
	margin:0 auto 4vh auto;
	text-align:center;
}
div.payBox > div,
div.payBox form > div {
	margin:0.8em 0;
}
div.payBox h1 {
	padding:0;
}
div.payBox h2 {
	font-size:1.2em;
	text-align:center;
}
div.payBox form {
	margin:2em 0;
}
div.payBox button {
	margin:1em auto;
}
div.payBox button.payCancel {
	background-color:transparent;
	color:var(--mwl-text-danger);
	border-color:var(--mwl-text-danger);
}
div.payBox input[type='number'] {
	width:7em;
	display:inline-block;
	vertical-align:middle;
	margin:0 0.4em;
	text-align:center;
}
div.payIcon {
	font-size:2.6em;
	color:var(--mwl-text-muted);
	margin-top:1.2em;
}
div.payLabel {
	font-size:0.85em;
	color:var(--mwl-text-muted);
	margin-bottom:0;
}
div.payValue {
	font-size:1.2em;
	font-weight:bold;
	margin-top:0.1em;
}
div.payValue.payReference {
	font-size:1.5em;
	letter-spacing:0.06em;
}
div.payAmount {
	font-size:1.6em;
	font-weight:bold;
}
div.payInfo {
	font-size:0.9em;
	color:var(--mwl-text-muted);
}
div.payResult {
	font-size:1.2em;
	font-weight:bold;
	color:var(--mwl-text-danger);
}
div.payResult.pay_paid {
	color:var(--mwl-text-success);
}
/* The annual fee under the account's details on the bank page */
div.payFee {
	padding-top:1.5em;
	border-top:1px solid var(--mwl-border-soft);
}
/* The bank QR code: for a computer; hidden on a touch screen, where the bank app is on the same phone */
div.bankQrBox {
	display:none;
}
@media (hover: hover) and (pointer: fine) {
	div.bankQrBox {
		display:block;
	}
}
img.bankQr {
	width:10em;
	height:10em;
	background-color:#ffffff;
	padding:0.5em;
	border-radius:0.5em;
}