*, *::before, *::after{
box-sizing:border-box;
}

:root {
color-scheme: light dark;
/* font-size: 112.5%; */
font-size: 1rem;
}

body {
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
margin: 0.5em;
background-color: var(--background-color);
color: var(--foreground-color);
}

a {
color: var(--link-normal);
}

a:visited {
color: var(--link-visited);
}
a:hover, a:focus, a:active {
color: var(--link-active-foreground);
background-color: var(--link-active-background);
}

h1 {
font-size: 2rem;
color: var(--h1);
text-shadow: 3px 3px 3px #b9f;
}

h2 {
font-size: 1.7rem;
color: var(--h2);
text-shadow: 3px 3px 3px #caf;
}

h3 {
font-size: 1.5rem;
color: var(--h3);
}

h4 {
font-size: 1.4rem;
color: var(--h3);
}

h5 {
font-size: 1.3rem;
color: var(--h3);
}

h6 {
font-size: 1.25rem;
color: var(--h3);
}

ul, ol {
padding-left: 2em;
}

img {
vertical-align: middle;
}

p, ul, ol, dl, blockquote, pre, caption, figure {
margin-top: 0.75em;
margin-bottom: 0;
line-height: 1.4;
}

p:first-child, ul:first-child, ol:first-child, dl:first-child, blockquote:first-child, pre:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
}

li p, li ul, li ol {
margin-top: 0;
margin-bottom: 0;
}

p, pre, table, td, th, div, code, pre, samp {
word-wrap: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}

code, pre, samp, kbd {
white-space: pre-line;
white-space: pre-wrap;
font-family: consolas, courier, monospace;
line-height: normal;
}

em, address,  cite, i, var {
font-style: italic;
}

big {
font-size: 1.2em;
}

small {
font-size: 0.8em; 
}

img, table, td, blockquote, code, pre, textarea, input, video, svg {
max-width: 100%;
}

img {
height: auto;
object-fit: contain;
}

pre code {
padding: 0;
background: none;
color: inherit;
border-radius: 0;
}

mark {
padding: 2px 4px;
}

.disabled,[disabled] {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}

.hidden, [hidden] {
display: none;
}

.visually-hidden {
position: absolute !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
height: 1px !important; 
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
left: -2px !important;
top: auto !important;
}

table {
border: 2px solid var(--table-border);
width: 100%;
max-width: 100%;
border-collapse: collapse;
vertical-align: top;
margin-bottom: 2rem;
}

table.fixed { 
table-layout: fixed;
}

td, th { 
padding: 0.3em 0.8em;
border: 2px solid var(--table-border);
border-collapse: collapse;
text-align: left;
vertical-align: top;
min-width: 2rem;
cursor: default;
}

table.noborder, table.noborder tbody, table.noborder  thead, table.noborder  tr, table.noborder  th, table.noborder  td, table.noborder  img, button.noborder {
border: 0;
padding: 0;
margin: 0;
}

caption {
padding: 1rem;
}

.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
background-color: var(--overlay-background);
opacity: 0.6;
}

dialog {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background-color: transparent;
vertical-align: middle;
}

dialog>div:only-child {
width: auto;
height: auto;
vertical-align: middle;
margin: auto auto auto auto;
min-width: 25%;
min-height: 25%;
max-width: 97%;
max-height: 97%;
background-color: var(--dialog-background);
border: 3px solid var(--field-normal-border);
box-shadow: 1.25em 1.25em 1.25em 1.25em #00000099;
}

form, fieldset {
border: none;
}

label {
vertical-align: top;
cursor: pointer;
text-align: right;
padding-right: 0.5em;
}

input[type=checkbox]+label {
text-align: left;
padding-left: 0.5em;
}

legend {
border: 0;
white-space: normal;
}

textarea {
min-height: 10em;
min-width: 200px;
max-width: 100%;
height: auto;
width: 100%;
vertical-align: top;
resize: vertical;
}

select {
-webkit-appearance: menulist-button;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
display: none;
}

input, select, textarea, button, .button, ul.menuList li a {
display: inline-block;
background-color: var(--field-background);
color: var(--field-foreground);
border: 3px solid var(--field-border);
vertical-align: top;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.25em;
padding-right: 0.25em;
}

button, input[type=submit], input[type=reset], input[type=button], .button, ul.menuList li a {
text-align: center;
}

button:focus, .button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input::placeholder, textarea::placeholder, select::placeholder {
color: var(--field-placeholder-foreground);
}

input:hover, input:focus, input:active, 
select:hover, select:focus, select:active, 
textarea:hover, textarea:focus, textarea:active, 
div:focus, span:focus 
{
background-color: var(--field-background);
color: var(--field-foreground);
border: 3px solid var(--field-active-border);
}

input:valid, textarea:valid, select:valid {
border: 3px solid var(--field-valid-border);
}

input:invalid, textarea:invalid, select:invalid {
border: 3px solid var(--field-invalid-border);
}

input:required, textarea:required, select:required {
}

input:optional, textarea:optional, select:optional {
}

button:hover, button:focus, button:active, 
.button:focus, .button:hover, .button:active, 
input[type=submit]:focus, input[type=submit]:hover, input[type=submit]:active, 
input[type=button]:focus, input[type=button]:hover, input[type=button]:active, 
input[type=reset]:focus, input[type=reset]:ohver, input[type=reset]:active, 
ul.menuList li a:focus, ul.menuList li a:active, ul.menuList li a:hover
{
background-color: var(--link-active-background);
color: var(--link-active-foreground);
}

ul.menuList li a[aria-current] {
background-color: var(--link-current-background);
color: var(--link-current-foreground);
}

.buttonList {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

.flexH {
display: flex;
flex-flow: row wrap;
}

.flexV {
display: flex;
flex-flow: column wrap;
}

.flexItemGrow, .flexGrow>* {
flex: 1;
}

.flexItemNoGrow {
flex: 0;
}

.shortColumns {
columns: 20em auto;
column-gap: 3em;
column-fill: balance;
}

.largeColumns {
columns: 40em auto;
column-gap: 2em;
column-fill: balance;
}

.ellipsize {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.menuList {
list-style-type: none;
list-style: none;
}

.menuList li a {
text-decoration: none;
}

.sidePadded {
padding-left: 1em;
padding-right: 1em;
}

.clearFloat {
clear: both;
}

.floatLeft {
float: left;
}

.floatRight {
float: right;
}

.centered {
text-align: center;
}

/* ### */

.success {
color: var(--success-color);
padding-left: 2em; 
background: url('images/information.svg') no-repeat;
}

.error {
color: var(--error-color);
padding-left: 2em; 
background: url('images/invalid.svg') no-repeat;
}

.icon {
display: inline-block;
width: 1em;
height: auto;
}

.close-button {
float: right;
vertical-align: top;
}

.floatingMenu {
position: absolute;
}

.tooltip {
background: var(--background);
position: absolute;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.25em;
padding-bottom: 0.25em;
border: 2px solid var(--table-border);
}

.skip-link:focus, .skip-link:active {
position: relative;
top: 0px;
left: 0px;
width: auto;
height: auto;
z-index: 9;
}