/**********************************************************************/
/* FIX INABILITY TO SEE ERRORS                                        */
/**********************************************************************/

#displayprerender {
    position: absolute;
    z-index: 9999 !important;
    background: #FFF;
}

/**********************************************************************/
/* LOGIN / HEADER / FOOTER                                            */
/**********************************************************************/

.login .login-header .brand .logo-uwh-site-production {
    float: left;
    margin-right: 10px;
    margin-top: 2px;
    height: 36px;
    width: 47px;
    background-image: url("/images/logo/logo_uwh_multicolour_36px.png");
}

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

.navbar-brand {
    width: 240px;
    margin-right: -10px;
 }

.navbar-logo-uwh-site-production {
    float: left;
    margin-right: 10px;
    margin-top: -1px;
    height: 32px;
    width: 42px;
    background-image: url("/images/logo/logo_uwh_multicolour_32px.png");
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.login .login-header .brand .logo-uwh-site-development {
    float: left;
    margin-right: 10px;
    margin-top: 2px;
    height: 36px;
    width: 47px;
    background-image: url("/images/logo/logo_uwh_red_36px.png");
}

.navbar-logo-uwh-site-development {
    float: left;
    margin-right: 10px;
    margin-top: -1px;
    height: 32px;
    width: 42px;
    background-image: url("/images/logo/logo_uwh_red_32px.png");
    opacity: 0.9;
    filter: alpha(opacity=90);
}

@media (max-width: 767px) {

    .page-with-two-sidebar .header .navbar-brand .navbar-logo-uwh {
        position: relative;
        top: 3px;
        display: inline-block;
        float: none;
        margin-top: 0;
        margin-right: 5px;
    }

}

.copyrightfooter {
    z-index: 1020;
    padding: 10px 0;
    margin: 0px;
    border-top: 1px solid #CAD0D6;
    line-height: 20px;
}

.page-with-right-sidebar .footer {
    margin-left: 500px;
    margin-right: 245px;
}

/**********************************************************************/
/* SMARTY TEMPLATE COLUMN BUFFER                                      */
/**********************************************************************/

.width-25 {
    width: 25px;
}

/**********************************************************************/
/* DATATABLE LABEL CLASSES                                            */
/**********************************************************************/

.datatable-warning,
.datatable-danger  {
    color: #000000;
    margin-left: -2px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.datatable-danger  {
    background: #ff5b57 ;
}

.datatable-warning {
    background: #f59c1a ;
}

.graphmetric {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Host-metric drill-down: two charts side-by-side on wide screens, stacked on narrow.
   The shown.bs.tab window-resize hook (js/strapon_custom.js) re-measures charts revealed
   in a previously-hidden tab, so grid cells that start at display:none still lay out. */
.graphmetricgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 992px) {
    .graphmetricgrid {
        grid-template-columns: 1fr 1fr;
    }
}

/**********************************************************************/
/* DATATABLE ELLIPSIS FIX                                             */
/**********************************************************************/

/* Scoped to .nowrap, which is what actually makes this a DataTable rule.
   DataTable::createDataTable() emits
   "table table-striped table-bordered nowrap black" unconditionally and
   from exactly one place (datatable.class.php:87), and `nowrap` appears
   as a bare class token nowhere else in the tree — so every one of the
   171 DataTables is matched and nothing else is.

   Before this it read `.table > tbody > tr > td`, i.e. EVERY table, and
   the collateral damage was the genre it is not named after: the static
   Table class (table.class.php), whose own docblock promises "readable,
   vertically centred, not squashed". Measured on
   problem.php?action=problemview&problemid=52 at a 1600px viewport, the
   Description cell had scrollWidth 1195 against clientWidth 803 — 392px
   of the sentence clipped, with no wrap, no title and no tooltip to
   recover it. Re-scoping took that page from 2 clipped cells to 0 while
   leaving every DataTable's column widths pixel-identical (verified by
   A/B in a real browser across the shiftbooking calendar, cron list,
   report 808, report 1105 and the problem list: clipped 92 -> 92 and
   35 -> 35, body height unchanged).

   KEEP max-width INSIDE this block. It looks inert because a browser
   ignores max-width on an auto-layout table cell (the 803px measurement
   above is against a computed max-width of 236px) — but DataTables runs
   its OWN column-width pass and does honour it: lifting max-width alone
   widened a report-1105 column from 250px to 291px. Dropping it "because
   it does nothing" would silently re-lay-out all 171 tables.

   The min-device-width queries are deprecated and key off the physical
   screen rather than the viewport, so the cap does not respond to window
   size. Left as-is deliberately: correcting them would change DataTable
   column widths estate-wide, which is a separate decision from this fix. */

.table.nowrap > tbody > tr > td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media(min-device-width: 320px) {
    .table.nowrap > tbody > tr > td {
        max-width: 80px;
    }
}
@media(min-device-width: 480px) {
    .table.nowrap > tbody > tr > td {
        max-width: 120px;
    }
}
@media(min-device-width: 979px) {
    .table.nowrap > tbody > tr > td {
        max-width: 196px;
    }
}
@media(min-device-width: 1187px) {
    .table.nowrap > tbody > tr > td {
        max-width: 236px;
    }
}
@media(min-device-width: 1824px) {
    .table.nowrap > tbody > tr > td {
        max-width: 340px;
    }
}

/**********************************************************************/
/* NESTED KEY/VALUE TABLE (problem evidence)                          */
/**********************************************************************/

/* A table rendered inside ONE cell of another table — the problem
   engine's evidence expansion, where a JSON object becomes a sub-table.
   Left as a plain .table it fights its parent three ways, all measured
   on the problem-21 offcanvas at 1500px:

     1. It re-pays an indent the parent already paid. The parent's value
        cell starts its text at 871px; the nested cell added its own
        .5rem on top and started at 879px, so a nested block sat 8px
        right of every other value in the panel.
     2. Its rows are as tall as top-level rows (34px each), so an
        eight-signal block measured 289px against a 35px ordinary row
        and dominated everything around it.
     3. .table-responsive wraps it in a scroll container a cell has no
        use for (removed at source — Table::$table_responsive).

   Vertical padding is deliberately NOT symmetric: the first and last
   rows shed it entirely so the block's outer edge matches the parent
   cell's own padding rather than doubling it. */

.table-evidencenested > tbody > tr > td {
    padding-top: .125rem;
    padding-bottom: .125rem;
}

.table-evidencenested > tbody > tr > td:first-child {
    padding-left: 0;
}

.table-evidencenested > tbody > tr:first-child > td {
    padding-top: 0;
}

.table-evidencenested > tbody > tr:last-child > td {
    padding-bottom: 0;
}

/**********************************************************************/
/* DATATABLE A HREF FIX                                               */
/**********************************************************************/

.table > tbody > tr > td > a {
    color: inherit;
    text-decoration: none;
}

.table > tbody > tr > td > a.dotted {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #999;
}

.table > tbody > tr > td > .datatable-warning > a,
.table > tbody > tr > td > .datatable-danger > a {
    color: inherit;
    text-decoration: none;
}

/* Button- and badge-styled anchors keep their own text colour. */
.table > tbody > tr > td > a.btn {
    color: var(--bs-btn-color);
}

.table > tbody > tr > td > a.badge {
    color: var(--bs-badge-color);
}

/**********************************************************************/
/* DATATABLE CURRENCY COLOURS                                         */
/**********************************************************************/

.datatable-currency-positive { color: green; }
.datatable-currency-negative { color: red;  }
.datatable-currency-zerosum  { color: black; }

/**********************************************************************/
/* VERTICAL-ALIGN FOR DIV TABLE ROWS
/**********************************************************************/

.vertical-align {
    display: flex;
    align-items: center;
}

/**********************************************************************/
/* ALERT/NOTE CLASSES                                                 */
/**********************************************************************/

.alert.alert-default {
    background: #b6c2c9;
}

.note.note-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}

.note.note-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}

