.app-content {
    padding-top: 0 !important;
}

.symbol-35px .profile-icon {
    width: 35px;
    height: 35px;
    background-color: #b5b5c3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5em;
    border-radius: 15px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(var(--bs-gray-200-rgb), .9);
}

.standard-KYC-table-layout div.dataTables_filter {
    float: left;
    text-align: left;
}

.standard-KYC-table-layout #dtControls {
    float: right;
    margin-left: 1rem;
}

.standard-KYC-table-layout #dtShowHideControls {
    float: right;
    margin-left: 1rem;
    margin-top: 1em;
}
.standard-KYC-table-layout #dtShowHideControls input {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
}

.standard-KYC-table-layout .dt-buttons {
    float: right;
}

#kt_app_sidebar_logo a {
    display: block;
    width: 100%;
    height: 100%;
}

#kt_app_sidebar_logo #kyc_app_logo {
    width: 100%;
    height: 100%;
    background: url('/images/default-header-logo.png') no-repeat center center;
    background-size: contain;
}

.menu-item.new-level {
    margin-top: 2.5em;
}

.app-sidebar .menu-sub {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.app-sidebar .menu-sub:has(.menu-link.active) {
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Items with children act as headers for their section: heavier than leaf links,
   with top-level tier headers (wholesaler, Groups, Merchants, ...) largest. */
.app-sidebar .menu-item:has(> .menu-sub) > .menu-link {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.app-sidebar .menu-item:has(> .menu-sub) > .menu-link .menu-title {
    font-weight: 600;
}

.app-sidebar .menu > .menu-item:has(> .menu-sub) > .menu-link .menu-title {
    font-size: 1.15rem;
}

.app-sidebar .menu-item:not(:has(> .menu-sub)) > .menu-link .menu-title {
    font-weight: 400;
    font-size: 1rem;
}

.app-sidebar-wrapper .menu-sub-indention .menu-item .menu-item .menu-link.active {
    margin-right: 0;
}

.app-sidebar-wrapper .menu-sub-indention .menu-sub {
    margin-left: 1.75rem;
    margin-right: 0;
}

.app-sidebar .menu-item {
    display: block;
    padding: 0;
}

#kt_app_mobile_sidebar_logo a {
    display: block;
    width: 50%;
    height: 100%;
    padding: 1em;
}

#kt_app_mobile_sidebar_logo #kyc_app_logo {
    width: 100%;
    height: 100%;
    background: url(/images/default-header-logo.png) no-repeat left center;
    background-size: contain;
}

.overflow-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.spinner {
    position: relative;
}
.spinner:before {
    content: "";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 50%;
    border: 2px solid #D1D3E0;
    border-right: 2px solid transparent;
}
.spinner:before {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.75rem;
}
.spinner.spinner-center:before {
    left: 50%;
    margin-left: -0.75rem;
}
.spinner.spinner-left:before {
    right: auto;
}
.spinner.spinner-right:before {
    left: auto;
}
.spinner.spinner-sm:before {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
}
.spinner.spinner-sm.spinner-center:before {
    left: 50%;
    margin-left: -0.625rem;
}
.spinner.spinner-sm.spinner-left:before {
    right: auto;
}
.spinner.spinner-sm.spinner-right:before {
    left: auto;
}
.spinner.spinner-lg:before {
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
}
.spinner.spinner-lg.spinner-center:before {
    left: 50%;
    margin-left: -1rem;
}
.spinner.spinner-lg.spinner-left:before {
    right: auto;
}
.spinner.spinner-lg.spinner-right:before {
    left: auto;
}
.spinner:before {
    -webkit-animation: animation-spinner 0.5s linear infinite;
    animation: animation-spinner 0.5s linear infinite;
}
.spinner.spinner-primary:before {
    border: 2px solid #3699FF;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-primary:before {
    border: 2px solid #1287ff;
    border-right: 2px solid transparent;
}
.spinner.spinner-secondary:before {
    border: 2px solid #E4E6EF;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-secondary:before {
    border: 2px solid #ced1e2;
    border-right: 2px solid transparent;
}
.spinner.spinner-success:before {
    border: 2px solid #1BC5BD;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-success:before {
    border: 2px solid #17a69f;
    border-right: 2px solid transparent;
}
.spinner.spinner-info:before {
    border: 2px solid #8950FC;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-info:before {
    border: 2px solid #712dfb;
    border-right: 2px solid transparent;
}
.spinner.spinner-warning:before {
    border: 2px solid #FFA800;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-warning:before {
    border: 2px solid #db9000;
    border-right: 2px solid transparent;
}
.spinner.spinner-danger:before {
    border: 2px solid #F64E60;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-danger:before {
    border: 2px solid #f42c41;
    border-right: 2px solid transparent;
}
.spinner.spinner-light:before {
    border: 2px solid #F3F6F9;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-light:before {
    border: 2px solid #dbe4ed;
    border-right: 2px solid transparent;
}
.spinner.spinner-dark:before {
    border: 2px solid #181C32;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-dark:before {
    border: 2px solid #0c0e1a;
    border-right: 2px solid transparent;
}
.spinner.spinner-white:before {
    border: 2px solid #ffffff;
    border-right: 2px solid transparent;
}
.spinner.spinner-darker-white:before {
    border: 2px solid #ededed;
    border-right: 2px solid transparent;
}
.spinner.spinner-right:before {
    left: auto;
    right: 1rem;
}
.spinner.spinner-right.btn:not(.btn-block) {
    padding-right: 3.5rem;
}
.spinner.spinner-right.btn:not(.btn-block).spinner-sm {
    padding-right: 3.25rem;
}
.spinner.spinner-right.btn:not(.btn-block).spinner-lg {
    padding-right: 4rem;
}
.spinner.spinner-left:before {
    right: auto;
    left: 1rem;
}
.spinner.spinner-left.btn:not(.btn-block) {
    padding-left: 3.5rem;
}
.spinner.spinner-left.btn:not(.btn-block).spinner-sm {
    padding-left: 3.25rem;
}
.spinner.spinner-left.btn:not(.btn-block).spinner-lg {
    padding-left: 4rem;
}
.spinner.spinner-track:before {
    -webkit-animation: animation-spinner 0.5s linear infinite;
    animation: animation-spinner 0.5s linear infinite;
}
.spinner.spinner-track.spinner-primary:before {
    border: 2px solid #cfe7ff;
    border-top-color: #2791ff;
}
.spinner.spinner-track.spinner-darker-primary:before {
    border: 2px solid #9ccdff;
    border-top-color: #037fff;
}
.spinner.spinner-track.spinner-secondary:before {
    border: 2px solid white;
    border-top-color: #dadde9;
}
.spinner.spinner-track.spinner-darker-secondary:before {
    border: 2px solid white;
    border-top-color: #c4c8dc;
}
.spinner.spinner-track.spinner-success:before {
    border: 2px solid #8aefea;
    border-top-color: #19b8b0;
}
.spinner.spinner-track.spinner-darker-success:before {
    border: 2px solid #5de9e2;
    border-top-color: #159892;
}
.spinner.spinner-track.spinner-info:before {
    border: 2px solid #eee6ff;
    border-top-color: #7f41fc;
}
.spinner.spinner-track.spinner-darker-info:before {
    border: 2px solid #cdb4fe;
    border-top-color: #671efb;
}
.spinner.spinner-track.spinner-warning:before {
    border: 2px solid #ffdc99;
    border-top-color: #f09e00;
}
.spinner.spinner-track.spinner-darker-warning:before {
    border: 2px solid #ffcb66;
    border-top-color: #cc8600;
}
.spinner.spinner-track.spinner-danger:before {
    border: 2px solid #fde0e3;
    border-top-color: #f53f53;
}
.spinner.spinner-track.spinner-darker-danger:before {
    border: 2px solid #fbafb7;
    border-top-color: #f41d34;
}
.spinner.spinner-track.spinner-light:before {
    border: 2px solid white;
    border-top-color: #e9eef4;
}
.spinner.spinner-track.spinner-darker-light:before {
    border: 2px solid white;
    border-top-color: #d1dde8;
}
.spinner.spinner-track.spinner-dark:before {
    border: 2px solid #4a5699;
    border-top-color: #131628;
}
.spinner.spinner-track.spinner-darker-dark:before {
    border: 2px solid #394377;
    border-top-color: #070910;
}
.spinner.spinner-track.spinner-white:before {
    border: 2px solid white;
    border-top-color: #f7f7f7;
}
.spinner.spinner-track.spinner-darker-white:before {
    border: 2px solid white;
    border-top-color: #e6e6e6;
}
.spinner-grow {
    vertical-align: sub;
}
.spinner-border {
    vertical-align: sub;
}

@-webkit-keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* This hides the built in reveal/show password icon in Edge because we have our own */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.form-floating > label {
    color: var(--bs-gray-500);
    font-size: 1.15em;
}

.data-table-child-container table  tr {
    border-color: var(--bs-gray-500);
}

/* Custom toastr styling for the pop up message we show when forms are saved. */
.toastr.toastr-success {
    background-color: var(--bs-primary, #1BC5BD) !important;
    color: var(--button-text-color, #ffffff) !important;
    border: none !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    font-weight: 500 !important;
}
.toastr.toastr-success .toastr-title,
.toastr.toastr-success .toastr-message {
    color: var(--button-text-color, #ffffff) !important;
    font-weight: 500 !important;
}
.toastr.toastr-success .toastr-close-button {
    background-color: var(--button-text-color, #ffffff) !important;
    opacity: 0.8;
}
.toastr.toastr-success .toastr-close-button:hover {
    opacity: 1;
    background-color: var(--button-text-color, #ffffff) !important;
}
.toastr.toastr-success .toastr-progress {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.required:after {
    content: "(required)"  !important ;
    overflow-wrap: normal;
}

/* Adding two media queries to Bootstrap's xxl container to give us a bit more space on large monitors. */
@media (min-width: 1600px) {
    .app-container.container-xxl {
        max-width: 1500px;
    }

    body:not([data-kt-app-sidebar-minimize=on]) {
        --bs-app-sidebar-width: 300px;
        --bs-app-sidebar-width-actual: 300px;
    }
}

@media (min-width: 1800px) {
    .app-container.container-xxl {
        max-width: 1680px;
    }

    body:not([data-kt-app-sidebar-minimize=on]) {
        --bs-app-sidebar-width: 320px;
        --bs-app-sidebar-width-actual: 320px;
    }
}

/* ---- White label brand-card overview (Phase 8b) ---- */
.wl-overview-heading {
    font-size: 1.25rem;
    color: var(--bs-gray-800);
}

.wl-entity-section .card-header {
    min-height: unset;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.wl-entity-section-body {
    padding: 1.25rem 1.5rem;
}

.wl-subsection-heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
    margin-bottom: 0.6rem;
}

/* Clear separation between the Active and Inactive subsections. */
.wl-subsection-spaced {
    margin-top: 5rem;
    padding-top: 1.5rem;
}

.wl-header-note {
    text-align: right;
    white-space: nowrap;
}

/* Vertical brand card laid out in a Bootstrap grid (4 across on xl). */
.wl-brand-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bs-gray-200);
    border-top: 3px solid var(--bs-gray-300);
    border-radius: 0.625rem;
    background-color: var(--bs-card-bg, #ffffff);
}

.wl-brand-card.wl-brand-card-active {
    border-top-color: var(--bs-success);
}

.wl-brand-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wl-brand-favicon {
    width: 38px;
    height: 38px;
    border-radius: 0.45rem;
    object-fit: contain;
    background-color: #ffffff;
    border: 1px solid var(--bs-gray-200);
}

.wl-brand-chip {
    width: 38px;
    height: 38px;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.wl-brand-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wl-brand-field {
    font-size: 0.85rem;
    color: var(--bs-gray-800);
    margin-bottom: 0.15rem;
    word-break: break-word;
}

.wl-brand-label {
    font-weight: 600;
    color: var(--bs-gray-600);
}

.wl-brand-domain {
    color: var(--bs-gray-900);
    word-break: break-all;
}

.wl-brand-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wl-brand-swatch {
    width: 26px;
    height: 26px;
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: help;
}

.wl-brand-card-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--bs-gray-200);
    font-size: 0.85rem;
}

/* Push Activate/Duplicate/Delete to the right, leaving space after Edit. */
.wl-action-edit {
    margin-right: auto;
}

.wl-action-rest {
    display: flex;
    gap: 0.6rem;
}

/* ---- Agreement rate forms (rate matrix + fee grids) ---- */
/* Every section shares the same label and input column widths so the input boxes line up all the
   way down the form. The wrap scrolls horizontally when the viewport is too narrow. */
.rate-matrix-wrap {
    --rate-label-col: 240px;
    --rate-col: 240px;
    overflow-x: auto;
}

/* Label column + one column per pricing method. Each matrix sets its own row count inline so the
   column overlays (grid-row: 2 / -1) can span from below the header to the last fee row. */
.rate-matrix {
    display: grid;
    grid-template-columns: var(--rate-label-col) repeat(3, var(--rate-col));
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    align-items: center;
    position: relative;
}

.rate-form-header {
    display: grid;
    grid-template-columns: var(--rate-label-col) repeat(3, var(--rate-col));
    column-gap: 1.5rem;
}

.rate-form-header-pricing {
    grid-column: 2 / 5;
    text-align: center;
}

.rate-matrix-header {
    font-weight: 600;
    text-align: center;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--bs-gray-300);
}

.rate-row-label {
    white-space: nowrap;
}

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

/* Watermark over the matrix columns that don't match the selected pricing method. Absolutely
   positioned so grid auto-placement doesn't push the inputs out of their columns. */
.rate-col-overlay {
    position: absolute;
    inset: 0;
    grid-row: 2 / -1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--bs-gray-600);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
}

/* Start and end lines both need to be explicit or the overlay stretches to the grid's edge. */
.rate-overlay-flat { grid-column: 2 / 3; }
.rate-overlay-ic { grid-column: 3 / 4; }
.rate-overlay-tiered { grid-column: 4 / 5; }

.discount-matrix {
    display: grid;
    grid-template-columns: var(--rate-label-col) var(--rate-col) var(--rate-col) var(--rate-col) max-content;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    align-items: center;
    position: relative;
}

/* Grayed-out state for cells/groups that don't apply to the selected pricing method. */
.rate-inactive {
    opacity: 0.45;
}

.rate-inactive input {
    background-color: var(--bs-gray-100);
}

.rate-account-fee-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.rate-account-fee-label {
    white-space: nowrap;
    flex: 0 0 var(--rate-label-col);
}

.rate-account-fee {
    flex: 0 0 var(--rate-col);
}

/* The "Per Month" / "Per Event" unit suffix on account-level fee inputs. */
.rate-fee-unit {
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Discount rate groups: the overlay covers the inputs but leaves the heading readable. */
.rate-group {
    position: relative;
    height: 100%;
}

.rate-group-overlay {
    position: absolute;
    inset: 2.5rem 0 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--bs-gray-600);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
}
/* Processing platform tiles: logos need a white background to stay legible in dark mode. */
.platform-selector .platform-tile {
    background-color: #fff;
}

.platform-selector .platform-tile:hover {
    border-color: var(--bs-gray-400) !important;
}

.platform-selector .platform-tile:has(.form-check-input:checked) {
    border-color: var(--bs-primary) !important;
}