/*
    CSS style sheet   

    Contains generic rules for all media types,
    followed by extra rules specific to screen or printer

    Chris Denning, September 2005
    Updated, James Taylor, January 2026
    Contact ERP Engineering Helpdesk with any queries
*/
/* Modernized styling */
:root {
    --brand-primary: #1072ba;
    --brand-primary-light: #65a7db;
    --brand-secondary-dark: #17477e;
    --brand-secondary-light: #b9e0f7;
    --brand-accent: #8bad44;
    --brand-accent-light: #d4ddbe;
    --brand-neutral: #5a646a;
    --brand-warm: #fdb73e;
    --brand-warm-light: #ffe2b3;
    --brand-warm-dark: #d68402;
    --tbw-cell-vertical-padding: 4px;
    --tbw-cell-horizontal-padding: 8px;
    --tbw-cell-line-height: 1.5em;
}

HTML {
    color: black;
    font-family: "Arial", sans-serif;
    font-size: small;
}

/* Headings */
h1 {
    color: var(--brand-primary);
}

h2 {
    color: var(--brand-secondary-dark);
}

h3 {
    color: var(--brand-neutral);
}

h4, h5, h6 {
    color: var(--brand-neutral);
}

/* Link styling */
a,
a:visited {
    text-decoration: none;
    background: transparent;
    color: var(--brand-primary);
}

    a:hover {
        background: transparent;
        text-decoration: underline;
        color: var(--brand-secondary-dark);
    }

    a:active {
        color: var(--brand-accent);
    }

    /* Anchors without an href should look like normal text */
    a:not([href]),
    a:not([href]):visited,
    a:not([href]):hover,
    a:not([href]):active,
    a:not([href]):focus {
        color: inherit;
        text-decoration: inherit;
        cursor: inherit;
    }

TD {
    padding: 2px;
}

.auditYes {
    background-color: #ccfedb;
}

.auditNo {
    background-color: #ffd9d9;
}

.column_highlight {
    background-color: #fffff0;
    border-right: solid 1px black;
    border-left: solid 1px black;
}

.invoiced {
    border-color: blue;
    color: blue;
}

.invoiced_no_match {
    color: blue;
}

.invoiced_match {
    color: green;
}

.not_invoiced_no_match {
    color: red;
}

.not_invoiced_match {
    color: black;
}

.holiday {
    color: red;
}

.uk_holiday {
    color: green;
}

.us_holiday {
    color: blue;
}

