@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('components/jump-grid-fill.css');
@import url('components/empty-state.css');
@import url('components/billing-wizard.css');
@import url('features/rdc/rdc-operations.css?v=20260805-danos-notes-04');
@import url('features/planning-v2.css');
@import url('features/weekly-planning.css');
@import url('features/trafego/operations.css');
@import url('features/trafego/gps-tasks.css');
@import url('features/trafego/trip-closing.css');

:root {
    --atrans-primary: #0A43E8;
    --atrans-accent: #19C8FF;
    --atrans-navy: #0B0F1F;
    --atrans-deep: #0A1A3A;
    --atrans-sidebar: var(--atrans-deep);
    --atrans-ink: var(--atrans-deep);
    --atrans-muted: #49526B;
    --atrans-light: #F5F7FA;
    --atrans-border: #D9E1EE;
    --atrans-shadow: 0 10px 30px rgba(10, 67, 232, 0.08);
    --atrans-radius: 8px;
    /* Single height for the shared form fields. It aligns .form-control,
       .ctlf4-native-editor and .jump-form-phone-action on the same baseline. */
    --jump-field-height: 34px;
    /* Interface scale. It is the factor of the CSS `zoom` applied to the body, and every viewport
       length in the product divides by it: a viewport unit keeps resolving against the unscaled
       viewport and is only shrunk afterwards, so `height: 100vh` would stop filling the screen and
       leave a blank strip. Dividing cancels that. At 1 the division is the identity and nothing
       moves, which is why it can be introduced ahead of the setting that changes it. */
    --jump-zoom: 1;
}

/* DevExpress drop-downs under the interface scale.
   DevExpress places a drop-down (combo box, date edit, tag box, menu) by measuring its editor with
   getBoundingClientRect, which answers in viewport pixels, and writing the result as a transform on the
   drop-down element, which the document zoom then shrinks again. At 80% the box landed at 80% of the
   editor's position: far to the left of a combo box on the right of the screen, instead of under it.
   The element DevExpress positions is taken out of the zoom so its coordinates land where they were
   measured, and the user's scale is put back on the content. It holds at any nesting depth, because
   zoom multiplies: 1 / scale under a scaled ancestor is always 1. At 100% both factors are 1. */
dxbl-dropdown,
dxbl-itemlist-dropdown {
    zoom: calc(1 / var(--jump-zoom, 1));
}

dxbl-dropdown > .dxbl-dropdown-dialog,
dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
    zoom: var(--jump-zoom, 1);
}

/* MudBlazor popovers (the user menu, MudMenu, MudSelect) under the interface scale, same cause and
   same cure: MudBlazor measures the anchor with getBoundingClientRect and writes left, top and
   min-width in those viewport pixels on the .mud-popover element itself. */
.mud-popover {
    zoom: calc(1 / var(--jump-zoom, 1));
}

.mud-popover > * {
    zoom: var(--jump-zoom, 1);
}

/* Compatibility for Bootstrap 5 utilities.
   The app loads Bootstrap 4.3.1, which defines .text-right/.text-left and does not
   know .text-end/.text-start. The markup, however, standardised on the Bootstrap 5
   names (hundreds of uses, mostly in numeric fields), so
   it is here that those classes come to exist. Without these rules the alignment
   fails silently. See specs/ui-components-specs.md. */
.text-end {
    text-align: right !important;
}

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

.atrans-toolbar-search-hit {
    padding: 0 2px;
    color: inherit;
    background: rgba(25, 200, 255, 0.24);
    border-radius: 4px;
    box-shadow: inset 0 -1px 0 rgba(10, 67, 232, 0.12);
}

.atrans-toolbar-search-hit-active {
    background: rgba(10, 67, 232, 0.2);
    box-shadow: inset 0 0 0 1px rgba(10, 67, 232, 0.18);
}

html, body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background: var(--atrans-light) !important;
    color: var(--atrans-ink);
    min-height: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Sora', 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: 0;
}

a, .btn-link {
    color: var(--atrans-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--atrans-primary);
    border-color: var(--atrans-primary);
}

.atrans-app-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh / var(--jump-zoom, 1));
    background: var(--atrans-light);
}

