/* Bootstrap 5 Compatibility Fixes - v8.7 - Cleaned */
.card {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    margin-bottom: 1rem !important;
}

.card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0.5rem 0.75rem !important; /* Reduced padding from 0.75rem 1.25rem */
    margin-bottom: 0 !important;
    border-top-left-radius: calc(0.375rem - 1px) !important;
    border-top-right-radius: calc(0.375rem - 1px) !important;
    font-size: 13px !important; /* Smaller font size for header */
}

.card-body {
    padding: 0.75rem !important; /* Reduced padding from 1.25rem */
}

.card-title {
    margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    font-weight: 400 !important; /* Lighter font weight */
    font-size: 13px !important; /* Smaller font size */
}

/* Card title accordion styling - restore original look */
.card-title a.accordion-toggle {
    color: #337ab7 !important; /* Light blue color for consistency */
    font-size: 12px !important; /* Even smaller font size to match panel-heading */
    font-weight: normal !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.3 !important; /* Tighter line height */
}

.card-title a.accordion-toggle:hover {
    color: #23527c !important; /* Darker blue on hover */
    text-decoration: none !important;
}

.accordion .card {
    margin-bottom: 1.5rem !important;
}

.accordion .card:last-child {
    margin-bottom: 1.5rem !important;
}

/* Fix table borders in Bootstrap 5 */
.table-bordered {
    border: 1px solid #dee2e6 !important;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Button colors and spacing - High specificity */
table .me-2,
td .me-2 {
    margin-right: 0.5rem !important;
}

table .btn-sm,
td .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.2rem !important;
}

table .btn-outline-primary,
td .btn-outline-primary,
button.btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
}

table .btn-outline-primary:hover,
td .btn-outline-primary:hover,
button.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

table .btn-outline-danger,
td .btn-outline-danger,
a.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

table .btn-outline-danger:hover,
td .btn-outline-danger:hover,
a.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Icon colors - High specificity */
table .btn-outline-primary .fas,
td .btn-outline-primary .fas,
button.btn-outline-primary .fas,
.btn-outline-primary i.fas {
    color: #0d6efd !important;
}

table .btn-outline-primary:hover .fas,
td .btn-outline-primary:hover .fas,
button.btn-outline-primary:hover .fas,
.btn-outline-primary:hover i.fas {
    color: #fff !important;
}

table .btn-outline-danger .fas,
td .btn-outline-danger .fas,
a.btn-outline-danger .fas,
.btn-outline-danger i.fas {
    color: #dc3545 !important;
}

table .btn-outline-danger:hover .fas,
td .btn-outline-danger:hover .fas,
a.btn-outline-danger:hover .fas,
.btn-outline-danger:hover i.fas {
    color: #fff !important;
}

/* Form field spacing */
.form-group {
    margin-bottom: 1rem !important;
}

.row.form-group {
    margin-bottom: 1rem !important;
}

/* Card consistency - ensure all cards have same width */
.TableContentDivAdmin .card {
    width: 100% !important;
    max-width: none !important;
}

/* Fix accordion toggle styling */
.accordion-toggle {
    color: inherit !important;
    text-decoration: none !important;
}

.accordion-toggle:hover {
    text-decoration: none !important;
}

/* Ensure collapse functionality works */
.collapse {
    display: none !important;
}

.collapse.show {
    display: block !important;
}

/* Fix responsive table wrapper */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Ensure proper spacing between sections - reduced margin */
.TableContentDivAdmin {
    margin-bottom: 1rem !important; /* Reduced from 2rem to 1rem */
}

/* Force button styles with maximum specificity */
body table tbody tr td button.btn.btn-sm.btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
}

body table tbody tr td button.btn.btn-sm.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    text-decoration: none !important;
}

/* Force icon colors with maximum specificity */
body table tbody tr td button.btn.btn-sm.btn-outline-primary i.fas {
    color: #0d6efd !important;
}

body table tbody tr td button.btn.btn-sm.btn-outline-primary:hover i.fas {
    color: #fff !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger i.fas {
    color: #dc3545 !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger:hover i.fas {
    color: #fff !important;
}

/* Remove borders from icon buttons - make them borderless */
body table tbody tr td button.btn.btn-sm.btn-outline-primary,
body table tbody tr td a.btn.btn-sm.btn-outline-danger {
    border: none !important;
    background: none !important;
    padding: 4px 8px !important;
}

body table tbody tr td button.btn.btn-sm.btn-outline-primary:hover,
body table tbody tr td a.btn.btn-sm.btn-outline-danger:hover {
    border: none !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
}

/* Ensure icons maintain proper colors without borders */
body table tbody tr td button.btn.btn-sm.btn-outline-primary i.fas {
    color: #007bff !important;
    font-size: 1.2em !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger i.fas {
    color: #dc3545 !important;
    font-size: 1.2em !important;
}

body table tbody tr td button.btn.btn-sm.btn-outline-primary:hover i.fas {
    color: #007bff !important;
}

body table tbody tr td a.btn.btn-sm.btn-outline-danger:hover i.fas {
    color: #dc3545 !important;
}

/* Fix table borders for tableStyle_ForBankAdmin */
.tableStyle_ForBankAdmin {
    border: 1px solid #dee2e6 !important;
    border-collapse: collapse !important;
}

.tableStyle_ForBankAdmin th,
.tableStyle_ForBankAdmin td {
    border: 1px solid #dee2e6 !important;
    padding: 3px !important;
}

.tableStyle_ForBankAdmin th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
}

/* Accordion card consistency - inherits from main .card rule */

