:root {
    /* Normal width: 1870px, and 60% of the window on very wide screens (34" and up) */
    --main-page-width: max(1870px, 60vw);
    /* The narrowest a list gets: 1100px, and 40% of the window on very wide screens */
    --pa-list-min: max(1100px, 40vw);
    --search-bgcol-notfound: #f00;
    --table-border-color: black;
}

/* Full width is a per user option, see changeLayoutWidth() in js/default.js. It follows the window
   up to a cap (2200px, or 80% of a very wide window), so lines do not get too long to read, and the page sits on the left next to the menu
   and the filters instead of in the middle. */
html.layout-fullwidth {
    --main-page-width: max(2200px, 80vw);
}

html.layout-fullwidth .mainpagemaxwidth {
    margin-left: 0;
}

/* Normal width: every page is the same fixed width, centred, whatever its lists are, so the menu
   above it (css/menu.css) and the page line up and do not move from page to page.
   Full width: a page with lists is as wide as its widest content (at least --pa-list-min, at most
   the page width), so the filters, button bars and messages on the right end where the lists end. */
html.layout-fullwidth #pagemaxwidth:has(:is(#maintable, .maintable):not(td *)) {
    width: fit-content;
    min-width: min(100%, var(--pa-list-min));
    /* Never wider than the window: a list wider than that scrolls on its own, as before, instead of
       taking the page with it (the task page's right-floated user filter then lands off screen, and
       the focus it gets on load scrolls the whole page sideways) */
    max-width: min(100%, var(--main-page-width));
    margin-left: max(0px, calc((100% - var(--main-page-width)) / 2));
    margin-right: auto;
}

html.layout-fullwidth #pagemaxwidth#pagemaxwidth:has(:is(#maintable, .maintable):not(td *)) {
    margin-left: 0;
}

/* A page's own narrower box (a list with its filters) follows: centred normally, on the left in full
   width */
.pa-pagebox {
    max-width: max(1200px, var(--pa-list-min));
    margin: auto;
}

html.layout-fullwidth .pa-pagebox {
    margin-left: 0;
}

.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);
    /* above #dimmer (90), like .standardpopup */
    z-index: 100;
}

.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);
    /* The popup is position:fixed further down, but had no z-index, so page
       elements with their own stacking context were painted on top of it.
       Kept below the global error modal overlay (9999). */
    z-index: 100;
}

body{
    position:relative;
    font-size:100%;
    font-family:'Open Sans';
    margin-left: 0px;
    margin-right:0px;
    margin-top:0px;
    /* Grey behind the page, so the off-white lists and boxes stand off it as cards.
       darkmode.css sets its own. */
    background-color: var(--page-bg);
}

/* The light theme's surfaces: a cool grey page, lists and boxes a shade off white on it, and
   pure white kept for the fields you type in. darkmode.css paints these elements itself. */
:root {
    --page-bg: #eceef1;
    --list-bg: #fafbfc;
    --kv-bg: #fafbfc;
}

/* A date field holds dd/mm/yyyy. Several templates give it a 75px width, sized for the old 2px
   padding; with today's padding the year was cut off */
input[data-pacalendar="date"] {
    min-width: 96px;
    font-variant-numeric: tabular-nums;
}

/* Corner rounding: controls (buttons, fields, selects) and surfaces (boxes, lists, menus) - the
   sidebar's 6px and 8px */
:root {
    --radius-ctl: 6px;
    --radius-box: 8px;
}

/* A table does not clip its cells to its rounded border, so the corner cells round themselves:
   the header's grey and a hovered last row would otherwise poke out square */
:is(.maintable, #maintable) > :first-child > tr:first-child > :first-child {
    border-top-left-radius: calc(var(--radius-box) - 1px);
}

:is(.maintable, #maintable) > :first-child > tr:first-child > :last-child {
    border-top-right-radius: calc(var(--radius-box) - 1px);
}

:is(.maintable, #maintable) > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: calc(var(--radius-box) - 1px);
}

:is(.maintable, #maintable) > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: calc(var(--radius-box) - 1px);
}

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

/* The row under the pointer is marked .is-row-hover by initRowHover() (js/default.js), not by
   :hover: the browser moves :hover only when the pointer moves, so after a scroll the old row
   stayed lit until the mouse was nudged. The script follows the pointer through scrolling too. */
.hovertable tr.is-row-hover td{
    background-color: #eee;
}

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

/* Every list gets a faint hover to follow a row across, now that there are no stripes;
   .hovertable keeps the stronger one, for rows that do something. Not on rows holding a form
   field, a heading or a sum. :where() keeps it below a page's own row colours.
   Not in a settings form laid out as a table either (a label cell and a field cell, as on
   process.edit's settings or modems.setup): there only the rows without a field lit up, which
   made the plain values look clickable. Such a table is marked .formtable, server-side or once
   by the row hover in js/default.js (initRowHover). */
:where(#maintable, .maintable, #maintable2):not(.hovertable, .formtable) > tbody > tr:not(.trheadline, .trsum, .trgrey, .sel, .selfi, .trwarn):not(:has(> th, input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea)).is-row-hover > td {
    background-color: #f3f3f3;
}


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

.maintable th A{
    color: inherit;
}

.tablesorter_neutral A{
    color: inherit;
}
.tablesorter_asc A{
    color: inherit;
}
.tablesorter_desc A{
    color: inherit;
}
.tablesorter_neutral{
    font-size: 12px;
    background-color: #e4e4e4;
    padding: 8px 12px;
    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;
}
/* The column a list is sorted on: a header a shade darker than the others, bold dark text and a grey
   line under it. Server-sorted lists put their header row in the tbody, so this is not limited to thead;
   the JS tablesorter's own classes are covered too. */
th:is(.tablesorter_asc, .tablesorter_desc, .tablesorter-headerAsc, .tablesorter-headerDesc) {
    background-color: #dadada !important;
    padding: 8px 12px !important;
    box-shadow: inset 0 -2px 0 #7a7f86;
    color: #16191f !important;
    font-weight: 700 !important;
    cursor: pointer;
}

th:is(.tablesorter_asc, .tablesorter_desc, .tablesorter-headerAsc, .tablesorter-headerDesc) a {
    color: #16191f !important;
    font-weight: 700 !important;
}

.whitebg{
    background-color:white;
}

#newsearchtools{
    display:none;
}

.clearboxpadding{
    padding:0 10%;
}

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

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

/* The filters in the left toolbox of a list page: a label column and one field
   column, every field the same width, so the column has one edge on both
   sides. Put .filterbox on #toptoolboxleft and write each row as
   <label><span>Text:</span> field</label>; the buttons follow the rows.
     .filterbox-range  two fields sharing one field's width (from - to)
     .filterbox-check  a checkbox row, under the fields
     .filterbox-hint   a small note under a field
   The field rule outranks .filters input and the date picker's .pac > input,
   and the range rule after it outranks it in turn. A page that needs other
   widths sets the two variables. */
.filterbox {
    --filterbox-label: 150px;
    --filterbox-field: 240px;
}

/* Full width has the room: wider fields, so a street name or a search text fits */
html.layout-fullwidth .filterbox {
    --filterbox-field: 320px;
}

/* The left toolbox is as wide as a filter row (425px with the normal widths), so wider fields stay
   inside it instead of running into the separator */
#toptoolboxleft.filterbox {
    width: max(425px, calc(var(--filterbox-label) + var(--filterbox-field) + 35px));
}

/* A row is a label that starts with its text span. */
.filterbox label:has(> span:first-child) {
    display: flex;
    align-items: center;
    padding: 3px 0;
}

.filterbox label > span:first-child:not(.icon) {
    flex: 0 0 var(--filterbox-label);
}

.filterbox select,
.filterbox input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset]) {
    width: var(--filterbox-field);
    margin: 0;
    box-sizing: border-box;
}

/* Never narrower than one field. Its fields can shrink to nothing, and Safari
   sizes a toolbox that fits its content (the right one is a float) by what the
   row can shrink to, which left the dates too narrow for their value. */
.filterbox .filterbox-range {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    width: var(--filterbox-field);
}

.filterbox .filterbox-range > select,
.filterbox .filterbox-range > input,
.filterbox .filterbox-range > .pac {
    flex: 1 1 0;
    min-width: 0;
}

.filterbox .filterbox-range input {
    width: 100%;
}

.filterbox .filterbox-check {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 0 1px var(--filterbox-label);
}

.filterbox .filterbox-check input {
    margin: 0;
}

.filterbox .filterbox-hint {
    padding-left: var(--filterbox-label);
    font-size: x-small;
}

/* cm/productstats, right box: the product list is as wide as its longest name (never narrower
   than a normal field), and the product group list stretches to the same right edge (or wider, if
   a group name is longer). "Group by" keeps the normal field width. */
.filterbox:has(#productconfids) #productconfids {
    width: auto;
    min-width: var(--filterbox-field);
}

.filterbox:has(#productconfids) #pcgr_key {
    flex: 1 1 auto;
    width: auto;
    min-width: var(--filterbox-field);
}

/* A help icon after a label text (gui_infoicon) sits a little under the text,
   and its tooltip wraps, as a filter's help can run to a few sentences. */
.filterbox .infoicon {
    font-size: calc(1em - 2px);
}

.filterbox .pa_tooltip {
    width: max-content;
    max-width: 300px;
    white-space: normal;
}

/* Filters without text labels: a search field that says what it searches in
   its placeholder, a select, a date - one or a few to a .filterrow, with a
   button beside the last. The controls take .filterrow-input, the same width
   as a .filterbox field; .filterrow-half takes half of it, so two share one.
   A page that needs another width sets --filterrow-input on its box. */
.filterrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.filterrow .filterrow-input {
    width: var(--filterrow-input, 240px);
    margin: 0;
    box-sizing: border-box;
}

.filterrow .filterrow-half {
    width: calc((var(--filterrow-input, 240px) - 6px) / 2);
}

.filterrow button,
.filterrow input[type=submit],
.filterrow input[type=button],
.filterrow input[type=reset] {
    white-space: nowrap;
}

/* A checkbox that goes with the search, on a line of its own. As label.filterrow-check
   too, so it outranks .stdform label (inline-block), which put the text under the box. */
.filterrow-check,
label.filterrow-check {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

/* [type=checkbox], to outrank the global input[type=checkbox] margin further down,
   so the box lines up with the search field under it */
.filterrow-check input[type=checkbox] {
    margin: 0;
}

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

/* Marks an option as still under development. */
label:has(> .pa-beta) {
    position: relative;
    display: inline-block;
}

.pa-beta {
    position: absolute;
    top: -4px;
    right: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: #1a6fd6;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 13px;
    transform: rotate(18deg);
    pointer-events: none;
}

#maintable .tre{
    background-color: var(--list-bg);
}

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


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

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


.ws{
    visibility:collapse;
}
.maintable th{
    background-color: #e4e4e4;
    color: #30353a;
    font: 600 12px/1.3 Inter, 'Open Sans', sans-serif;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #c8c8c8;
}

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

.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: 12px/1.45 Inter, 'Open Sans', sans-serif;
    padding: 5px 12px;
    cursor: default;
    color: #2b2f33;
}

#maintable th{
    background-color: #e4e4e4;
    color: #30353a;
    font: 600 12px/1.3 Inter, 'Open Sans', sans-serif;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #c8c8c8;
}

#maintable td{
    font: 12px/1.45 Inter, 'Open Sans', sans-serif;
    padding: 5px 12px;
    cursor: default;
    color: #2b2f33;
}

/* The header row stays in view while a long list scrolls. Only the first row of headers: a th
   further down (a sub heading) scrolls with its rows. */
:is(#maintable, .maintable) > thead > tr:first-child > th,
:is(#maintable, .maintable) > tbody:first-child > tr:first-child > th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* cm/productstats: a two-row heading, the new and cancelled counts (day, week, month) under one
   heading each. The whole thead sticks, so both rows stay in view. */
#productstats-table > thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

#productstats-table.maintable > thead > tr > th {
    position: static;
    vertical-align: bottom;
}

#productstats-table.maintable > thead > tr.th-grouprow > th {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Counts and amounts flush right in even-width digits, so they line up by size */
#productstats-table > * > tr > :is(th, td):not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* In those columns the sort arrow goes before the title, so the title ends where the numbers do */
#productstats-table th:not(:first-child) .sortfield {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
}

#productstats-table th:not(:first-child) .sortfield::after {
    margin: 0 .35em 0 0;
    vertical-align: 0;
}

/* The group's name, centred over its three columns with a line under it (tablesorter wraps the
   heading's content in a div, so not a child selector) */
