/* Global settings */
* {
    box-sizing: border-box;
    
    font-family: Liberation Sans, sans-serif ;
    font-size: 16px;
}

/* bigger font sizes are relative to main font size.
   this works because these tags do not nest inside each other. */
h4 { font-size: 1.2em; }
h3 { font-size: 1.2em; }
h2 { font-size: 1.4em; }
h1 { font-size: 2em; }

tt, code, kbd, samp, pre { 
    font-family: Liberation Sans Mono, monospace; 
}
img { 
    border: 0px; 
    vertical-align: middle; 
}
a { 
    text-decoration: none; 
    font-weight: normal;
    color: #0087cb;
}
a:hover { 
    text-decoration: none;
}


hr { 
    border: 0px solid transparent; 
    border-bottom: 2px solid #d8d8d8;
}
body { 
    padding: 0; 
    margin: 0; 
}


/* --- Global Input --- */

input, textarea {
    background: #fff;
    border: 1px solid #3b444d;
    padding: 4px;
}
input[type="checkbox"],
input[type="radio"] {
    border: 0px none transparent;
}

.perfact-layout--select select,
select {
    min-width: 100px;
    max-width: 85vw;
    
    /* font proportional settings 14px font = 20px height */
    border: 1px solid #3b444d;
    padding: 4px;
 
    background-color: #fff;
    text-overflow: ellipsis;
}

html[agent_type="other"] .perfact-layout--select select:not([multiple]),
html[agent_type="other"] select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    height: 30px;
    padding-right: 18px;
    
    background-image: url('./graphics_d/static/new_arrow.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 26px;    
}

.perfact-layout--select option,
option {
    max-width: 80%;
}

button, input[type="submit"] {
    text-transform: uppercase;
    border: none;
    margin-top: 5px;
    margin-right: 10px;
    background-color: #b9bcc6;
    font-weight: bold;
    color: #3b444d;
    cursor: pointer;
    padding: 5px;
}
.focus, input:focus, textarea:focus, select:focus {
    background-color: #bbbbff; 
}
.clickable { 
    cursor: pointer; 
}
input[type="submit"].invisible {
    width: 0.01vw; 
    height: 0.01vw; 
    border-style: none; 
    position: absolute; 
    top: 20px; 
    z-index: -1000; 
}

button:hover,
select:hover,
.ptab .tabs .tab:hover {
    cursor: pointer;
    box-shadow: inset 0px 2px 5px rgba(0,0,0,0.3);
}

/* Work around a quirk in IE11 which makes textareas ignore word wrapping */
textarea { 
    white-space: pre-wrap; 
}

input:disabled, textarea:disabled {
    /*XXbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU
    gAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgIAKcOXPm/6gieipiYGAAAB74Id8xBdLqAAAAAElFTkSuQmCC);*/
}


/* --- Header --- */
#testsystem {
    font-weight: bold;
    color: #cc0000;
}


div.pager td.center a {
    color: #3b444d;
    font-weight: bold;
}

/* --- Classes --- */
input.currency, input.float, input.int { 
    text-align: right;
}
td.currency, td.float, td.int { 
    text-align: right; 
}

td.tight { 
    width: 10px; 
    white-space: nowrap; 
}
td.tight div { 
    white-space: nowrap; 
}

.pager a {
    color: white;
    text-transform: uppercase;
}
div.search tr.cur .fa {
    color: #fff;
}

/* --- Tabs --- */
.ptab {
    padding: 5px;
    clear: both;
}

#staff_ttrec {
    border: 0.1vw solid #3b444d;
    border-collapse: collapse;
    margin-bottom:1vw;
}
#staff_ttrec tbody tr th,
#staff_ttrec tbody tr td {
    border: 0.1vw solid #3b444d;
    padding: 0.5vw;
}

/* Script and cookie warning */

div.noscript, div.nocookie { 
    border: 4px solid red; 
    padding: 40px;
    font-weight: normal; 
    display: block; 
    text-align: center;
    line-height: 30px; 
}


/* Editing forms */

form#edit_form table {
     width: 100%;
}

/* Main body */

div.body { }
div.body_nav_vert { }
div.body_prt { }
div.body_inner { }



/* Testing system notifier */

#mod_title {
    font-weight: bold;
    color: #000;
}
#mod_title a {
    color: #000;
}

pre.mod_notes {
    width: 650px;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 5px;
    font-family: monospace;
}


div.tinylogin {
    border: 2px solid #d8d8d8;
}
div.tinylogin * {
    line-height: 16px;
    text-align: right;
    font-weight: bold;
}
div.tinylogin form {
    padding: 0vw;
    margin: 0vw;
}
div.tinylogin input {
    text-align: left;
    width: 100px;
    border: 1px solid #000044;
    padding: 1px 2px;
}
div.tinylogin span.passwd {
    color: #000044;
}


#nav_inner table {
    width: 100%;
}



/* Help */

div.help_switch {
    position: absolute;
    right: 7px;
    padding-top: 4px;
}
/* Panel for programming mode */

div.panel {
    float: left;
    display: block;
    width: 250px;
    height: 20px;
    padding: 20px;
    margin: 20px;
    text-align: center;
    border: 1px solid #888888;
}

.fa {
    color: #3b444d;
}

/* Searching */

