:root {
    --main-page-width: 1870px;
    --search-bgcol-notfound: #f00;
    --table-border-color: black;
}

.strikethrough-italic td {
    text-decoration: line-through !important;
    font-style: italic !important;
}

#attachvoucherdiv {
    width: 600px; /* eksempelbredde, kan være hvilken som helst værdi */
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

::selection {
    background: #ffb7b7; /* WebKit/Blink Browsers */
}

.catsel{
    font-weight:bold !important;
}
.category-row td a{
    color: #000;
    font-weight:normal;
}

.hidden-input {
    transition: filter 0.3s; /* Gør overgangen blødere */
    filter: blur(3px);
}

.hidden-input:focus {
    filter:none;
}

.hidden {
    display: none !important;
}

.clicklink{
}

.clicklink:hover{
    cursor: pointer !important;
}

.boldtext{
    font-weight: bold !important;
}

.billingblockactive{
    background-color: #bbb !important;
    color: #000 !important;
}

.billingblock{
    background-color: #ddd;
    color: #aaa;
}

.hideheadline{
    font-weight: bold !important;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
}

.drafttemp2 td a, .drafttemp2 td{
    font-style: italic !important;
    color:#444 !important;
}

.treven .blr {
    background-color: #d8d8d8;
}

.blr {
    background-color: #d1d1d1;
}

.hideheadline:hover{
    cursor: pointer !important;
}

[contenteditable] {
    outline: 0px solid transparent;
}

.modemleasenone td{
    background-color: #eee;
}

.modemleaseok td{
    background-color: #afa;
}

.modemleaseerror td{
    background-color: #faa;
}

.modempendingopen{
    background-color:#ee5555;    
}

.modemclosed{
    background-color:#ee5555;    
}

.horizon:hover  {background-color:#f8f8f8;}

.warncolor{
    color: red !important;
}

.btnfactory{
    color: #c00;
}

.btnreprov{
    color: #080;
}

.btnreboot{
    color: #800;
}

.positivenumber{
    color: green;
}

.terminal{
    background-color: #555;
    border: 2px solid #222;
    padding: 5px;
    color: #c7c7c7;
    font-family: monospace;
    font-size: 0.9em;
}

.piinspectobject{
    background-color: #fff;
    padding:4px;
    border:1px solid #000000;
}

.yswarning {
    height: auto;
    color: black;
    background: none !important;
    background-color: indianred !important;
}

.moveinfoheader {
    color: green;
    background: none !important;
    background-color: #fff !important;
}

.moveinfo {
    background: none !important;
    background-color: #9f9 !important;
}


.copy{
    content: url("/img/copy.png");
    height: 13px;
    margin-right: 4px;
    cursor: pointer;
}

.processinstancedisplay{
    background:#FFFFFF;
    border:1px solid #000000;
}

.inputbackground{
    background-color: white;
}

.discount{
    color: black;
    background-color:#ff0;
}

.taskbackground{
    background-color: #fff;
}

.taskbackground INPUT, .taskbackground TEXTAREA{
    width: 300px !important;
}

.taskbackground TR {
    background-color:transparent;
    background-image:none !important;
}

.accitem{
    color: black;
}

.changedfield{
    background-color: #bfb;
    color: black;
}

.micrograph{
    border:0px solid #c3c3c3;
    opacity:0.8;
}

.tableseperator{
    background-color: white;
}

.processpopup{
    -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    
}

.standardpopup{
    -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    
}

body{
    position:relative;
    font-size:100%;
    font-family:'Open Sans';
    margin-left: 0px;
    margin-right:0px;
    margin-top:0px;
}

#newnote{
    width: 1000px;
    padding: 10px;
    margin: 10px;
}

#popup2content{
    position:relative;
    top:0;left:0;width:100%;height:100%;
}
#closedediv2{
    padding-top:10px;
    padding-right:10px;
}
#popuphead2{
    z-index:1;
}

.scroll-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    overflow: hidden; /* Prevent background page scrolling */
}

.scroll-popup-content {
    height: auto;
    max-height: 70%;
    max-width: 70%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    flex: 1 1 auto; /* Allow content to shrink or grow within constraints */
    overflow: auto; /* Enable scrolling for content exceeding bounds */
    display: flex; /* Ensure the content respects the constraints */
    flex-direction: column; /* Stack content vertically */
}

.hovertable tr:hover td{
    background-color: #a8a8a8;
}

.hover_trs td{
    background-color: #a8a8a8;
}


.DragContainer {
    FLOAT: left; WIDTH: 100px; border: 1px solid red;
}
.OverDragContainer {
    FLOAT: left; WIDTH: 100px;
}
.OverDragContainer {
    BACKGROUND-COLOR: #aeaeae;
}
.DragBox {text-align: left;  border: 1px #000 solid; padding: 2px 2px 2px 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; WIDTH: calc(100% - 10px); CURSOR: pointer; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee}

.OverDragBox{   border: #000 1px solid; padding: 2px 2px 2px 2px;FONT-SIZE: 10px; MARGIN-BOTTOM: 5px;   WIDTH: calc(100% - 10px); CURSOR: pointer; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee}



.DragDragBox {  BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 224px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee}
.miniDragBox {  BORDER-RIGHT: #000 5px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 224px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee}
.OverDragBox {  text-align: left; BACKGROUND-COLOR: #bbbbbb}
.DragDragBox {  BACKGROUND-COLOR: #dddddd;}
.DragDragBox {
    filter: opacity(50%);
    background-color: #dddddd;
}

#maintable th A{
    color: #fff;
}

.maintable th A{
    color: #fff;
}

.tablesorter_neutral A{
    color: #eee;
}
.tablesorter_asc A{
    color: #fff;
}
.tablesorter_desc A{
    color: #fff;
}
.tablesorter_neutral{
    font-size: 13px;
    background-color: #777;
    padding: 4px;
    white-space: normal;
    cursor: pointer;
}

.tablesorter_neutral_left{
    font-size: 13px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    background: #f6f8f9 no-repeat center left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8/L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N+QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE+CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9/NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A/hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V/pHDBYY1hrFGNuayJsym740u2C+02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT//ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs+ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK/cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta+x/+5Em0mzJ/+dGj/t8AyNmf2zvs9JmHt6vvmCpYtEFrcu+bYsc/m9lSGrTq9xWbtvveWGbZtMNm/ZarJt+w6rnft3u+45uy9s/4ODOYd+Hmk/Jn58xUnrU+fOJJ/9dX7SRe1LR68kXv13fc5Nm1t379TfU75/4mHeY7En+59lvhB5efB1/lv5dxc+NH0y/fzq64Lv4T8Ffp360/rP8f9/AA0ADzT6lvFdAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAlUlEQVR42lSNuw5BURRE15z4Fq9ERUWlI/gjpV8iV6IRlURxK8nlU5xjNOc+dHtm9qzRHgPwdl9GmAMAgWx/eZr8BBAMvBwZKFK2PgEqJ8aCiSJ3qw4qJ0YyIGaKXHOrN1TdN7BQB9XciFaFh1uuOfuUAWGqyC2Lwom1GtRcHy4WhROb7gYslTg6spX5C2ClxK5jw28AD3M9hange3sAAAAASUVORK5CYII=');
    padding: 4px 20px 4px 4px;
    white-space: normal;
    cursor: pointer;
    padding-left: 16px !important;
}
thead .tablesorter_asc{
    background-color: #777 !important;
    padding: 4px !important;
    cursor: pointer;
}
thead .tablesorter_desc{
    background-color: #777 !important;
    padding: 4px !important;
    cursor: pointer;
}

.whitebg{
    background-color:white;
}

#mainmenusmall{
    display:none;
}
#submenusmall{
    display:none;
}

#topmenutoggle{
    display:none;
}
#submenutoggle{
    display:none;
}
#newsearchtools{
    display:none;
}

.clearboxpadding{
    padding:0 10%;
}

.mainpagemaxwidth{
    max-width:var(--main-page-width);
    margin:auto;
}

#footerlogo{
    float:right;
    text-align:right;
    padding: 20px 30px 0 0;
}

#footerlogo span{
    font-weight:bold;
    font-size:14px;
    padding-right:0;
}

#findbg{
    z-index: 1000;
}

#mainfind{
    position:absolute;
    top:75px;
    width:100%;
    max-width:var(--main-page-width);
    margin:auto;
    
    height:calc( 100% - 75px );
    display:none;
    padding:0;
    z-index: 30;
    background-color:#fff;
}
.findtab{
    padding:5px;
    padding-left:25px;
    height:70px;
    float:left;
    width:900px;
}
.findtab select, .findtab input{
    width:335px;
}

