:root {

    --header-control-height: 42px;

    --fs-xs: 0.8rem;
    --fs-sm: 0.85rem;
    --fs-md: 0.9rem;

    --fs-lg: 1.1rem;
    --fs-xl: 1.25rem;
    --fs-input-text: 1.15rem;
}

.link-helper {
    font-size: var(--fs-lg);
}

/* Theme default (layout.css) is 1.05rem / gray-800 - smaller and lighter
   site-wide. */
.form-label {
    font-size: var(--fs-md);
    color: var(--bs-gray-600);
}

/* Bordered nested card for boxed content inside a card, e.g. Fund Portfolio Details holdings */
.holding-card {
    border: 1px solid #eee;
}

/* _SxpTenure.cshtml's Tenure select vs. Installments/Years input - 60:40 split
   of the flex row (Bootstrap's w-* utilities only step in 25% increments). */
.tenure-select-col {
    flex: 0 0 60%;
}

.tenure-box {
    flex: 1 1 40%;
}

/* MFStp.cshtml/MFSwitch.cshtml's source -> target fund connector arrow - pulled
   up/down by half its own height (w-40px h-40px) so it overlaps the card above
   and below it equally instead of sitting in the gap between them. */
.fund-flow-connector {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    margin-bottom: -20px;
}

/* Single radio-button look, used everywhere a .form-check-solid radio group
   appears (Amount/Units, Gender, Residential Status, Mode of Holdings, GIIN,
   Citizenship, Tax Resident, Political Affiliation, etc. - not Payment Mode,
   which is a separate btn-check card pattern, not this circle radio) - the
   theme's own default (28px, border:0, flat gray-200 fill when unchecked)
   reads as disabled. This keeps a visible outer ring (--main-heading-color,
   #2a4574 - same blue already used for headings) in both states, at a
   smaller 24px, with the inner dot recolored to success green only when
   checked instead of the theme's white-on-navy fill. Scoped to [type="radio"]
   only so .form-check-solid checkboxes (fund filters, etc.) are untouched. */
.form-check.form-check-solid .form-check-input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--main-heading-color);
}

.form-check.form-check-solid .form-check-input[type="radio"]:checked {
    background-color: var(--bs-body-bg);
    border-color: var(--main-heading-color);
    /* #17c653 = --bs-success (colors.css) - a data: URI can't reference a CSS var. */
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317c653'/%3e%3c/svg%3e");
}

.form-check.form-check-solid:has(> .form-check-input[type="radio"]) .form-check-label {
    font-size: 1.075rem; /* matches fs-6, the size used on the reference (Redemption's Amount/Units) */
    font-weight: 500;
}

/* #WaitModal (Layout.cshtml) - plain overlay, not a Bootstrap .modal, so
   show/hide is synchronous with no fade-transition race to wait out. */
/* Full-page / in-modal loader added by InitWait(), removed by ClearWait() (Common.js) */
.wait-overlay-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wait-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wait-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    /* --bs-backdrop-bg/--bs-backdrop-opacity (layout.css) are scoped to .modal-backdrop
       itself and don't resolve here, so their values (#000000 / 0.4) are reused directly. */
    background-color: rgba(0, 0, 0, 0.4);
}

.wait-modal-box {
    position: relative;
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-modal-border-radius);
    box-shadow: var(--bs-modal-box-shadow);
    padding: 1.25rem 2rem;
}

.modal.modal-static .modal-dialog {
    transition: transform 0.5s ease-in-out;
}

@media (min-width: 1200px) {
    #ModalLogin .mx-xl-18,
    #SignUp .mx-xl-18 {
        margin-right: 1.25rem !important;
        margin-left: 1.25rem !important;
    }
}

.fh-nav-list {
    display: flex;
    flex-direction: column;

    overflow: hidden;
    border-radius: var(--bs-card-inner-border-radius, 0.575rem);
}

.fh-nav-link {
    padding: 0.9rem 1.25rem;
    color: var(--main-heading-color);
    font-weight: 600;
    border-bottom: 1px solid var(--bs-gray-200);
    transition: background-color 0.2s ease;
}

.fh-nav-link:last-child {
    border-bottom: none;
}

.fh-nav-link:hover {
    background-color: var(--bs-gray-100);
    color: var(--main-heading-color);
}

