body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(10, 120, 216, 0.16), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #edf3f9 100%);
    color: #0f1f33;
    font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
}

a {
    color: #0a78d8;
}

* {
    box-sizing: border-box;
}

:root {
    --portal-bg: #f4f7fb;
    --portal-panel: #ffffff;
    --portal-panel-soft: #f7fbff;
    --portal-line: rgba(15, 31, 51, 0.1);
    --portal-ink: #0f1f33;
    --portal-muted: #5f738a;
    --portal-blue: #0a78d8;
    --portal-blue-deep: #0b2851;
    --portal-blue-soft: #dfeefe;
    --portal-gold: #f1b548;
    --portal-green: #2bb07d;
    --portal-red: #e46068;
    --portal-slate: #6d8299;
    --portal-radius-xl: 28px;
    --portal-radius-lg: 22px;
    --portal-radius-md: 16px;
    --portal-radius-sm: 12px;
    --portal-shadow: 0 18px 48px rgba(12, 33, 61, 0.08);
}

.style1 {
    height: 23px;
}

.style2 {
    width: 111px;
}

.DivPadding {
    padding-left: 15px;
    padding-top: 20px;
    padding-right: 15px;
    height: 45px;
    vertical-align: central;
}

.portal-body,
.auth-body {
    min-height: 100vh;
}

.portal-form,
.auth-form {
    min-height: 100vh;
}

.portal-app-shell {
    min-height: 100vh;
    padding: 24px 20px 116px;
}

.portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto 20px;
    max-width: 1440px;
    padding: 20px 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(11, 40, 81, 0.98), rgba(10, 120, 216, 0.92));
    color: #eef5ff;
    box-shadow: var(--portal-shadow);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.portal-brand img {
    max-height: 42px;
    width: auto;
}

.portal-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #d9ebff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
}

.portal-brand-copy strong {
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -0.03em;
    line-height: 1;
}

.portal-brand-copy span {
    color: rgba(238, 245, 255, 0.82);
    line-height: 1.5;
}

.portal-status {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.portal-status .portal-eyebrow {
    color: #eef5ff !important;
}

.portal-status .dxflTextItemSys,
.portal-status .dxeBase_MetropolisBlue,
.portal-status label,
.portal-status .dxichTextCellSys {
    color: #ff7078 !important;
    font-weight: 700 !important;
}

.portal-notice {
    min-width: 220px;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
}

.portal-shell {
    display: grid;
    gap: 22px;
    max-width: 1440px;
    margin: 0 auto;
}

.portal-shell--customer {
    grid-template-columns: 280px minmax(0, 1fr);
}

.portal-shell--admin {
    grid-template-columns: 300px minmax(0, 1fr);
}

.portal-nav-card,
.portal-page-frame,
.portal-footer-inner,
.surface-card,
.info-card,
.workflow-card,
.hero-card,
.auth-brand,
.auth-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--portal-radius-xl);
    box-shadow: var(--portal-shadow);
}

.portal-nav-card {
    position: sticky;
    top: 24px;
    padding: 18px;
    backdrop-filter: blur(10px);
    overflow: visible;
}

.portal-nav-header {
    margin-bottom: 14px;
    padding: 0 2px 8px;
}

.portal-nav-header strong {
    display: block;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.portal-nav-header span {
    display: block;
    margin-top: 6px;
    color: var(--portal-muted);
    line-height: 1.55;
}

.portal-main {
    min-width: 0;
}

.portal-page-frame {
    min-height: calc(100vh - 220px);
    padding: 26px;
}

.portal-footer {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 18px;
    pointer-events: none;
}

.portal-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
}

.portal-footer-inner:empty {
    display: none;
}

.portal-footer-inner:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 72px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(11, 40, 81, 0.96), rgba(10, 120, 216, 0.9));
    color: #eff6ff;
    pointer-events: auto;
}

.portal-page-header {
    margin-bottom: 22px;
    padding: 24px 28px;
    border-radius: var(--portal-radius-xl);
    background: linear-gradient(135deg, rgba(11, 40, 81, 0.98), rgba(10, 120, 216, 0.92));
    color: #eef5ff;
}

.portal-page-header h1,
.portal-page-header h2 {
    margin: 10px 0 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.portal-page-header p {
    margin: 12px 0 0;
    max-width: 780px;
    color: rgba(238, 245, 255, 0.82);
    line-height: 1.65;
}

.workspace-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.surface-card,
.info-card,
.workflow-card,
.hero-card {
    padding: 22px;
}

table.surface-card,
table.info-card,
table.workflow-card {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.surface-card h2,
.surface-card h3,
.info-card h2,
.info-card h3,
.workflow-card h2,
.workflow-card h3,
.hero-card h2,
.hero-card h3 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.02em;
}

.surface-card p,
.info-card p,
.workflow-card p,
.hero-card p {
    color: var(--portal-muted);
    line-height: 1.65;
}

.hero-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(223, 238, 254, 0.88), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(10, 120, 216, 0.12);
}

.hero-card .portal-eyebrow,
.surface-card .portal-eyebrow,
.info-card .portal-eyebrow,
.workflow-card .portal-eyebrow,
.auth-brand .portal-eyebrow,
.auth-card .portal-eyebrow {
    background: rgba(10, 120, 216, 0.1);
    color: var(--portal-blue);
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.portal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-pill.is-info {
    background: var(--portal-blue-soft);
    color: #145c9c;
}

.portal-pill.is-warning {
    background: #fff1cf;
    color: #8f6200;
}

.portal-pill.is-success {
    background: #dff5eb;
    color: #187354;
}

.portal-pill.is-danger {
    background: #ffe1e4;
    color: #b2364a;
}

.info-stack {
    display: grid;
    gap: 16px;
}

.instruction-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.instruction-list li {
    margin-top: 12px;
    padding-left: 18px;
    position: relative;
    color: var(--portal-muted);
    line-height: 1.65;
}

.instruction-list li:first-child {
    margin-top: 0;
}

.instruction-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--portal-blue);
}

.inline-alert,
.feedback-panel fieldset {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid rgba(228, 96, 104, 0.18);
    background: #fff5f6;
    color: #8b3044;
}

.feedback-panel fieldset legend {
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b2364a;
}

.field-help,
.field-error {
    display: block;
    margin-top: 6px;
    max-width: 220px;
    font-size: 12px;
    line-height: 1.35;
}

.field-help {
    color: var(--portal-muted);
}

.field-error {
    color: #b2364a;
    font-weight: 700;
}

.field-header-required:after {
    content: " *";
    color: #ffd166;
    font-weight: 800;
}

.manual-derived-content {
    display: none;
}

.footer-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding-top: 10px;
}

.file-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.95), rgba(255, 255, 255, 0.98));
    border: 1px dashed rgba(10, 120, 216, 0.28);
}

input[type="file"] {
    max-width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(10, 120, 216, 0.18);
    border-radius: 10px;
    background: #fff;
    color: var(--portal-muted);
    box-shadow: inset 0 1px 2px rgba(15, 31, 51, 0.04);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: #eef5ff;
    color: #145c9c;
    font-weight: 700;
    cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: #eef5ff;
    color: #145c9c;
    font-weight: 700;
    cursor: pointer;
}

.portal-page-frame input[type="checkbox"],
.portal-page-frame input[type="radio"],
.auth-card input[type="checkbox"],
.auth-card input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 2px solid #9bb4cb;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 31, 51, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.portal-page-frame input[type="checkbox"],
.auth-card input[type="checkbox"] {
    border-radius: 3px;
}

.portal-page-frame input[type="radio"],
.auth-card input[type="radio"] {
    border-radius: 999px;
}

.portal-page-frame input[type="checkbox"]:checked,
.auth-card input[type="checkbox"]:checked {
    border-color: var(--portal-blue);
    background:
        linear-gradient(-45deg, transparent 54%, #fff 54%, #fff 64%, transparent 64%),
        linear-gradient(45deg, transparent 34%, #fff 34%, #fff 45%, transparent 45%),
        linear-gradient(135deg, #37a6ff, #0a78d8);
}

.portal-page-frame input[type="radio"]:checked,
.auth-card input[type="radio"]:checked {
    border-color: var(--portal-blue);
    background:
        radial-gradient(circle, #0a78d8 0 42%, transparent 43% 100%),
        #fff;
}

.portal-page-frame input[type="checkbox"]:focus,
.portal-page-frame input[type="radio"]:focus,
.auth-card input[type="checkbox"]:focus,
.auth-card input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 120, 216, 0.16);
}

.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.auth-shell {
    width: min(1160px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 520px);
    gap: 22px;
    align-items: stretch;
}

.auth-brand,
.auth-card {
    padding: 28px;
}

.auth-card {
    overflow: hidden;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at top right, rgba(72, 157, 255, 0.24), transparent 28%),
        linear-gradient(135deg, rgba(8, 34, 74, 0.98), rgba(17, 94, 183, 0.96));
    color: #eef5ff;
}

.auth-brand h1 {
    margin: 16px 0 0;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.auth-brand p {
    margin-top: 14px;
    max-width: 520px;
    color: rgba(238, 245, 255, 0.82);
    line-height: 1.7;
}

.auth-brand .portal-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #d9ebff;
}

.auth-logo {
    max-width: 230px;
    height: auto;
    padding: 12px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    filter: brightness(0) invert(1);
    box-shadow: 0 14px 30px rgba(5, 18, 36, 0.22);
}

.auth-card h2 {
    margin: 12px 0 0;
    font-size: 30px;
    letter-spacing: -0.03em;
}

.auth-card .auth-intro {
    margin: 10px 0 0;
    color: var(--portal-muted);
    line-height: 1.65;
}

.auth-panel-wrap {
    margin-top: 18px;
}

.auth-help {
    margin-top: 16px;
    color: var(--portal-muted);
    line-height: 1.6;
}

.auth-links {
    margin-top: 18px;
    text-align: center;
}

.auth-links a {
    font-weight: 700;
}

.auth-card table {
    width: 100%;
}

.auth-card [class*="dxrpControl"] {
    width: min(430px, 100%) !important;
    max-width: 430px;
    margin: 0 auto;
    border-radius: 24px !important;
    overflow: hidden !important;
}

.auth-card td {
    padding-bottom: 8px;
}

.auth-card td[nowrap="nowrap"] {
    white-space: normal;
}

.workflow-card table,
.surface-card table,
.info-card table,
.portal-page-frame > table {
    max-width: 100%;
}

.portal-page-frame > table {
    width: 100%;
}

.portal-page-frame img {
    max-width: 100%;
    height: auto;
}

[class*="dxrpControl"],
[class*="dxgvControl"],
[class*="dxpc-mainDiv"],
[class*="dxmLite"],
[class*="dxpnlControl"] {
    font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
}

[class*="dxrpControl"] {
    width: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--portal-line) !important;
    box-shadow: none !important;
}

