/* Global settings */
* {
    box-sizing: border-box;
}

html {
    font-family: Liberation Sans, sans-serif ;
    font-size: 14px;
    color: #3b434c;
}
legend{
    font-weight:bold;
}

.hidden {
    display: none;
}

.veiled {
    opacity: 0.5;
}
.blue{
    color: #b51429;
}
.underlined{
    border-bottom:1px solid #a3a3a7;
    padding-bottom:1px;
    margin-bottom:1px;
}
.fix-width-200{
    width:200px;
}
/*Removes border around focused elements*/
*:focus{
    outline: none;
}
/*Remove yellow background in inpupt autocomplete in chrome browser*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset;
}

/* 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: #b51429;
}
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 #a3a8b4;
    padding: 4px;
}
input[type="checkbox"],
input[type="radio"] {
    border: 0px none transparent;
}

.perfact-layout--select select,
select {
    min-width: 100px;

    /* font proportional settings 14px font = 20px height */
    border: 1px solid #3b434c;
    padding: 4px;

    background-color: #fff;
    text-overflow: ellipsis;
}

select::-ms-expand {
    display: none; /* hide arrow on MS-IE browsers */
}

.perfact-layout--select select:not([multiple]),
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 30px;
    width: 350px;
    padding-right: 34px;
    background-image: url('./graphics_d/static/new_arrow.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.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:#b51429;
    color: white;
    cursor: pointer;
    padding: 5px;
}
button.destructive {
    background-color: #a22;
}

button[disabled=""], button:hover[disabled=""],
button[disabled="disabled"], button:hover[disabled="disabled"],
fieldset.perfact-form--fieldset[disabled=""] button,
fieldset.perfact-form--fieldset[disabled="disabled"] button,
input[type="submit"][disabled="disabled"],
input[type="submit"][disabled=""]
, button.lc_to_disabled
{
    background-color: white;
    color: #b51429;
    border: 1px solid #b51429;
    cursor: default;
    box-shadow: none;
}
.focus, input:focus, textarea:focus, select:focus {
    background-color: #bbbbff;
}
.clickable {
    cursor: pointer;
}
fieldset[disabled] .clickable {
    cursor: initial;
}
input[type="submit"].invisible {
    width: 0.2px;
    height: 0.2px;
    border-style: none;
    position: absolute;
    top: 20px;
    z-index: -1000;
}

fieldset[disabled=""] .open-popup {
    display: none;
}

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 --- */
div.error_message {
    white-space: pre-line;
}

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

input.interval{
    text-align: right;
    width:300px;
}

/* blue xrefgoto arrows */
a i.fa {
    color: #b51429;
}

a.disabled {
    text-decoration: none;
    cursor: default;
    color: lightgrey;
}


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

div.pbox {
    padding: 5px;
    background-color: #eee;
    margin: 10px;
}

div.pbox h1 {
    font-size: 14px;
}

div.pbox .content {
    padding: 5px;
}

/* 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 */

/* fieldset surrounding form (for disabling complete form) */
fieldset.perfact-form--fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
}

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: 0px;
    margin: 0px;
}
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;
}

/* Searching */

div.search {
    margin-bottom: 20px;
}
div.search td {
    white-space: nowrap;
}
div.search table {
    border-collapse: collapse;
    width: 97%;
}
div.search td,
div.search th {
    padding: 5px 8px;
}

div.search th,
div.tabedit table tr.aggregation-row th {
    background-color: #f0f0f0;
    font-weight: bold;
}

div.search th .fa-signal.sort-asc {
    transform: rotate(90deg);
}
div.search th .fa-signal.sort-desc {
    transform: rotate(90deg) scale(-1,1);
}

div.search tr.search_label input {
    padding: 2px;
    width: 180px;
}
div.search tr.search_label input[type="checkbox"] {
    padding: 0px;
    width: 14px;
    margin: 2px;
}
div.search tr.search_label input[hint="datetime"],
div.search tr.search_label input[hint="float"] {
    width: 120px;
}
div.search th {
    text-align: left;
}
div.search tr.search_label{
    position: relative;
    left: -1px;
    top: -5px;
}
div.search tr.footer {
    position: relative;
    left: -1px;
}
div.search tr.search_label th {
    font-weight: bold;
    padding: 6px 6px 6px 0px;
    background-color: transparent;
    vertical-align: middle;
    white-space: nowrap;
    position: sticky;
    position: -webkit-sticky; /* for Safari */
    top: 0px;
    background: white;
    z-index: 9;
}
@media screen and (min-width: 769px){
    div.search tr.search_label th:last-child::after {
        content: "";
        position: absolute;
        right: -8px;
        top: -16px;
        padding: 33.5px 7px;
        box-sizing: border-box;
        background: white;
    }
}
div.search #search-mobilefilter--select {
    max-width: 100%;
}