/* Ensure consistent card widths */
.TableContentDivAdmin .card,
.accordion .card,
.accordion-style1 .card,
.panel-group .card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force consistent accordion container widths */
.TableContentDivAdmin .accordion,
.TableContentDivAdmin .accordion-style1,
.TableContentDivAdmin .panel-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* DataTables pagination button fixes for Bootstrap 5 - Higher specificity */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a.paginate_button,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button,
table.dataTable tbody tr td .paginate_button {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin-left: -1px !important;
    line-height: 1.42857143 !important;
    color: #337ab7 !important;
    text-decoration: none !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination li a.paginate_button:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
table.dataTable tbody tr td .paginate_button:hover {
    color: #23527c !important;
    background-color: #eee !important;
    border-color: #ddd !important;
    text-decoration: none !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination li a.paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span.paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
table.dataTable tbody tr td .paginate_button.current {
    color: #fff !important;
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination li a.paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
table.dataTable tbody tr td .paginate_button.disabled {
    color: #777 !important;
    background-color: #fff !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
}

/* Fix pagination container */
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    text-align: right !important;
    padding-top: 0.25em !important;
}

/* Ensure buttons are grouped together */
.dataTables_wrapper .dataTables_paginate .paginate_button:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    margin-left: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Login container centering fixes for Bootstrap 5 - Minimal approach */
.login-layout .main-container {
    padding-top: 50px !important;
}

/* Fix Bootstrap 5 offset classes that don't exist anymore */
.col-sm-offset-1 {
    margin-left: 8.33333333% !important;
}

/* Ensure login container maintains original styling */
.login-layout .login-container {
    margin: 0 auto !important;
}

/* Fix navbar container width to occupy full row */
.navbar-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Fix excessive padding on all pages - override inline styles set by header.jsp */
body:not(.login-layout) .main-container,
body:not(.login-layout) #main-container,
body.no-skin:not(.home-page) .main-container,
body.no-skin:not(.home-page) #main-container,
.main-container[style*="padding-top"],
#main-container[style*="padding-top"] {
    padding-top: var(--navbar-offset, 60px) !important;
}

/* Override JavaScript-set inline styles with higher specificity */
body .main-container[style*="padding-top"],
body #main-container[style*="padding-top"] {
    padding-top: var(--navbar-offset, 60px) !important;
}

body.home-page .main-container[style*="padding-top"],
body.home-page #main-container[style*="padding-top"] {
    padding-top: 0 !important;
}

body.home-page .main-container,
body.home-page #main-container {
    padding-top: 0 !important;
}

/* Fix Font Awesome icons - ensure proper display */
.ebp-icon.fa:before {
    font-family: "FontAwesome" !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-decoration: inherit !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Fix dropdown caret icon - hide duplicate and fix size */
.fa-caret-down:before {
    content: "\f0d7" !important;
}

/* Hide Bootstrap 5 auto-generated caret */
.dropdown-toggle::after {
    display: none !important;
}

/* Hide duplicate caret icons */
.dropdown-toggle .fa-caret-down + .fa-caret-down {
    display: none !important;
}

/* Ensure only one caret shows with proper size */
.dropdown-toggle .ebp-icon.fa-caret-down {
    font-size: 14px !important;
    margin-left: 5px !important;
}

/* Force only FontAwesome caret to show */
.dropdown-toggle .ebp-icon.fa-caret-down:before {
    content: "\f0d7" !important;
    font-family: "FontAwesome" !important;
}

/* Fix navbar dropdown styling */
.navbar .dropdown-toggle {
    color: #fff !important;
    text-decoration: none !important;
}

.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* Fix logout link styling - make it black like before */
.user-menu.dropdown-menu a {
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 3px 20px !important;
    clear: both !important;
    font-weight: normal !important;
    line-height: 1.42857143 !important;
    white-space: nowrap !important;
}

.user-menu.dropdown-menu a:hover,
.user-menu.dropdown-menu a:focus {
    color: #262626 !important;
    text-decoration: none !important;
    background-color: #f5f5f5 !important;
}

/* Remove this conflicting rule - we want 126px padding */

/* CRITICAL: Fix navbar width to be full - highest specificity */
#navbar .navbar-container,
.navbar .navbar-container,
.navbar-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 !important;
}

/* CRITICAL: Ensure header stays fixed */
body:not(.home-page) #navbar.navbar-fixed-top,
body:not(.home-page) .navbar-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

/* Normalize navbar brand/logo sizing for Bootstrap 5 */
:root {
    --brand-logo-max-h: 60px;
    --navbar-offset: 60px;
}

@media (min-width: 768px) {
    :root { --brand-logo-max-h: 70px; }
}

@media (min-width: 992px) {
    :root { --brand-logo-max-h: 80px; }
}

body.exist-image {
    --navbar-offset: 126px;
}

body.no-skin.home-page #navbar.navbar-fixed-top {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
}

/* Ensure the brand area aligns content vertically and doesn't inflate the navbar */
#navbar .navbar-container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    gap: .5rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    line-height: normal !important;
}

#navbar .navbar-header.pull-left,
#navbar .navbar-buttons.navbar-header.pull-right {
    float: none !important;
}

#navbar .navbar-buttons {
    margin-left: auto !important;
    align-self: flex-start !important;
}

/* Constrain logo height across varying source dimensions */
.navbar .navbar-brand .company-logo,
#navbar .navbar-brand .company-logo {
    display: block !important;
    max-height: var(--brand-logo-max-h) !important; /* overrides inline 110px */
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Optional: prevent oversized inline brand text from stretching navbar when no image */
.navbar .navbar-brand:not(:has(img.company-logo)),
#navbar .navbar-brand:not(:has(img.company-logo)) {
    font-size: 1.25rem !important;
    line-height: 1 !important;
}

/* USER'S WORKING SOLUTION: Remove body padding and add 126px to main-container */
body.no-skin.home-page {
    padding-top: 0px !important;
}

/* OVERRIDE SPECIFIC BOOTSTRAP RULES THAT ARE INTERFERING */
body:not(.home-page).exist-image .navbar-fixed-top + .main-container,
body:not(.home-page).exist-image .navbar-fixed-top + #main-container,
body:not(.home-page) .navbar-fixed-top + .main-container,
body:not(.home-page) .navbar-fixed-top + #main-container {
    padding-top: var(--navbar-offset, var(--brand-logo-max-h, 80px)) !important;
}

body.no-skin:not(.home-page) #main-container {
    padding-top: var(--navbar-offset, var(--brand-logo-max-h, 80px)) !important;
}

