html, body {
    height: 100%;
    position: relative;
}
p { margin: 0 }

#wrapper {
    min-height: 100%;
    padding-bottom: 100px;
    position: relative;
}

.form-login {
    width: 450px; 
    margin-top: 120px
}

.submenu {
    padding: 0;
    margin-top: 50px;
    border-right: solid 1px #f5f5f5;
}

.submenu li {
    list-style-type: none;
}

.submenu a.active {
    font-weight: bold;
}

.logo {
    height: 40px;
    margin-top: 15px;
}

.header-fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}
.header-branding {
    min-height: 70px !important;
}
.docs-navbar-primary {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans";
}
h3 {
    padding-top: 20px;
    padding-bottom: 10px;
}
h4 {
    padding-left: 20px
}

.bg-green {
    background-color: #1abc9c
}

.text-bold {
    font-weight: bold
}


.irs-bar, .irs-from, .irs-handle.state_hover > i:first-child, .irs-handle:hover > i:first-child, .irs-handle > i:first-child, .irs-single, .irs-to {
    background-color: #1abc9c !important;
}

.irs-from::before, .irs-single::before, .irs-to::before {
    border-top-color: #1abc9c !important
}



.subnav-body {
    margin: 70px 0 20px;
}
.header .brand {
    padding: 0;
    line-height: 70px;
}

.sup-header {
    background: none repeat scroll 0 0 rgba(245, 245, 245, 0.88);
    box-shadow: 0 0 2px #999;
    padding-bottom: 3px;
    padding-top: 3px;
}

.badge-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.navbar-brand {
    font-family: 'Oswald',sans-serif;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.2rem;
    line-height: 1;
    margin: 0 0 0 0;
    text-transform: uppercase;
}

.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}

.balance {
    margin: 10px 15px 10px 0;
    font-size: 22px;
    color: #3acc3a;
}


.nav>li>a {
    padding: 14px 14px;
    font-size: 14px;
}

.nav>li>a:hover {
    color: #ffffff;
    background-color: #9CB3CC;
}

.text-strike {
    text-decoration: line-through;
    background-color: #f5f5f5;
}


.pointer 
{
    cursor: pointer;
}

.larger {
    font-size: larger
}

.center {
    text-align: center
}

.dark { color: white; background-color: #333333}

.errorMessage {
    position:absolute;
    padding: 5px;
    background-color: #E03930;
    color:white;
    top:0;
    left:270px;
}


#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  text-align: center;
  background: none repeat scroll 0 0 rgba(245, 245, 245, 0.88);
  box-shadow: 0 0 2px #999;
  line-height: 60px;
}

.dropdown-menu>li>a {
    padding: 5px 15px;
}

#activate img:hover {
    opacity: 0.5;
    filter: alpha(opacity=40);
}

#activate img {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.dot {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}
.dotsmall {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
}

.input-xs {
    height: 30px;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 0;
}

select.input-xs {
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
}

