/* ============================================================================
   KT THEME  -  Color 1: #1B1E6B (dark)   Color 2: #23278B

   NOTE ON SPECIFICITY. The lnkCSS tag sits in the master page <head>, but
   bootstrap, AdminLTE and BootExtended are linked further down the BODY - so
   this file is loaded SECOND, not last, and anything it sets with !important
   is still overridden by BootExtended's own !important at equal specificity.
   That is why the card rules below are written as "body .offer" and not
   ".offer": the extra element bumps specificity past BootExtended without
   needing to move the link tag in four master pages.

   As well as the blue, this fixes four things the dashboard inherited, all of
   which were visible on screen:

     .offer { zoom: 1.2 }                 non-standard, scaled the whole card
     .offer:hover { transform: rotate scale(1.1) }
                                          invalid, and made cards jump over
                                          their neighbours on hover
     .shape / .shape-text                 a rotated CSS triangle with the icon
                                          tilted 30deg inside it
     tr { color: #fff; font-weight: bold }
                                          a global rule in a MENU stylesheet
                                          that turned table text white on white

   Menu.css is left alone - other companies still load their own Color_*.css
   and must keep the look they have today.
   ============================================================================ */

:root {
    --kt-brand-dark: #1B1E6B;
    --kt-brand: #23278B;
    --kt-brand-soft: #EEF0FB;
    --kt-page: #F4F6FB;
    --kt-surface: #FFFFFF;
    --kt-ink: #1F2430;
    --kt-ink-muted: #6B7280;
    --kt-line: #E3E8F2;
    --kt-radius: 12px;
    --kt-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
    --kt-shadow-lift: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px rgba(27, 30, 107, .14);
}

/* ---------------------------------------------------------------- shell --- */

/*  Typography. The app was on Lato at 14px with Bootstrap's default 1.428
    line-height, which reads thin and cramped for screens of dense ERP text.
    Segoe UI first - it is the native Windows UI face, so it is already on
    every machine this runs on and needs no download - then the Google faces
    the page already loads as the fallback. Antialiasing and a slightly open
    line-height do most of the work of making small text legible. */

body,
.form-control,
.btn,
input, select, textarea, button,
table, th, td,
.nav-tabs-custom > .nav-tabs > li > a {
    font-family: "Segoe UI", "Source Sans Pro", Lato, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

body {
    background-color: var(--kt-page) !important;
    color: var(--kt-ink);
    font-size: 14px !important;
    line-height: 1.55 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    color: var(--kt-ink);
    font-weight: 600;
    letter-spacing: -.005em;
}

/*  Grids carry the most text and the least room, so they get the tightest
    control: slightly smaller, but with real row padding so it stays readable. */
.table > thead > tr > th,
.table > tbody > tr > td {
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

/*  Two scrollbars: AdminLTE's "fixed" layout script writes an inline
    min-height on both <html> and <body>, and the body's content ran ~50px past
    it, so the body grew a second bar of its own next to the document's. The
    document is the only thing that should scroll - let the body size to its
    content and stop it scrolling independently. */

html {
    min-height: 0 !important;
}

body.fixed,
body {
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

.skin-blue .navbar {
    background-color: var(--kt-brand) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 2px 10px rgba(16, 24, 40, .12);
}

.skin-blue .logo {
    background-color: var(--kt-brand-dark) !important;
    color: #fff !important;
    letter-spacing: .2px;
}

.bg-light-blue {
    background-color: var(--kt-brand) !important;
}

.bg-red {
    background-color: var(--kt-brand-dark) !important;
    color: #fff !important;
}

a {
    color: var(--kt-brand) !important;
}

.text-primary {
    color: var(--kt-brand-dark) !important;
}

.text-info {
    color: var(--kt-brand-dark) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: var(--kt-brand) !important;
}

/* ------------------------------------------------- the inherited tr bug --- */
/*  Menu.css sets tr { color:#fff } for every table in the application. On a
    white grid that is white text on white. Put it back to normal ink and let
    the header rows be the only ones that are deliberately reversed out. */

tr {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
}

thead tr,
.table > thead > tr > th {
    font-weight: 600 !important;
}

/* ------------------------------------------------------- dashboard grid --- */
/*  The menu pane carries an inline height:700px, so the cards were clipped and
    the pane scrolled inside the page. Let it grow with its content instead.

    The cards are floated Bootstrap columns of differing length, which is what
    made them wrap into a ragged staircase. Laying the wrapper out as a flex row
    ignores the floats and puts them in even rows of equal height, without
    touching a single column class in the markup. */

#main-menu {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    overflow: visible !important;
}

    #main-menu > div {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

        #main-menu > div > div[class*="col-"] {
            float: none !important;
            display: flex;
        }

/* ------------------------------------------------------ dashboard cards --- */

body .offer {
    background: var(--kt-surface) !important;
    border: 1px solid var(--kt-line) !important;
    border-radius: var(--kt-radius) !important;
    box-shadow: var(--kt-shadow) !important;
    margin: 12px 0 !important;
    overflow: hidden !important;
    zoom: normal !important;
    position: relative !important;
    min-height: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

    /*  Lift, do not scale. Scaling made each card grow over the one beside it. */
    body .offer:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--kt-shadow-lift) !important;
        border-color: #C9D0E8 !important;
    }

    /*  The colour each section already carries, shown as a bar across the top
        instead of a rotated corner triangle. */
    body .offer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--kt-brand);
    }

