/* DocTrac Site Master Styles */

:root {
    /* Centralized Grid Font Size */
    --grid-font-size: 14px !important;
    --dtr-grid-font-size: var(--grid-font-size, 13px);
}

.col-sm-0-5 {
    width: 4.16665%;
}

.col-sm-1-5 {
    width: 12.49995%;
}

.col-sm-2-5 {
    width: 20.83325%;
}

.col-sm-3-5 {
    width: 29.16655%;
}

.col-sm-4-5 {
    width: 37.5%;
}

.col-sm-5-5 {
    width: 45.83315%;
}

.col-md-5-5 {
    width: 45.83315% !important;
}

.col-lg-5-5 {
    width: 45.83315%;
}

.col-xl-5-5 {
    width: 45.83315%;
}

#ProjectHeaderCombo_I.dxeEditArea_MetropolisBlue.dxeEditAreaSys.dxh1 {
    color: red !important;
    font-weight: 500;
}

#ProjectHeaderCombo_I.dxeEditArea_MetropolisBlue.dxeEditAreaSys {
    color: #0072C6 !important;
    font-weight: 500;
}

.text-secondary {
    color: black !important;
}

.enableMultiLine {
    white-space: pre-wrap;
}

.dxeButtonEditClearButton_MetropolisBlue > img {
    visibility: visible !important;
}

.dummyText {
    color: transparent !important;
}

.dxeHyperlink_MetropolisBlue {
    color: #0072C6 !important;
}

.dxeHyperlink_MetropolisBlue:visited {
    color: #0072C6 !important;
}

.dxgvFocusedRow_MetropolisBlue,
.dxgvFocusedRow {
    background-color: #EFF6FF;
    color: #0F172A !important;
}

.dxgvFocusedRow_MetropolisBlue td.dxgv,
.dxgvFocusedRow td.dxgv,
.dxgvFocusedRow_MetropolisBlue td *,
.dxgvFocusedRow td * {
    color: #0F172A !important;
}

.dxgvFocusedRow_MetropolisBlue a,
.dxgvFocusedRow_MetropolisBlue td.dxgv a,
.dxgvFocusedRow_MetropolisBlue .dxeHyperlink_MetropolisBlue,
.dxgvFocusedRow a,
.dxgvFocusedRow td.dxgv a {
    color: #0072C6;
}

.dxgvFocusedRow_MetropolisBlue a:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue td.dxgv a:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue .dxeHyperlink_MetropolisBlue:not([style*="color"]),
.dxgvFocusedRow a:not([style*="color"]),
.dxgvFocusedRow td.dxgv a:not([style*="color"]) {
    color: #0072C6 !important;
}

.dxgvFocusedRow_MetropolisBlue a:visited:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue td.dxgv a:visited:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue .dxeHyperlink_MetropolisBlue:visited:not([style*="color"]),
.dxgvFocusedRow a:visited:not([style*="color"]),
.dxgvFocusedRow td.dxgv a:visited:not([style*="color"]) {
    color: #0072C6 !important;
}

.dxgvFocusedRow_MetropolisBlue a:hover:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue td.dxgv a:hover:not([style*="color"]),
.dxgvFocusedRow_MetropolisBlue .dxeHyperlink_MetropolisBlue:hover:not([style*="color"]),
.dxgvFocusedRow a:hover:not([style*="color"]),
.dxgvFocusedRow td.dxgv a:hover:not([style*="color"]) {
    color: #0072C6 !important;
}

.dxmLite_MetropolisBlue .dxm-popup .dxm-checked,
.dxmLite_MetropolisBlue .dxm-popup .dxm-selected,
.dxmLite_MetropolisBlue .dxm-popup .dxm-checked *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-selected *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-hovered,
.dxmLite_MetropolisBlue .dxm-popup .dxm-hovered * {
    background-color: #111726 !important;
    color: #ffffff !important;
}

.dxmLite_MetropolisBlue .dxm-main .dxm-checked *,
.dxmLite_MetropolisBlue .dxm-main .dxm-selected *,
#MainMenu .dxm-main .dxm-item.dxm-selected *,
#MainMenu .dxm-main .dxm-item.dxm-checked *,
#MainMenu .dxm-main .dxm-item.dtr-nav-item-active * {
    color: var(--dtr-menu-active-color, #ffffff) !important;
}

.dxgv dx-ellipsis dx-ac {
    border-top: solid 1px red !important;
}

.dxeEditArea_MetropolisBlue.dxeDisabled_MetropolisBlue {
    background: transparent !important;
    color: #1E293B !important;
}

.dxeDisabled_MetropolisBlue, .dxeDisabled_MetropolisBlue td.dxe {
    background: #F8FAFC !important;
    color: #1E293B !important;
}

/* All Grid Footers - Total Summary, Group Footer, Fixed Columns & Summary Items */
tr.dxgvFooter_MetropolisBlue,
tr.dxgvFooter,
.dxgvFooter_MetropolisBlue,
.dxgvFooter,
td.dxgvFooter_MetropolisBlue,
td.dxgvFooter,
tr.dxgvFooter_MetropolisBlue td,
tr.dxgvFooter td,
.dxgvFooter_MetropolisBlue td.dxgv,
.dxgvFooter td.dxgv,
tr.dxgvFooter_MetropolisBlue td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvFooter_MetropolisBlue td.dxgvFixedColumn,
tr.dxgvFooter td.dxgvFixedColumn_MetropolisBlue,
tr.dxgvFooter td.dxgvFixedColumn,
td.dxgvFooter_MetropolisBlue.dxgvFixedColumn,
td.dxgvFooter.dxgvFixedColumn,
/* Group Footers */
tr.dxgvGroupFooter_MetropolisBlue,
tr.dxgvGroupFooter,
.dxgvGroupFooter_MetropolisBlue,
.dxgvGroupFooter,
td.dxgvGroupFooter_MetropolisBlue,
td.dxgvGroupFooter,
tr.dxgvGroupFooter_MetropolisBlue td,
tr.dxgvGroupFooter td,
.dxgvGroupFooter_MetropolisBlue td.dxgv,
.dxgvGroupFooter td.dxgv,
tr.dxgvGroupFooter_MetropolisBlue td.dxgvFixedColumn,
tr.dxgvGroupFooter td.dxgvFixedColumn,
td.dxgvGroupFooter_MetropolisBlue.dxgvFixedColumn,
td.dxgvGroupFooter.dxgvFixedColumn,
/* Footer inner elements and summary items */
tr.dxgvFooter_MetropolisBlue td *,
tr.dxgvFooter td *,
.dxgvFooter_MetropolisBlue td *,
.dxgvFooter td *,
tr.dxgvGroupFooter_MetropolisBlue td *,
tr.dxgvGroupFooter td *,
.dxgvGroupFooter_MetropolisBlue td *,
.dxgvGroupFooter td *,
.dxgvFooter_MetropolisBlue *,
.dxgvFooter *,
.dxgvGroupFooter_MetropolisBlue *,
.dxgvGroupFooter *,
.dxgvSummaryItem_MetropolisBlue,
.dxgvSummaryItem,
.dxgvTotalSummary_MetropolisBlue,
.dxgvTotalSummary,
.dxgvGroupSummaryItem_MetropolisBlue,
.dxgvGroupSummaryItem,
/* Standard HTML/ASP.NET Grid Footers */
tfoot,
tfoot tr,
tfoot td,
tfoot th,
tfoot td *,
tfoot th *,
tr.footer,
tr.footer td,
tr.footer *,
.grid-footer,
.grid-footer td,
.grid-footer * {
    font-weight: bold !important;
}

.dxnbLiteDisabled_MetropolisBlue, .dxnbLite_MetropolisBlue .dxnbLiteDisabled_MetropolisBlue, .dxnbLiteDisabled_MetropolisBlue a, .dxnbLiteDisabled_MetropolisBlue .dxnb-item, .dxnbLiteDisabled_MetropolisBlue .dxnb-large, .dxnbLiteDisabled_MetropolisBlue .dxnb-bullet, .dxnbLiteDisabled_MetropolisBlue .dxnb-header, .dxnbLiteDisabled_MetropolisBlue .dxnb-headerCollapsed {
    color: #0C8EF4;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-bottom: 10px;
    margin-top: 10px;
    height: 25px !important;
}

.dxgvGroupRow_MetropolisBlue td.dxgv, .dxgvFocusedGroupRow_MetropolisBlue td.dxgv, .dxgvBatchEditChangesPreviewGroupRow_MetropolisBlue td.dxgv {
    border-bottom: 1px Solid #9ebce7;
}

