@import url('bap.css');

/* here you can put your own css to customize and override the theme */

/* Global varaible styles */
:root {
    --blue: #0F4E92;
    --blue-light: #1570a6;
    --white: #fff;
    --black: #000;
    --red: #FF0000;
}

/* portlet */
.sortable .portlet>.portlet-title {
    cursor: default;
}

.portlet .portlet-title a {
    color: var(--white);
    text-decoration: none;
}

/* Leads Unified - Deal header (UI-only refactor; keep existing behavior) */
/* Allow Bootstrap dropdown menus to extend past rounded header (theme portlets use overflow:hidden). */
.portlet.box.rd-deal-portlet {
    overflow: visible !important;
}

.portlet.box.rd-lead-section-portlet,
.portlet.box.rd-lead-root-portlet {
    overflow: visible !important;
}

/* Deal cards: neutral shell (no green/yellow/blue/grey Metronic stripe); status = coloured pill label */
.portlet.box.rd-deal-portlet.deals,
.portlet.box.rd-deal-portlet.purchase,
.portlet.box.rd-deal-portlet.property-management-deal,
.portlet.box.rd-deal-portlet.listing,
.portlet.box.rd-deal-portlet.referral {
    background: #fff !important;
    border: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-radius: 5px;
}

/* Section wrappers: white card shell */
.portlet.box.rd-lead-section-portlet {
    background: #fff !important;
    border: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-radius: 5px;
}

/* Lead root: Bootstrap panel-primary style (#337ab7); body stays white */
.portlet.box.rd-lead-root-portlet {
    background: #337ab7 !important;
    border: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-radius: 5px;
}

.portlet.box.rd-lead-root-portlet > .portlet-body {
    background: #fff !important;
    border-radius: 0 0 5px 5px;
}

/* Status: compact pill with short label (Active / Firm / Conditional / Inactive); soft glow by colour */
.rd-deal-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px 10px;
    min-height: 22px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: default;
    outline: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Tooltip only on grey “Inactive” deal pill (closed / collapsed / inactive) */
.rd-deal-status-pill--tooltip {
    cursor: help;
}

.rd-deal-status-pill:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.rd-deal-status-pill--green {
    background: #35aa47;
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.22) inset,
        0 0 3px 1px rgba(53, 170, 71, 0.5);
}

.rd-deal-status-pill--blue {
    background: #4b8df8;
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2) inset,
        0 0 3px 1px rgba(75, 141, 248, 0.55);
}

.rd-deal-status-pill--yellow {
    background: #ffb848;
    color: #2a2a2a;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18) inset,
        0 0 3px 1px rgba(255, 184, 72, 0.55);
}

.rd-deal-status-pill--grey {
    background: #555555;
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 0 3px 1px rgba(140, 140, 140, 0.35);
}

.rd-deal-status-pill--red {
    background: #c9302c;
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2) inset,
        0 0 3px 1px rgba(201, 48, 44, 0.45);
}

.portlet.box.rd-deal-portlet > .portlet-title,
.portlet.box.rd-lead-section-portlet > .portlet-title,
.portlet.box.rd-lead-root-portlet > .portlet-title {
    padding: 0;
    background: transparent !important;
    overflow: visible;
}

/* Leads Unified — section bars (Listings, Buying Deals, …): same gray as Contact / Addresses / Options panel headings */
.portlet.box.rd-lead-section-portlet > .portlet-title .rd-deal-header {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: visible;
}

/* Client lead header: Bootstrap default panel-primary / .btn-primary blue */
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header {
    background: #337ab7;
    border-radius: 10px;
    overflow: visible;
}

.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header__title,
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header__title-text {
    color: #fff !important;
}

/* Inner cards (deal / listing / referral): firm blue (scoped — nested headers sit inside .portlet-body) */
.portlet.box.rd-deal-portlet > .portlet-title .rd-deal-header {
    background: #185FA5;
    border-radius: 10px;
    overflow: visible;
}

.portlet.box.rd-deal-portlet > .portlet-title .rd-deal-header__title,
.portlet.box.rd-deal-portlet > .portlet-title .rd-deal-header__title-text {
    color: #fff !important;
}

.portlet.box.rd-deal-portlet .rd-deal-header__header-row,
.portlet.box.rd-lead-section-portlet .rd-deal-header__header-row,
.portlet.box.rd-lead-root-portlet .rd-deal-header__header-row {
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    overflow: visible;
}

.portlet.box.rd-deal-portlet .rd-deal-header__left,
.portlet.box.rd-lead-section-portlet .rd-deal-header__left,
.portlet.box.rd-lead-root-portlet .rd-deal-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: visible;
}

.portlet.box.rd-deal-portlet .rd-deal-header__title,
.portlet.box.rd-lead-section-portlet .rd-deal-header__title,
.portlet.box.rd-lead-root-portlet .rd-deal-header__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    min-width: 0;
    flex: 1;
    overflow: visible;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.portlet.box.rd-deal-portlet .rd-deal-header__right,
.portlet.box.rd-lead-section-portlet .rd-deal-header__right,
.portlet.box.rd-lead-root-portlet .rd-deal-header__right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.portlet.box.rd-deal-portlet .rd-deal-header__right--with-actions,
.portlet.box.rd-lead-section-portlet .rd-deal-header__right--with-actions,
.portlet.box.rd-lead-root-portlet .rd-deal-header__right--with-actions {
    gap: 10px;
}

/* Lead root header actions row (View | Active | …) */
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header__right .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Lead root header: client name — plain text link (modal via .remote-modal); same weight as title row */
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-lead-root-portlet-title__client-link {
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
}

.portlet.box.rd-lead-root-portlet > .portlet-title .rd-lead-root-portlet-title__client-link:hover,
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-lead-root-portlet-title__client-link:focus {
    color: #fff !important;
    text-decoration: underline;
}

/* Lead root header: View — gray chip (compact / btn-sm scale) */
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header .rd-lead-root-header-action-btn.load-collapsed-client-panel {
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    color: #333 !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    display: inline-block;
}

.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header .rd-lead-root-header-action-btn.load-collapsed-client-panel:hover,
.portlet.box.rd-lead-root-portlet > .portlet-title .rd-deal-header .rd-lead-root-header-action-btn.load-collapsed-client-panel:focus {
    background-color: #ebebeb;
    border-color: #d9d9d9;
    color: #333 !important;
    text-decoration: none;
}

/* Deal status pill sits after “Deal No” — never shrink away */
.portlet.box.rd-deal-portlet .rd-deal-header__dot-wrap,
.portlet.box.rd-lead-section-portlet .rd-deal-header__dot-wrap,
.portlet.box.rd-lead-root-portlet .rd-deal-header__dot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}

.portlet.box.rd-deal-portlet .rd-deal-header__badge-wrap,
.portlet.box.rd-lead-section-portlet .rd-deal-header__badge-wrap,
.portlet.box.rd-lead-root-portlet .rd-deal-header__badge-wrap {
    flex-shrink: 0;
    align-self: center;
}

.portlet.box.rd-deal-portlet .rd-deal-header__title-text,
.portlet.box.rd-lead-section-portlet .rd-deal-header__title-text,
.portlet.box.rd-lead-root-portlet .rd-deal-header__title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

/* Listing/referral addresses can be long — allow wrap on child portlets only */
.portlet.box.rd-deal-portlet.listing .rd-deal-header__title-text,
.portlet.box.rd-deal-portlet.referral .rd-deal-header__title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

/* Pill readable on blue header bar */
.portlet.box.rd-deal-portlet .rd-deal-header .rd-deal-status-pill,
.portlet.box.rd-lead-section-portlet .rd-deal-header .rd-deal-status-pill,
.portlet.box.rd-lead-root-portlet .rd-deal-header .rd-deal-status-pill {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.portlet.box.rd-lead-root-portlet .rd-deal-header .badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-weight: 600;
}

/* Approval badge uses .rd-deal-status-pill + .approval-status (same chip UI as deal status); no legacy label overrides */

.portlet.box.rd-deal-portlet .rd-deal-header__tools,
.portlet.box.rd-lead-section-portlet .rd-deal-header__tools,
.portlet.box.rd-lead-root-portlet .rd-deal-header__tools {
    float: none;
}

.portlet.box.rd-deal-portlet .rd-deal-header__tools a,
.portlet.box.rd-lead-section-portlet .rd-deal-header__tools a,
.portlet.box.rd-lead-root-portlet .rd-deal-header__tools a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
}

.portlet.box.rd-deal-portlet .rd-deal-header__tools a.collapse,
.portlet.box.rd-deal-portlet .rd-deal-header__tools a.expand,
.portlet.box.rd-lead-section-portlet .rd-deal-header__tools a.collapse,
.portlet.box.rd-lead-section-portlet .rd-deal-header__tools a.expand,
.portlet.box.rd-lead-root-portlet .rd-deal-header__tools a.collapse,
.portlet.box.rd-lead-root-portlet .rd-deal-header__tools a.expand {
    background-image: none !important;
}

.portlet.box.rd-deal-portlet .rd-deal-header__chevron,
.portlet.box.rd-lead-section-portlet .rd-deal-header__chevron,
.portlet.box.rd-lead-root-portlet .rd-deal-header__chevron {
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
}

.portlet.box.rd-deal-portlet .rd-deal-header__tools a.expand .rd-deal-header__chevron,
.portlet.box.rd-lead-section-portlet .rd-deal-header__tools a.expand .rd-deal-header__chevron,
.portlet.box.rd-lead-root-portlet .rd-deal-header__tools a.expand .rd-deal-header__chevron {
    transform: rotate(-90deg);
    display: inline-block;
}

/* Gray section headers (Listings, Notes, …): override shared white title / chevron rules above */
.portlet.box.rd-lead-section-portlet .rd-deal-header__title {
    color: #333;
}

.portlet.box.rd-lead-section-portlet .rd-deal-header__header-row {
    border-bottom: 1px solid #e5e5e5;
}

.portlet.box.rd-lead-section-portlet .rd-deal-header__tools a {
    color: rgba(0, 0, 0, 0.45);
}

.portlet.box.rd-lead-section-portlet .rd-deal-header__chevron {
    color: rgba(0, 0, 0, 0.45);
}

.portlet.box.rd-lead-section-portlet .rd-deal-header .badge {
    background: #ddd;
    color: #333;
    font-weight: 600;
}

/*
 * Addresses: same default panel-heading / panel-body as Contact (panel-default).
 * Collapse trigger is a plain link in .panel-heading — no h4.panel-title — so typography matches Contact.
 */
