.report-container > ul .item .content .drag-handle:before { content: "" !important;}

#ReportContainer-container-toolbar,
.report-container > ul.add-delete .item .content .edit-widget,
.report-container > ul .item .content .close {
    display: none !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.list-cell-type-number, .field-number{
    text-align: right !important;
}

#nmDataTable {
    padding-top: 3px;
}
#nmDataTable td {
    color: #333;
}
table.table.data thead th {
    border: none !important;
    background-color: #ebebeb;
}
.control-breadcrumb {
    padding-bottom: 20px;
}
.report-filter {
    padding: 20px 0 50px 0;
}
/* Modal */
.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: ;
    --bs-modal-bg: #fff;
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: 0.5rem;
    --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-modal-inner-border-radius: calc(0.5rem - 1px);
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: 1px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex) !important;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none
}
.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px)
}
@media(prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}
.modal.show .modal-dialog {
    transform: none
}
.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}
.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin)*2)
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin)*2)
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    outline: 0
}
.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg)
}
.modal-backdrop.fade {
    opacity: 0
}
.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity)
}
.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color)
}
.modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y)*.5) calc(var(--bs-modal-header-padding-x)*.5);
    margin: calc(-0.5*var(--bs-modal-header-padding-y)) calc(-0.5*var(--bs-modal-header-padding-x)) calc(-0.5*var(--bs-modal-header-padding-y)) auto
}
.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height)
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding)
}
.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap)*.5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color)
}
.modal-footer > * {
    margin: calc(var(--bs-modal-footer-gap)*.5)
}
@media(min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
    }
    .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto
    }
    .modal-sm {
        --bs-modal-width: 300px
    }
}
@media(min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 800px
    }
}
@media(min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px
    }
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
}
.modal-fullscreen .modal-content {
    height: 100%;
    border: 0
}
.modal-fullscreen .modal-body {
    overflow-y: auto
}
@media(max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto
    }
}
@media(max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }
    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0
    }
    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }
}
@media(max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }
    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0
    }
    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto
    }
}
@media(max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }
    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0
    }
    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto
    }
}
@media(max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }
    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0
    }
    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto
    }
}

/*
 * The portal error dialog (#ebilling-error) used to live here, overriding
 * fuji-film.css's opaque `.modal` background and october.css's
 * `.modal-content .modal-*`. It was removed 2026-10-15 - portal errors are
 * raised as the flash toast now, see assets/js/portal.js.
 */

/* for components */
.red {
    color: red !important;
}
.file-download {
    padding: 6px;
    text-align: center;
    vertical-align: middle;
}
.file-download a {
    color: #01916d;
    border-color: #01916d;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 28px;
    line-height: 1.42857143;
    text-decoration: none;
    display: inline-block;
}
.file-download a:hover {
    color: #fff;
    background-color: #01916d;
    border-color: #01916d;
}
[class*=" oc-icon-"]:before,[class^=oc-icon-]:before {
    margin-right: 0px;
}
.btn-search {
    height: 40px;
    width: 80px;
    min-width: 80px !important;
    margin-right: 10px;
    float: left;
}

.filter-form {
    border-bottom: 1px #ebebeb solid;
    padding-top: 20px;
    margin-bottom: 20px;
}
.checkbox label {
    padding-top: 10px;
}

input[type=checkbox] {
    margin-right: 16px;
    position: relative;
    cursor: pointer;
}
input[type=checkbox]:before {
    content: "";
    display: block;
    /*position: absolute;*/
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 2px solid #555555;
    border-radius: 3px;
    background-color: white;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}
.scrollable-div {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: -webkit-box-shadow .2s;
    transition: -webkit-box-shadow .2s;
    transition: box-shadow .2s;
    transition: box-shadow .2s,-webkit-box-shadow .2s;
    width: 100%;
    padding: 10px;
    border: 1px solid #c1c1c1;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    font-size: 1em;
}
.row {
    clear:both;
}
.custom-radio {
    margin-top: 10px !important;
}

/* Aged-password snooze link.
   It renders inside the error flash toast, whose background is dark, so
   Bootstrap's default link colour is unreadable there. Every link state is
   listed so the link does not turn blue on hover.

   Both class names are needed: before the flash control runs it is the
   `[data-control=flash-message]` element (class `flash-message`); the control
   then moves its innerHTML into a generated `.jax-flash-message` wrapper. */
.flash-message #password-expiry-snooze,
.flash-message #password-expiry-snooze:link,
.flash-message #password-expiry-snooze:visited,
.flash-message #password-expiry-snooze:hover,
.flash-message #password-expiry-snooze:active,
.jax-flash-message #password-expiry-snooze,
.jax-flash-message #password-expiry-snooze:link,
.jax-flash-message #password-expiry-snooze:visited,
.jax-flash-message #password-expiry-snooze:hover,
.jax-flash-message #password-expiry-snooze:active {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Meter Usage Report

   A wide report: three identity columns plus two readings for each of six
   months, so it needs a horizontal scroll on anything narrower than a desktop.
   `table-responsive` gives that; the rules below keep the identity columns
   readable while the readings scroll past them.

   The identity columns and their headers are sticky so a customer reading a
   Dec-2025 figure can still see which machine it belongs to when the table is
   scrolled to May-2026. */
.meter-usage-report {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.meter-usage-table {
    min-width: 960px;
    font-size: 13px;
    white-space: nowrap;
}

.meter-usage-table .meter-identity {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
    font-weight: 600;
}

.meter-usage-table thead th.meter-identity {
    z-index: 2;
    background-color: #f2f5f8;
    vertical-align: middle;
}

.meter-usage-table th.meter-month-banner,
.meter-usage-table th.meter-month {
    text-align: center;
}

.meter-usage-table .meter-month {
    display: block;
    font-weight: 700;
}

.meter-usage-table th.meter-reading,
.meter-usage-table td.meter-reading {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.meter-usage-table .meter-reading-first {
    border-left: 1px solid #dee2e6;
}

/* ---------------------------------------------------------------------------
   Account Status

   A read-only table of outstanding balances. It is narrower than the Meter
   Usage Report - seven columns of plain values - but it still needs to scroll
   on a phone, and the amount columns are right-aligned with tabular figures
   so the decimal points line up down the column.

   A negative Balance Due is a suspense receipt: money received but not yet
   allocated. It is shown in parentheses, as a credit, and coloured to say so. */
.account-status-report {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.account-status-table {
    min-width: 720px;
    font-size: 13px;
}

.account-status-table th.account-status-date,
.account-status-table td.account-status-date {
    white-space: nowrap;
}

.account-status-table th.account-status-number,
.account-status-table td.account-status-number {
    white-space: nowrap;
}

.account-status-table th.account-status-currency,
.account-status-table td.account-status-currency {
    text-align: center;
}

.account-status-table th.account-status-amount,
.account-status-table td.account-status-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.account-status-table th.account-status-late,
.account-status-table td.account-status-late {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.account-status-table .account-status-credit {
    color: #1a7f37;
}

.account-status-intro p {
    margin-bottom: 0;
}