/* Project page (order/manageorder.aspx), right-hand panel: toolbar, stage/status bar, money strip, client charges,
   linguist cards and the page's confirm / cancel-linguist dialogs. Scoped to its own classes (order-toolbar,
   order-status-bar, lt-oc-*, lt-cl-modal) so the theme and other pages are not affected.
   .lt-oc is a size container: the panel is only half the page wide on desktop, so the narrow-layout rules follow
   the PANEL's width (container query), not the window's. */

/* ---------------------------------------------------------------- buttons, shared */
.order-toolbar .btn,
.lt-oc .btn,
.lt-cl-modal .btn {
    border-radius: 6px;
}
.order-toolbar .btn-default,
.lt-oc .btn-default,
.lt-cl-modal .btn-default {
    background: #fff;
    border-color: #cfd6e0;
    color: #2c3e50;
}
    .order-toolbar .btn-default:hover,
    .order-toolbar .btn-default:focus,
    .order-toolbar .open > .btn-default,
    .lt-oc .btn-default:hover,
    .lt-oc .btn-default:focus,
    .lt-cl-modal .btn-default:hover,
    .lt-cl-modal .btn-default:focus {
        background: #f4f6fa;
        border-color: #b9c3d0;
        color: #1f2d3d;
    }
/* Cancel linguist: an outline button, clearly different from the red Remove */
.lt-oc .btn.lt-oc-btn-warn {
    background: #fff;
    border: 1px solid #d9a441;
    color: #6e4700;
}
    .lt-oc .btn.lt-oc-btn-warn:hover,
    .lt-oc .btn.lt-oc-btn-warn:focus {
        background: #fff6e5;
        border-color: #c48a1f;
        color: #563800;
    }

/* keyboard focus: the theme removes outlines (a:focus{outline:0 !important}), so put a clear ring back here */
.order-toolbar a:focus-visible,
.order-toolbar button:focus-visible,
.order-status-bar select:focus-visible,
.lt-oc a:focus-visible,
.lt-oc button:focus-visible,
.lt-oc select:focus-visible,
.lt-oc input:focus-visible,
.lt-cl-modal a:focus-visible,
.lt-cl-modal button:focus-visible,
.lt-cl-modal input:focus-visible {
    outline: 2px solid #2f5fa8 !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------- toolbar */
/* equal-height buttons in side-by-side groups (project and quote pages) */
.order-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 12px;
}
    .order-toolbar .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        font-weight: 500;
        line-height: 1;
    }
        .order-toolbar .btn .fa,
        .order-toolbar .btn .ti {
            margin-right: 6px;
            font-size: 14px;
        }
        .order-toolbar .btn .badge { margin-left: 6px; }
.order-toolbar .btn .badge {
    background: #e8eef8;
    color: #24508f;
    font-weight: 700;
}
/* on a cancelled project btnMailorder is hidden; the email menu then shows its own "Email" label */
.order-toolbar .ob-mail-lbl { display: none; }
.order-toolbar .btn-group > .ob-mail-toggle:first-child .ob-mail-lbl { display: inline; }
.order-toolbar .dropdown-menu > li > a .fa {
    width: 16px;
    text-align: center;
    color: #5a6577;
}
.order-toolbar .dropdown-menu > li > a.text-danger .fa { color: inherit; }
.order-toolbar .dropdown-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #5a6577;
}

/* ---------------------------------------------------------------- stage / status bar */
.order-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #f7f9fc;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}
.osb-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.osb-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #5a6577;
    cursor: help;
}
.osb-field .form-control {
    width: auto;
    min-width: 170px;
    max-width: 240px;
    height: 32px;
    padding: 4px 8px;
}
/* the quote pages: Stage and Status on the left, the lifecycle button (Create / View project) on the right, and what
   happens next on its own line underneath */
.order-status-bar.osb-quote { justify-content: flex-start; }
.osb-hint {
    order: 10;
    flex: 1 1 220px;
    font-size: 12px;
    color: #5a6577;
}
.osb-action { order: 11; margin-left: auto; }