.fh-nav-link.active {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* _footer.cshtml's <footer> - was pt-16 pb-8 pt-10 (pt-16/pt-10 both set
   padding-top; pt-16 - the later rule in layout.css - was the one actually
   winning, pt-10 dead) plus an inline style for the two one-off colors.
   Consolidated into one class instead of utility soup + inline style. */
.site-footer {
    padding-top: 4rem;
    padding-bottom: 2rem;
    margin-top: 3.75rem;
    background-color: #f2f9ff;
    border-top: 1px solid #dbe6f1;
}

.footer-heading {
    font-size: var(--fs-lg);
}

.footer-link {
    font-size: var(--fs-md);
    color: var(--bs-gray-700);
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--bs-text-primary);
}

@media (min-width: 992px) {
    .header-fixed[data-kt-sticky-header="on"] .header {
        height: 72px;
    }
}

.tooltip {
    --bs-tooltip-font-size: var(--fs-xs);
}

.tooltip.fade {
    transition: opacity 0.35s ease;
}

.fund-manager-wrap img {
    border: 1px solid #e1e1e1;
    border-radius: 9px;
}

.fund-name i:not(.expand i) {
    display: inline-block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 3px;
    border: 1px solid #e1e1e1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    background-clip: content-box;
    border-radius: 9px;
    font-style: normal;
}

.nominee-section:not(.multi) .nom-share-col {
    display: none;
}

.nom-check-wrap-divider {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.flatpickr-day {
    color: var(--bs-gray-800);
}

.pan-name-info {
    min-height: calc(1.5em + 1.65rem + 2px);
    max-height: calc(1.5em + 1.65rem + 2px);
    padding: 0.375rem 0.85rem;
}

.pan-name-info > div {
    min-width: 0;
}

.pan-name-info .name_as_pan {
    line-height: 1.2;
}

.nom-wrap .flex-grow-1 > .select2-container,
.app-wrap .flex-grow-1 > .select2-container {
    width: 100% !important;
}

.app-select-icon-btn {

    height: 3.25rem !important;
    width: 3.25rem !important;
}

.app-wrap .flex-grow-1,
.nom-wrap .flex-grow-1 {
    min-width: 0;
}

.fund-name .fund-name-label,
.fund-name p {
    margin-bottom: 0;
}

.fund-name .cat-line {
    white-space: nowrap;
}

/* FundNameDisplay.cshtml no longer passes a size utility class (fs-7/fs-9)
   for .cat-name-label - owned here instead so it can be tuned in one place
   without touching that shared partial. */
.cat-name-label {
    font-size: .85rem;
}

/* Same treatment as .cat-name-label above - FundNameDisplay.cshtml no
   longer passes text-muted/fs-9 for .additional-info-label either. */
.additional-info-label {
    font-weight: 500;
    color: var(--bs-text-gray-900);
    font-size: .8rem;
}

.fund-name .option-label {
    position: relative;
    padding-left: 20px;
}

.fund-name .option-label::before {
    content: "|";
    left: 10px;
    font-size: .7em;
    position: absolute;
    top: 1px;
}

.fund-logo-sm {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

.header-fund-search-wrap {
    position: relative;
    width: 130px;
    height: var(--header-control-height);
}

.header-fund-search-wrap .fund-search-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    transition: width .3s ease;
}

.header-fund-search-wrap:focus-within .fund-search-box {

    width: 260px !important;
}

@media (min-width: 768px) {
    .header-fund-search-wrap {
        width: 195px;
    }

    .header-fund-search-wrap:focus-within .fund-search-box {
        width: 390px !important;
    }
}

.header-fund-search-wrap + .btn.btn-success {
    height: var(--header-control-height);
    display: inline-flex;
    align-items: center;
}

/* Mobile header (below lg, matching the theme's own nav-drawer breakpoint): the
   header bar keeps just the menu toggle/logo/login - the Contact icon moves into
   the nav menu as a "Contact Us" link, and the fund search box moves to its own
   full-width row below the header bar (both via d-lg-none/d-none d-lg-* in
   _header.cshtml). Desktop (lg+) is untouched - same icon+search+login topbar. */
.header-mobile-search-row {
    border-top: 1px solid var(--bs-gray-200);
    border-bottom: 1px solid var(--bs-gray-200);
    margin: 10px 0;
    padding: 10px 0;
}

@media (max-width: 991.98px) {
    /* .header-mobile-search-row is already d-lg-none (_header.cshtml), but the
       white background is scoped here too since it was asked for mobile only. */
    .header-mobile-search-row {
        background-color: #fff;
    }
}

/* .fund-search-input-plain's own default background (IfawiseCommon.css above) is a
   near-transparent rgba(240,245,251,0.2), which washes out against this row's own
   background - solid white here instead, scoped to this row only (desktop's header
   search box keeps the near-transparent default). Same specificity as that rule
   (two classes) so source order (this comes after) decides it, no !important needed. */
.header-mobile-search-row .fund-search-input-plain {
    background-color: #fff;
}

/* Search-toggle button: visible at rest instead of only showing a background on
   hover/focus (.btn-active-light's own behavior) - --main-heading-color (the same
   navy used for headings/active borders elsewhere) at 20% opacity, full-opacity icon.
   color-mix() derives the tint from the variable itself (no hardcoded rgba equivalent
   to fall out of sync if --main-heading-color is ever changed/overridden per theme).
   Prefixed with #kt_header: layout.css's own hover rule for this state is
   ".header-fixed:not([data-kt-sticky-header='on']) .header .btn.btn-custom:hover:not(.btn-active)"
   (7 class-equivalents) - an ID beats any number of classes regardless of count, so
   #kt_header (the header's own id) guarantees these win without having to replicate
   that whole ancestor chain. */
#kt_header .header-search-toggle-btn.btn.btn-custom {
    background-color: color-mix(in srgb, var(--main-heading-color) 20%, transparent) !important;
    color: var(--main-heading-color) !important;
}