.inputdisabled{
    color:#bbb !important;
    border-color: #eee;
    background-color: #eee !important;
}
input[data-locked], select[data-locked], textarea[data-locked] {
    color: #555555;
}


.nodisplay{
    display:none;
}

.findtype{
    padding:25px;
    background-color:#fff;
    height:30px;
    float:left;
    width:35%;
    font-size:40px;
    font-weight:bold;
}
.scrollable{
    width:100%;
    height: calc( 100% - 120px );
    overflow:auto;
    margin:0;
    padding:0;
    background-color:#fff;
}
.header01{
    background-color:#fff;
    height:40px;
}

.scrollableplaceholder{
    display:none;
    margin:0;
    padding:0;
    background-color:#fff;
}

.accexpired{
    font-style: italic;
    text-shadow: 0px 0px 4px #f00, 0px 0px 4px #f00, 0px 0px 4px #f00,0px 0px 4px #f00, 0px 0px 4px #f00, 0px 0px 4px #f00, 0px 0px 4px #f00, 0px 0px 8px #f00, 0px 0px 8px #f00;
    color:#fff;
    font-weight:bold;
}

.wifiicon {
    float:right;
    position:relative;
    margin-right:2px;
}
.wifiicon .wifitext {
    font-size:10px;
    font-weight:bold;
    color:white;
    position:absolute;
    bottom:-1px;
    right:-1px;
    width:12px;
}

.filtericon1{
    height:10px;
    margin-right:2px;
}

.stdform label{
    display:inline-block;
}

.stdform span{
    display:inline-block;
    width:150px;
}

.smalltextnote{
    font-size:8px;
}

.stdform select, input{
    width:240px;
}

.fixedbuttons input[submit], button{
    width:110px;
}

.right{
    text-align:right;
}

.tdrb{
    background-color:red;
    color:white;
}

.ar{
    text-align:right;
}

.radio-group {
    border: 1px solid #999;
    display: inline-block;
    margin: 5px;
    border-radius: 3px;
    overflow: hidden;
    font: bold 11px/14px 'Open Sans';
    background: #eeeeee;
}

.radio-group input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
}

.radio-group label {
    color: #999;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 1px 20px;
}

.radio-group input[type=radio]:checked + label {
    color: white;
    background: #999;
    margin-right: -3px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.6);
}

.radio-group label + input[type=radio] + label {
    border-left: 1px solid #999;
}

#maintable .tre{
    background-color: #d8d8d8;
}

#maintable .sel{
    background-color: #e8e8e8;
}


.maintable .sel td{
    background-color: #e8e8e8;
}

.maintable .selfi td{
    background-color: #e8e8e8;
    
    font-style: italic;
    color:#555;
}


.ws{
    visibility:collapse;
}
.maintable th{
    background-color:#777;
    color: white;
    font: .8em 'Open Sans';
    font-weight:bold;
    text-align:left;
    padding: 3px 4px 3px 4px;
}

/* The status box sits in the same column as the .pa_kvset boxes (the process
   list and the customer tasks) and should read as one of them. They already
   share the #a0a0a0 border; these three rules line up the header colour, the
   header alignment and the body, which .maintable otherwise paints white. */
.maintable.statusbox th {
    background-color: #555;
}

.maintable.statusbox {
    /* .maintable carries a 5px top margin; the box heads a column here, so
       that would drop it below the boxes beside it. */
    margin-top: 0;
    background-color: transparent;
}

.maintable.statusbox td {
    background-color: #cdcccd;
}

@media (min-width: 931px) {
    /* Same width where .pa_kvset ul li switches to #d8d8d8. */
    .maintable.statusbox td {
        background-color: #d8d8d8;
    }
}

.maintable td{
    font: .8em 'Open Sans';
    padding: 1px 4px 1px 4px;
    cursor: default;
    line-height: 2;
}

#maintable th{
    background-color:#777;
    color: white;
    font: .8em 'Open Sans';
    font-weight:bold;
    text-align:left;
    padding: 3px 4px 3px 4px;
}

#maintable td{
    font: .8em 'Open Sans';
    padding: 3px 4px 3px 4px;
    cursor: default;
}

#maintableedit th{
    background-color:white;
    font: .8em 'Open Sans';
    font-weight:bold;
    text-align:left;
    padding: 3px 4px 3px 4px;
}

#maintableedit td{
    font: .8em 'Open Sans';
    padding: 3px 4px 3px 4px;
    cursor: default;
}


.hltr td{
    font: .8em 'Open Sans';
    font-weight:bold;
}

.b1{
    font-weight:bold;
}

.noselect{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.maintable a{
    cursor: pointer;
}

.maintable .treven, .stripedtr:nth-child(even of :not(.hidden)){
    background-color: #d8d8d8;
}

.maintable .trheadline td{
    font-weight:bold;
    background-color:white;
}

.maintable .trwhite td{
    background-color:white;
}
.maintable .trwhite td:nth-child(2){
    padding-left:20px;
}

.maintable .trgrey td{
    background-color:#aaa;
}



.maintable .fadeditalic td{
    font-style: italic;
    color:#555;
}

.maintable .trwhiteitalic td{
    font-style: italic;
    background-color:white;
}

.maintable .trwhiteitalic td:nth-child(2){
    padding-left:20px;
}

.maintable .trsum td{
    background-color:#ddd;
}

.dimmedtext{
    color:#777 !important;
}

.dimmedtext a{
    color:#777 !important;
}

.dimmedtd td{
    color:#666;
}

.dimmedtd td{
    color:#666;
}

.maintable{
    width:100%;
    margin-top:5px;
    border:2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    background-color:white;
    margin:5px 0 0 0;
}

.maintablewhite{
    width:100%;
    padding:0px 15px 0px 15px;
}

.maintablewhite td{
    font:13px 'courier';
}


#maintable a{
    cursor: pointer;
}

#maintable .treven{
    background-color: #d8d8d8;
}

#maintable .trwarn{
    background-color: #e9aab4;
}

#maintable .trheadline td{
    font-weight:bold;
    background-color:white;
}

#maintable .trwhite td{
    background-color:white;
}
#maintable .trwhite td:nth-child(2){
    padding-left:20px;
}

#maintable .trgrey td{
    background-color:#aaa;
}

#maintable .trwhiteitalic td{
    font-style: italic;
    background-color:white;
}
#maintable .trwhiteitalic td:nth-child(2){
    padding-left:20px;
}

#maintable .trsum td{
    background-color:#ddd;
}

#maintable tr{
    background-color: #cdcccd;
}

#maintable input,select{
    width: 100%;
}

.maintable input,select{
    width: 100%;
}

.maintable tr, .stripedtr{
    background-color: #e8e8e8;
}

#maintable2 th{
    background-color:white;
    font: .8em 'Open Sans';
    font-weight:bold;
    text-align:left;
    padding: 3px 4px 3px 4px;
}

#maintable2 td{
    font: .8em 'Open Sans';
    padding: 3px 4px 3px 4px;
}

#maintable2 .trgrey td{
    background-color:#aaa;
}

#maintable2 .trgrey tr{
    background-color:#aaa;
}

#maintable2 .treven{
    background-color: #d8d8d8;
}

#maintable2 tr{
    background-color: #d8d8d8;
}

.sortfield{
    display: inline-block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.tablesorter_neutral .sortfield::after{
    content: " \25b2\25bc";
    font-size: 0.65em;
    opacity: 0.55;
    vertical-align: middle;
}
.tablesorter_asc .sortfield::after{
    content: " \25b2";
    font-size: 0.65em;
    opacity: 0.9;
    vertical-align: middle;
}
.tablesorter_desc .sortfield::after{
    content: " \25bc";
    font-size: 0.65em;
    opacity: 0.9;
    vertical-align: middle;
}

#maintable2{
    width:100%;
    margin-top:5px;
    border:2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    background-color:white;
    margin:5px 0 0 0;
}

#contentfooterright{
    float:right;
    margin: 5px 0px 0 0;
    padding:0;
}

#contentfooterleft{
    float:left;
    margin: 5px 0px 0 0;
    padding:0;
}

#contentheaderright{
    float:right;
    margin: 0 0 0 0;
}

#contentheaderleft{
    float:left;
    margin: 0px 0px 0 0;
}

.buttonleft{
    float:left;
    margin: 0 1px;
}

#maintable{
    width:100%;
    border:2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    margin:0 0 0 0;
}