.atrans-main-content {
    height: calc(100vh / var(--jump-zoom, 1));
    padding: 0 !important;
    background: var(--atrans-light);
    overflow: hidden;
}

.atrans-workspace,
.atrans-tab-content-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

/* KPI band of the Dispatch Register — it reuses the items/icons
   da Load Order (.load-order-kpi-item / .load-order-kpi-icon, globais),
   with only its own grid for 6 columns. */
.shipment-kpi-strip {
    display: grid;
    /* minmax(0, fr): the columns always shrink to fit on a single row;
       the values are cut with an ellipsis instead of breaking the band. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .6fr) 46px;
    align-items: stretch;
    min-height: 88px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 42, 84, .05);
    overflow: hidden;
    user-select: none;
}

/* Button that collapses/expands the Identification section (the Purchases pattern). */
.shipment-kpi-toggle {
    align-self: center;
    justify-self: center;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #B5D4F4;
    border-radius: 8px;
    background: #ffffff;
    color: #185FA5;
    cursor: pointer;
}

.shipment-kpi-toggle:hover {
    background: #E6F1FB;
}

/* Clickable items on the bar: they take the cursor to the corresponding field. */
.shipment-kpi-strip .shipment-kpi-seg {
    cursor: pointer;
    transition: background .12s ease;
}

.shipment-kpi-strip .shipment-kpi-seg:hover {
    background: #eef4fd;
}

/* Compact version of the items: smaller text and icons so that all the
   information of each section is visible on a single row. */
.shipment-kpi-strip {
    min-height: 64px;
}

.shipment-kpi-strip .load-order-kpi-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    padding: 8px 10px;
}

.shipment-kpi-strip .load-order-kpi-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
    border-radius: 6px;
}