#kt_header .header-search-toggle-btn.btn.btn-custom i {
    color: var(--main-heading-color) !important;
}

/* On hover: same green as the Login button (--bs-success), white icon. */
#kt_header .header-search-toggle-btn.btn.btn-custom:hover {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}

#kt_header .header-search-toggle-btn.btn.btn-custom:hover i {
    color: #fff !important;
}

/* Before the page is scrolled (header not yet sticky), this project's own rule just
   above - "body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header='on'])
   #kt_header .btn.btn-active-light:hover:not(.btn-active) { background-color:
   var(--menu-mouse-over-bg) !important; }" - also uses #kt_header plus 7 classes
   total, an exact specificity TIE with a same-shape rule here, which source order
   would then decide (that rule sits later in this file, so it would win a tie).
   #kt_header is repeated here - a valid selector matching the same single element,
   but counted twice toward the ID tier - so this wins outright regardless of file
   position or class count, in both the default and sticky states. */
body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header#kt_header .header-search-toggle-btn.btn.btn-custom:hover {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}

body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header#kt_header .header-search-toggle-btn.btn.btn-custom:hover i {
    color: #fff !important;
}

@media (max-width: 991.98px) {
    /* #kt_header's theme-default fixed height (layout.css, both the in-flow and
       header-fixed/sticky variants) would clip .header-mobile-search-row below
       it - overridden here since an ID selector beats those without !important.
       flex-direction is also forced to column: #kt_header itself is
       display:flex (default row direction, layout.css), which otherwise pulls
       .header-mobile-search-row onto the same row as .container-xxl instead of
       stacking it below. */
    #kt_header {
        height: auto;
        min-height: 65px;
        flex-direction: column;
    }
}

.header-menu {
    transition: opacity .3s ease;
}

.header-menu .menu-title {
    font-size: var(--fs-lg);
}

.header-menu .menu-sub .menu-title {
    font-weight: 500;
}

.fund-search-results {
    overflow: hidden;
}

.fund-search-results-scroll {
    max-height: 400px;
    padding-right: 6px;
}

.fund-search-box-plain {

    height: 100%;
}

.fund-search-box-plain [data-kt-menu-trigger] {
    position: relative;
    height: 100%;
}

.fund-search-box-plain .fund-search-icon {
    position: absolute;
    top: 53%;
    left: 9px;
    transform: translateY(-50%);
    color: var(--bs-success);
    pointer-events: none;
}

.fund-search-box-plain .fund-search-input-plain {

  height: var(--header-control-height);
   background-color: rgba(240, 245, 251, 0.2);
  border: .5px solid rgba(0,0,0,.2);
  border-radius: 0.475rem;
  padding-left: 2.5rem;
  color: #444;
}

.fund-search-box-plain .fund-search-input-plain:focus {

    background-color: #fff;
    box-shadow: none;
}

.fund-search-box-plain .fund-search-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    cursor: pointer;
}