#productstats-table > thead > tr > th.th-group {
    text-align: center;
}

#productstats-table th.th-group span {
    display: block;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Lines between the table's own rows only, not in a table nested in a cell. A product with its
   prices and fields is several rows sharing a data-header, so the line goes above each product's
   first row instead of under every row. Rows that are empty or only hold an <hr> are dividers. */
:is(#maintable, .maintable) > * > tr > td {
    border-bottom: 1px solid #eee;
}

:is(#maintable, .maintable) > * > tr[data-header] > td,
:is(#maintable, .maintable) > * > tr:has(> td:only-child:empty, > td:only-child > hr:only-child) > td,
:is(#maintable, .maintable) > * > tr:has(+ tr > td:only-child > hr:only-child) > td,
:is(#maintable, .maintable) > :is(tbody, tfoot):last-child > tr:last-child > td {
    border-bottom: 0;
}

:is(#maintable, .maintable) > * > tr + tr[data-header][valign=bottom] > td {
    border-top: 1px solid #eee;
}

:is(#maintable, .maintable) > * > tr > td:only-child > hr:only-child {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

/* Numbers line up in right aligned columns */
/* Below a full-width screen the side padding goes back to what it was, so wide lists do not
   start to scroll sideways */
@media (max-width: 1439px) {
    :is(#maintable, .maintable) td {
        padding-left: 8px;
        padding-right: 8px;
    }

    :is(#maintable, .maintable) th {
        padding-left: 8px;
        padding-right: 8px;
    }
}

:is(#maintable, .maintable) td:is([align=right], [align=RIGHT]) {
    font-variant-numeric: tabular-nums;
}

/* Links in cells read as text until hovered; the row lines are the structure now */
:is(#maintable, .maintable) td a:is(:link, :visited) {
    color: inherit;
    text-decoration: none;
}

:is(#maintable, .maintable) td a:hover {
    text-decoration: underline;
}

/* A selected or warning row also has a bar on the left, so it does not rely on colour alone */
:is(#maintable, .maintable) :is(tr.sel, tr.selfi) > td:first-child {
    box-shadow: inset 3px 0 0 #888;
}

#maintable tr.trwarn > td:first-child {
    box-shadow: inset 3px 0 0 #d9485f;
}

#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: var(--list-bg);
}

.maintable .trheadline td{
    font-weight:bold;
    background-color: #f2f2f2;
    border-top: 1px solid #d4d4d4;
}

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

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



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

.maintable .trwhiteitalic td{
    font-style: italic;
    background-color: var(--list-bg);
}

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

.maintable .trsum td{
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
    font-weight: 600;
}

.dimmedtext{
    color:#777 !important;
}

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

.dimmedtd td{
    color:#666;
}

.dimmedtd td{
    color:#666;
}

.maintable{
    width:100%;
    border: 1px solid #ddd;
    border-radius: var(--radius-box);
    border-spacing: 0;
    background-color: var(--list-bg);
    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: var(--list-bg);
}

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

#maintable .trheadline td{
    font-weight:bold;
    background-color: #f2f2f2;
    border-top: 1px solid #d4d4d4;
}

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

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

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

#maintable .trsum td{
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
    font-weight: 600;
}

#maintable tr{
    background-color: var(--list-bg);
}

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

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

.maintable tr, .stripedtr{
    background-color: var(--list-bg);
}

#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%;
}
/* Sort arrows after a sortable column's title: drawn (a small up/down pair, or the one
   direction the list is sorted in) instead of the \25b2\25bc characters, which sat at the
   foot of the text at 65% size. 7x10 centred on the title's middle (vertical-align -.1em
   puts the box's centre about half way up the capitals). */
.tablesorter_neutral .sortfield::after,
.tablesorter_asc .sortfield::after,
.tablesorter_desc .sortfield::after {
    content: "";
    display: inline-block;
    width: .58em;
    height: .84em;
    margin-left: .35em;
    vertical-align: -.1em;
    background: currentColor;
    -webkit-mask: var(--sort-arrow) center / contain no-repeat;
    mask: var(--sort-arrow) center / contain no-repeat;
}

.tablesorter_neutral .sortfield::after {
    --sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 5h6L4 1.5z'/%3E%3Cpath d='M1 7h6L4 10.5z'/%3E%3C/svg%3E");
    opacity: .4;
}

.tablesorter_neutral .sortfield:hover::after {
    opacity: .7;
}

.tablesorter_asc .sortfield::after {
    --sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 5h6L4 1.5z'/%3E%3C/svg%3E");
    opacity: .85;
}

.tablesorter_desc .sortfield::after {
    --sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 7h6L4 10.5z'/%3E%3C/svg%3E");
    opacity: .85;
}

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

/* A list is as wide as its content needs: at least --pa-list-min (or the box it sits in, if
   narrower), at most the page. A page that gives the table a fixed width in its markup keeps it. */
#maintable{
    width:100%;
    border: 1px solid #ddd;
    border-radius: var(--radius-box);
    border-spacing: 0;
    background-color: var(--list-bg);
    margin:0 0 0 0;
}

:is(#maintable, .maintable):not([width]:not([width="100%"])) {
    width: auto;
    min-width: min(100%, var(--pa-list-min));
    /* A full-width table always went below a floated button bar; a narrower one would slip in
       beside it, so keep it below */
    clear: both;
}

/* A list that shares its block with a floated button bar: the block shrinks to the list instead, and
   the list fills it, so the bar still ends at the list's right edge */
:is(#pcontent, #pcontent div, #pcontent form):not(.pa-pagebox, :has(.pa-pagebox), :is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70), :is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70) *):has(:is(#maintable, .maintable):not([width]:not([width="100%"]))):has(> [style*="float:right"], > [style*="float: right"], > * > [style*="float:right"], > * > [style*="float: right"]) {
    width: fit-content;
    min-width: min(100%, var(--pa-list-min));
    max-width: 100%;
}

:is(#pcontent, #pcontent div, #pcontent form):has(> [style*="float:right"], > [style*="float: right"], > * > [style*="float:right"], > * > [style*="float: right"]) :is(#maintable, .maintable):not([width]:not([width="100%"])):not(td *),
.pa-pagebox :is(#maintable, .maintable):not([width]:not([width="100%"])):not(td *) {
    width: 100%;
}

/* The two-column layouts (.pa_20_80_*, .pa_30_70_*: a narrow list beside a wide one, as on
   cm/files) keep their percentage widths: the list rules above would make the page and each column
   at least --pa-list-min wide, which pushed the wide column under the narrow one. The tables fill
   their column. */
#pagemaxwidth:has(:is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70) :is(#maintable, .maintable)) {
    width: auto;
}

/* The process editor (process.edit) lays its panels out on a flex line that fills the page: the
   side panels and the docked task are dragged to a width, and the process list takes what is
   left. Sized to its content instead, the page grew and shrank with every drag, so the panel's
   edge ran away from the pointer - a right-docked task dragged left widened the page to the
   right and its bar stayed put, up to 200px off. It fills the page width like any page. */
#pagemaxwidth#pagemaxwidth:has(#processLayout) {
    width: auto;
    min-width: 0;
}

/* In full width the editor takes the whole window: its panels are dragged to the room there
   is, and the 2200px cap that keeps a list's lines readable left a strip unused beside them */
html.layout-fullwidth #pagemaxwidth#pagemaxwidth:has(#processLayout) {
    max-width: 100%;
}

/* The list's table fills its column, and gives way with it down to the column's own minimum
   (360px, js/processedit-panelresize.js) instead of holding the list minimum of a page of
   lists. Without the width it stopped at its content (1100px) and left a gap before the
   docked task. */
#processTasksContainer > table#container.maintable {
    width: 100%;
    min-width: 0;
}

:is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70),
:is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70) form {
    min-width: 0;
}

:is(.pa_20_80_20, .pa_20_80_80, .pa_30_70_30, .pa_30_70_70) :is(#maintable, .maintable):not([width]:not([width="100%"])):not(td *) {
    width: 100%;
    min-width: 0;
}

#pcontent{
    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;
}

/* The column breakpoints further down (one below 771px, three from 1470px) are window widths that
   predate the sidebar. With the sidebar open it takes 240px of the window (menu-vertical.css), so
   both steps come 240px later; folded to its 64px, or as the phone's overlay, it leaves them be. */
@media (min-width: 768px) and (max-width: 1010px) {
    html.pa-menu-vertical:not(.pa-side-collapsed) .pgraphboxouterborder3 {
        width: 100%;
    }
}

@media (min-width: 1470px) and (max-width: 1709px) {
    html.pa-menu-vertical:not(.pa-side-collapsed) .pgraphboxouterborder3 {
        width: 50%;
    }
}

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

/* A thin line between the page's two filter groups, as tall as the taller one
   (js/pa_toolbox.js sets the height; 60px until then) */
#toptoolboxseperator{
    float:left;
    width:1px;
    margin:12px 16px 0 6px;
    background-color:#ddd;
    height:60px;
}

/* Nothing beside it to separate (js/pa_toolbox.js) */
#toptoolboxseperator.pa-separator-alone {
    display: none;
}

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

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

/* The selected one of a row of view buttons (tabs, periods, groupings): filled graphite, so it
   reads as "on". It used to be greyed out and looked disabled. Defined with the buttons below. */
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;
}

/* A button that deletes or cancels something. After the button rules above,
   which it has to outrank, also on hover. */
button.btn-delete, input.btn-delete,
button.btn-delete:hover, input.btn-delete:hover{
    color: red;
}

/* How old the agent's data is, under the links in a right toolbox (cm/modems,
   cm/nodes): a line of its own, and red when the data is old. Only as wide as
   its text, so the red is not a bar across the box. */
.toolbox-dataage {
    width: fit-content;
    margin-top: 2px;
    font-size: x-small;
}

.toolbox-dataage-old {
    background-color: #f99;
    /* Dark text on the pink in both themes; the light dark-mode text is unreadable on it */
    color: #000;
}

/* A small bracketed link in a toolbox, like [import/export]. */
.toolbox-link{
    font-size: 11px;
}

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

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

#cleardiv{
    clear: both;
}
.cleardiv{
    clear: both;
}

.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 .icon{
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding:1px;
    margin: 3px 4px 0 3px;
}

/* The stand-in box (span.icon with a font-awesome tick) the .filters checkboxes used to hide
   their input behind. The input is drawn itself now, like every other checkbox (see
   "Checkboxes are drawn on the real input" below), so the stand-in is not shown. */
.filters .icon {
    display: none !important;
}

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

/* A .filters checkbox with its text in the same label (delivery options on the customer page,
   and the like): box and text on one centre line, 6px apart. The spacing used to come from
   the stand-in box, which is hidden now (see .filters .icon below). */
.filters label:has(> input[type=checkbox]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    vertical-align: middle;
}

.filters label:has(> input[type=checkbox]):last-child {
    margin-right: 0;
}

.filters label > input[type=checkbox] {
    margin: 0;
}

/* Delivery options (customer page, address move, port edit): each technology's checkboxes in two
   fixed columns, so TV and Internet line up from one technology to the next and a wrapped row
   gets air above it. The technology name sits on the first row's line. */
#deliveryoptionsedit {
    border-collapse: collapse;
}

#deliveryoptionsedit td {
    vertical-align: top;
    line-height: 20px;
}

#deliveryoptionsedit td.filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(88px, max-content));
    gap: 6px 12px;
    padding: 0 0 10px;
}

#deliveryoptionsedit tr:last-child td.filters {
    padding-bottom: 0;
}

#deliveryoptionsedit td.filters label {
    margin-right: 0;
}


/* 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) {
}



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


.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. The list under the
   title scrolls, not the box, so the title stays put and the scrollbar starts
   below it. */
.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;
    display: flex;
    flex-direction: column;
}

.pa_kvset.processeslist > ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* macOS with "Show scroll bars: Automatically" uses overlay scrollbars that
   only appear while scrolling, so a capped list looks complete when it is
   not. Styling the WebKit scrollbar opts out of the overlay style, keeping
   it visible whenever the list overflows. Drawn like the native macOS
   always-on scrollbar - transparent track, translucent rounded thumb inset
   by a transparent border - so it sits on the box's own grey rather than
   adding a lane of its own.
   Scoped to html.overlay-scrollbars, which detectOverlayScrollbars() in
   js/gui.js sets only when scrollbars take no layout space - Windows and
   Linux keep their native, already-visible scrollbars. */
html.overlay-scrollbars .pa_kvset.processeslist > ul::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}

html.overlay-scrollbars .pa_kvset.processeslist > ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.30);
    border-radius: 6px;
    /* The border keeps the thumb off the box edge; background-clip stops
       the colour from filling it. */
    border: 3px solid transparent;
    background-clip: padding-box;
}

