/* La Vivente Inventory — app-specific layout glue.
 * Mirrors la_vivente_pms's two-column production layout: a full-height row with
 * a no-padding nav card and a no-padding main card whose header is an in-card
 * light-blue top bar. Shared look (cards, tables, buttons) comes from DC UI Kit.
 *
 * IMPORTANT: this stylesheet is concatenated into the sitewide app-styles bundle
 * together with every other installed app's CSS. Any rule that targets a shared
 * class (dcui-*, lv-*, popup, …) MUST be scoped under .lvi-app (the SPA root,
 * see lv_inventory.js) or another lvi-* ancestor, or it will restyle the other
 * apps (this bit la_vivente_pms dropdowns once — bordered, full-width toggles). */

/* Mirrors la_vivente_pms's identical global so this app stands alone. Kept
   deliberately UNscoped: at (0,1,0) the later .lvi-module-sidebar / .lvi-main-card
   padding rules override it by source order; an .lvi-app prefix would out-rank
   them and strip the sidebar/main-card padding. Identical to the pms rule, so it
   cannot restyle other apps. */
.lv-no-padding { padding: 0; }

/* Portrait nav toggle + backdrop: desktop hides both (nav is always visible). */
.lvi-show-hide-nav { display: none; margin-bottom: 12px; }
.lvi-nav-overlay { display: none; }

/* Full-height two-column shell */
.lvi-shell {
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
}

.lvi-nav-col,
.lvi-main-col {
    height: 100%;
    position: relative; /* bounds root-level Data_Loaders to the main column, not the nav */
}

/* Module sidebar (nav) card */
.lvi-module-sidebar {
    height: 100%;
    padding: 20px 12px;
    /* Lay the card out as a column so the storage tree takes the remaining
       height and scrolls instead of overflowing the card. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lvi-ms-warehouse {
    margin-bottom: 16px;
}

/* Taller options panel than the 140px dropdown default: the warehouse list is
   the app's main navigation switch, so show more of it before scrolling.
   (The uncapped panel + single scroller this used to also set is now the generic
   behaviour for every create-footer dropdown — see the .lvi-dropdown-create block.) */
.lvi-ms-warehouse .lv-dropdown .lv-dropdown-scrollable {
    max-height: 240px;
}

.lvi-ms-warehouse-label {
    font-size: 24px;
    font-weight: 700;
}

.lvi-ms-nav,
.lvi-module-sidebar .dcui-navigation-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* These top links sit beside the storage-level tree and must read at the same
   weight as those rows. Drop the dc_ui_kit stepper bullet (.item::before) and
   the global 55px row height so spacing/size matches .lvi-tree-row. */
.lvi-module-sidebar .dcui-navigation-content .item::before {
    content: none;
    display: none;
}

/* Suppress the global dc_ui_kit selected-item triangle; this sidebar renders
   its own caret (.lvi-ms-caret), so the global ::after is a duplicate arrow. */
.lvi-module-sidebar .dcui-navigation-content .item.selected::after {
    content: none;
    display: none;
}

/* Drop the dc_ui_kit stepper connector line (the dotted vertical rule the
   global .dcui-navigation-content::after draws down the icon column). These
   top links aren't a stepper, so the leftover line is just visual noise. */
.lvi-module-sidebar .dcui-navigation-content::after {
    content: none;
    display: none;
}

/* Selectors include .dcui-navigation-content so they out-specify the global
   dc_ui_kit rules (.dcui-navigation-content .item{height:55px}, icon 20px),
   which are concatenated after this file in assets/app-styles.css. */
.lvi-module-sidebar .dcui-navigation-content .item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: auto;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #5a6472;
    font-size: 14px;
}

.lvi-module-sidebar .item:hover {
    background-color: #e6f5ff;
}

.lvi-module-sidebar .item.selected {
    background-color: #e6f5ff;
    color: #0096fd;
    font-weight: 600;
}

.lvi-module-sidebar .dcui-navigation-content .item .icon {
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.lvi-ms-caret {
    margin-left: auto;
    color: #0096fd;
}

.lvi-ms-tree {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #ededed;
    padding-top: 14px;
    /* Fill the leftover sidebar height; the head stays put and the tree scrolls. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.lvi-ms-tree .lvi-storage-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Slim scrollbar to match the list-table scroller. */
    scrollbar-width: thin;
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar-thumb {
    background: #c5ccd6;
    border-radius: 8px;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar-track {
    background: transparent;
}

.lvi-ms-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: #5a6472;
    font-size: 14px;
    cursor: pointer;
}

.lvi-ms-tree-item:hover {
    color: #0096fd;
}

/* Main content card */
.lvi-main-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* In-card top bar (title banner) */
.lvi-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    background-color: #d6ecf8;
}

/* The title is free text on the storage-level page (a level's name), and one
   typed without a space has no natural break: the block shrinks and the title
   wraps mid-word as a last resort, the same treatment as the detail band. */
.lvi-top-bar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.lvi-top-bar-icon {
    font-size: 40px;
    margin-right: 15px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: #1f2a37;
}

.lvi-top-bar-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lvi-top-bar-title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    overflow-wrap: anywhere;
}

.lvi-top-bar-sub {
    font-size: 16px;
    font-weight: 500;
    color: #1f2a37;
}

.lvi-top-bar-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Outline buttons stay outline on hover (the kit default fills them solid). */
.lvi-app .dcui-button.dcui-button-no-fill.lv-btn-no-fill:hover {
    background-color: rgba(0, 150, 253, 0.08);
    color: var(--dcui-primary-color);
}

/* Destructive actions (Delete Draft) in the same danger tone as .lvi-popup-delete.
   Two shapes: outline where it sits beside other actions in a detail topbar, and
   filled where it is the confirming button in a popup. */
.lvi-app .dcui-button.dcui-button-no-fill.lvi-btn-danger {
    color: #e5484d;
    border-color: #e5484d;
}
.lvi-app .dcui-button.dcui-button-no-fill.lvi-btn-danger:hover {
    background-color: #fdf1f1;
    color: #e5484d;
}
.lvi-app .dcui-button.lvi-btn-danger:not(.dcui-button-no-fill) {
    background-color: #e5484d;
    border-color: #e5484d;
}
.lvi-app .dcui-button.lvi-btn-danger:not(.dcui-button-no-fill):hover {
    background-color: #cf3c41;
    border-color: #cf3c41;
}

/* Header "Quick Actions" block (label above the action buttons) */
.lvi-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.lvi-quick-actions-label {
    font-size: 13px;
    font-weight: 600;
    color: #1f2a37;
}

/* Filter row under a section's sub-title (e.g. the overview Active/All-time toggle) */
.lvi-overview-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* Middle (content below the top bar) */
.lvi-middle {
    flex: 1 1 auto;
    min-height: 0;
    padding: 30px 15px;
    overflow: auto;
    /* Positioning context for the absolute Data_Loader overlay: without one it
       climbs to .lvi-shell and whites out the whole page (header, filters, nav)
       instead of just the loading region. Same reason on .lvi-table-scroll,
       .lvi-detail-main, .lvi-main-col and the activity-sidebar scroll parents. */
    position: relative;
}

.lvi-table-scroll {
    max-height: calc(100vh - 280px);
    position: relative; /* bounds the Data_Loader overlay to the list */
}

/* Manage bar (subtitle + search) */
.lvi-manage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lvi-sub-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Detail / create modals (LviShipmentDetail, LviOrderDetail, *CreateForm) */
.lvi-detail,
.lvi-form {
    min-width: 520px;
    max-width: 760px;
}

.lvi-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin-bottom: 8px;
}

.lvi-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lvi-activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lvi-activity-feed li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #eef0f4;
    font-size: 14px;
}

.lvi-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.lvi-activity-chip {
    border: 1px solid #d7dbe3;
    background: #fff;
    color: #4a5160;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 14px;
    cursor: pointer;
}

.lvi-activity-chip.active {
    background: #2f6df6;
    border-color: #2f6df6;
    color: #fff;
}

.lvi-activity-day {
    margin-top: 28px;
    margin-bottom: 18px;
}
/* No leading gap on the first group (it sits right under the filter header). */
.lvi-activity-day:first-child {
    margin-top: 0;
}

.lvi-activity-day-header {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
    margin: 4px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e8ec;
}

.lvi-activity-loadmore {
    border: 1px solid #d7dbe3;
    background: #fff;
    color: #2f6df6;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
}

.lvi-activity-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}

.lvi-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lvi-line-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lvi-app .lv-dropdown,
.lvi-app .lv-dropdown .dcui-dt-label {
    width: 100%;
}
.lvi-line-row .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
}
.lvi-line-row .dcui-form-group {
    margin: 0;
}

.lvi-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Inventory create forms adopt the pms bordered label/input row layout
   (lv-border-container + <lvi-form-row>). Size the card to the form column and
   strip the inner control chrome so lvi-dropdown / dc-input-field sit flush in each
   row — like the pms Create-Style form — and drop the now-redundant per-control
   labels (the row's left cell supplies the label). */
.lvi-form .lv-border-container {
    flex: none;
    margin-right: 0;
}
.lvi-form .lv-border-container .dcui-fld-label {
    display: none;
}
.lvi-form .lv-border-container .dcui-form-control,
.lvi-detail-formrow .dcui-form-control {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent;
    /* Keep the framework's default 10px left padding so the input value lines up
       with the dropdown label (which is also inset 10px) in the same row. */
}
.lvi-form .lv-border-container .dcui-form-group,
.lvi-detail-formrow .dcui-form-group {
    width: 100%;
    margin: 0;
}
/* The xp_users creation form (LviUserCreatePopup) is declared wherever the picker
   that opens it lives — which is inside these row scopes — but it is a foreign,
   self-contained modal, not a row in an inventory card. Without this it inherits the
   chrome-stripping above and renders borderless with its Role label hidden. Values
   come from the kit's own variables (dc-ui-kit.css .dcui-form-control) so they cannot
   drift from the standalone Users app. LviFieldRenderer is why this is CSS rather
   than moving the markup: its whole template IS row content, so it has no scope to
   escape to. */
.lvi-app .user-popup .dcui-fld-label {
    display: block;
}
.lvi-app .user-popup .dcui-form-control {
    border: 1px solid var(--dcui-line-color) !important;
    background-color: #fff;
}
.lvi-app .user-popup .dcui-form-control:focus {
    border-color: var(--dcui-primary-color) !important;
    box-shadow: 0 0 7px rgba(86, 179, 190, 0.15) !important;
}
/* Every value in a bordered card starts on one line, 10px inside the row: that is
   where an input's and a dropdown label's own padding already puts their text, so
   the rules below bring the values that carry no control chrome into the column.

   Read-only values (plain text, avatar cells) otherwise sit flush against the
   row's 15px padding, 10px left of every editable row above and below them. */
.lvi-form .lv-border-container .lvi-field-readonly,
.lvi-form .lv-border-container .lvi-user-cell,
.lvi-detail-formrow .lvi-field-readonly,
.lvi-detail-formrow .lvi-user-cell {
    padding-left: 10px;
}
/* A user value is an avatar followed by a name. The dropdown chip spaces the two
   with the avatar's own m-r-5, so a hand-built cell must not add its wider default
   gap on top — otherwise the picker row and the read-only row above it name their
   users at different x. */
.lvi-form .lv-border-container .lvi-user-cell,
.lvi-detail-formrow .lvi-user-cell {
    gap: 5px;
}
/* The datepicker input ships its own border/fill (--dcui-calendar-input-*);
   inside a bordered row it sits flush like every other control. It also leads
   with its calendar icon (hence the 35px left padding), which would push the one
   date value in a card 25px right of every other — so the icon moves to the
   trailing edge, where the dropdown already carries its caret, and the date reads
   in the same column as the text beside it. */
.lvi-form .lv-border-container .dcui-calendar .input-field input,
.lvi-detail-formrow .dcui-calendar .input-field input {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    padding-left: 10px;
    padding-right: 34px;
}
.lvi-form .lv-border-container .dcui-calendar .input-field i.datepicker,
.lvi-detail-formrow .dcui-calendar .input-field i.datepicker {
    left: auto;
    right: 12px;
}
.lvi-form .lv-border-container .dcui-calendar,
.lvi-detail-formrow .dcui-calendar {
    width: 100%;
}

/* Textareas never resize horizontally (it breaks the fixed form column); inside
   the bordered create-form rows the row supplies the height, so no resizing at
   all there. */
.lvi-app textarea {
    resize: vertical;
}
.lvi-form .lv-border-container textarea,
.lvi-detail-formrow textarea {
    resize: none;
}
/* Single-line inputs are vertically centered in a taller min-height row, so their
   fill gains ~10px of breathing room above and below. A textarea instead sizes its
   own value cell to its height, leaving its fill flush against the row's top and
   bottom edges. Give it matching vertical margin so it reads consistently inset. */
.lvi-detail-formrow textarea {
    margin: 10px 0;
}

/* The framework's `.popup` ships `min-width: 650px`, and min-width beats BOTH
   `width` and `max-width` in the CSS sizing algorithm — so below 650px the card is
   wider than the screen no matter what the rules under this comment ask for.
   lv_inventory only escaped that because la_vivente_pms's media.css
   (`.popup { min-width: auto !important }`, max-width 961px) happens to share the
   concatenated bundle: 962-1024px was left broken, and the rest was hostage to
   another app staying installed. Own it here, from the same breakpoint the layout
   already goes responsive at. Desktop keeps the framework floor deliberately —
   dropping it there would resize every dialog on screens that can afford 650px. */
@media (max-width: 1024px) {
    .lvi-app .popup {
        min-width: 0;
    }
}

/* Constrain the create popups to the form width — the default .popup is
   block-level and stretches to max-width:95%, leaving the form card stranded in
   a huge empty modal. We have no second (gallery) column, so size to the form. */
.popup.lvi-create-popup {
    width: 760px;
    /* The framework .popup sets overflow:hidden (for its rounded corners), which
       clips the dropdown panel when it opens near the modal's bottom edge. Allow
       it to extend past the modal instead of being cut off; the popup-container
       remains the scroll-container for tall forms. */
    overflow: visible;
}

/* Top-anchor the create popups (like la_vivente_pms and the framework default,
   margin: 50px auto) rather than vertically centering them. The .popup-container
   is overflow-y:auto, so tall forms still scroll without clipping the top. */
.popup.lvi-create-popup {
    margin: 50px auto;
}
.lvi-create-popup .lvi-form {
    max-width: none;
    min-width: 0;
}

/* Confirmation popup (Change Stage). Same centering treatment as the create
   popups, but sized down to a compact confirm dialog instead of full width. */
.popup.lvi-confirm-popup {
    width: 440px;
    margin: 50px auto;
}

/* Put Away manage dialog (LviShipmentPutawayPopup): move-request history + a
   variable number of allocation rows can make this taller than the viewport.
   Left to the framework, .popup-container scrolls the *whole card* (title, body
   and footer as one unit) inside the page — so the "Create Putaway" footer scrolls
   off-screen. Cap the card to the viewport instead and scroll only its body, so the
   title stays a fixed header and the actions stay pinned. The dropdown panel is a
   fixed-position popper (LviDropdown.positionPanel) so overflow:hidden here never
   clips it. */
.popup.lvi-putaway-manage-popup {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px); /* .lvi-confirm-popup margin: 50px top+bottom */
    overflow: hidden;
}
/* The unclassed DcPopup wrapper around the content slot must pass the height
   constraint down to .lvi-form so the inner scroll region can bound itself. */
.lvi-putaway-manage-popup > div:has(> .lvi-form) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-putaway-manage-popup .lvi-form {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-putaway-manage-popup .lvi-putaway-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Room so a scrollbar doesn't overlap the tables' right edge. */
    margin-right: -4px;
    padding-right: 4px;
}
.lvi-putaway-manage-popup .lvi-form-actions {
    flex: 0 0 auto;
}

/* Full detail page (LviShipmentDetailPage / LviOrderDetailPage) */
.lvi-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lvi-detail-page-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
}