div.search {
    overflow-x: auto;
    background: #fff;
}
div.search td {
    white-space: nowrap;
}
div.search table {
    border-collapse: collapse;
    width:100%;
}
div.search td,
div.search th {
    padding: 0.25vw 0.4vw;
}

div.search th {
    background-color: #f0f0f0;
}

div.search tr.search_label input {
    padding: 0.1vw; 
    width: 9vw;
}
div.search th {
    text-align: left;
}

div.search tr.search_label th {
    font-weight: normal;
    padding: 0.3vw;
    background-color: #b9bcc6;
}

div.search tr.search_label th {
    vertical-align: middle;
    white-space: nowrap;
}

div.search td {
    vertical-align: top;
    border-bottom: 1px solid #c5c5d0;
}

div.search tr.coll {
    font-weight: bold;
}

div.search tr.even {
    background-color: transparent;
}

div.search tr.odd {
    background-color: transparent;
}

div.search tr.cur {
    background-color: #63707f;
    color: #fff;
}

div.search td.insert {
    padding: 0vw;
    margin: 0vw;
}

div.search tr.search_label th.filtered span {
    font-weight: bold;
}

div.search button.search_plus {
    padding: 0.1vw;
    color: #3b444d;
    margin: 0.1vw;
    background-color: transparent;
}

div.search i.sort-desc {
    color: #ea5454; /* red */
}
div.search i.sort-asc {
    color: #17a38c; /* green */
}

div.search tr.search_label a b {
    color: #000;
    font-size: 0.9em;
}

div.search form.search_form .hidden-submit {
    width: 1px;
    height: 1px;
    border-style: none;
    position: absolute;
    top: -2px
}

/* Pager */

div.pager table {
    width: 100%;
    background-color: #eee;
}

div.pager td {
    vertical-align: middle;
    border: 0vw;
}

div.pager td.prev {
    width: 45%;
    text-align: left;
}

div.pager td.next {
    width: 45%;
    text-align: right;
}

div.pager td.center {
    white-space: nowrap;
    text-align: center;
}



/* Forms */

div.editchooser {
    width: 100%;
    margin: 0%;
}
div.editchooser table  { }
div.editchooser table td {
    vertical-align: top;
}
div.editchooser b.perfact-layout--record-label {
    /* font-relative measures. font-size 14px */
    font-size: 1.2em;
    padding: 4px;
    overflow: hidden;
    float: left;
    
    padding-right: 0.5vw;
    color: #fff;
}
div.editchooser .record_id { 
    font-weight: bold;
    clear: both;
    color:#fff;
    float: left;
    /* font-relative measure. font-size: 14px */
    margin: -6px 6px;
}

.editform {
    clear: both;
    margin-top: 0px;
    background: #fff;
    padding: 1%;
}

div.editform {
    overflow-x: auto;
}

div.editform input.required {
    color: #000000;
    background-color: #ffddee;
}
div.editform span.required,
div.editform span.missing,
div.editform span.validate
{
    border: medium none;
    margin: 0px;
    padding: 0px;
    clear: none;
    display: inline-block;
    float: none;
    max-height: 1px;
    min-width: 1px;
}

div.editform span.missing {
    visibility: visible;
    color:  #ea5454; /* red */
    color: red;
}
div.editform span.validate {
    visibility: hidden;
}
div.editform span.error {
    font-weight: bold;
    color: red;
    visibility: visible;
}

iframe.loader_layer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 1px;
    display: none;
}

div.editform div.help {
    background-color: #ffffff;
    padding: 6px 8px;
    border: 2px solid #dddddd;
    width: 300px;
    max-height: 150px;
    overflow: auto;
}


/* Subforms */

div.subform table {
    border-collapse: collapse;
}
div.subform th {
    border: 1px solid #000000;
}

div.subform td.ref {
    text-align: right;
    padding-right: 4px;
}
div.subform td.item {
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
}
div.subform tr.checked {
    font-weight: bold;
}
div.subform td.spacer {
    padding-left: 15px;
}

div.subform span.validate,
div.subform span.required {
    background-color: transparent;
    visibility: visible;
}


/* Tabular editing */

div.tabedit {
    width: auto;
    overflow-x: auto;
}

div.tabedit table {
    border-collapse: collapse;
    width: 100%;
}

div.tabedit td {
    padding: 1px 4px;
    border-bottom: 1px; solid #c5c5d0;
}



div.tabedit button{
    width: 25vw;
    white-space: nowrap;
    padding: 0.5vw;
}

div.tabedit span.output {
    display: block;
    padding: 0.2vw;
}

div.tabedit th {
    padding: 1px 5px;
    text-align: left;
    background-color: #d4d8da;
    color: #3b444d;
}

div.tabedit tr.tabedit_label th {
    font-weight: normal;
    padding: 2px 5px 0px 2px;
}

div.tabedit tr.tabedit_filter th {
    vertical-align: middle;
    white-space: nowrap;
}
div.tabedit tr.mark {
    background-color: #bdf;
}
div.tabedit td.insert {
    padding: 0vw;
    margin: 0vw;
}

/*div.tabedit th.changed,*/
div.tabedit td.changed {
    background-color: transparent;
}

div.tabedit span.changesym {
    visibility: hidden;
}
div.tabedit span.changesym_changed {
    font-weight: bold;
    color: #ff0000;
    visibility: visible;
}
div.tabedit span.missing *,
div.tabedit span.error * {
    background-color: #ff4444;
    color: #ffffff;
}
div.tabedit span.validate,
div.tabedit span.required {
    background-color: transparent;
}