[class*="dxrpHeader"] {
    padding: 18px 22px !important;
    background: linear-gradient(135deg, rgba(11, 40, 81, 0.98), rgba(10, 120, 216, 0.9)) !important;
    color: #eef5ff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

[class*="dxrpcontent"],
[class*="dxrpContent"] {
    padding: 22px !important;
    background: #fff !important;
}

[class*="dxrpcontent"].dx-borderBox,
[class*="dxrpContent"].dx-borderBox {
    border: 0 !important;
}

[class*="dxrpBL"],
[class*="dxrpBR"],
[class*="dxrpBC"],
[class*="dxrpBottomLeftCorner"],
[class*="dxrpBottomRightCorner"],
[class*="dxrpBottomEdge"] {
    background: #fff !important;
    background-image: none !important;
}

[class*="dxeTextBox"],
[class*="dxeButtonEdit"],
[class*="dxeMemo"],
[class*="dxeCalendar"],
.portal-page-frame input[type="text"],
.portal-page-frame input[type="password"],
.portal-page-frame textarea,
.portal-page-frame select {
    border-radius: 14px !important;
    overflow:hidden;
}

.portal-page-frame .portal-text-input {
    min-height: 30px;
    padding: 3px 8px;
    color: var(--portal-ink);
    border: 1px solid #c8d4e1;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.portal-page-frame .portal-text-input:focus {
    outline: none;
    border-color: #2f88da;
    box-shadow: 0 0 0 2px rgba(47, 136, 218, 0.18);
}

.portal-page-frame .portal-field-help,
.auth-card .portal-field-help {
    display: block;
    max-width: 680px;
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: 12px;
    line-height: 1.45;
}

.portal-page-frame .portal-field-help strong,
.auth-card .portal-field-help strong {
    color: var(--portal-ink);
}

.portal-page-frame .portal-help-block,
.auth-card .portal-help-block {
    max-width: 720px;
    margin: 8px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--portal-line);
    border-left: 4px solid var(--portal-blue);
    border-radius: var(--portal-radius-sm);
    background: var(--portal-panel-soft);
    color: var(--portal-muted);
    font-size: 12px;
    line-height: 1.5;
}

.portal-page-frame .portal-help-block p,
.auth-card .portal-help-block p {
    margin: 0;
}

.portal-page-frame .portal-help-block p + p,
.auth-card .portal-help-block p + p {
    margin-top: 6px;
}

.portal-page-frame .portal-help-list,
.auth-card .portal-help-list {
    margin: 6px 0 0 18px;
    padding: 0;
}

.portal-page-frame .portal-help-list li,
.auth-card .portal-help-list li {
    margin: 2px 0;
}

[class*="dxeTextBox"] input,
[class*="dxeButtonEdit"] input,
[class*="dxeMemo"] textarea {
    min-height: 30px !important;
    padding: 3px 8px !important;
    color: var(--portal-ink) !important;
}