.dxgvFooter_MetropolisBlue {
    background-color: #EAEDF2 !important;
}

.navSectionStyle {
    background-color: #eaedf2;
    padding-right: 0px;
    min-height: calc(100vh - 120px);
}

.navSectionStyleHidden {
    display: none;
}

.contentSectionStyle {
    padding-left: 0px;
    padding-right: 15px;
}

.contentSectionFull {
    padding-left: 0px;
    padding-right: 20px;
}

.removeRightBorder {
    border-right-style: none !important;
}

.newRow td {
    border-bottom: 1px solid #9EBCE7 !important;
}

.dxssControl_MetropolisBlue .dxss-md {
    border: 1px solid #9ebce7 !important;
}


.dxeEditArea_MetropolisBlue.dxeDisabled_MetropolisBlue {
    color: gray;
}

.hiddenGroupCaption {
    visibility: hidden;
}

.simpleNavItemClass {
    padding: 10px;
}

::-webkit-resizer {
    background-color: #666;
}

.dxeToken_Material {
    background: #0072C6;
}

.dxeListBoxEmptyHeader .dxeHD {
    display: none;
}

.dxeListBox_MetropolisBlue {
    color: black !important;
}

.dxeListBox_MetropolisBlue td.dxeLTM, .dxeListBox_MetropolisBlue td.dxeTM, .dxeListBox_MetropolisBlue td.dxeMIM {
    border-left: 1px solid #EAEDF2 !important;
}

.dxeListBox_MetropolisBlue .dxeHD {
    border-bottom: 1px solid #EAEDF2;
    color: black !important;
    font-weight: bold;
}

.dxeListBoxItemRow_MetropolisBlue {
    cursor: pointer;
}

/* All Grid Captions, Title Panels, Headers & Band Headers */
caption,
caption.dxgvCaption_MetropolisBlue,
caption.dxgvCaption,
.dxgvCaption_MetropolisBlue,
.dxgvCaption,
table.dxgvTable_MetropolisBlue > caption,
table.dxgvTable > caption,
.dxgvControl_MetropolisBlue caption,
.dxgvControl caption,
caption *,
.dxgvCaption_MetropolisBlue *,
.dxgvCaption *,
.dxgvTitlePanel_MetropolisBlue,
.dxgvTitlePanel,
tr.dxgvTitlePanel_MetropolisBlue td,
tr.dxgvTitlePanel td,
td.dxgvTitlePanel_MetropolisBlue,
td.dxgvTitlePanel,
.dxgvTitlePanel_MetropolisBlue *,
.dxgvTitlePanel *,
.dxgvHeader_MetropolisBlue,
.dxgvHeader,
th.dxgvHeader_MetropolisBlue,
td.dxgvHeader_MetropolisBlue,
th.dxgvHeader,
td.dxgvHeader,
th.dxgvBandHeader_MetropolisBlue,
td.dxgvBandHeader_MetropolisBlue,
th.dxgvBandHeader,
td.dxgvBandHeader,
.dxgvBandHeader_MetropolisBlue,
.dxgvBandHeader,
th.dxgvFixedColumn_MetropolisBlue,
th.dxgvFixedColumn,
th.dxgvHeader_MetropolisBlue a,
td.dxgvHeader_MetropolisBlue a,
th.dxgvHeader a,
td.dxgvHeader a,
th.dxgvHeader_MetropolisBlue span,
td.dxgvHeader_MetropolisBlue span,
th.dxgvHeader span,
td.dxgvHeader span,
th.dxgvHeader_MetropolisBlue table,
td.dxgvHeader_MetropolisBlue table,
th.dxgvHeader_MetropolisBlue td,
td.dxgvHeader_MetropolisBlue td,
th.dxgvHeader_MetropolisBlue *,
td.dxgvHeader_MetropolisBlue *,
th.dxgvHeader *,
td.dxgvHeader *,
.dxgvBandHeader_MetropolisBlue *,
.dxgvBandHeader *,
tr.dxgvGroupRow_MetropolisBlue,
tr.dxgvGroupRow,
td.dxgvGroupRow_MetropolisBlue,
td.dxgvGroupRow,
.dxgvGroupRow_MetropolisBlue td,
.dxgvGroupRow td,
.dxgvGroupRow_MetropolisBlue *,
.dxgvGroupRow * {
    font-weight: bold !important;
}

.dxgvHeader_MetropolisBlue {
    font-weight: bold !important;
    background-color: #F8FAFC !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #CBD5E1 !important;
    border-bottom: 1px solid #CBD5E1 !important;
}

.dxgvHeader_MetropolisBlue:last-child {
    border-right: none !important;
}

/* ==========================================================================
   DOCTRAC MODERN ACTION BUTTONS (MetropolisBlue Brand Matching)
   Applies exclusively to standalone action buttons with RenderMode="Secondary"
   (e.g., "Prepare Appraisal", "New Request", "New Enquiry", "Save", "Submit", "Approve").
   STRICTLY EXCLUDES all grid buttons, command column icons, filter buttons,
   header buttons, and pager controls.
   ========================================================================== */

/* Ensure DevExpress controls with ClientVisible=false or inline display:none stay hidden */
/* Ensure DevExpress controls with ClientVisible=false or inline display:none stay hidden */
.dxbButton[style*="display:none"],
.dxbButton[style*="display: none"],
.dxbButton_MetropolisBlue[style*="display:none"],
.dxbButton_MetropolisBlue[style*="display: none"],
.dxb-secondary[style*="display:none"],
.dxb-secondary[style*="display: none"],
[id*="Button"][style*="display:none"],
[id*="Button"][style*="display: none"] {
    display: none !important;
}

/* Button styling has been isolated into Assets/Styles/DevExpressButtonModern.css */

/* Grid Command Column Clean Safeguard */
[class*="dxgvCommandColumn"] .dxbButton,
[class*="dxgvCommandColumnItem"] .dxbButton,
[class*="dxgvFilter"] .dxbButton {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* 3. Top Header: Sign Out & Change Password Lock Icon Buttons */
.dtr-btn-lock,
.dtr-btn-lock.dxbButton,
.dtr-btn-lock.dxbButton_MetropolisBlue,
#ChangePasswordButton,
#ChangePasswordButton.dxbButton,
#ChangePasswordButton.dxbButton_MetropolisBlue,
[id*="ChangePasswordButton"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.dtr-btn-lock:hover,
.dtr-btn-lock.dxbButton_MetropolisBlue:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* Change Password Lock Icon - Robust Presentation */
.dtr-btn-lock::before,
.dtr-btn-lock .dxb::before,
.dtr-btn-lock span::before,
#ChangePasswordButton::before,
#ChangePasswordButton .dxb::before {
    display: inline-flex !important;
    content: "\f023" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    color: #64748b !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: color 0.15s ease !important;
}

.dtr-btn-lock:hover::before,
.dtr-btn-lock:hover .dxb::before,
#ChangePasswordButton:hover::before {
    color: #0f172a !important;
}

.dtr-btn-logout,
.dtr-btn-logout.dxbButton,
.dtr-btn-logout.dxbButton_MetropolisBlue,
#BULogout,
#SPLogout,
[id*="Logout"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #fca5a5 !important;
    color: #ef4444 !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 8px !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.dtr-btn-logout:hover,
.dtr-btn-logout.dxbButton_MetropolisBlue:hover,
#BULogout:hover,
#SPLogout:hover {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

.dtr-btn-logout span,
.dtr-btn-logout .dxb span,
.dtr-btn-logout.dxbButton_MetropolisBlue span {
    color: #ef4444 !important;
}

.dtr-btn-logout:hover span,
.dtr-btn-logout:hover .dxb span {
    color: #dc2626 !important;
}

.dtr-btn-logout .dxb::before {
    display: inline-block !important;
    content: "\f2f5" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 12.5px !important;
    margin-right: 6px !important;
    color: #ef4444 !important;
}

/* 4. Grid Selection Clear Button */
.dtr-clear-selection-btn,
.dtr-clear-selection-btn.dxbButton,
.dtr-clear-selection-btn.dxbButton_MetropolisBlue,
#ClearSelectionButton,
#ClearSelectionButton.dxbButton,
#ClearSelectionButton.dxbButton_MetropolisBlue,
[id*="ClearSelectionButton"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #0284C7 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    padding: 0 4px !important;
    min-width: unset !important;
    height: auto !important;
    max-height: unset !important;
    line-height: normal !important;
}

.dtr-clear-selection-btn span,
.dtr-clear-selection-btn .dxb span,
#ClearSelectionButton span,
#ClearSelectionButton .dxb span {
    color: #0284C7 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.dtr-clear-selection-btn:hover,
.dtr-clear-selection-btn:hover span,
#ClearSelectionButton:hover,
#ClearSelectionButton:hover span {
    color: #0369A1 !important;
}