.shipment-kpi-strip .load-order-kpi-item span:not(.load-order-kpi-icon) {
    margin-bottom: 2px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shipment-kpi-strip .load-order-kpi-item strong {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1400px) {
    /* Narrow screens: even more compact, always on one row. */
    .shipment-kpi-strip {
        min-height: 56px;
    }

    .shipment-kpi-strip .load-order-kpi-item {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 5px;
        padding: 7px 6px;
    }

    .shipment-kpi-strip .load-order-kpi-icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .shipment-kpi-strip .load-order-kpi-item strong {
        font-size: 10.5px;
    }
}

.atrans-content-splitter {
    border: 0 !important;
    background: var(--atrans-light);
}

.atrans-sidebar-drawer,
.atrans-sidebar-drawer .mud-drawer {
    background: transparent !important;
    border-right: 0 !important;
    box-shadow: 8px 0 30px rgba(11, 15, 31, 0.12);
}

/* The sidebar must never show scrollbars of its own; the rail and the panel
   gerem o scroll internamente (com scrollbar escondida). */
.atrans-sidebar-drawer .mud-drawer-content {
    overflow: hidden !important;
}

.atrans-sidebar {
    width: 100%;
    height: calc(100vh / var(--jump-zoom, 1));
    display: flex;
    min-width: 0;
    color: var(--atrans-ink);
    background: #fff;
}

.atrans-sidebar-rail {
    width: 72px;
    min-width: 72px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 10px;
    color: #fff;
    background:
        radial-gradient(circle at 28% 10%, rgba(25, 200, 255, 0.26), transparent 32%),
        linear-gradient(180deg, var(--atrans-primary) 0%, var(--atrans-sidebar) 100%);
}

.atrans-rail-logo,
.atrans-rail-item,
.atrans-rail-collapse,
.atrans-rail-report {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.atrans-rail-logo {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.atrans-rail-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.atrans-rail-icon-image {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.atrans-rail-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.atrans-rail-nav::-webkit-scrollbar {
    display: none;
}

.atrans-rail-item:hover,
.atrans-rail-collapse:hover,
.atrans-rail-report:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.atrans-rail-item.is-active {
    color: var(--atrans-sidebar);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.atrans-rail-collapse {
    margin-top: auto;
    color: var(--atrans-sidebar);
    background: #fff;
    border-radius: 50%;
}

/* Follows the collapse button, which is the one pinned to the foot of the rail. Smaller than the
   group icons on purpose: it is a tool, not a place to go. */
.atrans-rail-report {
    width: 36px;
    height: 36px;
}

.atrans-sidebar-panel {
    width: 244px;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 16px 12px;
    background: #fff;
    border-right: 1px solid var(--atrans-border);
    box-shadow: inset -1px 0 0 rgba(217, 225, 238, 0.55);
}

.atrans-panel-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-height: 44px;
}

.atrans-panel-brand div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
    line-height: 1.05;
}

.atrans-panel-brand strong {
    color: var(--atrans-ink);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
}

.atrans-panel-brand span {
    margin-top: 2px;
    color: var(--atrans-muted);
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1.05;
}

.atrans-panel-brand small {
    align-self: flex-start;
    padding: 2px 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--atrans-primary), var(--atrans-accent));
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 800;
}

.atrans-panel-search {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px;
    padding: 0 10px;
    color: #6c758a;
    background: #f7f9fc;
    border: 1px solid var(--atrans-border);
    border-radius: var(--atrans-radius);
}

.atrans-panel-search input {
    width: 100%;
    min-width: 0;
    color: var(--atrans-ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 0.86rem;
    font-weight: 600;
}

.atrans-panel-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px;
    padding: 8px 6px 2px;
}

.atrans-panel-current-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.atrans-panel-current-labels span,
.atrans-panel-current-labels small,
.atrans-feature-context {
    color: #7b8495;
    font-size: 0.72rem;
    font-weight: 400;
}

.atrans-search-results .atrans-feature-context {
    font-size: 0.64rem;
    line-height: 1.15;
}

.atrans-panel-current-labels span {
    color: #8a94a6;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
}

.atrans-panel-current-labels strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--atrans-ink);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atrans-panel-current-labels small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atrans-panel-sections {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.atrans-menu-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.atrans-section-toggle {
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
    color: #263451;
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
}

.atrans-section-toggle:hover,
.atrans-section-toggle.is-open {
    color: #12365f;
    background: #fafcff;
}

.atrans-section-toggle i {
    color: #9aa4b3;
    font-size: 0.78rem;
}

.atrans-section-label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atrans-section-meta {
    min-width: 18px;
    padding: 0 2px;
    color: #9aa4b3;
    background: transparent;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 400;
    text-align: center;
}

.atrans-feature-list,
.atrans-search-results,
.atrans-feature-subsection {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.atrans-feature-list {
    padding: 1px 0 4px 6px;
}

.atrans-search-results {
    gap: 6px;
    padding: 2px 0 4px;
}

.atrans-feature-subsection {
    margin-top: 2px;
    padding-left: 8px;
    border-left: 1px solid #edf2f8;
}

.atrans-feature-subtitle {
    max-width: 100%;
    overflow: hidden;
    padding: 5px 8px 2px;
    color: #69748c;
    font-size: 0.68rem;
    font-weight: 600;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.atrans-feature-row {
    min-height: 31px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.atrans-feature-row.has-favorite-action {
    grid-template-columns: minmax(0, 1fr) 30px;
}

.atrans-favorite-edit-row {
    grid-template-columns: 24px minmax(0, 1fr);
}

.atrans-favorite-edit-row.is-dragging {
    opacity: 0.62;
}

.atrans-favorite-drag-handle {
    width: 24px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    cursor: grab;
}

.atrans-favorite-drag-handle:active {
    cursor: grabbing;
}

.atrans-favorite-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.atrans-panel-current > .atrans-favorite-panel-action,
.atrans-favorite-edit-actions {
    margin-right: -6px;
}

.atrans-favorite-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
}

.atrans-favorite-panel-action {
    width: 28px;
    height: 28px;
}

.atrans-favorite-panel-action:hover {
    color: var(--atrans-primary);
    background: #f0f6ff;
}

.atrans-favorite-panel-action:disabled {
    color: #c3cad5;
    background: transparent;
    cursor: default;
}

/* The gear reads like the icons of the actions it opens: same size and same grey as the feature
   rows' icons, without the weight of a button. */
.atrans-favorite-panel-action-gear {
    width: 22px;
    height: 22px;
    margin-right: -4px;
}

.atrans-favorite-panel-action-gear .mud-icon-root {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #7f8898;
    font-size: 1.06rem;
}

.atrans-favorite-panel-action-gear:hover .mud-icon-root {
    color: var(--atrans-primary);
}

/* Actions of the favorites panel, in a flyout hanging from the gear by its top-left corner. */
.atrans-favorite-menu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    text-align: left;
}

.atrans-favorite-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    color: var(--atrans-deep);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
}

.atrans-favorite-menu-item .mud-icon-root {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #7f8898;
    font-size: 1.06rem;
}

.atrans-favorite-menu-item:hover {
    color: var(--atrans-primary);
    background: #f0f6ff;
}

.atrans-favorite-menu-item:hover .mud-icon-root {
    color: var(--atrans-primary);
}

.atrans-feature-link {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    color: var(--atrans-deep);
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
    font-weight: 400;
    text-align: left;
}

.atrans-feature-row .atrans-feature-link {
    min-width: 0;
}

.atrans-favorite-toggle {
    width: 30px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9aa4b3;
    background: transparent;
    border: 0;
    border-radius: var(--atrans-radius);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, visibility 0.18s ease;
}

.atrans-feature-row:hover .atrans-favorite-toggle,
.atrans-feature-row:focus-within .atrans-favorite-toggle {
    opacity: 0.72;
    pointer-events: auto;
    visibility: visible;
}

.atrans-favorite-toggle:hover,
.atrans-favorite-toggle.is-favorite {
    color: #d99a00;
    background: #fff8e6;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.atrans-favorite-toggle .mud-icon-root {
    width: 17px;
    height: 17px;
    font-size: 1rem;
}

.atrans-feature-link .mud-icon-root {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #7f8898;
    font-size: 1.06rem;
    opacity: 1;
}

.atrans-feature-icon-image {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
    background-color: #7f8898;
    opacity: 1;
    -webkit-mask: var(--atrans-menu-icon) center / contain no-repeat;
    mask: var(--atrans-menu-icon) center / contain no-repeat;
}

.atrans-feature-text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--atrans-deep);
    text-align: left;
}