html.overlay-scrollbars .pa_kvset.processeslist > ul::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.45);
}

/* Chromium ignores ::-webkit-scrollbar rules on an element whose
   scrollbar-width/scrollbar-color is set, so the thin scrollbar the box used
   to carry is kept only where the rules above are not in play. */
html:not(.overlay-scrollbars) .pa_kvset.processeslist > ul {
    scrollbar-width: thin;
}

/* Firefox does not support ::-webkit-scrollbar, but paints its own
   always-visible scrollbar once scrollbar-color is set. Guarded to Firefox,
   because a non-auto scrollbar-color would make Chromium ignore the WebKit
   rules above. */
@supports (-moz-appearance: none) {
    html.overlay-scrollbars .pa_kvset.processeslist > ul {
        scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
        scrollbar-width: thin;
    }
}

/* The title sits outside the scrolling list and does not shrink when the list is long */
.pa_kvset.processeslist > h3 {
    flex: none;
}

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

/* Label and field side by side, the label centred on the field's height */
.pa_kvset3070 ul li{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.pa_kvset3070 ul li div:nth-child(2){
    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;
    /* Over the page, under the popups (100): at 0, anything on the page with a stacking
       order of its own (the sticky process filter, z-index 1) was drawn on top of it */
    z-index: 90;
}

/* A box opened with dialogwindow() (js/gui.js) sits on body without a z-index of its own:
   over the dimmer, under the popups, as before the dimmer had one */
body > :has(> .dialogwindow) {
    z-index: 95;
}

.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 address ident at the right of the first address line. Toned down with
   opacity rather than a grey, so it follows the text colour in dark mode too. */
.pa_kvset ul li div.addresslines .addressident {
    float: right;
    margin-left: 12px;
    font-size: 0.85em;
    opacity: 0.7;
}

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

/* The billing address/contact section works the same way with its own +: its
   rarely used rows wait for .billinginfo-all, apart from the advanced rows. */
.pa_kvset ul li.billinginfoextra {
    display: none;
}

.pa_kvset.billinginfo-all ul li.billinginfoextra {
    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);
}

/* A row of buttons in a box (li.buttonrow, e.g. Historik ... Flyt on the customer page):
   centred in the row, the left cell's buttons at the left, the rest at the right, 8px apart */
.pa_kvset ul li.buttonrow {
    display: flex;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

.pa_kvset ul li.buttonrow > div {
    float: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.pa_kvset ul li.buttonrow > div:nth-child(2) {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
}

.pa_kvset ul li button.rowbutton {
    margin: 0;
}

/* 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 command list under each group
   title, two columns. A process is a flat row with a chevron, not a button
   box: white buttons on the white box did not read as anything, and 20-30
   framed buttons made the box the heaviest thing on the page. Hover fills the
   row. Long names wrap instead of being cut off in a narrow column.
   The colours are variables so darkmode.css only sets values. */
:root {
    --proc-rule: #ececec;
    --proc-hover: #f1f2f3;
    --proc-chevron: #a9adb3;
    --proc-group: #5f646b;
    --proc-muted: #8a9099;
    --proc-mark: #e4e4e4;
    --proc-divider: #c8c8c8;
}

/* The filter over a process list (js/default.js, initProcessFilters): pinned at the top of
   the scrolling box, under its title */
.processfilter {
    position: sticky;
    top: var(--processfilter-top, 0);
    z-index: 1;
    padding: 6px 10px 6px;
    background: var(--kv-bg);
}

.processfilter input.processfilter-input {
    width: 100%;
    height: 26px;
    padding: 0 30px 0 28px;
    font: 400 13px Inter, 'Open Sans', sans-serif;
    background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 8px center / 14px;
}

.processfilter kbd {
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -8px;
    padding: 0 4px;
    font: 500 11px/15px Inter, 'Open Sans', sans-serif;
    color: var(--proc-muted);
    border: 1px solid var(--field-border);
    border-radius: 2px;
    pointer-events: none;
}

.processfilter:focus-within kbd {
    display: none;
}

/* The field's clear button in the muted text colour, both themes */
.processfilter input.processfilter-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background-color: var(--proc-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px;
    cursor: pointer;
}

.processfilter-none {
    padding: 8px 10px 10px;
    font: 400 12px Inter, 'Open Sans', sans-serif;
    color: var(--proc-muted);
}

/* In a box the filter pins to the top of the scrolling list, right under the title. The row's
   first two divs are floated as label and value (.pa_kvset ul li div:nth-child(n)); the filter
   and its "no match" line are full-width rows instead. */
.pa_kvset.processeslist {
    --processfilter-top: 0px;
}

.pa_kvset ul li div.processfilter,
.pa_kvset ul li div.processfilter-none {
    float: none;
    width: auto;
    font: inherit;
}

/* The bar's own parts (the field, the group pills) are not the box's label/value cells */
.pa_kvset ul li div.processfilter > div.processfilter-field,
.pa_kvset ul li div.processfilter > div.processpills {
    float: none;
    width: auto;
    padding: 0;
    text-align: left;
    line-height: normal;
}

/* The field's edge on the line where the process names start (the rows' 10px padding) */
.pa_kvset ul li div.processfilter.processfilter {
    padding: 6px 10px 6px 10px;
}

.pa_kvset ul li div.processfilter-none.processfilter-none {
    padding: 6px 10px;
}

/* Quicklinks (view/customers/templates/accounting) wraps the list in one more div, which
   the box floats and pads as a label cell; the list there is the whole row */
.pa_kvset ul li > div:has(> .processbuttons) {
    float: none;
    width: auto !important;
    padding: 0;
}

/* What the filter hides stays hidden, whatever display the rules above give it */
.processbuttons[hidden],
.processbuttons button.processbutton[hidden],
.pa_groupheader[hidden],
.processfilter-none[hidden] {
    display: none !important;
}

/* Two columns that read down each column, A-Z (the server sets --rows to half the count) */
.processbuttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 1), auto);
    grid-auto-flow: column;
    column-gap: 12px;
    width: 100%;
    margin-bottom: 0;
}

/* .processbuttons in front outweighs the general button rules at the end of this file */
.processbuttons button.processbutton {
    position: relative;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 26px;
    margin: 0;
    padding: 4px 24px 4px 10px;
    justify-content: flex-start;
    align-items: baseline;
    gap: 6px;
    text-align: left;
    white-space: normal;
    font: 400 13px/1.25 Inter, 'Open Sans', sans-serif;
    color: var(--btn-text, #2b2f33);
    background: transparent;
    border: 0;
    border-radius: var(--radius-ctl);
    transition: background-color .12s;
}

/* A process from a small group carries the group's name in front; the name gets the room */
.processbuttons button.processbutton .processbutton-group {
    flex: 0 1 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--proc-muted);
    white-space: nowrap;
}

.processbuttons button.processbutton .processbutton-group::after {
    content: " \203A";
}

/* One line per process, so the two columns stay in step; the full name is the tooltip */
.processbuttons button.processbutton .processbutton-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The filter's match, and the row Enter would start */
.processbuttons button.processbutton mark {
    background: none;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--proc-muted);
    text-underline-offset: 2px;
}

.processbuttons button.processbutton.is-current {
    background: var(--proc-hover);
    box-shadow: inset 2px 0 0 var(--btn-primary-bg);
}

/* The chevron: a mask, so it takes its colour from background-color in both themes */
.processbuttons button.processbutton::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background-color: var(--proc-chevron);
    opacity: 0;
    transition: opacity .12s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px;
}