/* ==========================================================================
   UNIVERSAL BUTTON ONFOCUS HIGHLIGHT SYSTEM (EXACT VIBRANT AZURE FOCUS RING FROM GIT)
   ========================================================================== */
html body .dxbButton:focus,
html body .dxbButton:focus-visible,
html body .dxbButton:focus-within,
html body .dxbButton.dxbButtonFocused,
html body .dxbButton.dtr-btn-focused,
html body .dxbButton[class*="Focused"],
html body .dxbButton_MetropolisBlue:focus,
html body .dxbButton_MetropolisBlue:focus-visible,
html body .dxbButton_MetropolisBlue:focus-within,
html body .dxbButton_MetropolisBlue.dxbButtonFocused_MetropolisBlue,
html body .dxbButton_MetropolisBlue.dtr-btn-focused,
html body .dxbButton_MetropolisBlue[class*="Focused"],
html body .dxbButton_MetropolisBlue.dxb-secondary:focus,
html body .dxbButton_MetropolisBlue.dxb-secondary:focus-visible,
html body .dxbButton_MetropolisBlue.dxb-secondary:focus-within,
html body .dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-focused,
html body .dxb-secondary:focus,
html body .dxb-secondary:focus-visible,
html body .dxb-secondary:focus-within,
html body .dxb-secondary.dxbButtonFocused_MetropolisBlue,
html body .dxb-secondary.dtr-btn-focused,
html body .dxb-secondary[class*="Focused"],
html body .dtr-btn-focused,
html body [class*="dxbButton"]:focus,
html body [class*="dxbButton"]:focus-visible,
html body [class*="dxbButton"]:focus-within,
html body [class*="dxbButtonFocused"],
html body [class*="dxbFocused"],
html body button.btn-secondary:focus,
html body button.btn-secondary:focus-visible,
html body button.btn-secondary:focus-within,
html body button.btn-secondary.dtr-btn-focused,
html body button.btn:focus,
html body button.btn:focus-visible,
html body button.btn:focus-within,
html body button.btn.dtr-btn-focused,
html body button.btn.btn-secondary.dropdown-toggle:focus,
html body button.btn.btn-secondary.dropdown-toggle:focus-visible,
html body button.btn.btn-secondary.dropdown-toggle:focus-within,
html body button.btn.btn-secondary.dropdown-toggle.dtr-btn-focused,
html body .mdr-print-btn:focus,
html body .mdr-print-btn:focus-visible,
html body .mdr-print-btn:focus-within,
html body .mdr-print-btn.dtr-btn-focused,
html body .pr-btn-action:focus,
html body .pr-btn-action:focus-visible,
html body .pr-btn-action:focus-within,
html body .pr-btn-action.dtr-btn-focused,
html body .pr-btn-save:focus,
html body .pr-btn-save:focus-visible,
html body .pr-btn-save:focus-within,
html body .pr-btn-save.dtr-btn-focused,
html body .pl-btn-action:focus,
html body .pl-btn-action:focus-visible,
html body .pl-btn-action:focus-within,
html body .pl-btn-action.dtr-btn-focused,
html body .pcrcl-btn-action:focus,
html body .pcrcl-btn-action:focus-visible,
html body .pcrcl-btn-action:focus-within,
html body .pcrcl-btn-action.dtr-btn-focused,
html body .pm-action-btn:focus,
html body .pm-action-btn:focus-visible,
html body .pm-action-btn:focus-within,
html body .pm-action-btn.dtr-btn-focused,
html body .tl-action-btn:focus,
html body .tl-action-btn:focus-visible,
html body .tl-action-btn:focus-within,
html body .tl-action-btn.dtr-btn-focused,
html body .actionRow .dxbButton:focus,
html body .actionRow .dxbButton:focus-visible,
html body .actionRow .dxbButton:focus-within,
html body .actionRow .dxbButton_MetropolisBlue:focus,
html body .actionRow .dxbButton_MetropolisBlue:focus-visible,
html body .actionRow .dxbButton_MetropolisBlue:focus-within,
html body .actionRow .dxbButtonFocused_MetropolisBlue,
html body .actionRow .dtr-btn-focused,
html body .dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):focus,
html body .dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):focus-visible,
html body .dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):focus-within,
html body .dxbButton_MetropolisBlue.dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *).dtr-btn-focused,
html body .dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):focus,
html body .dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *):focus-within,
html body .dxb-secondary:not(.dxgvControl *):not(.dxgvTable *):not(td.dxgvCommandColumn *).dtr-btn-focused {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #0284c7, 0 8px 24px rgba(2, 132, 199, 0.5) !important;
    outline: none !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
    z-index: 10 !important;
}