.lvi-back-link { color: #0096fd; cursor: pointer; font-weight: 600; white-space: nowrap; }
/* Ancestor crumbs on the storage page are level names: each one clips with an
   ellipsis (full name on hover) so a long zone cannot push the current crumb
   off the bar, while the current crumb wraps. */
.lvi-detail-page-bar .lvi-back-link { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.lvi-breadcrumb-sep { color: #c4ccd6; }
.lvi-breadcrumb-current { color: #6b7585; min-width: 0; overflow-wrap: anywhere; }

.lvi-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #f3f9ff;
    border-bottom: 1px solid #e6eef6;
}

/* Free text sets the title (a shipment name, an item name), and typed without a
   space it has no natural break: the block must shrink (a flex child's min-width
   defaults to its longest word) and the title then wraps mid-word as a last
   resort, rather than running the band out past the page. */
.lvi-detail-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.lvi-detail-topbar-left > div:last-child { min-width: 0; }
.lvi-detail-topbar-icon {
    width: 44px;
    height: 44px;
    /* The title beside it is allowed to shrink; the badge is not. */
    flex: 0 0 auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0096fd;
    color: #fff;
    font-size: 20px;
}
/* With a featured image the badge becomes the image: the blue plate would only
   show as a rim around it, and the glyph it was tinting is gone. */
.lvi-detail-topbar-icon.is-image { background: #f1f3f7; color: #b6becb; }
.lvi-detail-topbar-icon img { width: 100%; height: 100%; object-fit: cover; }
.lvi-detail-topbar-title { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
/* The bracketed half of a SKU-first title recedes, the way the activity feed
   writes `Name (Kind #id)` and the line lists write `SKU (Name)`. */
.lvi-detail-topbar-title .lvi-muted { font-weight: 400; font-size: 18px; }
.lvi-detail-topbar-sub { font-size: 13px; color: #8a94a6; overflow-wrap: anywhere; }
/* Resource status label, stacked directly under the detail title. */
.lvi-detail-topbar-status { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }
/* Resource action buttons (+ optional stage-change select) in the title band. */
.lvi-detail-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lvi-stage-select { width: 190px; }

.lvi-section-title { display: block; margin: 0 0 12px; overflow-wrap: anywhere; }

.lvi-detail-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.lvi-detail-main {
    min-width: 0;
    padding: 20px;
    overflow: auto;
    /* Reserve the scrollbar's width on both edges so the 20px padding reads the
       same left and right, and so content doesn't shift when the pane grows past
       one screen and the scrollbar appears. */
    scrollbar-gutter: stable both-edges;
    position: relative; /* bounds the Data_Loader overlay to the detail pane */
}
/* The pms stylesheet (which loads sitewide) gives every .lv-border-container a
   25px right margin for its two-column forms. Detail-page cards are full width,
   so that margin only pushes their right edge 25px inside the pane's padding —
   the create forms already drop it the same way. */
.lvi-detail-main .lv-border-container { margin-right: 0; }

/* Read-only stage stepper (LviStageGraph) — adapted from pms ProcessStageNavigation */
.lvi-stage-graph {
    border-right: 1px solid #eef0f4;
    padding: 20px;
}

.lvi-stage-graph-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a6;
    margin-bottom: 14px;
}

.lvi-stage-list {
    position: relative;
}

.lvi-stage-list::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 13px;
    width: 0;
    border-left: 2px dotted #d9dee6;
    z-index: 0;
}

.lvi-stage-list .item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.lvi-stage-node {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #e2e6ec;
    color: #c4ccd6;
    font-size: 12px;
}

.lvi-stage-label {
    font-size: 14px;
    color: #6b7585;
}

/* Stage node states — vocabulary + colors mirror the pms process-navigator
   (success / current / skipped / current_completed / current_rejected /
   where_rejected) so statuses read at a glance. The shipment flow uses a subset
   (success/current/upcoming/terminal); the rest are styled for reuse. */
.lvi-stage-list.busy { opacity: 0.6; pointer-events: none; }

.lvi-stage-list .item.clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}
.lvi-stage-list .item.clickable:hover { background-color: #e6f5ff; }
.lvi-stage-list .item.clickable:hover .lvi-stage-label { color: #0096fd; }

.lvi-stage-list .item.success .lvi-stage-node {
    border-color: #21a83c;
    background-color: #21a83c;
    color: #fff;
}
.lvi-stage-list .item.success .lvi-stage-label { color: #3a4452; }

.lvi-stage-list .item.current .lvi-stage-node {
    border-color: #0096fd;
    background-color: #0096fd;
    color: #fff;
}
.lvi-stage-list .item.current .lvi-stage-label { color: #0096fd; font-weight: 600; }

.lvi-stage-list .item.skipped .lvi-stage-node {
    border-color: #a3a3a3;
    background-color: #a3a3a3;
    color: #fff;
}
.lvi-stage-list .item.skipped .lvi-stage-label { color: #6b7585; }

.lvi-stage-list .item.current_completed .lvi-stage-node {
    border-color: #16b10b;
    background-color: #16b10b;
    color: #fff;
}
.lvi-stage-list .item.current_completed .lvi-stage-label { color: #16b10b; font-weight: 600; }

.lvi-stage-list .item.current_rejected .lvi-stage-node,
.lvi-stage-list .item.where_rejected .lvi-stage-node,
.lvi-stage-list .item.terminal .lvi-stage-node {
    border-color: #f15f5f;
    background-color: #f15f5f;
    color: #fff;
}
.lvi-stage-list .item.current_rejected .lvi-stage-label,
.lvi-stage-list .item.where_rejected .lvi-stage-label,
.lvi-stage-list .item.terminal .lvi-stage-label { color: #f15f5f; }

.lvi-confirm-text { font-size: 14px; color: #3a4452; }
/* Nothing moved yet reads as a quiet zero, not a figure competing with Required. */
.lvi-app .lvi-line-moved.lvi-muted { color: #9aa3b2; }

/* A confirm dialog that asks for a value, not just a yes. The label sits above a
   full-width control and both start at the dialog's own left edge — LviFormRow is
   a create-form row whose 30/70 layout is scoped to `.lvi-form`, so it does not
   belong here. */
.lvi-app .lvi-confirm-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.lvi-app .lvi-confirm-field-label { font-size: 13px; color: #6b7488; }
.lvi-app .lvi-confirm-field input { width: 100%; box-sizing: border-box; }

/* Tabbed activity/comments sidebar — reuses pms .lv-tabs + comment/activity
   classes (global styles); these rules lay it out in the page's 3rd column. */
.lvi-activity-sidebar {
    display: flex;
    flex-direction: column;
    /* Fill the column-flex .dcui-csp-body so the comment list can grow and the
       input stays pinned to the bottom even with few/no comments. */
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border-left: 1px solid #eef0f4;
    background: #fff;
    padding: 16px;
}
.lvi-sidebar-header { margin-bottom: 8px; }
.lvi-activity-sidebar .lvi-sidebar-tabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Make the tab panel + scroll containers fill the column height */
.lvi-activity-sidebar .dcui-bt-panel { flex: 1 1 auto; min-height: 0; display: flex; }
.lvi-activity-sidebar .dcui-bt-tab.active { flex: 1 1 auto; min-height: 0; width: 100%; }
.lvi-activity-sidebar .full-height { height: 100%; }
.lvi-activity-sidebar .lv-task-comment-container-parent,
.lvi-activity-sidebar .lv-task-activity-container-parent {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    position: relative; /* bounds the tab's Data_Loader to the sidebar panel */
}
/* The panel is narrow, so the feed must wrap rather than scroll sideways. The row
   is a flex box (dot + sentence); its text child defaults to min-width:auto and so
   refuses to shrink below its longest word — a long SKU or level name then pushed
   the whole column wide. overflow-wrap:anywhere lets that last-resort break happen
   inside the row. (Ordinary wrapping is the sentence's own job: it joins its spans
   with real spaces, never &nbsp; — see LviActivitySentence.) */
.lvi-activity-sidebar .lv-task-activity-item > * {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* …but a date is one word to a reader: without this the column's last-resort
   break lands inside it and the row ends "on 2026-08-" / "25 at 12:00 PM". */
.lvi-activity-sidebar .lvi-feed-stamp { white-space: nowrap; }

@media (max-width: 900px) {
    .lvi-detail-body { grid-template-columns: 1fr; }
    .lvi-stage-graph { border-right: none; border-bottom: 1px solid #eef0f4; }
    .lvi-detail-main { border-bottom: 1px solid #eef0f4; }
    .lvi-activity-sidebar { border-left: none; min-height: 380px; }
}

@media (max-width: 600px) {
    .lvi-detail,
    .lvi-form { min-width: 0; }
    .lvi-detail-grid { grid-template-columns: 1fr; }
    .lvi-line-row { grid-template-columns: 1fr 1fr; }
}

/* Overview stat cards. minmax(0, 1fr) rather than 1fr: a bare 1fr track never
   shrinks below its content, so one long nowrap value ("6 SomeLongUnitName")
   would grow its card and squeeze the others. Equal tracks, and the value clips. */
.lvi-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* 3-card variant (e.g. item detail Stocks tab): wider columns so values like
   "Rs. 2,600.00" stay on one line instead of wrapping in a narrow 1/4 column. */
.lvi-stat-grid--3up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lvi-stat-icon {
    color: #0096fd;
    margin-bottom: 8px;
}

/* One line per value; a value wider than its card is clipped with an ellipsis
   and the card's title carries the full text on hover. */
.lvi-stat-value {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A value carrying several unconvertible units (222 Kg / 277 Meter) reads as one
   figure per line. Tighter leading than the single-line case, so two lines still
   sit as one value rather than as two stacked headings. */
.lvi-stat-value--lines {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.lvi-stat-value--lines span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lvi-stat-label {
    color: #8a94a3;
    font-size: 14px;
    /* The label can name a level ("Total Available at Rack A1"), and a level
       name typed without a space has no natural break: wrap it mid-word
       rather than let it run past the card, and stop at two lines — the
       heading above the cards already spells the level out in full, and the
       card's title carries the rest on hover. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lvi-segmented-toggle { display: inline-flex; gap: 4px; font-size: 13px; line-height: 1.2; cursor: pointer; user-select: none; }
.lvi-segmented-toggle span { padding: 3px 10px; border-radius: 999px; color: #8a94a6; background: #f1f3f7; }
.lvi-segmented-toggle span.is-on { color: #fff; background: #0096fd; }

.lvi-util-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; padding: 8px 5px; }
.lvi-util-name { font-size: 14px; color: #3a4452; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Overview lower panels: utilization + recent movements side by side, each with
   its own scroll region capped to a matching height so the page itself stays put
   and the user scrolls the rows instead. */
.lvi-overview-panels {
    display: grid;
    /* Utilization is the primary column; the Coming-Soon movements panel is narrower. */
    grid-template-columns: 6fr 4fr;
    gap: 18px;
    align-items: start;
}
.lvi-overview-panel { min-width: 0; }
.lvi-overview-card { overflow: hidden; }
.lvi-overview-scroll {
    max-height: clamp(260px, calc(100vh - 430px), 560px);
    overflow-y: auto;
    /* Let a wide movements table scroll sideways instead of wrapping its cells. */
    overflow-x: auto;
    /* Slim scrollbar to match the list-table / storage-tree scrollers. */
    scrollbar-width: thin;
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-overview-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.lvi-overview-scroll::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 8px; }
.lvi-overview-scroll::-webkit-scrollbar-track { background: transparent; }
/* Pin the movements header against its own scroll region. */
.lvi-overview-scroll .lvi-movements-table thead th { top: 0; }

/* Keep every movement cell on one line; the container scrolls horizontally when
   the columns don't fit. Overrides the .lvi-requested-items 60%-first-column rule
   (meant for order forms) which otherwise crushes these columns and wraps them. */
.lvi-movements-table th,
.lvi-movements-table td { white-space: nowrap; }
.lvi-movements-table th:first-child,
.lvi-movements-table td:first-child { width: auto; }
/* This raw table isn't wrapped in the DcTable `.dcui-table` element, so it never
   inherits the framework row rule. Add the same hairline row separator (and hover)
   the app's list tables get, so the rows read as distinct. */
.lvi-movements-table tbody td { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.lvi-movements-table tbody tr:last-child td { border-bottom: 0; }
.lvi-movements-table tbody tr:hover { background: #f6f9fc; }

/* Tablet: three stat columns, slightly tighter banner. */
@media (max-width: 1200px) {
    .lvi-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet & below: stack the two overview panels and let each size to content
   (a capped scroll region per panel still applies, but they no longer compete
   for half the width). */
@media (max-width: 1024px) {
    .lvi-overview-panels { grid-template-columns: 1fr; gap: 22px; }
    .lvi-overview-scroll { max-height: clamp(220px, 50vh, 420px); }
}

/* Tablet & portrait: nav collapses into a slide-in overlay toggled by a button.
 * (matches la_vivente_pms, which switches to the "Show Stages" toggle on
 * portrait/tablet widths rather than squeezing the nav into a column.) */
@media (max-width: 1024px) {
    .lvi-show-hide-nav { display: block; }

    .lvi-shell { height: auto; overflow: visible; }
    .lvi-main-col { height: auto; width: 100%; }
    .lvi-main-card { height: auto; }
    .lvi-table-scroll { max-height: none; }

    /* Off-canvas nav: parked off the left edge, slides in when .show is set.
     *
     * The slide animates `left`, NOT `transform`, and that is load-bearing: a
     * transformed element becomes the containing block for its position:fixed
     * descendants, and this column hosts the Add/Edit Warehouse and Add Storage
     * Level popups (module-sidebar.js). With a transform here their
     * .popup-overlay stopped being viewport-sized and collapsed onto this 280px
     * column, rendering the modal pinned to the left edge and clipped.
     * `left: -280px` is the column's own width — max-width:85% only ever makes it
     * narrower, so it is always fully parked off-screen. */
    .lvi-nav-col {
        position: fixed;
        top: 0;
        left: -280px;
        z-index: 1001;
        height: 100%;
        width: 280px;
        max-width: 85%;
        padding: 12px;
        background: #fff;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
        transition: left 0.25s ease;
        overflow-y: auto;
    }
    .lvi-nav-col.show { left: 0; }

    .lvi-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.4);
    }
}

/* Phones: stack the banner + manage bar, tighten padding. */
@media (max-width: 768px) {
    .lvi-middle { padding: 20px 12px; }

    .lvi-top-bar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .lvi-top-bar-icon { font-size: 30px; }
    .lvi-top-bar-title { font-size: 24px; }
    .lvi-top-bar-actions { width: 100%; flex-wrap: wrap; }

    .lvi-manage-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small phones: single-column stats. */
@media (max-width: 480px) {
    .lvi-stat-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Ported from la_vivente_pms so lv_inventory is self-contained (does not depend
 * on pms's globally-loaded stylesheet). Form-layout classes used by LviFormRow,
 * and the LviDropdown (DcDropdown) cosmetics. Generic class names are scoped
 * under .lvi-form to avoid colliding with pms's global copies.
 * ------------------------------------------------------------------------- */

/* Bordered label/input form (lv-border-container + <lvi-form-row>). */
.lvi-form .lv-border-container {
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
}
.lvi-form .lv-form-container-row {
    display: flex;
    border-bottom: 1px solid var(--dcui-line-color);
}
.lvi-form .lv-form-container-row:last-child {
    border-bottom: 0;
}
.lvi-form .lv-form-container-row .right {
    width: 30%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--dcui-line-color);
    /* No fill — pms label cells are unfilled, and every inventory form (pages
       and popups) shares this look. */
}
.lvi-form .lv-form-container-row .left {
    width: 70%;
}
.lvi-form .lv-border-container .lv-border-container-row {
    padding: 10px 15px;
    display: flex;
    min-height: 56px;
    align-items: center;
}
/* A multiline field (Notes) is several lines tall, so a vertically centred label
   drifts to the middle of the box it names — it should sit on the field's first
   line instead. :has(textarea) picks out only those rows; every single-line row
   keeps the centring above. 15px is where the textarea's first line starts in both
   scopes (create: the field cell's 10px padding + the control's 5px; detail: the
   control's 10px margin + that same 5px), and the label's line-height matches the
   control's so the two share a baseline instead of landing a few px apart. Only
   above the stacking breakpoint: below it the label sits above its field, where
   none of this applies. */
@media (min-width: 601px) {
    .lvi-form .lv-form-container-row:has(textarea) > .right,
    .lvi-detail-formrow .lv-form-container-row:has(textarea) > .right {
        align-items: flex-start;
    }
    .lvi-form .lv-form-container-row:has(textarea) > .right > .lv-border-container-row,
    .lvi-detail-formrow .lv-form-container-row:has(textarea) > .right > .lv-border-container-row {
        /* The label cell keeps its 56px min-height, so its own centring would drop
           the text a further ~4px down that box — top-align it too. */
        align-items: flex-start;
        padding-top: 15px;
        line-height: 1.6;
    }
}
/* Narrow screens: stack the bordered form's label/field rows.
   The 30/70 split needs ~450px of row to hold a two-word label; below that the
   label cell's content is wider than its own column and spills across the divider
   onto the field (the required "*" ends up sitting on the border). Label over
   field reads correctly at any width.

   This block must stay AFTER the .right/.left width rules above: it matches at the
   same specificity, so source order is what lets it win. */
@media (max-width: 600px) {
    .lvi-form .lv-form-container-row {
        flex-direction: column;
        align-items: stretch;
    }
    .lvi-form .lv-form-container-row .right,
    .lvi-form .lv-form-container-row .left {
        width: 100%;
    }
    .lvi-form .lv-form-container-row .right {
        border-right: 0;
        border-bottom: 1px solid var(--dcui-line-color);
    }
    /* The 56px row height is sized for a label BESIDE its field; stacked, it just
       doubles the card's height. */
    .lvi-form .lv-border-container .lv-border-container-row {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* 30px of side padding out of a ~370px card is most of the content width. */
    .lvi-app .popup {
        padding: 22px 16px;
    }
    .lvi-app .popup .popup-close-container {
        right: 6px;
    }

    /* Three buttons (Delete / Cancel / Confirm) no longer fit on one line. */
    .lvi-form-actions,
    .lvi-warehouse-popup .lvi-wh-actions {
        flex-wrap: wrap;
    }
}

.lvi-form .lv-error-msg-text {
    color: #d30505;
    font-size: 12px;
}

/* LviDropdown (.lv-dropdown wraps DcDropdown). */
/* Show the panel flat — no open animation. Two dc-ui-kit sources animate it and
   both must go now that we JS-position it as a fixed popper:
   1. `animation: dcuiAnimateSubMenu` (scale .95→1 / fade) — read as a jump.
   2. `transition: all .2s` on the panel — our inline position/size writes would
      otherwise tween, so the panel visibly slides/resizes into place.
   The base panel is opacity:0 (the animation's `forwards` used to hold it at 1),
   so pin opacity:1 or it would be invisible without the animation. */
.lvi-app .lv-dropdown .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}
/* Fallback cap so no inventory dropdown menu is ever unbounded in contexts
   without a more specific rule (activity filters, inline item bars, …). The
   scoped .lvi-form / .lvi-ms-warehouse / .lvi-detail-* rules below win by
   specificity where a different height is intended. */
.lvi-app .lv-dropdown .lv-dropdown-scrollable {
    max-height: 260px;
}
/* An unset dropdown shows its placeholder, so it should read as unset — the same
   grey the kit gives an input's ::placeholder (#bfbfbf, dc-ui-kit.css). The kit
   renders the dropdown's label slot as ordinary text, so a bin picker waiting to
   be filled in was as black as one already answered, and a row mixing the two
   (Qty / Unit / Receiving Bin) showed one prompt in two colours. */
.lvi-app .lv-dropdown .lvi-dropdown-placeholder {
    color: #bfbfbf;
}
/* A long selected label (a user's name) must not push the caret off the field:
   the kit's label is nowrap, so the text clips with an ellipsis. The flex
   wrapper needs min-width:0 to shrink at all; the avatar keeps its size. */
.lvi-app .lv-dropdown .dcui-dt-label > .dcui-flex-item { min-width: 0; }
.lvi-app .lv-dropdown .dcui-dt-label > .dcui-flex-item > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Keyboard highlight in a dropdown panel (LviDropdown's activeIndex). The same
   wash the kit gives a hovered row (.dcui-dropdown-menu > li > a:hover), on the
   same element, so arrowing down the list reads exactly like running the pointer
   down it — and so the two never disagree about which row Enter would take. */
.lvi-app .lv-dropdown .dcui-dropdown-menu > li.is-active > a {
    background-color: #eee;
}
.lvi-form .lv-dropdown li.selected {
    background-color: #d7efff;
}
/* Two-line dropdown option (LviDropdown `subKey`): the label with a muted second
   line beneath — e.g. a putaway destination bin under its "Zone > Rack" parent
   path. Only rendered for options carrying a subKey value, so single-line
   dropdowns are unaffected. Scoped to the shared dropdown. */
.lvi-app .lv-dropdown .lvi-dropdown-option-sub {
    color: var(--lvi-muted, #8a8f98);
    font-size: 12px;
    margin-top: 2px;
}
/* Two-line dropdown CHIP (LviDropdown `subInChip`): the closed field repeats the
   selected option's sub line beneath its label, so a scope reading "Rack 1" still
   says which warehouse it is in without the panel being reopened. The kit sizes
   .dcui-dt-label as one fixed-height line — height, a matching line-height, and a
   caret centred by a line-height of its own — so the variant re-does all three
   rather than letting the second line run out of the box. */
.lvi-app .lv-dropdown-two-line .dcui-dt-label {
    height: auto;
    line-height: 1.3;
    padding-top: 6px;
    padding-bottom: 6px;
}
.lvi-app .lv-dropdown-two-line .dcui-dt-label:after {
    top: 50%;
    bottom: auto;
    line-height: 1;
    transform: translateY(-50%);
}
.lvi-app .lv-dropdown-two-line .lvi-dropdown-chip {
    min-width: 0;
}
/* A bin's path can outrun a filter field, and the kit sets nowrap on the label:
   clip each line rather than pushing the caret off the control. */
.lvi-app .lv-dropdown-two-line .lvi-dropdown-chip > * {
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvi-app .lv-dropdown-two-line .lvi-dropdown-chip-sub {
    color: var(--lvi-muted, #8a8f98);
    font-size: 12px;
    margin-top: 2px;
}
/* Keep the deselect (x) off the option's own text. dc-ui-kit positions
   .dcui-select-dropdown-close absolutely over the row (right: 5px, plus a
   translate(-50%,-50%) that drags it a further half-width inward), so it reserves
   no width and the label is free to run underneath it. That is not a corner case
   here: positionPanel() clamps the panel to the trigger's width — ~170px in a
   command bar — and these labels name both bin and batch ("Alpah Rack 1 · Stock
   #346"), so they wrap to the full width every time and printed straight through
   the x. Lay the row out as a flex line instead and let the x sit at its end as a
   real item. Scoped to LviDropdown's own rows, so the kit's plain single-line
   options elsewhere keep their existing (absolute) treatment. */
.lv-dropdown .lvi-dropdown-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* min-width: 0 — without it the flex item refuses to shrink below its content's
   intrinsic width, which would push the x out past the row's right edge instead
   of wrapping the label. */
.lv-dropdown .lvi-dropdown-option-row > .dcui-flex-item {
    flex: 1 1 auto;
    min-width: 0;
}
.lv-dropdown .lvi-dropdown-option-row .lvi-dropdown-option {
    min-width: 0;
}
.lv-dropdown .lvi-dropdown-option-row .dcui-select-dropdown-close {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
}
.lvi-form .lv-dropdown .lv-dropdown-scrollable {
    max-height: 140px;
}
/* Detail-page dropdowns live under .lvi-detail-* (not .lvi-form), so their scroll
   pane would otherwise inherit the page's tall .scroll-container cap
   (calc(100vh - 320px)) — far too long for a menu. Give them a compact cap; the
   fixed-popper JS shrinks it further only when near a viewport edge. */
.lvi-detail-main .lv-dropdown .lv-dropdown-scrollable,
.lvi-detail-page .lv-dropdown .lv-dropdown-scrollable {
    max-height: 260px;
}
.lvi-form .lv-dropdown .dcui-dropdown-panel {
    width: 100%;
}
.lvi-form .lv-dropdown.disabled.dcui-select-dropdown .dcui-dt-label {
    cursor: inherit;
}
.lvi-form .lv-dropdown .has-search-field {
    padding: 5px 7px 5px;
}
/* Opt-in "Create New" footer (createLabel): the option list scrolls while the footer
   stays pinned to its bottom. Scoped to panels that have it.

   The footer sticks to its nearest scrolling ancestor, which is the INNER list
   (LviDropdown passes panel_class="scroll-container lv-dropdown-scrollable", and
   .scroll-container carries overflow-y: auto). So the inner list must be the only
   scroller: capping the outer panel too made it clip the footer — pinned correctly
   at the inner list's bottom — right out of view. Uncapping the panel also drops the
   second scrollbar, and detaches the list height from the page-level
   `.lvi-detail-page .scroll-container { max-height: calc(100vh - 320px) }` rule that
   otherwise leaks in via the shared .scroll-container class. */
.lv-dropdown .dcui-dropdown-panel:has(.lvi-dropdown-create) {
    max-height: none;
}
.lv-dropdown .dcui-dropdown-panel:has(.lvi-dropdown-create) .lv-dropdown-scrollable {
    max-height: 240px;
}
.lv-dropdown .lvi-dropdown-create {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.lv-dropdown .lvi-dropdown-create a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #2563eb;
    cursor: pointer;
}
.lv-dropdown .lvi-dropdown-create:hover {
    background: #f3f4f6;
}
.lvi-form .lv-border-container-row .dcui-select-dropdown,
.lvi-form .lv-border-container-row .dcui-select-dropdown .dcui-dt-label {
    width: 100%;
}
/* The field's flex-1 wrapper defaults to min-width:auto, so a control whose
   content is wider than the row (a chip naming a long user) grew it past the
   row's edge instead of letting the control clip. */
.lvi-form .lv-border-container-row > .dcui-flex-1 { min-width: 0; }
.lvi-form .dcui-form-control.lv-input-filed-no-outline,
.lvi-form .dcui-icon-control.lv-input-filed-no-outline {
    border: 0 !important;
}
.lvi-form .dcui-form-control.lv-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

/* Autofilled inputs: the browser overrides `color` with its own (near-black)
   -webkit-text-fill-color, so autocompleted values render darker than typed text
   and dropdown labels. Pin the fill colour to the muted body colour so an
   autocompleted value reads the same grey as everything else. (The framework
   already forces a white autofill background via box-shadow.) */
.lvi-app .dcui-form-control:-webkit-autofill,
.lvi-app .dcui-form-control:-webkit-autofill:hover,
.lvi-app .dcui-form-control:-webkit-autofill:focus,
.lvi-app .dcui-form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--dcui-body-color);
    caret-color: var(--dcui-body-color);
}

/* Standalone dropdowns (filters, pickers, popup selects) render the closed
   .dcui-dt-label with no border or background by default — so at rest they read as
   plain text and are hard to spot as a control. Give them the same outlined,
   white-fill chrome as a text input (matching the pms select look). */
.lvi-app .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
}
/* Inside a bordered form row the dropdown stays flush — the row card supplies the
   border, so a per-control outline would double it up. */
.lvi-form .lv-border-container .lv-dropdown .dcui-dt-label,
.lvi-detail-formrow .lv-dropdown .dcui-dt-label {
    border: 0;
    background-color: transparent;
}

/* Interaction fills, matching pms (which just inherits the dc_ui_kit defaults):
   hovered/open dropdown labels and hovered datepicker inputs fill #eee, disabled
   controls keep their gray. The outline/flush overrides above out-rank the kit's
   own rules in the concatenated bundle, so re-assert each fill here. */
.lvi-app .lv-dropdown .dcui-dt-label:hover,
.lvi-app .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label,
.lvi-form .lv-border-container .lv-dropdown .dcui-dt-label:hover,
.lvi-form .lv-border-container .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}
.lvi-form .lv-border-container .dcui-calendar .input-field:hover input {
    background-color: #eeeeee;
}
.lvi-app .dcui-form-control:disabled,
.lvi-form .lv-border-container .dcui-form-control:disabled,
.lvi-detail-formrow .dcui-form-control:disabled {
    background-color: #ebebeb;
}
.lvi-app .lv-dropdown.disabled .dcui-dt-label,
.lvi-app .lv-dropdown.disabled .dcui-dt-label:hover,
.lvi-form .lv-border-container .lv-dropdown.disabled .dcui-dt-label,
.lvi-detail-formrow .lv-dropdown.disabled .dcui-dt-label {
    background-color: #ebebeb;
}
.lvi-form .lv-border-container .dcui-calendar .input-field input:disabled,
.lvi-detail-formrow .dcui-calendar .input-field input:disabled {
    background-color: #ebebeb;
}
/* Custom-chrome dropdowns opt out: the sidebar warehouse selector reads as a
   heading, and the split "create request" menu button carries its own styling. */
.lvi-ms-warehouse .lv-dropdown .dcui-dt-label,
.lvi-app .lvi-create-menu .dcui-dt-label {
    border: 0;
    background-color: transparent;
}

/* ==========================================================================
   Add Warehouse popup (LviWarehouseCreatePopup) — a compact, self-contained modal
   with plain left labels + outlined inputs. Sized explicitly so it renders the same
   regardless of where it is opened from (shipment create form vs sidebar selector);
   the framework .popup otherwise stretches to max-width:95% and varies by context.
   ========================================================================== */
.popup.lvi-warehouse-popup {
    width: 520px;
    max-width: 95%;
    margin: 50px auto;
    /* let the manager dropdown panel extend past the modal instead of clipping */
    overflow: visible;
}
/* The popup body hosts the shared bordered form (lv-border-container +
   <lvi-form-row>, styled via the .lvi-form scope like the create pages); only
   size it to the popup — .lvi-form's page min-width would overflow the modal. */
.lvi-warehouse-popup .lvi-form {
    min-width: 0;
    margin-top: 6px;
}
.lvi-warehouse-popup .lvi-wh-error {
    color: #d30505;
    font-size: 13px;
    margin: -6px 0 12px;
}
.lvi-warehouse-popup .lvi-wh-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
/* Back link above a popup's title, shown when the popup was opened as a detour from
   another popup (item form ← placement / picker). The flow is sibling popups, never
   a stack, so nothing is visible underneath — this link is the only cue that there is
   somewhere to return to. Sits left of the absolutely-positioned ✕, so they don't
   collide. */
.lvi-warehouse-popup .lvi-popup-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--dcui-primary-color);
    font-size: 13px;
    cursor: pointer;
}
.lvi-warehouse-popup .lvi-popup-back:hover {
    text-decoration: underline;
}
/* Edit-mode Delete sits alone at the bottom-left of the action row, in the
   danger tone (mirrors the tree rows' old trash hover colour). */
.lvi-app .dcui-button.dcui-button-no-fill.lvi-popup-delete {
    margin-right: auto;
    color: #e5484d;
    border-color: #e5484d;
}
.lvi-app .dcui-button.dcui-button-no-fill.lvi-popup-delete:hover {
    background-color: #fdf1f1;
    color: #e5484d;
}
/* Item popup: the body scrolls, so give the action footer a clear separator and
   breathing room instead of crowding the last content row. */
.lvi-item-popup .lvi-wh-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--dcui-line-color, #e5e7eb);
}
/* The small single-field create popups (unit of measure, category) don't scroll,
   so the footer separator reads as a stray extra border — drop it there. */
.lvi-uom-popup .lvi-wh-actions,
.lvi-cat-popup .lvi-wh-actions {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}
/* Item picker (first Add Item step): it isn't scoped to .lvi-storage-popup, so it
   inherited no subtitle/control spacing and the dropdown crowded the action row.
   Mirror the storage popup's subtitle styling and give the control breathing room. */
.lvi-item-picker-popup .lvi-sl-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.45;
}
.lvi-item-picker-popup .lv-border-container {
    margin-bottom: 18px;
}

/* Small helper text under a popup control (e.g. the Move Stock quantity max). */
.lvi-warehouse-popup .lvi-wh-hint {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 12px;
    /* The bordered rows strip control padding, so keep the hint aligned with
       the input text's 10px inset. */
    padding-left: 10px;
}

/* Move Stock popup — read-only source/available summary card above the form. */
.lvi-move-stock-popup .lvi-move-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;
    margin-bottom: 20px;
}
.lvi-move-stock-popup .lvi-move-summary-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--dcui-primary-color, #2563eb);
    color: #fff;
    font-size: 15px;
}
.lvi-move-stock-popup .lvi-move-summary-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lvi-move-stock-popup .lvi-move-summary-avail {
    margin-left: auto;
    text-align: right;
}
.lvi-move-stock-popup .lvi-move-summary-label {
    color: #6b7280;
    font-size: 12px;
}
.lvi-move-stock-popup .lvi-move-summary-value {
    color: #1f2a37;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Source ancestry ("Fabric Zone > Rack F1"), matching the destination dropdown's
   parent-path sub-line so both sides of the move read alike. */
.lvi-move-stock-popup .lvi-move-summary-sub {
    color: var(--lvi-muted, #8a8f98);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Add/Edit Item popup — wider, two-column body (form left, image gallery right)
   mirroring the approved mockup.
   -------------------------------------------------------------------------- */
.popup.lvi-item-popup {
    width: 880px;
}
/* The small single-field create popups (unit of measure, category) reuse the
   item popup's form styling but not its two-column layout — undo the 880px
   width (this must come after the rule above; same specificity). */
.popup.lvi-uom-popup,
.popup.lvi-cat-popup {
    width: 520px;
}
/* Subtitle under the popup title — kept tight to the title and the first section
   (the default <p> margins left too large a gap before "Details"). */
.lvi-item-popup .lvi-item-subtitle {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 16px;
}
/* The subtitle now sits above the two-column body, so the body follows it
   without the extra 6px top gap. */
.lvi-item-popup .lvi-item-subtitle + .lvi-item-cols {
    margin-top: 0;
}
/* The left column borrows .lvi-form for its field styling, and in a popup that
   carries a 6px top margin — enough to drop "Details" below "Gallery" again. The
   columns take their spacing from .lvi-item-cols instead. */
.lvi-item-popup .lvi-item-cols > .lvi-item-main.lvi-form {
    margin-top: 0;
}
/* The body (both columns) is the single scroll region so long forms stay within
   the modal and the action footer never gets crowded. The generous bottom padding
   keeps the last section — and any dropdown panel opening from it — clear of the
   scroll edge. */
.lvi-item-cols {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 6px;
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 24px 2px;
}
.lvi-item-main {
    flex: 1 1 58%;
    min-width: 0;
}
.lvi-item-aside {
    flex: 0 0 36%;
    border-left: 1px solid var(--dcui-line-color, #e5e7eb);
    padding-left: 24px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Section = heading sitting ABOVE its bordered box (not inside the border). */
.lvi-item-section {
    margin-top: 20px;
}
.lvi-item-section:first-child {
    margin-top: 0;
}
.lvi-item-section > .lvi-sub-title {
    margin-bottom: 10px;
}

/* Custom fields */
.lvi-item-custom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lvi-item-custom-head .lvi-sub-title,
/* The item detail page uses the detail-page heading class for the same head. */
.lvi-item-custom-head .lvi-section-title {
    margin-bottom: 0;
}
.lvi-item-custom {
    padding: 14px 15px;
}
.lvi-item-custom-row:first-child {
    margin-top: 0;
}
.lvi-item-custom-add {
    cursor: pointer;
    color: var(--dcui-primary-color, #2563eb);
    font-size: 13px;
}
.lvi-item-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.lvi-item-custom-row > .dcui-form-group { flex: 1 1 0; margin: 0; min-width: 0; }
.lvi-item-custom-remove {
    cursor: pointer;
    color: #8a94a6;
    flex: 0 0 auto;
}
.lvi-item-custom-remove:hover { color: #d30505; }

/* The item detail page's Custom Fields section is the popup's content in the
   bordered label/value layout the rows above it use, so the name input has to sit
   where those rows' static labels sit — the framework's 10px control padding
   would otherwise indent it past them. */
.lvi-item-custom-fields .right .dcui-form-control {
    padding-left: 0;
}

/* The item detail page's Overview shows the same gallery in one wide column
   rather than the popup's narrow aside; hold it to roughly the aside's width so
   the strip doesn't stretch the width of the page. Four tiles per row. */
.lvi-item-overview-gallery { max-width: 480px; }

/* Upload gallery. The tiles and thumbnails themselves are the shared dc_ui_kit
   pair (DcImageUploaderMini + DcMediaViewer, styled in xp_system's
   base_components.css) — exactly what the PMS app shows on a style's Attachments.
   Only the row they sit in and the overlay's stacking belong to this app. */
.lvi-gallery {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* Uploader tile(s) then the viewer, on ONE row and top-aligned. No wrapping here:
   the viewer's own container is width:100%, so a wrapping strip would bump it onto
   a line of its own instead of letting it shrink into the space beside the tiles —
   the thumbnails wrap inside it. Matches the PMS attachments row. */
.lvi-media-strip {
    display: flex;
    align-items: flex-start;
}

/* ...except in the Add/Edit Item popup, whose aside is one tile wide. There the
   pair reads as a single grid of cells — "Add media" leading, then the thumbnails
   — rather than a viewer with a tile beside it, so a row holding one image is
   filled by the add tile instead of leaving a gap.
   The negative side margins cancel the kit's own 5px cell margin, which otherwise
   indented the whole grid past the "Gallery" heading. */
.lvi-item-aside .lvi-media-strip {
    flex-wrap: wrap;
    /* Wrapped lines stretch to fill the column by default, and the kit's tile fills
       whatever line it is given — which left a tall empty tile. Pack them up. */
    align-content: flex-start;
    margin: 0 -5px;
}
/* The viewer's own box is what kept the tile out of the thumbnails' wrap: dissolve
   it so its items and the tile are cells of ONE wrapping grid. Its padding goes
   with it, which is why the tile's outer margin goes too — every cell then carries
   just the kit's 5px item margin, so they share one pitch and one left edge. */
.lvi-item-aside .lvi-media-strip .dcui-media-viewer-container {
    display: contents;
}
/* The kit's tile is also height:100% — harmless where the strip is exactly as tall
   as the tile, but this aside stretches to the left column's height, so the tile
   grew with it. Size it to its content instead. Nothing here constrains the tile's
   own box: the card inside it is a fixed 112px and centres its icon and label
   against that, so a box any smaller would push them off centre. */
.lvi-item-aside .lvi-media-strip .dcui-file-uploader-container.mini {
    margin: 0;
    height: auto;
    align-self: flex-start;
}
/* The tile IS the empty state in this column — it sits exactly where the first
   thumbnail would go and says "Add media" — so the viewer's own "No attachments
   found." placeholder only repeats it, in a box the narrow column made it overflow. */
.lvi-item-aside .dcui-media-viewer-no-media-found-container {
    display: none;
}

/* The full-screen viewer must clear the Add/Edit Item popup, which stacks above
   Fancybox's own 1050. Keyed on the viewer_class this app passes, NOT on
   .fancybox__container — every app's CSS is concatenated into one sitewide
   bundle, and other apps' viewers keep their own stacking. */
.lvi-fancybox { z-index: 100000; }

@media (max-width: 640px) {
    .lvi-item-cols { flex-direction: column; }
    .lvi-item-aside {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--dcui-line-color, #e5e7eb);
        padding-top: 16px;
    }
}

/* ==========================================================================
   Incoming Shipments redesign — list filters, supplier groups, create editor,
   registry field renderer, horizontal stage graph, collapsible side panel.
   ========================================================================== */

/* List sub-bar: date range + search side by side */
.lvi-manage-bar-filters { display: flex; align-items: center; gap: 16px; }

/* Bin item list sub-bar: a fixed-width location chip, then the search field
   taking whatever is left. Scoped to .lvi-app like every other app rule — the
   framework concatenates every app's CSS into one sitewide bundle. */
.lvi-date-range-filter { display: flex; align-items: center; gap: 8px; }
.lvi-date-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-date-label i { margin-right: 4px; }
.lvi-date-field { min-width: 130px; }
.lvi-date-sep { color: #8a94a6; }
/* The datepicker (dc-calendar) ships its own lighter border, 6px radius, paler
   text and a 40px height, so the From/To fields don't match the dropdown + search
   sitting beside them in the filter bar. Pin them to the shared field chrome. */
.lvi-date-field.dcui-calendar .input-field input {
    height: 35px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    color: var(--dcui-body-color);
    font-size: 14px;
}
.lvi-date-field.dcui-calendar .input-field:hover input { background-color: #eee; }

/* The create page reuses .lvi-form for the bordered form rows but must not inherit
   the modal width constraints. */
.lvi-detail-page .lvi-form { min-width: 0; max-width: none; }
.lvi-detail-page .lvi-middle { padding: 20px; }

/* Registry field renderer */
.lvi-field-renderer { width: 100%; }
.lvi-field-readonly { font-size: 14px; color: #3a4452; }
.lvi-user-cell { display: inline-flex; align-items: center; gap: 8px; }
.lvi-user-name { font-size: 14px; color: #3a4452; }

/* Detail: stacked body (horizontal stages live above; body = main + side panel) */
.lvi-detail-body--stacked { display: flex; grid-template-columns: none; }
.lvi-detail-body--stacked .lvi-detail-main { flex: 1 1 auto; }
.lvi-detail-formrow { margin-bottom: 8px; }

/* Item detail: page-level Overview/Stocks tabs inside the main column */
.lvi-detail-tabs .dcui-bt-nav { margin-bottom: 18px; }
/* The kit's tab pane is a flex item with min-width:auto, so a nowrap table
   inside it widens the pane past the column and clips the stat cards above.
   Let the pane shrink so the table's own scroll wrapper takes the overflow. */
.lvi-detail-tabs .dcui-bt-tab { min-width: 0; }

/* Supplier-grouped read tables (detail) */
.lvi-supplier-groups { display: flex; flex-direction: column; gap: 18px; }
.lvi-supplier-group { border: 1px solid #eef0f4; border-radius: 8px; overflow: hidden; }
.lvi-supplier-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer; background: #f8fafc;
    font-weight: 600; color: #3a4452;
}
.lvi-supplier-head i { color: #8a94a6; }
.lvi-supplier-name { font-size: 15px; }
.lvi-supplier-body { padding: 4px 8px 8px; }

/* Item cell (thumbnail + code), shared by read + edit */
.lvi-item-cell { display: flex; align-items: center; gap: 10px; }
/* List cells holding free text (a name) are capped and clip with an ellipsis,
   the full value on hover via the cell's title, so one long value can neither
   push the table into a sideways scroll nor stack the row three lines tall.
   Cells holding a generated reference ("SHIP-000005-FHT2") or a date stay on
   one line instead of breaking at every hyphen when the table gets tight. */
.lvi-app .lvi-cell-clip {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lvi-app .lvi-cell-nowrap { white-space: nowrap; }
/* The SKU cell is a flex pair (thumbnail + text): the ellipsis has to land on
   the text span, and the span has to be allowed to shrink for it to land. */
.lvi-app .lvi-cell-clip .lvi-item-cell > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvi-item-thumb {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px;
    background: #f1f3f7; display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: #b6becb;
}
.lvi-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lvi-item-code { font-size: 14px; color: #3a4452; }
.lvi-app .lvi-clickable { cursor: pointer; }

/* Shared empty-state remark (LviEmptyState). Block = panels/tables/tree;
   .is-inline = typeahead dropdowns and command-bar lists. */
.lvi-app .lvi-empty { text-align: center; padding: 24px 4px; font-size: 14px; color: #8a94a6; }
.lvi-app .lvi-empty > i { margin-right: 6px; }
.lvi-app .lvi-empty.is-inline { text-align: left; padding: 8px 12px; font-size: 13px; }
/* A line list's own empty remark is not inside a list row — it sits directly under
   the section title, with the list's error message below it, and both of those start
   at the container's left edge. The 12px inset that lines an inline remark up with a
   dropdown's options put this one 12px right of the two lines it belongs with. */
.lvi-app .lvi-cmd-table > .lvi-empty.is-inline { padding-left: 0; }
/* When a block empty state sits in a data-table cell, drop the cell border the
   kit gives every td — otherwise a stray horizontal line draws under the "No …"
   remark (the empty row is the only row). Non-table empty states (plain <div>)
   have no such line, so this makes tables match them. The .dcui-t-table in the
   selector is needed to outrank the kit's own `.dcui-table table.dcui-t-table td`
   border rule; every lv_inventory data table carries that class. */
.lvi-app .dcui-t-table td:has(.lvi-empty) { border: 0; }

/* Create editor (supplier blocks + item grid) */
.lvi-supplier-editor { display: flex; flex-direction: column; gap: 20px; }
.lvi-supplier-editor-block { padding: 16px; }
.lvi-supplier-editor-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.lvi-supplier-editor-title { font-weight: 700; color: #3a4452; white-space: nowrap; }
.lvi-supplier-editor-supplier { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.lvi-inline-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-supplier-editor-actions { margin-top: 4px; }

/* Collapse caret: the same muted caret the storage tree uses, sized to the head
   row so the supplier name keeps its position whether open or closed. A closed
   block is just its header, so the head's bottom margin goes with the rows, and
   the item count stands in for what's hidden. */
.lvi-supplier-editor-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #8a94a6;
    width: 14px;
    flex: 0 0 14px;
    padding: 0;
    text-align: center;
    line-height: 1;
}
.lvi-supplier-editor-toggle:hover { color: #3a4452; }
.lvi-supplier-editor-count { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-supplier-editor-block.is-collapsed .lvi-supplier-editor-head { margin-bottom: 0; }

/* Shipment total: a right-aligned footer under the supplier blocks, sitting over
   the Line Total column it sums. Label muted like the other inline captions, the
   figure carried by weight alone; tabular figures keep it aligned with the
   column above as digits change. */
.lvi-app .lvi-shipment-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-right: 16px;
}
.lvi-app .lvi-shipment-total-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-app .lvi-shipment-total-value {
    font-size: 15px;
    font-weight: 600;
    color: #1f2a37;
    font-variant-numeric: tabular-nums;
    /* Σ over 16-digit lines is a long number by construction: let it break onto
       a second line rather than run past the card on a narrow viewport. */
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.lvi-editor-table { width: 100%; }
.lvi-editor-table th { font-weight: 600; color: #8a94a6; font-size: 13px; }
.lvi-editor-table td { vertical-align: middle; padding: 6px 8px; }
.lvi-qty-cell { display: flex; align-items: center; gap: 6px; }
.lvi-qty-cell > * { min-width: 0; }
.lvi-muted { color: #8a94a6; }

.lvi-add-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #0096fd; cursor: pointer; font-size: 14px; }
.lvi-add-link i { font-size: 12px; }
.lvi-icon-btn { border: 0; background: transparent; cursor: pointer; color: #8a94a6; padding: 4px; }
.lvi-icon-btn:hover { color: #f15f5f; }
.lvi-icon-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* A row's PRIMARY action (shipment put-away, move "Mark Moved") — the one thing
   the row exists to have done to it, as opposed to the edit/remove pair beside
   it. It moves stock rather than destroying anything, so it keeps the primary
   blue it had as an outline button rather than the red the other row icons
   share, and it carries a filled neutral chip (no border, at the field radius
   the row's own controls use) so the clickable area reads as a button. */
.lvi-icon-btn.lvi-row-action-btn {
    background: #f1f3f7;
    border-radius: var(--dcui-field-radius);
    padding: 5px 8px;
}
.lvi-icon-btn.lvi-row-action-btn:hover { color: var(--dcui-primary-color); background: #e6f5ff; }

/* ── Slash-command inline item editor ─────────────────────────────────────── */

/* Supplier header: caption + constrained picker, trash pushed to the far right.
   DcDropdown does not inherit a class attr onto its root, so the picker is scoped
   via the head container. The block card's flush-dropdown rule (border: 0 inside
   .lv-border-container) is undone here — the picker should read as a control. */
.lvi-supplier-editor-head .lv-dropdown { flex: 0 1 340px; min-width: 0; }
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
    border-radius: var(--dcui-field-radius);
    width: 100%;
    box-sizing: border-box;
}
/* …but it still hover/open-fills like every other field (pms behaviour). */
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown .dcui-dt-label:hover,
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}
.lvi-supplier-editor-head .lvi-supplier-remove { margin-left: auto; }

/* Small thumbnail variant used in rows and the item search results. */
.lvi-item-thumb.sm { width: 28px; height: 28px; }

/* Read rows + header aligned on one grid. */
.lvi-cmd-table { display: flex; flex-direction: column; }
.lvi-cmd-head,
.lvi-cmd-row {
    display: grid;
    /* LviItemLineList sets --lvi-line-cols per instance from its `columns` prop;
       the fallback is the original shipment template, so any consumer that
       passes no widths renders exactly as before. */
    grid-template-columns: var(--lvi-line-cols, minmax(180px, 1.6fr) 110px 100px minmax(130px, 1.2fr) minmax(130px, 1.2fr) 64px);
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
}
.lvi-cmd-head { color: #8a94a6; font-size: 13px; font-weight: 600; border-bottom: 1px solid #eef0f4; }
/* No cursor:pointer — a row is not a button. Editing runs through the row's
   pencil; the hover fill only marks which row those controls belong to. */
.lvi-cmd-row { border-bottom: 1px solid #f2f4f7; font-size: 14px; color: #3a4452; }
.lvi-cmd-row:hover { background: #f8fafc; }
.lvi-cmd-row-name { font-weight: 600; }
.lvi-cmd-row-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }

/* A wide column set scrolls inside the list itself rather than pushing the
   overflow onto the page, where the scrollbar lands at an arbitrary point and
   the rows run past the card's border. min-width:min-content makes each row
   stretch to the full scrolled width so its bottom border and hover fill span
   it; min-content (not max-content) leaves the fr tracks distributing normally
   whenever there IS room, so nothing changes on a wide viewport. */
.lvi-app .lvi-cmd-table {
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-app .lvi-cmd-table::-webkit-scrollbar { width: 8px; height: 8px; }
.lvi-app .lvi-cmd-table::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 8px; }
.lvi-app .lvi-cmd-table::-webkit-scrollbar-track { background: transparent; }
.lvi-app .lvi-cmd-head,
.lvi-app .lvi-cmd-row { min-width: min-content; }
/* The list keeps its scrollport while a line is being edited. It used to give it
   up (overflow:visible) so the open bar's panels weren't clipped, but that also
   unpinned the sticky row actions below and let every row spill past the card.
   The bar's panels are fixed-position poppers instead (see .lvi-cmd-panel), so
   nothing inside it needs the scrollport gone. */

/* The per-row controls stay pinned to the right edge of the scrollport rather
   than scrolling away with the columns — edit/remove/Put Away must stay reachable
   at any scroll offset. They need an opaque fill so cells pass underneath, and
   they match the row's hover fill so the pin is invisible until it matters. */
.lvi-app .lvi-cmd-head > span:last-child,
.lvi-app .lvi-cmd-row-actions {
    position: sticky;
    /* right:8px used to match the row's own side padding, but that left an 8px
       strip of scrollport past the pin where the columns underneath showed
       through. Pin flush instead and re-create the inset with padding, so the
       opaque fill runs all the way to the edge while the controls sit where they
       did. The negative margin lets the border box overhang the row's padding box
       (which bounds a sticky element's margin box) — without it the pin would sit
       flush at rest but 8px in at full scroll, and visibly shift as you scroll. */
    right: 0;
    margin-right: -8px;
    padding-right: 8px;
    z-index: 1;
    background: #fff;
    height: 100%;
}
.lvi-app .lvi-cmd-row:hover .lvi-cmd-row-actions { background: #f8fafc; }
/* Only once something is actually hidden behind it does the pin earn a separator. */
.lvi-app .lvi-cmd-table.is-scrolled .lvi-cmd-head > span:last-child,
.lvi-app .lvi-cmd-table.is-scrolled .lvi-cmd-row-actions {
    box-shadow: -8px 0 8px -8px rgba(16, 24, 40, 0.22);
}

/* A cell stays inside its own column.
   A grid item's default min-width is auto, i.e. its content width, so a value
   wider than a fixed track (Unit Cost and Line Total are 100px/110px) simply
   grew past it and painted over the column to its right — a 16-digit line
   total overlapped the two cells beside it. The row's min-width:min-content
   above does not help: it stretches the fr tracks, never the fixed ones.
   min-width:0 lets the cell be its track's size, and the value is ellipsized
   rather than clipped mid-glyph. The cells carry a `title` with the unabridged
   value (see LviSupplierItemEditor / LviShipmentLines), so nothing is lost —
   and the full number is still in the DOM for tests to read. */
.lvi-app .lvi-cmd-head > span,
.lvi-app .lvi-cmd-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The cells that are layout rather than text: a checkbox, a caret, and the
   sticky action pin. Their inline-flex children are already sized, and
   clipping the pin would cut the buttons it exists to keep reachable. */
.lvi-app .lvi-cmd-head > .lvi-line-select,
.lvi-app .lvi-cmd-row > .lvi-line-select,
.lvi-app .lvi-cmd-row > .lvi-cmd-row-actions {
    overflow: visible;
}
/* The item cell is a flex pair (thumbnail + name); ellipsis has to land on the
   text child, and the thumbnail must keep its size while the name gives way. */
.lvi-app .lvi-cmd-row > .lvi-item-cell { min-width: 0; }
.lvi-app .lvi-cmd-row .lvi-cmd-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- LviItemLineList: locked rows, selection and the row-detail expander --- */
/* A locked list is read-only, so drop the affordances that imply an editable row.
   Unless the host acts on a row click (is-row-clickable — the unloading shipment
   opens its put-away manager that way), in which case the row IS a target and
   gets the pointer and hover fill back. */
.lvi-app .lvi-cmd-table.is-locked:not(.is-row-clickable) .lvi-cmd-row:hover { background: transparent; }
/* The action pin carries its own opaque fill (cells scroll under it), so it has
   to be told the row went unfilled too — otherwise hovering a locked row paints
   a lone grey block where the pin is, with no row fill behind it to belong to. */
.lvi-app .lvi-cmd-table.is-locked:not(.is-row-clickable) .lvi-cmd-row:hover .lvi-cmd-row-actions { background: #fff; }
.lvi-app .lvi-cmd-table.is-row-clickable .lvi-cmd-row { cursor: pointer; }
.lvi-app .lvi-line-select { display: inline-flex; align-items: center; justify-content: center; }
.lvi-app .lvi-line-caret {
    background: none; border: 0; padding: 0; color: #8a94a6; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lvi-app .lvi-line-caret:hover { color: #3a4452; }
/* The detail panel spans the whole row, so it sits outside the column grid. */
.lvi-app .lvi-line-detail {
    padding: 8px 8px 12px 36px;
    border-bottom: 1px solid #f2f4f7;
    background: #fbfcfe;
}

/* Move source-picks panel (the #row-detail expander on move lines). Two modes:
   an editable Source/Available/Take grid with an allocation footer, and a plain
   read-only "picked from" summary once the line is locked. */
.lvi-app .lvi-picks { font-size: 13px; color: #3a4452; }
.lvi-app .lvi-picks-caption {
    margin: 0 0 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase; color: #8a94a6;
}

/* Read-only summary: source bin -> batch -> quantity taken. Shares the editing
   grid's table styling so both modes of the panel line up column for column. */
.lvi-app .lvi-picks-summary .lvi-picks-batch { color: #616a78; }
/* The bin's "Zone > Rack" ancestry, under its name — the same two-line shape the
   destination dropdown and the Move Stock popup use, so repeated bin names read
   alike wherever a location is shown. */
.lvi-app .lvi-picks-path {
    display: block;
    color: var(--lvi-muted, #8a8f98);
    font-size: 12px;
    margin-top: 2px;
}
/* The quantity taken is the figure of the row, so it keeps its weight and ink
   rather than the muted treatment the editing grid gives its numeric columns. */
.lvi-app .lvi-picks-qty, .lvi-app .lvi-picks-grid td.lvi-picks-qty {
    font-weight: 600; white-space: nowrap; color: #3a4452;
}
/* The unit next to a quantity, wherever one is written: line tables, picks,
   shipment lines. It is context for the number, not a value of its own, so it
   never competes with it for weight or ink — which is what lets a column of
   "70 m / 7 m / 63 m" still scan as a column of numbers. Defined once here
   rather than per-table so every quantity in the SPA reads the same. */
.lvi-app .lvi-unit { font-weight: 400; color: #8a94a6; margin-left: 2px; }
/* A source cell carries two lines, so its row aligns from the top. */
.lvi-app .lvi-picks-summary td { vertical-align: top; }

/* Editing grid — spans the full width of the row detail. */
.lvi-app table.lvi-picks-grid { width: 100%; border-collapse: collapse; }
/* Keep the numeric columns a steady width so Take/Available line up while the
   Source column absorbs the remaining width. The heading is right-aligned with
   the figures under it — the generic `th` rule below would otherwise strand it
   at the far side of a 160px column from its own values. */
.lvi-app .lvi-picks-grid th.lvi-picks-num, .lvi-app .lvi-picks-grid td.lvi-picks-num { width: 160px; }
.lvi-app .lvi-picks-grid th.lvi-picks-num { text-align: right; }
.lvi-app .lvi-picks-grid th {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: #8a94a6; padding: 0 12px 6px 0; border-bottom: 1px solid #e7ebf0;
}
.lvi-app .lvi-picks-grid td { padding: 8px 12px 8px 0; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.lvi-app .lvi-picks-grid tr:last-child td { border-bottom: 0; }
.lvi-app .lvi-picks-grid th:last-child, .lvi-app .lvi-picks-grid td:last-child { padding-right: 0; }
.lvi-app .lvi-picks-num { text-align: right; white-space: nowrap; }
.lvi-app .lvi-picks-grid td.lvi-picks-num { color: #616a78; }

/* The Take input + its unit suffix. */
.lvi-app .lvi-picks-take { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lvi-app .lvi-picks-take .dcui-form-control { width: 84px; text-align: right; }
/* Standing beside an input rather than trailing a number: no left nudge. */
.lvi-app .lvi-picks-take .lvi-unit { margin-left: 0; }
.lvi-app .lvi-picks-empty-row td { text-align: left; }

/* Allocation footer — matched / short / over feedback. */
.lvi-app .lvi-picks-alloc {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 12px 0 0; font-size: 13px; font-weight: 600;
}
.lvi-app .lvi-picks-alloc.is-match { color: #21a83c; }
.lvi-app .lvi-picks-alloc.is-over  { color: #d64545; }
.lvi-app .lvi-picks-alloc.is-short { color: #8a94a6; }
.lvi-app .lvi-picks-alloc-note { font-weight: 400; }

/* The inline command bar. position:relative anchors its panels/popovers, which
   render outside the bar and must NOT be clipped (this section uses no
   .scroll-container, so nothing caps or hides them). */
.lvi-cmd-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #dbe0e7;
    border-radius: 8px;
    background: #fff;
}
.lvi-cmd-main { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lvi-cmd-item { display: inline-flex; align-items: center; gap: 8px; }
.lvi-cmd-item-name { font-weight: 600; color: #3a4452; }
.lvi-cmd-input {
    flex: 1 1 160px; min-width: 120px;
    border: 0; outline: none; background: transparent;
    font-size: 14px; padding: 6px 4px; color: #3a4452;
}
/* The bar's own input is not a .dcui-form-control (it carries no field chrome in
   popover mode), so it never picked up the kit's placeholder grey and rendered
   the browser default — noticeably darker than the Qty/Cost/registry fields
   sitting right beneath it. Same grey as dc-ui-kit.css gives every other field. */
.lvi-cmd-input::placeholder {
    color: #bfbfbf;
}
.lvi-cmd-toolbar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lvi-cmd-tool {
    border: 0; background: transparent; color: #6b7585; cursor: pointer;
    width: 30px; height: 30px; border-radius: 6px; font-size: 15px;
}
.lvi-cmd-tool:hover,
.lvi-cmd-tool.active { background: #eef2f7; color: #0096fd; }
/* Bar actions. Both share one height and center their contents on the cross axis,
   so the label sits on the button's optical middle rather than its text baseline —
   a fixed-height button with inline content otherwise rides high. */
.lvi-cmd-save,
.lvi-cmd-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}
.lvi-cmd-save {
    border: 1px solid #0096fd; color: #0096fd; background: #fff;
    padding: 0 12px; font-size: 13px;
}
.lvi-cmd-save:disabled { opacity: .5; cursor: not-allowed; }

/* Floating panels: item results + slash palette. These are dropdown panels in all
   but name, so they take the kit's panel chrome and row metrics (dc-ui-kit's
   .dcui-dropdown-panel / .dcui-dropdown-menu > li > a) — a bespoke radius, shadow
   and row padding made them read as a different control from every other
   dropdown in the app. Rows stay flex: they carry a thumbnail beside the label,
   as the kit's own option rows do via .dcui-flex-item.

   position/top/left/width come from placeFloat(), which anchors the panel to the
   bar's input row as a fixed popper — the same treatment LviDropdown gives the
   kit's dropdown panels, and for the same two reasons. Absolute positioning
   anchors to the BAR, which in inline mode is three wrapped rows tall, so the
   panel opened ~145px below the input it belongs to; and it left the panel
   inside the item list's scrollport, which clipped it. */
.lvi-cmd-panel {
    position: fixed; z-index: 40;
    margin: 0; padding: 0; list-style: none;
    background-color: #fff;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0px 1px 14px -5px rgba(66, 66, 66, 0.25);
    max-height: 260px; overflow-y: auto;
}
.lvi-cmd-result-list { list-style: none; margin: 5px 0; padding: 0; }
.lvi-cmd-panel li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 15px 9px; cursor: pointer;
    color: inherit;
}
.lvi-cmd-panel li:hover { background-color: #eee; }
/* The palette is the panel itself (a <ul>), so it carries the menu inset that the
   results list gets from its own margin. */
.lvi-cmd-palette { padding: 5px 0; }
/* Item rows carry a thumbnail, which at 28px made them 47px tall against a plain
   dropdown row's ~35px. Shrink the thumb and trim the vertical padding to land on
   the same height, so the list reads as one control with the app's dropdowns. */
.lvi-cmd-result-list li { padding: 8px 15px 7px; }
.lvi-cmd-result-list .lvi-item-thumb.sm { width: 20px; height: 20px; border-radius: 4px; }
/* The create row's link owns its padding (as LviDropdown's does), so the row
   itself must not add any — this selector has to out-rank the rule above. */
.lvi-cmd-result-list li.lvi-cmd-create { padding: 0; }
.lvi-cmd-noresult { cursor: default; }
.lvi-cmd-noresult:hover { background: transparent; }
.lvi-cmd-item-sub { margin-left: auto; font-size: 12px; }
/* Names what a results pick will do when the line already holds an item: the row
   replaces it rather than joining it. Sticky because placeFloat() scrolls the
   panel itself, which would otherwise carry the header out of view exactly when
   the list is long enough to need it. Horizontal padding matches
   .lvi-cmd-result-list li so the header and the rows share one left edge. */
.lvi-cmd-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 8px 15px 6px;
    background-color: #fff;
    border-bottom: 1px solid #eef2f7;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a94a6;
}

/* Attribute popovers (quantity / location) — popover-mode bars only. Positioned
   by placeFloat() for the same reason as .lvi-cmd-panel: these bars also render
   inside the item list's scrollport. */
.lvi-cmd-popover {
    position: fixed; z-index: 40;
    width: 320px; padding: 12px;
    background: #fff; border: 1px solid #e2e6ec; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 30, 50, .12);
}
.lvi-cmd-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lvi-cmd-popover-title { font-size: 13px; font-weight: 600; color: #8a94a6; }

/* Inline-fields mode: field editors render in the bar instead of popovers. */
.lvi-cmd-bar.is-inline { flex-wrap: wrap; }
/* The fields lay out on a grid — three per row at desktop width — rather than as
   a wrapping flex row. With five fixed fields plus however many registry line
   fields a subtype adds, the flex row broke into ragged lines whose labels and
   controls never shared an x; one track per column lines every control up
   whatever the label lengths are.

   The track expression is a capped auto-fit: `(100% - gaps) / 3` is a third of the
   row, so three is the most that ever fit, and the 260px floor takes over below
   ~820px to drop the grid to two columns and then one. It keys off the bar's own
   width rather than the viewport's on purpose — this bar renders both in the wide
   create-page column and in the narrower detail-page one, and a viewport media
   query cannot tell those apart. */
.lvi-cmd-fields {
    --lvi-cmd-col-gap: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(260px, (100% - 2 * var(--lvi-cmd-col-gap)) / 3), 1fr));
    align-items: center;
    gap: 12px var(--lvi-cmd-col-gap);
    flex: 1 1 100%;
}
/* Inside a cell the label owns a track of its own, so the controls align column to
   column; the control takes the rest (minmax(0,…) lets it shrink into its track
   instead of pushing the grid wider). The label track is one width for the whole
   row, measured from the bar's own widest label by LviCommandBar.syncLabelWidth()
   — a width hard-coded here would fit one bar and strand the others' labels far
   from their fields. The 112px fallback covers the frame before it is measured. */
.lvi-cmd-field {
    display: grid;
    grid-template-columns: var(--lvi-cmd-label-w, 112px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.lvi-cmd-field:focus { outline: none; }
/* Every label starts at its cell's left edge, so the rows of a wrapped bar share
   one left edge instead of each being indented by whatever its label is short by.
   `justify-self: start` also makes the box its own text rather than the whole
   track, which is what lets syncLabelWidth() measure the labels (see there); the
   max-width keeps a label the measurement has not caught up with — an admin rename,
   the frame before mount — inside its track, ellipsised rather than overlapping the
   control. */
.lvi-cmd-field-label {
    justify-self: start;
    max-width: 100%;
    font-size: 12px;
    color: #8a94a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* A field the bar shows but cannot edit — an in-flight move line's item, unit
   and bins are fixed, and only its planned quantity can still change. Reads as
   the value it holds, not as a disabled control that invites a click. */
.lvi-app .lvi-cmd-field.is-static .lvi-cmd-static-value {
    font-size: 13px;
    color: #3a4356;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Save-time refusal. flex-basis 100% puts it on its own row inside the wrapped
   inline bar, under the fields it is talking about. */
.lvi-cmd-error {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #d64550;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Advisory counterpart to .lvi-cmd-error, sharing its row geometry so the two
   swap without moving the bar. Muted, and marked by fa-circle-info against the
   error's fa-triangle-exclamation, so the two never read as the same weight. */
.lvi-cmd-hint {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #8a94a6;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* DcInputField wraps its input in .dcui-form-group, which carries a 20px bottom
   margin meant for stacked form rows. Inside the bar that margin inflates the
   field box to 55px, and align-items:center then sits the input 10px higher than
   the dropdown toggles beside it. These are inline editors, not form rows. */
.lvi-cmd-field .dcui-form-group { margin-bottom: 0; }
/* Every editor fills its cell: the grid's columns decide field width, so no
   control carries a width of its own (quantity and cost used to be a fixed 90px)
   and none may carry a min-width wider than its track. */
.lvi-cmd-field .lv-dropdown,
.lvi-cmd-field .lvi-field-renderer,
.lvi-cmd-field .lvi-field-renderer .dcui-calendar,
.lvi-cmd-field .lvi-cmd-qty,
.lvi-cmd-field .lvi-cmd-cost,
.lvi-cmd-field .lvi-field-renderer .dcui-form-control {
    min-width: 0;
    width: 100%;
}

/* Every editor in the bar must read as the same outlined input. Two things
   flatten them by default: the kit renders a closed .dcui-dt-label with no
   chrome, and the supplier block is a .lv-border-container, whose "flush" rules
   strip control borders (with !important) so bordered form rows don't double up.
   These are inline editors, not form rows — restore the outlined white-fill box
   (same treatment as .lvi-bulk-dest-col-qty). The long selectors and the
   !important are what it takes to out-rank those flush rules.

   The text controls are named one by one rather than as
   `.lvi-cmd-field .dcui-form-control`, because a dropdown's panel carries a
   search input that must stay chromeless: .lvi-cmd-qty / .lvi-cmd-cost land on
   the input itself (LviQtyField sets inheritAttrs:false), and the registry line
   fields — a roll's Batch Number / Mark / Roll No / Weight (Kg) — render through
   LviFieldRenderer, whose .lvi-field-renderer wrapper identifies them. Those
   registry fields were the ones the flush rules still reached, which is why they
   read as bare text beside the outlined Qty and bin controls. */
.lvi-cmd-bar.is-inline .lvi-cmd-input,
.lvi-cmd-field .lvi-cmd-qty,
.lvi-cmd-field .lvi-cmd-cost,
.lvi-cmd-field .lv-dropdown .dcui-dt-label,
.lvi-cmd-field .lvi-field-renderer .dcui-form-control,
.lvi-cmd-field .lvi-field-renderer .dcui-calendar .input-field input,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-qty,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-cost,
.lvi-form .lv-border-container .lvi-cmd-field .lv-dropdown .dcui-dt-label,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-field-renderer .dcui-form-control,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-field-renderer .dcui-calendar .input-field input,
.lvi-detail-formrow .lvi-cmd-field .lvi-field-renderer .dcui-form-control,
.lvi-detail-formrow .lvi-cmd-field .lvi-field-renderer .dcui-calendar .input-field input {
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}
/* Take the kit's field height so every editor lines up with the dropdown toggles
   beside it (those are exactly --dcui-field-height). An auto height with a
   padding+line-height pair left them ~1.5px short and sat their text a hair off
   the toggles' — `line-height: normal` lets the input centre its own value.
   Textareas are excluded (see below): they size to their own content. */
.lvi-cmd-bar.is-inline .lvi-cmd-input,
.lvi-cmd-field .lvi-cmd-qty,
.lvi-cmd-field .lvi-cmd-cost,
.lvi-cmd-field .lvi-field-renderer input.dcui-form-control,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-qty,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-cost,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-field-renderer input.dcui-form-control {
    box-sizing: border-box;
    height: var(--dcui-field-height);
    line-height: normal;
    padding: 0 10px;
}
/* A multiline registry field takes the same chrome but grows with its value, so
   it needs only the row's inset and a one-line floor — an empty one must be no
   shorter than the fields beside it. */
.lvi-cmd-field .lvi-field-renderer textarea.dcui-form-control,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-field-renderer textarea.dcui-form-control {
    box-sizing: border-box;
    min-height: var(--dcui-field-height);
    padding: 7px 10px;
}
/* Last of the chrome rules on purpose: the borders above carry !important (they
   have to, to beat the flush rules), so a refusal colour declared before them
   would be overridden by them and never reach the control it is about. */
.lvi-cmd-field.has-error .dcui-form-control,
.lvi-cmd-field.has-error .lv-dropdown .dcui-dt-label,
.lvi-form .lv-border-container .lvi-cmd-field.has-error .dcui-form-control,
.lvi-form .lv-border-container .lvi-cmd-field.has-error .lv-dropdown .dcui-dt-label {
    border-color: #d64550 !important;
}
/* The same refusal colour on a bordered form ROW (LviFormRow's `invalid`/`error`).
   Here it has to draw the whole border, not just recolour one: a control inside a
   bordered row is deliberately flush (border: 0 — the row card supplies the line),
   so there is nothing to recolour until this puts an outline back. Lives beside the
   command bar's rule and after the chrome rules for the same reason as above. */
.lvi-form .lv-border-container .lv-form-container-row.has-error .dcui-form-control,
.lvi-form .lv-border-container .lv-form-container-row.has-error .lv-dropdown .dcui-dt-label,
.lvi-form .lv-border-container .lv-form-container-row.has-error .dcui-calendar .input-field input,
.lvi-detail-formrow .lv-form-container-row.has-error .dcui-form-control,
.lvi-detail-formrow .lv-form-container-row.has-error .lv-dropdown .dcui-dt-label,
.lvi-detail-formrow .lv-form-container-row.has-error .dcui-calendar .input-field input {
    border: 1px solid #d64550 !important;
}
/* …but never the search box inside an open dropdown's panel. The panel renders
   INSIDE the row, so the rule above reaches its field too — and it is borderless
   by design (.lv-input-filed-no-outline). The refusal is about the control the row
   holds, not about the box the user is typing into to answer it. */
.lvi-form .lv-border-container .lv-form-container-row.has-error .dcui-dropdown-panel .dcui-form-control,
.lvi-detail-formrow .lv-form-container-row.has-error .dcui-dropdown-panel .dcui-form-control {
    border: 0 !important;
}
/* And on a supplier block header (LviSupplierItemEditor's `supplierRequired`).
   Its picker keeps a real border inside the block card (the rule further up), so
   this only recolours one — and it is scoped to the head, not the block, or a
   refused supplier would redden every line bar under it too. */
.lvi-supplier-editor-head.has-error .lv-dropdown .dcui-dt-label,
.lvi-form .lv-border-container .lvi-supplier-editor-head.has-error .lv-dropdown .dcui-dt-label {
    border-color: #d64550 !important;
}
.lvi-cmd-cancel {
    border: 1px solid #dbe0e7; color: #6b7585; background: #fff;
    width: 30px; padding: 0;
}
.lvi-cmd-cancel:hover { background: #eef2f7; }

/* Horizontal stage graph (detail page, under the title) */
.lvi-stage-graph--horizontal { border-right: none; border-bottom: 1px solid #eef0f4; padding: 18px 20px; }
.lvi-stage-graph--horizontal .lvi-stage-list { display: flex; align-items: flex-start; justify-content: space-between; }
.lvi-stage-graph--horizontal .lvi-stage-list::before {
    top: 13px; bottom: auto; left: 28px; right: 28px; width: auto;
    border-left: none; border-top: 2px dotted #d9dee6;
}
.lvi-stage-graph--horizontal .lvi-stage-list .item {
    flex: 1 1 0; flex-direction: column; gap: 8px; padding: 0; text-align: center;
}
.lvi-stage-graph--horizontal .lvi-stage-label { font-size: 13px; }

/* DcCollapsibleSidePanel (global component; styled here only for this app) */
.lvi-app .dcui-collapsible-side-panel {
    position: relative; flex: 0 0 auto; width: 320px;
    border-left: 1px solid #eef0f4; transition: width 0.15s ease;
}
.lvi-app .dcui-collapsible-side-panel.dcui-csp-collapsed { width: 40px; }
.lvi-app .dcui-csp-toggle {
    position: absolute; top: 12px; left: -13px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #e2e6ec; background: #fff; cursor: pointer; color: #6b7585;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.lvi-app .dcui-csp-body { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lvi-app .dcui-csp-rail { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; }
.lvi-app .dcui-csp-rail-title {
    writing-mode: vertical-rl; transform: rotate(180deg);
    text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; color: #8a94a6;
}

/* Collapsed rail: the panel's tab names as one rotated line, "COMMENTS /
   ACTIVITIES". The container carries the rotation (from .dcui-csp-rail-title)
   so the names and separators share one text run and stay inside the 40px rail.
   Both names inherit that one colour — the line is a label for what the panel
   holds, so colouring the current tab differently just read as mismatched text. */
.lvi-app .lvi-csp-rail-tab { cursor: pointer; }
.lvi-app .lvi-csp-rail-tab:hover { color: #5b6577; }
/* Logical, not physical: in vertical-rl the inline axis runs down the rail, so
   margin-inline is what puts air either side of the slash. */
.lvi-app .lvi-csp-rail-sep { margin-inline: 4px; }

/* All Requests — split create menu + type filter */
.lvi-create-menu { display: inline-block; }
.lvi-create-menu-btn { display: inline-flex; align-items: center; cursor: pointer; }
/* The button carries its own chevron; strip the DcDropdown toggle's padding +
   default :after caret so we don't get a second dropdown icon beside it. */
.lvi-create-menu .dcui-dt-label { padding: 0; }
.lvi-create-menu .dcui-dt-label::after { display: none; }
/* Type names are the admin registry's to set (@see requestTypes.js), so an
   option here can be any length. The panel is shrink-to-fit inside a containing
   block only as wide as the button, so without this a two-word name such as
   "Warehouse Transfer" breaks across lines mid-name. Nowrap makes the panel take
   the width its longest option needs; right-aligned, it grows inwards. */
.lvi-create-menu .dcui-dropdown-menu > li > a { white-space: nowrap; }
.lvi-type-filter { min-width: 170px; }

/* Request detail — summary header actions + requested items */
.lvi-summary-head, .lvi-items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lvi-summary-actions { display: flex; align-items: center; gap: 10px; }
.lvi-requested-items { width: 100%; }
.lvi-requested-items th, .lvi-requested-items td { text-align: left; vertical-align: middle; padding: 8px; }
.lvi-requested-items th { font-weight: 600; color: #8a94a6; font-size: 13px; }
.lvi-requested-items th:first-child, .lvi-requested-items td:first-child { width: 60%; }
.lvi-item-name-cell { display: inline-flex; align-items: center; gap: 10px; }
.lvi-line-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; }

/* Complete Order popup — wider so the per-line table reads as columns, not a
   cramped wrap. Roomy rows with a light row separator keep it scannable. */
.popup.lvi-complete-popup {
    width: 720px;
    max-width: calc(100vw - 48px);
    /* Framework .popup is overflow:hidden (rounded corners); that clips the
       resolution dropdown panel when it opens on the last row. Let it extend past
       the modal like the create/warehouse popups do. */
    overflow: visible;
}
.lvi-complete-items { width: 100%; border-collapse: collapse; margin-top: 4px; }
.lvi-complete-items th, .lvi-complete-items td {
    text-align: left;
    vertical-align: middle;
    padding: 10px 12px;
}
.lvi-complete-items th {
    font-weight: 600;
    color: #8a94a6;
    font-size: 13px;
    border-bottom: 1px solid #e2e6ec;
}
.lvi-complete-items tbody tr + tr td { border-top: 1px solid #eef1f5; }
.lvi-complete-items .lvi-cc-item { font-weight: 600; color: #2a3340; }
.lvi-complete-items .lvi-cc-res { width: 200px; }

/* Dispatch Items popup — a per-line qty table like Complete Order. Without an
   explicit width it falls back to the default .popup (min 650px, max 95%) and
   stretches across the screen, blowing out the qty inputs. Size it to its columns
   and cap the Remaining / Dispatch Qty columns so the item name takes the slack. */
.popup.lvi-dispatch-popup {
    width: 560px;
    max-width: calc(100vw - 48px);
}
.lvi-dispatch-popup .lvi-requested-items th:first-child,
.lvi-dispatch-popup .lvi-requested-items td:first-child { width: auto; }
.lvi-dispatch-popup .lvi-requested-items th:nth-child(2),
.lvi-dispatch-popup .lvi-requested-items td:nth-child(2) { width: 110px; }
.lvi-dispatch-popup .lvi-requested-items th:last-child,
.lvi-dispatch-popup .lvi-requested-items td:last-child { width: 170px; }

/* Deliver Items popup — the same per-line qty table as Dispatch, and it needs
   the same sizing for the same reason: without an explicit width it fell back to
   the default .popup (min 650px, max 95%) and stretched the full screen, leaving
   a lone quantity input floating across a 1900px row. */
.popup.lvi-deliver-popup {
    width: 560px;
    max-width: calc(100vw - 48px);
}
.lvi-deliver-popup .lvi-requested-items th:first-child,
.lvi-deliver-popup .lvi-requested-items td:first-child { width: auto; }
.lvi-deliver-popup .lvi-requested-items th:nth-child(2),
.lvi-deliver-popup .lvi-requested-items td:nth-child(2) { width: 110px; }
.lvi-deliver-popup .lvi-requested-items th:last-child,
.lvi-deliver-popup .lvi-requested-items td:last-child { width: 170px; }

/* Close as Lost is a text-only confirm, so it takes the compact confirm size
   rather than the wide default it was inheriting. */
.popup.lvi-close-lost-popup {
    width: 440px;
    margin: 50px auto;
}

/* Quantity written off as never having arrived — read as a loss, not a total. */
.lvi-app .lvi-line-lost { color: #d64550; }

@media (max-width: 900px) {
    .lvi-detail-body--stacked { flex-direction: column; }
    .lvi-app .dcui-collapsible-side-panel,
    .lvi-app .dcui-collapsible-side-panel.dcui-csp-collapsed { width: 100%; border-left: none; border-top: 1px solid #eef0f4; }
    .lvi-manage-bar-filters { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-summary-head, .lvi-items-head { flex-direction: column; align-items: stretch; }
    /* Let the title band's action buttons + stage select drop onto their own row. */
    .lvi-detail-topbar { flex-wrap: wrap; }
    .lvi-detail-topbar-actions { flex-wrap: wrap; width: 100%; }
    .lvi-stage-select { width: 100%; }
}

/* Master-status "Draft" chip color (the dcui kit ships only success/warning/danger). */
.lvi-app .dcui-text-dark { color: #1f2a37; }

/* ==========================================================================
   Storage level create popup (Add Storage Level) + reusable toggle.
   ========================================================================== */
/* Single-column form — override the item popup's 880px (two-column gallery) width
   so the body fills the content box instead of leaving a right-side gap. */
.popup.lvi-storage-popup { width: 640px; }
.lvi-storage-popup .lvi-form { max-width: none; }
.lvi-storage-popup .lvi-sl-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.45;
}
/* Vertical rhythm. .lvi-form is a flex column with a 14px gap, so nothing here
   collapses — a box's bottom margin and the next section's top margin both stack
   on top of that gap (18 + 20 + 14 = 52px between blocks). Let the gap carry the
   spacing and keep just a small step for the section break. */
/* The subtitle belongs to the title — .lvi-form's own 6px top margin is the whole gap. */
.lvi-storage-popup .tb-mmi-label h1 { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-subtitle { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-section { margin-top: 6px; }
.lvi-storage-popup .lv-border-container { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-custom { padding: 12px 14px; }
.lvi-storage-popup .lvi-wh-error { margin: 0; }
.lvi-storage-popup .lvi-wh-actions { margin-top: 4px; padding-top: 14px; }

/* On/off slider switch (LviToggle). */
.lvi-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}
.lvi-toggle input { opacity: 0; width: 0; height: 0; }
.lvi-toggle .lvi-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: 0.2s;
    cursor: pointer;
}
.lvi-toggle .lvi-toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.25);
}
.lvi-toggle input:checked + .lvi-toggle-slider { background: var(--dcui-primary-color, #2563eb); }
.lvi-toggle input:checked + .lvi-toggle-slider::before { transform: translateX(20px); }
.lvi-toggle.is-disabled { opacity: 0.5; }

/* "Is this level storable?" switch card. */
.lvi-sl-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;
}
.lvi-sl-switch strong { display: block; font-size: 14px; margin-bottom: 3px; }
.lvi-sl-switch span { color: #6b7280; font-size: 12px; line-height: 1.4; }

/* Capacity section — dims when the level isn't storable. */
.lvi-sl-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}
.lvi-sl-status.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.lvi-sl-status.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }

/* ==========================================================================
   Sidebar storage hierarchy tree (LviStorageTree).
   ========================================================================== */
.lvi-ms-tree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a94a6;
}
.lvi-ms-tree-add { cursor: pointer; color: #0096fd; }
.lvi-ms-tree-add:hover { color: #007ad6; }
/* Zero-height probe the IntersectionObserver watches to page in the next group. */
.lvi-tree-sentinel { height: 1px; }

.lvi-tree-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.lvi-tree-row:hover { background: #f4f7fb; }
.lvi-tree-row.selected { background: #e8f3ff; color: #0a6cd1; }
.lvi-tree-caret { width: 14px; flex: 0 0 14px; text-align: center; color: #8a94a6; }
.lvi-tree-icon { color: #8a94a6; font-size: 15px; }
.lvi-tree-row.selected .lvi-tree-icon { color: #0a6cd1; }
.lvi-tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.lvi-tree-actions { display: none; gap: 10px; flex: 0 0 auto; color: #8a94a6; }
.lvi-tree-row:hover .lvi-tree-actions { display: flex; }
.lvi-tree-actions i { cursor: pointer; }
.lvi-tree-actions i:hover { color: #0a6cd1; }
.lvi-tree-actions i.is-disabled,
.lvi-tree-actions i.is-disabled:hover { color: #c4cad4; cursor: not-allowed; }
.lvi-tree-children { margin-left: 16px; border-left: 1px solid #eef0f4; padding-left: 4px; }

/* Add Storage Level — capacity mapping rows + helpers. Mirrors the item popup's
   Custom Fields pattern: repeating rows inside a bordered container, with an
   "+ Add" link in the section head. */
.lvi-storage-popup .lvi-sl-help { display: block; font-size: 12px; color: #8a94a6; margin-top: 4px; }
.lvi-sl-cap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.lvi-sl-cap-row:first-child { margin-top: 0; }
.lvi-sl-cap-row > * { flex: 1 1 0; min-width: 0; margin: 0; }
.lvi-sl-cap-remove {
    flex: 0 0 auto;
    cursor: pointer;
    color: #8a94a6;
}
.lvi-sl-cap-remove:hover { color: #d30505; }
/* The status banner reads as part of the mapping box above it — keep it close. */
.lvi-sl-capacity .lvi-sl-status { margin-top: 10px; }
.lvi-sl-status-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    cursor: help;
}

/* Warehouse wrapper rows in the "All" tree grouping: grouping headers, not
   selectable — icon in the same grey as the other tree icons, and the label a
   shade lighter than the selectable rows so they read as non-interactive. */
.lvi-tree-node.is-warehouse > .lvi-tree-row { font-weight: 600; color: #6b7585; }

/* ==========================================================================
   Storage level detail views (Overview dashboard + Rack item-list).
   ========================================================================== */
.lvi-sl-overview-cols {
    display: grid;
    /* Utilization is the primary column; the Coming-Soon movements panel is narrower. */
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
.lvi-util-list { display: flex; flex-direction: column; gap: 16px; }
.lvi-util-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.lvi-util-label { color: #374151; }
.lvi-util-pct { text-align: right; font-size: 13px; color: #6b7280; font-weight: 600; }
.lvi-util-track { height: 8px; border-radius: 999px; background: #eef0f4; position: relative; }
.lvi-util-fill { height: 100%; border-radius: 999px; background: var(--dcui-primary-color, #2563eb); transition: width 0.3s; }

@media (max-width: 900px) {
    .lvi-sl-overview-cols { grid-template-columns: 1fr; }
}

/* ───────── Table polish: sticky headers (lv_inventory-scoped) ───────── */

/* List views: <div class="scroll-container lvi-table-scroll"><dc-table>.
   DcTable wraps the <table> in <div class="dcui-table dcui-horizontal-scrollable">,
   which has overflow-x:auto — that makes it (not .lvi-table-scroll) the sticky
   header's scroll context. Make THAT wrapper the single scroll container (cap +
   vertical scroll) so the header pins against it, and hand off the height cap
   from the outer .lvi-table-scroll so the two don't both scroll (double scrollbar). */
.lvi-table-scroll:has(.dcui-horizontal-scrollable) {
    max-height: none;
    overflow: visible;
}
.lvi-table-scroll .dcui-horizontal-scrollable {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #c5ccd6 transparent;
}
/* Slim the native scrollbar on the list scroller (default ~15px reads as bulky). */
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar-thumb {
    background: #c5ccd6;
    border-radius: 8px;
}
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.lvi-table-scroll .dcui-t-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #e2e6ec; /* bottom rule that survives sticky */
}

/* List pages (a .lvi-table-scroll directly under .lvi-middle): the list must be
   the ONLY scroller. The 100vh-280px cap above is an estimate that never quite
   matches the chrome above the table, so the few leftover pixels made
   .lvi-middle scroll too (double scrollbar, page chrome creeping under the
   header). Flex the list region to the exact leftover height instead. Desktop
   only — below 1024px the shell switches to natural height and the page itself
   is the scroller. */
@media (min-width: 1025px) {
    .lvi-middle:has(> .lvi-table-scroll) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .lvi-middle > .lvi-table-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
    .lvi-middle > .lvi-table-scroll .dcui-horizontal-scrollable {
        max-height: 100%;
    }
    /* Bulk-selection lists (rack/bin detail): the scroll region already fills the
       middle via flex, but a short table hugs its rows and leaves the sticky
       selection bar floating just beneath them (mid-page). Lay the region out as a
       column and let the bar's top margin collapse the gap so it pins to the bottom
       of the visible area. The table keeps its natural height (flex: 0 1 auto) and
       still shrinks to scroll internally when tall. */
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) {
        display: flex;
        flex-direction: column;
    }
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) > .dcui-horizontal-scrollable {
        flex: 0 1 auto;
        min-height: 0;
    }
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) > .lvi-bulk-bar {
        margin-top: auto;
    }
}

/* Detail item tables (move/order/request "Requested Items") and the
   Complete Order popup table. Cap the detail scroll region so the header
   has something to pin against.
   Exclude DcPopup's outer `.popup-container` (a full-screen fixed overlay that
   also carries `.scroll-container`): a popup rendered inside a `.lvi-detail-page`
   would otherwise inherit this cap, shrinking the modal's scroll region to
   100vh - 320px and making the whole popup card scroll within the page. Popups
   own their own height (see .lvi-putaway-manage-popup); only inner table
   scroll regions should be capped here.
   Exclude LviDropdown's option list too (it also carries `.scroll-container`):
   its own 260px cap above has the same specificity as this rule but comes
   earlier, so without this the menu would stretch to the full page height. */
.lvi-detail-main .scroll-container:not(.popup-container):not(.lv-dropdown-scrollable),
.lvi-detail-page .scroll-container:not(.popup-container):not(.lv-dropdown-scrollable) {
    max-height: calc(100vh - 320px);
}
.lvi-requested-items thead th,
.lvi-complete-items thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #e2e6ec;
}

/* ───────── Table polish: row hover + cursor ───────── */

/* Hover background on every lv_inventory data-table body row. */
.lvi-table-scroll .dcui-t-table tbody tr:hover,
.lvi-requested-items tbody tr:hover {
    background: #f6f9fc;
}

/* Pointer only where the row actually navigates (list views open a detail
   page on click). Detail item rows are not clickable → keep the default cursor. */
.lvi-table-scroll .dcui-t-table tbody tr {
    cursor: pointer;
}

/* Inline inputs in a data-table cell: dc-input-field wraps its <input> in a
   .dcui-form-group that carries a default 20px bottom margin. In a
   vertical-align:middle cell that margin drops below the field, so the browser
   centres field+margin and the input floats up out of line with the plain-text
   cells beside it (seen first in the Dispatch qty column, but the same wherever an
   input shares a row with text — order-detail edit table, Move picks "Take", …).
   Zero the margin so inline fields sit centred with their row. */
.lvi-app .dcui-t-table td .dcui-form-group { margin: 0; }


/* Numbered server-pagination pager (LviPager). The pager only renders when there
   is more than one page, so `:has(.lvi-pager)` below also gates the height handoff. */
.lvi-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 14px 2px 4px;
}
.lvi-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--dcui-line-color, #e5e7eb);
    background: #fff;
    border-radius: var(--dcui-field-radius, 8px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--dcui-text-color, #475467);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lvi-pager-btn:hover:not(:disabled):not(.active) {
    background: #f4f7fb;
    border-color: #cbd5e1;
    color: var(--dcui-primary-color, #2563eb);
}
.lvi-pager-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
.lvi-pager-btn.active {
    background: var(--dcui-primary-color, #2563eb);
    color: #fff;
    border-color: var(--dcui-primary-color, #2563eb);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
    cursor: default;
}
.lvi-pager-btn:disabled {
    opacity: .4;
    cursor: default;
}
.lvi-pager-gap {
    min-width: 22px;
    text-align: center;
    color: #98a2b3;
    user-select: none;
}
/* The pager sits below the capped table scroller inside .lvi-table-scroll. Hand a
   bit of the scroller's height to the pager so .lvi-middle doesn't also scroll
   (avoids a second, outer scrollbar). Only applies when the pager is shown. */
.lvi-table-scroll:has(.lvi-pager) .dcui-horizontal-scrollable {
    max-height: calc(100vh - 340px);
}

/* Inline "loading more" indicator (component: LviInlineLoader) shared by every
   infinite-scroll view — activities feed, list tables, storage tree. A small
   in-flow spinner under the last row, unlike the full-size Data_Loader overlay
   that covers existing rows on every scroll-to-end. */
.lvi-inline-loader {
    padding: 12px 14px;
    color: #667085;
    font-size: 13px;
    text-align: center;
}

/* Activities — row layout: avatar · text (grows) · right-aligned timestamp */
.lvi-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid #f0f1f3;
    color: #344054;
    cursor: pointer;
}
.lvi-activity-row:hover { background: #f9fafb; }
.lvi-activity-row:focus-visible {
    outline: 2px solid #1570ef;
    outline-offset: -2px;
}
/* Connector words ("created", "to") sit a shade lighter than the bold
   actor/entity names, matching the design's dark-grey-on-grey hierarchy. */
.lvi-activity-text .lv-typo-normal-300-f-14 { color: #667085; }
.lvi-activity-user {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lvi-activity-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}
.lvi-activity-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The sentence occupies one line and ellipsises: the feed is for scanning, and the
   full text (plus a structured breakdown of any field diff) lives in the row's
   detail popup. min-width:0 is what lets this flex child shrink below its content. */
.lvi-activity-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvi-activity-time { flex: 0 0 auto; white-space: nowrap; color: #475467; font-weight: 500; }

/* Activities — the outer middle does not scroll; the card fills it and only the
   activity list inside scrolls, so the filter header stays fixed (mirrors the
   "fixed filter bar + inner scroll" pattern used by the All Requests list). */
.lvi-activity-middle {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* The activity pane is a plain column (no card chrome) so it doesn't read as a
   second card stacked inside the main content card — it just fills the middle and
   hosts the fixed filter header + inner scroll. */
.lvi-activity-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-activity-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 12px;
}

/* Activities — fixed filter header (date + search + category chips) */
.lvi-activity-header {
    flex: 0 0 auto;
    background: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 6px;
}
.lvi-activity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 12px;
}
/* Date + user pickers cluster on the left; the search field stays right. */
.lvi-activity-filter-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.lvi-activity-date,
.lvi-activity-user-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* The dropdowns' .lv-dropdown is width:100% by default, which would push them
   below their label in this flex row — constrain so label + control stay inline. */
.lvi-activity-date .lv-dropdown,
.lvi-activity-user-filter .lv-dropdown {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto;
}
/* Keep every control in the filter header at one size (13px) so the date label,
   preset dropdown, search field and category chips read as one consistent row. */
.lvi-activity-header .dcui-dt-label,
.lvi-activity-header .dcui-form-control {
    font-size: 13px;
}
/* Responsive filter bar. The From/To pickers carry a 130px min-width that, paired
   with the preset + user dropdowns, forced the row wider than the pane and pushed
   the User picker over the category chips. Let the date fields shrink so the row
   always fits, then stack progressively as the pane narrows. */
.lvi-activity-date .lvi-date-range-filter { flex-wrap: wrap; }
.lvi-activity-date .lvi-date-field { min-width: 0; flex: 1 1 120px; }
@media (max-width: 1024px) {
    /* Search drops below the pickers and spans the full pane width. */
    .lvi-activity-controls { flex-direction: column; align-items: stretch; }
    .lvi-activity-controls > * { width: 100%; }
}
@media (max-width: 640px) {
    /* Each picker (label + control) takes its own full-width row. */
    .lvi-activity-filter-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-activity-date,
    .lvi-activity-user-filter { width: 100%; }
    .lvi-activity-date .lv-dropdown,
    .lvi-activity-user-filter .lv-dropdown { width: 100%; min-width: 0; flex: 1 1 auto; }
}
/* In range mode the known fill and the uncertainty band abut at `min`; square
   their shared inner corners so the two segments read as one continuous bar. */
.lvi-util-fill--lead { border-radius: 999px 0 0 999px; }
.lvi-util-band { position: absolute; top: 0; bottom: 0; background: #b4bcc8; border-radius: 0 999px 999px 0; }

/* ── Command bar rollout: keyboard highlight, create row, transfer rows ─────── */

/* Keyboard-highlighted entry reads the same as hover. */
.lvi-cmd-panel li.is-active,
.lvi-cmd-palette li.is-active { background-color: #eee; }

/* "Create a new item" footer row in the item type-ahead. Mirrors LviDropdown's
   .lvi-dropdown-create so every create-new affordance reads the same: a sticky,
   rule-topped footer whose link owns the padding. */
.lvi-cmd-create {
    position: sticky;
    bottom: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.lvi-cmd-create a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #2563eb;
    cursor: pointer;
}
.lvi-cmd-create:hover { background: #f3f4f6; }

/* ───────── Floating "back to top" button on long lists ───────── */

/* Pinned to the bottom-right of the list's position:relative wrapper
   (.lvi-table-scroll on the table lists, .lvi-activity-pane on the feed);
   LviScrollTopButton shows it only after the list has scrolled a bit. */
.lvi-scroll-top {
    position: absolute;
    right: 22px;
    bottom: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dfe3e8;
    background: #fff;
    color: #5b6779;
    box-shadow: 0 2px 8px rgba(20, 30, 50, 0.12);
    cursor: pointer;
}
.lvi-scroll-top:hover { color: #0a6cd1; border-color: #0a6cd1; }
/* The feed's scroll element is a child, so the pane anchors the overlay. */
.lvi-activity-pane { position: relative; }

/* Activity detail popup — the full record behind a clamped feed row.
   Pin a width: the base .popup only sets min-width/max-width, so the 100%-wide
   changes table would otherwise stretch the modal to 95% of the viewport. 650px
   is the framework's .popup min-width, so this is as narrow as the modal goes. */
.popup.lvi-activity-detail { width: 650px; }
.lvi-activity-detail .lvi-activity-detail-actor {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lvi-activity-detail .lvi-activity-detail-time { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-summary {
    margin: 14px 0;
    color: #344054;
    line-height: 1.5;
}
/* Unbroken values (a long batch number, a reference string) would otherwise
   run past the pinned 650px width; let them wrap mid-word wherever they land. */
.lvi-activity-detail .lvi-activity-detail-summary,
.lvi-activity-detail .lvi-activity-detail-meta dd,
.lvi-activity-detail .lvi-activity-detail-changes td {
    overflow-wrap: anywhere;
    min-width: 0;
}
.lvi-activity-detail .lvi-activity-detail-summary .lv-typo-normal-300-f-14 { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-meta {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
}
.lvi-activity-detail .lvi-activity-detail-meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: baseline;
}
.lvi-activity-detail .lvi-activity-detail-meta dt { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-meta dd { margin: 0; color: #344054; }
.lvi-activity-detail .lvi-activity-detail-section { margin-top: 18px; }
.lvi-activity-detail .lvi-activity-detail-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
}
.lvi-activity-detail .lvi-activity-detail-transition {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #667085;
}
.lvi-activity-detail .lvi-activity-detail-changes table {
    width: 100%;
    border-collapse: collapse;
}
.lvi-activity-detail .lvi-activity-detail-changes th,
.lvi-activity-detail .lvi-activity-detail-changes td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #f0f1f3;
    /* Diff values are free text and can be long; wrap rather than overflow. */
    overflow-wrap: anywhere;
}
.lvi-activity-detail .lvi-activity-detail-changes th { color: #667085; font-weight: 500; }
.lvi-activity-detail .lvi-activity-detail-changes td:first-child { white-space: nowrap; }
.lvi-activity-detail .lvi-activity-detail-raw {
    margin: 0;
    color: #667085;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.lvi-activity-detail .lvi-activity-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Not-found record view --------------------------------------------------- */
/* .lvi-detail-page is a full-height flex column, so the lone empty-state
   remark would otherwise cling to the breadcrumb bar and read as a render
   glitch. `margin: auto` centres it in the leftover space. */
.lvi-app .lvi-not-found .lvi-empty { margin: auto; padding: 40px 20px; }

/* Coming-soon placeholder ------------------------------------------------ */
.lvi-app .lvi-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: var(--lvi-muted, #8a94a6);
    gap: 6px;
}
.lvi-app .lvi-coming-soon-icon { font-size: 26px; opacity: 0.6; }
.lvi-app .lvi-coming-soon-title { font-size: 15px; font-weight: 600; }
.lvi-app .lvi-coming-soon-sub { font-size: 13px; opacity: 0.85; }

/* Unified line-remove control ------------------------------------------- */
.lvi-app .lvi-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--lvi-muted, #8a94a6);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.lvi-app .lvi-remove-btn:hover:not(:disabled) { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.lvi-app .lvi-remove-btn:disabled { opacity: 0.5; cursor: default; }

/* Move detail items table ------------------------------------------------ */
.lvi-app .lvi-requested-items .lvi-move-qty-input { min-width: 80px; }
.lvi-app .lvi-requested-items th:nth-child(4),
.lvi-app .lvi-requested-items td:nth-child(4) { min-width: 96px; }
/* The move table's own rules used to live here, sizing `th`/`td` by percentage.
   It is no longer a <table>: it renders through LviItemLineList as a CSS grid on
   .lvi-cmd-table, whose only wrapper here is .lvi-move-items-scroll — so nothing
   matched .lvi-move-items any more. Its column widths are now the `width` values
   in that page's lineColumns(), and the horizontal scroll is the shared one on
   .lvi-cmd-table (see its comment above). */

/* Unify the in-dropdown search field spacing across all dropdowns --------- */
/* dc-search-field renders `.has-search-field.lv-input-filed-no-outline` as the
   first child of the panel. Different contexts (form vs. sidebar vs. inline)
   otherwise inherit different paddings; pin them all to the densest existing
   value so loose ones tighten rather than every one inflating. */
.lvi-app .lv-dropdown .dcui-dropdown-panel .has-search-field {
    padding: 5px 7px;
    margin: 0;
    box-sizing: border-box;
}
.lvi-app .lv-dropdown .dcui-dropdown-panel .has-search-field .lv-input-filed-no-outline {
    width: 100%;
    margin: 0;
}

/* --- Floating bulk-action bar (selection pill) --- */
.lvi-bulk-bar {
    position: sticky;
    bottom: 20px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 26px;
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 14px auto 6px;
    padding: 9px 12px 9px 20px;
    border-radius: 10px;
    background: #3f4550;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.lvi-bulk-bar-count {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    white-space: nowrap;
}
.lvi-bulk-bar-clear {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 14px;
}
.lvi-bulk-bar-clear:hover { opacity: 0.75; }
.lvi-bulk-bar-actions { display: flex; align-items: center; gap: 4px; }
.lvi-bulk-bar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.lvi-bulk-bar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.lvi-bulk-bar-btn:disabled { opacity: 0.5; cursor: default; }
.lvi-bulk-bar-btn.is-danger:hover:not(:disabled) { background: rgba(255, 99, 99, 0.25); }

/* --- Bulk destination popup (per-row quantity table) --- */
/* Vertical rhythm: the title (h1, escaped default UA margin) and the intro
   paragraph (default browser <p> margins) both add spacing on top of
   .lvi-form's own 14px flex gap, so title->intro and intro->table came out
   uneven. Zero the intro's margins and pin the title's to the same 14px the
   gap already uses everywhere else in the form, so both gaps match. */
.lvi-bulk-dest-popup .tb-mmi-label h1 { margin-bottom: 14px; }
.lvi-bulk-dest-popup .lvi-confirm-text { margin: 0; }
.lvi-bulk-dest-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.lvi-bulk-dest-table thead th {
    padding: 6px 8px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lvi-muted, #8a8f98);
    text-align: left;
    border-bottom: 1px solid var(--dcui-line-color, #e8e8e8);
    white-space: nowrap;
}
.lvi-bulk-dest-table tbody td {
    padding: 9px 8px;
    font-size: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--dcui-line-color, #e8e8e8);
}
.lvi-bulk-dest-table tbody tr:first-child td { border-top: 0; }
/* Item column takes the slack; the qty/available columns stay compact. */
.lvi-bulk-dest-col-item { width: 100%; }
.lvi-app .lvi-bulk-dest-col-dest { min-width: 180px; }
.lvi-bulk-dest-col-qty { width: 96px; }
.lvi-bulk-dest-col-avail { width: 1%; white-space: nowrap; text-align: right; color: var(--lvi-muted, #8a8f98); }
.lvi-bulk-dest-name { font-weight: 600; }
.lvi-bulk-dest-sub { margin-left: 8px; color: var(--lvi-muted, #8a8f98); font-size: 12px; }
.lvi-bulk-dest-muted { color: var(--lvi-muted, #8a8f98); }
.lvi-bulk-dest-note { display: block; margin-top: 2px; color: var(--lvi-muted, #8a8f98); font-size: 12px; }
.lvi-bulk-dest-blocked .lvi-bulk-dest-name { color: var(--lvi-muted, #8a8f98); }
/* The table sits inside .lv-border-container, whose create-form styling hides
   labels, strips the input border, and forces .dcui-form-group to 100% width.
   That's wrong for this per-row quantity table — pin a compact width and restore
   a visible, clearly-editable bordered box (DcInputField's root is
   .dcui-form-group; a .dcui-input-field selector would match nothing). */
.lvi-form .lv-border-container .lvi-bulk-dest-col-qty .dcui-form-group { width: 88px; padding: 0; margin: 0; }
.lvi-form .lv-border-container .lvi-bulk-dest-col-qty .dcui-form-control {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    line-height: 1.4;
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    text-align: right;
}

/* --- Shipment putaway popup (history + remaining allocation) ---
   Both tables (Move requests, Allocate remaining) share the bulk-destination
   popup's column conventions so the two blocks read as one consistent layout:
   the label/reference/destination columns take the slack, Qty stays compact and
   right-aligned, and the allocate row's Qty input is the same compact bordered
   box as the bulk popup (its DcInputField would otherwise render full width). */
.lvi-app .lvi-putaway-totals {
    display: flex;
    align-items: baseline;
    gap: 16px 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--lvi-muted, #8a8f98);
}
.lvi-app .lvi-putaway-totals strong { color: #1f2a37; font-weight: 600; }
.lvi-app .lvi-putaway-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lvi-app .lvi-putaway-table th {
    padding: 6px 8px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lvi-muted, #8a8f98);
    text-align: left;
    border-bottom: 1px solid var(--dcui-line-color, #e8e8e8);
    white-space: nowrap;
}
.lvi-app .lvi-putaway-table td {
    padding: 9px 8px;
    font-size: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--dcui-line-color, #e8e8e8);
    word-break: break-word;
}
.lvi-app .lvi-putaway-table tbody tr:first-child td { border-top: 0; }
/* Shared columns: ref/dest take the slack; qty compact + right-aligned; the
   stage/actions columns hug their content. */
.lvi-app .lvi-putaway-col-ref { width: auto; }
.lvi-app .lvi-putaway-col-dest { width: auto; }
.lvi-app .lvi-putaway-col-qty { width: 96px; text-align: right; white-space: nowrap; }
.lvi-app .lvi-putaway-col-stage { width: 120px; }
.lvi-app .lvi-putaway-col-actions { width: 40px; text-align: right; }
/* A move row is a link to its request detail page — same pointer + hover fill the
   command tables use, with the reference reading as the link itself. */
.lvi-app .lvi-putaway-move-row { cursor: pointer; }
.lvi-app .lvi-putaway-move-row:hover { background: #f8fafc; }
.lvi-app .lvi-putaway-move-row .lvi-putaway-col-ref { color: #0096fd; }
/* The allocate row's Destination dropdown needs real room; keep it aligned with
   the Qty box beside it. */
.lvi-app .lvi-putaway-alloc-table .lvi-putaway-col-dest { min-width: 180px; }
.lvi-app .lvi-putaway-alloc-table th.lvi-putaway-col-qty { text-align: left; }
/* Restore a compact, clearly-editable bordered Qty box (DcInputField's root is
   .dcui-form-group; it otherwise fills the cell width). Mirrors the bulk popup. */
.lvi-form .lvi-putaway-alloc-table .lvi-putaway-col-qty .dcui-form-group { width: 100%; padding: 0; margin: 0; }
.lvi-form .lvi-putaway-alloc-table .lvi-putaway-col-qty .dcui-form-control {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    line-height: 1.4;
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    text-align: right;
}
.lvi-app .lvi-putaway-add-btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Stock placement popup — a compact single-column modal (the item form lives in
   its own popup). The header strip identifies the item being placed.
   -------------------------------------------------------------------------- */
.popup.lvi-placement-popup {
    width: 520px;
}
.lvi-placement-popup .lvi-placement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--dcui-line-color, #e5e7eb);
    border-radius: 6px;
}
.lvi-placement-popup .lvi-placement-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.lvi-placement-popup .lvi-placement-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lvi-placement-popup .lvi-placement-item-sku {
    font-size: 12px;
}
.lvi-placement-popup .lvi-placement-edit {
    flex: 0 0 auto;
}

/* Item Stocks tab breakdown: every cell stays on one line, as on the movements
   table; the DcTable wrapper scrolls horizontally when the columns don't fit. */
.lvi-stock-breakdown-table th,
.lvi-stock-breakdown-table td { white-space: nowrap; }

/* Lot code cell on the item Stocks tab. The code is an identifier, so it reads
   as one rather than as prose. A code has no spaces, so an over-long one would
   force the column to its full width and push the other columns out of view;
   clip it with an ellipsis instead (the cell's title carries the full code on
   hover). The cap sits on an inner span: auto table layout ignores max-width
   on the <td> itself. */
.lvi-lot-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lvi-lot-cell .lvi-lot-code {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* The lot a global-search deep link named (?lot=CODE). dc_ui_kit renders the
   <tr> itself and takes only a uniform row class, so the call-out lives on this
   first cell — the left border reads as marking the start of its row. */
.lvi-lot-highlight {
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--dcui-primary, #2f6fed);
    background: color-mix(in srgb, var(--dcui-primary, #2f6fed) 8%, transparent);
}

/* Capacity signals. Advisory, never blocking, so these read as a notice rather
   than an error — nothing here is paired with a disabled control. Class names
   are lvi-prefixed and app-owned, so they follow the unscoped convention the
   other lvi-* rules use rather than the .lvi-app scope reserved for shared
   dcui-/lv- selectors. */
.lvi-capacity-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.lvi-capacity-notice-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a6100;
}
.lvi-capacity-notice-row i { margin-top: 2px; flex-shrink: 0; }
/* Batch hosts (bulk destination, putaway allocation) render ONE notice for the
   whole table rather than one inside each ~90px quantity cell, where the
   sentence wrapped to five lines and stretched its row. Standing alone under
   the table it needs a frame to read as a message; the palette is the app's
   warn tone, as used by .lvi-sl-status.is-warn. */
.lvi-capacity-notice-block {
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 6px;
    background: #fffbeb;
}
.lvi-capacity-notice-block .lvi-capacity-notice-row { color: #b45309; }

/* An overfull bar. The fill width tops out at the end of the track, so the
   colour — not the bar length — is what separates "full" from "well past full";
   the exact figure (e.g. 200%) is in the label. A vivid red, saturated enough
   to read as a warning against the blue under-capacity fill. */
.lvi-util-track--over .lvi-util-fill {
    background: #dc2626;
}

/* Over-capacity report. */
.lvi-oc-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
.lvi-oc-toggle-label { font-size: 13px; color: #4b5563; }
.lvi-over-capacity-table { width: 100%; border-collapse: collapse; }
.lvi-over-capacity-table th,
.lvi-over-capacity-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: top;
}
.lvi-over-capacity-table th { font-size: 12px; color: #6b7280; font-weight: 600; }
.lvi-oc-name { font-weight: 600; }
.lvi-oc-flag {
    margin-left: 6px;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* ==========================================================================
   LviSplitButton — the create pages' "Create ▾" button (see LviSplitButton.js).
   Two kit buttons welded into one control: the label half keeps the left
   corners, the caret half the right, and the caret is pulled 1px left so their
   touching borders read as a single divider rather than a 2px seam.
   ========================================================================== */
.lvi-app .lvi-split-button { display: inline-flex; align-items: stretch; }
.lvi-app .lvi-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* The caret span carries the button skin, so the toggle itself contributes no
   chrome — no padding, no #eee "open" wash, and none of the toggle's own :after
   caret (we render an <i> instead, matching the All Requests create menu). */
.lvi-app .lvi-split-menu .dcui-dt-label { padding: 0; height: auto; line-height: 1; background-color: transparent; }
.lvi-app .lvi-split-menu .dcui-dt-label::after { display: none; }

.lvi-app .lvi-split-caret {
    margin-left: -1px;
    padding-left: 12px;
    padding-right: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(255, 255, 255, 0.45);
}

/* The open panel is placed in JS (LviSplitButton.positionPanel) as a fixed popper
   that drops down, or up when down does not fit. The kit's own downward placement
   is left standing underneath it as the fallback.
   Both of dc-ui-kit's open animations have to go for that, exactly as they do for
   .lv-dropdown above: the `transition: all .2s` tweens our inline top/bottom, so
   the panel slides in from wherever it last sat (a fifth of a second during which
   it is somewhere it was never meant to be), and `dcuiAnimateSubMenu` reads as a
   jump. The base panel is opacity:0 — the animation's `forwards` used to hold it
   visible — so pin opacity:1 in their place. */
.lvi-app .lvi-split-button .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}
.lvi-app .lvi-split-button .lvi-split-action { white-space: nowrap; cursor: pointer; }

/* The Stocks tab's scope filter, leading the tab it scopes. Everything below —
   the three stat cards and the breakdown — answers for whichever level this
   names, so it reads before them rather than under them. Label + control on
   the left, the same row shape as the Activities date/user filters; the
   dropdown's default width:100% is constrained so the pair stays inline. */
.lvi-stock-scope-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.lvi-stock-scope-bar .lv-dropdown {
    width: auto;
    min-width: 200px;
    flex: 0 1 260px;
}
/* Filter, heading, cards, table: four rows of different weight stacked in one
   column, so each gets its own breathing room rather than the 12px a heading
   sitting directly on its table would take. */
.lvi-stock-scope-bar + .lvi-section-title { margin-bottom: 16px; }
.lvi-stock-breakdown { margin-top: 20px; }
 .docld-notification-container {
    position: relative;
    min-height: 500px;
}

.docld-notification-section {
    padding-top: 30px;
}

.docld-notification-section__section-title {
    font-weight: 500;
    font-size: 15px;
}

.docld-notification-section__section-item__container {
    margin-top: 15px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 7px;
}

.docld-notification-section__section-item {
    background-color: white;
    border-bottom: 1px solid rgb(226, 226, 226);
    color: #5C5C5C;
}

.docld-notification-section__section-item__content {
    display: flex;
    justify-content: space-between;
    padding: 13px 15px;
    align-items: center;
    height: 45px;
}

.docld-notification-section__section-item__container__icon-container {
    display: flex;
    gap: 10px;
    flex: 0 0 30%;
    padding-left: 3px;
    align-items: center;
}

.docld-notification-section__section-item__container__mark_as_read_btn {
    padding: 8px 10px 9px;
    height: 30px;
    font-size: 14px;
}

.docld-notification-section__section-item__container__icon-container__icon {
    color: var(--dcui-secondary-color);
}

.docld-notification-section__section-item__container__icon-container__title {

}

.docld-notification-section__section-item__container__description-container {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 5px;
}

.docld-notification-section__section-item__container__description-container__user-icon {

}

.docld-notification-section__section-item__container__description-container__description {

}

.docld-notification-section__section-item__container__date-container {

}

.docld-notification-section__section-item__container__date-container__created_date {

}

.docld-notification-section__section-item__container .docld-notification-section__section-item:first-child {
    border-radius: 7px 7px 0 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:last-child {
    border-radius: 0 0 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:only-child {
    border-radius: 7px 7px 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);
    cursor: pointer;
}

.docld-notification-section__section-item__container__date-container__unread {
    color: var(--dcui-primary-color);
    width: 15px;
}

.docld-notification-section__section-item__container__date-container__unread__symbol {

}

.docld-notification-section__section-item.unread {
    color: black;
    font-weight: 500;
}

.docld-notification-section__no-notification__container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    gap: 15px;
    flex-direction: column;
}

.docld-notification-section__no-notification__container__image {
    width: 90px;
}

.docld-notification-section__no-notification__container__text {
    font-weight: 700;
    font-size: 26px;
}

@media screen and (max-width: 1025px) {
    .docld-notification-section__section-item__content {
        height: 70px;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

    .docld-notification-section__section-item__content{
        height: 90px;
        display: grid;
        align-items: center;
    }
    .docld-notification-section__section-item__container__date-container__unread{
        grid-column: 5 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__icon-container{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .docld-notification-section__section-item__container__description-container{
        grid-column: 1 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__date-container{
        grid-column: 4 / 6;
        grid-row: 1 / 2;
        display: flex;
        justify-content: flex-end;
    }
    .docld-notification-section__section-item__container__description-container__description{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 270px;
    }
}
 /**
 * Declarations
 */
:root {
    
    --dark-primary-color: #181818;
    --dark-secondary-color: #242424;
    --dark-tertiary-color: #424242;
    --dark-quaternary-color: #ffffff;
    --dark-quinary-color:#000000;
    --dark-senary-color: #7b7b7b;
    --dark-seven-color: #c7c7c7;
    --dark-eight-color:#3e3e3f;
    --dark-color-text: #ffffff;
    --dark-headings-color: #ffffff;
    --dark-background-color: #515151;
    
    --light-primary-color: #181818;
    --light-secondary-color: #000000;
    --light-tertiary-color: #ffffff;
    --light-quaternary-color: #ffffff;
    --light-quinary-color:#dbdbdb;
    --light-senary-color: #7b7b7b;
    --light-color-text: #000000;
    --body-color: #000000;
    --light-headings-color: #000000;
    --success-color: #06c349;
    --error-color: #dd0707;
    --warning-color: #dd6007;
    --menu-selected-color:  rgba(0, 0, 0, 1);
}

/**
 * Normalization
 */

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

p {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dc-headings-color);
}


/**
 * Helpers
 */

.validation_errors {
    background-color: rgb(131, 0, 0);
    border-radius: 3px;
    height: auto;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    max-width: 285px;
    position: absolute;
    text-align: left;
    bottom: 70px;
    width: auto;
    z-index: 99993;
    padding: 10px 0px;
}

.validation_errors:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #700202;
    top: 100%;
    left: 50%;
}

.validation_errors ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    list-style-type: none;
}

.validation_errors li {
    padding-right: 12px;
    word-wrap: break-word;
}

.relative {
    position: relative !important;
}

.initial {
    position: initial !important;
}

.center-div {
    margin: 0 auto;
}

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

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

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

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

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.f-w-500 {
    font-weight: 500;
}

.f-w-600 {
    font-weight: 600;
}

.f-w-700 {
    font-weight: 700;
}

.f-s-20 {
    font-size: 20px;
}

.f-s-18 {
    font-size: 18px;
}

.f-s-22 {
    font-size: 22px;
}

.f-s-25 {
    font-size: 25px;
}

.f-s-30 {
    font-size: 30px;
}

.f-s-35 {
    font-size: 35px;
}
.l-h-1 {
    line-height: 1;
}

.line-height-1 {
    line-height: 1;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.m-10 {
    margin: 10px !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-r-auto {
    margin-right: auto !important;
}

.m-r-0 {
    margin-right: 0px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

.m-l-0 {
    margin-left: 0px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-lr-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-25 {
    padding: 25px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-b-0 {
    padding-bottom: 0px !important;
}

.p-b-2 {
    padding-bottom: 2px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-r-0 {
    padding-right: 0px !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-r-20 {
    padding-right: 20px !important;
}

.p-r-35 {
    padding-right: 35px !important;
}

.p-l-0 {
    padding-left: 0px !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-l-20 {
    padding-left: 20px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.p-lr-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.color-inherit {
    color: inherit;
}

.text-success {
    color: #69bb67 !important;
}

.text-warning {
    color: #dd992d !important;
}

.text-danger {
    color: #ed1010 !important;
}

.text-notice {
    color: #4e4e4e !important;
}

.text-grey {
    color: #b3b3b3 !important;
}


.line-clamp-8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-7 {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-wrap-anywhere{
    overflow-wrap: anywhere;
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.vertical-align-sub{
    vertical-align: sub
}
.w-20 {
    width: 20px;
}

.w-30 {
    width: 30px;
}

.w-40 {
    width: 40px;
}

.w-50 {
    width: 50px;
}

.w-70 {
    width: 70px;
}

.w-100 {
    width: 100px;
}

.w-150 {
    width: 150px;
}

.w-200 {
    width: 200px;
}

.w-250 {
    width: 250px;
}

.w-300 {
    width: 300px;
}

.w-400 {
    width: 400px;
}

.w-450 {
    width: 450px;
  }
  
.w-500 {
    width: 500px;
}

.w-550 {
    width: 550px;
}


.w-600 {
    width: 600px;
}

.w-10p {
    width: 10%;
}

.w-50p {
    width: 50%;
}

.w-60p {
    width: 60%;
}

.w-70p {
    width: 70%;
}

.min-w-50p {
    min-width: 50%;
}

.max-w-50 {
    max-width: 50px !important;
}

.max-w-100 {
    max-width: 100px !important;
}

.max-w-145 {
    max-width: 145px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-250 {
    max-width: 250px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

.max-w-360 {
    max-width: 360px !important;
}

.max-w-400 {
    max-width: 400px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-900 {
    max-width: 900px !important;
}

.max-h-100 {
    max-height: 100px !important;
}

.max-h-150 {
    max-height: 150px !important;
}

.max-h-200 {
    max-height: 200px !important;
}

.max-h-250 {
    max-height: 250px !important;
}

.max-h-270 {
    max-height: 270px !important;
}

.max-h-300 {
    max-height: 300px !important;
}

.max-h-350 {
    max-height: 350px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-h-500 {
    max-height: 500px !important;
}

.max-h-600 {
    max-height: 600px !important;
}

.h-0{
    height: 0 !important;
}

.h-75{
    height: 75px !important;
}

.h-150 {
    height: 150px !important;
}
.h-170 {
    height: 170px !important;
}
.h-200 {
    height: 200px !important;
}

.h-300 {
    height: 300px !important;
}

.h-500 {
    height: 500px !important;
}

.min-w-40 {
    min-width: 40px !important;
}

.min-w-50 {
    min-width: 50px !important;
}

.min-w-70{
    min-width: 70px !important;
}

.min-w-100 {
    min-width: 100px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

.min-w-300 {
    min-width: 300px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.min-w-400 {
    min-width: 400px !important;
}

.min-w-450{
    min-width: 450px !important;
}

.min-w-500 {
    min-width: 500px !important;
}

.min-w-550 {
    min-width: 550px !important;
}

.min-w-600 {
    min-width: 600px !important;
}

.min-h-50 {
    min-height: 50px !important;
}

.min-h-100 {
    min-height: 100px !important;
}

.min-h-150 {
    min-height: 150px !important;
}

.min-h-200 {
    min-height: 200px !important;
}

.min-h-250 {
    min-height: 250px !important;
}

.min-h-270 {
    min-height: 270px !important;
}

.min-h-300 {
    min-height: 300px !important;
}

.min-h-350 {
    min-height: 350px !important;
}

.min-h-450 {
    min-height: 450px !important;
}

.min-h-500 {
    min-height: 500px !important;
}

.min-h-600 {
    min-height: 600px !important;
}

.min-h-650 {
    min-height: 650px !important;
}

.display-none {
    display: none;
}

.flex-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-directions-column {
    flex-direction: column;
}

.flex-directions-row {
    flex-direction: row;
}

.gap-5{
    gap: 5px;
}

.gap-10{
    gap: 10px;
}

.gap-15{
    gap: 15px;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-baseline {
    align-items: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.border-bottom {
    border-bottom: 1px solid #dcdcdc;
}

.red-border {
    border: 1px solid red !important;
}

.box-shadow-none {
    box-shadow: none;
}

.ellipsis {
    text-overflow: ellipsis;
    /* enables ellipsis */
    white-space: nowrap;
    /* keeps the text in a single line */
    overflow: hidden;
    /* keeps the element from overflowing its parent */
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

.white-space-nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.no-border {
    border: none;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.r-45 {
    -ms-transform: rotate(45deg);
    /* IE 9 */
    transform: rotate(45deg);
}

.r-222 {
    -ms-transform: rotate(222deg);
    /* IE 9 */
    transform: rotate(222deg);
}


/*
* Image
*/
.object-fit_cover {
    object-fit: cover;
}

/**
 * Form elements
 */

.form-group {
    margin-bottom: 20px;
}

.form-group.horizontal {
    display: table;
    width: 100%;
}

.form-group.horizontal>* {
    display: table-cell;
}

.form-group.horizontal>.fld-label {
    width: 33%;
}

.form-group.horizontal>.fld-label.with-colon {
    position: relative;
}

.form-group.horizontal>.fld-label.with-colon:after {
    content: ':';
    position: absolute;
    right: 5px;
}

.fld-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
    color: var(--color-text);
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 10px 10px;
    font-size: 15px;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #939393;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
}

.dark-mode .form-control {
    color: #fdfdfd;
    background-color: var(--dark-secondary-color);
}

textarea.form-control {
    min-height: 110px;
    max-width: 100%;
    max-height: 200px;
    min-width: 100%;
    line-height: 1;
}

textarea.form-control.no-resize {
    resize: none;
}

.form-control:focus {
    border-color: var(--dark-primary-color);
    background-color: #fff;
    outline: 0 !important;

}

.dark-mode .form-control:focus {
    border-color: var(--dark-primary-color);
    border: 1px solid #939393;
    background-color:  var(--dark-secondary-color);
}

.form-control:disabled {
    background-color: #606060;
}

.form-control::-webkit-input-placeholder {
    color: #c8c8c8;
    /* Chrome/Opera/Safari */
    font-weight: 300;
}

.form-control::-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 19+ */
    font-weight: 300;
}

.form-control:-ms-input-placeholder {
    color: #c8c8c8;
    /* IE 10+ */
    font-weight: 300;
}

.form-control:-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 18- */
    font-weight: 300;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

.dark-mode .form-control:-webkit-autofill,
.dark-mode .form-control:-webkit-autofill:hover,
.dark-mode .form-control:-webkit-autofill:focus,
.dark-mode .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(77, 77, 77) inset;
    -webkit-text-fill-color: #ffffff;
}

.form-control.has-error {
    border-color: var(--error-color);
}

.icon-control {
    position: relative;
}

.icon-control .ic-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    -webkit-transition: color ease-in-out 0.15s;
    -moz-transition: color ease-in-out 0.15s;
    transition: color ease-in-out 0.15s;
}

.icon-control .ic-icon:hover {
    color: var(--dark-secondary-color);
}

.dark-mode .icon-control input{
    background-color:var(--dark-secondary-color)
}

.dark-mode .icon-control .ic-icon:hover {
    color: var(--dark-Senary-color);
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 4px 0 0;
    line-height: normal;
    cursor: pointer;
    box-sizing: border-box;
}

.radio label,
.checkbox label {
    display: inline-block;
    min-height: 20px;
    cursor: pointer;
    position: relative;
    padding-left: 25px !important;
    margin-right: 15px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 20px;
}

.radio label:before,
.checkbox label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.radio label:before {
    bottom: 2.5px;
    border-radius: 99px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
    transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
}

.checkbox label:before {
    top: -0.6px;
    border-radius: 3px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.radio input[type=radio]:checked+label:before {
    border-width: 5px;
    border-color: var(--light-primary-color);
}

.checkbox input[type=checkbox]:checked+label:before {
    border-width: 8.5px;
    border-color: var(--light-primary-color);
}

.checkbox label {
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.checkbox label:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: -2px;
    font-size: 11px;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    border-radius: 3px;
}

.checkbox input[type=checkbox]:checked+label:after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    color: #fff;
    font-weight: 700;
}

.radio input[type="radio"]:disabled+label,
.checkbox input[type="checkbox"]:disabled+label {
    cursor: not-allowed;
}

.button {
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 40px;
    border: 1px solid var(--quaternary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--primary-color);
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--quaternary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 0;
    padding: 9px 20px 8px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dark-mode .button.login {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.dark-mode .button {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button.login {
    background-color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
    color: black;
}

.light-mode .button {
    background-color: var(--light-primary-color);
    border: 1px solid #939393 !important;
    color: white;
}

/*
VS Button Style
 */
.button.button-blue {
     border:1px solid #025281 !important;
     color: #fff;
     background-color: #025281 !important;
 }
.button.button-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-white-blue {
    border:1px solid transparent !important;
    color: #0079c0;
    background-color: #fff !important;
}
.button.button-white-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-flat-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #757575;
}
.button.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}
.button.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}
.button.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}
.button-negative {
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.button-transparent {
    background-color: transparent;
    border-color: #ffffff;
    color: #757575;
}

.button-flat-light {
    background-color: #0079C0;
    border-color: #0079C0;
    border-radius: 0;
}

.button-flat-transparent {
    background-color: transparent;
    border-color: transparent;
    color: #757575;
}

.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}

.button.action-btn {
    padding: 3px 11px 22px 11px !important;
    height: 20px !important;
    text-align: center !important;
}

.button.action-btn:hover {
    background-color: #efefef !important;
}

.button:hover {
    background-color: var(--primary-color) !important;
    color: var(--quaternary-color);
    border-color: var(--primary-color);
}
.dark-mode .button:hover {
    background-color: var(--dark-quinary-color) !important;
    color: var(--dark-quaternary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button:hover {
    background-color: var(--light-secondary-color) !important;
    color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
}

.button:active {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}

.button-transparent:hover {
    background-color: #ededed;
    color: white;
}

.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}

.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}

.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.dark-mode .button.doing-ajax ,
.light-mode .button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.button-minwidth {
    min-width: 100px;
}

.mini-button {
    min-width: 23px;
    max-width: 23px;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    height: 15px !important;
    line-height: 1 !important;
    padding: 5px 1px 15px !important;
}

.mini-button i {
    background-color: transparent !important;
}

.button .ajax-ellipsis-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-primary-color);
    border:  var(--dark-primary-color);
}

.ajax-ellipsis {
    display: inline-block;
    position: absolute;
    width: 54px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ajax-ellipsis div {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.ajax-ellipsis div:nth-child(1) {
    left: 5px;
    animation: ajax-ellipsis1 0.6s infinite;
}

.ajax-ellipsis div:nth-child(2) {
    left: 5px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(3) {
    left: 23px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(4) {
    left: 41px;
    animation: ajax-ellipsis3 0.6s infinite;
}

.button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

.dark-mode .button.doing-ajax .ajax-ellipsis-wrap,
.light-mode .button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

@keyframes ajax-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ajax-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ajax-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/**
Data loader
**/
.data-loader {
    display: inline-block;
    height: 9px;
    width: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dark-secondary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}

.data-loader div:nth-child(1) {
    animation: data-loader1 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(2) {
    animation: data-loader2 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(3) {
    animation: data-loader2 0.6s infinite;
    left: 23px;
}

.data-loader div:nth-child(4) {
    animation: data-loader3 0.6s infinite;
    left: 41px;
}

.data-loader-wrap {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(255, 255, 255);

}

@keyframes data-loader1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes data-loader3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes data-loader2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/* Select wrapper */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    min-width: 100px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper:after,
.search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: #fff;
}

.dark-mode .select-wrapper:after,
.dark-mode .search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: var(--secondary-color);
}
.dark-mode .select-wrapper::before,
.dark-mode .search-selection:before {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color:  var(--secondary-color);
}

/*.select-wrapper select:invalid {
    color: #c2c3c5;
}*/
.select-wrapper.with-icon:after {
    width: 25px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #c8c8c8;
    background-color: transparent;
}

.select-wrapper.with-icon select {
    padding-right: 40px;
}

/*.select-wrapper select option,
.select-wrapper select optgroup {
    color: initial;
}*/
.select-wrapper option[value='?'],
.select-wrapper option[value='? undefined:undefined ?'] {
    display: none;
}

/**
 * Media Library
 */
.ml-popup {
    top: 500px !important;
}

/**
 * UI Components
 */
.ajax-notice {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    background-color: var(--secondary-color);
    border-radius: 3px;
    text-align: left;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
    padding: 15px 15px 13px;
    width: 300px;
    max-width: 320px;
    border-left: 5px solid transparent;
    cursor: default;
    color: var(--color-text);
}

.dark-mode .ajax-notice {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}


.light-mode .ajax-notice {
    background-color: var(--light-primary-color);
    color: var(--light-quaternary-color);
}

.ajax-notice .an-message {
    padding-right: 30px;
    font-size: 14px;
}

.ajax-notice .an-dismisser {
    position: absolute;
    top: 11px;
    right: 9px;
    width: 22px;
    height: 22px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    background-color: var(--tertiary-color);
    border-radius: 100%;
    font-size: 16px;
    font-weight: 600;
}

.ajax-notice .an-dismisser:hover {
    background-color: #c9c5c5;
}

.ajax-notice.success {
    border-left-color: var(--success-color);
}

.ajax-notice.error {
    border-left-color: var(--error-color);
}

.ajax-notice.warning {
    border-left-color: var(--warning-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
}

.dropdown-menu.right {
    left: auto;
    right: 0;
}
.dark-mode .dropdown-menu{
    background-color: #5d5d5d;
}

.dropdown-menu.table-action-left {
    left: 50px !important;
}

.dropdown .dropdown-menu.notification {
    cursor: auto;
    min-width: 410px;
    left: -340px;
    top: 71px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.megaSearch {
    cursor: auto;
    min-width: 410px;
    left: -2x;
    top: 51px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.bottom-left {
    left: 80px;
    top: auto;
    bottom: 0;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu>li {
    display: block;
    position: relative;
}

.dropdown-menu>li>a {
    display: block;
    padding: 13px 20px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.dropdown-menu>li>a>i {
    width: 16px;
    margin-right: 3px;
}

.dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.dark-mode .dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--dark-quinary-color);
}

.dark-mode .dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.light-mode .dropdown-menu>li>a:hover {
    color: var(--light-quaternary-color);
    background-color: var(--light-secondary-color);
}

.light-mode .dropdown-menu>li>a:hover .notification-icon {
    color: var(--light-quaternary-color);
}

.dropdown-menu.light>li>a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}


.dropdown-menu>li>a.doing-ajax {
    pointer-events: none;
}

.dropdown-menu>li>a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dropdown-menu.rounded{
    border-radius: 5px;
}


/* Dropdown search */
.search-selection {
    position: relative;
}

.search-selection .output {
    cursor: default;
    padding-right: 30px;
}

.search-selection .search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    min-width: 160px;
    margin-bottom: 35px;
}

.search-selection.open .search-dropdown {
    display: block;
}

.search-selection .search-filter {
    padding-left: 6px;
    padding-right: 6px;
    height: 30px;
    font-size: 13px;
}

.search-selection .result-list {
    padding: 0;
    margin: 5px 0 0;
    list-style-type: none;
    max-height: 210px;
}

.search-selection .result-list li label {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #fff;
    font-size: 13px;
    color: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    text-align: left;
}

.search-selection .result-list li label .rl-item-additional {
    display: block;
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 2px;
}

.search-selection .result-list li:last-child label {
    border-bottom: none;
}

.search-selection .result-list li label input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

.search-selection .result-list li label:hover,
.search-selection .result-list li label:focus,
.search-selection .result-list li.active label {
    background-color: #e5e5e5;
}

.flip-horizontal {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/**
 * UI Transitions
 */
.fade-up-enter-active,
.fade-up-leave-active {
    transition: all 0.2s ease-out;
}

.fade-up-enter-from,
.fade-up-leave-to {
    transform: translateY(100px);
    opacity: 0;
}

/**
 * Layout
 */
.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-container::-webkit-scrollbar {
    width: 5px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #c0bdbd;
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .row.mini-gap {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .row.mini-gap [class*="col-"] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
} /************************
 *    XP LINK STYLES    *
 ************************/

/*********************************
 *    XP FileUploader STYLES     *
 *********************************/


.xp-file-uploader.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.xp-file-uploader.inputfile + label{
    max-width: 80%;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile + label {
    color: white;
    background-color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label {
    border: 1px solid var(--dcui-primary-color);
    background-color: #f1e5e6;
    padding: 0;

}

.xp-file-uploader.style-2.inputfile + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: var(--dcui-primary-color);
    display: inline-block;
}

.xp-file-uploader.style-2.inputfile + label span, .xp-file-uploader.style-2.inputfile + label strong {
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile:focus + label,
.xp-file-uploader.style-1.inputfile + label:hover {
    background-color: var(--dcui-secondary-color);
}

.xp-file-uploader.style-1.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

.xp-file-uploader.style-1.inputfile:focus + label {
    outline: 1px dotted var(--dcui-primary-color);
    outline: -webkit-focus-ring-color auto 5px;
}

.xp-file-uploader.style-2.inputfile:focus + label, .xp-file-uploader.style-2.inputfile.has-focus + label, .xp-file-uploader.style-2.inputfile + label:hover {
    border-color: var(--dcui-primary-color);
}

.xp-file-uploader.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.xp-file-uploader.inputfile + label.doing-ajax {
    pointer-events: none;
}

.xp-file-uploader.inputfile + label.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dcui-primary-color);
}


.dcui-file-uploader-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dcui-file-uploader-container.mini {
    flex: none;
    margin: 5px;
}

.dcui-file-uploader-mini-load-container {
    width: 66px;
    height: 66px;
    position: absolute;
}

.dcui-file-uploader-container.mini .mini-container {
    flex-grow: 1;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    margin: 5px;
}

.dcui-file-uploader-container .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .text-browse {
    color: var(--dcui-primary-color);
}

.dcui-file-uploader-container.disable, .dcui-file-uploader-container.mini.disable .text-browse {
    color: #a6a8a9;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container.disable .file-label {
    cursor: inherit;
}

.dcui-file-uploader-container .preview-card {
    display: flex;
    position: relative;
}

.dcui-file-uploader-container .preview-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.dcui-file-uploader-container .add-media-container{
    width: 112px;
    height: 109px;
    display: flex;
    align-items: center;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container .add-media-content {
    flex: 1;
    min-height: 105px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .preview-container .image-container {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
}

.dcui-file-uploader-container .preview-img {
    object-fit: cover;
    object-position: top;
    width: 106px;
    height: 92px;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-file-uploader-container .preview-container .file-name-text {
    text-align: center;
}

.preview-container .preview-card .file-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}

.dcui-button.dcui-file-uploader-remove-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 50px;
}

.dcui-file-uploader-remove-icon-container{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}


/**********************
 *   DC Components    *
 **********************/

.dcui-load-more-container__container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/***********************************
 *   DC Font Awesome Icon Picker   *
 ***********************************/

.dcui-font-awesome-icon-picker__container {
    width: 100%;
    height: 100%;
    min-height: 450px;
    padding-top: 10px;
}

.dcui-font-awesome-icon-picker__container__search-container{
    margin-bottom: 25px;
}

.dcui-font-awesome-icon-picker__container__search-container__input{
    background-color: transparent;
    color: #0F0F0F;
}

.dcui-font-awesome-icon-picker__container__search-container__input.dark{
    color: white;
}

.dcui-font-awesome-icon-picker__container__search-container__input.dark.dcui-form-control:focus{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container__search-container .dcui-font-awesome-icon-picker__container__search-container__input--icon{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container_icon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 370px;
    margin-top: 15px;
    justify-content: flex-start;
}

.dcui-font-awesome-icon-picker__container_icon-container__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-evenly;
}

.dcui-font-awesome-icon-picker__container_icon-container__icon-btn {
    width: 80px;
    height: 79px;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid var(--dcui-primary-color);
    border-radius: var(--dcui-field-radius);
    outline: 0;
    white-space: nowrap;
    color: var(--dcui-primary-color);
    background-color: transparent;
    text-shadow: none;
    box-shadow: none;
    line-height: calc(var(--dcui-field-height) - 20px);
    padding: 9px 10px;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dcui-font-awesome-picker-popup{
    min-height: 400px;
    width: 890px;
    min-width: 890px;
}

ul.dc-breadcrumbs-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item {
    display: inline;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item .dc-breadcrumb-icon {
    padding: 8px;
    color: #5b5e63;
}

.dcui-icon-btn-img{
    width: 21px;
    height: auto;
    max-height: 18px;
    display: block;
    margin: 0 auto;
}

.dcui-icon-btn-img-container{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
}

.dcui-blue-container{
    padding: 15px;
    background-color: #d6ecf8;
}

.dcui-info-panel-main-container{
    height: 100%;
}

.dcui-info-panel-main-container__middle-container{
    min-height: 750px;
    display: flex;
}

.dcui-info-panel-main-container__middle-container__left{
    width: 60%;
    height: calc(100vh - 266px);
    position: relative;
}

.dcui-info-panel-main-container__middle-container__left::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #f4f4f4;
}

.dcui-info-panel-main-container__middle-container__right{
    width: 40%;
    margin-left: 25px;
}

.dcui-info-panel-main-container__middle-container__right-container{
    height: calc(100vh - 281px);
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.docld-native-date-picker{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    border: 0;
    background: transparent;
    display: inline-block !important;
    visibility: visible !important;
    padding: 8px 10px;
    border-radius: 4px;
}

.docld-native-date-picker::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(10%) saturate(250%) hue-rotate(173deg) brightness(91%) contrast(87%);
}

.docld-native-date-picker:hover{
    background-color: #eeeeee;
    cursor: pointer;
}

.docld-native-date-picker:focus,
.docld-native-date-picker:focus-visible {
    outline: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Bar loader  **/
/***********************/

.docld-loading-bar-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.docld-loading-bar {
    background-color: #3498db;
}

.docld-loading-bar-container .docld-loading-bar.hidden {
    display: none;
}

.docld-required-text{
    color: #c10808;
    padding-left: 5px;
}

/***********************/
/**   Icon Button     **/
/***********************/

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container{
    width: 35px !important;
}

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container .docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
    animation: l13 1s infinite linear;
}

/***********************/
/**   Spinner loader  **/
/***********************/

.docld-spinner-loader-container {
    background-color: white;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}


/*****************************/
/**  Auto complete field   **/
/****************************/
.autocomplete-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.autocomplete-input-wrapper {
    position: relative;
}

.autocomplete-input-wrapper > ::v-deep(.autocomplete-label) {
    display: block;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    margin-bottom: 5px;
}

.autocomplete-input {

}

.autocomplete-input.focused{
    background-color: #eeeeee;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
}


.autocomplete-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.autocomplete-dropdown li {
    cursor: pointer;
    display: block;
    padding: 10px 15px 9px;
    text-align: left;
    color: inherit;
    position: relative;
}

.autocomplete-dropdown li.selected {
    background-color: #eee;
}

.autocomplete-dropdown li:hover {
    background-color: #f0f0f0;
}

.dcui-select-dropdown-close{
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
}


/****************************
 *   Dcui Styles Calendar   *
 ****************************/

:root {
    --dcui-calendar-picker-color: #fff;
    --dcui-calendar-input-bg-color: #fff;
    --dcui-calendar-input-bg-disable-color: rgb(245, 245, 245);
    --dcui-calendar-input-text-disable-color: #b8b8b9;
    --dcui-calendar-select-bg-color: #fff;
    --dcui-calendar-border-color: #eaeaeb;
    --dcui-calendar-triangle-color: #eaeaeb;
    --dcui-calendar-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-top-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-text-color: #000000;
    --dcui-calendar-action-color: #7b8187;
    --dcui-calendar-text-disabled-color: #b3b3b3;
    --dcui-calendar-view-button-color: #000000;
    --dcui-calendar-view-button-font-weight: 600;
    --dcui-calendar-view-button-font-size: 1rem;
    --dcui-calendar-datepicker-icon-color: #b2b3b3;
    --dcui-calendar-datepicker-icon-size: 1.1rem;
    --dcui-calendar-active-bg-color: transparent;
    --dcui-calendar-active-text-color: #657ff5;
    --dcui-calendar-active-hover-color:#657ff5;
    --dcui-calendar-active-hover-text-color:#edfff9;
    --dcui-calendar-range-bg-color: #edfff9;
    --dcui-calendar-range-text-color: #7b8187;
    --dcui-calendar-range-radius: 100%;
    --dcui-calendar-day-hover-bg-color: #eaeaeb;
    --dcui-calendar-day-width: 25px;
    --dcui-calendar-day-height: 25px;
    --dcui-calendar-day-font-size: 0.9rem;
    --dcui-calendar-day-font-weight: 650;
    --dcui-calendar-day-name-font-size: 0.9rem;
    --dcui-calendar-day-name-font-weight: 900;
    --dcui-calendar-day-name-color: #b3b3b3;
    --dcui-calendar-input-border: 1px solid #eaeaeb;
    --dcui-calendar-input-text-color: #7b8187;
    --dcui-calendar-input-font-size: 0.9rem;
    --dcui-calendar-input-font-weight: 400;
    --dcui-calendar-content-radius: 20px;
    --dcui-calendar-year-font-size: 1rem;
    --dcui-calendar-year-color: #000000;
    --dcui-calendar-year-font-weight: 450;
    --dcui-calendar-year-disabled-color: #b8b8b9;
    --dcui-calendar-year-disabled-bg-color: transparent;
    --dcui-calendar-year-padding: 10px;
    --dcui-calendar-year-border: none;
    --dcui-calendar-year-border-radius: none;
    --dcui-calendar-month-font-size: 1.1rem;
    --dcui-calendar-month-color: #000000;
    --dcui-calendar-month-font-weight: 450;
    --dcui-calendar-month-disabled-color: #b8b8b9;
    --dcui-calendar-month-disabled-bg-color: transparent;
    --dcui-calendar-month-padding: 8px;
    --dcui-calendar-month-border: none;
    --dcui-calendar-month-border-radius: none;
    --dcui-calendar-year-hover-bg-color:#eaeaeb;
    --dcui-calendar-month-hover-bg-color:#eaeaeb;
}

.dcui-calendar *:focus {
    outline: none;
}

.dcui-calendar * {
    outline: none;
}

.dcui-calendar {
    position: relative;
    width: 100% !important;
    min-width: max-content;
}

.dcui-calendar .content {
    display: flex;
    background: var(--dcui-calendar-picker-color);
    box-shadow: var(--dcui-calendar-shadow);
    position: absolute;
    top: 45px;
    z-index: 99999;
}

.dcui-calendar .input-field {
    display: flex;
    position: relative;
    min-width: 140px;
    font-weight: var(--dcui-calendar-input-font-weight);
}

.dcui-calendar .input-field .clearButton {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--dcui-calendar-text-color);
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    display: flex;
}

.dcui-calendar .input-field .clearButton i {
    fill: currentColor;
}

.dcui-calendar .input-field .clearButton,
.dcui-calendar .input-field .clearButton i {
    font-size: 16px;
}

.dcui-calendar .input-field input:disabled ~ i {
    fill: var(--dcui-calendar-text-color);
}

.dcui-calendar .input-field.long {
    min-width: 290px;
}

.dcui-calendar .input-field input {
    padding-left: 35px;
    padding-right: 20px;
    font-size: var(--dcui-calendar-input-font-size);
    min-width: inherit;
    height: 40px;
    border-radius: 6px;
    border: var(--dcui-calendar-input-border);
    background-color: var(--dcui-calendar-input-bg-color);
    color: var(--dcui-calendar-input-text-color);
    font-weight: inherit;
    cursor: pointer;
    width: 100%;
}

.dcui-calendar .input-field:hover input{
    background-color: #eeeeee;
}


.dcui-calendar .input-field input:disabled {
    background-color: var(--dcui-calendar-input-bg-disable-color);
    color: var(--dcui-calendar-input-text-disable-color);
    cursor: default;
}

.dcui-calendar .input-field i {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.dcui-calendar .input-field i.datepicker {
    left: 10px;
    width: var(--dcui-calendar-datepicker-icon-size);
    height: var(--dcui-calendar-datepicker-icon-size);
    text-align: center;
    cursor: pointer;
}

/* A locked field's glyph is inert (see DcDatepicker's togglePicker guard), so it
   must not invite the click. Plain arrow, not not-allowed: every other locked
   control in the kit leaves the cursor alone, and the picker was the outlier. */
.dcui-calendar .input-field input:disabled ~ i.datepicker {
    cursor: default;
}

.dcui-calendar .calendar {
    width: 270px;
    min-height: 240px;
}

.dcui-calendar .calendar.range:first-child {
    border-right: 1px solid var(--dcui-calendar-border-color);
}

.dcui-calendar .calendar:first-child::before {
    content: "";
    position: absolute;
    bottom: 100%;
    top: -20px;
}

.dcui-calendar .calendar .selected-field {
    padding-top: 15px;
    background-color: var(--dcui-calendar-select-bg-color);
    border-radius: 20px;
}

.dcui-calendar .calendar .selected-field .selected-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgb(228 228 229);
}

.dcui-calendar .calendar .selected-field .viewButton {
    border: 0;
    width: 100%;
    padding: 10px;
    color: var(--dcui-calendar-view-button-color);
    font-size: var(--dcui-calendar-view-button-font-size);
    font-weight: var(--dcui-calendar-view-button-font-weight);
    margin-right: 10px;
    margin-left: 10px;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.dcui-calendar .calendar .selected-field .viewButton:hover {
    background: #ededed;
}

.dcui-calendar .calendar .selected-field .prevDateButton,
.dcui-calendar .calendar .selected-field .nextDateButton {
    position: relative;
    border: 0;
    background: transparent;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after,
.dcui-calendar .calendar .selected-field .nextDateButton::after {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    width: 28px;
    border-radius: 10px;
    border: 2px solid #e9e9e9;
    font-family: "Font Awesome 5 Pro";
    text-align: center;
    color: #b3b3b3;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after {
    content: "\f053";
}

.dcui-calendar .calendar .selected-field .nextDateButton::after {
    content: "\f054";
}

.dcui-calendar .calendar .selected-field .prevDateButton:hover::after,
.dcui-calendar .calendar .selected-field .nextDateButton:hover::after {
    border: 2px solid #cdcdcd;
    color:  #adacac;
}

.dcui-calendar .calendar .days {
    display: grid;
    grid-template-columns: repeat(7, minmax(max-content, 1fr));
    gap: 5px;
    padding-bottom: 7px;
}

.dcui-calendar .calendar .years,
.dcui-calendar .calendar .months {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    max-width: calc((var(--dcui-calendar-day-width) * 7) + 20px);
}

.dcui-calendar .calendar .years {
    min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    gap: 15px;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}

.dcui-calendar .calendar .months {
    min-height: 170px;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
}

.dcui-calendar .calendar .selected-field,
.dcui-calendar .calendar .days-selection {
    padding-left: 15px;
    padding-right: 15px;
}

.dcui-calendar .calendar .days-selection .days {
    padding-bottom: 15px;
}

.dcui-calendar .calendar .days .day,
.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    background: transparent;
    border: 0;
    text-align: center;
    cursor: pointer;
}

.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    width: max-content;
    height: max-content;
}

.dcui-calendar .calendar .months .month {
    font-size: var(--dcui-calendar-month-font-size);
    font-weight: var(--dcui-calendar-month-font-weight);
    color: var(--dcui-calendar-month-color);
    padding: var(--dcui-calendar-month-padding);
    border: var(--dcui-calendar-month-border);
    width: 70px;
}

.dcui-calendar .calendar .months .month:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-month-disabled-color);
    background-color: var(--dcui-calendar-month-disabled-bg-color);
}

.dcui-calendar .calendar .days .day {
    padding: 0;
    font-size: var(--dcui-calendar-day-font-size);
    font-weight: var(--dcui-calendar-day-font-weight);
    color: var(--dcui-calendar-text-color);
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: left;
}

.dcui-calendar .calendar .days .day .number {
    display: flex;
    width: var(--dcui-calendar-day-width);
    height: var(--dcui-calendar-day-height);
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: inherit;
    border-radius: 7px;
    line-height: normal;
}

.dcui-calendar .calendar .days .day.name {
    pointer-events: none;
    font-size: var(--dcui-calendar-day-name-font-size);
    font-weight: var(--dcui-calendar-day-name-font-weight);
    color: var(--dcui-calendar-day-name-color);
    width: auto;
}

.dcui-calendar .calendar .days .day.selectedDate .number {
    background: var(--dcui-calendar-active-bg-color);
    color: var(--dcui-calendar-active-text-color);
    border: 2px solid #657ff5;
}

.dcui-calendar .calendar .days .day.circle .number {
    border-radius: 100%;
}

.dcui-calendar .calendar .days .day.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
    color: var(--dcui-calendar-range-text-color);
}

.dcui-calendar .calendar:first-child .days .day.selectedDate {
    border-top-left-radius: var(--dcui-calendar-range-radius);
    border-bottom-left-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.selectedDate:hover .number{
    background: var(--dcui-calendar-active-hover-color);
    color: var(--dcui-calendar-active-hover-text-color);
}

.dcui-calendar .calendar:last-child .days .day.selectedDate {
    border-top-right-radius: var(--dcui-calendar-range-radius);
    border-bottom-right-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.disabledDate {
    pointer-events: none;
    color: var(--dcui-calendar-text-disabled-color);
    font-weight: 500;
}

.dcui-calendar .calendar .days .day.disabledDate.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
}

.dcui-calendar .calendar .days .day:hover .number{
    background: var(--dcui-calendar-day-hover-bg-color);
}

.dcui-calendar .calendar .years .year {
    font-size: var(--dcui-calendar-year-font-size);
    font-weight: var(--dcui-calendar-year-font-weight);
    color: var(--dcui-calendar-year-color);
    padding: var(--dcui-calendar-year-padding);
    border: var(--dcui-calendar-year-border);
    border-radius: var(--dcui-calendar-year-border-radius);
}

.dcui-calendar .calendar .years .year:hover,
.dcui-calendar .calendar .months .month:hover{
    background-color: var(--dcui-calendar-month-hover-bg-color);
    border-radius: 7px;
}

.dcui-calendar .calendar .years .year:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-year-disabled-color);
    background-color: var(--dcui-calendar-year-disabled-bg-color);
}

.dcui-calendar.left .content {
    left: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.left .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.right .content {
    right: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-left-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.right .calendar:first-child::before {
    right: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
}

.dcui-calendar.top .content {
    top: 100%;
    transform: translateY(calc(-100% - 66px));
    box-shadow: var(--dcui-calendar-top-shadow);
    border-top-left-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.top .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: var(--dcui-calendar-triangle-color) transparent transparent transparent;
    top: 100%;
    left: 0;
}

.dcui-calendar.bottom .content {
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.bottom .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.center .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 50%;
    transform: translateX(-50%);
}

.dcui-calendar.center .content {
    transform: translateY(5px) translateX(-50%);
    left: 50%;
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dc-datepicker-filed-no-outline.dcui-calendar .input-field input{
    border: transparent;
}

/********************
    Media Viewer
 ********************/

.dcui-media-viewer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    position: relative;
    width: 100%;
    min-height: 124px;
}

.dcui-media-viewer-item {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    width: 108px;
    height: 112px;
    margin: 5px;
    position: relative;
}

.dcui-media-viewer-text {
    line-height: 13px;
    padding: 0 5px;
    text-align: center;
}

.dcui-media-viewer-image {
    width: 106px;
    height: 92px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-media-viewer-item .file-remove-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-remove-btn {
    display: block;
}

.dcui-media-viewer-item .file-featured-btn {
    position: absolute;
    top: 3px;
    left: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-featured-btn {
    display: block;
}

.dcui-media-viewer-container .dcui-media-viewer-item.dcui-media-viewer-icon-selected:hover::after {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: -9px;
    left: -10px;
    color: #ffef00;
    font-weight: 900;
    content: "\f005";
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
    z-index: 1;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-button.dcui-file-uploader-featured-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: unset;
    color: #ffef00;
    background-color: transparent;
    border: 0;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-file-uploader-featured-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}

/***********************/
/**  No Styles found  **/
/***********************/

.dcui-media-viewer-no-media-found-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-media-viewer-no-media-found-container img {
    width: 90px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.dcui-media-viewer-no-media-found-container .text-container {
    font-size: medium;
    font-weight: 600;
}


/************************/
/**    Plain Layout     */
/************************/

.dcui-plain-comp-card {
    padding: 0;
    height: 100%;
}

.dcui-plain-top-section {
    padding: 30px;
    background-color: #d6ecf8;
}

.dcui-plain-top-container {
    display: flex;
    justify-content: space-between;
}

.dcui-plain-top-left-container {
    display: flex;
}

.dcui-plain-top-right-container {
    display: flex;
}

.dcui-plain-middle-container {
    padding: 30px;
    padding-bottom: 0;
}

.docld-plain-middle-container {
    position: relative;
    height: calc(100vh - 250px);
    padding-right: 15px;
}

/****************************/
/**    navigation drawer   **/
/***************************/

.dcui-navigation-drawer-card {
    padding: 0;
    height: 100%;
}

.dcui-navigation-drawer-name-container {
    padding: 20px;
    align-items: center;
}

.dcui-navigation-drawer-title {
    font-size: 24px;
    font-weight: 700;
    color: #3f3f3f;
}

.dcui-navigation-drawer-nav-items-container {
    height: calc(100vh - 155px);
}

.dcui-navigation-content {
    position: relative;
}

.dcui-navigation-content .dcui-navigator-text-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.dcui-navigation-content.show-line::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 20px;
    height: calc(100% - 53px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dcui-navigation-content .item {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 55px;
}

.dcui-navigation-content.show-bullets .item::before {
    position: relative;
    left: 2px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

.dcui-navigation-content .item:hover {
    background-color: #f3f3f3;
    /*background-color: #e6f5ff;*/
    cursor: pointer;
}

.dcui-navigation-content .item .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
}

.dcui-navigation-content .item.selected {
    background-color: #f7f7f7;
    /*background-color: #e6f5ff;*/
    color: var(--dcui-primary-color);
    position: relative;
}

.dcui-navigation-content .item.selected::after {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--dcui-primary-color);
}

.dcui-navigation-content .item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

/**********************/
/**    Point list   **/
/*********************/

.dc-point-list-container-parent {
    position: relative;
    height: 100%;
}

.dc-point-list-container {
    margin-top: 20px;
    position: relative;
}

.dc-point-list-container.loaded::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 6px;
    height: calc(100% - 40px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dc-point-list-container .dc-point-list-item {
    margin-bottom: 15px;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
}

.dc-point-list-container .dc-point-list-item:last-child {
    margin-bottom: 0;
}

.dc-point-list-container .dc-point-list-item::before {
    position: relative;
    left: 2px;
    top: 4px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
} :root {
    --content-guard: 1920px;
    --topbar-height: 70px;
    --sidebar-width: 90px;
}

html,
body,
#app,
.xp-content-guard {
    height: 100%;
    /* overflow-y: auto !important; */
}

.dark-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: #FBFBFD;
    overflow: hidden;
    position: relative;
}

.light-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: var(--light-tertiary-color);
    overflow: hidden;
    position: relative;
}

#xp-default-banner {
    text-align: center;
    margin: 10% auto;
    max-width: 992px;
}

#xp-default-banner .xp-db-text-head {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 35px;
}

#xp-default-banner .xp-db-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    display: inline-block;
    border-radius: 100%;
    background-color: #eee;
    color: #959595;
}

.bg-gradient-blue {
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
}

.bg-full-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bg-full-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 29, 53, 0) 29.44%, #001d35 94.6%);
}

.bg-full-image .graphic-circuit-lines {
    position: absolute;
    width: 200px;
    top: calc(50% - 140px);
    left: 0;
    pointer-events: none;
}

.atc-contianer {
    display: grid;
    margin-top: 0.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.atc-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.atc-label {
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 4px;
    border-style: dashed;
    width: 100%;
    text-align: center;
}

.atc-space {
    display: flex;
    margin-top: -2.5rem;
    flex: 1 1 auto;
    width: 40%;
    max-height: 12rem;
    justify-content: center;
    height: 30px;
}

.atc-img {
    object-position: center;
    font-size: 5rem;
}

.atc-select-file {
    color: #2563EB;
}

.atc-text-p {
    color: #6B7280;
}

.atc-txt {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.atc-select-file:hover {
    text-decoration: underline;
}

.atc-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;

}

.atc-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    color: #6B7280;
}


.ve-circle-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-v-card {
    border-bottom: 1px solid #4b4b4b;
    padding: 10px 0;
}

/*
* Loris
*/
.hide-input-file {
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

.hide-element {
    visibility: hidden !important;
    opacity: 0 !important;
}

select.form-control {
    cursor: pointer;
}

/**
 * Authentication
 */
.ve-full-page-knife-cut {
    height: 100%;
}

.ve-full-page-knife-cut .kc-columns {
    width: 100%;
    height: 100%;
    position: relative;
}

.ve-full-page-knife-cut .kc-columns::after {
    content: "";
    clear: both;
    display: table;
}

.kc-columns .kc-col-left,
.kc-columns .kc-col-right {
    float: left;
    width: calc(50% + 150px);
    height: 100%;
    display: flex;
    align-items: center;
}

.kc-columns .kc-col-left {
    justify-content: flex-start;
    padding-left: 12%;
}

.kc-columns .kc-col-right {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    padding-right: 12%;
}

.kc-columns .kc-col-right .kc-skew {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

.kc-columns .kc-col-right .kc-skew::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
    -ms-transform: skew(14deg, 0deg);
    -webkit-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
    transform-origin: left top;
}

#ve-page-auth .pa-left-content {
    position: inherit;
    max-width: 480px;
    text-align: justify;
}

.pa-left-content .pa-lc-logo {
    max-width: 100%;
    height: auto;
}

.pa-left-content .pa-lc-text {
    color: #fff;
    margin-top: 10px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 25px;
    height: 100%;
}

.auth-logo img {
    width: 100px;
    height: 100px;
}

.auth-card-panel {
    width: 440px;
}

.dark-mode .auth-card-panel .acp-boxer {
    background-color: var(--dark-secondary-color);
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--dark-color-text);
}

.dark-mode .auth-card-panel .acp-boxer a {
    color: #faf7f7;
}

.dark-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer a {
    color: #020202;
}

.light-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer {
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--light-color-text);
}

.auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.dark-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--dark-color-text);
}

.light-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--light-color-text);
}

.auth-card-panel .acp-description {
    line-height: 1.3;
    color: #8d8d8d;
    font-size: 14px;
}

.dark-mode .auth-card-panel .acp-footer {
    color: var(--dark-quaternary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.light-mode .auth-card-panel .acp-footer {
    color: var(--light-secondary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.auth-card-panel .acp-boxer.head-tail-gapped {
    padding-top: 150px;
    padding-bottom: 150px;
}

.text-separator {
    position: relative;
    text-align: center;
    line-height: 1;
}

.text-separator span {
    display: inline-block;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
}

.text-separator::before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #dedede;
    left: 10px;
    right: 10px;
    top: 48%;
}

/**
 * Top bar
 */
#app-topbar {
    width: 100%;
    height: var(--topbar-height);
    position: fixed;
    max-width: var(--content-guard);
    top: 0;
    left: 50%;
    z-index: 90;
    padding: 0 15px;
    padding-left: calc(var(--sidebar-width) + 15px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #424242;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.dark-mode #app-topbar {
    background-color: var(--dark-tertiary-color);
}

.light-mode #app-topbar {
    background-color: #c1c1c1;
}

#app-topbar .at-content {
    height: 100%;
    width: 100%;
}

.at-content .at-logo {
    max-width: 280px;
    min-width: 194px;
    height: 30px;
    display: inline-block;
}

.at-content .at-logo img {
    max-height: 100%;
    max-width: 100%;
    min-height: 30px;
}

.at-lu-content > div:not(:last-child) {
    margin-right: 13px;
}

.at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-lu-content .at-lu-details .at-lud-sub {
    font-size: 12px;
    font-weight: 200;
}

.dark-mode .at-lu-content .at-lu-details,
.dark-mode .at-lu-content .at-icon-dropdown {
    color: #fff;
}

.light-mode .at-lu-content .at-lu-details,
.light-mode .at-lu-content .at-icon-dropdown {
    color: #000000;
}

.at-content .at-elem-separator {
    width: 1px;
    height: calc(100% - 20px);
    margin: 0 25px;
    background-color: var(--dark-seven-color);
}

.light-mode .at-content .at-elem-separator {
    background-color: #999999;
}


.at-content .at-icon-item {
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 70px;
    text-align: center;
    cursor: pointer;
}

.at-icon-item .at-ii-icon {
    display: inline-block;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    position: relative;
}

.light-mode .at-icon-item .at-ii-icon {
    color: #313131;
}

.light-mode .at-content .at-icon-item:hover {
    color: #d3d3d3;
    background-color: var(--light-senary-color);
}


.at-content .at-icon-item:hover {
    background-color: var(--dark-senary-color);
}

.at-content .at-icon-item:hover .at-ii-icon {
    color: var(--quaternary-color);
}

.icon-bubble {
    position: absolute;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
    padding: 3px;
    top: -5px;
    left: 50%;
    background-color: #fff;
    white-space: nowrap;
}

.icon-bubble.bubble-red {
    background-color: #f00;
}

.at-content .at-search {
    width: 412px;
}

.at-search .form-control {
    background-color: transparent;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    color: #fff;
    padding-right: 50px;
}

.light-mode .at-search .form-control {
    color: #000000;
}

.at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    width: 40px;
}

.light-mode .at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #000000;
    font-size: 20px;
    width: 40px;
}

.light-mode #megaSearch::placeholder {
    color: #000;
}

#tb-mega-menu1 {
    min-height: 265px;
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu1 .tb-mm-wrap {
    flex-wrap: wrap;
}

#tb-mega-menu {
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu .tb-mm-wrap {
    flex-wrap: wrap;
}

.tb-mm-wrap .tb-mm-item {
    width: 20%;
    padding-right: 30px;
    margin-bottom: 20px;
}

.tb-mm-item > a {
    padding: 13px 13px;
}

.tb-mm-item .tb-mmi-icon {
    width: 35px;
    min-width: 35px;
    font-size: 18px;
}

.tb-mm-item .tb-mmi-text {
    color: var(--body-color);
    flex: 1;
}

.tb-mmi-text .tb-mmi-label {
    margin-bottom: 5px;
    line-height: 1;
}

.tb-mmi-text .tb-mmi-desc {
    font-size: 12px;
}

.tb-mm-item > a:hover {
    background-color: rgba(0, 121, 192, 0.15);
}

/**
* View as company top bar
*/
.viewASCompany-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.viewASCompany-container .viewASCompany-logo {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #3f3f3f;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 10px;
    width: 2.2rem;
    min-width: 2.2rem;
}

.viewASCompany-container .viewASCompany-logo img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: inherit;
    margin-right: 10px;
}

.viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: rgb(0, 0, 0);
    margin-right: 10px;
}

.vw-company-list {
    width: 240px;
}

.vw-container > li > a.doing-ajax {
    pointer-events: none;
}

.vw-container > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dark-mode .vw-search-input {
    background-color: #5d5d5d !important;
}

.vwbar.signout {
    cursor: pointer;
    height: 44px;
    line-height: 30px;
    border-top: 1px black solid;
    text-align: center;
    margin-top: 5px;
    font-weight: 300;
}

.vwbar.signout:hover {
    background-color: black;
}

.light-mode .vwbar.signout:hover {
    background-color: #dddddd;
}

.vw-view-container {
    width: 240px;
    padding: 0;
}

.vw-company-list:hover {
    cursor: pointer;
    background-color: var(--dark-quinary-color);
}

.light-mode .vw-company-list:hover {
    cursor: pointer;
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.vw-search-container {
    padding: 10px 15px;
    border-bottom: 1px solid black;
}

.megasearch {
    height: 35px;
}

#tb-search .ic-icon {
    height: 35px;
    line-height: 36px;
    font-size: 15px;
}

/**
* Field set
*/
.fl-fieldset {
    border-color: #d3d3d3;
    border-width: 1px;
    padding-bottom: 5px;
}

/**
 * Side bar
 */
#app-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    background-color: var(--secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    color: var(--color-text);
}

.dark-mode #app-sidebar {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}

.light-mode #app-sidebar {
    background-color: #999999;
    color: var(--light-color-text);
}

.as-do-logo {
    text-align: center;
    height: var(--topbar-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-nav .as-nav-item {
    text-align: center;
}

.dark-mode .as-nav .as-nav-item.active,
.dark-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--dark-quaternary-color) !important;
}

.light-mode .as-nav .as-nav-item.active,
.light-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--light-tertiary-color) !important;
}

.light-mode .as-nav .as-nav-item.active a,
.light-mode .as-nav .as-nav-item:hover a {
    color: var(--light-tertiary-color) !important;
}

.as-nav .as-nav-item > a {
    display: block;
    padding: 13px 5px;
}

.as-nav-item .as-ni-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 1px;
}

.as-nav-item .as-ni-label {
    font-size: 12px;
    line-height: 1;
    /*white-space: nowrap;*/
}

/**
*Nuwan
*/
.app-qb-thumb {
    width: 250px;
}

.app-qb-thumb.btn:hover {
    cursor: pointer;
}

.ss-app-container {
    width: 280px;
    height: 160px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #ffffff;
}

.dark-mode .ss-app-container {
    background-color: var(--dark-tertiary-color);
    border: 1px solid var(--dark-tertiary-color);
}

.light-mode .ss-app-container {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
}

.side-box {
    width: auto;
    margin-left: 100px;
    margin-top: 20px;
    margin-right: 6px;
    border: 1px solid #d3cfcf;
    padding: 24px;
}

.no-notification-icon {
    font-size: 100px;
    padding-top: 65px;
    color: var(--secondary-color);
}

/*
*Radio button
*/
/* input[type=radio].vs-Radio {
  padding: 5px;
  margin-right: 5px;
  -webkit-appearance: none;
  outline: 0.1em solid black;
  outline-offset: 0.1rem;
}

input[type=radio]:checked.vs-Radio {
  display: inline-block;
  background-color: var(--secondary-color);
} */

.two-fa {
    border: 1px solid #c8c8c8;
    padding: 10px;
}

.xp_under_construction {
    text-align: center;
}

.text-under-logo {
    display: none;
}

.text-under-logo.show {
    display: block;
    position: absolute;
    right: 0px;
    color: white;
    line-height: 1px;
    font-size: 11px;
    bottom: -7px;
}

.fa-icon {
    font-size: 25px;
    color: var(--secondary-color);
}

/*
*Assign Employees
*/
.ase_no_results {
    position: absolute;
    top: 248px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
    left: 7px;
}

.ase_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ase_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.ase_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

/*
*Mega Search
*/
.mega_search_no_results {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.mega_search_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mega_search_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.mega_search_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.megaSearch .megaSearch-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
    min-height: 60px;
}

.megaSearch .megaSearch-main-item {
    padding-top: 14px;
    padding-bottom: 9px;
}

.megaSearch-bar-ul li.megaSearch-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.megaSearch-bar-ul li:last-child.megaSearch-main-item {
    border-bottom: 0;
}

.megaSearch-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.megaSearch-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.megaSearch-sub-list li::marker {
    font-size: 20px !important;
}

.sub-megaSearch-title {
    font-size: 15px;
}

.sub-megaSearch-date {
    font-size: 12px;
}

.megaSearch-no-results-text {
    position: absolute;
    left: 120px;
    top: 60px;
    font-size: 20px;
    font-weight: 600;
    list-style: none;
}

.megaSearch-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.megaSearch-container {
    max-width: 775px;
    margin: 0 auto;
}

.megaSearch-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.megaSearch-icon-main {
    font-size: 18px;
    max-width: 18px;
    min-width: 18px;
    color: var(--secondary-color);
}

.megaSearch-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 30px;
}

.megaSearch-main-title {
    font-size: 20px;
    padding-left: 25px;
}

.megaSearch-icon {
    max-width: 18px;
    min-width: 18px;
    font-size: 18px;
    color: black;
}

.dark-mode .megaSearch-icon {
    color: #f7f7f7;
}

.dark-mode .megaSearch-title {
    color: #f7f7f7;
    font-size: 13px;
}

.dark-mode .megaSearch-title:hover {
    color: #8d8d8d;
}

.megaSearch-title {
    color: #000;
    font-size: 13px;
}

.megaSearch-title:hover {
    color: var(--dark-senary-color);
}

.megaSearch-description {
    font-size: small;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-description ul :last-child {
    padding-bottom: 0;
}

.megaSearch-description ul li {
    padding-left: 85px !important;
    margin-bottom: 5px;
    cursor: pointer;
}

.megaSearch-description ul li span {
    color: #8d8d8d;
}

.megaSearch-description ul li.highlight {
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 5px;
}

.dark-mode .megaSearch-description ul li.highlight {
    color: white;
}

.dark-mode .megaSearch-description ul li a {
    color: rgb(226, 226, 226);
}

.megaSearch-description ul li a {
    color: black;
}

.megaSearch-description .megaSearch-bar-ul li {
    padding-left: 15px !important;
}

.megaSearch-description ul li a:hover {
    color: #a8a8a8;
}

.dark-mode .megaSearch-description ul li a:hover {
    color: #c3c3c3;
}

/*
*Registration
*/
.registrations-action-btn {
    font-size: 20px !important;
}

/*
*Notification bar and Notifications
*/

.notification {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.notification .notification-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
}

.notification .notification-main-item {
    padding-top: 11px;
}

.notification-bar-ul li.notification-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.notification-bar-ul li:last-child.notification-main-item {
    border-bottom: 0;
}

.notification-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.notification-bar-ul li:nth-of-type(1n + 4) {
    display: none;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.notification-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.notification-sub-list li::marker {
    font-size: 20px !important;
}

.sub-notification-title {
    font-size: 14px;
}

.sub-notification-date {
    font-size: 12px;
}

.notification-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.notification-container {
    max-width: 775px;
    margin: 0 auto;
}

.notification-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.notification-icon-main {
    font-size: 24px;
    width: 70px;
    min-width: 70px;
    text-align: center;
    color: var(--secondary-color);
}

.notification-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.notification-main-title {
    font-size: 20px;
}

.notification-icon {
    max-width: 35px;
    min-width: 20px;
    font-size: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.notification-description {
    font-size: small;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-description ul :last-child {
    padding-bottom: 0;
}

.notification-description ul li {
    padding-left: 5px !important;
    margin-bottom: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.notification-description ul li span {
    color: #8d8d8d;
}

.notification-description ul li.unread {
    background-color: #f2faff;
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 10px;
}

.notification-description ul li a {
    color: black;
}

.notification-description .notification-bar-ul li {
    padding-left: 5px !important;
    padding-right: 5px;
}

.notification-description ul li a:hover {
    color: rgb(187, 187, 187);
}

.notification .mark-as-read {
    font-size: 15px;
    font-weight: 400;
    color: #2491c7;
    cursor: pointer;
}

.mark-as-read-icon {
    letter-spacing: -5px;
}

.view-all-notifcations {
    text-decoration: none;
}

.image-icon-text:hover {
    color: #e1dede;
}

.viewall-ul {
    padding: 0;
    margin: 0;
    border-top: 1px solid #d3d2d2;
    list-style: none;
}

.dark-mode .action-btns {
    color: var(--dark-quaternary-color);
}

.dark-mode .action-btns:hover {
    color: #9d9c9c;
}

.light-mode .action-btns {
    color: var(--light-primary-color);
}

.light-mode .action-btns:hover {
    color: var(--light-senary-color);
}

#xp-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.xp-loader {
    background-color: var(--dcui-primary-color);
    transition: width 0.5s ease;
    height: 3px;
    display: none;
}

.xp-loader.show {
    width: 0%;
    display: block;
}

.data-loader-container {
    position: relative;
    min-height: 300px;
}

.link-box {
    margin: 0 15px 15px 15px;
    padding: 22px 22px 22px 22px;
    border: 1px solid #d5d5d5;
    width: 96.6%;
}

.link-box-remove {
    position: absolute;
    right: 6px;
    top: 3px;
    font-size: 20px;
}

.link-box-remove.edit-service-link {
    right: 0 !important;
    top: -5px !important;
}

.sub-text {
    color: #8d8d8d;
    font-size: 13px;
}

.bgcolor-light-gray {
    background-color: #f1f1f1;
}

.light-gray {
    color: #787878;
}


.user-image-placeholder {
    position: relative;
    background-color: #fdfdfd;
}

.user-image-placeholder::before {
    display: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f007";
    font-size: 50px;
    color: #c5c5c5;
    text-align: center;
}

.sph-container {
    background-color: #f5f5f5;
}

/*
*No result
*/
.no-results {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-results .no-results-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-results .no-results-icon {
    font-size: 50px;
    color: #cbcbcb;
}

.no-results-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

/*
*No permissions
*/
.no-permission {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-permission-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

.no-permission-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-permission-icon {
    font-size: 50px;
    color: #cbcbcb;
}

/*
*Scroll bar
*/
.side-bar-scroll {
    height: calc(100% - 104px);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#show_scroll_up_down_btn {
    display: none;
}

/* .side-bar-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
} */

.side-bar-scroll::-webkit-scrollbar {
    display: none;
    /* width: 6px;
      background-color: #F5F5F5; */
}

/* .side-bar-scroll::-webkit-scrollbar-thumb
{
	background-color: #1881c6;
} */
.sidebar-bottom {
    height: 65px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.sidebar-company-logo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    display: inline-block;
    height: 40px;
    overflow: hidden;
    width: 41px;
}

.sidebar-bottom-arrows {
    font-size: 20px;
}

.sidebar-up {
    color: #00578c;
    transition: 0.25s ease;
    transform: rotate(0deg);
}

.sidebar-arrow-animate {
    transform: rotate(180deg);
}

.sb-mega-menu-icon {
    height: 100%;
    font-size: 25px;
    text-align: center;
    line-height: 70px;
}

.sb-mega-menu-icon:hover {
    cursor: pointer;
    background-color: var(--quinary-color);
}

.side-mega-menu {
    background-color: var(--dark-tertiary-color);
    height: 100%;
    width: 100%;
    z-index: 9999999;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.side-mega-container {
    width: 100%;
    height: 100%;
    padding: 60px 100px 0;
}

.side-mega-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dark-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--dark-quaternary-color);
}

.dark-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--dark-quinary-color);
}

.light-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--light-secondary-color);
}

.light-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--light-quinary-color);
}

.mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--quaternary-color);
}

.mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--quinary-color);
}

.side-mega-middle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.side-mega-middle-boxes {
    background-color: #3e3e3f;
    width: 300px;
    height: 100px;
    flex: 0 0 19%;
    margin-right: 0.85%;
    box-sizing: border-box;
    margin-top: 15px;
}

.dark-mode .side-mega-middle-boxes {
    background-color: var(--dark-eight-color);
    color: white;
}

.light-mode .side-mega-middle-boxes {
    background-color: #e3e3e3;
    color: rgb(0, 0, 0);
}

.side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    cursor: pointer;
}

.light-mode .side-mega-middle-boxes:hover {
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.dark-mode .side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    color: var(--dark-color-text);
}

.smm-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
}

.smm-icon {
    font-size: 40px;
}

.slide-fade-right-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-right-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
    transform: translateX(-50px);
    opacity: 0;
}

.slide-fade-top-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-top-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-top-enter-from,
.slide-fade-top-leave-to {
    transform: translateY(-50px);
    opacity: 0;
}

/*
*Table
*/
.th-40 {
    width: 40%;
}

.th-50 {
    width: 50%;
}

.th-60 {
    width: 60%;
}

/*
company icon
*/
.image-icon-container {
    flex-direction: row;
}

.image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 2.2rem;
}

.image-icon .company-icon {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

.image-icon-nav {
    border: 0.15em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
}

.image-icon-nav img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

/**
* table-menu
*/
.table-menu-bar {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.table-menu-bar a {
    margin: 25px;
}

/**
*popup open
*/
.pop-card-panel {
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.popup {
    position: relative;
    background-color: #fff;
    min-width: 650px;
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 1000 !important;
    padding: 30px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    margin: 50px auto;
    max-width: 95%;
}

.popup-blur-overlay {
    background-color: rgb(65 65 65 / 30%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

}


.popup-overlay {
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999 !important;
}

.popup-close-container {
    right: 11px;
    position: absolute;
    top: 7px;
    color: #d8d8d8;
    font-size: 23px;
    cursor: pointer;
}


.popup-close-container a {
    color: inherit;
}

.popup-close-container a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.popup-close-container a i:hover {
    transform: rotate(180deg);
}

/**
*Accordion
*/

.accordion {
    box-shadow: 1px 2px 9px rgb(0 121 192 / 15%);
    position: relative;
}

.accordion .head {
    align-items: center;
    background-color: #ffffff;
    color: #4d5156;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    transition: 0.2s ease-in-out;
}

.accordion .arrow {
    color: #4d5156;
    font-size: 20px;
    opacity: 1;
    transition: 0.25s ease;
    transform: rotate(-180deg);
}

.accordion .arrow-animate {
    opacity: 1;
    transform: rotate(0deg);
}

.accordion .content {
    /* opacity: 0; */
    background-color: #ffffff;
    border-top: 0.001em solid #dcdcdc;
    color: #333333;
    /* max-height: 0; */
    /* padding: 0 20px; */
    padding: 5px 20px;
    /* transition: 0.5s ease-in-out;; */
}

.accordion .content p {
    /* opacity: 0; */
    /* transition: 0.4s ease-in-out;; */
}

.accordion .content.show p {
    opacity: 1;
}

.accordion .show {
    opacity: 1;
    max-height: 10000px;
    /* height: auto; */
    padding: 5px 20px;
}

/*
* Contacts
 */
.cc-as-image-icon {
    background-size: cover;
    background-position: center;
}

.cc-as-image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
}

/*
*test
*/
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

/*
*Company avatar group
*/
.avatar-group-container {
    display: flex;
    justify-content: flex-start;
}

.avatar-group {
    display: flex;
    overflow: hidden;
    margin-left: -0.5rem;
}

.avatar-group-image {
    border-radius: 9999px;
    width: 2rem;
    height: 2rem;
}

/* ********************************* */

.p-avatar {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.p-avatar.p-avatar-image {
    background-color: transparent;
}

.p-avatar-circle img,
.p-avatar.p-avatar-circle {
    border-radius: 50%;
}

.p-avatar .p-avatar-icon {
    font-size: 1rem;
}

.p-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.p-avatar-group .p-avatar + .p-avatar {
    margin-left: -0.5rem;
}

.p-avatar-group {
    align-items: center;
    display: flex;
}

.p-avatar {
    background-color: #dee2e6;
    border-radius: 6px;
}

.p-avatar.p-avatar-lg {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.8rem;
    margin-left: 0;
    cursor: auto;
}

.p-avatar.p-avatar-lg .p-avatar-icon {
    font-size: 0.8rem;
}

.p-avatar-group .p-avatar {
    border: 2px solid #ffffff;
}

/*
* App version
*/
.app-version {
    position: absolute;
    right: 5px;
    top: -25px;
    font-size: 15px;
    color: #8b8b8b;
}

/*
*view as customers
*/
.viewAsCustomers > li > a.doing-ajax {
    pointer-events: none;
}

.viewAsCustomers > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
}

.viewAsCustomers {
    max-height: 300px;
    overflow-x: auto;
    list-style: none;
    padding: 0;
}

.viewAsCustomers li a {
    display: block;
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.viewAsCustomers-selected {
    background-color: #e7e7e7;
    pointer-events: none;
    cursor: default;
}

.viewAsCustomers li a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}

.viewAsCustomer-Btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 35px;
    border: 1px solid var(--primary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--primary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 1.6;
    padding: 3.5px 4px 4px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.viewAsCustomer-Btn .close {
    font-size: 20px;
}

.viewAsCustomer-Btn .close:hover {
    color: red;
}

.viewAsCustomer-Btn.rounded-long-button {
    border-radius: 50px 50px;
    color: var(--secondary-color);
    background-color: #ffffff;
    font-size: 12px;
}

.viewAsCustomer-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.viewAsCustomers.scroll-container::-webkit-scrollbar {
    position: relative;
    margin-right: 20px;
}

.dashboard-heading .dashboard-edit-dashboard-wrapper {
    opacity: 0;
    font-size: 20px;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dashboard-heading:hover .dashboard-edit-dashboard-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/**
*Chips
*/
.basic-chip {
    border-radius: 3px;
    display: inline-block;
    padding: 7px 6px 5px;
}

.chip_red {
    background: #f48fb1;
    color: #000000;
}

.chip_yellow {
    background: #fff176;
    color: #000000;
}

.chip_green {
    /* background: #69bb67; */
    background: #81c784;
    color: #000000;
}

.chip_blue {
    background: #4fc3f7;
    color: #000000;
}

.chip_gray {
    background: #f3f3f3;
    color: #000000;
}

/*
* Bar color
*/

.app-theme-employee #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-client #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-system-admin #app-topbar {
    background-color: #000;
}

/**
*Under maintenance
*/
.under-maintenance {
    height: 530px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.under-maintenance img {
    display: inline-block;
    height: 100%;
    width: auto;
    overflow: hidden;
    position: relative;
}

/* ---------------------------------
    Toggle Button
   --------------------------------- */

.tgl {
    display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl + .tgl-btn {
    box-sizing: border-box;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-btn::selection {
    background: none;
}

.tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.6em;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.tgl + .tgl-btn:after {
    left: 0;
}

.tgl + .tgl-btn:before {
    display: none;
}

.tgl:checked + .tgl-btn:after {
    left: 50%;
}

.tgl-vario + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid #e8eae9;
}

.tgl-vario + .tgl-btn:after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-vario + .tgl-btn:hover:after {
    will-change: padding;
}

.tgl-vario + .tgl-btn:active {
    box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-vario + .tgl-btn:active:after {
    padding-right: 0.8em;
}

.tgl-vario:checked + .tgl-btn {
    background: var(--secondary-color);
}

.tgl-vario:checked + .tgl-btn:active {
    box-shadow: none;
}

.tgl-vario:checked + .tgl-btn:active:after {
    margin-left: -0.8em;
}

/* ---------------------------------
    Info Tips
   --------------------------------- */
.info-tip {
    display: inline-block;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    pointer-events: all;
}

.info-tip:hover {
}

.info-tip-message {
    position: absolute;
    background-color: var(--dark-primary-color);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 15px;
    border-radius: 3px;
    text-align: left;
    z-index: 99993;
    width: auto;
    height: auto;
    max-width: 300px;
}

.info-tip-message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(0, 0, 0);
    top: 100%;
    left: 15px;
}

.info-tip-message.from-bottom:after {
    top: -8px;
    border-top: none;
    border-bottom: 8px solid rgb(0, 0, 0);
}

/* 
Table Dropdown
*/
.table-icon-dropdown {
    color: #000000;
}

/*
*Three Dots
*/
.three-dots:before {
    content: "\22EF";
    color: var(--secondary-color);
    font-size: 20px;
}

/*
*Overlay 
*/
.overlay-styles {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0);
    opacity: 1;
    overflow-x: hidden;
    transition: 2s;
}

.overlay-content-styles {
    position: absolute;
    top: 40%;
    left: 25%;
    text-align: center;
    width: 50%;
    transition: 0.2s;
    z-index: 1001;
}

.overlay-content-styles > h1 {
    color: #ccc;
    border: 2px solid #ccc;
    margin: 0;
    border-radius: 20px;
    padding: 0;
}

/*
*Data exchange
*/
.dx-box-m-l {
    margin-left: -10px;
}

/*
right arrow list
*/
.arrow-list {
    color: #0b79c0;
}

/*
*Settings
*/
.settings-border {
    margin-left: -15px;
    margin-right: -35px;
    padding-right: 15px;
    margin-bottom: -30px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.settings-profile-pic {
    width: 12%;
}

/*
*Settings External Apps
*/
.ss-disc-quickbooks {
    background-color: #389e2a;
    height: 40px;
    line-height: 42px;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    border-radius: 5px;
}

/*
*Settings Nav
*/
.se-header {
    font-size: 25px;
    font-weight: 600;
}

.se-nav .se-nav-item {
    text-align: left;
    min-width: 130px;
}

.se-nav .se-nav-item.active,
.se-nav .se-nav-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);;
    color: var(--dcui-primary-color);
}

.se-nav a{
    color: unset;
}

.se-nav .se-nav-item > a {
    display: flex;
    padding: 13px 5px;
    text-align: center;
}

.se-nav-item .se-ni-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 1px;
}

.se-nav-item .se-ni-label {
    font-size: 15px;
    line-height: 1;
}

/*
*Image Uploader
*/
/* Photo uploader */
.app-photo-uploader {
    position: relative;
    width: 90px;
    height: 90px;
    display: block;
    text-align: center;
}

.app-photo-uploader .apu-prev {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.6;
    overflow: hidden;
}

.app-photo-uploader input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.app-photo-uploader .apu-icon {
    position: absolute;
    font-size: 25px;
    color: var(--dark-secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 11px rgba(255, 255, 255, 0.5),
    0 0 2px rgba(255, 255, 255, 0.5);
}

.app-photo-uploader.has-error .apu-icon i:before {
    content: "\f071";
}

.app-photo-uploader .apu-remove {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 2;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: 0;
    right: 0;
    font-size: 12px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
}

.app-photo-uploader .apu-remove:hover {
    background-color: #0097ff;
}

.app-photo-uploader:not(.loaded) .apu-icon:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.app-photo-uploader.loaded .apu-prev {
    opacity: 1;
}

.app-photo-uploader.loaded .apu-icon {
    visibility: hidden;
    opacity: 0;
}

.app-photo-uploader.loaded:hover .apu-icon,
.app-photo-uploader.loaded:hover .apu-remove {
    visibility: visible;
    opacity: 1;
}

.app-photo-uploader.boxed {
    width: 100%;
    border-radius: 3px;
    border-width: 1px;
    border-color: #c8c8c8;
}

.app-photo-uploader.boxed .apu-prev {
    border-radius: 0;
    background-size: contain;
    background-position: center;
    width: 95%;
    height: 95%;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.app-photo-uploader.boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.boxed .apu-remove {
    top: -10px;
    right: -10px;
}

.go-to-parent-arrow {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.go-to-parent-arrow:hover {
    color: var(--dark-senary-color);
}

.go-to-parent-arrow i {
    font-size: 25px;
    margin-right: 10px;
}

/* File selector directive */
.fus1-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 8px 10px 5px;
    font-size: 15px;
    line-height: normal;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
    cursor: pointer;
}

.fus1-label .fus1-l-icon {
    margin-right: 5px;
    font-size: 16px;
}

.fus1-label .fus1-l-file-remover {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: -10px;
    right: -10px;
    font-size: 16px;
    line-height: 1.6;
    visibility: hidden;
    opacity: 0;
}

.fus1-label:hover .fus1-l-file-remover {
    visibility: visible;
    opacity: 1;
}

.fus1-label .fus1-l-file-remover:hover {
    background-color: var(--secondary-color);
}

.fus1-label .fus1-l-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
*button dashboard
*/
.dashboard_menu_btn {
    margin: 0;
    padding: 0;
}

.button-long:hover .dashboard_menu_btn {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(133deg) brightness(110%) contrast(101%);
}

.dash_chart_no_results {
    position: absolute;
    top: 130px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.dash_chart_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dash_chart_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.dash_chart_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

/*
*button long
*/
.button-long {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--dark-secondary-color);
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    height: 40px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin-bottom: 0;
    min-width: 160px;
    outline: 0;
    padding: 9px 14px 22px;
    position: relative;
    text-shadow: none;
    text-align: center;
    transition: all ease-in-out 0.15s;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
}

.button-long:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.button-long:active {
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
}

.dark-mode .button-long {
    background-color: var(--dark-secondary-color);
    color: #fff;
}

.light-mode .button-long {
    background-color: var(--light-secondary-color);
    color: #fff;
}

/**
*border left
*/
.border-right {
    border-right: 2px solid #d3d4d5;
    height: 70%;
    right: 0px;
    top: 15%;
}

/**
*Color
*/
.text-color-blue {
    color: #0079c0;
}

/**
  *pagination
  */
.pagination {
    display: flex;
    flex-wrap: wrap;
}

.pb-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid transparent;
    color: #00578c;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 2.2rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0.2rem;
    width: 2.2rem;
}

.pb-button:hover {
    background: #cfcfcf;
    color: #1881c6;
}

.pb-button:disabled {
    background-color: #ebebeb;
    opacity: 1;
    cursor: auto;
}

.pagination-item {
    display: inline-block;
}

.pagination-item .active {
    background-color: #1881c6;
    color: #ffffff;
}

.pagination .pagination-item .icons {
    font-size: 1.3rem;
}

/**
 * App elements
 */
.app-card-panel {
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.dark-mode .app-card-panel {
    position: relative;
    background-color: var(--dark-secondary-color);
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.light-mode .app-card-panel {
    position: relative;
    background-color: transparent;
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.app-table {
    border-radius: 5px;
}

.app-table .at-table {
    width: 100%;
}

.dark-mode .app-table {
    background-color: #242424;
}

.dark-mode .at-table {
    background-color: #242424;
    color: white;
}

.app-table .at-table th,
.app-table .at-table td {
    text-align: left;
    padding: 15px 20px;
    border-bottom: 1px solid #242424;
    font-size: 14px;
}

.light-mode .app-table .at-table th,
.light-mode .app-table .at-table td {
    text-align: left;
    padding: 10px 20px;
    border-bottom: 1px solid #ffffff;
    font-size: 14px;
}

.app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.app-table .at-table th div div i {
    cursor: pointer;
    color: #9d9b9b;
}

.app-table .at-table th div div i:hover {
    cursor: pointer;
    color: #696868;
}

.dark-mode .app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.light-mode .app-table .at-table th {
    position: relative;
    color: var(--light-color-text);
}

.app-table .at-table th:not(:first-child):before {
    position: absolute;
    content: "";
    width: 2px;
    top: 4px;
    bottom: 4px;
    left: 3px;
    background-color: var(--dark-tertiary-color);
}

.light-mode .app-table .at-table th:not(:first-child):before {
    background-color: #dddddd;
}

.dark-mode .at-table tr:nth-child(even) {
    background-color: #2c2c2c;
}

.light-mode .at-table tr:nth-child(even) {
    background-color: #f3f3f3;
}

.dark-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #494949;
    color: white;
}

.light-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #d9d9d9;
    color: black;
}

/*
* Styles KD
*/
/* Content Tabs */
.content-tabs .ct-nav {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--dark-senary-color);
}

.ct-nav .ct-nav-item {
    padding: 10px 15px;
    line-height: 1;
    color: inherit;
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #858585;
}

.ct-nav .ct-nav-item:first-child {
    padding-left: 0;
}

.ct-nav .ct-nav-item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 1px;
    background-color: #ddd;
}

.ct-nav .ct-nav-item:before {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -1px;
    height: 3px;
    background-color: transparent;
}

.ct-nav .ct-nav-item:first-child:before {
    left: 0;
}

.ct-nav .ct-nav-item.active {
    color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item.active {
    color: var(--dark-quinary-color);
}

.dark-mode .ct-nav .ct-nav-item:hover:before,
.dark-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item:hover:before,
.light-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--light-secondary-color);
}

.ct-nav-ellipsis {
    display: inline-block;
    width: 145px;
}

.content-tabs .ct-tab {
    display: none;
}

.content-tabs .ct-tab.active {
    display: block;
}

/* Popup Modifications */
.popup .pop-action-bottom {
    margin: 10px -25px -25px;
    padding: 15px 25px;
}

.popup .app-photo-uploader {
    width: 75px;
    height: 75px;
}

.pop-advanced .popup-close-container {
    top: 25px;
    right: 25px;
    font-size: initial;
}

.popup .popup-close-container a:hover,
.popup .popup-close-container a:focus {
    color: var(--primary-color);
}

.dark-mode .popup .popup-close-container a:hover,
.dark-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.light-mode .popup .popup-close-container a:hover,
.light-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.pop-advanced .popup-close-container .button {
    width: 25px;
    height: 25px;
    line-height: 1;
    padding: 0;
    font-size: 25px;
}

.pop-action-bottom .button-transparent {
    border-color: transparent;
}

.pop-advanced .popup-close-container .button:hover {
    background-color: transparent !important;
    color: inherit;
}

/* Photo Uploader */
.app-photo-uploader.full-boxed {
    width: 100%;
    height: 200px;
    border-radius: 2px;
    border: 1px solid #c8c8c8;
}

.app-photo-uploader.full-boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-prev {
    opacity: 1;
    background-position: center;
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-remove {
    top: -5px;
    right: -5px;
}

/* Editor view card infos */
.card-info-list > div {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.card-info-list .cil-label {
    font-weight: 600;
}

.card-info-list .cil-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 20px;
    text-align: center;
}

/* Quill Editor Overwrites */
.no-padding .ql-editor {
    padding: 0;
}

/* Static Page Layout */
.static-page-layout {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.static-page-header {
    position: relative;
    /* margin-bottom: 30px; */
}

.static-page-header .sph-col-left,
.static-page-header .sph-col-right {
    width: 50%;
    position: relative;
}

.static-page-header .sph-col-left {
    z-index: 1;
    padding: 25px;
}

.static-page-header .sph-col-right:before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: -50%;
    right: 0;
    width: 50%;
    background-color: #f5f5f5;
    z-index: 0;
    box-sizing: border-box;
    transform-origin: bottom left;
    transform: skew(-20deg) !important;
    pointer-events: none;
}

.static-page-header .sph-col-left h1 {
    font-size: 35px;
    line-height: 1.1;
}

.static-page-header .sph-col-left .sub-heading {
    font-size: 14px;
    color: #8d8d8d;
}

.static-page-header .sph-image {
    width: 100%;
    height: 340px;
    overflow: hidden;
}

.static-page-header .sph-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Helpers */
.w-500 {
    width: 500px !important;
}

.min-w-90 {
    min-width: 90px !important;
}

.min-w-650 {
    min-width: 650px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.hori-center {
    margin: 0 auto !important;
}

.no-pointers,
.no-pointers * {
    pointer-events: none !important;
}

.button-negative-actions {
    background-color: #e7e7e7;
    border-color: #e7e7e7;
}

.button-negative-actions:hover {
    color: #fff !important;
}

.top-mega-bar {
    display: none;
}

.app-menus {
    margin-bottom: 10px;
    text-align: right;
}

.light-mode .app-menus a:hover {
    color: var(--light-senary-color);
}

.dark-mode .app-menus a:hover {
    color: #d7d7d7;
}

.ac-title-container {
    justify-content: space-between;
    display: flex;
}

.at-logged-user-logo-only {
    display: none;
}

.at-logged-details {
    display: flex;
    flex-direction: row-reverse;
    color: white;
    margin-top: 25px;
    align-items: center;
}

.light-mode .at-logged-details {
    color: black;
}

.at-logged-details .at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details > div:not(:last-child) {
    margin-left: 13px;
}

.at-logged-details .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details .at-lu-details .at-lud-sub {
    font-size: 13px;
    font-weight: 200;
}

.at-logged-details .ve-circle-avatar {
    display: inline-block;
    width: 53px;
    height: 53px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-single-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cp-single-details {
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1;
}

.cp-single-details-margin {
    margin-left: 15px;
}

.sc-container {
    display: flex;
    min-height: 650px;
    position: relative;
}

/*
* Error messages
*/
.ep-error-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    margin: 0 auto;
    padding: 20px;
}

.ep-status-code-text {
    font-weight: bolder;
    font-size: 180px;
    color: #acacac;
}

.ep-error-page-background-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.ep-error-page-background-img {
    width: 100%;
    object-fit: cover;
}

.ep-error-container {
    flex: 1;
    margin-left: 25px;
}

.ep-error-message {
    font-size: 25px;
    font-weight: 700;
    color: #000000;
}

.ep-error-description {
    margin-top: 15px;
    color: #5c5c5c;
}

@media screen and (max-width: 480px) {
    .ep-status-code-text {
        font-size: 80px;
    }

    .ep-error-message {
        font-size: 18px;
    }

    .ep-error-description {
        font-size: 14px;
    }

    .ep-error-parent-container{
        flex-direction: column;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }

    .ep-error-container-wrapper{
        height: 40vh;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .ep-status-code-text {
        font-size: 120px;
    }

    .ep-error-container-wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
    }

    .ep-error-container {
        margin: 0;
        margin-top: 15px;
    }

    .ep-error-message {
        font-size: 20px;
    }

    .ep-error-description {
        font-size: 16px;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .ep-error-container-wrapper{
        top: -70px;
        position: relative;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){

}


.sc-sub-container {
    min-height: 650px;
}

.sc-nav {
    margin-top: 10px;
}

.viewAsCompany-select-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewAsCompany-select-text {
    color: var(--light-color-text);
}

.view_as_company_mobile_view {
    display: none;
}

.left-top-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobile-search-icon-container {
    display: none;
}


/***********************/
/**     Load More     **/
/***********************/

.dc-load-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dc-loading {
    position: relative;
    left: 65px;
}

.dc-no-more-items {
    text-align: center;
    padding: 10px;
}

.dc-avatar-cover {
    display: flex;

}

.dc-avatar-cover > img {
    object-fit: cover;
    object-position: top center;
}

/*****************************
 **  LV Data Loader Styles  **
 *****************************/

.data-loader-wrap.data-loader-transparent.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.data-loader-transparent.dc-data-loader {
    background: transparent;
}

.data-loader-wrap.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.dc-data-loader {
    background: inherit;
}


/*****************************
**     MIsc      **
*******************************/

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline {
    border: 0 !important;
}

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Global Search  **/
/***********************/

.dc-global-search-close-popup {
    position: absolute;
    background-color: transparent;
    top: 100px;
    left: 50%;
    z-index: 999 !important;
}

.dc-global-search-close-popup .close-text a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.dc-global-search-close-popup .close-text a i:hover {
    transform: rotate(180deg);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-container {
    position: absolute;
    background-color: #fff;
    min-width: 780px;
    max-width: 95%;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 8px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 999 !important;
}

.dc-global-search-control.dcui-icon-control .dcui-ic-icon,
.dc-global-search-control .dcui-form-control,
.dc-global-search-control .dcui-form-control:focus {
    background-color: transparent;
    font-size: 20px;
}

.dc-global-search-icon-container img {
    opacity: 0.3;
}

.dc-global-search-app-icon {
    display: flex;
}

.dc-global-search-result-text-container {
    margin-left: 15px;
    flex: 1;
}

.dc-global-search-app-icon.large img {
    width: 60px;
}

.dc-global-search-app-icon.small img {
    width: 35px;
}

.dc-global-search-app-name {
    font-size: 20px;
    color: black;
}

.dc-global-search-nav-app-name {

}

.dc-global-search-nav-item {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dc-global-search-nav-item.selected {
    background-color: #d7efff;
}

.dc-global-search-nav-app-name-container {
    flex: 1;
    margin-left: 10px;
}

.dc-search-result-container .dc-search-result-content {
    display: flex;
    height: 500px;
}

.dc-search-result-container .dc-global-search-nav-container {
    width: 225px;
    padding-right: 12px;
    border-right: 1px solid #f5f3f3;
}

.dc-search-result-container .dc-global-search-results {
    flex: 1;
    padding: 20px;
}

.dc-search-result-container .dc-search-result-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
}

.dc-search-result-container .dc-search-result-text {
    font-size: 26px;
    font-weight: 500;
    line-height: 31.2px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}

.dc-global-search-container .dc-search-container {
    height: 45px;
    background-color: rgba(242, 242, 242, 0.5);
    display: flex;
    align-items: center;
    padding-right: 5px;
}

.dc-global-search-container .dc-search-result-container {
    margin-top: 10px;
}

.dc-search-no-result-container-data-loader-container {
    height: 500px;
    position: relative;
}

.dc-global-search-container .dc-search-no-result-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    margin: auto;
}

.dc-global-search-no-results-container {
    flex: 1;
    display: flex;
    max-width: 450px;
    flex-wrap: wrap;
    flex-direction: column;
}

.dc-global-search-no-results-container .dc-no-result-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
}

.dc-global-search-no-results-container .dc-no-result-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    flex: 1;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensures compatibility with all browsers */
}

.dc-global-search-icon-container {
    min-width: 135px;
}

.dc-search-results-table {
    max-height: 400px;
}

/* A result row leads with a thumbnail when the app supplying it says the record
   is the kind that has one (an `image` key on the result, empty or not). The
   placeholder glyph is always in the box and the picture covers it, so a record
   with no picture — or one whose stored path no longer resolves — still occupies
   the same 28px and the column keeps one left edge. Kinds with no picture at all
   omit the key: those rows stay plain text and reserve no gap. */
.dc-search-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-search-result-thumb {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f3f7;
    color: #b6becb;
    font-size: 12px;
}

.dc-search-result-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
* Media Queries
*/
@media screen and (min-width: 1921px) {
    .ve-full-page-knife-cut {
        max-height: 1200px;
    }

    #app-sidebar {
        left: calc((100% - var(--content-guard)) / 2);
    }
}

@media screen and (max-width: 1679px) {
    .kc-columns .kc-col-left {
        padding-left: 8.5%;
    }

    .kc-columns .kc-col-right {
        padding-right: 8.5%;
    }

    #ve-page-auth .pa-left-content {
        max-width: 400px;
    }

    .bg-full-image .graphic-circuit-lines {
        width: 140px;
        top: calc(50% - 160px);
    }

    .auth-card-panel {
        width: 460px;
    }

    .auth-card-panel .acp-boxer {
        padding: 30px;
    }

    #app-container {
        padding: 50px 75px 20px;
    }

    #app-container::before {
        top: 40px;
        left: -150px;
        width: 218px;
        height: 100px;
    }
}

@media screen and (max-width: 1441px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 217px;
        height: 100px;
    }
}

@media screen and (max-width: 1025px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 200px;
        height: 100px;
    }
}

@media screen and (max-width: 991px) {

    .kc-columns .kc-col-left,
    .kc-columns .kc-col-right {
        width: 100%;
    }

    .kc-columns .kc-col-right .kc-skew {
        display: none;
    }

    .dc-global-search-container {
        min-width: 85%;
    }
}


/*
* Mobile View
*/

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {
    .auth-card-panel {
        width: 100%;
    }

    .auth-card-panel .auth-logo {
        text-align: center;
        margin-bottom: 16px;
        height: 100px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .dark-mode .auth-card-panel .acp-boxer,
    .light-mode .auth-card-panel .acp-boxer {
        background-color: transparent;
        padding: 40px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
        color: var(--color-text);
    }

    .light-mode .auth-card-panel .acp-boxer {
        box-shadow: none;
    }

    .dark-mode .auth-card-panel .acp-boxer .form-group {
        background-color: transparent;
    }

    .side-mega-menu {
    }

    .side-mega-menu .side-mega-container {
        padding: 30px 20px 0;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container {
        flex-direction: column;
        align-items: center;
        height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container .side-mega-middle-boxes {
        margin-right: 0;
        flex: 0 0 15%;
        width: 100%;
        height: 100px;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
        align-items: flex-start;
    }

    #app-sidebar {
        display: none;
    }

    #app-container {
        position: relative;
        margin-left: 0;
        margin-top: var(--topbar-height);
        display: block;
        min-height: 100%;
        padding: 25px 25px;
    }

    #app-topbar {
        padding-left: 15px;
        background-color: #181818 !important;
    }

    .top-mega-bar {
        display: block;
        color: white;
        height: 50px;
        width: 50px;
    }

    .tb-mega-menu-icon {
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 58px;
    }

    .app-card-panel .app-table {
        overflow-x: auto;
    }

    .app-menus {
        text-align: left;
    }

    .ac-title-container {
        flex-direction: column;
    }

    .app-menus div {
        margin-top: 10px;
        width: 100%;
    }

    /*.popup {*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*  min-width: 0;*/
    /*  top: 50%;*/
    /*  transform: translate(-50%, -50%);*/
    /*}*/
    .at-logged-user {
        display: none;
    }

    .at-logged-user-logo-only {
        display: block;
    }

    .at-profile_menu {
        display: flex;
        flex-direction: column;
        height: 80%;
        color: white;
    }

    .at-profile_sub_menu {
        flex: 1;
    }

    .at-profile_box {
        background-color: #4d4d4d;
        padding: 25px;
        color: white;
        flex-wrap: nowrap;
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        position: relative;
    }

    .at-profile_box:hover {
        background-color: black;
    }

    .app-table .at-table th,
    .app-table .at-table td {
        white-space: nowrap;
    }

    .cp-single-container {
        flex-direction: column;
    }

    .cp-single-details {
        display: flex;
        flex-direction: column;
    }

    .cp-single-status {
        width: fit-content;
    }

    .cp-menu-container {
        margin-top: 15px;
        display: flex;
    }

    .cp-menu-tabs {
        margin-top: 15px;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .cp-single-details-margin {
        margin-top: 10px;
    }

    .cp-single-details-margin h2 {
        overflow-wrap: anywhere;
    }

    .cp-single-wrap .app-photo-uploader {
        width: 70px;
        height: 70px;
        min-width: 70px !important;
    }

    .cp-single-userlist-container {
        height: 278px;
        overflow-y: auto;
    }

    #useraddform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #useraddform .content-tabs {
        height: 80%;
    }

    #useraddform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #useraddform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #usereditform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #usereditform .content-tabs {
        height: 80%;
    }

    #usereditform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #usereditform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .app-version {
        position: absolute;
        right: 5px;
        top: -25px;
        font-size: 15px;
        color: #8b8b8b;
    }

    .sc-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .se-nav {
        display: flex;
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .sc-sub-container {
        min-height: 650px;
        width: 100%;
    }

    .sc-nav {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .sc-nav-container {
        margin-bottom: 15px;
    }

    .ss-app-container {
        width: 100%;
    }

    .view_as_company_mobile_view {
        display: flex;
    }

    .view_as_company_desktop_view {
        display: none;
    }

    .mobile-drop-down-close {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-drop-down-close .close-icon {
        font-size: 30px;
        color: var(--quaternary-color);
    }

    .mobile-drop-down-close .close-icon :hover {
        cursor: pointer;
        color: var(--quinary-color);
    }

    .mobile-vw-search-container {
        margin-top: 15px;
    }

    .mb-vw-title {
        font-size: 25px;
        font-weight: 400;
        color: white;
    }

    .mobile-vw-container {
        width: 100%;
    }

    .mobile-view-container {
        background-color: #4d4d4d;
        padding: 0 15px;
        margin-top: 10px;
        display: flex;
        height: 60px !important;
        justify-content: space-between;
    }

    .mobile-vw-icon {
        color: white;
    }

    .mb-p-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 90%;
    }

    .mb-switch-container {
        cursor: pointer;
        height: 38px;
        line-height: 30px;
        padding: 5px 15px;
        text-align: center;
        margin-top: 5px;
        font-weight: 300;
        color: white;
        background: #454545;
    }

    .mobile-view-container:hover {
        background-color: #000;
    }

    .sc-nav-container {
        max-width: none !important;
        width: 100% !important;
    }

    .se-nav .se-nav-item > a {
        display: flex;
        padding: 13px 5px;
        text-align: center;
        width: 110px;
        height: 50px;
    }

    .left-top-bar-container {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .search-container {
        display: none;
    }

    .mobile-search-icon-container {
        display: flex;
        font-size: 23px;
        line-height: 3.2;
        position: relative;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

    .megaSearch-no-results-text {
        left: 88px;
    }

    .megaSearch-main-item {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .megaSearch-description {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .at-elem-separator {
        display: none;
    }

    #notification-icon {
        display: none;
    }

    .mark-as-red {
        font-size: 15px;
    }

    .no-notification {
        position: relative;
        top: 15px;
        height: 5vh;
    }

    .notification-container-mobile {
        max-height: 65vh;
    }

    .viewall-ul {
        position: relative;
        top: 10px;
    }

    .view-all-notifcations {
        margin-top: 10px;
        text-decoration: none;
    }
} .hsy-tooltip {
    position: relative;
    font-family: inherit;
    font-size: 10px;
  }
  .hsy-tooltip>.outlet,
  .hsy-tooltip>.tooltip {
    font-size: 1.4em;
  }
  .hsy-tooltip>.tooltip {
    display: none;
    position: absolute;
    background-color: var(--dcui-secondary-color);
    color: #fff;
    border-radius: 3px;
    border: 0px;
    outline: none;
    padding: 10px 15px;
    z-index: 100;
  }
  .hsy-tooltip .arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
  } 
.user-discard-btn{
    width: 42%;
}
.user-save-btn{
    width: 55%;
}

.popup.pop-card-panel.user-popup{
   width: 450px;
}
.user-info-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.user-icon{
    object-position: top;
}

.popup-overlay.user-remove-overlay{
    z-index: 1000 !important;
}