.processbuttons button.processbutton:hover,
.processbuttons button.processbutton:focus-visible {
    color: var(--btn-text, #2b2f33);
    background: var(--proc-hover);
}

.processbuttons button.processbutton:hover::after,
.processbuttons button.processbutton:focus-visible::after,
.processbuttons button.processbutton.is-current::after {
    opacity: .6;
    background-color: var(--btn-text, #2b2f33);
}

.processbuttons button.processbutton:active {
    background: var(--btn-bg-active, #e4e4e4);
}

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

/* The group title over a process list: a quiet label with the number of processes, and
   space above it rather than a rule, so the groups read as sections of one list. Only
   where a process list follows; the other .pa_groupheader lists keep the rule. */
.pa_groupheader:has(+ .processbuttons),
.pa_kvset ul li div.pa_groupheader:has(+ .processbuttons) {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 22px 0 4px;
    padding: 0 10px;
    border-top: 0;
    font: 600 11px Inter, 'Open Sans', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--proc-group);
}

.pa_groupheader .processgroup-count {
    font-weight: 500;
    color: var(--proc-muted);
}

.pa_groupheader .processgroup-count::before {
    content: "\00B7  ";
}

/* The first group sits right under the box title: no rule above it. gui_getProcessListCore
   puts an empty hidden div before every title, so the first title is the one right after
   the container's first child. */
:first-child + .pa_groupheader:has(+ .processbuttons),
.pa_kvset ul li :first-child + div.pa_groupheader:has(+ .processbuttons) {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

.pa_groupheader:has(+ .processbuttons)::before,
.pa_groupheader:has(+ .processbuttons)::after,
.pa_kvset ul li div.pa_groupheader:has(+ .processbuttons)::before,
.pa_kvset ul li div.pa_groupheader:has(+ .processbuttons)::after {
    display: none;
}

/* Fields in a key/value row use the compact control height (26px) and are
   pulled up by 3px into the cell's 7px padding, so they sit centred on the
   label's line inside the fixed 34px row instead of spilling into the next one.
   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 {
    --ctl-h: 26px;
}

.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]),
.pa_kvset ul li select:not([multiple]):not([size]:not([size="1"])) {
    margin: -3px 0;
}

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

/* A small x inside a text field that empties it, as on cm/productconfig:
   <span class="clearfield"><input ...><button type="button" class="clearfield-btn"
   hidden>&times;</button></span>. The page shows the button while the field has a
   value. A bare glyph, and nothing changes under the mouse - the general button
   and button:hover rules outweigh the class alone, hence :hover here. */
.clearfield {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.clearfield input {
    box-sizing: border-box;
    padding-right: 22px;
}

.clearfield-btn,
.clearfield-btn:hover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2px;
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    color: #555;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.clearfield-btn[hidden],
.clearfield input.hidden + .clearfield-btn {
    display: none;
}

html.theme-dark .clearfield-btn,
html.theme-dark .clearfield-btn:hover {
    color: #9aa4b0;
}

@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not(.theme-dark) .clearfield-btn,
    html:not(.theme-light):not(.theme-dark) .clearfield-btn:hover {
        color: #9aa4b0;
    }
}

/* cm/errorlog: the type filters on one line, and the rows under them flush
   left, as there is no label column. */
.errorlogfilters {
    --filterbox-label: 0px;
}

.errorlogtypes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 1px 0;
}

.errorlogtypes label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.errorlogtypes input {
    margin: 0;
}

.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;
    min-width:350px;
    width:fit-content;
    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: #555555; font-weight: bold; }
.emailqueue-status-running { color: #b07000; font-weight: bold; }
.emailqueue-status-failed  { color: #cc0000; font-weight: bold; }
.emailqueue-status-success { color: #2a7a2a; 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) -- */
.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;
    /* Room for the sticky group header, so a row the arrow keys scroll to is not hidden under it */
    scroll-padding-top: 26px;
}
.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;
    /* Stays on top while its group scrolls by, so it is always clear which group a row is in */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
}

/* A button per result group under the header: shows all of that group */
.search-source-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 2px;
}
.search-source-filter {
    margin: 0;
    padding: 3px 8px;
    border: 0;
    border-radius: 4px;
    background: #f1f3f6;
    font: inherit;
    font-size: 11px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: #444444;
    cursor: pointer;
}
.search-source-filter:hover,
.search-source-filter.selected {
    background-color: #e4e8ee;
}
/* The number in a lighter shade, so the names are what the eye reads */
.search-source-count {
    margin-left: 2px;
    color: #999999;
}
/* The group on show; a click on it goes back to the first results */
.search-source-filter.is-active,
.search-source-filter.is-active:hover {
    background-color: #e3ecfa;
    color: #1a5fb4;
    font-weight: 600;
}
.search-source-filter.is-active .search-source-count {
    color: #6d93c7;
}
.search-source-filter.is-active.selected {
    background-color: #d3e1f7;
}

/* The question mark after a group header - a click opens what the group means */
.search-dropdown-help {
    margin-left: 5px;
    cursor: pointer;
    font-size: 11px;
}
/* The small box with that help. Fixed, so the dropdown's scrolling does not cut it off. */
.search-help-modal {
    position: fixed;
    z-index: 3001;
    width: 340px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 10px 28px 10px 12px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    line-height: 1.4;
    color: #333333;
    cursor: default;
}
.search-help-modal-title {
    margin-bottom: 4px;
    font-weight: 600;
}
.search-help-modal-text {
    white-space: pre-line;
}
/* The search tips, the same in every group's help */
.search-help-modal-tips {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e2e2e2;
}
.search-help-modal-tip {
    padding-left: 9px;
    text-indent: -9px;
}
.search-help-modal-close {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #888888;
    font-size: 12px;
    cursor: pointer;
}
.search-help-modal-close:hover {
    color: #333333;
}

#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,
.search-show-more.selected {
    background-color: #eef4ff;
}
/* Under a group the search cut short: fetches the next customers of it */
.search-show-more {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 14px 6px 54px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: #1a5fb4;
    text-align: left;
    cursor: pointer;
}
.search-show-more:hover {
    text-decoration: underline;
}
/* While the next customers are on their way */
.search-show-more:disabled {
    cursor: default;
    opacity: 0.5;
    text-decoration: none;
}

/* The magnifying glass in front of a remembered search - in the star's place */
.result-icon {
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-size: 11px;
    color: #999999;
}

.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;
}
/* "Search tips" under "no results" - opens the same help box as a group's question mark */
.search-dropdown-empty .search-dropdown-tipslink {
    /* On its own line, centred, only as wide as its text */
    display: table;
    margin: 8px auto 0;
    font-size: 12px;
    color: #1a5fb4;
}
.search-dropdown-empty .search-dropdown-tipslink:hover {
    text-decoration: underline;
}


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

/* Email integration: fallback comparison + help text (dark overrides in darkmode.css) */
.fallback-title {font-weight: bold; }
/* A field whose value differs from its integration owner's defaults. Blue, not orange or red: a
   custom value is a deliberate choice, and green/amber/red already mean state on the same form. */
.maintable input.deviates, .maintable select.deviates, .maintable textarea.deviates {
    border-left: 3px solid #3f6ea8;
}
.maintable td.deviates-label {
    box-shadow: inset 3px 0 0 #3f6ea8;
}
.maintable td.deviates-summary {
    color: #3f6ea8;
    border-bottom: 1px solid #ccc;
}

.fallback-cmp { display: block; margin-top: 4px; font-size: 0.8em; color: #777; }
.fallback-cmp.differ { color: #ff8100; font-weight: bold; }

/* Process task edit dialog. The window carries resize:both, so nothing inside
   it may be sized in pixels - the label column takes a share of the width and
   every field fills what is left. Checkboxes, radios and file pickers keep
   their own size; stretching those only moves the control away from its label. */
#editProcessTask #task_holder td.tasklabel {
    width: 30%;
}

#editProcessTask #task_holder td.taskfield > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
#editProcessTask #task_holder td.taskfield > textarea,
#editProcessTask #task_holder td.taskfield > select {
    width: 100%;
    box-sizing: border-box;
}

/* The task whose edit dialog is open, marked in the process task list so it is
   clear which row the dialog belongs to. The colour sits on the cells rather
   than the row: headline tasks paint their own background on the tr, which
   would otherwise win. */
.maintable tr.processtask-open td {
    background-color: #cfe0f7;
}

.maintable tr.processtask-open td:first-child {
    box-shadow: inset 3px 0 0 #2064d4;
}

/* The view icons in the process task dialog title bar: the pin, and the mode
   and side icons beside it. The icons around them are 20px images floated onto
   the same line, so giving every glyph a box of that height lines them all up
   on one centre, and the nudge settles them against the two round icons. */
.popuppin,
.popupmodeicon {
    color: #fff;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    margin-top: 1px;
}

/* The pin alone has an off state: lying on its side it is only offered, upright
   and lit it is holding the placement the next task opens at. The other two
   always name a view that is there to be switched to. */
.popuppin {
    opacity: 0.55;
    transform: rotate(-45deg);
}

.popuppin.is-pinned {
    opacity: 1;
    transform: none;
}

/* Lit under the pointer like the two beside it, so all three answer to
   being pointed at. The tack keeps its tilt: that says what it holds, not
   whether it can be clicked. */
.popuppin:hover {
    opacity: 1;
}

/* Drawn larger than the tack: these two are boxy glyphs where the tack is a
   point, so at a shared size they read as the smaller of the three. The size
   is the font, not the box - the box only decides where the glyph sits. */
.popupmodeicon {
    opacity: 0.43;
    font-size: 19px;
}

.popupmodeicon:hover {
    opacity: 1;
}

/* The process task dialog scrolls its own content, which used to take the
   title bar with it - and with it the close button, the step arrows and the
   handle the window is dragged by. Keep it at the top of the scrollport.
   Scoped to this dialog: .dhead is the title bar of popups all over the app. */
/* The colour the dialog is drawn on. The sticky bars have to cover the content
   sliding under them, so they need to paint this exact colour - hence one name
   for it here rather than the same literal in four places. darkmode.css gives
   it the dark surface, and everything that refers to it follows. */
#editProcessTask {
    --taskdialogbg: rgb(238, 238, 238);
    /* The title bar is drawn in the task list's header colour, so the two read as
       one header across the gap. darkmode.css overrides it alongside the surface. */
    --taskheadbg: #777;
    background-color: var(--taskdialogbg);
}

#editProcessTask .dhead {
    background-color: var(--taskheadbg);
    position: sticky;
    top: 0;
    z-index: 2;
    /* The dialog carries padding of its own, and content scrolling past would
       show through the gap above the stuck bar. The shadow is a solid block in
       the dialog's own background colour: it costs no layout, it cannot be
       told apart from the gap while the bar is parked at the top, and once the
       bar sticks it keeps the gap looking like a gap. */
    box-shadow: 0 -12px 0 var(--taskdialogbg);
}

/* Same for the button row at the foot of the dialog: Luk and Gem stay in reach
   however far down the fields run. It needs a background of its own - unlike
   the title bar it had none, and the rows would scroll through it. */
#editProcessTask .taskbuttons {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: var(--taskdialogbg);
    box-shadow: 0 12px 0 var(--taskdialogbg);
}

/* The dialog title. overflow:hidden gives it a formatting context of its own,
   so it takes the width the floated icons leave instead of running under them,
   and the same property is what lets the text clip to an ellipsis. */
#editProcessTask .taskheadtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

/* Floor for the resize grip. Below this the title bar loses its buttons and
   the fields have no room left to speak of. */
#editProcessTask {
    min-width: 350px;
    min-height: 200px;
}

/* Docked mode: the task is not a window any more but a panel in the left
   column, so everything that made it float is undone. It keeps its id, and
   with it every selector and handler that already knew where to find it. */
#taskEditPanel {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: top;
}

#editProcessTask.is-docked {
    /* The boxes either side of it open with a table.maintable, which carries a
       5px top margin. The docked task starts with its title bar instead, so it
       has to take the same margin to line up with them. */
    margin-top: 5px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    resize: none;
    z-index: auto;
    padding: 0;
    box-shadow: none;

    /* What .stickyPanelContent in process.edit does for the settings panel:
       stay with the reader down the page, capped to the window and scrolling
       inside itself, rather than sliding away as the task list runs on. Long
       tasks are taller than the screen, so without this the fields at the
       bottom could only be reached by scrolling the whole page past them. */
    position: sticky;
    top: 4px;
    max-height: calc(100vh - 8px);
    overflow: hidden auto;
}

/* Nothing to drag it by, and nothing above it to cover. */
#editProcessTask.is-docked .dhead {
    cursor: default;
    box-shadow: none;
    /* Sit level with the task list's own header row across the way. The bar is
       shorter than that on its own, being built from a smaller font. */
    --taskheadheight: 31px;
    box-sizing: border-box;
    min-height: var(--taskheadheight);
}

/* Fill the bar rather than leaving the text at the top of it: the line box is
   what the height is made of, so it takes the bar less its 6px of padding. */
#editProcessTask.is-docked .taskheadtitle {
    line-height: calc(var(--taskheadheight) - 12px);
}

/* Update page: the state of the system, stated before the detail table. Only
   the spans belonging to the current state are shown, so the banner can change
   state by swapping one class on the container. */
.updatestate {
    display: none;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid;
    border-left-width: 6px;
    border-radius: 3px;
    font: 12px/1.5 'Open Sans';
}

.updatestate-planned,
.updatestate-ordered,
.updatestate-running {
    display: flex;
}

.updatestate [data-updatestate] {
    display: none;
}

.updatestate-planned [data-updatestate="planned"],
.updatestate-ordered [data-updatestate="ordered"],
.updatestate-running [data-updatestate="running"] {
    display: block;
}

.updatestate-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 2px;
}

.updatestate-text {
    flex: 1;
    min-width: 0;
}

.updatestate-when {
    margin-top: 6px;
    font-size: 15px;
    font-weight: bold;
}

#updatestate_countdown {
    font-weight: normal;
    opacity: 0.8;
}

/* The icon is drawn rather than fetched: one glyph per state, and no request. */
.updatestate-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
}

.updatestate-planned .updatestate-icon::before {
    content: "\1F550";
}

.updatestate-ordered .updatestate-icon::before {
    content: "\2713";
}

.updatestate-running .updatestate-icon::before {
    content: "\21BB";
    display: inline-block;
    animation: updatestate-spin 3s linear infinite;
}

@keyframes updatestate-spin {
    to { transform: rotate(360deg); }
}

/* Amber for the two waiting states - something is coming, nothing is wrong.
   Blue for the running one, where the operator has to leave the machine be. */
.updatestate-planned,
.updatestate-ordered {
    border-color: #d98c00;
    background-color: #fff5e0;
    color: #6b4500;
}

.updatestate-planned .updatestate-icon,
.updatestate-ordered .updatestate-icon {
    background-color: #d98c00;
}

.updatestate-running {
    border-color: #2064d4;
    background-color: #e6efff;
    color: #123a7d;
}

.updatestate-running .updatestate-icon {
    background-color: #2064d4;
}

.updatestate-progress {
    margin-top: 8px;
}

/* The empty part of the bar has to read as a bar, not as a gap: at the start
   of a run there is nothing filled in yet, and a faint line on a faint panel
   looks like the progress bar failed to appear at all. */
.updatestate-track {
    margin-top: 4px;
    height: 12px;
    border: 1px solid #7ba0e0;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;
}

#updatestate_bar {
    width: 0;
    height: 100%;
    background-color: #2064d4;
    transition: width 0.3s;
}

/* No count to show: a segment drifts across the track so the bar still says
   "working" rather than "nothing is happening". Deliberately slow and a little
   faded - it may be on screen for minutes on end, next to an icon that is also
   turning, and an update is not an emergency. The fill is driven by the
   animation here, not by an inline width. */
.updatestate-track--sweeping #updatestate_bar {
    width: 30%;
    opacity: 0.75;
    animation: updatestate-sweep 3.2s linear infinite;
}

@keyframes updatestate-sweep {
    0%   { margin-left: -30%; }
    100% { margin-left: 100%; }
}

/* Some people get motion sick, and some just turn it off. The banner still
   says what is happening in words, so the moving parts can simply stop. */
@media (prefers-reduced-motion: reduce) {
    .updatestate-running .updatestate-icon::before,
    .updatestate-track--sweeping #updatestate_bar {
        animation: none;
    }

    .updatestate-track--sweeping #updatestate_bar {
        width: 100%;
        opacity: 0.4;
    }
}

/* "Show more" in an if-then-else process task: the branches after the first
   wait until it is clicked - see js/process-descriptions.js */
.ifthenelse-rest {
    display: none;
}
.ifthenelse-rest.is-open {
    display: inline;
}
.ifthenelse-showmore {
    cursor: pointer;
}
.ifthenelse-showmore-label {
    text-decoration: underline;
}