.noPadding {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.fulfilled {
    background-color: #BBF7C8;
}

.assigned {
    background-color: #FFBF5B;
}

.unassigned {
    background-color: #ED8184;
}

.template {
    background-color: #D0D0FF;
}

.sectionLine {
    border-top: 0.1em Solid Black;
}

/* Highlight banner */
#highlightBanner,
.highlightBanner {
    background-color: var(--brand-warm-light);
    border: 1px solid var(--brand-warm-dark);
    color: var(--brand-warm-dark);
    border-radius: 3px;
}

.highlightInput {
    background-color: var(--brand-accent-light);
    border: 1px solid var(--brand-accent);
    color: var(--brand-accent);
    border-radius: 3px;
}

/*
Report table style
*/
.rptTable {
    border: 1px solid #000066;
}

.delivSched {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: top;
}

.date {
    white-space: nowrap;
}

.panel {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.5em;
    float: left;
}

.gridFooter {
    background-color: #fffff0;
    border-top: 0.05em dotted Black;
}

.toolbar {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.subtotal {
    border-top: 0.1ex dotted;
}

.usagecell {
    border: None;
    color: Black;
}

.negativeStock {
    border: None;
    background-color: Red;
    color: Black;
    font-weight: bold;
}

.stockMgmt .number :link, .stockMgmt .number :visited, .stockMgmt .number :active {
    color: Black !important;
}

.sumbreak {
    border-top: solid 0.125em Black;
    border-bottom: solid 0.125em Black;
    color: var(--brand-accent) !important;
    font-weight: bold;
    text-align: right;
}

    .sumbreak :link, .sumbreak :visited, .sumbreak :active {
        color: var(--brand-accent) !important;
    }

.subtotalbreak {
    border-top: solid 0.25em Black;
    border-bottom: solid 0.25em Black;
    color: var(--brand-primary) !important;
    font-weight: bold;
    text-align: right;
}

    .subtotalbreak :link, .subtotalbreak :visited, .subtotalbreak :active {
        color: var(--brand-primary) !important;
    }

.grandtotal {
    border-top: 0.5em Black;
    border-bottom: 0.5em Black;
    color: var(--brand-secondary-dark) !important;
    font-weight: bold;
    text-align: right;
}

    .grandtotal :link, .grandtotal :visited, .grandtotal :active {
        color: var(--brand-accent) !important;
    }

.currMonth {
    background-color: Purple;
    color: White;
    font-weight: bold;
}

.stockEditable {
    background-color: Yellow;
}

.stockMgmt :link, .stockMgmt :visited, .stockMgmt :active {
    text-decoration: none;
}

/* positioning for div/panel blocks */
.floatLeft {
    margin: 0.5em;
    float: left;
}

.floatRight {
    margin: 0.5em;
    float: right;
}

.clearBoth {
    clear: both;
}

.stripe {
    background-color: #EEEEEE;
}

/* Caption for fields in tables in detail/edit view */
.fieldHeading {
    font-weight: bold;
    text-align: right;
}

.orderLineItemTable {
    border-collapse: separate;
    padding: none;
    width: 100%;
}

    .orderLineItemTable TH {
        text-align: left;
        padding: 1px;
    }

    .orderLineItemTable TR {
        vertical-align: top;
    }

    .orderLineItemTable TD {
        padding: 1px;
    }

.stockAllocationTable, .stockAllocationTable TD, .stockAllocationTable TH {
    border: solid 1px black;
}

.contractTextbox {
    width: 50em;
}

.contractNumber {
    width: 3em;
}

.detailHidden {
    display: none;
    visibility: hidden;
}

.categoryBlock {
    float: left;
    margin-right: 1em;
}

.subForm {
    padding: 1em;
    border: solid 2px #00197d;
    margin: 1em 0;
}

.rowLight TR:hover {
    background-color: #EEEEEE;
}

/* CSS 3 style - enabling long words to
 to wordwrap when they wouldn't otherwise */
.breakWord {
    word-wrap: break-word;
}

.taskCell {
    word-wrap: break-word;
    vertical-align: top;
}

.longDesc {
    word-wrap: break-word;
    width: 30em;
}

.opsNotesBanner {
    border: 1px solid black;
    font-size: larger;
    padding: 5px;
    margin-top: 5px;
}

.fixBeforeShippingBanner {
    border: 1px solid rgba(0, 0, 0, 0.35);
    background-color: #FF7777;
    color: #2b0b0b;
    font-size: larger;
    font-weight: 600;
    padding: 0.6rem 0.85rem;
    margin-top: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

    .fixBeforeShippingBanner a,
    .fixBeforeShippingBanner a:visited {
        display: inline-block;
        padding: 0.25rem 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        background: rgba(255, 255, 255, 0.55);
        color: #2b0b0b;
        text-decoration: none;
        font-weight: 700;
        line-height: 1.2;
    }

        .fixBeforeShippingBanner a:hover {
            background: rgba(255, 255, 255, 0.78);
            border-color: rgba(0, 0, 0, 0.5);
            color: #000000;
            text-decoration: underline;
        }

        .fixBeforeShippingBanner a:active {
            background: rgba(255, 255, 255, 0.35);
            border-color: rgba(0, 0, 0, 0.65);
            color: #000000;
        }

        .fixBeforeShippingBanner a:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
        }

.vpaDealBanner {
    border: 1px solid black;
    background-color: #BCF7C5;
    font-size: larger;
    padding: 5px;
    margin-top: 5px;
}

.ooiInfoBanner {
    border: 1px solid black;
    background-color: #BCF7C5;
    font-size: larger;
    padding: 5px;
    margin-top: 5px;
}

/*
 Used on sales revenue pages
*/
div.pnl_CustRev {
    clear: both;
    float: left;
    border: 1px solid black;
    border: collapse;
}

.approved {
    white-space: nowrap;
    text-align: right;
    color: black;
}

.unapproved {
    white-space: nowrap;
    text-align: right;
    color: red;
}

.sales_rev_hide {
    color: White;
    line-height: 1px;
}

/*
 Used for the Salesman specific help menu bar
*/
.helpSales {
    border: solid 1px var(--brand-primary);
    background-color: var(--brand-primary-light);
    font-size: larger;
    font-weight: bold;
}

.packingList, .packingListView {
    margin: 0em 0 1em 0;
    border: solid 3px Gray;
    padding: 1em;
    background-color: White;
}

.packingListHeader {
    color: #00197d;
    font-size: larger;
    margin: 1em 0 1em 0;
}

.packingList TABLE {
    width: 100%;
}

.packingList DIV {
    margin: 2px;
    margin-left: 2em;
    padding: 2px;
}

    .packingList DIV.customerOrder {
        margin-left: 0;
    }

    .packingList DIV DIV.showChildren {
        border: none;
        border-left: solid 2px Black;
        margin-left: 4px;
    }

.packingList IMG {
    margin-right: 4px;
}

.packingList SELECT, .packingList A {
    margin-left: 1em;
    margin-right: 1em;
}

.packingList INPUT {
    margin-left: 1em;
}

.packingList DIV.hideChildren {
    border: none;
    border-top: dashed 2px Black;
}

    .packingList DIV.hideChildren * {
        display: none;
    }

.packingList .overridden {
    background-color: Yellow;
    margin-left: 4px;
    margin-right: 4px;
}

.packingListView .plHeader {
    font-size: large;
    font-weight: bold;
    margin: 1ex 0 1ex 0;
}

.packingListView .plBoxNumber {
    font-size: larger;
    font-weight: bold;
    margin: 1ex 0 1ex 0;
}

.packingListView .plHeaderDiv {
    height: 140px;
}

.plHeaderAffirmedDiv {
    height: 300px;
}

.packingListView TD {
    vertical-align: top;
}

.plTable {
    border: solid 1px black;
    width: 100%;
    margin: 1ex 0 0 0;
}

    .plTable TH {
        background-color: White;
        text-align: left;
    }

.plAffirmedTable {
    border-collapse: collapse;
}

    .plAffirmedTable TH {
        background-color: grey;
        color: white;
        text-align: left;
    }

.plHeaderTable TH {
    background-color: White;
    text-align: center;
}

.plHeaderAffirmedTable TH {
    background-color: White;
    text-align: left;
    font-size: x-large;
}

.plHeaderTable {
    border: solid 1px black;
    float: right;
    margin: 1ex 0 2ex 0;
    width: 150;
    font-size: 16pt;
    height: 100px;
}

.plHeaderAffirmedTable {
    float: right;
    margin: 1ex 0 2ex 0;
    width: 260px;
    height: 100px;
}

.plHeaderAddress {
    margin: 0 0 0 0;
    float: left;
    width: 260px;
}

.plHeaderAddressAffirmed {
    margin: 0 0 0 0;
    width: 260px;
}

.plHeaderLogo {
    float: left;
    width: 260px;
}

.plSignOff, .plSignOff TD, .plSignOff TH {
    border: solid 1 black;
    text-align: left;
    vertical-align: bottom;
}

.plTable TH, .plTable TD, .plHeaderTable TH, .plHeaderTable TD, .plAffirmedTable th, .plAffirmedTable td {
    border: solid 1px Black;
    padding: 0.5ex;
}

.unresolved {
    color: red;
}

.invalidQuantity, .invalidQuantity INPUT {
    background-color: Yellow;
    color: red;
}

.installChecklistSectionTitle {
    font-size: large;
    font-weight: bold;
    width: 100%;
    border: solid 1px Black;
    background-color: #CD9B9B;
}

.installChecklistDragStep {
    margin: -1px;
    border: solid 1px Black;
    padding: 1px;
    background-color: #CD9B9B;
}

.installChecklistDragSection {
    margin: -1px;
    border: solid 1px Black;
    padding: 1px;
    background-color: #B2DFEE;
}

.installChecklistDragList li {
    list-style-type: none;
    margin-left: 0px;
}

.installChecklistDragHandle {
    height: 10px;
    width: 10px;
    border: solid 1px black;
    background-color: #78AB46;
    cursor: pointer;
}

.installChecklistStepKBArticle {
    border: solid 1px Gray;
    background-color: #CCCCCC;
    padding: 1ex;
    white-space: normal;
    overflow: auto;
    height: 100%;
    margin-top: 3px;
}

.installChecklistStepDetails {
    padding: 2ex;
}

.installChecklistStepOutOfDate {
    background-color: Yellow;
}

.installChecklistStepManuallyAdded {
    background-color: #C0D9AF;
}

.installChecklistStepRecentlyUpdated {
    background-color: #87CEEB;
}

.installChecklistStep {
    font-weight: normal;
}

.installChecklistStepHardware {
    margin-right: 20px;
    font-style: italic;
}

.installChecklistAddStepList {
    margin: 10px;
    height: 250px;
    width: 90%;
    overflow: auto;
    border: solid 1px black;
    background-color: White;
}

.installChecklistTemplateSteps {
    margin-top: 10px;
    padding-top: 5px;
    width: 100%;
    border-top: solid 1px green;
}

.auditHeader {
    border: solid 1px green;
    background-color: White;
}

.auditHWSEntry {
    border: solid 1px green;
    background-color: White;
}

.auditUnmatched {
    background-color: yellow;
}

.auditError {
    background-color: red;
}

.auditNoItemsMessage {
    border: solid 1px black;
    padding: 2px;
    float: none;
}

.auditNoItemsMessagePanel {
    margin-top: 6px;
}

.copyOrderInfoCheckFailed {
    color: red;
    font-weight: bold;
}

.uploadSuccess {
    border: solid 1px green;
    background-color: white;
    vertical-align: middle;
}

.copyOrderInfoCheckPassed {
    color: green;
}

.criteria, .panelBox {
    clear: both;
    margin: 2px;
    border: solid 2px Gray;
    background-color: White;
    padding: 1em;
    overflow: visible;
    width: auto;
}

    .criteria H2, .criteria H3, .panelBox H2 {
        margin: 0;
    }

    .criteria DIV {
        margin: 1ex;
        border: solid 2px Gray;
        padding: 1ex;
        float: left;
    }

.pager {
    margin: 4px;
}

/* Classes corresponding to ext_company_type (with spaces removed) for row highlighting */
.Prospect {
    background-color: #33CC99;
}

.Customer {
    background-color: #66FF99;
}

.Internalcustomer {
    background-color: #9966FF;
}

.Partner {
    background-color: #FFCC99;
}

.Partnerandcustomer {
    background-color: #EEEE99;
}

.Consultant {
    background-color: #EEEEEE;
}

.Contractor {
    background-color: #EEEEEE;
}

.Other {
    background-color: #EEEEEE;
}

.PartnerwithSwitch {
    background-color: #EEEE88;
}


/* Classes corresponding to alternate row highlighting */
.RowStyle1 {
    background-color: #FFFACD;
}

.RowStyle2 {
    background-color: #EEE9E9;
}

.shipWizardWarning {
    color: red;
    font-weight: bold;
}

.shipWizardNeedsPmtaLicenceWarning {
    color: red !important;
    border: 2px solid red;
    font-weight: bold !important;
}

table.orderComparison, table.orderComparison th, table.orderComparison td {
    border: solid 1px black;
}

    table.orderComparison .different {
        background-color: Yellow;
    }

        table.orderComparison .different span {
            font-weight: bold;
            text-decoration: underline;
        }

.bookinginusercontrols {
    float: left;
    margin: 0 10px 10px 0;
    padding: 10px;
    border: solid 1px black;
}

.cljScreenOnly {
}

.stockNotes {
    font-size: smaller;
}

/* Main menu page */
.menuButton {
    padding-bottom: 10px;
}

.menuSortColumns {
    width: 33%;
    float: left;
}
/* New Field */
.newField {
    background-color: Yellow;
    font-size: small;
    font-weight: bold;
    padding: 0 5px 0 5px;
}

/* Default table styling using brand colors */

table:not(.menuBar) {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}

    table:not(.menuBar) th,
    table:not(.menuBar) td {
        padding: 0.45rem 0.6rem;
        border: 1px solid rgba(0, 0, 0, 0.15);
        vertical-align: top;
    }

    table:not(.menuBar) thead th,
    table:not(.menuBar) th {
        background: var(--brand-primary);
        color: #ffffff;
        font-weight: 600;
    }

    table:not(.menuBar) tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    table:not(.menuBar) tr.odd td[class*="sorting_"], table:not(.menuBar) tr.even td[class*="sorting_"] {
        background-color: var(--brand-secondary-light) !important;
    }

    table:not(.menuBar) tbody tr:nth-child(even) {
        background-color: rgba(185, 224, 247, 0.35) !important; /* brand-secondary-light tint */
    }

    table:not(.menuBar) tbody tr:hover {
        background-color: rgba(101, 167, 219, 0.35) !important; /* brand-primary-light tint */
    }

    table:not(.menuBar) tr:hover td[class*="sorting_"] {
        background-color: var(--brand-primary-light) !important;
    }

    /* Keep link contrast inside table headers */
    table:not(.menuBar) thead th a,
    table:not(.menuBar) th a,
    table:not(.menuBar) thead th a:visited,
    table:not(.menuBar) th a:visited {
        color: #ffffff;
    }

    table:not(.menuBar) > thead > tr > th:first-child,
    table:not(.menuBar) > tbody > tr > th:first-child,
    table:not(.menuBar) > tbody > tr > td:first-child,
    table:not(.menuBar) > tfoot > tr > td:first-child {
        width: 1%;
        white-space: nowrap;
    }

    /* Ensure remaining columns absorb extra width instead of the first column */
    table:not(.menuBar) > thead > tr > th:last-child,
    table:not(.menuBar) > tbody > tr > td:last-child,
    table:not(.menuBar) > tfoot > tr > td:last-child {
        width: auto;
    }

/* Even column tables (no colgroup): use fixed table layout + a colsN helper */
table.evenColumns {
    table-layout: fixed;
    width: 100%;
}

    table.evenColumns th,
    table.evenColumns td {
        white-space: normal; /* allow wrapping */
        overflow-wrap: anywhere; /* modern: break long tokens */
        word-wrap: break-word; /* legacy fallback */
    }

    /* 3 columns */
    table.evenColumns.cols3 > thead > tr > th,
    table.evenColumns.cols3 > tbody > tr > th,
    table.evenColumns.cols3 > tbody > tr > td,
    table.evenColumns.cols3 > tfoot > tr > th,
    table.evenColumns.cols3 > tfoot > tr > td {
        width: 33.3333%;
    }

    /* 4 columns */
    table.evenColumns.cols4 > thead > tr > th,
    table.evenColumns.cols4 > tbody > tr > th,
    table.evenColumns.cols4 > tbody > tr > td,
    table.evenColumns.cols4 > tfoot > tr > th,
    table.evenColumns.cols4 > tfoot > tr > td {
        width: 25%;
    }

    /* 5 columns */
    table.evenColumns.cols5 > thead > tr > th,
    table.evenColumns.cols5 > tbody > tr > th,
    table.evenColumns.cols5 > tbody > tr > td,
    table.evenColumns.cols5 > tfoot > tr > th,
    table.evenColumns.cols5 > tfoot > tr > td {
        width: 20%;
    }

    /* 6 columns */
    table.evenColumns.cols6 > thead > tr > th,
    table.evenColumns.cols6 > tbody > tr > th,
    table.evenColumns.cols6 > tbody > tr > td,
    table.evenColumns.cols6 > tfoot > tr > th,
    table.evenColumns.cols6 > tfoot > tr > td {
        width: 16.6667%;
    }

/* Opt-out class for layout/formatting tables (no default table styling) */
table.layoutTable {
    border-collapse: collapse;
    width: 100%;
}

    /* Reset only the TOP-LEVEL structure/cells, not nested tables */
    table.layoutTable > thead,
    table.layoutTable > tbody,
    table.layoutTable > tfoot,
    table.layoutTable > thead > tr,
    table.layoutTable > tbody > tr,
    table.layoutTable > tfoot > tr,
    table.layoutTable > thead > tr > th,
    table.layoutTable > thead > tr > td,
    table.layoutTable > tbody > tr > th,
    table.layoutTable > tbody > tr > td,
    table.layoutTable > tfoot > tr > th,
    table.layoutTable > tfoot > tr > td {
        background: transparent;
        color: inherit;
        border: 0;
    }

        /* Remove padding only for TOP-LEVEL cells */
        table.layoutTable > thead > tr > th,
        table.layoutTable > thead > tr > td,
        table.layoutTable > tbody > tr > th,
        table.layoutTable > tbody > tr > td,
        table.layoutTable > tfoot > tr > th,
        table.layoutTable > tfoot > tr > td {
            padding: 0;
            vertical-align: baseline;
        }

        /* Remove zebra striping + hover effects only for TOP-LEVEL rows */
        table.layoutTable > tbody > tr:nth-child(odd),
        table.layoutTable > tbody > tr:nth-child(even),
        table.layoutTable > tbody > tr:hover {
            background: transparent;
        }

/* Styles only used for printer, may override the common ones above */
@media print {
    HTML {
        background-color: white;
        font-size: 8pt;
    }

    hr {
        border-top: 1px solid #000;
        opacity: 1;
    }

    :link, :visited, :active {
        text-decoration: none;
        color: black;
    }

    .lowStock {
        text-decoration: underline;
    }

    .delivSched {
        font-size: 10pt;
    }

    .contrastBand {
        background-color: White;
    }

    .plPageBreak {
        page-break-after: always;
        visibility: hidden;
    }

    .packingListView {
        border: none;
    }

    .plWeight, .stockNotes {
        visibility: hidden;
        display: none;
    }
}

/* Styles only used for screen, may override the common ones above */
@media screen {

    TH, .TH {
        background-color: var(--brand-primary);
        color: White;
    }

    .lowStock {
        color: red;
        text-decoration: underline;
    }

    .plPageBreak {
        background-color: var(--brand-neutral);
        color: White;
        text-align: center;
        font-weight: bold;
        padding: 1ex;
        margin: 1em 0 1em 0;
    }

    .plWeight {
        color: Gray;
    }

    /* Hack for Chrome as it breaks if you use run-in */
    th.ScreenOnly, td.ScreenOnly {
        display: table-cell;
        visibility: inherit;
    }

    hr.screenOnly {
        border-top: 2px solid var(--brand-primary);
        margin: 0.75rem 0 1rem 0;
        position: relative;
    }

        /* Optional small accent “notch” in the middle */
        hr.screenOnly::after {
            content: "";
            position: absolute;
            left: 50%;
            top: -2px; /* aligns with 2px border */
            transform: translateX(-50%);
            width: 3.25rem;
            border-top: 2px solid var(--brand-accent);
        }
}

#window {
    position: absolute;
    width: 616px;
    overflow: visible;
    display: none;
    border: solid 3px black;
    z-index: 1000;
}

#windowTop {
    height: 30px;
    background-position: right top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    background-color: #FFE4B5;
}