#pcontent{
    background-color:#eee;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*margin:22px 0 0 22px;*/
    font: .8em 'Open Sans';
    padding:15;
}

.pgraphboxouterborder3{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
    width:33.3%;
    float:left;
}

.pgraphboxouter{
    background-color: #fff;
}

@media (max-width: 5930px) {
    
    
    .pgraphboxouterborderfull2{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:10px;
        float:left;
    }
    
    .pgraphboxouterborder2{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:50%;
        padding:10px 10px;
        float:left;
    }
    
    .keepspacingclean{
        padding:10px 10px;
    }
    
    .pgraphboxouter2{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        width:100%;
        height:390px;
        margin:0px;
        position: relative;
        padding:10px 20px 10px 10px;
        border:1px solid #aaa;
    }
    
    .pgraphboxouternoheight2{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        width:100%;
        margin:0px;
        position: relative;
        padding:10px 20px 10px 10px;
        border:1px solid #aaa;
    }
    
    .pgraphboxouternoheightnocolor2{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        width:100%;
        margin:0px 0px 10px 0px;
        position: relative;
        padding:10px 20px 10px 10px;
    }
    
    .pgraphbox2{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        height:300px;
        
        width:95%;
        margin:0 10px 10px 20px;
        position: absolute;bottom: 0;left:0;
        
        padding:0px;
        font-family:verdana;
        font-size:11px;
        border:0px;
    }
}


@media (max-height: 500px) {
    
    .processpopup{
        position : fixed;
        width : 700px;
        overflow:auto;
        top:0;
        left : 50%;
        height:100%;
        transform : translate(-50%, 0%);
        border:1px solid #ddd;
        background-color: white;
    }
    .standardpopup{
        position : fixed;
        width : 500px;
        overflow:auto;
        padding:10px;
        top:0;
        left : 50%;
        height:100%;
        transform : translate(-50%, 0%);
        background-color: white;
    }
}
@media (min-height: 501px) {
    .processpopup{
        position : fixed;
        width : 700px;
        max-height:100%;
        overflow:auto;
        
        top : 50%;
        left : 50%;
        transform : translate(-50%, -50%);
        border:1px solid #ddd;
        background-color: white;
    }
    
    
    .standardpopup{
        position : fixed;
        width : 500px;
        max-height: 100%;
        overflow: auto;
        padding: 10px;
        top : 50%;
        left : 50%;
        transform : translate(-50%, -50%);
        background-color: white;
    }
    
}

@media (max-width: 770px) {
    .pgraphboxouterborder3{
        width:100%;
    }
    
    
    #processstartinfo{
        width:100%;
        height: 600px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        display:inline-block;
        z-index:1;
    }
    
    .pa_docwindowfullheight{
        height:100vh;
    }
    .pa_docwindow{
        top:0;
        left:0;
        position:fixed;
        padding:0 5px 0 0;
        margin:0;
        width:100%;
        z-index:100;
        
        font-family:'Open Sans';
        font-weight:normal;
        font-size:.9em;
        -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    }
    
    .nomobile{
        display:none;
    }
    
    .pa_30_70_70{
        padding:10px;
    }
    
    .pa_30_70_30{
        padding:10px;
    }
    
    input[type=button].modernButton {
        font-size: 24px;
        font-weight:normal;
        width: 200px;
        height: 50px;
        border-radius: 20px;
        background-color: green;
        color:white;
        padding:20px;
    }
    
    label.modernInput {
        z-index:1;
        position:relative;
        top:20px;
        left:20px;
        background-color:white;
        display: inline-block;
        font-size:24px;
        color:#C8C8C8;
    }
    
    input.modernInput {
        border:0;
        outline: lightgray solid 1px;
        padding-left: 10px;
        
        height:70px;
        border-radius:10px;
        color: grey;
        font-size:24px;
    }
    
    textarea.modernInput {
        padding:20px 0px;
        padding-left: 10px;
        border:0;
        width:300px;
        outline: lightgray solid 1px;
        border-radius:10px;
        color: grey;
        font-size:24px;
    }
    
    select.modernInput {
        height: 70px;
        border:0;
        width:300px;
        outline: lightgray solid 1px;
        padding-left: 10px;
        
        border-radius:10px;
        color: grey;
        font-size:24px;
        padding-left: 5px;
        background-color:field;
    }
    
    .pa_20_80_80{
        float:right;
        padding:10px;
    }
    .pa_20_80_20{
        float:right;
        padding:10px;
    }
    
}
@media (min-width: 771px) {
    
    .pgraphboxouterborder3{
        width:50%;
    }
    
    .widedstable td:nth-child(even),.widedstable th:nth-child(even) {
    }
    select{
        font: normal 11px/11px 'Open Sans';
        border: 1px solid #dedede;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    
    .modernInputWrapper {
        position: relative;
        margin: 10px;
    }
    
    input[type=button].modernButton {
        font-size: 18px;
        font-weight:normal;
        width: 160px;
        height: 40px;
        text-align: center;
        border-radius: 8px;
        border-color: #c3c3c3;
        background: linear-gradient(90deg, #efefef, #e0e0e0);
        color:#333;
        margin:10px;
    }
    
    input[type=button].modernButtonReady:hover {
        cursor:pointer;
    }
    
    input.modernInput[type="search"] {
        border:0;
        outline: lightgray solid 1px;
        height:40px;
        padding-left: 10px;
        
        border-radius:10px;
        color: grey;
        font-size:14px;
    }
    
    input.modernInput[type="number"] {
        text-align: center;
        height: 40px;
        border:0;
        width:150px;
        outline: lightgray solid 1px;
        border-radius:10px;
        color: grey;
        padding-left: 10px;
        font-size:18px;
        margin-bottom: 10px;
    }
    
    label.modernInput {
        z-index:1;
        position:absolute;
        background-color:white;
        display: inline-block;
        font-size:16px;
        color:#C8C8C8;
        top: -0.8em;
        left: 0.7em;
        padding: 0 5px;
    }
    
    input.modernInput {
        border:0;
        outline: lightgray solid 1px;
        height:40px;
        padding-left: 10px;
        margin-bottom: 10px;
        border-radius:10px;
        color: grey;
        font-size:14px;
        width: 250px;
    }
    
    textarea.modernInput {
        border:0;
        width:400px;
        outline: lightgray solid 1px;
        border-radius:10px;
        padding: 10px;
        
        color: grey;
        font-size:14px;
    }
    
    select.modernInput {
        height: 40px;
        border:0;
        width:250px;
        outline: lightgray solid 1px;
        border-radius:10px;
        color: grey;
        padding-left: 10px;
        margin-bottom: 10px;
        font-size:18px;
    }
}

@media (max-width: 930px) {
    .pa_kvsetduo ul li{
        width:100%;
    }
    .pa_kvsetduo ul li:nth-child(even) {
        background-color: #d8d8d8;
    }
    
    .pa_kvset ul li{
        width:100%;
    }
}
@media (min-width: 931px) {
    .pa_kvsetduo ul li{
        width:50%;
    }
    
    .pa_kvsetduo ul li:nth-child(4n+3), .pa_kvsetduo ul li:nth-child(4n) {
        background-color: #d8d8d8;
    }
    
    .pa_kvset ul li{
        width:100%;
    }
    
    
    .pa_kvset input, .pa_kvset select{
        width:100%;
    }
    
    .pa_kvset ul li:nth-child(2n+1), .pa_kvset ul li:nth-child(2n) {
        background-color: #d8d8d8;
    }
    
}


@media screen and (max-width: 1000px) {
    
    .pgraphboxouterborder2{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:10px;
        float:left;
    }
    .pgraphboxouter2{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        width:100%;
        position: relative;
        height:390px;
        margin:0;
        padding:10px 20px 10px 10px;
        border:1px solid #aaa;
    }
    
    .pgraphbox2{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        width:95%;
        margin:0 10px 10px 20px;
        position: absolute;bottom: 0;left:0;
        height:300px;
        padding:0;
        font-family:verdana;
        font-size:11px;
        border:0;
    }
}

@media (max-width: 1330px) {
    
    .clearboxpadding{
        padding:0 5%;
    }
    
    .pgraphboxouterborder{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:10px;
        float:left;
    }
    .pgraphboxouter{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        width:100%;
        height:390px;
        margin:0;
        padding:10px 20px 10px 10px;
        border:1px solid #aaa;
    }
    
    .pgraphbox{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font: .8em 'Open Sans';
        width:95%;
        margin:0 10px 10px 20px;
        position: absolute;bottom: 0;left:0;
        height:300px;
        padding:0px;
        font-family:verdana;
        font-size:11px;
        border:0px;
    }
    .pa_docwindowfullheight{
        height:80vh;
    }
    
    
    .pa_docwindow{
        border:0px solid red;
        background-color:#fff;
        color:black;
        top:5vh;
        left:5%;
        position:fixed;
        padding:0px;
        margin:0px;
        width:90%;
        z-index:100;
        
        font-family:'Open Sans';
        font-weight:normal;
        font-size:.9em;
        -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    }
    
    .pa_confwindow{
        width:490px;
    }
    
    .pa_30_70_70{
        padding:10px;
    }
    .pa_30_70_30{
        padding:10px;
    }
    
    .pa_20_80_80{
        width:calc(80% - 20px);
        float:right;
        padding:10px;
    }
    .pa_20_80_20{
        width:calc(20% - 20px);
        float:left;
        padding:10px;
    }
}
@media (min-width: 1331px) {
    .pa_docwindowfullheight{
        height:80vh;
    }
    .pa_docwindow{
        border:0px solid red;
        background-color:#fff;
        color:black;
        top:5%;
        right:40px;
        position:fixed;
        padding:10px;
        margin:0;
        width:1200px;
        /*#		height:80vh;*/
        z-index:1;
        
        font-family:'Open Sans';
        font-weight:normal;
        font-size:.9em;
        -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
        box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    }
    .pa_confwindow{
        width:490px;
    }
    .pa_30_70_70{
        width:calc(70% - 20px);
        float:right;
        padding:10px;
    }
    .pa_30_70_30{
        width:calc(30% - 20px);
        float:left;
        padding:10px;
    }
    
    .pa_20_80_80{
        width:calc(80% - 20px);
        float:right;
        padding:10px;
    }
    .pa_20_80_20{
        width:calc(20% - 20px);
        float:left;
        padding:10px;
    }
}

@media (max-width: 1469px){
    .editcustomer_table{
        width: 1000px;
    }
    .editcustomer_right_td{
        display: none;
    }
    .editcustomer_td2_process_div, .editcustomer_td2_toolbox_div{
        display: block;
    }
}

@media (min-width: 1470px){
    .pgraphboxouterborder3{
        width:33.3%;
    }
    
    .editcustomer_table{
        width: 1470px;
    }
    .editcustomer_right_td{
        display: table-cell;
    }
    .editcustomer_td2_process_div, .editcustomer_td2_toolbox_div{
        display: none;
    }
}

@media (max-width: 1930px) {
    
    .clearboxpadding{
        padding:0 10%;
    }
    
    .pgraphboxouterborderfull{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:10px;
        float:left;
    }
    
    .pgraphboxouterborder{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:50%;
        padding:10px;
        float:left;
    }
    .pgraphboxouter{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        width:100%;
        height:390px;
        margin:0px;
        position: relative;
        padding:10px 20px 10px 10px;
        border:1px solid #aaa;
    }
    
    .pgraphbox{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font: .8em 'Open Sans';
        height:300px;
        
        width:95%;
        margin:0 10px 10px 20px;
        position: absolute;bottom: 0;left:0;
        
        padding:0px;
        font-family:verdana;
        font-size:11px;
        border:0px;
    }
}
@media (min-width: 1931px) {
    .pgraphboxouterborderfull{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:10px;
        float:left;
    }
    
    .pgraphboxouterborder{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding:10px;
        width:33.3%;
        float:left;
    }
    
    .pgraphboxouter{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        font: 0.8em 'Open Sans';
        width:100%;
        height:390px;
        padding:10px 20px 10px 10px;
        font-family:verdana;
        font-size:11px;
        border:1px solid #ccc;
    }
    
    .pgraphbox{
        background-color:#fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /*margin:22px 0 0 22px;*/
        font: .8em 'Open Sans';
        
        width:95%;
        margin:0 10px 10px 20px;
        position: absolute;bottom: 0;left:0;
        
        height:300px;
        padding:0;
        font-family:verdana;
        font-size:11px;
        border:0px;
    }
}


#innerpcontent{
    background-color:#ccc;
    border:1px solid #aaa;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*margin:22px 0 0 22px;*/
    font: .8em 'Open Sans';
    padding:15px;
}

#pcontentspacer{
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:22;
}