/* Tabedit delete specials */

div.tabedit tr.del td{
    position: relative;
}

div.tabedit tr.del td:not(.mark)::before{
    content: " ";
    position: absolute;
    left: 0; top: 50%; width: 105%;
    border-bottom: 4px solid #a00;
    transform: translate(0,-50%);
}

div.tabedit td a.delete-icon {
    color: #b9bcc6;
    font-size: 150%;
}

/* End of Tabedit delete specials */


/* Completions popup */

div.completions {
    display: inline;
    position: absolute;
    border: 1px solid #888888;
    padding: 5px;
    background-color: #ffffff;
    cursor: pointer;
}
div.completions div.current {
    font-weight: bold;
    color: #000000;
}
div.completions div {
    color: #444444;
}
div.hidden {
    display: none;
}


/* Messages */

div.msg_update, div.msg_delete, div.msg_insert {
    width: 50%;
    border: 1px solid #ff0000;
    text-align: center;
    padding: 4px;
    margin: 10px;
    background-color: #ffdddd;
}


/* STX Content */

Xdiv.content {
    border: 1px solid #aaaaaa;
    padding: 5px;
}

/* Popup iframes */

div.popup_div {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    left: 1px;
    top: -30px;
    width: 1px;
    height: 1px;
    background-color: #ffffff;
    border: 0.1vw solid #808080;
}
iframe.popup_frame {
    width: 1px;
    height: 1px;
    border: 0px;
    margin: 4px;
}

div.popup_body {
    margin-bottom: 2vw;
    margin-top: 2vw;
}
div.popup_body table {
    width: 100%;
    border-collapse: collapse;
}

div.popup_body input.required {
    color: #000000;
    background-color: #ffddee;
}
div.popup_body span.required { }
div.popup_body span.missing {
    font-weight: bold;
    color:  #ea5454; /* red */
    visibility: visible;
}
div.popup_body span.validate {
    font-weight: bold;
    visibility: hidden;
}
div.popup_body span.error {
    font-weight: bold;
    color: red;
    visibility: visible;
}

div.popup_header {
    width: 100%;
    background-color: #808080;
}
div.popup_header a {
    color: #ffffff;
    font-weight: bold;
}
div.popup_header a:hover {
    text-decoration: none;
}

div.popup_group {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}
div.popup_entry {
    white-space: nowrap;
    overflow: hidden;
}

/* Tabs */

div.tabgroup td {
    padding: 2px 6px 2px 6px;
    border: 2px none;
    background: #ffffff;
    color: #ffffff;
}
div.tabgroup td.active {
    padding-bottom: 6px;
    border: 1px solid #808080;
    border-bottom: 1px none;
}

div.tabgroup a {
    text-decoration: none;
    color: #555555;
}
div.tabgroup td.active a {
    color: #000044;
}
div.tabgroup a:hover {
    text-decoration: underline;
}

div.tabcontent {
    border: 1px solid #808080;
    padding: 4px;
    background: #ffffff;
    position: absolute;
    width: 60%;
    height: 50%;
    visibility: hidden;
}
div.tabactive {
    visibility: visible;
}


/* Special formats */

div.colorbox {
    width: 12px;
    height: 12px;
    border: 1px solid black;
}
div.colorbox_big {
    width: 20px;
    height: 20px;
    border: 1px solid black;
}
img.pf-color-icon {
    width: 38px;
    height: 38px;
    margin-left: -8px;
    margin-right: -8px;
}


/* Tables strictly for structuring (empty styles with no borders or margins) */

table.stc {
    border-collapse: collapse;
}
div td.stc, div table.stc, .stc {
    border: 0px;
    border-style: none;
    margin: 0px;
    padding: 0px;
}
div td.lpad {
    padding-left: 8px;
}


/* Nested forms */
iframe.nested_form {
    width: 100%;
}

div.subform {
}

/* I18N */

#i18n_chooser a{
    color: #0087cb;
}

#i18n_popup {
    display: none;
    border: 1px solid grey;
    padding: 2px;
    background: white;
}
#i18n_popup a {
    display: block;
    margin: 1px
}
div.i18n_translate {
    display: none;
}

/* New forms */

.dbfield {
    margin-bottom: 12px;
}
.dbfield label {
    font-weight: bold;
}
.dbfield .text *{
    text-transform:none;
}

.dbfield span.info {
    display: inline-block;
    border: 1px solid #3b444d;
    min-height: 14px;
    min-width: 7vw;
    padding: 4px;
    color: #63707f;
    background-color: #eeeeee;
}
.content{
    background-color: #fff;
}


div.dbfield div.progmode a {
    font-weight: normal;
    color: #888888;
}

.dbfield.tsticketxabcontact.missing label {
    color:  #ea5454; /* red */
}
.dbfield.tsticketxabcontact.missing label:after {
    content: '*';
}

/* Edit status indicator */

#edit_status_create, #edit_status_change,
#edit_status_view, #edit_status_locked,
#edit_status_loading {
    display: none;
}
#edit_status.view #edit_status_view,
#edit_status.create #edit_status_create,
#edit_status.change #edit_status_change,
#edit_status.locked #edit_status_locked,
#edit_status.loading #edit_status_loading { 
    font-size: 1.2em;
    font-weight: bold;
    padding-top: 3px;
    display: inline-block;
}

