/*


*/

/* Aus nordit.css uebernommen */

p, em, h1, h2, h3, h4, h5, h6, ul, ol, li, div, td, th, strong, body {
    font-family: Helv, Helvetica, Arial, sans-serif;
}

p, ul, ol, li, div, td, body {
    font-weight: normal;
}

p, ul, ol, li, div, body {
    font-size: 14px;
}

body {
    background-color: white;
    margin: 0;
}

body, textarea {
    scrollbar-arrow-color: #000066;
    scrollbar-face-color: #C8D2E4;
    scrollbar-track-color: #E8ECF3;
}

h1, h2, h3, h4, .title {
    margin-top: 0px;
    margin-bottom: 1.3em;
    color: #000066;
    font-weight: bold;
}

h1 { font-size: 25px; font-style: italic; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }

.big { font-size: 150%; }
.larger { font-size: larger; }
.small { font-size: 75%; }

img {
    border: 0;
}

.ProgressBar {
   font-family: Helv, Helvetica, Arial, sans-serif;
   color: #C8D2E4;
}

.normal {
    font-style: normal;
    font-weight: normal;
}

.left, .lalign, .lalign.header {
    text-align: left;
}

.calign {
    text-align: center;
}

.ralign, .ralign.header {
    text-align: right;
}

.valign-top {
    vertical-align: top;
}

.malign, .valign-middle {
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}