/* Fallback: when main-container is not immediately adjacent to navbar */
body:not(.home-page) .navbar-fixed-top ~ .main-container,
body:not(.home-page) .navbar-fixed-top ~ #main-container {
    padding-top: var(--navbar-offset, var(--brand-logo-max-h, 80px)) !important;
}

/* HIGHEST SPECIFICITY: Add 126px padding-top to main-container for fixed header */
body.no-skin.home-page .main-container,
body.no-skin.home-page #main-container,
body.no-skin.home-page .main-container[style*="padding-top"],
body.no-skin.home-page #main-container[style*="padding-top"],
body.exist-image.no-skin.home-page .main-container,
body.exist-image.no-skin.home-page #main-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#addInvoicePayment .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
}

#addInvoicePayment .modal-header .modal-title {
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
}

#addInvoicePayment .modal-header .close {
    order: 2 !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    min-width: 2rem !important;
    text-align: center !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}

#addInvoicePayment .modal-header .close:hover {
    opacity: 1 !important;
}

#modal_email_receipt .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
}

#modal_email_receipt .modal-header .modal-title {
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
}

#modal_email_receipt .modal-header .close {
    order: 2 !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    min-width: 2rem !important;
}

#modal_email_receipt .modal-header .close:hover {
opacity: 1 !important;
}

#payment_plan_info .modal-header {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
}

#payment_plan_info .modal-header .close {
float: none !important;
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
margin-top: 0 !important;
min-width: 2rem !important;
text-align: center !important;
line-height: 1 !important;
}

#display_auto_pay_payment_plan .modal-header,
#display_payment_plan .modal-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
}

#display_auto_pay_payment_plan .modal-header .modal-title,
#display_payment_plan .modal-header .modal-title {
order: 1 !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
line-height: 1.2 !important;
}

#display_auto_pay_payment_plan .modal-header .close,
#display_payment_plan .modal-header .close {
order: 2 !important;
float: none !important;
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
margin-top: 0 !important;
min-width: 2rem !important;
text-align: center !important;
line-height: 1 !important;
opacity: 0.8 !important;
}

#display_auto_pay_payment_plan .modal-header .close:hover,
#display_payment_plan .modal-header .close:hover {
opacity: 1 !important;
}

#addInvoicePayment .modal-body .well .row.form-group {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}

#collapseTwo .row.form-group {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}

#collapseTwo .row.form-group > .control-label,
#collapseTwo .row.form-group > label.control-label,
#collapseTwo .row.form-group > .form_label {
flex: 0 0 40% !important;
max-width: 40% !important;
margin-bottom: 0 !important;
}

#collapseTwo .row.form-group > .input-group {
flex: 0 0 60% !important;
max-width: 60% !important;
}

#collapseTwo .input-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

#collapseTwo .input-group > .form-control,
#collapseTwo .input-group > input,
#collapseTwo .input-group > select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#collapseTwo .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.75rem !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid #ced4da !important;
    background-color: #e9ecef !important;
    color: #212529 !important;
}

#collapseTwo .input-group-addon:first-child {
    border-right: 0 !important;
}

#collapseTwo .input-group-addon:last-child {
    border-left: 0 !important;
}

#collapseTwo .form-control,
#collapseTwo .form-control.input-sm {
    height: 34px !important;
}

#collapseThree .input-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

#collapseThree .input-group > .form-control,
#collapseThree .input-group > input,
#collapseThree .input-group > select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#collapseThree .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.75rem !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid #ced4da !important;
    background-color: #e9ecef !important;
    color: #212529 !important;
}

#collapseThree .input-group-addon:first-child {
    border-right: 0 !important;
}

#collapseThree .input-group-addon:last-child {
    border-left: 0 !important;
}

#collapseThree .form-control,
#collapseThree .form-control.input-sm {
    height: 34px !important;
}

#addInvoicePayment .modal-body .well .row.form-group > .col-xs-5 {
flex: 0 0 40% !important;
max-width: 40% !important;
}

#addInvoicePayment .modal-body .well .row.form-group > div:not(:first-child) {
flex: 0 0 60% !important;
max-width: 60% !important;
}

#sm_schedule_type .modal-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
}

#sm_schedule_type .modal-header .modal-title {
order: 1 !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
line-height: 1.2 !important;
}

#sm_schedule_type .modal-header .close {
order: 2 !important;
float: none !important;
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
margin-top: 0 !important;
min-width: 2rem !important;
text-align: center !important;
line-height: 1 !important;
opacity: 0.8 !important;
}

#sm_schedule_type .modal-header .close:hover {
opacity: 1 !important;
}

#addInvoicePayment #invoiceNumberId,
#addInvoicePayment #invoiceDescriptionId,
#addInvoicePayment #invoiceAmountId {
width: 100% !important;
height: 34px !important;
    height: 34px !important;
}

#addInvoicePayment .input-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

#addInvoicePayment .input-group-addon {
    display: flex !important;
    align-items: center !important;
    padding: 0.375rem 0.75rem !important;
    height: 34px !important;
    border: 1px solid #ced4da !important;
    border-right: 0 !important;
    background-color: #e9ecef !important;
    color: #212529 !important;
    line-height: 1 !important;
}

#addInvoicePayment .input-group > input,
#addInvoicePayment .input-group > .form-control,
#addInvoicePayment .input-group > #invoiceAmountId {
    flex: 1 1 auto !important;
}

/* Fix sidebar nav-list to have full width */
.sidebar .nav-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Fix sidebar list items to have consistent width */
.sidebar .nav-list > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Fix sidebar menu items text alignment - single line */
.sidebar .nav-list > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide empty menu-icon elements that take up space without content */
.sidebar .nav-list > li > a > i.menu-icon {
    display: none !important;
}

/* Fix sidebar menu icon alignment - smaller size for more text space */
.sidebar .nav-list > li > a > i {
    margin-right: 8px !important;
    vertical-align: middle !important;
    width: 14px !important;
    font-size: 12px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    color: #666 !important;
}

/* If menu-icon has actual icon classes, show them with proper styling */
.sidebar .nav-list > li > a > i.menu-icon[class*="fa-"],
.sidebar .nav-list > li > a > i.menu-icon[class*="icon-"] {
    display: inline-block !important;
}