div.search table tr.spacer {
    height: 7px;
}

div.search table tr:not(:first-child):not(.spacer):not(.footer) {
    margin: 2px;
    border: 1px solid #a3a8b4;
}

div.search td {
    vertical-align: inherit;
    border-bottom: none;
    max-width:200px;
}

div.search td:not(.insert) {
    border-left: 1px solid #a3a8b4;
}

div.search td.click_entry {
    min-width:30px;
    width: 30px;
}

div.search tr {
    padding: 4px;
    margin: 2px;
}
@media screen and (max-width: 768px){
    div.search tr {
        padding: 0;
    }
}


div.search tr.coll, div.tabedit 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: #d4d8da;
}

div.search td.insert {
    padding: 0px;
    margin: 0px;
}
div.search tr.footer td {
    position: sticky;
    bottom: -12px;
    background: white;
    padding-top: 5px;
    padding-bottom: 5px;
}
@media screen and (min-width: 769px){
    div.search tr.footer .pager {
        position: relative;
        right: -1px;
        bottom: -4px;
        background: white;
        padding: 10px 0 10px 0;
        box-sizing: border-box;
    }
}
div.search tr.search_label th.filtered span {
    font-weight: bold;
}

div.search a.search_plus {
    padding: 2px;
    margin: 2px;
    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
}

.fa.fa-check.perfact-search--bool-true {
    color: #18a48c;
    font-size: 120%;
}

.fa.fa-times.perfact-search--bool-false {
    color: #eb5355;
    font-size: 120%;
}
/* Pager */

div.pager {
    padding: 5px;
}

div.search div.pager a {
    font-weight: bold;
}

div.pager .fa{
  margin: 0px 5px;
}

div.search .footer .pager i.disabled {
    opacity: 0.5;
}

/* Search settings */
#perfact--search-settings th,
#perfact--search-settings td {
    padding: 4px;
}

#perfact--search-settings tr i.reorder-arrow {
    cursor: pointer;
    color: #b51429;
}
#perfact--search-settings td.perfact--search-settings--reorder {
    text-align: center;
}

#perfact--search-settings tr:nth-child(2) i.reorder-arrow.fa-arrow-up,
#perfact--search-settings tr:last-child i.reorder-arrow.fa-arrow-down
{
    cursor: initial;
    color: white;
}

#perfact--search-settings input[name="columns.search:records"] {
    width: 340px;
}
#perfact--search-settings input[name="columns.sortpos:records"] {
    width: 140px;
}

/* search pages - responsive */