.form-floating > label {
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: var(--fs-input-text);
    color: var(--bs-gray-500);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.3s ease-in-out;
    /* Keep a long label (placeholder turned floating label by InitFloatingLabels) inside its field - it had no
       width limit, so e.g. Explore Funds' "Search funds, AMC or category, e.g. ..." ran past the input and under
       the Filters button. Overflow is clipped at the field's edge. */
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

    .form-floating > label > .fl-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating:not(.select-placeholder) > .form-select ~ label {
    align-items: flex-start;
    font-size: var(--fs-md);
    line-height: 1;
    transform: translateY(-1.425rem) translateX(0.15rem);
    color: #999;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating:not(.select-placeholder) > .form-select ~ label::after {
    top: calc(1rem - 2px);
    height: calc(1em + 4px);
    left: calc(1rem - 5px);
    right: calc(1rem - 5px);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-select:focus ~ label::after {
    background-color: var(--bs-body-bg) !important;
}

.form-floating > .form-control:disabled ~ label::after,
.form-floating > :disabled ~ label::after {
    background-color: var(--bs-body-bg) !important;
}

.form-floating.select-placeholder > .form-select ~ label,
.form-floating.select-placeholder > .select2-container ~ label {
    opacity: 0;
}

.form-floating.select-placeholder > .form-select,
.form-floating.select-placeholder > .select2-container .select2-selection__rendered {
    color: var(--bs-gray-500) !important;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: 3.25rem;
    min-height: 3.25rem;
}

.form-floating > .form-control {
    font-size: var(--fs-input-text);
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.35rem;
    padding-bottom: 0.5rem;
}

.form-floating > .form-select {
    padding-top: 1.35rem !important;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: var(--fs-input-text);
}

.btn.btn-lg {
    height: 3.25rem;
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
}

.form-floating .form-control.form-control-solid,
.form-floating .form-select.form-select-solid {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-gray-300);
}

.form-control.form-control-solid:disabled,
.form-select.form-select-solid:disabled {
    color: var(--bs-gray-500);
    border-color: #eee;
    cursor: no-drop;
}

.form-floating > .form-control:disabled ~ label,
.form-floating > .form-select:disabled ~ label,
.form-floating > :disabled ~ label {
    color: var(--bs-gray-400) !important;
}

.form-control.form-control-solid:-webkit-autofill,
.form-control.form-control-solid:-webkit-autofill:hover,
.form-control.form-control-solid:-webkit-autofill:focus,
.form-control.form-control-solid:autofill,
.form-control.form-control-solid:autofill:hover,
.form-control.form-control-solid:autofill:focus {
    border-color: var(--bs-gray-300) !important;
    -webkit-text-fill-color: var(--bs-body-color);
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-floating .form-control.form-control-solid:focus,
.form-floating .form-select.form-select-solid:focus,
.form-floating .form-select.form-select-solid.active,
.form-floating .form-select.form-select-solid.focus,
.form-floating .form-select.form-select-solid:active {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-gray-400);
}

.form-floating > .form-control.error,
.form-floating > .form-select.error {
    border-color: var(--bs-danger);
}

.error_text {
    position: absolute;
    top: calc(100% - 3px);
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: var(--bs-danger-light);
    color: var(--bs-danger);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    max-width: 100%;
    box-sizing: border-box;
}

.error_text::before {
    content: "!";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bs-danger);
    color: #fff;

    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Solid arrow pointing up from the bubble's top edge to the field it's
   attached to, since .error_text itself sits below the field (top: 100%). */
.error_text::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--bs-danger-light);
}

/* Group-level errors appended under a whole list rather than a single
   field (e.g. "Please select Bank Account" in the Add New UPI form,
   purchase_sip_transaction_common.js's SaveUpiDetail) - the absolute
   tooltip above had no positioned field to hang from there and rendered
   off-screen. Kept in flow below the cards instead; relative (not static)
   so the ::after arrow stays anchored to the bubble. */
.upi-list-of-banks > .error_text {
    position: relative;
    top: auto;
    margin-top: .75rem;
}

.form-box .row {
    margin-bottom: 2.5rem;
}

#ModalLogin .form-box .row,
#SignUp .form-box .row {
    margin-bottom: 0;
}

.otp-send-btn {
    position: relative;
    overflow: hidden;
}

