:root
{
	--accent-h: 107deg;
	--accent-s: 51%;
	--accent-l: 30%;
	--body-bg: #f3f3f3;
	--text-color: black;
	--solid-bg: #fff;
	--thin-line: 1px solid #d1d1d1;
	--transparent-bg: rgba(255,255,255, 0.9);
	--shade: rgba(0,0,0, 0.06);
	--shade-plus1: rgba(0,0,0, 0.09);
	--shade-plus2: rgba(0,0,0, 0.12);
	--sticky-top: var(--margin-l);
	
	--savebar-height: 54px;
	--footer-height: 110px;
	--blur: blur(2px);
	--drop-shadow-xs: 0 2px 4px rgba(0,0,0, 0.1);
	--drop-shadow-s: 0 3px 6px rgba(0,0,0, 0.1);
	--drop-shadow: 0 5px 10px rgba(0,0,0, 0.1);
	--drop-shadow-l: 0 20px 40px rgba(0,0,0, 0.2);
	--margin-xs: 10px;
	--margin-s: 20px;
	--margin: 30px;
	--margin-l: 50px;
	--margin-xl: 80px;
	--margin-xxl: 130px;
	--icon-margin: 0.5em;
	--accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-shadow: hsla(var(--accent-h), 100%, 25%, 0.2);
	--accent-shadow-strong: hsla(var(--accent-h), 100%, 25%, 0.5);
	--accent-plus1: hsl(var(--accent-h), calc(var(--accent-s) - 0%), calc(var(--accent-l) + 5%));
	--accent-plus2: hsl(var(--accent-h), calc(var(--accent-s) - 0%), calc(var(--accent-l) + 10%));
	--accent-plus3: hsl(var(--accent-h), calc(var(--accent-s) - 0%), calc(var(--accent-l) + 20%));
	--accent-plus4: hsl(var(--accent-h), calc(var(--accent-s) + 20%), calc(var(--accent-l) + 40%));
	--accent-plus5: hsl(var(--accent-h), calc(var(--accent-s) + 30%), calc(var(--accent-l) + 50%));
	--accent-minus1: hsl(var(--accent-h), calc(var(--accent-s) - 0%), calc(var(--accent-l) - 5%));
	--accent-minus2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));
	--accent-trans: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.07);
	--accent-trans-plus1: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
	--accent-trans-plus2: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
	--accent-trans-plus3: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
	--max-width: 1160px;
	--width-l: 1000px;
	--width: 750px;
	--width-s: 500px;
	--width-xs: 400px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--body-bg); }
form { display: inline; }
a { text-decoration: none; color: var(--accent-color); }
a:hover { color: var(--accent-plus2) }
a:active { color: var(--accent-minus1) }
hr { border: none; border-top: var(--thin-line); margin: var(--margin) 0; }
h1 { margin: 0 0 2.4rem 0; font-size: 1.5rem; }
h2 { margin: 0 0 1rem 0; font-size: 1.3rem; }
h3 { margin: 0 0 0.8rem 0; font-size: 1.2rem; }
h4 { margin: 0 0 3px 0; font-size: 1.07rem; }
h5 { margin: 0 0 3px 0; font-weight: normal; }
h6 { margin: 0 0 2px 0; font-size: 0.9rem; }
h1 + h3 { margin-top: -2.1rem; margin-bottom: 2.4rem; font-weight: normal; }
h2 + h5 { margin-top: -0.9rem; margin-bottom: 1.4rem; }
h3 + h5 { margin: -0.6rem 0 0.9rem 0; }
h4 + h5 { margin-bottom: 5px; }

*:not(input[type="hidden"]):not([style*="display: none"]) ~ h1,
	*:not(input[type="hidden"]):not([style*="display: none"]) ~ h2,
	div.flex h1:only-child,
	div.flex h2:only-child { margin-top: var(--margin-l); }
* ~ h3 { margin-top: var(--margin); }