@media screen and (max-width: 768px){
    .perfact-layout--body{
        -webkit-overflow-scrolling: touch;
    }
    .search{
        max-width: 100%;
    }
    .search table{
        table-layout: fixed;
    }

    .search table tr td:first-child a i {
        font-size: 150%;
        margin-left: 5px;
        margin-bottom: 5px;
    }
    .search table .search_label
    th:not(.click_entry):not(.search-mobilefilter).mobile-selected {
        display: block;
    }
    th:not(.click_entry):not(.search-mobilefilter).mobile-selected > span {
        display: none;
    }
    th:not(.click_entry):not(.search-mobilefilter):not(.mobile-selected) {
        display:none;
    }
    .search > table > tbody > tr {
        display:table;
        table-layout: fixed;
        width: 100%;
        margin-bottom: 25px;
    }
    div.search table tr:not(:first-child):not(.spacer):not(.footer){
        margin-bottom:25px;
    }
    .search table td>div{
        min-height: 25px;
        padding: 10px 5px;
        display:table-cell;
    }
    .search table td:not(:last-child)>div {
        border-bottom: thin solid lightGrey;
    }
    .search table,
    .search tbody,
    .search tr{
        padding: 0;
        margin: 0;
        position: relative;
    }
    div.search table tr.spacer:not(:nth-last-child(2)) {
        border-bottom: thin solid #a3a8b4;
        border-collapse: initial;
    }
    div.search table tr.spacer:nth-last-child(2){
        display:none;
    }
    .search table .perfact-search--mobileth{
        display: table-cell;
        background-color: #3b434c;
        color: white;
        width: 35%;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
    .search table tr:not(.search_label) .click_entry{
        display:none;
        text-align:right;
    }
    div.search tr.search_label th{
        padding: 0;
        text-align:right;
        width: 100%;
        display: block;
    }
    div.search tr.search_label th.click_entry {
        background-color: transparent;
        top: 0;
        right: 0;
    }
    .search table .click_entry a{
        display:inline-block;
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0;
        text-align: right;
        position: relative;
        top:4px;
    }
    .search table .click_entry a i.fa{
        font-size: 20px;
    }
    .search table td:not(.click_entry){
        display:table;
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
        clear: both;
        border-left: none;
        padding: 0;
        margin-left: 0;
    }
    div.search tr.cur{
        background: #ffffff;
    }
    div.search .footer{
        position: fixed;
        bottom: 0;
        background: #ffffff;
        left: 0;
        right: 0;
        margin-bottom: 0px;
        border-top: thin solid lightGrey;
        box-shadow: 0px 2px 5px #aaa;
    }
    div.search .footer .pager>a.db_search_prev{
        left:0;
    }
    div.search .footer .pager>a.db_search_next{
        right:0;
    }
    div.search .footer .pager>span {
        display:block;
        text-align: center;
    }
    div.search .footer .pager>span>a.ajax-more{
        position: absolute;
        right:10px;
        top:12px;
        text-decoration:underline;
        font-size: 12px;
    }
    div.search .footer .pager>span:nth-child(2){
        margin-bottom:10px
    }
    div.search .footer .pager>.fa{
        position: absolute;
        top:17px;
        font-size: 24px;
    }
    div.search .footer .pager>.fa.fa-arrow-left{
        left:10px;
    }
    div.search .footer .pager>.fa.fa-arrow-right{
        right: 10px;
    }
    div.search .footer .pager>.fa.fa-wrench{
        right: 15%;
        top: auto;
        bottom: 10px;
        font-size: 15px;
        position: initial;
    }
    div.search .perfact-layout--quicksearch-button{
        background-color: #b51429;
        padding: 10px;
        width: 35px;
        height: 35px;
    }
    div.search .perfact-layout--quicksearch-button i {
        color: #ffffff;
    }
    .search-mobilefilter>span{
        text-align:left;
        margin-left: 4px;
        padding-top: 6px;
    }
    div.search select,
    .search-mobilefilter>span {
        border-radius: 0;
        width: 100%;
    }
    div.search select {
        border: 1px solid #a3a8b4;
    }
    .search-mobilefilter>span:not(.hidden){
        display:block;
    }
    div.search tr.search_label br {
        display: none;
    }
    div.search tr.search_label input{
        height: 36px;
        padding:5px;
        width: calc(100% - 35px);
        float: left;
        margin-top:10px;
        border-radius: 0;
    }
    div.search tr.search_label th.mobile-selected a {
        /*background-color: #b51429;*/
        display: inline-block;
        text-align: center;
        padding: 10px;
        width: 35px;
        margin-top:10px;
    }
    div.search tr.cur .fa {
        color: #3b444d;
    }
    div.search tr.cur {
        color: #3b444d;
    }
    div.search tr.cur.even {
        background-color: #ffffff;
    }
    div.search tr.cur.odd {
        background-color: #eeeeee;
    }
    .scrollToTop{
        cursor: pointer;
        position: fixed;
        z-index: 999;
        opacity: 0.75;
    }
    .scrollToTop i{
        font-size: 35px;
    }
    .search table td>div.pager {
        display:flex;
        justify-content: center;
        flex-wrap:wrap;
        width: 55%;
        margin: 0 auto;
    }

}
@media screen and (min-width: 769px){
    .perfact-search--mobileth{
        display:none;
    }
    div.search tr.search_label .click_entry .search_plus{
        margin-top: 16px;
        margin-left: 6px;
    }
    div.search tr.search_label .click_entry span,
    .search-mobilefilter{
        display:none;
    }

    .scrollToTop {
        display: none;
    }
}


/* Forms */

div.editchooser {
    float: left;
    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: 10px;
}
div.editchooser .record_id {
    font-weight: bold;
    padding: 5px;
    font-size: 10px;
}

div.editform {
    clear: both;
    margin-top: 0px;
    background: #fff;
    overflow-x: auto;
    width:100%;
}

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 */
}
div.editform span.validate {
    visibility: hidden;
}
div.editform span.error {
    font-weight: bold;
    color: #ea5454;;
    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;
}

