/* ============================================================================
   bpayd-theme.css — Site-wide visual refresh based on the Payment Link design
   (Views/Payments/Link.cshtml + Content/css/Payments-Link.css).

   PURE OVERRIDE STYLESHEET — must be the LAST <link> in every layout that
   uses it. Contains no `display`/`visibility`/positioning rules (views toggle
   those via JS) and is wrapped in @media screen so printed receipts keep the
   original styles.

   IMPORTANT: assets/global/css/components.css is the "METRONIC SQUARE STYLE"
   build — it resets `border-radius: 0 !important` on every element. Every
   border-radius in this file therefore needs `!important` to win.

   Tokens:
     brand          #b11556   brand-dark      #8e1145
     focus ring     0 0 0 3px rgba(177,21,86,0.1)
     card           #fff, radius 12px, shadow 0 2px 8px rgba(0,0,0,0.08),
                    border 1px solid #f0f0f0
     input          1.5px solid #e0e0e0, radius 8px
     page bg        #f7f8fa    text #2b3340 / #5a6470
   ========================================================================== */

@media screen {

/* ==========================================================================
   1. Page chrome — Metronic / _LayoutV2
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-content {
    background: #f7f8fa !important; /* beats inline style="background: white" */
}

.page-header.navbar {
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Everything in the top bar (logo, menu, merchant chip) vertically centered */
.page-header-inner {
    -ms-flex-align: center;
    align-items: center;
}

/* Horizontal mega menu */
.page-header.navbar .hor-menu .navbar-nav > li > a {
    color: #3e4651;
    font-weight: 600;
    padding: 10px 14px;
    margin: 0 2px;
    border-radius: 8px !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-header.navbar .hor-menu .navbar-nav > li:hover > a,
.page-header.navbar .hor-menu .navbar-nav > li.open > a,
.page-header.navbar .hor-menu .navbar-nav > li > a:hover,
.page-header.navbar .hor-menu .navbar-nav > li > a:focus {
    background: rgba(177, 21, 86, 0.06) !important;
    color: #b11556 !important;
}

.page-header.navbar .hor-menu .navbar-nav > li.active > a,
.page-header.navbar .hor-menu .navbar-nav > li.current > a {
    background: rgba(177, 21, 86, 0.1) !important;
    color: #b11556 !important;
}

/* Dropdown menus (global) */
.dropdown-menu {
    border: 1px solid #f0f0f0;
    border-radius: 10px !important;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.dropdown-menu > li > a {
    color: #3e4651;
    border-radius: 6px !important;
    padding: 8px 12px;
    white-space: nowrap; /* never wrap menu items into two lines */
}

/* the hor-menu dropdowns are too narrow for some entries; Metronic pins a
   fixed width with higher-specificity selectors — out-rank it */
.page-header.navbar .hor-menu .navbar-nav > li .dropdown-menu,
.hor-menu .dropdown-menu {
    min-width: 235px !important;
    width: auto !important;
}

.page-header.navbar .hor-menu .navbar-nav > li .dropdown-menu > li > a,
.hor-menu .dropdown-menu > li > a {
    white-space: nowrap !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: rgba(177, 21, 86, 0.06);
    background-image: none;
    color: #b11556;
}

.dropdown-menu > li > a > i {
    color: #8a94a0;
}

.dropdown-menu > li > a:hover > i {
    color: #b11556;
}

.dropdown-menu .divider {
    background-color: #f3f4f6;
}

/* User chip (top right). The layout <style> paints the li #707070 and the
   username span has inline color:white — both need overriding. */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user {
    background-color: transparent !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle {
    background-color: #b11556 !important;
    border: 1.5px solid #b11556;
    border-radius: 8px !important;
    /* compact: vertical margin + reduced padding must not exceed the
       original toggle height, so the top bar keeps its size */
    margin: 8px 12px 8px 0;
    padding: 10px 18px !important;
    -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover {
    background-color: #8e1145 !important;
    border-color: #8e1145;
}

.dropdown-user > .dropdown-toggle .username,
.dropdown-user > .dropdown-toggle > i {
    color: #fff !important;
}

/* Layout <style> sets .dropdown-user a:hover { background:#404040 !important } */
.dropdown-user .dropdown-menu > li > a:hover,
.dropdown-user .dropdown-menu > li > a:focus {
    background-color: rgba(177, 21, 86, 0.06) !important;
    color: #b11556 !important;
}

/* Footer (layout <style> sets #eef1f5; keep its fixed positioning) */
footer.page-footer {
    background-color: #fff !important;
    border-top: 1px solid #f0f0f0;
}

.page-footer .page-footer-inner {
    color: #8a94a0;
}

/* Page title & breadcrumb */
h1.page-title,
h3.page-title {
    color: #2b3340;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.page-bar {
    background-color: transparent;
    border-bottom: 0;
}

/* Breadcrumb: link pills + chevron separators + current page as brand chip */
.page-bar .page-breadcrumb > li > a,
.page-breadcrumb > li > a {
    color: #8a94a0;
    font-size: 15px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-bar .page-breadcrumb > li > a:hover,
.page-breadcrumb > li > a:hover {
    color: #b11556;
    background-color: rgba(177, 21, 86, 0.06);
    text-decoration: none;
}

/* Current page (rendered as a <span>) */
.page-bar .page-breadcrumb > li > span,
.page-breadcrumb > li > span {
    color: #b11556;
    background-color: rgba(177, 21, 86, 0.08);
    font-size: 15px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px !important;
}

/* Separators: the tiny dot (fa-circle) becomes a chevron */
.page-bar .page-breadcrumb > li > i,
.page-breadcrumb > li > i {
    color: #c3c9cf;
    margin: 0 6px;
}

.page-breadcrumb > li > i.fa-circle:before {
    content: "\f105"; /* fa-angle-right */
    font-size: 14px;
}

/* Brand the global Test Mode toggle (layout <style> uses #2196F3) */
.toggle-input:checked + .toggle-slider {
    background: #b11556 !important;
}

/* Breathing room around the logo; left margin lines it up with the content */
.page-header.navbar .page-logo {
    padding: 6px 0 6px 20px;
}

/* ==========================================================================
   2. Cards / portlets
   ========================================================================== */

.portlet.light,
.portlet.box {
    background-color: #fff !important; /* beats inline rgb(238,241,245) */
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Portlets that are ALSO grid columns are page wrappers, not real cards —
   make them invisible so cards don't nest three levels deep
   (e.g. BusinessSettings: col-md-9.portlet > col-md-6.portlet > form.portlet) */
.portlet[class*="col-"],
.portlet.light[class*="col-"],
.portlet.light.bordered[class*="col-"] {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* General site-wide rule: any portlet that wraps other portlets (or the
   dashboard stat tiles) is a layout container, not a card — flatten it so
   cards never stack on cards. Only the innermost portlet renders as a card.
   (The .light.bordered variants out-rank the vendor border declarations.) */
.portlet:has(.portlet),
.portlet.light.bordered:has(.portlet),
.portlet:has(.dashboard-stat),
.portlet.light.bordered:has(.dashboard-stat) {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important; /* wrappers must not indent the real card */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.portlet:has(.portlet) > .portlet-title,
.portlet:has(.dashboard-stat) > .portlet-title {
    border-bottom: 0;
}

.portlet > .portlet-title {
    border-bottom: 1px solid #f3f4f6;
}

.portlet > .portlet-title > .caption {
    color: #2b3340;
    font-weight: 700;
}

.portlet > .portlet-title > .caption.blue,
.portlet > .portlet-title > .caption .caption-subject {
    color: #b11556;
}

/* Solid magenta headers (custom .header-blackstone: portlet titles, theads
   and modal headers) → Link.cshtml style: white bg, brand text, brand accent */
.header-blackstone {
    background: #fff !important;
    color: #b11556 !important;
}

.portlet-title.header-blackstone,
.modal-header.header-blackstone {
    border-bottom: 3px solid #b11556 !important;
    border-radius: 12px 12px 0 0 !important;
}

.header-blackstone .caption,
.header-blackstone .caption.blue,
.header-blackstone .caption-subject,
.header-blackstone h2,
.header-blackstone h3,
.header-blackstone h4 {
    color: #b11556 !important;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Section forms in settings pages (.rowForm cards): vertical separation
   only — the horizontal gap comes from the flex rows' own `gap` */
form.rowForm {
    margin-bottom: 28px;
}

/* Consistent field rhythm inside the section cards:
   - every field block gets the same vertical spacing (several have an
     inline margin-bottom:0 — hence the !important)
   - field-title labels stack above their control
   - checkbox wrapper labels stay inline, box aligned with its text */
form.rowForm .form-group {
    padding: 0 !important;
    margin-bottom: 16px !important;
}

form.rowForm .form-group > label {
    display: block;
    margin-bottom: 6px;
}

form.rowForm label:has(input[type="checkbox"]),
form.rowForm label:has(input[type="radio"]) {
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

form.rowForm label:has(input[type="checkbox"]) label,
form.rowForm label:has(input[type="checkbox"]) span,
form.rowForm label:has(input[type="radio"]) label,
form.rowForm label:has(input[type="radio"]) span {
    margin: 0;
    font-weight: 600;
}

/* headers and fields share the same left edge */
form.rowForm .portlet-title.header-blackstone {
    padding-left: 0;
    padding-right: 0;
}

form.rowForm .btn.blue {
    margin-top: 4px;
}

.portlet-title.header-blackstone {
    margin-bottom: 14px;
}

/* Metronic colored "box" portlets get the same light treatment */
.portlet.box > .portlet-title {
    background-color: #fff !important;
    border-bottom: 3px solid #b11556;
    border-radius: 12px 12px 0 0 !important;
}

.portlet.box > .portlet-title > .caption {
    color: #b11556 !important;
    font-weight: 700;
}

/* Metronic tools icons are white sprites — darken them on the now-white bar */
.portlet.box > .portlet-title > .tools > a {
    -webkit-filter: brightness(0.45);
    filter: brightness(0.45);
}

/* Generic wells (used as info boxes on several pages) */
.well {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px !important;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.well.denied {
    background-color: #f9e1e0; /* keep the "denied" semantic tint */
}

/* --------------------------------------------------------------------------
   Dashboard stat tiles: keep the original solid blue/purple/green/red
   colors and white figures — just round the corners and add the card
   shadow. No hover effects (they made the text appear to shift).
   -------------------------------------------------------------------------- */

.dashboard-stat,
.dashboard-stat.dashboard-stat-v2 {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden; /* clip the big watermark icon to the rounded corners */
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* The tiles + period select sit inside #divIndicadores, a portlet that
   created a card-around-cards. Make that wrapper invisible. */
#divIndicadores {
    background: transparent !important;
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

#divIndicadores > .portlet-title {
    border-bottom: 0;
}

/* ==========================================================================
   3. Tables & DataTables
   ========================================================================== */

.table > thead > tr > th {
    background-color: #fff;
    color: #5a6470;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #ececf1;
}

/* Magenta theads (class on <thead> + inline th background) → brand on white */
.table thead.header-blackstone > tr > th,
thead.header-blackstone th {
    background-color: #fff !important; /* beats inline #b11556 */
    color: #b11556 !important;
    border-bottom: 2px solid #b11556 !important;
}

.table > tbody > tr > td {
    border-top: 1px solid #f3f4f6;
    vertical-align: middle;
}

/* Drop vertical grid lines for a cleaner, horizontal-rule look */
.table-bordered {
    border: 1px solid #f0f0f0;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-left: 0;
    border-right: 0;
    border-color: #f3f4f6;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table > tbody > tr:hover {
    background-color: rgba(177, 21, 86, 0.03);
}

/* Preserve the "denied" row tint over stripes/hover */
.table > tbody > tr.denied > td,
tr.denied td {
    background-color: #f9e1e0;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 7px 12px;
    outline: none;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #b11556 !important;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
}

.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 5px 8px;
    outline: none;
}

.dataTables_wrapper .dataTables_info {
    color: #8a94a0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #5a6470 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(177, 21, 86, 0.07) !important;
    color: #b11556 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #b11556 !important;
    border-color: #b11556 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #c3c9cf !important;
}

/* Bootstrap pagination */
.pagination > li > a,
.pagination > li > span {
    color: #5a6470;
    border-color: #f0f0f0;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-radius: 8px 0 0 8px !important;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0 8px 8px 0 !important;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: #b11556;
    background-color: rgba(177, 21, 86, 0.06);
    border-color: #f0f0f0;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: #b11556;
    border-color: #b11556;
    color: #fff;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
    border-radius: 8px !important; /* beats the Metronic square-style reset */
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none !important;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* keep Metronic circle buttons fully rounded */
.btn.btn-circle {
    border-radius: 25px !important;
}

/* Primary actions → brand */
.btn.blue,
.btn-primary {
    background-color: #b11556 !important;
    background-image: none !important;
    border-color: #b11556 !important;
    color: #fff !important;
}

.btn.blue:hover,
.btn.blue:focus,
.btn.blue:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #8e1145 !important;
    border-color: #8e1145 !important;
    color: #fff !important;
    -webkit-box-shadow: 0 4px 12px rgba(177, 21, 86, 0.3);
    box-shadow: 0 4px 12px rgba(177, 21, 86, 0.3);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Outline variant of the brand button stays an outline */
.btn.blue.btn-outline {
    background-color: transparent !important;
    border-color: #b11556 !important;
    color: #b11556 !important;
}

.btn.blue.btn-outline:hover,
.btn.blue.btn-outline:focus {
    background-color: #b11556 !important;
    color: #fff !important;
}

/* Neutral / secondary */
.btn-default,
.btn.default,
.btn.dark.btn-outline {
    background-color: #fff !important;
    background-image: none !important;
    border: 1.5px solid #e0e0e0 !important;
    color: #4a5560 !important;
}

.btn-default:hover,
.btn-default:focus,
.btn.default:hover,
.btn.default:focus,
.btn.dark.btn-outline:hover,
.btn.dark.btn-outline:focus {
    background-color: rgba(177, 21, 86, 0.05) !important;
    border-color: #b11556 !important;
    color: #b11556 !important;
}

/* Flatten the remaining semantic colors (mostly neutralized inside tables) */
.btn-danger {
    background-color: #dd3d34 !important;
    background-image: none !important;
    border-color: #dd3d34 !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

.btn-success {
    background-color: #27ae60 !important;
    background-image: none !important;
    border-color: #27ae60 !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #219150 !important;
    border-color: #219150 !important;
}

.btn-warning {
    background-color: #e79423 !important;
    background-image: none !important;
    border-color: #e79423 !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #cf831d !important;
    border-color: #cf831d !important;
}

.btn-info {
    background-color: #3598dc !important;
    background-image: none !important;
    border-color: #3598dc !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2a87c8 !important;
    border-color: #2a87c8 !important;
}

/* --------------------------------------------------------------------------
   Unified table action buttons: light ghost chips, brand on hover.
   The .ic icons are white PNGs — a CSS filter darkens them on the light
   resting state; on hover the solid brand background gets them back white.
   Red stays reserved for destructive actions (.btn-danger).
   -------------------------------------------------------------------------- */

.table .btn-primary,
.table .btn-info,
.table .btn-warning,
.table .btn-success,
.table .btn.blue,
.table .btn-primary:focus,
.table .btn-info:focus,
.table .btn-warning:focus,
.table .btn-success:focus {
    background-color: #f1f3f6 !important;
    background-image: none !important;
    border: 1px solid #e3e7eb !important;
    color: #5a6470 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.table .btn-primary .ic,
.table .btn-info .ic,
.table .btn-warning .ic,
.table .btn-success .ic {
    -webkit-filter: invert(0.55);
    filter: invert(0.55);
}

.table .btn-primary:hover,
.table .btn-info:hover,
.table .btn-warning:hover,
.table .btn-success:hover,
.table .btn.blue:hover {
    background-color: #b11556 !important;
    border-color: #b11556 !important;
    color: #fff !important;
}

.table .btn-primary:hover .ic,
.table .btn-info:hover .ic,
.table .btn-warning:hover .ic,
.table .btn-success:hover .ic {
    -webkit-filter: none;
    filter: none;
}

/* Destructive: light red chip, solid red on hover */
.table .btn-danger {
    background-color: #fdecea !important;
    border: 1px solid #f5c6c0 !important;
    color: #dd3d34 !important;
}

.table .btn-danger .ic {
    /* white PNG → red-ish */
    -webkit-filter: brightness(0) saturate(100%) invert(35%) sepia(51%) saturate(3171%) hue-rotate(343deg) brightness(91%) contrast(88%);
    filter: brightness(0) saturate(100%) invert(35%) sepia(51%) saturate(3171%) hue-rotate(343deg) brightness(91%) contrast(88%);
}

.table .btn-danger:hover {
    background-color: #dd3d34 !important;
    border-color: #dd3d34 !important;
    color: #fff !important;
}

.table .btn-danger:hover .ic {
    -webkit-filter: none;
    filter: none;
}

/* No hover-lift inside tables (jitter in scroll containers) */
.table .btn:hover,
.table .btn:focus {
    -webkit-transform: none;
    transform: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* consistent action-button size whether the icon is a PNG (.ic) or a font */
.table .btn-primary,
.table .btn-info,
.table .btn-warning,
.table .btn-success,
.table .btn-danger {
    min-width: 38px;
    min-height: 34px;
}

/* Button bar at the bottom of forms (Metronic paints it grey) */
.form-actions {
    background-color: transparent !important;
    border-top: 1px solid #f3f4f6 !important;
}

/* Totals mini-table (e.g. SendInvoice: SubTotal / Tax / Other / TOTAL) */
table.bpayd-totals {
    width: 100%;
}

table.bpayd-totals td {
    padding: 8px 10px;
    vertical-align: middle;
}

table.bpayd-totals td:first-child {
    padding-left: 0;
}

table.bpayd-totals td:last-child {
    padding-right: 0;
}

table.bpayd-totals label {
    margin-bottom: 0;
}

table.bpayd-totals tr:last-child td {
    border-top: 2px solid #ececf1;
    font-size: 15px;
}

/* ==========================================================================
   5. Forms
   ========================================================================== */

.form-control {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    min-height: 42px;
    font-size: 14px;
    color: #2b3340;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: #b11556 !important;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
    outline: none;
}

.form-control.input-sm,
.input-sm.form-control {
    min-height: 30px;
    border-radius: 6px !important;
}

/* Bare inputs/selects without .form-control (legacy markup on V2 pages,
   e.g. fee fields in Business Settings, the period select on the dashboard) */
.page-content input[type="text"],
.page-content input[type="number"],
.page-content input[type="password"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content select,
.page-content textarea {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-color: #fff;
    color: #2b3340;
    padding: 8px 12px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-content input[type="text"]:focus,
.page-content input[type="number"]:focus,
.page-content input[type="password"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="tel"]:focus,
.page-content select:focus,
.page-content textarea:focus {
    border-color: #b11556 !important;
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
}

/* Custom checkboxes: rounded box, brand fill + white check when on.
   (SVG background keeps the mark centered at any box size.) */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;  /* never squashed inside flex containers */
    min-height: 18px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: 1.5px solid #d4d9de;
    border-radius: 5px !important;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"]:hover {
    border-color: #b11556;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.15);
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.15);
}

input[type="checkbox"]:checked {
    background-color: #b11556;
    border-color: #b11556;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="checkbox"][disabled] {
    background-color: #f1f3f6;
    border-color: #e3e7eb;
    cursor: not-allowed;
}

/* Custom radios: same language as the checkboxes — round, brand dot */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: 1.5px solid #d4d9de;
    border-radius: 50% !important;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="radio"]:hover {
    border-color: #b11556;
}

input[type="radio"]:focus,
input[type="radio"]:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.15);
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.15);
}

input[type="radio"]:checked {
    border-color: #b11556;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23b11556'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="radio"][disabled] {
    background-color: #f1f3f6;
    border-color: #e3e7eb;
    cursor: not-allowed;
}

/* the label text of a radio/checkbox is clickable too — show the hand */
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
input[type="radio"] + label,
input[type="checkbox"] + label,
input[type="radio"] + span,
input[type="checkbox"] + span {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   iCheck-driven option toggles (e.g. BusinessSettings IPG Labels):
   the page logic depends on the plugin (ifChecked events), so keep it —
   recolor the blue sprites to brand and lay each ENABLED/DISABLED pair
   out on a single line.
   -------------------------------------------------------------------------- */

.iradio_flat-blue,
.icheckbox_flat-blue {
    -webkit-filter: hue-rotate(115deg) saturate(1.15);
    filter: hue-rotate(115deg) saturate(1.15);
}

.input-icon > label:has(.iradio_flat-blue),
.input-icon > label:has(input.icheck) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-bottom: 0;
}

.input-icon > label:has(input.icheck) .caption-subject {
    font-size: 11px;
    color: #5a6470;
    letter-spacing: 0.4px;
}

/* Reusable checkbox chip — works anywhere on the site:
   <label class="bpayd-check"><input type="checkbox"…><span>Text</span></label>
   (Inside filter bars a scoped variant adds nowrap + chip border.) */
label.bpayd-check {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #5a6470;
    cursor: pointer;
}

label.bpayd-check input[type="checkbox"] {
    margin: 0;
}

label.bpayd-check:hover {
    color: #b11556;
}

/* Dropdowns are clickable — show the hand cursor.
   Note: the open options list of a native <select> is OS-rendered;
   Chrome/Edge ignore cursor styles there (option rule helps in Firefox). */
select,
select.form-control,
.page-content select,
select option {
    cursor: pointer;
}

/* Keep validation semantics (red wins over the brand focus styles) */
.has-error .form-control,
input.help-block.help-block-error,
.form-control.input-validation-error {
    border-color: #e73d4a !important;
}

.has-error .form-control:focus,
.form-control.input-validation-error:focus {
    border-color: #e73d4a !important;
    -webkit-box-shadow: 0 0 0 3px rgba(231, 61, 74, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(231, 61, 74, 0.12) !important;
}

.form-group > label,
.control-label,
label.control-label {
    color: #3e4651;
    font-weight: 600;
}


.input-group .form-control:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-btn:last-child > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-btn:first-child > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-addon {
    border: 1.5px solid #e0e0e0;
    background-color: #f7f8fa;
    color: #5a6470;
}

/* The PasswordWithToggle helper emits Bootstrap-4 markup (.input-group-append,
   FA5 "fas" icons) on these Bootstrap-3 pages — adapt both so the eye button
   docks to the right of the input instead of dropping below it.
   (Login pages run real Bootstrap 4 — exclude them, flex handles it there.) */
body:not(.bpayd-login) .input-group > .input-group-append {
    display: table-cell;
    width: 1%;
    vertical-align: middle;
}

/* on the BS4 login, the page's own float-label CSS forces width:100% on the
   input, pushing the eye out of the group — restore BS4's flex sizing */
.bpayd-login .input-group > .form-control {
    width: 1% !important;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.bpayd-login .input-group > .input-group-append {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.input-group > .input-group-append > .toggle-password {
    border: 1.5px solid #e0e0e0 !important;
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    background-color: #fff;
    min-height: 42px;
    color: #8a94a0;
    padding: 7px 12px;
}

.input-group > .input-group-append > .toggle-password:hover {
    color: #b11556;
}

.input-group:has(.input-group-append) > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}

/* FA5 class names on the FA4 font bundled with the site */
.fas {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* checkboxes rendered with .form-control outside the filter bars */
input[type="checkbox"].form-control {
    width: 18px;
    height: 18px;
    min-height: 18px !important;
    padding: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.input-group-addon:first-child {
    border-radius: 8px 0 0 8px !important;
}

.input-group-addon:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* Brand the date pickers (color-only; positioning untouched) */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active {
    background-color: #b11556 !important;
    background-image: none !important;
    border-color: #b11556 !important;
}

/* --------------------------------------------------------------------------
   Zebra DatePicker: full reskin of the dark "metallic" theme → light modern
   panel. Colors/decoration only — positioning stays inline-controlled.
   -------------------------------------------------------------------------- */

.Zebra_DatePicker {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 10px;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.Zebra_DatePicker table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.Zebra_DatePicker td,
.Zebra_DatePicker th {
    border: 0 !important;
    border-radius: 6px !important;
}

/* header: month/year caption + prev/next arrows */
.Zebra_DatePicker .dp_header td {
    background: transparent !important;
    color: #2b3340 !important;
    font-weight: 700;
}

.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next {
    color: #8a94a0 !important;
    cursor: pointer;
}

.Zebra_DatePicker .dp_header td.dp_hover {
    background: rgba(177, 21, 86, 0.08) !important;
    color: #b11556 !important;
}

/* weekday strip (was solid yellow) */
.Zebra_DatePicker .dp_daypicker th {
    background: transparent !important;
    color: #8a94a0 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* day cells */
.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td,
.Zebra_DatePicker .dp_timepicker td {
    background: #f7f8fa !important;
    color: #2b3340 !important;
    cursor: pointer;
}

.Zebra_DatePicker td.dp_hover {
    background: rgba(177, 21, 86, 0.12) !important;
    color: #b11556 !important;
}

.Zebra_DatePicker td.dp_weekend {
    background: #f1f3f6 !important;
    color: #5a6470 !important;
}

.Zebra_DatePicker td.dp_not_in_month,
.Zebra_DatePicker td.dp_disabled,
.Zebra_DatePicker td.dp_weekend_disabled {
    background: transparent !important;
    color: #c9ced4 !important;
    cursor: default;
}

.Zebra_DatePicker td.dp_current {
    color: #b11556 !important;
    -webkit-box-shadow: inset 0 0 0 2px rgba(177, 21, 86, 0.4);
    box-shadow: inset 0 0 0 2px rgba(177, 21, 86, 0.4);
}

.Zebra_DatePicker td.dp_selected {
    background: #b11556 !important;
    color: #fff !important;
    font-weight: 700;
}

/* footer: "Today" / "Clear date" */
.Zebra_DatePicker .dp_footer td {
    background: transparent !important;
    color: #b11556 !important;
    font-weight: 600;
    cursor: pointer;
}

.Zebra_DatePicker .dp_footer td.dp_hover {
    background: rgba(177, 21, 86, 0.08) !important;
}

/* Date inputs: same density everywhere (some pages kept the tall variant) */
input.date-picker,
input.from.form-control,
input.to.form-control {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.5;
}

/* Zebra's injected calendar icon: stock sprite is red — soft neutral grey.
   The bundled (old) Zebra build also docks it flush against the input's
   right border; nudge it inward. */
button.Zebra_DatePicker_Icon {
    -webkit-filter: grayscale(1) brightness(0.8) opacity(0.75);
    filter: grayscale(1) brightness(0.8) opacity(0.75);
    margin-left: -6px;
}

/* ==========================================================================
   5b. Filter bars — compact the legacy col-grid filter forms used by the
   report/list pages (form.login-form: Payments, Deposits, Chargebacks,
   Batches, Retrievals, Transactions, Customers, Recurring Billing, ATH…)
   ========================================================================== */

form.login-form .form-body > .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-left: -6px;
    margin-right: -6px;
}

form.login-form .form-body > .row > [class*="col-"] {
    float: none;
    width: auto;
    -ms-flex: 1 1 170px;
    flex: 1 1 170px;
    min-width: 160px;
    padding-left: 6px;
    padding-right: 6px;
}

/* wider share for the big fields (cashier, search box, last four…) */
form.login-form .form-body > .row > .col-md-3,
form.login-form .form-body > .row > .col-md-4 {
    -ms-flex-positive: 2;
    flex-grow: 2;
}

/* checkbox / button columns hug their content */
form.login-form .form-body > .row > [class*="col-"]:has(input[type="checkbox"]),
form.login-form .form-body > .row > [class*="col-"]:has(.btn) {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 0;
}

/* non-column children take a full line (defensive) */
form.login-form .form-body > .row > .form-group {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}

/* a bare button dropped straight into a filter row goes to the right
   (its float is ignored once the row becomes a flexbox) */
form.login-form .form-body > .row > .btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: auto;
}

/* date fields shouldn't stretch absurdly wide in sparse rows */
form.login-form .form-body input[type="date"] {
    max-width: 280px;
}

form.login-form .form-body label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8a94a0;
    margin-bottom: 4px;
}

form.login-form .form-group {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

form.login-form .form-control {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 13px;
}

/* legacy markup renders checkboxes with .form-control → huge boxes */
form.login-form input[type="checkbox"].form-control {
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    border-radius: 5px !important;
    cursor: pointer;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* inline checkbox chip (modern markup) — same height/border as the inputs */
form.login-form .form-body label.bpayd-check {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin-bottom: 0;
    padding: 0 14px;
    background-color: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px !important;
    text-transform: none;
    font-size: 12px;
    font-weight: 600;
    color: #5a6470;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

form.login-form .form-body label.bpayd-check:hover {
    border-color: #b11556;
    color: #b11556;
}

form.login-form .form-body label.bpayd-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* the Search button column (metronic line-input wrapper adds offsets);
   keep the same bottom margin as the other form-groups so the button
   lines up with the fields */
form.login-form .form-md-line-input {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

form.login-form .form-md-line-input .input-icon {
    padding-top: 0 !important;
}

form.login-form .btn.blue {
    min-height: 38px;
}

/* Ad-hoc grey filter chips (e.g. Developers → API Logs date filter) */
.custom-filter {
    background-color: transparent !important;
    padding: 0;
}

/* Toolbar rows above the result tables (Print / Export / Print Selected
   Receipts…): buttons-only rows become a compact right-aligned toolbar.
   Filter rows are excluded because they contain .form-control fields. */
.portlet-body .row:has(> [class*="col-"] > .form-group > .input-icon > .btn.blue):not(:has(.form-control)) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 6px;
}

.portlet-body .row:has(> [class*="col-"] > .form-group > .input-icon > .btn.blue):not(:has(.form-control)) > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.portlet-body .row:has(> [class*="col-"] > .form-group > .input-icon > .btn.blue):not(:has(.form-control)) .form-group {
    margin: 0 !important;
    padding: 0 !important;
}

/* Several views hardcode `.select2-container { width: auto !important }` in
   their own <style> — filter selects must fill their column anyway */
form.login-form .select2-container {
    width: 100% !important;
}

/* select2 single selects follow the compact height inside filter bars */
form.login-form .select2-container--default .select2-selection--single {
    height: 38px;
}

form.login-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px;
}

form.login-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

/* ==========================================================================
   6. Select2 (v4 — both bundled copies share class names)
   ========================================================================== */

.select2-container--default .select2-selection--single {
    height: 42px;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 39px;
    padding-left: 14px;
    color: #2b3340;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 39px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #b11556 !important;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
}

.select2-dropdown {
    border: 1px solid #f0f0f0;
    border-radius: 8px !important;
    overflow: hidden; /* options paint square corners over the panel otherwise */
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* select2 squares off the edge that touches the control — keep it rounded */
.select2-container--open .select2-dropdown--below {
    border-radius: 8px !important;
    margin-top: 4px;
}

.select2-container--open .select2-dropdown--above {
    border-radius: 8px !important;
    margin-top: -4px;
}

/* Currently-selected option: brand tint instead of the default grey */
.select2-results__option[aria-selected="true"] {
    background-color: rgba(177, 21, 86, 0.08) !important;
    color: #b11556 !important;
}

/* …but the hover/keyboard highlight still wins over it */
.select2-results__option--highlighted[aria-selected="true"],
.select2-results__option--highlighted[aria-selected="false"] {
    background-color: #b11556 !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #b11556;
}

/* Hover/keyboard highlight, regardless of the select2 theme in use
   (some pages open the dropdown under the "bootstrap" theme class) */
.select2-results__option--highlighted {
    background-color: #b11556 !important;
    color: #fff !important;
}

.select2-results__option {
    cursor: pointer;
}

/* The dashboard period selector must span its container */
#divIndicadores .select2-container {
    width: 100% !important;
}

/* Short values ("Sale") shouldn't produce a stubby control */
.select2-container {
    min-width: 140px;
}

/* …except the compact DataTables "records per page" selector, which must
   also never stretch (some pages give the native select full width) */
.dataTables_length .select2-container {
    min-width: 70px;
    width: 90px !important;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 12px;
    outline: none;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #b11556 !important;
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
}

.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    min-height: 42px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(177, 21, 86, 0.08);
    border: 1px solid rgba(177, 21, 86, 0.2);
    border-radius: 6px !important;
    color: #8e1145;
}

/* Select2 v3 (bundled inside Metronic plugins.min.css on some pages) */
.select2-container .select2-choice {
    height: 42px;
    line-height: 40px;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-image: none !important;
    background-color: #fff;
}

/* ==========================================================================
   7. Tabs
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid #ececf1;
}

.nav-tabs > li > a {
    color: #5a6470;
    font-weight: 600;
    border: 0;
    border-radius: 8px 8px 0 0 !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background-color: rgba(177, 21, 86, 0.05);
    border-color: transparent;
    color: #b11556;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #b11556;
    border: 0;
    background-color: transparent;
    -webkit-box-shadow: inset 0 -2px 0 #b11556;
    box-shadow: inset 0 -2px 0 #b11556;
}

/* Custom wallet tab strip (QuickPayment) — kill the inline grey panels */
.custom-tabs,
.tabs-header {
    background: transparent !important;
}

/* …and the wallet panes themselves (Google/Apple Pay/ATH set an inline
   grey .page-bar background that the Card pane doesn't have) */
.tabs-content .tab-content .page-bar {
    background: transparent !important;
}

.tabs-header {
    border-bottom: 1px solid #ececf1 !important;
}

/* Custom tab buttons (defined blue in per-view <style> blocks in the body) */
.tab-button {
    border-radius: 8px 8px 0 0 !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tab-button:hover {
    background-color: rgba(177, 21, 86, 0.05) !important;
}

.tab-button.active {
    color: #b11556 !important;
}

.tab-button.active::after {
    background: #b11556 !important;
}

/* ==========================================================================
   8. Modals
   ========================================================================== */

.modal-content {
    border: 0;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid #f3f4f6;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4 {
    color: #b11556;
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid #f3f4f6;
}

/* --------------------------------------------------------------------------
   Payment detail modals (Reports): clean header, actions stacked right,
   receipt at full width.
   -------------------------------------------------------------------------- */

/* shell variant (#paymentInfo-modal) uses display:table-cell hacks inline */
#paymentInfo-modal .modal-header {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}

#paymentInfo-modal .modal-header > div {
    display: block !important;
    width: auto !important;
}

#paymentInfo-modal .modal-header > div:nth-of-type(2) {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

#paymentInfo-modal .modal-header h4 {
    margin: 0;
}

#paymentInfo-modal #imagePrint input[type="image"] {
    width: 30px !important;
}

/* content variant (#payment-detail-modal header table) */
#payment-detail-modal .actions {
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 8px;
}

#payment-detail-modal .actions .btn {
    min-width: 42px;
}

/* No cards-on-cards inside modals: wells become flat sections divided by
   a hairline (the denied/refunded notices keep their semantic tint) */
.modal .well,
.modal-body .well,
#printArea2 .well,
#screenArea .well {
    background-color: transparent;
    border: 0;
    border-radius: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #f3f4f6;
}

.modal .well.denied,
.modal-body .well.denied,
#printArea2 .well.denied,
#screenArea .well.denied {
    background-color: #f9e1e0;
    border: 0;
    border-radius: 10px !important;
    padding: 14px;
}

/* receipt text */
#receiptText {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: 12px;
    color: #2b3340;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px;
    resize: none;
    outline: none;
    background-color: #fafbfd;
}

/* ==========================================================================
   9. Alerts, labels, badges
   ========================================================================== */

.alert {
    border: 0;
    border-radius: 8px !important;
}

.alert-success {
    background-color: #e8f7ee;
    color: #23744a;
}

.alert-danger,
.alert-error {
    background-color: #fdebea;
    color: #c0392b;
}

.alert-info {
    background-color: #e8f1fb;
    color: #2b6cb0;
}

.alert-warning {
    background-color: #fdf3e3;
    color: #9c6512;
}

.label,
.badge {
    border-radius: 6px !important;
    text-shadow: none;
}

/* ==========================================================================
   10. #cssmenu — boxed left sidebar (VIRTUAL TERMINAL / QUICK PAYMENT / …)
   No overflow:hidden here: the menu has absolutely-positioned flyouts.
   ========================================================================== */

#cssmenu {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#cssmenu a {
    border: 0;
    border-bottom: 1px solid #f5f6f8;
    color: #4a5560;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#cssmenu > ul > li > a {
    color: #4a5560;
}

#cssmenu > ul > li:first-child > a {
    border-radius: 12px 12px 0 0 !important;
}

#cssmenu > ul > li:last-child > a {
    border-radius: 0 0 12px 12px !important;
    border-bottom: 0;
}

#cssmenu > ul > li > a:hover {
    color: #b11556;
}

#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
    background: rgba(177, 21, 86, 0.05);
    color: #b11556;
}

#cssmenu > ul > li.active a {
    background: rgba(177, 21, 86, 0.08);
    color: #b11556;
    -webkit-box-shadow: inset 3px 0 0 #b11556;
    box-shadow: inset 3px 0 0 #b11556;
}

/* Active page link (class applied by JS; the layout <style> paints it grey) */
#cssmenu a.active2,
.active2 {
    background-color: rgba(177, 21, 86, 0.08) !important;
    border-color: transparent !important;
    color: #b11556 !important;
    -webkit-box-shadow: inset 3px 0 0 #b11556;
    box-shadow: inset 3px 0 0 #b11556;
}

#cssmenu ul ul {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px !important;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#cssmenu ul ul a {
    color: #4a5560;
}

#cssmenu ul ul li {
    border-bottom: 1px solid #f5f6f8;
}