.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-collapse-toggle {
    display: block;
    width: 100%;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    position: relative;
    padding-right: 20px;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-collapse-toggle:hover,
.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-collapse-toggle:focus {
    color: inherit;
    text-decoration: none;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-collapse-toggle::after {
    position: absolute;
    right: 2px;
    top: 50%;
    margin-top: -6px;
    font: normal normal normal 11px/1 FontAwesome;
    content: "\f078";
    color: #555;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-collapse-toggle.collapsed::after {
    transform: rotate(-90deg);
}

/* Collapse row (Contact | Addresses | Options): equal-height columns; Addresses body scrolls inside */
.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row > [class*="col-"] > .panel.panel-default {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row > [class*="col-"]:nth-child(1) > .panel.panel-default > .panel-body,
.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row > [class*="col-"]:nth-child(3) > .panel.panel-default > .panel-body {
    flex: 1 1 auto;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-collapse-top-row > [class*="col-"]:nth-child(2) .rd-lead-root-panel-addresses {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses .panel-collapse.in {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Actions strip: full portlet-body width (offsets default .portlet.box padding); grid = Realtors | counts | Settings */
.portlet.box.rd-lead-root-portlet > .portlet-body > .rd-lead-root-panel-actions:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    box-sizing: border-box;
    width: calc(100% + 20px);
    max-width: none;
    margin: -10px -10px 0 -10px;
    padding: 10px 15px;
    overflow: visible;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #eee;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__left {
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__realtors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__center {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__right {
    justify-self: end;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__active-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__settings {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .portlet.box.rd-lead-root-portlet > .portlet-body > .rd-lead-root-panel-actions:first-child {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__left,
    .portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__center,
    .portlet.box.rd-lead-root-portlet .rd-lead-root-panel-actions__right {
        justify-self: stretch;
        justify-content: center;
    }
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses .panel-body address {
    margin-bottom: 0;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses__entry {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 12px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 1.35;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses__addr {
    flex: 1;
    min-width: 0;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses__date {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
}

.portlet.box.rd-lead-root-portlet .rd-lead-root-panel-addresses__entry:last-child {
    border-bottom: 0;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar {
    padding: 10px 12px 12px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Toolbar: fill row width — items grow equally; wrap when needed; ellipsis prevents overlap when narrow */
.portlet.box.rd-deal-portlet .rd-deal-toolbar__flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar__item {
    display: flex;
    align-items: stretch;
    /* Basis + min-width: wrap to new rows on narrow viewports; grow evenly when space allows */
    flex: 1 1 118px;
    min-width: min(100%, 118px);
    max-width: 100%;
    box-sizing: border-box;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > * {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar a.btn,
.portlet.box.rd-deal-portlet .rd-deal-toolbar button.btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown cells (Trade Sheet, Invoices, Transaction Log): match width of plain anchor buttons */
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item .btn-group {
    display: flex;
    width: 100%;
    min-width: 0;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar__item .btn-group > .btn {
    display: inline-flex !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: 0;
    align-self: stretch;
    height: 36px !important;
    min-height: 36px;
    max-height: 36px;
    padding: 0 10px !important;
    box-sizing: border-box;
}

/* Undo global .portlet-title .btn-sm { height: 24px } for toolbar dropdowns (Trade Sheet, Invoices, etc.) */
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn.btn-sm,
.portlet.box.rd-deal-portlet .rd-deal-toolbar a.btn.btn-sm,
.portlet.box.rd-deal-portlet .rd-deal-toolbar button.btn.btn-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0;
    height: 36px !important;
    min-height: 36px;
    max-height: 36px;
    padding: 0 10px !important;
    box-sizing: border-box;
}

.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.btn,
.portlet.box.rd-deal-portlet a.rd-deal-ghost-btn.btn,
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    cursor: pointer;
    height: 36px !important;
    min-height: 36px;
    max-height: 36px;
    box-sizing: border-box;
    line-height: 1.2;
    margin-left: 0; /* override .portlet-title .btn-sm */
}

/* Default ghost hover: Firm-badge blue — never apply to delete (.delete-deal-btn / .rd-deal-btn--danger) */
.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.btn:hover:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet a.rd-deal-ghost-btn.btn:hover:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.btn:hover:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.btn:focus-visible:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet a.rd-deal-ghost-btn.btn:focus-visible:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.btn:focus-visible:not(.delete-deal-btn):not(.rd-deal-btn--danger) {
    background: rgba(75, 141, 248, 0.42);
    color: #fff;
    border-color: rgba(75, 141, 248, 0.92);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18) inset,
        0 0 3px 1px rgba(75, 141, 248, 0.5);
}

/* Delete: same default as other toolbar ghost buttons on blue bar; Bootstrap .btn-danger overridden */
.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.rd-deal-btn--danger.btn:not(:disabled),
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.rd-deal-btn--danger.delete-deal-btn:not(:disabled),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item button.delete-deal-btn.btn-danger:not(:disabled) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 36px !important;
    min-height: 36px;
    max-height: 36px;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    box-sizing: border-box;
}
/* Delete hover/focus: strong red (:not(:disabled)); disabled stays muted below */
.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.rd-deal-btn--danger.btn:hover:not(:disabled),
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.rd-deal-btn--danger.delete-deal-btn:hover:not(:disabled),
.portlet.box.rd-deal-portlet .rd-deal-ghost-btn.rd-deal-btn--danger.btn:focus-visible:not(:disabled),
.portlet.box.rd-deal-portlet button.rd-deal-ghost-btn.rd-deal-btn--danger.delete-deal-btn:focus-visible:not(:disabled),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item button.delete-deal-btn:hover:not(:disabled),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item button.delete-deal-btn:focus-visible:not(:disabled),
.portlet.box.rd-deal-portlet button.delete-deal-btn:hover:not(:disabled),
.portlet.box.rd-deal-portlet button.delete-deal-btn:focus-visible:not(:disabled) {
    background: rgba(127, 17, 17, 0.96) !important;
    color: #fff !important;
    border-color: rgba(255, 138, 128, 1) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.28) inset,
        0 0 6px 2px rgba(211, 47, 47, 0.65) !important;
}

.portlet.box.rd-deal-portlet button.delete-deal-btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.82;
    background: rgba(90, 30, 30, 0.35) !important;
    color: rgba(255, 210, 210, 0.85) !important;
    border-color: rgba(255, 120, 120, 0.28) !important;
    box-shadow: none !important;
}

/* Toolbar delete (ghost or danger): centered label even without rd-deal-btn--danger */
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item button.delete-deal-btn {
    justify-content: center !important;
    text-align: center !important;
}

/*
 * Toolbar cells often start with <div class="btn-group">; decorateBtn only adds rd-deal-ghost-btn
 * to the first class attribute (the group), so inner toggles keep btn-success / btn-danger.
 * Force the same ghost look for all controls except Delete Deal.
 */
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group > .btn:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group > button.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > a.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > button.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group > .btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):hover,
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group > .btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):focus-visible,
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group.open > .btn:not(.delete-deal-btn):not(.rd-deal-btn--danger),
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > a.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):hover,
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > a.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):focus-visible,
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > button.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):hover,
.portlet.box.rd-deal-portlet .rd-deal-toolbar__item > button.btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):focus-visible {
    background: rgba(75, 141, 248, 0.42) !important;
    color: #fff !important;
    border-color: rgba(75, 141, 248, 0.92) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18) inset,
        0 0 3px 1px rgba(75, 141, 248, 0.5) !important;
}

/* Keep Firm-blue hover while dropdown is open (toggle stays “lit”) */
.portlet.box.rd-deal-portlet .rd-deal-toolbar .btn-group.open > .btn:not(.delete-deal-btn):not(.rd-deal-btn--danger):hover {
    background: rgba(75, 141, 248, 0.42) !important;
    color: #fff !important;
    border-color: rgba(75, 141, 248, 0.92) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18) inset,
        0 0 3px 1px rgba(75, 141, 248, 0.5) !important;
}

/* Referral / PM: flat button strip inside header (same ghost look); equal width per control */
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > .btn,
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > a.btn,
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > button.btn,
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > .btn-group {
    flex: 1 1 118px;
    min-width: min(100%, 118px);
    max-width: 100%;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > .btn-group {
    display: flex;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy > .btn-group > .btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 0;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy .btn,
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy a.btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    cursor: pointer;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    line-height: 1.2;
    margin-left: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy .btn:hover:not(.delete-deal-btn):not(.btn-danger),
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy a.btn:hover:not(.delete-deal-btn):not(.btn-danger) {
    background: rgba(75, 141, 248, 0.42);
    color: #fff;
    border-color: rgba(75, 141, 248, 0.92);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18) inset,
        0 0 3px 1px rgba(75, 141, 248, 0.5);
}

/* Legacy strip: delete matches sibling buttons at rest; red on hover only */
.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy .btn-danger.delete-deal-btn:not(:disabled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    text-align: center !important;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.portlet.box.rd-deal-portlet .rd-deal-toolbar--legacy .btn-danger.delete-deal-btn:hover:not(:disabled) {
    background: rgba(127, 17, 17, 0.96) !important;
    color: #fff !important;
    border-color: rgba(255, 138, 128, 1) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.28) inset,
        0 0 6px 2px rgba(211, 47, 47, 0.65) !important;
}

.portlet>.portlet-title>.column {
    float: left;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 8px;
}

.portlet .panel-heading:after {
    content: "";
    display: table;
    clear: both;
}

.panel-default>.panel-heading .actions {
    float: right;
}

.portlet .panel-heading .dropdown-toggle {
    height: 28px;
}

.portlet-title .btn-sm {
    margin-left: 5px;
    height: 24px;
    font-size: 12px;
}

.portlet .btn,
.portlet .btn *,
.portlet a {
    cursor: pointer !important;
}

.portlet .list-group.forms .btn {
    margin-left: 5px;
}

/* Forms list: link and Edit/Delete buttons on same row, no cut-off */
.list-group.forms .list-group-item-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: visible;
}
.list-group.forms .list-group-item-form .list-group-item-form-link {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-group.forms .list-group-item-form .list-group-item-buttons {
    flex-shrink: 0;
    margin-top: 0;
    display: flex;
}
.list-group.forms .list-group-item-form .list-group-item-buttons .btn {
    margin-left: 0;
}
.list-group.forms .list-group-item-form .list-group-item-buttons .btn + .btn {
    margin-left: 5px;
}

/* Nested modals: rely on modal manager z-index stacking (Metronic backdrops are very high z-index). */



/* other */
.header {
    background-color: var(--blue) !important; 
}



/* Top nav username readability (global header) */
.header .navbar-nav > li.dropdown.user .dropdown-toggle .username {
    font-size: 16px;
    line-height: 1.2;
}

/* Vendor Expense side-panel modal typography (override abstract-modal defaults) */
#vendorExpenseSidePanel #customExpenseForm {
    font-size: 16px;
}

#vendorExpenseSidePanel #customExpenseForm .form-group label,
#vendorExpenseSidePanel #customExpenseForm .control-label {
    font-size: 14px;
}

#vendorExpenseSidePanel #customExpenseForm .form-control {
    font-size: 16px !important;
}

#vendorExpenseSidePanel #customExpenseForm .btn {
    font-size: 16px;
}

#vendorExpenseSidePanel #customExpenseForm .line-items-table th,
#vendorExpenseSidePanel #customExpenseForm .line-items-table td {
    font-size: 14px;
}

/* ==========================================================================
   Vendor module typography normalization (scoped)
   Goal: minimum 14px, normal body 16px, headings 20px+
   NOTE: Scoped to vendor module containers to avoid affecting global header/nav.
   ========================================================================== */