.atrans-feature-title {
    max-width: 100%;
    overflow: hidden;
    color: var(--atrans-deep);
    font-size: 0.83rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atrans-feature-context {
    max-width: 100%;
    overflow: hidden;
    color: var(--atrans-deep);
    opacity: 0.7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atrans-feature-link:hover {
    color: var(--atrans-deep);
    background: #fbfdff;
}

.atrans-feature-link.is-active {
    color: var(--atrans-ink);
    background: #f8fbff;
    box-shadow: inset 1px 0 0 var(--atrans-primary);
}

.atrans-feature-link:hover .mud-icon-root {
    color: #687386;
    opacity: 1;
}

.atrans-feature-link:hover .atrans-feature-icon-image {
    background-color: #687386;
    opacity: 1;
}

.atrans-feature-link.is-active .mud-icon-root {
    color: var(--atrans-primary);
    opacity: 1;
}

.atrans-feature-link.is-active .atrans-feature-icon-image {
    background-color: var(--atrans-primary);
    opacity: 1;
}

.atrans-feature-link.is-active .atrans-feature-title {
    font-weight: 500;
}

.atrans-feature-link:hover .atrans-feature-title {
    font-weight: 700;
}

.atrans-sidebar.is-collapsed {
    width: 72px;
    overflow: hidden;
}

.load-order-page {
    color: var(--atrans-ink);
}

.load-order-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.load-order-title {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.load-order-title-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--atrans-deep) 0%, var(--atrans-primary) 64%, var(--atrans-accent) 100%);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(10, 67, 232, 0.22);
    font-size: 1.65rem;
}

.load-order-title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.load-order-title-copy strong {
    color: var(--atrans-ink);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(1.35rem, 2vw / var(--jump-zoom, 1), 1.85rem);
    font-weight: 700;
    line-height: 1.2;
}

.load-order-title-copy small {
    margin-top: 5px;
    color: var(--atrans-muted);
    font-weight: 600;
}

.load-order-page .dxbl-fl,
.load-order-page .dxbl-form-layout {
    gap: 14px;
}