#windowTopContent {
    margin-right: 10px;
    background-position: left top;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    text-indent: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: black;
}

#windowBottom {
    position: relative;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-color: #FFE4B5;
}

#windowBottomContent {
    position: relative;
    background-position: left bottom;
    background-repeat: no-repeat;
    margin-right: 10px;
}

#windowContent {
    position: absolute;
    top: 30px;
    left: 10px;
    overflow: visible;
    margin-right: 10px;
    border: none;
    width: 584px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #FFFACD;
    padding: 5px;
}

#windowClose {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.windowControls {
    margin-bottom: 5px;
}

    .windowControls label {
        width: 80px;
        float: left;
        margin-top: 10px;
    }

.error {
    float: none !important;
}

.windowFieldName {
    width: 80px;
    float: left;
}

.windowButtons input {
    margin-top: 5px;
    margin-right: 5px;
}

.commodityCountError {
    background-color: #FF6666;
}

.commodityCountSaving {
    background-color: Yellow;
}

.commodityCountOk {
    background-color: #A0FFA0;
}

/*
 * Sort arrow icon positioning
 */
table thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
}

    table thead th div.DataTables_sort_wrapper span {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 0;
    }

/*
 * Sort arrow icon positioning specific deal Sales Closure Table 
 */
#dealSalesClosureTable thead th div.DataTables_sort_wrapper {
    position: inherit;
    padding-right: 0px;
    text-align: center;
}

    #dealSalesClosureTable thead th div.DataTables_sort_wrapper span {
        position: inherit;
        margin: 0px auto;
    }