.otp-send-btn .otp-progress {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    height: 3px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

.otp-send-btn.counting .otp-progress {
    transform: scaleX(1);
    transition: transform 30s linear;
}

/* Same fills-over-30s mechanic as .otp-send-btn/.otp-progress above, for the
   plain "Resend in X seconds" text (my_account.js's OtpCounter, used across
   MyAccount/Transact/ForgotPassword/VerifyAOF's OTP resend flows) - a thin
   underline that starts empty and grows to full, instead of just the bare
   countdown number with no visual progress. A pseudo-element so none of
   those views need new markup, just the .counting class toggled in JS. */
.resend_sec {
    position: relative;
    padding-bottom: 6px;
}

.resend_sec::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--bs-success);
    transform: scaleX(0);
    transform-origin: left;
}

.resend_sec.counting::after {
    transform: scaleX(1);
    transition: transform 30s linear;
}

.form-select.form-select-solid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 18px 14px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.form-select.form-select-solid:hover:not(:disabled),
.form-select.form-select-solid:focus {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

.form-floating > .select2-container {

    height: 3.25rem;
}

.form-floating > .select2-container .select2-selection {
    height: 3.25rem !important;
    padding-top: 1.45rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: var(--fs-input-text);
}

.form-floating > .select2-container .select2-selection--single {
    align-items: flex-end !important;
}

.ip-pan {
    text-transform: uppercase;
}

.wait-bar {
    border-bottom: 3px solid #ddd;
    position: relative;
    line-height: 2em;
    padding: 0 !important;
}

.wait-bar i {
    background-color: #2c82d7;
    position: absolute;
    height: 5px;
    width: 5px;
    bottom: -4px;
}

.wait-bar span {
    font-size: .72em;
    color: #aaa;
    padding-bottom: 15px;
    font-weight: 300;
}

/* _UserAccountList.cshtml's account-selector dropdown - shared by
   Portfolio, MyAccount, SIP and Purchase (see PageFiles.appData), so it
   belongs here rather than in one page's own CSS file. */
.user-acc-selector {
    position: relative;
}

.user-acc-name {
    display: block;
}

.ip-applicant,
.ip-applicant + .select2-container,
.ip-nominee,
.ip-nominee + .select2-container,
.acc-name,
.user-acc-name {
    text-transform: capitalize;
}

.new-acc-link,
.change-password-link {
    color: #fff !important;
    background-color: var(--bs-success) !important;
}

.new-acc-link i,
.change-password-link i {
    color: #fff !important;
}

.banksList [bank-id].active {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary);
}

