@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap);

:root {
   --pbgold: rgba(212, 175, 55, 0.4);
   --pbsilver: rgba(188, 198, 204, 0.4);
   --pbbronze: rgba(169, 113, 66, 0.4);
   --bg: #ffffff;

   --wxfdark: #1a1a1a;
   --wxfaccent: #ff5700;
   --wxfease: cubic-bezier(.4,1.9,.4,1);
}
.logo {
   font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -0.02em;
   white-space: nowrap;
   user-select: none;
   opacity: 0;
   transform: translateY(8px);
   animation: logoIn 640ms var(--wxfease) forwards;
}
.logosmall {
   font-size: 15px;
}
.logomedium {
   font-size: 21px;
}
.logolarge {
   font-size: clamp(86px, 15vw, 160px);
}

/* reliable reveal using max-width */
.wipe {
   display: inline-block;
   overflow: hidden;
   max-width: 0;
   animation: wipeIn 1200ms var(--wxfease) forwards;
   animation-delay: 120ms;
}

.base {
   color: var(--wxfdark);
}

.W {
   color: var(--wxfdark);
   font-size: 120%;
   margin-right: -0.075em
}

.x {
   color: var(--wxfaccent) !important;
   display: inline-block;
   transform-origin: 60% 70%;
   animation: xPop 1240ms var(--wxfease) forwards;
   animation-delay: 1240ms;
   font-size: 125%;
}

.chev {
   color: var(--wxfaccent) !important;   
   display: inline-block;
   opacity: 0;
   transform: translateX(-10px);
   animation: chevIn 840ms var(--wxfease) forwards;
   animation-delay: 1340ms;
}
.smalltrade {
   font-size: 0.6em;
   vertical-align: super;
}

.x1 {
   color: var(--wxfaccent) !important;
   display: inline-block;
   font-size: 125%;
}

.chev1 {
   color: var(--wxfaccent) !important;
   display: inline-block;   
}

@keyframes logoIn {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes wipeIn {
   to {
      max-width: 100ch;
   }
}

@keyframes xPop {
   0% {
      transform: translateY(10px) scale(.80) rotate(-3deg);
   }

   60% {
      transform: translateY(-2px) scale(1.25) rotate(1deg);
   }

   100% {
      transform: translateY(0) scale(1) rotate(0deg);
   }
}

@keyframes chevIn {
   to {
      opacity: 1;
      transform: translateX(0);
   }
}







.fl {
    color: black;
    font-family: 'Figtree',Arial;
}

.flb {
    color: black;
    font-family: 'Figtree',Arial;
    font-weight: bold;
}


.sbg {
    background-color: #f7f7f7;
}
.e-grid .e-altrow {
    background-color: #f2f2f2;
}
.e-pb-gold {
    background-color: var(--pbgold);
   
    border-right: 1px solid silver;
}
.e-pb-silver {
    background-color: var(--pbsilver);
    
    border-right: 1px solid silver;
}
.e-pb-bronze {
    background-color: var(--pbbronze);
    
    border-right: 1px solid silver;
}
.pr-20{padding-right:20px;}
.hidden {
    display: none;
}
.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#toast_type .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}

.bootstrap5 #toast_type .e-toast-icon.e-icons,
.bootstrap5-dark #toast_type .e-toast-icon.e-icons {
    height: 25px;
}

.e-tooltip-css {
    filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
}

.text {
    text-transform: capitalize;
    width: 155px;
}

.democontent {
    border: 1px solid grey;
}


.info a {
    color: #2FA1E3;
}

.info {
    padding-left: 12px;
    padding-right: 5px;
}
.edit_flex-container {
    display: flex;
    flex-wrap: nowrap;
}

.edit_flex-container .box1 {
    width: 90%;
}

.edit_flex-container .box2 {
    width: 10%;
    text-align: center;
    opacity: 0.6;
}

.highlight0 {
}

.highlight1 {
    background-color: yellow !important;
}

.highlight2 {
    background-color: orange !important;
}

.highlight3 {
    background-color: palegreen !important;
}

.highlight4 {
    background-color: palevioletred !important;
}

.highlight5 {
    background-color: lightskyblue !important;
}
.highlight6 {
    background-color: lightpink !important;
}
.highlight7 {
    background-color: greenyellow !important;
}