.cosysDate {
    width: 6em;
}

.search_init {
    font-style: italic;
}

.errorMessage {
    color: #F00;
    background-color: #FFF;
}

.dialogForm {
    clear: both;
    width: auto;
}

    .dialogForm label {
        display: block;
        float: left;
        width: 11em;
        margin-bottom: 0.5em;
    }

    .dialogForm input, .dialogForm select {
        display: block;
        width: 11em;
        margin-bottom: 0.5em;
    }

        .dialogForm input.auto, .dialogForm select.auto {
            width: auto !important;
        }

/*
     * RGB Colours for deal list
     * Red - 255,124,128 - FF7C80
     * Deep Blue - 102,153,255 - 6699FF
     * Light Blue - 204,236,255 - CCCEFF
     * Yellow - FFFF99
     * White - 255,255,255 - FFFFFF
     */

.closableWellFormed {
    background-color: #FFFFFF !important;
}

.closableNotWellFormed {
    background-color: #FFFF99 !important;
}

.dealNotOnBuildQueue {
    background-color: #FFFFFF !important;
}

.buildListNotWellFormed {
    background-color: #FF7C80 !important;
}

.buildListPlanned {
    background-color: #6699FF !important;
}

.buildListUnplanned {
    background-color: #CCECFF !important;
}