/* Fix sidebar menu text */
.sidebar .nav-list > li > a > .menu-text {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hover state */
.sidebar .nav-list > li > a:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

/* Active state - blue icon and background */
.sidebar .nav-list > li.active > a {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border-left: 3px solid #1976d2 !important;
}

/* Active state icon - blue color */
.sidebar .nav-list > li.active > a > i {
    color: #1976d2 !important;
}

/* Hover state for active items */
.sidebar .nav-list > li.active > a:hover {
    background-color: #bbdefb !important;
    color: #1565c0 !important;
}

/* Removed duplicate rule - already defined above */

/* Remove problematic main-content and sidebar positioning rules */

/* Completely remove padding for pages that don't need it */
body.no-skin.home-page .main-container,
body.no-skin.home-page #main-container {
    padding-top: 0 !important;
}

/* Restore gray background for home page widget sections */
.widget-box .widget-body,
.widget-box .widget-main {
    background-color: #f5f5f5 !important;
}

.widget-box .widget-header {
    background-color: #e8e8e8 !important;
}

/* Fix DataTables pagination overlap issues */
.dataTables_wrapper {
    margin-top: 20px !important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 15px !important;
    clear: both !important;
    float: none !important;
    text-align: center !important;
}

.dataTables_wrapper .dataTables_info {
    margin-top: 15px !important;
    clear: both !important;
    float: none !important;
    text-align: left !important;
}

/* Fix DataTables buttons overlap */
.dt-buttons.btn-overlap {
    margin-bottom: 15px !important;
    clear: both !important;
}

.dt-buttons .btn {
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

/* Fix DataTables responsive layout */
.dataTables_wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.dataTables_wrapper .row > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure pagination doesn't overlap with table */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px !important;
}

/* Universal smaller pagination button styling */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span,
.paginate_button {
    padding: 4px 8px !important;
    margin: 0 1px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 3px !important;
    min-width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    background-color: #fff !important;
    color: #337ab7 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: #e6e6e6 !important;
    border-color: #ddd !important;
    color: #23527c !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination > .active > a,
.pagination > .active > span {
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.pagination > .disabled > a,
.pagination > .disabled > span {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #777 !important;
    cursor: not-allowed !important;
}

/* Compact pagination container */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px !important;
    text-align: center !important;
}

.pagination {
    margin: 10px 0 !important;
    display: inline-flex !important;
}

/* Remove extra spacing from pagination wrapper */
.dataTables_wrapper .dataTables_info {
    margin-top: 10px !important;
    font-size: 12px !important;
}

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

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

/* Universal pagination styling for all pagination types */
.paging_simple_numbers .paginate_button,
.paging_full_numbers .paginate_button,
.page-link,
nav[aria-label="pagination"] a,
nav[aria-label="pagination"] span {
    padding: 4px 8px !important;
    margin: 0 1px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 3px !important;
    min-width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    background-color: #fff !important;
    color: #337ab7 !important;
}

/* Compact spacing for all pagination containers */
.paging_simple_numbers,
.paging_full_numbers,
.page-navigation,
nav[aria-label="pagination"] {
    margin: 10px 0 !important;
    text-align: center !important;
}

/* Ensure consistent button sizing across all pagination types */
.btn-sm.paginate_button,
.btn-xs.paginate_button {
    padding: 4px 8px !important;
    font-size: 12px !important;
    min-width: 28px !important;
    height: 28px !important;
}

/* Fix Bootstrap 5 modal compatibility issues */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    margin: 30px auto !important;
}

/* Ensure modal buttons work properly */
.modal-footer .btn {
    margin-left: 5px !important;
}

/* Fix modal close button */
.modal-header .close,
.modal-header .btn-close {
    padding: 0 !important;
    margin: -1rem -1rem -1rem auto !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #000 !important;
    opacity: 0.5 !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 0.75 !important;
}

/* Fix Add Payment Method modal alignment issues */
#add_payment_method .modal-dialog {
    max-width: 600px !important;
    margin: 30px auto !important;
}

/* Fix modal header alignment */
#add_payment_method .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    position: relative !important;
}

#add_payment_method .modal-title {
    margin: 0 !important;
    line-height: 1.42857143 !important;
    flex: 1 !important;
    padding-right: 30px !important;
}

#add_payment_method .modal-header .close {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 21px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #000 !important;
    opacity: 0.2 !important;
    cursor: pointer !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#add_payment_method .modal-header .close:hover {
    opacity: 0.5 !important;
}

#add_payment_method .form-horizontal .form-group {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
}

#add_payment_method .form-horizontal .control-label {
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    flex: 0 0 35% !important;
    max-width: 35% !important;
}

#add_payment_method .form-horizontal .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#add_payment_method .form-control {
    width: 100% !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

#add_payment_method .radio-inline {
    display: inline-block !important;
    margin-right: 20px !important;
    margin-bottom: 10px !important;
    vertical-align: middle !important;
}

#add_payment_method .radio-inline input[type="radio"] {
    margin-right: 5px !important;
}

/* Fix modal body padding */
#add_payment_method .modal-body {
    padding: 20px !important;
}

#add_payment_method .well {
    padding: 19px !important;
    margin-bottom: 20px !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 4px !important;
}

/* Fix input-append for datepicker */
#add_payment_method .input-append {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}

#add_payment_method .input-append .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    flex: 1 !important;
}

#add_payment_method .input-append .add-on {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    cursor: pointer !important;
}

#add_payment_method .input-append .add-on:hover {
    background-color: #ddd !important;
}

/* Fix datepicker icon - use single FontAwesome calendar icon */
#add_payment_method .input-append .add-on .icon-th {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: none !important;
    position: relative !important;
}

#add_payment_method .input-append .add-on .icon-th:before {
    content: "\f073" !important;
    font-family: "FontAwesome" !important;
    font-size: 14px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Remove any after content to prevent duplicate icons */
#add_payment_method .input-append .add-on .icon-th:after {
    content: none !important;
    display: none !important;
}

