/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body { font-size: 90%; font-family: Arial, Helvetica, Sans-Serif; margin: 0; color: #696969; }

a { outline: none; }

p, ul { margin-bottom: 20px; line-height: 1.6em; }

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #000; font-family: Arial, Helvetica, sans-serif; }

h1 { font-size: 2em; padding-bottom: 0; margin-bottom: 0; }
h2 { padding: 0 0 10px 0; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { margin-top: 0; }

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page { background-color: #fff; background-position: left top; background-repeat: repeat-x; padding: 0 20px; }

#header { position: relative; margin-bottom: 0px; color: #000; padding: 0; }

#header #title.noMenu
{
    min-height: 75px;
}

#header h1 { font-weight: bold; padding: 0; margin: 0; color: #fff; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px !important; line-height: 40px; }

#logo { position: absolute; top: 0; right: 0; background-color: transparent; background-position: right center; background-repeat: no-repeat; width: 300px; height: 75px; }

#main { position: relative; margin-top: 20px; margin-bottom: 20px; }

#footer { color: #999; padding: 10px 0; text-align: center; line-height: normal; margin: 0; font-size: .9em; }

/* MENU   
----------------------------------------------------------*/

ul.menu { font-size: 0.85em; }

ul.menu, ul.menu ul, ul.menu li { position: relative; display: block; float: left; padding: 0; margin: 0; list-style: none; }

ul.menu ul { float: right; }

ul.menu li { background-position: left top; background-repeat: no-repeat; }

ul.menu ul li.current-ancestor { background: #e6e6e6 url(none); }
ul.menu li.current { background: #fff url(none); }

ul.menu li a { display: block; float: left; color: #fff; background-color: transparent; background-position: right top; background-repeat: no-repeat; font-weight: bold; text-decoration: none; padding: 0 20px; margin-left: 1px; line-height: 35px; }

ul.menu li a:hover, ul.menu li a.current:hover, ul.menu li a.current-ancestor:hover, ul.menu ul li:hover a, ul.menu ul li:hover a.current, ul.menu ul li:hover a.current-ancestor { color: #666; background: #fff url(none); }

ul.menu ul li:hover { background: #e6e6e6 url(none); }

ul.menu ul a.current-ancestor, ul.menu a.current { background: #fff url(none); }

ul.menu ul li:hover ul { display: block; position: absolute; top: 35px; z-index: 200; }

ul.menu ul ul { display: none; font-size: 0.9em; background: #f3f3f3 url(../images/bg-menu.gif) left top repeat-x; padding: 15px 0; width: 200px; border: solid 1px #e6e6e6; border-top: 0; }

ul.menu ul ul li, ul.menu ul ul li a { background: transparent url(none) !important; float: none; font-weight: normal; }

ul.menu ul ul li a { line-height: normal; padding: 5px 20px; }

ul.menu ul ul ul { display: none !important; }

ul.menu .item0 .item0, ul.menu .item0 .item1, ul.menu .item1 .item0, ul.menu .item1 .item1, ul.menu .item1 .item2, ul.menu .item1 .item3, ul.menu .item1 .item4, ul.menu .item1 .item5, ul.menu .item1 .item6, ul.menu .item2 .item0, ul.menu .item2 .item1, ul.menu .item2 .item2 { font-weight: bold; }

ul.menu .item2 li.item2 { border-bottom: solid 1px #e6e6e6; padding-bottom: 10px; margin-bottom: 10px; }

/* BREADCRUMB
----------------------------------------------------------*/

#breadcrumb { clear: left; height: 60px; }

#breadcrumb p { color: #b2b2b2; font-size: 0.75em; padding: 5px 0; margin: 0; }

#breadcrumb p a { color: #666; text-decoration: none; }

#breadcrumb p a:hover { text-decoration: underline; }

#breadcrumb p span.link { color: #fff; }

#breadcrumb p a span.link { color: #666; }

#breadcrumb h2 { color: #666; font-size: 1.25em; padding: 0; margin: -2px 0 0; }

#breadcrumb h2.menuHeading
{
    padding-top:10px;
}

#breadcrumb p span.separator { padding: 0 5px; }

/* LOGIN
----------------------------------------------------------*/

#logindisplay { position: absolute; top: 75px; right: 0; display: block; }

#logindisplay p { color: #666; font-size: 0.75em; text-align: right; padding: 5px 0; margin: 0; }

#logindisplay a { color: #666; font-weight: bold; text-decoration: none; }

#logindisplay a:hover { text-decoration: underline; }

/* SUB MENU
----------------------------------------------------------*/
ul.sub-menu, ul.sub-menu li { padding: 0; margin: 0; list-style: none; }

ul.sub-menu { clear: left; display: block; border-bottom: solid 1px #ccc; margin: 0 0 20px; }

ul.sub-menu li { display: block; float: left; font-size: 0.75em; line-height: 25px; padding-left: 2px; margin-bottom: -1px; }

ul.sub-menu li a { display: block; color: #666; text-decoration: none; padding: 0 30px; }

ul.sub-menu li.current { background: transparent url(../images/bg-tab.gif) left top no-repeat; border-bottom: solid 1px #fff; }

ul.sub-menu li.current a { font-weight: bold; background: transparent url(../images/bg-tab.gif) right top no-repeat; }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

table.form { border-collapse: collapse; margin-top: -20px; margin-bottom: 20px; width: 100%; }

.msg + table.form { margin-top: 0; }

table.form tr td { vertical-align: top; padding-left: 10px; width: 50%; }

table.form tr td td { width: auto; }

table.form tr td:first-child { padding: 0 10px 0 0; }

table.fieldset { margin-top: 20px; width: 100%; }
table.fieldset.noMargin {
    margin-top: 0;
}

table.cont { margin-top: 0; z-index: 2; }

table.fieldset thead th { color: #fff; font-size: 1em; line-height: 20px; text-align: left; padding: 5px 10px; }

table.fieldset tbody th, table.fieldset tbody td { color: #666; font-size: 0.75em; text-align: left; line-height: 20px; vertical-align: top; padding: 5px 0; border-bottom: solid 1px #ccc; width: 50%; }

table.fieldset tbody th { position: relative; padding-left: 10px; }

table.fieldset td.txt, table.fieldset td.date { display: block; position: relative; padding-right: 6px; }
table.fieldset td.dateleft input[type=text].dp-applied { padding-left: 20px; box-sizing: border-box; }
table.fieldset td.dateleft a.dp-choose-date { right: auto; left: 0; }


table.fieldset td.txt p { margin: 2px 0; font-size: 11px; }

table.fieldset td.txt-overlay img { display: block; position: absolute; top: 7px; right: 2px; }

table.fieldset td.chk ul, table.fieldset td.chk li { float: left; padding: 0; margin: 0; list-style: none; width: 100%; }

table.fieldset td.chk li { width: 33.3%; }

table.fieldset td.parts-wrapper li { width: 50%; }

table.fieldset td.chk li input, table.fieldset td.chk li label { vertical-align: middle; }

table.fieldset select { font-size: 1em; border: 1px solid #CCC; padding: 2px; width: 100%; }

table.fieldset input[type="text"], table.fieldset input[type="password"], table.fieldset textarea { font-family: Arial, Helvetica, Sans-Serif; font-size: 1em; border: 1px solid #CCC; padding: 2px; margin: 0; width: 100%; }

table.fieldset textarea { height: 100px; }

.btnbar { background: #f3f3f3; padding: 10px !important; margin-bottom: 20px; }

table.form tr td h2.tableHeading 
{
    font-size: 1.25em;
    margin: 20px 0 0 0;
    padding: 10px 0 5px 0;
    color: #666;
}

/* OPEN AND CLOSE REPORT
----------------------------------------------------------*/

.btnbar.reportBtns {
    padding: 0 10px !important;
    margin-top: 20px;
}
.btnbar.reportBtns .navigationBtn {
    float: left;
}
.btnbar.reportBtns .downloadBtn {
    float: right;
}

table.index.reportTable {
    width: 90%;
    margin: auto;
}

table.index.reportTable a.btn3 {
    float: right;
}

/* TABLE
----------------------------------------------------------*/

.index-btnbar-top { position: relative; background: transparent url(../images/bg-buttonbar.gif) left top no-repeat; margin-bottom: -5px; height: 39px; z-index: 100; }

.index-btnbar-btm { position: relative; background: transparent url(../images/bg-buttonbar2.gif) left top no-repeat; margin-top: -6px; height: 39px; z-index: 100; }

.index-btnbar-top .inr, .index-btnbar-btm .inr { position: relative; border-right: solid 1px #f4f4f4; padding: 3px 10px; height: 38px; }

.index-btnbar-btm .inr { top: 5px; border-right: solid 1px #d2d2d2; }

.index-btnbar-top .right, .index-btnbar-btm .right { display: block; float: right; }

.index-btnbar-top .right a, .index-btnbar-btm .right a { margin: 0 -5px 0 5px; }

.index-btnbar-top .right strong { font-size: 0.75em; line-height: 2.6em; }

table.index { border: 0; border-collapse: collapse; width: 100%; z-index: 50; }

table.index td { font-size: 0.75em; line-height: 2em; padding: 5px !important; border-bottom: solid 1px #bfbfbf; }

table.index td a { text-decoration: none; }

table.index td a:hover { text-decoration: underline; }

table.index th { font-size: 0.75em; line-height: 1.6em; padding: 6px 5px; text-align: left; background-color: #f3f3f3; border-top: solid 1px #f2f2f2; border-bottom: solid 1px #bfbfbf; }

table.index th a { display: block; color: #696969; text-decoration: none; }

table.index th a.desc.active { background: transparent url(../images/sort-asc.gif) right center no-repeat; }

table.index th a.asc.active { background: transparent url(../images/sort-desc.gif) right center no-repeat; }

table.index .batch { width: 1px; white-space: nowrap; }

table.index .actions { width: 1px; white-space: nowrap; text-align: right; padding-right: 10px; }

table.form .index-btnbar-top { margin: 20px 0 -26px; }

/*table.form table.index { margin-top: 20px; }*/

table.form table.index th { color: #fff; font-size: 0.85em; font-weight: bold; }

table.index .middleRow {
    text-align: center;
}

table.index tr:nth-child(even) td {
    background: #f3f3f3;
}

table.index tr:nth-child(odd) td {
    background: #fff;
}


/* PAGER
----------------------------------------------------------*/
.pager { float: right; font-size: 0.75em; padding-top: 10px; }

.pager a { display: block; float: left; color: #666; border: solid 1px #ccc; padding: 2px 6px; margin-left: 5px; margin-bottom: 5px; text-decoration: none; }

.pager a:hover, .pager a.current { background: #e5e5e5; }

/* SEARCH
----------------------------------------------------------*/
div.search { position: relative; background: #f8f8f8; border: solid 1px #bfbfbf; padding: 15px; margin-bottom: 20px; }

div.search a.close { display: block; position: absolute; right: 10px; top: 10px; background: transparent url(../images/btn-close.gif) left top no-repeat; width: 13px; height: 13px; }

div.search a.close:hover { background-position: right top; }

div.search .field { float: left; margin-right: 20px; line-height: 25px; }

div.search .field label {
     color: #666; font-size: 0.75em; font-weight: bold; line-height: 1.6em; margin-right: 5px; vertical-align: middle;
}
div.search .field.dateField label {
    display: inline-block;
}

div.search .field select, div.search .field input[type=text] {
     vertical-align: middle;
      font-size: 0.85em; 
      border: solid 1px #999; 
      padding: 2px; 
      width: 200px;
}
div.search .field.dateField .closedReports{
    display: inline-block;
}


div.search .field input[type=submit], div.search .field a { font-size: 0.85em; }

/* LOGON   
----------------------------------------------------------*/
.logon { margin: 100px auto; border: solid 2px #f3f3f3; padding: 20px 0 0; width: 300px; }

.logon p { padding: 0 20px 10px; margin: 0; }

.logon p label { display: block; font-size: 1.05em; font-weight: bold; margin-bottom: 5px; }

.logon p label.inline { display: inline; margin: 0; font-weight: normal; vertical-align: middle; }

.logon p input { vertical-align: middle; }

.logon p input.txt { font-family: Arial, Helvetica, Sans-Serif; font-size: 1.1em; border: 1px solid #CCC; padding: 5px; width: 95%; }

.logon .btnbar { margin-top: 10px; padding: 15px 15px 10px !important; }

.logon .btn2 { float: right; }

.logon ul.validation-summary-errors { margin: 0 20px 20px; }

/* MISC  
----------------------------------------------------------*/
.clear { clear: both; }

.input-validation-error, input.error { border: 1px solid #f30 !important; background-color: #fcc; }

ul.validation-summary-errors { border: solid 1px #f30; background-color: #fcc; padding: 10px 20px 10px 30px; font-weight: bold; color: #ff0000; margin-top: 20px; }

.validation-summary-errors { font-size: 0.75em; font-weight: bold; color: #f30; }

.field-validation-error { display: block;margin: 5px -10px 5px 0; border: solid 1px #f30; background-color: #fcc; padding: 5px; font-weight: bold; color: #ff0000; }

.msg { font-weight: bold; padding: 10px; margin-top: 20px; }

.msg p { padding: 0; margin: 0; }

.msg-success { color: #01c547; border: solid 1px #01c547; background: #cfc; }

.msg-error { color: #f30; border: solid 1px #f30; background: #fcc; }

.msg-warning { color: #f90; border: solid 1px #f90; background: #ffc; }

.msg-info { color: #09f; border: solid 1px #09f; background: #cff; }

.msg-sticky { position: fixed; bottom: 0; left: 0; right: 0; width: calc(100% - 22px); z-index: 9999; }

p { font-size: 0.75em; }

img { border: 0; }

a.btn, a.btn span { display: block; float: left; background-color: transparent; background-position: left -70px; background-position: no-repeat; }

a.btn { color: #666; font-weight: bold; padding-left: 2px; line-height: 28px; height: 28px; text-decoration: none; margin-right: 10px; }

a.btn span { background-position: right -70px; padding: 0 20px 0 18px; }


.btn2, .btn2 input, a.btn2 span { display: block; float: left; background-color: transparent; background-position: left -98px; background-position: no-repeat; }

.btn2 { color: #fff; font-weight: bold; padding-left: 5px; line-height: 28px; margin-right: 10px; text-decoration: none; }

.btn2 input, a.btn2 span { color: #fff; font-size: 1.1em; font-weight: bold; background-position: right -98px; cursor: pointer; line-height: 28px; padding: 0 20px 0 15px; border: 0; height: 28px; }

.btn2 input, .btn3 input, .btn4 input { padding-bottom: 5px; margin: 0; }

.btn3, .btn3 input, a.btn3 span { display: block; float: left; background-color: transparent; background-position: left -126px; background-position: no-repeat; }

.btn3 { padding-left: 5px; margin-right: 10px; text-decoration: none; }

.btn3 input, a.btn3 span { background-position: right -126px; cursor: pointer; color: #fff; font-size: 1.1em; font-weight: bold; line-height: 28px; padding: 0 20px 0 15px; border: 0; height: 28px; }

.btn4, .btn4 input, a.btn4 span { display: block; float: left; background-color: transparent; background-position: left -154px; background-position: no-repeat; outline: none; }

.btn4 { padding-left: 5px; margin-right: 5px; text-decoration: none; }

.btn4 input, a.btn4 span { background-position: right -154px; cursor: pointer; font-size: 0.75em; font-weight: bold; line-height: 27px; padding: 0 20px 0 15px; border: 0; height: 27px; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; }
/* IE6 */
*:first-child + html .clearfix { zoom: 1; }
/* IE7 */

/*############## GLOBAL JOB SEARCH ###############*/
.addjobbutton { float: left; margin-right: 30px; margin-bottom: 30px; width: 250px; }
.globaljobsearchholder { padding: 12px 0 0 0; }
.globaljobsearchholder input[type=text] {
     float: left; 
     margin: 2px 5px 0 0; 
     padding: 2px;
    min-width: 200px;
}

/*######### PLACE HOLDER ############*/
.placeholder { color: #aaa; }

/*---- Job Images ----*/
ul.jobimages { padding: 0;margin: 0;}
ul.jobimages li { list-style: none;display: -moz-inline-stack;display: inline-block;zoom: 1;*display: inline;padding: 3px;text-align: center;}
ul.jobimages li a, ul.jobimages li a:visited { text-decoration: none;color: #666666;}
ul.jobimages li a:hover { color: #000;}
ul.jobimages li span { display: block;font-size: 10px;line-height: 10px;}

/*--- Job Line Colours ---*/
/*--- CATS ---*/
.cats-delegateauthority-yes td {}
.cats-delegateauthority-no td { color: blue;}

.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.black { color: black; }
.orange { color: orange; }

.price-edit {
    font-size: 18px;
    text-decoration: none !important;
}

/* TEAMS */
.team-manage {
  clear: both;
  overflow: hidden;
  width: 49%;
  margin-bottom: 10px;
  /*outline: 1px solid green;*/
  }

  .team-manage-members {
    /*outline: 1px solid red;*/
    width: 50%;
    float: left;
    display: inline;
    }

    .team-manage-members select {
      width: 100%;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      min-height: 100px;
      }

      .team-manage-members option {
        padding: 2px;
        font-family: Arial, Helvetica, Sans-Serif;
        }

      .team-manage .btn2,
      .team-manage .btn3 {
        font-size: .75em;
        }

/* searchable select */
.searchable-select {
    position: relative;
    display: inline-block;
}

.searchable-select__native {
    display: none;
}
/* keep for POST, hide native UI */

.searchable-select__input {
    width: 320px;
    padding: 6px 28px 6px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    box-sizing: border-box;
}

.searchable-select__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
}

    .searchable-select__clear:hover {
        opacity: 1;
    }

.searchable-select__list {
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    width: 320px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 3px;
    z-index: 9999;
    display: none;
    box-sizing: border-box;
}

.searchable-select__item {
    padding: 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .searchable-select__item.is-active {
        background: #eee;
    }

    .searchable-select__item.is-selected {
        font-weight: 600;
    }

.searchable-select__meta {
    padding: 6px 8px;
    color: #666;
    font-size: 12px;
    border-top: 1px solid #eee;
}

/* Department add/edit page — readability overrides (scoped to this page only) */
.department-page table.fieldset tbody th,
.department-page table.fieldset tbody td {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

.department-page table.fieldset tbody th label {
    color: #333;
}

/* Department rule builder — scoped UI, OTIS colour schema (#01C547) */
.department-builder {
    --dept-green: #01C547;
    --dept-green-text: #0a7a34;
    --dept-green-light: #f4fbf7;
    --dept-green-mid: #9fe3bd;
    --dept-text: #333;
    --dept-text-muted: #555;
    --dept-text-subtle: #777;
    --dept-border: #ccc;
    --dept-bg: #fff;
    --dept-bg-muted: #f5f5f5;
    --dept-exclude-bg: #fffaf3;
    --dept-exclude-border: #e8d4b0;
    --dept-exclude-text: #6b4e1a;

    margin-top: 20px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dept-text);
}

/* Unified width: General + rule builder share one centred column */
.department-page table.form {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.department-page table.form td.department-form-cell {
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

.department-page .btnbar {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.department-panel {
    border: 1px solid var(--dept-border);
    background: var(--dept-bg);
    margin-bottom: 20px;
    overflow: hidden;
}

.department-panel--excludes {
    border-color: var(--dept-exclude-border);
    background: var(--dept-exclude-bg);
}

.department-panel-header {
    padding: 6px 10px;
    background: var(--dept-green);
    border-bottom: 0;
}

.department-panel--excludes .department-panel-header {
    background: #8a6420;
}

.department-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
}

.department-panel-intro {
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--dept-text-muted);
    line-height: 1.5;
    background: var(--dept-bg-muted);
    border-left: 3px solid var(--dept-green);
}

.department-panel--excludes .department-panel-intro {
    border-left-color: #8a6420;
    background: #fff;
}

.department-panel-intro strong {
    color: var(--dept-text);
    font-weight: bold;
}

.department-panel-body {
    padding: 12px 14px 14px;
}

.department-rule-clauses-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.department-rule-clauses-empty {
    text-align: center;
    padding: 24px 16px;
    margin-bottom: 14px;
    border: 1px dashed var(--dept-border);
    background: var(--dept-bg-muted);
}

.department-rule-clauses-empty-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: bold;
    color: var(--dept-text);
}

.department-rule-clauses-empty-text {
    margin: 0;
    font-size: 13px;
    color: var(--dept-text-muted);
}

.department-rule-clause {
    border: 1px solid var(--dept-border);
    background: var(--dept-bg);
    overflow: hidden;
}

.department-rule-clause-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--dept-border);
}

.department-rule-clause-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.department-rule-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--dept-green);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.3;
}

.department-rule-logic {
    font-size: 13px;
    color: var(--dept-text-muted);
}

.department-rule-logic strong {
    color: var(--dept-text);
    font-weight: bold;
}

.department-rule-clause-remove.btn {
    float: none;
    margin: 0;
    padding-left: 2px;
    line-height: 26px;
    height: auto;
}

.department-rule-clause-remove.btn span {
    font-size: 12px;
    line-height: 26px;
    height: 26px;
    padding: 0 12px 0 10px;
    color: var(--dept-text);
    font-weight: bold;
}

.department-dimension {
    padding: 12px 14px;
    border-top: 1px solid #e6e6e6;
}

.department-dimension:first-child {
    border-top: 0;
}

.department-dimension--exclude {
    border-top-color: #f0e6d6;
}

.department-dimension-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.department-dimension-title {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--dept-text);
}

.department-dimension-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: var(--dept-text);
    background: #fff;
    border: 1px solid var(--dept-border);
    border-left: 3px solid var(--dept-green);
    padding: 3px 10px;
}

.department-dimension--exclude .department-dimension-count {
    color: var(--dept-exclude-text);
    border-left-color: #8a6420;
    background: #fff;
}

.department-dimension-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--dept-text-subtle);
}

.department-dimension-filter,
.department-builder .department-picker-q {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid var(--dept-border);
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 13px;
    color: var(--dept-text);
    box-sizing: border-box;
    background: var(--dept-bg);
}

.department-dimension-filter::placeholder,
.department-builder .department-picker-q::placeholder {
    color: #999;
}

.department-dimension-filter:focus,
.department-builder .department-picker-q:focus {
    outline: none;
    border-color: var(--dept-green);
}

.department-checkbox-panel {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--dept-border);
    background: var(--dept-bg);
}

.department-builder ul.department-rules {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: none;
    overflow: visible;
}

.department-builder ul.department-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 14px;
}

.department-builder ul.department-rules li {
    margin: 0;
    float: none;
    width: auto;
}

.department-builder ul.department-rules li.is-filtered-out {
    display: none;
}

.department-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dept-text);
}

.department-checkbox-label:hover {
    background: var(--dept-green-light);
}

.department-checkbox-label input {
    margin: 3px 0 0;
    flex-shrink: 0;
}

.department-checkbox-label span {
    word-break: break-word;
}

.department-rule-block {
    margin-bottom: 0;
    overflow: visible;
}

.department-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px;
    border: 1px solid var(--dept-border);
    background: var(--dept-bg);
    margin-bottom: 10px;
    box-sizing: border-box;
}

.department-selected:empty::before {
    content: "None selected";
    color: var(--dept-text-subtle);
    font-size: 13px;
    font-style: italic;
}

.department-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--dept-border);
    border-left: 3px solid var(--dept-green);
    background: #fff;
    font-size: 13px;
    color: var(--dept-text);
    max-width: 100%;
}

.department-chip--exclude {
    border-left-color: #8a6420;
    background: #fff;
}

.department-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
    color: var(--dept-text);
}

.department-chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    color: var(--dept-text-muted);
}

.department-chip-remove:hover {
    color: var(--dept-text);
}

.department-picker-row {
    position: relative;
    max-width: 100%;
}

.department-picker-results {
    display: none;
    z-index: 10000;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--dept-border);
    background-color: var(--dept-bg);
    box-sizing: border-box;
}

.department-picker-item {
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--dept-bg);
    font-size: 13px;
    color: var(--dept-text);
}

.department-picker-item:hover {
    background-color: var(--dept-green-light);
}

.department-picker-item.department-picker-select-all {
    font-weight: bold;
    background-color: var(--dept-bg-muted);
    border-bottom: 1px solid var(--dept-border);
}

.department-picker-item.department-picker-select-all:hover {
    background-color: var(--dept-green-light);
}

.department-picker-meta {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--dept-text-muted);
    background-color: var(--dept-bg);
}

.department-rule-clause-actions {
    margin-top: 10px;
}

.department-rule-clause-actions .btn2 {
    margin-right: 0;
}

.department-rule-clause-remove.btn,
.department-rule-clause-remove.btn span {
    background-image: none;
    background-color: transparent;
}

@media (max-width: 900px) {
    .department-builder ul.department-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .department-builder ul.department-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .department-rule-clause-header {
        flex-direction: column;
        align-items: flex-start;
    }
}