html body .dxbButton:focus *,
html body .dxbButton:focus-visible *,
html body .dxbButton:focus-within *,
html body .dxbButton.dxbButtonFocused *,
html body .dxbButton.dtr-btn-focused *,
html body .dxbButton_MetropolisBlue:focus *,
html body .dxbButton_MetropolisBlue:focus-visible *,
html body .dxbButton_MetropolisBlue:focus-within *,
html body .dxbButton_MetropolisBlue.dxbButtonFocused_MetropolisBlue *,
html body .dxbButton_MetropolisBlue.dtr-btn-focused *,
html body .dxb-secondary:focus *,
html body .dxb-secondary:focus-visible *,
html body .dxb-secondary:focus-within *,
html body .dxb-secondary.dxbButtonFocused_MetropolisBlue *,
html body .dxb-secondary.dtr-btn-focused *,
html body .dtr-btn-focused *,
html body [class*="dxbButton"]:focus *,
html body [class*="dxbButton"]:focus-visible *,
html body [class*="dxbButton"]:focus-within *,
html body [class*="dxbButtonFocused"] *,
html body [class*="dxbFocused"] *,
html body button.btn-secondary:focus *,
html body button.btn-secondary:focus-visible *,
html body button.btn:focus *,
html body button.btn:focus-visible *,
html body .mdr-print-btn:focus *,
html body .pr-btn-action:focus *,
html body .pr-btn-save:focus *,
html body .pl-btn-action:focus *,
html body .pcrcl-btn-action:focus *,
html body .pm-action-btn:focus *,
html body .tl-action-btn:focus * {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL DROPDOWN MENUS & ROW ACTION CONTEXT MENUS
   ══════════════════════════════════════════════════════════════════════════ */

.btn-group {
    display: inline-flex !important;
    position: relative !important;
    vertical-align: middle !important;
}

.dropdown-menu,
.mdr-dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 6px 0 !important;
    margin-top: 4px !important;
    min-width: 210px !important;
    width: auto !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    z-index: 20000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dropdown-menu.show,
.show > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu a.dropdown-item,
.dropdown-menu .mdr-dropdown-menu-item,
.dropdown-menu a,
.dropdown-menu .dxbButton,
.dropdown-menu .dxbButton_MetropolisBlue,
.dropdown-menu .dtr-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 32px !important;
    height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    padding: 7px 16px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu .dxbButton::before,
.dropdown-menu .dxbButton::after,
.dropdown-menu .dxbButton_MetropolisBlue::before,
.dropdown-menu .dxbButton_MetropolisBlue::after,
.dropdown-menu .dtr-btn::before,
.dropdown-menu .dtr-btn::after,
.dropdown-menu a::before,
.dropdown-menu a::after,
.dropdown-menu .dropdown-item::before,
.dropdown-menu .dropdown-item::after {
    display: none !important;
    content: none !important;
}

.dropdown-menu .dxb,
.dropdown-menu .dxbButton .dxb,
.dropdown-menu .dxbButton_MetropolisBlue .dxb,
.dropdown-menu .dtr-btn .dxb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item *,
.dropdown-menu .dropdown-item span,
.dropdown-menu .mdr-dropdown-menu-item,
.dropdown-menu .mdr-dropdown-menu-item *,
.dropdown-menu .mdr-dropdown-menu-item span,
.dropdown-menu a,
.dropdown-menu a *,
.dropdown-menu a span,
.dropdown-menu .dxbButton,
.dropdown-menu .dxbButton *,
.dropdown-menu .dxbButton span,
.dropdown-menu .dxbButton_MetropolisBlue,
.dropdown-menu .dxbButton_MetropolisBlue *,
.dropdown-menu .dxbButton_MetropolisBlue span,
.dropdown-menu .dxb,
.dropdown-menu .dxb span {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: normal !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu a.dropdown-item i,
.dropdown-menu a i {
    width: 16px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .mdr-dropdown-menu-item:hover,
.dropdown-menu .mdr-dropdown-menu-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu .dxbButton:hover,
.dropdown-menu .dxbButton:focus,
.dropdown-menu .dxbButtonHover,
.dropdown-menu .dxbButtonHover_MetropolisBlue,
.dropdown-menu .dxbButtonPressed,
.dropdown-menu .dxbButtonPressed_MetropolisBlue {
    background-color: #111726 !important;
    color: #FFFFFF !important;
}

.dropdown-menu .dropdown-item:hover *,
.dropdown-menu .dropdown-item:focus *,
.dropdown-menu .mdr-dropdown-menu-item:hover *,
.dropdown-menu .mdr-dropdown-menu-item:focus *,
.dropdown-menu a:hover *,
.dropdown-menu a:focus *,
.dropdown-menu .dxbButton:hover *,
.dropdown-menu .dxbButton:focus *,
.dropdown-menu .dxbButtonHover *,
.dropdown-menu .dxbButtonHover_MetropolisBlue *,
.dropdown-menu .dxbButtonPressed *,
.dropdown-menu .dxbButtonPressed_MetropolisBlue *,
.dropdown-menu .dropdown-item:hover span,
.dropdown-menu .mdr-dropdown-menu-item:hover span,
.dropdown-menu a:hover span,
.dropdown-menu .dxbButton:hover span,
.dropdown-menu .dxbButtonHover span,
.dropdown-menu .dxbButtonHover_MetropolisBlue span,
.dropdown-menu .dxbButtonPressed span,
.dropdown-menu .dxbButtonPressed_MetropolisBlue span,
.dropdown-menu .dxbButton:hover .dxb span,
.dropdown-menu .dxbButtonHover_MetropolisBlue .dxb span {
    color: #FFFFFF !important;
}

/* Row Action 3-Dots Button in Grid */
.dtr-action-cell,
.mdr-action-cell {
    overflow: visible !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.dtr-action-row-btn,
.mdr-action-row-btn,
button.dtr-action-row-btn,
button.mdr-action-row-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
    color: #475569 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
}

.dtr-action-row-btn::after,
.mdr-action-row-btn::after {
    display: none !important;
}

.dtr-action-row-btn:hover,
.dtr-action-row-btn:focus,
.dtr-action-row-btn[aria-expanded="true"],
.mdr-action-row-btn:hover,
.mdr-action-row-btn:focus,
.mdr-action-row-btn[aria-expanded="true"] {
    background-color: #0284c7 !important;
    color: #FFFFFF !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

/* Row Action Floating Context Menu */
.dtr-row-action-menu,
.mdr-row-action-menu,
.dtr-global-action-menu {
    position: fixed !important;
    z-index: 99999999 !important;
    min-width: 180px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow: hidden !important;
}

.dtr-row-action-menu .dropdown-item,
.mdr-row-action-menu .dropdown-item,
.dtr-global-action-menu .dropdown-item {
    padding: 7px 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
}

.dtr-row-action-menu .dropdown-item:hover,
.dtr-row-action-menu .dropdown-item:focus,
.mdr-row-action-menu .dropdown-item:hover,
.mdr-row-action-menu .dropdown-item:focus,
.dtr-global-action-menu .dropdown-item:hover,
.dtr-global-action-menu .dropdown-item:focus {
    background-color: #F0F9FF !important;
    color: #0284c7 !important;
    text-decoration: none !important;
}

.dtr-row-action-menu .dropdown-item i,
.mdr-row-action-menu .dropdown-item i,
.dtr-global-action-menu .dropdown-item i {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    width: 16px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    flex-shrink: 0 !important;
}

.dtr-row-action-menu .dropdown-divider,
.mdr-row-action-menu .dropdown-divider,
.dtr-global-action-menu .dropdown-divider {
    margin: 4px 0 !important;
    border-top: 1px solid #F1F5F9 !important;
}

/* Preserved Icon Utility Colors */
.text-primary, .dtr-row-action-menu .text-primary { color: #0284c7 !important; }
.text-info, .dtr-row-action-menu .text-info { color: #0ea5e9 !important; }
.text-success, .dtr-row-action-menu .text-success { color: #10b981 !important; }
.text-warning, .dtr-row-action-menu .text-warning { color: #f59e0b !important; }
.text-danger, .dtr-row-action-menu .text-danger { color: #ef4444 !important; }
.text-secondary, .dtr-row-action-menu .text-secondary { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL DEVEXPRESS POPUP CONTROL & MODAL ARCHITECTURE
   ══════════════════════════════════════════════════════════════════════════ */

.dxpcModalBackground_MetropolisBlue,
.dxpcModalBackground {
    background-color: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 1 !important;
    z-index: 12000 !important;
    transition: opacity 0.2s ease-in-out !important;
}

table.dxpcLite_MetropolisBlue,
table.dxpcLite,
div.dxpc-mainDiv {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    z-index: 12001 !important;
    box-sizing: border-box !important;
}

.dxpc-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08) !important;
}

/* Universal DevExpress Popup Control Modal Header - Clean White (No dark background) */
.dxpcLite_MetropolisBlue td.dxpc-header,
.dxpcLite td.dxpc-header,
.dxpcLite_MetropolisBlue .dxpc-header,
.dxpcLite .dxpc-header,
.dxpc-header,
.dxpcLite_MetropolisBlue .dxpc-headerContent,
.dxpcLite .dxpc-headerContent,
.dxpc-headerContent,
[id*="Popup"] td.dxpc-header,
[id*="popup"] td.dxpc-header,
[id*="Popup"] .dxpc-header,
[id*="popup"] .dxpc-header {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 10px 16px !important;
    height: auto !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}

.dxpcLite_MetropolisBlue .dxpc-contentWrapper,
.dxpcLite .dxpc-contentWrapper {
    background: #F8FAFC !important;
    padding: 0 !important;
}

.dxpcLite_MetropolisBlue .dxpc-content,
.dxpcLite .dxpc-content,
.dxpc-content {
    background: #F8FAFC !important;
    padding: 16px !important;
    max-height: calc(88vh - 60px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.dtr-popup-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

.dtr-popup-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    gap: 12px !important;
}

.dtr-popup-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

.dtr-popup-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Modal Section Cards & Prepare Transmittal Classes */
.dtr-section-card,
.pt-section-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dtr-section-card:last-child,
.pt-section-card:last-child {
    margin-bottom: 0 !important;
}

.dtr-section-card-header,
.pt-section-card-header {
    background: #F8FAFC !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dtr-section-card-header i,
.pt-section-card-header i {
    color: #0284C7 !important;
    font-size: 14px !important;
}

.dtr-section-card-body,
.pt-section-card-body {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
}

/* Form Grid Rows in Modal */
.dtr-form-row,
.pt-form-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

.dtr-form-col-half,
.pt-form-col-half {
    flex: 0 0 calc(50% - 8px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.dtr-form-col-label,
.pt-form-label-col,
.dtr-form-col-half .dtr-form-col-label {
    flex: 0 0 148px !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
}

.dtr-form-col-editor,
.pt-form-editor-col,
.dtr-form-col-half .dtr-form-col-editor {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.dtr-field-label,
.pt-field-label,
.dtr-field-label.dxeBase_MetropolisBlue,
.dtr-field-label span:not(.required-indicator) {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    letter-spacing: 0.01em !important;
}

.required-indicator {
    color: #EF4444 !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
    font-size: 0.95rem !important;
    display: inline !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORTUNE 500 UNIVERSAL PAGE LAYOUT & CONTAINER ARCHITECTURE
   DocTrac Enterprise Standards: Pure reusable layout primitives (.dtr-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Page Container */
.dtr-page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 2. Top Header Row */
.dtr-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
}

/* 3. Title Section */
.dtr-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 4. Page Title Typography */
.dtr-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.25;
}

/* 5. Selection Count Badge */
.dtr-selection-badge-container {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0369A1;
    transition: all 0.2s ease;
}

.dtr-sel-count-badge {
    background: #0284C7;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    display: inline-block;
}

/* 6. Toolbar & Search Wrapper */
.dtr-toolbar-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
}

.dtr-search-wrapper {
    width: 200px !important;
    min-width: 160px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
}

.dtr-action-toolbar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 7. Grid Container Architecture */
.dtr-grid-container {
    width: 100% !important;
    margin-top: 6px;
    position: relative !important;
    overflow-x: hidden !important;
}


/* 8. DevExpress Empty Cell Cleanup */
.dtr-grid-container .dxgvHEC,
.dtr-grid-container th.dxgvHEC,
.dtr-grid-container td.dxgvHEC,
.dtr-grid-container .dxgvFSR,
.dtr-grid-container td.dxgvEmptyCell,
.dtr-grid-container td.dxgvEmptyHeader_MetropolisBlue,
.dtr-grid-container th.dxgvEmptyHeader_MetropolisBlue,
.dtr-grid-container td.dxgvEmptyHeader,
.dtr-grid-container th.dxgvEmptyHeader {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 9. Universal Popup & Form Primitives */
.dtr-popup-container {
    padding: 6px 14px 12px 14px;
    background: #FFFFFF;
    overflow: visible !important;
}

.dtr-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #E2E8F0;
}

.dtr-popup-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    margin-left: 8px;
}

.dtr-popup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}

.dtr-section-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    overflow: visible !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dtr-section-card-header {
    background: #F8FAFC;
    padding: 6px 12px;
    border-bottom: 1px solid #E2E8F0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dtr-section-card-body {
    padding: 10px 12px;
    overflow: visible !important;
}

.dtr-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 16px;
}

.dtr-form-row:last-child {
    margin-bottom: 0;
}

.dtr-form-col-label {
    flex: 0 0 148px;
    width: 148px;
    min-width: 148px;
    max-width: 148px;
}

.dtr-form-col-editor {
    flex: 1 1 auto;
    width: 100%;
}

.dtr-form-col-half {
    flex: 0 0 calc(50% - 8px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-form-col-half .dtr-form-col-label {
    flex: 0 0 148px;
    width: 148px;
    min-width: 148px;
    max-width: 148px;
}

.dtr-form-col-half .dtr-form-col-editor {
    flex: 1 1 auto;
    width: 100%;
}

.dtr-field-label,
.dtr-field-label.dxeBase_MetropolisBlue,
.dtr-field-label span:not(.required-indicator) {
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    color: #0F172A !important;
    letter-spacing: 0.01em;
}

.required-indicator {
    color: #EF4444 !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
    font-size: 0.95rem !important;
    display: inline !important;
}

/* 10. Responsive Breakpoints */
@media (max-width: 992px) {
    .dtr-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .dtr-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }
    .dtr-search-wrapper {
        width: 100%;
        max-width: 320px;
    }
    .dtr-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .dtr-form-col-label {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .dtr-form-col-editor {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. UNIVERSAL RECORD DOSSIER, HERO BANNERS & FORM ARCHITECTURE
   ══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb Navigation Bar */
.dtr-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 12px;
}

.dtr-breadcrumb-link {
    color: #64748B;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dtr-breadcrumb-link:hover {
    color: #2563EB;
    text-decoration: none;
}

.dtr-breadcrumb-sep {
    font-size: 10px;
    color: #94A3B8;
}

.dtr-breadcrumb-current {
    color: #334155;
    font-weight: 600;
}

/* Executive Hero Header (Identity Badge & Status) */
.dtr-record-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 24px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
    margin-bottom: 24px;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.dtr-record-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.dtr-identity-cluster {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dtr-avatar-badge {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #2563EB;
    box-shadow: inset 0 2px 4px rgba(37, 99, 235, 0.06);
    flex-shrink: 0;
}

.dtr-record-title-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: center !important;
}

.dtr-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

.dtr-record-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
}

.dtr-record-subtitle {
    font-size: 13px !important;
    color: #64748B !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dtr-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    background: #ECFDF5 !important;
    color: #059669 !important;
    border: 1px solid #A7F3D0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.dtr-status-pill-edit {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border-color: #BFDBFE !important;
}

.dtr-status-pill-view {
    background: #ECFDF5 !important;
    color: #059669 !important;
    border-color: #A7F3D0 !important;
}

.dtr-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: currentColor !important;
}

.dtr-code-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
}

.dtr-record-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Two-Column Responsive Workspace Grid */
.dtr-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    margin-bottom: 30px;
}

.dtr-main-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.dtr-side-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Enterprise Dossier Cards */
.dtr-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dtr-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
}

.dtr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
}

.dtr-card-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 12px;
}

.dtr-card-header-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.dtr-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    letter-spacing: -0.005em;
}

.dtr-card-title i {
    color: #2563EB;
    font-size: 15px;
}

.dtr-card-subtitle {
    font-size: 12px;
    color: #64748B;
    margin: 0;
}

.dtr-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #DBEAFE;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dtr-card-body {
    padding: 20px;
}

/* Form Field Grids & Layouts */
.dtr-form-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
}

.dtr-form-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
}

.dtr-form-grid-1col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dtr-field-group,
.dtr-field-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dtr-field-full,
.dtr-field-container-full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dtr-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dtr-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.01em;
}