.unified-header-section,
.modern-vendors-container,
.vendors-list-container {
    /* Shared vendor list/dashboard variable set */
    --font-size-xxs: 14px;
    --font-size-xs: 14px;
    --font-size-sm: 14px;
    --font-size-small: 14px; /* vendors.css uses this name */

    --font-size-base: 16px;
    --font-size-normal: 16px;

    --font-size-md: 18px;
    --font-size-md-lg: 22px;
    --font-size-lg: 32px;
    --font-size-xl: 40px;
}

/* Vendor module list headers: consistent blue header + right-aligned Actions column */
.modern-vendors-container .vendors-list-header {
    background: linear-gradient(
        135deg,
        var(--blue, #0F4E92) 0%,
        var(--blue-light, #1570a6) 100%
    ) !important;
    color: #fff !important;
}

.modern-vendors-container .vendors-list-header .list-header-item,
.modern-vendors-container .vendors-list-header .list-header-item .sort-link,
.modern-vendors-container .vendors-list-header .list-header-item .sort-link:hover,
.modern-vendors-container .vendors-list-header .list-header-item .sort-icon,
.modern-vendors-container .vendors-list-header .list-header-item .sort-icon.active {
    color: #fff !important;
}

.modern-vendors-container .vendors-list-header .list-header-item .sort-icon {
    opacity: 0.85;
}

.modern-vendors-container .vendors-list-header .list-header-item .sort-link:hover .sort-icon {
    opacity: 1;
}

.modern-vendors-container .vendors-list-header .list-header-item:last-child {
    text-align: right;
    justify-self: end;
}

/* Vendor Transactions uses a real <table> header; keep it consistent with the module */
.modern-vendors-container #transactions-table thead tr {
    background: linear-gradient(
        135deg,
        var(--blue, #0F4E92) 0%,
        var(--blue-light, #1570a6) 100%
    ) !important;
}

.modern-vendors-container #transactions-table thead th,
.modern-vendors-container #transactions-table thead th a {
    color: #fff !important;
}

.modern-vendors-container #transactions-table thead .sort-icon,
.modern-vendors-container #transactions-table thead .sort-icon.active,
.modern-vendors-container #transactions-table thead .sort-link:hover .sort-icon {
    color: #fff !important;
}

.main-color {
    background-color: var(--blue) !important; 
}
.header .navbar-brand {
    color: var(--white);
}

.header .logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    float: left;
    margin-top: -5px;
}

.header .navbar-brand {
    width: auto;
    padding: 8px;
    margin-top: 8px;
    display: flex;
}

.header .navbar-nav>li.dropdown.user .dropdown-toggle {
    margin-top: 8px;
}

.header li.navbar-form {
    padding: 8px;
}

.header li.navbar-form input {
    background-color: var(--white);
    width: 320px;
}

.header #user-dropdown-menu {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .header li.navbar-form input {
        width: auto;
    }
}

.header .navbar-nav .navbar-li a {
    color: var(--white);
}

.header .navbar-nav .navbar-li a:hover,
.header .navbar-nav .navbar-li a:active,
.header .navbar-nav .navbar-li a:focus {
    background-color: #616161;
}

.header .navbar-nav li.dropdown .dropdown-toggle i {
    color: var(--white) !important;
}

.header .navbar-nav .dropdown-toggle:hover,
.header .navbar-nav .dropdown.open .dropdown-toggle {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

.header .navbar-nav li.dropdown .dropdown-toggle:hover > i,
.header .navbar-nav li.dropdown .dropdown-toggle:hover span,
.header .navbar-nav li.dropdown.open .dropdown-toggle > i,
.header .navbar-nav li.dropdown.open .dropdown-toggle span {
    color: var(--black) !important;
}

.header .navbar-nav li button {
    background-color: var(--blue);
    margin-right: 0px !important;
}

.header .navbar-brand span {
    float: left;
    margin-left: 80px;
    margin-top: -14px;
}

.header .navbar-brand span img {
    width: 35px;
}

.header.navbar-fixed-top {
    height: 50px;
}

/* Side Nav bar */
#page-sidebar {
    background-color: #486f9c !important;
}

/*
 * Realtor / broker sidebar menu scroll: thin scrollbar in a slim gutter (sidebar-scroll-host in header menus).
 * Collapsed: ul is 35px + 3px gutter; negative margin lets the gutter sit on the page seam (not over icons).
 */
#page-sidebar .sidebar-scroll-host {
    min-height: 100vh;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

#page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.35) rgba(230, 236, 241, 0.88);
}

#page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu::-webkit-scrollbar {
    width: 3px;
}

#page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu::-webkit-scrollbar-track {
    background: rgba(230, 236, 241, 0.95);
    border-radius: 2px;
}

#page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

#page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
    .page-sidebar-closed #page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu {
        width: calc(35px + 3px) !important;
        max-width: none !important;
        margin-right: -3px !important;
        background: linear-gradient(
            to right,
            #486f9c 0,
            #486f9c 35px,
            rgba(230, 236, 241, 0.98) 35px,
            rgba(230, 236, 241, 0.98) 100%
        );
    }
}

body:not(.page-sidebar-closed) #page-sidebar .sidebar-scroll-host > ul.page-sidebar-menu {
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    background: transparent;
}

.sidebar-toggler {
    background-image: none !important;
    background-color: #486f9c !important;
    border-bottom: 1px solid #e2e2e2 !important;
    color: var(--black) !important;
    cursor: pointer; 
    width: 100%;
    padding: 10px 15px;
}

ul.page-sidebar-menu>li a i,
ul.page-sidebar-menu>li>a,
ul.page-sidebar-menu ul.sub-menu>li>a,
ul.page-sidebar-menu ul.sub-menu>li>a i {
    color: var(--white) !important;
}

ul.page-sidebar-menu li.open>a i,
ul.page-sidebar-menu>li:hover>a i,
ul.page-sidebar-menu ul.sub-menu>li:hover>a,
ul.page-sidebar-menu ul.sub-menu>li:hover>a i {
    color: var(--black) !important;
}

ul.page-sidebar-menu ul.sub-menu>li>a:hover {
    background: var(--white) !important;
}

ul.page-sidebar-menu li.open>a,
ul.page-sidebar-menu>li:hover>a,
ul.page-sidebar-menu ul.sub-menu>li.open>a,
ul.page-sidebar-menu ul.sub-menu>li.open>a i {
    color: var(--black) !important;
    background: var(--white) !important;
}

/* Realsign — NEW badge: same row as FA icons (left), readable in collapsed rail */
ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a > i,
ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a > .esign-new-sidebar-badge {
    flex-shrink: 0;
    margin-right: 5px;
}

ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a > .title {
    flex: 1 1 auto;
    min-width: 0;
}

ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a > .esign-new-sidebar-badge {
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    vertical-align: middle;
}

@media (min-width: 992px) {
    .page-sidebar-closed .page-sidebar-menu.realtor-sidebar > li[data-track-label="e-sign-menu"]:not(.sidebar-flyout-active) > a,
    .page-sidebar-closed .page-sidebar-menu.broker-sidebar-menu > li[data-track-label="e-sign-menu"]:not(.sidebar-flyout-active) > a {
        justify-content: center;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .page-sidebar-closed .page-sidebar-menu > li[data-track-label="e-sign-menu"]:not(.sidebar-flyout-active) > a > .esign-new-sidebar-badge {
        margin-right: 0;
        font-size: 8px !important;
        padding: 1px 4px !important;
        line-height: 1.15;
        height: auto;
        max-width: 31px;
        box-sizing: border-box;
        text-align: center;
        white-space: nowrap;
    }
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active[data-track-label="e-sign-menu"] > a > i,
.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active[data-track-label="e-sign-menu"] > a > i {
    color: var(--black) !important;
}

/* RealSign: black row on hover (overrides global white top-level hover above) */
ul.page-sidebar-menu li[data-track-label="e-sign-menu"]:hover > a,
ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

ul.page-sidebar-menu li[data-track-label="e-sign-menu"]:hover > a i,
ul.page-sidebar-menu li[data-track-label="e-sign-menu"]:hover > a .title,
ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a:hover i,
ul.page-sidebar-menu li[data-track-label="e-sign-menu"] > a:hover .title {
    color: #000000 !important;
}

ul.page-sidebar-menu>li>a>.arrow::before,
ul.page-sidebar-menu>li>a>.arrow.open::before {
    color: inherit !important;
}

/* Body styles */

.page-sidebar-fixed .page-content {
    background: linear-gradient(rgba(15, 78, 146, 0.2), rgba(3, 132, 119, 0.4));
}

.has-error {
    border-color: #b94a48;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.has-error-realtors,
.has-error-clients {
    border-color: #ff3300;
    border-width: 2px;
    background-color: #f0dddd40;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.has-error-realtors-label,
.has-error-clients-label {
    color: #ff3300;
    font-weight: 600;
}

/* Add Client Hide Realtor Options Start*/
.panel.panel-default > .panel.panel-heading:nth-child(1) {
    border-top: none;
}

#realtor-dropdown option.hide {
    display: none;
}

#co-realtor-dropdown option.hide {
    display: none;
}

/* Add Client Hide Realtor Options End*/

/* Edit Client Hide Realtor Options Start*/
#realtorId option.hide {
    display: none;
}

#coRealtorId option.hide {
    display: none;
}

/* Edit Client Hide Realtor Options End*/

.pointer {
    cursor: pointer;
}

.pointer-important {
    cursor: pointer !important;
}

.pointer a {
    color: inherit;
}

.pointer a:hover {
    text-decoration: none;
}

/* Sort indicators (used across list/report tables) */
.order-table:hover {
    opacity: 0.5;
    color: #1da489;
}

.order-table.asc::after {
    font: normal normal normal 14px/1 FontAwesome;
    color: #1da489;
    content: ' \f106';
}

.order-table.desc::after {
    font: normal normal normal 14px/1 FontAwesome;
    color: #1da489;
    content: ' \f107';
}

/* Same sort chevrons as .order-table (e.g. PM Expenses “Add Expenses” grid) */
.add-order-table:hover {
    opacity: 0.5;
    color: #1da489;
}

.add-order-table.asc::after {
    font: normal normal normal 14px/1 FontAwesome;
    color: #1da489;
    content: ' \f106';
}

.add-order-table.desc::after {
    font: normal normal normal 14px/1 FontAwesome;
    color: #1da489;
    content: ' \f107';
}

.cursor-default {
    cursor: default;
}

.cursor-notAllowed-default {
    cursor: not-allowed;
}

.cursor-notAllowed {
    cursor: not-allowed;
    pointer-events: none;
}

.panel-body>.table {
    margin-bottom: 0;
}

.panel-body>.panel:last-of-type {
    margin-bottom: 0;
}

#task-list .completed {
    text-decoration: line-through;
}

#task-list,
#task-list table,
#task-list label {
    font-size: 13px !important;
}

#task-list .task-link {
    color: inherit;
    text-decoration: underline;
}

#task-list .task-link.completed {
    text-decoration: line-through;
}

#task-list .task-link:hover {
    color: #23527c;
    text-decoration: underline;
}

#task-list .task-link.completed:hover {
    text-decoration: line-through;
}