body .offer-success::before { background: #2E9E5B; }
body .offer-danger::before,
body .offer-red::before     { background: #D64545; }
body .offer-primary::before { background: #23278B; }
body .offer-info::before,
body .offer-aqua::before    { background: #1E9FBF; }
body .offer-warning::before,
body .offer-orange::before  { background: #E08600; }
body .offer-maroon::before  { background: #8E2A54; }
body .offer-purple::before  { background: #6D3AAF; }
body .offer-default::before { background: #8A94A6; }

/*  The triangle becomes a square icon chip in the corner. Same markup, same
    <span class="fa ...">, no rotation. */
body .shape {
    border: 0 !important;
    float: none !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: var(--kt-brand-soft) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

body .shape-text {
    color: var(--kt-brand) !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
}

body .offer-success .shape { background: #E7F4EC !important; }
body .offer-success .shape-text { color: #2E9E5B !important; }
body .offer-danger .shape, .offer-red .shape { background: #FBEAEA !important; }
body .offer-danger .shape-text, .offer-red .shape-text { color: #D64545 !important; }
body .offer-info .shape, .offer-aqua .shape { background: #E5F5F9 !important; }
body .offer-info .shape-text, .offer-aqua .shape-text { color: #1E9FBF !important; }
body .offer-warning .shape, .offer-orange .shape { background: #FCF1E0 !important; }
body .offer-warning .shape-text, .offer-orange .shape-text { color: #E08600 !important; }
body .offer-maroon .shape { background: #F7E9EF !important; }
body .offer-maroon .shape-text { color: #8E2A54 !important; }
body .offer-purple .shape { background: #F0E9FA !important; }
body .offer-purple .shape-text { color: #6D3AAF !important; }

body .offer-content {
    padding: 16px 18px 16px !important;
}

    /*  Section heading. .lead was 21px italic-ish body copy doing a title's job. */
    body .offer-content h3.lead {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: .01em;
        color: var(--kt-ink) !important;
        margin: 0 0 10px !important;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--kt-line);
    }

/*  The link list: no bullets, each row a proper target with a hover state,
    so it reads as a menu rather than as a paragraph of links. */
body .offer-content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    body .offer-content ul > li {
        margin: 0 !important;
        padding: 0 !important;
    }

        body .offer-content ul > li > a {
            display: block;
            padding: 8px 10px;
            margin: 1px 0;
            border-radius: 7px;
            font-size: 15px;
            line-height: 1.4;
            color: var(--kt-ink) !important;
            text-decoration: none !important;
            border-left: 2px solid transparent;
            transition: background-color .14s ease, color .14s ease, border-color .14s ease;
        }

            body .offer-content ul > li > a:hover,
            body .offer-content ul > li > a:focus {
                background-color: var(--kt-brand-soft) !important;
                color: var(--kt-brand-dark) !important;
                border-left-color: var(--kt-brand) !important;
                text-decoration: none !important;
            }

/* ------------------------------------------------------------- buttons --- */

.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.btn-primary {
    color: #fff !important;
    background-color: var(--kt-brand-dark) !important;
    border-color: var(--kt-brand-dark) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: #fff !important;
        background-color: var(--kt-brand) !important;
        border-color: var(--kt-brand) !important;
    }

    .btn-primary .a, .dropdown a {
        color: #fff !important;
    }

.btn.btn-danger {
    background-color: #E08600 !important;
    border-color: #E08600 !important;
    color: #fff !important;
}

.btn.btn-default {
    color: var(--kt-ink) !important;
    background-color: #fff !important;
    border-color: var(--kt-line) !important;
}

/* --------------------------------------------------- forms and panels ----- */

.form-control {
    border-radius: 8px !important;
    border-color: var(--kt-line) !important;
    box-shadow: none !important;
}

    .form-control:focus {
        border-color: var(--kt-brand) !important;
        box-shadow: 0 0 0 3px rgba(35, 39, 139, .12) !important;
    }

.control-label {
    color: var(--kt-ink-muted) !important;
    font-weight: 500 !important;
}

fieldset.scheduler-border {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line) !important;
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
    padding: 6px 16px 16px !important;
    margin-bottom: 16px;
}

legend.scheduler-border,
fieldset.scheduler-border > legend {
    width: auto !important;
    border: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--kt-brand-dark) !important;
    margin-bottom: 4px !important;
    padding: 0 6px !important;
}

.box.box-primary {
    border-top-color: var(--kt-brand) !important;
    border-radius: var(--kt-radius) !important;
    box-shadow: var(--kt-shadow) !important;
}

.alert-success {
    background-color: var(--kt-surface) !important;
    border-color: var(--kt-line) !important;
    color: var(--kt-ink) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--kt-brand-dark) !important;
}

.fancy .ajax__tab_hover .ajax__tab_tab,
.fancy .ajax__tab_active .ajax__tab_tab {
    color: #fff !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff !important;
    background-color: var(--kt-brand-dark) !important;
    border-color: var(--kt-brand-dark) !important;
    cursor: default !important;
}

/* ============================================== the gap under the navbar === */
/*  The 50px fixed navbar was being cleared twice: .wrapper already carries
    margin-top:50px, and then aside.right-side.margin-top-50 adds another 60px
    on top of it. That is ~60px of blank on the top of every page before the
    first row of content. One clearance is enough; what is left is a gutter. */

body aside.right-side.margin-top-50 {
    margin-top: 10px !important;
}

body aside.right-side section.content-header.ButtonHeader.margin-top-18 {
    margin-top: 0 !important;
}

/*  The Save / Clear bar (UserControl/Buttons.ascx) is position:fixed with no
    top, so it sat wherever the flow put it - under the 10px gutter above, i.e.
    a 10px strip between it and the navbar. Pin it to the navbar, and lay title
    and buttons out as one centred row: below 992px the two Bootstrap columns
    stacked and BootExtended pulled the buttons up with margin-top:-14px, which
    left them hanging 11px above the bar. Phones (<=480px) keep their own
    non-fixed bar from BootExtended. */
@media (min-width: 481px) {
    body aside.right-side section.content-header.ButtonHeader {
        top: 50px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 15px !important;
    }

        body aside.right-side section.content-header.ButtonHeader > div {
            float: none !important;
            width: auto !important;
            min-height: 0;
            margin: 0 !important;
            padding: 0 !important;
        }

        body aside.right-side section.content-header.ButtonHeader h4 {
            margin: 0;
            white-space: nowrap;
        }

        /*  the buttons are pull-right floats (so written in reverse order);
            row-reverse keeps their on-screen order. The code-behind can hide
            this box with display:none, so leave that case alone. */
        body aside.right-side section.content-header.ButtonHeader > .add-btn:not([style*="none"]) {
            display: flex !important;
            flex-direction: row-reverse;
            align-items: center;
            gap: 6px;
        }

            body aside.right-side section.content-header.ButtonHeader > .add-btn .btn {
                float: none !important;
                margin: 0 !important;
            }
}

/* ========================================================= entry forms === */
/*  Same story as the search filter, one breakpoint further out: the entry
    screens pair label and field as col-lg-1 / col-lg-2 columns, so below
    1200px every label dropped onto its own line and the fields alternated
    between a 90px stub and the full width of the page. Laid out as a wrapping
    column layout the markup was written for is kept - see the note below.

    Scoped to aside.right-side so the login card and the sidebar are untouched. */

/*  NOTE the nesting: on these pages the fieldset sits INSIDE a .form-group,
    not around it (#EntryForm > .form-horizontal > .form-group > fieldset), so
    a "fieldset .form-group" selector matches nothing. .form-horizontal is what
    both entry-page shapes have in common - the nine #EntryForm pages and the
    fieldset.scheduler-border ones like Profile and Branch Entry. */

body aside.right-side .form-horizontal {
    padding: 0 !important;
}

body aside.right-side #EntryForm {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
    padding: 18px 20px !important;
    margin: 0 0 14px !important;
}

    body aside.right-side #EntryForm > .pad {
        padding: 0 !important;
    }

body aside.right-side fieldset {
    border: 1px solid var(--kt-line) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin: 4px 0 12px !important;
    min-width: 0;
}

    /*  The columns themselves are fixed in the MARKUP, one screen at a time -
        Item Master is done: every label is col-sm-4 col-md-2 and every field
        col-sm-8 col-md-4, so a row holds one pair on a tablet, two on a desktop
        and stacks on a phone. Nothing here re-lays-out the form; earlier
        attempts to do that from CSS split labels from their fields (flex) and
        pushed whole blocks off-screen (grid).

        This is the one layout rule that IS needed, and it is a bug fix:

        The toggled blocks (Item Group, Make By, Warranty, Cost%, Barcode Req,
        Aprox Weight ...) get their class REPLACED at runtime by
        Attributes.Add("class", ShowHideFileds(...)) with either "show" or
        "hidden". Bootstrap's .show is display:block !important - so a block
        element sat in the middle of a floated Bootstrap row and forced a line
        break, which is why those fields fell out of the grid and collapsed to
        stubs. display:contents makes the wrapper generate no box at all, so the
        label and field inside it float into the row like every other pair.
        Any class the markup sets on these divs is discarded at runtime, so this
        has to be keyed on .show. */

    body aside.right-side .form-horizontal .form-group > div.show {
        display: contents !important;
    }

    /*  Flex, not floats. With floats a short column catches on a taller one
        above it - "Aprox Weight" onward snagged and its label ended up on the
        far right with its own input on the next line. Flex has no such
        behaviour. The pairs cannot split either: each label is 16.67% and each
        field 33.33%, so a pair is exactly 50% and a line break can only ever
        fall on a pair boundary. */
    body aside.right-side .form-horizontal .form-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-bottom: 2px;
    }

        /*  Bootstrap's clearfix on .form-group becomes two flex items and
            shunts the first label out of place - it has no job in a flex row. */
        body aside.right-side .form-horizontal .form-group::before,
        body aside.right-side .form-horizontal .form-group::after {
            display: none !important;
            content: none !important;
        }

        /*  A fieldset or a full-width block inside a row takes the whole line. */
        body aside.right-side .form-horizontal .form-group > fieldset {
            flex: 1 1 100% !important;
        }

/*  The image uploader (UserControl/FileUpLoad.ascx). It was a 132x108 circle
    floating in blank space above a file input and two buttons of three
    different heights. A square preview tile with the controls in one line. */

body .kt-upload {
    padding-top: 6px;
}

    body .kt-upload > label.control-label {
        display: block !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 0 6px !important;
        line-height: 1.3 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--kt-ink-muted) !important;
    }

    body .kt-upload #imgFile {
        width: 112px !important;
        height: 112px !important;
        object-fit: cover;
        display: block;
        padding: 4px;
        border: 1px dashed #C9D0E8;
        border-radius: 12px !important;   /* beats .img-circle */
        background: #FAFBFE;
    }

    body .kt-upload br {
        display: none;
    }

    body .kt-upload .box-body {
        padding: 8px 0 0 !important;
    }

    /*  table.row picks up Bootstrap's -15px row margins, which dragged the
        file input out past the left edge of its column. */
    body .kt-upload table.row {
        margin: 0 !important;
        width: auto !important;
    }

        body .kt-upload table.row td {
            padding: 0 6px 0 0 !important;
            border: 0 !important;
            background: transparent !important;
            vertical-align: middle !important;
        }

    body .kt-upload input[type="file"].form-control {
        height: 36px !important;
        padding: 5px 8px !important;
        font-size: 12px !important;
        width: 210px !important;
    }

    body .kt-upload .btn {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

/*  Column layout (Item Master). Each control is a .kt-field: label above its
    input, the whole thing full width of its column. Four columns on a large
    screen, two on a medium one, one on a phone. */

body aside.right-side .form-horizontal .form-group.kt-cols {
    align-items: flex-start !important;
    /*  With width:auto this row shrink-wrapped to its own columns (514px in a
        651px form) and left the right of the card empty. Stated outright. */
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    /*  Explicit widths at every size. Bootstrap's col-lg-3 / col-md-6 say nothing
        below 992px, and a flex item with no width shrinks to its content - so on
        a narrow window the columns huddled on the left and left the rest of the
        card empty. One column on a phone, two from 560px, four from 1200px. */
    body aside.right-side .form-horizontal .form-group.kt-cols > div[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

@media (min-width: 560px) {
    body aside.right-side .form-horizontal .form-group.kt-cols > div[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    body aside.right-side .form-horizontal .form-group.kt-cols > div[class*="col-"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

body .kt-field {
    margin-bottom: 10px;
}

    body .kt-field > label.control-label {
        display: block !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 0 3px !important;
        line-height: 1.3 !important;   /* not the 36px used beside a field */
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--kt-ink-muted) !important;
    }

    body .kt-field > .form-control,
    body .kt-field > .select2-container,
    body .kt-field > select,
    body .kt-field > input[type="text"] {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    /*  The Status checkbox: a box and a caption, not a bordered form-control. */
    body .kt-field-check > span,
    body .kt-field-check > input[type="checkbox"] {
        display: inline-block;
        height: 36px;
        line-height: 36px;
    }

        body .kt-field-check input[type="checkbox"] {
            width: auto !important;
            height: auto !important;
            margin: 0 6px 0 0 !important;
            vertical-align: middle;
        }

        body .kt-field-check label {
            font-weight: normal !important;
            color: var(--kt-ink) !important;
            font-size: 13px !important;
            vertical-align: middle;
        }

        body aside.right-side .form-horizontal .form-group label.control-label {
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--kt-ink-muted) !important;
            line-height: 36px !important;   /* matches the control height */
            padding-top: 0 !important;
            margin-bottom: 0 !important;
        }

        body aside.right-side .form-horizontal .form-group > div[class*="col-"] {
            margin-bottom: 8px;
        }

    body aside.right-side .form-horizontal .form-control,
    body aside.right-side .form-horizontal .select2-container {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    body aside.right-side .form-horizontal textarea.form-control {
        height: auto !important;
        min-height: 64px;
    }

    /*  A checkbox was being rendered inside a bordered form-control box with
        its caption jammed against it - "Active[x]" with no space at all. */
    body aside.right-side .form-horizontal .form-group input[type="checkbox"],
    body aside.right-side .form-horizontal .form-group input[type="radio"] {
        width: auto !important;
        height: auto !important;
        margin: 0 0 0 8px !important;
        vertical-align: middle;
    }

    body aside.right-side .form-horizontal .form-group span > input[type="checkbox"] + label,
    body aside.right-side .form-horizontal .form-group label + input[type="checkbox"] {
        margin-left: 8px !important;
    }

/* ================================================ search page + grids === */
/*  The filter block above every search grid. Its wrapper carries an inline
    text-align:center, which is why the labels floated in the middle of the
    page above full-width fields; and the label/field pairs are plain Bootstrap
    columns (col-sm-1 + col-md-3), so between 768px and 992px the label took an
    8% column and the field dropped underneath it. Laid out as a wrapping flex
    row instead: the pairs stay together and reflow at any width. */

body .panel {
    background: var(--kt-surface) !important;
    border: 1px solid var(--kt-line) !important;
    border-radius: var(--kt-radius) !important;
    box-shadow: var(--kt-shadow) !important;
    margin-bottom: 14px !important;
}

    body .panel .timeline-item,
    body .panel .pad.timeline-item {
        text-align: left !important;   /* beats the inline style */
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

body #dvsearch {
    padding: 14px 16px !important;
}

    /*  Same Bootstrap clearfix trap as the entry forms: ::before / ::after
        become flex items and shunt the first label out of place. */
    body #dvsearch .form-group::before,
    body #dvsearch .form-group::after,
    body #dvsearch .row::before,
    body #dvsearch .row::after {
        display: none !important;
        content: none !important;
    }

    body #dvsearch .row.form-group,
    body #dvsearch > .form-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 16px !important;
        margin: 0 0 10px !important;
    }

    body #dvsearch label.control-label {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 84px;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--kt-ink-muted) !important;
    }

    body #dvsearch div[class*="col-"] {
        flex: 1 1 200px !important;
        width: auto !important;
        min-width: 170px;
        max-width: 340px;
        float: none !important;
        padding: 0 !important;
    }

    body #dvsearch .form-control,
    body #dvsearch .select2-container {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    /*  .kt-pair wraps one label + field pair so a wrapping row never leaves a
        label behind at the end of the line. */
    body #dvsearch .kt-pair {
        display: flex;
        align-items: center;
        gap: 8px;
        /* shrink to 230 so a row keeps its buttons before it wraps; grow back
           to 300 at most, so a short last row never stretches its fields */
        flex: 1 1 230px;
        max-width: 300px;
        min-width: 0;
    }

        /* a runat=server wrapper around several pairs (hidden from code-behind) */
        body #dvsearch .kt-group {
            display: contents;
        }

        /*  code-behind shows the branch wrapper with Style["display"] = "block"
            (ShowHideBranch); keep the layout display, while "none" still hides */
        body #dvsearch .kt-pair[style*="display:block"],
        body #dvsearch .kt-pair[style*="display: block"] {
            display: flex !important;
        }

        body #dvsearch .kt-group[style*="display:block"],
        body #dvsearch .kt-group[style*="display: block"] {
            display: contents !important;
        }

        body #dvsearch .kt-pair.kt-wide {
            flex-basis: 340px;
            max-width: 440px;
        }

        /* the entry-form bottom margin lifts fields above their labels */
        body #dvsearch .kt-pair > div[class*="col-"] {
            min-width: 0;    /* theme gives cols 170px, which blocked the shrink */
            margin-bottom: 0;
            max-width: none;
        }

    /*  date box with the calendar icon sitting inside it */
    body .kt-date {
        position: relative;
    }

        body .kt-date .form-control {
            padding-right: 30px;
        }

        body .kt-date img {
            position: absolute;
            right: 8px;
            top: 50%;
            height: 18px;
            margin-top: -9px;
            cursor: pointer;
        }

    /*  Search + Record Count (moved in from the page) and Reset, inline with the fields */
    body #dvsearch .kt-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;    /* never squeezed; the fields give way first */
    }

    /*  Rows built from .kt-pair fields are a grid, so every row shares the same
        columns: with flex each row grew its fields by a different amount and
        the columns never lined up. Wide fields and the button group take two
        columns. :has() keeps rows still on the old label/col markup on flex. */
    body #dvsearch .row.form-group:has(> .kt-pair, > .kt-group) {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        align-items: center !important;
    }

        body #dvsearch .row.form-group:has(> .kt-pair, > .kt-group) .kt-pair {
            max-width: none;
        }

        body #dvsearch .row.form-group:has(> .kt-pair, > .kt-group) .kt-actions {
            flex-wrap: wrap;
            justify-self: start;
        }

    @media (min-width: 640px) {
        body #dvsearch .row.form-group:has(> .kt-pair, > .kt-group) .kt-pair.kt-wide,
        body #dvsearch .row.form-group:has(> .kt-pair, > .kt-group) .kt-actions {
            grid-column: span 2;
        }
    }

        body #dvsearch .kt-actions .badge {
            white-space: nowrap;
        }

        body #dvsearch .kt-actions .btn {
            height: 36px;
            min-width: 90px;
        }

    /*  select2 (v4) dropdowns: the container is 36px but its visible box was
        29.6px with its own border/radius - match the .form-control fields */
    body #dvsearch .select2-container .select2-selection--single {
        height: 36px;
        border: 1px solid #555;
        border-radius: 1px;
    }

        body #dvsearch .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
            padding-left: 12px;
            color: #555;
        }

        body #dvsearch .select2-container .select2-selection--single .select2-selection__arrow {
            height: 34px;
            right: 6px;
        }

        body #dvsearch .select2-container .select2-selection--single .select2-selection__arrow b {
            border-top-color: #555;
        }

    /*  the open select2 list is appended to <body>, so it can't be scoped to
        #dvsearch: plain white search box, 13px options, theme highlight */
    body .select2-dropdown {
        border-color: #555;
        border-radius: 1px;
        font-size: 13px;
    }

        body .select2-dropdown .select2-search__field {
            height: 30px;
            padding: 4px 8px;
            background: #fff;
            border: 1px solid var(--kt-line);
            border-radius: 1px;
            outline: none;
        }

        body .select2-dropdown .select2-results__option {
            padding: 7px 12px;
        }

        body .select2-dropdown .select2-results__option--highlighted[aria-selected] {
            background-color: var(--kt-brand);
            color: #fff;
        }

        body .select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
            background-color: var(--kt-brand-soft);
            color: var(--kt-ink);
        }

    /*  bootstrap-multiselect (Branch / Item Group / Made By ...): make the
        button look like the other .form-control fields and fill its column,
        whatever buttonWidth the page's script passed in. */
    body #dvsearch .multiselect-native-select,
    body #dvsearch .multiselect-native-select > .btn-group {
        display: block;
        width: 100% !important;
    }

        body #dvsearch .btn-group > .multiselect.dropdown-toggle,
        body #dvsearch .btn-group.open > .multiselect.dropdown-toggle {
            position: relative;
            float: none;    /* a floated button collapses the group, so the list opened over it */
            width: 100% !important;
            height: 36px;
            padding: 0 30px 0 12px !important;
            text-align: left;
            font-size: 13px !important;
            font-weight: 400 !important;    /* .btn forces 500 */
            color: #555 !important;
            background: #fff !important;
            border: 1px solid #555 !important;  /* .btn-default forces --kt-line */
            border-radius: 1px !important;
            box-shadow: none !important;
        }

        body #dvsearch .multiselect.dropdown-toggle .caret {
            position: absolute;
            right: 12px;
            top: 50%;
            margin-top: -2px;
            border-top-color: #555;
        }

        /*  the list: at least as wide as the button, checkbox left of the text
            (the form-wide checkbox margin above pushed it onto the label) */
        body #dvsearch .multiselect-container {
            min-width: 100%;
            font-size: 13px;
        }

            body #dvsearch .multiselect-container > li > a > label {
                padding: 6px 12px 6px 36px !important;
                font-weight: 400;
            }

            body #dvsearch .multiselect-container > li > a.multiselect-all label {
                font-weight: 600;
            }

            body #dvsearch .multiselect-container > li > a > label > input[type="checkbox"] {
                position: absolute;
                left: 12px !important;
                top: 50% !important;
                margin: -7px 0 0 0 !important;
            }