.dealListSummaryTable {
    background-color: #E0E0E0;
}

.dealListSummaryTotal {
    background-color: #C2C2C2;
}

.dealListTitle {
    font-weight: bold;
}

.dealListTableNumeric {
    text-align: right;
}

.dealListTable {
    font-size: 83%;
}

TABLE.cosTable {
    border: 1px solid #000;
}

    TABLE.cosTable TD, TABLE.cosTable TH {
        border: 1px solid #000;
    }

.editButton {
    padding: 1px;
}

    .editButton:hover {
        background: #fbb;
        cursor: pointer;
    }

table.refData tr.editRow, table.refData tbody tr.editRow, table.refData tbody tr.editRow td {
    background: #fcc;
}

.formLayout fieldset {
    border: none;
}

    .formLayout fieldset p {
        clear: left;
        margin: 0;
        padding: 0;
        padding-top: 0.5em;
    }

        .formLayout fieldset p label {
            float: left;
            width: 40%;
        }

table.refData tr:hover, table.refData tbody tr:hover, table.refData tbody tr:hover td {
    background: #ddd;
}

img.icon32link {
    display: block;
    float: left;
    position: relative;
    top: -7px;
}

.dealEventDate {
    text-align: right;
}

.dealEventDateOverdue {
    color: Red;
    font-weight: bold;
    text-align: right;
}

.dealEventDateSoon {
    color: Fuchsia;
    font-weight: bold;
    text-align: right;
}

.agrTable, .agrTable TD, .agrTable TH {
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
}

.metaswitchSerialNumber input {
    text-transform: uppercase;
}

table.gvOrders td {
    padding: 1px;
    font-size: 0.9em;
}

#customercolumn {
    width: 200px;
}


.notcontract {
    height: auto;
    overflow: auto;
    width: 15em;
}

.contract {
    height: 1.8em;
    overflow: hidden;
    width: 15em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div#statusdiv.contract, div#OOIETAdiv.contract {
    width: 5em;
}

div#statusdiv.notcontract, div#OOIETAdiv.notcontract {
    width: 5em;
}

.importcolumn {
    width: 20em
}

DIV.divCriteriaNoBorder {
    border: none;
    padding: 0;
    margin: 0;
}

#dvCustListCountryState {
    width: 180px;
}

.leftPadding10 {
    padding-left: 10px;
}

.highlightNotes {
    border: 1px solid black;
    background-color: Aqua;
}

.hidden {
    display: none;
}

.componentEOLdateRed input, .componentEOLdateRed a {
    color: Red
}

.componentEOLdateAmber input, .componentEOLdateAmber a {
    color: #FF8000
}

.componentEOLdateGreen input, .componentEOLdateGreen a {
    color: Green;
}

.revenueTotal {
    font-weight: bold;
}

.dtDetails {
    background-color: #cccccc;
}

.dealEventChangeLog {
    margin: 10px;
    background-color: White;
    border: 1px solid Black;
    padding: 10px;
    height: 120px;
    width: 90%;
}

