/* common */ :root {--primary-color: #333;--background-color: #eee;--error-color: #c00;--success-color: green;--link-color: #cc3366;--button-text-color: #fff;--button-bg-color: #666;--button-bg-hover-color: #333;--font-family: Arial;}html {font-size: 16px;scroll-behavior:smooth;}* {margin:0;padding:0;box-sizing: border-box;}body {position: relative;font-family: var(--font-family);margin: 4px;color: var(--primary-color);background-color: var(--background-color);}header {max-width: min(1200px, 100%);margin: 0 auto calc(0.25rem + 1vh);padding: 1.25vh 1.25vw;display: grid;grid-template-columns: 50px 1fr 50px;align-items: baseline;& > div {&:first-child {text-align: left}&:nth-child(2) {text-align: center}&:last-child {text-align: right}}}main {max-width: min(1200px, 100%);margin: 0 auto;padding: 1.5vh 1.25vw;}h1 {font-size: clamp(1.25rem, 2vw, 3rem);font-weight: 300;text-align: center;}.back-link,.help-link {font-size: clamp(1.25rem, 1.75vw, 2.5rem);font-weight: 300;& > a {color: var(--primary-color);text-decoration: none;}}h2 {font-size: clamp(1rem, 1.5vw, 2rem);font-weight: 300;margin-bottom: .5rem;&.bold {font-weight: 600;}}p, ul{font-size: clamp(0.875rem, calc(.5rem + 1vw), 1rem);;line-height: 1.4;margin-bottom: .75lh;}.small {font-size: .75rem;line-height: 1.2;margin-bottom: 1lh;}.center {text-align: center;width: 100%;}.nomargin {margin-bottom: 0;}.nowrap {white-space: nowrap;}.error {color: var(--error-color);font-weight: bold;}pre {font-size: .75rem;font-family: 'Courier New', Courier, monospace;}a {color: var(--link-color);&.hover {text-decoration: none;&.mouse:hover {text-decoration: underline;}}}.alert{width:100%;padding:16px;}.alert-error{color:#cc0000;background-color:#ffc9c9;border-left:3px solid #cc0000;}.alert-warning{color:#c56405;background-color:#fc9;border-left:3px solid #f97e05;}.alert-succes{color:#1A7000;background-color:#d6ffcb;border-left:3px solid #1a7000;}.hidden {display:none;}.help {padding: 3vh 1vw;}.spinner {display: block;position: fixed;left: calc(50% - 20px);top: calc(50% - 20px);width: 40px;height: 40px;border: 8px solid #cccfd0;border-top-color: #db3c34;border-radius: 50%;animation: spin 900ms linear infinite;z-index:500;}@keyframes spin {to {transform: rotate(360deg);}}
/* form */ .forms-container {display:flex;flex-wrap: wrap;gap: 1.2vw;margin: .5vh 0 1.5vh;& > div {margin: 0;}}form {--_text-font-size: clamp(0.75rem, calc(.5rem + 1vw), 1rem);--_button-height: min(calc(1.5rem + .8vw), 2rem);--_input-padding: 4px;--_background-color: #ECECEC;--_default-border-color: #CCC;--_invalid-border-color: #C00;display:grid;grid-template-columns: 1fr 8fr;gap: 1.2vw;background-color: var(--_background-color);border: 1px solid var(--_default-border-color);padding: 2vh 2vw;/* &:has(.touched:invalid ) {border: 1px solid var(--_invalid-border-color);}*/&:has(:invalid) {& input[type="submit"]:disabled {color: #bbb;cursor: not-allowed;}}& > div {display: flex;align-items: center;margin: .25vh 0;flex-wrap: wrap;&:nth-child(1 of div) {margin-top: 1vh;}&.one-column {grid-column: 1/3;}&.toggle-radio:not(:focus-within):not(:has(input[type="radio"]:checked, input[type="checkbox"]:checked)) {& > input.touched + label{border: 1px solid var(--_invalid-border-color);}}& > .error, .info {width:100%;font-weight: normal;font-size: var(--_text-font-size);padding-top: 2px;}& > h2, p {margin:0;width: 100%;}& > p {font-size: var(--_text-font-size);}}&.action {display: flex;justify-content: left;align-items: center;border:none;padding: .1vh 0;flex-wrap: wrap;gap: 2vw;& > div {display: flex;flex-wrap: wrap;gap: 2vw;margin-bottom: 2vh;& > div {display: flex;flex-wrap: nowrap;gap: 1vw;& > select {font-family: var(--font-family, Arial);font-size: var(--_text-font-size);width: fit-content;margin: 0;}}}}&.login {width: min(400px, 100%);margin: 5vh auto;background-color: #e3e3e3;gap: 1.5rem;& input[type="submit"] {max-width: unset;}}& label {font-size: var(--_text-font-size);display: block;&&.required::after {content:'*';color: #C00;}}& input, select, textarea {width: 100%;font-size: var(--_text-font-size);border: 1px solid var(--_default-border-color);padding: 4px;font-family: 'Courier New', Courier, monospace;background-color: #fefefe;&.input-small {max-width: 160px;}&.input-medium {max-width: 320px;}&.button-height {height: var(--_button-height);}&.margin {margin: 0 .6vw;}&:read-only {outline: none;background-color: #EEE;}&.touched:invalid {border-color: var(--_invalid-border-color);}}& input[type="date"], input[type="time"], input#gewerkt {width: 160px;margin-right: 5px;&.touched:valid + span::after {content: attr(data-valid);color: var(--success-color);}&.touched:invalid + span::after {content: attr(data-invalid);color: var(--error-color);}}& input[type="time"] {width: 100px;}& textarea {field-sizing: content;min-height: 70px;}& a.cancel-button {color: var(--primary-color, #3c3c3c);font-size: var(--_text-font-size);font-variant: all-small-caps;height: var(--_button-height);line-height: var(--_button-height);border: 1px solid var(--_default-border-color);border-radius: calc(var(--_button-height) / 2);padding: 0 2vw;text-decoration: none;}& input[type="submit"], button {display: inline-flex;min-width: 100px ;max-width: 220px;height: var(--_button-height);padding: 0 1.5vw;color: var(--button-text-color);border:none;background-color: var(--button-bg-color);border-radius: calc(var(--_button-height) / 2);font-family: Arial;font-size: var(--_text-font-size);font-variant: all-small-caps;align-items: center;justify-content: center;&.button-x-small {min-width: 50px;max-width: 100px;padding: 0 1vw;}&.hover {&.mouse:hover:not(:disabled) {background-color: var(--button-bg-hover-color);cursor: pointer;}}&:disabled {color: #bbb;cursor: not-allowed;}&:focus-visible {outline:auto;}}.toggle-radio {padding-top: 1px;padding-left: 1px;}.toggle-radio input {width: 0;height: 0;position: absolute;left: -9999px;}.toggle-radio input + label {margin: 0;padding: var(--_input-padding) calc(var(--_input-padding)*2);position: relative;display: inline-block;border: solid 1px var(--_default-border-color);background-color: #FFF;font-size: var(--_text-font-size);text-align: center;min-width:50px;transition: border-color .25s ease-out, color 0.25s ease-out, background-color 0.25s ease-out;}.toggle-radio input.mouse:hover + label {background-color: oklch(from var(--button-bg-color) l c h / .4);}.toggle-radio input:checked + label {background-color: var(--button-bg-color);color: #FFF;border-color: var(--button-bg-hover-color);z-index: 1;}.toggle-radio input + label {margin-top: -1px;margin-left: -1px;}.toggle-radio input:focus + label,.toggle-radio input:focus-visible + label {outline: auto;z-index:2;}}
/* menu */ menu {list-style-type: none;border: 1px solid #CCC;width: min(400px, 100%);margin: 5vh auto;& > li {display: block;padding: 8px;& > a {display: block;color: #FFF;padding: 1.75vh 0;background-color: #666;text-align: center;text-decoration: none;&.hover {&.mouse:hover {background-color: #333;text-decoration: none;}}}}}
/* sidepanel */ #sidepanel {--_sidepanel-width: min(500px,98%);--_sidepanel-text-color: #222;--_sidepanel-bg-color: #999;position: fixed;height: 100vh;width: var(--_sidepanel-width);;top: 0;right: calc(-1 * var(--_sidepanel-width));color:  var(--_sidepanel-text-color);background-color: var(--_sidepanel-bg-color);overflow-x: hidden;transition: right 0.5s ease;padding-top: 60px;z-index: 1000;overscroll-behavior: contain;}#sidepanel.visible {right: 0;}#panelclose {display: block;position: absolute;top: 0;right: 25px;font-size: 48px;padding: 10px;text-decoration: none;color: #333;transition: color 0.3s ease;}#panelclose.mouse:hover{color: #555;}#panelcontent {padding: 2vh 2.25vw;& > h2 {font-size: clamp(1.125rem, 1.5vw, 2rem);font-weight: bold;margin-bottom: 1rem;text-align: left;}}#overlay {display: none;position: absolute;top: 0;right:0;left:0;height:100vh;background-color: rgba(51,51,51,.25);transition: background-color 0.3s ease;z-index:900;overscroll-behavior: contain;overflow: hidden;}
/* table */ table{--_table-font-size: clamp(0.75rem, calc(.4rem + 1vw), 1rem);--_table-padding: calc(3px + 0.25vw);--_table-bg-color: #f3f3f3;--_th-text-color: var(--primary-color, #3c3c3c);--_th-bg-color: #d0d0d0;--_th-border-color: #bbbbbb;--_td-border-color: #bbbbbb;--_td-even-row-color: #e9e9e9;background-color: var(--_table-bg-color);border-bottom: 1px solid var(--_th-bg-color);color:#090909;font-size: var(--_table-font-size);margin-bottom:20px;&.full-width{width: 100%;}& > thead {& > tr {> th {color: var(--_th-text-color);background-color:var(--_th-bg-color);padding: calc(var(--_table-padding)*1.5) var(--_table-padding);text-align:left;border-right: 1px solid var(--_th-border-color);font-weight: 300;&:last-child{border-right:0;}&.right {text-align:right;}.sorted-asc::after {display: inline-block;content: attr(data-sorted-asc);}.sorted-desc::after {display: inline-block;content: attr(data-sorted-desc);}& > a {color:inherit;}}}}& > tbody, tfoot {& > tr {&:nth-child(even) {background-color: var(--_td-even-row-color);}& > td {font-weight:normal;padding: var(--_table-padding);;vertical-align:top;border-right: 1px solid var(--_td-border-color);position: relative;&:last-child{border-right:0;}&.center {text-align:center;}&.right {text-align:right;}&.middle {vertical-align:middle;}& > a {color: inherit;&.hover {text-decoration: none;&.mouse:hover {text-decoration: underline;}}}}}}& > tfoot {& > tr {&:last-child {background-color: var(--_th-bg-color);}& > td {border-right: 1px solid var(--_th-border-color);}}}}