/* ---------------------------------------------------------------- charges tab */
.lt-oc {
    margin-top: 14px;
    container-type: inline-size;
    container-name: ltoc;
}
/* money strip */
.lt-oc-money {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.lt-oc-m {
    flex: 1 1 140px;
    min-width: 0;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}
.lt-oc-mk {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #5a6577;
}
/* amounts are never cut off: they wrap instead (a money figure must always be readable in full) */
.lt-oc-mv {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2d3d;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}
    .lt-oc-mv small {
        display: block;
        margin-top: 1px;
        font-size: 12px;
        font-weight: 600;
    }
.lt-oc-m.is-pos { border-color: #cdebd9; background: #f5fcf8; }
    .lt-oc-m.is-pos .lt-oc-mv { color: #1e7e48; }
.lt-oc-m.is-neg { border-color: #f0c2bd; background: #fdf5f4; }
    .lt-oc-m.is-neg .lt-oc-mv { color: #a5342b; }
.lt-oc-m.is-na .lt-oc-mv { color: #5a6577; }
.lt-oc-m.is-text .lt-oc-mv { font-size: 15px; line-height: 1.35; padding-top: 3px; }   /* a word, not an amount */
/* "+ VAT" after a charge that adds tax on top */
.lt-oc-taxtag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: #eef2f7;
    color: #5a6577;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: 1px;
    white-space: nowrap;
}
.lt-oc-mnote {
    flex: 1 1 100%;
    margin-top: -4px;
    font-size: 12px;
    color: #5a6577;
}
/* cards */
.lt-oc-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    margin: 0 0 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* the card's header: a tinted band with a brand-blue edge, so where each card starts shows at a glance (it was white
   like the content). Every card uses it - no page-level header colours. */
.lt-oc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    background: #e8eff9;
    border-bottom: 1px solid #d5dfed;
    box-shadow: inset 3px 0 0 #2f5fa8;
}
    .lt-oc-card > .lt-oc-head:first-child { border-radius: 7px 7px 0 0; }
    .lt-oc-card > .lt-oc-head:only-child { border-radius: 7px; border-bottom: 0; }
.lt-oc-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 10px;
}
.lt-oc-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2d3d;
}
    .lt-oc-title .fa {
        margin-right: 7px;
        color: #2f5fa8;
    }
.lt-oc-head .btn,
.lt-oc-section .btn,
.lt-oc-bar .btn,
.lt-oc-costhead .btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.lt-oc-alert {
    margin: 10px 14px 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff6e5;
    border: 1px solid #f3e2bb;
    color: #6b4a00;
    font-size: 13px;
}
    .lt-oc-alert .checkbox-inline { margin: 0 0 0 6px; padding-top: 0; }
.lt-oc-none {
    padding: 16px 14px;
    color: #5a6577;
}
/* tables (wrapped so a very narrow panel scrolls sideways instead of hiding the buttons) */
.lt-oc-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.lt-oc-table {
    width: 100%;
    margin: 0;
}
    table.lt-oc-table > tbody > tr > th,
    table.lt-oc-table > thead > tr > th {
        padding: 8px 14px;
        background: #fafbfd;
        border-top: 0;
        border-bottom: 1px solid #eef1f6;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #5a6577 !important;   /* the theme forces its own header colour with !important */
    }
    table.lt-oc-table > tbody > tr > td {
        padding: 9px 14px;
        vertical-align: middle;
        border-top: 1px solid #f1f3f7;
        color: #1f2d3d;
        font-size: 13px;
    }
    table.lt-oc-table .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    table.lt-oc-table .act {
        width: 1%;
        text-align: right;
        white-space: nowrap;
    }
        table.lt-oc-table .act .btn {
            min-width: 32px;
            margin: 2px 0 2px 4px;
        }
    table.lt-oc-table .lt-oc-empty > td {
        color: #5a6577;
        font-style: italic;
        border-top: 0;
    }
/* totals */
.lt-oc-totals {
    padding: 8px 14px 12px;
    border-top: 1px solid #eef1f6;
}
.lt-oc-trow {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 2px 0;
    font-size: 13px;
    color: #34495e;
}
    .lt-oc-trow > span:first-child { text-align: right; }
    .lt-oc-trow > span:last-child {
        min-width: 110px;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .lt-oc-trow.is-total {
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px dashed #e3e8f0;
        font-size: 15px;
        font-weight: 700;
        color: #1f2d3d;
    }
/* linguist card */
.lt-oc-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lt-oc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8eef8;
    color: #2f5fa8;
    font-size: 17px;
}
.lt-oc-whotext { min-width: 0; }
.lt-oc-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2d3d;
}
    .lt-oc-name .fa { font-size: 11px; color: #5a6577; }
    .lt-oc-name:hover,
    .lt-oc-name:focus { color: #2f5fa8; text-decoration: none; }
.lt-oc-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 3px;
}
.lt-oc-when {
    font-size: 12px;
    color: #5a6577;
}
.lt-oc-paid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 10px 14px 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff6e5;
    border: 1px solid #f3e2bb;
    color: #5c3d00;
    font-size: 13px;
}
    .lt-oc-paid a { font-weight: 700; color: #24508f; }
.lt-oc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #fafbfd;
    border-bottom: 1px solid #eef1f6;
}
.lt-oc-sp { flex: 1 1 auto; }
/* Remove never sits right next to another button, even when the row wraps */
.lt-oc-bar .lt-oc-remove { margin-left: 12px; }
.lt-oc-costhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 6px;
}
.lt-oc-sublabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #5a6577;
}
.lt-oc-costtools {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lt-oc-curlabel { margin: 0; font-size: 12px; font-weight: 400; color: #5a6577; }
select.lt-oc-cur {
    display: inline-block;
    width: auto;
    min-width: 110px;
    height: 30px;
    padding: 3px 6px;
    font-size: 12px;
}

/* the panel is narrow (about half a laptop screen, or a phone) */
@container ltoc (max-width: 520px) {
    .lt-oc-m { padding: 8px 10px; }
    .lt-oc-mv { font-size: 17px; }
    .lt-oc-head, .lt-oc-bar, .lt-oc-costhead, .lt-oc-totals { padding-left: 10px; padding-right: 10px; }
    table.lt-oc-table > tbody > tr > th,
    table.lt-oc-table > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
}
/* the Rate column goes first (Units and Total stay); a 1440px screen gives the panel about 490px */
@container ltoc (max-width: 440px) {
    table.lt-oc-table .col-rate { display: none; }
}
@container ltoc (max-width: 400px) {
    table.lt-oc-table .act { white-space: normal; }
}

/* ---------------------------------------------------------------- dialogs (confirm + cancel linguist) */
.lt-cl-modal .modal-dialog { max-width: 460px; margin: 90px auto; }
.lt-cl-modal .modal-content { color: #1f2d3d; }
.lt-cl-modal .modal-title { font-weight: 700; color: #1f2d3d; }
.lt-cl-modal .modal-body p { color: #34495e; }
.lt-cl-q { margin: 14px 0 4px; font-weight: 700; color: #1f2d3d !important; }
.lt-cl-modal .radio { margin: 6px 0; }
    .lt-cl-modal .radio label { font-weight: 400; color: #1f2d3d; }
/* the shared confirm opens on top of any dialog that is already open (the files popup). The theme puts dialogs at
   9999 and their backdrop at 9998 (the page header is 1089), so this sits above both; ltConfirm lifts its backdrop. */
.lt-cf-modal { z-index: 10060 !important; }

@media (max-width: 600px) {
    .order-toolbar { justify-content: flex-start; }
    .order-status-bar { flex-direction: column; align-items: stretch; }
    .osb-hint { flex: 0 0 auto; }   /* in a column its 220px basis would become a height */
    .osb-action { margin-left: 0; }
    .osb-field { justify-content: space-between; }
        .osb-field .form-control { flex: 1 1 auto; max-width: none; }
    .lt-cl-modal .modal-dialog { margin: 60px 12px; }
}

/* ---------------------------------------------------------------- charge dialogs (client charge / linguist cost) */
#dialog-newcharge .modal-dialog,
#dialog-vendorChrge .modal-dialog { width: 520px; max-width: 100vw; }
.lt-ch-modal .modal-content { background: #f7f9fc; }
.lt-ch-header {
    padding: 18px 22px 16px;
    background: linear-gradient(120deg, #1f3a68, #2f5fa8);
    border: 0;
    color: #fff;
}
    .lt-ch-header .modal-title { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
    .lt-ch-header .close { color: #fff; opacity: .85; text-shadow: none; }
        .lt-ch-header .close:hover, .lt-ch-header .close:focus { opacity: 1; }
.lt-ch-subtitle { margin: 4px 0 0; font-size: 13px; color: #dbe6f5; }
.lt-ch { padding: 18px 22px 20px; }
.lt-ch-field { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.lt-ch .lt-ch-label {
    display: block;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #34495e;
}
/* a group of choices is a <fieldset class="lt-ch-field"> with its label in a <legend class="lt-ch-label">: the theme draws
   every "fieldset legend" floating on a bordered box (position absolute, 12px above the top), which put the choices over
   the lower half of the label */
.lt-ch fieldset.lt-ch-field { background: none; border-radius: 0; }
.lt-ch fieldset > legend.lt-ch-label { position: static; top: auto; left: auto; float: none; background: none; font-family: inherit; }
.lt-ch-req { color: #a5342b; }
.lt-ch .form-control {
    height: 38px;
    border-color: #cfd6e0;
    border-radius: 6px;
    box-shadow: none;
    color: #1f2d3d;
}
.lt-ch .input-group-addon {
    min-width: 42px;
    background: #eef2f7;
    border-color: #cfd6e0;
    border-radius: 6px 0 0 6px;
    color: #2c3e50;
    font-weight: 700;
}
.lt-ch .input-group .form-control { border-radius: 0 6px 6px 0; }
.lt-ch-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
    .lt-ch-row > .lt-ch-field { flex: 1 1 190px; }
.lt-ch-qtyrow { display: flex; gap: 8px; }
    .lt-ch-qtyrow input { flex: 0 0 88px; }
    .lt-ch-qtyrow select { flex: 1 1 auto; min-width: 0; }
.lt-ch-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #24508f; }
.lt-ch-help { margin: 6px 0 0; font-size: 12px; color: #5a6577; }
.lt-ch-wordhint { display: none; }
.lt-ch-err { display: none; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #a5342b; }
.lt-ch-field.has-error .lt-ch-err { display: block; }
.lt-ch-field.has-error .form-control { border-color: #d9534f; }
/* tax: the two outcomes as selectable cards */
ul.lt-ch-radios { list-style: none; margin: 0; padding: 0; }
    ul.lt-ch-radios > li { position: relative; margin: 0 0 8px; }
    ul.lt-ch-radios input[type=radio] { position: absolute; left: 13px; top: 13px; margin: 0; }
    ul.lt-ch-radios label {
        display: block;
        margin: 0;
        padding: 10px 12px 10px 38px;
        background: #fff;
        border: 1px solid #cfd6e0;
        border-radius: 8px;
        font-weight: 400;
        color: #1f2d3d;
        cursor: pointer;
    }
    ul.lt-ch-radios input[type=radio]:checked + label {
        background: #f3f7fd;
        border-color: #2f5fa8;
        box-shadow: 0 0 0 1px #2f5fa8;
    }
.lt-ch-field.has-error ul.lt-ch-radios label { border-color: #d9534f; }
.lt-ch .lt-ch-tax input:focus-visible { outline: 2px solid #2f5fa8 !important; outline-offset: 2px !important; }
/* live line total + the effect on the project */
.lt-ch-total {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
}
.lt-ch-totrow { display: flex; align-items: baseline; gap: 10px; }
.lt-ch-totlbl,
.lt-ch-ihead { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #5a6577; }
.lt-ch-totalval { margin-left: auto; font-size: 20px; font-weight: 700; color: #1f2d3d; font-variant-numeric: tabular-nums; }
.lt-ch-taxline { display: none; margin-top: 2px; text-align: right; font-size: 12px; color: #5a6577; font-variant-numeric: tabular-nums; }
.lt-ch-impact { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e3e8f0; }
.lt-ch-ihead { margin-bottom: 4px; }
.lt-ch-irow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 3px 0;
    font-size: 13px;
    color: #34495e;
}
.lt-ch-ival { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.lt-ch-before { color: #5a6577; }
.lt-ch-arrow { color: #5a6577; }
.lt-ch-after { font-weight: 700; color: #1f2d3d; }
.lt-ch-ival.is-up .lt-ch-after { color: #1e7e48; }
.lt-ch-ival.is-down .lt-ch-after { color: #8a5a00; }
.lt-ch-ival.is-neg .lt-ch-after { color: #a5342b; }
.lt-ch-inote { display: none; margin: 6px 0 0; font-size: 12px; color: #5a6577; }
.lt-ch-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e3e8f0;
}
    .lt-ch-foot .btn { margin: 0; border-radius: 6px; }
    .lt-ch-foot .btn + .btn { margin-left: 0; }   /* Bootstrap adds 5px; the footer spaces its buttons with gap */
    .lt-ch-foot .btn-default { background: #fff; border-color: #cfd6e0; color: #2c3e50; }
@media (max-width: 600px) {
    .lt-ch { padding: 14px; }
    .lt-ch-foot { padding: 12px 14px; }
}

/* ---------------------------------------------------------------- workflow tab (order page, BindWorkflowSteps) */
.lt-wf-sum { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13px; color: #34495e; }
    .lt-wf-count strong { color: #1f2d3d; }
.lt-wf-late { font-weight: 700; color: #a5342b; }
.lt-wf-progress {
    height: 6px;
    margin: 12px 14px 0;
    background: #eef1f6;
    border-radius: 999px;
    overflow: hidden;
}
    .lt-wf-progress > span { display: block; height: 100%; background: #2ea36b; border-radius: 999px; }
.lt-wf-none p { margin: 0 0 10px; }
/* the steps: a status dot per row on one vertical line */
ol.lt-wf-steps { list-style: none; margin: 0; padding: 6px 14px 8px; }
.lt-wf-step { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
    .lt-wf-step::before {
        content: '';
        position: absolute;
        left: 13px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e3e8f0;
    }
    .lt-wf-step:first-child::before { top: 24px; }
    .lt-wf-step:last-child::before { bottom: auto; height: 24px; }
    .lt-wf-step:only-child::before { display: none; }
.lt-wf-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cfd6e0;
    color: #8391a5;
    font-size: 12px;
}
.is-milestone .lt-wf-dot { background: #f4f6fa; border-color: #e3e8f0; color: #5a6577; }
.is-milestone.is-past .lt-wf-dot { color: #2f5fa8; }
.is-done .lt-wf-dot { background: #2ea36b; border-color: #2ea36b; color: #fff; }
.is-active .lt-wf-dot { border-color: #2f5fa8; color: #2f5fa8; font-size: 9px; }
.is-overdue .lt-wf-dot { background: #fdecea; border-color: #d9534f; color: #a5342b; }
.is-nodates .lt-wf-dot { border-style: dashed; }
.lt-wf-body { flex: 1 1 0%; min-width: 0; padding-top: 3px; }   /* a zero basis keeps it beside the dot when the row wraps */
.lt-wf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lt-wf-title { font-size: 14px; font-weight: 700; color: #1f2d3d; overflow-wrap: anywhere; }
.is-milestone .lt-wf-title { font-size: 13px; font-weight: 600; color: #34495e; }
/* a compact status pill here (StatusPillHtml sets its size inline) */
.lt-wf-top .lt-status { padding: 0 9px !important; font-size: 11px !important; }
.lt-wf-prio { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #9a6700; }
.lt-wf-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 12px; color: #5a6577; }
    .lt-wf-meta .fa { color: #8391a5; }
.is-overdue .lt-wf-when { color: #a5342b; }
    .is-overdue .lt-wf-when .fa { color: inherit; }
.lt-wf-who.is-none { font-style: italic; }
.lt-wf-act { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; align-self: center; }
    .lt-wf-act .btn { margin: 0; }
@container ltoc (max-width: 440px) {
    ol.lt-wf-steps { padding-left: 10px; padding-right: 10px; }
    .lt-wf-btxt { display: none; }
}
@container ltoc (max-width: 340px) {
    .lt-wf-step { flex-wrap: wrap; }
    .lt-wf-act { flex-basis: 100%; padding-left: 40px; }
}

/* the task dialog: the charge dialogs' layout (.lt-ch-*) */
#dialog-taskedit .modal-dialog { width: 460px; max-width: 100vw; }
.lt-tk-modal .modal-content { background: #f7f9fc; }
.lt-tk-when { display: flex; gap: 8px; }
    .lt-tk-when .form-control { flex: 1 1 50%; min-width: 0; }
.lt-tk-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 13px; color: #34495e; }
.lt-tk-modal .lt-ch-foot { flex-wrap: wrap; }
.lt-tk-modal a:focus-visible,
.lt-tk-modal button:focus-visible,
.lt-tk-modal input:focus-visible,
.lt-tk-modal select:focus-visible {
    outline: 2px solid #2f5fa8 !important;
    outline-offset: 2px !important;
}
/* a phone: the buttons full width, stacked, the main one on top (Save changes, then Save and mark done / Reopen, Cancel) */
@media (max-width: 480px) {
    .lt-tk-modal .lt-ch-foot { flex-direction: column-reverse; align-items: stretch; }
        .lt-tk-modal .lt-ch-foot .btn { width: 100%; }
}

/* ---------------------------------------------------------------- job dialog (quote/managequoteproject.aspx) */
#dialog-newjobitem .modal-dialog { width: 720px; max-width: 100vw; }
.lt-jb-modal .modal-content { background: #f7f9fc; }
.lt-jb-pair { display: flex; gap: 8px; }
    .lt-jb-pair > .form-control { flex: 1 1 50%; min-width: 0; }
.lt-jb-note {
    margin: 0 0 16px;
    padding: 8px 12px;
    background: #f3f7fd;
    border: 1px solid #cfdcef;
    border-radius: 6px;
    color: #24508f;
    font-size: 13px;
}
.lt-jb-charges { margin: 6px 0 0; }
.lt-jb-total { font-size: 13px; font-weight: 700; color: #1f2d3d; white-space: nowrap; }
/* add / change a charge: one row of fields that wraps on a narrow screen */
.lt-jb-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 10px;
    padding: 12px 14px 0;
    border-top: 1px solid #eef1f6;
}
    .lt-jb-add .lt-ch-field { margin-bottom: 12px; }
    .lt-jb-add .lt-jb-type { flex: 2 1 170px; }
    .lt-jb-add .lt-jb-num { flex: 1 1 80px; }
    .lt-jb-add .lt-jb-unit { flex: 1.5 1 140px; }
    .lt-jb-add .lt-jb-tax { flex: 1.5 1 170px; }
    .lt-jb-add .lt-jb-go { flex: 0 0 auto; margin-bottom: 12px; }
.lt-jb-hint { display: block; padding: 0 14px 12px; font-size: 12px; color: #24508f; }
    .lt-jb-hint:empty { display: none; }

/* ---------------------------------------------------------------- list / settings pages (the ltriks-ui skill) */
.lt-page { margin-top: 4px; padding-bottom: 20px; }
.lt-page-intro { max-width: 880px; margin: 0 0 14px; color: #5a6577; font-size: 13px; }
/* the number of rows, next to a card title: "Languages (335)" */
.lt-oc-count {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #5a6577;
    font-size: 12px;
    font-weight: 700;
    vertical-align: 1px;
}
    .lt-oc-count:empty { display: none; }
/* a card's filter / search row, under its head */
.lt-oc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid #eef1f6; background: #fafbfd; }
    .lt-oc-filter .form-control { width: auto; min-width: 180px; height: 32px; padding: 4px 8px; }
/* the redesigned dialogs' quiet grey background (the charge / task / job dialogs set their own) */
.lt-dlg .modal-content { background: #f7f9fc; }
/* a muted inline state after a name: "(not in use)" */
.lt-oc-muted { color: #8391a5; font-size: 12px; margin-left: 6px; }
/* lookup lists (Settings): a turned-off row, small tags after a name, radios side by side */
table.lt-oc-table tr.is-off > td:not(.act) { color: #8391a5; }
.lt-oc-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #eef2f7; color: #5a6577; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; white-space: nowrap; }
    .lt-oc-tag.is-key { background: #eaf1fb; color: #2f5fa8; }
    .lt-oc-tag.is-warn { background: #fff6e5; color: #8a5a00; }
.lt-oc-sub2 { display: block; margin-top: 2px; font-size: 12px; color: #5a6577; }
.lt-oc-secret { font-family: Consolas, Menlo, monospace; letter-spacing: 1px; color: #5a6577; }
ul.lt-ch-radios.is-row { display: flex; flex-wrap: wrap; gap: 8px; }
    ul.lt-ch-radios.is-row > li { flex: 1 1 130px; margin: 0; }
.lt-ch textarea.form-control { height: auto; min-height: 120px; }
.lt-sms-count { display: block; margin-top: 6px; font-size: 12px; color: #5a6577; }
.lt-oc-info { padding: 14px 16px; color: #34495e; font-size: 13px; }
    .lt-oc-info h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: #1f2d3d; }
    .lt-oc-info h4:first-child { margin-top: 0; }
    .lt-oc-info code { white-space: normal; }
@media (max-width: 600px) {
    .lt-oc-filter .form-control { flex: 1 1 100%; min-width: 0; width: 100%; }
}
.lt-ch .form-control[readonly] { background: #f1f3f6; color: #5a6577; }
/* simple lists on a phone (table.lt-oc-stack): one card per row - the name on its own line, the other cells after it,
   the buttons underneath - instead of a sideways-scrolling table with the buttons off screen */
@media (max-width: 600px) {
    table.lt-oc-stack, table.lt-oc-stack > tbody { display: block; width: 100%; }
    table.lt-oc-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border-top: 1px solid #f1f3f7; }
    table.lt-oc-stack > tbody > tr:first-child,
    table.lt-oc-stack > tbody > tr.lt-oc-headrow + tr { border-top: 0; }
    table.lt-oc-stack > tbody > tr.lt-oc-headrow { display: none; }
    table.lt-oc-stack > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; }
    table.lt-oc-stack > tbody > tr > td:first-child { flex: 1 1 100%; }
    table.lt-oc-stack > tbody > tr > td.num { text-align: left; }
    table.lt-oc-stack > tbody > tr > td.act { flex: 1 1 100%; width: auto; text-align: left; white-space: normal; }
        table.lt-oc-stack .act .btn { margin: 2px 6px 0 0; }
    table.lt-oc-stack > tbody > tr.lt-oc-empty > td { flex: 1 1 100%; }
}
/* settings / form pages: cards of labelled fields (.lt-ch styles) with a save bar at the bottom of the card */
.lt-page.is-narrow { max-width: 920px; }
.lt-form { padding: 16px 16px 4px; }
.lt-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
    .lt-form-grid > .is-wide { grid-column: 1 / -1; }
.lt-oc-note { margin: 0; padding: 12px 16px 0; color: #5a6577; font-size: 13px; }
.lt-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; padding: 12px 16px 14px; border-top: 1px solid #eef1f6; }
    .lt-form-foot .lt-ch-help { margin: 0 auto 0 0; flex: 1 1 260px; }
    .lt-form-foot .btn { margin: 0; }
/* a checkbox with its words (asp:CheckBox CssClass="lt-check" renders span > input + label) */
.lt-check { display: flex; align-items: flex-start; gap: 8px; }
    .lt-check input[type=checkbox] { flex: 0 0 auto; margin: 3px 0 0; }
    .lt-check label { margin: 0; font-weight: 400; color: #1f2d3d; cursor: pointer; }
/* a read-only value in a form (a saved key, a generated URL) */
.lt-value { display: block; padding: 8px 10px; background: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 6px; color: #34495e; font-size: 13px; word-break: break-all; }
/* ---------------------------------------------------------------- entity list pages (enquiries, quotes, projects ...) */
/* KPI strip: the few numbers that matter on a list page, each a tile with a coloured icon */
.lt-kpi-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.lt-kpi {
    flex: 1 1 170px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    transition: box-shadow .12s, transform .12s;
}
    a.lt-kpi, .lt-kpi[onclick] { cursor: pointer; color: inherit; text-decoration: none; }
    a.lt-kpi:hover, .lt-kpi[onclick]:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .06); transform: translateY(-1px); }
.lt-kpi-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #3d7fc4;
    color: #fff;
    font-size: 17px;
}
    .lt-kpi-icon.is-blue { background: #3d7fc4; }
    .lt-kpi-icon.is-orange { background: #e0892b; }
    .lt-kpi-icon.is-green { background: #16a085; }
    .lt-kpi-icon.is-red { background: #c0392b; }
    .lt-kpi-icon.is-purple { background: #7058b8; }
    .lt-kpi-icon.is-grey { background: #8391a5; }
.lt-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.1; color: #1f2d3d; font-variant-numeric: tabular-nums; }
.lt-kpi-label { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5a6577; }
.lt-kpi-sub { margin-top: 2px; font-size: 11px; color: #8391a5; }
/* the bar above the table: title + count on the left, "Mine" / Filters / View / New on the right */
.lt-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef1f6; }
    .lt-listbar .lt-oc-title { font-size: 15px; }
.lt-listbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
    .lt-listbar-tools .btn { margin: 0; }
.lt-my-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    background: #f6f9fd;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    font-weight: 600;
    color: #34495e;
    cursor: pointer;
}
    .lt-my-toggle:hover { background: #eaf2fb; }
    .lt-my-toggle input { margin: 0; }
/* quick status chips under the bar */
.lt-chipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #eef1f6; background: #fafbfd; }
.lt-chipbar-label { margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5a6577; }
.lt-chip {
    display: inline-block;
    padding: 3px 11px;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 999px;
    font-size: 12px;
    color: #34495e;
    cursor: pointer;
    user-select: none;
}
    .lt-chip:hover { border-color: #2f5fa8; color: #2f5fa8; }
    .lt-chip.active { background: #2f5fa8; border-color: #2f5fa8; color: #fff; }
/* a friendly empty state inside a card */
.lt-empty { padding: 44px 20px; text-align: center; color: #5a6577; }
    .lt-empty .es-icon { margin-bottom: 10px; font-size: 52px; color: #c8d0d8; }
    .lt-empty .es-title { margin-bottom: 8px; font-size: 17px; font-weight: 700; color: #1f2d3d; }
    .lt-empty p { max-width: 560px; margin: 0 auto 14px; line-height: 1.5; }
/* list cells: the record's reference as a link, a muted second line */
table.lt-oc-table a.lt-ref { font-weight: 700; color: #24508f; }
    table.lt-oc-table a.lt-ref:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .lt-kpi { flex-basis: 140px; padding: 10px 12px; }
    .lt-kpi-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
    .lt-kpi-value { font-size: 18px; }
    .lt-listbar-tools { margin-left: 0; }
}
/* a list page's search drawer (the theme's #settings side panel, re-used): opened by the list bar's Filters button, so
   its edge tab - which sat on top of the page's own buttons - is hidden. Add the class only when a Filters button exists. */
.lt-drawer > .btn { display: none; }
.lt-drawer .panel-heading { font-weight: 700; color: #1f2d3d; }
/* a button group in an actions cell stays on one line */
table.lt-oc-table .act .btn-group { display: inline-flex; flex-wrap: nowrap; align-items: center; }
    table.lt-oc-table .act .btn-group > .btn { float: none; }
/* ---------------------------------------------------------------- hubs (Settings, Company settings, Reports) */
/* a card per group, a grid of tiles - icon, name and one line on what the page is for; an optional find box */
.lt-hub-find { max-width: 380px; margin: 0 0 14px; }
    .lt-hub-find .form-control { height: 36px; border-color: #cfd6e0; border-radius: 6px; box-shadow: none; }
.lt-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 14px; }
.lt-hub-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    color: #1f2d3d;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
    .lt-hub-tile:hover, .lt-hub-tile:focus { border-color: #2f5fa8; box-shadow: 0 2px 10px rgba(47, 95, 168, .14); color: #1f2d3d; text-decoration: none; }
.lt-hub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eef3fc;
    color: #2f5fa8;
    font-size: 17px;
}
.lt-hub-text { min-width: 0; }
.lt-hub-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: #1f2d3d; }
.lt-hub-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #5a6577; }
.lt-hub-none { margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px dashed #cfd6e0; border-radius: 8px; color: #5a6577; font-style: italic; }
/* small shared refinements asked for by the page work */
.lt-page > .lt-oc-alert, .lt-page > div > .lt-oc-alert { margin: 0 0 14px; }   /* a page-level alert (outside a card) */
.lt-ch .input-group .form-control:first-child { border-radius: 6px 0 0 6px; }  /* an input with a button on its right */
.lt-ch .input-group-btn:last-child > .btn { border-radius: 0 6px 6px 0; }
.lt-value.is-copy { user-select: all; cursor: text; }                           /* an address staff copy into another system */

/* ---------------------------------------------------------------- shared bits the pages used to carry themselves
   (hoisted 2026-09-28: one definition here instead of a copy in every restyled page) */
/* an upper-case heading over a group of fields or rows (the detail pages' forms: Contact, Service, Main contacts ...):
   the same band as a card's header (.lt-oc-head), so a page's sections show at a glance - no page copies */
.section-heading {
    clear: both;   /* starts below a floated block before it (the quote page's summary strip is a col-md-12), not behind it */
    margin: 22px 0 12px 0;
    padding: 8px 12px;
    background: #e8eff9;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 #2f5fa8;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1f2d3d;
}
.section-heading:first-child { margin-top: 0; }
.section-heading .fa, .section-heading [class^="ti-"], .section-heading [class*=" ti-"] { margin-right: 6px; color: #2f5fa8; }   /* themify icons carry only ti-xxx */
/* a chip that is a link (a filter that reloads the page): no underline, white text when active */
a.lt-chip, a.lt-chip:hover, a.lt-chip:focus { text-decoration: none; }
a.lt-chip.active, a.lt-chip.active:hover, a.lt-chip.active:focus { color: #fff; }
a.lt-chip .fa { margin-right: 4px; }
/* a fixed-height box for a chart canvas inside a card (Chart.js sizes the canvas to it) */
.lt-chart { position: relative; height: 320px; margin: 12px 16px 16px; }

/* ---------------------------------------------------------------- files popup (.lt-fx-*)
   The Files dialog on order/manageorder and the shared file control WebControls/fileupload.ascx (quote, enquiry,
   linguist, settings pages): header band, cards per file group, upload button + drop zone built by uploadifive,
   file rows with a thumbnail or type icon. #dialog-attachments is the dialog id every host page uses. */
#dialog-attachments .modal-dialog{width:860px;max-width:100vw}
@media (max-width:900px){#dialog-attachments .modal-dialog{width:100vw}}
#dialog-attachments .modal-content{background:#f4f6fa}
.lt-fx-header{background:linear-gradient(120deg,#1f3a68,#2f5fa8);border:0;padding:18px 22px 16px;color:#fff}
.lt-fx-header .modal-title{color:#fff;font-size:19px;font-weight:700;margin:0}
.lt-fx-header .close{color:#fff;opacity:.85;text-shadow:none;font-size:26px;margin-top:-2px}
.lt-fx-header .close:hover{opacity:1}
.lt-fx-subtitle{margin:4px 0 0;font-size:12.5px;color:#d8e3f7}
.lt-fx{padding:16px 20px 24px}
.lt-fx-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.lt-fx-toolbar .lt-fx-spacer{flex:1 1 auto}
.lt-fx-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:6px;border:1px solid #d5dce8;background:#fff;color:#2c3e50;font-size:12.5px;font-weight:600;text-decoration:none!important;cursor:pointer;white-space:nowrap}
.lt-fx-btn:hover{border-color:#9fb3d6;color:#1d4fb4;background:#fbfcff}
.lt-fx-btn-ai{color:#5b3fd9;border-color:#d9d0fb}
.lt-fx-btn-ai:hover{color:#4a2fc4;border-color:#b9a9f6;background:#faf8ff}
.lt-fx-btn-icon{width:32px;justify-content:center;padding:0}
.lt-fx-card{background:#fff;border:1px solid #e3e8f0;border-radius:10px;padding:14px 16px 12px;margin:0 0 14px;box-shadow:0 1px 2px rgba(20,35,60,.04);transition:border-color .15s,box-shadow .15s}
.lt-fx-card.is-drag{border-color:#2f6fed;box-shadow:0 0 0 3px rgba(47,111,237,.15)}
/* the shared file control inside a card the host already draws (settings, linguist profile): no second frame */
.lt-fx-card.is-flat{border:0;box-shadow:none;padding:0;margin:0;background:transparent}
.lt-fx-card.is-flat.is-drag{box-shadow:none}

/* ---------------------------------------------------------------- secondary table columns
   A column marked col-2nd (ItemStyle + HeaderStyle) is a nice-to-have figure: it is hidden below 1500 px so a wide
   report still fits a laptop without a scrollbar; a .col-2nd-hint line shows only while columns are hidden. */
.col-2nd-hint { display: none; }
@media (max-width: 1499px) {
    table.lt-oc-table .col-2nd, table.lt-oc-table th.col-2nd, table.lt-oc-table td.col-2nd { display: none; }
    .col-2nd-hint { display: block; }
}
.lt-fx-card-head{display:flex;align-items:center;gap:12px}
.lt-fx-card-ico{flex:0 0 auto;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.lt-fx-ico-src{background:#eaf1ff;color:#2f5fa8}
.lt-fx-ico-tgt{background:#e8f7ee;color:#1e8e5a}
.lt-fx-ico-cert{background:#fff4dc;color:#b7791f}
.lt-fx-ico-decl{background:#f1edff;color:#5b3fd9}
.lt-fx-card-title{flex:1 1 auto;min-width:0}
.lt-fx-card-title h4{margin:0;font-size:15px;font-weight:700;color:#1f2d3d;display:flex;align-items:center;gap:8px}
.lt-fx-card-sub{display:block;font-size:12px;color:#8a94a6;margin-top:1px;line-height:1.4}
.lt-fx-count{display:inline-block;min-width:20px;padding:0 7px;border-radius:999px;background:#eef1f6;color:#4a5668;font-size:11.5px;font-weight:700;line-height:19px;text-align:center}
.lt-fx-card-head .uploadifive-button.lt-fx-upload{flex:0 0 auto;background:#2f6fed!important;background-image:none!important;border:0!important;border-radius:6px!important;color:#fff!important;font:600 12.5px/32px inherit!important;padding:0 14px!important;text-transform:none!important;text-shadow:none!important;box-shadow:none!important;cursor:pointer}
.lt-fx-card-head .uploadifive-button.lt-fx-upload:hover{background:#1d5bd8!important}
.lt-fx-drop{margin:10px 0 0;border:1.5px dashed #cfd8e6;border-radius:8px;background:#fafbfd;padding:9px 12px;font-size:12px;color:#8a94a6;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:40px}
.lt-fx-drop .lt-fx-drop-hint{display:inline-flex;align-items:center;gap:6px}
.lt-fx-drop .lt-fx-drop-hint .fa{font-size:15px;color:#9aa8bf}
.lt-fx-card.is-drag .lt-fx-drop{border-color:#2f6fed;background:#f1f6ff;color:#1d4fb4}
.lt-fx-drop .uploadifive-queue-item{flex:1 1 100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:#fff;border:1px solid #e3e8f0;border-radius:6px;padding:6px 10px;color:#2c3e50;font-size:12px}
.lt-fx-drop .uploadifive-queue-item .filename{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-fx-drop .uploadifive-queue-item .fileinfo{color:#8a94a6}
.lt-fx-drop .uploadifive-queue-item .close{grid-column:2;grid-row:1;color:#98a0ad;font-size:16px;line-height:1;text-decoration:none;opacity:1}
.lt-fx-drop .uploadifive-queue-item .progress{grid-column:1/-1;height:4px;margin:3px 0 0;border-radius:2px;background:#edf1f6;box-shadow:none}
.lt-fx-drop .uploadifive-queue-item .progress-bar{height:100%;width:0;border-radius:2px;background:#2f6fed;transition:width .2s}
.lt-fx-drop .uploadifive-queue-item.complete .fileinfo{color:#1e8e5a}
.lt-fx-drop .uploadifive-queue-item.error{border-color:#f3c2c2;background:#fff6f6}
.lt-fx-drop .uploadifive-queue-item.error .fileinfo{color:#c0392b}
.lt-fx-convert{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;font-weight:normal;color:#5a6472;cursor:pointer}
.lt-fx-convert input{margin:0}
.lt-fx-list{list-style:none;margin:10px 0 0;padding:0;border:1px solid #e8ecf2;border-radius:8px;overflow:hidden}
.lt-fx-list:empty{display:none}
.lt-fx-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid #eef1f5;background:#fff}
.lt-fx-row:first-child{border-top:0}
.lt-fx-row:hover{background:#f8faff}
.lt-fx-thumb{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#f1f4f9}
.lt-fx-thumb img{width:40px;height:40px;object-fit:cover;display:block}
.lt-fx-ficon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:#eef1f6;color:#5a6b85;line-height:1}
.lt-fx-ficon .fa{font-size:17px}
.lt-fx-ficon b{font-size:8.5px;letter-spacing:.03em;margin-top:2px}
.lt-fx-t-pdf{background:#fdecec;color:#c62828}
.lt-fx-t-word{background:#e8f0fe;color:#1a5fd0}
.lt-fx-t-excel{background:#e6f5ec;color:#1e7e45}
.lt-fx-t-ppt{background:#fdeee6;color:#c4531c}
.lt-fx-t-audio{background:#e3f6f4;color:#0f8a7e}
.lt-fx-t-video{background:#f1ebfd;color:#6b3fd6}
.lt-fx-meta{flex:1 1 auto;min-width:0}
.lt-fx-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;color:#1f2d3d!important;text-decoration:none!important;word-break:break-word;line-height:1.35}
.lt-fx-name:hover{color:#1d4fb4!important}
.lt-fx-sub{display:block;font-size:11.5px;color:#8f99a8;margin-top:2px}
.lt-fx-meta .mt-badge{vertical-align:1px}
.lt-fx-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;align-items:center;max-width:52%}
.lt-fx-actions .btn{border-radius:5px;font-weight:600}
.lt-fx-empty{display:block;text-align:center;font-size:12px;color:#98a0ad;padding:10px 12px 2px}
@media (max-width:600px){
    .lt-fx{padding:12px 12px 20px}
    .lt-fx-row{flex-wrap:wrap}
    .lt-fx-actions{max-width:none;width:100%;justify-content:flex-start;padding-left:52px}
    .lt-fx-card-head{flex-wrap:wrap}
    .lt-fx-card-title{flex:1 1 calc(100% - 48px)}
    .lt-fx-card-head .uploadifive-button.lt-fx-upload{margin-left:48px}
}