.dealEventChangeLogTable {
    background-color: #E6E6E6;
    border: 1px solid lightGrey;
    padding: 5px;
    width: 90%;
    margin: 10px;
}

.showHideDetails {
    cursor: pointer;
}

.eventStateTable {
    background-color: #E6E6E6;
    border: 1px solid lightGrey;
    padding: 5px;
    width: 90%;
    margin: 10px;
}

    .eventStateTable th {
        text-align: left;
        background-color: inherit;
    }

    .eventStateTable td {
        text-align: left;
        background-color: inherit;
    }

.quoteLogClassAudit {
    background-color: White;
}

.quoteLogClassWarning {
    background-color: Yellow;
}

.quoteLogClassError {
    background-color: Red;
}

.quoteLogClassFatalerror {
    background-color: Red;
}

.poHeaderDiv {
    width: 100%;
}

.poHeaderTable {
    border: solid 1px black;
    float: right;
    margin: 1ex 0 2ex 0;
    width: 150;
    font-size: 14pt;
    height: 100px;
}

    .poHeaderTable TH, .poHeaderTable TD {
        background-color: White;
        text-align: center;
        border: solid 1px Black;
        padding: 0.5ex;
        text-align: left;
    }

.poHeaderLogo {
    float: left;
    width: 260px;
}

.poTitle {
    text-align: center;
    width: 100%;
    font-size: x-large;
    font-weight: bold;
    margin: 1ex 0 2ex 0;
}

.poTable {
    border: solid 1px black;
    width: 100%;
    margin: 1ex 0 0 0;
}

    .poTable TH {
        background-color: White;
    }

    .poTable TH, .poTable TD {
        border: solid 1px Black;
        padding: 0.5ex;
        text-align: left;
    }

.poFooterTable {
    border: none;
    width: 100%;
    margin: 3ex 0 0 0;
}

    .poFooterTable TH {
        background-color: White;
    }

    .poFooterTable TH, .poFooterTable TD {
        border: none;
        padding: 0.5ex;
        text-align: left;
    }

.poOrderTotal {
    font-weight: bold;
}

.supplierDeliveryExpansion {
    margin-left: 50px;
    background-color: transparent;
}

.dtRowSupplierDelivery {
    border-bottom: 1px solid black;
}

    .dtRowSupplierDelivery.evenRowExpansion {
        background-color: White;
    }

    .dtRowSupplierDelivery.oddRowExpansion {
        background-color: #E2E4FF;
    }

.supplierOrderRow {
    font-weight: bold;
}

.supplierDeliverySubTable td {
    border: 1px solid #d3d3d3;
}

#pnlSubscriptions .ui-widget-header, #pnlSubscriptionDetail .ui-widget-header, #divSalesApprove .ui-widget-header {
    background: #FFE4B5;
}

.transferIndent {
    position: relative;
    left: 100px;
    width: 92%;
}

.deleteEmployeeCapabilities {
    color: red;
}

/* Destructive action button override */
input[type="submit"].deleteButton,
input[type="button"].deleteButton,
button.deleteButton {
    background: #b00020;
    border-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

    input[type="submit"].deleteButton:hover,
    input[type="button"].deleteButton:hover,
    button.deleteButton:hover {
        background: #7a0016;
    }

    input[type="submit"].deleteButton:active,
    input[type="button"].deleteButton:active,
    button.deleteButton:active {
        background: #d32f2f;
    }

    input[type="submit"].deleteButton:disabled,
    input[type="button"].deleteButton:disabled,
    button.deleteButton:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Styles for multiselect */

.ui-multisel {
    border: solid 1px;
    font-size: 0.8em;
}

    .ui-multisel ul {
        -moz-user-select: none;
    }

    .ui-multisel li {
        margin: 0;
        padding: 0;
        cursor: default;
        line-height: 20px;
        height: 20px;
        font-size: 11px;
        list-style: none;
    }

        .ui-multisel li a {
            color: #999;
            text-decoration: none;
            padding: 0;
            display: block;
            float: left;
            cursor: pointer;
        }

        .ui-multisel li.ui-draggable-dragging {
            padding-left: 10px;
        }

    .ui-multisel div.selected {
        position: relative;
        padding: 0;
        margin: 0;
        border: 0;
        float: left;
    }

    .ui-multisel ul.selected {
        position: relative;
        padding: 0;
        overflow: auto;
        overflow-x: hidden;
        background: #fff;
        margin: 0;
        list-style: none;
        border: 0;
        position: relative;
        width: 100%;
    }

    .ui-multisel div.available {
        position: relative;
        padding: 0;
        margin: 0;
        border: 0;
        float: left;
        border-left: 1px solid;
    }

    .ui-multisel ul.available {
        position: relative;
        padding: 0;
        overflow: auto;
        overflow-x: hidden;
        background: #fff;
        margin: 0;
        list-style: none;
        border: 0;
        width: 100%;
    }

        .ui-multisel ul.available li {
            padding-left: 10px;
        }

    .ui-multisel .ui-state-default {
        border: none;
        margin-bottom: 1px;
        position: relative;
        padding-left: 20px;
    }

    .ui-multisel .ui-state-hover {
        border: none;
    }

    .ui-multisel .ui-widget-header {
        border: none;
        font-size: 11px;
        margin-bottom: 1px;
    }

    .ui-multisel .add-all {
        float: right;
        padding: 7px;
    }

    .ui-multisel .remove-all {
        float: right;
        padding: 7px;
    }

    .ui-multisel .search {
        float: left;
        padding: 4px;
    }

    .ui-multisel .count {
        float: left;
        padding: 7px;
    }

    .ui-multisel li span.ui-icon-arrowthick-2-n-s {
        position: absolute;
        left: 2px;
    }

    .ui-multisel li a.action {
        position: absolute;
        right: 2px;
        top: 2px;
    }

    .ui-multisel input.search {
        height: 14px;
        padding: 1px;
        opacity: 0.5;
        margin: 4px;
        width: 100px;
    }

.multisel {
    width: 500px;
    height: 200px;
}

#switcher {
    margin-top: 20px;
}

