@charset "UTF-8";
/* Design Elevenfour Web App
@ since: 2023-09-15
@ Version: 2.0.0 alpha
@ author: René Leege
*/
/* View Transition */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
/* resetting thingys */
html {
  box-sizing: border-box;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
  -webkit-text-size-adjust: none;
  --ewa-line-height: calc(1em + 0.575rem);
}

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

* {
  line-height: var(--ewa-line-height);
}

input, textarea, select, button {
  font-size: inherit;
  font-family: inherit;
}

img, picture, video, audio, canvas, svg {
  max-width: 100%;
}

img {
  -o-object-fit: cover;
     object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
  margin-block-start: 0;
  margin-block-end: var(--ewa-space-xs);
}

p {
  margin-block: 0;
}
p:not(:last-of-type) {
  margin-block-end: var(--ewa-space-xs);
}

/* variables
@ since: 	2024-06-10
@ package:	Design ASK Web App
@ Version:	0.3.0
@ author:	René Leege
*/
:root {
  --ewa-font-ui: -system-ui, -apple-system, BlinkMacSystemFont, Segoe, "Segoe UI", Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ewa-font-monospace: 'JetBrains Mono', 'Source Code Pro', Consolas, Courier, "Ubuntu Monospace", "Courier New", ui-monospace, monospace;
  --ewa-font-size-xs: clamp(0.8rem, 0.7747rem + 0.0326vw, 0.875rem);
  --ewa-font-size-sm: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --ewa-font-size-md: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --ewa-font-size-lg: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --ewa-font-size-xl: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --ewa-font-size-2xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --ewa-font-size-3xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --ewa-font-size-4xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  color-scheme: light dark;
  --ewa-page-background: light-dark(rgb(245,245,245), rgb(25, 25, 25));
  --ewa-content-background: light-dark(rgb(255,255,255), rgb(34, 34, 34));
  --ewa-content-secondary-background: light-dark(rgb(247,247,247), rgb(45, 45, 45));
  --ewa-sidebar-background: light-dark(rgb(240,240,240), rgb(20, 20, 20));
  --ewa-content-border: light-dark(rgb(221, 221, 221), rgb(51, 51, 51));
  --ewa-content-header-background: light-dark(rgb(238,238,238), rgb(23, 23, 23));
  --ewa-content-text: light-dark(rgb(20,20,20), rgb(235, 235, 235));
  --ewa-content-text-dimmed: light-dark(rgb(112, 112, 112), rgb(153, 153, 153));
  --ewa-focus-ring: light-dark(rgb(34,34,34), rgb(221, 221, 221));
  --ewa-clr-shadow: light-dark(var(--ewa-content-border), rgb(0,0,0));
  --ewa-clr-shadow-reflection: light-dark(rgba(255,255,255,.75), rgba(51,51,51,.75));
  --ewa-clr-logo-pulse: light-dark(var(--ewa-clr-blue-700), var(--ewa-clr-cyan-400));
  --ewa-button-background: light-dark(rgb(233, 233, 233), rgb(60, 60, 60));
  --ewa-button-text: light-dark(#000, #fff);
  --ewa-button-refresh-background: light-dark(rgb(229, 229, 229), rgb(26, 26, 26));
  --ewa-form-field-background: light-dark(#ddd, #111);
  --ewa-form-field-text: light-dark(#111, #f7f7f7);
  --ewa-content-link: light-dark(rgb(0,98,168), rgb(123, 204, 254));
  --ewa-content-link-decoration: light-dark(color-mix(in srgb, var(--ewa-content-link), transparent 50%), color-mix(in srgb, var(--ewa-content-link), transparent 50%));
  --ewa-content-link-active: light-dark(rgb(8, 68, 115), rgb(10, 153, 237));
  --ewa-content-link-decoration-active: light-dark(color-mix(in srgb, var(--ewa-content-link-active), transparent 50%), color-mix(in srgb, var(--ewa-content-link-active), transparent 50%));
  --ewa-content-header-border-highlight: light-dark(var(--ewa-clr-magenta-600), var(--ewa-clr-magenta-900));
  --ewa-clr-scrollbar: light-dark(var(--ewa-clr-blue-700), var(--ewa-clr-blue-400));
  --ewa-clr-nav-border-active: light-dark(var(--ewa-clr-blue-700), var(--ewa-clr-cyan-400));
  --ewa-content-headline-color: light-dark(var(--ewa-clr-blue-700), var(--ewa-clr-cyan-400));
  --ewa-system-info-background: light-dark(rgb(224,241,255), rgb(7,68,116));
  --ewa-system-info-text: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  --ewa-system-info-border: light-dark(rgb(46,182,255), rgb(0, 99, 167));
  --ewa-system-info-icon: light-dark(rgb(0,122,209), rgb(46,182,255));
  --ewa-system-info-link: light-dark(rgb(7,68,116), rgb(184,228,255));
  --ewa-system-success-background: light-dark(rgb(214,255,230), rgb(7,95,42));
  --ewa-system-success-text: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  --ewa-system-success-border: light-dark(rgb(18,253,104), rgb(4, 145, 53));
  --ewa-system-success-icon: light-dark(rgb(0,194,68), rgb(18,253,104));
  --ewa-system-success-link: light-dark(rgb(7,95,42), rgb(173,255,203));
  --ewa-system-warning-background: light-dark(rgb(255,254,194), rgb(114, 69, 17));
  --ewa-system-warning-text: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  --ewa-system-warning-border: light-dark(rgb(253,221,18), rgb(205, 152, 1));
  --ewa-system-warning-icon: light-dark(rgb(203,149,1), rgb(253,221,18));
  --ewa-system-warning-link: light-dark(rgb(115,70,17), rgb(255,249,138));
  --ewa-system-error-background: light-dark(rgb(255,224,228), rgb(138,21,36));
  --ewa-system-error-text: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  --ewa-system-error-border: light-dark(rgb(255,102,122), rgb(200, 13, 38));
  --ewa-system-error-icon: light-dark(rgb(238,23,51), rgb(255, 157, 170));
  --ewa-system-error-link: light-dark(rgb(138,21,36), rgb(255,199,205));
  --ewa-clr-white: #fff;
  --ewa-clr-black: #000;
  --ewa-clr-blue-400: rgb(86, 118, 255);
  --ewa-clr-blue-700: rgb(0,0,255);
  --ewa-clr-green-400: rgb(0,255,0);
  --ewa-clr-magenta-400: rgb(255,92,239);
  --ewa-clr-magenta-600: rgb(255,0,255);
  --ewa-clr-magenta-700: rgb(209,0,206);
  --ewa-clr-magenta-900: rgb(137,6,131);
  --ewa-clr-cyan-400: rgb(0,255,255);
  --ewa-grad-version-start: light-dark(#b3ccff, var(--ewa-clr-blue-700));
  --ewa-grad-version-end: light-dark(#ff5def, var(--ewa-clr-magenta-900));
  --ewa-grad-version: linear-gradient(in oklch 45deg, var(--ewa-grad-version-start), var(--ewa-grad-version-end) 69%);
  --ewa-grad-header: linear-gradient(in oklch 45deg, var(--ewa-grad-version-start), var(--ewa-grad-version-end));
  --ewa-shadow-negative: inset 2px 2px 4px var(--ewa-clr-shadow), inset -1px -1px 0 var(--ewa-clr-shadow-reflection);
  --ewa-shadow-one: 3px 3px 9px -3px var(--ewa-clr-shadow);
  --ewa-shadow-two: 5px 5px 12px var(--ewa-clr-shadow);
  --ewa-shadow-three: 15px 15px 25px var(--ewa-clr-shadow);
  --ewa-radius-xs: 2px;
  --ewa-radius-sm: 5px;
  --ewa-radius-md: 10px;
  --ewa-radius-lg: 15px;
  --ewa-radius-full: 50%;
  --ewa-size-content: 900px;
  --ewa-size-wide: 1400px;
  --ewa-space-3xs: .25rem;
  --ewa-space-2xs: .5rem;
  --ewa-space-xs: .75rem;
  --ewa-space-sm: 1rem;
  --ewa-space-md: 1.25rem;
  --ewa-space-lg: 1.5rem;
  --ewa-space-xl: 2rem;
  --ewa-space-2xl: 2.5rem;
}

body[data-user-colorscheme=dark] {
  color-scheme: dark;
}

body[data-user-colorscheme=light] {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--ewa-font-ui);
  background-color: var(--ewa-page-background);
  color: var(--ewa-content-text);
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

::-moz-selection {
  background-color: var(--ewa-clr-green-400);
  color: var(--ewa-clr-black);
}

::selection {
  background-color: var(--ewa-clr-green-400);
  color: var(--ewa-clr-black);
}

a {
  color: var(--ewa-content-link);
  text-underline-offset: 2px;
  text-decoration-color: var(--ewa-content-link-decoration);
}
a:hover {
  color: var(--ewa-content-link-active);
  text-decoration-color: var(--ewa-content-link-decoration-active);
}
a:focus-visible {
  outline: solid 1px var(--ewa-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

.svg-icon {
  position: relative;
}

.icon24 {
  width: 24px;
  height: 24px;
  top: 5px;
}

.text-secondary {
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
}

hr {
  height: 0;
  border: 0;
  border-block-start: solid 1px var(--ewa-content-border);
}
hr.strong {
  border-width: 3px;
  border-color: var(--ewa-clr-logo-pulse);
  margin-block: var(--ewa-space-2xl);
}
hr.center {
  max-inline-size: 50%;
}

:root {
  --ewa-icon-ban: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.5" stroke="black"/><path d="M3.91208 12.4203L12.0879 3.57972" stroke="black"/></svg>');
  --ewa-icon-info-circle: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.5" stroke="currentColor"/><path d="M7.508 5.568C7.3 5.568 7.12 5.496 6.968 5.352C6.816 5.208 6.74 5.012 6.74 4.764C6.74 4.516 6.816 4.32 6.968 4.176C7.12 4.032 7.3 3.96 7.508 3.96C7.724 3.96 7.904 4.032 8.048 4.176C8.2 4.32 8.276 4.516 8.276 4.764C8.276 5.012 8.2 5.208 8.048 5.352C7.904 5.496 7.724 5.568 7.508 5.568ZM7.256 7.26H5.648V6.432H8.24V9.852C8.24 10.404 8.316 10.776 8.468 10.968C8.62 11.152 8.848 11.244 9.152 11.244C9.384 11.244 9.596 11.216 9.788 11.16C9.988 11.104 10.144 11.044 10.256 10.98L10.4 11.82C10.352 11.844 10.284 11.876 10.196 11.916C10.108 11.948 10.004 11.98 9.884 12.012C9.772 12.044 9.644 12.072 9.5 12.096C9.364 12.12 9.22 12.132 9.068 12.132C8.716 12.132 8.424 12.084 8.192 11.988C7.96 11.892 7.772 11.748 7.628 11.556C7.492 11.364 7.396 11.128 7.34 10.848C7.284 10.56 7.256 10.228 7.256 9.852V7.26Z" fill="currentColor"/></svg>');
  --ewa-icon-exclamation-triangle: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.56588 2.76749C7.75783 2.43159 8.24217 2.43159 8.43412 2.76749L14.7109 13.7519C14.9014 14.0853 14.6607 14.5 14.2768 14.5H1.72318C1.33927 14.5 1.09858 14.0853 1.28906 13.7519L7.56588 2.76749Z" stroke="currentColor"/><path d="M8.232 7.848C8.232 8.11933 8.22833 8.36867 8.221 8.596C8.21367 8.82333 8.199 9.03967 8.177 9.245C8.16233 9.45033 8.144 9.65567 8.122 9.861C8.1 10.059 8.078 10.268 8.056 10.488H7.429C7.407 10.268 7.385 10.059 7.363 9.861C7.341 9.65567 7.319 9.45033 7.297 9.245C7.28233 9.03967 7.27133 8.82333 7.264 8.596C7.25667 8.36867 7.253 8.11933 7.253 7.848V6H8.232V7.848ZM7.737 12.941C7.539 12.941 7.36667 12.875 7.22 12.743C7.07333 12.6037 7 12.4203 7 12.193C7 11.9657 7.07333 11.786 7.22 11.654C7.36667 11.5147 7.539 11.445 7.737 11.445C7.94233 11.445 8.11467 11.5147 8.254 11.654C8.40067 11.786 8.474 11.9657 8.474 12.193C8.474 12.4203 8.40067 12.6037 8.254 12.743C8.11467 12.875 7.94233 12.941 7.737 12.941Z" fill="currentColor"/></svg>');
  --ewa-icon-check-circle: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.5" stroke="currentColor"/><path d="M5 9.5L7.29269 11.4652C7.85193 11.9445 8.71993 11.6753 8.90972 10.9636L10.5 5" stroke="currentColor"/></svg>');
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon24 {
  width: 24px;
  height: 24px;
}

.icon32 {
  width: 32px;
  height: 32px;
}

.icon35 {
  width: 35px;
  height: 35px;
}

.icon48 {
  width: 48px;
  height: 48px;
}

svg:has(.ql-stroke) {
  width: 16px;
  height: 16px;
}

.error, .info, .success, .warning {
  border-inline-start: solid 5px transparent;
  border-radius: var(--ewa-radius-md);
  padding: 10px;
  position: relative;
  padding-inline-start: 52px;
}
.error a, .info a, .success a, .warning a {
  text-decoration: underline;
}
.error::after, .info::after, .success::after, .warning::after {
  width: 24px;
  height: 24px;
  top: 50%;
  left: 13px;
  margin-block-start: -12px;
  position: absolute;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  content: "";
}

.error {
  background-color: var(--ewa-system-error-background);
  color: var(--ewa-system-error-text);
  border-color: var(--ewa-system-error-border);
}
.error a {
  color: var(--ewa-system-error-link);
}
.error::after {
  background-color: var(--ewa-system-error-icon);
  -webkit-mask-image: var(--ewa-icon-ban);
          mask-image: var(--ewa-icon-ban);
}

.warning {
  background-color: var(--ewa-system-warning-background);
  color: var(--ewa-system-warning-text);
  border-color: var(--ewa-system-warning-border);
}
.warning a {
  color: var(--ewa-system-warning-link);
}
.warning::after {
  background-color: var(--ewa-system-warning-icon);
  -webkit-mask-image: var(--ewa-icon-exclamation-triangle);
          mask-image: var(--ewa-icon-exclamation-triangle);
}

.info {
  background-color: var(--ewa-system-info-background);
  color: var(--ewa-system-info-text);
  border-color: var(--ewa-system-info-border);
}
.info a {
  color: var(--ewa-system-info-link);
}
.info::after {
  background-color: var(--ewa-system-info-icon);
  -webkit-mask-image: var(--ewa-icon-info-circle);
          mask-image: var(--ewa-icon-info-circle);
}

.success {
  background-color: var(--ewa-system-success-background);
  color: var(--ewa-system-success-text);
  border-color: var(--ewa-system-success-border);
}
.success a {
  color: var(--ewa-system-success-link);
}
.success::after {
  background-color: var(--ewa-system-success-icon);
  -webkit-mask-image: var(--ewa-icon-check-circle);
          mask-image: var(--ewa-icon-check-circle);
}

.error-container h2 {
  margin-block-end: 7px;
}
.error-container button {
  margin-block-start: 7px;
  background-color: var(--ewa-page-background);
  color: var(--ewa-content-text);
}
.error-container button:hover, .error-container button:active, .error-container button :focus {
  outline: solid 1px var(--ewa-page-background);
  outline-offset: 2px;
  background-color: var(--ewa-content-secondary-background);
}

.status-wrapper {
  min-height: 46px;
  margin-block-end: 20px;
}

.contents-copied {
  transition: opacity 0.3s ease;
  transition-behavior: allow-discrete;
}

.show-contents {
  opacity: 1;
}

.hide-contents {
  opacity: 0;
}

.logo {
  width: auto;
  height: auto;
  max-height: 35px;
  min-height: 35px;
}

.icon-more {
  color: var(--ewa-content-text);
}

.logo-pulse {
  fill: light-dark(var(--ewa-clr-blue-700), var(--ewa-clr-cyan-400));
}

.header-panel {
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-text);
  box-shadow: var(--ewa-shadow-two);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-panel .inner-container {
  max-width: var(--ewa-size-wide);
  margin-inline: auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 185px 1fr;
}
@media screen and (max-width: 1399px) {
  .header-panel .inner-container {
    padding-inline: 20px;
  }
}
@media screen and (max-width: 810px) {
  .header-panel .inner-container {
    grid-template-columns: 1fr;
  }
  .header-panel .inner-container .logo-wrapper svg {
    max-width: 250px;
  }
}
.header-panel .logo {
  margin-block-start: 5px;
}

.navigation-primary {
  display: grid;
  justify-content: end;
}
.navigation-primary ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  gap: 5px;
  font-size: var(--ewa-font-size-xs);
}
.navigation-primary ul li a {
  min-height: 35px;
  display: block;
  text-decoration: none;
  color: var(--ewa-content-text-dimmed);
  border-block-end: solid 3px transparent;
  padding: 10px;
  padding-block-start: 15px;
}
.navigation-primary ul li a.active {
  color: var(--ewa-content-text);
  font-weight: 700;
  border-color: var(--ewa-clr-nav-border-active);
}
.navigation-primary ul li.active a {
  color: var(--ewa-content-text);
  font-weight: 700;
  border-color: var(--ewa-clr-nav-border-active);
}

a.link-home {
  color: var(--ewa-content-text);
}

.main {
  max-width: var(--ewa-size-wide);
  margin-inline: auto;
  padding-block-end: 60px;
}

.content-width {
  max-width: var(--ewa-size-content);
}

.layoutBoundary {
  margin-block-start: 60px;
  padding-inline: 20px;
}

.section {
  padding-block: 20px;
}
.section h2 {
  margin-block: 15px;
}

.main .inner-container:first-of-type {
  padding-block-start: 40px;
}

@media (width >= 1400px) {
  .header-panel .inner-container, .main {
    padding-inline: 20px;
  }
}
#browser-notifications-status {
  margin-block: var(--ewa-space-sm);
}

/* variables
@ since:	2023-09-15
@ package:	Design ASK Web App
@ Version:	0.2.0
@ author:	René Leege
*/
.dimmed {
  color: var(--ewa-content-text-dimmed);
}

main li {
  font-size: var(--ewa-font-size-md);
}
main p.text {
  font-size: var(--ewa-font-size-md);
}

.small, small, caption, .caption {
  font-size: var(--ewa-font-size-xs);
}

h1 {
  font-size: var(--ewa-font-size-3xl);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

.sub-headline {
  text-transform: uppercase;
  color: var(--ewa-clr-magenta-600);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

.headline-container {
  margin-block-start: var(--ewa-space-lg);
}
.headline-container .sub-headline {
  margin-block-end: var(--ewa-space-2xs);
}

h2 {
  font-size: var(--ewa-font-size-2xl);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

h3 {
  font-size: var(--ewa-font-size-xl);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

h4 {
  font-size: var(--ewa-font-size-lg);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

h5 {
  text-transform: uppercase;
  font-size: var(--ewa-font-size-md);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

h6 {
  text-transform: uppercase;
  font-size: var(--ewa-font-size-sm);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

h1.colored, h2.colored, h3.colored, h4.colored, h5.colored, h6.colored {
  color: var(--ewa-content-headline-color);
}

.display {
  font-size: var(--ewa-font-size-4xl);
  font-weight: 700;
  font-family:  var(--ewa-font-ui);
}

.filter-grid {
  display: grid;
  grid-template-columns: 320px 32px 1fr;
  gap: 10px;
  margin-block: 20px;
  padding-block-start: 15px;
  padding-block-end: 5px;
  border-block: solid 1px var(--ewa-content-border);
}
.filter-grid span.lead {
  margin-block-start: 6px;
  display: block;
}

.filter-result-grid {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  margin-block: 20px;
  padding-block-start: 15px;
  padding-block-end: 5px;
  border-block: solid 1px var(--ewa-content-border);
}
.filter-result-grid span.lead {
  margin-block-start: 6px;
  display: block;
}

.filter-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--ewa-font-size-xs);
}
.filter-flex input, .filter-flex select, .filter-flex label {
  font-size: inherit;
}
.filter-flex input {
  background-color: var(--ewa-content-background);
}
.filter-flex input[type=date] {
  margin-block-end: 0;
}
.filter-flex label {
  margin-block-start: 3px;
  margin-block-end: 0;
  justify-self: center;
}

/* Design ASK Web App
@ since: 2026-04-21
@ Version: 2.0.0 alpha
@ author: René Leege
*/
.card-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  margin-block-end: 30px;
}

.card {
  background: var(--ewa-content-background);
  box-shadow: var(--ewa-shadow-one);
  border-radius: var(--ewa-radius-md);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card.shadow-two {
  box-shadow: var(--ewa-shadow-two);
}
.card.shadow-three {
  box-shadow: var(--ewa-shadow-three);
}
.card.shadow-negative {
  box-shadow: var(--ewa-shadow-negative);
  background-color: var(--ewa-sidebar-background);
}
.card.shadow-negative .dimmed {
  color: var(--ewa-content-text-dimmed);
}
.card footer {
  text-align: end;
  padding-block-end: 10px;
  margin-block-start: var(--ewa-space-xs);
  /*.button:not(:hover) {
  	background-color: light-dark(hsl(from var(--ewa-button-background) h s calc(l - 5)),  hsl(from var(--ewa-button-background) h s calc(l + 10)));
  }*/
}

.list-wrapper {
  margin-block: 15px;
  display: grid;
  gap: 5px;
}

.list-wrapper.form-list {
  grid-template-columns: 1fr 300px 100px 70px;
  grid-template-areas: "name edit status sum";
}
@media (max-width: 800px) {
  .list-wrapper.form-list {
    grid-template-columns: 1fr 70px;
    grid-template-areas: unset;
  }
}
.list-wrapper.form-list .name {
  grid-column: name;
}
.list-wrapper.form-list .edit {
  grid-column: edit;
}
.list-wrapper.form-list .status {
  grid-column: status;
}
.list-wrapper.form-list .sum {
  grid-column: sum;
}

.list-header {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
}
@media (max-width: 800px) {
  .list-header {
    grid-template-columns: 1fr 70px;
    grid-template-areas: "name name" "status sum" "edit edit";
  }
}
.list-header {
  background-color: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  color: light-dark(var(--ewa-clr-white), var(--ewa-clr-black));
  padding: 15px;
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 800px) {
  .list-header {
    grid-column: span 2;
  }
}

.list-item {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  padding: 15px;
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-text);
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 800px) {
  .list-item {
    grid-column: span 2;
  }
}
@media (max-width: 800px) {
  .list-item {
    gap: 10px;
    grid-template-columns: 1fr 70px;
    grid-template-areas: "name name" "status sum" "edit edit";
  }
}
.list-item.inactive {
  background-color: var(--ewa-system-warning-background);
  color: var(--ewa-system-warning-text);
}
.list-item:nth-of-type(odd) {
  background-color: var(--ewa-content-secondary-background);
}
.list-item:nth-of-type(odd).inactive {
  background-color: var(--ewa-system-warning-background);
  color: var(--ewa-system-warning-text);
}

.list-wrapper.user-list {
  grid-template-columns: 1fr 1fr 240px;
  grid-template-areas: "name email actions";
}
@media (max-width: 800px) {
  .list-wrapper.user-list {
    grid-template-columns: 1fr 130px;
    grid-template-areas: unset;
  }
}
.list-wrapper.user-list .name {
  grid-column: name;
}
.list-wrapper.user-list .email {
  grid-column: email;
}
.list-wrapper.user-list .actions {
  grid-column: actions;
}
@media (max-width: 800px) {
  .list-wrapper.user-list .actions {
    grid-row: 1/3;
  }
  .list-wrapper.user-list .actions .button:not(:last-of-type) {
    margin-block-end: 5px;
  }
}
.list-wrapper.user-list .list-header {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
}
@media (max-width: 800px) {
  .list-wrapper.user-list .list-header {
    grid-template-columns: 1fr 130px;
    grid-template-areas: "name actions" "email actions";
  }
}
.list-wrapper.user-list .list-header {
  background-color: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  color: light-dark(var(--ewa-clr-white), var(--ewa-clr-black));
  padding: 15px;
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 800px) {
  .list-wrapper.user-list .list-header {
    grid-column: span 2;
  }
}
.list-wrapper.user-list .list-item {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  padding: 15px;
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-text);
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 800px) {
  .list-wrapper.user-list .list-item {
    grid-column: span 2;
  }
}
@media (max-width: 800px) {
  .list-wrapper.user-list .list-item {
    gap: 10px;
    grid-template-columns: 1fr 130px;
    grid-template-areas: "name actions" "email actions";
  }
}
.list-wrapper.user-list .list-item:nth-of-type(odd) {
  background-color: var(--ewa-content-secondary-background);
}

.list-wrapper.group-list {
  grid-template-columns: 1fr 320px;
  grid-template-areas: "name actions";
}
@media (max-width: 700px) {
  .list-wrapper.group-list {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "actions";
  }
}
.list-wrapper.group-list .name {
  grid-column: name;
}
.list-wrapper.group-list .actions {
  grid-column: actions;
}
.list-wrapper.group-list .list-header {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  background-color: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  color: light-dark(var(--ewa-clr-white), var(--ewa-clr-black));
  padding: 15px;
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 700px) {
  .list-wrapper.group-list .list-header {
    grid-template-columns: 1fr;
    grid-column: unset;
    grid-template-areas: "name" "actions";
  }
}
.list-wrapper.group-list .list-item {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  padding: 15px;
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-text);
  border-radius: var(--ewa-radius-md);
}
@media (max-width: 700px) {
  .list-wrapper.group-list .list-item {
    gap: 10px;
    grid-template-columns: 1fr;
    grid-column: unset;
    grid-template-areas: "name" "actions";
  }
}
.list-wrapper.group-list .list-item:nth-of-type(odd) {
  background-color: var(--ewa-content-secondary-background);
}

.pagination-page-info {
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
  text-align: end;
}

.pagination-container {
  margin-block: 15px;
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr max-content;
}

.pagination-container:has(.form-select) {
  gap: 20px;
}

.pagination {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  display: inline-grid;
  grid-auto-flow: column;
}
.pagination span:not(.aria) {
  display: block;
  padding: 4px 8px;
  cursor: pointer;
  border: solid 1px var(--ewa-content-border);
  border-inline-start: 0;
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-link);
  font-size: var(--ewa-font-size-sm);
}
.pagination a {
  display: block;
  padding: 4px 8px;
  cursor: pointer;
  border: solid 1px var(--ewa-content-border);
  border-inline-start: 0;
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-link);
  text-decoration: none;
  font-size: var(--ewa-font-size-sm);
}
.pagination .icon {
  margin-block-end: -2px;
}
.pagination li.active span:not(.aria) {
  cursor: not-allowed;
  box-shadow: var(--ewa-shadow-negative);
  background-color: var(--ewa-sidebar-background);
  color: var(--ewa-content-text);
}
.pagination li:not(.active):hover a, .pagination li:not(.active):hover span:not(.aria) {
  background-color: var(--ewa-content-link);
  color: var(--ewa-content-background);
}
.pagination li:first-of-type a, .pagination li:first-of-type span:not(.aria) {
  border-radius: var(--ewa-radius-md) 0 0 var(--ewa-radius-md);
  border-inline-start: solid 1px var(--ewa-content-border);
}
.pagination li:last-of-type a, .pagination li:last-of-type span:not(.aria) {
  border-radius: 0 var(--ewa-radius-md) var(--ewa-radius-md) 0;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-block-size: 54px;
  position: sticky;
  z-index: 2;
  bottom: 20px;
}
.pagination-wrapper .pagination {
  backdrop-filter: blur(20px);
  background-color: rgb(from var(--ewa-content-background) r g b/78%);
  border: 1px solid var(--ewa-content-border);
  border-radius: var(--ewa-radius-md);
  box-shadow: var(--ewa-shadow-two);
  display: flex;
  gap: 5px;
  padding: 10px;
}
.pagination-wrapper .button.pagination-button {
  min-inline-size: 42px;
  min-block-size: 41px;
  padding-inline: 0.75rem;
  padding-block-start: 0.5rem;
  background: none;
  color: var(--ewa-content-text);
  display: inline-flex;
  justify-content: center;
  border: 0;
}
.pagination-wrapper .button.pagination-button.active {
  background-color: var(--ewa-content-text);
  color: var(--ewa-content-background);
}
.pagination-wrapper .button.pagination-button.has-icon {
  border: 0;
}
.pagination-wrapper .button.pagination-button.has-icon svg.icon {
  margin-inline-end: -10px;
}
.pagination-wrapper .button.pagination-button:not(.active):hover {
  background-color: var(--ewa-content-secondary-background);
}

.notification-stack {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(28rem, 100vw - 2rem);
  pointer-events: none;
}

.admin .notification-stack {
  grid-column: breakout-start/content-end;
}

.notification {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--ewa-radius-md);
  box-shadow: var(--ewa-shadow-two);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.notification__close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.notification.is-leaving {
  opacity: 0;
  transform: translateY(0.5rem);
}

@media (max-width: 640px) {
  .notification-stack {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: none;
  }
}
body:has(.account-greeting) .account-greeting {
  font-size: var(--ewa-font-size-3xl);
  margin-block: 2rem;
  font-weight: 700;
}
body:has(.account-greeting) .account-header {
  min-block-size: 150px;
  background-image: var(--ewa-grad-header);
  padding: 20px;
}
@supports not (corner-shape: squircle) {
  body:has(.account-greeting) .account-header {
    border-radius: var(--ewa-radius-lg);
  }
}
@supports (corner-shape: squircle) {
  body:has(.account-greeting) .account-header {
    border-radius: calc(var(--ewa-radius-lg) * 2);
    corner-shape: squircle;
  }
}
body:has(.account-greeting) .avatar {
  position: relative;
  inline-size: 128px;
  block-size: 128px;
  margin-block-start: -64px;
  inset-inline-start: 20px;
}
body:has(.account-greeting) .avatar-border img, body:has(.account-greeting) .avatar-border svg {
  background-color: var(--ewa-content-background);
  border: solid 5px var(--ewa-content-background);
  aspect-ratio: 1;
  border-radius: var(--ewa-radius-full);
  inset-block-start: 0;
  inset-inline: 0;
  -o-object-fit: cover;
     object-fit: cover;
  inline-size: 100%;
  block-size: 100%;
}
body:has(.account-greeting) .avatar-border svg {
  padding: 5px;
  padding-inline: 15px;
}
body:has(.account-greeting) .account-grid {
  margin-block: 30px;
  display: grid;
  gap: 20px;
}
@media (min-width: 1024px) {
  body:has(.account-greeting) .account-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
body:has(.account-greeting) .account-grid .form-container {
  inline-size: 100%;
}
body:has(.account-greeting) .form-actions {
  margin-block-start: 10px;
  margin-block-end: 10px;
  padding-block-start: 10px;
  display: grid;
  justify-items: end;
}

.app-navigation-button {
  anchor-name: --app-navigation-button;
  position: relative;
}

.app-menu-popover {
  border: 0;
  padding: 0;
  /*padding-block-start: 2px;*/
  background: none;
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
  display: none;
  /* anchoring to the button */
  position: absolute;
  position-anchor: --app-navigation-button;
  margin: 0;
  margin-block-start: 2px;
  inset: auto;
  bottom: anchor(bottom);
  left: anchor(right);
  opacity: 0;
  transition: opacity 1s, display 1s, overlay 1s;
  transition-behavior: allow-discrete;
  position-try-fallbacks: --right;
  margin-left: 0.25rem;
}
.app-menu-popover > * {
  padding: 0.5rem;
}
.app-menu-popover:popover-open {
  display: grid;
  opacity: 1;
}
@starting-style {
  .app-menu-popover:popover-open {
    display: grid;
    opacity: 0;
  }
}

@position-try --right {
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
}
.app-menu-navigation a {
  font-size: var(--ewa-font-size-xs);
  text-decoration: none;
  color: var(--ewa-content-text-dimmed);
}

.user-navigation-button {
  anchor-name: --user-navigation-button;
}
.user-navigation-button svg {
  margin-block-start: 15px;
}

.user-menu-popover {
  border: 0;
  padding: 0;
  /*padding-block-start: 4px;*/
  background: none;
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
  display: none;
  /* anchoring to the button */
  position: absolute;
  position-anchor: --user-navigation-button;
  margin: 0;
  margin-block-start: 4px;
  inset: auto;
  bottom: anchor(bottom);
  left: anchor(right);
  opacity: 0;
  transition: opacity 1s, display 1s, overlay 1s;
  transition-behavior: allow-discrete;
  position-try-fallbacks: --left;
  margin-left: 0.25rem;
}
.user-menu-popover > * {
  padding: 0.5rem;
}
.user-menu-popover:popover-open {
  display: grid;
  opacity: 1;
}
@starting-style {
  .user-menu-popover:popover-open {
    display: grid;
    opacity: 0;
  }
}

@position-try --left {
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
}
.navigation-wrapper > nav > ul > li {
  position: relative;
}

.dropdown-menu {
  display: none;
  box-shadow: var(--ewa-shadow-three);
  border: solid 1px var(--ewa-content-border);
  border-block-start: 0;
  max-width: 250px;
  position: absolute;
  top: 36px;
  right: 0;
  background-color: var(--ewa-content-background);
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}
.dropdown-menu.open {
  display: block;
}
.dropdown-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}
.dropdown-menu ul li {
  padding: 0;
  margin: 0;
}
.dropdown-menu ul li:last-of-type {
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}
.dropdown-menu ul li:not(:last-of-type) {
  border-block-end: solid 1px var(--ewa-content-border);
}
.dropdown-menu ul a {
  display: block;
  padding: 8px 16px;
}
.dropdown-menu ul a:hover {
  background-color: var(--ewa-content-secondary-background);
}

/*li:has(a.user-navigation-button.open) {
	background-color: var(--ewa-content-secondary-background);
}*/
.dropdown-navigation {
  box-shadow: var(--ewa-shadow-three);
  border: solid 1px var(--ewa-content-border);
  border-block-start: 0;
  max-width: 250px;
  background-color: var(--ewa-content-background);
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
  padding: 0;
}
.dropdown-navigation ul {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}
.dropdown-navigation ul li {
  padding: 0;
  margin: 0;
}
.dropdown-navigation ul li:last-of-type {
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}
.dropdown-navigation ul li:not(:last-of-type) {
  border-block-end: solid 1px var(--ewa-content-border);
}
.dropdown-navigation ul a {
  display: block;
  padding: 8px 16px;
}
.dropdown-navigation ul a:hover {
  background-color: var(--ewa-content-secondary-background);
}

button {
  all: unset;
  box-sizing: border-box;
  min-width: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  line-height: var(--ewa-line-height);
}
button:focus-visible {
  outline: 5px auto var(--ewa-focus-ring);
}
button:not([disabled]), button:not(.disabled) {
  cursor: pointer;
}

.button {
  line-height: var(--ewa-line-height);
  padding: 10px 15px;
  background-color: var(--ewa-button-background);
  color: var(--ewa-button-text);
  text-decoration: none;
  font-size: var(--ewa-font-size-xs);
  border-radius: var(--ewa-radius-sm);
  display: inline-block;
}
.button:hover {
  background-color: var(--ewa-content-secondary-background);
}
.button .icon, .button .svg-icon {
  color: var(--ewa-content-link);
}
.button svg.icon24 {
  margin-block-end: -7px;
}
.button.button-primary {
  background-color: var(--ewa-clr-blue-700);
  color: var(--ewa-clr-white);
  border: 0;
  font-size: var(--ewa-font-size-sm);
}
.button.button-primary:hover, .button.button-primary:active, .button.button-primary:focus {
  background-color: #0000cc;
}
.button.button-primary.pink {
  background: var(--ewa-clr-magenta-600);
  color: var(--ewa-clr-white);
}
.button.button-primary.cyan {
  background: var(--ewa-clr-cyan-400);
  color: var(--ewa-clr-black);
}
.button.button-primary .icon, .button.button-primary .svg-icon {
  color: #fff;
}
.button.green {
  background-color: light-dark(#076d0d, #00ff00);
  color: light-dark(var(--ewa-clr-white), var(--ewa-clr-black));
}
.button.button-tertiary {
  background: none;
  border: none;
  text-decoration: underline;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  margin-block-start: 30px;
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
  display: block;
  margin-block-start: 25px;
}
.button.button-refresh {
  background-color: transparent;
  padding: 0;
  max-height: 34px;
}
.button.button-refresh svg {
  margin-block-start: 1px;
}

.button-group .button {
  border-radius: 0;
  border-block: solid 1px var(--ewa-content-border);
  border-inline-end: solid 1px var(--ewa-content-border);
}
.button-group .button:first-of-type {
  border-radius: var(--ewa-radius-md) 0 0 var(--ewa-radius-md);
  border-inline-start: solid 1px var(--ewa-content-border);
}
.button-group .button:last-of-type {
  border-radius: 0 var(--ewa-radius-md) var(--ewa-radius-md) 0;
}
.button-group .button:only-of-type {
  border-radius: var(--ewa-radius-md);
  border: solid 1px var(--ewa-content-border);
}

.button-group-small {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}
.button-group-small .button {
  padding: 5px 10px;
}
.button-group-small .button svg {
  margin-bottom: -4px;
}
.button-group-small li .button {
  border-radius: 0;
  border-inline-end: solid 1px var(--ewa-content-border);
}
.button-group-small li:first-child .button {
  border-top-left-radius: var(--ewa-radius-sm);
  border-bottom-left-radius: var(--ewa-radius-sm);
}
.button-group-small li:last-child .button {
  border-top-right-radius: var(--ewa-radius-sm);
  border-bottom-right-radius: var(--ewa-radius-sm);
}

ul.button-group, ul.button-group-small {
  margin: 0;
  padding: 0;
  list-style: none;
}

.button[disabled], .button.disabled, .button-primary[disabled], .button-primary.disabled {
  background-color: transparent;
  color: var(--ewa-content-text-dimmed);
  border-color: var(--ewa-system-warning-border) !important;
  opacity: 0.75;
  cursor: not-allowed;
}
.button[disabled] .icon, .button[disabled] .svg-icon, .button.disabled .icon, .button.disabled .svg-icon, .button-primary[disabled] .icon, .button-primary[disabled] .svg-icon, .button-primary.disabled .icon, .button-primary.disabled .svg-icon {
  color: var(--ewa-system-warning-icon);
}

.button svg + span {
  margin-inline-start: 2px;
}

button.navigation-link {
  padding: 8px 16px;
  display: block;
  min-inline-size: 100%;
  max-inline-size: 100%;
  color: var(--ewa-content-text-dimmed);
}
button.navigation-link:hover {
  background-color: var(--ewa-content-secondary-background);
}

.button-small {
  padding: 5px 10px;
  font-size: var(--ewa-font-size-xs);
}

.button-small svg {
  margin-block-end: -2px;
  margin-inline-end: 2px;
}

.card .button:not(:hover) {
  background-color: light-dark(hsl(from var(--ewa-button-background) h s calc(l - 5)), hsl(from var(--ewa-button-background) h s calc(l + 10)));
}

/* badge
@ since: 2026-04-21
@ Version: 2.0.0 alpha
@ author: René Leege
*/
.badge, a.badge {
  background-color: var(--ewa-clr-logo-pulse);
  color: light-dark(var(--ewa-clr-white), var(--ewa-clr-black));
  font-size: var(--ewa-font-size-xs);
  line-height: 1.28;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 8px;
  position: relative;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  border-radius: var(--ewa-radius-sm);
  inset-block-end: -2px;
}

.data-wrapper {
  container-type: inline-size;
  border-radius: var(--ewa-radius-md);
  box-shadow: var(--ewa-shadow-one);
  margin-block-end: 15px;
}
.data-wrapper dl {
  display: grid;
  border-block-end: solid 1px var(--ewa-content-border);
  margin: 0;
  transition: backgound-color ease 300ms;
}
.data-wrapper dl dd, .data-wrapper dl dt {
  padding: 10px;
}
.data-wrapper dl dd {
  display: inline-flex;
  gap: 10px;
}
.data-wrapper dl dd .icon {
  cursor: pointer;
}
.data-wrapper dl dt {
  font-weight: 700;
}
.data-wrapper dl:nth-child(even) {
  background-color: var(--ewa-content-secondary-background);
}
.data-wrapper dl:nth-child(even):hover {
  background-color: var(--ewa-page-background);
  background-color: var(--ewa-system-info-background);
}
.data-wrapper dl:nth-child(odd) {
  background-color: var(--ewa-content-background);
}
.data-wrapper dl:nth-child(odd):hover {
  background-color: var(--ewa-page-background);
  background-color: var(--ewa-system-info-background);
}
.data-wrapper dl:first-child {
  border-radius: var(--ewa-radius-md) var(--ewa-radius-md) 0 0;
}
.data-wrapper dl:last-child {
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
}

@container (min-width: 420px) {
  dl {
    grid-template-columns: 190px 1fr;
  }
}
.dialog-wrapper {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  backdrop-filter: blur(10px);
}

dialog {
  border-radius: var(--ewa-radius-md);
  background-color: var(--ewa-content-background);
  color: var(--ewa-content-text);
  border-color: var(--ewa-content-border);
  border-width: 1px;
  box-shadow: var(--ewa-shadow-three);
  padding: 0;
}
dialog header {
  border-block-end: solid 1px var(--ewa-content-border);
  padding: 15px 20px;
  border-radius: var(--ewa-radius-md) var(--ewa-radius-md) 0 0;
  display: grid;
  grid-template-columns: 1fr 55px;
  grid-template-areas: "headline button";
}
dialog header h2 {
  margin-block: 0;
  grid-area: headline;
  align-self: end;
}
dialog header button {
  grid-area: button;
  max-width: -moz-max-content;
  max-width: max-content;
  align-self: end;
  justify-self: end;
}
dialog .dialog-content {
  padding: 10px 20px;
}
dialog footer {
  padding: 10px 20px;
  border-block-start: solid 1px var(--ewa-content-border);
  border-radius: 0 0 var(--ewa-radius-md) var(--ewa-radius-md);
  display: grid;
  justify-items: end;
}

/*dialog::backdrop {
	background-color: rgba(0,0,0,.6);
}*/
.dialog-pyper {
  width: 85vw;
  max-width: var(--ewa-size-wide);
}
.dialog-pyper.dialog-delete, .dialog-pyper.dialog-worker {
  max-width: 600px;
}

.dialog-pyper label:not([for]) {
  font-weight: 700;
}

.dialog-pyper label.quill-label:not([for]) {
  font-weight: 400;
}

.dialog-pyper {
  /*&.open {
  	display: block;
  }*/
}
.dialog-pyper::backdrop {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  .dialog-pyper::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.dialog-pyper, .dialog-schedule, .dialog-bot, .dialog-worker, .dialog-delete {
  max-height: 90svh;
}

.dialog-delete footer {
  gap: 15px;
  grid-template-columns: 1fr 1fr;
}
.dialog-delete footer button:not(.button-danger) {
  background-color: var(--ewa-page-background);
  justify-self: start;
}
.dialog-delete footer button:not(.button-danger):hover {
  background-color: color-mix(in srgb, var(--ewa-page-background), black 5%);
}

.form-container {
  max-width: var(--ewa-size-wide);
  margin-inline: auto;
  background-color: var(--ewa-content-background);
  box-shadow: var(--ewa-shadow-one);
  border-radius: var(--ewa-radius-md);
  padding: 10px 20px;
}
.form-container form {
  max-width: var(--ewa-size-content);
}
.form-container button[type=submit] {
  margin-block-start: 12px;
}

fieldset {
  border: 0;
  box-shadow: var(--ewa-shadow-one);
  border-radius: var(--ewa-radius-md);
  background-color: var(--ewa-content-background);
  padding: 20px;
}

label {
  display: block;
  font-size: var(--ewa-font-size-sm);
  margin-block-start: 15px;
  margin-block-end: 5px;
}
label .optional {
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
}

input {
  border-radius: var(--ewa-radius-sm);
  display: block;
  margin-block-end: 12px;
  background-color: var(--ewa-content-secondary-background);
  border: solid 1px var(--ewa-content-border);
  color: var(--ewa-content-text);
}
input:not([type=date], [type=time], [type=submit], [type=reset], [type=checkbox], [type=radio]) {
  width: 100%;
}
input:focus {
  background-color: var(--ewa-content-background);
  outline-offset: 3px;
  outline: solid 2px var(--ewa-focus-ring);
}
input[type=text], input[type=password] {
  padding-inline: 4px;
  padding-block: 2px;
  font-size: var(--ewa-font-size-sm);
}
input[type=checkbox], input[type=radio] {
  display: inline-block;
}

select {
  border-radius: var(--ewa-radius-sm);
  display: block;
  margin-block-end: 12px;
  background-color: var(--ewa-content-secondary-background);
  border: solid 1px var(--ewa-content-border);
  color: var(--ewa-content-text);
}
select:focus {
  background-color: var(--ewa-content-background);
  outline-offset: 3px;
  outline: solid 2px var(--ewa-focus-ring);
}

textarea {
  border-radius: var(--ewa-radius-sm);
  display: block;
  margin-block-end: 7px;
  background-color: var(--ewa-content-secondary-background);
  border: solid 1px var(--ewa-content-border);
  width: 100%;
}

.input-description {
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
}

.input:user-invalid, select:user-invalid {
  background-color: var(--ewa-system-error-background);
  border: 2px dashed var(--ewa-system-error-border);
  color: var(--ewa-system-error-text);
}
.input:user-valid, select:user-valid {
  border: solid 1px var(--ewa-system-success-border);
}

input.button-primary {
  margin-block-start: 20px;
}

input[type=time]:out-of-range, input[type=date]:out-of-range {
  background-color: var(--ewa-system-error-background);
  border: 2px dashed var(--ewa-system-error-border);
}

input:disabled {
  border: solid 1px var(--ewa-system-warning-border);
  opacity: 0.5;
}

form .grid {
  display: grid;
  gap: 20px;
}
form .grid__street {
  grid-template-columns: 1fr 150px;
}
form .grid__place {
  grid-template-columns: 150px 1fr;
}
form .grid__country-place {
  grid-template-columns: 70px 150px 1fr;
}

.input-group-wrapper {
  --_grid-type: auto-fill;
  --_grid-min-width: 130px;
  display: grid;
  grid-template-columns: repeat(var(--_grid-type, auto-fit), minmax(min(var(--_grid-min-width), 100%), 1fr));
  gap: 10px;
}
.input-group-wrapper.weekdays {
  --_grid-min-width: 100px;
}
.input-group-wrapper.months {
  --_grid-min-width: 70px;
}
.input-group-wrapper.days {
  --_grid-min-width: 60px;
}

.input-group label {
  display: inline;
  font-size: var(--ewa-font-size-sm);
  margin-block: 0;
}
.input-group input[type=radio], .input-group input[type=checkbox] {
  width: -moz-fit-content;
  width: fit-content;
  display: inline;
  margin-inline-end: 10px;
}

.input-text-group-wrapper {
  --_grid-type: auto-fill;
  --_grid-min-width: 250px;
  display: grid;
  grid-template-columns: repeat(var(--_grid-type, auto-fit), minmax(min(var(--_grid-min-width), 100%), 1fr));
  gap: 40px;
}

.form-actions {
  margin-block: 10px;
  padding-block-start: 10px;
  display: grid;
  justify-items: end;
}

body[data-user-alignment=left] .form-actions {
  justify-items: start;
}

.form-description {
  color: var(--ewa-content-text-dimmed);
  margin-block-end: var(--ewa-space-xs);
  font-size: var(--ewa-font-size-sm);
}

.form-entries-table-wrapper {
  max-width: 100%;
  margin-block: 15px;
  overflow-x: auto;
  border: 1px solid var(--ewa-content-border);
  border-radius: var(--ewa-radius-md);
  box-shadow: var(--ewa-shadow-one);
  overscroll-behavior-inline: contain;
}

.form-entries-table {
  min-width: 920px;
  margin-block: 0;
  border: 0;
  border-block-start: 0;
  border-inline: 0;
}

/*.form-entries-table th,
.form-entries-table td {
	vertical-align: top;
}*/
.form-entries-table__submitted,
.form-entries-table__action {
  white-space: nowrap;
}

.form-entries-table__value {
  min-width: 180px;
  max-width: 360px;
}

.form-entries-table__action .form-actions {
  padding-block-start: 0;
  justify-items: start;
}

.form-entries-table__action .button {
  white-space: nowrap;
}

.forms-teaser-list {
  display: grid;
  gap: 1rem;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  border-block-start: solid 1px var(--ewa-content-border);
  border-inline: solid 1px var(--ewa-content-border);
  border-spacing: 0;
  width: 100%;
  font-size: var(--ewa-font-size-sm);
  margin-block: 15px;
}
table td, table th {
  padding: 10px;
  text-align: start;
  vertical-align: middle;
  border-block-end: solid 1px var(--ewa-content-border);
}
table td:not(:last-child), table th:not(:last-child) {
  border-inline-end: solid 1px var(--ewa-content-border);
}
table tr:nth-child(odd) {
  background-color: var(--ewa-content-background);
}
table tr:nth-child(even) {
  background-color: var(--ewa-content-secondary-background);
}
table th {
  background-color: var(--ewa-content-header-background);
}

td.numbers {
  text-align: right;
  font-family: var(--ewa-font-monospace);
}

td.end {
  text-align: end;
}

table caption {
  margin-block-end: 1rem !important;
}
table caption span {
  display: block;
}
table caption span.sup {
  font-size: var(--ewa-font-size-lg);
  font-weight: 700;
}
table caption span.sub {
  font-size: var(--ewa-font-size-md);
  color: var(--ewa-content-link);
}

.ewa-tooltip {
  position: fixed;
  inset-block-start: var(--ewa-tooltip-top, 0);
  inset-inline-start: var(--ewa-tooltip-left, 0);
  z-index: 1200;
  max-inline-size: min(24rem, 100vw - 16px);
  padding: 6px 9px;
  border-radius: var(--ewa-radius-sm, 5px);
  background-color: var(--ewa-content-text, #141414);
  color: var(--ewa-content-background, #fff);
  box-shadow: var(--ewa-shadow-two, 0 4px 12px rgba(0, 0, 0, 0.2));
  font-size: var(--ewa-font-size-xs, 0.875rem);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-wrap: balance;
  transform: translateY(-2px);
}

.ewa-tooltip[data-show=true] {
  opacity: 1;
  transform: translateY(0);
}

.ewa-tooltip[hidden] {
  display: none !important;
}

.ewa-tooltip::after {
  position: absolute;
  inline-size: 8px;
  block-size: 8px;
  background-color: inherit;
  content: "";
  transform: rotate(45deg);
}

.ewa-tooltip[data-placement=top]::after {
  inset-block-end: -4px;
  inset-inline-start: calc(50% - 4px);
}

.ewa-tooltip[data-placement=bottom]::after {
  inset-block-start: -4px;
  inset-inline-start: calc(50% - 4px);
}

@media (prefers-reduced-motion: no-preference) {
  .ewa-tooltip {
    transition: opacity 120ms ease, transform 120ms ease;
  }
}
/* dashboard for admin area
@ since: 2026-04-20
@ Version: 2.0.0
@ author: René Leege
*/
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ewa-space-lg);
}

.dashboard-card {
  padding: var(--ewa-space-md);
  border: 1px solid var(--ewa-content-border);
  border-radius: var(--ewa-radius-lg);
  background: var(--ewa-content-background);
  color: var(--ewa-content-text);
  box-shadow: var(--ewa-shadow-one);
}
.dashboard-card.version {
  background: var(--ewa-grad-version);
  color: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
  border-color: light-dark(var(--ewa-clr-blue-400), #0a0b5c);
}
.dashboard-card.version .dashboard-card-meta {
  color: light-dark(var(--ewa-clr-black), var(--ewa-clr-white));
}
.dashboard-card .dashboard-card-label {
  margin-block-start: 0;
  margin-block-end: 0.5rem;
  font-size: var(--ewa-font-size-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-card .dashboard-card-value {
  margin: 0;
  font-size: var(--ewa-font-size-3xl);
  font-weight: 700;
}
.dashboard-card .dashboard-card-meta {
  margin-block-start: 0.5rem;
  font-size: var(--ewa-font-size-xs);
  color: var(--ewa-content-text-dimmed);
  text-wrap: pretty;
}
.dashboard-card.span2 {
  grid-column: span 2;
}
.dashboard-card.card-error {
  background-color: var(--ewa-system-error-background);
  color: var(--ewa-system-error-text);
  border-color: var(--ewa-system-error-border);
}
.dashboard-card.card-error .icon {
  color: var(--ewa-system-error-icon);
}

.dashboardBox__keyValueGroup {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  font-size: var(--ewa-font-size-xs);
}
.dashboardBox__keyValueGroup:not(:first-child) {
  margin-top: 30px;
}
.dashboardBox__keyValueGroup .dashboardBox__keyValueGroup_title {
  font-weight: bold;
}
.dashboardBox__keyValueGroup ul {
  padding: 0;
  list-style: none;
  font-size: var(--ewa-font-size-xs);
}
.dashboardBox__keyValueGroup ul li {
  font-size: var(--ewa-font-size-xs);
}

.dashboardBox__keyValue {
  align-items: start;
  -moz-column-gap: 15px;
       column-gap: 15px;
  display: grid;
  grid-template-areas: "key spacer value";
  grid-template-columns: max-content minmax(15px, auto) minmax(min-content, max-content);
}
.dashboardBox__keyValue::before {
  border-bottom: 5px dotted var(--ewa-content-text-dimmed);
  content: "";
  display: block;
  grid-area: spacer;
  margin-top: 0.6em;
  opacity: 0.12;
}

.dashboardBox__keyValue__key {
  grid-area: key;
}

.dashboardBox__keyValue__value {
  grid-area: value;
  text-align: right;
}

.dashboardBox__keyValue__list {
  display: flex;
  flex-direction: column;
}/*# sourceMappingURL=style.css.map */