/* Process task descriptions - classes, as the process list drops inline styles */
.process-desc-danger {
    color: red;
}
.process-desc-ok {
    color: green;
}
.infoicon.process-desc-help {
    display: inline;
    cursor: help;
}
/* The validation error in front of a misconfigured task - a click shows why */
.process-validation-error {
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
.process-validation-error.is-disabled {
    color: inherit;
}
/* Its reason in the popup: lines and indents as the rules give them */
.process-validation-reason {
    white-space: pre-wrap;
    text-align: left;
}

/* -- Key/value boxes (.pa_kvset: the customer page, products, devices) in the lists' look, with
   the lists' own greys: the #e4e4e4 header, white rows split by #eee lines, the #ddd border, and the
   same 12px side padding. Floats and widths stay as they are, so the layouts inside the boxes keep
   their shape; the rows are a little taller and the boxes stand further apart. Last in the file on
   purpose: these override the older rules above with the same selectors. -- */

.pa_kvset,
.pa_kvsetduo {
    border: 1px solid #ddd;
    border-radius: var(--radius-box);
    background-color: var(--kv-bg);
}

.pgraphboxouterborder3 .pa_kvset {
    margin-bottom: 16px;
}

.pa_kvset h3 {
    background-color: #e4e4e4;
    color: #30353a;
    padding: 8px 12px;
    box-shadow: inset 0 -1px 0 #c8c8c8;
    font: 600 12px/16px Inter, 'Open Sans', sans-serif;
}

/* The white close icon (closeicon_white.png) in a list header, as the process editor's panels
   carry it: drawn for the old dark headers, it all but vanished on the light grey one. Dark here,
   white again in dark mode (darkmode.css). */
:is(#maintable, .maintable) th img[src$="closeicon_white.png"] {
    filter: brightness(0);
    opacity: .55;
}

:is(#maintable, .maintable) th img[src$="closeicon_white.png"]:hover {
    opacity: .85;
}

/* White buttons on the white boxes (customer page and the other key/value boxes) and in the
   action rows under them get a soft vertical lift and a translucent edge, so they stand off the
   box. Not the dark primary, not the flat process rows. Labels are 500; the primary keeps 600. */
.pa_kvset :is(button, input[type=button], input[type=reset], input[type=submit]):not(.processbutton, .processpill, .btn-primary, .togglefields),
.actionbar :is(button, input[type=button]):not(.btn-primary),
:is(table, .btn-seg) :is(button, input[type=button], input[type=reset], input[type=submit]):not(.processbutton, .processpill, .btn-primary, .btnselected, .togglefields, .btn-seg > *) {
    box-shadow: var(--btn-lift);
    border-color: var(--btn-lift-edge);
    font-weight: 500;
}

.actionbar :is(button, input[type=button]).btn-danger {
    border-color: var(--btn-danger-edge);
}

/* In the 26px rows of a box: a little smaller, narrower padding, label centred */
.pa_kvset ul li :is(button, input[type=button]):not(.processbutton, .processpill, .togglefields) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0 12px;
    font-size: 12.5px;
    letter-spacing: .01em;
    line-height: 1;
}

.actionbar :is(button, input[type=button], input[type=submit]) {
    min-width: 80px;
}

.pa_kvset input[type=submit]:not(:is(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]) ~ input[type=submit]):not(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]) {
    box-shadow: none;
}

:root {
    --btn-lift: 0 1px 2px rgb(0 0 0 / .10), 0 0 0 .5px rgb(0 0 0 / .04);
    --btn-lift-edge: rgb(0 0 0 / .16);
}

/* Combo field: a text field with a dropdown of the existing values beside it (process group,
   product group, shop categories). One control: the select sits under the text field and only its
   arrow end shows, styled like the other selects; picking a value copies it into the field.
   Markup: <span class="combo-field"><input type="text"><select>...</select></span> */
.combo-field {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: var(--combo-w, 220px);
    max-width: 100%;
    height: var(--ctl-h);
}

.combo-field-fill {
    --combo-w: 100%;
}

.combo-field > select {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    margin: 0;
    color: transparent;
}

.combo-field > select option {
    color: var(--field-text);
}

.combo-field > input[type=text] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: calc(100% - 28px) !important;
    height: 100%;
    margin: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The two halves react as one field */
.combo-field:hover > :is(input, select) {
    border-color: var(--field-border-hover);
}

.combo-field:focus-within > :is(input, select) {
    border-color: var(--ctl-focus);
}

.combo-field > input[type=text]:focus {
    outline: none;
}

/* Action rows under the customer page's boxes: destructive actions (expire, delete) gathered
   at the left edge of the column, the others (copy, add, move, save) at the right edge. */
.actionbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.actionbar-danger,
.actionbar-safe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.actionbar-safe {
    margin-left: auto;
}

.actionbar :is(button, input[type=submit], input[type=button]),
.actionbar label {
    margin: 0;
}

/* A destructive action: a secondary button in a muted red - red text and a pink edge, never
   the saturated red of .warncolor. Hover tints the face.
   The same look for every destructive button in the system: the older .warncolor (saturated
   red, !important) and .btn-delete buttons follow it. */
button.btn-danger,
input.btn-danger,
:is(button, input[type=submit], input[type=button]):is(.warncolor, .btn-delete),
:is(button, input[type=submit], input[type=button]):is(.warncolor, .btn-delete):is(:hover, :focus) {
    color: var(--btn-danger-soft) !important;
    border-color: var(--btn-danger-edge);
    background: var(--btn-bg);
}

button.btn-danger:hover,
input.btn-danger:hover,
:is(button, input[type=submit], input[type=button]):is(.warncolor, .btn-delete):hover {
    border-color: var(--btn-danger-soft);
    background: var(--btn-danger-hover);
}

:root {
    --btn-danger-soft: #a8423c;
    --btn-danger-edge: #e2bcb9;
    --btn-danger-hover: #fbf1f0;
}

/* The invoicing-method box folded: only the method in use shows, and its radio is no choice
   there - it comes back with the other rows when the box is unfolded */
.pa_kvset:not(.invoiceby-all) ul li.invoicebyoption input[type=radio] {
    display: none;
}

/* The account's set-password and self-service buttons: one column, always stacked, every
   button as wide as the widest, against the right edge of the value column where the fields
   above end */
/* .pa_kvset ul li div.accountbuttons.accountbuttons: outranks the float and width the box puts
   on the divs of a row (.pa_kvset ul li div:nth-child(n)) */
.pa_kvset ul li div.accountbuttons.accountbuttons {
    float: none;
    width: auto;
    padding: 0;
    display: grid;
    grid-template-columns: max-content;
    justify-content: end;
    justify-items: stretch;
    align-content: center;
    gap: 8px;
}

.pa_kvset ul li .accountbuttons button {
    margin: 0;
}


/* A section header inside the list (contact details, invoicing method) */
.pa_kvset ul li h3 {
    margin-top: 12px;
    box-shadow: inset 0 1px 0 #c8c8c8, inset 0 -1px 0 #c8c8c8;
}

.pa_kvset h3 .headerlink {
    color: #4a6d8c;
}

/* Rows: white with a line between, as in the lists; 34px instead of 26px */
.pa_kvset ul li,
.pa_kvset ul li:nth-child(2n+1),
.pa_kvset ul li:nth-child(2n),
.pa_kvset ul li.stripe-odd,
.pa_kvset ul li.stripe-even,
.pa_kvsetduo ul li,
.pa_kvsetduo ul li:nth-child(even),
.pa_kvsetduo ul li:nth-child(4n+3),
.pa_kvsetduo ul li:nth-child(4n) {
    background-color: var(--kv-bg);
    box-shadow: inset 0 -1px 0 #eee;
}

.pa_kvset ul li {
    height: 34px;
}

.pa_kvset ul li div:nth-child(1),
.pa_kvset ul li div:nth-child(2) {
    padding: 7px 12px 7px 12px;
}

/* The padding goes inside the value column's 60%, so label and value still fit side by side in a
   narrow box (three columns on a small screen) */
.pa_kvset ul li div:nth-child(2) {
    box-sizing: border-box;
}

/* The process buttons sit in a full-width div in the row; the cell padding above would push them
   past the box's right edge, where it cuts them off */
.pa_kvset ul li div.processbuttons {
    box-sizing: border-box;
}

/* The account's lock on the customer's group sits in a div of its own inside the value cell. As a
   first child it got the cell padding above a second time, which pushed the checkbox down under
   the next row */
.pa_kvset ul li div#unhideaccgkey {
    padding: 0;
}

/* The striped record lists (tasks, processes) keep a stripe, in the lists' greys */
.stripedlist ul li.stripe-odd {
    background-color: var(--kv-bg);
}

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

/* Group titles: a flat line in the border grey instead of the engraved one */
.pa_groupheader::before,
.pa_groupheader::after,
.pa_kvset ul li div.pa_groupheader::before,
.pa_kvset ul li div.pa_groupheader::after {
    border-top-color: #c8c8c8;
    border-bottom-color: transparent;
}

.pa_kvset ul li div.pa_groupheader {
    margin-top: 12px;
    padding: 4px 12px;
}

/* The status box beside the boxes follows */
.maintable.statusbox th {
    background-color: #e4e4e4;
    color: #30353a;
}

.maintable.statusbox td,
.maintable.statusbox tr td {
    background-color: var(--kv-bg);
}

/* ==========================================================================
   Buttons and fields
   One height for every button and text field (32px, 26px inside list cells) so
   a field and its button line up; flat surfaces in the lists' greys with the
   2px corners of the tables and the menu; the submit of a form is the primary
   action (graphite), every other button is secondary (white with a border).
   Plain element selectors, so a page's own class rules still win; this block
   only replaces the older global rules above. Dark values: darkmode.css.
   ========================================================================== */
:root {
    --ctl-h: 32px;
    --ctl-font: 13px;
    --ctl-pad-x: 16px;
    --btn-bg: #ffffff;
    --btn-bg-hover: #f3f3f3;
    --btn-bg-active: #e4e4e4;
    --btn-border: #c8c8c8;
    --btn-border-hover: #a9adb3;
    --btn-text: #2b2f33;
    --btn-primary-bg: #16191f;
    --btn-primary-bg-hover: #30353a;
    --btn-primary-text: #ffffff;
    --btn-danger-text: #c62828;
    --field-bg: #ffffff;
    --field-border: #c8c8c8;
    --field-border-hover: #a9adb3;
    --field-text: #2b2f33;
    --field-placeholder: #8a9099;
    --ctl-focus: #16191f;
    --ctl-check: #30353a;
}

/* Inside list rows the controls stay compact, so the rows keep their height and width */
:where(#maintable, .maintable, #maintable2) td {
    --ctl-h: 26px;
    --ctl-pad-x: 10px;
}

button, input[type=submit], input[type=reset], input[type=button] {
    box-sizing: border-box;
    height: var(--ctl-h);
    min-width: var(--ctl-h);
    margin: 2px;
    padding: 0 var(--ctl-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
    width: auto;
    font: 600 var(--ctl-font)/1 Inter, 'Open Sans', sans-serif;
    color: var(--btn-text);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-ctl);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s;
}

/* The selected view button (also inside .btn-seg): graphite fill, no hover change, a click on it
   does nothing new; pressing any other gives feedback at once (the page reload is slow) */
:is(button, input[type=button]).btnselected,
:is(button, input[type=button]).btnselected:is(:hover, :focus, :active) {
    position: relative;
    z-index: 1;
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    text-shadow: none;
    cursor: default;
}

.btn-seg > :is(button, input[type=button]):not(.btnselected):active {
    background: var(--btn-bg-active);
    transition: none;
}

/* .cpbutton (default.css) fixed the old 21px button with its own padding; it is just a button now */
:is(button, input[type=submit], input[type=button]).cpbutton {
    height: var(--ctl-h);
    margin: 2px;
    padding: 0 var(--ctl-pad-x);
}

button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
    color: var(--btn-text);
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    box-shadow: none;
    text-shadow: none;
}

button:active, input[type=submit]:active, input[type=reset]:active, input[type=button]:active {
    background: var(--btn-bg-active);
}

/* The primary action: the submit of a form, or a button marked .btn-primary */
input[type=submit], button.btn-primary {
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

input[type=submit]:hover, button.btn-primary:hover {
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
}

input[type=submit]:active, button.btn-primary:active {
    background: var(--btn-primary-bg);
}

/* One primary per group: when several submits sit side by side (Approve | Approve and export,
   a bulk bar), the first one is the primary and the rest are secondary.
   A destructive submit (delete, remove; marked .warncolor/.btn-delete, or named or wired to a
   delete action) is never the primary: it is a secondary with red text, and the first
   non-destructive submit in the group takes the primary instead (the task list's bulk bar
   starts with "Delete permanently", so "Open" is the primary there). */
input[type=submit]:not(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]) ~ input[type=submit],
input[type=submit]:not(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]) ~ input[type=submit]:hover {
    color: var(--btn-text);
    background: var(--btn-bg);
    border-color: var(--btn-border);
}

input[type=submit]:not(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]) ~ input[type=submit]:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
}

input[type=submit]:is(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]),
input[type=submit]:is(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]):hover {
    color: var(--btn-danger-soft);
    background: var(--btn-bg);
    border-color: var(--btn-danger-edge);
}