.generatorDiv {
    float: left;
    padding-right: 10px;
    padding-bottom: 10px;
}

#iptMinMax {
    float: left;
}

.returnSet {
    float: left;
    width: 100%;
}

.saveQuery {
    float: right;
}

#tblResultSet,
#tblSavedQueries {
    width: 100%;
}

.reportLinkable {
    color: #0000FF !important;
    text-decoration: underline;
    cursor: hand;
    cursor: pointer;
}

.slFilterType {
    margin-right: 4px;
}

#iptMinMax {
    margin-right: 10px;
}

.deleteFilterRow {
    color: Red;
}

.redFont {
    color: Red;
}

.grayFont {
    color: Gray;
}

.counterWarning {
    color: Red;
}

.cosys-jquery.ui-widget-content, .cosys-jquery .ui-widget-content {
    background: transparent;
}

.cosys-jquery .ui-widget-header {
    background: #FFE4B5;
}

.cosys-jquery.ui-widget, .cosys-jquery.ui-widget input {
    font-family: "Arial", sans-serif;
    font-size: small;
}

.cosys-jquery.ui-state-active {
    color: inherit;
}

#dealSalesClosureLegend P {
    margin: 0;
    padding: 0;
}

#dealSalesClosureLegend {
    margin-bottom: 5px;
    font-size: 85%;
}

#divSasCustCapacityPanel {
    width: 100%;
    height: 30px;
    background: pink;
    font-size: 120%;
    position: fixed;
    padding-left: 0;
    left: 0;
}

.thSasCustCapacityPanel {
    background: pink;
    font-size: 120%;
}

.divSasSystems {
    padding-top: 30px;
}

.tblSasSystemLicence {
    table-layout: fixed;
    width: 325px;
}

.thSasSystemLicence {
    width: 100px;
}

.sasCapacityMedText {
    width: 200px;
    word-wrap: break-word;
}

.sasCapacityLongText {
    width: 200px;
    height: 150px;
    word-wrap: break-word;
    font-size: smaller;
}

.tdSasSystemsDisplay {
    vertical-align: top;
}

.xxSmallText {
    font-size: xx-small
}

.regularTextArea, .regularTextArea textarea {
    font-family: inherit;
    font-size: 1em;
    width: 99%;
}

.certificateName {
    font-weight: bold;
}

.certificateCell {
    padding-left: 20px;
    vertical-align: top;
}

.divSuppProjGridview table {
    width: 100%;
}

/* HD80470 - Add the concept of Cancelled Orders */
.CancelledOrder {
    background-color: #E4717A;
}

.DecendantOrder {
    background-color: #90EE90;
}

.AncestorOrder {
    background-color: #ADD8E6;
}

.CancelledDecendantOrder {
    background-color: #90EE90;
}

    .CancelledDecendantOrder td:nth-child(2) {
        background-color: #E4717A !important;
    }

.CancelledAncestorOrder {
    background-color: #ADD8E6;
}

    .CancelledAncestorOrder td:nth-child(2) {
        background-color: #E4717A !important;
    }

.CancelledWarning {
    border-top: hidden;
    border-bottom: hidden;
    border-right: hidden;
    font-weight: bold;
    padding-left: 5px;
    color: #d62936;
}

.tblDealsInQuarter {
    font-size: smaller;
}

.diq_error {
    background-color: Red !important;
}

.diq_warning {
    background-color: Orange !important;
}

.diq_alert {
    background-color: Yellow !important;
}

.diq_note {
    background-color: Lime !important;
}

/* Deal Line Query styles */
.dlq_warning {
    border: 3px solid #FF4D4D;
    padding: 5px;
    color: #FF4D4D;
}

.dlq_right {
    float: right;
}

/* Quote Upload Detail styles */
.qudInfoBox, .qudInfoBox th {
    border: 1px solid black;
}

    .qudInfoBox th {
        border-right: 1px solid black;
    }

.not_in_dep {
    font-weight: bold;
    color: red;
}

.line_not_in_dep {
    background-color: grey;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #FFFACD !important;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 5px;
}

/* Make "unfixed" links render like submit/buttons */
.unfixed a,
.unfixed a:visited {
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.2;
    color: #ffffff;
    background: var(--brand-primary);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    margin: 0.5rem;
    text-decoration: none;
}

    .unfixed a:hover {
        background: var(--brand-secondary-dark);
        text-decoration: underline;
    }

    .unfixed a:active {
        background: var(--brand-primary-light);
    }

    .unfixed a:focus {
        outline: none;
    }

    .unfixed a:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(185, 224, 247, 0.65);
    }

    .unfixed a[aria-disabled="true"],
    .unfixed a.disabled {
        opacity: 0.65;
        cursor: not-allowed;
        pointer-events: none;
    }

.greyedOut th, .greyedOut {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
    background-color: lightgrey !important;
}

.inline {
    display: inline;
}

.addressLineBreak {
    white-space: pre-wrap;
}

.trumbowyg-editor-box, .trumbowyg-editor {
    background: #ffffff;
}

    .trumbowyg-editor table {
        margin-bottom: var(--tbw-cell-line-height);
    }

    .trumbowyg-editor th, .trumbowyg-editor td {
        height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
        min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
        padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
        border: 1px solid #e7eaec;
    }

trumbowyg-button-pane button {
    margin: 0 !important
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid var(--brand-primary);
    margin: 0.9rem 0;
    opacity: 0.9;
}


