/* CSS Variables are loaded from NuuVariables.css in bundle */

body {
    min-height: 100vh;
    line-height: normal;
    position: relative;
    border-radius: var(--br-10);
    background-color: var(--Primary-White);
    font-size: 1rem;
}

/* Typography - Headings and Paragraphs */
h1, h2 {
    font-family: var(--font-brand), sans-serif;
    font-weight: 900; /* Roboto Black */
    color: var(--Brand-Main);
    margin: 0;
    line-height: 1.2;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

p {
    font-family: var(--font-brand), sans-serif;
    font-weight: 400; /* Roboto Regular */
    color: var(--Brand-Black);
    margin: 0;
    line-height: 1.5;
}

.parentlanding {
    min-width: 320px; /* Changed from 375px for thin screens */
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    padding-top: 78px;
    box-sizing: border-box;
    gap: var(--gap-32);
    margin: auto;
    text-align: left;
    color: var(--Brand-Main);
    font-family: var(--font-brand);
}

/* Added media query for very small devices */
@media only screen and (max-width: 360px) {
    .parentlanding {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: 320px;
    }

    /* Reduce font sizes slightly on very small screens */
    .page-title p {
        font-size: 20px;
    }

    /* Make buttons stack better */
    .btn {
        font-size: 14px;
        padding: 4px 12px;
    }
}

#preload {
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    display: flex;
    top: 0;
    align-items: center;
    justify-content: center;
    background: var(--Primary-White);
    z-index: 10000;
    opacity: 0.6;
}

.bodyContent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-24);
    color: var(--Brand-Black);
}

.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

/* Misc. start */
.primary-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.text-success {
    color: var(--Secondary-Green) !important;
}

.text-danger {
    color: var(--Secondary-Red) !important;
}

.page-title {
    text-align: center;
}

    .page-title p {
        font-family: var(--font-brand-heading);
        font-weight: var(--display-lg-font-weight);
        font-size: var(--display-lg-font-size);
        line-height: var(--display-lg-line-height);
        color: var(--Brand-Main);
        margin: 0;
        text-transform: uppercase;
    }

        .page-title p:not(:last-child) {
            padding-bottom: 8px;
        }

    .page-title span {
        display: block;
        font-family: var(--headlines-font-family);
        font-weight: var(--headlines-font-weight);
        font-size: var(--headlines-font-size);
        color: var(--Brand-Black);
    }

.title-over-card {
    margin: 0;
    padding-bottom: 15px;
    font-family: var(--title-bold-font-family);
    font-weight: var(--title-bold-font-weight);
    font-size: var(--title-bold-font-size);
    line-height: var(--title-bold-line-height);
    display: flex;
    align-items: center;
}

    .title-over-card a {
        margin-left: auto;
        text-align: right;
        text-decoration: underline;
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
        color: var(--Secondary-Blue);
    }

        .title-over-card a:hover,
        .title-over-card a:focus,
        .title-over-card a:active {
            color: var(--Brand-Black);
        }

.loan-amort-details {
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
    margin: 0;
    padding-bottom: 24px;
}

.row.gap-16 {
    margin-left: -8px;
    margin-right: -8px;
}

    .row.gap-16 > div {
        padding-left: 8px;
        padding-right: 8px;
    }

.big-center-title,
.big-center-title h3 {
    text-align: center;
    font-family: var(--title-strong-font-family);
    font-weight: var(--title-strong-font-weight);
    font-size: var(--title-strong-font-size);
    color: var(--Brand-Black);
}

    .big-center-title h3,
    .big-center-title p {
        margin: 0;
    }

    .big-center-title i {
        font-style: normal;
        display: block;
    }

    .big-center-title span,
    .big-center-title p {
        display: block;
        padding-top: 3px;
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
    }

.arrow-link {
    text-decoration: underline;
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
    color: var(--Secondary-Blue);
    display: inline-block;
    vertical-align: top;
}

    .arrow-link:hover,
    .arrow-link:focus,
    .arrow-link:active {
        color: var(--Brand-Black);
    }

#myImg.review-grade-card-image {
    margin: 0 auto;
}

.ui-dialog {
    margin: 24px;
}

/* Misc. end */
/* form start */
.form-group {
    padding-bottom: 32px;
    margin: 0;
}

.control-label {
    font-family: var(--title-bold-font-family);
    font-weight: var(--title-bold-font-weight);
    font-size: var(--title-bold-font-size);
    line-height: var(--title-bold-line-height);
    color: var(--Brand-Black);
    padding-bottom: 8px;
    margin: 0;
    display: block;
}

    .control-label .form-hint {
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
        color: var(--Dark-Gray);
        display: block;
        padding-top: 3px;
    }

.form-description {
    color: var(--Dark-Gray, #4C4B4B);
    font-family: var(--font-brand-text, Inter);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 8px;
    margin-top: -4px;
}

.form-description {
    color: var(--Dark-Gray, #4C4B4B);
    /* Caption-reg */
    font-family: var(--font-brand-text, Inter);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 12px */
    margin-bottom: 8px;
    margin-top: -4px;
}

.form-control {
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--Decorative-Outline);
    padding: 4px 16px;
    display: block;
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--Brand-Black);
}

.form-control-xs {
    height: 24px;
    font-size: 12px;
    line-height: 1;
    padding-left: 8px;
    padding-right: 8px;
}

.form-control:focus {
    color: var(--Brand-Black);
    border-color: var(--Secondary-Purple);
    box-shadow: 0 0 0 4px rgba(var(--Secondary-Purple-rgb), 0.25);
}