pre { margin: 0; font-family: monospace; white-space: pre-wrap; width: 100%; padding: 5px; border-radius: 3px; border: #333; overflow: auto; background: #000; color: #ddd; }
p, p + ul li { line-height: 1.8; }
p { margin: 0; }
p + p { margin-top: 2rem; }
p + li + li { margin-top: 0.5rem; }

.sticky { position: sticky; top: var(--sticky-top); /*filter: drop-shadow(0 2px 4px hsla(var(--accent-h), 100%, 10%, 0.3));*/ }
.savebar { position: fixed; bottom: 0; left: 0; line-height: var(--savebar-height); width: 100%; white-space: nowrap; overflow-x: auto; background: var(--transparent-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-top: var(--thin-line); z-index: 10; }
body:has(.savebar):has(footer) footer { height: calc(var(--footer-height) + var(--savebar-height)); }
body:has(.savebar):has(footer) main { min-height: calc(100vh - var(--footer-height) - var(--savebar-height)); }
.savebar .savebuttons { width: var(--width-l); margin: 0 auto; }

.savebuttons { white-space: nowrap; overflow-x: auto; }
.savebuttons:has(div) { display: flex; gap: var(--margin-s); flex-wrap: nowrap; }
.savebuttons:has(div) div { flex-grow: 1; }
.savebuttons div:last-child,
	.savebuttons:not(:has(div)) { text-align: right; }
.savebuttons div:not(:first-child):not(:last-child) { text-align: center; }
.card .savebuttons { margin-top: var(--margin-l); }
.card .savebuttons:not(:has(div)) { margin-top: var(--margin); }

.msgbox { background: rgba(230,230,230, 0.9); border: 1px solid rgba(200,200,200,0.9); padding: 1.1rem; border-radius: 10px; }
.msgbox.success { background: rgba(228, 251, 217, 0.9); border: 1px solid rgba(184, 233, 159, 0.9); }
.msgbox.error { background: rgba(255, 229, 229, 0.9); border: 1px solid rgba(255, 186, 186, 0.9); }
.msgbox.s { border-radius: 5px; padding: 6px 9px; }
.msgbox.breathe { animation: msgbox-breathe 3s infinite; }
@keyframes msgbox-breathe { 0% {} 50% {background: #ffd485; border: 1px solid #ffac14;} 100% {} }

span.msgbox.s + .button,
	span.msgbox.s + .buttongroup,
	.button + span.msgbox.s,
	span.msgbox + span.msgbox { margin-left: var(--margin-s); }
div.msgbox + div.msgbox { margin-top: var(--margin-xs); }

input, textarea { box-shadow: inset 0 0 4px rgba(0,0,0,0.2); }
select { box-shadow: var(--drop-shadow-s); }
input, select, textarea { border: 1px solid rgba(0,0,0,0.4); border-radius: 3px; }
label:has(input[type="checkbox"]:disabled) { color: #999; }
form.simple label:has(input[type="checkbox"]:not(:disabled)):hover { color: var(--accent-color); }
form.simple input:not([type="file"]):not([type="checkbox"]),
	form.simple textarea { width: 100%; display: inline-block; }
form.simple input[type="checkbox"] { margin-left: 0; }
form.simple select,
	form.simple input[type="file"] { max-width: 70vw; }
form.simple .flex + .flex,
	form.simple div + h4,
	form.simple input + h4,
	form.simple select + h4,
	form.simple textarea + h4,
	form.simple table + h4,
	form.simple label + h4,
	form.simple select + .flex,
	form.simple textarea + .flex,
	form.simple textarea + .msgbox,
	form.simple button + .flex,
	form.simple select + .tblcontainer,
	form.simple .tblcontainer + h4 { margin-top: var(--margin-s); }
form.simple input[type="file"] { padding: 3px; }
form.simple input:read-only,
	form.simple textarea:read-only { background: #ddd; }
form.simple input + .tblcontainer { margin-top: var(--margin-xs); }

.card { border: 1px solid rgba(255,255,255,0.5); box-shadow: var(--drop-shadow-l); background: var(--transparent-bg); border-radius: var(--margin-xs); padding: var(--margin); }
/*.card.l { box-shadow: var(--drop-shadow-l); }*/
/*.card.s { padding: var(--margin-s); box-shadow: var(--drop-shadow-s); border-radius: 5px; }*/
.card.text {  }
.card + .card { margin-top: var(--margin-l); }
/*.card + .card.l, .card.l + .card { margin-top: var(--margin-l); }*/
/*.card.flat { box-shadow: none; border: var(--thin-line); padding: var(--margin-s); }*/
/*.card.s + .card.s, .card.flat + .card.flat { margin-top: var(--margin-s); }*/
.card .header { /*text-shadow: var(--text-shadow-embossed);*/ box-shadow: var(--drop-shadow-s); background: linear-gradient(to bottom, #eee, #ddd); border-bottom: 1px solid #bbb; border-top-left-radius: var(--margin-xs); border-top-right-radius: var(--margin-xs); font-weight: bold; white-space: nowrap; overflow: auto; padding: var(--margin-xs); }
/*.card.s .header { border-top-left-radius: 5px; border-top-right-radius: 5px; }*/
.card .miniheader { border-bottom: var(--thin-line); padding-bottom: var(--margin-xs); align-items: flex-end; overflow-x: auto; }
.card .miniheader h1 { margin: 0 !important; display: inline-block; vertical-align: middle; }
form.card,
	form.tblcontainer { display: block; }
.card:has(.header) { padding: 0; }
.card:has(.header) .tblcontainer { margin: var(--margin-xs); }

.button { display: inline-block; background: linear-gradient(var(--accent-plus2), var(--accent-minus1)); border: 1px solid var(--accent-color); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5)/*, 0 1px 3px hsla(var(--accent-h), 100%, 10%, 0.3)*/; border-radius: 6px; padding: 8px 15px; line-height: 1em; white-space: nowrap; font-weight: bold; color: white; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.button:hover { color: white; background: linear-gradient(var(--accent-plus3), var(--accent-plus1)); }
.button.selected { background: linear-gradient(var(--accent-plus4), var(--accent-plus2)); }
.button:active { background: linear-gradient(var(--accent-plus1), var(--accent-minus2)); box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.2); } /* :active must always be after :hover! */
.button + .button, .buttongroup + .button, .button + .buttongroup, .buttongroup + .buttongroup { margin-left: var(--margin-s); }
.button.danger { color: white; background: linear-gradient(#dc5f59, #b33630); border: 1px solid #8c2924 !important; }
.button.danger:hover { background: linear-gradient(#EA716B, #C8463F); }
.button.danger:active { background: linear-gradient(#bf524d, #9c2e28); }
.buttongroup { white-space: nowrap; }
.buttongroup .button { border-right: 1px solid rgba(0,0,0,0.2) !important; }
.buttongroup .button+.button { margin-left: 0 !important; border-left: 1px solid rgba(255,255,255,0.3) !important; }
.buttongroup .button:not(:first-child):not(:last-child) { border-radius: 0; }
.buttongroup .button:not(:only-child):first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.buttongroup .button:not(:only-child):last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-right: 1px solid var(--accent-color); }
.button.flat { background: var(--accent-color); color: white; border: none !important; box-shadow: none; text-shadow: none; padding: 9px 16px; }
.button.flat:hover, .button.flat.selected { background: var(--accent-plus2); }
.button.flat:active { background: var(--accent-minus1) }
.button.s { border-radius: 3px; padding: 5px 8px; }
.button.s + .button.s { margin-left: var(--margin-xs); }
.button.disabled { background: linear-gradient(#888, #555); border: 1px solid #666; }
.button.disabled:hover { background: linear-gradient(#999, #666); border: 1px solid #777; }
.button.on { background: linear-gradient(#5eb037, #326b0f); border: 1px solid #3f8a11; }
.button.on:hover { background: linear-gradient(#64c236, #3f8216); }
.button + .tblcontainer { margin-top: var(--margin-s) }

table.striped { color: var(--text-color); background: var(--solid-bg); border-spacing: 0; border: var(--thin-line); border-collapse: collapse; }
table.striped th { border-bottom: var(--thin-line); padding: 0; }
table.striped th a, table.striped th:not(:has(a)), table.striped td { padding: 0.57rem; }
table.striped tbody tr:nth-child(odd) { background: var(--shade); }
table.striped.allborders td, table.striped.allborders th { border: var(--thin-line); }

table.minimal { color: var(--text-color); border-spacing: 0; border-collapse: collapse; }
table.minimal th { padding: 0 3px 3px 0; }
table.minimal th:last-child { padding-right: 0; }
table.minimal th a { padding: 0.5rem 0.6rem; }
table.minimal td { padding: 0.6rem; }
table.minimal tbody tr:nth-child(odd) { background: var(--shade); }
table.minimal tbody tr td:first-child, table.minimal th a { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
table.minimal tbody tr td:last-child, table.minimal th a { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
table.minimal tbody tr:last-child:nth-child(odd) { border-bottom: 1px solid transparent; }
table.minimal tfoot td { padding-top: 1rem; }

table.striped thead,
	table.minimal thead { text-align: left; white-space: nowrap; font-weight: bold; }
table.striped th a,
	table.minimal th a { display: block; }
table.striped th a:not([href]),
	table.minimal th a:not([href]) { color: var(--text-color); }
table.striped tbody tr:hover, table.striped th a.sorting, table.striped th a[href]:hover,
	table.minimal tbody tr:hover, table.minimal th a.sorting, table.minimal th a[href]:hover { background: var(--accent-trans-plus2); }
table.striped tfoot,
	table.minimal tfoot { border-top: var(--thin-line); text-align: center; font-weight: bold; }

.flex { display: flex; gap: var(--margin-s); flex-wrap: wrap; }
.flex.nogap { gap: 0; }
.flex.gap { gap: var(--margin); }
.flex.gap-l { gap: var(--margin-l); }
.flex.gap-s { gap: var(--margin-s); }
.flex.gap-xs { gap: var(--margin-xs); }
.flex.nowrap { flex-wrap: nowrap; }
.flex.vtop { align-items: flex-start; }
.flex.vcenter { align-items: center; }
.flex.vbaseline { align-items: baseline; }
.flex.vbottom { align-items: flex-end; }
.flex.hcenter { justify-content: center; }
.flex.hend { justify-content: flex-end; }
.flex div, .flex.nogrow div.grow { flex-grow: 1; }
.flex div:last-child { margin-right: 0; }
.flex .nogrow,
	.flex.nogrow div { flex-grow: 0; }
.flex.justifylr { white-space: nowrap; overflow-x: auto; flex-wrap: nowrap; }
.flex.justifylr div:last-child { text-align: right; }
.flex.justifylr div:not(:first-child):not(:last-child) { text-align: center; }
.flex.scrollx { flex-wrap: nowrap; }
.flex .card + .card { margin: 0; }
/*.flex + .card { margin-top: var(--margin-l); }*/

i.fas,
	i.fa-solid,
	i.fa-regular,
	i.far,
	i.fab { margin-right: var(--icon-margin); }
i.fas.leftmargin,
	i.fa-solid.leftmargin,
	i.fa-regular.leftmargin,
	i.far.leftmargin,
	i.fab.leftmargin { margin: 0 0 0 var(--icon-margin); }
i.fas.lrmargin,
	i.fa-solid.lrmargin,
	i.fa-regular.lrmargin,
	i.far.lrmargin,
	i.fab.lrmargin { margin: 0 var(--icon-margin); }
h3 i.fas.fa-asterisk,
	h4 i.fas.fa-asterisk { margin-left: 3px; color: red; font-size: 0.7em; vertical-align: top; }

.nowrap,
	.nowrap td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.nomargin { margin: 0 !important; }
table.nowrap tbody td,
	table td.nowrap { width: 1px; }
table.nowrap td.wrap { width: unset; white-space: normal; }
.tblcontainer { overflow-x: auto; display: block; }
.tblcontainer table { width: 100%; }
.scrollx { white-space: nowrap; overflow-x: auto; }
.cmaxwidth, body:has(.savebar):has(.card.cmaxwidth) .savebar .savebuttons { width: var(--max-width); max-width: calc(100vw - 2*var(--margin-xs)); margin: 0 auto; }
.cwidth-l, body:has(.savebar):has(.card.cwidth-l) .savebar .savebuttons { width: var(--width-l); max-width: calc(100vw - 2*var(--margin-xs)); margin: 0 auto; }
.cwidth, body:has(.savebar):has(.card.cwidth) .savebar .savebuttons { width: var(--width); max-width: calc(100vw - 2*var(--margin-xs)); margin: 0 auto; }
.cwidth-s, body:has(.savebar):has(.card.cwidth-s) .savebar .savebuttons { width: var(--width-s); max-width: calc(100vw - 2*var(--margin-xs)); margin: 0 auto; }
.cwidth-xs, body:has(.savebar):has(.card.cwidth-xs) .savebar .savebuttons { width: var(--width-xs); max-width: calc(100vw - 2*var(--margin-xs)); margin: 0 auto; }
.notices-container { margin: 0 auto; margin-bottom: var(--margin); max-width: calc(100vw - 2*var(--margin-xs)); }
.notices-container.s { margin-bottom: var(--margin-s); }
.notices-container div.msgbox { width: fit-content; margin: 0 auto; }
.warningtxt { color: #c91212; }
.successtxt { color: #469621; }
.pageswitcher { overflow-x: auto; text-align: center; margin: var(--margin-s) 0; }