body, input, select, table, tr, td, button {
    font-size: 12px !important;
}

/**
   * Following CSS code is a part of TRM redesign effort.
   * This CSS is added by Apoorva Shukla.
**/
.header-container {
    display: flex;
    background-color: #212222;
    height: 54px;
    padding: 0 24px 0 0;
    border-bottom: 2px solid #FF0061;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-right: 24px;
}
.environment-details {
    display: grid;
    color: #fff;
    font-size: 23px;
    margin-right: 1rem;
}

.environment-details .environment-item {
    margin: 0;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    background-color: #8C2341;
}

.environment-details .environment-item.uat {
    background-color: #8C2341;
}

.environment-details .environment-item.prod {
    background-color: #FF9800;
}

.environment-details .environment-item.qa,
.environment-details .environment-item.dev {
    background-color: #0192D6;
}

.tabs-container {
    display: flex;
    flex: 1;
}

.top-tab-item {
    display: flex;
}

.top-tab-item-active {
    cursor: pointer;
    color: #FFFFFF;
    font-family: verdana,arial, sans-serif;
    font-weight: 600;
    border-style: none;
    width: 4.5rem;
    background: #FF0061;
    padding: 0 12px;
    font-size: 14px !important;
}

.top-tab-item-inactive {
    cursor: pointer;
    color: #FFFFFF;
    font-family: verdana,arial, sans-serif;
    font-weight: 600;
    border-style: none;
    width: 4.5rem;
    background-color: transparent;
    padding: 0 12px;
    font-size: 14px !important;
}
.links-container {
    display: flex;
    border-left: 1px solid #464646;
}
.link-item {
    display: flex;
    align-items: center;
    margin: 0 0.75rem;
}
.link-item:last-child {
    margin-right: 0;
}
.link-item a {
    color: #fff;
    text-decoration: none;
}
.user-info-section {
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-left: 1px solid #464646;
    font-size: 13px;
    font-weight: 700;
}

.unleash-nextgen-font{
    font-size: 13px;
    font-weight: 700;
}

.updatedMainMenu {
    display: flex;
    padding: 0.5rem 1.5rem;
    justify-content: space-between;
    border-bottom: 1px solid #CCCCCC;
    background-color: #fff;
}

.actionMenuSection {
    display: flex;
}

.mainMenuSection .ThemeIEMenu {
    background: transparent;
}

.mainMenuSection .ThemeIEMainItem,
.mainMenuSection .ThemeIEMainItemHover,
.mainMenuSection .ThemeIEMainItemActive {
    font-weight: 700;
    background: transparent;
    cursor: pointer;
    padding-right: 10px;
}

.mainMenuSection .ThemeIEMainItemHover,
.mainMenuSection .ThemeIEMainItemActive,
.mainMenuSection .ThemeIEMenuItemHover,
.mainMenuSection .ThemeIEMenuItemActive {
    background: transparent;
    color: #FF0061;
    cursor: pointer;
}

.actionsMenuSection {
    display: flex;
    padding: 0 1rem;
}

.actionsMenuSection .actionItem {
    padding: 0.5rem 0;
}

.actionsMenuSection .actionItem {
    border-right: 1px solid #CCCCCC;
    padding-right: 1rem;
}

.actionsMenuSection .actionItem:not(:first-child) {
    padding-left: 1rem;
}

.actionsMenuSection .actionItem:last-child {
    border-right: 0;
}

.actionsMenuSection .ToolbarButtonDefaultPopupOver:hover {
    color: #FF0061;
}




.osttra-modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /*transform: scale(1.5);*/
    /*transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;*/
}

.osttra-modal-container.show-modal {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    /*transform: scale(1);*/
}