div.editform .required.fas.fa-exclamation-triangle {
    visibility: hidden;
    margin-left:5px;
}
div.editform .required.fas.fa-exclamation-triangle.missing {
    visibility: visible;
    color:#eb5355;
}

div.editform input.missing,
div.editform select.missing,
div.editform textarea.missing,
div.editform div.mce-panel.missing {
    border: 1px solid #eb5355;
}

div.editform i.missing{
    color:#eb5355;
    margin-left:5px;
}


/* Subforms */

div.subform{
    margin-top:10px;
    display:inline-block;
}

span.subform-loading-hint {
    font-style: italic;
}

div.subform table {
    border-collapse: collapse;
}
div.subform th {
    border: 1px solid #000000;
    padding: 1px 4px;
}
div.subform i.icon-pf-dustbin.delete-icon {
    font-size: 200%;
}
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;
    display: inline;
}

div.subform div.subhint{
  color:#63707f;
  padding:5px;
}

/* Tabular editing */

div.tabedit {
    width: auto;
    overflow-x: auto;
    padding-left: 1px;
}

div.tabedit label {
    margin-bottom:5px;
    display:inline-block;
}

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

div.tabedit td {
    padding: 1px 4px;
    border-bottom: 1px; /*solid #c5c5d0;*/
    white-space: nowrap;
}



div.tabedit button{
    width: 200px;
    white-space: nowrap;
    padding: 10px;
}

div.tabedit span.output {
    display: block;
    padding: 4px;
}

div.tabedit th {
    text-align: left;
    border: none;
}

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: 0px;
    margin: 0px;
}

div.tabedit td.changed {
    background-color: transparent;
}

/* hide colorful circles after a changed/new line */
div.tabedit th.changed,
div.tabedit td.changed
{
    display: none;
}

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

div.tabedit table tr.aggregation-row {
    margin: 2px;
    border: 1px solid #a3a8b4;
}

div.tabedit table tr.aggregation-row div {
    padding: 4px;
    display: block;
}

div.tabedit table tr.aggregation-row td{
    border-left: 1px solid #a3a8b4;
}
/* Tabedit delete specials */

div.tabedit tr.del {
    opacity: 0.1;
}

/* End of Tabedit delete specials */


/* Completions popup */

div.completions {
    display: block;
    z-index: 10;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    border: 1px solid #a3a8b4;
    padding: 4px;
}
div.completions div.current {
    font-weight: bold;
    color: #000000;
}
div.completions div {
    color: #444444;
}


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


/* Popup iframes */

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

div.popup_body {
    margin-bottom: 0px;
    margin-top: 0px;
}
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: #b51429;
}

#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;
    position: relative;
}
.dbfield label {
    font-weight: bold;
}
.dbfield .text *{
    text-transform:none;
}

.dbfield span.info {
    display: inline-block;
    min-height: 27px;
    min-width: 140px;
    padding: 4px;
    background-color: #fff;
}
.content{
    background-color: #fff;
}


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

div.dbfield select.arrayselect {
    width: 350px;
}

.dbfield.missing .tabedit > label {
    color:  #ea5454; /* red */
}
.dbfield.missing .tabedit > 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 {

}
#edit_status_locked {
    color: #ea5454;
}
#edit_status_create {
    color: #17a38c;
}
#edit_status_change {
    color: #f4a000;
}
#edit_status_loading {

}

div.editchooser table td.edit_status {
    padding: 4px;
}

/* 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 {
    display: inline-block;
    min-width: 100%;
}
.ptab .tabs .tab {
    float: left;
    margin: 0px;
    margin-right: 10px;
    background-color: #d4d8db;
    cursor: pointer;
    flex: 1 1 0;
    text-transform: uppercase;
    min-width: 200px;
}
.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: #b51429;
    text-transform: uppercase;
}
a.doc_edit {
    padding-left: 20px;
}
a.doc_api {
    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 */