.inv-action-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 14px;
   margin-bottom: 14px;
   background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
}

.inv-action-left, .inv-action-right {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.inv-action-btn {
   font-size: 13px !important;
   padding: 6px 14px !important;
   min-width: 90px;
}

.veh-list-bar {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding: 8px 0 10px;
   margin-bottom: 8px;
   border-bottom: 1px solid #e4e4e4;
}

.inv-section {
   margin-bottom: 16px;
   border: 1px solid #e4e4e4;
   border-radius: 6px;
   overflow: hidden;
}

.inv-section-label {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: #999;
   background: #f8f8f8;
   padding: 6px 14px;
   border-bottom: 1px solid #e4e4e4;
}

.inv-field-row {
   display: flex;
   flex-wrap: wrap;
   gap: 0 20px;
   padding: 12px 14px 4px;
   align-items: flex-start;
}

.inv-field {
   min-width: 120px;
   flex: 1;
   margin-bottom: 12px;
}

.inv-field-sm {
   max-width: 160px;
   flex: 0 1 140px;
}

.inv-field-xs {
   max-width: 100px;
   flex: 0 1 80px;
}

.inv-field-lg {
   flex: 0 1 320px;
}

.inv-field-full {
   flex: 0 0 100%;
}

.inv-footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   padding: 12px 14px 4px;
   border-top: 1px solid #e4e4e4;
   margin-top: 4px;
}

 .snag-filter-bar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 12px;
        background: #f8f8f8;
        border: 1px solid #e4e4e4;
        border-radius: 6px;
    }
    .snag-filter-left  { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }
    .snag-filter-right { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; align-self: flex-end; }
    .snag-filter-field { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.snag-filter-field-2 {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 220px;
}
    .snag-date-select  { display: flex; align-items: flex-start; align-self: flex-start; padding-top: 0; flex-shrink: 0; }

.urgent { background-color: #fad5d5 !important; }

.bad { background-color: #fffbe6 !important; }


/* ============================================================================
   WorXflo Chat

   IMPORTANT: every colour is now var(--ct-*, <literal fallback>). The previous
   version used bare var(--ct-*) — those tokens are not defined in this app, so
   every declaration using one was invalid at computed-value time:
     * `background: var(--ct-secondary-bg)`      -> transparent  (no panels)
     * `border: 1px solid var(--ct-border-color)`-> the whole shorthand unset
                                                    (no rails, no dividers)
     * `border-right-color: var(--ct-light)`     -> currentColor (black tails)
     * bubble bg transparent + `color:#fff`      -> invisible outgoing text
   With fallbacks in place it works standalone, and still tracks the Hyper/Attex
   theme automatically if those tokens ever do get loaded.
   ============================================================================ */

:root {
   --wx-chat-height: clamp(480px, calc(100vh - 250px), 900px);

   /* surfaces */
   --wx-surface: var(--ct-secondary-bg, #ffffff);
   --wx-surface-2: var(--ct-tertiary-bg, #f5f6f8);
   --wx-thread-bg: var(--ct-body-bg, #fafbfc);
   --wx-rail: var(--ct-border-color, #e3e6ea);

   /* text */
   --wx-text: var(--ct-emphasis-color, #212529);
   --wx-muted: var(--ct-gray-500, #8a9099);
   --wx-faint: var(--ct-gray-400, #b6bcc4);

   /* accents */
   --wx-primary: var(--ct-primary, #3b7ddd);
   --wx-primary-subtle: var(--ct-primary-bg-subtle, #e7f0fd);
   --wx-danger: var(--ct-danger, #dc3545);
   --wx-danger-subtle: var(--ct-danger-bg-subtle, #fbe3e5);
   --wx-info: var(--ct-info, #4bafe1);

   /* bubbles */
   --wx-bubble-in-bg: var(--ct-light, #eceef1);
   --wx-bubble-in-fg: var(--ct-gray-800, #24292f);
   --wx-bubble-out-bg: var(--ct-primary, #3b7ddd);
   --wx-bubble-out-fg: #ffffff;

   --wx-shadow: var(--ct-box-shadow, 0 1px 2px rgba(16, 24, 40, .06));
   --wx-radius: var(--ct-border-radius, 6px);
}

[data-bs-theme=dark] {
   --wx-surface: var(--ct-secondary-bg, #2b2f39);
   --wx-surface-2: var(--ct-tertiary-bg, #343a46);
   --wx-thread-bg: var(--ct-body-bg, #232731);
   --wx-rail: var(--ct-border-color, #3d4350);
   --wx-text: var(--ct-emphasis-color, #eef0f3);
   --wx-muted: var(--ct-gray-500, #98a0ad);
   --wx-faint: var(--ct-gray-400, #737b88);
   --wx-bubble-in-bg: var(--ct-tertiary-bg, #3a4150);
   --wx-bubble-in-fg: var(--ct-emphasis-color, #eef0f3);
   --wx-primary-subtle: var(--ct-primary-bg-subtle, #24344d);
   --wx-danger-subtle: var(--ct-danger-bg-subtle, #4a2429);
}

/* ---------------------------------------------------------------- shells -- */

.wx-panel {
   display: flex;
   flex-direction: column;
   height: var(--wx-chat-height);
   background: var(--wx-surface);
   border: 1px solid var(--wx-rail);
   border-radius: var(--wx-radius);
   box-shadow: var(--wx-shadow);
   overflow: hidden;
}

.wx-panel-head {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   border-bottom: 1px solid var(--wx-rail);
   background: var(--wx-surface);
}

.wx-panel-body {
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
}

.wx-panel-foot {
   flex: 0 0 auto;
   padding: 12px 16px;
   border-top: 1px solid var(--wx-rail);
   background: var(--wx-surface-2);
}

/* Matches the .inv-section-label idiom already in site.css */
.wx-eyebrow {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--wx-muted);
   margin: 0;
}

.wx-title {
   font-size: 1rem;
   font-weight: 600;
   color: var(--wx-text);
   margin: 0;
   line-height: 1.3;
}

.wx-subtitle {
   font-size: 12px;
   color: var(--wx-muted);
   margin: 0;
}

/* ------------------------------------------------------- contacts (grid) -- */

.wx-contacts .e-grid,
.wx-contacts .e-grid .e-gridheader,
.wx-contacts .e-grid .e-gridcontent,
.wx-contacts .e-grid .e-content {
   border: 0;
   background: transparent;
}

   /* Do NOT display:none the header — Syncfusion measures auto-width columns
      from the header table, and without it the Name column collapses to ~0
      and the name disappears. Collapse it to zero height instead. */
   .wx-contacts .e-grid .e-gridheader {
      height: 0;
      min-height: 0;
      padding: 0 !important;
      border: 0;
      overflow: hidden;
      visibility: hidden;
   }

   /* Kill the global .e-grid .e-altrow striping inside the contacts panel.
      The stripe is painted on the <tr>, not the cell — clearing the cell only
      lets the row's grey show through, which is why it survived last time. */
   .wx-contacts .e-grid .e-altrow,
   .wx-contacts .e-grid .e-row {
      background-color: transparent;
   }

   .wx-contacts .e-grid .e-rowcell {
      border: 0;
      padding: 8px 12px;
      cursor: pointer;
      vertical-align: middle;
   }

   .wx-contacts .e-grid .e-row:hover .e-rowcell {
      background: var(--wx-surface-2);
   }

   /* Syncfusion wraps every column template in a bare <div>, and adds a
      .e-tooltiptext span on top of that when ClipMode is on. If either of
      those is shrink-to-fit, `.wx-contact { width: 100% }` resolves against
      nothing and the name — the only shrinkable item in the flex row — is
      squeezed to zero width and clipped by its own overflow:hidden. Force
      both wrappers to be full-width blocks. */
   .wx-contacts .e-grid .e-rowcell > div,
   .wx-contacts .e-grid .e-rowcell .e-tooltiptext {
      display: block;
      width: 100%;
      min-width: 0;
   }

   /* Syncfusion's cell focus outline reads as a stray blue box on click */
   .wx-contacts .e-grid .e-rowcell.e-focus::before,
   .wx-contacts .e-grid .e-focused:not(.e-menu-item)::before {
      box-shadow: none !important;
      border: 0 !important;
   }

   .wx-contacts .e-grid .e-row.e-active .e-rowcell,
   .wx-contacts .e-grid td.e-active {
      background: var(--wx-primary-subtle) !important;
      color: var(--wx-text) !important;
      box-shadow: inset 3px 0 0 var(--wx-primary);
   }

.wx-contact {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   min-width: 0;
}

/* min-width is deliberately NOT 0. `min-width: 0` + `overflow: hidden` is the
   combination that lets a flex item vanish silently: if anything upstream fails
   to give the row a width, the name collapses to nothing while the fixed-size
   avatar beside it still renders — exactly the symptom seen here. A floor of
   4ch means the worst case is a truncated name, never an invisible one.
   Colour is a literal, not a --ct-* token, for the same reason. */
.wx-contact-name {
   flex: 1 1 auto;
   min-width: 4ch;
   font-size: 13px;
   font-weight: 600;
   color: #212529;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

[data-bs-theme=dark] .wx-contact-name {
   color: #eef0f3;
}

   /* The WorXflo banner markup is rendered inside the name span for the system
      sender — stop its 120%/125% sizing from bloating the row. */
   .wx-contact-name .W,
   .wx-contact-name .x1 {
      font-size: 110%;
   }

/* Unread badge now sits in the same flex row as the avatar + name, pinned right.
   Nothing is rendered at all when the count is zero, so the row is simply blank. */
.wx-contact .wx-unread,
.wx-contact-row .wx-unread {
   flex: 0 0 auto;
   margin-left: auto;
}

/* --- plain-list contacts (Home.listversion.razor, no SfGrid) ------------- */

.wx-contact-list {
   overflow-y: auto;
   padding: 4px 0;
}

.wx-contact-row {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 8px 14px;
   cursor: pointer;
   border: 0;
   background: transparent;
   transition: background .12s ease;
}
   .wx-contact-row {
      border-bottom: 1px solid #e3e6ea;
   }

   /* no trailing rule under the last contact */
   .wx-contact-row:last-child {
      border-bottom: 0;
   }

   .wx-contact-row:hover {
      background: var(--wx-surface-2);
   }

   .wx-contact-row:focus-visible {
      outline: 2px solid var(--wx-primary);
      outline-offset: -2px;
   }

   .wx-contact-row.is-active {
      background: var(--wx-primary-subtle);
      box-shadow: inset 3px 0 0 var(--wx-primary);
   }

.wx-avatar {
   flex: 0 0 auto;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   object-fit: cover;
   background: var(--wx-surface-2);
   border: 1px solid var(--wx-rail);
}

.wx-avatar-sm {
   width: 32px;
   height: 32px;
}

/* Unread pill — the one place the WorXflo orange earns its keep */
.wx-unread {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 22px;
   height: 22px;
   padding: 0 7px;
   border-radius: 11px;
   background: var(--wxfaccent, #ff5700);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
}

/* ------------------------------------------------------------- messages -- */

.wx-thread {
   height: 100%;
   overflow-y: auto;
   padding: 18px 16px 8px;
   scroll-behavior: smooth;
   background: var(--wx-thread-bg);
}

   .wx-thread::-webkit-scrollbar {
      width: 8px;
   }

   .wx-thread::-webkit-scrollbar-thumb {
      background: var(--wx-faint);
      border-radius: 4px;
   }

/* Date divider */
.wx-day {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 14px 0 18px;
}

   .wx-day::before,
   .wx-day::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--wx-rail);
   }

   .wx-day span {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--wx-muted);
      background: var(--wx-surface);
      border: 1px solid var(--wx-rail);
      border-radius: 50rem;
      padding: 3px 12px;
      white-space: nowrap;
   }

.wx-msg {
   display: flex;
   align-items: flex-end;
   gap: 10px;
   margin-bottom: 14px;
}

.wx-msg--out {
   flex-direction: row-reverse;
}

.wx-msg-main {
   display: flex;
   flex-direction: column;
   max-width: min(78%, 560px);
   min-width: 0;
}

.wx-msg--out .wx-msg-main {
   align-items: flex-end;
}

.wx-msg-sender {
   font-size: 11px;
   font-weight: 600;
   color: var(--wx-muted);
   margin: 0 4px 3px;
}

/* Your own name above every one of your own messages is noise */
.wx-msg--out .wx-msg-sender {
   display: none;
}

/* Bubble ------------------------------------------------------------------ */

.wx-bubble {
   position: relative;
   padding: 9px 13px;
   border-radius: 12px;
   background: var(--wx-bubble-in-bg);
   color: var(--wx-bubble-in-fg);
   font-size: 13px;
   line-height: 1.5;
   min-height: 20px;
   word-break: break-word;
   overflow-wrap: anywhere;
   border-bottom-left-radius: 3px;
}

.wx-msg--out .wx-bubble {
   background: var(--wx-bubble-out-bg);
   color: var(--wx-bubble-out-fg);
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 3px;
}

.wx-bubble img {
   max-width: 100%;
   border-radius: 6px;
   vertical-align: middle;
}

/* Bubble tail. Note the explicit `border-color: transparent` *after* the
   shorthand: if a token ever fails to resolve the tail falls back to
   invisible rather than to currentColor (which is what produced the black
   triangles). */
.wx-bubble::after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-color: transparent;
}

.wx-msg--in .wx-bubble::after {
   left: -8px;
   border-right-color: var(--wx-bubble-in-bg);
   border-bottom-color: var(--wx-bubble-in-bg);
}

.wx-msg--out .wx-bubble::after {
   right: -8px;
   border-left-color: var(--wx-bubble-out-bg);
   border-bottom-color: var(--wx-bubble-out-bg);
}

/* Attachment chip --------------------------------------------------------- */

.wx-attach {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid rgba(255, 255, 255, .28);
}

.wx-msg--in .wx-attach {
   border-top-color: var(--wx-rail);
}

.wx-attach img {
   width: 28px;
   height: 28px;
   object-fit: contain;
   flex: 0 0 auto;
}

.wx-attach-btn {
   font-size: 11px !important;
   padding: 2px 10px !important;
   line-height: 1.6 !important;
   border-radius: 50rem !important;
   white-space: nowrap;
}

/* The View button sits on the blue bubble — make it readable there */
.wx-msg--out .wx-attach-btn {
   background: rgba(255, 255, 255, .18) !important;
   border-color: rgba(255, 255, 255, .45) !important;
   color: #fff !important;
}

   .wx-msg--out .wx-attach-btn:hover {
      background: rgba(255, 255, 255, .30) !important;
   }

/* Meta row (time + read receipt) ------------------------------------------ */

.wx-msg-meta {
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 4px 4px 0;
   font-size: 10.5px;
   color: var(--wx-muted);
}

.wx-tick-read {
   color: var(--wx-info);
}

/* Hover actions (mirrors the theme's .conversation-actions) ---------------- */

.wx-msg-actions {
   flex: 0 0 auto;
   align-self: center;
   opacity: 0;
   transform: translateY(2px);
   transition: opacity .15s ease, transform .15s ease;
   pointer-events: none;
}

   .wx-msg:hover .wx-msg-actions,
   .wx-msg-actions:focus-within {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
   }

.wx-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: var(--wx-muted);
   font-size: 13px;
   cursor: pointer;
   transition: background .15s ease, color .15s ease;
}

   .wx-icon-btn:hover,
   .wx-icon-btn:focus-visible {
      background: var(--wx-danger-subtle);
      color: var(--wx-danger);
      outline: none;
   }

/* --------------------------------------------------------------- composer -- */

.wx-composer {
   display: flex;
   align-items: center;
   gap: 10px;
}

.wx-composer-input {
   flex: 1 1 auto;
   min-width: 0;
}

   .wx-composer-input .e-input-group {
      border-radius: 50rem;
      padding-left: 6px;
   }

/* ------------------------------------------------------------ empty state -- */

.wx-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   height: var(--wx-chat-height);
   border: 1px dashed var(--wx-rail);
   border-radius: var(--wx-radius);
   background: var(--wx-surface);
   color: var(--wx-muted);
   text-align: center;
   padding: 24px;
}

   .wx-empty i {
      font-size: 42px;
      color: var(--wx-faint);
   }

.wx-empty-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--wx-text);
}

/* ----------------------------------------------------------- small screens -- */

@media (max-width: 991.98px) {
   :root {
      --wx-chat-height: 60vh;
   }

   .wx-msg-main {
      max-width: 88%;
   }
}

/* Respect reduced-motion (you hit this on the site hero animation before) */
@media (prefers-reduced-motion: reduce) {
   .wx-thread {
      scroll-behavior: auto;
   }

   .wx-msg-actions {
      transition: none;
   }
}