.form-control.is-invalid {
    border-color: var(--Secondary-Red);
    background-image: none;
}

    .form-control.is-invalid .icon-suffix,
    .form-control.is-invalid .icon-prefix {
        color: var(--Secondary-Red);
    }

    .form-control.is-invalid:focus {
        border-color: var(--Secondary-Red);
        box-shadow: 0 0 0 4px rgba(var(--Secondary-Red-rgb), 0.25);
    }

::-webkit-input-placeholder {
    font-family: var(--headlines-font-family);
    font-weight: var(--headlines-font-weight);
    font-size: var(--headlines-font-size);
    color: var(--Dark-Gray);
}

::-moz-placeholder {
    font-family: var(--headlines-font-family);
    font-weight: var(--headlines-font-weight);
    font-size: var(--headlines-font-size);
    color: var(--Dark-Gray);
}

:-ms-input-placeholder {
    font-family: var(--headlines-font-family);
    font-weight: var(--headlines-font-weight);
    font-size: var(--headlines-font-size);
    color: var(--Dark-Gray);
}

:-moz-placeholder {
    font-family: var(--headlines-font-family);
    font-weight: var(--headlines-font-weight);
    font-size: var(--headlines-font-size);
    color: var(--Dark-Gray);
}

.input-wrapper {
    position: relative;
}

    .input-wrapper:has(.text-suffix) .form-control {
        padding-right: 48px;
    }

    .input-wrapper:has(.icon-prefix) .form-control {
        padding-left: 64px;
    }

    .input-wrapper:has(.icon-suffix) .form-control {
        padding-right: 48px;
    }

    .input-wrapper .text-suffix {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        font-size: var(--body-font-size);
        line-height: var(--body-line-height);
        color: var(--Brand-Black);
    }

    .input-wrapper .icon-prefix,
    .input-wrapper .icon-suffix {
        color: var(--Brand-Main);
        top: 18px;
        left: 16px;
        position: absolute;
        display: block;
    }

    .input-wrapper .icon-suffix {
        left: auto;
        right: 16px;
    }

    .input-wrapper .password-toggle {
        background: none;
        border: 0;
        padding: 8px;
        margin: -8px;
        color: var(--Brand-Black);
        display: inline-block;
        vertical-align: top;
    }

        .input-wrapper .password-toggle .eye-off,
        .input-wrapper .form-control[type="text"] ~ .icon-suffix .password-toggle .eye {
            display: none;
        }

    .input-wrapper .form-control[type="text"] ~ .icon-suffix .password-toggle .eye-off {
        display: block;
    }

    .input-wrapper .icon-prefix svg,
    .input-wrapper .icon-prefix img {
        display: block;
        height: 24px;
        width: 24px;
    }

.form-group .invalid-feedback {
    font-size: 12px;
    line-height: 100%;
    font-family: var(--body-font-family);
    color: var(--Secondary-Red);
    padding-top: 4px;
    font-weight: 400;
}

/* form end */

/* button start */
.btn {
    height: 48px;
    border-radius: 8px;
    display: inline-flex;
    padding: 4px 16px;
    align-items: center;
    justify-content: center;
    font-family: var(--subtext-bold-font-family);
    font-weight: var(--subtext-bold-font-weight);
    font-size: var(--subtext-bold-font-size);
    line-height: var(--subtext-bold-line-height);
    vertical-align: top;
}

.btn-block + .btn-block {
    margin-top: 12px;
}

.btn-sm {
    height: 32px;
    border-radius: 4px;
    font-family: var(--subtext-semi-font-family);
    font-weight: var(--subtext-semi-font-weight);
    font-size: var(--subtext-semi-font-size);
}

.btn-primary {
    background: var(--Brand-Main);
    color: var(--Primary-White);
    border: none;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--Brand-Black);
        border: none
    }

        .btn-primary:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus,
        .btn-outline-primary:focus,
        .btn-outline-primary.focus,
        .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
        .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 4px rgba(var(--Brand-Black-rgb), 0.25)
        }

    .btn-primary.disabled,
    .btn-primary:disabled {
        background-color: var(--Primary-Gray);
    }

.btn-danger {
    background: var(--Secondary-Red);
    color: var(--Primary-White);
    border: none;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger:not(:disabled):not(.disabled):active,
    .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        background-color: var(--Secondary-Red-Dark);
        border: none
    }

        .btn-danger:focus,
        .btn-danger:not(:disabled):not(.disabled):active:focus,
        .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-danger.dropdown-toggle:focus,
        .btn-outline-danger:focus,
        .btn-outline-danger.focus,
        .btn-outline-danger:not(:disabled):not(.disabled):active:focus,
        .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 4px rgba(var(--Secondary-Red-rgb), 0.25)
        }

    .btn-danger.disabled,
    .btn-danger:disabled {
        background-color: var(--Primary-Gray);
    }

.btn-success {
    background: var(--Secondary-Green);
    color: var(--Primary-White);
    border: none;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success:not(:disabled):not(.disabled):active,
    .btn-success:not(:disabled):not(.disabled).active,
    .show > .btn-success.dropdown-toggle {
        background-color: var(--Secondary-Green-Dark);
        border: none
    }

        .btn-success:focus,
        .btn-success:not(:disabled):not(.disabled):active:focus,
        .btn-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-success.dropdown-toggle:focus,
        .btn-outline-success:focus,
        .btn-outline-success.focus,
        .btn-outline-success:not(:disabled):not(.disabled):active:focus,
        .btn-outline-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 4px rgba(var(--Secondary-Green-rgb), 0.25)
        }

    .btn-success.disabled,
    .btn-success:disabled {
        background-color: var(--Primary-Gray);
    }