:is(td, th).lborder-thick {
    border-left: solid 3px white;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.flex-hdistribute {
    display: flex;                  /* establish flex container */
    flex-direction: row;            /* default value; can be omitted */
    flex-wrap: nowrap;              /* default value; can be omitted */
    justify-content: space-between; /* switched from default (flex-start, see below) */
}

.emphasize {
    color: red;
}

.title {
    font-size: 14px;
    /* text-align: right; */
}


/* Listen */
li {
    font-size: 14px;
}

/* Hervorhebungen */
bold, b    { font-weight: bold; }
strong, em { color: #FF0000; font-weight: bold; }
em         { font-style: normal;  }
.boldface, .required  { font-weight: bold; }
.underline { text-decoration: underline; }

a         { color: #000066; text-decoration: none; }
a:hover   { color: #990000; background-color: #E8ECF3 }
a:link    { text-decoration: none; }
a:visited { }
a:active  { font-style: italic; }


/* Header */

table.app-header {
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: white;
    margin-top: 2px;
    margin-bottom: 2px;
}

table.app-header tr, table.app-header th, table.app-header td {
    background-color: white;
    padding: 0;
}

table.app-header td.app-logo {
    width: 200px;
}

table.app-header td.app-logo r-icon {
    padding-left: 4ex;
    vertical-align: bottom;
    cursor: default;
}

table.app-header td.help {
    text-align: right;
    padding-right: 2ex;
    vertical-align: middle;
}


/* Login-Seite */

table.login {
    border: 2px solid #E8ECF3;
    border-spacing: 0px;
    padding: 0px;
    margin-top: 40px;
    background-color: white;
}
table.login :is(th, td.header) {
    background-color: #C8D2E4;
    text-align: left;
    border-bottom: 3px solid #E8ECF3;
    padding: 1px;
}
table.login td {
    padding: 2px;
    padding-left: 4px;
    background-color: white;
}


/* Systeminformationen */

table.sysinfo td.header {
    text-align: left;
    padding: 1em 3em 1em 3em;
}


/* Menue-Eintraege */

.menu-width {
    width: 192px;
    max-width: 192px;
}

r-main-menu {
    width: 165px;
    max-width: 165px;
    display: block;
    border-spacing: 0px;
    margin-left: 5px;
    background-color: #E8ECF3;
    position: relative;
    /* line-height: 16px; */
}

body.highlight-accesskeys r-main-menu:before {
    position: absolute;
    content: attr(menu-accesskey);
    text-decoration: underline;
    background-color: yellow;
}

r-main-menu > r-main-menu-item {
    display: block;
    width: 100%;
    overflow: hidden;
}

r-main-menu-item > div {
    border-width: 0px;
    border-style: none;
    padding: 0px;
    margin: 0px;
    width: 165px;
    vertical-align: baseline;
}

r-main-menu-item > div > span {
    white-space: normal;
}

r-main-menu-item[level="0"] > div {
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    background-color: #C8D2E4;
    color: #000066;
    text-align: center;
    padding: 1px;
}

r-main-menu-item[level="1"] > div {
    padding-top: 1px;
}

r-main-menu-item[level="1"] > div {
    width: 140px;
    padding: 0px 0px 0px 25px;
    text-indent: -25px;
}

r-main-menu-item[level="2"] {
    font-size: 8pt;
    line-height: 10pt;
}

r-main-menu-item[level="2"] > div {
    width: 135px;
    padding: 0px 0px 0px 30px;
    font-size: 8pt;
    text-indent: -20px;
}

r-main-menu-item.menu_sep {
    height: fit-content;
    padding: 0.5ex 0px 0.5ex 0px;
}

r-main-menu-item.menu_sep > div {
    height: 1px;
    padding: 0px;
    vertical-align: middle;
    background-color: #b2b2b2;
}

r-main-menu-item.menu_sep[level="1"] > div {
    width: 100%;
}

r-main-menu-item.menu_sep[level="2"] > div {
    width: 142px;
    margin-left: 23px;
}

r-main-menu-item.menu_shadow > div {
    width: 165px;
    height: 8px;
    overflow: hidden;
    background-color: white;
    background-image: url("/rex/gif/menu/shadow.gif");
    background-repeat: no-repeat;
}


r-menu-item:not([disabled]), r-main-menu-item:not([disabled]) > div > span {
    cursor: pointer;
}

r-menu-item:not([disabled]):hover, r-main-menu-item:not([disabled]) > div:hover {
    color: #990000;
}

r-menu-item[disabled], r-main-menu-item[disabled] > div {
    color: #808080;
    cursor: default;
}


/* Version */

table.rex-version {
    position: relative;
    bottom: 0px;
    z-index: 2;
    border-width: 0px;
    border-spacing: 0px;
    /* border-collapse: collapse; */
    vertical-align: middle;
    table-layout: fixed;
    max-width: 100%;
}

table.rex-version td.user {
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
    padding-left: 5px;
    font-size: 8pt;
    background-color: white;
    overflow: hidden;
}

td.user > span.iconselect.rex-gruppe-other {
    color: red;
}

table.rex-version td.user span.iconselect {
    display: block;
    width: 50%;
    min-width: 50%;
}

table.rex-version td.user > r-icon {
    cursor: default;
}

table.rex-version td.flag {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding-right: 12px;
    background-color: white;
    width: 32px;
}

table.rex-version td.flag img {
    width: 24px;
    max-width: 24px;
    height: 18px;
    max-height: 18px;
}


r-user-config {
    display: none;
}


/* Tools / Icons */

r-icon {
    display: inline;
    cursor: pointer;
}

r-icon > img {
    display: inline;
    vertical-align: baseline;
    translate: 0px 1px;
    width: inherit;
    height: inherit;
}

r-icon > img:is([src$="/infobox.svg"],[src$="/cog.svg"],[src$="/drag_handle.svg"]) {
    translate: 0px 2px;
}

r-icon > img[src$="/download.svg"] {
    translate: 0px 3px;
}

r-icon > img:is([src$="/box_checked.svg"],[src$="/box_unchecked.svg"]) {
    margin: 0px 1px 0px 2px;
}

img.icon {
    /* vertical-align: middle; */
    padding-left: 2px;
    padding-right: 2px;
}

r-icon.drag_handle {
    cursor: move;
}

img.sanity {
    width: 24px;
    height: 24px;
}

r-ak.overlay {
    display: none;
    position: relative;
    /* width: 0px; */
}

r-ak.overlay > span {
    position: absolute;
    top: -1px;
    left: -1px;
    background: white;
    padding: 1px;
    border: solid black 1px;
    font-size: 14px;
    font-weight: normal;
    z-index: 3;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

body[class*="highlight-accesskeys"] r-ak.overlay {
    display: block;
}

body.highlight-accesskeys-a r-ak:not([value^="a"]).overlay,
body.highlight-accesskeys-b r-ak:not([value^="b"]).overlay,
body.highlight-accesskeys-b r-ak:not([value^="b"]).overlay,
body.highlight-accesskeys-c r-ak:not([value^="c"]).overlay,
body.highlight-accesskeys-d r-ak:not([value^="d"]).overlay,
body.highlight-accesskeys-e r-ak:not([value^="e"]).overlay,
body.highlight-accesskeys-f r-ak:not([value^="f"]).overlay,
body.highlight-accesskeys-g r-ak:not([value^="g"]).overlay,
body.highlight-accesskeys-h r-ak:not([value^="h"]).overlay,
body.highlight-accesskeys-i r-ak:not([value^="i"]).overlay,
body.highlight-accesskeys-j r-ak:not([value^="j"]).overlay,
body.highlight-accesskeys-k r-ak:not([value^="k"]).overlay,
body.highlight-accesskeys-l r-ak:not([value^="l"]).overlay,
body.highlight-accesskeys-m r-ak:not([value^="m"]).overlay,
body.highlight-accesskeys-n r-ak:not([value^="n"]).overlay,
body.highlight-accesskeys-o r-ak:not([value^="o"]).overlay,
body.highlight-accesskeys-p r-ak:not([value^="p"]).overlay,
body.highlight-accesskeys-q r-ak:not([value^="q"]).overlay,
body.highlight-accesskeys-r r-ak:not([value^="r"]).overlay,
body.highlight-accesskeys-s r-ak:not([value^="s"]).overlay,
body.highlight-accesskeys-t r-ak:not([value^="t"]).overlay,
body.highlight-accesskeys-u r-ak:not([value^="u"]).overlay,
body.highlight-accesskeys-v r-ak:not([value^="v"]).overlay,
body.highlight-accesskeys-w r-ak:not([value^="w"]).overlay,
body.highlight-accesskeys-x r-ak:not([value^="x"]).overlay,
body.highlight-accesskeys-y r-ak:not([value^="y"]).overlay,
body.highlight-accesskeys-z r-ak:not([value^="z"]).overlay,
body.highlight-accesskeys-0 r-ak:not([value^="0"]).overlay,
body.highlight-accesskeys-1 r-ak:not([value^="1"]).overlay,
body.highlight-accesskeys-2 r-ak:not([value^="2"]).overlay,
body.highlight-accesskeys-3 r-ak:not([value^="3"]).overlay,
body.highlight-accesskeys-4 r-ak:not([value^="4"]).overlay,
body.highlight-accesskeys-5 r-ak:not([value^="5"]).overlay,
body.highlight-accesskeys-6 r-ak:not([value^="6"]).overlay,
body.highlight-accesskeys-7 r-ak:not([value^="7"]).overlay,
body.highlight-accesskeys-8 r-ak:not([value^="8"]).overlay,
body.highlight-accesskeys-9 r-ak:not([value^="9"]).overlay {
    display: none;
}

body[class*="highlight-accesskeys"] r-icon > r-ak.overlay > span {
    top: 1px;
    left: 3px;
}

body[class*="highlight-accesskeys"] r-icon[disabled] > r-ak.overlay {
    display: none;
}

body[class*="highlight-accesskeys"] r-button[disabled] > r-ak.overlay {
    display: none;
}

body[class*="highlight-accesskeys"] r-main-menu-item r-ak.overlay {
    display: inline-block;
}

body[class*="highlight-accesskeys"] r-main-menu-item r-ak.overlay > span {
    text-indent: initial;
    top: unset;
    bottom: -5px;
}

body[class*="highlight-accesskeys"] r-main-menu-item[disabled] r-ak.overlay {
    display: none;
}

r-ak > span > :is(u, i) {
    text-decoration: none;
    font-style: normal;
}

body.highlight-accesskeys r-ak > span > :is(u, i) {
    text-decoration: underline;
    background-color: yellow;
}

body.highlight-accesskeys-a r-ak[value^="a"] > span > u,
body.highlight-accesskeys-b r-ak[value^="b"] > span > u,
body.highlight-accesskeys-b r-ak[value^="b"] > span > u,
body.highlight-accesskeys-c r-ak[value^="c"] > span > u,
body.highlight-accesskeys-d r-ak[value^="d"] > span > u,
body.highlight-accesskeys-e r-ak[value^="e"] > span > u,
body.highlight-accesskeys-f r-ak[value^="f"] > span > u,
body.highlight-accesskeys-g r-ak[value^="g"] > span > u,
body.highlight-accesskeys-h r-ak[value^="h"] > span > u,
body.highlight-accesskeys-i r-ak[value^="i"] > span > u,
body.highlight-accesskeys-j r-ak[value^="j"] > span > u,
body.highlight-accesskeys-k r-ak[value^="k"] > span > u,
body.highlight-accesskeys-l r-ak[value^="l"] > span > u,
body.highlight-accesskeys-m r-ak[value^="m"] > span > u,
body.highlight-accesskeys-n r-ak[value^="n"] > span > u,
body.highlight-accesskeys-o r-ak[value^="o"] > span > u,
body.highlight-accesskeys-p r-ak[value^="p"] > span > u,
body.highlight-accesskeys-q r-ak[value^="q"] > span > u,
body.highlight-accesskeys-r r-ak[value^="r"] > span > u,
body.highlight-accesskeys-s r-ak[value^="s"] > span > u,
body.highlight-accesskeys-t r-ak[value^="t"] > span > u,
body.highlight-accesskeys-u r-ak[value^="u"] > span > u,
body.highlight-accesskeys-v r-ak[value^="v"] > span > u,
body.highlight-accesskeys-w r-ak[value^="w"] > span > u,
body.highlight-accesskeys-x r-ak[value^="x"] > span > u,
body.highlight-accesskeys-y r-ak[value^="y"] > span > u,
body.highlight-accesskeys-z r-ak[value^="z"] > span > u,
body.highlight-accesskeys-0 r-ak[value^="0"] > span > u,
body.highlight-accesskeys-1 r-ak[value^="1"] > span > u,
body.highlight-accesskeys-2 r-ak[value^="2"] > span > u,
body.highlight-accesskeys-3 r-ak[value^="3"] > span > u,
body.highlight-accesskeys-4 r-ak[value^="4"] > span > u,
body.highlight-accesskeys-5 r-ak[value^="5"] > span > u,
body.highlight-accesskeys-6 r-ak[value^="6"] > span > u,
body.highlight-accesskeys-7 r-ak[value^="7"] > span > u,
body.highlight-accesskeys-8 r-ak[value^="8"] > span > u,
body.highlight-accesskeys-9 r-ak[value^="9"] > span > u {
    background-color: #C0E0C0;
}

body.highlight-accesskeys-a r-ak[value^="a"] > span > i,
body.highlight-accesskeys-b r-ak[value^="b"] > span > i,
body.highlight-accesskeys-b r-ak[value^="b"] > span > i,
body.highlight-accesskeys-c r-ak[value^="c"] > span > i,
body.highlight-accesskeys-d r-ak[value^="d"] > span > i,
body.highlight-accesskeys-e r-ak[value^="e"] > span > i,
body.highlight-accesskeys-f r-ak[value^="f"] > span > i,
body.highlight-accesskeys-g r-ak[value^="g"] > span > i,
body.highlight-accesskeys-h r-ak[value^="h"] > span > i,
body.highlight-accesskeys-i r-ak[value^="i"] > span > i,
body.highlight-accesskeys-j r-ak[value^="j"] > span > i,
body.highlight-accesskeys-k r-ak[value^="k"] > span > i,
body.highlight-accesskeys-l r-ak[value^="l"] > span > i,
body.highlight-accesskeys-m r-ak[value^="m"] > span > i,
body.highlight-accesskeys-n r-ak[value^="n"] > span > i,
body.highlight-accesskeys-o r-ak[value^="o"] > span > i,
body.highlight-accesskeys-p r-ak[value^="p"] > span > i,
body.highlight-accesskeys-q r-ak[value^="q"] > span > i,
body.highlight-accesskeys-r r-ak[value^="r"] > span > i,
body.highlight-accesskeys-s r-ak[value^="s"] > span > i,
body.highlight-accesskeys-t r-ak[value^="t"] > span > i,
body.highlight-accesskeys-u r-ak[value^="u"] > span > i,
body.highlight-accesskeys-v r-ak[value^="v"] > span > i,
body.highlight-accesskeys-w r-ak[value^="w"] > span > i,
body.highlight-accesskeys-x r-ak[value^="x"] > span > i,
body.highlight-accesskeys-y r-ak[value^="y"] > span > i,
body.highlight-accesskeys-z r-ak[value^="z"] > span > i,
body.highlight-accesskeys-0 r-ak[value^="0"] > span > i,
body.highlight-accesskeys-1 r-ak[value^="1"] > span > i,
body.highlight-accesskeys-2 r-ak[value^="2"] > span > i,
body.highlight-accesskeys-3 r-ak[value^="3"] > span > i,
body.highlight-accesskeys-4 r-ak[value^="4"] > span > i,
body.highlight-accesskeys-5 r-ak[value^="5"] > span > i,
body.highlight-accesskeys-6 r-ak[value^="6"] > span > i,
body.highlight-accesskeys-7 r-ak[value^="7"] > span > i,
body.highlight-accesskeys-8 r-ak[value^="8"] > span > i,
body.highlight-accesskeys-9 r-ak[value^="9"] > span > i {
    background-color: yellow;
}


/* Buttons */

r-button {
    display: inline;
    white-space: nowrap;
}

r-button-choice > :is(input[type="button"], button),
r-button > :is(input[type="button"], button), r-button > button {
    overflow: hidden;
    white-space: nowrap;
    background-color: #C8D2E4;
    font-family: Helv, Helvetica, Arial, sans-serif;
    font-weight: normal;
    outline: none;
    border-width: 2px;
    border-radius: 2px;
    border-color: #E8E8E8 #A0A0A0 #A0A0A0 #E8E8E8;
}

r-button-choice > button:active,
r-button > input[type="button"]:active, r-button > button:active {
    outline: none;
    border-color: #A0A0A0 #E8E8E8 #E8E8E8 #A0A0A0;
}

r-button.cancel > input[type="button"], r-button.cancel > button,
select.button > option.cancel {
    color: #FF0000;
}

r-button.go > input[type="button"], r-button.go > button {
    background-color: #A0F0A0;
    border-color: #A0F0A0;
}

r-button.stop > input[type="button"], r-button.stop > button {
    background-color: #F0A0A0;
    border-color: #F0A0A0;
}

body[class*="highlight-accesskeys"] r-button > button[disabled] > r-ak > span > :is(u, i) {
    text-decoration: none;
    font-style: normal;
    background-color: unset;
}


r-button-choice {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: relative;
    top: 0px;
    left: 0px;
}

r-button-choice > button:first-of-type {
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
}

r-button-choice > button:first-of-type:not(:last-of-type) {
    border-right-width: 1px;
    overflow: hidden;
}

r-button-choice > button:not(:first-of-type) {
    -webkit-flex:  0 1 auto;
    -ms-flex:  0 1 auto;
    flex: 0 1 auto;
    border-left-width: 1px;
    padding-left: 3px;
    padding-right: 3px;
}

r-button-choice > select {
    position: absolute;
    z-index: 2;
    background-color: #C8D2E4;
    border-width: 1px;
    padding: 2px;
}

r-button-choice > r-ak.overlay > span {
    top: 1px;
    left: unset;
    right: 1px;
}


r-buttonbar {
    display: table;
    table-layout: fixed;
    width: 100%;
    background-color: white;
    padding: 3px 2px 3px 2px;
    box-sizing: border-box;
}

r-buttonbar > div {
    display: table-row;
    background-color: white;
}

r-buttonbar > div > r-out {
    display: table-cell;
    padding: 0px 2px 0px 2px;
    margin: 0px;
    border: 0px;
}

r-buttonbar r-button > input[type="button"],
r-buttonbar r-button > button,
r-buttonbar r-button-choice {
    width: 100%;
}

div.hiddenbutton {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9713;
    width: 0px;
    height: 0px;
    display: inline;
    overflow: hidden;
}

.hidden {
    display: none;
}


/* Popups */

r-popup-onclick {
    display: block;
    position: absolute;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: #B2B2B2 #404040 #404040 #B2B2B2;
    padding: 3px;
}

r-popup-onclick > div.ridge-inner {
    position: relative;
}

r-popup-onclick > div.ridge-inner > img.close {
    position: absolute;
    right: 0px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

div.popup-hideout {
    height: 0px;
    max-height: 0px;
    overflow: hidden;
}

div.popup-pane {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.5);
    z-index: 2000;      /* muss höher als leaflet-control sein */
}

div.popup-pane > div.select-popup {
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: #B2B2B2 #404040 #404040 #B2B2B2;
    padding: 2px;
    max-height: 80%;
    overflow-y: auto;
}

div.select-popup div.ridge-inner {
    background-color: #E8ECF3;
}

div.select-popup div.header {
    width: 100%;
    text-align: center;
    padding: 2px 0px 2px 0px;
}

div.select-popup span.select-item {
    display: block;
    margin: 3px;
    padding: 2px 4px 1px 4px;
    border: 1px solid black;
    background-color: white;
    min-width: 12em;
}

div.select-popup span.select-item:hover {
    background-color: #E0FFE0;
    cursor: pointer;
}

div.select-popup div.button {
    text-align: center;
}

/* Fenster Header / Footer */

html, body.view, body.view form, div.view-content form {
    height: 100%; /* needed for proper layout */
    padding: 0;
    margin: 0;
}

form {
    margin: 0px;  /* Firefox seems to have a default margin around forms */
}

body.view {
    overflow: hidden;
}

/* Neues Layout */
body > :is(div, form).hstack > div.view {
    margin-right: 5px;          /* gleicher Abstand wie table.menu links */
}

.vstack, div.view, form.view {
    /* width: 100%; toxic */
    height: 100%; /* needed for proper layout */
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

div.auto.view, form.auto.view {
    height: auto; /* needed for proper layout, see layout-main.jsp */
}

div.view-heading {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex:  0 0 auto;
    -webkit-flex:  0 0 auto;
    -ms-flex:  0 0 auto;
    flex: 0 0 auto;
    /* background-color: #dcdcdc; */
    font-style: normal;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 1.3em 0;
    color: #000066;
}

.vbox, .hbox, div.view-tabpane {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex:  0 0 auto;
    -webkit-flex:  0 0 auto;
    -ms-flex:  0 0 auto;
    flex: 0 0 auto;
}

.vfill {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.hfill {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
}

.hstack {
    width: 100%; /* needed for proper layout */
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}


div.view-content {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
    position: relative;  /* need this to position inner content */
    overflow-x: hidden;
    overflow-y: auto;
    /* background-color: #E8ECF3; */
}

body.content-scroll div.view-content {
    overflow-x: auto;
    overflow-y: auto;
}

body.content-noscroll div.view-content {
    overflow-x: hidden;
    overflow-y: hidden;
}

div.view-buttonbar {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex:  0 0 auto;
    -webkit-flex:  0 0 auto;
    -ms-flex:  0 0 auto;
    flex: 0 0 auto;
    /* background-color: #dcdcdc; */
}

div.scrollpane {
    overflow: auto;
    width: 100%;
    height: 100%;
    /* Firefox braucht 'position: relative;' fuer korrekt positionierte
     * Tool-Menues in einer Tabelle in einem scrollenden div. */
    position: relative;
}

.hscroll, .vfill.hscroll {
    overflow-x: auto;
}


/* Karteireiter */

r-tabpane {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 1px 0;
    border-bottom: 1px solid #808080;
}

r-tabpane > r-tab {
    padding-left: 1.8ex;
    padding-right: 1.8ex;
    padding-top: 0px;
    padding-bottom: -1px;
    border-style: solid;
    border-width: 1px;
    border-color: white #808080 #808080 white;
    position: relative;
    bottom: -1px;
}

r-tab {
    display: inline-block;
}

r-tab.selected {
    cursor: default;
    color: #000066;
    background-color: #C8D2E4;
    /* font-weight: bold; */
}
r-tab.enabled {
    cursor: pointer;
    color: #000066;
    background-color: #E8ECF3;
}
r-tab.disabled {
    cursor: default;
    color: #000066;
    background-color: #D8D8D8;
}

r-tab.sdat-lightgreen:is(.enabled,.selected) {
    background-color: #E0FFE0;
}
r-tab.sdat-midblue:is(.enabled,.selected) {
    background-color: #B4C6E7;
}
r-tab.sdat-grey:is(.enabled,.selected) {
    background-color: #DBDBDB;
}
r-tab.sdat-apricot:is(.enabled,.selected) {
    background-color: #F4B083;
}
r-tab.sdat-gold:is(.enabled,.selected) {
    background-color: #FFE599;
}
r-tab.sdat-lightblue:is(.enabled,.selected) {
    background-color: #DEEAF6;
}
r-tab.sdat-midgreen:is(.enabled,.selected) {
    background-color: #A8D08D;
}
r-tab.selected[class*="sdat-"] {
    cursor: default;
    filter: brightness(110%);
}
r-tab.disabled[class*="sdat-"] {
    cursor: default;
    color: #000066;
    background-color: #D8D8D8;
}


/* Karteireiter - Für Accesskeys */

body.highlight-accesskeys r-tab:is([disabled], [selected]) > r-ak > span > :is(u, i) {
    text-decoration: none;
    font-style: normal;
    background-color: unset;
}

body[class*="highlight-accesskeys"] r-tab:is([disabled], [selected]) > r-ak.overlay {
    display: none;
}


/* Rahmen */

div.ridge {
    width:  100%;
    overflow-x: auto;
    overflow-y: visible;
}

body.content-scroll div.view-content div.ridge {
    overflow-x: visible;
}

div.ridge-outer {
    border-style: solid;
    border-width: 1px;
    border-color: #B2B2B2 #404040 #404040 #B2B2B2;
}

div.ridge-outer {
    overflow: hidden;
    padding: 3px;
    box-sizing: border-box;
    width: 100%;
    /* height: 100%; */
}

div.ridge.ridge-outer {
    padding: 0px;
}

div.ridge-outer.ridge {
    display: table;
    overflow: visible;
    height: auto;
}

div.ridge-outer > div.ridge-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

div.ridge-outer > table.ridge {
    width:  100%;
    border-spacing: 3px;
}

table.ridge > tbody > tr > td, table.ridge > tbody > tr > th,
table.ridge > tr > td, table.ridge > tr > th,
div.ridge-inner, table.ridge-inner {
    border-style: solid;
    border-width: 1px;
    border-color: #404040 #B2B2B2 #B2B2B2 #404040;
}

table.ridge > tbody > tr > td, table.ridge > tbody > tr > th,
table.ridge > tr > td, table.ridge > tr > th {
    max-width: 100%;
}

/* Grid-Layout */

table.grid {
    width:  100%;
    border-spacing: 0px;
}

table.grid > tbody > tr:not(.anchor) > :is(th, td.header) {
    height: 19px;
}

table.grid-min-height > tbody > tr:not(.anchor) > td:not(:empty):not([class]) {
    height: 22px;
}

tr.anchor > td, table.grid > tbody > tr.anchor > td,
tr.anchor > td > div, table.grid > tbody > tr.anchor > td > div {
    max-height: 1px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
    line-height: 0px;
}

div.vskip {
    padding-top: 6px;
}

table.grid > tbody > tr > td.grid-vskip05 {
    padding-top: 3px;
}

table.grid > tbody > tr > td.grid-vskip {
    padding-top: 6px;
}

div.vskip2 {
    padding-top: 12px;
}

table.grid > tbody > tr > td.grid-vskip2 {
    padding-top: 12px;
}

table.grid > tbody > tr > td.grid-hpad {
    padding-top: 6px;
    padding-bottom: 6px;
}

table.grid > tbody > tr > td.ridge-hsep {
    height: 1px;
    background-color: white;
    border-width: 1px;
    border-style: ridge;
    border-color: #B2B2B2 #404040 #404040 #B2B2B2;
    border-spacing: 0px;
    padding: 1px;
    margin: 0px;
}

table.grid > tbody > tr > td.ridge-hrsep {
    height: 1px;
    border-top: 1px solid #B2B2B2;
    border-width: 1px 0 0 0;
    margin-top: 6px;
}

table.grid, table.grid > tbody > tr > td, table.grid > tbody > tr > th {
    border-style:  none;
    border-width:  0px;
}

td.label1, span.label1 {
    white-space: nowrap;
    padding-right: 1ex;
}

td.label2, span.label2 {
    white-space: nowrap;
    padding-right: 2ex;
}

td.clabel1, span.clabel1 {
    white-space: nowrap;
    text-align: center;
    padding-left: 1ex;
    padding-right: 1ex;
}

td.label-spacer {
    padding-right: 3ex;
}

/* r-grid */

r-grid-container {
    display: grid;
    display: -ms-grid;
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: #B2B2B2 #404040 #404040 #B2B2B2;
    /* gap: 3px; */
    padding: 0px 3px 3px 0px;
    overflow: hidden;
}

r-grid-container.fit-height {
    height: fit-content;
}

body.content-scroll r-grid-container {
    min-width: 100%;
    max-height: unset;
    width: fit-content;
    height: fit-content;
}

r-grid-item {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    grid-column: auto / span 1;
    grid-row: auto / span 1;
    margin: 3px 0px 0px 3px;
    padding: 1px;
    background-color: #E8ECF3;
    border-style: solid;
    border-width: 1px;
    border-color: #404040 #B2B2B2 #B2B2B2 #404040;
}

r-grid-item.tabular {
    overflow: hidden;
    padding: 0px;
    background-color: white;
}

r-grid-item.noblank, r-grid-item.tabular.noblank {
    background-color: #E8ECF3;
}

r-grid-item.tabular > r-table {
    height: 100%;
    max-height: 100%;
    min-height: 0px;
}


@property --grid-container-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 50vh;
}


/* r-table */

r-table {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* overflow-x: auto; */
    min-height: 8em;
}

r-table > div.scrollpane:focus {
    outline: none;
}

r-table > div.scrollpane > div.tabular {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
}

r-table > div.scrollpane > div.tabular {
    min-width: 100%;
    width: fit-content;
    height: fit-content;
}

r-table > div.scrollpane > div.tabular > table {
    background-color: white;
    width: 100%;
    border-spacing: 1px;
}

r-table > div.scrollpane > div.tabular.ridge-outer > table {
    border-style: solid;
    border-width: 1px;
    border-color: #404040 #B2B2B2 #B2B2B2 #404040;
}


r-table-navbar {
    display: table;
    width: 100%;
    font-weight: bold;
}
r-table-navbar > span {
    display: table-cell;
}
r-table-navbar > span.table-nav-chunk-pos {
    width: 13%;
    text-align: left;
}
r-table-navbar > span.table-nav-row-count {
    width: 17%;
    text-align: left;
}
r-table-navbar > span.table-nav-prev {
    width: 20%;
    text-align: left;
}
r-table-navbar > span.table-nav-prev > span {
    padding-right: 2ex;
}
r-table-navbar > span.table-nav-page-numbers {
    text-align: center;
    width: 30%;
}
r-table-navbar > span.table-nav-page-numbers > span {
    padding-left: 0.5ex;
    padding-right: 0.5ex;
}
r-table-navbar > span.table-nav-page-numbers {
    width: 30%;
    text-align: center;
}
r-table-navbar > span.table-nav-next {
    width: 20%;
    text-align: right;
}
r-table-navbar > span.table-nav-next > span {
    padding-left: 2ex;
}
r-table-navbar.no-pages {
    display: none
}


/* Tabellen */

table {
    background: transparent;
}

table.tabular > :is(thead, tbody, tfoot) > tr > :is(td, th),
table.tabular > tr > :is(td, th) {
    padding: 3px;
}

table.tabular > :is(thead, tbody, tfoot) > tr > :is(td, th).colsep {
    background-color: white;
    padding: 1px;
}

tr, th, td {
    font-size: 14px;
}

tr, td {
    background-color: #E8ECF3;
}
th, .header {
    background-color: #C8D2E4;
    font-weight: bold;
}
td.header {
    text-align: center;
}

th > :is(div, r-out-block).th-sort {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: #000066;
    height: 100%;
    vertical-align: middle;
    white-space: nowrap;
}

th > :is(div, r-out-block).th-sort:hover {
    color: #990000;
    /* background-color: #E8ECF3; */
    cursor: pointer;
}

th > :is(div, r-out-block).th-sort > img.th-sort {
    padding-right: 3px;
    /* position: relative; top: 2px; */
}

th > :is(div, r-out-block).th-sort > span.th-sort {
    display: inline-block;
    text-align: inherit;
    vertical-align: middle;
}

tr.blank, tr.blank > td, r-grid-item.blank {
    background-color: white;
}

tr.group_header, tr.group_header td {
    background-color: #E0E0E0;
    /* font-style: italic; */
    font-weight: bold;
}



div.ralign-with-icon {
    display: table-row;
    width: 100%;
    height: 100%;
    text-align: right;
    white-space: nowrap;
}

div.ralign-with-icon > span.lpos-icon {
    display: table-cell;
}

div.ralign-with-icon > span.bog-grid-icon {
    display: table-cell;
    padding-left: 1ex;
}

div.ralign-with-icon > span.bog-grid-icon img {
    vertical-align: middle;
}

div.ralign-with-icon > div.ralign {
    display: table-cell;
    width: 100%;
    text-align: right;
    vertical-align: middle;
}


table.blind {
    background-color: white;
    border: 0;
    /* border-spacing: 0; */
    /* border-collapse: collapse; */
}

table.blind tr, table.blind th, table.blind td {
    background-color: white;
}

img.dummy {
    width: 1px;
    height: 1px;
}


/* Hauptüberschrift - für Tabellen und ganze Masken */
td.caption, td.caption > div {
    color: #000066;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

td.caption > div > r-icon.info-icon {
    vertical-align: top;
    padding-left: 4px;
}

td.indent {
    padding-left: 25px;
}

td.child, tr.child td {
    font-size: 75%;
    padding-left: 25px;
}

td.child.errmsg, tr.child td.errmsg {
    font-size: normal;
    padding-left: 0px;
}

td.amount, th.amount {
    text-align: right;
}

td.unit, th.unit {
    text-align: left;
    padding-left: 3px;
    white-space: nowrap;
}

td.rowsep, th.rowsep {
    background: white;
    height: 3px;
    padding: 1px;
}

.center {
    text-align: center;
}

td.errmsg:empty {
    padding: 0px;
}

.errmsg {
    color: #FF0000;
    font-weight: bold;
}

.warnmsg {
    color: #E08000;
    font-weight: bold;
}

table.warning {
    width: 100%;
}

tr.warning > td {
    padding-top: 3px;
    padding-bottom: 3px;
}

tr.warning > td.icon {
    text-align: center;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

td.warning {
    color: red;
    vertical-align: middle;
}


/* Baeume */

table.rex-tree {
    width: 100%;
    border: 0px;
    border-style: none;
    border-spacing: 0px;
}

.rex-tree td {
    padding-top: 0px;
    padding-bottom: 0px;
    /* white-space: nowrap; */
}

.rex-tree td.rex-tree-icon {
    vertical-align: top;
    padding: 0px;
    width: 24px;
    max-width: 24px;
    background-color: inherit;
}

.rex-tree td.rex-tree-icon.ongoing {
    background: url("/rex/gif/tree/line.gif") 6px 19px repeat-y;
    background-color: inherit;
}

.rex-tree td.rex-tree-icon img {
    padding-top: 1px;
    padding-left: 6px;
    border: 0px;
    background-color: inherit;
}

.rex-tree td.rex-tree-data, .rex-tree th.rex-tree-data {
    padding-left: 3px;
    padding-right: 3px;
}


r-checkbox-dependencies {
  display: none;
}

/* Nutzer-Filter */

td.header.user-filter, th.header.user-filter {
    min-width: 18em;
}

input[type="select"].user-filter, select.user-filter {
    min-width: 10em;
}

/* Scoring */

table.tabular.scoring {
    border-spacing: 0px;
}

table.tabular.scoring :is(td, th) {
    border-width: 0px 0px 1px 0px;
    border-bottom-style: solid;
    border-bottom-color: white;
    padding: 0px 0px 0px 3px;
}

table.tabular.scoring :is(td, th).lborder-thick {
    border-left: solid 3px white;
}


table.tabular.scoring :is(th, td):has(> :is(r-input-scoring-wert, r-out-scoring-wert)) {
    padding: 0px 0px 0px 0px;
}

table.tabular.scoring tr.non-leaf > td {
    background-color: #e0e0e0;
}

r-input-scoring-wert, r-out-scoring-wert {
    display: inline-block;
    white-space: nowrap;
}

r-input-scoring-wert > r-option-radio, r-out-scoring-wert > span {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    line-height: 24px;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
}

r-input-scoring-wert > r-option-radio ~ r-option-radio,
r-out-scoring-wert > span ~ span {
    border-left: solid 1px white;
}

r-input-scoring-wert > r-option-radio > input[type="radio"] {
    margin: 6px 3px 6px 3px;
}

r-out-scoring-wert > span > img {
    margin: 0px;
    margin-top: 3px;
}

r-input-scoring-wert > r-option-radio.val-01[checked],
r-out-scoring-wert > span.val-01.selected {
    background-color: rgb(0, 118, 0);
}
r-input-scoring-wert > r-option-radio.val-02[checked],
r-out-scoring-wert > span.val-02.selected {
    background-color: rgb(40, 162, 2);
}
r-input-scoring-wert > r-option-radio.val-03[checked],
r-out-scoring-wert > span.val-03.selected {
    background-color: rgb(54, 228, 0);
}
r-input-scoring-wert > r-option-radio.val-04[checked],
r-out-scoring-wert > span.val-04.selected {
    background-color: rgb(183, 245, 70);
}
r-input-scoring-wert > r-option-radio.val-05[checked],
r-out-scoring-wert > span.val-05.selected {
    background-color: rgb(255, 255, 0);
}
r-input-scoring-wert > r-option-radio.val-06[checked],
r-out-scoring-wert > span.val-06.selected {
    background-color: rgb(255, 200, 0);
}
r-input-scoring-wert > r-option-radio.val-07[checked],
r-out-scoring-wert > span.val-07.selected {
    background-color: rgb(255, 150, 0);
}
r-input-scoring-wert > r-option-radio.val-08[checked],
r-out-scoring-wert > span.val-08.selected {
    background-color: rgb(255, 100, 0);
}
r-input-scoring-wert > r-option-radio.val-09[checked],
r-out-scoring-wert > span.val-09.selected {
    background-color: rgb(255, 5, 0);
}
r-input-scoring-wert > r-option-radio.val-10[checked],
r-out-scoring-wert > span.val-10.selected {
    background-color: rgb(160, 30, 30);
}

/* NHK */

tr.nhk-description > td {
    vertical-align: top;
    padding-right: 1ex;
}
tr.nhk-input > td {
    padding-bottom: 10px;
}
tr.nhk-header > td {
    background-color: #C8D2E4;
    font-weight: bold;
    padding-right: 1ex;
}
tr.nhk-footer > td {
    font-weight: bold;
}


/* Eingabe-Felder */

input, textarea, select, button {
    font-family: Helv, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
}

r-out {
    display: inline;
}

r-out-block {
    display: inline-block;
    overflow: auto;
}
td > r-out-block {
    width: 100%;
}

r-label {
    display: inline;
}

r-label[required]:not([class]) {
    font-weight: bold;
}

r-label[required]:after {
    content: "\00A0*";
}

r-input-line {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

r-input-line > :is(input[type="text"], input[type="password"]) {
    flex: 1 1 auto;
    width: inherit;
}

r-input-line > input[type="button"] {
    flex: 0 0 auto;
    margin: 1px;
}

r-input-textarea {
    display: block;
    width: 100%;
}

r-input-textarea > textarea {
    resize: none;
    width: 100%;
    height: 100%;
}

r-input-textarea > div.picker {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

r-input-textarea > div.picker > select {
    flex: 1 1 auto;
    width: inherit;
}

r-input-textarea > div.picker > input[type="button"] {
    flex: 0 0 auto;
    margin: 1px;
}

r-textcounter {
    display: inline;
    white-space: nowrap;
}

r-textcounter > span.unit:not(:empty) {
    padding-left: 0.5ex;
}

r-input-text-chameleon {
    display: block;
}

r-input-text-chameleon > textarea {
    resize: none;
    width: 100%;
    height: 100%;
}

r-input-text-chameleon[cols] {
    width: fit-content;
}

r-input-text-chameleon[cols] > textarea {
    width: unset;
}

r-option-radio {
    display: inline-block;
    white-space: nowrap;
}

r-input-select-single {
    display: inline-block;
    white-space: nowrap;
}

r-input-select-single > select {
    width: inherit;
    min-width: inherit;
}

r-input-select-single-as-buttons > div {
    display: inline-block;
    white-space: nowrap;
}

r-input-select-single-as-buttons:not(.no-hskip) > r-option-radio:has(+ r-option-radio) {
    margin-right: 1em;
}

r-out-select-single-as-buttons {
    display: inline-block;
    white-space: nowrap;
}

r-out-select-single-as-buttons > div {
    display: inline-block;
    white-space: nowrap;
}

r-out-select-single-as-buttons > div > img {
    vertical-align: bottom;
}

r-out-select-single-as-buttons:not(.no-hskip) > div:has(+ div) {
    margin-right: 1em;
}

r-input-leading {
    /* display: none verhindert im IE11 die Übertragung im Form-submit */
    display: inline;
    max-width: 0px;
    max-height: 0px;
}

r-input-select-multi-as-buttons > div {
    display: inline-block;
    white-space: nowrap;
}

r-input-select-multi-as-buttons > div > label {
    /* Behavior of MouseEvent.offsetX/Y with inline elements is inconsistent
     * across browsers, see https://github.com/w3c/csswg-drafts/issues/5659.
     * inline-block set for offset on context menu "check all" */
    display: inline-block;
}

r-input-select-multi-as-buttons:not(.no-hskip) > div:has(+ div) {
    margin-right: 1em;
}

r-out-select-multi-as-buttons > div {
    display: inline-block;
    white-space: nowrap;
}

r-out-select-multi-as-buttons:not(.no-hskip) > div:has(+ div) {
    margin-right: 1em;
}

r-input-date {
    display: inline-block;
    white-space: nowrap;
}

r-input-date > input[type="text"] {
    width: 5.5em;
}

r-input-date > img.dateinput {
    border-style: none;
    vertical-align: middle;
    padding-left: 1px;
    cursor: pointer;
}

r-input-datetime > img.dateinput {
    border-style: none;
    vertical-align: middle;
    padding-left: 1px;
    cursor: pointer;
}

div.datepicker-outer, div.datepicker-range-outer {
    position: absolute;
    z-index: 2;
    background-color: white;
    width: fit-content;
}

div.datepicker-range-outer {
    white-space: nowrap;
}

div.datepicker {
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 4px;
    border-width: 2px;
    border-color: black;
    border-style: solid;
}

div.datepicker-range-outer > div.datepicker  {
    margin-top: 0px;
    border-top-width: 0px;
}

div.datepicker-range-outer > div.datepicker ~ div.datepicker {
    border-left-width: 0px;
}

div.datepicker-range-outer > div.caption {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid black;
    padding: 4px;
}

div.datepicker-range-outer > div.caption > div.control {
    width: 100%;
    background-color: #C8D2E4;
    padding: 1px 0 1px 0;
}

/*
div.datepicker-range-outer > div.caption > div.control select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0px 30px 0px 2px;
    border: 1px solid black;
}

div.datepicker-range-outer > div.caption > div.control select::-ms-expand {
  display: none;
}
*/

div.datepicker-range-outer > div.caption > div.control span.label {
    padding: 0 2em 0 1em;
}

div.datepicker-range-outer > div.caption > div.control img.close {
    float: right;
    position: relative;
    top: 2px;
    left: -3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

div.datepicker > div {
    width: 100%;
}

div.datepicker > div.caption {
    background-color: #C8D2E4;
    font-weight: bold;
    text-align: center;
    padding: 1px 0 1px 0;
}

div.datepicker > div.control {
    background-color: #E8ECF3;
    font-weight: bold;
    display: table;
    text-align: center;
    cursor: pointer;
}

div.datepicker > div.control > span {
    width: 20%;
    display: table-cell;
    padding: 1px;
}

div.datepicker > div.table {
    padding: 2px;
    margin-top: 3px;
}

table.datepicker th, table.datepicker td {
    min-width: 30px;
    max-width: 30px;
    text-align: center;
}

table.datepicker td.weekday {
    background-color: white;
}

table.datepicker td.weekday.in-range {
    background-color: #E0FFFF;
}

table.datepicker td.weekend.in-range {
    background-color: #E0FFFF;
}

table.datepicker td.current-date {
    font-weight: bold;
    color: red;
}

table.datepicker td.selected-date {
    font-weight: bold;
    color: blue;
}

table.datepicker td.day:hover {
    cursor: pointer;
    background-color: #E0FFE0;
}


r-input-datetime {
    display: inline-block;
    white-space: nowrap;
}

r-input-datetime > input[type="text"] {
    width: 10em;
}


select.tbspicker {
    display: none;
    position: absolute;
    z-index: 2;
}

input[type="button"].tbspicker {
    vertical-align: top;
    margin-left: 1px;
    margin-top: 1px;
    width: 5ex;
    height: 1.4em;
    background-color: #CECECE;
    border-style: outset;
    border-width: 1px;
}


r-input-color > input {
    width: 8ex;
    text-align: center;
}

div.colorpicker {
    position: absolute;
    /* clear: both; */
    z-index: 2;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 8px;
    padding-bottom: 5px;
    border: 1px solid;
    border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
    background: ThreeDFace;
}

span.colorpicker {
    white-space: nowrap;
}


span.colorpicker > span.pad {
    position: relative;
    left: 0px;
    top: 0px;
    display: inline-block;
    cursor: crosshair;
    border: 1px solid;
    border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
}

span.colorpicker > span.slider {
    position: relative;
    left: 0px;
    top: 0px;
    display: inline-block;
    /* width: 32px; */
    cursor: pointer;
}

span.colorpicker > span.slider > span.segments {
    display: inline-block;
    width: 16px;
    max-width: 16px;
    margin-left: 12px;
    border: 1px solid;
    border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
}

span.colorpicker > span.slider > span.segments > div {
    font-size: 1px;
    line-height: 0;
}

span.colorpicker img.arrow {
    position: absolute;
    left: 5px;
    top: 0px;
    cursor: pointer;
}

r-input-select-multi {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

r-input-select-multi > select {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex: 1 1 auto;
}

r-input-select-multi > img {
    flex: none;
}

img.checkbox {
    vertical-align: text-bottom;
    padding-bottom: 1px;
}

input[type="text"], input[type="password"],
input[type="select"], textarea, select {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: white;
    border: 1px solid gray;
    border-radius: 2px;
}

input[type="select"]::-ms-expand, select::-ms-expand {
    border: none;
    background: white;
}

input[type="text"], input[type="password"],
input[type="select"], select[type="select"]:not([multiple]) {
    height: 22px;
}

input[type="text"], input[type="password"] {
    padding-left: 2px;
    padding-right: 2px;
}

select {
    font-weight: normal;
}

input[type="text"]:disabled, input[type="password"]:disabled,
input[type="select"]:disabled, textarea:disabled, select:disabled,
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    background-color: #F0F0F0;
}

.disabled, option:disabled, option[data-rex-disabled=true] {
    color: #7E7E7E;
    font-style: normal;
}

input[type="text"][readonly], input[type="password"][readonly],
input[type="select"][readonly], textarea[readonly], select[readonly],
input[type="checkbox"][readonly], input[type="radio"][readonly] {
    background-color: #F0F0F0;
}

r-input-degree {
    white-space: nowrap;
}
r-input-degree > input.hours {
    width: 2.5em;
    text-align: right;
}
r-input-degree > input.minutes {
    width: 2em;
    text-align: right;
}
r-input-degree > input.seconds {
    width: 3.5em;
    text-align: right;
}
r-input-degree > select.compass {
    width: 3em;
    text-align: center;
}

r-sentry-paste-coords {
    display: none;
}

r-input-cronexpr {
    white-space: nowrap;
}
r-input-cronexpr > input.time {
    width: 9ex;
    margin-left: 1ex;
    margin-right: 1ex;
}
r-input-cronexpr > input.sched {
    margin-right: 1ex;
}


/* Checkbox als Schalter */

r-input-switch {
    display: inline;
}

r-input-switch > label {
    display: inline-block;
    position: relative;
    padding-left: 0;
    width: 35px;
    height: 18px;
}
r-input-switch > label > input {
    display: none;
    visibility: hidden;
}
r-input-switch > label > span {
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    color: #000066;
    background-color: white;
    border-color: #E0E0E0;
    box-shadow: #E0E0E0 0px 0px 0px 0px inset;
    display: inline-block;
    /* margin-right: 5px; */
}

r-input-switch > label > span:before {
    display: inline-block;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    background-color: white;
    content: " ";
    vertical-align: top;
    position: relative;
    top: 0%;
    left: 0%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

r-input-switch > label > input:checked + span:before {
    top: 0%;
    left: 50%;
}

r-input-switch.vertical > label {
    width: 18px;
    height: 35px;
}

r-input-switch.vertical > label > span:before {
    width: 100%;
    height: 50%;
}

r-input-switch.vertical > label > input:not(:checked) + span:before {
    left: 0%;
    top: 50%;
}

r-input-switch.vertical > label > input:checked + span:before {
    left: 0px;
    top: 0px;
}

r-input-switch > label > input:checked + span:before {
    background-color: white;
    border-color: currentColor;
    box-shadow:  white 0px 0px 0px 8px inset;
}

/* switch color: default */
r-input-switch > label > input:checked + span {
    border-color: currentColor;
    box-shadow: currentColor 0px 0px 0px 8px inset;
    transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s, background-color 0.2s ease 0s;
}


/* switch color: disabled */
r-input-switch > label > input:disabled + span:before {
    background-color: #F0F0F0;
}

r-input-switch > label > input:checked:disabled + span {
    border-color: #808080;
    box-shadow: #808080 0px 0px 0px 8px inset;
}

r-input-switch > label > input:disabled + span {
    border-color: #F8F8F8;
    box-shadow: #F8F8F8 0px 0px 0px 8px inset;
}


/* infobox */

span.info-float-right {
    float: right;
    height: 16px;
    line-height: 18px;
    vertical-align: baseline;
}


/* tinymce UI */

div.tox.tox-tinymce {
    border: solid black 1px;
    border-radius: 2px;
}

body.mce-content-body.xhtml-content {
    /* overflow-x: hidden; */
}

div.tox div.tox-edit-area {
    border-bottom: solid black 1px;
    border-radius: 2px;
    padding: 2px;
}

div.tox div.tox-edit-area::before {
    border: solid black 1px;
    border-radius: 2px;
}

div.tox > div.tox-editor-container > div.tox-editor-header {
    padding: 0px;
}

div.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom div.tox-editor-header,
div.tox div.tox-editor-header div[class*="tox-toolbar"] {
    background-color: inherit;
}

div.tox div.tox-editor-header div[class*="tox-toolbar"][role="toolbar"] {
    padding: 0px 2px 0px 2px;
}

div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn {
    width: 21px;
    height: 21px;
    margin: 2px 4px 4px 0px;
    border: 1px solid black;
}
div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn > span {
    transform: scale(0.75);
}

div.tox div.tox-editor-header div[class*="tox-toolbar"] div.tox-split-button {
    width: 48px;
    height: 21px;
    margin: 2px 4px 4px 0px;
    border: 1px solid black;
    overflow: hidden;
}

div.tox button.tox-tbtn, div.tox div.tox-split-button {
    background-color: #F0F0F0;
}

div.tox button.tox-tbtn.tox-tbtn--enabled:not([aria-disabled="true"]) {
    background-color: #A6CCF7;
}


div.tox div.tox-editor-header div[class*="tox-toolbar"] div.tox-split-button > span {
    transform: scale(0.75) translate(0px,-6px);
}

div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn[aria-haspopup="true"] {
    width: 42px;        /* Breite für Buttons mit Popup */
}

div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn.tox-tbtn--bespoke {
    width: 64px;        /* Breite für "Schriftgrad" */
}

div.tox .tox-tbtn {
    margin: 0px 1px 0px 0px;
}

div.tox div.tox-editor-header div[class="tox-toolbar__group"]:last-of-type {
    flex-grow: 1;
}
div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn[title="\00A0"] {
    display: inline-block;
    transform: none;
    border: none;
    background: inherit;
    color: black;
    cursor: default;
    min-width: 10em;
    width: fit-content;
    text-align: right;
    flex-grow: 1;
}
div.tox div.tox-editor-header div[class*="tox-toolbar"] button.tox-tbtn[title="\00A0"] span {
    cursor: default;
}

r-input-html, body.xhtml-content {
    font-family: Helv, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    background-color: white;
    margin: 0px;
}


/* Karte */

r-areamap {
    display: block;
    width: 100%;
    height: 100%;
}

r-areamap.leaflet-grab.crosshair {
    cursor: crosshair;
}

r-areamap div.rex-leaflet-status-selector > r-input-switch {
    display: block;
    height: 18px;
}

r-areamap div.rex-leaflet-status-selector > r-input-switch > label.horizontal {
    width: 31px;
    height: 16px;
}

r-areamap div.rex-leaflet-mousecoords {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0 5px;
    color: #303030;
}

r-areamap div.rex-leaflet-mousecoords:empty {
    display: none;
}


/* Textbausteine in XHTML */

body.rex-textmod table.view-heading {
    width: 100%;
    font-size: inherit;
    font-weight: normal;
    color: black;
    white-space: nowrap;
    text-align: center;
}

body.rex-textmod table.rex-textmod {
    border-collapse: collapse;
}
body.rex-textmod table.rex-textmod tr.textmod-entry td {
    border: solid white 2px;
}

body.rex-textmod td.mod-id {
    text-align: right;
    vertical-align: top;
    padding: 0.8ex 0.8ex 0 0.8ex;
}

body.rex-textmod td > r-input-html.textmod-entry:hover {
    background: #E8ECF3;
    cursor: pointer;
}

body.rex-textmod td > r-input-html.cap-textmod {
    height: 1.5em;
    overflow: hidden;
}

body.rex-textmod table.hide-nomatch tr:not(.textmod-match) {
    display: none;
}


/* Feldverweise in XHTML */

body.rex-refname-list {
    height: 100%;
}

body.rex-refname-list td.value-label r-label:hover {
    background-color: #FFE0E0;
    cursor: pointer;
}

body.rex-refname-list td.ref-sample {
    white-space: nowrap;
    padding-left: 2ex;
    vertical-align: baseline;
    max-width: 25ex;
    overflow: hidden;
    color: grey;
}

body.rex-refname-list td.ref-format-select {
    white-space: nowrap;
    padding-left: 2ex;
    vertical-align: baseline;
}


.xhtml-content span[data-rex-refid] {
    display: inline;
    position: relative;
}

body.xhtml-content span[data-rex-refid],
r-input-html.highlight-textref span[data-rex-refid] {
    background-color: #E0FFE0;
}

r-input-html.highlight-textref span[data-rex-error][data-rex-refid] {
    background-color: #FFFF00;
}

body.xhtml-content span[data-rex-error]:after {
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAKJJREFUOE+VUVsSwjAITPXb9stDeDAv7wk60xBcAtS0pRp3ZgdY2CGPxMwH5rwMKSUWllJGaFJvsTcJW1nzPmPd5qXmPJj+wToRmJyq8aUaHO0E7nN1SWKbA6cbV9Pe6DUwISqs43ewst8o57dUKXWkAXpkUfBvt2go0ogIwToWuqiz2EqU75FRtDMdr/9EPDZ94Ecvbn5jNc7zq37DPySixxuZIJ4RsLYPUgAAAABJRU5ErkJggg==");
    vertical-align: baseline;
    padding-left: 0.5ex;
    position: relative;
    top: 1px;
}

body.xhtml-content span[data-rex-error]:hover:before {
    content: attr(data-rex-error);
    color: black;
    background-color: #FFFF00;
    border-radius: 5px;
    padding: 5px 15px;
    position: absolute;
    top: -1em;
    left: 20%;
    z-index: 99;
    /* width: 220px; */
}


r-input-html {
    display: block;
    border-width: 1px;
    border-color: #808080;
    border-style: solid;
    overflow: auto;
    padding: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

r-input-html.no-border {
    /* display: inline-block; */
    border-style: none;
    border-width: 0px;
    background-color: inherit;
    margin: 0px;
}

/* Ueberschreiben der Header-Tag-Styles. Sonst weicht r/o von r/w-Darstellung
   ab. */

.xhtml-content h1,
.xhtml-content h2,
.xhtml-content h3,
.xhtml-content h4,
.xhtml-content h5,
.xhtml-content h6 {
    font-style: normal;
    color: black;
    font-weight: bold;
}

/* Damit der Editor dieselben Groessen wie die r/o-Darstellung verwendet. */

.xhtml-content h1 { font-size: 25px; }
.xhtml-content h2 { font-size: 18px; }
.xhtml-content h3 { font-size: 16px; }
.xhtml-content h4 { font-size: 15px; }

.xhtml-content p {
    margin-top: 0pt;
    margin-bottom: 0pt;
    font-weight: inherit;
    /* font-style: inherit; */
}

.xhtml-content ul, .xhtml-content ol {
    margin-top: 4pt;
    margin-bottom: 4pt;
}

.xhtml-content strong {
    color: inherit;
}

.xhtml-content em {
    color: inherit;
    font-weight: inherit;
    font-style: italic;
}

.xhtml-content table {
    width: calc(100% - 5px);
    font-size: 10pt;
    background-color: inherit;
    empty-cells: show;
}

.xhtml-content table td, .xhtml-content table th {
    width: 20%;
    font-size: 10pt;
    background-color: white;
}

body.infobox {
    color: black;
    background-color: white;
}

body.infobox r-input-xhtml.infobox {
    width: 100%;
    margin: 0pt;
    padding: 0pt;
}

body.infobox table.infobox {
    width: 100%;
}
body.infobox :is(td, th).infobox {
    color: #000066;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

r-input-html.infobox {
    border-style: none;
    background-color: #E8ECF3;
}

r-input-html.infobox table, r-input-html.infobox table :is(td, th) {
    background-color: inherit;
}

.xhtml-content table caption {
    font-size: 120%;
}

#table #advanced_tab {
    display: none;
}


/* standard */

body {
    border-width: 0px;
}

hr {
    color: #B2B2B2;
    background-color: #B2B2B2;
    height: 1px;
    border-width: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

tr.highlight, tr.highlight td {
    background-color: #DDFFFF;
    font-weight: bold;
}

tr.dragged, tr.dragged td {
    background-color: #ddffdd;
    /* font-weight: bold; */
}

span.toolicon, img.toolicon {
    cursor: pointer;
}
span.toolicon:hover {
    background-color: #E8ECF3;
}

.hskip05 {
    padding-left: 1ex;
}

.hskip {
    padding-left: 1em;
}

.hskip2 {
    padding-left: 2em;
}

.lpad1 { padding-left: 1em; }
.lpad2 { padding-left: 2em; }
.lpad3 { padding-left: 3em; }
.lpad4 { padding-left: 4em; }

.rpad1 { padding-right: 1em; }
.rpad2 { padding-right: 2em; }
.rpad3 { padding-right: 3em; }
.rpad4 { padding-right: 4em; }


r-toolmenu {
    display: block;
    background-color: white;
    padding: 4px;
    border-width: 2px;
    border-color: black;
    border-style: solid;
    white-space: nowrap; /* Ohne 'nowrap' werden die Icons vertikal angeordnet */
    position: absolute;
    z-index: 2;
}

r-toolmenu > r-icon + r-icon {
    padding-left: 2px;
}

r-toolmenu > r-icon:hover {
    background-color: #C8D2E4;
}

r-contextmenu, tr.highlight r-contextmenu {
    font-weight: normal;
    display: none;
    background-color: #F0F0F0;
    padding: 2px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    white-space: nowrap;
    position: absolute;
    z-index: 2;
    min-width: 5em;
}

r-contextmenu > r-menu-item.selected::before {
    content: "\2611\00A0";
}

r-contextmenu > r-menu-item {
    display: block;
    min-height: 19px;
    color: black;
    cursor: pointer;
    padding: 2px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

r-contextmenu > r-menu-item:is(:hover, :focus) {
    color: #990000;
    background-color: #C8D2E4;
    outline: none;
}


table.grid > tbody > tr > td.grid-hsep {
    height: 3px;
    line-height: 3px;
}

table.grid > tbody > tr > td.grid-hsep11 {
    height: 11px;
    line-height: 11px;
}

r-contextmenu > hr, td.grid-hsep > hr, td.grid-hsep11 > hr {
    margin: 1px;
}

:is(span, r-label, r-out).href_item {
    color: #000066;
    cursor: pointer;
}

:is(span, r-label, r-out).href_item:hover {
    color: #990000;
}

/* Icon-Auswahlbox */

r-input-select-single-as-icon {
    display: block;
}

r-input-select-single-as-icon > span.trigger {
    display: inline-block;
    width: fit-content;
    height: fit-content;
}

r-input-select-single-as-icon > span.trigger > img {
    cursor: pointer;
    opacity: 0.2;               /* Firefox's opacity */
    filter: alpha(opacity=20);  /* IE's opacity */
}

r-input-select-single-as-icon > span.trigger > span {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
}

r-input-select-single-as-icon[id='Session@AktuelleGruppe'] > span.trigger {
    width: 100%;
    height: fit-content;
}

r-input-select-single-as-icon > div.iconselect {
    position: absolute;
    background: white;
    padding: 2px;
    border-width: 2px;
    border-color: black;
    border-style: solid;
    /* Ohne 'nowrap' werden die Icons vertikal angeordnen */
    white-space: nowrap;
}

r-input-select-single-as-icon > div.iconselect > span {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

r-input-select-single-as-icon > div.iconselect > span:hover {
    display: block;
    background-color: #C8D2E4;
}

r-input-select-single-as-icon > div.iconselect > img, div.iconselect > span {
    cursor: pointer;
    white-space: nowrap;
    padding: 0px 2px 0px 2px;
    border-width: 0px;
}


/* Fortschrittsanzeige */

r-progress-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    z-index: 1000;
}

r-progress-overlay.progress {
    background: rgba(255,255,255,0.0);
}

r-progress-overlay > div.spinner-container {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    width: 100%;
}

r-progress-overlay > div.progress-upload-container {
    position: absolute;
    top: 70%;
    width: 100%;
    text-align: center;
}


r-spinner {
    display: inline-block;
    border: 8px solid #f3f3f3; /* light grey */
    border-top: 8px solid #000066; /* dark blue */
    border-radius: 50%;
    width: 64px;
    height: 64px;
    animation: spin 3s linear infinite;
    -webkit-animation: spin 3s linear infinite; /* Safari 4+ */
    -moz-animation:    spin 3s linear infinite; /* Fx 5+ */
    -o-animation:      spin 3s linear infinite; /* Opera 12+ */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

r-progress {
    display: inline-block;
    position: relative;
    width: 14em;
    padding: 1px;
    background-color: #E8ECF3;
    border: 1px solid #C8D2E4;
    border-radius: 10px;    /* (height of inner div) / 2 + padding */
}
r-progress > div.progress-bar-fill {
    background-color: #C8D2E4;
    width: 0%; /* Adjust with JavaScript */
    border-radius: 9px;
    height: 18px;
}
r-progress > span.progress-bar-text {
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    width: 100%;
    height: 18px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

r-pong {
    display: block;
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 2px;
    background: #C8D2E4;
    border: solid black 2px;
}

div.pong-trigger {
    width: 1em;
    height: 1em;
}

div.pong-trigger:focus {
    background: #E8ECF3;
}

r-pong > div.game {
    position: relative;
    width: 540px;
    height: 360px;
    background: #E8ECF3;
    margin-bottom: 1.6em;
    border-bottom: solid black 1px;
}

r-pong :is(div.ball, div.paddle) {
    position: absolute;
    transition: opacity .3s;
    /* transform: translate(var(--x, 0), var(--y, 0)); */
}

r-pong div.ball {
    background: #000066;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

r-pong div.paddle {
    width: 6px;
    height: 48px;
    border-radius: 3px;
    background: #000066;
}

r-pong > span {
    display: block;
    position: absolute;
    bottom: 2px;
    font-weight: bold;
}

r-pong > :is(span.up, span.down, span.close) {
    width: 16px;
    height: 16px;
    text-align: center;
    cursor: pointer;
    border: solid black 1px;
}

r-pong > span.up {
    left: 100px;
}

r-pong > span.down {
    left: 120px;
}

r-pong > span.score.one {
    left: 40px;
}

r-pong > span.score.two {
    right: 40px;
}

r-pong > span.close {
    right: 0px;
}

/* VOEB: VIA-Frames */
iframe.voeb-extern {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0;
    width: 100%;
    height: 100%;
}

.output {
    font-family: Helv, Helvetica, Arial, sans-serif;
}

/* Variablen-Anzeige */
.var {
    font-family: Helv, Helvetica, Arial, sans-serif;
    color: #000066;
    font-weight: bold;
}

/* IE11 */
input::-ms-clear, input::-ms-reveal {
    display: none;
    width: 0px;
}

/*

*/