#edit_status_view {
    color: #fff;
}
#edit_status_locked {
    color: #eb5355;
}
#edit_status_create {
    color: #18a48c;
}
#edit_status_change {
    color: #f6a000;
}
#edit_status_loading {
    color: #fff;
}

div.editchooser table td.edit_status {
    padding: 0.2vw;
}

/* Autosize tables */

table.autosize div.limiter {
    max-width: 300px;
    max-height: 100px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

table.autosize thead {
    display: block;
}
table.autosize tbody {
    display: block;
    max-height: 500px;
    overflow: auto;
}

table.autosize tfoot {
    display: block;
}


/* Boxes and Tabs */

.ptab .tabs {
    display: flex;
}
.ptab .tabs .tab {
    float: left;
    margin: 0px;
    margin-right: 10px;
    background-color: #d4d8db;
    cursor: pointer;
    flex: 1 1 0;
    text-transform: uppercase;
}
.tab:last-child {
    margin-right: 0px !important;
}
.ptab .tabs .tab.active {
    background-color: #b9bcc6;    
}

.ptab .tabs .tab a {
    color: #3b444d;
    font-weight: bold;
    display: flex;
    justify-content: center;
    padding: 10px;
}

.ptab .tabs .tab.missing a {
    color:  #ea5454; /* red */
}
.ptab .tabs .tab.missing a:after {
    content: "*";
}

.ptab .content {
    clear: both;
    border: 2px solid #b9bcc6;
    padding: 10px;
}



/* Manual */

div.doc_functions {
    float: right;
}
div.doc_cont a {
    color: black;
}
div.doc_cont div.level1 a {
    font-weight: bold;
}
div.doc_cont div.level1 {
    margin-top: 8px ;
    margin-bottom: 4px;
}
div.doc_cont div.level2 {
    margin-left: 14px;
    margin-top: 2px;
    margin-bottom: 2px;
}
div.doc_cont div.level3,
div.doc_cont div.level4,
div.doc_cont div.level5,
div.doc_cont div.level6,
div.doc_cont div.level7,
div.doc_cont div.level8 {
    margin-left: 28px;
    margin-top: 2px;
    margin-bottom: 2px;
}

div.doc_cont {
    max-width: 955px;
    margin: auto;
    padding: 10px;
    margin-bottom: 10px;
}

div.doc_main {
    max-width: 955px;
    margin: auto;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 30px;
}
div.doc_main img {
    max-width: 100%;
}

div.doc_main h2 {
    margin-top: 20px;;
    margin-bottom: 10px;;
}

div.doc_main table {
    border-collapse: collapse;
}
div.doc_main table td {
    border: 1px solid grey;
    padding: 3px;
}
div.doc_main pre {
    background-color: #eeeeee;
    border: 1px solid #888888;
    border-radius: 8px;
    padding: 8px;
}
div.doc_main li {
    margin: 4px 0px;
}
.doc_main a {
    color: #0087cb;
    text-transform: uppercase;
}
a.doc_edit {
    padding-left: 20px;
}


div.results table {
    border-collapse: collapse;
}
div.results table td,
div.results table th {
    border: 1px solid grey;
    padding: 3px;
}
div.results table th {
    background-color: #eeeeee;
}


/* Life Cycle Controls */

/* Boxing the LC-Buttons*/
label.lc_label {
    display: block;
    font-weight: bold;
}


@media print {
    .perfact-layout--nav-horiz,
    .perfact-layout--nav-crumbs,
    .perfact-layout--header-cockpit {
        display: none;
    }
}


/* Adjustments in module SCA */


div.pbox h1 {
    font-size: 14px;
}
div.pbox {
    padding: 5px;
    background-color: #eee;
    margin: 10px;
}
div.pbox .content {
    padding: 5px;
}
div.catinnerbox {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.catcontainer {
    width: 11.5%;
    margin: 0.5%;
    float: left;
}

div.body_inner form[name="filter_form"] {
    white-space: nowrap;
}


/* Next generation layout directives */

/* Generic additional classes */

.limiter {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.perfact-inset {
    padding: 10px;
}
.perfact-page {
    margin: auto;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 30px;
}
.perfact-header {
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
}
.container-2col-large {
    min-width: 640px;
    width: 50%;
    float: left;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.float-clear {
    clear: both;
}

/* Global general*/


.perfact-layout--page {
    background-color: #eeeeee;
}
.perfact-layout--container {
    margin: auto;
}

.perfact-layout--header,
.perfact-layout--body {
    box-shadow: 0px 2px 5px #aaa;
    background-color: #fff;
}
.perfact-layout--page-end,
.perfact-layout--container-end,
.perfact-layout--header-end,
.perfact-layout--header-cockpit-end,
.perfact-layout--nav-horiz-end {
    clear: both;
}

.perfact-layout--header-logo  { 
    background-image:url('./graphics_d/static/web_logo_innovation');
    background-repeat: no-repeat;
}
.perfact-layout--header-logo  { 
    background-size: auto 80px;
    height: 80px;
    width: 180px;
    margin-left: 10px;
    float: left;
}

.perfact-layout--header-logo,
.perfact-layout--systembadge,
.perfact-layout--header-cockpit {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}


.perfact-layout--header-cockpit {
    float: right;
    min-height: 70px;
    padding: 5px;
    min-width: 250px;
}

.perfact-layout--systembadge {
    float: left;
    padding: 10px;
    border-bottom: 3px solid #63707f;
    border-top: 3px solid #63707f;
}



/* Cockpit entries */

.perfact-layout--header-cockpit a {
    color: #3b444d;
}
.perfact-layout--i18n-chooser {
    float: right;
    margin: 5px 0px;
    position: relative;
    right: 0px;
}
.perfact-layout--i18n-popup {
    position: absolute;
}
.perfact-layout--logon a {
    color: #63707f;
    text-overflow: ellipsis;
}
.perfact-layout--logon .user {
    float: left;
}
.perfact-layout--logon .logout {
    float: right;
}
.perfact-layout--header-cockpit a.logout {
    color: #ea5454;
    font-size: 0.9em;
}

.perfact-layout--notifier {
    clear: both;
    min-height: 12px;
    margin: 5px 0px;
}
.perfact-layout--notifier a {
    color: #3b444d;
}


/* Quick search */

.perfact-layout--quicksearch input {
    width: 85px;
}

.perfact-layout--quicksearch {
    padding: 0px;
    border: 1px solid #c5c5d0;
    background-color: #fff;
    float: left;
    width: 120px;
    white-space: nowrap;
}
.perfact-layout--quicksearch-input:focus {
    background-color: transparent;    
}
.perfact-layout--quicksearch-input {
    background-color: #fff;
    border: none;
}
.perfact-layout--quicksearch-button {
    background-color: #fff;
    border: none;
    margin: 0px;
    padding: 1px;
}
.perfact-layout--quicksearch-button i {
    color: #3b444d;
}
.perfact-layout--quicksearch-button:hover {
    box-shadow: none;
}

/* Menu button */

.perfact-layout--nav-menu {
    color: #3b444d;
    cursor: pointer;
    padding: 0.25vw;
    width: 0.8vw;
    float: left;
}
.perfact-layout--nav-menu span {
    margin-left: 3vw;
}
.perfact-layout--nav-menu i {
    color: #3b444d;
}

/* Crumbs */

.perfact-layout--nav-crumbs {
    margin: 0px 0px 5px 10px;
    padding: 0px;
}
.perfact-layout--nav-crumbs a {
    cursor: pointer;

    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888888;
}
.perfact-layout--nav-crumbs a.current {
    max-width: initial;
}
.perfact-layout--nav-crumbs b {
    padding: 4px 0px 4px 0px;
    font-weight: normal;
}
.perfact-layout--nav-crumbs a {
    color: #888888;
    padding: 4px 8px 4px 8px;
}
.perfact-layout--nav-crumbs a.current {
    color: #000000;
}

.perfact-layout--nav-crumbs .perfact-layout--history-prevhour,
.perfact-layout--nav-crumbs .perfact-layout--history-prevrecord,
.perfact-layout--nav-crumbs .perfact-layout--history-nexthour,
.perfact-layout--nav-crumbs .perfact-layout--history-nextrecord {
    font-size: 12px;
    color: #888;
    padding: 4px 0px;
}
.perfact-layout--history-current {
    position: relative;
    top: -6px;
}
span.history_mode {
    display: block;
    float: left;
}

/* Alternate navigation */

.perfact-layout--nav-vert {
    width: 10%;
    padding: 0px;
    clear: both;
    float: left;
    margin-right: 1%;
}

.perfact-layout--nav-vert {
    margin: 0%;
    padding: 0%;
}

.perfact-layout--nav-vert-spacer {
    margin-top: 5px;
}

.perfact-layout--nav-vert a {
    color: #3b444d;
}


.perfact-layout--nav-vert a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    padding: 2% 6%;
    text-overflow: ellipsis;
    background-color: #d4d8da;
}

.perfact-layout--nav-vert a.level1.opened,
.perfact-layout--nav-vert a.level2.opened,
.perfact-layout--nav-vert a.level2.last,
.perfact-layout--nav-vert a.level3.last {
    margin-bottom: 0;
}
.perfact-layout--nav-vert a.level1 { padding-left: 4%; margin-bottom: 3%; }
.perfact-layout--nav-vert a.level2 { padding-left: 8%; }
.perfact-layout--nav-vert a.level3 { padding-left: 12%; }
.perfact-layout--nav-vert a.level4 { padding-left: 14%; }
.perfact-layout--nav-vert a.level5 { padding-left: 16%; }
.perfact-layout--nav-vert a.level6 { padding-left: 18%; }
.perfact-layout--nav-vert a.level7 { padding-left: 18%; }
.perfact-layout--nav-vert a.level8 { padding-left: 18%; }



.perfact-layout--nav-vert a.level2.last {
    margin-bottom: 2%;
}

.perfact-layout--nav-vert a.level1.opened,
.perfact-layout--nav-vert a.level2,
.perfact-layout--nav-vert a.level3,
.perfact-layout--nav-vert a.level4,
.perfact-layout--nav-vert a.level5,
.perfact-layout--nav-vert a.level6,
.perfact-layout--nav-vert a.level7,
.perfact-layout--nav-vert a.level8 {
    background-color: #b9bcc6;
}

.perfact-layout--nav-vert a.level1.opened,
.perfact-layout--nav-vert a.level2,
.perfact-layout--nav-vert a.level3,
.perfact-layout--nav-vert a.level4,
.perfact-layout--nav-vert a.level5,
.perfact-layout--nav-vert a.level6,
.perfact-layout--nav-vert a.level7,
.perfact-layout--nav-vert a.level8 {
    color: #3b444d;   
}



.perfact-layout--nav-vert a.first-prepend,
.perfact-layout--nav-vert a.last-append {
    display: none;
}
.perfact-layout--nav-vert div.last-append.nav-line,
.perfact-layout--nav-vert div.first-prepend.nav-line {
    border-bottom: 0.1vw solid #3b444d;
    padding: 0% 10%;
}

.perfact-layout--nav-vert div.level2.first-prepend,
.perfact-layout--nav-vert div.level3.first-prepend {
    display: block;
    padding: 0% 8%;
}
.perfact-layout--nav-vert div.level3.last-append {
    display: block;
    padding: 0% 8%;
}

.perfact-layout--nav-vert-bullet {
    display: none; /* enable in local stylesheets */
    margin-left: -4px;
    width: 14px;
    color: #eee;
}

.perfact-layout--nav-vert a.current{
       background-color: #a3a7b3;
}
.perfact-layout--nav-vert a.current {
    font-weight: bold;
}

.perfact-layout--nav-vert a.level3:hover,
.perfact-layout--nav-vert a.opened:hover,
.perfact-layout--nav-vert a:hover {
    background-color: #63707f;
    cursor: pointer;
    color: #fff;
}


/* Horizontal Navigation */

.perfact-layout--nav-horiz {
    padding: 0%;
    margin-bottom: 10px;
}
.perfact-layout--nav-horiz a {
    display: block;
    float: left;
    
    font-weight: normal;
    color: #5a5a5a;
    background-color: #fff;
    
    padding: 0.5%;
    margin: 0.125%;
    width: 15.41%;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.perfact-layout--nav-horiz a.current {
    font-weight: bold;
    color: #000044;
}
.perfact-layout--nav-horiz a:hover {
    background-color: #f2f2f4;
    cursor: pointer;
}
.perfact-layout--input input {
    padding: 0.5vw;
    background: #fff;
    border: 0.1vw solid #3b444d;
}


/* Styling of Support pages */

.perfact-layout--nav-horiz a.Support,
.perfact-layout--nav-vert  a.Support {
    font-style: italic;
    color: gray;
}

/* Navigation popup menus */

div.perfact-layout--nav-crumbs {
    display: block;
}
b.perfact-layout--nav-next,
b.perfact-layout--nav-alt,
div.crumbs-item {
    display: block;
    float: left;
}
div.crumbs-item a {
    display: block;
}
div.crumbs-item > div.menu-container {
    position: absolute;
    min-width: 150px;
    box-shadow: 0px 2px 5px #aaa;
    z-index: 100;
}
div.menu-item {
    max-width: 180px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
div.menu-item a {
    display: block;
    padding: 6px 20px 6px 5px;
    color: #333;
    font-size: 14px;
}
div.menu-item.in_path > a,
div.menu-item.current > a {
    font-weight: bold;
}

div.menu-item {
    background-color: #d4d8da;
}
div.crumbs-item > .menu-container > .menu-item:not(:last-child) {
    border-bottom: 1px solid #eee;
}
div.menu-item a:first-child {   
}
div.menu-item.active > a,
div.menu-item a:hover,
div#nav_vert div.menu-item.active > a,
div#nav_vert div.menu-item a:hover {
    background-color: #63707f;
    cursor: pointer;
    color: #fff;
}
div.menu-item.nomatch > a {
    color: #888;
}
.menu-container .menu-container a {
    padding-left: 10px;
}
.menu-container 
.menu-container .menu-container a {
    padding-left: 20px;
}
.menu-container .menu-container 
.menu-container .menu-container a {
    padding-left: 30px;
}
.menu-container
.menu-container .menu-container 
.menu-container .menu-container a {
    padding-left: 40px;
}
div.crumbs-item input#nav_search {
    width: 0px;
    padding: 0px;
    border: 0px none transparent;
    transition: width 0.2s;
}
div.crumbs-item input#nav_search.active {
    width: 60px;
    padding: 2px;
    margin-top: 2px;
    font-size: 14px;
    height: 16px;
    border: 1px solid #bbb;
    background-color: transparent;
}
div.crumbs-item .nav-search-spin,
div.crumbs-item .nav-search-icon {
    margin-top: 5px;
}
div.crumbs-item .nav-search-icon {
    cursor: pointer;
}

div.perfact-layout--nav-placeholder {
    text-align: center;
}

/* Visual hint at further navigation entries */
div.menu-item.haschildren > a::before {
    content: '›';
    float: right;
    color: #fff;
    font-weight: normal;
    font-size: 20px;
    margin: -5px -15px -20px 0px;
}
div.menu-item.haschildren.open > a::before {
    transform: rotate(90deg);
    transition: transform 0.2s;
    margin: -4px -17px -20px 0px;
}

/* Special variations for vertical mode */
div#nav_vert div.menu-item a {
    font-size: 16px;
    background-color: transparent;
}
div#nav_vert div.menu-item {
    max-width: initial;
    width: 100%;
    background-color: #d4d8da;
}
div#nav_vert > .menu-container > .menu-item:not(:last-child) {
    margin-bottom: 4px;
}
div#nav_vert div.menu-item.in_path * {
    background-color: #b9bcc6;
}
div#nav_vert
.menu-container .menu-container a {
    padding-left: 15px;
}
div#nav_vert
.menu-container 
.menu-container .menu-container a {
    padding-left: 30px;
}
div#nav_vert
.menu-container .menu-container 
.menu-container .menu-container a {
    padding-left: 45px;
}
div#nav_vert
.menu-container 
.menu-container .menu-container 
.menu-container .menu-container a {
    padding-left: 60px;
}
div#nav_vert
.menu-container .menu-container
.menu-container .menu-container 
.menu-container .menu-container a {
    padding-left: 75px;
}
div#nav_vert div.menu-item.haschildren > a::before {
    font-size: 24px;
    margin: -7px -12px -24px 0px;
}
div#nav_vert div.menu-item.haschildren.open > a::before {
    margin: -5px -14px -24px 0px;
}