.dtr-field-control {
    width: 100%;
}

.dtr-field-hint {
    font-size: 11.5px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.dtr-input-group {
    position: relative;
    width: 100%;
}

.dtr-has-icon .dtr-input-lead-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 13px;
    z-index: 2;
    pointer-events: none;
}

.dtr-has-icon input.dxeEditArea_MetropolisBlue {
    padding-left: 32px !important;
}

.dtr-memo-box {
    width: 100%;
}

.dtr-bottom-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

/* Sidebar Dossier & Widgets */
.dtr-sidebar-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.dtr-sidebar-card:hover {
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
}

.dtr-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dtr-sidebar-body {
    padding: 18px 20px;
}

.dtr-dossier-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 16px;
}

.dtr-dossier-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.dtr-dossier-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.dtr-dossier-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtr-dossier-sub {
    font-size: 12px;
    color: #64748B;
}

/* Sidebar Info Lists & Quick Navigation */
.dtr-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dtr-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #F1F5F9;
}

.dtr-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dtr-info-label {
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dtr-info-value {
    color: #334155;
    font-weight: 600;
    text-align: right;
}

.dtr-quick-nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dtr-quick-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dtr-quick-nav-item:hover {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #2563EB;
    text-decoration: none;
    transform: translateX(2px);
}

.dtr-quick-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-quick-nav-icon {
    color: #64748B;
    font-size: 14px;
    transition: color 0.15s ease;
}

.dtr-quick-nav-item:hover .dtr-quick-nav-icon {
    color: #2563EB;
}

.dtr-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dtr-shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #64748B;
}

.dtr-kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 600;
    color: #334155;
    background-color: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.dtr-security-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 6px;
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. UNIVERSAL KPI METRICS, GRIDS & LEGEND BARS
   ══════════════════════════════════════════════════════════════════════════ */

.dtr-pill-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0284C7;
    background: #E0F2FE;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dtr-year-wrapper {
    width: 120px;
}

.dtr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.875rem;
    width: 100%;
    margin-bottom: 16px;
}

.dtr-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dtr-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.dtr-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dtr-kpi-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dtr-kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}

.dtr-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.dtr-legend-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 12px;
}

.dtr-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}

.dtr-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════════
   13. UNIVERSAL CHECKLIST & SIGN-OFF ARCHITECTURE
   ══════════════════════════════════════════════════════════════════════════ */

.dtr-checklist-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dtr-checklist-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dtr-combo-wrapper {
    width: 250px;
    max-width: 250px;
}

.dtr-signoff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 16px;
}

.dtr-signoff-col {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 18px 20px;
}

.dtr-signoff-header {
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid #3B82F6;
    display: inline-block;
}

.dtr-signoff-form-group {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dtr-signoff-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.dtr-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.dtr-details-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dtr-details-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
}

.dtr-details-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F172A;
}