/*  Two-list picker (Stock Count Schedule item groups): available list, the
    move buttons, selected list. Side by side; stacked on a narrow screen. */
body .kt-transfer {
    display: flex;
    align-items: center;
    justify-content: center;    /* the list pair sits centred under the fields */
    gap: 12px;
    margin: 4px 0 14px;
    padding: 0 15px;    /* line up with the field columns above */
}

    body .kt-transfer-list {
        flex: 0 1 320px;
        min-width: 0;
    }

        body .kt-transfer-list > label.control-label {
            display: block !important;
            float: none !important;
            width: auto !important;
            text-align: left !important;
            padding: 0 !important;
            margin: 0 0 3px !important;
            line-height: 1.3 !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--kt-ink-muted) !important;
        }

        /* aside/.form-horizontal prefix: the theme forces every .form-control to 36px */
        body aside.right-side .form-horizontal .kt-transfer-list > select.form-control {
            width: 100% !important;
            height: 180px !important;
            padding: 4px 0;
            font-size: 13px !important;
            background: #fff;
            color: var(--kt-ink);
        }

            /*  selected items: theme navy instead of the browser's faint grey
                (Chrome needs the gradient to repaint a listbox option) */
            body aside.right-side .form-horizontal .kt-transfer-list > select.form-control option:checked {
                background: var(--kt-brand) linear-gradient(0deg, var(--kt-brand) 0%, var(--kt-brand) 100%);
                color: #fff;
            }

            body aside.right-side .form-horizontal .kt-transfer-list > select.form-control option {
                padding: 4px 10px;
            }

    body .kt-transfer-btns {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 18px;    /* line up with the lists below their captions */
    }

        body .kt-transfer-btns .btn {
            width: 44px;
            height: 34px;
            padding: 0 !important;
            font-size: 18px !important;
            line-height: 1;
        }