.auth-card [class*="dxeTextBox"],
.auth-card [class*="dxeButtonEdit"] {
    width: 170px !important;
    max-width: 170px !important;
    border: 1px solid #c8d4e1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.auth-card [class*="dxeTextBox"] td,
.auth-card [class*="dxeButtonEdit"] td {
    border: 0 !important;
    background: transparent !important;
}

.auth-card [class*="dxeTextBox"] input,
.auth-card [class*="dxeButtonEdit"] input,
.auth-card [class*="dxeMemo"] textarea {
    width: 100% !important;
    min-height: 26px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 8px !important;
}

.auth-card [class*="dxeBase"],
.auth-card .dxeBase_MetropolisBlue {
    font-size: 14px !important;
}

.auth-card [class*="dxrpHeader"] img {
    max-height: 42px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

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

.remember-me-row > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

.remember-me-row table,
.remember-me-row td {
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.remember-me-row label,
.remember-me-row span {
    color: var(--portal-ink) !important;
}

.remember-me-row .dxichCellSys,
.remember-me-row .dxichTextCellSys {
    vertical-align: middle !important;
}

.portal-page-frame .dxgvControl,
.portal-page-frame .dxgvCSD,
.portal-page-frame .dxgvTable,
.portal-page-frame .dxgvHSDC,
.portal-page-frame .dxgvDataRow,
.portal-page-frame .dxgvHeader {
    border-color: rgba(15, 31, 51, 0.08) !important;
}

.portal-page-frame .dxgvControl {
    width: 100% !important;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe7f0 !important;
    box-shadow: none !important;
}

.portal-page-frame .dxgvHeader,
.portal-page-frame .dxgvCommandColumn {
    background: #f5f7fa !important;
    color: #20344b !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #dfe7f0 !important;
}

.portal-page-frame .dxgvDataRow td,
.portal-page-frame .dxgvInlineEditRow td,
.portal-page-frame .dxgvEditFormDisplayRow td {
    background: #fff !important;
    border-bottom: 1px solid #edf2f7 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.portal-page-frame .dxgvAltRow td {
    background: #fbfdff !important;
}

.portal-page-frame .dxgvFocusedRow td,
.portal-page-frame .dxgvSelectedRow td {
    background: #eef6ff !important;
}

.portal-page-frame .dxgvPagerBottomPanel,
.portal-page-frame .dxgvStatusBar {
    background: #f7fbff !important;
}

.portal-page-frame .dxgvFilterRow td {
    background: #fafcff !important;
    padding: 6px 4px !important;
}

.portal-page-frame .dxgvFilterRow .dxeTextBoxSys,
.portal-page-frame .dxgvFilterRow .dxeButtonEditSys,
.portal-page-frame .dxgvFilterRow .dxeButtonEdit_PlasticBlue,
.portal-page-frame .dxgvFilterRow .dxeTextBox_PlasticBlue {
    border: 1px solid #d5deea !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.portal-page-frame .dxgvFilterRow .dxeTextBoxSys input,
.portal-page-frame .dxgvFilterRow .dxeButtonEditSys input,
.portal-page-frame .dxgvFilterRow .dxeButtonEdit_PlasticBlue input,
.portal-page-frame .dxgvFilterRow .dxeTextBox_PlasticBlue input,
.portal-page-frame .dxgvFilterRow input,
.portal-page-frame .dxgvFilterRow textarea,
.portal-page-frame .dxgvFilterRow select {
    min-height: 22px !important;
    height: 22px !important;
    padding: 1px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.portal-page-frame .dxgvFilterRow [class*="dxeTextBox"],
.portal-page-frame .dxgvFilterRow [class*="dxeButtonEdit"],
.portal-page-frame .dxgvFilterRow [class*="dxeMemo"] {
    width: 100% !important;
    max-width: none !important;
}

.portal-page-frame .dxmLite .dxm-main,
.portal-page-frame .dxmLite,
.portal-nav .dxmLite {
    background: transparent !important;
    border: 0 !important;
}

.portal-nav .dxmLite table {
    width: 100%;
    table-layout: auto;
}

.portal-nav .dxm-item > table,
.portal-nav .dxm-content > table,
.portal-nav .dxm-item table,
.portal-nav .dxm-content table {
    width: 100% !important;
    table-layout: fixed !important;
}

.portal-nav .dxm-item,
.portal-nav .dxm-content {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.portal-nav .dx-vam,
.portal-nav a {
    max-width: 100%;
}

.portal-nav .dxm-item td,
.portal-nav .dxm-content td {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

.portal-nav .dxm-item a,
.portal-nav .dxm-content a {
    display: inline-block !important;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-radius: 16px;
    overflow: hidden;
    padding-right: 10px !important;
}

.mnuBlue,
.portal-nav .dxm-item,
.portal-nav .dxm-content {
    min-height: 44px;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    color: var(--portal-blue-deep) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}

.portal-nav .dxm-item td:last-child:not(:first-child),
.portal-nav .dxm-content td:last-child:not(:first-child) {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding-right: 6px !important;
    padding-left: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
}

.portal-nav .dxm-item td:first-child:not(:last-child),
.portal-nav .dxm-content td:first-child:not(:last-child) {
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-nav .dxm-content td:first-child {
    padding-right: 10px !important;
}

.portal-nav [style*="orange"],
.portal-nav .dxm-selected,
.portal-nav .dxm-item.dxm-selected,
.portal-nav .dxm-item:hover {
    background: #dfeefe !important;
    color: #145c9c !important;
}

.portal-nav .dxm-popOut,
.portal-nav img[src*="popup"] {
    opacity: 0.6;
    position: static !important;
    float: right !important;
    display: inline-block !important;
    width: 12px !important;
    max-width: 12px !important;
    margin: 0 0 0 6px !important;
    left: auto !important;
    right: auto !important;
    vertical-align: middle !important;
}

/* DevExpress renders submenu items as sibling divs; force a single row layout. */
.portal-nav li.dxm-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
}

.portal-nav li.dxm-item > .dxm-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-nav li.dxm-item > .dxm-content > a {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-nav li.dxm-item.dxm-subMenu > .dxm-popOut {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: auto !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.portal-nav li.dxm-item.dxm-subMenu > .dxm-content {
    padding-right: 8px !important;
}

.imgButton,
.btnBlueConfirm,
.btnGreyCancel,
.btnApproved,
.btnCancel,
.btn_Shadow,
.portal-page-frame .dxbButton,
.auth-card .dxbButton,
.portal-footer .dxbButton {
    border-radius: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.imgButton,
.btnBlueConfirm,
.portal-page-frame .dxbButton,
.auth-card .dxbButton {
    background: linear-gradient(135deg, #1aa5ff, #006fd4) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}

.btnGreyCancel,
.btnCancel {
    background: #eef4fb !important;
    color: #284663 !important;
    border: 1px solid rgba(10, 120, 216, 0.12) !important;
}

.btnApproved {
    background: #dff5eb !important;
    border: 1px solid rgba(43, 176, 125, 0.25) !important;
    color: #187354 !important;
}

.btn_Shadow {
    background: #fff !important;
    color: var(--portal-blue) !important;
    border: 1px solid rgba(10, 120, 216, 0.2) !important;
}

.table-shell {
    overflow-x: auto;
}

.table-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.track-import-upload-card {
    margin-bottom: 32px;
}

.track-import-upload-card [class*="dxrpControl"] {
    max-width: 560px;
    margin-top: 16px;
}

.track-import-upload-card .file-upload-row {
    margin-top: 12px;
    margin-bottom: 4px;
}

.ModalPopup {
    z-index: 20;
    font-size: medium;
    font-weight: normal;
    background: #fff;
    padding: 20px;
    padding-top: 1px;
    box-shadow: 0 18px 48px rgba(12, 33, 61, 0.18);
    border-radius: 24px;
    border: 1px solid rgba(15, 31, 51, 0.08);
}

.ModalBackground {
    background-color: rgba(11, 24, 43, 0.58);
    z-index: 19;
}

.ModalLoadingPanel {
    z-index: 0;
}

.DarkInputPopup {
    z-index: 0;
    font-size: medium;
    font-weight: normal;
    background: #fff;
    padding: 20px;
    padding-top: 1px;
    box-shadow: 0 18px 48px rgba(12, 33, 61, 0.18);
    border-radius: 24px;
}

.DarkInputPopupBackground {
    background-color: rgba(11, 24, 43, 0.58);
    z-index: 0;
}

.DarkInputPopup input[type=text],
.ModalPopup select,
.ModalPopup textarea {
    width: 90% !important;
}

.accordionHeader3 {
    border: 1px solid #000000;
    color: #ffffff;
    background-color: #21bbd8;
    cursor: pointer;
    padding: 0;
    text-align: center;
    width: 300px;
    height: 30px;
}

.accordionHeader5 {
    border: 1px none #000000;
    color: #000000;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    text-align: center;
    font-weight: bold;
    width: 100%;
    height: 30px;
}

@media (max-width: 1180px) {
    .portal-shell--customer,
    .portal-shell--admin,
    .workspace-grid,
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .portal-nav-card {
        position: static;
    }

    .portal-nav {
        position: relative;
        z-index: 30;
        overflow: visible;
    }

    .portal-page-frame {
        min-height: auto;
    }

    .portal-nav [id*="_xmnuMaster_DXM"] {
        display: none !important;
    }

    .portal-nav li.dxm-item.dxm-subMenu > .dxm-popOut {
        display: none !important;
    }

    .portal-nav li.dxm-item.dxm-subMenu.mobile-submenu-parent {
        display: block !important;
    }

    .portal-nav li.dxm-item.dxm-subMenu.mobile-submenu-parent > .dxm-content {
        cursor: pointer;
        display: block !important;
    }

    .portal-nav li.dxm-item.dxm-subMenu.mobile-submenu-parent > .dxm-content:after {
        content: "+";
        float: right !important;
        margin-left: 10px !important;
        color: #2f88da;
        font-weight: 700;
    }

    .portal-nav li.dxm-item.dxm-subMenu.mobile-submenu-parent.is-open > .dxm-content:after {
        content: "-";
    }

    .portal-nav .mobile-submenu-panel {
        display: none;
        margin: 6px 0 8px 14px;
        padding: 0 0 0 8px;
        border-left: 2px solid rgba(10, 120, 216, 0.2);
        max-width: calc(100% - 14px);
        box-sizing: border-box;
        overflow: hidden;
    }

    .portal-nav li.dxm-item.dxm-subMenu.mobile-submenu-parent.is-open > .mobile-submenu-panel {
        display: block;
    }

    .portal-nav .mobile-submenu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .portal-nav .mobile-submenu-list li {
        margin: 0;
        padding: 0;
    }

    .portal-nav .mobile-submenu-link {
        display: block;
        min-height: 38px;
        padding: 9px 10px;
        border-radius: 12px;
        color: var(--portal-blue-deep);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        text-decoration: none;
        white-space: normal;
    }

    .portal-nav .mobile-submenu-link:hover {
        background: #dfeefe;
        color: #145c9c;
    }

    .portal-footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 18px;
    }
}

@media (max-width: 720px) {
    .portal-app-shell {
        padding: 14px 12px 110px;
    }

    .portal-topbar,
    .portal-page-header,
    .portal-page-frame,
    .portal-nav-card,
    .surface-card,
    .info-card,
    .workflow-card,
    .hero-card,
    .auth-brand,
    .auth-card {
        padding: 18px;
        border-radius: 22px;
    }

    .portal-footer {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .portal-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-card [class*="dxrpControl"],
    .track-import-upload-card [class*="dxrpControl"] {
        max-width: 100%;
    }

    .auth-card [class*="dxeTextBox"],
    .auth-card [class*="dxeButtonEdit"] {
        width: 132px !important;
        max-width: 132px !important;
    }
}

/* Alternative SRW portal direction: public-site blue, compact top navigation, and dense white workspaces. */
:root {
    --portal-bg: #eef2f6;
    --portal-panel: #ffffff;
    --portal-panel-soft: #f6f8fb;
    --portal-line: #d7e0ea;
    --portal-line-strong: #b7c5d4;
    --portal-ink: #102033;
    --portal-muted: #5f7288;
    --portal-blue: #2468c9;
    --portal-blue-deep: #1b5db5;
    --portal-blue-dark: #102033;
    --portal-blue-soft: #e8f1ff;
    --portal-gold: #b7791f;
    --portal-green: #1f8a5b;
    --portal-red: #c2414b;
    --portal-slate: #6b7c90;
    --portal-radius-xl: 8px;
    --portal-radius-lg: 8px;
    --portal-radius-md: 8px;
    --portal-radius-sm: 6px;
    --portal-shadow: 0 10px 26px rgba(16, 32, 51, 0.08);
}

body {
    background: var(--portal-bg);
    color: var(--portal-ink);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
    color: var(--portal-blue);
    text-decoration: none;
}

.portal-app-shell {
    width: min(1280px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px 0 104px;
}

.portal-topbar {
    min-height: 58px;
    max-width: none;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid rgba(36, 104, 201, 0.18);
    border-radius: var(--portal-radius-xl) var(--portal-radius-xl) 0 0;
    background: var(--portal-blue);
    color: #ffffff;
    box-shadow: var(--portal-shadow);
}

.portal-brand {
    gap: 18px;
    min-width: 0;
}

.portal-brand img {
    max-height: 38px;
    filter: brightness(0) invert(1);
}

.portal-brand-copy {
    display: grid;
    gap: 3px;
}

.portal-brand-copy strong {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0;
}

.portal-brand-copy span:not(.portal-eyebrow) {
    max-width: 680px;
    color: #d9e6f5;
    font-size: 13px;
    line-height: 1.4;
}

.portal-eyebrow {
    min-height: 26px;
    padding: 5px 8px;
    border-radius: var(--portal-radius-sm);
    background: var(--portal-blue-soft);
    color: var(--portal-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.portal-topbar .portal-eyebrow,
.portal-footer-inner .portal-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: #e9f3ff;
}

.portal-status {
    flex: 0 0 auto;
}

.portal-notice {
    min-width: 0;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: var(--portal-radius-md);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.portal-shell,
.portal-shell--customer,
.portal-shell--admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
}

.portal-nav {
    position: relative;
    z-index: 40;
}

.portal-nav-card {
    position: static;
    padding: 0;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: rgba(36, 104, 201, 0.18);
    border-radius: 0;
    background: var(--portal-blue);
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.portal-nav-header {
    display: none;
}

.portal-main {
    min-width: 0;
    border-right: 1px solid var(--portal-line);
    border-left: 1px solid var(--portal-line);
    background: #ffffff;
}

.portal-page-frame {
    min-height: calc(100vh - 230px);
    padding: 18px;
    border: 0;
    border-radius: 0 0 var(--portal-radius-xl) var(--portal-radius-xl);
    background: #ffffff;
    box-shadow: var(--portal-shadow);
}

.portal-footer {
    right: auto;
    left: 50%;
    bottom: 18px;
    width: min(1280px, calc(100% - 40px));
    transform: translateX(-50%);
}

.portal-footer-inner {
    max-width: none;
    border-radius: var(--portal-radius-xl);
}

.portal-footer-inner:not(:empty) {
    min-height: 58px;
    padding: 10px 16px;
    background: var(--portal-blue);
}

.portal-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
    padding: 22px;
    border: 1px solid var(--portal-line);
    border-top: 4px solid var(--portal-blue);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
    color: var(--portal-ink);
    box-shadow: none;
}

.portal-page-header h1,
.portal-page-header h2 {
    margin-top: 10px;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 0;
}

.portal-page-header p {
    max-width: 560px;
    color: var(--portal-muted);
    line-height: 1.6;
}

.workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
    gap: 16px;
}

.portal-nav .dxmLite,
.portal-nav .dxmLite .dxm-main,
.portal-nav .dxmLite ul,
.portal-nav .dxmLite table {
    width: auto !important;
}

.portal-nav .dxm-item > table,
.portal-nav .dxm-content > table,
.portal-nav .dxm-item table,
.portal-nav .dxm-content table {
    width: auto !important;
    table-layout: auto !important;
}

.portal-nav .dxmLite .dxm-main,
.portal-nav .dxmLite ul.dxm-horizontal,
.portal-nav .dxmLite ul.dxm-vertical {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
}

.portal-nav li.dxm-item,
.portal-nav .dxm-item,
.portal-nav .dxm-content,
.mnuBlue {
    width: auto !important;
    min-height: 34px !important;
    border-radius: var(--portal-radius-sm) !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.portal-nav li.dxm-item {
    flex: 0 0 auto !important;
}

.portal-nav li.dxm-item > .dxm-content,
.portal-nav .dxm-content {
    padding: 8px 10px !important;
}

.portal-nav .dxm-item a,
.portal-nav .dxm-content a,
.portal-nav .dx-vam {
    color: inherit !important;
}

.portal-nav [style*="orange"],
.portal-nav .dxm-selected,
.portal-nav .dxm-item.dxm-selected,
.portal-nav .dxm-item:hover,
.portal-nav .dxm-hovered {
    background: #ffffff !important;
    color: var(--portal-blue-deep) !important;
}

.portal-nav li.dxm-item.dxm-subMenu > .dxm-popOut {
    margin-right: 8px !important;
    color: #ffffff !important;
    opacity: 0.82;
}

.portal-nav .dxm-popup,
.portal-nav [id*="_xmnuMaster_DXM"] .dxm-popup {
    border: 1px solid var(--portal-line) !important;
    border-radius: var(--portal-radius-xl) !important;
    background: #ffffff !important;
    box-shadow: var(--portal-shadow) !important;
    overflow: hidden !important;
}

.portal-nav [id*="_xmnuMaster_DXM"] .dxm-item,
.portal-nav [id*="_xmnuMaster_DXM"] .dxm-content {
    color: var(--portal-blue-dark) !important;
    background: #ffffff !important;
}

.portal-nav [id*="_xmnuMaster_DXM"] .dxm-item:hover,
.portal-nav [id*="_xmnuMaster_DXM"] .dxm-hovered {
    background: var(--portal-blue-soft) !important;
    color: var(--portal-blue-deep) !important;
}

.portal-nav-card,
.portal-nav-card [class*="dxmLite"],
.portal-nav-card [class*="dxmLite"] .dxm-main {
    background: var(--portal-blue) !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main,
.portal-nav-card [class*="dxmLite"] .dxm-main > ul,
.portal-nav-card [class*="dxmLite"] .dxm-main > table {
    border: 0 !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main > table,
.portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody,
.portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody > tr {
    background: transparent !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody > tr > td,
.portal-nav-card [class*="dxmLite"] .dxm-main li.dxm-item {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: transparent !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-item,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-content,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-content td,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-content span,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-content a,
.portal-nav-card [class*="dxmLite"] .dxm-main .dx-vam {
    color: #ffffff !important;
    background: transparent !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-selected,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-selected .dxm-content,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-item:hover,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-item:hover .dxm-content,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-hovered,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-hovered .dxm-content {
    background: #ffffff !important;
    color: var(--portal-blue-deep) !important;
}

.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-selected span,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-selected a,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-item:hover span,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-item:hover a,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-hovered span,
.portal-nav-card [class*="dxmLite"] .dxm-main .dxm-hovered a {
    color: var(--portal-blue-deep) !important;
}

.hero-card {
    margin-bottom: 14px;
    border-top: 0;
    background: var(--portal-panel-soft);
}

.surface-card,
.info-card,
.workflow-card,
.hero-card,
.auth-brand,
.auth-card {
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
    box-shadow: none;
}

.surface-card,
.info-card,
.workflow-card,
.hero-card {
    padding: 18px;
}

.admin-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-page-toolbar h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 20px;
    line-height: 1.2;
}

.admin-page-toolbar p {
    margin: 4px 0 0;
    color: var(--portal-muted);
    line-height: 1.5;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 16px;
    align-items: start;
}

.portal-form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.portal-form-table td {
    vertical-align: middle;
}

.portal-form-table td:first-child {
    width: 210px;
    padding-right: 14px;
}

.portal-form-table td[colspan] {
    width: auto;
}

.portal-form-table td + td {
    padding-left: 0 !important;
}

.portal-form-table .form-actions td,
.portal-form-table .form-feedback td,
.portal-form-table .form-note td,
.portal-form-table .form-section-row td {
    width: auto;
    padding-right: 0;
}

.admin-edit-user-layout {
    width: min(960px, 100%);
}

.admin-edit-user-layout > tbody > tr > td {
    width: 100%;
}

.edit-user-form-table {
    max-width: 880px;
    table-layout: fixed;
}

.edit-user-form-table > tbody > tr > td:first-child {
    width: 230px;
}

.edit-user-form-table > tbody > tr > td + td {
    width: auto;
}

.edit-user-form-table .portal-text-input,
.edit-user-form-table [class*="dxeTextBox"],
.edit-user-form-table [class*="dxeButtonEdit"] {
    width: min(360px, 100%) !important;
}

.edit-user-form-table .portal-field-help {
    max-width: 600px;
}

.edit-user-form-table table {
    width: 100%;
}

.permission-options {
    max-width: 640px;
}

.permission-radio-list,
.permission-radio-list table {
    width: 100% !important;
}

.permission-radio-list td {
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
}

.permission-radio-list label,
.permission-radio-list .dxichTextCellSys,
.permission-radio-list [class*="dxichTextCell"] {
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

.permission-radio-list [class*="dxichCell"] {
    width: 28px !important;
    min-width: 28px !important;
}

.portal-field-label {
    color: var(--portal-ink);
    font-weight: 700;
}

.portal-field-label.is-required:after {
    content: " *";
    color: var(--portal-red);
    font-weight: 800;
}

.portal-field-help,
.required-guidance {
    display: block;
    color: var(--portal-muted) !important;
    font-size: 12px !important;
    line-height: 1.45;
}

.required-guidance {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--portal-line);
    border-left: 4px solid var(--portal-blue);
    border-radius: var(--portal-radius-xl);
    background: var(--portal-panel-soft);
}

.required-guidance:before {
    content: "* ";
    color: var(--portal-red);
    font-weight: 800;
}

.portal-form-section {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--portal-line);
    color: var(--portal-ink);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}

.admin-grid-card {
    overflow-x: auto;
}

.admin-grid-card > table {
    width: 100%;
}

.legacy-data-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--portal-line) !important;
    border-radius: var(--portal-radius-xl);
    overflow: hidden;
}

.legacy-data-table th,
.legacy-data-table td {
    border-color: var(--portal-line) !important;
    padding: 9px 10px !important;
}

.legacy-data-table .legacy-data-header td,
.legacy-data-table .legacy-data-header th {
    background: var(--portal-panel-soft);
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.DarkInputPopup > .modal-title {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--portal-radius-xl) var(--portal-radius-xl) 0 0;
    background: var(--portal-blue);
    color: #ffffff;
    text-align: center;
}

.DarkInputPopup > .modal-title h3 {
    margin: 0;
    font-size: 18px;
}

.surface-card h2,
.surface-card h3,
.info-card h2,
.info-card h3,
.workflow-card h2,
.workflow-card h3,
.hero-card h2,
.hero-card h3 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: 0;
}

.surface-card p,
.info-card p,
.workflow-card p,
.hero-card p {
    color: var(--portal-muted);
    line-height: 1.55;
}

.portal-pill {
    min-height: 26px;
    padding: 5px 8px;
    border-radius: var(--portal-radius-sm);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.portal-pill.is-info {
    background: var(--portal-blue-soft);
    color: #135a9f;
}

.portal-pill.is-warning {
    background: #fff4d9;
    color: #7c520e;
}

.portal-pill.is-success {
    background: #e0f4eb;
    color: #176844;
}

.portal-pill.is-danger {
    background: #fde4e7;
    color: #9b2f38;
}

.export-filter-card {
    max-width: 980px;
}

.export-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
    align-items: end;
}

.export-filter-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.export-filter-field label {
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 800;
}

.export-filter-field label span {
    display: inline-block;
    margin-left: 6px;
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.export-filter-field .portal-required-label:after {
    content: "*";
    min-height: 0;
    margin-left: 3px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--portal-red);
    font-size: 14px;
    line-height: 1;
    text-transform: none;
}

.export-filter-field [class*="dxeButtonEdit"],
.export-filter-field [class*="dxeTextBox"] {
    width: 100% !important;
}

.export-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.file-upload-row {
    border-radius: var(--portal-radius-xl);
    border-color: #8fb4ea;
    background: #f8fbff;
}

input[type="file"],
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    border-radius: var(--portal-radius-sm);
}

[class*="dxrpControl"] {
    border: 1px solid var(--portal-line) !important;
    border-radius: var(--portal-radius-xl) !important;
}

[class*="dxrpHeader"] {
    padding: 14px 16px !important;
    background: var(--portal-blue) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

[class*="dxrpcontent"],
[class*="dxrpContent"] {
    padding: 18px !important;
}

[class*="dxeTextBox"],
[class*="dxeButtonEdit"],
[class*="dxeMemo"],
[class*="dxeCalendar"],
.portal-page-frame input[type="text"],
.portal-page-frame input[type="password"],
.portal-page-frame textarea,
.portal-page-frame select,
.portal-page-frame .portal-text-input {
    border-radius: var(--portal-radius-xl) !important;
}

.portal-page-frame .portal-text-input {
    border-color: var(--portal-line-strong);
}

[class*="dxeTextBox"] input,
[class*="dxeButtonEdit"] input,
[class*="dxeMemo"] textarea {
    color: var(--portal-ink) !important;
}

.portal-page-frame .track-search-combo {
    max-width: 100% !important;
}

.portal-page-frame .track-search-combo,
.portal-page-frame .track-search-combo [class*="dxeButtonEdit"],
.portal-page-frame .track-search-combo td {
    border-color: var(--portal-line-strong) !important;
    background: #ffffff !important;
}

.portal-page-frame .track-search-combo input {
    font-size: 14px !important;
}

[id*="xcboTracks_DDD"],
[id*="xcboTracksEdit_DDD"] {
    border: 1px solid var(--portal-line) !important;
    border-radius: var(--portal-radius-xl) !important;
    box-shadow: var(--portal-shadow) !important;
    overflow: hidden !important;
}

[id*="xcboTracks_DDD"] [class*="dxeListBoxItem"],
[id*="xcboTracksEdit_DDD"] [class*="dxeListBoxItem"] {
    min-height: 30px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

[id*="xcboTracks_DDD"] [class*="dxeListBoxItemSelected"],
[id*="xcboTracks_DDD"] [class*="dxeListBoxItemHover"],
[id*="xcboTracksEdit_DDD"] [class*="dxeListBoxItemSelected"],
[id*="xcboTracksEdit_DDD"] [class*="dxeListBoxItemHover"] {
    background: var(--portal-blue-soft) !important;
    color: var(--portal-blue-deep) !important;
}

.portal-page-frame .dxgvControl {
    border-color: var(--portal-line) !important;
    border-radius: var(--portal-radius-xl);
}

.portal-page-frame .dxgvHeader,
.portal-page-frame .dxgvCommandColumn {
    background: var(--portal-panel-soft) !important;
    color: var(--portal-muted) !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.portal-page-frame .dxgvDataRow td,
.portal-page-frame .dxgvInlineEditRow td,
.portal-page-frame .dxgvEditFormDisplayRow td {
    border-bottom-color: var(--portal-line) !important;
}

.portal-page-frame .dxgvAltRow td,
.portal-page-frame .dxgvPagerBottomPanel,
.portal-page-frame .dxgvStatusBar,
.portal-page-frame .dxgvFilterRow td {
    background: var(--portal-panel-soft) !important;
}

.portal-page-frame .dxgvFocusedRow td,
.portal-page-frame .dxgvSelectedRow td {
    background: var(--portal-blue-soft) !important;
}

.imgButton,
.btnBlueConfirm,
.portal-page-frame .dxbButton,
.auth-card .dxbButton,
.portal-footer .dxbButton {
    min-height: 40px !important;
    border-radius: var(--portal-radius-xl) !important;
    background: var(--portal-blue) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.btnGreyCancel,
.btnCancel,
.btn_Shadow {
    min-height: 40px !important;
    border-radius: var(--portal-radius-xl) !important;
    background: #ffffff !important;
    color: var(--portal-blue) !important;
    border: 1px solid var(--portal-line-strong) !important;
    font-weight: 800 !important;
}

.btnApproved {
    border-radius: var(--portal-radius-xl) !important;
    background: #e0f4eb !important;
    color: #176844 !important;
}

.auth-layout {
    min-height: 100vh;
    padding: 72px 20px 40px;
}

.auth-shell {
    width: min(500px, 100%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 10px 16px;
    border: 1px solid rgba(36, 104, 201, 0.18);
    border-radius: var(--portal-radius-xl) var(--portal-radius-xl) 0 0;
    background: var(--portal-blue);
    color: #ffffff;
}

.auth-brand > div:first-child {
    order: 2;
    min-width: 0;
}

.auth-brand h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
}

.auth-brand p,
.auth-brand .portal-eyebrow {
    display: none;
}

.auth-brand > div:last-child {
    order: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.auth-logo {
    display: block;
    max-width: 132px;
    max-height: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    filter: brightness(0) invert(1);
    box-shadow: none;
}

.auth-card {
    padding: 28px;
    border-top: 0;
    border-radius: 0 0 var(--portal-radius-xl) var(--portal-radius-xl);
    box-shadow: var(--portal-shadow);
}

.auth-card h2 {
    margin-top: 12px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 0;
}

.auth-card .auth-intro,
.auth-help {
    color: var(--portal-muted);
}

.auth-card [class*="dxrpControl"] {
    width: 100% !important;
    max-width: none !important;
}

.auth-card [class*="dxrpHeader"] {
    min-height: 58px;
}

.auth-card [class*="dxrpHeader"] img {
    max-height: 34px;
}

.auth-card [class*="dxeTextBox"],
.auth-card [class*="dxeButtonEdit"] {
    width: 170px !important;
    max-width: 170px !important;
    border-radius: var(--portal-radius-xl) !important;
}

.ModalPopup,
.DarkInputPopup {
    border-radius: var(--portal-radius-xl);
    border: 1px solid var(--portal-line);
    box-shadow: var(--portal-shadow);
}

@media (max-width: 1180px) {
    .portal-app-shell {
        width: min(100% - 28px, 1280px);
        padding-top: 14px;
    }

    .portal-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-status {
        justify-content: flex-start;
    }

    .portal-notice {
        max-width: none;
    }

    .portal-nav li.dxm-item {
        display: block !important;
    }

    .portal-nav-card [class*="dxmLite"],
    .portal-nav .dxmLite .dxm-main,
    .portal-nav-card [class*="dxmLite"] table.dxm-main,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul,
    .portal-nav .dxmLite ul.dxm-horizontal,
    .portal-nav .dxmLite ul.dxm-vertical {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-nav .dxmLite .dxm-main,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul,
    .portal-nav .dxmLite ul.dxm-horizontal,
    .portal-nav .dxmLite ul.dxm-vertical {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        padding: 14px 16px !important;
    }

    .portal-nav li.dxm-item,
    .portal-nav .dxm-item,
    .portal-nav .dxm-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-separator,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-spacing {
        display: none !important;
    }

    .portal-nav-card [class*="dxmLite"] table.dxm-main,
    .portal-nav-card [class*="dxmLite"] table.dxm-main > tbody,
    .portal-nav-card [class*="dxmLite"] table.dxm-main > tbody > tr,
    .portal-nav-card [class*="dxmLite"] .dxm-main > table,
    .portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody,
    .portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody > tr {
        display: block !important;
        width: 100% !important;
    }

    .portal-nav-card [class*="dxmLite"] table.dxm-main > tbody > tr > td,
    .portal-nav-card [class*="dxmLite"] .dxm-main > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main .dxm-content {
        min-height: 31px !important;
        padding: 8px 10px !important;
        border-radius: var(--portal-radius-sm) !important;
        text-align: left !important;
    }

    .portal-nav .dxm-item.mobile-submenu-parent > .dxm-content:after {
        color: #ffffff;
    }

    .portal-nav .dxm-item.mobile-submenu-parent.is-open > .dxm-content,
    .portal-nav .dxm-item.mobile-submenu-parent > .dxm-content:hover {
        background: #ffffff !important;
        color: var(--portal-blue-deep) !important;
    }

    .portal-nav .mobile-submenu-panel {
        display: block !important;
        margin: 4px 8px 8px;
        padding: 6px 6px 6px 18px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--portal-radius-xl);
        background: rgba(255, 255, 255, 0.08);
    }

    .portal-nav .dxm-item.mobile-submenu-parent > .mobile-submenu-panel,
    .portal-nav .dxm-item.mobile-submenu-parent.is-open > .mobile-submenu-panel {
        display: block !important;
    }

    .portal-nav .mobile-submenu-link {
        border-radius: var(--portal-radius-sm);
        color: #ffffff;
        padding-left: 12px;
    }

    .portal-nav .mobile-submenu-link:hover {
        background: #ffffff;
        color: var(--portal-blue-deep);
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent:hover,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent.dxm-hovered {
        background: transparent !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent:hover > .dxm-content,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent.dxm-hovered > .dxm-content,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent:hover > .dxm-content span,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent.dxm-hovered > .dxm-content span {
        background: transparent !important;
        color: #ffffff !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent > .mobile-submenu-panel {
        border-color: rgba(255, 255, 255, 0.32) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent > .mobile-submenu-panel .mobile-submenu-link {
        display: block;
        min-height: 34px;
        padding: 9px 12px;
        border-radius: var(--portal-radius-sm);
        color: #ffffff !important;
        font-weight: 800;
    }

    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent > .mobile-submenu-panel .mobile-submenu-link:hover,
    .portal-nav-card [class*="dxmLite"] .dxm-main > ul > li.dxm-item.mobile-submenu-parent > .mobile-submenu-panel .mobile-submenu-link:focus {
        background: #ffffff !important;
        color: var(--portal-blue-deep) !important;
        outline: none;
    }

    .portal-page-header,
    .admin-form-grid,
    .workspace-grid,
    .export-filter-grid {
        grid-template-columns: 1fr;
    }

    .portal-page-header {
        display: grid;
    }

    .portal-footer {
        position: static;
        width: auto;
        transform: none;
        margin-top: 14px;
    }
}

@media (max-width: 720px) {
    .portal-app-shell {
        width: min(100% - 24px, 1280px);
        padding-bottom: 24px;
    }

    .portal-topbar,
    .portal-page-header,
    .portal-page-frame,
    .surface-card,
    .info-card,
    .workflow-card,
    .hero-card,
    .auth-card {
        padding: 18px;
        border-radius: var(--portal-radius-xl);
    }

    .portal-topbar {
        border-radius: var(--portal-radius-xl) var(--portal-radius-xl) 0 0;
    }

    .portal-nav-card {
        border-radius: 0;
    }

    .portal-page-frame {
        border-radius: 0 0 var(--portal-radius-xl) var(--portal-radius-xl);
    }

    .portal-brand {
        flex-direction: row;
        align-items: center;
    }

    .portal-brand img {
        max-width: 132px;
    }

    .portal-brand-copy strong {
        font-size: 16px;
    }

    .portal-brand-copy span:not(.portal-eyebrow) {
        display: none;
    }

    .portal-page-header h1,
    .portal-page-header h2,
    .auth-card h2 {
        font-size: 28px;
    }

    .portal-form-table,
    .portal-form-table tbody,
    .portal-form-table tr,
    .portal-form-table td {
        display: block;
        width: 100% !important;
    }

    .portal-form-table td:first-child {
        padding-right: 0;
    }

    .portal-form-table td + td {
        margin-top: 5px;
    }

    .auth-layout {
        padding: 36px 14px;
    }

    .auth-card [class*="dxeTextBox"],
    .auth-card [class*="dxeButtonEdit"] {
        width: 150px !important;
        max-width: 150px !important;
    }

    .portal-page-frame .track-search-combo {
        width: 100% !important;
    }

    [id*="xcboTracks_DDD"],
    [id*="xcboTracksEdit_DDD"] {
        max-width: calc(100vw - 32px) !important;
    }
}

/* SOW 73 customer-facing cleanup: Cortal auth and workflow surfaces. */
.auth-form-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.auth-form-table > tbody > tr {
    display: block;
}

.auth-form-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
}

.auth-card .portal-required-label,
.portal-page-frame .portal-required-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--portal-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.auth-card .portal-required-label:after,
.portal-page-frame .portal-required-label:after {
    content: "Required";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 6px;
    border-radius: var(--portal-radius-sm);
    background: #fff4d9;
    color: #7c520e;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.auth-card .auth-form-table [class*="dxeTextBox"],
.auth-card .auth-form-table [class*="dxeButtonEdit"],
.auth-card .auth-form-table [class*="dxeMemo"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    margin-top: 6px !important;
    border: 1px solid var(--portal-line-strong) !important;
}

.auth-card .auth-form-table [class*="dxeTextBox"] input,
.auth-card .auth-form-table [class*="dxeButtonEdit"] input,
.auth-card .auth-form-table [class*="dxeMemo"] textarea {
    min-height: 38px !important;
    padding: 7px 10px !important;
}

.auth-card .imgButton,
.auth-card .dxbButton {
    width: 100% !important;
    max-width: none !important;
}

.auth-card .dxbButton table,
.auth-card .dxbButton td {
    width: 100% !important;
    text-align: center !important;
}

.auth-session-note {
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(31, 138, 91, 0.24);
    border-radius: var(--portal-radius-xl);
    background: #e0f4eb;
    color: #176844;
    font-weight: 800;
}

.auth-help {
    padding-top: 2px;
    font-size: 13px;
}

.login-auth-body {
    background:
        linear-gradient(180deg, rgba(36, 104, 201, 0.08) 0%, rgba(36, 104, 201, 0) 220px),
        var(--portal-bg);
}

.login-auth-body .auth-layout {
    padding: 56px 18px;
}

.login-auth-body .auth-shell {
    width: min(500px, 100%);
    display: block;
}

.login-auth-body .auth-card {
    position: relative;
    padding: 0;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: var(--portal-panel);
    overflow: hidden;
    box-shadow: var(--portal-shadow);
}

.login-auth-body .auth-card:before {
    display: none;
}

.login-card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 13px 28px;
    background: var(--portal-blue);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.login-card-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 34px;
}

.login-card-content {
    padding: 28px;
}

.login-auth-body .auth-card .portal-eyebrow {
    min-height: 24px;
    margin-top: 0;
    padding: 5px 9px;
    border-radius: var(--portal-radius-sm);
    background: var(--portal-blue-soft);
    color: var(--portal-blue-deep);
    letter-spacing: 0;
    font-size: 11px;
}

.login-auth-body .auth-card h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
}

.login-auth-body .auth-intro {
    margin: 10px 0 0;
    color: var(--portal-muted);
    font-size: 16px;
    line-height: 1.45;
}

.login-auth-body .auth-system-alert {
    margin-top: 14px;
}

.login-auth-body .auth-system-alert .inline-alert,
.login-auth-body .auth-system-alert > span,
.login-auth-body .auth-system-alert [class*="dxeBase"] {
    color: var(--portal-red) !important;
}

.login-auth-body .auth-panel-wrap {
    margin-top: 20px;
}

.login-auth-body .auth-card [class*="dxrpControl"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login-auth-body .auth-card [class*="dxrpHeader"] {
    display: none !important;
}

.login-auth-body .auth-card [class*="dxrpcontent"],
.login-auth-body .auth-card [class*="dxrpContent"] {
    padding: 0 !important;
}

.login-auth-body .auth-form-table {
    border-spacing: 0 10px;
}

.login-auth-body .auth-card .portal-required-label:after,
.login-auth-body .login-field .portal-required-label:after {
    content: "*";
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--portal-red);
    font-size: 14px;
    line-height: 1;
    text-transform: none;
}

.login-form-fields {
    display: grid;
    gap: 12px;
}

.login-field {
    display: grid;
    gap: 7px;
}

.login-field .portal-required-label {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    gap: 6px;
    color: var(--portal-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.login-text-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(27, 93, 181, 0.34);
    border-radius: var(--portal-radius-sm);
    background: #ffffff;
    color: var(--portal-ink);
    font: inherit;
    font-weight: 700;
    line-height: 22px;
    box-shadow: none;
}

.login-text-input:focus {
    outline: none;
    border-color: var(--portal-blue);
    box-shadow: 0 0 0 3px rgba(36, 104, 201, 0.14);
}

.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"],
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"],
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] {
    display: table !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-top: 7px !important;
    border-color: rgba(27, 93, 181, 0.34) !important;
    border-radius: var(--portal-radius-sm) !important;
}

.login-auth-body .login-textbox,
.login-auth-body table.login-textbox,
.login-auth-body .login-textbox > tbody,
.login-auth-body .login-textbox > tbody > tr,
.login-auth-body .login-textbox > tbody > tr > td {
    height: 40px !important;
    max-height: 40px !important;
}

.login-auth-body .login-textbox {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid rgba(27, 93, 181, 0.34) !important;
    border-radius: var(--portal-radius-sm) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.login-auth-body .login-textbox td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.login-auth-body .login-textbox input {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 22px !important;
}

.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"] table,
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"] table,
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] table,
.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"] tbody,
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"] tbody,
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] tbody,
.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"] tr,
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"] tr,
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] tr,
.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"] td,
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"] td,
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] td {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.login-auth-body .auth-card .auth-form-table [class*="dxeTextBox"] input,
.login-auth-body .auth-card .auth-form-table [class*="dxeButtonEdit"] input,
.login-auth-body .auth-card .auth-form-table [class*="dxeMemo"] textarea {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

.login-auth-body .remember-me-row {
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}

.login-auth-body .remember-me-row > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.login-auth-body .remember-me-row table,
.login-auth-body .remember-me-row td {
    margin: 0 !important;
}

.login-auth-body .remember-me-row [class*="dxeBase"],
.login-auth-body .remember-me-row label,
.login-auth-body .login-remember {
    color: var(--portal-muted) !important;
    font-weight: 800 !important;
}

.login-auth-body .login-remember {
    display: inline-flex;
    align-items: center;
}

.login-auth-body .login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
    flex: 0 0 16px;
    vertical-align: middle;
}

.login-auth-body .login-remember label {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    margin: 0;
    line-height: 16px;
}

.login-auth-body .remember-me-row a,
.login-auth-body .remember-me-row [class*="dxeHyperlink"],
.login-auth-body .remember-me-row [class*="dxeHyperlink"] a {
    color: var(--portal-blue-deep) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.login-auth-body .auth-card .imgButton,
.login-auth-body .auth-card .dxbButton {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: var(--portal-radius-sm) !important;
    background: var(--portal-blue) !important;
    color: #ffffff !important;
}

.login-auth-body .auth-card .dxbButton table,
.login-auth-body .auth-card .dxbButton td {
    min-height: 40px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.portal-page-header {
    position: relative;
}

.portal-page-header h1,
.portal-page-header h2 {
    margin-top: 0;
}

.portal-page-header:after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 96px;
    height: 4px;
    border-radius: var(--portal-radius-sm);
    background: var(--portal-gold);
}

.customer-entry-form,
.excel-upload-workspace,
.track-export-workspace {
    overflow-x: auto;
}

.workspace-grid.excel-upload-workspace {
    grid-template-columns: 1fr;
    gap: 14px;
}

.import-tips {
    padding: 0;
    overflow: hidden;
}

.import-tips-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 3px solid var(--portal-blue);
    cursor: pointer;
    padding: 14px 18px;
    color: var(--portal-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    list-style: none;
}

.import-tips-summary::-webkit-details-marker {
    display: none;
}

.import-tips-summary:after {
    content: "+";
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    height: 24px;
    border: 1px solid var(--portal-line);
    border-radius: 50%;
    color: var(--portal-blue);
    font-size: 18px;
    line-height: 1;
}

.import-tips[open] .import-tips-summary {
    border-bottom: 1px solid var(--portal-line);
}

.import-tips[open] .import-tips-summary:after {
    content: "-";
}

.import-tips-body {
    padding: 14px 18px 18px;
    background: #ffffff;
}

.customer-entry-form > tbody > tr:first-child,
.excel-upload-workspace > tbody > tr:first-child {
    display: none;
}

.customer-help-list,
.customer-help-list ul {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.customer-help-list > li {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: var(--portal-panel-soft);
}

.customer-help-list li li {
    margin: 7px 0 0;
    padding-left: 14px;
    color: var(--portal-muted);
    line-height: 1.45;
}

.customer-help-list [class*="dxeBase"] {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.customer-help-list > li > [class*="dxeBase"]:first-child {
    color: var(--portal-ink) !important;
    font-weight: 800 !important;
}

.customer-help-collapsible {
    max-width: 100%;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
    overflow: hidden;
}

.customer-help-toggle {
    display: block;
    width: 100%;
    border: 0;
    border-top: 3px solid var(--portal-blue);
    background: #ffffff;
    color: var(--portal-ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.customer-help-toggle:after {
    content: "+";
    float: right;
    font-size: 18px;
    line-height: 1;
}

.customer-help-collapsible.is-open .customer-help-toggle:after {
    content: "-";
}

.customer-help-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 180ms ease, opacity 180ms ease;
    opacity: 0;
}

.customer-help-collapsible.is-open .customer-help-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.customer-help-panel > .customer-help-list {
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 14px;
}

.customer-entry-table,
.upload-action-table,
.customer-code-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
}

.customer-entry-table {
    min-width: 1120px;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
}

.customer-entry-table td[style*="background-color: #0060B6"],
.excel-upload-workspace td[style*="background-color: #0060B6"],
.ModalPopup td[style*="background-color: #0060B6"] {
    border: 1px solid var(--portal-line) !important;
    border-top: 3px solid var(--portal-blue) !important;
    border-radius: var(--portal-radius-xl) !important;
    background: #ffffff !important;
    color: var(--portal-ink) !important;
}

.customer-entry-table td[style*="background-color: #0060B6"] [class*="dxeBase"],
.excel-upload-workspace td[style*="background-color: #0060B6"] [class*="dxeBase"],
.ModalPopup td[style*="background-color: #0060B6"] [class*="dxeBase"] {
    color: var(--portal-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.customer-entry-table tr:first-child td[style*="background-color: #0060B6"]:after {
    content: "Required";
    display: block;
    width: fit-content;
    margin: 6px auto 0;
    padding: 3px 6px;
    border-radius: var(--portal-radius-sm);
    background: #fff4d9;
    color: #7c520e;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.customer-entry-table [class*="dxeButtonEdit"],
.customer-entry-table [class*="dxeTextBox"],
.customer-entry-table [class*="dxeSpinEdit"],
.customer-entry-table [class*="dxeCalendar"],
.ModalPopup [class*="dxeButtonEdit"],
.ModalPopup [class*="dxeTextBox"],
.ModalPopup [class*="dxeSpinEdit"],
.ModalPopup [class*="dxeCalendar"] {
    border: 1px solid var(--portal-line-strong) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(18, 33, 62, 0.05);
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.customer-entry-table [class*="dxeButtonEdit"]:hover,
.customer-entry-table [class*="dxeTextBox"]:hover,
.customer-entry-table [class*="dxeSpinEdit"]:hover,
.ModalPopup [class*="dxeButtonEdit"]:hover,
.ModalPopup [class*="dxeTextBox"]:hover,
.ModalPopup [class*="dxeSpinEdit"]:hover {
    border-color: #8db1e5 !important;
    box-shadow: 0 2px 6px rgba(36, 104, 201, 0.10);
}

.customer-entry-table [class*="dxeFocused"],
.ModalPopup [class*="dxeFocused"] {
    border-color: var(--portal-blue) !important;
    box-shadow: 0 0 0 3px rgba(36, 104, 201, 0.15) !important;
}

.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[class*="dxic"],
.customer-entry-table [class*="dxeSpinEdit"] > tbody > tr > td[class*="dxic"] {
    width: auto !important;
}

.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[class*="dxeButton"],
.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[id*="_B-"] {
    width: 32px !important;
    min-width: 32px !important;
    border-left: 1px solid var(--portal-line-strong) !important;
    background: #f8fafc !important;
    cursor: pointer;
    text-align: center;
    transition: background-color 140ms ease;
}

.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[class*="dxeButton"]:hover,
.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[id*="_B-"]:hover {
    background: #edf4ff !important;
}

.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[class*="dxeButton"] img,
.customer-entry-table [class*="dxeButtonEdit"] > tbody > tr > td[id*="_B-"] img {
    opacity: 0.7;
}

.customer-entry-table [class*="dxeButtonEdit"] input,
.customer-entry-table [class*="dxeTextBox"] input,
.customer-entry-table [class*="dxeSpinEdit"] input,
.ModalPopup [class*="dxeButtonEdit"] input,
.ModalPopup [class*="dxeTextBox"] input,
.ModalPopup [class*="dxeSpinEdit"] input {
    min-height: 34px !important;
    padding: 6px 10px !important;
    color: var(--portal-ink) !important;
    font-size: 14px !important;
}

.customer-entry-table [id$="_xspeTurnover"] input,
.customer-entry-table [id$="_xspeTurnover_I"],
.ModalPopup [id$="_xspeTurnoverEdit"] input,
.ModalPopup [id$="_xspeTurnoverEdit_I"] {
    text-align: left !important;
}

.customer-entry-table .customer-field-message-cell {
    padding: 0 5px 4px 5px !important;
    vertical-align: top !important;
}

.customer-entry-table .customer-field-message-cell .field-help,
.customer-entry-table .customer-field-message-cell .field-error {
    display: block;
}

.customer-entry-table .dxbButton,
.upload-action-table .dxbButton {
    min-width: 120px !important;
}

[id*="_xdteReportingPeriod_DDD"] .dxpc-mainDiv,
[id*="_xdteReportingPeriodEdit_DDD"] .dxpc-mainDiv {
    border: 1px solid var(--portal-line-strong) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(18, 33, 62, 0.18) !important;
    overflow: hidden;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendar"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendar"] {
    border: 0 !important;
    background: #ffffff !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarHeader"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarHeader"] {
    border: 0 !important;
    border-bottom: 1px solid var(--portal-line) !important;
    background: #f8fbff !important;
    color: var(--portal-ink) !important;
    font-weight: 800 !important;
    padding: 8px !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNav"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNav"] {
    border: 0 !important;
    border-spacing: 6px !important;
    padding: 8px !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNavItem_"],
[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNavItemSelected"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNavItem_"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNavItemSelected"] {
    border: 1px solid var(--portal-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--portal-ink) !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    text-align: center !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNavItem_"]:hover,
[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNavItemSelected"]:hover,
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNavItem_"]:hover,
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNavItemSelected"]:hover {
    border-color: #8db1e5 !important;
    background: #edf4ff !important;
    color: var(--portal-blue) !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFastNavItemSelected"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFastNavItemSelected"],
[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarToday"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarToday"] {
    border-color: var(--portal-blue) !important;
    background: var(--portal-blue) !important;
    color: #ffffff !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarFooter"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarFooter"] {
    border-top: 1px solid var(--portal-line) !important;
    background: #f8fbff !important;
    padding: 10px !important;
    text-align: center !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarButton"],
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarButton"] {
    border: 1px solid var(--portal-line-strong) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--portal-ink) !important;
    cursor: pointer;
    font-size: 12px !important;
    margin: 0 4px !important;
    padding: 5px 12px !important;
}

[id*="_xdteReportingPeriod_DDD"] [class*="dxeCalendarButton"]:hover,
[id*="_xdteReportingPeriodEdit_DDD"] [class*="dxeCalendarButton"]:hover {
    border-color: var(--portal-blue) !important;
    color: var(--portal-blue) !important;
}

.excel-upload-workspace > tbody > tr > td,
.customer-entry-form > tbody > tr > td {
    vertical-align: top !important;
    padding: 0 8px 8px 0 !important;
}

.excel-upload-workspace .info-card {
    min-width: min(680px, 100%);
}

.upload-workspace-card {
    display: grid;
    gap: 14px;
    align-content: start;
}

.upload-step-header {
    width: fit-content;
    min-width: 160px;
    border: 1px solid var(--portal-line);
    border-top: 3px solid var(--portal-blue);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
    padding: 10px 14px;
}

.upload-step-header [class*="dxeBase"] {
    color: var(--portal-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.upload-action-table {
    max-width: 580px;
    padding: 18px;
    border: 1px dashed #8fb4ea;
    border-radius: var(--portal-radius-xl);
    background: #f8fbff;
}

.upload-workspace-card .upload-action-table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    max-width: 100%;
}

.upload-action-table td {
    vertical-align: middle;
}

.upload-file-field {
    min-width: min(100%, 360px);
}

.upload-submit-action {
    flex: 0 0 auto;
}

.customer-code-table {
    max-width: 420px;
    margin-top: 8px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
}

.customer-code-table td {
    border-bottom: 1px solid var(--portal-line);
}

.customer-code-table tr:last-child td {
    border-bottom: 0;
}

.track-export-workspace .dxgvControl {
    max-width: 100%;
}

.contracting-entity-search-grid {
    padding: 16px;
    overflow-x: auto;
}

.contracting-entity-search-grid > table {
    width: max-content;
    max-width: 100%;
    border: 0;
}

.contracting-entity-search-grid .dxgvControl,
.portal-page-frame .contracting-entity-search-grid .dxgvControl {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    border: 0 !important;
    box-shadow: none !important;
}

.contracting-entity-search-grid .dxgvControl > tbody,
.contracting-entity-search-grid .dxgvControl > tbody > tr,
.contracting-entity-search-grid .dxgvControl > tbody > tr > td {
    width: auto !important;
}

.contracting-entity-search-grid .dxgvCSD,
.contracting-entity-search-grid .dxgvHSDC,
.contracting-entity-search-grid .dxgvFSDC,
.contracting-entity-search-grid .dxgvTable {
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.contracting-entity-search-grid .dxgvTable {
    display: table !important;
}

.portal-footer-inner table {
    width: auto;
}

.portal-footer .dxbButton {
    min-width: 120px !important;
}

.portal-button-primary,
.portal-button-secondary,
.portal-button-danger,
.btnBlueConfirm,
.btnGreyCancel,
.btnCancel,
.btn_Shadow,
.portal-page-frame .dxbButton.portal-button-primary,
.portal-page-frame .dxbButton.portal-button-secondary,
.portal-page-frame .dxbButton.portal-button-danger {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--portal-radius-xl) !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.portal-button-primary,
.btnBlueConfirm,
.portal-page-frame .dxbButton.portal-button-primary {
    border: 1px solid var(--portal-blue) !important;
    background: var(--portal-blue) !important;
    color: #ffffff !important;
}

.portal-button-secondary,
.btnGreyCancel,
.btnCancel,
.btn_Shadow,
.portal-page-frame .dxbButton.portal-button-secondary {
    border: 1px solid var(--portal-line-strong) !important;
    background: #ffffff !important;
    color: var(--portal-blue-deep) !important;
}

.portal-button-danger,
.portal-page-frame .dxbButton.portal-button-danger {
    border: 1px solid rgba(194, 65, 75, 0.26) !important;
    background: #ffe4e8 !important;
    color: #9f2f3a !important;
}

.portal-button-primary table,
.portal-button-primary td,
.portal-button-primary span,
.portal-button-secondary table,
.portal-button-secondary td,
.portal-button-secondary span,
.portal-button-danger table,
.portal-button-danger td,
.portal-button-danger span,
.btnBlueConfirm table,
.btnBlueConfirm td,
.btnBlueConfirm span,
.btnGreyCancel table,
.btnGreyCancel td,
.btnGreyCancel span,
.btnCancel table,
.btnCancel td,
.btnCancel span,
.btn_Shadow table,
.btn_Shadow td,
.btn_Shadow span {
    color: inherit !important;
    font-weight: 800 !important;
}

.portal-button-primary:hover,
.portal-page-frame .dxbButton.portal-button-primary:hover {
    background: var(--portal-blue-deep) !important;
    border-color: var(--portal-blue-deep) !important;
}

.portal-button-secondary:hover,
.btnGreyCancel:hover,
.btnCancel:hover,
.btn_Shadow:hover,
.portal-page-frame .dxbButton.portal-button-secondary:hover {
    background: var(--portal-blue-soft) !important;
    border-color: var(--portal-blue) !important;
}

.portal-button-danger:hover,
.portal-page-frame .dxbButton.portal-button-danger:hover {
    background: #ffd7dd !important;
    border-color: rgba(194, 65, 75, 0.42) !important;
}

.portal-footer.is-empty {
    display: none !important;
}

.portal-footer {
    right: auto;
    left: 50%;
    bottom: 18px;
    width: auto;
    max-width: calc(100% - 40px);
    transform: translateX(-50%);
    pointer-events: none;
}

.portal-footer-inner:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    padding: 10px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--portal-shadow);
    pointer-events: auto;
}

.footer-action-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
}

.portal-footer-inner table {
    width: auto;
}

.portal-footer .dxbButton {
    min-width: 128px !important;
}

.portal-footer .portal-button-primary,
.portal-footer .portal-button-secondary,
.portal-footer .dxbButton.portal-button-primary,
.portal-footer .dxbButton.portal-button-secondary {
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: var(--portal-radius-sm) !important;
}

@media (max-width: 1180px) {
    .portal-page-header:after {
        position: static;
        display: block;
        margin-top: 14px;
    }

    .excel-upload-workspace > tbody > tr,
    .excel-upload-workspace > tbody > tr > td,
    .customer-entry-form > tbody > tr,
    .customer-entry-form > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    .customer-entry-table {
        min-width: 980px;
    }
}

@media (max-width: 720px) {
    .auth-brand {
        align-items: flex-start;
    }

    .auth-logo {
        max-width: 112px;
    }

    .auth-card {
        padding: 22px;
    }

    .auth-card [class*="dxrpcontent"],
    .auth-card [class*="dxrpContent"] {
        padding: 16px !important;
    }

    .upload-action-table,
    .upload-action-table tbody,
    .upload-action-table tr,
    .upload-action-table td {
        display: block;
        width: 100% !important;
    }

    .upload-action-table td + td {
        margin-top: 10px;
    }
}

/* Pure HTML portal navigation */
.portal-app-shell {
    padding-top: 24px;
}

.portal-fixed-header {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--portal-radius-xl) var(--portal-radius-xl) 0 0;
    background: var(--portal-blue);
    box-shadow: none;
    transform: none;
}

.portal-logo-link {
    display: inline-flex;
    align-items: center;
}

.portal-fixed-header .portal-brand {
    flex: 0 0 auto;
    min-width: 0;
}

.portal-fixed-header .portal-brand img {
    display: block;
    width: auto;
    max-width: 138px;
    max-height: 38px;
    filter: brightness(0) invert(1);
}

.portal-fixed-header .portal-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-menu-toggle {
    display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    width: 36px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--portal-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.portal-menu-toggle span {
    justify-self: center;
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}

.portal-menu-toggle span + span {
    margin-top: 4px;
}

.portal-menu,
.portal-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.portal-menu > li {
    position: relative;
}

.portal-menu-link,
.portal-submenu a {
    display: flex;
    align-items: center;
    min-height: 34px;
    border: 0;
    border-radius: var(--portal-radius-sm);
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.portal-menu-link {
    padding: 8px 10px;
}

.portal-menu-link:hover,
.portal-menu-link:focus,
.portal-menu-link.is-active,
.portal-menu-item--has-submenu.is-active > .portal-menu-link,
.portal-menu-item--has-submenu.is-open > .portal-menu-link {
    background: #ffffff;
    color: var(--portal-blue-deep);
    outline: none;
}

.portal-submenu-toggle:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.portal-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-xl);
    background: #ffffff;
    box-shadow: var(--portal-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.portal-menu-item--has-submenu:hover > .portal-submenu,
.portal-menu-item--has-submenu:focus-within > .portal-submenu,
.portal-menu-item--has-submenu.is-open > .portal-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.portal-submenu a {
    min-height: 36px;
    padding: 9px 10px;
    color: var(--portal-blue-deep);
}

.portal-submenu a:hover,
.portal-submenu a:focus,
.portal-submenu a.is-active {
    background: var(--portal-blue-soft);
    color: var(--portal-blue-deep);
    outline: none;
}

.portal-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
    color: #ffffff;
}

.portal-environment-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: var(--portal-radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: #e9f3ff;
    font-size: 11px;
    font-weight: 800;
}

.portal-status [class*="dxeBase"],
.portal-status .dxeBase_MetropolisBlue,
.portal-status label {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

@media (max-width: 1180px) {
    .portal-app-shell {
        padding-top: 14px;
    }

    .portal-fixed-header {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .portal-fixed-header .portal-nav {
        max-width: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
    }

    .portal-menu {
        gap: 5px;
    }

    .portal-menu-link {
        min-height: 32px;
        padding: 7px 8px;
        font-size: 12px;
    }

}

@media (max-width: 900px) {
    .portal-app-shell {
        width: calc(100% - 4px);
        padding-top: 2px;
    }

    .portal-fixed-header {
        left: auto;
        right: auto;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: start;
        column-gap: 10px;
        row-gap: 0;
        padding: 14px 15px 12px;
        transform: none;
    }

    .portal-fixed-header .portal-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .portal-fixed-header .portal-brand img {
        max-width: min(140px, 100%);
        max-height: 36px;
    }

    .portal-fixed-header .portal-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        max-height: min(70vh, 560px);
        padding: 14px 16px 16px;
        border: 1px solid rgba(255, 255, 255, 0.26);
        border-radius: 0 0 var(--portal-radius-sm) var(--portal-radius-sm);
        background: var(--portal-blue);
        box-shadow: 0 14px 28px rgba(13, 48, 96, 0.18);
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    }

    .portal-fixed-header.is-menu-open .portal-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .portal-fixed-header .portal-status {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        justify-content: flex-end;
        margin-left: 0;
        padding-top: 2px;
        white-space: nowrap;
    }

    .portal-menu-toggle {
        display: inline-grid;
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        justify-self: end;
    }

    .portal-fixed-header.is-menu-open .portal-menu-toggle {
        background: #ffffff;
    }

    .portal-fixed-header.is-menu-open .portal-menu-toggle span {
        background: var(--portal-blue-deep);
    }

    .portal-environment-label {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }

    .portal-status [class*="dxeBase"],
    .portal-status .dxeBase_MetropolisBlue,
    .portal-status label {
        font-size: 12px !important;
    }

    .portal-menu {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
    }

    .portal-menu-link {
        width: 100%;
        min-height: 28px;
        padding: 6px 3px;
        font-size: 13px;
        text-align: left;
    }

    .portal-menu-link.is-active,
    .portal-menu-item--has-submenu.is-active > .portal-menu-link,
    .portal-menu-item--has-submenu.is-open > .portal-menu-link {
        padding-right: 10px;
        padding-left: 10px;
    }

    .portal-submenu {
        position: static;
        display: block;
        min-width: 0;
        margin: 0 0 0 8px;
        padding: 5px 5px 5px 12px;
        border-color: rgba(255, 255, 255, 0.28);
        border-radius: var(--portal-radius-sm);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .portal-submenu a {
        min-height: 30px;
        padding: 7px 10px;
        color: #ffffff;
    }

    .portal-submenu a:hover,
    .portal-submenu a:focus,
    .portal-submenu a.is-active {
        background: #ffffff;
        color: var(--portal-blue-deep);
    }

    .portal-menu-item--has-submenu.is-active > .portal-submenu {
        margin-top: -4px;
    }
}