#toptoolboxseperator{
    float:left;
    width:4px;
    background-color:black;
    height:60px;
}

#toptoolboxleft{
    padding:15px 0 0px 22px;
    float:left;
    width:425px;
    font: .8em 'Open Sans';
}

#toptoolboxright{
    padding:15px 0 0px 22px;
    float:left;
    margin-left:10px;
    font: .8em 'Open Sans';
}

#toptoolboxrightlarge{
    padding:0 0 0 22px;
    float:left;
    margin-left:10px;
    font: .8em 'Open Sans';
}

#toptoolboxrightsmall{
    width:250px;
    float:left;
    margin-left:10px;
    font: .8em 'Open Sans';
}

#ph1{
    padding:0 0 0 22px;
    display: inline-block;
    font-size:16px;
    margin:0;
    font-weight:bold;
}

#ph2{
    padding:0 0 0 5px;
    margin:0;
    display: inline-block;
    font-size:22px;
    font-weight:bold;
}

#searchtypetext{
    padding:0 0 0 5px;
    margin:0;
    display: inline-block;
    font-size:22px;
    font-weight:bold;
}

#blackheader{
    margin:0 0 2px 22px;
    height:9px;
    width: -moz-calc(100% - 44px);
    width: -webkit-calc(100% - 44px);
    width: calc(100% - 44px);
    background-color:black;
}
#redheader{
    margin:5px 0 0px 22px;
    height:4px;
    width:395px;
    background-color:#e14557;
}

.redbg{
    /*	background-color:pcontentspacer;*/
    text-shadow: 0 0 4px #f00, 0 0 4px #f00, 0 0 4px #f00,0 0 4px #f00, 0 0 4px #f00, 0 0 4px #f00, 0 0 4px #f00, 0 0 8px #f00, 0 0 8px #f00;
    color:#fff;
    font-weight:bold;
}

.grnbg{
    /*	background-color:pcontentspacer;*/
    text-shadow: 0 0 4px #090, 0 0 4px #090, 0 0 4px #090,0 0 4px #090, 0 0 4px #090, 0 0 4px #090, 0 0 4px #090, 0 0 8px #090, 0 0 8px #090;
    color:#fff;
    font-weight:bold;
}

.yelbg {
    text-shadow: 0 0 5px #990, 0 0 6px #aa0, 0 0 7px #cc2, 0 0 8px #dd0, 0 0 9px #ee0, 0 0 10px #ff0;
    color: #fff; /* Changed to black for better contrast */
    font-weight: bold;
}

.orbg{
    text-shadow: 0 0 4px #fa0, 0 0 4px #fa0, 0 0 4px #fa0,0 0 4px #fa0, 0 0 4px #fa0, 0 0 4px #fa0, 0 0 4px #fa0, 0 0 8px #fa0, 0 0 8px #fa0;
    /*	background-color:red;*/
    color:#fff;
    font-weight:bold;
}

.linone{
    list-style-type : none;
    margin: 0px;
    padding: 0px;
}

.btnselected {
    background: #f4f4f4;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8'); /*  IE */
    background: linear-gradient(90deg,  #efefef, #f8f8f8);
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    text-shadow: 0 1px 0 #fdfdfd;
    -webkit-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    -moz-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    color:#888;
}
button, input[type=submit], input[type=reset], input[type=button]{
    display: inline-block;
    text-decoration: none;
    margin:2px;
    width:auto;
    font: bold 11px/11px 'Open Sans';
    padding: 4px 14px;
    border: 1px solid #dedede;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #f5f5f5;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /*  IE */
    background: linear-gradient(90deg,  #f9f9f9, #f0f0f0);
    border-color: #cecece #c8c8c8 #c3c3c3;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    -moz-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
}

button:disabled, input[type=submit]:disabled, input[type=reset]:disabled, input[type=button]:disabled{
    color: #999;
}

.disabled {
    cursor: not-allowed;
    color:#555;
}

input[type=checkbox], input[type=radio]{
    border: 1px solid #dedede;
    width     : 12px;
    margin    : 2px 3px;
    padding   : 0;
    font-size : 1em;
}

button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{
    background: #f4f4f4;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8'); /*  IE */
    background: linear-gradient(90deg,  #efefef, #f8f8f8);
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    text-shadow: 0 1px 0 #fdfdfd;
    -webkit-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    -moz-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
}

#navbar{
    background-color: #bbb;
}

#navcontainer{
    padding: 0 22px 0 22px;
    margin: 0;
    border-size:0;
    background-color: #bbb;
    max-width: calc(var(--main-page-width) - 44px);;
    margin:auto;
}
#navcontainer ul{
    padding: 0;
    margin: 0;
    border-size:0;
    list-style-type: none;
}

