

/* Fira Sans Condensed (OFL) — local files under resources/fonts/ */
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Regular-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Regular-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-SemiBold-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-SemiBold-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Bold-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Bold-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fira Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/de/fonts/FiraSansCondensed-Bold.ttf) format('truetype');
}

/* Local Material Icons (Apache-2.0) — same files for both family names so
   .material-icons ligatures and CSS content:"\e…" both work without Google CDN. */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/de/fonts/MaterialIcons-Regular.woff2?v=1860) format('woff2'),
         url(/de/fonts/MaterialIcons-Regular.ttf?v=1860) format('truetype');
}
@font-face {
    font-family: 'Material Icons Local';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/de/fonts/MaterialIcons-Regular.woff2?v=1860) format('woff2'),
         url(/de/fonts/MaterialIcons-Regular.ttf?v=1860) format('truetype');
}
.material-icons {
    font-family: 'Material Icons Local', 'Material Icons';
    font-weight: normal;font-style: normal;font-size: 1em;
    display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;
    word-wrap: normal;white-space: nowrap;direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    vertical-align: text-bottom;
}

html,body {width:100%;height:100%;margin:0;padding:0;}
html,body,input,select,textarea,button{font-family: 'Fira Sans Condensed', Verdana, Arial, Helvetica, sans-serif;font-style: normal;font-weight: 400;font-size:16px;}
h1,h2,h3,h4 {padding:0;margin:0;}