@media (max-width: 559px) {
    body .kt-transfer {
        flex-direction: column;
        align-items: stretch;
    }

        body .kt-transfer-list {
            flex-basis: auto;
        }

        body .kt-transfer-btns {
            flex-direction: row;
            justify-content: center;
            padding-top: 0;
        }
}

/*  an entry form's Add / Reset / Search row, under the fields */
body .kt-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0 15px;
}

    body .kt-form-actions .btn {
        height: 36px;
        min-width: 90px;
    }

/*  .kt-col-sm: a narrow column in a .kt-cols form, for short values such as
    amounts and dates - three a row from 560px, six from 1200px (the normal
    column is two / four). */
@media (min-width: 560px) {
    body aside.right-side .form-horizontal .form-group.kt-cols > div.kt-col-sm[class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
}

@media (min-width: 1200px) {
    body aside.right-side .form-horizontal .form-group.kt-cols > div.kt-col-sm[class*="col-"] {
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
        width: 16.6667% !important;
    }
}

/*  a field with a button beside it (Bill Payment: Supplier + Load Bill) */
body .kt-inline {
    display: flex;
    gap: 8px;
}

    body aside.right-side .form-horizontal .kt-inline > .form-control {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    body .kt-inline > .btn {
        flex: 0 0 auto;
        height: 36px;
    }

/*  summary tiles (Bill Payment totals): title over a large value */
body .kt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 15px;
    margin: 4px 0 16px;
}

    body .kt-stat {
        flex: 0 1 220px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 14px;
        border-radius: 6px;
        color: #fff !important;
    }

        body .kt-stat .kt-stat-title {
            font-size: 12px;
            font-weight: 600;
            opacity: .9;
        }

        body .kt-stat .kt-stat-value {
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            color: #fff;
        }

/*  editable grid (Bill Payment bills): compact single-line rows, inputs that
    fit their cells, scrolls sideways on a narrow screen instead of spilling */
body .kt-grid-scroll {
    overflow-x: auto;
    padding: 0 15px 10px;
}

body table.kt-grid {
    margin-bottom: 0;
    background: #fff;
}

    body table.kt-grid > thead > tr > th,
    body table.kt-grid > tbody > tr > th {
        background: var(--kt-brand-soft) !important;
        color: var(--kt-ink) !important;    /* the theme whitens .table headers */
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        vertical-align: middle;
        padding: 8px !important;
    }

    body table.kt-grid > tbody > tr > td {
        vertical-align: middle;
        padding: 5px 8px !important;    /* theme sets 8px 10px !important on all tables */
        font-size: 13px;
        white-space: normal;    /* long text wraps; codes, dates and numbers opt out below */
    }

        body table.kt-grid > tbody > tr > td.text-right,
        body table.kt-grid > tbody > tr > td.text-nowrap {
            white-space: nowrap;
        }

    body table.kt-grid .form-control {
        box-sizing: border-box;    /* DataTables CSS makes it content-box: 32 + padding came out 42 */
        height: 32px !important;
        min-width: 90px;
        padding: 4px 8px;
        font-size: 13px;
    }

    body table.kt-grid select.form-control {
        min-width: 160px;
    }

    body table.kt-grid .form-control.kt-num-sm {
        min-width: 60px;
        width: 70px;
    }

    /*  a select in the header row (Order Close: All / Clear) */
    body table.kt-grid th select.form-control {
        min-width: 70px;
        width: auto;
    }

    /*  a cell holding its own small table (Order Close: item / qty / rack):
        the theme pads every table cell 8px 10px, which made each line 30px+ */
    body table.kt-grid td > table.table {
        margin: 0;
        width: auto;
        background: transparent;
    }

        body table.kt-grid td > table.table > tbody > tr > td {
            padding: 1px 12px 1px 0 !important;
            border: 0 !important;
            background: transparent !important;
            font-size: 12px !important;
            white-space: nowrap;
            vertical-align: top !important;
        }

    body table.kt-grid .txtRemarks {
        min-width: 180px;
        text-align: left;
    }

    body table.kt-grid input[type="checkbox"] {
        margin: 0;
        vertical-align: middle;
    }

    body table.kt-grid .kt-pay {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        body table.kt-grid .kt-pay .btn {
            flex: 0 0 auto;
            height: 32px;
            padding: 0 8px;
            font-size: 14px;
        }

/* -- the button row -- */

body .panel .btn,
body #dvsearch ~ * .btn {
    height: 36px;
    padding: 0 16px !important;
    font-size: 13px !important;
}

body small.badge.bg-olive,
body .badge.pull-right {
    background: var(--kt-brand-soft) !important;
    color: var(--kt-brand-dark) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* -- the grid pane -- */
/*  Bootstrap's .table-responsive is overflow-x:auto / overflow-y:hidden, and
    an overflow that is not visible makes the element a scroll container - so a
    sticky header inside it was pinned to a box that never scrolls, which looks
    exactly like sticky not working. CSS will not allow overflow-x:auto with
    overflow-y:visible, so the fix is the other direction: give the pane a
    height and let it be the thing that scrolls. The header then pins to the
    top of the pane and the rows run under it. */

body .box-body.table-responsive,
body div.table-responsive {
    max-height: calc(100vh - 250px);
    min-height: 220px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-radius);
    background: var(--kt-surface);
    padding: 0 !important;
}

/* -- the grid -- */
/*  .table-bordered draws a box round every single cell, which turns a wide
    grid into graph paper. Horizontal rules only: the eye follows a row, and
    the columns are already held apart by their padding. */

body table.dataTable,
body table.table-bordered {
    border: 0 !important;
    /*  separate, not collapse: a sticky th loses its borders under
        border-collapse in Chrome. border-spacing 0 keeps it looking collapsed. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--kt-surface) !important;
    width: 100% !important;
}

    /*  NOT "> thead > tr > th". A GridView renders its header row inside
        <tbody> unless UseAccessibleHeader and HeaderRow.TableSection are set,
        so any thead-based selector matches nothing here. */
    body table.table-bordered th,
    body table.dataTable th {
        background: #F6F8FD !important;
        color: var(--kt-ink) !important;
        border: 0 !important;
        border-bottom: 1px solid #D8DFEF !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: .02em;
        white-space: nowrap;
        padding: 10px !important;
        vertical-align: middle !important;

        /*  Held in place while the rows scroll under it, so you can still read
            which column you are looking at 200 rows down. The background must
            stay opaque or the rows show through it. */
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 5;
        /*  border-bottom does not paint reliably on a sticky cell in Chrome;
            the shadow draws the same line and always shows. */
        box-shadow: inset 0 -1px 0 #D8DFEF;
    }

        /*  The header link a GridView renders for a sortable column was picking
            up the global brand-blue link colour and reading as a live link on
            every heading. */
        body table.dataTable th a,
        body table.table-bordered th a {
            color: var(--kt-ink) !important;
            text-decoration: none !important;
        }

    body table.table-bordered td,
    body table.dataTable td {
        border: 0 !important;
        border-bottom: 1px solid var(--kt-line) !important;
        font-size: 13px !important;
        padding: 9px 10px !important;
        vertical-align: middle !important;
    }

    body table.table-striped > tbody > tr:nth-of-type(odd) > td {
        background: #FCFDFF !important;
    }

    body table.dataTable > tbody > tr:hover > td,
    body table.table-bordered > tbody > tr:hover > td {
        background: var(--kt-brand-soft) !important;
    }

/* -- the pager -- */

body tr.bs-pagination td {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 6px !important;
}

body tr.bs-pagination table td {
    padding: 0 3px !important;
}

body tr.bs-pagination a,
body tr.bs-pagination span {
    display: inline-block;
    min-width: 32px;
    padding: 6px 9px !important;
    border: 1px solid var(--kt-line) !important;
    border-radius: 7px !important;
    background: var(--kt-surface) !important;
    color: var(--kt-ink) !important;
    font-size: 13px !important;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
}

    body tr.bs-pagination a:hover {
        background: var(--kt-brand-soft) !important;
        border-color: #C9D0E8 !important;
    }

    /*  The page you are on is rendered as a bare span, not a link. */
    body tr.bs-pagination span {
        background: var(--kt-brand-dark) !important;
        border-color: var(--kt-brand-dark) !important;
        color: #fff !important;
        font-weight: 600;
    }

/* ====================================================== sidebar search === */
/*  The record picker down the left of every entry screen: a title, a search
    box, the result list, and a count at the foot. It was four unrelated blocks
    stacked on white - no panel edge, rows with no hover or selected state, and
    a count line that was inline-styled white-on-white. Made into one column
    that reads top to bottom. */

body .left-side,
body aside.left-side {
    background: var(--kt-surface) !important;
    border-right: 1px solid var(--kt-line) !important;
}

    body .left-side section.sidebar {
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /*  Page title above the search: a small quiet label, not a heading that
        competes with the page's own title bar. */
    body .left-side .panel-info {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 12px 12px 8px !important;
    }

        body .left-side .panel-info h4 {
            margin: 0 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            letter-spacing: .09em;
            text-transform: uppercase;
        }

            body .left-side .panel-info h4 .text-muted,
            body .left-side .panel-info h4 label {
                color: var(--kt-ink-muted) !important;
                padding: 0 !important;
            }

/* -- the search box -- */

body .left-side .input-group {
    display: flex !important;
    width: auto !important;
    padding: 0 12px 10px !important;
}

    body .left-side .input-group .form-control {
        height: 36px !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
        border: 1px solid var(--kt-line) !important;
        border-right: 0 !important;
        border-radius: 8px 0 0 8px !important;
        background: #FCFDFF !important;
        box-shadow: none !important;
        float: none !important;
    }

        body .left-side .input-group .form-control:focus {
            background: #fff !important;
            border-color: var(--kt-brand) !important;
            box-shadow: 0 0 0 3px rgba(35, 39, 139, .10) !important;
        }

    body .left-side .input-group .input-group-btn {
        width: auto !important;
        font-size: 0;
    }

        body .left-side .input-group .input-group-btn > .btn {
            height: 36px !important;
            width: 38px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 1px solid var(--kt-line) !important;
            border-left: 0 !important;
            border-radius: 0 8px 8px 0 !important;
            background: #FCFDFF !important;
            color: var(--kt-ink-muted) !important;
            font-size: 13px !important;
        }

            body .left-side .input-group .input-group-btn > .btn:hover {
                background: var(--kt-brand-soft) !important;
                color: var(--kt-brand) !important;
            }

/* -- the result list -- */

body ul#SearchResult {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 120px;
    max-height: calc(100vh - 205px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 8px !important;
    list-style: none !important;
}

    /*  A hairline under each record so the code/name pairs do not run together
        into one column of text. The last row has none - a divider with nothing
        beneath it just draws a line under the list. */
    body ul#SearchResult > li {
        border: 0 !important;
        border-bottom: 1px solid var(--kt-line) !important;
        margin: 0 !important;
    }

        body ul#SearchResult > li:last-child {
            border-bottom: 0 !important;
        }

        body ul#SearchResult > li > a {
            display: block !important;
            padding: 8px 10px !important;
            margin: 1px 0 !important;
            border: 0 !important;
            border-left: 2px solid transparent !important;
            border-radius: 7px !important;
            line-height: 1.35 !important;
            white-space: normal !important;
            background: transparent !important;
            transition: background-color .13s ease, border-color .13s ease;
        }

            body ul#SearchResult > li > a:hover,
            body ul#SearchResult > li > a:focus {
                background: var(--kt-brand-soft) !important;
                border-left-color: var(--kt-brand) !important;
            }

            /*  The code reads as a reference, the name as the label - so the
                code goes quiet and small and the name carries the weight. It
                was the other way round: bold black code, blue name. */
            body ul#SearchResult > li > a .text-black,
            body ul#SearchResult > li > a .text-bold {
                color: var(--kt-ink-muted) !important;
                font-size: 11px !important;
                font-weight: 600 !important;
                letter-spacing: .02em;
                display: block;
            }

            body ul#SearchResult > li > a .text-info {
                color: var(--kt-ink) !important;
                font-size: 13.5px !important;
                font-weight: 500 !important;
            }