/* Fallback: If FontAwesome not available, use Unicode calendar */
#add_payment_method .input-append .add-on .icon-th.no-fa:before {
    content: "📅" !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Fix ACH Details and CC Details alignment in home_page.jsp */
#div_ach_details .widget-box,
#div_cc_details .widget-box {
    margin-bottom: 20px !important;
}

/* Apply flex styling but allow jQuery show/hide to override */
#div_ach_details .form-group,
#div_cc_details .form-group {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure jQuery hide() can override the flex display */
#div_ach_details[style*="display: none"] .form-group,
#div_cc_details[style*="display: none"] .form-group {
    display: none !important;
}

/* Targeted styling for Payment Amount and Payment Date row form-groups */
#div_payment_amount.row.form-group,
#div_payment_date.row.form-group {
    margin-bottom: 15px !important;
    /* NOTE: No display property set here - Payment Date controlled by jQuery */
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding-left: 10px !important; /* Padding before label */
}

/* Only apply flex display to Payment Amount (not Payment Date - jQuery controls that) */
#div_payment_amount.row.form-group {
    display: flex !important;
}

/* Labels in Payment Amount and Payment Date */
#div_payment_amount.row.form-group .control-label.form_label,
#div_payment_date.row.form-group .control-label.form_label {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-weight: bold !important;
}

/* Input containers in Payment Amount and Payment Date */
#div_payment_amount.row.form-group .col-7,
#div_payment_amount.row.form-group .col-sm-7,
#div_payment_amount.row.form-group .col-md-8,
#div_payment_date.row.form-group .col-7,
#div_payment_date.row.form-group .col-sm-7,
#div_payment_date.row.form-group .col-md-8 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* Fix input-group alignment for $ symbol */
#div_payment_amount .input-group {
    display: flex !important;
    align-items: center !important;
}

#div_payment_amount .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    color: #555 !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    min-width: 40px !important;
    height: 34px !important;
}

#div_ach_details .control-label,
#div_cc_details .control-label {
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    font-weight: bold !important;
}

#div_ach_details .col-xs-7,
#div_ach_details .col-sm-7,
#div_ach_details .col-md-6,
#div_cc_details .col-xs-7,
#div_cc_details .col-sm-7,
#div_cc_details .col-md-6 {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#div_ach_details .form-control,
#div_cc_details .form-control {
    width: 100% !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

/* Apply input-group styling but allow jQuery show/hide to override */
#div_ach_details .input-group,
#div_cc_details .input-group {
    display: flex !important;
    width: 100% !important;
}

/* Ensure jQuery hide() can override the input-group display */
#div_ach_details[style*="display: none"] .input-group,
#div_cc_details[style*="display: none"] .input-group {
    display: none !important;
}

/* Fix widget headers in ACH and CC details */
#div_ach_details .widget-header,
#div_cc_details .widget-header {
    background-color: #e8e8e8 !important;
    border-bottom: 1px solid #ddd !important;
    padding: 8px 15px !important;
}

#div_ach_details .widget-body,
#div_cc_details .widget-body {
    background-color: #ffffff !important;
    padding: 15px !important;
}

#div_ach_details .widget-main,
#div_cc_details .widget-main {
    background-color: #ffffff !important;
    padding: 15px !important;
}

#div_ach_details .widget-title,
#div_cc_details .widget-title {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #428bca !important;
}

/* Fix Payment Amount and Payment Date alignment in make_payment.jsp */
#div_payment_amount .form-group {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Payment date styling moved to dedicated section below - see lines 1026-1037 */

#div_payment_amount .control-label {
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
    font-weight: bold !important;
}

#div_payment_amount .col-7,
#div_payment_amount .col-sm-7,
#div_payment_amount .col-md-8 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* Fix nested row and column alignment */
#div_payment_amount .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#div_payment_amount .col-12,
#div_payment_amount .col-sm-12,
#div_payment_amount .col-md-7 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix form controls in payment fields */
#div_payment_amount .form-control {
    width: 100% !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

/* Fix input-group styling in payment amount */
#div_payment_amount .input-group {
    display: flex !important;
    width: 100% !important;
}

#div_payment_amount .input-group-addon {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
}

#div_payment_amount .input-group input {
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
}

/* Fix Payment Amount alignment in make_payment_express_pay.jsp and universal */
#div_payment_amount .form-group {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: flex-start !important;
}


#div_payment_amount .col-7,
#div_payment_amount .col-sm-7,
#div_payment_amount .col-md-8 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* Fix nested row and column alignment */
#div_payment_amount .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#div_payment_amount .col-12,
#div_payment_amount .col-sm-12,
#div_payment_amount .col-md-7 {
    padding-left: 0 !important;
    padding-right: 15px !important;
}

#div_payment_amount .col-md-4 {
    padding-left: 15px !important;
    padding-right: 0 !important;
}

/* Add gap between select_amount and div_amount */
#select_amount {
    margin-right: 15px !important;
}

#div_amount {
    margin-left: 15px !important;
}

/* Reset page font size to prevent Bootstrap from making everything bigger */
body {
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
}

/* Fix widget-title h4 font size - restore original 18px instead of Bootstrap's 1.5rem */
.widget-title,
h4.widget-title,
.widget-header h4 {
    font-size: 18px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Set application-wide h4 font-size to 18px */
h4 {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* Make blue h4 class smaller */
h4.blue,
.blue h4 {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* Center widget title vertically in widget header */
.widget-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 40px !important;
    text-align: left !important;
}

.widget-header .widget-title {
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
}

/* PAGE-SPECIFIC TARGETING - Avoid cross-page conflicts */

/* 1. BANK ADMIN PAGES ONLY - Full width labels */
.TableContentDivAdmin .control-label.form_label,
body[data-page*="bank"] .control-label.form_label {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
}

/* 2. MAKE PAYMENT PAGES - Preserve Bootstrap grid (col-5 = ~41.67%) */
body[class*="make-payment"] .control-label.form_label,
body[data-page*="make-payment"] .control-label.form_label,
#make_payment_express_pay .control-label.form_label,
/* Specifically target credit card and check forms */
#add_credit_card_form .control-label.form_label,
#add_check_form .control-label.form_label {
    /* Let Bootstrap grid classes control width */
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    font-weight: bold !important;
    /* Ensure labels stay inline with inputs */
    display: inline-block !important;
}

/* Ensure credit card and check form rows work correctly */
#add_credit_card_form .row.form-group,
#add_check_form .row.form-group {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

#add_credit_card_form .row.form-group .col-5,
#add_credit_card_form .row.form-group .col-sm-5,
#add_credit_card_form .row.form-group .col-md-4,
#add_check_form .row.form-group .col-5,
#add_check_form .row.form-group .col-sm-5,
#add_check_form .row.form-group .col-md-4 {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    padding-left: 10px !important;   /* Small space before label */
    padding-right: 15px !important;  /* Space between label and input */
}