.osttra-modal {
    width: 90%;
    max-width: 900px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.osttra-modal-header,
.osttra-modal-content{
    padding: 1.5rem;
}

.osttra-modal-header p,
.osttra-modal-content p {
    margin: 0;
    font-size: 13px;
}

.osttra-modal-header .warning,
.osttra-modal-content .warning {
    max-width: 503px;
    margin-top: 36px;
}

.modal-info {
    display: flex;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ececec;
}

.license-details {
    flex: 1;
}

.customer-support {
    flex: 0 0 211px;
}

.customer-support .title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.customer-support .support-list {
    padding: 0;
    margin: 0;
}

.support-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.support-list li:nth-child(3) {
    margin-bottom: 1rem;
}

.support-list li a {
    color: #006491;
    font-size: 13px;
    text-decoration: none;
}

.support-list li a.higlighted-text {
    text-decoration: underline;
}

.osttra-modal-footer {
    margin-top: 1rem;
}

.osttra-modal-footer .privacy-policy a {
    color: #0192d6;
}

.osttra-modal-footer p {
    color: #a0a0a0;
    max-width: 97%;
}

.osttra-modal-footer p:first-child {
    margin-bottom: 1rem;
}

.osttra-modal-close {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.osttra-modal-header {
    text-align: center;
    position: relative;
    background: #f3f3f3;
}

.osttra-modal-title {
    font-size: 13px;
    max-width: 663px;
    margin: 0 auto;
}

.posttrade-pioneers {
    margin-bottom: 2rem;
}

.flag-icon-wrapper {
    display: flex;
    gap: 0.5rem;
    font-weight: 700;
}

#user-info {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background: #00AFAF;
    font-weight: 400;
    cursor: pointer;
    color: #fff;
    border: 0;
    padding: 0.25rem;
    border-radius: 3px;
    width: 15px;
    color: #fff !important;
}
.ui-paginator .ui-paginator-page.ui-state-active:hover {
    background-color: #008C8C;
    border: 0;
}

.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-page:hover {
    background: #fff;
    text-shadow: none;
    box-shadow: none;
    border: 1px solid #a8a8a8;
}

.ui-paginator .ui-paginator-prev, .ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-last {
    background: #FFFFFF;
}

.ui-paginator .ui-paginator-prev:hover, .ui-paginator .ui-paginator-next:hover,
.ui-paginator .ui-paginator-first:hover, .ui-paginator .ui-paginator-last:hover {
    text-shadow: none;
    box-shadow: none;
}

.ThemeIESubMenuTable .ThemeIEMenuItem .ThemeIEMenuItemText,
.ThemeIESubMenuTable .ThemeIEMenuItem .ThemeIEMenuFolderText,
.ThemeIESubMenuTable .ThemeIEMenuItemHover .ThemeIEMenuItemText,
.ThemeIESubMenuTable .ThemeIEMenuItemHover .ThemeIEMenuFolderText,
.ThemeIESubMenuTable .ThemeIEMenuItemActive .ThemeIEMenuItemText,
.ThemeIESubMenuTable .ThemeIEMenuItemActive .ThemeIEMenuFolderText{
    padding: 0.5rem 0.75rem;
}

.ThemeIESubMenuTable .ThemeIEMenuItem .ThemeIEMenuFolderRight {
    padding-right: 0.75rem;
}

.terminateSection {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}


/* =========================================================
   PRIMEFACES 14: TRM Redesign Menubar Fix
   Translates legacy ThemeIEMenu styles to modern p:menubar
   ========================================================= */

/* 1. Kill the thick black border and make the background transparent */
.mainMenuSection .ui-menubar {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 2. Force the menu items to stay on a single line (fixes the "Search" wrap) */
.mainMenuSection .ui-menubar > ul.ui-menu-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Style the top-level menu links to match the old font and spacing */
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link {
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0.5rem 0.75rem !important;
    color: #000000 !important;
    border-radius: 0 !important;
}

/* 4. Restore the Pink (#FF0061) Hover/Active state (Overrides the blue from classes.css) */
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link:hover,
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link.ui-state-hover,
.mainMenuSection .ui-menubar > ul > .ui-menuitem.ui-state-active > .ui-menuitem-link,
.mainMenuSection .ui-menu .ui-menu-list .ui-menuitem-link:hover,
.mainMenuSection .ui-menu .ui-menu-list .ui-menuitem-link.ui-state-hover {
    background: transparent !important;
    color: #FF0061 !important;
}

/* Force the text inside the link to turn pink */
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link:hover .ui-menuitem-text,
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link.ui-state-hover .ui-menuitem-text,
.mainMenuSection .ui-menubar > ul > .ui-menuitem.ui-state-active > .ui-menuitem-link .ui-menuitem-text,
.mainMenuSection .ui-menu .ui-menu-list .ui-menuitem-link:hover .ui-menuitem-text,
.mainMenuSection .ui-menu .ui-menu-list .ui-menuitem-link.ui-state-hover .ui-menuitem-text {
    color: #FF0061 !important;
}


/* =========================================================
   PRIMEFACES 14: Crush Menubar Padding & Height
   Restores tight legacy spacing between Main Menu and Sub Menu
   ========================================================= */

/* 1. Strip away PrimeFaces default margins and minimum heights */
.mainMenuSection .ui-menubar {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* 2. Remove any bottom margin from the list itself so it sits flush with the line */
.mainMenuSection .ui-menubar > ul.ui-menu-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Drastically reduce the vertical padding on the menu links */
/* (Changed from 0.5rem down to 2px to make the bar extremely slim) */
.mainMenuSection .ui-menubar > ul > .ui-menuitem > .ui-menuitem-link {
    padding: 2px 12px !important;
    line-height: normal !important;
}

/* 4. Tighten the overall white container to pull the sub-menu up */
.updatedMainMenu {
    padding-top: 6px !important;     /* Shrinks the space above the text */
    padding-bottom: 6px !important;  /* Shrinks the space below the text */
}

/* =========================================================
   PRIMEFACES 14: Restore Legacy Thin Menu Separator
   ========================================================= */
body .ui-menu li.ui-divider {
    /* Exact legacy dimensions and spacing */
    height: 1px !important;
    min-height: 1px !important;
    margin: 1px 0 !important;
    overflow: hidden !important;
    background-color: inherit !important;

    /* Exact legacy border color */
    border-top: 1px solid #ADAA9C !important;

    /* Kill any extra PrimeFaces widget borders */
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.ui-divider.ui-divider-solid.ui-divider-horizontal:before {
    border-top-style: none;
}

/* 1. Remove the border/outline from the menu item links */
.ui-menu .ui-menuitem-link {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Specifically target the hover and focus states */
.ui-menu .ui-menuitem-link.ui-state-hover,
.ui-menu .ui-menuitem-link.ui-state-focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. If you are using a specific theme that adds a 'box' effect */
.ui-menuitem-link:focus {
    outline: 0 !important;
}

/* =========================================================
   PRIMEFACES 14: Restore Legacy Dialog Background Shade
   Maps the old .rf-pp-shade to the new .ui-widget-overlay
   ========================================================= */
body .ui-widget-overlay {
    background-color: rgb(208, 208, 208) !important;
    opacity: 0.5 !important;
}



/* =========================================================
   PRIMEFACES 14: Restore p:spinner Up/Down Arrows
   ========================================================= */

/* 1. Style the spinner buttons to match your legacy look */
body .ui-spinner .ui-spinner-button {
    background-color: #e6e6e6 !important;
    border-left: 1px solid #cccccc !important;
    z-index: 1 !important;
}

/* 2. Draw the UP arrow using pure CSS borders */
body .ui-spinner .ui-spinner-up .ui-icon {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 5px solid #616161 !important;
    background: transparent !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -2px !important;
    margin-left: -4px !important;
    text-indent: -99999px !important; /* Hides broken text/fonts */
}

/* 3. Draw the DOWN arrow using pure CSS borders */
body .ui-spinner .ui-spinner-down .ui-icon {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #616161 !important;
    border-bottom: none !important;
    background: transparent !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -2px !important;
    margin-left: -4px !important;
    text-indent: -99999px !important; /* Hides broken text/fonts */
}

/* 4. Add a hover state color (Legacy Blue) */
body .ui-spinner .ui-spinner-up:hover .ui-icon {
    border-bottom-color: #38667f !important;
}
body .ui-spinner .ui-spinner-down:hover .ui-icon {
    border-top-color: #38667f !important;
}

/* 5. Clean up the input field */
body .ui-spinner .ui-spinner-input {
    padding-right: 20px !important; /* Prevents text from hiding behind buttons */
    border-radius: 0 !important;
}



/* =========================================================
   PRIMEFACES 14: Restore Legacy Paginator Styling
   ========================================================= */

/* 1. Base style for ALL paginator buttons (numbers and arrows) */
body .ui-paginator .ui-paginator-page,
body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #003366 !important; /* Legacy dark blue text */
    border-radius: 3px !important;
    margin: 0 2px !important;
    padding: 0 6px !important;
    height: 24px !important;
    line-height: 22px !important;
    min-width: 24px !important;
    font-weight: bold !important;
    vertical-align: middle !important;
}

/* 2. Restore the Active/Selected Page Number (Teal) */
body .ui-paginator .ui-paginator-page.ui-state-active {
    background-color: #00AFAF !important;
    border-color: #00AFAF !important;
    color: #ffffff !important;
}

/* 3. Restore Hover state for unselected buttons */
body .ui-paginator .ui-paginator-page:not(.ui-state-active):hover,
body .ui-paginator .ui-paginator-first:not(.ui-state-disabled):hover,
body .ui-paginator .ui-paginator-prev:not(.ui-state-disabled):hover,
body .ui-paginator .ui-paginator-next:not(.ui-state-disabled):hover,
body .ui-paginator .ui-paginator-last:not(.ui-state-disabled):hover {
    background-color: #e6e6e6 !important;
    border-color: #aaaaaa !important;
}

/* 4. Mute disabled arrows so it's obvious they can't be clicked */
body .ui-paginator .ui-state-disabled {
    opacity: 0.5 !important;
    cursor: default !important;
    background-color: #f4f4f4 !important;
}

/* 5. Fix the missing font icons using the font-size zero trick */
body .ui-paginator .ui-icon {
    display: inline-block !important;
    text-indent: 0 !important;
    background: none !important;
    font-size: 0 !important; /* HIDES the PrimeFaces "F", "P", "N", "E" text */
    color: transparent !important; /* Extra safety to make native text invisible */
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
}

/* 6. Draw the specific Unicode arrows and restore their visible size/color */
body .ui-paginator .ui-paginator-first .ui-icon::before,
body .ui-paginator .ui-paginator-prev .ui-icon::before,
body .ui-paginator .ui-paginator-next .ui-icon::before,
body .ui-paginator .ui-paginator-last .ui-icon::before {
    font-size: 11px !important; /* Restores the size ONLY for the arrows */
    color: #38667f !important;  /* Legacy arrow blue color */
    font-family: sans-serif !important;
}

body .ui-paginator .ui-paginator-first .ui-icon::before { content: "|\25C0" !important; } /* |◀ */
body .ui-paginator .ui-paginator-prev .ui-icon::before  { content: "\25C0\25C0" !important; } /* ◀◀ */
body .ui-paginator .ui-paginator-next .ui-icon::before  { content: "\25B6\25B6" !important; } /* ▶▶ */
body .ui-paginator .ui-paginator-last .ui-icon::before  { content: "\25B6|" !important; } /* ▶| */

/* =========================================================
   PRIMEFACES 14: Restore Legacy "Add" Button Icon
   ========================================================= */

/* 1. Force the image onto the button, don't let it repeat, and anchor it to the left */
body .ui-button.addButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_add.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: 5px center !important; /* 5px from the left edge */
}

/* 2. Push the text to the right so it makes room for the icon */
body .ui-button.addButton .ui-button-text {
    padding-left: 26px !important; /* Adjust this if the icon is wider/narrower */
}

/* =========================================================
   PRIMEFACES 14: Restore Internal/External Email Icons
   ========================================================= */

/* --- Internal Email Button (Both States) --- */
body .ui-button.internalEmailButton,
body .ui-button.internalEmailButtonDisabled {
    background: transparent url("/archcommon/jakarta.faces.resource/images/icon_internal_email.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") no-repeat 5px center !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* --- External Email Button (Both States) --- */
body .ui-button.externalEmailButton,
body .ui-button.externalEmailButtonDisabled {
    background: transparent url("/archcommon/jakarta.faces.resource/images/icon_external_email.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") no-repeat 5px center !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* --- Color Styling: ENABLED State --- */
body .ui-button.internalEmailButton,
body .ui-button.externalEmailButton {
    opacity: 1 !important;
}

/* --- Color Styling: DISABLED State --- */
body .ui-button.internalEmailButtonDisabled,
body .ui-button.externalEmailButtonDisabled {
    color: #b3b3b3 !important; /* Light Grey Text */
    opacity: 0.5 !important; /* Fades the icon so it looks disabled */
}

/* --- Keep clean on hover --- */
body .ui-button.internalEmailButton:hover,
body .ui-button.externalEmailButton:hover {
    background-color: transparent !important;
    border: none !important;
    text-decoration: underline !important;
}

/* =========================================================
   PRIMEFACES 14: Restore Save and Cancel Button Icons
   ========================================================= */

/* --- Cancel Button --- */
body .ui-button.cancelButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_cancel.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: 5px center !important; /* Locks icon to the left edge */
}
body .ui-button.cancelButton .ui-button-text {
    padding-left: 26px !important; /* Pushes text to the right */
}

/* =========================================================
   PRIMEFACES 14: Restore Test Connectivity & Approve Icons
   ========================================================= */

/* --- Test Connectivity Button --- */
body .ui-button.testConnectivityButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/test_connectivity.ico.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: 5px center !important; /* Locks icon to the left edge */
}
body .ui-button.testConnectivityButton .ui-button-text {
    padding-left: 26px !important; /* Pushes text to the right */
}

/* --- Approve NOE Button --- */
body .ui-button.approveNoeButtonEnabled {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_approve.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: 5px center !important; /* Locks icon to the left edge */
}
body .ui-button.approveNoeButtonEnabled .ui-button-text {
    padding-left: 26px !important; /* Pushes text to the right */
}

/* =========================================================
   PRIMEFACES 14: Master Fix for All Icon Buttons
   ========================================================= */

/* 1. APPLY COMMON SPACING: Push the text to the right for ALL these buttons */
body .ui-button.deleteButton .ui-button-text,
body .ui-button.deleteButtonBlock .ui-button-text,
body .ui-button.editButton .ui-button-text,
body .ui-button.resetButton .ui-button-text,
body .ui-button.resendButton .ui-button-text,
body .ui-button.replayButton .ui-button-text,
body .ui-button.cloneButton .ui-button-text,
body .ui-button.allocateButton .ui-button-text,
body .ui-button.refreshButton .ui-button-text,
body .ui-button.fieldSelection .ui-button-text,
body .ui-button.excelButton .ui-button-text,
body .ui-button.printButton .ui-button-text,
body .ui-button.sortButton .ui-button-text,
body .ui-button.allocationButton .ui-button-text,
body .ui-button.approveButton .ui-button-text,
body .ui-button.bookTradeButton .ui-button-text,
body .ui-button.holdButton .ui-button-text,
body .ui-button.matchingButton .ui-button-text,
body .ui-button.mutiplematchButton .ui-button-text,
body .ui-button.linkButton .ui-button-text {
    padding-left: 26px !important;
}

/* 2. APPLY COMMON ANCHORING: Lock the icons to the left edge without repeating */
body .ui-button.deleteButton,
body .ui-button.deleteButtonBlock,
body .ui-button.editButton,
body .ui-button.resetButton,
body .ui-button.resendButton,
body .ui-button.replayButton,
body .ui-button.cloneButton,
body .ui-button.allocateButton,
body .ui-button.refreshButton,
body .ui-button.fieldSelection,
body .ui-button.excelButton,
body .ui-button.printButton,
body .ui-button.sortButton,
body .ui-button.allocationButton,
body .ui-button.approveButton,
body .ui-button.bookTradeButton,
body .ui-button.holdButton,
body .ui-button.matchingButton,
body .ui-button.mutiplematchButton,
body .ui-button.linkButton {
    background-repeat: no-repeat !important;
    background-position: 5px center !important;
}

/* 3. ASSIGN THE SPECIFIC IMAGES (safely avoiding the 'background' shorthand trap) */
body .ui-button.resendButton       { background-image: url("/archcommon/jakarta.faces.resource/images/refresh.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.replayButton       { background-image: url("/archcommon/jakarta.faces.resource/images/replay.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.cloneButton        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_clone.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.allocateButton     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_allocate.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.fieldSelection     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_field_selection.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.excelButton        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_excel.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.printButton        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_print.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.allocationButton   { background-image: url("/archcommon/jakarta.faces.resource/images/icon_allocate.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.approveButton      { background-image: url("/archcommon/jakarta.faces.resource/images/icon_approved_rebranded.svg.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.bookTradeButton    { background-image: url("/archcommon/jakarta.faces.resource/images/book.png.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.holdButton         { background-image: url("/archcommon/jakarta.faces.resource/images/icon_hold.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.matchingButton     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_match.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.mutiplematchButton { background-image: url("/archcommon/jakarta.faces.resource/images/icon_mutiplematch.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }

/* 3b. RESTORE IMAGES IN DISABLED STATE (To override global ui-state-disabled stripping background-image) */
body .ui-button.addButton.ui-state-disabled          { background-image: url("/archcommon/jakarta.faces.resource/images/icon_add.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.resendButton.ui-state-disabled       { background-image: url("/archcommon/jakarta.faces.resource/images/refresh.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.replayButton.ui-state-disabled       { background-image: url("/archcommon/jakarta.faces.resource/images/replay.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.cloneButton.ui-state-disabled        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_clone.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.allocateButton.ui-state-disabled     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_allocate.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.fieldSelection.ui-state-disabled     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_field_selection.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.excelButton.ui-state-disabled        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_excel.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.printButton.ui-state-disabled        { background-image: url("/archcommon/jakarta.faces.resource/images/icon_print.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.allocationButton.ui-state-disabled   { background-image: url("/archcommon/jakarta.faces.resource/images/icon_allocate.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.approveButton.ui-state-disabled      { background-image: url("/archcommon/jakarta.faces.resource/images/icon_approved_rebranded.svg.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.bookTradeButton.ui-state-disabled    { background-image: url("/archcommon/jakarta.faces.resource/images/book.png.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.holdButton.ui-state-disabled         { background-image: url("/archcommon/jakarta.faces.resource/images/icon_hold.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.matchingButton.ui-state-disabled     { background-image: url("/archcommon/jakarta.faces.resource/images/icon_match.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.mutiplematchButton.ui-state-disabled { background-image: url("/archcommon/jakarta.faces.resource/images/icon_mutiplematch.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.refreshButton.ui-state-disabled      { background-image: url("/archcommon/jakarta.faces.resource/images/icon_refresh.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }
body .ui-button.linkButton.ui-state-disabled         { background-image: url("/archcommon/jakarta.faces.resource/images/icon_link.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important; }

/* 4. CUSTOM TWEAKS: For buttons that needed special positioning or widths in legacy */
body .ui-button.refreshButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_refresh.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-position: 5px 2px !important;
}
body .ui-button.linkButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_link.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-position: 5px 2px !important;
}
body .ui-button.sortButton {
    background-image: url("/archcommon/jakarta.faces.resource/images/icon_sort.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    width: 3% !important;
}

/* =========================================================
   NON-BUTTON ICONS (Panels, Toggles, Trees)
   ========================================================= */
/* Keeping these safe from shorthand destruction as well */
.trCommandFoldIcon {
    width: 11px;
    height: 11px;
    cursor: pointer;
}
.panelCollapse {
    background-image: url("/archcommon/jakarta.faces.resource/images/panel_collapse.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
}
.panelExpand {
    background-image: url("/archcommon/jakarta.faces.resource/images/panel_expand.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
}

/* =========================================================
   PRIMEFACES 14: Strip Button Themes (Flat, No Background)
   ========================================================= */

/* 1. Remove all PrimeFaces backgrounds, borders, and shadows */
body .ui-button.toolbarButton,
body .ui-button.internalEmailButton,
body .ui-button.externalEmailButton,
body .ui-button.resendButton,
body .ui-button.editButton,
body .ui-button.deleteButton,
body .ui-button.addButton {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important; /* Keeps your text dark and readable */
}

/* =========================================================
   PRIMEFACES 14: Restore Report Navigation Bar (Scroller)
   ========================================================= */

/* ---------------------------------------------------------
   1. Fix the Navigation Arrow Buttons
   --------------------------------------------------------- */
/* Restore the 3D button look with gradients and borders */
body .ui-button.Nav_scrlbutton {
    background-color: #f4f4f4 !important;
    background-image: linear-gradient(to bottom, #ffffff, #e0e0e0) !important;
    border: 1px solid #cccccc !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 24px !important;
    height: 22px !important;
    min-width: 24px !important; /* Overrides PF defaults */
    margin: 0 2px !important;
    vertical-align: middle !important;
}

body .ui-button.Nav_scrlbutton.ui-state-hover:not(.ui-state-disabled) {
    background-image: linear-gradient(to bottom, #ffffff, #d0d0d0) !important;
    border-color: #999999 !important;
}

/* Style the empty inner span to hold our new arrows */
body .ui-button.Nav_scrlbutton .ui-button-text {
    display: block !important;
    padding: 0 !important;
    line-height: 20px !important;
    color: #888888 !important; /* Legacy gray arrow color */
    font-size: 11px !important;
    font-family: sans-serif !important;
    text-align: center !important;
}

/* Inject the specific Unicode Arrows */
body .ui-button.Nav_scrlbutton_first .ui-button-text::before { content: "|\25C0" !important; letter-spacing: -1px; } /* |◀ */
body .ui-button.Nav_scrlbutton_prev .ui-button-text::before  { content: "\25C0" !important; } /* ◀ */
body .ui-button.Nav_scrlbutton_next .ui-button-text::before  { content: "\25B6" !important; } /* ▶ */
body .ui-button.Nav_scrlbutton_last .ui-button-text::before  { content: "\25B6|" !important; letter-spacing: -1px; } /* ▶| */

/* Ensure disabled buttons look faint and unclickable */
body .ui-button.Nav_scrlbutton.ui-state-disabled {
    opacity: 0.5 !important;
    cursor: default !important;
}

/* ---------------------------------------------------------
   2. Fix the "Rows per Page" Dropdown
   --------------------------------------------------------- */
/* Restore the white box and border */
body .navBg .ui-selectonemenu {
    background: #ffffff !important;
    border: 1px solid #a8a8a8 !important;
    border-radius: 2px !important;
    height: 22px !important;
    min-width: 100px !important;
    vertical-align: middle !important;
    margin: 0 5px !important;
}

/* Fix the text alignment inside the dropdown */
body .navBg .ui-selectonemenu .ui-selectonemenu-label {
    padding: 0 5px !important;
    line-height: 20px !important;
    color: #000000 !important;
    font-weight: normal !important;
}

/* Restore the classic 3D button look to the dropdown arrow trigger */
body .navBg .ui-selectonemenu .ui-selectonemenu-trigger {
    width: 20px !important;
    background-color: #e0e0e0 !important;
    background-image: linear-gradient(to bottom, #ffffff, #cccccc) !important;
    border-left: 1px solid #a8a8a8 !important;
    border-radius: 0 2px 2px 0 !important;
    padding: 0 !important;
}

/* Un-hide the icon span and center the text */
body .navBg .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    display: block !important;
    text-indent: 0 !important; /* Brings the hidden text back to the screen */
    background: none !important; /* Strips any broken background images */
    font-size: 10px !important;
    color: #444444 !important; /* Legacy dark gray arrow color */
    width: 100% !important;
    height: 100% !important;
    line-height: 20px !important; /* Vertically centers the arrow */
    text-align: center !important; /* Horizontally centers the arrow */
}

/* Inject the native Unicode downward arrow */
body .navBg .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon::before {
    content: "\25BC" !important; /* ▼ */
}

/* ---------------------------------------------------------
   3. Fix Vertical Text Alignment
   --------------------------------------------------------- */
/* Ensures "Page 1", "Show", and "Rows per Page" line up perfectly */
body span[id$="pageOrient"],
body .navText {
    vertical-align: middle !important;
    line-height: 22px !important;
    display: inline-block !important;
}

/* =========================================================
   PRIMEFACES 14: Global Fix for SelectOneMenu Dropdown Icons
   ========================================================= */

/* 1. Un-hide the icon span and center the text */
body .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    display: block !important;
    text-indent: 0 !important; /* Brings the hidden text back to the screen */
    background: none !important; /* Strips any broken background images */
    font-size: 10px !important;
    color: #444444 !important; /* Legacy dark gray arrow color */
    width: 100% !important;
    height: 100% !important;
    line-height: 20px !important; /* Vertically centers the arrow */
    text-align: center !important; /* Horizontally centers the arrow */
}

/* 2. Inject the native Unicode downward arrow globally */
body .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon::before {
    content: "\25BC" !important; /* ▼ */
}

/* =========================================================
   PRIMEFACES 14: Global Fix for Calendar/DatePicker Icons
   ========================================================= */

/* Target the hidden icon span inside the calendar trigger button */
body .ui-datepicker-trigger .ui-icon {
    background-image: url("/archcommon/resources/images/icon_calendar.gif") !important;
    background-repeat: no-repeat !important;
    background-position: center !important; /* Centers the GIF perfectly in the box */
    display: block !important;
    text-indent: 0 !important;
    font-size: 0 !important; /* Hides the broken PrimeFaces font icon */
    color: transparent !important; /* Extra safety to hide native text */
    width: 16px !important; /* Adjust if your GIF is larger/smaller */
    height: 16px !important;
}

/* =========================================================
   PRIMEFACES 14: Restore PickList (Shuttle) Buttons & Icons
   ========================================================= */

/* 1. Restore the 3D legacy gray background, borders, and size */
body .ui-picklist .ui-picklist-buttons .ui-button {
    background-color: #e8e8e8 !important;
    background-image: linear-gradient(to bottom, #f4f4f4, #d0d0d0) !important; /* Darker, more accurate legacy gray */
    border: 1px solid #a0a0a0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    width: 30px !important; /* Legacy width */
    height: 24px !important; /* Legacy height */
    margin-bottom: 6px !important;
    padding: 0 !important;
}

body .ui-picklist .ui-picklist-buttons .ui-button:hover:not(.ui-state-disabled) {
    background-image: linear-gradient(to bottom, #ffffff, #c0c0c0) !important;
    border-color: #888888 !important;
}

/* 2. KILL the PrimeFaces absolute positioning and center the area */
body .ui-picklist .ui-picklist-buttons .ui-button .ui-icon {
    display: block !important;
    position: static !important; /* Removes PF absolute centering */
    margin: 0 !important; /* Removes the sneaky -8px PF margin */
    left: auto !important;
    top: auto !important;
    text-indent: 0 !important;
    background: none !important;
    font-size: 0 !important;
    color: transparent !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 22px !important; /* Vertically centers the arrow */
    text-align: center !important; /* Horizontally centers the arrow */
}

/* 3. Style the new native arrows (thicker and darker) */
body .ui-picklist .ui-picklist-buttons .ui-button .ui-icon::before {
    font-size: 15px !important;
    color: #4a5d75 !important; /* Legacy dark slate blue arrow color */
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    display: inline-block !important;
}

/* 4. Inject the specific Unicode arrows for each button */
body .ui-picklist .ui-picklist-button-add .ui-icon::before       { content: "\2192" !important; } /* → */
body .ui-picklist .ui-picklist-button-add-all .ui-icon::before   { content: "\2192|" !important; letter-spacing: -2px; } /* →| */
body .ui-picklist .ui-picklist-button-remove .ui-icon::before    { content: "\2190" !important; } /* ← */
body .ui-picklist .ui-picklist-button-remove-all .ui-icon::before { content: "|\2190" !important; letter-spacing: -2px; margin-left: -2px !important; } /* |← */

/* 5. Ensure disabled buttons look unclickable */
body .ui-picklist .ui-picklist-buttons .ui-button.ui-state-disabled {
    opacity: 0.5 !important;
    cursor: default !important;
}


/* =========================================================
   PRIMEFACES 14: Restore Legacy Tree Menu Styling (V2)
   ========================================================= */

/* 1. Strip the overall container borders and background */
body .ui-tree {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 2. Create the stair-step hierarchy for children (Fixes "Billing" sub-items) */
body .ui-tree .ui-treenode-children {
    padding-left: 22px !important; /* Indents the nested items */
    margin: 0 !important;
}

/* 3. The Tree Nodes and Lines */
body .ui-tree .ui-treenode {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important; /* Changed from 2px 0 to 0 */
    background: none !important;
}

/* Draw the Vertical Line */
body .ui-tree .ui-treenode::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 6px !important; /* Moves line slightly inward */
    border-left: 1px dotted #aaaaaa !important; /* Dotted looks more legacy than solid */
}

/* Draw the Horizontal Notches */
body .ui-tree .ui-treenode::after {
    content: "" !important;
    position: absolute !important;
    top: 9px !important; /* Changed from 12px to 9px */
    left: 6px !important;
    width: 12px !important;
    border-top: 1px dotted #aaaaaa !important;
}

/* Stop the vertical line on the very last node */
body .ui-tree .ui-treenode:last-child::before {
    height: 13px !important;
    bottom: auto !important;
}

/* 4. Fix Overlapping: Push the text safely away from the lines */
body .ui-tree .ui-treenode-content {
    display: inline-block !important;
    margin-left: 22px !important;
    padding: 0px 6px !important; /* Changed from 2px 6px to 0px 6px */
    border: 1px solid transparent !important;
}

/* 5. Fix the Selected Node (Light Gray Box) */
body .ui-tree .ui-treenode-content.ui-state-highlight {
    border: 1px solid #dddddd !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
body .ui-tree .ui-treenode-content.ui-state-highlight .setup-menu-node {
    color: #444444 !important;
    font-weight: bold !important;
}

/* 6. Restore the missing Expand/Collapse [+] / [-] icons */
body .ui-tree .ui-tree-toggler {
    display: inline-block !important;
    text-indent: 0 !important;
    background: #ffffff !important;
    background-image: none !important; /* Strips broken Primefaces icons */
    border: 1px solid #888888 !important; /* Classic square box */
    border-radius: 2px !important;
    width: 12px !important;
    height: 12px !important;
    line-height: 10px !important;
    text-align: center !important;
    font-size: 10px !important;
    color: #333333 !important;
    margin-right: 4px !important;
    position: relative !important;
    z-index: 10 !important; /* Keeps it clickable above the lines */
    vertical-align: middle !important;
}

/* Inject the plus and minus signs */
body .ui-tree .ui-tree-toggler.ui-icon-triangle-1-e::before { content: "+" !important; }
body .ui-tree .ui-tree-toggler.ui-icon-triangle-1-s::before { content: "-" !important; }

/* 7. Hide the broken PrimeFaces blank icon spacers */
body .ui-tree .ui-treenode-icon {
    display: none !important;
}


/* =========================================================
   PRIMEFACES 14: Use Java Bean State for Tree Highlighting
   ========================================================= */

/* 1. Turn off PrimeFaces' native "amnesia" highlight */
body .ui-tree .ui-treenode-content.ui-state-highlight {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* 2. Apply the legacy gray box to YOUR Java-controlled class */
body .ui-tree .selected-menu-node {
    background-color: #f0f0f0 !important;
    border: 1px solid #dddddd !important;
    border-radius: 2px !important;
    padding: 0px 6px !important; /* Keeps the tight vertical spacing */
    color: #444444 !important;
    font-weight: bold !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* =========================================================
   Strip Bold Text from PrimeFaces' Fake Highlight
   ========================================================= */

/* If PrimeFaces highlights a node, but your Java bean says it ISN'T selected, force the text back to normal! */
body .ui-tree .ui-treenode-content.ui-state-highlight .setup-menu-tree:not(.selected-menu-node) {
    font-weight: normal !important;
    font-size: inherit !important;
}

/*!* =========================================================*/
/*   PRIMEFACES 14: Fix Dialog Overlay Clipping (Dropdowns/Calendars)*/
/*   ========================================================= *!*/


/* 2. Force the dropdown lists and calendars to sit on top of the dialog's shadow */
body .ui-datepicker,
body .ui-datepicker-panel {
    z-index: 999999 !important; /* Insanely high number guarantees it sits on top */
}

/* 1. Light, flat table headers */
body .ui-datatable thead th,
body .ui-datatable .ui-column-header {
    background: #f4f4f4 !important; /* Flat, very light gray */
    background-image: none !important; /* Kills any legacy 3D gradients */
    font-weight: 600 !important; /* Semi-bold, not overly harsh */
    border: 1px solid #e0e0e0 !important; /* Very subtle, light gray border */
}

/* 2. Soft borders for the data cells */
body .ui-datatable .ui-datatable-data > tr > td {
    border: 1px solid #e0e0e0 !important; /* Matches the soft header border */
}

/* 1. Kill legacy sprites, reset indent, and HIDE the jQuery text */
body .ui-datepicker .ui-datepicker-prev span,
body .ui-datepicker .ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0 !important;
    font-size: 0 !important; /* MAGICAL FIX: Shrinks the "Previous/Next" text to 0 pixels! */
    color: transparent !important; /* Backup: makes text invisible */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
}

/* 2. Force the correct PrimeIcons to render at normal size */
body .ui-datepicker .ui-datepicker-prev span::before {
    content: "\e900" !important; /* PrimeIcons Chevron Left */
    font-family: 'primeicons' !important;
    font-size: 1rem !important; /* Bring the icon size back up! */
    display: block !important;
    color: #495057 !important;
}

body .ui-datepicker .ui-datepicker-next span::before {
    content: "\e901" !important; /* PrimeIcons Chevron Right */
    font-family: 'primeicons' !important;
    font-size: 1rem !important; /* Bring the icon size back up! */
    display: block !important;
    color: #495057 !important;
}

/* Optional: Add a nice hover effect to match modern PF14 */
body .ui-datepicker .ui-datepicker-prev:hover,
body .ui-datepicker .ui-datepicker-next:hover {
    background-color: #e9ecef !important;
}


/* 1. Global Dropdown Hover State (when moving mouse over items) */
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover,
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-hover {
    color: #555555 !important;
    background-image: none !important; /* Kills the legacy yellow gradient */
    border-color: transparent !important;  /* Removes any weird yellow borders */
    text-shadow: none !important;      /* Cleans up legacy text shadows */
}


/* 1. Remove the grey background, gradients, and shadows from the main dropdown box */
body .ui-selectonemenu.ui-state-default {
    background: transparent !important; /* Use #ffffff if you want solid white instead */
    background-image: none !important;
    box-shadow: none !important; /* Kills any subtle 3D shadows */
    border: 1px solid #cccccc !important; /* A clean, flat, light-grey border */
}


/* 4. Ensure it stays clean even when you hover over it or click it */
body .ui-selectonemenu.ui-state-hover,
body .ui-selectonemenu.ui-state-focus {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 1. Force both the header table and body table to STRICTLY obey your widths */
body .ui-datatable-scrollable table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 2. Stop long text (like emails) from stretching the cell width */
body .ui-datatable-scrollable .ui-datatable-scrollable-header th,
body .ui-datatable-scrollable .ui-datatable-data > tr > td {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Adds '...' if text is too long */
    white-space: nowrap !important; /* Forces text to stay on one line so row heights match */
    padding: 4px 8px !important; /* Standardize padding so math is predictable */
}

/* 1. Reset the container */
body .ui-datatable .ui-sortable-column-icon {
    background-image: none !important;
    text-indent: 0 !important;
    display: inline-block !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    bottom: 2px ;
}

/* 2. Force the Double Arrow for EVERY state (Unsorted, Ascending, and Descending) */
body .ui-datatable .ui-sortable-column-icon::before {
    content: "\e915" !important; /* PrimeIcons 'pi-sort' (The classic double arrow) */
    font-family: 'primeicons' !important;
    color: #006699 !important;
    font-size: 0.7rem !important;
    display: block !important;
}

/* 1. Strip the gray box, add the image, and FORCE the dimensions to fit it */
body .ui-button.Nav_countrecords_btn {
    background-color: transparent !important;
    background-image: url("/archcommon/jakarta.faces.resource/images/counter.png.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
    font-weight: bold !important;

    /* -- NEW FIXES BELOW -- */
    display: inline-block !important;
    min-height: 26px !important; /* Forces the button to be tall enough for the image */
    line-height: 26px !important; /* Vertically centers the text with the taller button */
    padding: 0 0 0 34px !important; /* Increased from 28px to give the image more breathing room on the right */
    overflow: visible !important; /* Stops PrimeFaces from acting like scissors on the edges */
}

/* 2. Reset the inner text span padding so it aligns nicely */
body .ui-button.Nav_countrecords_btn .ui-button-text {
    padding: 0 !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* 3. Keep it clean even when hovered or clicked */
body .ui-button.Nav_countrecords_btn.ui-state-hover,
body .ui-button.Nav_countrecords_btn.ui-state-focus,
body .ui-button.Nav_countrecords_btn.ui-state-active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 1. Remove the grey background, gradients, and shadows from the main dropdown box */
body .ui-selectonemenu.ui-state-default {
    background: transparent !important; /* Use #ffffff if you want solid white instead */
    background-image: none !important;
    box-shadow: none !important; /* Kills any subtle 3D shadows */
    border: 1px solid #cccccc !important; /* A clean, flat, light-grey border */
}

/* 2. Change the blue text (e.g., "Today") to dark charcoal */
body .ui-selectonemenu .ui-selectonemenu-label {
    color: #333333 !important;
    background: transparent !important;
}

/* 4. Ensure it stays clean even when you hover over it or click it */
body .ui-selectonemenu.ui-state-hover,
body .ui-selectonemenu.ui-state-focus {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 1. Remove the grey background, gradients, and shadows from the main dropdown box */
body .ui-selectonemenu.ui-state-default {
    background: transparent !important; /* Use #ffffff if you want solid white instead */
    background-image: none !important;
    box-shadow: none !important; /* Kills any subtle 3D shadows */
    border: 1px solid #cccccc !important; /* A clean, flat, light-grey border */
}

/* 2. Change the blue text (e.g., "Today") to dark charcoal */
body .ui-selectonemenu .ui-selectonemenu-label {
    color: #333333 !important;
    background: transparent !important;
}

/* 4. Ensure it stays clean even when you hover over it or click it */
body .ui-selectonemenu.ui-state-hover,
body .ui-selectonemenu.ui-state-focus {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* 1. Force a strict physical size on the dropdown container so it cannot shrink */
td#selectPresetAllocationTd .ui-selectonemenu {
    min-height: 18px !important; /* Matches standard PrimeFaces input height */
    box-sizing: border-box !important;
}

/* 2. Force the inner label to hold the height open, even if it is completely empty */
td#selectPresetAllocationTd .ui-selectonemenu .ui-selectonemenu-label {
    min-height: 18px !important;
    line-height: 15px !important; /* Vertically centers the text when it finally gets populated */
    display: block !important;
    padding-left: 5px !important;
    box-sizing: border-box !important;
}

a.ui-commandlink {
    text-decoration: underline;
}

/* Target the text input area of a required PrimeFaces Calendar */
.inputRequired .ui-inputfield {
    background-color: #ffffcc !important; /* Standard pale yellow for required fields */
    background-image: none !important;
}

/* Target the label area of a required PrimeFaces SelectOneMenu */
.inputRequired.ui-selectonemenu .ui-selectonemenu-label {
    background-color: #ffffcc !important;
    background-image: none !important;
}

/* Ensure standard h:inputText with inputRequired also keeps the yellow color */
input.inputRequired, textarea.inputRequired {
    background-color: #ffffcc !important;
}


/* =========================================================
   PRIMEFACES 14: Global Fix for Disabled Elements (Transparency)
   ========================================================= */
body .ui-state-disabled,
body .ui-widget[disabled] {
    opacity: 0.5 !important;
    cursor: default !important;
}

body .ui-button.refreshButton {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    background-image: url("/archcommon/resources/images/icon_refresh_rebranded.svg") !important;
    background-repeat: no-repeat !important;
    width: 16px !important;
    height: 16px !important;
}

body .ui-button.teal-button {
    background-color: #00AFAF !important; /* Matches your teal color */
    background-image: none !important;
    border: 1px solid #009999 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border-radius: 3px !important;
}
body .ui-button.teal-button:hover {
    background-color: #008f8f !important;
}

/* 1. Remove padding from the outer list item wrapper so it doesn't create dead space */
body .ui-menu .ui-menu-list .ui-menuitem {
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Force the clickable link to expand to the edges and take on the padding */
body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 15px !important; /* Adjust this to match your desired row height/spacing */
    cursor: pointer !important;
}


/* 1. Hide the default PrimeFaces icons on the TOP LEVEL menu bar so they don't overlap text */
body .ui-menubar > .ui-menu-list > .ui-menuitem > .ui-menuitem-link > .ui-menuitem-icon {
    display: none !important;
}

/* 2. Target ONLY the nested dropdowns (.ui-menu-child) for the right-facing arrows */
body .ui-menu .ui-menu-child .ui-menuitem.ui-menu-parent > .ui-menuitem-link {
    position: relative !important;
}

/* 3. Draw the right-facing arrow ONLY in the dropdowns */
body .ui-menu .ui-menu-child .ui-menuitem.ui-menu-parent > .ui-menuitem-link::after {
    font-family: 'primeicons' !important;
    content: '\e901' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #000000 !important;
}

/* 4. Hide the default PrimeFaces dropdown icons so you don't get duplicate arrows */
body .ui-menu .ui-menu-child .ui-menuitem.ui-menu-parent > .ui-menuitem-link > .ui-menuitem-icon {
    display: none !important;
}


/* 1. The Overlay: Force it to stretch across the entire screen */
body .osttra-modal-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 999998 !important;
    display: block !important; /* Removes flexbox reliance */
}

/* 2. The Modal Box: Force it to the absolute dead center of the screen */
body .osttra-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Sizing constraints */
    width: 80% !important;
    max-width: 800px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;

    /* Styling */
    background-color: #ffffff !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important; /* FIXED: Removed the extra 20px padding causing the squish */
}

/* 3. Keep the text-wrapping rules to prevent spillage */
body .osttra-modal .osttra-modal-title p,
body .osttra-modal .osttra-modal-content p {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* 1. Ensure the radio box can center the dot perfectly */
body .ui-radiobutton .ui-radiobutton-box {
    position: relative !important;
}

/* 2. Draw a perfectly centered, properly sized physical CSS circle */
body .ui-radiobutton:not(.ui-state-disabled) .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
    background-image: none !important;
    background-color: #1C4257 !important;
    border-radius: 50% !important;

    /* Shrink the dot slightly for a cleaner look */
    width: 6px !important;
    height: 6px !important;

    /* Absolute centering */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* THE FIX: Destroy PrimeFaces default icon margins */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. Kill any invisible PrimeIcon font characters that might interfere */
body .ui-radiobutton:not(.ui-state-disabled) .ui-radiobutton-box.ui-state-active .ui-icon-bullet::before {
    content: '' !important;
    display: none !important;
}

/* Forcefully hide the horizontal scrollbar on the custom tree wrapper and the PrimeFaces tree itself */
.treeStyle,
.treeStyle .ui-tree {
    overflow-x: hidden !important;
}

/* Optional: Ensure the inner tree container doesn't force a minimum width that pushes past the boundaries */
.treeStyle .ui-tree .ui-tree-container {
    min-width: 100% !important;
    box-sizing: border-box !important;
}


/* 1. Default state - dark gray so they don't vanish */
.ui-texteditor .ql-toolbar button svg .ql-stroke {
    stroke: #444444 !important;
}
.ui-texteditor .ql-toolbar button svg .ql-fill {
    fill: #444444 !important;
}

/* 2. Hover state - a nice soft blue */
.ui-texteditor .ql-toolbar button:hover svg .ql-stroke {
    stroke: #0056b3 !important;
}
.ui-texteditor .ql-toolbar button:hover svg .ql-fill {
    fill: #0056b3 !important;
}

/* 3. FIXED: Active/Selected state - bold blue so you know it's turned on! */
.ui-texteditor .ql-toolbar button.ql-active svg .ql-stroke {
    stroke: #0066cc !important;
}
.ui-texteditor .ql-toolbar button.ql-active svg .ql-fill {
    fill: #0066cc !important;
}

/* 1. Override the PrimeFaces theme for the Get Report button */
button[id$="testGoButton"].ui-button {
    background-color: #00AFAF !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 3px !important;
    padding: 0.25rem 0.75rem !important; /* Slightly wider padding looks better on text buttons */
}

/* 2. Strip the default PrimeFaces padding from the inner text span */
button[id$="testGoButton"].ui-button .ui-button-text {
    padding: 0 !important;
}

/* 3. Add the Hover State */
button[id$="testGoButton"].ui-button:hover,
button[id$="testGoButton"].ui-button.ui-state-hover {
    background-color: #008C8C !important;
}

/* 1. Apply the background image to the button and position it on the left */
button.bookTradeButton.ui-button {
    background-image: url("/archcommon/jakarta.faces.resource/images/book.png.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") !important;
    background-repeat: no-repeat !important;
    background-position: 6px center !important; /* 6px from the left, vertically centered */
}

/* 2. Push the inner PrimeFaces text span to the right so it doesn't overlap the book */
button.bookTradeButton.ui-button .ui-button-text {
    padding-left: 28px !important; /* Adjust this if the book is wider than 16px */
}

.icon-delete {
    background: url("/archcommon/jakarta.faces.resource/images/icon_delete_2.gif.faces;jsessionid=Qpaea0G5Yuqv_vl22Z_aoJ_4oKTEgLgaMeO0Nyf-.ue1ul-scbtrm-asg-0") no-repeat ;
    width: 16px !important;
    height: 16px !important;
    display: block;
}

/* 1. Base transparent styling for BOTH active and disabled states */
body .ui-button.markAsHandledButton,
body .ui-button.markAsHandledButtonDisabled {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* 2. Strip PrimeFaces background on the inner text span */
body .ui-button.markAsHandledButton .ui-button-text,
body .ui-button.markAsHandledButtonDisabled .ui-button-text {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* 3. The ACTIVE (Enabled) State */
body .ui-button.markAsHandledButton {
    opacity: 1.0 !important;       /* Full visibility */
    color: #333333 !important;     /* Dark text matching the other buttons */
    cursor: pointer !important;
}

/* 4. The DISABLED State (Catches your custom class OR PrimeFaces native disable) */
body .ui-button.markAsHandledButtonDisabled,
body .ui-button.markAsHandledButton.ui-state-disabled {
    opacity: 0.4 !important;       /* Faded look */
    color: #999999 !important;     /* Grey text */
    cursor: default !important;
    pointer-events: none !important;
}

/* 5. HOVER State for Enabled Button */
body .ui-button.markAsHandledButton:hover,
body .ui-button.markAsHandledButton.ui-state-hover {
    background-color: #e0e0e0 !important; /* Subtle grey hover background */
    border-radius: 3px !important;       /* Matches standard button rounding */
}

/* Targets the inner text element ONLY when the row status is explicitly 'Hold' */
a.ui-commandlink.status-hold,
a.ui-commandlink.status-hold span {
    text-decoration: underline !important;
    text-decoration-color: currentColor !important; /* Matches your green/red/orange text color beautifully */
    text-underline-offset: 2px;
}

/* 1. Pin the red close icon nicely to the left edge of the button */
body .ui-button.cancelButton,
body .ui-button.cancelButton.ui-state-default {
    background-color: transparent !important;
    background-position: 4px center !important; /* Keeps icon anchored to the left */
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    cursor: pointer !important;
}

/* 2. INCREASE PADDING: Pushes the "Close" text rightward to eliminate the distortion */
body .ui-button.cancelButton .ui-button-text {
    padding-left: 26px !important; /* Increased from 20px to clear the circular icon */
    padding-right: 4px !important;
    display: inline-block !important;
}

/* 3. Maintain consistent hover background */
body .ui-button.cancelButton:hover,
body .ui-button.cancelButton.ui-state-hover {
    background-color: #e0e0e0 !important;
    border-radius: 3px !important;
}
body .ui-button.deleteButton:hover,
body .ui-button.deleteButton.ui-state-hover {
    background-color: #e0e0e0 !important; /* Subtle grey hover background */
    border-radius: 3px !important;       /* Clean rounded corners */
}

.dialog-close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}

/* ========================================================
   SPECIFIC OVERRIDE: NO OUTER BORDER + IMAGE 2 HIGHLIGHTED HEADERS
   ======================================================== */

/* 1. Keep the outer bounding frame line hidden */
body .ui-datatable[id$="currencyManagement"],
body .ui-datatable[id$="currencyManagement"] .ui-datatable-tablewrapper,
body .ui-datatable[id$="currencyGroupManagement"],
body .ui-datatable[id$="currencyGroupManagement"] .ui-datatable-tablewrapper,
body .ui-datatable[id$="currencyPairsGroupsManagement"],
body .ui-datatable[id$="currencyPairsGroupsManagement"] .ui-datatable-tablewrapper,
body .ui-datatable[id$="currencyPairsManagement"],
body .ui-datatable[id$="currencyPairsManagement"] .ui-datatable-tablewrapper{
    border: none !important;
    box-shadow: none !important;
}

/* 2. HIGHLIGHT HEADERS: Applies the exact shaded grey gradient look from Image 2 */
body .ui-datatable[id$="currencyManagement"] th.ui-state-default,
body .ui-datatable[id$="currencyGroupManagement"] th.ui-state-default,
body .ui-datatable[id$="currencyPairsGroupsManagement"] th.ui-state-default,
body .ui-datatable[id$="currencyPairsManagement"] th.ui-state-default {
    background: #d6d6d6 !important;
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #cfcfcf 100%) !important; /* Recreates the glossy highlight */
    color: #333333 !important;
    font-weight: bold !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    border: 1px solid #b5b5b5 !important; /* Slightly defined border for the highlighted look */
    box-shadow: inset 0 1px 0 #ffffff !important;
}

/* 3. Maintain clean interior grid lines on the data cells below */
body .ui-datatable[id$="currencyManagement"] .ui-datatable-data td,
body .ui-datatable[id$="currencyGroupManagement"] .ui-datatable-data td,
body .ui-datatable[id$="currencyPairsGroupsManagement"] .ui-datatable-data td,
body .ui-datatable[id$="currencyPairsManagement"] .ui-datatable-data td {
    border: 1px solid #e0e0e0 !important;
}


/* ========================================================
   RESTORE LEGACY LIGHT BLUE TO THE DIALOG HEADERBAR
   ======================================================== */

/* Targets both your specified actionDialog selector and the Trade Group view wrapper */
body div[id$=":actionDialog"] .ui-dialog-titlebar,
body div[id*="tgWarningView"].ui-dialog .ui-dialog-titlebar {
    background: #6fc5f9 !important;            /* Your legacy light blue */
    background-image: none !important;         /* Destroys theme overlays to keep color crisp */
    color: #000000 !important;                 /* Solid black text */
    border-bottom: 1px solid #4da9e0 !important; /* Defined blue border line */
    font-weight: bold !important;
}

/* Keeps the right-hand 'X' button box cleanly integrated into the blue bar */
body div[id$=":actionDialog"] .ui-dialog-titlebar-close,
body div[id*="tgWarningView"].ui-dialog .ui-dialog-titlebar-close {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Optional: Retains the shaded, crisp classic buttons from Image 1 underneath */
body div[id*="tgWarningView"].ui-dialog .ui-button {
    background: #f6f6f6 !important;
    background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%) !important;
    border: 1px solid #cccccc !important;
    color: #333333 !important;
    border-radius: 4px !important;
}


/* ========================================================
   FORCE UNIFORM YELLOW BACKGROUND ON ALL MANDATORY FIELDS
   ======================================================== */

/* 1. Target standard inputs and text fields */
body .inputRequired,
body .ui-inputfield.inputRequired,
body h\:inputText.inputRequired {
    background: #ffffcc !important; /* Standard pale creamy yellow */
    background-color: #ffffcc !important;
    background-image: none !important;
}

/* 2. Target inner text fields of p:autoComplete (e.g., Trading Party & Counter Party) */
body .ui-autocomplete .ui-autocomplete-input.inputRequired,
body .ui-autocomplete.inputRequired .ui-autocomplete-input {
    background: #ffffcc !important;
    background-color: #ffffcc !important;
    background-image: none !important;
}

/* 3. Target modern p:selectOneMenu wrappers and their inner text labels (e.g., Limit Type) */
body .ui-selectonemenu.inputRequired,
body .ui-selectonemenu.inputRequired .ui-selectonemenu-label,
body .ui-selectonemenu.ui-state-default.inputRequired {
    background: #ffffcc !important;
    background-color: #ffffcc !important;
    background-image: none !important;
}

/* ========================================================
   CUSTOM TEAL BUTTON (ADD TRANSFORMER)
   ======================================================== */
body .ui-button.custom-teal-btn {
    background-color: #00AFAF !important; /* Exact teal color from screenshot */
    background-image: none !important;    /* Kills default theme gradients */
    border: 1px solid #00AFAF !important; /* Slightly darker border for definition */
    color: #ffffff !important;            /* Pure white text */
    text-shadow: none !important;         /* Removes legacy gray text shadows */
    border-radius: 3px !important;        /* Matches the soft corners */
    font-weight: normal !important;
}

/* Hover effect so it feels responsive when the user mouses over it */
body .ui-button.custom-teal-btn:hover {
    background-color: #008C8C !important; /* Slightly darker teal on hover */
    border-color: #008C8C !important;
}

.ui-shadow {
    box-shadow: none !important;
}

.auto-confirm-cnfg .ui-radiobutton .ui-radiobutton-box {
    border: 1px solid rgb(133, 178, 203);
    background-color: rgb(133, 178, 203);
    background-image: none;
    text-shadow: none;
    box-shadow: none;
}

/* Apply the sleek, shadowed pill look on hover and focus */
body .ui-button.Nav_countrecords_btn.ui-state-hover,
body .ui-button.Nav_countrecords_btn.ui-state-focus {
    background-color: #EDEDEDFF !important;             /* Soft light background */
    border: 0 solid #9BBEE7FF !important;             /* Subtle light gray border */
    border-radius: 4px !important;                    /* Clean rounded corners */
    box-shadow: 0 0 8px #9BBEE7FF !important; /* Ambient drop-shadow from the screenshot */
    color: #000000 !important;                        /* Bold crisp text color */
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ========================================================
   OA ID COLUMN UNDERLINE HYPERLINK STYLE
   ======================================================== */
.oa-id-link,
body .oa-id-link,
body a.oa-id-link,
body .ui-commandlink.oa-id-link,
body .ui-commandlink.oa-id-link span {
    text-decoration: underline !important;
}

.credit-report-org-label {
    margin-left: 20px;
}