#navcontainer ul li {
    display: inline;
    padding:0;
    margin:0;
    float:left;
    border-size:0;
}

#navcontainer ul li a{
    font-family: 'Open Sans';
    text-decoration: none;
    display:inline-block;
    text-align:center;
    padding: 8px 20px;
    margin:0;
    color: #000;
    background-color: #bbb;
    font-size: 13px !important;
    font-weight:normal;
    border-width:0;
}

#navcontainer ul li.selected a{
    background-color: #fff;
    border-color:#fff;
}

#navcontainer ul li.selected a:hover{
    background-color: #fff;
}


#topmenu{
    padding:0;
    margin:0;
}

#subnavcontainer{
    margin:6px 0 0 0;
    padding:2px 0 0 22px;
    float:left;
    bottom:0;
}

#subnavcontainer ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-width:0;
}

#subnavcontainer ul li {
    display: inline;
    padding:0;
    margin:0;
    border-width:0;
}

#subnavcontainer ul li a{
    font-family: 'Open Sans';
    text-decoration: none;
    display:inline-block;
    text-align:center;
    padding: 3px 8px;
    margin:0;
    color: #000;
    font-size: 11px !important;
    font-weight:normal;
    border-width:0;
}
/* defined ul style, to avoid it using style from html that was included like eg. via notat //mk freshdeskticket: 1208 */
.subnavcontainer_ul{
    font-size: 100%;
    font-family: 'Open Sans';
}

#subnavcontainer ul li.selected a{
    font-weight:bold;
}


#subnavcontainer ul li a:hover{
    color: #000;
    background-color: #ddd;
}

#searchtools {
    float:right;
    padding: 3px 22px 3px 0;
}

#searchtools ul{
    margin: 0;
    list-style-type: none;
    text-align: left;
}

#searchtools ul li {
    display: inline;
    float:right;
}

#searchtools ul li input{
    display:inline-block;
    width:150px;
    padding: 4px 14px;
    margin:0;
    color: #000;
    font-size: .7em;
    border-width:1px;
    border-color:#999;
    border-style:solid;
}

.searchnotfound{
    color: white !important;
    background-color: red;
}

#profileicon, .profileicon {
    margin: 6px 0 4px 4px;
    height:24px;
    float:right;
}

.news-bell-wrapper {
    position: relative;
    float: right;
    text-decoration: none;
    color: inherit;
    overflow: visible;
}
.news-bell-wrapper .fa-bell {
    margin: 6px 0 4px 4px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    display: block;
}
.news-bell-badge {
    position: absolute;
    top: 6px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #e53935;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #bbb;
    z-index: 10;
    pointer-events: none;
}
.theme-dark .news-bell-badge,
html.theme-dark .news-bell-badge {
    box-shadow: 0 0 0 2px #4d565f;
}

.news-bell-has-new .fa-bell {
    animation: news-bell-ring 2.5s ease-in-out 3;
}
@keyframes news-bell-ring {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }
    5% {
        transform: rotate(-12deg) scale(1.1);
    }
    10% {
        transform: rotate(12deg) scale(1.05);
    }
    15% {
        transform: rotate(-8deg) scale(1.08);
    }
    20% {
        transform: rotate(8deg) scale(1.02);
    }
    25%,
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.news-popup-title {
    font-weight: bold;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
}
.news-popup-list {
    max-height: 350px;
    overflow-y: auto;
}
.news-popup-loading {
    padding: 20px;
    text-align: center;
}
.news-card {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
}
.news-card-title {
    font-weight: bold;
    margin-bottom: 6px;
}
.news-card-content {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.news-card-date {
    font-size: 11px;
    color: #666;
}

.news-popup-window {
    background-color: #fff;
}

#logoninfo{
    padding: 10px 4px 4px 0;
    margin:0;
    float:right;
    font-size: .7em;
    color:white;
    font-weight:normal;
}

#navcontainer ul li a:hover{
    color: #000;
    background-color: #ddd;
}
#cleardiv{
    clear: both;
}
.cleardiv{
    clear: both;
}

#profilewindow{
    padding:0px;
    text-align:right;
    font-family:'Open Sans';
    font-weight:normal;
    font-size:13px;
}

#profilewindow a{
    font-family:'Open Sans';
    font-weight:bold;
    font-size:13px;
}

#profilewindow ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#profilewindow li{
    margin: 0;
}

.alertwindow, .alertwindowdraggable {
    border-width:0px;
    background-color:#fff;
    color:black;
    padding:4px;
    margin:0px;
    font-family:'Open Sans';
    font-weight:normal;
    font-size:.9em;
}

#alertwindow {
    text-align:center;
}

#alertwindow p{
    font-weight:bold;
    color:black;
}

#alertwindow button{
    margin-right:5px;
}

#alertbar{
    position:absolute;
    background-color:#c00;
    height:15px;
    width:100%;
    z-index:100;
    color:white;
    font-family:'Open Sans';
    font-weight:bold;
    font-size:.9em;
    padding:5px 0 10px 0;
    margin:0px;
    text-align:center;
    display:none;
}

#alertbarok{
    position:absolute;
    background-color:#070;
    height:15px;
    width:100%;
    z-index:100;
    color:white;
    font-family:'Open Sans';
    font-weight:bold;
    font-size:.9em;
    padding:5px 0 10px 0;
    margin:0px;
    text-align:center;
    display:none;
}

.boxshadow{
    -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.65);
}

.newdialogwindow{
    border:0px solid black;
    background-color:#fff;
    color:black;
    top:0;
    left:0;
    padding:10px;
    margin:0px;
    font-family:'Open Sans';
    font-weight:normal;
    font-size:.9em;
    -webkit-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
    box-shadow: 4px 0px 24px -6px rgba(0,0,0,0.75);
}

.newdialogwindow a{
    font-weight:normal;
    font-size:.9em;
    color:#222;
    text-decoration: none;
}

.newdialogwindow form fieldset{
    border-width:0px;
    border-color:white;
    padding:2px;
    color:white;
}
.newdialogwindow form input,select{
}
.newdialogwindow form button{
    margin-top:5px;
    margin-right:5px;
}

.newdialogwindow form fieldset legend{
    border-width:0px;
    border-color:white;
    padding:2px;
    color:white;
}




/* Checkbox start */

.checkboxth{
    width:50px;
    text-align:right;
}

.filters input[type=checkbox] {
    display: none;
}

.filters .icon{
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding:1px;
    margin: 3px 4px 0 3px;
}

.filters .icon .fa{
    visibility: hidden;
}

.filters input[type=checkbox]:checked + .icon .fa {
    visibility: visible;
}


/* IE8 and lower disabling hack because it does not support the :checked selector */

.filters input[type=checkbox]{
    display: inline\9;
}

.filters .icon {
    display: none\9;
}

/* Optional */

.filters{
    /* prevent accidental selection when clicking */
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.filters label {
    cursor: pointer;
}


/* Checkbox styling */

.filters input {
    margin: 0 .1em; /* Use something similar to .icon */
}

.filters .icon {
    background-color:#fff;
    border: 1px solid;
    border-color: #dadada #e9e9e9 #e9e9e9 #dadada;
    border-radius: .3em;
    text-align: center;
    font-size: .7em;
    color: #666;
    margin: 0 .1em;
    height: 0.9em;
    width: 0.9em;
    padding: 0.10em;
    line-height: 1.1em;
    margin:0.3em;
    margin-right:6px;
    /**
    * Values for height, width and line-height
    * may need to be adjusted depending on your font.
    */
}


.filters .colored {
    border: 0;
    font-size: 1em;
    color: #fff;
    margin: 0 .1em;
    height: 1em;
    width: 1em;
    padding: 0.10em;
    line-height: 1.1em;
    margin:0.3em;
    margin-right:6px;
}

/* Inline menu styling */



/* Checlbox slut */

.pa_kvsetclear{
    margin:0px;
    overflow: hidden;
}

.pa_kvsetclear ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pa_kvsetclear ul li{
    float:left;
}

.pa_kvsetclear h3{
    margin: 0;
    padding: 2px 3px 2px 3px;
    font: 13px 'Open Sans';
    font-weight:bold;
}

.pa_kvsetclear ul li div:nth-child(1){
    float:left;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}

.pa_kvsetclear ul li div:nth-child(2){
    float:right;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}
.pa_kvsetclear ul li{
    width:100%;
}
.pa_kvsetclear ul li:nth-child(2n+1), .pa_kvset ul li:nth-child(2n) {
}



/* Account switcher above the account-settings box. The tabs stand on a line
   of their own and the box below drops its top border, so the selected account
   reads as the box's own heading. Colours are the .pa_kvset ones: #555 for the
   active tab like its h3, #d8d8d8 for the rest like its rows. */
.accounttabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0;
    /* The line the tabs stand on. It used to be the box's own top border, with
       the active tab covering its slice with a box-shadow - which left a stray
       dark pixel where the two met. Now the strip and the tabs draw the line
       between them and the box below draws none, so every pixel of it belongs
       to exactly one element. */
    border-bottom: 2px solid #868686;
}