/* LC-Buttons*/
label.lc_label {
    display: inline-block;
    color: #f4a000;
    font-size: 16px;
    margin-left: 5px;
    font-weight: bold;
}


@media print {
    .perfact-layout--nav,
    .perfact-layout--header {
        display: none;
    }
    .perfact-layout--body {
        float: initial;
        overflow-x: hidden;
        /* Overwrite dynamical adjustments by JavaScript */
        height: initial !important;
        max-height: initial !important;
    }
    .perfact-layout--body-inner {
        max-width: 100%;
        display: initial;
        box-shadow: initial;
        padding: 0px;
    }
}


/* Next generation layout directives */

/* Generic additional classes */

.limiter {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}
.perfact-inset {
    padding: 10px;
}
.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-left-margin {
    float: left;
    margin-left:25px;
}
.float-right {
    float: right;
}
.float-clear {
    clear: both;
    /* Make this tag work in flex layouts also */
    /* (for better compatibility with old layouts) */
    break-after: always;
}
.float-clear-left {
    clear: left;
}
.float-clear-right {
    clear: right;
}

/* Global general*/


.perfact-layout--page {
    background-color: #eeeeee;
}
.perfact-layout--container {
    height: 100%;
    width: 97%;
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.perfact-layout--header {
    box-shadow: 0px 2px 5px #aaa;
    background-color: #fff;
    margin-bottom: 18px;
    position: relative;
}

.perfact-layout--body {
    position: relative;
    width: 100%;
    background-color: #eeeeee;
    /*box-shadow: 0px 2px 5px #aaa;*/
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.perfact-layout--body-inner {
    width: calc(100% - 260px);
    height: 100%;
    float: right;
    box-shadow: 0px 2px 5px #aaa;
    display: inline-block;
    background-color:  #fff;
    min-height: 100%;
}
@media screen and (max-width: 768px){
    .perfact-layout--body-inner {
        width: 100%;
    }
}


.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/web_logo_innovation');
    background-repeat: no-repeat;
}
.perfact-layout--header-logo  {
    background-size: auto 80px;
    height: 80px;
    width: 180px;
    float: left;
}

.perfact-layout--header-logo {
    margin: 10px 10px 15px 10px;
}

.perfact-layout--header-powered-by {
    background-image: url('graphics/powered_by');
    background-repeat: no-repeat;
    width: 100px;
    height: 68px;
}

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

.perfact-layout--systembadge {
    float: left;
    padding-right: 10px;
}



/* Cockpit entries */

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


/* Quick search */

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

/*.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: #ffffff;
}
.perfact-layout--quicksearch-button:hover {
    box-shadow: none;
}

/* Crumbs */

.perfact-layout--nav-crumbs {
    margin: 0px 0px 0px 10px;
    padding: 0px;
}

.perfact-layout--nav-crumbs .crumbs-item,
.perfact-layout--nav-crumbs b.perfact-layout--nav-next {
    display: block;
    float: left;
}

.perfact-layout--nav-crumbs a {
    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;
    color: #000000;
}
.perfact-layout--nav-crumbs b.perfact-layout--nav-next {
    padding: 4px 0px 4px 0px;
    font-weight: normal;
}
.perfact-layout--nav-crumbs a,
.perfact-layout--nav-crumbs .crumbs-item > i
{
    padding: 4px 8px 4px 8px;
}

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

/* Styling of Support pages */

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

/* 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 {
    background-color: #fff;
    padding-left: 0px;
    margin-left: 0px;
    outline: none;
}

.perfact-layout--record-search .fa {
    color: #3b434c;
}

.perfact-layout--record-buttons-container {
    margin: 10px 0px;
    clear: right;
    float: right;
    width: auto;
}

.perfact-layout--record-buttons-container i{
    margin: 0px 10px;
}

.perfact-layout--lcc-button-container {
    display: inline-block;
    width: auto;
    margin-bottom: 20px;
}

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;
    margin-right: 10px;

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

.perfact-layout--record-buttons-container i {
    font-size: 25px;
}
.perfact-layout--record-buttons-container i:not(.clickable) {
    color: #8f95a4;
}


/*subform*/

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 {
    padding: 5px;
    float: left;
    display: inline-block;
}

div.perfact-layout--modinfo
div.perfact-layout--modinfo-time-container
label {
    width: 9em;
}
div.perfact-layout--modinfo
div.perfact-layout--modinfo-author-container
label {
    width: 3em;
}
.perfact-layout--modinfo label {
    float: left;
}
.perfact-layout--modinfo span {
    font-weight: bold;
    float: left;
}

.perfact-layout--modinfo > div {
    margin-bottom: 5px;
}

.perfact-layout--modinfo-author-container {
    display: inline-block;
    margin-left: 20px;
}

.perfact-layout--modinfo-time-container {
    display: inline-block;
    float: left;
}
.perfact-layout--modinfo-author-container span{

}
.perfact-layout--modinfo label {
    font-weight: bold;
}

/* --- Benutzerantrag --- */


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


.perfact-layout--formfill span {
    margin-top: 4px;
    margin-left: 140px;
    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 {
    margin: 0px;
    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;
}

.perfact-form--little br{
  display:none;
}
.perfact-form--little label::after{
  content: ":";
}
.perfact-form--little div.dbfield{
  margin:0;
}

.perfact-form--fields,
.perfact-form--buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: justify;
    align-content: stretch;
    align-items: flex-start;
}
.perfact-form--buttons {
    clear: both;
    margin-top: 10px;
}
.perfact-form--buttons .line-break,
.perfact-form--action,
.perfact-form--auto {
    display: flex;
    flex: 1 0 auto;
}
.perfact-form--auto .dbfield,
.perfact-form--auto input,
.perfact-form--auto select { }
.perfact-form--action button {
    width: calc(100% - 20px);
}
.perfact-form--action button {
    margin: 5px;
}
.perfact-form--buttons .line-break {
    width: 100%;
}

/* 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:#b51429;
}


/* Scanner controls */

html, body {
    height: 100%;
}
.perfact-layout.scan-controls {
    width: 100%;
    padding: 5px;
    background-color: #333;
    display: flex;
}
.perfact-layout.scan-controls button {
    flex: 1 1 0;
    padding: 5px;
    margin: 5px;
    background-color: #b51429;
    color: #fff;
}
.perfact-layout.scan-controls button:disabled:hover {
    box-shadow: none;
}
.perfact-layout.scan-controls button:disabled {
    color: #aaa;
    background-color: #ddd;
}

/* Busy overlay */

.perfact-layout.overlay,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: #fff;
    opacity: 0;
    z-index: 10000;
}
.perfact-layout.overlay-spinner {
    color: #000;
    font-size: 100px;
    margin: -50px;
    position: relative;
    left: 50%;
    top: 50%;
}
.perfact-layout.overlay.in,
#overlay.in {
    opacity: 0.5;
    transition: opacity 1s ease 2s;
}