/* End of Special variations for vertical mode */




/* Body */

.perfact-layout--body {
    float: right;
    background-color: #fff;
    color: #3b444d;
}


/* Appsearch page */

.perfact-page.appsearch {
}
.perfact-page.appsearch .search_results {
    width: 100%;
}

.perfact-page.appsearch .search_results h2 {
    padding: 5px;
    margin-top: 10px;
    background-color: #dddddd;
    font-size: 120%;
    font-weight: bold;
}
.perfact-page.appsearch .search_results div.a {
    margin-top: 5px;
    font-size: 100%;
    color: #000088;
}
.perfact-page.appsearch .search_results div.b,
.perfact-page.appsearch .search_results div.c {
    margin: 5px 0px;
    font-size: 90%;
    color: #888888;
}
.perfact-page.appsearch .search_results div.sep {
    margin: 8px 0px;
    border-bottom: 1px solid #dddddd;
}


/* Assignment page */

.perfact-page--assign-table table {
    width: 100%;
    border-collapse: collapse;
}
.perfact-page--assign-table table td {
    padding: 8px 3px 4px 3px;
    white-space: nowrap;
}
.perfact-page--assign-table table td.desc {
    font-size: 90%;
    padding: 4px 3px 8px 3px; 
    white-space: normal; 
    border-bottom: 2px solid #888888;
}