#cssmenu ul ul li:hover > a {
    background: rgba(177, 21, 86, 0.06);
    color: #b11556;
}

/* ==========================================================================
   11. Metronic page sidebar (responsive menu + dashboard layout)
   ========================================================================== */

.page-sidebar .page-sidebar-menu > li > a {
    color: #4a5560;
}

.page-sidebar .page-sidebar-menu > li > a > i {
    color: #8a94a0;
}

.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a {
    background: rgba(177, 21, 86, 0.06) !important;
    color: #b11556 !important;
}

.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a:hover {
    background: #b11556 !important;
    color: #fff !important;
}

/* ==========================================================================
   12. Legacy Bootstrap 2 pages (_Layout.cshtml + nested sub-layouts)
   Scoped under body.bpayd-legacy so BS2 resets never leak into BS3 pages.
   ========================================================================== */

body.bpayd-legacy {
    background-color: #f7f8fa;
    color: #2b3340;
}

/* Navbar: kill the dark BS2 gradient */
.bpayd-legacy .navbar-inner {
    background-color: #fff;
    background-image: none;
    filter: none;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.bpayd-legacy .navbar .nav > li > a {
    color: #3e4651;
    font-weight: 600;
    text-shadow: none;
}

.bpayd-legacy .navbar .nav > li > a:hover,
.bpayd-legacy .navbar .nav > li > a:focus,
.bpayd-legacy .navbar .nav > .active > a,
.bpayd-legacy .navbar .nav > .active > a:hover,
.bpayd-legacy .navbar .nav li.dropdown.open > .dropdown-toggle,
.bpayd-legacy .navbar .nav li.dropdown.active > .dropdown-toggle {
    background-color: rgba(177, 21, 86, 0.06);
    color: #b11556;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bpayd-legacy .navbar .brand {
    text-shadow: none;
}

.bpayd-legacy .navbar .divider-vertical {
    border-left-color: #f0f0f0;
    border-right-color: transparent;
    background-color: transparent;
}

.bpayd-legacy .btn-navbar {
    background-color: #fff;
    background-image: none;
    border: 1.5px solid #e0e0e0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bpayd-legacy .btn-navbar .icon-bar {
    background-color: #5a6470;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* User chip */
.bpayd-legacy .btn-inverse {
    background-color: #fff !important;
    background-image: none !important;
    border: 1.5px solid #e0e0e0 !important;
    color: #3e4651 !important;
    text-shadow: none;
    border-radius: 8px !important;
}

.bpayd-legacy .btn-inverse:hover,
.bpayd-legacy .btn-inverse:focus {
    background-color: rgba(177, 21, 86, 0.04) !important;
    border-color: #b11556 !important;
    color: #b11556 !important;
}

/* Left sidebar (.nav-tabs.nav-stacked inside .sidebar) */
.bpayd-legacy .sidebar > ul,
.bpayd-legacy .sidebar .nav.nav-tabs.nav-stacked {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bpayd-legacy .sidebar .nav-tabs.nav-stacked > li > a {
    border: 0;
    border-bottom: 1px solid #f5f6f8;
    border-radius: 0 !important;
    color: #4a5560;
    font-weight: 600;
    background-color: transparent;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bpayd-legacy .sidebar .nav-tabs.nav-stacked > li:first-child > a {
    border-radius: 12px 12px 0 0 !important;
}

.bpayd-legacy .sidebar .nav-tabs.nav-stacked > li:last-child > a {
    border-radius: 0 0 12px 12px !important;
    border-bottom: 0;
}

.bpayd-legacy .sidebar .nav-tabs.nav-stacked > li > a:hover,
.bpayd-legacy .sidebar .nav-tabs.nav-stacked > li.active > a {
    background-color: rgba(177, 21, 86, 0.07);
    color: #b11556;
    -webkit-box-shadow: inset 3px 0 0 #b11556;
    box-shadow: inset 3px 0 0 #b11556;
}

/* BS2 buttons: flatten gradients */
.bpayd-legacy .btn {
    background-image: none;
    filter: none;
    text-shadow: none;
    border-radius: 8px !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bpayd-legacy .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-inverse) {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #4a5560;
}

/* BS2 text inputs (no .form-control class in Bootstrap 2) */
.bpayd-legacy input[type="text"],
.bpayd-legacy input[type="password"],
.bpayd-legacy input[type="email"],
.bpayd-legacy input[type="number"],
.bpayd-legacy input[type="tel"],
.bpayd-legacy input[type="date"],
.bpayd-legacy textarea,
.bpayd-legacy .uneditable-input {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px !important;
    padding: 8px 12px;
    height: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bpayd-legacy select {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px !important;
    height: 40px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bpayd-legacy input[type="text"]:focus,
.bpayd-legacy input[type="password"]:focus,
.bpayd-legacy input[type="email"]:focus,
.bpayd-legacy input[type="number"]:focus,
.bpayd-legacy input[type="tel"]:focus,
.bpayd-legacy input[type="date"]:focus,
.bpayd-legacy textarea:focus,
.bpayd-legacy select:focus {
    border-color: #b11556;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1);
}

.bpayd-legacy .control-label {
    color: #3e4651;
    font-weight: 600;
}

/* BS2 breadcrumb & page header */
.bpayd-legacy .breadcrumb {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bpayd-legacy .page-header {
    border-bottom: 1px solid #ececf1;
}

/* BS2 pagination */
.bpayd-legacy .pagination ul > li > a {
    border-color: #f0f0f0;
    color: #5a6470;
}

.bpayd-legacy .pagination ul > .active > a,
.bpayd-legacy .pagination ul > .active > span {
    background-color: #b11556;
    border-color: #b11556;
    color: #fff;
}

/* ==========================================================================
   13. Login / register pages (Bootstrap 4, Layout = null)
   Scoped under body.bpayd-login. Light polish only: cards, inputs, buttons.
   ========================================================================== */

.bpayd-login h1,
.bpayd-login h2,
.bpayd-login h3 {
    font-family: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
}

.bpayd-login .myform {
    border: 1px solid #f0f0f0;
    border-radius: 12px !important;
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.bpayd-login .mybtn {
    border-radius: 8px !important;
}

.bpayd-login .btn.blue,
.bpayd-login .btn-primary {
    background-color: #b11556 !important;
    border-color: #b11556 !important;
    color: #fff !important;
    border-radius: 8px !important;
    -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bpayd-login .btn.blue:hover,
.bpayd-login .btn.blue:focus,
.bpayd-login .btn-primary:hover,
.bpayd-login .btn-primary:focus {
    background-color: #8e1145 !important;
    border-color: #8e1145 !important;
    -webkit-box-shadow: 0 4px 12px rgba(177, 21, 86, 0.3);
    box-shadow: 0 4px 12px rgba(177, 21, 86, 0.3);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.bpayd-login .form-control:focus {
    border-color: #b11556 !important;
    -webkit-box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(177, 21, 86, 0.1) !important;
}

/* The login's .float-label-control CSS zeroes the input padding
   (padding: 0.1em 0 1px 0), which sticks the text to the box edge.
   Keep the boxed look but restore comfortable inner padding. */
.bpayd-login .float-label-control .form-control,
.bpayd-login .float-label-control input.form-control {
    padding: 10px 14px;
    height: auto;
}

/* The floated label was positioned for the old underline inputs (top:-1em)
   and now touches the box border — lift it for a clear gap. (The "empty"
   placeholder state keeps its own higher-specificity position.) */
.bpayd-login .float-label-control label {
    top: -1.5em;
    left: 0;
    color: #5a6470;
    font-weight: 600;
}

} /* end @media screen */