.ip-field-wrap {
    margin-bottom: 3rem;
    position: relative;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.row:has(> .ip-field-wrap) {
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

/* Last field row inside a card (e.g. MFStp's top card, whose only field is
   the Folio dropdown) - .ip-field-wrap's 3rem bottom margin above is meant
   to space rows of fields apart, not pad empty space at the end of a card.
   :last-child only - a multi-field row (e.g. Bank Detail's ThreeColumn
   BankForm, or the same form stacked single-column in the Add Bank modal)
   still needs every non-last field's own margin for the field below it. */
.last-field-row .ip-field-wrap:last-child {
    margin-bottom: 0;
}

/* Some last-field rows are a shared partial's own root .row with its own
   mb-* (e.g. InvestorDetailForm.cshtml's Bank Detail card, whose BankForm
   partial is also reused standalone as the "Add Bank" modal - that partial's
   own margin can't be removed globally without affecting the modal, so it's
   overridden here instead, scoped to this wrapper only). !important is
   required to beat Bootstrap's .mb-* utilities, which carry their own. */
.last-field-row .row {
    margin-bottom: 0 !important;
}

/* InvestorDetailForm.cshtml's nominee rows (.nom-wrap) - a static
   .last-field-row class doesn't work here since ChangeNomineeCount
   (mf_investor_reg.js) clones the whole row (classes included) to add more
   nominees, which would zero every clone's margin instead of just the
   actual last one. :last-child re-evaluates live as rows are added/removed,
   so only the genuinely last nominee row ever loses its trailing margin. */
.nom-block .nom-wrap:last-child .ip-field-wrap {
    margin-bottom: 0;
}

.col-gap-row {
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

.col-gap-row > * {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* .row > * carries no vertical gutter (global no-gutter policy), so wrapped
   li's in this field list would sit flush against each other with no gap
   between one field's value and the next field's label - restore it locally,
   scoped to this row only, using whatever g-* gutter class it's given.
   row-gap (not margin-top/:first-child) so it only inserts space where a
   line actually wraps, not between items still sharing the same row - a
   margin-based version pushed down every item after the 1st even when 3
   col-md-4 items fit on one line together, misaligning them vertically. */
.nominees-display {
    row-gap: var(--bs-gutter-y, 1.5rem);
}

/* Same fix for the selectable bank/mandate card lists (.row.g-3.bank-wrap-style - BankCard.cshtml
   in _MandateForm, _UpiForm, _BankList, _MandateList): cards that wrap onto a second row sat
   flush on the row above. row-gap only adds space where a row actually wraps. */
.row.bank-wrap-style {
    row-gap: var(--bs-gutter-y, .75rem);
}

/* Site-wide: any row of card columns (e.g. Explore Funds' "Find funds your way", dashboards, fund lists) gets a
   vertical gap where its cards wrap onto the next line - the same no-gutter policy left wrapped cards touching.
   Uses the row's own g-*/gy-* gutter, never less than 1rem. row-gap only applies between wrapped lines, so cards
   sharing a line stay aligned. The rows above that set their own row-gap are excluded (:has() would otherwise
   outrank them). Browsers without :has() simply skip this. */
.row:not(.bank-wrap-style):not(.nominees-display):has(> [class*="col"] > .card) {
    row-gap: max(var(--bs-gutter-y, 0px), 1rem);
}

.fp-drill-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--bs-body-bg);
    overflow-y: auto;
    padding: 8px;
}

.fp-drill-title {
    font-size: var(--fs-md);
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

.fp-drill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fp-drill-btn {
    flex: 1 0 27%;
    padding: 6px 4px;
    border: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-200);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-sm);
}

.fp-drill-btn:hover:not(:disabled) {
    background: var(--bs-primary);
    color: #fff;
}

.fp-drill-btn-active {
    background: var(--bs-primary);
    color: #fff;
}

.fp-drill-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-floating > .select2-container .select2-selection.error {
    border-color: var(--bs-danger) !important;
}

.form-floating:not(.select-placeholder) > .select2-container ~ label {

    align-items: flex-start;
    font-size: var(--fs-md);
    line-height: 1;
    transform: translateY(-1.425rem) translateX(0.15rem);
    color: #999;
}

.form-floating:not(.select-placeholder) > .select2-container ~ label::after {
    position: absolute;
    top: calc(1rem - 2px);
    height: calc(1em + 4px);
    left: calc(1rem - 5px);
    right: calc(1rem - 5px);
    z-index: -1;
    content: "";
    background-color: var(--bs-body-bg);
    border-radius: 0.475rem;
}

body.header-fixed:has(.top-banner-bg) #kt_wrapper {
    position: relative;
}

.top-banner-bg {
    position: relative;
    width: 100%;
    height: var(--top-banner-height, 320px);
    box-sizing: border-box;
    padding-top: 80px;
    display: flex;
    align-items: center;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;

    margin-bottom: var(--top-banner-margin-bottom, -120px);
}
.top-banner-bg::after {
 content: "";
  position: absolute;
  width: 100%;
  height: 293px;
  bottom: -1px;
  background-image: var(--top-bg-curve-url);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.page-title-banner-wrap {
    margin-top: -80px;
}

/* Layout.cshtml's #kt_content_container: when ViewBag.PageHeading is null/blank, the
   "Page title & Breadcrumb" block inside .top-banner-bg doesn't render, leaving that
   banner's height as unused blank space above the page's own content. Pulls the
   content up to close that gap on those pages specifically. */
.no-page-heading-offset {
    margin-top: -65px;
}

body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
    border-bottom: none;
}

    body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header .btn.btn-custom i,
    body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header .btn.btn-custom .svg-icon {
        color: var(--main-heading-color);
    }

body.header-fixed:has(.top-banner-bg):not([data-kt-sticky-header="on"]) #kt_header .btn.btn-active-light:hover:not(.btn-active) {
    background-color: var(--menu-mouse-over-bg) !important;
}

:root {
    --main-heading-color: #2a4574;
}

.page-title h1 {
    color: var(--main-heading-color);
}

.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a {
    color: var(--bs-gray-400);
}

.page-breadcrumb .bullet {
    background-color: var(--bs-gray-400);
}

@media (min-width: 992px) {
    .header-fixed:not([data-kt-sticky-header="on"]) .header .header-menu .menu > .menu-item > .menu-link .menu-title {
        color: var(--main-heading-color);
        font-weight: 500;
    }
}