/* edit forms new header */

.perfact-layout--record-label-container {
    display: block;
    float: left;
}
.perfact-layout--record-label-container .perfact-layout--record-label {
    float: left;
}
.perfact-layout--record-search,
.dbfield select + a {
    /* font-relative measures 14px font height */
    padding: 8px;
    margin-left: 4px;
    background-color: #3b444d;
}
.perfact-layout--record-search .fa,
.dbfield select + a .fa {
    color:#fff;
}
.perfact-layout--record-buttons-container,
.perfact-layout--lcc-button-container {
    width: 100%;
    margin: 5px 0px;
    clear: both; 
    display: flex;
    float: left;
}
.perfact-layout--record-buttons-container {
    margin: 10px 0px;
}
.perfact-layout--lcc-button-container {
    margin-bottom: 0%;
}

div.tabedit td.lctbuttons td {
    border-bottom: none;
} 

.perfact-layout--record-buttons-container button,
.perfact-layout--record-buttons-container input,
.perfact-layout--lcc-button-container button {      
    text-transform: uppercase;
    border: none;
    margin-right: 10px;
    background-color: #b9bcc6;
    font-weight: bold;
    color: #3b444d;
    flex: 1 1 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perfact-layout--record-buttons-container button:last-of-type,
.perfact-layout--lcc-button-container button:last-of-type {
    float: right;
    margin-right: 0;
}

.perfact-layout--qualifizierung select {
    width: 15vw;
}
.perfact-layout--lcc-state-container {
    background-color: #d4d8db;
    width: 15%;
    padding: 5px;
    margin: 0%;
    display: inline-block;
    float: right;
}

.perfact-layout--lcc-state-container > div {
    margin-bottom: 5px;
    width: 100%;
}

.perfact-layout--lcc-button-container button[disabled=""],
.perfact-layout--lcc-button-container button[disabled="disabled"],
.perfact-layout--record-buttons-container button[disabled="disabled"],
.perfact-layout--record-buttons-container button[disabled=""],
.perfact-layout--lcc-button-container button.lc_to_disabled,
#save_button[disabled=""],
.perfact-page button[disabled=""],
#edit_form button[disabled=""] {
    background-color: #d4d8da;
    cursor: initial;
    box-shadow: none;
    color: #a3a7b3;
}




