html, body {
   font-size: 13px !important;
}
#toastr-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 10px;
    padding-right: 10px;
}
.raise-login-agent {
    padding: 0.25rem 1rem
}
.apexcharts-menu-item {
    color: black !important;
}
@media screen and (max-width: 992px) {
    #login_logo {
        height: 75px;
    }
}
@media screen and (max-width: 1400px) {
    #agentTable > tr > td:nth-child(1) {
        min-width: 250px;
    }
}
#preloader {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background: #fff;
}
.raise-hybrid-agent {
    background-color: #fff8dd !important;
}
td.detailActInfo {
    /*position: relative;*/
}
td.detailActInfo .menu-sub.detailChildInfo {
    right: 0;
}
 table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
     text-align: center;
 }
#main_table_wrapper .dataTables_scrollBody,
#main_table_wrapper .dataTables_scrollHeadInner {
    border-left: none !important;
}

/* === Remove inner table scrollbars; let the outer (page) scrollbar handle overflow === */
/* Many pages set inline style="max-height:NNNpx; overflow-y:auto" on .card-body.table-responsive
   and inline style="height:NNNpx" on the wrapping .card. Use !important here so the stylesheet
   wins over the inline non-important rules. */
.table-responsive,
.card-body.table-responsive {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.card:has(.table-responsive),
.card:has(.card-body.table-responsive) {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Neutralize DataTables fixed-height inner scrollers (scrollY / scrollX in JS) */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollBody,
.dt-scroll,
.dt-scroll-head,
.dt-scroll-headInner,
.dt-scroll-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.dataTables_wrapper .dataTables_scrollHeadInner > table,
.dataTables_wrapper .dataTables_scrollBody > table {
    margin-bottom: 0 !important;
}

/* === Mobile horizontal-scroll affordance ===
   Above (".table-responsive { overflow: visible !important }") we
   deliberately neutralize Bootstrap's `.table-responsive` so the OUTER
   (page) scrollbar handles overflow — that's intentional on desktop
   where wide DataTables rows are easier to read at full width.
   On phones the same choice breaks every reporting page in the
   back-office: the wide table pushes the entire layout past the viewport,
   the filter card on the left loses its first character of every label,
   and operators have to swipe the whole page to see the right-hand
   columns. Below the lg breakpoint we want the opposite — each table
   scrolls inside its own card while the page itself stays glued to the
   viewport. */
@media (max-width: 991.98px) {
    /* Belt: nothing in the page-level chain is allowed to overflow the
       viewport horizontally. If a table escapes the rules below for any
       reason this clip stops the page itself from scrolling sideways. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* Braces: re-enable .table-responsive's intended behaviour now that
       the global desktop rule above has switched it off. `auto` is
       enough — when the table fits the wrapper the scrollbar simply
       doesn't appear. */
    .table-responsive,
    .card-body.table-responsive {
        overflow-x: auto !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Bootstrap's `.table { width: 100% }` (and DataTables' inline
       `style="width: 100%"`) would otherwise clamp every table to the
       wrapper width — and then `white-space: nowrap` on report headers
       would just squeeze columns into unreadable blobs. Letting the
       table go to its natural width plus `min-width: 100%` keeps the
       desktop layout unchanged at every other breakpoint while giving
       phone users the horizontal scrollbar they expect. */
    .table-responsive > .table,
    .table-responsive table.dataTable,
    .card-body.table-responsive > .table,
    .card-body.table-responsive table.dataTable,
    .dataTables_wrapper > table.table,
    .dataTables_wrapper > table.dataTable {
        width: auto !important;
        min-width: 100%;
    }

    /* --- Non-table widgets (Dashboard especially) ---
       Metronic's `.card-header` is flex+nowrap by default, so a long title
       on the left and a toolbar with hardcoded `min-width` inputs on the
       right collide and force the card itself past the viewport. Two
       things fix this: let the header wrap and let the toolbar's children
       shrink. */
    .card-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Dashboard uses `<input style="min-width: 180px / 220px ...">` for the
       overlay daterangepicker controls — those force the card header
       wider than a phone viewport. Same treatment for any other inline
       min-width we shipped before responsive design was a priority. */
    .card-header input.form-control,
    .card-header select.form-select,
    .card-toolbar input.form-control,
    .card-toolbar select.form-select,
    .card-body input.form-control[style*="min-width"],
    .card-body select.form-select[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Apex / canvas charts: keep the SVG inside its card. ApexCharts sets
       its own width but the toolbar overlay sometimes spills. */
    .card .apexcharts-canvas,
    .card .apexcharts-svg,
    .card canvas {
        max-width: 100% !important;
    }

    /* Defensive: long unbreakable strings (vendor codes, balances) should
       not force the column wider than its `.col-*` parent. */
    .card .text-end,
    .card .text-start {
        word-break: break-word;
    }
}