input[type=submit]:is(.warncolor, .btn-delete, .btn-danger, [name*="delete" i], [onclick*="delete" i], [onclick*="remove" i]):hover {
    background: var(--btn-danger-hover);
    border-color: var(--btn-danger-soft);
}

/* Delete / cancel: a secondary button with red text, also when it is a submit */
button.btn-delete, input.btn-delete,
button.btn-delete:hover, input.btn-delete:hover {
    color: var(--btn-danger-text);
    background: var(--btn-bg);
    border-color: var(--btn-border);
}

button.btn-delete:hover, input.btn-delete:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
}

button:disabled, input[type=submit]:disabled, input[type=reset]:disabled, input[type=button]:disabled,
button:disabled:hover, input[type=submit]:disabled:hover, input[type=reset]:disabled:hover, input[type=button]:disabled:hover {
    opacity: .5;
    cursor: not-allowed;
}

/* Keyboard focus: a clear ring, which the old buttons did not have */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ctl-focus);
    outline-offset: 1px;
}

/* Text fields and single selects: the button height, so a field and its button line up */
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email],
input[type=tel], input[type=url], input[type=date], input[type=datetime-local], input[type=time],
input[type=month], input:not([type]), select:not([multiple]):not([size]:not([size="1"])) {
    box-sizing: border-box;
    height: var(--ctl-h);
    margin: 0;
    padding: 0 8px;
    font: 400 var(--ctl-font) Inter, 'Open Sans', sans-serif;
    color: var(--field-text);
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-ctl);
    box-shadow: none;
    vertical-align: middle;
}

textarea, select[multiple], select[size]:not([size="1"]) {
    box-sizing: border-box;
    padding: 6px 10px;
    font: 400 var(--ctl-font)/1.45 Inter, 'Open Sans', sans-serif;
    color: var(--field-text);
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-ctl);
    box-shadow: none;
}

input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=image], [type=range], [type=color]):hover,
select:hover, textarea:hover {
    border-color: var(--field-border-hover);
}

input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=image], [type=range], [type=color]):focus,
select:focus, textarea:focus {
    border-color: var(--ctl-focus);
    outline: none;
    box-shadow: 0 0 0 1px var(--ctl-focus);
    background-color: var(--field-bg);
}

/* Single selects draw their own arrow: the browser's sits a few px from the right edge (closest
   in Safari), with no way to move it. appearance: none on the real select, the chevron as a
   background image 10px in from the edge, and room for it in the right padding. The text
   starts where the other fields' text does. Print and high contrast keep the native arrow. */
:root {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7178' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]:not([size="1"])) {
    -webkit-appearance: none;
    appearance: none;
    padding-left: 8px;
    padding-right: 30px;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    text-overflow: ellipsis;
}

@media print, (forced-colors: active) {
    select:not([multiple]):not([size]:not([size="1"])) {
        -webkit-appearance: auto;
        appearance: auto;
        padding-right: 8px;
        background-image: none;
    }
}

/* A field only a few characters wide (house number, floor, side) */
input.field-narrow {
    padding: 0 4px;
}

input::placeholder, textarea::placeholder {
    color: var(--field-placeholder);
}

input[type=checkbox], input[type=radio] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 2px;
    vertical-align: middle;
    accent-color: var(--ctl-check);
}

/* Checkboxes are drawn on the real input (appearance: none), not on a hidden
   input with a stand-in element: checked, onclick/onchange, labels, the
   keyboard, form posts and scripts that set .checked all keep working on the
   one element there is. 18px with 4px corners, graphite when checked, a dash
   when indeterminate (a "select all" with some rows chosen).
   The size is fixed with min/max as well, because a box with no appearance
   takes any width a broader input rule hands it. The tick is a background
   image, as inputs cannot be relied on to draw ::before/::after.
   Print and Windows high contrast go back to the browser's own box, see below. */