/* -- the button bar gets out of the way while the list is open -- */
/*  The sidebar slides over the content, so the Save / Clear bar ended up
    underneath it and half covered. AdminLTE drops the collapse-left class from
    the aside while the panel is open, and the button bar lives in the very next
    sibling - so the pair can be addressed directly, with no :has() and no
    script. Closing the panel brings the bar straight back. */

body aside.left-side:not(.collapse-left) ~ aside.right-side section.content-header.ButtonHeader {
    display: none !important;
}

/* -- the count at the foot -- */

body .sidebar-reccount {
    flex: 0 0 auto;
    border-top: 1px solid var(--kt-line);
    background: #FAFBFE;
    padding: 9px 14px !important;
}

    body .sidebar-reccount a {
        color: var(--kt-ink-muted) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: default;
    }

        body .sidebar-reccount a .fa {
            margin-right: 7px;
            color: var(--kt-brand) !important;
        }

        body .sidebar-reccount a #lblRecCount {
            color: var(--kt-ink) !important;
        }

/* ========================================================== login page === */
/*  Scoped to #login-box, which exists on no other page, so none of this can
    reach the application. Same specificity problem as the cards: Login.aspx
    links bootstrap, AdminLTE and BootExtended from inside <body>, after
    lnkCSS, so every selector here carries an extra element or id. */

