@font-face {
    font-family: 'Material Icons';font-style: normal;font-weight: 400;
    src: url(/de/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/de/fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(/de/fonts/MaterialIcons-Regular.woff) format('woff'),
    url(/de/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
    font-family: '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;
    font-feature-settings: 'liga';
    vertical-align: text-bottom;
    transform: translateY(-2px);
}

html,body {width:100%;height:100%;margin:0;padding:0;}
html,body,input,select,textarea,button{font-family: 'Work Sans';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 {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;}
button {cursor:pointer; border-radius:0.3em;background:#999999;color:white;font-size:1.0em;border:none;padding:0.2em 0.6em;min-width:7em;}
button:hover {
  background: #8c8c8c;
}
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:#808080;font-size:1.25em;border-bottom:solid 1px #e0e0e0;margin-bottom:0.3em;}

form.filter {padding:0;margin:0;width:100%;}
form.filter .formelement {display:inline-block;background:transparent;border:none;padding:0;margin:0;}
form.filter fieldset {display:inline-block;padding:0;margin:0;width:}
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 #dfdfdf;box-shadow:2px 2px 12px #bbb;width:300px;padding:16px;background:#fcfcfc;
       position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-150px;}
/*#login h2 {background-color:#ffffff;color:#808080;margin:-16px -16px 16px -16px;padding:16px;border-bottom:solid 1px gray}*/
#login h2 {background-color:#999999;color:white;margin:-16px -16px 8px -16px;padding:16px;border-bottom:solid 0px #808080}
#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;}

.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;
}
.navi_main li ul a {padding-bottom:0.2em;padding-top:0.2em;}

.navi_folder li {display:block;}
.navi_folder li a {padding:0}

/*          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;}
table.datatable tr:nth-child(odd)  {background-color:#F7F7F7;}

.loglevel_error {background-color:#ffb0b0;}
.loglevel_alert {background-color:#ff8080;}
.loglevel_warning {background-color:#ffffb0;}
.loglevel_ok {background-color:#b0ffb0;}

/*           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 {z-index: 9; display:none;position:absolute;left:0;top:1.5em;background-color:white;border:solid 1px #f0f0f0;}
.sub-action .menu-action {padding-top:0.5em;}
.menu-action:hover .sub-action {display:block;}

/* formats */

.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 {
  padding: 0;
  background: transparent;
  color: gray;
  font-size: 30px;
  font-weight: 1;
  min-width: unset;

}
/* 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-warning {background:#fdb250;color:white;}
.message-detail {font-size:70%;}

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

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

.none {display:none;}

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

.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:gray;}
.objectmenu a {display:block !important;}

.panelleft_main    {display:table;width:100%;}
.panelleft_panel    {display:table-cell;margin-right:2em;}
.panelleft_content {display:table-cell;}

div[id^="datatable_content"] {
  overflow: auto;
  max-height: 76vh;
}
.datatable > thead {
  position: sticky;
  top: 0;
}
.datatable > tfoot {
  position: sticky;
  bottom: 0;
}
    
.formelement.aclright button {
  min-width: unset;
  background: transparent;
  color: #777;
}
.formelement.aclright button:hover {
  color: #000;
}
a {
  cursor: pointer;
}