:root {
    --cb-size: 18px;
    --cb-bg: #ffffff;
    --cb-border: #a9adb3;
    --cb-border-hover: #6b7178;
    --cb-on: #2b2f33;
    --cb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: none;
    width: var(--cb-size);
    min-width: var(--cb-size);
    max-width: var(--cb-size);
    height: var(--cb-size);
    min-height: var(--cb-size);
    max-height: var(--cb-size);
    padding: 0;
    background: var(--cb-bg) no-repeat center / 16px;
    border: 1px solid var(--cb-border);
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

input[type=checkbox]:hover {
    border-color: var(--cb-border-hover);
}

input[type=checkbox]:checked {
    background-color: var(--cb-on);
    background-image: var(--cb-tick);
    border-color: var(--cb-on);
}

input[type=checkbox]:indeterminate {
    background-color: var(--cb-on);
    background-image: var(--cb-dash);
    border-color: var(--cb-on);
}

input[type=checkbox]:focus-visible {
    outline: 2px solid var(--cb-on);
    outline-offset: 2px;
}

input[type=checkbox]:disabled {
    opacity: .45;
    cursor: default;
}

/* Background images are not printed by default and high contrast mode drops
   them, which would lose the tick: the browser draws the box there. */
@media print, (forced-colors: active) {
    input[type=checkbox] {
        -webkit-appearance: auto;
        appearance: auto;
        width: 16px;
        min-width: 16px;
        max-width: 16px;
        height: 16px;
        min-height: 16px;
        max-height: 16px;
        background: none;
        border: 0;
    }
}

/* ==========================================================================
   Headline colours (process headlines and the references to them). The process
   author picks one of 16 colour names; each is drawn as a calm tint of the same
   family with a 3px bar in its colour on the left, instead of the saturated
   CSS colour. On a table row (tr.headline-color) the tint fills the cells; on
   an inline element (a step reference) it is a small label. Dark values:
   darkmode.css. A colour that is not one of the names (set through the API)
   keeps its own inline colours.
   ========================================================================== */
:root {
    --hl-hover: rgb(0 0 0 / .07);
}

.headline-color-default { --hl-bg: #f2f2f2; --hl-text: #2b2f33; --hl-bar: transparent; }
.headline-color-black { --hl-bg: #3a3f45; --hl-text: #f2f4f6; --hl-bar: #16191f; }
.headline-color-white { --hl-bg: #ffffff; --hl-text: #2b2f33; --hl-bar: #b0b0b0; }
.headline-color-silver { --hl-bg: #e8e9eb; --hl-text: #2b2f33; --hl-bar: #8f949a; }
.headline-color-gray { --hl-bg: #d6d8db; --hl-text: #2b2f33; --hl-bar: #6b7076; }
.headline-color-red { --hl-bg: #f8e6e4; --hl-text: #8a2f28; --hl-bar: #c2564c; }
.headline-color-maroon { --hl-bg: #e8d3d2; --hl-text: #6e2a2a; --hl-bar: #8f4a48; }
.headline-color-yellow { --hl-bg: #fbf3d9; --hl-text: #6b5200; --hl-bar: #b8962a; }
.headline-color-olive { --hl-bg: #e3e4c8; --hl-text: #4f5220; --hl-bar: #8d9147; }
.headline-color-lime { --hl-bg: #ecf4df; --hl-text: #3d5a14; --hl-bar: #6f9a33; }
.headline-color-green { --hl-bg: #d3e8d9; --hl-text: #1f5a32; --hl-bar: #4f9a66; }
.headline-color-aqua { --hl-bg: #def2f2; --hl-text: #1f5859; --hl-bar: #4fa3a5; }
.headline-color-teal { --hl-bg: #cfe3e3; --hl-text: #1c4f50; --hl-bar: #3f8486; }
.headline-color-blue { --hl-bg: #e3eaf5; --hl-text: #24406b; --hl-bar: #5577a8; }
.headline-color-navy { --hl-bg: #d5dbe8; --hl-text: #1f2c4d; --hl-bar: #46557a; }
.headline-color-fuchsia { --hl-bg: #f5e4f0; --hl-text: #73295f; --hl-bar: #b4569a; }
.headline-color-purple { --hl-bg: #e0d5ec; --hl-text: #4b2a6b; --hl-bar: #7b5a9c; }

tr.headline-color > td {
    background-color: var(--hl-bg) !important;
    background-image: none;
    color: var(--hl-text) !important;
    transition: background-image .12s;
}

tr.headline-color > td a {
    color: var(--hl-text) !important;
}

tr.headline-color > td:first-child {
    box-shadow: inset 3px 0 0 var(--hl-bar);
}

tr.headline-color.is-row-hover > td {
    background-image: linear-gradient(var(--hl-hover), var(--hl-hover)) !important;
}

:not(tr).headline-color {
    padding: 1px 6px 1px 8px;
    border-radius: 2px;
    background-color: var(--hl-bg);
    color: var(--hl-text);
    box-shadow: inset 3px 0 0 var(--hl-bar);
    font-weight: 600;
}

a > .headline-color,
a.headline-color {
    text-decoration: none;
}

/* A headline reference that is itself the link (multiJump, ifthenelse, findCustomer2 ...):
   the list's "links take the cell's colour" rule (#maintable td a:is(:link, :visited))
   outranks the class and gave the black label dark text on its dark tint. Same weight here. */
:is(#maintable, .maintable) td a.headline-color:is(:link, :visited),
a.headline-color:is(:link, :visited) {
    color: var(--hl-text);
}

a:hover > .headline-color,
a.headline-color:hover {
    background-image: linear-gradient(var(--hl-hover), var(--hl-hover));
}

/* Search box list (js/jquery-searchbox.js): the highlighted row is a neutral grey like the
   other hovers, not blue, and its text keeps its own colour - a headline colour stays
   readable when it is the highlighted one. */
.searchBoxElement li.selected, .searchBoxElement li.selected span::selection {
    background-color: var(--sb-hi-bg, #e8e8e8);
    color: var(--btn-text);
}

.searchBoxElement li.selected {
    box-shadow: inset 2px 0 0 var(--btn-primary-bg);
}

/* A headline colour in the list: the label of the process list, a little wider */
.searchBoxElement li > span.headline-color {
    display: inline-block;
    min-width: 72px;
    margin-left: 5px;
    padding: 1px 8px 1px 10px;
}

/* white would vanish on the white list: an outline shows the label */
.searchBoxElement li > span.headline-color-white {
    box-shadow: inset 3px 0 0 var(--hl-bar), inset 0 0 0 1px #d0d2d5;
}

/* Account picker in the Konto indstillinger header (accounting.editcustomer): the account
   the box shows as a small field, the customer's other accounts in a menu under it */
#accountsettings {
    /* the menu may reach past the box; flow-root keeps the box around its floats */
    overflow: visible;
    display: flow-root;
}

.accountpicker {
    position: relative;
    display: inline-block;
    margin: 0;
}

.pa_kvset h3 .accountpicker-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    min-width: 0;
    max-width: 240px;
    /* taller than the header's line: pulled into its padding, so the header keeps the
       height of the headers beside it */
    margin: -4px 0 -4px;
    padding: 0 8px 0 10px;
    font: 500 12px Inter, 'Open Sans', sans-serif;
    color: var(--btn-text);
    background: var(--btn-bg);
    border: 1px solid var(--btn-lift-edge, var(--btn-border));
    border-radius: var(--radius-ctl);
    box-shadow: var(--btn-lift);
    cursor: pointer;
}

.pa_kvset h3 .accountpicker-button:hover,
.pa_kvset h3 .accountpicker-button[aria-expanded="true"] {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
}

.pa_kvset h3 .accountpicker-button:focus-visible {
    outline: 2px solid var(--ctl-focus);
    outline-offset: 1px;
}

.accountpicker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountpicker-button::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: currentColor;
    opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
    transition: transform .12s;
}

.accountpicker-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.accountpicker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    display: block;
    box-sizing: border-box;
    min-width: 100%;
    width: max-content;
    max-width: 420px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-box);
    box-shadow: 0 6px 20px rgb(0 0 0 / .12);
    text-align: left;
}

.accountpicker-menu[hidden] {
    display: none;
}

.accountpicker-count {
    display: block;
    padding: 4px 12px 6px 32px;
    font: 500 11px Inter, 'Open Sans', sans-serif;
    color: var(--proc-muted, #8a9099);
}

.pa_kvset h3 a.accountpicker-item,
.pa_kvset h3 a.accountpicker-item:visited {
    position: relative;
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 12px 0 32px;
    font: 400 13px/32px Inter, 'Open Sans', sans-serif;
    color: var(--btn-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa_kvset h3 a.accountpicker-item:hover,
.pa_kvset h3 a.accountpicker-item:focus-visible {
    background: var(--btn-bg-hover);
    outline: none;
}

/* the account the box shows: a check in the left column */
.accountpicker-item.is-active::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: var(--btn-primary-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* while the page loads the other account */
#accountsettings.is-switching > ul {
    opacity: .5;
    transition: opacity .12s;
}

/* A box or section header with controls in it (account picker, show/hide fields): one row,
   everything centred on the title's middle, 8px apart; a header link goes to the right */
.pa_kvset h3:has(> .togglefields, > .accountpicker) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa_kvset h3:has(> .togglefields, > .accountpicker) > .headerlink {
    float: none;
    margin-left: auto;
}

/* Show / hide the extra fields of a section: a quiet 24px disclosure button, a chevron that
   points right and turns down when the section is open. Pulled into the header's padding, so the header keeps the
   height of the headers beside it. .togglefields twice: outranks the box's button rules. */
.pa_kvset h3 button.togglefields.togglefields {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    min-width: 0;
    height: 24px;
    margin: -5px 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-ctl);
    box-shadow: none;
    opacity: .7;
    cursor: pointer;
    transition: background-color .12s, opacity .12s;
}

.pa_kvset h3 button.togglefields.togglefields::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .15s;
}

/* closed: points right (more to show); open: points down */
.pa_kvset h3 button.togglefields.togglefields[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.pa_kvset h3 button.togglefields.togglefields:hover,
.pa_kvset h3 button.togglefields.togglefields:focus-visible {
    opacity: 1;
    background: rgb(0 0 0 / .07);
}

.pa_kvset h3 button.togglefields.togglefields:focus-visible {
    outline: 2px solid var(--ctl-focus);
    outline-offset: 0;
}

/* The process list's rows are buttons (they start a process): the same white, lifted button as
   the other buttons in the boxes, so they read as actions. Overrides the flat rows above.
   A press sinks a little; the chevron is faint at rest and full on hover. Dark: darkmode.css. */
.processbuttons {
    row-gap: 8px;
    column-gap: 8px;
}

/* Buttons and group titles start and end where the filter field does (its 10px inset) */
.processeslist:has(.processfilter) .processbuttons,
.processeslist:has(.processfilter) .pa_groupheader {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

/* Room under the last row of buttons, so the list does not end flush on the box's bottom edge
   (scrolled to the end, or a short list). The last group shown only - the group pills hide the
   others - as the groups above keep the gap their next title gives them. */
.processeslist .processbuttons:not([hidden]):not(:has(~ .processbuttons:not([hidden]))) {
    padding-bottom: 10px;
}

.processbuttons button.processbutton {
    min-height: 28px;
    padding: 4px 26px 4px 10px;
    align-items: center;
    font-weight: 500;
    background: var(--btn-bg);
    border: 1px solid var(--btn-lift-edge, var(--btn-border));
    box-shadow: var(--btn-lift);
    transition: background-color .12s, border-color .12s, transform .1s ease-out;
}

.processbuttons button.processbutton:hover,
.processbuttons button.processbutton:focus-visible {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    box-shadow: 0 1px 3px rgb(0 0 0 / .10);
}

/* the small-group prefix sits on the name's baseline */
.processbuttons button.processbutton:has(.processbutton-group) {
    align-items: baseline;
}

.processbuttons button.processbutton:active {
    transform: scale(.98);
    background: var(--proc-hover);
}

.processbuttons button.processbutton::after {
    opacity: .45;
}

.processbuttons button.processbutton:hover::after,
.processbuttons button.processbutton:focus-visible::after,
.processbuttons button.processbutton.is-current::after {
    opacity: 1;
}

.processbuttons button.processbutton.is-current {
    border-color: var(--btn-primary-bg);
}

@media (prefers-reduced-motion: reduce) {
    .processbuttons button.processbutton:active {
        transform: none;
    }
}

/* A process's full name over its button when the button cuts it (initProcessTips, js/default.js) */
.pa-tip {
    position: fixed;
    z-index: 300;
    max-width: 420px;
    padding: 5px 8px;
    font: 400 12px/1.35 Inter, 'Open Sans', sans-serif;
    color: #f2f4f6;
    background: #2b2f33;
    border-radius: var(--radius-box);
    box-shadow: 0 4px 12px rgb(0 0 0 / .18);
    pointer-events: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pa-tip[hidden] {
    display: none;
}

/* Combo field made one field (initComboFields, js/default.js): the text field across the whole
   width with a chevron at its end; the existing values open in a list under it. The select
   stays in the form, out of sight, carrying the pick. */
.combo-field.is-enhanced > select {
    display: none;
}

/* The right edge is the field's own again (the two-part field had none there). Its colour is
   set with the hover and focus colours beside it: given only a width and a style, it took the
   text colour and drew a dark line at the chevron. */
.combo-field.is-enhanced > input[type=text] {
    width: 100% !important;
    padding-right: 30px;
    border-right: 1px solid var(--field-border);
    border-radius: var(--radius-ctl);
}

.combo-field.is-enhanced:hover > input[type=text] {
    border-color: var(--field-border-hover);
}

.combo-field.is-enhanced:focus-within > input[type=text] {
    border-color: var(--ctl-focus);
}

.combo-field.is-enhanced > button.combo-field-toggle.combo-field-toggle {
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 28px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--field-text, #2b2f33);
    background: transparent;
    border: 0;
    border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0;
    box-shadow: none;
    cursor: pointer;
}

.combo-field.is-enhanced > button.combo-field-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: .6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition: transform .15s ease-out;
}

.combo-field.is-enhanced > button.combo-field-toggle:hover::before,
.combo-field.is-open > button.combo-field-toggle::before {
    opacity: 1;
}

.combo-field.is-open > button.combo-field-toggle::before {
    transform: rotate(180deg);
}

.combo-field.is-enhanced > button.combo-field-toggle:disabled {
    cursor: default;
    opacity: .4;
}

.combo-list {
    position: fixed;
    z-index: 300;
    box-sizing: border-box;
    max-width: 420px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--btn-bg, #ffffff);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-box);
    box-shadow: 0 6px 20px rgb(0 0 0 / .14);
    text-align: left;
}

.combo-list[hidden] {
    display: none;
}

/* the text lines up with the field's own (8px in); the current value's tick on the right */
.combo-list > div {
    position: relative;
    height: 30px;
    padding: 0 30px 0 8px;
    font: 400 13px/30px Inter, 'Open Sans', sans-serif;
    color: var(--btn-text, #2b2f33);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.combo-list > div.is-active {
    background: var(--btn-bg-hover);
}

.combo-list > div.is-current::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: var(--btn-primary-bg, #2b2f33);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.combo-list mark {
    background: none;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.combo-list > .combo-list-create {
    margin-top: 4px;
    border-top: 1px solid var(--btn-border);
}

.combo-list > .combo-list-create b {
    font-weight: 600;
}

.combo-list-plus {
    display: inline-block;
    width: 14px;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Column widths (initColumnResize, js/default.js): the edge of a heading under the pointer
   shows as a line and takes a drag; the heading row shows where the columns meet while the
   pointer is over it - not where .no-colresize opts out. A table with set widths cuts what
   does not fit instead of spilling. */
:is(#maintable, .maintable):not(.no-colresize, .no-colresize *) tr:hover > th + th {
    box-shadow: inset 1px 0 0 rgb(0 0 0 / .08);
}

:is(#maintable, .maintable) th.col-edge,
:is(#maintable, .maintable) tr:hover > th.col-edge {
    cursor: col-resize;
    box-shadow: inset -2px 0 0 var(--btn-primary-bg, #2b2f33);
}

:is(#maintable, .maintable) tr:hover > th.col-edge + th {
    box-shadow: none;
}

html.col-resizing,
html.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

table.is-colsized > * > tr > :is(td, th) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-guide {
    position: fixed;
    z-index: 200;
    width: 2px;
    background: var(--btn-primary-bg, #2b2f33);
    opacity: .5;
    pointer-events: none;
}

html.theme-dark .col-guide {
    background: #e7ebf2;
}

/* The pinned bar over a process list holds the filter field and the group pills */
.processfilter-field {
    position: relative;
}

/* Group pills: "Alle", or one or more groups (initProcessFilters, js/default.js). Graphite
   when on. They wrap onto more lines rather than scroll sideways. */
.processpills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pa_kvset ul li div.processfilter > div.processpills {
    display: flex;
}

.processfilter-field + .processpills,
.pa_kvset ul li div.processfilter > div.processfilter-field + div.processpills {
    margin-top: 10px;
}

/* A group pill that is on carries a tick: more than one can be on at a time */
.processpills button.processpill.processpill[data-section]:not([data-section=""])[aria-pressed="true"]::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.processpills button.processpill.processpill {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    font: 500 12px/1 Inter, 'Open Sans', sans-serif;
    color: var(--btn-text, #2b2f33);
    background: var(--btn-bg, #ffffff);
    border: 1px solid var(--btn-border, #c8c8c8);
    border-radius: 12px;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

.processpills button.processpill.processpill:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
}

.processpills button.processpill.processpill[aria-pressed="true"] {
    color: #ffffff;
    background: var(--btn-primary-bg, #2b2f33);
    border-color: var(--btn-primary-bg, #2b2f33);
}

.processpills button.processpill.processpill:focus-visible {
    outline: 2px solid var(--ctl-focus);
    outline-offset: 1px;
}

/* A short list page: the list at a readable width instead of the whole window, with a toolbar
   above it for what you do to the list (create, search). Used by admin/remindersetup. */
.listpage {
    width: 720px;
    max-width: 100%;
}

.listpage > #maintable {
    width: 100%;
}

.listpage > #maintable :is(th, td).num {
    text-align: right;
}

.listtoolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.listtoolbar-label {
    margin-right: 4px;
    color: var(--pbs-label, #5f646b);
}

.listtoolbar input[type=text] {
    width: 260px;
}

/* Rykkerprocedure steps (admin/remindersetup.edit): one row per step, fields that fit their
   content, the long text as a one-line field that opens up over the row while you type in it */
#maintable.rs-steps {
    width: 100%;
}

#maintable.rs-steps :is(th, td).num {
    text-align: right;
}

#maintable.rs-steps td {
    vertical-align: middle;
}

#maintable.rs-steps .rs-nr {
    width: 32px;
    color: var(--pbs-label, #5f646b);
    font-variant-numeric: tabular-nums;
}

#maintable.rs-steps .rs-title {
    width: 130px;
}

#maintable.rs-steps .rs-days {
    width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The four selects share what is left of the row (an even 1/4 each, never under 120px) */
#maintable.rs-steps td:has(> .rs-select) {
    width: 25%;
}

#maintable.rs-steps .rs-select {
    width: 100%;
    min-width: 120px;
}

#maintable.rs-steps .rs-longcell {
    position: relative;
    width: 200px;
}

#maintable.rs-steps .rs-longtext {
    display: block;
    box-sizing: border-box;
    width: 200px;
    height: 26px;
    min-height: 26px;
    padding-top: 3px;
    padding-bottom: 3px;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 18px;
}

#maintable.rs-steps .rs-longtext:focus {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 20;
    width: min(520px, 60vw);
    height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    resize: vertical;
    box-shadow: 0 8px 24px rgb(0 0 0 / .18), 0 0 0 .5px rgb(0 0 0 / .08);
}

#maintable.rs-steps .rs-edit {
    width: 1%;
    white-space: nowrap;
}

.rs-settings {
    display: grid;
    grid-template-columns: max-content 220px;
    align-items: center;
    gap: 8px 12px;
    margin: 16px 0 0;
}

.rs-settings label {
    color: var(--pbs-label, #5f646b);
}

.rs-settings .rs-select {
    width: 100%;
}

.rs-actions {
    margin-top: 16px;
}

/* A row of view buttons with a label: "Grupper efter [a|b|c]" */
.seg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.seg-label {
    color: var(--pbs-label, #5f646b);
    font-weight: 400;
}

/* Segmented control: one control with 1px dividers, the shared lift on the group, the selected
   segment filled and drawn over the dividers on either side */
.btn-seg {
    display: inline-flex;
    border-radius: var(--radius-ctl);
    box-shadow: var(--btn-lift);
}

.btn-seg > :is(button, input[type=button]) {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.btn-seg > :is(button, input[type=button]) + :is(button, input[type=button]) {
    margin-left: -1px;
}

.btn-seg > :first-child {
    border-radius: var(--radius-ctl) 0 0 var(--radius-ctl);
}

.btn-seg > :last-child {
    border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0;
}

/* Two controls that make one filter (pick a field, type its value): side by side in the
   field column, the picker as wide as it needs up to 45%, the value taking the rest */
.filter-pair {
    display: flex;
    gap: 4px;
    width: 100%;
}

.filter-pair > select {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 45%;
    min-width: 0;
}

.filter-pair > input {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

/* Betalingsservice pages (pbsview, pbsview.details) */
.pbs-section {
    margin-top: 24px;
}

/* A section is as wide as its list, so the toolbar ends where the list ends */
.pbs-section:is(:has(> table), :has(> .pbs-runrow)) {
    display: table;
    width: auto;
}

.pbs-section:has(> table) > table {
    width: 100%;
}

/* Plain-weight links in the lists (the global a:link rule makes every link bold) */
.pbs-section :is(#maintable, .maintable) td a:is(:link, :visited) {
    font-weight: 400;
}

.pbs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 32px;
    margin: 0 0 8px;
}

.pbs-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.pbs-head .actionbar-safe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.pbs-head label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pbs-label);
}

.pbs-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pbs-head :is(button, input) {
    margin: 0;
}

/* Upload opens the file dialog; the chosen file then shows by name next to Annuller and the
   import button. The real input stays in the form for the POST, out of sight. */
.pbs-fileinput {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The button styles set a display, which beats the hidden attribute */
.pbs-upload-pick[hidden] {
    display: none;
}

.pbs-upload-chosen:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pbs-upload-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

select.pbs-daysback {
    width: 120px;
}

/* The agreement: four facts on one line, the label small above the value */
.pbs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin: 0;
    padding: 0;
}

.pbs-facts > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pbs-facts dt {
    margin: 0;
    font-size: 11px;
    color: var(--pbs-label);
}

.pbs-facts dd {
    margin: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pbs-note {
    font-size: 11px;
    font-weight: 400;
    color: var(--pbs-label);
}

.pbs-warnnote {
    font-size: 11px;
    color: #8a5a00;
}

/* The export runs on one row: name and count, then the run's own button */
.pbs-runrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
}

.pbs-run {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pbs-run > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pbs-run .pbs-l {
    font-size: 11px;
    color: var(--pbs-label);
}

.pbs-run .pbs-c {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pbs-run .pbs-c.pbs-note {
    font-weight: 400;
}

/* The one-off conversion is not a run: a line of its own under the runs */
.pbs-runrow > .pbs-convert {
    flex-basis: 100%;
}

/* Summary of an imported file (pbsview.details): label left, value right */
.pbs-summary {
    display: grid;
    grid-template-columns: max-content minmax(140px, max-content);
    column-gap: 24px;
    row-gap: 4px;
    margin: 0 0 16px;
}

.pbs-summary dt {
    margin: 0;
    color: var(--pbs-label);
}

.pbs-summary dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pbs-failamount {
    color: #a8423c;
    font-weight: 600;
}

.pbs-resend-origin {
    color: var(--pbs-label);
    font-size: 10px;
}

/* Numbers right-aligned in their columns (out-ranks the list's own cell alignment) */
:is(#maintable, .maintable) :is(th, td).pbs-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

:is(#maintable, .maintable) td.pbs-nowrap {
    white-space: nowrap;
}

:is(#maintable, .maintable) td.pbs-empty {
    color: var(--pbs-label);
    text-align: center;
}

.pbs-actions-cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

/* An action in a list row (Upload): a compact button, so the row keeps its height */
:is(#maintable, .maintable) td button.pbs-rowbutton {
    --ctl-h: 24px;
    min-width: 0;
    margin: -4px 0;
    padding: 0 10px;
    font-size: 12px;
}

/* Delete links keep the muted red inside a list (out-ranks the list's "links take the cell's
   colour" rule) */
:is(#maintable, .maintable) td a.pbs-link-danger:is(:link, :visited) {
    color: var(--btn-danger-soft);
}

/* Status of a file line: a calm tint with the status colour as text, the same width for every
   status. OK is plain green text: most lines are OK, so the column does not drown the problems. */
.pbs-status {
    display: inline-block;
    box-sizing: border-box;
    min-width: 68px;
    margin: 0;
    padding: 1px 6px;
    border-radius: 2px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pbs-st-text);
    background: var(--pbs-st-bg);
}

.pbs-status-OK { --pbs-st-text: #2e6b34; --pbs-st-bg: transparent; }
.pbs-status-ERROR { --pbs-st-text: #a8423c; --pbs-st-bg: #f8e4e2; }
.pbs-status-CORR { --pbs-st-text: #8a5a00; --pbs-st-bg: #f6ecd4; }
.pbs-status-DENIED,
.pbs-status-WAIT { --pbs-st-text: #4c5157; --pbs-st-bg: #e6e7e8; }

/* An error line can be moved to an account: it is a button, with a faint ring at rest */
button.pbs-status.pbs-status {
    height: auto;
    min-height: 0;
    border: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

button.pbs-status.pbs-status:is(:hover, :active, :focus) {
    color: var(--pbs-st-text);
    background: var(--pbs-st-bg);
}

button.pbs-status.pbs-status:hover {
    box-shadow: inset 0 0 0 1px currentColor;
}

button.pbs-status.pbs-status:active {
    filter: brightness(.94);
    transition: none;
}

/* The status with Nets' answer behind it: the chip stays a chip, the answer shows on hover */
a.info.pbs-statusinfo:hover {
    background: none;
}

.pbs-actions {
    margin: 0 0 12px;
}

table#maintable + .pbs-actions {
    margin: 16px 0 0;
}

:root {
    --pbs-label: #5f646b;
}


/* ==========================================================================
   Permissions for a user (rightsedit, a user chosen): the user's groups as coloured chips,
   a section list on the left with a bar per section (each group's share in its colour), and
   the chosen section on the right as a matrix: one checkbox column per group, in the group's
   colour. A row the user ends up with has a dark bar on its left edge. Gem saves every group.
   ========================================================================== */
:root {
    --rights-g0: #5b6b7f;
    --rights-g1: #3f7d6b;
    --rights-g2: #8a6a3f;
    --rights-g3: #7a5a82;
    --rights-g4: #4f7a8a;
    --rights-g5: #8a4f55;
    --rights-line: #e4e4e4;
    --rights-line-soft: #f0f1f3;
    --rights-head: #f3f4f6;
    --rights-current: #e4e6ea;
    --rights-muted: #6b7178;
}

.rights-g0 { --rights-c: var(--rights-g0); }
.rights-g1 { --rights-c: var(--rights-g1); }
.rights-g2 { --rights-c: var(--rights-g2); }
.rights-g3 { --rights-c: var(--rights-g3); }
.rights-g4 { --rights-c: var(--rights-g4); }
.rights-g5 { --rights-c: var(--rights-g5); }

/* With the ids: list pages shrink #pagemaxwidth to the list */
#pagemaxwidth#pagemaxwidth:has(#rights-user) {
    width: auto;
}

.rights-userbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.rights-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rights-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    background: var(--rights-c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.rights-user {
    display: grid;
    grid-template-columns: 300px minmax(0, max-content);
    gap: 16px;
    align-items: start;
}

.rights-nav {
    position: sticky;
    top: 8px;
    border: 1px solid var(--rights-line);
    border-radius: 2px;
    background: var(--list-bg);
    overflow: hidden;
}

.rights-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border-top: 1px solid var(--rights-line-soft);
    cursor: pointer;
}

.rights-nav-item:first-child {
    border-top: 0;
}

.rights-nav-item:hover {
    background: var(--rights-head);
}

.rights-nav-item.is-current {
    background: var(--rights-current);
    font-weight: 600;
}

.rights-nav-item:focus-visible {
    outline: 2px solid var(--cb-on);
    outline-offset: -2px;
}

.rights-nav-item.is-empty .rights-nav-name,
.rights-nav-item.is-nohits {
    color: var(--rights-muted);
}

.rights-nav-item.is-nohits {
    opacity: .5;
}

.rights-nav-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rights-nav-hits {
    display: none;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cb-on);
    color: var(--list-bg);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.rights-bar {
    display: flex;
    flex: none;
    width: 64px;
    height: 8px;
    border-radius: 4px;
    background: var(--rights-current);
    overflow: hidden;
}

.rights-bar > i {
    display: block;
    height: 100%;
    background: var(--rights-c);
    transition: width .15s;
}

.rights-nav-count {
    flex: none;
    width: 52px;
    color: var(--rights-muted);
    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rights-section {
    border: 1px solid var(--rights-line);
    border-radius: 2px;
    background: var(--list-bg);
}

.rights-section[hidden] {
    display: none;
}

.rights-section-title {
    margin: 0;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--rights-line);
    font-size: 13px;
}

.rights-section-title > span {
    color: var(--rights-muted);
    font-weight: 400;
}

/* With the ids: the list rules give every table the list width and stick its heading */
#operations .rights-section table.rights-matrix.maintable {
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
}

#operations .rights-matrix th {
    position: sticky;
    top: 0;
    height: auto;
    padding: 8px 6px 6px;
    background: var(--rights-head);
    vertical-align: bottom;
    text-align: center;
}

#operations .rights-matrix th.rights-name,
#operations .rights-matrix td.rights-name {
    width: 300px;
    min-width: 220px;
    padding-left: 14px;
    text-align: left;
}

#operations .rights-matrix .rights-group {
    width: 96px;
    padding: 0 6px;
    text-align: center;
}

.rights-members {
    display: block;
    margin-top: 3px;
    color: var(--rights-muted);
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

#operations .rights-matrix td {
    height: 30px;
    border-top: 1px solid var(--rights-line-soft);
}

.rights-matrix td.rights-name {
    position: relative;
}

.rights-matrix tr:not(.is-granted) td.rights-name {
    color: var(--rights-muted);
}

.rights-matrix tr.is-granted td.rights-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--cb-on);
}

/* The group's box in the group's colour */
.rights-matrix input.rights-group-cb:checked {
    background-color: var(--rights-c);
    border-color: var(--rights-c);
}

.rights-matrix input.rights-group-cb:focus-visible {
    outline-color: var(--rights-c);
}

.rights-section-empty {
    margin: 0;
    padding: 14px;
    color: var(--rights-muted);
}

.rights-nogroups {
    color: var(--rights-muted);
}

/* Gem on the right, below the permissions; the note beside it once something is changed */
.rights-save {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 16px 0 24px;
}

.rights-save-note {
    color: var(--rights-muted);
    visibility: hidden;
}

.rights-save:has(#rights_save.is-dirty) .rights-save-note {
    visibility: visible;
}


/* -- Device pages (modem4, cwmpcpe, onu, station, switchport ...): their content sits in
   #innerpcontent, which still painted the old #ccc panel with a #aaa border, so the #fafbfc boxes on
   it read as glaring white. The panel is dropped and the boxes sit on the page grey like every other
   page. The two-column key/value boxes (.pa_kvsetduo) take the list header instead of the old dark
   #555 bar, and the graph boxes the box surface and border. -- */

#innerpcontent {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.pa_kvsetduo h3 {
    background-color: #e4e4e4;
    color: #30353a;
    padding: 8px 12px;
    box-shadow: inset 0 -1px 0 #c8c8c8;
    font: 600 12px/16px Inter, 'Open Sans', sans-serif;
}

.pa_kvsetduo h3 a {
    color: #30353a;
}

.pa_kvsetduo ul li div:nth-child(1),
.pa_kvsetduo ul li div:nth-child(2) {
    padding: 5px 12px;
}

#innerpcontent .pgraphboxouter {
    background-color: var(--kv-bg);
    border: 1px solid #ddd;
    border-radius: var(--radius-box);
}

/* The graph selectors under the charts (period, graph type): the old #eee strip with bold grey
   text and a #999 selected cell, as a segmented control in the buttons' look - white segments,
   1px dividers, the graphite fill on the selected one. Only on the device pages; .radio-group is
   used elsewhere too. */
#innerpcontent .radio-group {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 8px 0 0;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-ctl);
    background: var(--btn-bg);
    box-shadow: var(--btn-lift);
    font: 500 12px/16px Inter, 'Open Sans', sans-serif;
}

#innerpcontent .radio-group label {
    color: var(--btn-text);
    font-weight: 500;
    padding: 5px 12px;
    background: transparent;
    transition: background-color .12s;
}

#innerpcontent .radio-group label:hover {
    background: var(--btn-bg-hover);
}

#innerpcontent .radio-group label + input[type=radio] + label {
    border-left: 1px solid var(--btn-border);
}

#innerpcontent .radio-group input[type=radio]:checked + label {
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    margin-right: 0;
    box-shadow: none;
    cursor: default;
}

/* The "include OFDMA T3" checkbox next to them sets its old bold grey font inline */
#innerpcontent #ofdmat3box {
    margin: 14px 12px 0 0 !important;
    font: 500 12px/16px Inter, 'Open Sans', sans-serif !important;
    color: var(--btn-text) !important;
}