.panel-heading {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-heading:after {
    content: "";
    display: table;
    clear: both;
}

.panel-subheading {
    color: var(--white);
    background: #337ab7;
    padding: 0 15px 10px;
}

.btn-sm {
    height: 28px;
    font-size: 12px;
}

.btn-blue-component {
    color: #337ab7 !important;
    border-color: #337ab7 !important;
}

.page-content .page-header {
    margin: 0 0 15px 0;
    /* Override Bootstrap .page-header { border-bottom: 1px solid #eee } */
    border-bottom: none;
    box-shadow: none;
}

body.page-menu-none .page-content {
    margin: 0 auto;
    max-width: 1064px;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4 {
    margin: 0;
}

/* modals */
.modal.modal-600 .modal-dialog {
    width: 600px;
}

.modal.modal-800 .modal-dialog {
    width: 800px;
}

@media (max-width: 800px) {
    .modal.modal-800 .modal-dialog {
        width: auto;
        margin: 10px;
    }
}

.modal.modal-1000 .modal-dialog {
    width: 1000px;
}

@media (max-width: 1000px) {
    .modal.modal-1000 .modal-dialog {
        width: auto;
        margin: 10px;
    }
}

.modal.modal-1200 .modal-dialog {
    width: 1200px;
}

@media (max-width: 1200px) {
    .modal.modal-1200 .modal-dialog {
        width: auto;
        margin: 10px;
    }
}

/* collapsible panels */
.panel-collapsible>.panel-heading {
    cursor: pointer;
    position: relative;
}

.panel-collapsible>.panel-heading:after {
    position: absolute;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    content: "\f078";
    right: 10px;
    top: 12px;
    color: var(--white);
    margin-top: 0;
}

.panel-collapsible>.panel-heading.collapsed:after {
    content: "\f054";
}

/* helpers */
.scroll-y {
    overflow-y: auto !important;
}

.scroll-x {
    overflow-x: auto !important;
}

@media (max-width: 992px) {
    .mobile-hide {
        display: none;
    }
}

/** Margin all */
.margin-0 {
    margin: 0 !important;
}

.margin-5 {
    margin: 5px !important;
}

.margin-10 {
    margin: 10px !important;
}

.margin-15 {
    margin: 15px !important;
}

.margin-20 {
    margin: 20px !important;
}

.margin-25 {
    margin: 25px !important;
}

.margin-30 {
    margin: 30px !important;
}

.margin-40 {
    margin: 40px !important;
}

.margin-50 {
    margin: 50px !important;
}

.margin-60 {
    margin: 60px !important;
}

.margin-70 {
    margin: 70px !important;
}

.margin-80 {
    margin: 80px !important;
}

.margin-90 {
    margin: 90px !important;
}

.margin-100 {
    margin: 100px !important;
}

/** Margin top */
.margin-top-0 {
    margin-top: 0 !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-25 {
    margin-top: 25px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-top-40 {
    margin-top: 40px !important;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-top-60 {
    margin-top: 60px !important;
}

.margin-top-70 {
    margin-top: 70px !important;
}

.margin-top-80 {
    margin-top: 80px !important;
}

.margin-top-90 {
    margin-top: 90px !important;
}

.margin-top-100 {
    margin-top: 100px !important;
}

/** Margin right */
.margin-right-0 {
    margin-right: 0 !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-20 {
    margin-right: 20px !important;
}

.margin-right-25 {
    margin-right: 25px !important;
}

.margin-right-30 {
    margin-right: 30px !important;
}

.margin-right-40 {
    margin-right: 40px !important;
}

.margin-right-50 {
    margin-right: 50px !important;
}

.margin-right-60 {
    margin-right: 60px !important;
}

.margin-right-70 {
    margin-right: 70px !important;
}

.margin-right-80 {
    margin-right: 80px !important;
}

.margin-right-90 {
    margin-right: 90px !important;
}

.margin-right-100 {
    margin-right: 100px !important;
}

.margin-right-15-inverse {
    margin-right: -15px !important;
}

/** Margin bottom */
.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-25 {
    margin-bottom: 25px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

.margin-bottom-60 {
    margin-bottom: 60px !important;
}

.margin-bottom-70 {
    margin-bottom: 70px !important;
}

.margin-bottom-80 {
    margin-bottom: 80px !important;
}

.margin-bottom-90 {
    margin-bottom: 90px !important;
}

.margin-bottom-100 {
    margin-bottom: 100px !important;
}

/** Margin left */
.margin-left-0 {
    margin-left: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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


/** Padding all */
.padding-0 {
    padding: 0 !important;
}

.padding-5 {
    padding: 5px !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-15 {
    padding: 15px !important;
}

.padding-20 {
    padding: 20px !important;
}

.padding-25 {
    padding: 25px !important;
}

.padding-30 {
    padding: 30px !important;
}

.padding-40 {
    padding: 40px !important;
}

.padding-50 {
    padding: 50px !important;
}

.padding-60 {
    padding: 60px !important;
}

.padding-70 {
    padding: 70px !important;
}

.padding-80 {
    padding: 80px !important;
}

.padding-90 {
    padding: 90px !important;
}

.padding-100 {
    padding: 100px !important;
}

/** Padding top */
.padding-top-0 {
    padding-top: 0 !important;
}

.padding-top-5 {
    padding-top: 5px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-15 {
    padding-top: 15px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-25 {
    padding-top: 25px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-top-40 {
    padding-top: 40px !important;
}

.padding-top-50 {
    padding-top: 50px !important;
}

.padding-top-60 {
    padding-top: 60px !important;
}

.padding-top-70 {
    padding-top: 70px !important;
}

.padding-top-80 {
    padding-top: 80px !important;
}

.padding-top-90 {
    padding-top: 90px !important;
}

.padding-top-100 {
    padding-top: 100px !important;
}

/** Padding right */
.padding-right-0 {
    padding-right: 0 !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-15 {
    padding-right: 15px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-25 {
    padding-right: 25px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.padding-right-40 {
    padding-right: 40px !important;
}

.padding-right-50 {
    padding-right: 50px !important;
}

.padding-right-60 {
    padding-right: 60px !important;
}

.padding-right-70 {
    padding-right: 70px !important;
}

.padding-right-80 {
    padding-right: 80px !important;
}

.padding-right-90 {
    padding-right: 90px !important;
}

.padding-right-100 {
    padding-right: 100px !important;
}

/** Padding bottom */
.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-bottom-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-15 {
    padding-bottom: 15px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-25 {
    padding-bottom: 25px !important;
}

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.padding-bottom-40 {
    padding-bottom: 40px !important;
}

.padding-bottom-50 {
    padding-bottom: 50px !important;
}

.padding-bottom-60 {
    padding-bottom: 60px !important;
}

.padding-bottom-70 {
    padding-bottom: 70px !important;
}

.padding-bottom-80 {
    padding-bottom: 80px !important;
}

.padding-bottom-90 {
    padding-bottom: 90px !important;
}

.padding-bottom-100 {
    padding-bottom: 100px !important;
}

/** Padding left */
.padding-left-0 {
    padding-left: 0 !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-15 {
    padding-left: 15px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-22 {
    padding-left: 22px !important;
}

.padding-left-25 {
    padding-left: 25px !important;
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-left-40 {
    padding-left: 40px !important;
}

.padding-left-50 {
    padding-left: 50px !important;
}

.padding-left-60 {
    padding-left: 60px !important;
}

.padding-left-70 {
    padding-left: 70px !important;
}

.padding-left-80 {
    padding-left: 80px !important;
}

.padding-left-90 {
    padding-left: 90px !important;
}

.padding-left-100 {
    padding-left: 100px !important;
}

/*** Alignment classes */
.align-center {
    text-align: center;
}

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

.align-right {
    text-align: right;
}

.align-start {
    text-align: start;
}

.align-end {
    text-align: end;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.padding-left-16 {
    padding-left: 16px;
}

.min-width-180 {
    min-width: 180px;
}

.max-width-33-p {
    max-width: 33%;
}

.max-width-1024 {
    max-width: 1024px;
}

.max-width-1080 {
    max-width: 1080px;
}

.max-width-1254 {
    max-width: 1254px;
}

.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}

.float-none {
    float: none;
}

.top-30 {
    top: 30% !important;
}

.nav-pills>li a {
    color: var(--black);
}

.nav-pills>li.secondary-active {
    background-color: #5bc0de;
    border-color: #46b8da;
    border-radius: 5px;
}

.nav-pills>li.secondary-active a {
    color: var(--white);
}

.nav-pills>li.secondary-active:focus a {
    color: var(--white);
}
.nav-pills>li.secondary-active:hover a,
.nav-pills>li.secondary-active a:focus {
    background-color: #5bc0de;
    border-color: #46b8da;
}

/*Date Range Picker*/
.daterangepicker .calendar-time {
    text-align: center;
    margin: 5px auto;
    line-height: 30px;
    position: relative;
    padding-left: 5px;
}

.daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.daterangepicker .calendar-time div {
    float: right;
    margin-right: 15px;
}

.daterangepicker .calendar-time i {
    float: left;
    margin-top: 7px;
}

.formError {
    color: #FF0000;
}

.padding-top-15 {
    padding-top: 15px;
}

.margin-top-15 {
    margin-top: 15px;
}

.min-height-49 {
    min-height: 49px;
}

.height-49 {
    height: 49px;
}

.height-72 {
    height: 72px;
}

.height-500 {
    height: 500px;
}

span.qtr {
    margin-left: 50px;
}

.aspect {
    height: 0;
    overflow: hidden;
    position: relative;
}

.aspect img,
.aspect iframe {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-16_9 {
    /*padding-top: 9px / 16px * 100%;*/
    padding-top: 56.25%;
}

.aspect-4_3 {
    /*padding-top: 3px / 4px * 100%;*/
    padding-top: 75%;
}

.font-size-18 {
    font-size: 18px !important;
}

.font-size-14,
.font-size-14 td,
.font-size-14 th {
    font-size: 14px;
}

.font-size-12,
.font-size-12 td,
.font-size-12 th {
    font-size: 12px;
}

.font-weight-bold,
.font-weight-bold td {
    font-weight: bold;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.pointer-events-auto {
    pointer-events: auto;
}

.explanatory-text {
    font-size: 16px;
    line-height: 1.75em;
}

#key-monthly-form th {
    width: 10%;
}

#key-monthly-form tfoot td {
    width: 10%;
}

#key-annual-form th,
#key-annual-form tfoot td {
    width: 10%;
}

#key-monthly-form tfoot td,
#key-annual-form tfoot td {
    background-color: #eee;
}

#key-monthly-form tfoot>tr:last-child>td,
#key-annual-form tfoot>tr:last-child>td {
    background-color: var(--white);
}

.panel>table.business-plan.table-bordered>tbody>tr:last-child>td {
    border-bottom: 1px solid #ddd;
}

.panel>table.business-plan.table-bordered>tfoot>tr>td:last-child {
    border-right: 1px solid #ddd;
}

.panel>table.business-plan.table-bordered>tfoot>tr>td:first-child {
    border-left: 1px solid #ddd;
}

.panel>table.business-plan.table-bordered>tfoot>tr:last-child>td {
    border-left: 0;
}

.panel>table.business-plan.table-bordered>tfoot>tr:last-child>td {
    border-right: 0;
}

table.business-plan tfoot.fixed {
    position: fixed;
    margin-right: 20px;
    bottom: 0;
    background-color: var(--white);
    z-index: 3000;
    margin-left: -1px;
    max-width: 1024px;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}


#all-plans .panel-heading a {
    margin-right: 30px;
}

#all-plans .panel-heading .actions span,
#all-plans .panel-heading .actions a {
    margin-left: 10px;
}

#all-plans label[for=firstname] {
    margin-bottom: 10px;
}

#final-businessplan p {
    margin-bottom: 20px;
}

/* highlight results */
.ui-autocomplete span.hl_results {
    background-color: #ffff66;
}


/* scroll results */
.ui-autocomplete {
    max-height: 250px;
    max-width: 350px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding for vertical scrollbar */
    padding: 0 15px;
    display: inline-block;
    border: 1px solid #999;
    background: var(--white);
}

.ui-autocomplete li {
    font-size: 16px;
    list-style: none;
}

.ui-helper-hidden-accessible {
    display: none;
}

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 250px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.table-layout {
    table-layout: fixed;
}

.width-35per {
    width: 35%;
}

.width-60per {
    width: 60%;
}

.width-100per {
    width: 100%;
}

.footer-debug {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.footer-queries {
    max-height: 320px;
    overflow: auto;
}

/* footer help */
.help-footer-icon {
    position: fixed;
    right: 32px;
    bottom: 32px;
    cursor: pointer;
    z-index: 5000;
}

.help-footer-icon .tooltip {
    margin-top: -24px;
    width: 64px;
}

.help-footer-icon .icon:before {
    content: "\f059";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 40px;
    color: var(--black);
}

.help-footer-icon:hover .icon:before {
    color: #0fa2e2;
}

.help-footer-icon.open .icon:before {
    content: "\f057";
}

.help-footer {
    position: fixed;
    bottom: 78px;
    right: 32px;
    text-align: right;
    display: none;
    z-index: 5001;
}

.help-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-footer ul li {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    font-size: 13px;
}

.help-footer ul li .fa {
    font-size: 24px;
    color: var(--white);
}

.help-footer li span {
    background-color: var(--black);
    color: var(--white);
    padding: 8px 8px;
    border-radius: 8px !important;
    display: inline-block;
    margin-right: 4px;
}

.help-footer li:hover span {
    background-color: #0fa2e2;
}

.help-footer.open {
    display: block;
}

.help-footer-animation {
    position: fixed;
    right: 115px;
    bottom: 32px;
    z-index: 4999;
    color: var(--black);
    font-size: 22px;
    width: 280px;
    background-color: rgba(240, 240, 240, 0.95);
    padding: 24px;
    border-radius: 8px !important;
    animation: helpSlide 1000ms linear infinite;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

.help-footer-animation.out {
    opacity: 0;
}

@keyframes helpSlide {
    0% {
        right: 115px;
    }

    30% {
        right: 110px;
    }

    50% {
        right: 110px;
    }

    80% {
        right: 115px;
    }

    100% {
        right: 115px;
    }
}


.help-footer-animation .arrow {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid rgba(240, 240, 240, 0.95);
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 -20px 11px 0;
}

.font-size-large {
    font-size: 125%;
}

.page-break {
    page-break-after: always;
    page-break-inside: avoid;
}

.page-no-break {
    page-break-inside: avoid;
}

/* print pdf */
body.pdf thead {
    display: table-header-group;
}

body.pdf tfoot {
    display: table-row-group;
}

body.pdf tr {
    page-break-inside: avoid;
}

body.pdf {
    margin: 0;
    padding: 0;
}

body.pdf .content {
    background-color: var(--white);
    padding: 16px;
}

body.pdf .col-sm-12,
body.pdf .col-sm-11,
body.pdf .col-sm-10,
body.pdf .col-sm-9,
body.pdf .col-sm-8,
body.pdf .col-sm-7,
body.pdf .col-sm-6,
body.pdf .col-sm-5,
body.pdf .col-sm-4,
body.pdf .col-sm-3,
body.pdf .col-sm-2,
body.pdf .col-sm-1 {
    float: left;
}

body.pdf .col-sm-12 {
    width: 100%;
}

body.pdf .col-sm-11 {
    width: 91.66666667%;
}

body.pdf .col-sm-10 {
    width: 83.33333333%;
}

body.pdf .col-sm-9 {
    width: 75%;
}

body.pdf .col-sm-8 {
    width: 66.66666667%;
}

body.pdf .col-sm-7 {
    width: 58.33333333%;
}

body.pdf .col-sm-6 {
    width: 50%;
}

body.pdf .col-sm-5 {
    width: 41.06666667%;
}

body.pdf .col-sm-4 {
    width: 33.33333333%;
}

body.pdf .col-sm-3 {
    width: 25%;
}

body.pdf .col-sm-2 {
    width: 16.66666667%;
}

body.pdf .col-sm-1 {
    width: 8.33333333%;
}

/* PDF small */
body.pdf .pdf-small,
body.pdf .pdf-small td,
body.pdf .pdf-small th {
    font-size: 90%;
}

body.pdf .pdf-small td,
body.pdf .pdf-small th {
    padding: 4px;
}

body.pdf .pdf-small .panel-title {
    font-size: 100%;
}

body.pdf .pdf-small .panel-body {
    padding: 8px;
}

#eft_payments-search.list-autocomplete {
    width: 100%;
}

#general_balance {
    border-radius: 0;
}

/* Cheque # input beside .input-group-addon (e.g. payment modal); do not use bare #check_number — it breaks standalone filters (e.g. print_checks). */
.input-group #check_number {
    border-radius: 0 5px 5px 0;
}

.easy-autocomplete-container .active {
    color: #084298;
}

#lead-unified-search.list-autocomplete {
    width: 100%;
}

form.feedback input[type='submit'],
form.testimonial input[type='submit'] {
    margin-top: 27px;
}

/* fix mobile modal width */
@media (max-width: 800px) {
    .modal .modal-dialog {
        width: auto;
        margin: 10px;
    }

    .header .navbar-brand {
        width: auto;
    }

    .footer .footer-debug.footer-inner {
        display: none;
    }
}

label.required {
    color: red;
}

.error {
    color: red;
}

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-1 {
    font-size: 1rem !important;
}

.font-size-large,
.font-size-16 {
    font-size: 16px;
}


.dropzone-over {
    background-color: #d9edf7 !important;
}

.font-size-extra-large {
    font-size: 20px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-30 {
    font-size: 30px;
}

.font-size-40 {
    font-size: 40px;
}
/**
 * Position helpers, MT stands for margin-top
 */

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}


.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-50 {
    margin-top: 50px;
}

.ml-20 {
    margin-Left: 20px;
}

.ml-10 {
    margin-Left: 10px;
}

.ml-3 {
    margin-left: 3px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mr-10 {
    margin-right: 1rem;
}

.pt-5 {
    padding-top: 5px;
}

#associateModal {
    min-height: 400px;
}

#associateModal a {
    /* background-color: #5cb85c;
   border-color: #4cae4c; */
    /* color: var(--white); */
    font-weight: bolder;
}

.associateFlex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.officeOptGroupDropdown .select2-container .select2-selection--single {
    height: 34px;
}

/*is logo attchaed checkbox style*/
.logoCheckboxBlock {
    padding: 26px 0px;
}

.logoCheckboxBlock label {
    padding-right: 6px;
}

#header-search .easy-autocomplete-container li {
    padding: 2px;
}

#header-search .easy-autocomplete-container li .alert {
    margin-bottom: 2px;
}

#header-search .easy-autocomplete-container li .eac-item {
    margin-top: 0;
}

.color-orangered {
    color: orangered;
}

.color-orange {
    color: orange;
}

.color-grey {
    color: grey;
}

.color-lightsteelblue {
    color:lightsteelblue;
}

.cursor-pointer {
    cursor: pointer;
}

.ghost-text {
    opacity: 0.5;
}

.phantom-text {
    opacity: 0.2;
}

.btn-ghost {
    opacity: 0.5;
    border: 1px solid #ccc;
    color: black;
    
}

/***
 * Override for the Font Selector on the Print Cheque screen
 */
.font-select {
    width: 200px !important;
}

.realtor-email-edit-icon {
    padding-left: 10px;
    cursor: pointer;
}

.inputBlock span i {
    color: #0d97d4;
    font-size: 2.5rem;
    margin-top: 10px;
    cursor: pointer;
}

.padding-left-0 {
    padding-left: 0px;
}

.header-note {
    color: var(--white);
    margin-top: 15px;
    font-size: 15px;
}


.center-middle-row td {
    vertical-align: middle !important;
}


.color-green,
td .color-green {
    color: green !important;
}

.color-red,
td .color-red {
    color: red;
}

.color-black {
    color: var(--black) !important;
}

.color-greenlight {
    color: rgb(30, 202, 108);
}

.color-darkseagreen {
    color: darkseagreen;
}

.color-greenemerald {
    color: #32b89d;
}

.color-bluepearl {
    color: rgb(6, 6, 219);
    opacity: 0.4;
}

.color-primary-blue {
    color: #337ab7;
    opacity: 1;
}

.color-yellow {
    color: rgb(211, 201, 10);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* This class will create sticky element at the bottom of the page */
/* Note: this class can't be together with col-md-XXX - this class removes values from the element */
.fixed_save_bottom_css {
    bottom: 0;
    position: fixed;
    font-weight: bold;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    box-shadow: 0px 4px 3px var(--black) !important;
    z-index: 9999;
    transition: border 0.1s linear;
}

.fixed_save_bottom::before {
    font-family: FontAwesome;
    content: "\f0c7";
    margin-right: 5px;
}

.fixed_center_bottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.fixed_save_bottom_css:hover {
    border: 2px dashed transparent;
}

.ellipsisb {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.imitateA {
    color: #0d638f;
    cursor: pointer;
}

.imitateA:hover {
    text-decoration: underline;
}

.discardEmailAction {
    color: red;
    cursor: pointer;
    z-index: 200;
    font-size: 1.8rem;
    right: 8px;
    top: -7px;
    background-color: var(--white);
}

.display-block {
    display: block;
}

.display-inline {
    display: inline;
}

.display-inline-block {
    display: inline-block;
}

/* Tables */

.subtotal_table {
    background-color: #eee;
    font-weight: bold;

}

.visually-hidden {
    visibility: hidden;
}


.cursor-pointer {
    cursor: pointer;
}

.gap-2 {
    gap: 2px;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.d-flex {
    display: flex
}

.flex-1 {
    flex: 1;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-column {
    flex-direction: column;
}

.flex-align-center {
    align-items: center;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-align-baseline {
    align-items: baseline;
}

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

.flex-justify-end {
    justify-content: flex-end;
} 

.flex-justify-space-between {
    justify-content: space-between;
}

.flex-justify-space-around {
    justify-content: space-around;
}

.flex-justify-space-evenly {
    justify-content: space-evenly;
}

.flex-justify-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}


.col-0-5 {
    flex: 0 0 auto;
    width: 4.16666666666%
}

.col-0-7 {
    flex: 0 0 auto;
    width: 6.16666666666%
}

.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
}


.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
}

.d-inline-block {
    display: inline-block;
}

/* Add font awesome icon to user settings save button  */
.realtor_save_button::before {
    font-family: FontAwesome;
    content: "\f0c7";
    margin-right: 5px;
}

#printInvoiceDropdown,
#transactionDropdown,
#trsDropdown {
    border-radius: 5px;
}



#conveyance_group_dropdown .dropdown-item,
#transaction_group_dropdown .dropdown-item,
#print_invoice_group_dropdown .dropdown-item,
#trs_group_dropdown .dropdown-item {
    display: block;
    color: var(--black);
    border: 1px solid transparent;
    font-size: 1.2rem;
    padding: 3px;
}

/* leads_unified: invoice dropdown readability (avoid cramped/overlapping items) */
#print_invoice_group_dropdown .dropdown-menu {
    min-width: 260px;
    /* Align the dropdown menu to the right edge of the button (Bootstrap-version agnostic) */
    right: 0;
    left: auto;
}

#trs_group_dropdown .dropdown-menu {
    min-width: 260px;
    right: 0;
    left: auto;
}

#print_invoice_group_dropdown .dropdown-item {
    line-height: 1.4;
    white-space: normal;
}

#trs_group_dropdown .dropdown-item {
    line-height: 1.4;
    white-space: normal;
}

#conveyance_group_dropdown .dropdown-item:hover,
#transaction_group_dropdown .dropdown-item:hover,
#print_invoice_group_dropdown .dropdown-item:hover,
#trs_group_dropdown .dropdown-item:hover {
    background-color: lightgrey;
    text-decoration: #616161;
}

#amount_to_be_paid {
    border-radius: 0;
}