body.login-page {
    background: linear-gradient(180deg, #F7F9FD 0%, #EDF0F9 100%) !important;
}

    /*  The company name bar becomes a quiet full-width header instead of a
        heavy block, so the card is what the eye lands on. */
    body.login-page header.header {
        background: var(--kt-brand) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        text-align: center;
        box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
    }

        body.login-page header.header a.logo {
            background: transparent !important;
            color: #fff !important;
            display: block !important;
            float: none !important;
            font-size: 19px !important;
            font-weight: 600 !important;
            letter-spacing: .2px;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            line-height: 1.35 !important;
            padding: 17px 16px !important;
            margin: 0 !important;
            overflow: visible !important;
        }

/*  #wrap carries AdminLTE's row-offcanvas classes, which offset it sideways
    for the app shell. There is no sidebar on the login page, so that offset
    just pushed the card off the right edge - reset it here only. */
body.login-page #wrap {
    position: static !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    transform: none !important;
}

body.login-page .box-body {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 0 0 !important;
}

body #login-box {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 !important;
    background: var(--kt-surface) !important;
    border: 1px solid var(--kt-line) !important;
    border-top: 3px solid var(--kt-brand) !important;
    border-radius: var(--kt-radius) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(27, 30, 107, .10) !important;
    padding: 26px 24px 22px !important;
    float: none !important;
}

    /*  .body.alert-success is a Bootstrap alert being used as a form wrapper -
        strip the alert look off it entirely. */
    body #login-box .body,
    body #login-box .body.alert-success {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--kt-ink) !important;
    }

    body #login-box .form-group {
        margin-bottom: 14px !important;
    }

    body #login-box .form-control {
        height: 42px !important;
        padding: 9px 13px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        border: 1px solid var(--kt-line) !important;
        background: #FCFDFF !important;
        box-shadow: none !important;
    }

        body #login-box .form-control:focus {
            background: #fff !important;
            border-color: var(--kt-brand) !important;
            box-shadow: 0 0 0 3px rgba(35, 39, 139, .12) !important;
        }

    body #login-box .footer {
        background: transparent !important;
        border: 0 !important;
        padding: 6px 0 0 !important;
    }

    body #login-box .btn-primary {
        height: 42px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .2px;
        border-radius: 8px !important;
        background-color: var(--kt-brand-dark) !important;
        border-color: var(--kt-brand-dark) !important;
        transition: background-color .15s ease, box-shadow .15s ease;
    }

        body #login-box .btn-primary:hover {
            background-color: var(--kt-brand) !important;
            box-shadow: 0 6px 16px rgba(27, 30, 107, .22) !important;
        }

    body #login-box .footer p {
        margin: 12px 0 0 !important;
        text-align: center;
    }

        body #login-box .footer p a {
            color: var(--kt-ink-muted) !important;
            font-size: 13px;
            text-decoration: none !important;
        }

            body #login-box .footer p a:hover {
                color: var(--kt-brand) !important;
            }