#add_credit_card_form .row.form-group .col-12,
#add_credit_card_form .row.form-group .col-sm-12,
#add_credit_card_form .row.form-group .col-md-8,
#add_check_form .row.form-group .col-12,
#add_check_form .row.form-group .col-sm-12,
#add_check_form .row.form-group .col-md-8 {
    flex: 0 0 66.67% !important;
    max-width: 66.67% !important;
    padding-left: 0 !important;      /* No extra space before input */
    padding-right: 10px !important;  /* Small space after input */
}

/* 3. INVOICE PAYMENTS - Specific targeting */
body[class*="invoice-payments"] .control-label.form_label,
#invoice_payments .control-label.form_label {
    text-align: left !important;
    padding-right: 15px !important;
    line-height: 34px !important;
    font-weight: bold !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Stronger selectors for bank admin task page ONLY - covers both holiday and banner sections */
/* Use URL-based targeting to avoid affecting make payment pages */
body[data-page*="bank"] .well .control-label.form_label,
body[class*="bank"] .well .control-label.form_label,
/* Fallback: target specific bank admin elements */
.TableContentDivAdmin .well .form-group .control-label.form_label,
.TableContentDivAdmin .well .col-5 .control-label.form_label,
.TableContentDivAdmin .well .col-sm-5 .control-label.form_label,
.TableContentDivAdmin .well .col-md-4 .control-label.form_label,
.TableContentDivAdmin .well .row .control-label.form_label,
div.TableContentDivAdmin div.well div.row div.col-5 .control-label.form_label,
div.TableContentDivAdmin div.well div.row div.col-sm-5 .control-label.form_label,
div.TableContentDivAdmin div.well div.row div.col-md-4 .control-label.form_label {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding-right: 0 !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    flex: none !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    min-height: auto !important;
}

