@font-face {
    font-family: 'Material Icons Local';font-style: normal;font-weight: 400;
    src: url(/en/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/en/fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(/en/fonts/MaterialIcons-Regular.woff) format('woff'),
    url(/en/fonts/MaterialIcons-Regular.ttf) format('truetype');
    font-display: block;
}
.material-icons {
    font-family: 'Material Icons Local';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;
    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: 'Work Sans', Verdana, Arial, Helvetica, sans-serif;font-style: normal;font-weight: 400;font-size:16px;}
h1,h2,h3,h4 {padding:0;margin:0;}

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

.logo {width:160px;margin-left:20px;vertical-align:middle;display:none;}
.maincontent {padding:0.5em;z-index:100;position:relative;}
.top {background-color:#303030;color:white}
.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;}
.formelement div{display:inline-block;}
.formelement_textarea {width:100%;}
.formelement_textarea textarea {width:100%;min-height:5em;}
button {border-radius:0.3em;background:#737373;color:white;font-size:1.0em;border:none;padding:0.2em 0.6em;min-width:7em;}
label {display:block;font-size:0.8em;color:#606060;margin-top:3px;}
label.left {display:inline-block;}
input {font-size:1em;}
.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:#505050;font-size:1.25em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}

.formelement.error label {color:red}
.formelement.error input {border-color:red;}


form.filter {display:block;width:fit-content;padding:0;padding-top:0.5em;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;}
[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;}


/*         LOGIN  FORM     */
#login{border: solid 1px #d3d3d3;box-shadow:2px 2px 12px #bbb;width:300px;padding:16px;background:#fbfbfb;
       position:absolute;left:50%;margin-left:-150px;margin-top:-150px;}
/*#login h2 {background-color:#ffffff;color:#505050;margin:-16px -16px 16px -16px;padding:16px;border-bottom:solid 1px gray}*/
#login h2 {background-color:#737373;color:white;margin:-16px -16px 8px -16px;padding:16px;border-bottom:solid 0px #505050}
#login fieldset {padding:0;margin:0;border:none;}
#login .formelement {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"] {width:100%;}
#login input[type="password"] {width:100%;}
#login button {float:right;}

/*          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;}
.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;}

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

.navi_main a:hover {background-color:#f0f0f0;}
.navi_top a:hover {background-color:#505050;}
.navi_user a:hover {background-color:#505050;}
.navi_language a:hover {background-color:#505050;}

.navi_user li {position:relative;}
.navi_user li ul {display:none;position: absolute;top: 0;
   left: 0;right:0;margin: 0;padding:0;
   margin-top:2.4em;
   border:1px solid #e0e0e0;
    border-top:none;
    background-color:#303030;
}
.navi_user li:hover ul {display: block;}

.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 {padding:0}

.navi_folder_multi {padding:0 0 0 1em;}
.navi_folder_multi a {text-decoration:none;color:#000000;}
.navi_folder_multi a:hover {color:#606060;}

/*          TABLE           */
table.datatable {width:100%;border-collapse: collapse;}
table.datatable-checkbox-col td:first-child {width:2em;text-align:center;}
table.datatable-checkbox-col th:first-child {width:2em;text-align:center;}
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 td {border:solid 1px #e0e0e0; white-space: nowrap;vertical-align:top;}
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;}

.pager a {text-decoration: none;border-radius:0.3em;background:#a7a7a7;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             */
.menu {padding-bottom:0.5em;}
.menu-action {display:inline-block;position:relative;cursor:pointer;}
.menu-action-haschildren > button::after {content: "\25BE";float:right}
.menu-action-haschildren:hover > button::after {content: "\25B4";float:right}
.menu-action-disabled {opacity:0.5;cursor:default}
.sub-action {display:none;position:absolute;left:0;top:1.5em;background-color:white;border:solid 1px #f0f0f0;z-index:1000}
.sub-action .menu-action {padding-top:0.5em;}
.menu-action:hover .sub-action {display:block;}
.menu-action button {cursor:pointer;}
/* formats */

.text-right {text-align:right;}
#search-container {float:right;}

.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-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 {padding:2px 4px;border-radius:3px;margin-bottom:6px;}
.message-error {background:#b1191e;color:white;}
.message-success {background:#b6fd50;color:white;}
.message-ok {background:#b6fd50;color:black;}
.message-warning {background:#fdb250;color:white;}
.message-detail {font-size:70%;}

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

.comments {border-top:solid 1px #e0e0e0;display:block;width:100%;}
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;};

button.multi-item-delete {font-size:10px;}

.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;}

.main {display:flex;flex-direction:column;width:100%;height:100%;}
.menu {}
.maincontent {flex-grow:2;}

.panelleft_main {display:flex;flex-direction:row;height:100%;}
.panelleft_panel {min-width:8em;}
.panelleft_content {flex-grow:2;padding-left:1em;position:relative;}


.currency div{display: flex;}

.format_euro,.format_currency {text-align:right;}
.format_int {text-align:right;}
.format_float {text-align:right;}
.format_date,.format_datetime {text-align:right;}


.checkedStar {
  color: orange;
}

.button{
    background-color: grey;
    color: white;
    padding: 5px;
    padding-left: 9px;
    padding-right: 9px;
    text-decoration: none;
    border-radius: 5px;
}

.keymap_button_add{
    fill: white;
}

.datenice {cursor:help;}

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

























form#login {
  transform: translateY(-50%);
  margin-top: 45vh;
}
.material-icons {
transform: translateY(-2px);
}
.material-icons {transform: translateY(-2px);}
div[id^="datatable_content"] {
  overflow: auto;
  height: 76vh;
}
.datatable > thead {
  position: sticky;
  top: 0;
}
.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;
}