/*  #Lastfooter was a fixed 100px tall on a grey band, and its own content ran
    to 111px - so the sensesoftech.com line was sliced off along the bottom
    edge. Let it size to what it holds. */
body.login-page #Lastfooter {
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 30px !important;
    padding: 0 16px 30px !important;
    text-align: center;
}

    body.login-page #Lastfooter .muted.credit,
    body.login-page #Lastfooter p {
        color: var(--kt-ink-muted) !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
        margin: 0 auto !important;
        max-width: 680px;
    }

/* ----------------------------------------------------------- scrollbar --- */
/*  One custom bar for the whole application: a thin rounded thumb that sits on
    a transparent track and only darkens under the pointer, instead of the OS
    default. The 3px transparent border with background-clip is what gives the
    thumb its inset - without it a rounded thumb touches both edges and reads
    as a heavy stripe down the side of the page. */

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: #C3C9DE transparent;               /* Firefox: thumb track */
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #C3C9DE;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color .16s ease;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--kt-brand) !important;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--kt-brand-dark) !important;
        background-clip: content-box;
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

/*  The result panes scroll inside the page, so they get the same bar rather
    than the heavy solid one they carried before. */
#SearchResult::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background-color: transparent !important;
}

#SearchResult::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #C3C9DE !important;
}

    #SearchResult::-webkit-scrollbar-thumb:hover {
        background-color: var(--kt-brand) !important;
        background-clip: content-box;
    }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 767px) {
    #main-menu > div > div[class*="col-"] {
        display: block;
    }

    body .offer-content {
        padding: 14px 14px 14px !important;
    }
}