.accounttabs + .pa_kvset {
    border-top: 0;
}

.accounttabs .accounttab {
    font: bold 11px/14px 'Open Sans';
    padding: 3px 10px;
    /* Raised like the boxes below: light along the top and left, dark along
       the bottom and right, which is also the line the strip continues. */
    border: 2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    border-radius: 3px 3px 0 0;
    /* Each tab owns its slice of the line, and every tab is pulled down onto it
       by the same 2px, so they all stay level with each other. */
    margin-bottom: -2px;
    background: #d8d8d8;
    color: #555;
    text-decoration: none;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounttabs .accounttab:hover {
    background: #cdcccd;
}

.accounttabs .accounttab.is-active {
    background: #555;
    color: #fff;
    /* The active tab opens into the box. Its slice of the line is background
       rather than a border: a dark bottom border would meet the grey side ones
       at a mitre, and that diagonal lands as one dark pixel in each bottom
       corner. The 2px comes back as padding, so the height is unchanged. */
    border-bottom: 0;
    padding-bottom: 5px;
    /* the account you are looking at stays readable when the strip is full */
    flex-shrink: 0.25;
}

/* A link living in a .pa_kvset header line, pushed to the right-hand end. The
   one that already existed on the pending-messages header used
   style="floating: right", which is not a CSS property, so it never moved. */
.pa_kvset h3 .headerlink {
    float: right;
    color: #fff;
    font-weight: normal;
    font-size: 11px;
}

/* The +/- that expands a section: it acts like a button, so it points like one.
   vertical-align came off the two icons themselves, which carried it inline. */
.pa_kvset h3 img.togglefields {
    vertical-align: -1px;
    cursor: pointer;
}

.pa_kvset{
    /* Raised, like the engraved group-header rule: light along the top and
       left, dark along the bottom and right. The two average out to the flat
       #a0a0a0 these boxes used to carry. */
    border:2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    margin:0px;
    overflow: hidden;
}

/* The three-column customer layout (accounting.editcustomer and
   accounting.customerproduct) stacks several boxes per column, and they used to
   sit flush against whatever followed. The processes box below sets its own
   larger margin and is left alone - this rule comes first on purpose. */
.pgraphboxouterborder3 .pa_kvset {
    margin-bottom: 6px;
}

.pa_kvset ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pa_kvset ul li{
    background-color: #cdcccd;
    float:left;
}

/* Processes box (gui_generateAccountingProcessesTable) - the list runs to a
   few thousand pixels on installations with many processes, so cap it and let
   it scroll instead of pushing the rest of the page down. */
.pa_kvset.processeslist {
    /* Matches the 18px the br separators give the other boxes in this
       column - only bottom, or the br before the first box doubles it. */
    margin: 0 0 18px 0;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Header stays put while the list scrolls under it. What keeps the buttons from
   showing through is the opaque background .pa_kvset h3 already paints, plus
   sticky positioning itself: a positioned element paints above static siblings,
   and nothing in these lists is positioned. No z-index needed for that. */
.pa_kvset.processeslist h3 {
    position: sticky;
    top: 0;
}

.pa_kvsetduo{
    border:2px solid;
    border-color: #c4c4c4 #868686 #868686 #c4c4c4;
    margin:0px;
    overflow: hidden;
}

.pa_kvsetduo ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pa_kvsetduo ul li{
    background-color: #cdcccd;
    float:left;
}


.pa_kvset3070 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pa_kvset3070 ul li input, .pa_kvset3070 ul li select{
    width:100%;
}

.pa_kvset3070 ul li{
    width:100%;
    overflow:hidden;
}

.pa_kvset3070 ul li div:nth-child(1){
    float:left;
    border:0px solid red;
    padding:3px 0 3px 0;
    width:29%
}

.pa_kvset3070 ul li div:nth-child(2){
    float:right;
    border:0px solid green;
    padding:3px 0 3px 0;
    width:69%
}


/* instaddress.edit and esgess.editport put this id on a <table>, and
   instaddress.move on a <div>. accounting.editcustomer now carries it
   on the <ul> holding its rows, which must not get the box border. */
table#address_container, div#address_container {
    border-style: solid;
    border-color: black;
    border-width:0 0 1px 0;
    padding:0;
}


.pa_kvsetduo h3{
    margin: 0;
    padding: 2px 3px 2px 3px;
    font: 13px 'Open Sans';
    font-weight:bold;
    color: white;
    background-color:#555;
}

.pa_kvsetduo H3 A{
    color:white;
}

.pa_kvsetduo ul li div:nth-child(1){
    border:0px solid red;
    float:left;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}

.pa_kvsetduo ul li div:nth-child(2){
    border:0px solid green;
    float:right;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}


.pa_kvset h2{
    margin: 0;
    padding: 2px 3px 2px 3px;
    font: 13px 'Open Sans';
    font-weight:normal;
    line-height: 22px;
}

.pa_kvset h3{
    color: white;
    background-color:#555;
    margin: 0;
    padding: 2px 3px 2px 3px;
    font: 13px 'Open Sans';
    font-weight:bold;
}

/* A section header inside the list - contact details, invoicing method - gets the same
   breathing room above it as a group title. The box's own header sits outside
   the ul, so it is not matched and stays flush with the top of the box. */
.pa_kvset ul li h3 {
    margin-top: 6px;
}

.pa_kvset ul li div:nth-child(1){
    border:0px solid red;
    float:left;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}

.pa_kvset ul li div:nth-child(2){
    width:60%;
    float:right;
    padding:3px 4px 3px 4px;
    font: 13px 'Open Sans';
}

/* Align pacalendar-wrapped inputs with plain inputs in .pa_kvset cells. */
.pa_kvset .pac:not(.pac-popup){
    padding-left: 0;
    padding-top: 0;
}

#buttonpanel1{
    display:none;
    margin:0 0 0 0;
}

#buttonpanel1 button{
    padding:4px 0 4px 0;
    width:85px;
}

#buttonpanel2{
    display:none;
    text-align:right;
    margin:0 0 0 0;
}
#buttonpanel2 button{
    padding:4px 0 4px 0;
    width:72px;
}

#dimmer
{
    background:#000;
    opacity:0.5;
    position:fixed; 
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:0;
}

.pa_kvset ul li div:nth-child(2){
    float: right;
    text-align:right;
    padding:2px 4px 2px 4px;
    line-height: 20px;
}

/* A checkbox does not need the 60% the value column reserves for text inputs,
   and with a long label the two floats no longer fit side by side, so the
   checkbox drops onto a line of its own. Cells holding nothing but a checkbox
   shrink to the box itself; being floated right it stays where it was, and the
   row only wraps when the label genuinely does not fit. */
.pa_kvset ul li div:nth-child(2):has(> input[type=checkbox]):not(:has(> *:not(input))):not(:has(> input:not([type=checkbox]):not([type=hidden]))) {
    width: auto;
}
.pa_kvset ul li div:nth-child(1){
    line-height: 20px;
}

.pa_kvset ul li{
    height: 26px;
}

/* A saved address is written out as lines of text rather than put in fields.
   The value column is right-aligned, which reads wrong for an address - these
   lines start on the same edge as the field values above them instead. */
.pa_kvset ul li div.addresslines {
    text-align: left;
}

/* The invoicing-method section carries a row per method, but only the one in use is
   of interest until someone wants to change it - the + in the header sets
   .invoiceby-all on the box and brings the rest out. */
.pa_kvset ul li.invoicebyoption:not(.is-current) {
    display: none;
}

.pa_kvset.invoiceby-all ul li.invoicebyoption:not(.is-current) {
    display: block;
}