.note.note-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
}

.note.note-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}

/**********************************************************************/
/* LABEL CLASSES (Bootstrap 3 compat — absent from theme-5.5.2)      */
/**********************************************************************/

.label {
    display: inline;
    padding: 3px 6px 4px;
    font-size: 75%;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 3px;
}

.label-default  { background: #b6c2c9; }
.label-primary  { background: #348fe2; }
.label-success  { background: #00acac; }
.label-warning  { background: #f59c1a; }
.label-danger   { background: #ff5b57; }

/**********************************************************************/
/* BTN-CIRCLE (absent from theme-5.5.2)                              */
/**********************************************************************/

.btn.btn-circle {
    border-radius: 200px;
}

.note .note-icon-small {
    width: 40px;
    font-size: 24px;
    padding-left: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/**********************************************************************/
/* DROPDOWN-MENU BOOKMARK EXTENSIONS
/**********************************************************************/

.dropdown-menu > div > .bookmark {
    display: block;
    clear: both;
    padding: .61875rem .9375rem;
}
.dropdown-menu > div > .bookmark:hover,
.dropdown-menu > div > .bookmark:focus {
    color: #262626;
    background: #edf0f5;
}
.dropdown-menu > div > .bookmark > a {
    font-weight: 600;
    color: var(--bs-dropdown-link-color);
    text-decoration: none;
    white-space: nowrap;
}
.dropdown-menu > div > .bookmark > a:hover,
.dropdown-menu > div > .bookmark > a:focus {
    text-decoration: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

/* Submenu show/hide on hover is managed by handleDropdownSubmenuHoverDelay() in strapon_custom.js */

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.float-start {
    float: none;
}

.dropdown-submenu.float-start>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/**********************************************************************/
/* POPOVER (AJAX flyouts - replaces the retired qTip2 layer)
/**********************************************************************/

/* Lift the theme's --bs-popover-max-width:250px cap so the wide (500px) metric
   chart in the report flyouts is shown full-width, not clipped. */
.popover {
    max-width: none;
}

/* Dark skin replicating the old qtip-dark look (vendor CSS was deleted).
   Redefining --bs-popover-bg also recolours the arrow for every placement,
   because the theme's arrow ::after uses var(--bs-popover-bg). Applied via
   the popover customClass:'popover-dark' in bindAjaxPopover. */
.popover-dark {
    --bs-popover-bg: #505050;
    --bs-popover-body-color: #f3f3f3;
    --bs-popover-header-bg: #404040;
    --bs-popover-header-color: #f3f3f3;
    --bs-popover-max-width: none;
}

/* Action link inside a dark popover (e.g. "Open in Crisp" on the pending-chat tip).
   Bootstrap's default link colour is a hard blue that fails against #505050 and reads as raw
   unstyled HTML. This gives it the tip's own light text with a dotted underline, so it reads as
   an action rather than a hyperlink dropped into a paragraph, and it lifts to white on hover. */
.popover-dark .popover-crisplink {
    display: inline-block;
    margin-top: 4px;
    color: #cfe6ff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(207,230,255,0.55);
}

.popover-dark .popover-crisplink:hover,
.popover-dark .popover-crisplink:focus {
    color: #ffffff;
    border-bottom-color: #ffffff;
    text-decoration: none;
}

.popover-dark .popover-crisplink i {
    font-size: 0.85em;
    margin-left: 3px;
}

/* Light skin for the ApexCharts graph flyouts (datatable customClass:'popover-graph').
   The chart SVG is drawn on white, so the popover stays white with a minimal black
   border rather than the dark text-flyout skin. */
.popover-graph {
    --bs-popover-bg: #ffffff;
    --bs-popover-body-color: #333333;
    --bs-popover-border-color: #000000;
    --bs-popover-border-width: 1px;
    --bs-popover-max-width: none;
}

/**********************************************************************/
/* GRITTER-RED
/**********************************************************************/

.gritter-red .gritter-item-wrapper {
    background: none !important;
    overflow: hidden !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px;
    box-shadow: 10px 10px;
}

.gritter-red .gritter-close {
    left: auto !important;
    right: 15px !important;
    top: 0 !important;
    background: #000000 !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    display: block !important;
}

.gritter-red .gritter-close:before {
    content: '\f00d' !important;
    font-family: FontAwesome !important;
    font-size: 9px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: #fff !important;
    text-indent: 0 !important;
    position: absolute !important;
    text-align: center !important;
    right: 0 !important;
    top: 0 !important;
}
.gritter-red .gritter-title {
    color: #333 !important;
    font-weight: 600 !important;
}
.gritter-red .gritter-item,
.gritter-red .gritter-bottom,
.gritter-red .gritter-top {
    background: url(../img/transparent/black-0.98.png) !important;
    background: rgba(255,91,87,0.5) !important;
    color: #333 !important;

}

/* for the light (white) version of the gritter notice */
.gritter-violet .gritter-item,
.gritter-violet .gritter-bottom,
.gritter-violet .gritter-top,
.gritter-violet .gritter-close {
    background: url(../img/transparent/black-0.98.png) !important;
    color: rgb(255, 188, 235);
}
.gritter-violet .gritter-title {
    text-shadow: none;
}

/**********************************************************************/
/* JPGRAPH IMG CLASSES                                                   */
/**********************************************************************/

.jpgraph {
    max-width:100%;
    display: block;
    margin-left: auto;
    margin-right: auto
}

/**********************************************************************/
/* MODAL CLASSES - https://codepen.io/dimbslmh/full/mKfCc                                                     */
/**********************************************************************/

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: top;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-modalwhmcstickets .modal-dialog {
	width: 80%;
	max-width: 80%;
	margin-left: 0;
	margin-right: 0;
}

.modal-modalwhmcstickets .modal-body {
    color: #333;
    text-align: left;
    background-color: #dee2e6;
}

/* Typed-CONFIRM dialogs carrying a note textarea (returnThemeModalConfirm "wide"): half the
   viewport. Body stays the stock white. */
.modal-confirmwide .modal-dialog {
	width: 50%;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

/* Preformatted evidence (a run's result text, a sample failure message) that wraps inside its
   container instead of scrolling sideways. */
pre.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

/**********************************************************************/
/* BOOTSTRAP-SELECT MARGIN FIX
/**********************************************************************/

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="span"] {
    margin-bottom: 0px;
}

/**********************************************************************/
/* BOOTSTRAP-TAGSINPUT
/**********************************************************************/

.bootstrap-tagsinput {
    padding: 5px 5px;
    max-width: inherit;
    font-size: 12px;
    line-height:1.5;
    border: 1px solid #ccd0d4;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #EEEEEE;
}

.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    width: auto !important;
    max-width: inherit;
    padding: 0 7px;
}

.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}

.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/**********************************************************************/
/* JQUERY AUTOCOMPLETE
/**********************************************************************/

.ui-autocomplete {
    z-index: 9999;
    font-size: 14px;
}

.ui-autocomplete .ui-menu .ui-state-focus,
.ui-autocomplete .ui-menu .ui-state-active {
    color: #FFF;
    background: #AAAAAA;
}

.ui-autocomplete .ui-menu-item {
    padding-bottom: 10px;
}

.ui-autocomplete .ui-menu-item:first-child {
    padding-top: 5px;
}

.ui-autocomplete .ui-menu-item:last-child {
    padding-bottom: 5px;
}

/**********************************************************************/
/* ALERT SIDEBAR CLASSES                                              */
/**********************************************************************/

.alert-ajax-wrapper {
    height: 20px;
    margin-top: 2px;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 0.9em;
    color: rgba(0,0,0,1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
}

.alert-ajax-wrapper a,
.alert-ajax-wrapper a:hover,
.alert-ajax-wrapper a:focus,
.alert-ajax-wrapper a:active {
    color: rgba(0,0,0,1);
    /* NEVER underlined, in any state. These anchors used to carry only rel="" (a popover source,
       no href), so the browser drew no link decoration; giving the Crisp row a real href brought
       the default underline back and made a status row look like body copy with a hyperlink in it.
       A hover-only underline was tried and is WRONG here: hovering is how the popover is opened, so
       the row sat underlined for the whole time an engineer was reading the flyout - the underline
       was visible in exactly the state it was meant to be absent from. The row is a solid coloured
       block that already reads as a control; it needs no link decoration to advertise itself. */
    text-decoration: none;
}

/* https://colordesigner.io/gradient-generator */

.alertbackground_host {
    background-color: #FF0000;
}

.alertbackground_critical {
    background-color: #ff3c00;
}

.alertbackground_critical_diskspace {
    background-color: #ff5c00;
}

.alertbackground_critical_mailqueue {
    background-color: #ff8800;
}

.alertbackground_critical_cpu {
    background-color: #ffb100;
}

.alertbackground_critical_swap {
    background-color: #ffd800;
}

.alertbackground_warning {
    background-color: #ff0042;
}

.alertbackground_warning_diskspace {
    background-color: #ff007a;
}

.alertbackground_warning_mailqueue {
    background-color: #ff0095;
}

.alertbackground_warning_cpu {
    background-color: #f700b5;
}

.alertbackground_warning_swap {
    background-color: #e300d9;
}

/* Disk-space flash - applied when free space drops below threshold. Opacity-only so it does */
/* not alter geometry inside the height:20px; overflow:hidden wrapper.                        */

.alert-flash {
    animation: alertpulse 1s ease-in-out infinite;
}

@keyframes alertpulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/**********************************************************************/
/* TICKET LIST CUSTOMISATIONS - TASKMAIL                              */
/**********************************************************************/

.timeline-header-noborder {
    padding-bottom: 0px;
    border-bottom: 0px;
}

.timeline .timeline-content  {
    margin-right: 0%;
}

.timeline .timeline-item:last-child {
    margin-bottom: 20px;
}

.timeline .timeline-body-alt {
    background: #eee;
}

.timeline .timeline-body-alt:before {
    border-right-color: #eee;
}

.timeline-footer-row:nth-child(n+2) {
    padding-top: 10px;
}

.timeline-mailinfo {
    margin: -1px -30px;
    margin-bottom: 10px;
    padding: 5px 30px;
    background: #e8ecf1;
    line-height: 1.3;
}

/**********************************************************************/
/* TIMELINE ALTERATIONS
/**********************************************************************/

.timeline:before {
    inset-inline-start: 12%;
}

.timeline .timeline-time {
    width: 9%;
}

.timeline .timeline-icon {
    inset-inline-start: 7%;
}

.timeline .timeline-content {
    margin-inline-start: 17%;
    max-width: none;
    padding-bottom: .9375rem;
}

/* The prior (customer) message quoted beneath an engineer reply. Theme 5.5.2
   ships no .timeline-comment-box rule, so it rendered flush/unpadded; style it
   as a quoted block (left accent + tint) to distinguish it from the reply. */

.timeline .timeline-comment-box {
    margin: 0 .9375rem;
    padding: 10px 15px;
    background: #f3f3f3;
    border-inline-start: 3px solid #ccd0d4;
    border-radius: 4px;
    color: #6c757d;
    font-size: 13px;
}

/**********************************************************************/
/* TASKENTRYCHILD ROW ALT COLOUR                                      */
/**********************************************************************/

.rowtaskentrychild:nth-of-type(even) {
    background: #f3f3f3;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/**********************************************************************/
/* TASKENTRYCHILD ROW ALT COLOUR                                      */
/**********************************************************************/

.list-group-item:nth-of-type(even) {
    background: #f3f3f3;
}

/**********************************************************************/
/* TEXTAREA CLASSES                                                   */
/**********************************************************************/

#formtextarea-taskentry {
    resize: vertical;
    height: 100px;
}

#formtextarea-generic {
    resize: vertical;
    height: 100px;
}

/**********************************************************************/
/* CONTEXT MENU CUSTOMISATIONS                                         */
/**********************************************************************/

.inbox .nav-inbox > li.active > a,
.inbox .nav-inbox > li.active > a:hover,
.inbox .nav-inbox > li.active > a:focus {
	background: #000000;
	color: #FFFFFF;
}

.nav.nav-pills.nav-sm > li a {
    padding: 4px 5px;
    line-height: 1.5;
}

.nav.nav-pills .badge {
    font-size: 75%;
    line-height: 1.00;
    font-weight: 600;
}

.nav-tabs > li > a {
    color: #999999;
}

/**********************************************************************/
/* TICKET LIST CUSTOMISATIONS                                         */
/**********************************************************************/

.tab-pane .list-email {
    margin: 0px 0; /* Fix for a 1px variance when moving to Bootstrap 4. */
    border-top: 0px!important;
}

.list-email > li.list-group-item {
    padding: 10px 15px 5px 20px;
}

.list-email > li.list-group-item:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    background: #fff;
}

.list-email > li.list-group-item.success:before {
    background: #00acac;
}
.list-email > li.list-group-item.info:before {
    background-color: #49b6d6;
}
.list-email > li.list-group-item.danger:before {
    background-color: #ff5b57;
}
.list-email > li.list-group-item.primary:before {
    background-color: #348fe2;
}
.list-email > li.list-group-item.inverse:before {
    background-color: #242a30;
}
.list-email > li.list-group-item.warning:before {
    background-color: #f59c1a;
}
.list-email > li.list-group-item.purple:before {
    background-color: #727cb6;
}
.list-email > li.list-group-item.default:before {
    background-color: #b6c2c9;
}

.list-email .email-user {
    float: left;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    overflow: hidden;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    color: #6e7179;
    background: #f4f6f7;
    margin-top: 0px;
    margin-bottom: 3px;
}

.list-email .email-engineer {
    float: left;
    width: 50px;
    height: 50px;
    overflow: hidden;
    text-align: center;
    display: block;
}

.list-email .email-engineer .email-title {
	font-weight: 600;
	color: #242a30;
    font-size: 14px;
    margin-bottom: .5rem;
}

.list-email .email-info .email-title {
	font-weight: 600;
	color: #242a30;
    font-size: 14px;
    margin-bottom: .5rem;
}


.list-email .email-info .email-time {
    line-height: 20px;
}

.list-email .email-info .email-taskentrylastactivity {
	position: absolute;
	float: right;
	width: 200px;
	padding-right: 15px;
	top: 44px;
	bottom: 0;
	right: 0;
	font-size: 11px;
	color: #9ba3ab;
	text-align: right;
}

/**********************************************************************/
/* WIDGET STATS - TICKET SUPPORT PAGE.
/**********************************************************************/

/* CA4 compatibility: bg-grey was removed in CA5. */
.bg-grey { background-color: #b6c2c9 !important; }

.widget-stats .stats-info a,
.widget-stats .stats-info a:hover,
.widget-stats .stats-info a:visited,
.widget-stats .stats-info a:active {
    color: inherit;
    text-decoration: none;
}

/**********************************************************************/
/* COLOR ADMIN 5 COMPATIBILITY
/**********************************************************************/

/* note-* colour variants were removed in CA5. Restored from CA4 values. */
.note.note-default  { border-color: #b6c2c9; background: #d3dadf; color: #627884; }
.note.note-primary  { background: #61a8e8; color: #10416d; }
.note.note-success  { border-color: #00acac; background: #00dfdf; color: #001313; }
.note.note-warning  { border-color: #f59c1a; background: #f7b14b; color: #714505; }
.note.note-danger   { border-color: #ff5b57; background: #ff8d8a; color: #bd0500; }


/* btn-disabled was never defined in CA4 or CA5. Defined here for read-only form submit buttons. */
.btn-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* popover-body padding increased in BS5 (0.9375rem all sides) vs BS4 (0.5rem / 0.75rem). Restored to CA4 values. */
.popover-body { padding: .5rem .75rem; }

/**********************************************************************/
/* COLOR ADMIN 4.0 FIXES
/**********************************************************************/

.btn-row-spacer {
    margin-bottom: 15px;
}

.dropdown-menu.media-list > .media .media-object {
	height: 32px;
	width: 32px;
	line-height: 32px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	border-radius: 6px;
}

.dt-buttons.btn-group {
	padding-top: 3px;
}

.navbar-nav  .dropdown-menu {
    position: absolute;
}

/**********************************************************************/
/* COLOR ADMIN 4.4 FIXES
/**********************************************************************/

.panel .panel-heading .tab-overflow {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/**********************************************************************/
/* COLOR ADMIN 4.5 FIXES
/**********************************************************************/

div .bootstrap-select .btn.bs-placeholder{
    color:#999!important;
}
div .bootstrap-select .btn.bs-placeholder:active,div .bootstrap-select .btn.bs-placeholder:focus,div .bootstrap-select .btn.bs-placeholder:hover{
    color:#999!important;
}

/**********************************************************************/
/* SHIFT BOOKING CALENDAR                                             */
/**********************************************************************/

.sb-calendar { border: 1px solid #dee2e6; border-radius: 4px; overflow: hidden; }
.sb-calendar-header { background: #2d353c; color: #fff; padding: 10px 15px; }
.sb-calendar-header h5 { color: #fff; font-weight: 600; }
.sb-calendar-table { margin: 0; table-layout: fixed; }
.sb-calendar-table th { text-align: center; background: #f2f3f4 !important; font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 6px 2px; color: #6c757d; }
.sb-calendar-day { vertical-align: top; min-height: 70px; height: 70px; padding: 4px !important; width: 14.28%; }
.sb-calendar-empty { background: #f8f9fa !important; width: 14.28%; }
.sb-calendar-weekheader th { border-bottom: 2px solid #dee2e6; }
.sb-day-active { background: #fff !important; }
.sb-day-inactive { background: #f2f3f4 !important; color: #adb5bd; }
.sb-day-past { opacity: 0.6; }
.sb-day-today { border: 2px solid #348fe2 !important; }
.sb-day-number { font-size: 12px; font-weight: 600; margin-bottom: 2px; line-height: 1; }
.sb-day-number.sb-today { color: #348fe2; }
.sb-day-edit { color: #adb5bd; font-size: 10px; margin-left: 2px; }
.sb-day-edit:hover { color: #348fe2; }
.sb-shifts { display: flex; flex-wrap: wrap; gap: 2px; }
.sb-shift-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; padding: 0 3px; text-decoration: none; line-height: 1; }
.sb-shift-badge:hover { opacity: 0.85; text-decoration: none; color: #fff; }
.sb-shift-available { background: #b6d7a8; color: #274e13 !important; cursor: pointer; }
.sb-shift-available:hover { background: #93c47d; color: #274e13 !important; }
.sb-shift-empty { background: #e0e0e0; color: #999 !important; }
.sb-shift-link { color: #fff !important; text-decoration: none !important; }
.sb-assign-day { color: #adb5bd; font-size: 11px; display: block; text-align: center; margin-top: 4px; }
.sb-assign-day:hover { color: #348fe2; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; }
.sb-legend-item { display: inline-flex; align-items: center; font-size: 12px; white-space: nowrap; }
.sb-legend-colour { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; }
.sb-colour-input { width: 40px; height: 28px; padding: 1px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }

/**********************************************************************/
/* BOOTSTRAP-SELECT ACTIONS BOX                                       */
/**********************************************************************/

/* bootstrap-select renders Select All / Deselect All with btn-light.
   CA5 theme's second .btn-light block overrides --bs-btn-color to
   #FFFFFF (white text), making buttons unreadable on the light grey
   background. Restore the CA4 appearance: dark text on light grey.  */
.bs-actionsbox .btn-light { --bs-btn-color: #2d353c; --bs-btn-hover-color: #2d353c; --bs-btn-active-color: #2d353c; color: #2d353c; }
.bs-actionsbox .btn-light:hover { color: #2d353c; }

/**********************************************************************/
/* SIDEBAR MENU HEADER                                                */
/**********************************************************************/

/* Render the sidebar section header ("Operations") in block caps.    */
.app-sidebar .menu .menu-header { text-transform: uppercase; }

/**********************************************************************/
/* SIDEBAR PERSONAS (Full / Favourites)                               */
/**********************************************************************/

/* Both personas are in the page; #sidebar[data-sidebar-persona] shows
   one. The server sets it, so the right menu shows before any script
   runs, and the switch flips it in place.                            */
#sidebar[data-sidebar-persona="full"] .menu[data-sidebar-persona-menu="favourite"],
#sidebar[data-sidebar-persona="favourite"] .menu[data-sidebar-persona-menu="full"] { display: none; }

/* The switch sits above the scroll area at a fixed height, which the
   scroll area subtracts (CA5 sizes it to 100% of the sidebar).       */
.sidebar-persona-switch {
    display: flex;
    gap: 6px;
    height: 54px;
    padding: 15px 15px 5px;
    box-sizing: border-box;
}
.sidebar-persona-switch + .app-sidebar-content { height: calc(100% - 54px) !important; }

.sidebar-persona-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
}
.sidebar-persona-btn:hover { color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.08); }
.sidebar-persona-btn.active { color: #fff; background-color: var(--bs-app-theme); border-color: var(--bs-app-theme); }

/* Minified sidebar: one button wide, so show only the other persona's
   button as the toggle.                                              */
.app-sidebar-minified .sidebar-persona-switch { padding: 15px 10px 5px; }
.app-sidebar-minified .sidebar-persona-btn.active { display: none; }

/* The favourites builder (Your Favourites panel).                    */
.sidebarfavouritebuilder .list-group-item { padding: 6px 10px; }
.sidebarfavouritebuilder .list-group .list-group { margin-left: 20px; }

/**********************************************************************/
/* OFFCANVAS FILTER + STATUS STRIP                                    */
/**********************************************************************/

/* Roomier panel: live-search multi-selects are cramped at the 400px
   default. ~520px, but never wider than the viewport on small screens. */
.offcanvas.offcanvas-end { --bs-offcanvas-width: min(92vw, 520px); }

/* The wide variant, for a panel whose content is a table rather than a
   stack of form controls (returnThemeOffcanvas's $offcanvassize="wide").
   MUST stay after the rule above: both are (0,2,0) specificity, so source
   order is what decides. Same min() shape, so it still cannot exceed the
   viewport on a phone. */
.offcanvas.offcanvas-end.offcanvas-wide { --bs-offcanvas-width: min(96vw, 860px); }

/* The half variant, for a reading panel (a ticket or chat transcript):
   half the viewport on a desktop, the wide variant's width below lg.
   After the rules above for the same source-order reason. */
.offcanvas.offcanvas-end.offcanvas-half { --bs-offcanvas-width: min(96vw, 860px); }
@media (min-width: 992px) { .offcanvas.offcanvas-end.offcanvas-half { --bs-offcanvas-width: 50vw; } }

/* Keep the expanded selectpicker menu inside the panel: unconstrained
   it grows to its widest option and spills off the panel's right edge. */
.offcanvas .bootstrap-select { display: block; width: 100% !important; max-width: 100%; }
.offcanvas .bootstrap-select .dropdown-menu { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.offcanvas .bootstrap-select .dropdown-menu .inner { max-width: 100%; overflow-x: hidden; }

/* The date picker popup is appended to <body> and the theme stacks it at
   1020, beneath an open panel (1045) and its backdrop (1040), so a picker
   opened from a panel field would render behind the panel. 1060 also
   clears a modal (1055); tooltips (1080) still sit above it. Scoped under
   body because the theme's .daterangepicker rule loads after this file. */
body .daterangepicker { z-index: 1060; }

/* Summary "status strip": compact filter band. Small internal padding,
   tightened line-height, and a 10px bottom gap below the strip.         */
.status-strip {
    padding: .4rem .4rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* Size everything in the strip to the "Clear all" btn-xs (.6875rem) so
   chips, the "Filtering" tag and notes read as one row.                 */
.status-strip, .status-strip * { font-size: .6875rem; }

/* Chips formatted to read as the same box as the "Clear all" btn-xs so
   chips + button sit as one control row. A default inline .badge is
   ~1.5px shorter than the block .btn (inline vertical padding does not
   grow the line box); inline-flex makes it a real box so padding +
   border count.                                                         */
.status-strip .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.status-strip .text-uppercase { letter-spacing: .02em; }

/* The Filter trigger otherwise grows to fill the content band (it is
   the tallest flex item) and reads oversized. Trim its vertical padding
   by 2px/side via padding, not a fixed height (a hard height clips the
   text).                                                                */
.status-strip [data-bs-toggle="offcanvas"] { padding: 4px 10px; }

/* addInputPasswordStored() stored/cleared state rows. The btn-xs Clear
   Secret button is shorter than a .form-control, so without a height
   match the secret row compresses and the form's vertical rhythm breaks
   (visibly more gap below the secret than between other rows). Match a
   BS5 .form-control's box (1.5em text + .375rem*2 padding + 1px*2
   border) and centre the button/badge in it; zero the plaintext class's
   own vertical padding so the min-height is the single source of the
   row's size.                                                           */
.form-secretstate {
    min-height: calc(1.5em + 0.75rem + 2px);
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}