.font-weight-bold,
.fw-bold,
.font-weight-bold td {
    font-weight: bold;
}

.color-red,
.color-red td {
    color: var(--red);
}

.ellipsisb {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.imitateA {
    color: #0d638f;
    cursor: pointer;
}

.imitateA:hover {
    text-decoration: underline;
}

.discardEmailAction {
    color: red;
    cursor: pointer;
    z-index: 200;
    font-size: 1.8rem;
    right: 8px;
    top: -7px;
    background-color: var(--white);
}

.animateTo {
    cursor: pointer;
}

.waverBorder {
    border: 1.2px solid transparent;
    animation: waves 3s linear infinite;
}

@keyframes waves {
    0% {
        border-top: 1.2px transparent double
    }

    20% {
        border-top: 1.2px goldenrod double
    }

    40% {
        border-right: 1.5px goldenrod double
    }

    60% {
        border-bottom: 1.5px goldenrod double
    }

    80% {
        border-left: 1.2px goldenrod double
    }
}

#transactionRoomReviewReason {
    display: block;
    white-space: pre-wrap;
    line-height: normal;
    text-align: left;
}

.color-black {
    color: #1f1f1f;
}

.color-darkblue {
    color: #1570a6;
}

.color-lightblue {
    color: #4aabf9;
}