/* Fix form groups in bank admin pages - covers both holiday and banner sections */
/* EXCLUDE payment date from this rule to prevent jQuery interference */
body[data-page*="bank"] .well .form-group:not(#div_payment_date),
body[data-page*="bank"] .well .row.form-group:not(#div_payment_date),
body[data-page*="bank"] div.well div.row.form-group:not(#div_payment_date),
body[class*="bank"] .well .form-group:not(#div_payment_date),
body[class*="bank"] .well .row.form-group:not(#div_payment_date),
body[class*="bank"] div.well div.row.form-group:not(#div_payment_date),
.TableContentDivAdmin .well .form-group:not(#div_payment_date),
.TableContentDivAdmin .well .row.form-group:not(#div_payment_date),
.TableContentDivAdmin div.well div.row.form-group:not(#div_payment_date) {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

body[data-page*="bank"] .well .form-group .col-5,
body[data-page*="bank"] .well .form-group .col-sm-5,
body[data-page*="bank"] .well .form-group .col-md-4,
body[data-page*="bank"] .well .row.form-group .col-5,
body[data-page*="bank"] .well .row.form-group .col-sm-5,
body[data-page*="bank"] .well .row.form-group .col-md-4,
body[class*="bank"] .well .form-group .col-5,
body[class*="bank"] .well .form-group .col-sm-5,
body[class*="bank"] .well .form-group .col-md-4,
body[class*="bank"] .well .row.form-group .col-5,
body[class*="bank"] .well .row.form-group .col-sm-5,
body[class*="bank"] .well .row.form-group .col-md-4,
.TableContentDivAdmin .well .form-group .col-5,
.TableContentDivAdmin .well .form-group .col-sm-5,
.TableContentDivAdmin .well .form-group .col-md-4,
.TableContentDivAdmin .well .row.form-group .col-5,
.TableContentDivAdmin .well .row.form-group .col-sm-5,
.TableContentDivAdmin .well .row.form-group .col-md-4 {
    flex: 1 !important;
    max-width: none !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
}

body[data-page*="bank"] .well .form-group .col-md-5,
body[data-page*="bank"] .well .form-group .col-md-6,
body[data-page*="bank"] .well .row.form-group .col-md-5,
body[data-page*="bank"] .well .row.form-group .col-md-6,
body[class*="bank"] .well .form-group .col-md-5,
body[class*="bank"] .well .form-group .col-md-6,
body[class*="bank"] .well .row.form-group .col-md-5,
body[class*="bank"] .well .row.form-group .col-md-6,
.TableContentDivAdmin .well .form-group .col-md-5,
.TableContentDivAdmin .well .form-group .col-md-6,
.TableContentDivAdmin .well .row.form-group .col-md-5,
.TableContentDivAdmin .well .row.form-group .col-md-6 {
    flex: 1 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* Fix holiday table and banner table styling */
#holiday-table,
.table {
    font-size: 12px !important;
    margin-bottom: 20px !important;
}

#holiday-table th,
#holiday-table td,
.table th,
.table td {
    padding: 8px !important;
    vertical-align: middle !important;
    border: 1px solid #ddd !important;
}


/* Fix datepicker overflow issue */
.ui-datepicker {
    width: auto !important;
    min-width: 200px !important;
    max-width: 300px !important;
    font-size: 12px !important;
}

.ui-datepicker table {
    width: 100% !important;
    table-layout: fixed !important;
}

.ui-datepicker td {
    width: 14.28% !important;
    text-align: center !important;
    padding: 2px !important;
    overflow: hidden !important;
}

.ui-datepicker td a {
    display: block !important;
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 11px !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.ui-datepicker-header {
    text-align: center !important;
    padding: 5px 0 !important;
}

.ui-datepicker-title {
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Fix alert padding - restore original smaller padding */
.alert,
.alert-block,
.alert-info,
.alert-header {
    padding: 8px 14px !important;
    margin-bottom: 18px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.alert-block {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.alert-header {
    padding: 6px 12px !important;
    margin-bottom: 10px !important;
}

/* Fix form controls in payment amount */
#div_payment_amount .form-control {
    width: 100% !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

/* Fix input-group styling in payment amount */
#div_payment_amount .input-group {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
}

#div_payment_amount .input-group-addon {
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    min-width: 35px !important;
    height: 30px !important;
}

#div_payment_amount .input-group input,
#div_payment_amount .input-group .form-control {
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    flex: 1 !important;
}

/* Payment date styling now handled in dedicated section above (lines 1026-1037) */

/* OVERRIDE: Targeted styling for Payment Amount row form-group - MUST come after other #div_payment_amount rules */
#div_payment_amount.row.form-group {
    display: flex !important;
    margin-bottom: 15px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding-left: 10px !important; /* Padding before label */
}

/* OVERRIDE: Payment Amount label - 30% width */
#div_payment_amount.row.form-group .control-label.form_label {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-weight: bold !important;
}

/* OVERRIDE: Payment Amount input container - 70% width */
#div_payment_amount.row.form-group .col-7,
#div_payment_amount.row.form-group .col-sm-7,
#div_payment_amount.row.form-group .col-md-8 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

/* OVERRIDE: Payment Amount input-group for $ symbol alignment */
#div_payment_amount.row.form-group .input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

#div_payment_amount.row.form-group .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    color: #555 !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    min-width: 40px !important;
    height: 34px !important;
}

/* Fix Total Payment Amount row in invoice_payments.jsp */
.row.form-group:has(input#totalPaymentAmount) {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-left: 10px !important; /* Padding for the row */
}

/* Fix Total Payment Amount label */
.row.form-group:has(input#totalPaymentAmount) .control-label.form_label {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-weight: bold !important;
}

/* Fix the input container - limit to 30% width */
.row.form-group:has(input#totalPaymentAmount) .col-xs-2,
.row.form-group:has(input#totalPaymentAmount) .col-sm-2,
.row.form-group:has(input#totalPaymentAmount) .col-md-8 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    padding-left: 0 !important;
}

/* Fix the nested row inside input container */
.row.form-group:has(input#totalPaymentAmount) .row {
    margin: 0 !important;
    width: 100% !important;
}

/* Fix the column containing input-group - make it smaller */
.row.form-group:has(input#totalPaymentAmount) .col-xs-4,
.row.form-group:has(input#totalPaymentAmount) .col-sm-4,
.row.form-group:has(input#totalPaymentAmount) .col-md-6 {
    flex: 1 !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Fix the input-group alignment */
.input-group:has(input#totalPaymentAmount) {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Fix the $ addon */
.input-group:has(input#totalPaymentAmount) .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
    min-width: 35px !important;
    height: 34px !important;
}

/* Fix the input element - no overlap */
input#totalPaymentAmount {
    height: 34px !important;
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    flex: 1 !important;
    min-width: 0 !important; /* Prevent overflow */
}

/* Sync Payment Date input box size with Total Payment Amount */
#div_payment_date.row.form-group {
    /* NO DISPLAY PROPERTY - jQuery controls visibility */
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-left: 10px !important; /* Same padding as Total Payment Amount */
}

/* Payment Date label - same 30% width as Total Payment Amount */
#div_payment_date.row.form-group .control-label.form_label {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-weight: bold !important;
}

/* Payment Date input container - same 30% width as Total Payment Amount */
#div_payment_date.row.form-group .col-xs-2,
#div_payment_date.row.form-group .col-sm-2,
#div_payment_date.row.form-group .col-md-8 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    padding-left: 0 !important;
}

/* Payment Date nested row */
#div_payment_date.row.form-group .row {
    margin: 0 !important;
    width: 100% !important;
}

/* Payment Date input column */
#div_payment_date.row.form-group .col-xs-4,
#div_payment_date.row.form-group .col-sm-4,
#div_payment_date.row.form-group .col-md-5 {
    flex: 1 !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Payment Date input - same size as Total Payment Amount */
#div_payment_date input#inputPmtDate {
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 100% !important;
}

/* Fix Edit Payment Method modal size - no scroll needed */
[id^="upd_payment_method_"] .modal-dialog {
    max-width: 600px !important;
    width: 90% !important;
    margin: 30px auto !important;
}

[id^="upd_payment_method_"] .modal-content {
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
}

[id^="upd_payment_method_"] .modal-body {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

[id^="upd_payment_method_"] .modal-header {
    padding: 15px 20px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    flex-shrink: 0 !important;
}

[id^="upd_payment_method_"] .modal-footer {
    padding: 15px 20px !important;
    border-top: 1px solid #e5e5e5 !important;
    flex-shrink: 0 !important;
}

/* Fix Add Payment Method modal alignment */
#add_payment_method .modal-dialog {
    max-width: 600px !important;
    width: 90% !important;
}

#add_payment_method .form-group {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
}

#add_payment_method .control-label.form_label {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    text-align: left !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-weight: bold !important;
}

#add_payment_method .col-sm-6 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
}

#add_payment_method .form-control {
    width: 100% !important;
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

#add_payment_method .input-append {
    display: flex !important;
    align-items: center !important;
}

#add_payment_method .input-append input {
    flex: 1 !important;
    border-radius: 4px 0 0 4px !important;
}

#add_payment_method .input-append .add-on {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    min-width: 40px !important;
    height: 34px !important;
}

/* Fix $ symbol and input alignment in make_payment_express_pay.jsp */
#row_pmt_amt .input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

#row_pmt_amt .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
    min-width: 35px !important;
    height: 34px !important;
}

#row_pmt_amt .input-group input,
#row_pmt_amt .input-group .form-control {
    height: 34px !important;
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Also fix the hidden div_amount input-group */
#div_amount .input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

#div_amount .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
    min-width: 35px !important;
    height: 34px !important;
}

