@font-face {
	font-family: 'Poppins';
	src: url('/etc/poppins.ttf');
}

:root {
	color-scheme: dark;

	--background: light-dark(#fff, #000);
	--bg-input:   light-dark(#eee, #333);
	--bg-border:  light-dark(#24c, #48f);
	--bg-select:  light-dark(#3e3, #070);
	--bg-disable: light-dark(#ccc, #555);

	--foreground: light-dark(#000, #fff);
	--fg-dim:     light-dark(#222, #ccc);
	--fg-link:    light-dark(#08b, #8df);
	--fg-invalid: light-dark(#840, #f80);

	--loading-size: max(12vw, 200px);
}

body {
	font: 14pt 'Poppins', sans-serif;
	background: var(--background);
	color: var(--foreground);
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

body[data-theme="light"] { color-scheme: light; }
body[data-theme="dark"]  { color-scheme: dark;  }

/* ######################################################################## */
p            { color: var(--fg-dim); font-size: 16pt; }
b            { color: var(--foreground); }
a, a:visited { color: var(--fg-link); text-decoration: none; }

h5 {
	margin-top: 0;
	font-weight: normal;
}

label {
	text-align: left;
	display: block;
	font-size: 12pt;
	margin-bottom: 0.25rem;
}

input, select {
	font: 14pt 'Poppins', sans-serif;
	width: 100%;
	background-color: var(--bg-input);
	border: 4px solid var(--bg-border);
	border-radius: 1rem;
	padding: 0.75rem;
	margin-bottom: 1rem;
}

input:focus, select:focus {
	outline: none;
}

input:invalid, select:invalid {
	border-color: var(--fg-invalid);
	box-shadow: 0 0 1rem var(--fg-invalid);
}

input:disabled, select:disabled, select[disabled] > option {
	background-color: var(--bg-disable) !important;
	color: var(--fg-disable) !important;
	opacity: 1.0 !important;
}

button {
	width: 70vw;
	min-width: 15rem;
	max-width: 800px;
	padding: 1rem 0;
	margin: 1rem 0;
	background: transparent;
	border-radius: 2rem;
	border-color: var(--fg-dim);
	font: inherit;
	color: inherit;
	cursor: pointer;
}

button:hover {
	border-color: var(--fg-link);
	background-color: var(--bg-input);
}

/* ######################################################################## */
#logos {
	white-space: nowrap;
}

#main {
	text-align: center;
	background-color: var(--background);
	min-height: 92vh;
	max-width: 1200px;
	width: 96vw;
	margin: 1vh auto;
	padding: 1rem 0;
	border-radius: 0.5rem;
}

#panel {
	position: relative;
	min-height: 600px;
}

#loading {
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 100%;
}

#legal {
	padding: 1rem 0;
	font-size: 10pt;
}

#header {
	margin: 0.5rem 0;
}

.notice {
	background-color: var(--fg-invalid);
	border-radius: 1rem;
	padding: 1rem;
}

.icon {
	display: inline-block;
	height: 1em;
	margin-right: 1em;
	vertical-align: middle;
}

.text {
	display: inline-block;
	white-space: nowrap;
	width: 6em;
}

/* ######################################################################## */
#subs {
	gap: 1rem;
	justify-content: center;
	padding: 1rem 0.5rem;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

.subscribe {
	position: relative;
	flex-basis: 30%;
	min-width: min(20rem, 100%);
	min-height: 20rem;
	margin: 0;
	padding: 1rem;
	text-align: left;
	border: 1px solid var(--bg-disable);
	border-radius: 4px;
	background: transparent no-repeat right 1rem bottom 0.7rem / 2rem 2rem border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}

.subscribe > span {
	margin-bottom: 0.7rem;
	font-weight: 700;
	display: block;
}

.subscribe > .description {
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 100;
	margin-bottom: 1rem;
	color: var(--fg-dim);
}

.subscribe[data-enable="false"] {
	background-image: url(/etc/mailu.svg);
}

.subscribe[data-enable="false"]::after {
	content: var(--bc-unsubscribed, "Click to Subscribe");
	font-size: smaller;
	color: var(--fg-dim);
	display: block;
}

.subscribe[data-enable="true"] {
	background-color: var(--bg-select);
	background-image: url(/etc/mails.svg);
}

.subscribe[data-enable="true"]::after {
	content: var(--bc-subscribed, "Click to Unsubscribe");
	font-size: smaller;
	color: var(--foreground);
	display: block;
}


/* ######################################################################## */
.app_loading_full {
	margin: calc(50vh - calc(var(--loading-size)/2)) auto;
}

.app_loading, .app_loading_container {
	position: relative;
	height: var(--loading-size);
	width: var(--loading-size);
	border-radius: 100%;
	margin: 8rem auto;
}

.app_loading {
	border: 2px solid transparent;
	border-color: transparent var(--fg-link) transparent var(--fg-link);
	animation: rotate-loading 1.7s linear 0s infinite normal;
	transform-origin: 50% 50%;
	margin: 0;
}

.app_loading_text {
	animation: loading-text-opacity 3s linear 0s infinite normal;
	color: var(--fg-bright);
	font-weight: bold;
	padding-top: calc(var(--loading-size) * 0.45);
	opacity: 0.5;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: var(--loading-size);
	height: var(--loading-size);
	background-image: url(/etc/loading.png);
	background-size: var(--loading-size) var(--loading-size);
	background-repeat: no-repeat;
}

@keyframes rotate-loading {
        0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes loading-text-opacity {
	0%   { opacity: 0.35; }
	40%  { opacity: 0.95; }
	50%  { opacity: 1;    }
	60%  { opacity: 0.95; }
	100% { opacity: 0.35; }
}

/* ######################################################################## */
.VBox  { display: flex; flex-flow: column nowrap; }
.HBox  { display: flex; flex-flow: row nowrap;    }
.VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; }
.HGrid { display: flex; flex-flow: row wrap;    align-items: flex-start; }
.Grow  {                flex-grow: 2;	 	}

.Grow + .Grow { padding-left: 0.5rem; }

/* ensure this rules is last due to 0-1-0 specificity */
[hidden] { display: none; }

/* ######################################################################## */
/* css "toggle" classes.  the Use* classes get added to #main and any
   children with matching Is* or No* classes are automatically hidden
   or displayed. */
.UseAuth     	{
	--bc-subscribed:   "Subscribed";
	--bc-unsubscribed: "Unsubscribed";
	
	--bc-is-auth: auto;
	--bc-no-auth: none;
}

.UseChpw 	{ --bc-is-chpw:   auto; --bc-no-chpw:   none; }
.UseSubs    	{ --bc-is-subs:   auto; --bc-no-subs:   none; }
.UseFrame    	{ --bc-is-frame:  auto; --bc-no-frame:  none; }
.UseKiosk    	{ --bc-is-menu:   auto; --bc-no-menu:   none; }
.UseLogo     	{ --bc-is-logo:   auto; --bc-no-logo:   none; }

.IsAuth     	{ display: var(--bc-is-auth,   none);  }
.IsChpw  	{ display: var(--bc-is-chpw,   none);  }
.IsSubs     	{ display: var(--bc-is-subs,   none);  }
.IsFrame     	{ display: var(--bc-is-frame,  none);  }
.IsKiosk     	{ display: var(--bc-is-menu,   none);  }
.IsLogo      	{ display: var(--bc-is-logo,   none);  }

.NoAuth      	{ display: var(--bc-no-auth,   auto);  }
.NoChpw  	{ display: var(--bc-no-chpw,   auto);  }
.NoSubs     	{ display: var(--bc-no-subs,   auto);  }
.NoFrame     	{ display: var(--bc-no-frame,  auto);  }
.NoKiosk     	{ display: var(--bc-no-menu,   auto);  }
.NoLogo		{ display: var(--bc-no-logo,   auto);  }

/* ######################################################################## */