/* New look (html.pie-premium) — commissions page.
   Owned by one session at a time; see .claude/skills/pie-new-ui/SKILL.md.
   Every selector starts with: html.pie-premium .pp-shell <this page's root class> */

/* ==========================================================================
   Commissions (sections.js "Commissions"): Tracked, Received, Unclaimed, Claim Requests,
   Commission Statement, Payroll, Commission Paid to Advisors. Every page is a
   .commission-master-page > .container-fluid > .bg-white-block (TrackedCommissions.vue,
   received_commission_payments.vue, UnclaimedBookings.vue, ClaimRequests.vue,
   commission_statement_list.vue, payroll/index.vue, received_advisor_payments.vue)
   ========================================================================== */
html.pie-premium .pp-shell .commission-master-page {
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
    -webkit-font-smoothing: antialiased;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid {
    padding: 0 32px 32px;
}

/* No outer card: head and filters sit on the page, only the table is a card */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > *,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .btn-primary) > *,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .row > .col-md-12 > a.btn-primary) > * {
    order: 2;
    flex: 0 0 100%;
    min-width: 0;
}

/* Full screen (fullScreenSection adds .toggle-full-screen): the page background, same layout */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 999;
    height: 100%;
    align-content: flex-start;
    padding: 0 32px 32px;
    background: var(--pp-bg);
    overflow: auto;
}

html.pie-premium .pp-shell .commission-master-page .color-bg-white.box-typical-full-height {
    min-height: 0;
    background: transparent;
}

/* ---------- Page head: eyebrow, title, subtitle, actions on the right ---------- */
/* margin: h4 carries .mb-3 / .mb-0 (!important) */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 {
    order: 0;
    flex: 1 1 380px;
    margin: 0 !important;
    padding: 18px 160px 22px 0;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4::before {
    content: "Commissions";
    display: block;
    margin: 0 0 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4::after {
    display: block;
    margin: 4px 0 0;
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
    letter-spacing: 0;
}

/* Subtitles from the design (Payroll has its own line under the title) */
html.pie-premium .pp-shell .commission-master-page #received_commission_payment_list:not(:has(> div > .btn-primary)) > h4::after {
    content: "Commission each supplier still owes";
}

html.pie-premium .pp-shell .commission-master-page #received_commission_payment_list:has(> div > .btn-primary) > h4::after {
    content: "Supplier payments and their reconciliation";
}

html.pie-premium .pp-shell .commission-master-page #unclaimed_booking_list > h4::after {
    content: "Commissions received with no advisor yet";
}

html.pie-premium .pp-shell .commission-master-page #claimed_booking_list > h4::after {
    content: "Advisors asking to claim a commission";
}

html.pie-premium .pp-shell .commission-master-page #commission_statement_list > h4::after {
    content: "Weekly statements by advisor";
}

html.pie-premium .pp-shell .commission-master-page #received_advisor_payments > h4::after {
    content: "Payouts sent to advisors";
}

html.pie-premium .pp-shell .commission-master-page #payrollList > h4 {
    padding-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page #payrollList > .small-text {
    order: 1;
    margin: 4px 0 22px !important; /* .mb-3 */
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
}