#div_amount .input-group input,
#div_amount .input-group .form-control {
    height: 34px !important;
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Sync select_amount dropdown height with div_amount input box */
#row_pmt_amt #select_amount {
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    line-height: 1.42857143 !important;
    width: 100% !important;
}

/* Add spacing between Credit Card and Check radio buttons in make_payment_express_pay.jsp */
.radio-inline.form_label.control-label.lbl {
    margin-right: 20px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
}

/* Specific spacing for the radio button labels */
form label[for="credit_card"].radio-inline,
form label[for="check"].radio-inline {
    margin-right: 25px !important;
    padding-right: 10px !important;
}

/* Ensure proper gray backgrounds for home page sections */
body:not(.login-layout) .main-content .widget-box .widget-body,
body:not(.login-layout) .main-content .widget-box .widget-main {
    background-color: #f5f5f5 !important;
}

body:not(.login-layout) .main-content .widget-box .widget-header {
    background-color: #e8e8e8 !important;
}

/* Fix Bootstrap 5 well class styling */
.well {
    min-height: 20px !important;
    padding: 19px !important;
    margin-bottom: 20px !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

/* Fix Bootstrap 5 tab overlap with well div - Enhanced */
.tabbable .nav-tabs {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #ddd !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: transparent !important;
}

.tabbable .well {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    padding-top: 0 !important;
}

/* Fix Bootstrap 3 style li > a tab structure for Bootstrap 5 */
.tabbable .nav-tabs > li > a {
    display: block !important;
    padding: 10px 15px !important;
    margin-bottom: -1px !important;
    background: none !important;
    border: 1px solid transparent !important;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    color: #495057 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 15 !important;
    cursor: pointer !important;
}

.tabbable .nav-tabs > li.active > a {
    color: #555 !important;
    background-color: #f5f5f5 !important;
    border-color: #ddd #ddd transparent !important;
    border-bottom: 1px solid #f5f5f5 !important;
    z-index: 20 !important;
}

/* Add JavaScript-free tab functionality using CSS */
.tabbable .tab-content .tab-pane {
    display: none !important;
}

.tabbable .tab-content .tab-pane.active {
    display: block !important;
}

/* Make tabs clickable and functional without JavaScript */
.tabbable .nav-tabs > li > a:focus,
.tabbable .nav-tabs > li > a:hover {
    background-color: #f8f9fa !important;
    border-color: #e9ecef #e9ecef #ddd !important;
}

/* Ensure Bootstrap 5 tab functionality works */
.nav-tabs .nav-link:not(.active):hover {
    border-color: #e9ecef #e9ecef #dee2e6 !important;
}

/* REMOVED DUPLICATE - Invoice payments styling already handled at line 1319-1327 */

/* REMOVED - These broad selectors were breaking make payment pages */
/* Override above rule specifically for bank admin task page - MUST come after conflicting rules */
/* .well .form-group .control-label.form_label,
.well .row.form-group .control-label.form_label,
body .well .form-group .control-label.form_label,
body .well .row.form-group .control-label.form_label {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding-right: 0 !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    min-height: auto !important;
}

.input-group {
    display: flex !important;
    align-items: center !important;
}

.input-group-addon {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #555 !important;
    text-align: center !important;
    background-color: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px 0 0 4px !important;
    border-right: 0 !important;
}

.input-group input {
    border-radius: 0 4px 4px 0 !important;
    border-left: 0 !important;
}

/* Fix specific alignment for Total Payment Amount row */
#totalPaymentAmount {
    height: 34px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border: 1px solid #ccc !important;
}

/* Fix Bootstrap 5 nav-tabs styling */
.nav-tabs .nav-link {
    margin-bottom: -1px !important;
    background: none !important;
    border: 1px solid transparent !important;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    padding: 10px 15px !important;
}

.nav-tabs .nav-link.active {
    color: #555 !important;
    background-color: #f5f5f5 !important;
    border-color: #ddd #ddd transparent !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #ddd !important;
    isolation: isolate !important;
}

/* Fix tab content padding inside well */
.well .tab-content {
    padding-top: 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure tab panes are properly positioned */
.tab-pane {
    position: relative !important;
}

/* Fix user profile specific styling for Bootstrap 5 */
.user-profile .nav-tabs {
    border-bottom: 1px solid #ddd !important;
}

.user-profile .nav-tabs .nav-link {
    color: #495057 !important;
    text-decoration: none !important;
}

.user-profile .nav-tabs .nav-link.active {
    background-color: #f5f5f5 !important;
    border-color: #ddd #ddd #f5f5f5 !important;
}

/* Fix pagination styling for home page and other pages */
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px !important;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7 !important;
    text-decoration: none;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #23527c !important;
    background-color: #eee !important;
    border-color: #ddd !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff !important;
    cursor: default;
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777 !important;
    cursor: not-allowed;
    background-color: #fff !important;
    border-color: #ddd !important;
}

table.dataTable {
	border-collapse: collapse !important;
}

table.dataTable > tbody > tr {
	background-color: #ffffff !important;
}

table.dataTable > tbody > tr.odd,
table.dataTable > tbody > tr.even,
table.dataTable.display > tbody > tr.odd,
table.dataTable.display > tbody > tr.even,
table.dataTable.stripe > tbody > tr.odd,
table.dataTable.stripe > tbody > tr.even {
	background-color: #ffffff !important;
}

table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
	border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#invoice-table_wrapper .dataTables_paginate .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#invoice-table_wrapper .dataTables_paginate .pagination > li {
    display: block !important;
}

#invoice-table_wrapper .dataTables_paginate .pagination > li > a,
#invoice-table_wrapper .dataTables_paginate .pagination > li > span {
    float: none !important;
    display: block !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.25 !important;
    min-width: 2rem !important;
    text-align: center !important;
}

#invoice-table_wrapper .dataTables_paginate .pagination > li > a:focus {
    box-shadow: none !important;
}