table.menuBar {
    width: auto;
    border-collapse: separate;
    border-spacing: 0.5rem;
    background: linear-gradient(180deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    margin: 6px 0;
    padding: 0.35rem;
}

    /* Pills (td cells) */
    table.menuBar th,
    table.menuBar td {
        border-radius: 999px; /* true pill */
        width: auto;
    }

    table.menuBar th {
        background: var(--brand-accent);
        color: #ffffff;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        padding: 0.45rem 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
    }

    table.menuBar td {
        background: rgba(255, 255, 255, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.30);
        overflow: hidden;
        padding: 0.15rem;
        white-space: nowrap;
    }

        table.menuBar td:hover {
            background: rgba(185, 224, 247, 0.55);
            border-color: rgba(185, 224, 247, 0.75);
        }

        /* Apply padding to the actual interactive elements so they fill the cell */
        table.menuBar td > a,
        table.menuBar td > span,
        table.menuBar td > form {
            display: block;
            padding: 0.45rem 0.75rem;
            border-radius: 999px;
            background: transparent;
            color: white;
        }

    /* Link styling */
    table.menuBar a,
    table.menuBar a:visited {
        color: #ffffff;
        text-decoration: none;
        background: transparent;
    }

    /* Menu links don’t need to stretch; keep pill height but don’t fill width */
    table.menuBar td > a {
        display: inline-block;
        width: auto;
        flex: 0 0 auto;
    }

    /* Quick search layout: keep pill sized to content and allow textbox to shrink */
    table.menuBar td > form {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: auto;
        max-width: 100%;
    }

        /* Allow flex items to shrink within table cells */
        table.menuBar td > form > * {
            min-width: 0;
        }

        table.menuBar td > form input[type="text"] {
            flex: 1 1 12rem;
            max-width: 20rem;
            min-width: 6rem;
        }

    table.menuBar td:hover {
        background: rgba(185, 224, 247, 0.35);
        border-color: rgba(185, 224, 247, 0.55);
    }

    table.menuBar td > a:hover {
        background: transparent;
        color: #ffffff;
        text-decoration: underline;
    }

    /* Quick search layout: make the cell act like a pill and let the textbox expand */
    table.menuBar td > form {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

        /* Match textbox styling to brand */
        table.menuBar td > form input[type="text"] {
            flex: 1 1 auto;
            width: 100%;
            min-width: 20rem;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 999px;
            padding: 0.35rem 0.65rem;
            font-size: 1rem;
            color: #0b223a;
            background: rgba(255, 255, 255, 0.92);
            font-family: inherit;
        }

            table.menuBar td > form input[type="text"]:focus {
                outline: none;
                border-color: var(--brand-secondary-light);
                box-shadow: 0 0 0 2px rgba(185, 224, 247, 0.45);
            }

    /* Buttons inside the menu bar */
    table.menuBar input[type="submit"],
    table.menuBar input[type="button"] {
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
        padding: 0.35rem 0.75rem;
        cursor: pointer;
    }

        table.menuBar input[type="submit"]:hover,
        table.menuBar input[type="button"]:hover {
            background: rgba(185, 224, 247, 0.55);
            border-color: rgba(185, 224, 247, 0.75);
        }

/* jQuery UI datepicker: prevent global table defaults from affecting it */
.ui-datepicker th {
    padding: .7em .3em !important;
    border: 0 !important;
}

.ui-datepicker td {
    padding: 1px !important;
    border: 0 !important;
}

    /* Undo global anchor-as-button styling for datepicker day cells */
    .ui-datepicker td a[href="#"] {
        border-radius: 0;
        padding: 0.2rem;
        margin: 0;
        text-decoration: none;
    }

        .ui-datepicker td a[href="#"]:hover,
        .ui-datepicker td a[href="#"]:active {
            background: transparent;
            text-decoration: none;
        }

/* Brand-styled form controls (global defaults) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    font-family: inherit;
    font-size: 1em;
    line-height: 1.2;
    color: #0b223a;
    background-color: #ffffff;
    border: 1px solid rgba(23, 71, 126, 0.45); /* var(--brand-secondary-dark) tint */
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    box-sizing: border-box;
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(185, 224, 247, 0.65); /* var(--brand-secondary-light) */
    }

/* Align checkbox/radio controls with their labels */
input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
    margin: 0 0.35rem 0 0; /* space between control and label */
}

    /* Label immediately following checkbox/radio (common pattern) */
    input[type="checkbox"] + label,
    input[type="radio"] + label {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        line-height: 1.2;
    }

/* If the input is inside the label: <label><input ...> Text</label> */
label > input[type="checkbox"],
label > input[type="radio"] {
    margin-right: 0.35rem;
}

input[type="text"].hasDatepicker {
    min-width: 8rem;
}

input[type="submit"],
input[type="button"],
button,
a[href="#"],
a.pillbutton,
.pillbutton a {
    font-family: inherit;
    font-size: 1em;
    line-height: 1.2;
    color: #ffffff;
    background: var(--brand-primary);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    margin: 1rem 0.2rem;
}

    input[type="submit"]:hover,
    input[type="button"]:hover,
    button:hover,
    a[href="#"]:hover,
    a.pillbutton:hover,
    .pillbutton a:hover {
        background: var(--brand-secondary-dark);
        text-decoration: underline;
    }

    input[type="submit"]:active,
    input[type="button"]:active,
    button:active,
    a[href="#"]:active,
    a.pillbutton:active,
    .pillbutton a:active {
        background: var(--brand-primary-light);
        text-decoration: underline;
    }

    input[type="submit"]:disabled,
    input[type="button"]:disabled,
    button:disabled,
    a[href="#"]:disabled,
    a.pillbutton:disabled,
    .pillbutton a:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

a.pillbutton,
.pillbutton a {
    margin: 0 0 0.5rem 0 !important;
    display: inline-block;
}
    input[type="submit"].ml,
    input[type="button"].ml,
    button.ml,
    a[href="#"].ml,
    a.pillbutton.ml,
    .pillbutton.ml a {
        margin-left: 1em !important;
    }

a[href="#"].remove-all, a[href="#"].add-all {
    color: White;
}

.ui-multisel li a[href="#"].action {
    margin: 0;
    background-color: var(--brand-primary-light)
}