/* Full screen and Export: the design's head buttons (right, level with the subtitle) */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share) {
    position: absolute;
    top: 62px;
    right: 0;
    height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share):hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .full-screen {
    width: 40px;
    padding: 0;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen > h4 > :is(.full-screen, .pie-icon-share) {
    right: 32px;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen > h4 > .pie-icon-share {
    right: 80px;
}

/* .pe-1 keeps 4px on the right (!important), so the label's margin makes up the 18px */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share {
    right: 48px;
    padding-left: 18px;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share)::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pp-i-expand) center / contain no-repeat;
    mask: var(--pp-i-expand) center / contain no-repeat;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share::before {
    -webkit-mask-image: var(--pp-i-down);
    mask-image: var(--pp-i-down);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share::after {
    content: "Export";
    margin-right: 14px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

/* Page actions (Send reminder / Add payment): lifted out of their wrappers into the head row */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .row > .col-md-12 > a.btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row:has(> .col-md-12 > a.btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12:has(> a.btn-primary) {
    display: contents;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary {
    order: 1;
    flex: none;
    height: 40px;
    margin: 0 48px 22px auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px !important;
    border: 0;
    border-radius: 999px;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0;
    text-transform: none !important; /* common.css .btn: capitalize !important */
    white-space: nowrap;
}

/* Secondary: Send commissions reminder to suppliers (mail icon). pie-premium.css paints every
   .btn-primary Bordeaux with !important, so the white needs it too */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary {
    background: #fff !important;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pp-i-mail) center / contain no-repeat;
    mask: var(--pp-i-mail) center / contain no-repeat;
}

/* Primary: + Add Commission Payment Received */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
}

/* ---------- Filters: the design's field grid (label above the value) ---------- */
html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:not(.modal *):has(> :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
}

html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:not(.modal *):has(> :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating) > * {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

/* Empty Bootstrap rows pull the next block up with their negative margins */
html.pie-premium .pp-shell .commission-master-page .bg-white-block .row.g-2:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 51px;
    margin: 0;
    padding: 7px 12px 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating:focus-within {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* Received: Commission payouts sits in a second .form-floating inside the first */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > .form-floating {
    display: contents;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .ffl-label {
    position: static;
    order: -1;
    width: auto;
    height: auto;
    margin: 0 0 1px;
    padding: 0;
    border: 0;
    transform: none;
    opacity: 1;
    color: var(--pp-muted) !important;
    font: 11.5px/12px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Inner controls drop their own boxes: the field is the box */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating :is(.vdp-datepicker, .multiselect, .v-select, .bootstrap-select, .vue-daterange-picker) {
    position: relative;
    width: 100% !important;
    height: auto !important; /* bootstrap-select is fixed at 42px */
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating :is(input.form-control, .multiselect__tags, .vs__dropdown-toggle, .dropdown-toggle, .reportrange-text) {
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating input.form-control::placeholder,
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .vs__search::placeholder {
    color: var(--pp-muted);
}

/* Plain text inputs keep Bootstrap's hidden placeholder (it reads "Payment id" under "Confirmation id") */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > input.form-control::placeholder {
    color: transparent;
}

/* Calendar icon: the design's thin calendar on the right */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > i.icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
    padding: 0;
    background: var(--pp-ink-2);
    -webkit-mask: var(--pp-i-cal) center / contain no-repeat;
    mask: var(--pp-i-cal) center / contain no-repeat;
    pointer-events: none;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > i.icon::before {
    content: none;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating:has(> i.icon) .vdp-datepicker input.form-control {
    padding-right: 24px !important;
}

/* vue-multiselect (Search Supplier) */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 22px !important;
    padding-right: 24px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating :is(.multiselect__placeholder, .multiselect__single, .multiselect__input) {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tag {
    margin: 0 4px 2px 0;
    padding: 2px 22px 2px 8px;
    border-radius: 6px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 12px/16px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tag-icon::after {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tag-icon:hover {
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__select {
    top: 50%;
    right: -6px;
    width: 24px;
    height: 22px;
    margin-top: -11px;
    padding: 0;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__content-wrapper {
    border-color: var(--pp-line);
    border-radius: 0 0 10px 10px;
    font-family: var(--pp-sans);
}

/* vue-select (Claimed By, Commission payouts, Select Payroll) */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .vs__dropdown-toggle {
    height: auto !important;
    min-height: 22px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating :is(.vs__selected-options, .vs__selected, .vs__search, .vs__search:focus) {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .vs__actions {
    padding: 0 0 0 4px;
}

/* bootstrap-select (Select Advisor) */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .filter-option,
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .filter-option-inner {
    padding: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .filter-option-inner-inner {
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    letter-spacing: 0;
}

/* Date range: the dates, then the calendar on the right */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .reportrange-text {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100% !important;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .reportrange-text > span {
    flex: 1;
    min-width: 0;
    order: 0;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .reportrange-text > .fa-calendar {
    order: 1;
    float: none;
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--pp-ink-2);
    -webkit-mask: var(--pp-i-cal) center / contain no-repeat;
    mask: var(--pp-i-cal) center / contain no-repeat;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .reportrange-text > .fa-calendar::before,
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .reportrange-text > .caret {
    display: none;
}

/* Payroll: Mark as Paid (n), shown while rows are ticked */
html.pie-premium .pp-shell .commission-master-page #payrollList .delete-profiles-hide .reservation-customisation-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page #payrollList .delete-profiles-hide .reservation-customisation-button:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

/* Received: the reports note under the filters */
html.pie-premium .pp-shell .commission-master-page .bg-white-block p.fs-14 {
    margin: 0 0 14px;
    color: var(--pp-ink-3);
    font: 12.5px/1.5 var(--pp-sans) !important;
}

/* ---------- Table card (vue-good-table) ---------- */
html.pie-premium .pp-shell .commission-master-page .table-condensed {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell .commission-master-page .vgt-inner-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table {
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable {
    padding-right: 28px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th:is(.sorting-asc, .sorting-desc) {
    color: var(--pp-acc);
}

/* Sort arrows only on hover */
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable button {
    opacity: 0;
    transition: opacity .12s;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable:hover button,
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable button:focus-visible {
    opacity: 1;
}

/* Column search row: hidden unless one of its fields holds text */
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td,
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody th.line-numbers {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    white-space: nowrap;
    vertical-align: middle;
}

/* The slot's wrapper divs carry 4px top padding each (classic), which pushed the text 8px low */
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td > div,
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td > div > div {
    padding-top: 0;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table :is(thead, tbody) th.line-numbers {
    width: 1%;
    padding-right: 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
    -webkit-text-stroke: 0;
    text-align: left;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody tr:last-child > :is(td, th) {
    border-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table.striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody tr:hover > :is(td, th) {
    background: var(--pp-hover);
}

/* Empty and loading states */
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td.vgt-text-disabled {
    height: 96px;
    color: var(--pp-muted);
    font-size: 13.5px;
    text-align: center;
}

html.pie-premium .pp-shell .commission-master-page .vgt-loading__content {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
}

/* Footer: rows per page + page info, quiet */
html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__row-count {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .footer__row-count__label {
    margin: 0 8px 0 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .footer__row-count__select {
    height: 30px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--pp-line);
    border-radius: 8px;
    background-color: var(--pp-panel);
    color: var(--pp-ink);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .footer__navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

html.pie-premium .pp-shell .commission-master-page .footer__navigation__page-info {
    margin-right: 8px;
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn.disabled {
    color: var(--pp-line-2);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .chevron {
    transform: scale(.7);
}

/* ---------- Cells: status pills and row actions (app.css .pill / .lnk) ---------- */
/* Clickable action (Reconcile, Claim, Pay, View, PDF…): accent link */
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--pp-acc) !important;
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn.cursor-pointer:hover,
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn[class*="claim-"]:hover,
html.pie-premium .pp-shell .commission-master-page table.vgt-table .reconcile-commission-payment:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn + .action-btn {
    margin-left: 10px;
}

/* Status: soft pill with a dot */
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid, .bg-orange, .btn-warning, .btn-danger, .action-btn-blocked) {
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    font: 12px var(--pp-bold);
    text-decoration: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid, .bg-orange, .btn-warning, .btn-danger, .action-btn-blocked)::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid) {
    background: #e7f5ee !important;
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-orange, .btn-warning) {
    background: #fdf3e1 !important;
    color: #9a5b00 !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.btn-danger, .action-btn-blocked) {
    background: #fdecec !important;
    color: #c0262d !important;
}

/* Row icons (edit, delete): plain grey, accent on hover */
html.pie-premium .pp-shell .commission-master-page table.vgt-table td :is(.pie-icon-thin-0002_write_pencil_new_edit, .pie-icon-thin-0056_bin_trash_recycle_delete_garbage_empty) {
    color: var(--pp-ink-3);
    font-size: 16px;
    cursor: pointer;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table td :is(.pie-icon-thin-0002_write_pencil_new_edit, .pie-icon-thin-0056_bin_trash_recycle_delete_garbage_empty):hover {
    color: var(--pp-acc);
}

/* ==========================================================================
   Unclaimed Commissions (commission/UnclaimedCommissions.vue, .ucl-page): its own head,
   filters and plain table, given the same head, fields and card as the pages above
   ========================================================================== */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head {
    margin: 0;
    padding: 18px 0 22px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head h4 {
    margin: 0 !important;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head h4::before {
    content: "Commissions";
    display: block;
    margin: 0 0 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__subtitle {
    margin: 4px 0 0;
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
}

/* Filters: search, from, to as the design's fields, Refresh as a secondary button */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filters {
    gap: 10px;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filter {
    min-width: 190px;
    max-width: none;
    flex: 0 1 220px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filter:first-child {
    max-width: none;
    flex: 1 1 320px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control {
    height: 51px;
    padding: 0 12px !important; /* a classic datepicker rule pads the date inputs 12px 12px 0 */
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__search input.form-control {
    background: var(--pp-panel);
    border-color: var(--pp-line);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filters, .ucl__pager) .btn-outline-secondary {
    flex: none;
    height: 40px;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filters, .ucl__pager) .btn-outline-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager .btn-outline-secondary {
    height: 32px;
    padding: 0 14px;
    font-size: 12.5px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager .btn-outline-secondary:disabled {
    opacity: 1;
    color: var(--pp-line-2);
    box-shadow: none;
}

/* Empty / loading: a quiet card */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__empty {
    margin: 0;
    padding: 36px 16px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

/* Table card */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table th {
    padding: 13px 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row td {
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-2);
    vertical-align: middle;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row:hover td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__amt {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Confirmation # (the class is on the td): the design's code text */
html.pie-premium .pp-shell .commission-master-page .ucl-page td.ucl__mono {
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    letter-spacing: .03em;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__muted {
    color: var(--pp-muted);
    font-size: 12px;
}

/* Link to reservation / Close: accent link (the scoped hover fills it with !important) */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary,
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary:is(:hover, :focus, :active) {
    min-width: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--pp-acc) !important;
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Reservation search under a row */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__searchrow td {
    padding: 14px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__search-head {
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__cand {
    padding: 10px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__cand .btn-primary {
    flex: none;
    height: 32px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* ==========================================================================
   QA fixes PLAN-7432 (Commissions → Tracked / Received / Commission Statements)
   ========================================================================== */

/* Search Supplier: the field grows with its chips (the shared 22px rule above out-ranked the
   multiselect one, so the chips spilled under the field), and each chip stays inside the box */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect .multiselect__tags:not(#_) {
    height: auto !important;
    min-height: 22px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tag {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:has(> :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__tag) {
    align-items: start;
}

/* Its open list: as wide as the field, inside it */
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__content-wrapper {
    left: -12px;
    width: calc(100% + 24px);
    margin-top: 8px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__option {
    min-height: 0;
    padding: 9px 12px;
    color: var(--pp-ink-2);
    font: 13px/1.35 var(--pp-sans);
    white-space: normal;
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__option--highlight {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__option--selected,
html.pie-premium .pp-shell .commission-master-page .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .multiselect__option--selected.multiselect__option--highlight {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

/* ---------- Pop-ups opened from these pages (Add Commission Payment, Reconcile, Add Unclaimed
   Reservation, Bonus, Amount Received) render inside .commission-master-page, so the filter
   fields above (translucent box, no border) reached them too and the fields lost their
   outline on the white pop-up. In a pop-up the field is the design's .qf: white, 1px line,
   10px radius, accent ring on focus. ---------- */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating {
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating:focus-within {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* A field the user can't change (Payee / Recipient filled in by the system) reads as such */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating:has(> input.form-control:disabled) {
    background: var(--pp-panel-2);
}

/* Received through: its empty-state text was the muted placeholder, lighter than every other
   field's value */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .vs__search::placeholder,
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating .vs__placeholder {
    color: var(--pp-ink-2);
    opacity: 1;
}

/* Calendars open over the pop-up's footer and edge (the Cancel / Save row sat on top) */
html.pie-premium .pp-shell .commission-master-page .modal .form-floating:has(.vdp-datepicker:focus-within) {
    z-index: 30;
}

html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar {
    z-index: 1070 !important;
}

/* Remark: the textarea is the field (it had its own box inside the field's box) */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > textarea.form-control {
    min-height: 56px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px/1.45 var(--pp-sans);
    resize: vertical;
}

/* Date clear (×): beside the calendar icon, not under the field */
html.pie-premium .pp-shell .commission-master-page .modal .form-floating .vdp-datepicker__clear-button {
    position: absolute;
    top: 50%;
    right: 26px;
    margin: 0;
    padding: 0 4px;
    transform: translateY(-50%);
    color: var(--pp-muted);
    font-size: 15px;
    line-height: 1;
}

/* Calendars in these pop-ups: dark month heading (it was the old Magenta, upper case) */
html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar header .day__month_btn,
html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar header .month__year_btn {
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar .cell.day.today:not(.selected) {
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
}

/* ---------- Add Commission Payment: Upload / Hide Commission Statement and its progress bar
   (AddPaymentPopUp.vue, AIDocumentUpload.vue): the old Magenta (#A20090) outline, fill and bar
   in the new look's secondary button and Bordeaux. The id beats their scoped styles. ---------- */
html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-acc);
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary:is(:hover, :focus-visible) {
    border-color: var(--pp-acc);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary:active {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload {
    border-color: var(--pp-line-2);
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload--dragging {
    border-color: var(--pp-acc);
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__loader {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-stage {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-pct {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-track {
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-fill {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-hint {
    color: var(--pp-muted);
}

/* Reconcile (CommissionPaymentReconcilationPopUp.vue): Supplier is a grey box with an <h6>
   inside the field, so it stood taller than Amount / Received Date beside it: a plain value */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > .form-control.bg-gray {
    height: auto !important;
    min-height: 22px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > .form-control.bg-gray > h6 {
    overflow: hidden;
    margin: 0;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amount Received (BookingReconcilationWithPaymentPopUp*.vue): with Hold payout ticked the
   Payout Date box holds no date, so it says so instead of standing empty */
html.pie-premium .pp-shell .commission-master-page .modal .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto) > .form-floating > input.pp-payout-on-hold::placeholder {
    color: var(--pp-ink-3) !important;
    opacity: 1;
}

/* Inline amount fields in the Reconcile tables (Received commission amount after "Add"): the
   old Magenta focus border (common.css .form-control:focus, !important) */
html.pie-premium .pp-shell .commission-master-page .modal .form-control:not(.form-floating > .form-control, .invalid, .border-red):focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
    outline: 0;
}

/* ---------- Add Unclaimed Reservation (SubmitSalePopup*.vue, #submitSalePopupModal) opened from
   Reconcile: type pills, category icons and the supplier search's "Add New" were the old
   Magenta. Scoped to this page; the Submitted Sales page styles its own copy. ---------- */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li {
    display: flex;
    float: none !important;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line);
    cursor: pointer;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li .booking-sub-category {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px/1 var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li:hover {
    box-shadow: 0 0 0 1px var(--pp-ink-3);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li:hover .booking-sub-category {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li.active {
    background: var(--pp-ink) !important;
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li.active .booking-sub-category {
    color: #fff !important;
    font-family: var(--pp-bold) !important;
}

/* Category icons: quiet grey, the accent for the open one and on hover */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-type-block > li:is(:hover, .active),
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-type-block > li:is(:hover, .active)::before {
    border-color: var(--pp-acc) !important;
    color: var(--pp-acc) !important;
}

/* Service Provider Supplier search list: "Add New" and the highlighted result in the accent */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list > .typeahead-item > a {
    border-radius: 8px;
    color: var(--pp-ink-2) !important;
    font: 13.5px/1.35 var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list > .typeahead-item:is(.active, :hover) > a {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list .suggestion-title {
    color: inherit !important;
}

/* ---------- Commission Statements: Select Advisor list (bootstrap-select) and the Date range
   calendar (vue2-daterange-picker) were the old grey "Clear" bar and Magenta picks ---------- */
html.pie-premium .pp-shell .commission-master-page .bootstrap-select > .dropdown-menu {
    margin-top: 8px !important;
    padding: 6px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
    max-width: min(420px, calc(100vw - 32px));
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-searchbox {
    padding: 2px 2px 6px;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-searchbox .form-control:not(#_) {
    height: 36px !important;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox {
    padding: 0 2px 6px;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .btn-group {
    display: flex;
    gap: 6px;
    width: 100%;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .actions-btn {
    flex: 1 1 0;
    height: 30px;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    box-shadow: none;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .actions-btn:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-menu.inner {
    padding: 0;
    border: 0 !important;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-header {
    padding: 8px 10px 4px;
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item {
    position: relative;
    padding: 8px 30px 8px 10px !important;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px/1.3 var(--pp-sans);
    white-space: nowrap;
}

/* The name is cut with "…"; the tick sits outside that box */
html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item > .text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item:is(:hover, :focus, .active) {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item.selected {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item .check-mark {
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item .check-mark::after {
    width: 5px !important;
    height: 9px !important;
    border-color: var(--pp-acc) !important;
    border-width: 0 2px 2px 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker {
    margin-top: 8px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker::before,
html.pie-premium .pp-shell .commission-master-page .daterangepicker::after {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li {
    margin: 2px 6px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li.active {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker :is(th.month, .monthselect, .yearselect) {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker :is(.monthselect, .yearselect) {
    border: 1px solid var(--pp-line) !important;
    border-radius: 8px;
    background-color: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td:not(.in-range) {
    border-radius: 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.in-range {
    border-radius: 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.start-date {
    border-radius: 8px 0 0 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.end-date {
    border-radius: 0 8px 8px 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.start-date.end-date {
    border-radius: 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.in-range {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-ink-2) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.off,
html.pie-premium .pp-shell .commission-master-page .daterangepicker td.off.in-range {
    background: transparent !important;
    color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.available:not(.active):hover {
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td:is(.active, .start-date, .end-date),
html.pie-premium .pp-shell .commission-master-page .daterangepicker td.active:hover {
    background: var(--pp-acc) !important;
    color: #fff !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .btn.btn-primary,
html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .applyBtn {
    border: 0;
    background: var(--pp-acc);
    color: #fff;
}

/* Payroll (payroll/index.vue) Action column: the status (Pay / Paid / Blocked ⓘ) and PDF were
   centred together, so PDF moved with the width of the status. Two fixed tracks instead, so
   every row's PDF lines up, and the heading starts where the actions do. */
html.pie-premium .pp-shell .commission-master-page table.vgt-table td > div > div.text-center:has(> .action-btn.record-advisor-payout) {
    display: grid;
    grid-template-columns: 112px auto;
    justify-content: start;
    justify-items: start;
    align-items: center;
    column-gap: 12px;
    text-align: left !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table td > div > div.text-center:has(> .action-btn.record-advisor-payout) > .action-btn {
    margin: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table:has(td div.text-center > .action-btn.record-advisor-payout) thead th:last-child {
    text-align: left !important;
}

/* ==========================================================================
   Commission page audit fixes (received_commission_payments.vue, /commissions)
   ========================================================================== */

/* Reconciliation pop-up: "Received commission amount is not saved…" was the classic Magenta
   (.color-red, #A20090); the new look's accent instead */
html.pie-premium .pp-shell .commission-master-page #commission-payment-reconcilation-pop-up h6.color-red {
    color: var(--pp-acc) !important;
    font: 13px/1.45 var(--pp-bold);
    letter-spacing: 0;
}

/* Reconciliation pop-up: the top Save was a short (33px), letter-spaced button; the design's
   40px primary pill like Save in the other pop-ups */
html.pie-premium .pp-shell .commission-master-page #commission-payment-reconcilation-pop-up .modal-body .btn.btn-primary:not(:disabled) {
    height: 40px;
    padding: 0 20px;
    border: 0 !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff !important;
    font: 13.5px/40px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

/* From / To Date filter calendars: the same dark, sentence-case month heading as the calendars
   in the pop-ups (it was upper case in the accent colour) */
html.pie-premium .pp-shell .commission-master-page .vdp-datepicker__calendar header .day__month_btn,
html.pie-premium .pp-shell .commission-master-page .vdp-datepicker__calendar header .month__year_btn {
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
}