.dtr-section-row,
tr.dtr-section-row > td {
    background-color: #F1F5F9 !important;
    font-weight: 700 !important;
    color: #1E293B !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. UNIVERSAL MODULE CHIPS, SELECTION STRIPS & GRID ACTIONS
   ══════════════════════════════════════════════════════════════════════════ */

.dtr-modules-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.dtr-module-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2563EB;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    transition: all 0.15s ease;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dtr-module-chip:hover {
    background-color: #DBEAFE;
    color: #1D4ED8;
    text-decoration: none;
}

.dtr-row-on-hold,
tr.dtr-row-on-hold > td {
    color: #DC2626 !important;
}

.dtr-action-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.dtr-grid-icon-btn,
.dtr-grid-icon-btn.dxbButton_MetropolisBlue,
.dtr-grid-icon-btn.dxbButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.dtr-grid-icon-btn img,
.dtr-grid-icon-btn.dxbButton_MetropolisBlue img,
.dtr-grid-icon-btn.dxbButton img {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    transition: transform 0.15s ease;
}

.dtr-grid-icon-btn:hover img {
    transform: scale(1.2);
}

.dtr-selected-docs-strip {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dtr-clear-link {
    font-size: 0.78rem !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
}

.dtr-clear-link:hover {
    text-decoration: underline !important;
}

.rightListboxHeading {
    margin-left: -15px !important;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    background-color: #EAEDF2;
    margin-right: -15px;
    margin-bottom: 5px;
    font-size: small !important;
    font-weight: bold;
}

.dxgvBEPCBC {
    display: none;
}

.productLogo {
    width: 150px;
    height: 51.5px;
    margin-top: 17px;
    position: absolute;
    top: 0;
    padding: 0px;
    right: 10px;
}

body {
    color: black;
    padding-top: 60px;
    margin: 0px;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

body, html {
    color: black;
    overflow-x: hidden;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-size: 14px;
}

.pageTitle {
    font-size: x-large;
    color: black;
    font-weight: 600;
    padding-top: 8px;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.pageSubTitle {
    font-size: medium;
    color: black;
    font-weight: 600;
    padding-top: 8px;
    font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.fa-plus-circle:before {
    color: green;
}

.newButton {
    margin-left: 5px;
    font-size: x-large;
    color: black !important;
    cursor: pointer;
}

.productTitle {
    padding: 20px;
    color: #0072C6 !important;
    font-style: italic;
    font-variant: small-caps;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 700;
}

.dxnb-header {
    display: none;
}

.leftBorderStyle {
    border-left-color: #d7dee8;
    border-left-style: solid;
    border-left-width: 1px;
}

.rightBorderStyle {
    border-right-color: #d7dee8;
    border-right-style: solid;
    border-right-width: 1px;
}

.bottomBorderStyle {
    border-bottom-color: #d7dee8;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.hrStyle {
    border-top-color: #9EBCE7;
    border-top-style: solid;
    border-top-width: 1.5px;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.topBorderStyle {
    border-top-color: #d7dee8;
    border-top-style: solid;
    border-top-width: 1px;
}

.container-fluid {
    padding-right: 5px;
}

.dxeBase_MetropolisBlue {
    color: black !important;
}

.dxeEditArea_MetropolisBlue, body input.dxeEditArea_MetropolisBlue {
    color: black !important;
}

.contentMinHeight {
    min-height: auto;
}

.actionRow {
    padding-top: 11px;
    padding-right: 10px;
}

.gridCommandButtonStyle {
    background-color: #0072C6 !important;
    border: solid !important;
    height: 25px !important;
    width: auto !important;
    min-width: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    color: white !important;
    vertical-align: middle !important;
    padding-top: 6px !important;
    text-decoration: none !important;
}

.gridPreviewButtonStyle {
    background-color: transparent !important;
    border: none !important;
    height: 0px !important;
    width: 0px !important;
    color: transparent !important;
    vertical-align: middle !important;
    padding-top: 0px !important;
    text-decoration: none !important;
}

.dxgvStatusBar_MetropolisBlue .dxgvCommandColumn_MetropolisBlue a {
    margin-right: 0px !important;
}

.recordSubHeading {
    font-size: large;
    padding-bottom: 5px;
    color: black !important;
    font-weight: 600;
}

.boldLabel {
    font-weight: 700 !important;
}

.dxnbLite_MetropolisBlue .dxnb-large .dxnb-link {
    font-weight: bold;
}

.margin-left-17 {
    margin-left: 17px !important;
}

.dxEditors_edtTokenBoxTokenRemoveButton_MetropolisBlue {
    background-color: #ffbcbc;
}

.dxeToken_MetropolisBlue {
    background: white;
    color: black !important;
}

.dxnbLite_MetropolisBlue .dxnb-content {
    width: 100% !important;
    padding: 0px;
    margin: 0px;
}

.dxbDisabled_MetropolisBlue, a.dxbButton_MetropolisBlue.dxbDisabled_MetropolisBlue {
    background-color: transparent !important;
    width: 0px !important;
}

.contractLogo {
    max-width: 98px;
    max-height: 52px;
}

.clientLogo {
    max-width: 98px;
    max-height: 52px;
}

.companyLogo {
    max-width: 98px;
    max-height: 52px;
}

/* ==========================================================================
   Canonical Enterprise Design Tokens - KPI Dashboard System
   ========================================================================== */
.dtr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.875rem;
    width: 100%;
}

.dtr-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dtr-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.dtr-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dtr-kpi-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dtr-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}

.dtr-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.dtr-kpi-icon.primary { background: #EFF6FF; color: #2563EB; }
.dtr-kpi-icon.success { background: #ECFDF5; color: #059669; }
.dtr-kpi-icon.warning { background: #FFFBEB; color: #D97706; }
.dtr-kpi-icon.info    { background: #F0F9FF; color: #0284C7; }
.dtr-kpi-icon.indigo  { background: #EEF2FF; color: #4F46E5; }

.dtr-legend-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    flex-wrap: wrap;
}

.dtr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dtr-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.dtr-legend-dot.green  { background: #059669; }
.dtr-legend-dot.orange { background: #D97706; }
.dtr-legend-dot.red    { background: #DC2626; }

/* ==========================================================================
   Canonical Enterprise Design Tokens - Checklists & Review Forms
   ========================================================================== */
.dtr-context-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dtr-combo-wrapper {
    width: 250px;
    max-width: 250px;
}

.dtr-status-bar {
    padding: 10px 14px;
    background-color: #F1F5F9;
    border-top: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-signoff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.dtr-signoff-col {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 18px 20px;
}

.dtr-signoff-header {
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid #3B82F6;
    display: inline-block;
}

.dtr-form-group {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dtr-form-group:last-child {
    margin-bottom: 0;
}

.dtr-form-group-stacked {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.dtr-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dtr-details-col {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 18px 20px;
}

.dtr-section-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Canonical Enterprise Design Tokens - Modals, Popups & Dialogs
   ========================================================================== */
.dtr-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: #0F172A !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dtr-popup-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em;
}

.dtr-popup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtr-popup-container {
    padding: 16px 20px;
    background: #F8FAFC;
    box-sizing: border-box;
    max-height: calc(88vh - 75px);
    overflow-y: auto;
}

.dtr-section-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    overflow: hidden;
}

.dtr-section-card:last-child {
    margin-bottom: 0;
}

.dtr-section-card-full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dtr-section-card-header {
    padding: 10px 16px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0F2D4E;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtr-section-card-body {
    padding: 14px 16px;
}

.dtr-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dtr-form-row:last-child {
    margin-bottom: 0;
}

.dtr-form-col-half {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-form-col-label {
    flex: 0 0 130px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    text-align: right;
}

.dtr-form-col-editor {
    flex: 1;
    min-width: 0;
}

.dtr-selection-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1D4ED8;
}

.dtr-selection-count {
    background: #2563EB;
    color: #FFFFFF;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.dtr-selected-docs-strip {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.dtr-selected-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.dtr-selected-docs-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E293B;
}

.dtr-selected-docs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 110px;
    overflow-y: auto;
}

.dtr-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtr-doc-listbox-container {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    overflow: hidden;
    background: #FFFFFF;
    min-height: 280px !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

.dtr-fill-listbox,
.dtr-fill-listbox .dxeListBox_MetropolisBlue,
.dtr-fill-listbox .dxlbd {
    width: 100% !important;
    min-height: 280px !important;
}

.dtr-clear-link {
    font-size: 0.8rem;
    color: #2563EB;
    cursor: pointer;
    text-decoration: underline;
}

.dtr-no-docs-hint {
    padding: 16px;
    text-align: center;
    color: #94A3B8;
    font-size: 0.85rem;
}

.dtr-skip-email-row {
    padding: 8px 12px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    margin-top: 10px;
}

.dtr-print-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtr-print-icon-btn {
    color: #2563EB;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
}

/* ==========================================================================
   Canonical Enterprise Design Tokens - Email Delivery Details Modal
   ========================================================================== */
.dtr-email-popup-container {
    padding: 14px 18px !important;
    background: #F8FAFC !important;
    max-height: calc(88vh - 75px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.dtr-email-meta-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.dtr-email-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}

.dtr-email-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-email-item-label {
    flex: 0 0 95px;
    font-size: 0.85rem;
    font-weight: 650;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dtr-email-item-label i {
    color: #2563EB;
    font-size: 0.88rem;
    width: 14px;
    text-align: center;
}

.dtr-email-item-control {
    flex: 1;
    min-width: 0;
}

.dtr-email-divider {
    height: 1px;
    background: #EDF2F7;
    margin: 12px 0 10px 0;
}

.dtr-email-routing-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dtr-email-routing-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dtr-email-routing-label {
    flex: 0 0 95px;
    padding-top: 6px;
    font-size: 0.85rem;
    font-weight: 650;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dtr-email-routing-label i {
    color: #2563EB;
    font-size: 0.88rem;
    width: 14px;
    text-align: center;
}

.dtr-email-routing-editor {
    flex: 1;
    min-width: 0;
}

.dtr-email-subject-memo textarea {
    font-weight: 600 !important;
    color: #0F172A !important;
}

.dtr-email-error-row {
    margin-top: 10px;
    padding: 10px 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dtr-email-error-label {
    flex: 0 0 95px;
    padding-top: 4px;
}

.dtr-email-error-editor {
    flex: 1;
}

.dtr-email-error-memo {
    background-color: #FFFFFF !important;
    border-color: #FCA5A5 !important;
}

.dtr-email-body-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dtr-email-preview-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    display: inline-flex;
    align-items: center;
}

.dtr-email-preview-canvas {
    background: #FFFFFF;
    padding: 18px 22px;
    min-height: 250px;
    max-height: 380px;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1E293B;
}

.dtr-email-preview-canvas table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 12px 0 16px 0 !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 0.82rem !important;
    border-radius: 4px !important;
}

.dtr-email-preview-canvas table th {
    background: #F1F5F9 !important;
    color: #0F2D4E !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    border: 1px solid #CBD5E1 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.dtr-email-preview-canvas table td {
    padding: 6px 10px !important;
    border: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
    vertical-align: middle !important;
}

.dtr-email-preview-canvas table tr:nth-child(even) td {
    background-color: #F8FAFC !important;
}

.dtr-email-preview-canvas table tr:hover td {
    background-color: #F0F7FF !important;
}

.dtr-email-preview-canvas a {
    color: #2563EB !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.dtr-email-control.dxeDisabled_MetropolisBlue,
.dtr-email-control.dxeDisabled_MetropolisBlue input,
.dtr-email-control.dxeDisabled_MetropolisBlue textarea {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    font-size: 0.86rem !important;
}

.dtr-email-memo-box {
    width: 100%;
    margin-top: 4px;
}

.dtr-email-memo-label {
    font-size: 0.80rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
    display: block;
}

/* Responsive Rules for Enterprise Tokens */
@media (max-width: 992px) {
    .dtr-signoff-grid,
    .dtr-details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dtr-email-meta-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .dtr-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .dtr-form-col-label {
        text-align: left;
        flex: auto;
        margin-bottom: 2px;
    }

    .dtr-email-meta-item,
    .dtr-email-routing-row,
    .dtr-email-error-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .dtr-email-item-label,
    .dtr-email-routing-label,
    .dtr-email-error-label {
        flex: auto;
        padding-top: 0;
    }
}

/* ==========================================================================
   CANONICAL ENTERPRISE RECORD & WORKSPACE SYSTEM (DocTrac Standard Design)
   Centralized across ClientRecord, ProjectRecord, EnquiryRecord, and all forms.
   ========================================================================== */

/* 1. Base Workspace Grid (2-Column Responsive Layout) */
.dtr-workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 24px !important;
    align-items: start !important;
    margin-top: 16px !important;
}

.dtr-main-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.dtr-side-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 2. Section Cards */
.dtr-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 4px 6px -2px rgba(15, 23, 42, 0.03) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    overflow: visible !important;
    position: relative !important;
}

.dtr-card:hover,
.dtr-card:focus-within {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03) !important;
    border-color: #CBD5E1 !important;
}

.dtr-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 20px !important;
    background: #FAFAFA !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
}

.dtr-card-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #EFF6FF !important;
    border: 1px solid #DBEAFE !important;
    color: #2563EB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.dtr-card-header-titles {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.dtr-card-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.dtr-card-subtitle {
    font-size: 12px !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.dtr-card-body {
    padding: 20px 24px !important;
}

/* 3. Form Grids & Field Containers */
.dtr-form-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 24px !important;
}

.dtr-form-grid-1col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
}

.dtr-field-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.dtr-field-container-full {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.dtr-field-label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.dtr-field-label,
.dtr-field-label.dxeBase_MetropolisBlue,
.dtr-field-label span:not(.required-indicator) {
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    color: #0F172A !important;
    letter-spacing: 0.01em !important;
}

.dtr-field-label .required-indicator,
.dtr-field-label span.required-indicator {
    color: #EF4444 !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
    font-size: 0.92rem !important;
    display: inline !important;
}

.dtr-field-hint {
    font-size: 11.5px !important;
    color: #64748B !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 2px !important;
}

/* 4. Input Groups & Lead Icons */
.dtr-input-group {
    position: relative !important;
    width: 100% !important;
}

.dtr-input-lead-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* 5. Modern DevExpress Form & Toolbar Editors (Enabled, Disabled, and ReadOnly) */
.dtr-card table.dxeTextBoxSys,
.dtr-card table.dxeButtonEditSys,
.dtr-card table.dxeMemoSys,
.dtr-form-grid table.dxeTextBoxSys,
.dtr-form-grid table.dxeButtonEditSys,
.dtr-form-grid table.dxeMemoSys,
.dtr-form-card table.dxeTextBoxSys,
.dtr-form-card table.dxeButtonEditSys,
.dtr-form-card table.dxeMemoSys,
.dtr-input-group table.dxeTextBoxSys,
.dtr-input-group table.dxeButtonEditSys,
.dtr-input-group table.dxeMemoSys,
.dtr-sidebar-card table.dxeTextBoxSys,
.dtr-sidebar-card table.dxeButtonEditSys,
.dtr-sidebar-card table.dxeMemoSys,
.dtr-search-wrapper table.dxeButtonEditSys,
.dtr-search-wrapper table.dxeTextBoxSys,
.dtr-filter-group table.dxeButtonEditSys,
.dtr-filter-group table.dxeTextBoxSys,
.dtr-filter-group table.dxeComboBoxSys,
.dtr-workspace-grid table.dxeTextBoxSys,
.dtr-workspace-grid table.dxeButtonEditSys,
.dtr-workspace-grid table.dxeMemoSys {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
}

.dtr-card table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-card table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-form-grid table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-form-grid table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-form-card table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-form-card table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-input-group table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-input-group table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-sidebar-card table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-sidebar-card table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-search-wrapper table.dxeButtonEditSys,
.dtr-search-wrapper table.dxeTextBoxSys,
.dtr-filter-group table.dxeButtonEditSys,
.dtr-filter-group table.dxeTextBoxSys,
.dtr-filter-group table.dxeComboBoxSys,
.dtr-workspace-grid table.dxeTextBoxSys:not(.dxeMemoSys):not([class*="Memo"]),
.dtr-workspace-grid table.dxeButtonEditSys:not(.dxeMemoSys):not([class*="Memo"]) {
    height: 36px !important;
    min-height: 36px !important;
}

.dtr-card table.dxeTextBoxSys td.dxic,
.dtr-card table.dxeButtonEditSys td.dxic,
.dtr-form-grid table.dxeTextBoxSys td.dxic,
.dtr-form-grid table.dxeButtonEditSys td.dxic,
.dtr-form-card table.dxeTextBoxSys td.dxic,
.dtr-form-card table.dxeButtonEditSys td.dxic,
.dtr-input-group table.dxeTextBoxSys td.dxic,
.dtr-input-group table.dxeButtonEditSys td.dxic,
.dtr-sidebar-card table.dxeTextBoxSys td.dxic,
.dtr-sidebar-card table.dxeButtonEditSys td.dxic,
.dtr-search-wrapper table.dxeButtonEditSys td.dxic,
.dtr-search-wrapper table.dxeTextBoxSys td.dxic,
.dtr-filter-group table.dxeButtonEditSys td.dxic,
.dtr-filter-group table.dxeTextBoxSys td.dxic,
.dtr-filter-group table.dxeComboBoxSys td.dxic,
.dtr-workspace-grid table.dxeTextBoxSys td.dxic,
.dtr-workspace-grid table.dxeButtonEditSys td.dxic {
    padding: 0 10px !important;
    vertical-align: middle !important;
}

.dtr-card table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-card table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-form-grid table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-form-grid table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-form-card table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-form-card table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-input-group table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-input-group table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-sidebar-card table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-sidebar-card table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-search-wrapper table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-search-wrapper table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-filter-group table.dxeButtonEditSys input.dxeEditAreaSys,
.dtr-filter-group table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-filter-group table.dxeComboBoxSys input.dxeEditAreaSys,
.dtr-workspace-grid table.dxeTextBoxSys input.dxeEditAreaSys,
.dtr-workspace-grid table.dxeButtonEditSys input.dxeEditAreaSys {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 13.5px !important;
    color: #0F172A !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.dtr-card table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-card table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-form-grid table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-form-grid table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-input-group table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-input-group table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):hover,
.dtr-search-wrapper table.dxeButtonEditSys:hover,
.dtr-filter-group table.dxeComboBoxSys:hover,
.dtr-workspace-grid table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):hover {
    border-color: #94A3B8 !important;
}

.dtr-card table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-card table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-form-grid table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-form-grid table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-input-group table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-input-group table.dxeButtonEditSys:not(.dxeDisabled_MetropolisBlue):focus-within,
.dtr-search-wrapper table.dxeButtonEditSys:focus-within,
.dtr-filter-group table.dxeComboBoxSys:focus-within,
.dtr-workspace-grid table.dxeTextBoxSys:not(.dxeDisabled_MetropolisBlue):focus-within {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Disabled & ReadOnly DevExpress Editor Styling */
table.dxeTextBoxSys.dxeDisabled_MetropolisBlue,
table.dxeButtonEditSys.dxeDisabled_MetropolisBlue,
table.dxeMemoSys.dxeDisabled_MetropolisBlue,
table.dxeTextBoxSys.dxeReadOnly_MetropolisBlue,
table.dxeButtonEditSys.dxeReadOnly_MetropolisBlue,
table.dxeMemoSys.dxeReadOnly_MetropolisBlue,
table.dxeTextBox_MetropolisBlue.dxeDisabled_MetropolisBlue,
table.dxeButtonEdit_MetropolisBlue.dxeDisabled_MetropolisBlue,
table.dxeMemo_MetropolisBlue.dxeDisabled_MetropolisBlue,
table.dxeDisabled_MetropolisBlue {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    cursor: default !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.dxeDisabled_MetropolisBlue input,
.dxeDisabled_MetropolisBlue textarea,
.dxeReadOnly_MetropolisBlue input,
.dxeReadOnly_MetropolisBlue textarea,
input.dxeDisabled_MetropolisBlue,
textarea.dxeDisabled_MetropolisBlue,
td.dxic input,
.dxeDisabled_MetropolisBlue .dxeEditAreaSys,
.dxeDisabled_MetropolisBlue .dxeEditArea_MetropolisBlue,
.dxeDisabled_MetropolisBlue textarea.dxeMemoEditAreaSys {
    color: #1E293B !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* Input Padding with Lead Icon */
.dtr-input-group .dtr-input-lead-icon ~ table td.dxic,
.dtr-input-group .dtr-input-lead-icon ~ table input,
.dtr-input-group.dtr-has-icon table td.dxic,
.dtr-input-group:has(.dtr-input-lead-icon) td.dxic,
.dtr-input-group:has(.dtr-input-lead-icon) input {
    padding-left: 36px !important;
}

/* Memo Box */
table.dxeMemoSys td.dxic,
table.dxeMemo_MetropolisBlue td.dxic {
    padding: 8px 12px !important;
}

table.dxeMemoSys textarea,
table.dxeMemo_MetropolisBlue textarea {
    font-size: 13.5px !important;
    color: #0F172A !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    resize: vertical !important;
}

/* 6. Sidebar Widgets (Connected Workspaces, Shortcuts, Dossier) */
.dtr-sidebar-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 4px 6px -2px rgba(15, 23, 42, 0.03) !important;
    overflow: visible !important;
    position: relative !important;
    transition: box-shadow 0.2s ease !important;
}

.dtr-sidebar-card:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03) !important;
}

.dtr-sidebar-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.dtr-sidebar-body {
    padding: 18px 20px !important;
}

.dtr-quick-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.dtr-quick-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.dtr-quick-nav-item:hover {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #2563EB !important;
    text-decoration: none !important;
    transform: translateX(2px) !important;
}

.dtr-quick-nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dtr-quick-nav-icon {
    color: #64748B !important;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
}

.dtr-quick-nav-item:hover .dtr-quick-nav-icon {
    color: #2563EB !important;
}

.dtr-shortcuts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.dtr-shortcut-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12.5px !important;
    color: #64748B !important;
}

.dtr-kbd {
    display: inline-block !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background-color: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

.dtr-bottom-actions-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 8px 0 4px 0 !important;
    margin-top: 4px !important;
}

/* Responsive Breakpoints for Record Forms */
@media (max-width: 1080px) {
    .dtr-workspace-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .dtr-side-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .dtr-form-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .dtr-card-body {
        padding: 16px !important;
    }

    .dtr-side-col {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   POPUP MODAL HEADER - ZERO DARK BACKGROUND SYSTEM (Clean White Modern Design)
   ========================================================================== */
.dxpcLite_MetropolisBlue td.dxpc-header,
.dxpcLite td.dxpc-header,
.dxpc-headerContent,
.dtr-popup-header-ctrl,
.dtr-popup-header-ctrl td.dxpc-header,
[id*="Popup"] td.dxpc-header,
[id*="popup"] td.dxpc-header,
tr[id*="PWH"] td {
    background: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 8px 14px !important;
}

.dxpc-headerContent .dtr-popup-title,
.dxpc-header td span,
.dxpc-headerContent span {
    color: #0F172A !important;
}

/* ==========================================================================
   MASTER DOCUMENT REGISTER - HEADER & MAX-WIDTH SEARCH BOX TOOLBAR
   ========================================================================== */
.dtr-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.dtr-title-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.dtr-toolbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

.dtr-search-wrapper {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 260px !important;
    display: flex !important;
    align-items: center !important;
}

.dtr-search-wrapper .dxeButtonEditSys,
.dtr-search-wrapper table.dxeButtonEdit_MetropolisBlue,
.dtr-search-wrapper .dxeButtonEdit {
    width: 100% !important;
}

.dtr-action-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   SELECTED DOCUMENTS LISTING - MDR PAGE (Clean Blue Multi-Line)
   ========================================================================== */
.dtr-page-container > #selectedDocsRibbon,
#selectedDocsRibbon {
    width: 100% !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
}

#SelectedDocumentLabel,
.dtr-page-container #selectedDocsRibbon .dxeBase_MetropolisBlue,
.dtr-page-container #selectedDocsRibbon span,
.dtr-page-container #selectedDocsRibbon .enableMultiLine {
    color: #0000FF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* ==========================================================================
   MODAL POPUP SELECTED DOCUMENTS STRIP & CHIPS (Transmittal List & Modals)
   ========================================================================== */
.dtr-popup-container .dtr-selected-docs-strip {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dtr-popup-container .dtr-selected-docs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 4px !important;
}

.dtr-popup-container .dtr-selected-docs-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dtr-popup-container .dtr-selected-docs-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: 75px !important;
    overflow-y: auto !important;
    padding: 2px 0 !important;
    align-items: center !important;
}

.dtr-popup-container .dtr-doc-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    max-width: 320px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    line-height: 1.3 !important;
}

.dtr-popup-container .dtr-doc-chip i {
    color: #2563EB !important;
    font-size: 0.85rem !important;
}

/* Danger Button Universal Modern Red Style */
.dtr-btn-danger,
.dxb-secondary.dtr-btn-danger,
.dxbButton.dtr-btn-danger,
.dxbButton_MetropolisBlue.dtr-btn-danger,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-danger,
[id*="DeleteBatchButton"],
[id*="RejectButton"],
.dtr-popup-actions .dtr-btn-danger {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 50%, #EF4444 100%) !important;
    background-color: #DC2626 !important;
    border-color: #B91C1C !important;
    color: #FFFFFF !important;
}

.dtr-btn-danger:hover,
.dxb-secondary.dtr-btn-danger:hover,
.dxbButton.dtr-btn-danger:hover,
.dxbButton_MetropolisBlue.dtr-btn-danger:hover,
.dxbButton_MetropolisBlue.dxb-secondary.dtr-btn-danger:hover,
[id*="DeleteBatchButton"]:hover,
[id*="RejectButton"]:hover,
.dtr-popup-actions .dtr-btn-danger:hover {
    background: linear-gradient(135deg, #991B1B 0%, #B91C1C 50%, #DC2626 100%) !important;
    background-color: #B91C1C !important;
    border-color: #991B1B !important;
    color: #FFFFFF !important;
}