/* Overrides */

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

img.layout_seen {
    position: absolute;
    top: -100px;
}

a.unclickable {
    cursor: not-allowed;
}

hr.edit_header-separator {
    clear: both;
    border: 1px solid #63707f;
}

div.form_buttons,
div.lc_controls,
div.save_button {
    margin-top: 10px;
    float: left;
    width: 100%;
}

div.form_buttons button,
div.lc_controls button,
div.save_button button {
    width: 180px;
}


/* Validation marker styling for standard input field
   in non-standard forms can be activated by putting
   a div with class validation around it. */

div.validation span.validate {
    border: medium none;
    margin: 0px;
    padding: 0px;
    clear: none;
    display: inline-block;
    float: none;
    max-height: 1px;
    min-width: 1px;
}

div.validation span.validate {
    visibility: hidden;
}
div.validation span.error {
    font-weight: bold;
    color: #ea5454;;
    visibility: visible;
}


/* Selection disabler class. Add "noselect" to disable the mouse... */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* TODO: merge the following settings into the correct places. I put them here so we don't have a 'global' local stylesheet in WebApp by default any more. */

/* removes device-own button styling */
input[type=submit] {
    -webkit-appearance: none;
}
a.scrollToTop{
    right: 10px;
    bottom: 130px;
}

div.perfact-layout--body-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.perfact-layout--content-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: auto;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

div.perfact-layout--body-content {
    padding: 10px;
}

div.perfact-layout.scan-controls {
    display: flex;
    margin-top: auto;
}