.load-order-page .dxbl-fl-group,
.load-order-page .dxbl-form-layout-group,
.load-order-page .dxbs-fl-group,
.load-order-page .card {
    background: #fff !important;
    border: 1px solid var(--atrans-border) !important;
    border-radius: var(--atrans-radius) !important;
    box-shadow: var(--atrans-shadow);
}

.load-order-page .dxbl-fl-group-header,
.load-order-page .dxbl-group-header,
.load-order-page .dxbs-fl-group-header,
.load-order-page legend {
    color: var(--atrans-ink) !important;
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700 !important;
}

.load-order-page .dxbl-text-edit,
.load-order-page .dxbl-spin-edit,
.load-order-page .dxbl-combobox,
.load-order-page .dxbs-textbox,
.load-order-page .form-control,
.load-order-page input:not([type='checkbox']) {
    min-height: 38px;
    color: var(--atrans-ink);
    background: #fff;
    border-color: var(--atrans-border) !important;
    border-radius: var(--atrans-radius) !important;
}

.load-order-page .dxbl-text-edit:focus-within,
.load-order-page .dxbl-spin-edit:focus-within,
.load-order-page .dxbl-combobox:focus-within,
.load-order-page .form-control:focus {
    border-color: var(--atrans-primary) !important;
    box-shadow: 0 0 0 3px rgba(10, 67, 232, 0.12) !important;
}

.load-order-page .dxbl-tabs,
.load-order-page .TabsCss {
    background: #fff;
    border: 1px solid var(--atrans-border);
    border-radius: var(--atrans-radius) var(--atrans-radius) 0 0;
    box-shadow: var(--atrans-shadow);
}

.menu-button-container {
    display: flex;
    justify-content: flex-end;
}