.act-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.act-tabs .tab:not(.menu-link),
.act-tabs .tab-btn:not(.menu-link) {
    cursor: pointer;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .775rem 1.5rem;
    border-radius: .475rem;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--bs-light-inverse);
    background-color: var(--bs-light);
    border: 1px solid var(--bs-light);
    transition: background-color .15s ease, color .15s ease;
}

.act-tabs .tab:not(.menu-link):hover,
.act-tabs .tab-btn:not(.menu-link):hover {
    background-color: var(--bs-light-active);
    border-color: var(--bs-light-active);
}

.act-tabs .tab.active:not(.menu-link),
.act-tabs .tab-btn.active:not(.menu-link) {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.act-tabs .tab:not(.menu-link) i,
.act-tabs .tab-btn:not(.menu-link) i {
    margin-left: -.15rem;
    margin-right: .6rem;
}

.act-tabs .tab.active:not(.menu-link) i,
.act-tabs .tab-btn.active:not(.menu-link) i {
    color: #fff;
}

.act-tabs.tabs-type-2 .tab,
.act-tabs.tabs-type-2 .tab-btn {
    padding: .4rem .9rem;
    font-size: .875rem;
    border-radius: .475rem;
}

.act-tabs .mf-statement-wrap {
    display: flex;
    align-items: stretch;
}

.act-tabs .mf-statement-btn:not(.menu-link) {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.act-tabs .mf-statement-btn:not(.menu-link):hover {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.act-tabs .mf-statement-btn:not(.menu-link) i {
    color: #fff;
}

.act-tabs.tabs-underline {
    gap: 0;
    align-self: stretch;
}

.act-tabs.tabs-underline .tab,
.act-tabs.tabs-underline .tab-btn {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .5rem 0;
    margin: 0 1rem;
    margin-bottom: -1px;
    border-radius: 0;
    font-weight: 600;
    font-size: .95rem;
    color: var(--bs-gray-500);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.act-tabs.tabs-underline .tab:first-child,
.act-tabs.tabs-underline .tab-btn:first-child {
    margin-left: 0;
}

.act-tabs.tabs-underline .tab:last-child,
.act-tabs.tabs-underline .tab-btn:last-child {
    margin-right: 0;
}

.act-tabs.tabs-underline .tab.active,
.act-tabs.tabs-underline .tab-btn.active,
.act-tabs.tabs-underline .tab:hover,
.act-tabs.tabs-underline .tab-btn:hover {
    background-color: transparent;
    border-bottom-color: var(--bs-success);
}

.act-tabs.tabs-underline .tab.active,
.act-tabs.tabs-underline .tab-btn.active {
    color: var(--bs-primary);
}

.act-tabs.tabs-underline .tab:hover,
.act-tabs.tabs-underline .tab-btn:hover {
    color: var(--bs-success);
}

.rating {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.rating-label {
    margin-right: 2px;
}

/* RatingStars.cshtml's star.png/star-blank.png images (replaced the ki-star icon font). */
.rating-star-img {
    height: 16px;
}

/* InvestorDetailForm.cshtml's nominee-count stepper - .ip-nominee-count is a
   plain .form-control, whose default padding/line-height (layout.css) make
   it ~11px taller than its .btn-icon.btn-sm +/- siblings. Since those
   buttons set their own explicit height, .input-group's align-items:stretch
   can't grow them to match, so they stay short while the input's number
   sits centered in its own taller box - reading as misaligned against the
   shorter buttons beside it. Matching the input's height/line-height to the
   buttons' own computed height (calc(1.5em + 1.1rem + 2px) at btn-sm's
   0.95rem font-size = 2.65rem) makes both the same height so everything
   lines up. */
.ip-nominee-count {
    height: 2.65rem;
    line-height: 2.65rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* _header.cshtml's account dropdown - Logout in red, distinct from the
   other (neutral) menu items above it. The dropdown's own menu-title-gray-700/
   menu-icon-gray-500 utility classes (layout.css) set text/icon color per
   .menu-item .menu-link .menu-title / .menu-icon i, so a plain text-danger
   class on the link wouldn't win on specificity - !important beats both. */
.menu-item .menu-link.menu-link-danger .menu-title,
.menu-item .menu-link.menu-link-danger .menu-icon i {
    color: var(--bs-danger) !important;
}