/* Rows opt out of the fixed height above with .rowauto when their content needs
   more than one line. A section header does the same without the class: it
   carries a 6px top margin the fixed height has no room for, and it appears in
   too many templates to mark up one by one. Browsers without :has() fall back
   to the header hanging out below its row, which is what the page looked like
   before and still reads correctly. */
.pa_kvset ul li.rowauto,
.pa_kvset ul li:has(> h3) {
    height: auto;
}

/* A field sharing its row cell with a radio button - the radio and the gap
   beside it take 28px, the field takes the rest. */
.pa_kvset .radiofield {
    float: right;
    width: calc(100% - 28px);
}

/* Buttons on a row of their own: one pixel up puts them on the same baseline
   as the text in the rows above and below. */
.pa_kvset ul li button.rowbutton {
    margin-top: -1px;
}

/* The debt banners above the boxes - collection, reminder, overdue - which
   differ only in how alarming the background is. */
.debtbanner {
    font-weight: bold;
    background-color: red;
    color: white;
    padding: 2px;
}

.debtbanner.reminder {
    background-color: #f50;
}

.debtbanner.debtdue {
    background-color: #fa0;
}

/* Group titles - custom-field groups on the customer page, process groups in
   the Processer box and the other process lists. The name sits on a rule
   running the full width of its container, so it reads as a divider between
   what is above and below it rather than as another label row. The two
   pseudo-elements are the rule: a fixed 2% stub on the left, the rest of the
   line on the right. The .pa_kvset variant of each selector is only there to
   outweigh the float and width the value column puts on a row's first div. */
.pa_groupheader,
.pa_kvset ul li div.pa_groupheader {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    gap: 8px;
    margin-top: 6px;
    padding: 3px 6px;
    font-weight: bold;
}

.pa_groupheader::before,
.pa_groupheader::after,
.pa_kvset ul li div.pa_groupheader::before,
.pa_kvset ul li div.pa_groupheader::after {
    content: "";
    /* Engraved rather than flat: a dark line with a light one directly under it
       is the oldest 3D trick there is, and it suits the rest of the page. */
    border-top: 1px solid #9a9a9a;
    border-bottom: 1px solid #fff;
}

.pa_groupheader::before,
.pa_kvset ul li div.pa_groupheader::before {
    flex: 0 0 2%;
}

.pa_groupheader::after,
.pa_kvset ul li div.pa_groupheader::after {
    flex: 1;
}

/* Lists that read as rows of records - the customer tasks and the running and
   ended process lists - stripe like a table. The .stripedtr colours, applied
   through the classes paStripeRows() sets, so hidden rows (a collapsed task
   list) do not eat a turn the way :nth-child would. */
.stripedlist ul li.stripe-odd {
    background-color: #e8e8e8;
}

.stripedlist ul li.stripe-even {
    background-color: #d8d8d8;
}

/* The process lists (gui_getProcessListCore): a row of buttons under each group
   title, two to a line. These carried the width inline on every single button -
   219 of them on a customer page. */
.processbuttons {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
}

.processbutton {
    width: calc(50% - 4px);
}

/* A process left in edit mode; it carries title="Edit mode" as well. */
.processbutton.editmode {
    color: darkorange;
}

/* Field text sat above the label baseline: 11px Verdana centred in an 18px
   box lands 3px higher than 13px Open Sans on the label's 20px line (2px for
   selects). Nudged with position/top so the fixed 26px row height is
   unaffected - vertical-align would grow the line box.
   Matched by exclusion: not every field carries a type attribute, and the one
   that does not was left behind by an input[type=text] selector. */
.pa_kvset ul li input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]) {
    position: relative;
    top: 3px;
}

.pa_kvset ul li select {
    position: relative;
    top: 2px;
}

/* Radios carry no text of their own, so centre them on the label's x-height
   rather than its baseline - same 26px row, so nudged the same way. */
.pa_kvset ul li input[type=radio] {
    position: relative;
    top: 4px;
}

.warningmessage{
    text-align: center;
    font-weight: bold;
    background-color: yellow;
    color: black;
}

.pa_tooltip {
    width: auto;
    padding: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    position: absolute;
    top: 5px;
    color: black;
    left: 20px;
    display: none;
    background-color: white;
    white-space: nowrap;
    z-index: 100;
}

.infoicon {
    cursor: pointer;
    display: block;
}

.infoicon:hover+.pa_tooltip {
    display: block;
}

.pa_tooltip:hover {
    display: block;
}

.plaintable td{
    background-color: white !important;
    color: black;
}

.plaintable a:visited, .plaintable a:link{
    color:black;
}

.plaintable_color{
    color:black;
}

.highlightrow td{
    background-color: white;
}

.operation_error {
    color: red;
    font-weight: 600 !important;
}

.operation_warning {
    color: darkorange;
    font-weight: 600 !important;
}

.operation_ok {
    color: darkgreen;
    font-weight: 600 !important;
}

.subtitle {
    background-color: #ff8888 !important;
    color: black !important;
    text-align: center !important;
}


.errorlog > tbody > tr > td:last-child, .operation_status > tbody > tr > td:last-child {
    text-align: right;
}

.errorlog > tbody > tr > td:first-child {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    
}

.errorlog > tbody > tr > td:nth-last-child(2) > div, .divHeaderSmall {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    overflow-x: hidden !important;
    direction: rtl;
}

.errorlog > tbody > tr > td:nth-last-child(3) {
    width: 10000px;
}


.errorlog > tbody > tr > td:nth-last-child {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

.errorlog > tbody > tr > td {
    vertical-align: top;
    text-align: left;
}

.errorlogsmall > td > div, .divHeaderSmall {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 18px !important;
    max-height: 18px !important;
    border: none;
    padding: 0;
}

.errorlogsmall > td, .errorlogsmall > td > div {
    cursor: pointer;
}

.errorLogSearchDirection {
    color:green;
}

#errorLogSearchString {
    background-color: white;
    transition: background-color 100ms linear;
}

#errorLogSearchStringNotFound {
    background-color: red;
    transition: background-color 100ms linear;
}

.errorlogHighlighted {
    background-color: #fd0 !important;
}

#th_status_last_child {
    text-align: right !important;
}

.clickable {
    cursor: pointer !important;
}

.clickable:hover {
    text-decoration: underline;
}

.ignoreButton {
    font-size-adjust: 0.45;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 0;
    margin-bottom: 0;
}

.fromto-input-container,
.address-input-container,
.zipcity-input-container {
    display: flex;
    gap: 5px;
    width: 100%;
}

.fromto-input-container input,
.address-input-container input,
.zipcity-input-container input {
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* Address input specifics */
.address-input-container input:nth-child(1) {
    flex-basis: 50%;
}

.address-input-container input:nth-child(2),
.address-input-container input:nth-child(3) {
    flex-basis: 15%;
}

.address-input-container input:nth-child(4) {
    flex-basis: 20%;
}

/* Zip/City input specifics */
.zipcity-input-container input:nth-child(1) {
    flex-basis: 30%;
}

.zipcity-input-container input:nth-child(2) {
    flex-basis: 70%;
}

/* From to input specifics */
.fromto-input-container input:nth-child(1) {
    flex-basis: 50%;
}

.fromto-input-container input:nth-child(2) {
    flex-basis: 50%;
}

.filter-form-container {
    width: 90%;
}

.filter-form-container label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 5px;
}

.filter-form-container label span {
    width: 150px;
    margin-right: 5px;
    white-space: nowrap;
}

.filter-form-container input,
.filter-form-container select {
    flex: 1;
    width:100%;
}

#joblists{
    position:fixed;
    bottom:0;
    left:0;
}
.joblistitem{
    border:1px solid #ddd;
    background-color:#eee;
    width:350px;
    height:26px;
    margin:2px;
    border-radius: 10px;
}
.joblistitem div:first-child{
    float:left;
    height:26px;
    padding:0;
    margin:2px;
    font-size:15px;
}

.joblistitem div:last-child{
    float:right;
    height:26px;
    padding:0;
    margin:2px;
}

.massinput {
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.submitbuttons {
    text-align: right;
}

.spacedTop {
    padding-top: 10px;
}

.secrets-value{
    max-width: 150px;
    text-overflow: ellipsis;
    overflow-x: clip;
}

.margin-top-10{
    margin-top: 10px;
}

.searchBoxElement, .searchBoxElement::selection {
    background-color: white;
    border: 1px solid #aaa;
    position: absolute;
    max-height: 297px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    
    list-style: none;
    z-index: 30;
    -ms-overflow-style: auto;
    scrollbar-width: thin;
}

.searchBoxElement span {
    padding: 0 5px;
}

.searchBoxElement li, .searchBoxElement li span::selection {
    background-color: white;
    color: black;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    padding: 4px 0 4px 0;
}

.searchBoxElement li.selected, .searchBoxElement li.selected span::selection{
    background-color: #2064d4;
    color: white;
    cursor: default;
}

.refineText{
    height: 19px;
    text-align: left;
    padding: 2px 2px 2px 4px;
    border: 1px solid black;
    background-image: url("/img/dropdown.svg");
    background-size: 14px;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
}

.sidebar {
    box-sizing: border-box;
    width: 160px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 4px 0 24px -6px rgba(0,0,0,0.75);
}

#sidebar-list a {
    display: inline-block;
    text-decoration: none;
    padding: 2px 8px;
}