.menu-button-container > .d-flex {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.menuItemBase.btn {
    min-width: 118px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    color: var(--atrans-ink);
    background: #fff;
    border: 1px solid #b9c8dc;
    border-radius: var(--atrans-radius);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(11, 15, 31, 0.04);
}

.menuItemBase.btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.menuItemBase.btn:hover {
    color: var(--atrans-primary);
    border-color: var(--atrans-primary);
    background: #f8fbff;
}

.menuItemBase.btn.is-primary {
    color: #fff;
    background: var(--atrans-primary);
    border-color: var(--atrans-primary);
    box-shadow: 0 12px 24px rgba(10, 67, 232, 0.22);
}

@media (max-width: 900px) {
    .load-order-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .menu-button-container,
    .menu-button-container > .d-flex {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .load-order-title {
        align-items: flex-start;
    }

    .load-order-title-icon {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }

    .menuItemBase.btn {
        min-width: calc(50% - 8px);
        flex: 1 1 calc(50% - 8px);
    }
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    align-items: center;
    background: #fff8d9;
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.16);
    color: #2f2a12;
    display: none;
    font-size: 0.9rem;
    gap: 0.75rem;
    left: 0;
    min-height: 44px;
    padding: 0.65rem 3.25rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    #blazor-error-ui .reload {
        color: #004987;
        font-weight: 700;
        margin-left: 0.65rem;
        text-decoration: underline;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        font-weight: 700;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.jump-global-error-page {
    align-items: center;
    background: #f6f8fb;
    color: #172033;
    display: flex;
    min-height: calc(100vh / var(--jump-zoom, 1));
    padding: 24px;
}

.jump-global-error-panel {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(23, 32, 51, 0.14);
    display: flex;
    gap: 16px;
    margin: 0 auto;
    max-width: 620px;
    padding: 22px;
    width: 100%;
}

.jump-global-error-icon {
    align-items: center;
    background: #fff4d6;
    border: 1px solid #f0cd7a;
    border-radius: 8px;
    color: #8b5b00;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.jump-global-error-content {
    min-width: 0;
}

.jump-global-error-content h1 {
    color: #172033;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}

.jump-global-error-content p {
    color: #556276;
    font-size: 0.92rem;
    margin: 0;
}

.jump-global-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.jump-global-error-action {
    display: flex;
    flex: 1 1 210px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.jump-global-error-action p {
    color: #66758a;
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0;
}

.jump-global-error-button {
    align-items: center;
    background: #fff;
    border: 1px solid #c5d0df;
    border-radius: 6px;
    color: #263447;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
}

.jump-global-error-button.primary {
    background: #004987;
    border-color: #004987;
    color: #fff;
}

.jump-global-error-button:hover {
    filter: brightness(0.98);
}

@media (max-width: 576px) {
    .jump-global-error-page {
        align-items: flex-start;
        padding: 16px;
    }

    .jump-global-error-panel {
        flex-direction: column;
        padding: 18px;
    }

    .jump-global-error-actions,
    .jump-global-error-action,
    .jump-global-error-button {
        width: 100%;
    }

    .jump-global-error-button {
        justify-content: center;
    }

}
/*---------GridUnderline---------*/
.underline {
    position: relative;
}

    .underline::after {
        position: absolute;
        content: '------------';
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 100%;
    }
/*---------EndGridUnderline---------*/
/*------------------------    Modal  -----------------  */
/*.blazored-modal-overlay {
    visibility: hidden;
    opacity: 0;
}*/
/*.blazored-modal-container {
    overflow: scroll;
}*/
.bm-container {
    z-index: 10000 !important;
}

.blazored-modal-content {
    /*height: calc(100vh / var(--jump-zoom, 1) - 300px);*/
    overflow: auto;
}
.blazored-modal {
    width: 90%;
    border-radius: 10px !important;
}

.ctlf4-list-modal-size,
.blazored-modal.ctlf4-list-modal-size,
.ctlf4-list-modal-size.blazored-modal {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ctlf4-list-modal .blazored-modal,
.ctlf4-list-modal.blazored-modal {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ctlf4-list-modal .bm-content {
    overflow: visible !important;
}

dxbl-popup,
dxbl-popup-cell,
dxbl-dropdown,
.dxbl-popup,
.dxbl-dropdown,
.dxbl-listbox,
.dxbl-list-box,
.dxbs-popup,
.dxbs-dropdown,
.dxbs-dropdown-menu {
    z-index: 20050 !important;
}

.blazored-modal-header
{
    padding: 0 0 0rem 0 !important;
}
/*.blazored-modal-center {
    align-items: start !important;
}*/
.modal-footer {
    justify-content: space-between !important;
}
/*.size-medium[b-mwsrhhqq2g] {
    max-width: inherit !important;
    margin-left: auto;
    margin-right: auto;
}*/
/*------------------------  End  Modal  -----------------  */
/*--------------    Modal Add Linha Grid  --------------  */
dxbl-modal > .dxbs-modal > .dxbs-popup {
    width: 60% !important;
    max-width: 60% !important;
}
/*--------- End Modal Add Linha Grid  -----------------  */
.bg-abmn {
    background-color: var(--atrans-primary) !important;
}
.color-abmn {
    color: var(--atrans-primary) !important;
}
.form-group {
    margin-bottom: 0.5rem;
}
.btn {
    /*color: #ffffff;*/
    color: var(--atrans-primary);
    border: 1px solid var(--atrans-border);
    background-color: #fff;
    border-radius: var(--atrans-radius);
    /*   background: url('/images/ctlF4_BtRight.png') no-repeat scroll 85px;
    background-position: top right;*/
}
.btn-border-radius {
    border-radius: 50%;
}
.btn-custom-autocomplete {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
    .btn-custom-autocomplete:hover {
        color: var(--atrans-primary);
        text-decoration: none;
    }
.size-icon {
    font-size: 0.8rem;
}
.col-form-label {
    padding-top: unset;
    padding-bottom: unset;
}
/* The old height was calc(0.8em + .75rem), that is, it depended on the inherited
   font-size (24.8px in the base context) and did not match the min-height: 34px that
   components/forms.css already imposes inside .app-page.
   The contract becomes min-height: --jump-field-height with height: auto.
   Using min-height (and not height) is deliberate: there are dozens of contexts
   -- .trip-page, .page-summary-card, .jump-form-config-dialog-body,
   .client-portal-load-order-page-compact, grids -- that already choose smaller
   heights with min-height alone, and that a fixed height here would trample.
   The height: auto is needed to cancel Bootstrap's calc (38px). */
.form-control {
    height: auto;
    min-height: var(--jump-field-height, 34px);
    padding: .25rem .75rem;
    /*border-radius: 11px;*/
}
.btn-fontSize {
    font-size: 0.5rem;
}
.padding-top-custom {
    padding-top: 2.5rem;
}
.padding-top-customTwo {
    padding-top: 5.7rem;
}
.border-custom {
    border-right: 1px solid var(--atrans-sidebar);
    border-bottom: 1px solid var(--atrans-sidebar);
    padding-bottom: 1rem;
}


a, .btn-link {
    color: var(--atrans-sidebar);
}

.sidebar[b-glorktmyql] {
    background-image: unset !important;
    background-color: var(--atrans-sidebar);
}

.pt-4-2 {
    padding-top: 2rem;
}
.mr-2-5{
    margin-right: 2.5rem;
}
input[type="file"]::file-selector-button {
    color: var(--atrans-sidebar);
    border: 1px solid;
    background-color: #fff;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
    input[type="file"]::file-selector-button:hover {
        color: #212529;
        background-color: #e2e6ea;
        border-color: #dae0e5;
        text-decoration: none;
        cursor: pointer;
    }
/***********  DateTime  ************/

.dxbs-date-edit-tabbed .dxbs-dm.dropdown-menu > .modal-body  {
    width: 375px !important;
    height: 330px !important;
}

.dropdown-menu {
    font-size: 10px !important;
    left: inherit !important;
    top: inherit !important;
   
}

.datepicker-right .dropdown-menu {
    right: calc(5%) !important;
}


/*.dxbs-dm {
    top: 20px !important;
    left: -150px !important;
}*/
/********* End DateTime ************/
/************login*******************/
.mainLogin {
    background-color: #FFFFFF;
    width: 400px;
  /*  height: 400px;*/
    margin: 7em auto;
    border-radius: 1.5em;
    box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
 
}

.sign {
    padding-top: 40px;
    color: var(--atrans-sidebar);
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 23px;
}

.un {
    display: flex;
    margin: 1rem auto;
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background-color: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    /* border: 2px solid rgba(0, 0, 0, 0.02);*/
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
}


.pass {
    display: flex;
    margin: 1rem auto;
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    /*border: none;*/
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
}


    .un:focus, .pass:focus {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;
    }
/*
a {
    text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
    color: #E1BEE7;
    text-decoration: none
}
*/




.submit {
    cursor: pointer;
    border-radius: 5em;
    color: #fff;
    background: linear-gradient(to right, var(--atrans-sidebar), var(--atrans-primary));
    border: 0;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-family: 'Ubuntu', sans-serif;
    margin-left: 35%;
    font-size: 13px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
   /* background-image: url(../aTransBack.jpg); *//* Just to visualize the extent */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


.fullscreenIndex {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    /*background-image: url(../fundo_4.png);*/ /* Just to visualize the extent */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@media (max-width: 425px) {
    .mainLogin {
        width: 300px;
    }
    .submit {
        margin-left: 31%;
    }
}
/************** End Login *******************/



/*toast*/

/* Keep application toasts above modal backdrops and dialog content. */
.mud-snackbar-provider,
.mud-snackbar-container {
    position: fixed !important;
    z-index: 21000 !important;
}

.mud-snackbar-provider {
    z-index: 2147483647 !important;
}

/* MudBlazor applies positioning and stacking to the location element itself. */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-right {
    position: fixed !important;
    z-index: 2147483647 !important;
}

.mud-snackbar.jump-toast {
    --jump-toast-background: #f2f4f7;
    --jump-toast-accent: #687076;
    --jump-toast-close-hover: rgba(255, 255, 255, .58);
    width: min(520px, calc(100vw / var(--jump-zoom, 1) - 32px));
    min-width: min(360px, calc(100vw / var(--jump-zoom, 1) - 32px));
    max-width: min(520px, calc(100vw / var(--jump-zoom, 1) - 32px));
    min-height: 78px;
    padding: 11px 14px 11px 12px;
    color: #101828 !important;
    background: var(--jump-toast-background) !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.mud-snackbar.jump-toast-info {
    --jump-toast-background: #edf3ff;
    --jump-toast-accent: #3478f6;
    --jump-toast-close-hover: #dce8ff;
}

.mud-snackbar.jump-toast-success {
    --jump-toast-background: #e8f8f2;
    --jump-toast-accent: #18b785;
    --jump-toast-close-hover: #d5f1e6;
}

.mud-snackbar.jump-toast-warning {
    --jump-toast-background: #fff2e4;
    --jump-toast-accent: #f59e0b;
    --jump-toast-close-hover: #ffe3c2;
}

.mud-snackbar.jump-toast-error {
    --jump-toast-background: #fff0ee;
    --jump-toast-accent: #e55345;
    --jump-toast-close-hover: #ffdcd8;
}

.mud-snackbar.jump-toast .mud-snackbar-content-message {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.mud-snackbar.jump-toast .mud-snackbar-content-action {
    align-self: center;
    margin-right: -4px;
    padding-left: 12px;
}

.mud-snackbar.jump-toast .mud-snackbar-content-action > button {
    width: 38px;
    height: 38px;
    color: rgba(52, 64, 84, .56);
    border-radius: 12px;
    transition: background-color .18s ease, color .18s ease;
}

.mud-snackbar.jump-toast .mud-snackbar-content-action > button:hover,
.mud-snackbar.jump-toast .mud-snackbar-content-action > button:focus-visible {
    color: #101828;
    background-color: var(--jump-toast-close-hover);
}

.jump-toast-content {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.jump-toast-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--jump-toast-accent);
    background: rgba(255, 255, 255, .62);
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .46);
}

.jump-toast-icon {
    color: inherit;
}

.jump-toast-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.jump-toast-heading {
    color: #05070a;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.jump-toast-message {
    color: #5f6368;
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 480px) {
    .mud-snackbar.jump-toast {
        padding: 10px 12px;
        border-radius: 16px;
    }

    .jump-toast-content {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
    }

    .jump-toast-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }
}

.toastABMN {
    display: none;
    padding: 1.5rem;
    color: #fff;
    z-index: 99999999999999999999;
    position: fixed;
    width: 25rem;
    top: 2rem;
    border-radius: 1rem;
    left: 50%;
}

/* Screen width between 2000px and 1501px */
@media screen and (min-width: 1501px) and (max-width: 2000px) {
    .toastABMN {
        left: 35%;
    }
}

/* Screen width between 1500px and 1001px */
@media screen and (min-width: 1001px) and (max-width: 1500px) {
    .toastABMN {
        left: 30%;
    }
}

/* Screen width between 1000px and 801px */
@media screen and (min-width: 801px) and (max-width: 1000px) {
    .toastABMN {
        left: 30%;
    }
}

/* Screen width between 800px and 601px */
@media screen and (min-width: 601px) and (max-width: 800px) {
    .toastABMN {
        left: 30%;
    }
}

/* Screen width between 600px and 401px */
@media screen and (min-width: 401px) and (max-width: 600px) {
    .toastABMN {
        left: 20%;
    }
}

/* Screen width smaller than 400px */
@media screen and (max-width: 400px) {
    .toastABMN {
        left: 5%;
    }
}




.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
    overflow: auto;
}

    .toast-body p {
        margin-bottom: 0;
    }

.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Style for large screens (for example, screens larger than 768px) */
@media (min-width: 769px) {
    .ABMNToast-div {
        margin-left: 25%;
    }
}

/* Style for small screens (for example, screens smaller than or equal to 768px) */
@media (max-width: 768px) {
    .ABMNToast-div-div {
        margin-left: 0%;
    }
}


/*toast*/



.filter-type-container {
    display: flex;
}

.filter-type-container > div {
    width: 100%;
}

.filter-type-button {
    margin-right: 5px;
}

.CamposObrigatorios input {
    background-color: #FFEDC1 !important;
}







/* DevExpress search highlight: the matched substring is a <mark> element (default browser yellow).
   Recolour just that substring to brand blue. The theme loads after this file, so !important is needed.
   Only <mark> is targeted so the row/item highlight (keyboard focus, hover) is left untouched. */
mark {
    background-color: #d4e6fb !important;
    color: #0b4da2 !important;
    border-radius: 3px;
    padding: 0 1px;
}