.tierNew { background-color: #12f1b3; color: #000000; }
.tierNone { background-color: #f5f5f5; color: #000000; }
.tierBronze { background-color: #CD7F32; color: #000000; }
.tierSilver { background-color: #C0C0C0; color: #000000; }
.tierGold { background-color: #FFD700; color: #000000; }
.tierPlatinum { background-color: #E5E4E2 ; color: #000000; }

/* Tracfone activation count on the Month Snapshot report. Previously borrowed the Simple Mobile
   carrier colour; kept at that value now the carrier colours themselves come from the Carriers
   table rather than this stylesheet. */
.badge-tracfone { background-color: #8DC73D; }

.typeahead_wrapper { display: block; height: 30px; color: black; padding: 2px }
.typeahead_labels { float: left; height: 30px; }
.typeahead_primary { font-weight: bold; }
.typeahead_secondary { font-size: .8em; margin-top: 0; }


.typeahead_wrapper2 { display: block; height: 50px; }
.typeahead_labels2 { float: left; height: 50px; }
.typeahead_primary2 { font-weight: bold; }
.typeahead_secondary2 { font-size: .8em; margin-top: 0; }

/* Selected-agent counter on the Route Scheduler report. */
.badge-black { background-color: #000000; color: white; }


.morris-hover.morris-default-style {
border-radius: 10px;
padding: 6px;
color: #666;
background: rgba(255,255,255,0.85);
border: solid 2px rgba(230,230,230,0.85);
font-family: sans-serif;
font-size: 12px;
text-align: center;
}
.morris-hover {
position: absolute;
z-index: 1000;
}

.dl-wide > dt { width: 300px; font-weight: normal; padding: 0 0 3px 0; }
.dl-wide > dd { border-left: solid 1px #eeeeee; margin-left: 310px; padding: 0 0 3px 10px; }


.notificationLink {
    color: white;
}

.notificationLink:hover {
    color: white;
    text-decoration: none;
}

.notifications {
    position: relative;
    top: 10px;
    left: -5px;
    padding: 1px 4px;
}

.js_notification {
    font-size: 11px;
    padding: 10px;
    border-bottom: solid 1px #f5f5f5;
}


/* Issue #394 — visual lock state for sales-rep-on-unassigned dealer pages.
   Dims the locked form. Input disable is done by _Locker.cshtml's jQuery
   script. The explicit "View Only" badge was removed per user feedback —
   the dimming + disabled inputs are sufficient signal. */
.is-locked {
    opacity: 0.65;
    position: relative;
}


/* Issue #798 — extra-wide modal size for dense report modals (Scorecard,
   Credit Report). Bootstrap 3 tops out at .modal-lg (900px); pair this with
   .modal-lg so the dialog falls back to 900px below 1200px viewports. */
@media (min-width: 1200px) {
    .modal-xl {
        width: 1140px;
    }
}


/* Issue #804 — dealer locker sidebar: Profile / Sales & Activity / Money / System
   group headers with an active-page accent (chosen design round S3). Namespaced
   (.locker-*, .submenu-group) to avoid Bootstrap collisions; the bare
   .submenu rules above stay untouched (Spiffs/EditTemplate also uses them). */
.locker-sidebar {
    margin-top: 50px;
}

.locker-sidebar .locker-submenu {
    margin-top: 0;      /* .locker-sidebar owns the offset .submenu normally provides */
    border-right: none;
}

.locker-submenu .submenu-group {
    margin: 10px 0 2px;
    padding: 6px 10px 2px;
    color: #8a939a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.locker-submenu .submenu-group:first-child {
    margin-top: 0;
}

.locker-submenu li a {
    display: block;
    padding: 4px 10px;
    border-left: 3px solid transparent;
    border-radius: 0 3px 3px 0;
}

.locker-submenu li a:hover {
    background: #f3f6f8;
    text-decoration: none;
}

.locker-submenu li a.active {
    background: #eef4f9;
    border-left-color: #1a86b8;
    color: #1a6694;
    font-weight: 600;
}

/* Agents views: shared utilities that replace recurring inline styles so the
   markup carries class names instead of style attributes. */

/* Compact data tables (was inline font-size: 11px). Bootstrap 3 has no .table-xs,
   so the name is collision-free. */
.table-xs { font-size: 11px; }

/* Per-cell vertical divider (was inline border-left: solid 1px). Namespaced to
   avoid clashing with Bootstrap's grid/border helpers. */
.cell-divider { border-left: solid 1px; }

/* Pulls a panel-heading action button up flush with the title (was inline
   margin-top: -5px on the button). */
.heading-action-pull-up { margin-top: -5px; }

/* Vertical breathing room where double <br/> tags were used as spacers
   (~one blank line at the base 20px line-height). */
.stack-gap { margin-top: 20px; }

.stack-gap-bottom { margin-bottom: 20px; }

/* Agents > Productivity: namespaced left-border utilities for the month columns
   (replaces the page's old .lb/.lbb, which collided with Bootstrap-shaped names). */
.prod-border-left { border-left: solid 1px; }

.prod-border-left-2 { border-left: solid 2px; }

/* Agents > Productivity: five carriers' commission-paid dates as a tidy mini-table. */
.prod-commissions {
    width: 100%;
    table-layout: fixed;
}

.prod-commissions-label {
    padding: 4px 8px;
    color: #8a939a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prod-commissions-value {
    padding: 0 8px 6px;
}

/* ============================================================
   Orders list — totals bar (#561 / #446) + table cleanup.
   All classes namespaced (.orders-* / .summary-* / .ostatus-*);
   never reuses Bootstrap .row / .col / .card.
   ============================================================ */
.orders-summary {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background: #fff;
    margin: 0 0 14px;
    overflow: hidden;
}

.summary-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #909aa2;
    padding: 8px 16px 0;
}

.summary-primary {
    display: flex;
    flex-wrap: wrap;
    padding: 2px 0 6px;
}

.summary-tile {
    flex: 1 1 0;
    min-width: 150px;
    padding: 6px 16px 10px;
    border-left: 1px solid #eee;
}

.summary-tile:first-child {
    border-left: 0;
}

.summary-stat {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    color: #2c3e50;
}

.summary-stat--money {
    color: #1f7a4d;
}

.summary-stat--muted {
    color: #5a6470;
}

.summary-lab {
    font-size: 11.5px;
    color: #888;
    margin-top: 3px;
}

.summary-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
}

.summary-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 8px 16px;
    border-top: 1px solid #eee;
    background: #fcfcfc;
    font-size: 12px;
    color: #777;
}

.summary-line strong {
    color: #555;
}

.summary-note {
    color: #8a7a4a;
}

.summary-muted {
    color: #a98b48;
    font-size: 11px;
}

.summary-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.summary-dot--shipped { background: #5cb85c; }
.summary-dot--waiting { background: #5bc0de; }
.summary-dot--excluded { background: #bbb; }

.summary-more {
    margin-left: auto;
    color: #337ab7;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.summary-more:hover,
.summary-more:focus {
    text-decoration: underline;
}

.summary-break {
    padding: 8px 16px;
    border-top: 1px solid #eee;
    background: #fbfbfb;
    font-size: 11.5px;
    color: #777;
    line-height: 1.9;
}

.summary-break-item {
    margin-right: 18px;
    white-space: nowrap;
}

.summary-break-item strong {
    color: #444;
}

/* Quiet, left-aligned status label in the table — coloured by bucket so it reads
   even on the row exception-highlight backgrounds (bg-info/bg-warning/bg-danger). */
.ostatus {
    display: inline-block;
    padding: 0.15em 0.5em 0.2em;
    font-size: 84%;
    font-weight: 700;
    border-radius: 0.25em;
    border: 1px solid;
    background: #fff;
    white-space: nowrap;
}

.ostatus--shipped { color: #3c8c3c; border-color: #b6dab6; background: #f3faf3; }
.ostatus--waiting { color: #2f6aa8; border-color: #bcd6ee; background: #f3f8fd; }
.ostatus--excluded { color: #777; border-color: #d8d8d8; background: #f7f7f7; }

/* +N reps popover trigger and fraud / edited-after glyphs. */
.orders-more {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 10px;
    color: #9aa0a6;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: default;
}

.orders-more:hover,
.orders-more:focus {
    color: #337ab7;
    border-color: #bcd6ee;
}

.orders-fraud {
    cursor: pointer;
}

.orders-edit-flag {
    margin-left: 4px;
    font-size: 10px;
    cursor: default;
}

/* Keep the column headers visible while scrolling a long (50-row) page. The site
   header is in normal flow, so top:0 pins the row to the viewport top once it scrolls. */
.orders-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -2px 0 #ddd;
}

/* A system-authored note under a row's description — distinct from an operator memo. */
.ledger-note {
    display: block;
    font-size: 10px;
    color: #6f7d86;
    line-height: 1.2;
}

/* The operator's reason on a manual ledger entry, under its description. */
.ledger-memo {
    display: block;
    font-size: 10px;
    color: #98a2ab;
    line-height: 1.2;
    font-style: italic;
}

/* ===== KPI tiles =====
   One tile family for every Admin metric/money strip. Previously each strip carried its own
   near-identical <style> block; the box, label, value and sub rules now live here once and the
   real differences are named modifiers instead of forked copies.

     hosts        Bootstrap .row  grid host, tiles sit inside col-* wrappers
                  .kpi-strip      flex host, equal-width tiles

     density      (default)     26px bold value, #ddd border  — home dashboard
                  --compact     22px value, #dfe4e8 border    — refill history report
                  --fixed       236px wide, tabular figures   — dealer accounting

     state        .kpi-danger   red box + red value
                  .kpi-ok       green value
*/
.kpi-strip {
    display: flex;
    gap: 14px;
    margin: 4px 0 16px;
    clear: both;
    align-items: stretch;
}

/* Only the fixed-width density can overflow: 4 x 236px plus gaps exceeds a narrow
   content column. Equal-width strips shrink to fit and must keep doing so. */
.kpi-strip--wrap { flex-wrap: wrap; }

.kpi-tile {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.kpi-strip > .kpi-tile {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.kpi-tile-label {
    font-size: 10px;
    font-weight: 700;
    color: #999;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.kpi-tile-n {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin: 2px 0 1px;
    line-height: 1.1;
}

.kpi-tile-sub {
    font-size: 10.5px;
    color: #999;
}

.kpi-tile-delta {
    font-size: 11.5px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: 2px;
}

.kpi-tile-delta.kpi-up { color: #3c763d; }
.kpi-tile-delta.kpi-dn { color: #a94442; }

.kpi-tile.kpi-danger {
    background: #fdf4f4;
    border-color: #ebccd1;
}

.kpi-tile.kpi-danger .kpi-tile-n { color: #a94442; }

.kpi-tile-n.kpi-ok { color: #3c763d; }

/* Compact density — the refill history strip. */
.kpi-tile--compact { border-color: #dfe4e8; padding: 10px 16px; }
.kpi-tile--compact .kpi-tile-label { letter-spacing: 1.5px; color: #8a959e; font-weight: 400; }
/* color: inherit, not the base #333 — the refill strip never set a colour and picked up the
   surrounding #222. Pinning it here would shift that page's numbers a shade darker. */
.kpi-tile--compact .kpi-tile-n { font-size: 22px; font-weight: 400; color: inherit; margin: 0; line-height: normal; font-variant-numeric: tabular-nums; }
/* Restates the colour because the compact rule above resets it to inherit at equal specificity,
   and that rule comes later in the file — without this the profit figures lose their green. */
.kpi-tile--compact .kpi-tile-n.kpi-ok { color: #3c763d; font-weight: 600; }
.kpi-tile--compact .kpi-tile-sub { font-size: 10px; color: #8a959e; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Fixed density — the dealer accounting strip, where tile count varies by payment mode and
   equal-width flex would restyle the row every time a tile drops out. */
.kpi-strip > .kpi-tile--fixed { flex: 0 0 236px; }
.kpi-tile--fixed .kpi-tile-n { font-variant-numeric: tabular-nums; }
.kpi-tile--fixed .kpi-tile-sub { font-variant-numeric: tabular-nums; }

/* Credit-line usage meter. Lives inside the headroom tile and is pushed to its bottom edge so
   tiles with and without a meter stay the same height in one row. */
.kpi-meter { margin-top: auto; padding-top: 9px; }

.kpi-meter-track {
    height: 6px;
    background: #e2e8ed;
    border-radius: 3px;
    overflow: hidden;
}

.kpi-meter-fill {
    height: 6px;
    background: #008cba;
    border-radius: 3px;
}

.kpi-danger .kpi-meter-fill { background: #a94442; }

.kpi-meter-cap {
    font-size: 10.5px;
    color: #98a2aa;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

/* A settles-to figure that is not zero: the balance has a floor the nightly run cannot clear. */
.kpi-tile-sub--flag { color: #a94442; font-weight: 600; }

/* Scheduled charges the next run cannot reach. Tinted the strip's own blue rather than red: this
   money is normal, and colouring it as an exception is what the at-rest fix set out to stop. */
.kpi-tile--scheduled { background: #f4f9fc; border-color: #c9dcea; }
.kpi-tile-n.kpi-scheduled { color: #008cba; }

/* ===== Payment rows =====
   Bank payments annotated into the dealer Accounting ledger. They keep their own row, and their
   id, date and approver stay in the ledger's real columns so the date column reads continuously
   top to bottom; only Description onward is one span, so no bank figure lands in a money column
   the running balance answers for. No tint: a full-width strip is what made half the page read
   as banded noise. Two colours only — the portal blue for a payment, red for a return nothing
   recovered — and colour alone carries the state, so every slot inherits it. */
.pay-row > td { color: #008cba; }
.pay-row--review > td { color: #a94442; }
.pay-row a,
.pay-row a:hover,
.pay-row a:focus { color: inherit; text-decoration: underline; }

/* Fixed slots. Every payment amount lands on one rule regardless of what else the row carries,
   and the amount is printed smaller than a ledger figure because it is a bank fact rather than
   a movement of the running balance. */
.pay-row-direction {
    display: inline-block;
    min-width: 105px;
    font-weight: 700;
    text-transform: uppercase;
}

.pay-row-amount {
    display: inline-block;
    min-width: 90px;
    text-align: right;
    font-size: 11px;
}

.pay-row-ref {
    display: inline-block;
    min-width: 155px;
    margin-left: 12px;
    font-size: 11px;
}

.pay-row-category {
    display: inline-block;
    min-width: 70px;
    font-weight: 700;
    text-transform: uppercase;
}

.pay-row-meta { font-size: 11px; }

/* The row an Accounting-page payment link addressed. The left rule carries the signal
   for anyone who cannot see the tint. */
.table-striped > tbody > tr.payment-row--highlight > td,
.payment-row--highlight > td { background: #fcf8e3; }

.payment-row--highlight > td:first-child { box-shadow: inset 3px 0 0 #8a6d3b; }

/* Payment-mode caption above an accounting strip. */
.kpi-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.kpi-mode-dot { width: 9px; height: 9px; border-radius: 2px; }

.kpi-mode-meta {
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .5px;
    color: #98a2aa;
    text-transform: none;
}

.kpi-mode--ach .kpi-mode-dot { background: #008cba; }
.kpi-mode--ach .kpi-mode-name { color: #008cba; }
.kpi-mode--wallet .kpi-mode-dot { background: #3c763d; }
.kpi-mode--wallet .kpi-mode-name { color: #3c763d; }
.kpi-mode--overdrawn .kpi-mode-dot { background: #a94442; }
.kpi-mode--overdrawn .kpi-mode-name { color: #a94442; }

/* Half-finished wallet-to-ACH conversion: credit line in place, debt at rest, nothing collecting
   it. One row, so it reads above the money tiles without pushing them off the fold. */
.collect-required {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.collect-required .collect-required-text { flex: 1 1 auto; }
.collect-required .btn { flex: 0 0 auto; }