.btn-outline-primary {
    color: var(--Brand-Main);
    border-color: var(--Brand-Main);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--Brand-Main);
        border-color: var(--Brand-Main);
    }

.btn-outline-success {
    color: var(--Secondary-Green);
    border-color: var(--Secondary-Green);
}

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active,
    .btn-outline-success:not(:disabled):not(.disabled):active,
    .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle {
        color: #fff;
        background-color: var(--Secondary-Green);
        border-color: var(--Secondary-Green);
    }

.btn-outline-danger {
    color: var(--Secondary-Red);
    border-color: var(--Secondary-Red);
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus,
    .btn-outline-danger:active,
    .btn-outline-danger:not(:disabled):not(.disabled):active,
    .btn-outline-danger:not(:disabled):not(.disabled).active,
    .show > .btn-outline-danger.dropdown-toggle {
        color: #fff;
        background-color: var(--Secondary-Red);
        border-color: var(--Secondary-Red);
    }

/* button end */

/* page tabs start */
.page-tabs {
    border: 0;
    border-radius: 8px;
    padding: 8px;
    column-gap: 16px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    font-family: var(--subtext-bold-font-family);
    font-weight: var(--subtext-bold-font-weight);
    font-size: var(--subtext-bold-font-size);
    line-height: var(--subtext-bold-line-height);
}

    .page-tabs.scrollable {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .page-tabs.scrollable::-webkit-scrollbar {
            display: none;
        }

        .page-tabs.scrollable > * {
            scroll-snap-align: start;
            flex: 0 0 auto;
        }

.page-tab-content .tab-pane.active {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.page-tabs .nav-link {
    border: 0;
    margin: 0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    align-items: center;
    color: var(--Brand-Main);
    padding: 11px 10px;
    width: 100%;
    height: auto;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-align: center;
}

    .page-tabs .nav-link svg {
        display: block;
        height: 20px;
        width: 20px;
        flex-shrink: 0;
    }

    .page-tabs .nav-link.active,
    .page-tabs .nav-item.show .nav-link {
        color: var(--Primary-White);
        background: var(--Brand-Main);
    }

    .page-tabs .nav-link:not(.active):hover,
    .page-tabs .nav-link:not(.active):focus,
    .page-tabs .nav-link:not(.active):active {
        background: rgba(var(--Brand-Main-rgb), 0.1);
        outline: 0;
    }

    .page-tabs .nav-link.active:focus,
    .page-tabs .nav-item.show .nav-link:focus {
        outline: 0;
    }

/* page tabs end */

/* create saving goal start */
.create-saving-goal {
    padding: 16px;
    border-radius: 10px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    text-align: center;
}

    .create-saving-goal .block-title p {
        font-family: var(--body-bold-font-family);
        font-weight: var(--body-bold-font-weight);
        font-size: var(--body-bold-font-size);
        line-height: var(--body-bold-line-height);
        margin: 0;
    }

    .create-saving-goal .block-title span {
        display: block;
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
        color: var(--Dark-Gray);
        padding-top: 8px;
    }

    .create-saving-goal .empty-state {
        padding: 24px 0;
        font-weight: var(--body-font-weight);
        font-size: var(--body-font-size);
        line-height: 24px;
        margin: 0;
    }

/* create saving goal end */

/* info card start */
.info-card {
    padding: 16px;
    border-radius: 10px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    display: flex;
    align-items: flex-start;
}

.info {
    margin-left: auto;
    display: flex;
    row-gap: 10px;
    flex-direction: column;
    font-family: var(--subtext-bold-font-family);
    font-weight: var(--subtext-bold-font-weight);
    font-size: var(--subtext-bold-font-size);
    line-height: 100%;
}

    .info p {
        text-align: right;
        margin: 0;
    }

/* info card end */

/* badge start */
.badge {
    border-radius: 4px;
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    height: 26px;
    padding-inline: 14px;
    font-family: var(--subtext-bold-font-family);
    font-weight: var(--subtext-bold-font-weight);
    font-size: var(--subtext-bold-font-size);
    line-height: var(--subtext-bold-line-height);
}

.badge-primary {
    background: var(--Brand-Main);
    color: var(--Primary-White);
}

.badge-lg {
    height: 32px;
    padding-inline: 18px;
}

.badge-sm {
    height: 21px;
    padding-inline: 18px;
}

/* badge end */

/* saving goals start */
.saving-goals {
    padding: 16px;
    border-radius: 10px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

    .saving-goals .head {
        display: flex;
        align-items: flex-start;
    }

        .saving-goals .head .btn {
            margin-left: auto;
        }

    .saving-goals .block-title p {
        font-family: var(--title-bold-font-family);
        font-weight: var(--title-bold-font-weight);
        font-size: var(--title-bold-font-size);
        line-height: var(--title-bold-line-height);
        margin: 0;
    }

    .saving-goals .block-title span {
        font-family: var(--caption-reg-font-family);
        font-weight: var(--caption-reg-font-weight);
        font-size: var(--caption-reg-font-size);
        line-height: var(--caption-reg-line-height);
        display: block;
        padding-top: 4px;
    }

    .saving-goals .stat-row {
        margin-left: -8px;
        margin-right: -8px;
        margin-top: -16px;
    }

        .saving-goals .stat-row > div {
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 16px;
        }

    .saving-goals .stat-card {
        background: var(--Primary-White);
        border: 1px solid rgba(var(--Decorative-Outline-rgb), 0.4);
        padding: 12px 8px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        row-gap: 12px;
        height: 100%;
        min-height: 96px;
    }

    .saving-goals .stat-title {
        display: flex;
        align-items: flex-start;
    }

        .saving-goals .stat-title p {
            margin: 0;
            font-family: var(--subtext-bold-font-family);
            font-weight: var(--subtext-bold-font-weight);
            font-size: var(--subtext-bold-font-size);
            line-height: var(--subtext-bold-line-height);
        }

        .saving-goals .stat-title svg {
            display: block;
            margin-left: auto;
            height: 16px;
            width: 16px;
        }

    .saving-goals .stat {
        margin-top: auto;
    }

        .saving-goals .stat p {
            margin: 0;
            font-family: var(--body-bold-font-family);
            font-weight: var(--body-bold-font-weight);
            font-size: var(--body-bold-font-size);
            line-height: var(--body-bold-line-height);
        }

        .saving-goals .stat span {
            display: block;
            font-family: var(--caption-reg-font-family);
            font-weight: var(--caption-reg-font-weight);
            font-size: var(--caption-reg-font-size);
            line-height: var(--caption-reg-line-height);
            padding-top: 6px;
            color: var(--Dark-Gray);
        }

    .saving-goals .goal-card {
        padding: 12px 8px;
        border: 1px solid rgba(var(--Decorative-Outline-rgb), 0.2);
        border-radius: 4px;
    }

    .saving-goals .goal-card-title {
        padding-bottom: 12px;
        margin-left: -4px;
        margin-right: -4px;
    }

        .saving-goals .goal-card-title > div {
            padding-left: 4px;
            padding-right: 4px;
        }

    .saving-goals .goal-card .card-title {
        margin: 0;
    }

        .saving-goals .goal-card .card-title p {
            margin: 0;
            font-family: var(--subtext-bold-font-family);
            font-weight: var(--subtext-bold-font-weight);
            font-size: var(--subtext-bold-font-size);
            line-height: var(--subtext-bold-line-height);
        }

        .saving-goals .goal-card .card-title span {
            display: flex;
            align-items: center;
            column-gap: 2px;
            padding-top: 4px;
            font-family: var(--caption-reg-font-family);
            font-weight: var(--caption-reg-font-weight);
            font-size: var(--caption-reg-font-size);
            line-height: var(--caption-reg-line-height);
            color: var(--Primary-Gray);
        }

            .saving-goals .goal-card .card-title span svg {
                display: block;
                height: 8px;
                width: 8px;
            }

            .saving-goals .goal-card .card-title span span {
                display: block;
                padding: 0;
            }

    .saving-goals .goal-card .card-details {
        text-align: right;
    }

        .saving-goals .goal-card .card-details p {
            font-family: var(--title-bold-font-family);
            font-weight: var(--title-bold-font-weight);
            font-size: var(--title-bold-font-size);
            line-height: var(--title-bold-line-height);
            margin: 0;
        }

        .saving-goals .goal-card .card-details span {
            display: block;
            padding-top: 4px;
            font-family: var(--caption-reg-font-family);
            font-weight: var(--caption-reg-font-weight);
            font-size: var(--caption-reg-font-size);
            line-height: var(--caption-reg-line-height);
            color: var(--Primary-Gray);
        }

    .saving-goals .goal-card-footer {
        display: flex;
        align-items: center;
        padding-top: 8px;
    }

        .saving-goals .goal-card-footer p {
            font-family: var(--caption-reg-font-family);
            font-weight: var(--caption-reg-font-weight);
            font-size: var(--caption-reg-font-size);
            line-height: var(--caption-reg-line-height);
            margin: 0;
            color: var(--Primary-Gray);
        }

        .saving-goals .goal-card-footer .btn {
            margin-left: auto;
        }

/* saving goals end */

/* primary progress start */
.primary-progress {
    background: none;
    position: relative;
    height: 4px;
    border-radius: 10px;
}

    .primary-progress:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: var(--Secondary-Light-gray);
        height: 2px;
        z-index: 0;
    }

    .primary-progress .progress-bar {
        position: relative;
        z-index: 1;
        border-radius: 10px;
        background: var(--Secondary-Green);
    }

/* primary progress end */

/* spend limit block start */
.spend-limit-block .spend-limit-card {
    padding: 16px;
    border-radius: 10px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    display: flex;
    column-gap: 8px;
    align-items: flex-start;
}

    .spend-limit-block .spend-limit-card > img {
        display: block;
        border-radius: 50px;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
        height: 50px;
        width: 50px;
    }

.spend-limit-block .details {
    padding-left: 16px;
}

    .spend-limit-block .details p {
        font-family: var(--display-lg-font-family);
        font-weight: var(--display-lg-font-weight);
        font-size: var(--display-lg-font-size);
        line-height: var(--display-lg-line-height);
        margin: 0;
        padding-bottom: 16px;
    }

    .spend-limit-block .details a {
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
        display: inline-flex;
        vertical-align: top;
        margin-bottom: 8px;
        align-items: center;
        column-gap: 2px;
        color: inherit;
    }

        .spend-limit-block .details a svg {
            display: block;
            height: 13px;
            width: 13px;
        }

.spend-limit-block .spend-limit-status {
    margin-left: auto;
    text-align: right;
    font-family: var(--headlines-font-family);
    font-weight: var(--headlines-font-weight);
    font-size: var(--headlines-font-size);
}

    .spend-limit-block .spend-limit-status p {
        margin: 0;
        padding-bottom: 8px;
    }

        .spend-limit-block .spend-limit-status p span {
            font-family: var(--body-bold-font-family);
            font-weight: var(--body-bold-font-weight);
            font-size: var(--body-bold-font-size);
            line-height: var(--body-bold-line-height);
            vertical-align: baseline;
            display: inline-block;
        }

/* spend limit block end */

/* switch start */
.custom-switch .custom-control-label:not(:empty) {
    padding-left: 8px;
}

.custom-switch .custom-control-label::before {
    width: 36px;
    height: 20px;
    top: 4px;
    border: 0;
    background: var(--Secondary-Red);
    border-radius: 50px;
}

.custom-switch .custom-control-label::after {
    height: 16px;
    width: 16px;
    background: var(--Primary-White);
    border-radius: 50px;
    top: 6px;
    left: -34px;
}

.custom-switch .custom-control-label {
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
    color: var(--Brand-Black);
}

    .custom-switch .custom-control-label a {
        color: inherit;
        text-decoration: underline;
    }

.custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
}

.custom-switch .custom-control-label a:hover,
.custom-switch .custom-control-label a:focus,
.custom-switch .custom-control-label a:active {
    text-decoration: underline;
    color: var(--Secondary-Blue);
}

.custom-switch .custom-control-label:not(:empty) {
    padding-left: 8px;
    padding-top: 7px;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(var(--Secondary-Red-rgb), 0.25);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(var(--Secondary-Green-rgb), 0.25);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(16px);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--Secondary-Green);
}

.custom-switch.inline {
    display: inline-block;
    vertical-align: top;
}

.custom-switch.label-start {
    padding-left: 0;
    padding-right: 2.25rem;
}

    .custom-switch.label-start .custom-control-label::before {
        left: auto;
        right: -2.25rem;
    }

    .custom-switch.label-start .custom-control-label::after {
        left: auto;
        right: -18px;
    }

    .custom-switch.label-start .custom-control-label:not(:empty) {
        padding-left: 0;
        padding-right: 8px;
    }

.custom-switch .control-label {
    padding-bottom: 0;
    padding-top: 3px;
}

/* switch end */

/* balance info card start */
.balance-info-cards {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

    .balance-info-cards .balance-info-card {
        border-radius: 8px;
        padding: 16px 12px;
        background: var(--Primary-White);
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .balance-info-cards .balance-info {
        display: flex;
        align-items: flex-start;
    }

    .balance-info-cards .right {
        margin-left: auto;
        text-align: right;
    }

    .balance-info-cards .left p {
        font-family: var(--headlines-font-family);
        font-weight: var(--headlines-font-weight);
        font-size: var(--headlines-font-size);
        line-height: 24px;
        margin: 0;
    }

    .balance-info-cards .left span {
        display: block;
        padding-top: 6px;
        color: var(--Primary-Gray);
        font-family: var(--subtext-semi-font-family);
        font-weight: var(--subtext-semi-font-weight);
        font-size: var(--subtext-semi-font-size);
    }

    .balance-info-cards .right p {
        margin: 0;
        font-family: var(--headlines-bold-font-family);
        font-weight: var(--headlines-bold-font-weight);
        font-size: var(--headlines-bold-font-size);
    }

    .balance-info-cards hr {
        margin: 0;
        border: 0;
        display: block;
        border-top: 1px solid var(--Primary-Gray);
        opacity: 0.5;
    }

/* balance info card end */

/* loan details card start */
.loan-details-card {
    border-radius: 8px;
    padding: 16px 12px;
    background: var(--Primary-White);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

    .loan-details-card .details {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        padding: 0;
        list-style: none;
        padding-bottom: 24px;
        margin: 0;
    }

        .loan-details-card .details li {
            display: flex;
            justify-content: space-between;
            font-family: var(--headlines-font-family);
            font-weight: var(--headlines-font-weight);
            font-size: var(--headlines-font-size);
        }

            .loan-details-card .details li p {
                margin: 0;
            }

                .loan-details-card .details li p:last-child {
                    text-align: right;
                }

    .loan-details-card .cta {
        margin-left: -5px;
        margin-right: -5px;
    }

        .loan-details-card .cta > div {
            padding-left: 5px;
            padding-right: 5px;
        }

    .loan-details-card .payment-history-cta {
        text-decoration: underline;
        font-family: var(--subtext-reg-font-family);
        font-weight: var(--subtext-reg-font-weight);
        font-size: var(--subtext-reg-font-size);
        line-height: var(--subtext-reg-line-height);
        color: var(--Secondary-Blue);
        margin-top: 16px;
        display: inline-block;
        vertical-align: top;
    }

        .loan-details-card .payment-history-cta:hover,
        .loan-details-card .payment-history-cta:focus,
        .loan-details-card .payment-history-cta:active {
            color: var(--Brand-Black);
        }

/* loan details card end */

/* modal start */
.modal .modal-header {
    border: 0;
    padding: 24px;
}

.modal .modal-content {
    border-radius: 10px;
    background: var(--Primary-White);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.modal .modal-body {
    padding: 0 24px 24px;
}

.modal .modal-title {
    font-family: var(--title-bold-font-family);
    font-weight: var(--title-bold-font-weight);
    font-size: var(--title-bold-font-size);
    line-height: var(--title-bold-line-height);
}

.modal .table-responsive {
    margin-bottom: 24px;
}

/* modal end */

/* table start */
.table th,
.table td {
    border-top: 0;
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
    padding: 8px 12px;
    text-align: center;
}

    .table td > .form-control-xs {
        margin-top: -5px;
        margin-bottom: -5px;
    }

.table tbody tr:first-child th,
.table tbody tr:first-child td {
    padding-top: 12px;
}

.table thead th {
    border-bottom: 1px solid rgba(var(--Decorative-Outline-rgb), 0.5);
    font-family: var(--subtext-semi-font-family);
    font-weight: var(--subtext-semi-font-weight);
    font-size: var(--subtext-semi-font-size);
    padding-top: 0;
}

.table {
    border-bottom: 1px solid rgba(var(--Decorative-Outline-rgb), 0.5);
    margin: 0;
}

/* table end */

/* Custom Checkbox start */
.custom-control.custom-checkbox {
    padding-left: 2.5rem;
    display: flex;
    align-items: center;
    min-height: 24px;
}

    .custom-control.custom-checkbox .custom-control-label {
        color: #1B1F52;
        font-family: var(--font-brand-text);
        font-weight: 400;
        font-size: 14px;
        display: flex;
        align-items: center;
        line-height: 1.4;
        margin-bottom: 0;
        cursor: pointer;
    }

        .custom-control.custom-checkbox .custom-control-label::before {
            width: 24px !important;
            height: 24px !important;
            border-radius: 4px !important;
            border: 2px solid #666 !important;
            background-color: transparent !important;
            left: -2.5rem !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

    .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        border-color: var(--Brand-Main, #1B1F52) !important;
        background-color: var(--Brand-Main, #1B1F52) !important;
    }

    .custom-control.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: 0 0 0 0.2rem rgba(27, 31, 82, 0.25) !important;
    }

    .custom-control.custom-checkbox .custom-control-label::after {
        width: 24px !important;
        height: 24px !important;
        left: -2.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background-size: 60% !important;
    }

    /* Custom checkmark appearance */
    .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.5L5 9.5L13 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-size: 60% !important;
        background-position: center !important;
    }

    /* Optional checkbox group label styling */
    .custom-control.custom-checkbox .checkbox-group-label {
        display: block;
        margin-bottom: 5px;
        color: var(--Brand-Black, #111);
        font-family: var(--font-brand-text, Inter);
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
    }

/* Custom Checkbox end */

/* custom select control start */
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select > .dropdown-toggle {
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--Decorative-Outline);
    padding: 4px 16px;
    background: none !important;
    display: flex;
    align-items: center;
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--Brand-Black);
}

    .bootstrap-select > .dropdown-toggle .filter-option {
        display: flex;
        align-items: center;
        column-gap: 8px;
    }

    .bootstrap-select > .dropdown-toggle:after {
        border: 0;
        margin: 0;
        vertical-align: top;
        width: 22px;
        height: 23px;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 8.5L11 15.5L4 8.5' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-size: 22px 23px;
        flex-shrink: 0;
    }

    .bootstrap-select > .dropdown-toggle.bs-placeholder {
        color: var(--Primary-Gray);
    }

    .bootstrap-select > .dropdown-toggle:focus,
    .bootstrap-select > .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active:focus,
    .bootstrap-select > .dropdown-toggle.btn-light:not(:disabled):not(.disabled).active:focus,
    .show > .dropdown-toggle.btn-light.dropdown-toggle:focus {
        color: var(--Brand-Black);
        border-color: var(--Secondary-Purple);
        box-shadow: 0 0 0 4px rgba(var(--Secondary-Purple-rgb), 0.25);
        outline: 0 !important;
    }

.bootstrap-select .dropdown-menu {
    border: 1px solid var(--Decorative-Outline);
    border-radius: 8px;
    padding: 0;
}

    .bootstrap-select .dropdown-menu li a {
        height: 48px;
        display: flex;
        align-items: center;
        padding: 4px 16px 4px 12px;
        font-family: var(--headlines-font-family);
        font-weight: var(--headlines-font-weight);
        font-size: var(--headlines-font-size);
        color: var(--Brand-Black);
        border-left: 4px solid transparent;
    }

    .bootstrap-select .dropdown-menu li .dropdown-item.active,
    .bootstrap-select .dropdown-menu li .dropdown-item:active {
        border-left-color: var(--Brand-Black);
        background: none;
    }

    .bootstrap-select .dropdown-menu li .dropdown-item:hover,
    .bootstrap-select .dropdown-menu li .dropdown-item:focus {
        background: var(--Secondary-Purple-light);
        border-color: var(--Secondary-Purple);
    }

/* custom select control end */

/* datepicker start */
input[type="date" i]::-webkit-calendar-picker-indicator {
    block-size: 22px;
    inline-size: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4167 4.33289H4.58333C3.57081 4.33289 2.75 5.19101 2.75 6.24955V19.6662C2.75 20.7248 3.57081 21.5829 4.58333 21.5829H17.4167C18.4292 21.5829 19.25 20.7248 19.25 19.6662V6.24955C19.25 5.19101 18.4292 4.33289 17.4167 4.33289Z' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.666 2.4162V6.24953' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33398 2.4162V6.24953' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.75 10.0829H19.25' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

/* datepicker end */

/* psuedo file upload start */
.psuedo-upload-wrapper {
    position: relative;
}

    .psuedo-upload-wrapper .file-upload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .psuedo-upload-wrapper .upload-control {
        position: relative;
        z-index: 0;
    }

/* psuedo file upload end */

/* budget summary start */
form .budget-summary {
    padding-top: 16px;
    padding-bottom: 48px;
}

.budget-summary-title {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(var(--Primary-Gray-rgb), 0.5);
    font-family: var(--body-bold-font-family);
    font-weight: var(--body-bold-font-weight);
    font-size: var(--body-bold-font-size);
    line-height: var(--body-bold-line-height);
}

.budget-summary ul {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.budget-summary li {
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.budget-summary .left p {
    font-family: var(--headlines-bold-font-family);
    font-weight: var(--headlines-bold-font-weight);
    font-size: var(--headlines-bold-font-size);
    margin: 0;
}

.budget-summary .left span {
    display: block;
    padding-top: 4px;
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
    color: var(--Dark-Gray);
}

.budget-summary .right {
    text-align: right;
    margin-left: auto;
}

    .budget-summary .right p {
        margin: 0;
        font-family: var(--subtext-bold-font-family);
        font-weight: var(--subtext-bold-font-weight);
        font-size: var(--subtext-bold-font-size);
        line-height: var(--subtext-bold-line-height);
        color: var(--Brand-Black);
    }

/* budget summary end */

/* trophy progress start */
.trophy-progress {
    padding: 16px;
    box-shadow: var(--card-lift);
    border-radius: 10px;
    background: var(--Primary-White);
}

    .trophy-progress ul {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: var(--headlines-bold-font-family);
        font-weight: var(--headlines-bold-font-weight);
        font-size: var(--headlines-bold-font-size);
    }

        .trophy-progress ul li {
            display: flex;
            column-gap: 8px;
            align-items: flex-start;
        }

            .trophy-progress ul li:not(:last-child) {
                padding-bottom: 24px;
                border-bottom: 1px solid rgba(var(--Primary-Gray-rgb), 0.5);
            }

    .trophy-progress .left p {
        margin: 0;
    }

    .trophy-progress .right {
        margin-left: auto;
        text-align: right;
    }

        .trophy-progress .right p {
            margin: 0;
        }

/* trophy progress end */

/* trophy slider start */
.trophy-slider,
.trophy-slider .slider_1 {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

    .trophy-slider .bodymovin {
        height: 226px;
    }

    .trophy-slider .trophy-name {
        text-align: center;
    }

        .trophy-slider .trophy-name p {
            font-family: var(--body-bold-font-family);
            font-size: 24px;
            line-height: 30px;
            font-weight: 700;
            margin: 0;
        }

        .trophy-slider .trophy-name span {
            display: block;
            color: var(--Primary-Gray);
            font-family: var(--subtext-bold-font-family);
            font-weight: var(--subtext-bold-font-weight);
            font-size: var(--subtext-bold-font-size);
            line-height: var(--subtext-bold-line-height);
            padding-top: 3px;
        }

    .trophy-slider .slide-count {
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
    }

        .trophy-slider .slide-count button {
            background: none;
            border: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30px;
            width: 30px;
        }

            .trophy-slider .slide-count button svg {
                display: block;
            }

        .trophy-slider .slide-count p {
            margin: 0;
            font-family: var(--display-lg-font-family);
            font-weight: var(--display-lg-font-weight);
            font-size: var(--display-lg-font-size);
            line-height: var(--display-lg-line-height);
        }

/* trophy slider end */

/* rank details start */
.rank-details {
    text-align: center;
    font-family: var(--subtext-reg-font-family);
    font-weight: var(--subtext-reg-font-weight);
    font-size: var(--subtext-reg-font-size);
    line-height: var(--subtext-reg-line-height);
}

    .rank-details > p {
        color: var(--Primary-Gray);
        margin: 0;
    }

    .rank-details .rank-for-month {
        padding-bottom: 24px;
    }

        .rank-details .rank-for-month span {
            display: block;
            padding-bottom: 16px;
        }

        .rank-details .rank-for-month p {
            font-family: var(--title-strong-font-family);
            font-weight: var(--title-strong-font-weight);
            font-size: var(--title-strong-font-size);
            line-height: var(--title-strong-line-height);
            color: var(--Secondary-Blue);
            margin: 0;
        }

/* rank details end */

/* video card start */
.video_card {
    padding: 12px;
    border-radius: 8px;
    background: var(--Primary-White);
    box-shadow: var(--card-lift);
    display: flex;
}

    .video_card > img {
        display: block;
        object-fit: cover;
        border-radius: 8px;
        flex-grow: 0;
        flex-shrink: 0;
        height: 144px;
        flex-basis: 134px;
        max-width: 134px;
    }

    .video_card .content {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(100% - 134px);
        max-width: calc(100% - 134px);
        padding-left: 16px;
        display: flex;
        flex-direction: column;
    }

    .video_card .video-name {
        margin: 0;
        font-family: var(--title-semi-font-family);
        font-weight: var(--title-semi-font-weight);
        font-size: var(--title-semi-font-size);
        line-height: var(--title-semi-line-height);
    }

    .video_card .video-desc {
        font-family: var(--label-reg-font-family);
        font-weight: var(--label-reg-font-weight);
        font-size: var(--label-reg-font-size);
        line-height: var(--label-reg-line-height);
        display: block;
        padding-top: 7px;
        color: var(--Dark-Gray);
    }

    .video_card .foot {
        padding-top: 12px;
        margin-top: auto;
    }

        .video_card .foot > span {
            font-family: var(--label-reg-font-family);
            font-weight: var(--label-reg-font-weight);
            font-size: var(--label-reg-font-size);
            line-height: var(--label-reg-line-height);
            text-transform: uppercase;
            display: block;
        }

            .video_card .foot > span span {
                display: inline-block;
                vertical-align: top;
                padding-left: 8px;
                font-family: var(--label-bold-font-family);
                font-weight: var(--label-bold-font-weight);
                font-size: var(--label-bold-font-size);
                line-height: var(--label-bold-line-height);
            }

/* video card end */

/* training video start */
.training-video-wrapper {
    border-radius: 8px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    height: 320px;
    overflow: hidden;
}

    .training-video-wrapper .jwplayer.jw-flag-aspect-mode {
        height: 100% !important;
    }

.training-video-status {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    text-align: center;
}

/* training video end */

/* add fund start */
.add-fund-description {
    font-family: "Inter", Helvetica;
    font-size: 16px;
    line-height: 1;
    color: var(--Brand-Black);
    font-weight: 700;
    text-align: center;
}

    .add-fund-description p {
        margin: 0;
    }

    .add-fund-description span {
        display: block;
        padding-top: 4px;
        color: var(--Dark-Gray);
        font-family: var(--caption-reg-font-family);
        font-weight: var(--caption-reg-font-weight);
        font-size: var(--caption-reg-font-size);
        line-height: var(--caption-reg-line-height);
    }

.add-fund-current-fund {
    text-align: center;
}

    .add-fund-current-fund p {
        font-family: "Inter", Helvetica;
        font-size: 24px;
        line-height: 1.2;
        color: var(--Brand-Black);
        font-weight: 700;
        margin: 0;
    }

    .add-fund-current-fund span {
        font-family: var(--headlines-font-family);
        font-weight: var(--headlines-font-weight);
        font-size: var(--headlines-font-size);
        display: block;
        color: var(--Primary-Gray);
        padding-top: 8px;
    }

/* add fund end */
/* autocomplete start */
.autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--Decorative-Outline);
    border-radius: 8px;
    background: var(--Primary-White);
    z-index: 10;
    max-height: 300px;
    overflow: auto;
}

    .autocomplete .autocomplete-header {
        padding: 16px;
        margin: 0;
        font-family: var(--body-bold-font-family);
        font-weight: var(--body-bold-font-weight);
        font-size: var(--body-bold-font-size);
        line-height: var(--body-bold-line-height);
    }

    .autocomplete .autocomplete-item {
        display: flex;
        padding: 12px;
        align-items: center;
        cursor: pointer;
    }

        .autocomplete .autocomplete-item:hover,
        .autocomplete .autocomplete-item:focus,
        .autocomplete .autocomplete-item:active {
            background: rgba(0, 0, 0, 0.06);
        }

        .autocomplete .autocomplete-item .task-icon {
            height: 48px;
            flex-basis: 48px;
            flex-grow: 0;
            flex-shrink: 0;
            max-width: 48px;
        }

            .autocomplete .autocomplete-item .task-icon img {
                display: block;
                height: 100%;
                width: 100%;
                object-fit: contain;
            }

        .autocomplete .autocomplete-item .task-details {
            padding-left: 12px;
            flex-grow: 1;
        }

            .autocomplete .autocomplete-item .task-details h6 {
                font-family: var(--headlines-bold-font-family);
                font-weight: var(--headlines-bold-font-weight);
                font-size: var(--headlines-bold-font-size);
                margin: 0;
            }

            .autocomplete .autocomplete-item .task-details p {
                color: var(--Dark-Gray);
                font-family: var(--headlines-font-family);
                font-weight: var(--headlines-font-weight);
                font-size: var(--headlines-font-size);
                margin: 0;
            }

/* autocomplete end */

/* login start */
.no-header .parentlanding {
    padding-top: 0 !important;
}

.login-wrapper {
    padding-bottom: 32px;
    padding-top: 128px;
    width: 100%;
}

    .login-wrapper .logo {
        display: block;
        margin: 0 auto 64px;
        object-fit: contain;
    }

    .login-wrapper .form-group {
        padding-bottom: 16px;
    }

    .login-wrapper .block-form .form-btn {
        margin-top: 24px;
    }

    .login-wrapper .forgot-password {
        padding-top: 64px;
        text-align: center;
    }

        .login-wrapper .forgot-password a {
            font-family: var(--body-bold-font-family);
            font-weight: var(--body-bold-font-weight);
            font-size: var(--body-bold-font-size);
            line-height: var(--body-bold-line-height);
            color: var(--Secondary-Blue);
            text-decoration: underline;
        }

            .login-wrapper .forgot-password a:hover,
            .login-wrapper .forgot-password a:focus,
            .login-wrapper .forgot-password a:active {
                color: var(--Secondary-Blue-Dark);
            }

/* login end */

/* get started start */
.get-started {
    padding-top: 90px;
    padding-bottom: 16px;
}

    .get-started .logo {
        display: block;
        margin: 0 auto 48px;
        object-fit: contain;
    }

    .get-started .content {
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 110%;
        color: var(--Brand-Black);
        padding-bottom: 48px;
        margin: 0;
        font-family: var(--body-font-family);
    }

    .get-started .cta {
        min-width: 180px;
    }

/* get started end */
/* parent consent form start */
.parent-consent-form {
    font-size: 14px;
    line-height: 1.3;
    color: var(--Brand-Black);
    font-family: var(--body-font-family);
}

    .parent-consent-form .content {
        padding-bottom: 48px;
        margin: 0;
    }

    .parent-consent-form .toggles {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
        padding-bottom: 48px;
    }

/* parent consent form end */

/* coins styles */
#child-popup {
    position: fixed;
    display: flex;
    top: 0;
    z-index: 990;
    width: 160% !important;
    margin-left: -120px;
}

/*-Tour guide style*/
.popover {
    font-family: var(--font-brand) !important;
}