.color-primary {
    color: #337ab7;
}

.background-primary {
    background-color: #337ab7 !important;
}

.color-red {
    color: #eb4d41;
}

.color-darkred {
    color: #E50000;
}

.color-green {
    color: #28b779;
}

.color-green-glow {
    color: #32B89D !important;
}

.color-lightgray {
    color: lightgray;
}

/* Expense Manager */
.remove_expense_manager_row {
    background: #5bc0de !important;
    opacity: 0.8;
    color: var(--white);
}

.anchor_imitate {
    color: #0d638f !important;
    cursor: pointer;
    text-shadow: none !important;
}

/* Used to style the panels in the transaction room */
.flex-panel {
    display: flex;
    flex-direction: column;
}

.dropzone.dz-drag-hover {
    background-color: #eee;
    border: 2px solid rgba(1, 1, 1, 1);
}

/* Used to style the forms in the transaction room */
#transaction-room-forms .form-label.required {
    color: red;
}

#transaction-room-forms .list-group-item.active .form-label.required {
    color: var(--white);
}

/* Void Payments */
.void_payment {
    color: red !important;
    cursor: help;
}

.disable_behaviour {
    pointer-events: none;
}

/* Pulsing Menu Item */

.pulsing-menu-item {
    animation: glow 1s infinite alternate;
    margin-left: 5px !important;
    margin-right: 5px !important;
    border-radius: 10px !important;
}

.pulsing-menu-item>a {
    margin-left: -5px !important;
    margin-right: -5px !important;
}

.pulsing-menu-item>a:hover>i {
    margin-left: -7px !important;
}

.pulsing-menu-item>a:hover>span {
    margin-right: -6px !important;
}

.pulsing-menu-item>a:hover {
    margin-left: 2.5px !important;
    margin-right: 2.5px !important;
    border-radius: 10px !important;
}

@keyframes glow {
    from {
        box-shadow: 0 0 2px -2px #f4a6a0, 0 0 2px -2px #f4a6a0 inset;
    }

    to {
        box-shadow: 0 0 2px 2px #f4a6a0, 0 0 2px 2px #f4a6a0 inset;
    }
}

.font-awesome-precentage:after {
    content: "\f295";
    font-family: FontAwesome;
    font-weight: 200;
}

.dataTables_wrapper input,
.dataTables_wrapper input:focus-visible,
.dataTables_wrapper input:focus {
    margin-left: 10px;
    border-style: solid;
    outline: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#datatables-utils {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dt-buttons {
    order: 2;
}

.buttons-excel {
    margin-left: 5px!important;
    border-radius: 5px!important;
}

.buttons-pdf {
    margin-left: -20px!important;
    margin-right: 5px!important;
    border-radius: 5px!important;
}

.report_chosen {
    width: 100%;
}

#display_income_account .form-group .checkbox{
    padding-left: 25px;
}

#display_income_account .multiselect-container{
    width: 100% !important;
}

#display_income_account .dropdown-toggle{
    overflow: hidden !important;
}

.brokerage-report-info-ar{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Monthly Reconciliation Button */
.monthly-report-button {
    pointer-events: none;
}

.monthly-report-button-div {
    display: inline-block;
}

/* Lawyer */
.display_lock_conveyance {
    color: red;
    opacity: 0.2;
    font-size: 20vh;
    position: absolute;
    top: 30%;
    left: 20%;
    transform: rotate(-45deg);
}

#eft_settings {
    cursor: pointer;
}

#lawyers-filter-list {
    height: 210px;
}

#filterByLawyer #search {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.tabs-background li.active a,
.tabs-background li.active a:focus,
.tabs-background li.active a:hover {
    color: var(--white);
    background: rgb(51, 122, 183);
}

.tabs-background li a {
    color: var(--black);
}

/*Seetings*/

.EFT_ZUM_CC_ENABLED_LINE {
    padding-top: 30px;
    border-top: 1px solid rgba(232, 232, 232, 1);
}

/* Used to style the e-sign promo page */
.card-col {
    padding: 40px;
}

.card-row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.card-title {
    font-size: 18px;
    font-weight: 600 !important;
}

.card-container {
    margin: 40px;
}

.card-header {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-card {
    box-shadow: 0px 10px 19px rgba(163, 172, 186, 0.364756);
    border-radius: 5px !important;
    height: 100%;
}

.promo-card img {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.promo-text-div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-card-text {
    padding: 10px;

}

.promo-text {
    height: 350px;
    text-align: center;
    font-size: medium;
}

.required-icon {
    color: #ff3300;
}

.required-icon i {
    margin-left: 5px;
    font-size: 10px;
}

.form-scroll-div {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Used to style the esign form modal */

.esign-form-link {
    width: 100%;
    padding-bottom: 10px;
}

#esignImportModal {
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

#esignImportModalSignup {
    max-height: 60vh;
}

#esignDownloadButton {
    float: right;
}

#esignDownloadButton i {
    font-size: 1.5em !important;
    color: #a3aab5;
    display: none;
}

#esignFormLeftSpan {
    float: left;
}

#esignFormDocumentImg i {
    font-size: 1.5em !important;
    margin-right: 5px;
    color: #a3aab5;
}

#esignSessionDiv {
    box-shadow: 0px 7px 12px rgba(163, 172, 186, .7);
    padding: 20px;
    margin-bottom: 20px;
}

#esignSearchDiv {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
}

#esignSearchDiv::after {
    content: "";
    clear: both;
    display: table;
}

#esignFormSearch {
    float: left;
    width: 90%;
    font-size: 16px;
    padding: 12px 20px 12px 12px;
    border: 1px solid #a5a5a5;
}

#esignFormSearchBtn {
    float: left;
    width: 10%;
}

#esignNotSignedUpDiv,
#esignNoRecordsDiv {
    text-align: center;
}

#esignSessionLabel {
    letter-spacing: .5px;
    color: var(--white);
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 600;
    float: left;
    text-transform: uppercase;
    background-color: #0f62bd;
}

#esignDateLabel {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    float: left;

}

.border-none {
    border: none;
}

.border-radius-5 {
    border-radius: 5px !important;
}

.border-radius-10 {
    border-radius: 10px !important;
}

/* Hide Arrows on type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.silver-shadow {
    box-shadow: silver 2px 2px 5px !important;
}


/* slides */

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 50px;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    margin: 0px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--white);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.cursor-notAllowed-auto-recovery {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
    border-radius: 5px;
    padding: 5px;
}

.background-linear-blue {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.background-linear-red {
    background-color: #ec0c0c;
    background-image: linear-gradient(160deg, #ec0c0c 0%, #f9e4e4 100%);
}

.background-linear-gray {
    background-color: #4b4949;
    background-image: linear-gradient(160deg, #4b4949 0%, #f9e4e4 100%);

}

.LoaderSpinner>i {
    margin-right: 5px;
}

/* User account dropdown header menu */

/* Brokerage Activity Page table */
#trade_record_table {
    overflow: auto;
}

#trade_record_table tbody {
    background: var(--white);
}

/* Conveyance button on deals page */
#conveyanceDropdown {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.background-emerald {
    background-color: #32b89d !important;
    color: var(--white);
}

.background-primary {
    background-color: #337ab7!important;
    
}

.searching_box_group {
    padding: 20px 0;
    margin: 10px 0px;
}

/* Add/update deal page */
.deposit-description,
.outstanding_deposits .col-description input.form-control {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/* Override tax amount on edit deal page */
#alt_tax_amount_container {
    transition: margin-top 0.2s ease-in-out;
}

#alt_tax_amount_input_container.collapsing {
    transition: height 0.2s ease-in-out;
}

.z-index-top {
    z-index: 9000;
}

.z-index-10 {
    z-index: 10;
}

.display-alert-icon-information {
    display: none;
    position:absolute;
    top: 20px;
    left: 20px;
    min-width: 200px;
    border: 1px solid #f4efef36;
    border-radius: 5%;
    padding: 10px;
    box-shadow: 1px 1px 5px gray;
    background-color: #337ab7eb;
    color: var(--white);
    z-index: 9999;
    
}

.display-alert-icon-information-container{
    position:relative;
    display: inline-block;
}

.display-alert-as-toast{
    box-sizing: content-box;
    min-width: 20px !important;
    max-width: 60px !important;
    font-size : 1rem;
    padding: 1px 5px !important;
    top: -50px !important;
    left: -20px !important;
}