.threecolumn-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin: 0 auto;
    min-width: 800px;
}


.reconciled {
    background-color: #ddd;
    text-decoration: line-through;
}

.removeReconciliation {
    background-color: red !important;
    color: red;
}

.confirmReconcile {
    color: green;
}

.suggestReconcile {
    color: #abefed;
}

.historyFavicon {
    height: 17px;
}

.historyFaviconSmall {
    height: 16px;
    padding-right: 5px;
    cursor: pointer;
}

.overlayContainer {
    width: 17px;
    height: 17px;
    position: relative;
    overflow: visible;
    float: left;
    margin: 3px 4px 0 0;
}

.baseAnchor {
    position: absolute;
    top: 0;
    left: 0;
}

.favoriteOverlay {
    width: 700px;
    position: absolute;
    left: calc(-700px + 17px);
    z-index:12;
}

.favoriteOverlayTop {
    font-weight: bold;
    background-color:white;
    height: 19px;
    width: 19px;
    left: -2px;
    top: 0;
    z-index: 15;
}

.favoriteOverlayMenu {
    top: -4px;
    left: calc(-700px - 14px);
    background-color:white;
    padding: 10px 16px 10px 16px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

.favoriteOverlayMenu > div > h3 {
    font-size: 100%;
}

.favoriteSpan {
    width: calc(700px - 40px);
    overflow: hidden;
}


.historyNote {
    font-size: 80%;
    font-style: italic;
}

.hiddenOverlay {
    visibility: hidden;
    opacity: 0;
    animation: fadeIn 1s;
    transition: visibility 0.15s, opacity 0.10s linear;
}

.visibleOverlay {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.10s linear;
}

.popup, .popup::selection {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    background-color: #ddd;
    border: 1px solid #ccc;
    padding: 3px 5px;
    border-radius: 4px;
    display: none;
    transition: all 1.5s ease-in-out;
    z-index: 500;
    font-size: 100%;
}
/* Error modal overlay */
#pa-error-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#pa-error-modal-overlay .pa-error-modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    position: relative;
}

#pa-error-modal-overlay .pa-error-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

#pa-error-modal-overlay .pa-error-modal-header h3 {
    margin: 0;
    color: #c0392b;
}

#pa-error-modal-overlay .pa-error-modal-close {
    cursor: pointer;
    font-size: 22px;
    color: #888;
    padding: 0 4px;
}

#pa-error-modal-overlay .pa-error-modal-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    color: #333;
}


/* Clearhaus missing transaction section in error modal */
.ch-missing {
    padding: 15px;
    background: #f8f8f8;
    border-top: 1px solid #ddd;
}

.ch-missing h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.ch-missing table {
    margin-bottom: 12px;
    color: #222;
}

.ch-missing-actions {
    display: flex;
    gap: 20px;
}

.ch-missing-action {
    flex: 1;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ch-missing-action h5 {
    margin: 0 0 8px 0;
    color: #333;
}

.ch-missing-action p {
    font-size: 11px;
    color: #555;
    margin: 0 0 8px 0;
}

.ch-missing-action label {
    color: #333;
}

.ch-missing-action input[type="text"] {
    width: 100%;
    margin: 4px 0 8px 0;
}

/* Email queue status */
.emailqueue-status-ready   { color: #2a7a2a; font-weight: bold; }
.emailqueue-status-running { color: #b07000; font-weight: bold; }
.emailqueue-status-failed  { color: #cc0000; font-weight: bold; }

.salesperson-hint { color:#888; font-size:0.9em; }

.ruleoperator {
    font-style: italic;
    font-size: 70%;
    list-style-type: none;
    margin-left: -18px;
    padding: 0;
}

.rulepopup {
    position: fixed;
    min-width: 500px;
    max-height: 90%;
    overflow: auto;
    padding: 10px;
    top: 5%;
    left: calc(50% - 250px);
    background-color: white;
    box-shadow: 4px 0 24px -6px rgba(0,0,0,0.75);
    z-index: 20;
}

#draghead {
    padding: 6px;
    text-align: center;
    cursor: grab;
    background-color: rgb(85, 85, 85);
    color: rgb(255, 255, 255);
}

/* Billing filter toolbox rows (cutransactions + blinvoicescustomer) */
.cu-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 6px; }
.cu-filter-row:last-child { margin-bottom: 0; }
.cu-filter-row > label { display: inline-flex; align-items: center; white-space: nowrap; }
.cu-filter-row .cu-date-label > span { display: inline-block; width: auto; margin-right: 6px; white-space: nowrap; }
.cu-filter-row .cu-date-label > input[type=text] { width: 100px; }
.cu-filter-row .cu-date-sep { margin: 0 6px; color: #888; }
.cu-filter-row > input[type=submit] { width: auto; }


/* -- Customer search dropdown (pa_search.js) -- */
#searchtools ul li {
    position: relative;
}

.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    width: 505px;
    max-width: 90vw;
    /* Fallback only - pa_search.js sets max-height from the room below the input. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 3000;
    text-align: left;
    scrollbar-width: thin;
}
.search-dropdown.visible {
    display: block;
}

.search-dropdown-section {
    padding: 4px 0;
}
.search-dropdown-section + .search-dropdown-section {
    border-top: 1px solid #e2e2e2;
}

.search-dropdown-header {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888888;
}

#search-dropdown .search-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    /* Rows are <a> now - strip the link look (global A:link sets bold
       and a color), keep the row look. Selector is id-qualified so it
       outweighs that A:link rule. */
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}
.search-result-item:hover,
.search-result-item.selected {
    background-color: #eef4ff;
}

.result-star {
    flex-shrink: 0;
    /* Visual icon is small (12px) but the click target is enlarged via
       padding so the star is easy to hit. Negative margin cancels the
       vertical padding so the row height stays the same. */
    width: 32px;
    padding: 8px 0;
    margin: -8px 0;
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    cursor: pointer;
}
.result-star:hover,
.result-star.is-favorite {
    color: #f5b301;
}

/* Customer details and note stacked on their own lines */
.result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.result-text {
    font-size: 13px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-note {
    font-size: 10px;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Rows without a note stay on a single line */
.result-note:empty {
    display: none;
}

/* Favorite note (customerhistory.chnote) - shown on the row, edited in place */
.result-note-edit {
    flex-shrink: 0;
    /* Same enlarged hit area trick as .result-star */
    width: 24px;
    padding: 8px 0;
    margin: -8px 0;
    text-align: center;
    font-size: 11px;
    color: #cccccc;
    cursor: pointer;
}
.result-note-edit:hover {
    color: #4a76c8;
}

#search-dropdown .result-note-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1px;
    min-width: 0;
    padding: 1px 4px;
    font-size: 10px;
    font-family: inherit;
    color: #222222;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
}

.search-result-item.editing-note .result-note {
    display: none;
}

.search-dropdown-empty {
    padding: 16px 14px;
    font-size: 13px;
    color: #999999;
    text-align: center;
}


/* Text-file inline previews (used in /files preview column and CRM ticket thumbnails) */
.txt-preview-cell {
    font-size: 8px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 200px;
    overflow: hidden;
    margin: 0;
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 2px;
    white-space: pre-wrap;
}

.txt-preview-thumb {
    font-size: 8px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    padding: 2px;
    text-align: left;
    white-space: pre-wrap;
    overflow: hidden;
}

.txt-preview-icon {
    font-size: 16px;
}

#productstats-table thead th {
    vertical-align: bottom;
    text-align: center !important;
}
#productstats-table tbody td:not(:first-child),
#productstats-table tfoot td:not(:first-child) {
    text-align: center !important;
}

/* Email integration: fallback comparison + help text (dark overrides in darkmode.css) */
.fallback-title {font-weight: bold; }
.fallback-cmp { display: block; margin-top: 4px; font-size: 0.8em; color: #777; }
.fallback-cmp.differ { color: #ff8100; font-weight: bold; }