/* Overwrite stylesheet_tiny.css */
@media screen and (max-width: 400px){
    div.search table td:nth-child(1),
    div.search table td:nth-child(3){
        width: 100%;
    }
}
@media screen and (max-width: 768px){
    /* Fixed Search Table Footer */
    div.search tr.footer {
        position: fixed;
        bottom: 0;
        background: #ffffff;
        left: 0;
        right: 0;
        margin-bottom: 0px;
        border-top: thin solid lightGrey;
        box-shadow: 0px 2px 5px #aaa;
        z-index: 9;
    }
    .search table td > div.pager {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 55%;
        margin: 0 auto;
    }
    /* Fix for: Vertical Navigation is not displayed in iPhone because of overflow: hidden of parent container -  */
    body.nav-is-active div.perfact-layout--body{
        overflow: visible;
    }
    input[type=submit] {
        padding: 10px;
    }
    .flex1>div {
        width: 100% !important; /* aktuell als inline Style im HTML @ViktorDick: Bitte im HTML entfernen */
    }
    #sla_container {
        width: 100%;
    }
    button[type=button] {
        padding: 10px;
    }
    #add_abcontact {
        margin-bottom: 20px;
    }
    #add_abcontact span {
        display: inline-block;
    }
    /* PopUp  - aktuell wird das CSS via JS als inline-style */
    .popup_div {
        width: 80% !Important;
        height: 80% !Important;
        position: fixed !Important;
        margin: auto !Important;
    }
    /*div.search tr.search_label th.search-mobilefilter {
        display: none;
    }*/
    input#el_subject,
    select#el_tsprio_id,
    select#el_reported_tscategory_id,
    select#el_tssubjectmatter_id,
    select#el_abcontact_id,
    select#el_qualified_tscategory_id,
    select#el_tspool_id,
    select#el_owner_tsuser_id {
        width: 100%;
    }
    .perfact-form--elem>div {
        position: relative;
    }
    .perfact-form--elem .open-popup {
        position: absolute;
        right: 40px;
        width: auto;
        color: #b51429;
        font-size: 20px;
        bottom: 18px;
    }
    #filecat-container{
        width: 35%;
    }
    #filtered-files {
        width 60%;
    }
    /* Fix for: Mobile Menu not showing in iPhone */
    body.nav-is-active div.perfact-layout--body {
        overflow: visible;
    }
    /* Removes Dropdown „Filter“ in Maschinenakte Tickets */
    .tab-container .active_tickets .search-mobilefilter {
        display: none;
    }
    /* legend on left side */
    .legend-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        float: none;
    }
    .legend-container > div{
        margin-bottom: 10px;
    }
    /* CSS Hack for input field "Filter" */
    div.search #search-mobilefilter--select{
        min-width: 100%;
    }
    div#filecat-container {
        width: 48%;
    }
    div#filtered-files {
        width: 48%;
    }
    .perfact-layout--record-label-container .perfact-layout--record-label{
        float: none;
    }
    /* fixes for search table footer next and prev arrows */
    .footer .pager .db_search_prev,
    .footer .pager .db_search_next {
        position: absolute;
        top: 17px;
        font-size: 24px;
    }
    .footer .pager .db_search_prev i,
    .footer .pager .db_search_next i{
        font-size: 24px;
    }
    .footer .pager .db_search_prev,
    div.search .footer .pager>a.db_search_prev{
        left: 10px;
    }
    .footer .pager .db_search_next,
    div.search .footer .pager>a.db_search_next{
        right: 10px;
    }
    div.search .footer .pager>span {
        margin-bottom: 10px;
    }

    /* Workaround for fixed footer in search pages. It would be better to
     * provide a slot for such elements so they are not part of the content.*/
    div.perfact-layout--body-content {
        padding-bottom: 30px;
    }
    body.scan-controls-active div.search tr.footer {
        bottom: 50px;
    }
}
@media screen and (max-width: 420px){
    .ui-tabs .ui-tabs-nav li {
        width: 48%;
    }
}
@media screen and (min-width: 769px){
    div.search tr.search_label th:last-child::after {
        content: "";
        position: absolute;
        right: -2px;
        top: auto;
        bottom: 0;
        padding: 0;
        height: 50px;
        width: 8px;
    }
    div.search table {
        margin-left:1px;
    }
}

#comment_button, #patch_input {
  background: #b51429;
}