/* Deals search styles */
#page_title,
#search_deals_filter,
#search_deals_results {
    visibility: hidden;
}

#search_deals_filter {
    border-left-style: none;
    border-radius: 5px;
    min-height: 225px;
}

#search_change .form-group .checkbox,
#deduction_search .form-group .checkbox,
#deduction_tracker_search .form-group .checkbox,
#display_income_account .checkbox {
    padding-left: 25px;
}

#search_change #date_range_from,
#search_change #date_range_to {
    padding-left: 13px;
}

#search_change .multiselect.dropdown-toggle,
#deduction_search .multiselect.dropdown-toggle,
#deduction_tracker_search .multiselect.dropdown-toggle {
    text-align: left;
    overflow: auto;
}

#search_change .multiselect-container,
#deduction_search .multiselect-container, 
#deduction_tracker_search .multiselect-container {
    width: 100% !important;
    overflow: auto;
}

#search_change .multiselect-container>li>a,
#deduction_search .multiselect-container>li>a,
#deduction__report_search .multiselect-container>li>a {
    white-space: normal;
}

/* Email Realtor Modal Styles */
#viewRealtorEmailModal .modal-dialog {
    overflow: auto;
}

.width-auto {
    width: auto;
}

/* Multi-Select Option Group Checkbox */
.multiselect-option-group {
    all: unset;
    color: var(--black);
    margin-top: 20px;
    padding-left: 5px;
}

.multiselect-option-group.active {
    text-decoration: none;
    background-image: none;
    background-color: #eee;
    color: #333;
    filter: none;
    width: 100%
}

.form-check-input {
    transform: scale(1.01);
}

.form-check-label {
    padding-left: 10px;
    font-weight: bold;
}

.multi-select-non-click-label {
    margin-left: 10px;
    font-weight: bold;
    margin-top: 20px;
}

.multiselect-group-option-label {
    margin-left: 24px !important;
}

.group-caret-container {
    color: var(--black);
    cursor: pointer;
    font-size: 10px;
}

.multiselect-container.dropdown-menu {
    padding-bottom: 10px;
}

/* bootstrap-multiselect: ensure checkbox inputs are visible (GLOBAL).
 * Our UI has custom checkbox patterns elsewhere; bootstrap-multiselect needs the native checkbox visible
 * inside its dropdown list. Scope strictly to the multiselect dropdown container.
 */
.multiselect-container .checkbox,
.multiselect-container li > a > label.checkbox {
    position: relative;
    padding-left: 25px !important;
    min-height: 20px;
}
.multiselect-container .checkbox input[type="checkbox"],
.multiselect-container li > a > label.checkbox > input[type="checkbox"] {
    position: relative;
    left: auto;
    margin-left: -20px !important;
    margin-top: 2px;
    margin-bottom: 0;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-appearance: checkbox;
    appearance: auto;
}

/* TRS report: bootstrap-multiselect checkbox visibility fix (SCOPED).
 * Bootstrap's checkbox rules can apply negative margins; without padding on the checkbox container
 * the checkbox can render off-screen. Scope to TRS filters only to avoid global UI side-effects.
 */
#trs-report-filters .multiselect-container .checkbox {
    position: relative;
    padding-left: 25px !important; /* matches other pages (e.g. Deduction Manager) */
}
#trs-report-filters .multiselect-container .checkbox input[type="checkbox"] {
    margin-left: -20px !important;
}

/* Accounting Report: same checkbox visibility fix (blue filter panel) */
#accounting_report_filter .multiselect-container .checkbox {
    position: relative;
    padding-left: 25px !important;
}
#accounting_report_filter .multiselect-container .checkbox input[type="checkbox"] {
    margin-left: -20px !important;
}

/* Tasks Report: bootstrap-multiselect checkbox visibility (row 1 + #ot-report-filters).
 * Row-1 selects moved outside #ot-report-filters; scope the whole form so checkboxes stay in view. */
.tasks-report-form .multiselect-container .checkbox,
#ot-report-filters .multiselect-container .checkbox {
    position: relative;
    padding-left: 25px !important;
}
.tasks-report-form .multiselect-container .checkbox input[type="checkbox"],
#ot-report-filters .multiselect-container .checkbox input[type="checkbox"] {
    margin-left: -20px !important;
}

/* Firm/Conditional report: same bootstrap-multiselect checkbox visibility (see TRS) */
#fc-report-filters .multiselect-container .checkbox {
    position: relative;
    padding-left: 25px !important;
}
#fc-report-filters .multiselect-container .checkbox input[type="checkbox"] {
    margin-left: -20px !important;
}

/* Accounting Report: truncate long multi-select button labels */
#accounting_report_filter button.multiselect .multiselect-selected-text {
    display: inline-block;
    max-width: calc(100% - 18px); /* leave room for caret */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.unlock-card-icon{
    position: absolute;
    right: 0px;
    top: -5px;
}

.cancelled {
    text-decoration: line-through;
    
    color: rgba(61, 49, 49, 0.4);
}
.w-200 {
    width: 200px;
}

/* Google Calendar button styles */
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 50px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 10px 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 40px;
    margin-right: 10px;
    min-width: 40px;
    width: 40px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}

.title-container {
    margin-left: -7px;
}

.title-global-container,
#manage-roles-header {
    background-color: #337ab7 !important;
    color: var(--white) !important;
    font-weight: 300;
}

#manage-roles-header {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

#manage-roles-table {
    overflow: hidden;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.panel-background {
    background: var(--white);
    padding: 10px;
    border-radius: 5px !important;
}

.border-top-radius-0 {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.border-bottom-radius-0 {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.color-initial {
    color: initial !important;
}

/* View Realtor Section Styles */
#realtor_select {
    display: flex;
    justify-content: space-between;
}

#realtor_select select {
    width: 75% !important;
}

/* Fintrac Report Styles */
#fintrac_search_results {
    overflow: auto;
}

/* Audit Wizard Styles */
#audit-wizard-results .well {
    background: #bce8f1;
}

/* Sold Sales Report Styles */
.sales-report-header,
.sales-report-body,
.sales-report-footer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
}
.sales-report-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.sales-report-header p {
    margin: 5px 0;
}
.sales-report-header p:last-child {
    margin: 15px 0;
}
.sales-report-logo {
    margin-top: 20px;
    display: block;
}
.sales-report-title {
    font-weight: 300;
    margin: 15px 0 5px;
    font-size: 16px;
}
.sales-report-body {
    margin: 0 30px;
    vertical-align: top;
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
}
.sales-report-body tr td {
    border-top: 1px solid lightgrey;
}
.sales-report-body td {
    padding: 10px 0;
}
.sales-report-body td.first-child {
    padding-left: 10px;
    width: 35%;
}
.sales-report-body td.last-child {
    padding-right: 10px;
    width: 65%;
}
.sales-report-footer {
    margin: 0 30px;
    padding: 0 10px;
}

.pill-status {
    background-color: #337ab7 !important;
    color: var(--white) !important;
}
  
.pill-default {
    background-color: #4e565e !important;
    color: var(--white) !important;
}
/* Financial Statistics Styles */
#search_filters .multiselect.dropdown-toggle {
    text-align: left;
    overflow: auto;
}

#agent-history-earnings-report-total-summary .panel-body-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#agent-history-earnings-report-total-summary .panel-body-container p {
    margin-top: 10px;
    font-size: 14px;
}

.no-transition {
    -webkit-transition: height 0.001s;
    -moz-transition: height 0.001s;
    -ms-transition: height 0.001s;
    -o-transition: height 0.001s;
    transition: height 0.001s;
}

tr.accordion {
    cursor: pointer;
}

tr.accordion:hover {
    background-color: #ddd;
}

.chevron-rotate {
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.chevron-rotate.down {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.alert-ghost {
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #afaeb4 100%);
    background-image: -o-linear-gradient(top, #f5f5f5 0%, #afaeb4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#afaeb4));
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #afaeb4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffafaeb4', GradientType=0);
    background-repeat: repeat-x;
    border-color: #b2dba1;
}

.right-0 {
    right: 0;
}

.right-15 {
    right: 15px;
}

.top-0 {
    top: 0;
}

/* =============================================================================
   ACCOUNTS RECEIVABLE REPORT PAGINATION STYLES
   ============================================================================= */

/* Scope all AR report styles to the specific report table and container */
#accounts-receivable-report-table tr.group,
.report-panel #accounts-receivable-report-table tr.group {
    background-color: #f0f0f0 !important;
    font-weight: bold;
}

/* Make continuation indicators more visible */
#accounts-receivable-report-table tr.group td strong,
.report-panel #accounts-receivable-report-table tr.group td strong {
    font-size: 1.1em;
}

/* AR Report Group Totals (Complete group totals across all pages) */
#accounts-receivable-report-table tr.group-total,
.report-panel #accounts-receivable-report-table tr.group-total {
    background-color: #e8f4fd !important;
    border-top: 2px solid #2c5aa0 !important;
    border-bottom: 1px solid #2c5aa0 !important;
    font-weight: bold;
}

/* AR Report Page Subtotals (Page-level totals when groups span multiple pages) */
#accounts-receivable-report-table tr.page-subtotal,
.report-panel #accounts-receivable-report-table tr.page-subtotal {
    background-color: #fff3cd !important;
    border-top: 2px solid #856404 !important;
    border-bottom: 1px dashed #856404 !important;
    font-weight: bold;
    font-style: italic;
}

#accounts-receivable-report-table tr.page-subtotal td,
.report-panel #accounts-receivable-report-table tr.page-subtotal td {
    color: #856404 !important;
}

/* Common styling for both total types */
#accounts-receivable-report-table tr.group-total td,
#accounts-receivable-report-table tr.page-subtotal td,
.report-panel #accounts-receivable-report-table tr.group-total td,
.report-panel #accounts-receivable-report-table tr.page-subtotal td {
    padding: 8px 12px !important;
}

/* Contract Wizard Auto-Population Styles */
.contract-prefilled-field {
    background-color: #e8f4fd !important;
    border-color: #3498db !important;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3) !important;
}

.contract-prefilled-field:focus {
    background-color: #ffffff !important;
    border-color: #3498db !important;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5) !important;
}

.contract-prefilled-notice {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.contract-prefilled-notice .fa {
    margin-right: 8px;
    color: #0c5460;
}

.contract-prefill-indicator {
    position: absolute;
    right: 10px;
    top: 8px;
    opacity: 0.7;
    z-index: 10;
    color: #3498db !important;
    pointer-events: none;
}

/* SweetAlert button spacing fix */
.swal-button-spacing .swal2-actions {
    gap: 10px;
}

.swal-button-spacing .swal2-actions > .btn {
    margin: 0 5px;
}

/* Alternative fallback for older SweetAlert versions */
.swal2-actions.swal-button-spacing > .btn + .btn {
    margin-left: 10px;
}

/* Global fix for all SweetAlert instances with custom button styling */
.swal2-actions {
    gap: 10px !important;
}

.swal2-actions > .btn + .btn {
    margin-left: 10px !important;
}

/* Ensure proper spacing when buttonsStyling is false */
.swal2-popup .swal2-actions:not(.swal2-loading) .btn + .btn {
    margin-left: 10px !important;
}

/* AI Contract Processor Button Styles */
.btn-ai-processor {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
    color: white !important;
    position: relative;
    overflow: hidden;
}

.btn-ai-processor:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.4) !important;
    color: white !important;
}