/*Subformular*/

div.body_inner .tabedit input[type="checkbox"] {
}

/*Input: select */

.perfact-layout--select {
    overflow: hidden;
    float: right;
}

.perfact-layout--tabedit-select {
    white-space: nowrap;    
}

/* Modinfo box */

.perfact-layout--modinfo {
    background-color: #d4d8da;
    padding: 5px;
    width: 45%;
    float: left;
}

.perfact-layout--modinfo label {
    float: left;
}
.perfact-layout--modinfo #el_createtime{
    margin-left:21%;
}
.perfact-layout--modinfo #el_modtime{
    margin-left:7%;
}
.perfact-layout--modinfo span {
    font-weight: bold;
    float: left;
}

.perfact-layout--modinfo > div {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.perfact-layout--modinfo-author-container {
    display: inline-block; 
    width:30%;
}

.perfact-layout--modinfo-time-container {
    display: inline-block;
    float: left;    
}
.perfact-layout--modinfo-author-container span{
    margin-left:8%
}
.perfact-layout--modinfo label {
    font-weight: bold;
}

/* --- Benutzerantrag --- */


.perfact-layout--body .pbox h3 {
    color: #3b444d;
}


.perfact-layout--formfill span {
    margin-top: 0.5vw;
    margin-left: 7vw;
    float: right;
}

.perfact-layout--formfill label,
.perfact-layout--formfill input,
.perfact-layout--formfill textarea, .perfact-layout--formfill span {
    clear: both;
    float: left;
}

.perfact-layout--form {
    display: flex;
}

.perfact-layout--formfill {
    padding: 1%;   
}
.edit_header {
    background-color: #63707f;
    margin: 0px;
    padding: 10px 10px 5px 10px;
    width: auto;
    float: none;
    clear: both;
}


/* Swiping out the menu */

.swipe-out {
    display: none;
}
.perfact-layout--body.full-width {
    transition: width 0.5s;
}
.mce-tinymce * {
    text-transform: none;
}


.perfact-form--elem.perfact-row {
    float: left;
}

/* Time tracker */

.perfact-timerec--plugin {
  border:2px solid #d8d8d8;
  padding:3%; 
  margin-bottom:5%
}
.perfact-timerec--plugin .ticket-button{
  margin: 5% 0%;
  width: 100%;
}
.perfact-timerec--plugin .time-title{
  text-align:center;
}
.perfact-timerec--plugin .running-time{
  border: 2px solid #d8d8d8;
  box-sizing: border-box;
  margin: 5% 0%;
  padding: 3%;
  text-align: center;
  width: 100%;
}
.perfact-timerec--plugin .button-container button{
  width:48%;
  margin-right:0;
}
.perfact-timerec--plugin .red{
  background-color:#eb5355;
}
.perfact-timerec--plugin .orange {
  background-color:#f6a000;
}
.perfact-timerec--plugin .green{
  background-color:#18a48c;
}
.perfact-timerec--plugin .blue{
  background-color:#0087cb;
}



/* Table flattener overrides */

@media screen and (max-width: 800px) {
    .perfact-layout--modinfo-author-container{
        clear:both;
        float:left;
        width:70%;
    }
    .perfact-layout--modinfo-time-container{
        width:70%;
    }
    .perfact-layout--modinfo #el_createtime,
    .perfact-layout--modinfo-author-container span{
        float:right;
    }



    .perfact-layout--nav-vert .nav-line,
    .perfact-layout--nav-vert li.level1.first-prepend,
    .perfact-layout--nav-vert li.level2.first-prepend,
    .perfact-layout--nav-vert li.level3.first-prepend,
    .perfact-layout--nav-vert li.level4.first-prepend,
    .perfact-layout--nav-vert li.level5.first-prepend,
    .perfact-layout--nav-vert li.level6.first-prepend,
    .perfact-layout--nav-vert li.level7.first-prepend,
    .perfact-layout--nav-vert li.level8.first-prepend,
    .perfact-layout--nav-vert li.level1.last-append,
    .perfact-layout--nav-vert li.level2.last-append,
    .perfact-layout--nav-vert li.level3.last-append,
    .perfact-layout--nav-vert li.level4.last-append,
    .perfact-layout--nav-vert li.level5.last-append,
    .perfact-layout--nav-vert li.level6.last-append,
    .perfact-layout--nav-vert li.level7.last-append,
    .perfact-layout--nav-vert li.level8.last-append {
        display: none;    
    }

    .perfact-layout--nav-vert li.level1.last,
    .perfact-layout--nav-vert li.level2.last,
    .perfact-layout--nav-vert li.level3.last,
    .perfact-layout--nav-vert li.level4.last,
    .perfact-layout--nav-vert li.level5.last,
    .perfact-layout--nav-vert li.level6.last,
    .perfact-layout--nav-vert li.level7.last,
    .perfact-layout--nav-vert li.level8.last,
    .perfact-layout--nav-vert li.level1.opened,
    .perfact-layout--nav-vert li.level1,
    .perfact-layout--nav-vert li.level2,
    .perfact-layout--nav-vert li.level3,
    .perfact-layout--nav-vert li.level4,
    .perfact-layout--nav-vert li.level5,
    .perfact-layout--nav-vert li.level6,
    .perfact-layout--nav-vert li.level7,
    .perfact-layout--nav-vert li.level8 {
        margin-bottom: 0.6vw;
    }

    .perfact-layout--nav-vert ul {
        margin: none;
        padding: 1;
        width: 98vw;
    }

    .perfact-layout--nav-vert li.level1,
    .perfact-layout--nav-vert li.level2,
    .perfact-layout--nav-vert li.level3,
    .perfact-layout--nav-vert li.level4,
    .perfact-layout--nav-vert li.level5,
    .perfact-layout--nav-vert li.level6,
    .perfact-layout--nav-vert li.level7,
    .perfact-layout--nav-vert li.level8 {
        padding-left: 0;
    }


    /**/
}


/* Overrides */

/* Full width body */
.perfact-layout--body-full-width {
    width: 100% !important;
}