h1 {color:#808080;font-size:1.5em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}
h2 {color:#808080;font-size:1.25em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}
h3 {color:#808080;font-size:1em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}

.logo {display:none;}
.maincontent {padding:0.5em;z-index:100;position:relative;}
.top {background-color:#303030;color:white;position:relative;z-index:300;}
.mainmenu {border-bottom: 1px solid #d0d0d0;z-index:200;position:relative;}


.content_sidebar {display:table;}
.content_sidebar .sidebar {display:table-cell;}
.content_sidebar .maincontent {display:table-cell;}

.function-area {display:table;width:100%;padding-bottom:0.3em;}
.function-area .left {display:table-cell;}
.function-area .right {display:table-cell;text-align:right;}

/*          FORM           */
.formelement {display:inline-block;vertical-align:top;}
.formelement div{display:inline-block;}
.formelement_textarea {width:100%;}
.formelement_textarea textarea {width:100%;min-height:5em;}
/* Soft pill buttons (drei.at Privat-style) */
button {
  border-radius: 4px;
  background: #f4f4f4;
  color: #808080;
  font-size: 0.85em;
  font-weight: 700;
  border: none;
  padding: 0.4em 1em;
  min-width: 0;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
button:hover:not(:disabled) {
  background: #d8d8d8;
  color: #808080;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
label {display:block;font-size:0.8em;color:#606060;margin-top:3px;}
label.left {display:inline-block;}
input {font-size:1em;}
select {font-size:1em;}
.datalist-field {position:relative;}
.datalist-input-wrap {position:relative;display:inline-block;vertical-align:top;line-height:0;}
.datalist-field .datalist-input {
    font-size:1em;
    line-height:normal;
    min-width:12em;
    box-sizing:border-box;
    vertical-align:top;
}
.datalist-field > a {
    display:inline-block;
    vertical-align:top;
    line-height:1.8em;
}
.datalist-suggestions {
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:30;
    max-height:12em;
    overflow-y:auto;
    margin:0;
    padding:0;
    list-style:none;
    background:#fff;
    border:1px solid #c0c0c0;
    border-top:none;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
    font-size:1em;
    line-height:1.25;
    font-family:inherit;
    box-sizing:border-box;
}
.datalist-suggestion {
    padding:0.25em 0.5em;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.datalist-suggestion:hover,
.datalist-suggestion.active {
    background:#e8e8e8;
}
.datalist-input.datalist-invalid { background-color: #fff5f5; border-color: #c62828; }
.showconditionhide {opacity:50%;}
fieldset {border:none;}
fieldset.section {border:solid 1px #e0e0e0;margin-top:0.5em;}
fieldset.section legend {font-size:0.8em;font-weight:bold;color:#606060}
form h2 {color:#808080;font-size:1.25em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}
#login h1,
#login h2,
form#login h2 {color:#fff;border-bottom:none;}

.formelement.error label {color:#9b1c23;}
.formelement.error input,
.formelement.error select,
.formelement.error textarea {
  border-color:#e8a0a4;
  background:#fff8f8;
}
.formelement.error .error_info,
.error_info {
  color:#9b1c23;
  font-size:0.8em;
  margin-top:0.25em;
}

/* ACL form element (table + raw toggle) */
.formelement-acl {display:block;width:100%;}
.formelement-acl .acl-entries-wrapper {display:block;margin-top:4px;}
.formelement-acl .acl-entries-table {width:100%;border-collapse:collapse;font-size:0.95em;border:solid 1px #e0e0e0;}
.formelement-acl .acl-entries-table th {background:#808080;color:white;padding:4px 6px;text-align:left;border:none;font-size:0.85em;font-weight:normal;}
.formelement-acl .acl-entries-table td {border:solid 1px #e0e0e0;padding:4px 6px;vertical-align:middle;}
.formelement-acl .acl-entries-table tbody tr:nth-child(odd) td {background-color:#F7F7F7;}
.formelement-acl .acl-entries-table tbody tr:hover td {background-color:#eee;}
.formelement-acl .acl-col-del {width:28px;text-align:center;}
.formelement-acl .acl-row-delete {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;min-width:0;min-height:0;margin:0;padding:0;border:none;border-radius:0.3em;background:#b1191e;color:#fff;font-size:12px;line-height:1;cursor:pointer;font-family:inherit;}
.formelement-acl .acl-row-delete:hover {background:#8a1317;}
.formelement-acl .acl-add-row td {background:#fafafa !important;}
.formelement-acl .acl-add-type,
.formelement-acl .acl-add-row .acl-add-obj {font-size:0.9em;padding:2px 4px;border:solid 1px #e0e0e0;border-radius:0.3em;}
.formelement-acl .acl-add-obj-user {vertical-align:middle;}
.formelement-acl .acl-add-obj-user .datalist-input {
  min-width:10em;
  width:12em;
  max-width:100%;
  font-size:0.9em;
  padding:2px 4px;
  border:solid 1px #e0e0e0;
  border-radius:0.3em;
  box-sizing:border-box;
}
.formelement-acl .acl-add-btn {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;margin:0;padding:0.2em 0.5em;border:none;border-radius:0.3em;background:#a6a6a6;color:white;font-size:0.9em;cursor:pointer;font-family:inherit;}
.formelement-acl .acl-add-btn:hover {background:#999999;}
.formelement-acl .acl-raw-view {display:none;}
.formelement-acl .acl-raw-wrapper {margin-top:4px;}
.formelement-acl .acl-raw-wrapper .acl-raw-label {font-size:0.8em;color:#606060;}
.formelement-acl .acl-raw-input {width:100%;min-height:5em;font-size:0.95em;padding:4px;border:solid 1px #e0e0e0;border-radius:0.3em;box-sizing:border-box;}
.formelement-acl .acl-switch-wrap {font-size:0.85em;margin:0.35em 0;}
.formelement-acl .acl-switch-link {color:#808080;cursor:pointer;text-decoration:underline;}
.formelement-acl .acl-switch-link:hover {color:#595959;}


form.filter {display:block;width:fit-content;padding:4px;margin-top:-1em;margin-left: auto; margin-right: 0; margin-bottom:-1em; }
form.filter .formelement {display:inline-block;background:transparent;border:none;padding:0;margin:0;padding-right:1em;}
form.filter fieldset {display:inline-block;padding:0;margin:0;width:;border:none;vertical-align:bottom;}
[data-cms-page="/index"] form.filter label {display:inline-block;}
form.filter fieldset legend {display:none;}
form.filter fieldset.section {display:inline-block;padding:2px;margin:0;width:auto;}
form.filter fieldset.section legend {display:block; /*float:left;*/ padding-right:1em;}
form.filter .formelement input:not([type="checkbox"]):not([type="radio"]),
form.filter .formelement select {
  box-sizing: border-box;
  height: 26px;
  font-size: 0.875em;
  padding: 2px 6px;
  vertical-align: bottom;
}
form.filter > button,
form.filter > button.primary,
form.filter > button.primary.button {
  box-sizing: border-box;
  height: 26px;
  min-height: 26px;
  padding: 0 0.75em;
  margin: 0;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1;
  vertical-align: bottom;
  white-space: nowrap;
}


/*         LOGIN  FORM     */
html.login-page,
body.login-page {margin:0;padding:0;min-height:100%;}
.login-page {min-height:100vh;box-sizing:border-box;}
#logo-wrapper-login {text-align:center;}
#logo-login-page {margin-top:4vh;max-width:min(320px,80vw);height:auto;}
#login{border: solid 1px #dfdfdf;box-shadow:2px 2px 12px #bbb;width:300px;padding:16px;background:#fcfcfc;
       position:absolute;left:50%;margin-left:-150px;margin-top:-150px;box-sizing:border-box;}
/*#login h2 {background-color:#ffffff;color:#808080;margin:-16px -16px 16px -16px;padding:16px;border-bottom:solid 1px gray}*/
#login h1,
#login h2 {background-color:#808080;color:#fff;margin:-16px -16px 8px -16px;padding:16px;border:none;font-size:1.25em;}
#login fieldset {padding:0;margin:0;border:none;}
#login .formelement {width:100%;box-sizing:border-box;}
#login .formelement_password {display:grid;width:100%;}
#login label {font-size:90%;color:#000000;display:block;margin-top:6px;}
#login input {padding:0;margin:0;box-sizing: border-box;}
#login input[type="text"],
#login input[type="password"] {width:100%;}
#login .formelement_password > input {width:100%;min-width:0;}
#login .formelement_password > .form-icon-btn {
  background:#acacac;
  color:#fff;
  width:1.8em;
  min-width:1.8em;
}
#login .button-area button,
#login button.primary:not(.form-icon-btn),
#login button.primary.button:not(.form-icon-btn) {
  float:right;
  border:none;
  border-radius:9999px;
  background:#808080;
  color:#fff;
}
#login .button-area button:hover,
#login button.primary:not(.form-icon-btn):hover {
  background:#707070;
  color:#fff;
}
#login .form-icon-btn {float:none;border-radius:0.3em;}
#login .formelement.info {margin:0 0 0.5em 0;}
#login .formelement.info .login-lang-flags {margin:0;padding:0;}
.login-lang-flags {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.35rem 0.5rem;
  margin:0;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
}
.login-lang-link {
  display:inline-flex;
  align-items:center;
  gap:0.2rem;
  padding:0.15rem 0.35rem;
  border:none;
  background:none;
  color:#555;
  text-decoration:none;
  font-size:0.78rem;
  font-weight:600;
  line-height:1.1;
  border-radius:4px;
  opacity:0.75;
  transition:opacity 0.15s ease, color 0.15s ease;
}
.login-lang-link:hover {opacity:1;color:#808080;}
.login-lang-link.active {opacity:1;color:#808080;font-weight:700;}
.login-lang-flag {font-size:1.05rem;line-height:1;}
.login-lang-code {letter-spacing:0.02em;}
@media (max-width: 640px) {
  html.login-page,
  body.login-page {margin:0;padding:0;}
  .login-page {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
    padding-top:3.5rem;
  }
  #logo-wrapper-login {padding:1.25rem 1.25rem 0;}
  #logo-login-page {margin-top:0;max-width:min(240px,70vw);}
  .centerparent {display:block;flex:1 1 auto;}
  form#login,
  #login {
    position:static;
    left:auto;
    top:auto;
    transform:none;
    margin:0;
    width:100%;
    max-width:none;
    min-height:100%;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:1.25rem 1.25rem 2rem;
    background:transparent;
  }
  form#login h1,
  form#login h2,
  #login h1,
  #login h2 {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:20;
    margin:0;
    padding:1rem 1.25rem;
    background-color:#808080;
    color:#fff;
    text-align:left;
    border:none;
    box-sizing:border-box;
  }
  #login .button-area button,
  #login button.primary:not(.form-icon-btn),
  #login button.primary.button:not(.form-icon-btn) {
    float:none;
    width:100%;
    margin-top:1rem;
    background:#808080;
    color:#fff;
  }
}

/*          NAVI         */
.menu_user {border-bottom:1px solid #e0e0e0;background:#303030;color:white;display:table;width:100%;}
.menu_user ul.navi {display:table-cell;}
.xmenu_user .navi li a {text-decoration:none;color:white;}
.top .navi li a {text-decoration:none;color:white; display: block; }

.menu_main {border-bottom:1px solid #d0d0d0;background-color:#ffffff;color:black;}
.navi_language {float:right;}
.navi_user {float:right;}

.top .navi {display:inline-block;vertical-align:middle;}
.mainmenu .navi {display:inline-block;}

.navi {margin:0;padding:0 0.5em;}
.navi li {display:inline-block;font-size:16px;text-align:left;}
.navi li a {display:inline-block;text-decoration:none;color:black;padding: 10px 10px 10px 10px; white-space: nowrap;}
.navi_child li {display:block}
.navi li a.active {font-weight:bold;}
.navi a.navi-parent {cursor:pointer;}
.navi .navi-caret {
  font-family: "Material Icons Local", "Material Icons", sans-serif;
  font-size: 1.1em;
  width: 1.1em;
  margin-left: 0.15em;
  margin-right: 0;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
}
.navi-haschildren:hover > a > .navi-caret {transform: rotate(180deg);}

.sidebar .navi li {display:block;}
.sidebar .navi li a {padding: 0px 10px 2px 2px; }

.navi_main a:hover {background-color:#f0f0f0;}
/* Top-level main menu: drei.at-style hover (accent text + bottom bar, no gray fill) */
.mainmenu .navi > li > a,
.navi_main > li > a {
  transition: color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.mainmenu .navi > li > a:hover,
.navi_main > li > a:hover {
  background-color: transparent;
  color: #808080;
  box-shadow: inset 0 -3px 0 #808080;
}
.mainmenu .navi > li > a.active,
.navi_main > li > a.active {
  background-color: transparent;
  color: #808080;
  box-shadow: inset 0 -3px 0 #808080;
}
.navi_main li ul a:hover {
  background-color: #f0f0f0;
  color: inherit;
  box-shadow: none;
}
.top .navi a {color:white;}
.navi_top a:hover {background-color:#505050;}
.navi_top > li > a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.navi_top > li > a.active {
  background-color: #454545;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.55);
}
.navi_user a:hover {background-color:#505050;}
.navi_language a:hover {background-color:#505050;}

.navi_user li,
.navi_language li {position:relative;}
.navi_user > li > ul,
.navi_language > li > ul {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  left:auto;
  min-width:10em;
  margin:0;
  padding:0.2em 0;
  border:1px solid #505050;
  background-color:#303030;
  z-index:1000;
}
.navi_user > li:hover > ul,
.navi_language > li:hover > ul {display:block;}
.navi_user .navi_child li,
.navi_language .navi_child li {display:block;}
.navi_user .navi_child a,
.navi_language .navi_child a {
  display:flex;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  color:white;
  padding:0.45em 0.75em;
}
.navi_language > li > a {text-transform:uppercase;}

.navi_main li {position:relative;}
.navi_main li:hover ul {display: block;}
.navi_main li ul    {display:none;
   position: absolute;top: 0;
   left: 0;margin: 0;padding:0;
   margin-top:2.4em;
   border:1px solid #e0e0e0;
    border-top:none;
    background-color:#ffffff;
    z-index: 999;
}
.navi_main li ul a {padding-bottom:0.2em;padding-top:0.2em;}

.navi_folder li {display:block;}
.navi_folder li a,
.navi.navi_folder li a,
.navi_folder .navi-folder-row > a {padding:0;}

.navi_folder_multi,
.navi_folder_select {padding:0;}
.navi_folder_multi a,
.navi_folder_select a {text-decoration:none;color:#000000;}
.navi_folder_multi a:hover,
.navi_folder_select a:hover {color:#606060;}
.navi-folder-row .folder-notify-on,
.navi-folder-row .folder-share-on {
  flex:0 0 auto;
  font-size:1em;
  width:1em;
  height:1em;
  line-height:1;
  margin:0 0.15em;
}
.navi-folder-row .folder-notify-on {
  color:#c9a227;
}
.navi-folder-row .folder-share-wrap {
  flex:0 0 auto;
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:default;
}
.navi-folder-row .folder-share-on {
  color:#5a7a9a;
}
.navi-folder-row .folder-share-acl {
  display:none;
}
.folder-share-acl-tip {
  display:none;
  position:fixed;
  z-index:10001;
  min-width:10em;
  max-width:22em;
  padding:0.4em 0.6em;
  background:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  box-shadow:2px 2px 8px rgba(0,0,0,.15);
  font-size:0.85em;
  line-height:1.35;
  color:#333;
  pointer-events:none;
}
.folder-share-acl-tip .acl-fmt,
.folder-share-acl-tip .acl-ace {
  display:block;
  white-space:nowrap;
  margin:0.12em 0;
}

/* Datatable row marker for folder color (optional html=datatable_editonclick_foldercolor) */
.dt-folder-color-row .dt_select {
  position: relative;
  padding-left: 0.85rem;
}
.dt-folder-color-row .dt-folder-color {
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 4px;
  border-radius: 2px;
  background: var(--folder-color, #00a0d2);
}
.dt-folder-color-row:hover {
  background: color-mix(in srgb, var(--folder-color, #00a0d2) 8%, transparent);
}

/*          TABLE           */
table.datatable {width:100%;border-collapse: collapse;}
table.datatable-checkbox-col td:first-child {width:2.6em;text-align:center;}
table.datatable-checkbox-col th:first-child {width:2.6em;text-align:center;}
table.datatable .datatable_checkcell {cursor:pointer;user-select:none;}
table.datatable th.datatable_checkcell_ctrl {overflow:visible;vertical-align:middle;}
.datatable_selectall_ctrl {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  gap:0;
  vertical-align:middle;
}
.datatable_selectall_ctrl .datatable_selectall {margin:0;}
button.datatable_colmenu_btn {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:1.15em !important;
  height:1.25em !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 0 0 0.05em !important;
  border:none !important;
  border-radius:2px;
  background:transparent !important;
  color:inherit !important;
  box-shadow:none !important;
  line-height:1 !important;
  cursor:pointer;
}
table.datatable th button.datatable_colmenu_btn {color:#fff !important;}
button.datatable_colmenu_btn:hover {
  background:rgba(255,255,255,0.2) !important;
}
.datatable_colmenu_caret {
  display:block;
  font-size:0.7em;
  line-height:1;
}
.datatable_colmenu {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  z-index:5000;
  min-width:11em;
  padding:0.25em;
  margin-top:0.15em;
  background:#fff;
  color:#222;
  border-radius:4px;
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
  text-align:left;
  white-space:nowrap;
  font-weight:400;
}
.datatable_colmenu.is-open,
.datatable_selectall_ctrl.is-open .datatable_colmenu {display:block;}
.datatable_colmenu[hidden] {display:none !important;}
.datatable_colmenu_item {
  display:flex;
  align-items:center;
  gap:0.4em;
  margin:0;
  padding:0.35em 0.55em;
  border-radius:4px;
  color:#222;
  font-size:0.85em;
  font-weight:600;
  cursor:pointer;
}
.datatable_colmenu_item:hover {background:#f0f0f0;}
.datatable_colmenu_item input {margin:0;}
table.datatable.datatable-inline-off td.datatable_edit {cursor:default;}
table.datatable.datatable-inline-off td.datatable_edit:hover {outline:none;}
table.datatable tr.selected td {background-color:#b0b0b0 !important;}
table.datatable th {background:#808080;color:white;padding:4px 4px;margin:0;text-align:left;border:none;white-space: nowrap;}
table.datatable th a {color:white;text-decoration:none;}
table.datatable th.sorted > a::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.75em;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.95;
}
table.datatable th.sorted.up > a::after {
  content: "\25B4";
}
table.datatable td.datatable_edit {cursor:text;}
table.datatable td.datatable_edit:hover {outline:1px dashed #808080;outline-offset:-1px;}
table.datatable td.datatable_editing {
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  vertical-align:middle;
}
table.datatable td.datatable_editing.datatable_editing_select {
  overflow:visible;
  z-index:40;
}
table.datatable td.datatable_editing.datatable_editing_datalist {
  overflow:visible;
  z-index:40;
}
table.datatable td.datatable_editing.datatable_editing_datalist .datalist-input-wrap {
  display:block;
  width:100%;
  height:100%;
  line-height:normal;
}
table.datatable td.datatable_editing.datatable_editing_datalist .datalist-input {
  min-width:0;
  width:100%;
  height:100%;
}
table.datatable td.datatable_editing.datatable_editing_datalist .datalist-suggestions {
  z-index:100001;
}
table.datatable td.datatable_editing .datatable_edit_input {
  position:absolute;left:0;top:0;right:0;bottom:0;
  width:100%;height:100%;box-sizing:border-box;
  margin:0;padding:0 4px;border:1px solid #505050;
  font:inherit;line-height:normal;min-width:0;
}
table.datatable td.datatable_editing .datatable_edit_select,
select.datatable_edit_select {
  box-sizing:border-box;
  margin:0;padding:2px 4px;
  border:1px solid #505050;
  font:inherit;line-height:normal;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
table.datatable td.datatable_edit_saving {opacity:0.6;}
table.datatable td.datatable_edit_error {outline:1px solid #c00;outline-offset:-1px;}
table.datatable tbody tr:nth-child(odd) td {background-color:#F7F7F7;}
table.datatable .pager {background-color:#F7F7F7;}
.datatable_row:hover td {background-color:#d0d0d0 !important;cursor:pointer;}
.datatable_group_start {background-color:#F7F7F7 !important;color:black !important;font-size:1.1em !important;font-weight:normal !important;text-align:left !important;
    border:solid 1px #e0e0e0 !important;
}
.datatable_group_end {background-color:#F7F7F7 !important;height:0.5em;}

.acltable-wrap {margin:0.5em 0 1.5em;}
.acltable td.acltable-folder,
.acltable td.acltable-acl,
.acltable td.acltable-effective {vertical-align:middle;}
.acltable td.acltable-acl,
.acltable td.acltable-effective {white-space:nowrap;}
.acltable-title {font-weight:600;}
.acltable-path {display:block;color:#666;font-size:0.85em;}
.acltable-inherited-note {color:#888;font-size:0.85em;margin-top:0.15em;}
.acltable-empty {color:#888;}
.acltable-row {cursor:pointer;}
.acltable-row:hover td {background-color:#e8e8e8 !important;}
.acltable-inherited td.acltable-acl {opacity:0.85;}
.acl-fmt {display:inline;white-space:nowrap;}
.acl-fmt-empty {color:#888;}
.acl-ace {display:inline;white-space:nowrap;vertical-align:baseline;margin-right:0.75em;}
.acl-ace .material-icons {display:inline;font-size:1em;width:auto;height:auto;line-height:1;transform:none;margin:0 0.15em 0 0;vertical-align:text-bottom;}
.acl-ace-rights {display:inline;font-family:monospace;font-size:inherit;margin-left:0.45em;opacity:0.95;vertical-align:baseline;white-space:nowrap;}
.acl-ace-default {color:#616161;}
.acl-ace-loggedin {color:#1565c0;}
.acl-ace-user {color:#2e7d32;}
.acl-ace-group {color:#6a1b9a;}
.acl-ace-ip {color:#ef6c00;}



.pager a {text-decoration: none;border-radius:0.3em;background:#bfbfbf;color:white;font-size:1.0em;border:none;padding:0.0em 0.2em;min-width:1em;}
.pager .pager_inactive {text-decoration: none;border-radius:0.3em;background:#cccccc;color:white;font-size:1.0em;border:none;padding:0.0em 0.2em;min-width:1em;}
.loglevel_error {background-color:#ffb0b0;}
.loglevel_alert {background-color:#ff8080;}
.loglevel_warning {background-color:#ffffb0;}
.loglevel_ok {background-color:#b0ffb0;}

.status_fixed {color:#707070;}
.status_closed {color:#b0b0b0;}

/*           MENU             */
/* z-index: sit above #datatable_content (overflow:auto stacking context) so .sub-action is not under the table */
.menu {padding-bottom:0.5em;position:relative;z-index:10;}
.menu:has(> .menu-action) {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.45em 0.3em;
  margin-bottom:0.75em;
}
.datatable_toolbar {
  display:flex;
  flex-direction:column;
  gap:0.35em;
  margin-bottom:0.6em;
  position:relative;
  z-index:10;
}
.datatable_toolbar_row {
  display:flex;
  align-items:center;
  gap:1em;
  width:100%;
  min-width:0;
}
.datatable_toolbar .datatable_headline,
.datatable_toolbar .menu,
.datatable_toolbar form.filter,
.datatable_toolbar .datatable_quicksearch {
  flex:1 1 auto;
  min-width:0;
}
.datatable_toolbar .datatable_headline {
  border-bottom:none;
  margin:0;
}
.datatable_toolbar .menu {
  padding-bottom:0;
  margin-bottom:0;
}
.datatable_toolbar .menu:has(> .menu-action) {
  margin-bottom:0;
}
.datatable_toolbar form.filter {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
}
.datatable_toolbar .datatable_quicksearch {
  display:flex;
  justify-content:flex-end;
  margin:0;
}
.datatable_toolbar .datatable_quicksearch #search {
  float:none;
  width:100%;
  max-width:none;
}
.menu-action {display:inline-block;position:relative;cursor:pointer;vertical-align:middle;}
.menu-action-disabled {opacity:0.5;cursor:default;pointer-events:none}
.sub-action {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  background: #f4f4f4;
  border:none;
  border-radius:0 0 4px 4px;
  z-index:1000;
  width:max-content;
  min-width:100%;
  box-sizing:border-box;
  padding:0.15em;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
}
.sub-action .menu-action {padding-top:0;display:block;}
.sub-action .menu-action button {
  width:100%;
  min-width:0;
  justify-content:flex-start;
  text-align:left;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
}
.menu-action:not(.menu-action-disabled):hover .sub-action {display:block;}
.menu-action button {
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:0.25em;
  min-width:0;
  width:auto;
  vertical-align:middle;
  line-height:1.2;
  font-size:0.9em;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.menu-action:not(.menu-action-disabled):hover > button:not(:disabled),
.menu-action:not(.menu-action-disabled) > button:not(:disabled):hover {
  background: #d8d8d8;
  color: #808080;
}
/* Open dropdown: keep main button fill so panel reads as one surface */
.menu-action-haschildren:not(.menu-action-disabled):hover > button:not(:disabled) {
  background: #f4f4f4;
  color: #808080;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.menu-action-haschildren:not(.menu-action-disabled) > button:not(:disabled):hover {
  background: #d8d8d8;
}
.sub-action .menu-action:not(.menu-action-disabled) > button:not(:disabled):hover {
  background: #d8d8d8;
  color: #808080;
}
.menu-action button .material-icons,
.menu button .material-icons,
.menu a .material-icons {
  font-family: "Material Icons Local", "Material Icons", sans-serif;
  font-size: 0.8em !important;
  width: 0.8em;
  height: 0.8em;
  line-height: 1 !important;
  overflow: hidden;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  flex-shrink: 0;
}
/* caret always at the right end of the (content-sized) button */
.menu-action-haschildren > button::after {
  content: "\25BE";
  margin-left: auto;
  padding-left: 0.45em;
  float: none;
  line-height: 1;
  flex-shrink: 0;
}
.menu-action-haschildren:not(.menu-action-disabled):hover > button::after {
  content: "\25B4";
}
/* top-level: keep a little space so caret sits to the right of label */
.menu > .menu-action-haschildren > button {
  padding-right: 0.45em;
}
/* formats */

.text-right {text-align:right;}
/* Search field: same soft-pill look as action buttons */
#search {float:right;}
.menu > #search {margin-left:auto;float:none;}
.datatable_quicksearch #search {float:none;}
#search,
input[type="search"] {
  box-sizing: border-box;
  border: none;
  border-radius: 9999px;
  background: #f4f4f4;
  color: #808080;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.4em 1em;
  min-width: 10em;
  outline: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#search:hover,
#search:focus,
input[type="search"]:hover,
input[type="search"]:focus {
  background: #d8d8d8;
  color: #808080;
}
#search::placeholder,
input[type="search"]::placeholder {
  color: #808080;
  opacity: 0.65;
  font-weight: 700;
}
#search::-webkit-search-decoration {
  -webkit-appearance: none;
}

.object_key {padding-right: 5px;}
.object_key {font-weight:bold;}
.object_val {padding-right: 5px;}
.object_val::after {content: ", ";}
.object_val:last-of-type::after {content: "";}

.debug {display:inline-block;font-size:0.9em;}
.debug * {vertical-align:top;}
.debug-type {display:inline-block;border-radius:0.3em;background:#a0a0a0;color:white;font-size:0.8em;padding:2px 4px;text-transform: uppercase;margin:1px;}
.debug-object {border-radius:0.3em;border:solid 1px #e0e0e0;}
.debug-object-key {display:table-cell;border-radius:0.3em;background:#e0e0e0;color:#606060;font-size:0.8em;padding:1px 2px;border: solid 1px white;border-left: solid 8px white;}
.debug-object-val {display:table-cell;}
.debug-object-entry {display:table-row;}
.debug-int > .debug-type {background-color:#e1a025;}
.debug-float > .debug-type {background-color:#16acb5;}
.debug-string > .debug-type {background-color:#93e155;}
.debug-array > .debug-type {background-color:#e15555;}
.debug-datetime > .debug-type {background-color:#7a5de1;}
.debug-object > .debug-type {background-color:#5577e1;column-span: all;display:table-row;}
.debug-void {background-color:#e0e0e0;}

/* popup */
#popup {display: none;position: fixed;z-index: 100000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;
  background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
#popup-inner {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;min-height:5em;}
#popup-content {}
#popup-close {float: right;}  
#popup-close button {width:24px;height:24px;font-size: 18px;font-weight: bold;min-width:0;padding:0;}
/* infobox */
#infobox {display: none;position: fixed;z-index: 100000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;
  background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
#infobox-inner {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;min-height:5em;}
#infobox-content {}
#infobox-close {float: right;}  
#infobox-close button {width:24px;height:24px;font-size: 18px;font-weight: bold;min-width:0;padding:0;}
.infobox-error #infobox-inner {background:red;color:white;}
.infobox-success #infobox-inner {background:green;color:white;}
.infobox-warning #infobox-inner {background:orange;color:white;}

.message {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 0.75em 1em;
  border-radius: 0.85em;
  margin: 0.75em 0 1em;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.message-error,
.message_error,
div.error:not(.formelement) {
  background: #fdebec;
  color: #9b1c23;
  border: 1px solid #f0c4c7;
  border-radius: 0.85em;
  padding: 0.75em 1em;
  margin: 0.75em 0 1em;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
}
.message-success {
  background: #e8f7e8;
  color: #1e6b2e;
  border-color: #b7e0bc;
}
.message-ok {
  background: #e8f7e8;
  color: #1e6b2e;
  border-color: #b7e0bc;
}
.message-warning {
  background: #fff4e5;
  color: #8a5a00;
  border-color: #f0d4a0;
}
.message-detail {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.85;
}

.history {border-top:solid 1px #e0e0e0;display:block;width:100%;}

.comments {border-top:solid 1px #e0e0e0;display:block;width:100%;}
/* Override .formelement div{inline-block} so entries stack vertically. */
.formelement.history,
.formelement.comments {
  display:block;
  width:100%;
  clear:both;
}
.formelement.history > label,
.formelement.comments > label {
  display:block;
}
.formelement.history .history_entry,
.formelement.comments .comment,
.formelement.history > div,
.formelement.comments > div {
  display:block;
  width:100%;
  box-sizing:border-box;
}
.formelement.history .history_meta,
.formelement.history .history_summary,
.formelement.comments .comment_t,
.formelement.comments .comment_user,
.formelement.comments .comment_text {
  display:block;
}
div.comment {display:block}
div.comment_t {font-size: 0.8em;color: #606060; margin-top: 3px;}
div.comment_user {font-size: 0.8em;color: #000000;font-weight:bold; margin-top: 3px;}
div.comment_text  {display:block;padding-left:2em;font-size:0.8em;}
.history_entry {display:block;margin:0.4em 0;}
.history_meta {display:block;}
.history_summary {display:block;margin-top:0.2em;}

/* Override .formelement div{inline-block} (same pattern as history/comments). */
.formelement.file-input,
.input_files_view {
  display:block !important;
  width:100%;
  clear:both;
}
.formelement.file-input > label {
  display:block;
}
.formelement.file-input .input_files,
.input_files.upload-area {
  display:block !important;
  width:100%;
}
.formelement.file-input .input_files_overallfilesize,
.formelement.file-input .input_files_uploadindikator,
.formelement.file-input .input_files_filename {
  display:block !important;
}
.input_files_file,
.formelement.file-input .input_files_file {
  display:flex !important;
  flex-direction:row;
  align-items:flex-start;
  gap:0.35em;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0 0 0.5em 0;
  padding:0.45em 0.55em;
  border:1px solid #bdbdbd;
  border-radius:0.35em;
  background:#f5f5f5;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.input_files_file .input_files_filename,
.formelement.file-input .input_files_file .input_files_filename {
  flex:1 1 auto;
  order:1;
  min-width:0;
  margin:0;
}
.input_files_file.input_files_file_new:not(:has(input[type="hidden"])) {
  background:transparent;
  border-style:dashed;
}
.input_files_file:has(.input_files_delete:hover),
.input_files_file.is-remove-hover,
.input_files_marked_delete {
  background:#eeeeee;
  border-color:#9e9e9e;
}
.input_files_file_remove,
.input_files_marked_delete .input_files_filename {
  text-decoration:line-through;
  opacity:0.55;
}
/* Match button.multi-item-delete (subtasks). */
button.input_files_delete {
  float:none;
  order:2;
  flex:0 0 auto;
  position:relative;
  z-index:2;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:1.25em !important;
  height:1.25em !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:1.25em;
  padding:0 !important;
  margin:0.1em 0 0 0 !important;
  border:none !important;
  border-radius:50%;
  background:#d0d0d0 !important;
  color:#333 !important;
  font-size:0.95em !important;
  font-weight:700;
  line-height:1 !important;
  cursor:pointer;
  font-family:inherit;
  opacity:1;
  visibility:visible;
}
button.input_files_delete.none {
  display:none !important;
}
button.input_files_delete span {
  display:block;
  line-height:1;
  transform:none;
  color:inherit;
  font-size:1em;
}
button.input_files_delete:hover {
  background:#b0b0b0 !important;
  color:#fff !important;
}
.input_files_view .input_files_file {
  display:block;
  margin:0.6em 0;
}
.input_files_view .input_files_file_image,
.formelement.file-input .input_files_view .input_files_file_image {
  display:inline-flex !important;
  flex-direction:column;
  align-items:stretch;
  width:auto;
  max-width:min(100%, 28em);
  margin:0.6em 0.75em 0.6em 0;
  padding:0;
  border:1px solid #ececec;
  border-radius:0.35em;
  background:#fcfcfc;
  overflow:hidden;
}
.input_files_view .input_files_preview {
  display:block;
  max-width:100%;
  line-height:0;
  border:none;
  background:#f7f7f7;
}
.input_files_view .input_files_preview img {
  display:block;
  max-width:100%;
  max-height:18em;
  width:auto;
  height:auto;
  cursor:pointer;
}
.input_files_view .input_files_filename,
.input_files_view .input_files_file_image .input_files_filename {
  display:flex !important;
  flex-direction:column;
  flex:0 0 auto;
  order:unset;
  gap:0.1em;
  margin:0;
  padding:0.4em 0.55em 0.5em;
  min-width:0;
  line-height:1.25;
}
.input_files_view .input_files_filename a {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input_files_view .input_files_size,
.input_files_size { color:#808080; font-size:0.85em; }

html.imageviewer-open { overflow:hidden; }
#imageviewer {
  display:none;
  position:fixed;
  z-index:100010;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.72);
  box-sizing:border-box;
}
#imageviewer.is-open { display:flex; align-items:stretch; justify-content:center; }
#imageviewer[hidden] { display:none !important; }
#imageviewer-inner {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  max-width:100%;
  box-sizing:border-box;
}
#imageviewer-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.5em 1em;
  flex:0 0 auto;
  padding:0.65em 1em;
  background:rgba(20,20,20,0.92);
  color:#f5f5f5;
}
#imageviewer-title {
  font-size:0.95em;
  font-weight:600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#imageviewer-actions {
  display:flex;
  align-items:center;
  gap:0.45em;
  margin-left:auto;
}
#imageviewer .imageviewer-btn,
a.imageviewer-btn {
  display:inline-flex;
  align-items:center;
  gap:0.3em;
  margin:0;
  padding:0.4em 0.9em;
  border:none;
  border-radius:4px;
  background:#e8e8e8;
  color:#222;
  font-size:0.85em;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  line-height:1.25;
}
#imageviewer .imageviewer-btn:hover,
a.imageviewer-btn:hover {
  background:#fff;
  color:#111;
}
#imageviewer .imageviewer-btn .material-icons,
a.imageviewer-btn .material-icons {
  font-size:1.15em;
  width:1.15em;
  margin:0;
  transform:none;
}
#imageviewer-stage {
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:1em;
  box-sizing:border-box;
}
#imageviewer-img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 0.4em 1.6em rgba(0,0,0,0.45);
  background:#111;
}
#imageviewer-img[hidden] { display:none !important; }
#imageviewer-filehint {
  color:#f5f5f5;
  font-size:1.1em;
  font-weight:600;
  text-align:center;
  padding:1em;
}
#imageviewer-filehint[hidden] { display:none !important; }

.multiple_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.35em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.45em 0.55em;
  margin: 0 0 0.5em 0;
  border: 1px solid #bdbdbd;
  border-radius: 0.35em;
  background: #f5f5f5;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.multiple_item-body {
  flex: 1 1 auto;
  order: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 0.35em;
}
.multiple_item:has(.multi-item-delete:hover),
.multiple_item.is-remove-hover {
  background: #eeeeee;
  border-color: #9e9e9e;
  box-shadow: none;
}
/* singlevalue: items side by side, no grouping frame */
.multiple.multiple-singlevalue {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.5em;
}
.multiple.multiple-singlevalue .multiple_item {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.multiple.multiple-singlevalue .multiple_item:has(.multi-item-delete:hover),
.multiple.multiple-singlevalue .multiple_item.is-remove-hover {
  background: transparent;
  border: none;
  box-shadow: none;
}
.multiple.multiple-singlevalue .multiple_item-body {
  flex: 0 1 auto;
}
button.multi-item-delete {
  float: none;
  order: 2;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.25em !important;
  height: 1.25em !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1.25em;
  padding: 0 !important;
  margin: 0.1em 0 0 0 !important;
  border: none !important;
  border-radius: 50%;
  background: #d0d0d0 !important;
  color: #333 !important;
  font-size: 0.95em !important;
  font-weight: 700;
  line-height: 1 !important;
  cursor: pointer;
  font-family: inherit;
  opacity: 1;
  visibility: visible;
}
button.multi-item-delete span {
  display: block;
  line-height: 1;
  transform: none;
  color: inherit;
  font-size: 1em;
}
button.multi-item-delete:hover {
  background: #b0b0b0 !important;
  color: #fff !important;
}
button.multi-item-add,
a.multi-item-add,
.cal-folder-toolbar-bottom .menu a,
.cal-folder-toolbar-bottom .cal-folder-menu a,
.cal-folder-toolbar-bottom .menu button,
.cal-folder-toolbar-bottom .cal-folder-menu button,
.cal-folder-toolbar-bottom .menu-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  box-sizing: border-box;
  min-width: 0 !important;
  width: auto !important;
  margin: 0.35em 0 0;
  padding: 0.1em 0.45em !important;
  font-size: 0.75em !important;
  font-weight: 500;
  line-height: 1.3;
  border: none;
  border-radius: 0.25em;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  background: #999999;
  color: #fff;
}
button.multi-item-add:hover,
a.multi-item-add:hover,
.cal-folder-toolbar-bottom .menu a:hover,
.cal-folder-toolbar-bottom .cal-folder-menu a:hover,
.cal-folder-toolbar-bottom .menu button:hover,
.cal-folder-toolbar-bottom .cal-folder-menu button:hover,
.cal-folder-toolbar-bottom .menu-action button:hover {
  background: #8c8c8c;
  color: #fff;
}
.cal-folder-toolbar-bottom .menu-action button .material-icons,
.cal-folder-toolbar-bottom .menu button .material-icons,
.cal-folder-toolbar-bottom .menu a .material-icons,
a.multi-item-add .material-icons {
  font-size: 0.95em !important;
  width: 0.95em;
  height: 0.95em;
  line-height: 1 !important;
  transform: none;
  margin: 0;
}
.cal-folder-toolbar-bottom {
  margin: 0.35em 0.25em 0 0;
  text-align: left;
}
.cal-folder-toolbar-bottom .menu,
.cal-folder-toolbar-bottom .cal-folder-menu {
  justify-content: flex-start;
  gap: 0.25em;
}
.cal-folder-toolbar-bottom .menu .menu-action,
.cal-folder-toolbar-bottom .cal-folder-menu .menu-action {
  margin: 0;
}

.tabview_data {display:none;}
.tabview_data_selected {display:block;}

.none {display:none;}

.datepicker {width:8em;}
.timepicker {margin-left:10px;width:100px;}

.range-wrapper input {width:250px;}

.showcondition_end {clear:both;}

.keymap {
    padding: 1em;
    padding-right: 8em;
}

.keymap label{
    font-size:0.8em;
    font-weight:bold;
    color:#606060;
    display:block;
    float:left;
    padding-right:1em;
}

.keymap .keyForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.keymapFlexItem {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.keymapFlexItem label{
    margin: 0.5em;
    font-size: 110%;
}

.keymapFlexItem input{
    margin: 0.5em;
}

.keymapFlexItem button{
    margin: 0.5em;
}

.keymap_up {
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.keymap_valueSection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.keymap_upItem {
    margin-left: 20px;
}

.keymap_upItem button{
    margin-left: 20px;
}


.objectmenu {background-color:#e8e8e8;padding:0.1em 0.3em;border: solid 1px #e0e0e0;}
.objectmenu a {display:block !important;}

/* Page chrome + remaining viewport for .maincontent */
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.menu {}
/* Header wrapper must sit above .maincontent (z-index:100), otherwise
 * user/language/main dropdowns paint behind the page body. */
.main > .menu {position:relative;z-index:400;}
.maincontent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
}

/* Viewport-filling app shells (nav | content [| preview]) */
.maincontent:has(> .layout-app) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.maincontent > .layout-app {
  flex: 1 1 auto;
  min-height: 0;
}

.layout-app {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.layout-app-nav {
  flex: 0 0 var(--mcms-panelleft-width, 260px);
  width: var(--mcms-panelleft-width, 260px);
  min-width: 8em;
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
  border-right: double 3px #e0e0e0;
}
.layout-app-work {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}
.layout-app.preview-bottom .layout-app-work {
  flex-direction: column;
}
.layout-app-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 1em;
  box-sizing: border-box;
}
.layout-app-preview {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.layout-app.preview-right .layout-app-preview,
.layout-app.preview-left .layout-app-preview {
  flex: 0 0 var(--mcms-panelpreview-width, 22em);
  width: var(--mcms-panelpreview-width, 22em);
  height: auto !important;
  max-width: none;
  border-left: double 3px #e0e0e0;
}
.layout-app.preview-left .layout-app-work {
  flex-direction: row-reverse;
}
.layout-app.preview-left .layout-app-preview {
  border-left: none;
  border-right: double 3px #e0e0e0;
}
.layout-app.preview-bottom .layout-app-preview {
  flex: 0 0 var(--mcms-panelpreview-height, 14em);
  height: var(--mcms-panelpreview-height, 14em);
  width: auto !important;
  max-width: none;
  min-height: 80px;
  border-left: none;
  border-top: double 3px #e0e0e0;
}
.layout-app-preview-chrome {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 4px;
  z-index: 2;
}
.layout-app.preview-bottom .layout-app-preview-chrome {
  padding-top: 8px;
}
.layout-app-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.layout-app-preview-resizer {
  position: absolute;
  z-index: 4;
}
.layout-app.preview-right .layout-app-preview-resizer {
  top: 0; left: 0; width: 6px; height: 100%;
  cursor: col-resize;
}
.layout-app.preview-left .layout-app-preview-resizer {
  top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize;
}
.layout-app.preview-bottom .layout-app-preview-resizer {
  top: 0; left: 0; right: 0; height: 6px;
  cursor: row-resize;
}

.layout-app-preview-showdock {
  display: none;
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  z-index: 30;
}
.layout-app.preview-hidden .layout-app-preview-showdock {
  display: block;
}
.layout-app.preview-hidden .layout-app-preview {
  display: none;
}
.layout-app.preview-hidden .layout-app-content {
  padding-right: 2.75em;
}
.layout-app.preview-hidden .datatable_toolbar {
  z-index: auto;
}

.layout-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.layout-content > .datatable_toolbar {
  flex: 0 0 auto;
}
.layout-content > [id^="datatable_"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout-content > [id^="datatable_"] > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout-content > form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.layout-content:has(> [id^="datatable_"]) > form {
  flex: 0 0 auto;
}
.layout-content #MAIN-AREA-BOTTOM {
  flex: 0 0 auto;
}

.panelleftpreview_dock {
  position: static;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}
.panelleftpreview-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #555;
  line-height: 0;
  width: 20px;
  height: 20px;
  min-width: 0;
  max-width: 20px;
  border-radius: 0;
  box-sizing: border-box;
}
.panelleftpreview-dock-btn .material-icons {
  font-size: 16px !important;
  width: 16px;
  height: 16px;
  line-height: 16px !important;
  overflow: hidden;
}
.panelleftpreview-dock-btn:hover {background: #eee; color: #111;}
.panelleftpreview-dock-btn.is-active {background: #e3eef5; color: #0a5a8a;}

.navi_folder_item.closed > ul,
.navi_folder_item.closed > .navi-folder-children {
  display: none;
}

.pane-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pane-preview-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  color: #888;
  text-align: center;
}
.pane-preview-empty[hidden],
.pane-preview-frame[hidden],
.pane-preview-body[hidden] {
  display: none !important;
}
.pane-preview.has-item .pane-preview-empty {
  display: none !important;
}
.pane-preview-frame,
.pane-preview-body {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
.pane-preview-body {
  overflow: auto;
  padding: 0.75em 1em;
  box-sizing: border-box;
}
.pane-preview-body .file-preview,
.pane-preview-body .mail-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  margin: -0.75em -1em;
}
.pane-preview-body .file-preview iframe,
.pane-preview-body .mail-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
.pane-preview-body .mail-preview-head {
  flex: 0 0 auto;
  padding: 0.6em 0.85em;
  border-bottom: 1px solid #e0e0e0;
}
.pane-preview-body .mail-preview-subject {
  margin: 0;
  font-size: 1em;
}
.pane-preview-body .mail-preview-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.75em 1em;
  white-space: pre-wrap;
  word-break: break-word;
}
.pane-preview-body .contact-preview h2,
.pane-preview-body .bug-preview-head h2 {
  margin: 0 0 0.4em 0;
  font-size: 1.15em;
}
.pane-preview-body .contact-details {
  border-collapse: collapse;
  width: 100%;
}
.pane-preview-body .contact-details th {
  text-align: left;
  font-weight: 600;
  padding: 0.25em 0.75em 0.25em 0;
  vertical-align: top;
  white-space: nowrap;
  color: #666;
}
.pane-preview-body .bug-preview-head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.pane-preview-body .bug-preview-num {
  color: #888;
  font-weight: 600;
}
.pane-preview-body .bug-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.8em;
  margin: 0 0 0.75em 0;
  color: #555;
}
.pane-preview-body .bug-preview-desc {
  white-space: pre-wrap;
  word-break: break-word;
}
.pane-preview-body .bug-preview-files,
.pane-preview-body .bug-preview-comments {
  margin-top: 0.85em;
  padding-top: 0.75em;
  border-top: 1px solid #e0e0e0;
}
.pane-preview-body .bug-preview-files h3,
.pane-preview-body .bug-preview-comments h3 {
  margin: 0 0 0.45em 0;
  font-size: 0.95em;
  border-bottom: none;
  color: #555;
}
.pane-preview-body .bug-preview-file {
  margin: 0 0 0.45em 0;
}
.pane-preview-body .bug-preview-file-thumb {
  display: block;
  margin: 0 0 0.25em 0;
  line-height: 0;
}
.pane-preview-body .bug-preview-file-thumb img {
  max-width: 100%;
  max-height: 10em;
  height: auto;
  border: 1px solid #e0e0e0;
  background: #f7f7f7;
}
.pane-preview-body .bug-preview-file-size {
  color: #888;
  font-size: 0.85em;
}
.pane-preview-body .form-view-toolbar .cancel {
  display: none;
}

.layout-leftright {display:flex;flex-direction:row;width:100%;gap:1.5em;align-items:flex-start;}
.layout-leftright-left {flex:1 1 50%;min-width:0;}
.layout-leftright-right {flex:1 1 50%;min-width:0;}


.formelement.currency > .currency-input,
.currency .currency-input {
  display: flex;
  align-items: center;
  gap: 0.15em;
  line-height: 0;
}
.currency .currency-symbol {
  font-size: 1em;
  line-height: 1.8em;
  padding: 0;
}

.format_euro,.format_currency {text-align:right;}
.format_int {text-align:right;}
.format_float {text-align:right;}
.format_date,.format_datetime,.format_time {text-align:right;}
.format_bytes {text-align:right;}
.format_percent {text-align:right;}
.format_duration {text-align:right;}
table.datatable th[align="right"],
table.datatable td[align="right"],
table.calendartable th[align="right"],
table.calendartable td[align="right"] {text-align:right;}


.checkedStar {
  color: orange;
}

.button,
button.primary,
button.primary.button {
  background: #f4f4f4;
  color: #808080;
  padding: 0.4em 1em;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover,
button.primary:hover,
button.primary.button:hover {
  background: #d8d8d8;
  color: #808080;
}

/* Compact icon-only controls next to form fields (url goto, password show/generate) */
a.form-icon-btn,
button.form-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0.3em;
  background: #9f9f9f;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  aspect-ratio: 1;
}
a.form-icon-btn:hover,
button.form-icon-btn:hover {
  background: #8c8c8c;
}
a.form-icon-btn.is-disabled,
a.form-icon-btn.is-disabled:hover,
a.form-icon-btn[aria-disabled="true"],
a.form-icon-btn[aria-disabled="true"]:hover {
  background: #c8c8c8;
  color: #f0f0f0;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}
.form-icon-btn .material-icons {
  font-family: "Material Icons Local", "Material Icons", sans-serif;
  display: block;
  font-size: 1em;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  color: inherit;
  transform: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.formelement_url,
.formelement_password {

  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  column-gap: 0.25em;
  row-gap: 0;
  white-space: normal;
  vertical-align: top;
}

.content .formelement_password{
  display: flex !important;
  flex-direction: row;
  height: 100% !important;
  column-gap: 0 !important;
}
.content .formelement_password > input{
  width: auto !important;
}

.formelement_url > label,
.formelement_password > label {
  grid-column: 1 / -1;
}
.formelement_url > input,
.formelement_password > input {
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  margin: 0;
  min-width: 8em;
  width: 100%;
}
.formelement_url > a.form-icon-btn,
.formelement_password > .form-icon-btn {
  grid-row: 2;
  align-self: stretch;
  height: auto;
  width: auto;
  min-height: 0;
  aspect-ratio: 1;
}

.keymap_button_add{
    fill: white;
}

.datenice {cursor:help;white-space:nowrap;}

.centerparent {display:table}
.centerparent:first-child {display:table-cell;vertical-align: middle;text-align: center;}























form#login {
  transform: translateY(-50%);
  margin-top: 45vh;
}
@media (max-width: 640px) {
  form#login {
    transform: none;
    margin-top: 0;
  }
}
.material-icons {
transform: translateY(-2px);
}
.material-icons {transform: translateY(-2px);}
div[id^="datatable_content"] {
  overflow: auto;
  height: 76vh;
}
.layout-app div[id^="datatable_content"],
.layout-content div[id^="datatable_content"] {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.datatable > thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.datatable > tfoot {
  position: sticky;
  bottom: 0;
}




.language-picker-container {
  display: inline-block;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.language-picker-container label {
  margin-right: 10px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.selected-option {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 1em;
  color: #333;
  cursor: pointer;
}

.selected-option:hover {
  background-color: #f2f2f2;
}

.selected-option:hover + .dropdown-list,
.dropdown-list:hover {
  display: block;
}

.option-icon {
  margin-right: 10px;
  font-weight: bold;
}

.arrow-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #333 transparent transparent transparent;
  margin-left: 10px;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: none;
  pointer-events: all;
}

.dropdown-option {
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 1em;
  color: #333;
  cursor: pointer;
}

.dropdown-option:hover {
  background-color: #f2f2f2;
}

.option-icon-small {
  margin-right: 10px;
  font-weight: bold;
  font-size: 0.8em;
}

.option-text {
  font-size: 0.8em;
  margin-left: 5px;
}

#mobile-menu-icons {
  display: none;
}

/* Subtasks (format: subtasks) and categories (format: categories) */
.subtasks,
.categories,
.field_category .list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
    align-items: center;
}
.subtask_open,
.category_tag,
.field_category .list > span {
    display: inline-block;
    padding: 0.1em 0.3em;
    margin: 0;
    background-color: #9ca3af;
    color: #fff;
    border-radius: 0.25em;
    font-size: 0.8em;
}
.subtask_done {
    display: inline-block;
    padding: 0.1em 0.3em;
    margin: 0;
    background-color: #16a34a;
    color: #fff;
    border-radius: 0.25em;
    font-size: 0.8em;
}





















.spinner {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 2.5em auto;
  border: 3px solid #808080;
  border-right-color: transparent;
  border-radius: 50%;
  animation: msj-spinner-rotate 0.75s infinite linear;
}
@keyframes msj-spinner-rotate {
  to { transform: rotate(360deg); }
}