.btn-ai-processor:focus,
.btn-ai-processor:active {
    color: white !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.4) !important;
}

.btn-ai-processor .ai-text {
    font-weight: 600;
}

.white-text > * {
    color: white !important;
}

/* AI Button Animation */
.btn-ai-processor::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.btn-ai-processor:hover::before {
    left: 100%;
}

/* Financial Reports Styles */
.reports-text-base {
    font-size: 16px !important;
}

.reports-text-lg {
    font-size: 18px !important;
}

.reports-text-xl {
    font-size: 20px !important;
}

.reports-text-2xl {
    font-size: 24px !important;
}

.reports-text-3xl {
    font-size: 30px !important;
}

.reports-font-bold {
    font-weight: 700 !important;
}

.reports-font-semibold {
    font-weight: 600 !important;
}

.reports-font-medium {
    font-weight: 500 !important;
}

/* Override Tailwind's tiny text classes */
.tw-text-xs,
.tw-text-sm,
.tw-text-base {
    font-size: 16px !important;
}

/* Custom table styling */
.financial-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.financial-table th {
    background-color: #f8fafc;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 2px solid #e2e8f0;
    font-size: 16px !important;
}

.financial-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 16px !important;
}

.financial-table tr:hover {
    background-color: #f8fafc;
}

/* Tab text sizing */
.tab-text {
    font-size: 16px !important;
}

.tab-subtext {
    font-size: 14px !important;
}

/* First Amount Section Styles */
.first-amount-section {
    overflow: hidden;
    transition: all 0.3s ease;
}

.add-first-amount-text:hover {
    cursor: pointer;
}

/* Withholding Payments: dashboard filter bar (Transactions Report pattern) */
#withholding_payments_filter.background-note {
    background-color: #337ab7;
    color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 4px grey;
}

#withholding_payments_filter label {
    color: #fff;
}

.select2-selection--single{
    font-size: 14px !important;
}
/* RealSign promo — hero + continuous tinted panel; uniform image tiles */
.realsign-landing {
    margin: 0 0 32px;
    max-width: 100%;
}

.realsign-landing .realsign-hero {
    background: linear-gradient(180deg, #0f4e92 0%, #0a3d73 45%, #038477 100%);
    color: #fff;
    text-align: center;
    padding: 40px 24px 44px;
    margin: 0 -15px 0;
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(15, 78, 146, 0.2);
}

.realsign-landing .realsign-hero-inner {
    max-width: 560px;
    margin: 0 auto;
}

.realsign-landing .realsign-hero-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
}

.realsign-landing .realsign-hero-lead {
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 28px;
    opacity: 0.96;
    font-weight: 400;
}

.realsign-landing .realsign-hero-actions {
    margin-bottom: 8px;
}

.realsign-landing .realsign-cta-btn {
    display: inline-block;
    background: #fff;
    color: #038477 !important;
    border: none;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 32px;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.realsign-landing .realsign-cta-btn:hover,
.realsign-landing .realsign-cta-btn:focus {
    background: #f4f7fb;
    color: #026b60 !important;
}

.realsign-landing .realsign-hero-tagline {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.88;
    margin: 24px 0 0;
    font-weight: 600;
}

/* Full-width panel under hero (same palette, covers screenshots) */
.realsign-landing .realsign-body {
    margin: 0 -15px 0;
    padding: 0 0 40px;
    background: linear-gradient(
        180deg,
        rgba(3, 132, 119, 0.22) 0%,
        rgba(15, 78, 146, 0.12) 14%,
        #e4edf7 32%,
        #eef3fb 55%,
        #f5f8fc 100%
    );
}

.realsign-landing .realsign-features {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 16px 8px;
}

.realsign-landing .realsign-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px;
    padding: 0 4px;
}

.realsign-landing .realsign-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f4e92;
    margin: 0 0 10px;
}

.realsign-landing .realsign-section-intro {
    font-size: 15px;
    color: #4a5568;
    margin: 0;
    line-height: 1.55;
}

.realsign-landing .realsign-subsection-head {
    text-align: center;
    max-width: 560px;
    margin: 40px auto 20px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 78, 146, 0.15);
}

.realsign-landing .realsign-subsection-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f4e92;
    margin: 0 0 6px;
}

.realsign-landing .realsign-subsection-intro {
    font-size: 14px;
    color: #5c6570;
    margin: 0;
    line-height: 1.5;
}

.realsign-landing .realsign-showcase {
    margin: 0 auto;
}

.realsign-landing .realsign-showcase-row {
    display: flex;
    flex-wrap: wrap;
}

.realsign-landing .realsign-showcase-col {
    margin-bottom: 24px;
    display: flex;
    align-items: stretch;
}

.realsign-landing .realsign-tile {
    flex: 1 1 auto;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 78, 146, 0.14);
    box-shadow: 0 6px 28px rgba(15, 78, 146, 0.1);
}

.realsign-landing .realsign-tile-media {
    position: relative;
    height: 200px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #0f4e92 0%, #0a5585 40%, #038477 100%);
    overflow: hidden;
}

.realsign-landing .realsign-tile-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 78, 146, 0.18) 100%);
    pointer-events: none;
}

.realsign-landing .realsign-tile-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.realsign-landing .realsign-tile-body {
    padding: 18px 18px 20px;
    flex: 1 1 auto;
}

.realsign-landing .realsign-tile-body--solo {
    padding: 22px 20px 24px;
}

.realsign-landing .realsign-tile-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f4e92;
    margin: 0 0 10px;
    line-height: 1.3;
}

.realsign-landing .realsign-tile-text {
    font-size: 14px;
    line-height: 1.55;
    color: #5c6570;
    margin: 0;
}

.realsign-landing .realsign-tile--text {
    background: linear-gradient(165deg, #ffffff 0%, #f7fafc 100%);
    min-height: 200px;
}

.realsign-landing .realsign-tile--text .realsign-tile-body--solo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
}

@media (min-width: 768px) {
    .realsign-landing .realsign-hero {
        margin-left: -20px;
        margin-right: -20px;
        padding: 48px 32px 52px;
    }

    .realsign-landing .realsign-hero-title {
        font-size: 34px;
    }

    .realsign-landing .realsign-body {
        margin-left: -20px;
        margin-right: -20px;
    }

    .realsign-landing .realsign-features {
        padding: 40px 24px 12px;
    }

    .realsign-landing .realsign-tile-media {
        height: 220px;
    }

    .realsign-landing .realsign-tile--text {
        min-height: 220px;
    }

    .realsign-landing .realsign-tile--text .realsign-tile-body--solo {
        min-height: 220px;
    }
}

/* Firm & Conditional Deals: top strip mirrors horizontal scroll of table wrapper */
.fc-table-top-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    height: 17px;
    min-height: 17px;
    margin-bottom: 8px;
    border: 1px solid #d9d9d9;
    background: #fafafa;
    -webkit-overflow-scrolling: touch;
}
.fc-table-top-scroll-inner {
    display: block;
    height: 1px;
    font-size: 0;
    line-height: 0;
}
#firm-conditional-deals-table thead th a.fc-order-table {
    color: inherit;
    text-decoration: none;
}
#firm-conditional-deals-table thead th a.fc-order-table:hover {
    text-decoration: underline;
}

/***
Realtor sidebar — collapsed mode: keep rail narrow; flyout row uses position:fixed via
realtor-sidebar-collapsed-flyout.js so labels are not clipped by ul overflow-y:auto.
***/
.page-sidebar-closed .page-sidebar {
    overflow: visible !important;
}

.page-sidebar-closed .page-sidebar-menu > li:not(.sidebar-search-wrapper) {
    min-height: 41px;
}

.page-sidebar-closed .page-sidebar-menu > li:not(.sidebar-search-wrapper):hover {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 2000;
    display: block !important;
}

/* Collapsed flyout: same blue as #page-sidebar (not expanded white hover) */
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a {
    display: block !important;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 10px 15px;
    min-height: 41px;
    line-height: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
    background: #486f9c !important;
    color: var(--white) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > i,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > .esign-new-sidebar-badge,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > .title,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > .arrow {
    pointer-events: none;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > .title {
    display: inline !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > a > .arrow {
    display: inline !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active:not(.active) > a > i,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active:not(.active) > a > .esign-new-sidebar-badge,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active:not(.active) > a > .title {
    color: var(--white) !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active:not(.active) > a > .arrow::before,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active:not(.active) > a > .arrow.open::before {
    color: var(--white) !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a {
    background: #28b779 !important;
    color: var(--white) !important;
    border-top-color: transparent !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a > i,
.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a > .esign-new-sidebar-badge,
.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a > .title {
    color: var(--white) !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a > .arrow::before,
.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > a > .arrow.open::before {
    color: var(--white) !important;
}

/* Flyout submenu panel: same blue; readable white labels (overrides expanded-sidebar white submenu rules) */
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu {
    background: #486f9c !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.18);
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li > a,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li > a i {
    color: var(--white) !important;
    background: transparent !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li > a:hover,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li > a:hover i,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li.active > a,
.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu > li.active > a i {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.active.sidebar-flyout-active > ul.sub-menu {
    background: #486f9c !important;
}

.page-sidebar-closed .page-sidebar-menu > li:hover > a > .arrow {
    display: inline !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li.sidebar-flyout-active > ul.sub-menu {
    display: block !important;
    z-index: 10051 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {
    z-index: 10051;
}

.page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover {
    margin-left: 0 !important;
}

/* Toggler row: same rail width as other items; flyout uses fixed <a> from realtor-sidebar-collapsed-flyout.js */
.page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * Realtor + broker sidebar collapsed: force a single 35px rail for every row (open/active/hover).
 * Metronic + li.open styles can make the row or <a> wider than the rail; #page-sidebar uses
 * overflow:visible for flyouts, so wide backgrounds would otherwise paint past the rail.
 * Hover flyout is excluded via .sidebar-flyout-active (realtor-sidebar-collapsed-flyout.js).
 */
@media (min-width: 992px) {
    .page-sidebar-closed .page-sidebar-menu.realtor-sidebar > li,
    .page-sidebar-closed .page-sidebar-menu.broker-sidebar-menu > li {
        width: 35px !important;
        max-width: 35px !important;
    }

    .page-sidebar-closed .page-sidebar-menu.realtor-sidebar > li:not(.sidebar-search-wrapper):hover,
    .page-sidebar-closed .page-sidebar-menu.broker-sidebar-menu > li:not(.sidebar-search-wrapper):hover {
        width: 35px !important;
        max-width: 35px !important;
    }

    .page-sidebar-closed .page-sidebar-menu.realtor-sidebar > li:not(.sidebar-flyout-active) > a,
    .page-sidebar-closed .page-sidebar-menu.broker-sidebar-menu > li:not(.sidebar-flyout-active) > a {
        width: 35px !important;
        max-width: 35px !important;
        box-sizing: border-box;
        overflow: hidden;
    }
}