#totalkredit-embedded-application {
    /* CSS custom properties */
    --primary-color: var(--colortheme-primary);
    --primary-color--hover: var(--colortheme-primary-dark);
    --secondary-color: var(--colortheme-primary-dark);
    --secondary-color--hover: var(--colortheme-primary-darker);
    --tertiary-color: var(--colortheme-beta);
    --quarternary-color: var(--colortheme-primary-dark);

    /* Sizing system */
    --button-border-radius: 1.6rem;
    --input-border-radius: 0.9rem;
    --card-border-radius: 1.6rem;
    --select-border-radius: 0.9rem;
    --standard-gap: 1.6rem;
    --large-gap: 3.2rem;
    --input-height: 60px;
    --padding-standard: 1.6rem;
    --padding-large: 2.4rem;
    --padding-xl: 3.6rem;

    /* Typography scale */
    --font-size-small: 1.2rem;
    --font-size-standard: 1.8rem;
    --font-size-button: 1.6rem;
    --font-size-heading: 3.2rem;
    --font-size-mega: 5.6rem;

    /* Effects */
    --box-shadow: 0px 2px 4px var(--colortheme-primary-dark-20), 0px 4px 8px var(--colortheme-primary-dark-20);
    --transition-standard: 0.3s ease;
    --focus-outline: 1px solid var(--colortheme-delta);
    --focus-shadow: 0 0 0 1px var(--colortheme-delta);

    /* Base typography styles */
    :is(.typography--text, .typography--display, .select__item__text) {
        color: var(--colortheme-primary-dark);
        font-family: var(--font-family);
        font-size: var(--font-size-standard);
        font-style: normal;
        line-height: var(--line-height-body-text-medium);
        text-align: left;
    }

    /* Headings */
    :is(.page__header, .card__header-tooltip-container h3) {
        color: var(--heading-font-color);
        font-family: var(--font-family);
        font-size: var(--font-size-heading);
        font-weight: var(--heading-font-weight);
        line-height: var(--line-height-heading-medium);
        text-align: left;
    }

    .typography--mega-result {
        color: var(--heading-font-color);
        font-family: var(--font-family);
        font-size: var(--font-size-mega);
        font-weight: var(--heading-font-weight);
        line-height: var(--line-height-heading-medium);
        margin: 0;
        text-align: left;
    }

    /* Small text elements */
    :is(.typography--disclaimer, .typography--note, .spinner .typography--text,
        .kundekroner-result .kundekroner-result__info-text .typography--text,
        .typography--disclaimer a.link .typography--text) {
        color: var(--colortheme-primary-dark);
        font-family: var(--font-family);
        font-size: var(--font-size-small);
        font-style: normal;
        font-weight: 400;
        line-height: 1.8rem;
    }

    /* Form elements */
    :is(.textfield, .select__button) {
        border: 1px solid var(--colortheme-primary-dark);
        border-radius: var(--input-border-radius);
        height: var(--input-height);
        outline: none;
        outline-offset: unset;
    }

    .textfield:hover,
    .select__button:hover {
        border: 1px solid var(--colortheme-primary-dark);
    }

    .textfield:focus-within,
    .select__button:focus-within {
        border: var(--focus-outline);
        box-shadow: var(--focus-shadow);
    }

    .textfield:focus-within:hover,
    .select__button:focus-within:hover {
        border: var(--focus-outline);
        box-shadow: var(--focus-shadow);
    }

    .textfield input,
    .select__button {
        padding: 0.8rem var(--padding-standard);
        color: var(--heading-font-color);
        font-family: var(--font-family);
        font-size: var(--font-size-standard);
        font-weight: 400;
        line-height: var(--line-height-body-text-large);
        text-align: left;
    }

    /** if the label exists, increase the padding to make space for it **/
    [class*="-form__field"] {
        [class*="__field__label"]+.form-field-wrapper {

            .textfield input,
            .select__button {
                padding: 2.8rem var(--padding-standard) 0.8rem var(--padding-standard);
            }
        }
    }

    .textfield input::placeholder {
        color: var(--colortheme-primary-dark);
        font-family: var(--font-family);
        font-size: var(--font-size-standard);
        font-weight: 400;
        opacity: 0.7;
    }

    .textfield input:focus::placeholder {
        opacity: 0.5;
    }

    .textfield input:is(:focus, :not(:placeholder-shown))::placeholder {
        opacity: 0;
    }

    .textfield:focus-within input {
        border: none;
        outline: none;
    }

    /* Error states */
    .textfield--has-error,
    .textfield--has-error:hover,
    .textfield--has-error:focus-within {
        border-color: var(--colortheme-accent-primary);
        box-shadow: 0 0 0 1px var(--colortheme-accent-primary);
    }

    /* Form field containers and labels */
    :is([class*="-form__field"], .form-field-wrapper) {
        position: relative;

        select {
            color: var(--heading-font-color);
            font-family: var(--font-family);
            font-size: var(--font-size-standard);
            font-weight: 400;
            line-height: var(--line-height-body-text-large);
        }
    }

    [class*="__field__label"] {
        position: absolute;
        top: 0.8rem;
        left: var(--padding-standard);
        z-index: 1;
        pointer-events: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .typography {
            font-size: var(--font-size-small);
            line-height: var(--line-height-body-text-x-small-mobile);
            color: var(--colortheme-primary-dark);
            opacity: 0.8;
            margin: 0;
        }

        .tooltip {
            pointer-events: auto;
        }

        .tooltip__trigger {
            padding: 0;
            margin: 0;
            flex-shrink: 0;
            min-width: unset;

            svg {
                width: 12px;
                height: 12px;
            }
        }
    }

    /* Focus states for interactive elements */
    :is(.tooltip__trigger, .button--secondary):is(:focus-visible, :focus) {
        border: var(--focus-outline);
        box-shadow: var(--focus-shadow);
        outline: none;
    }

    /* Error message styling */
    .form-field-wrapper .error-message {
        p.typography.typography--display {
            color: var(--colortheme-accent-primary);
        }

        svg circle {
            fill: var(--colortheme-accent-primary);
        }
    }

    /* Select component */
    .select__content {
        border-width: 0;
        border-radius: var(--select-border-radius);
        box-shadow: var(--box-shadow);
        max-height: 300px;
        z-index: 100;
    }

    .select__item:is(:hover, :focus) {
        background-color: color-mix(in srgb, var(--colortheme-neutral-5) 20%, transparent);
    }

    .select__item:is(:hover, :focus) .select__item__text {
        color: var(--colortheme-primary-dark);
    }

    .select__item:first-child {
        border-top-left-radius: var(--select-border-radius);
        border-top-right-radius: var(--select-border-radius);
    }

    .select__item:last-child {
        border-bottom-left-radius: var(--select-border-radius);
        border-bottom-right-radius: var(--select-border-radius);
    }

    .select__item__text {
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .select__button .icon--interactive path {
        fill: var(--colortheme-neutral-5);
    }

    /* Buttons */
    .submitgroup__button {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem var(--padding-large);
        border: 1px solid var(--colortheme-primary);
        border-radius: var(--border-radius-button);
        font-size: var(--font-size-button);
        text-align: left;
        background-color: var(--colortheme-primary);
        color: var(--colortheme-neutral-7);
        cursor: pointer;
        transition: var(--transition-standard);
        text-decoration: none;
    }

    .submitgroup__button:focus {
        outline: none;
    }

    :is(.submitgroup .button--text, .modal__portal__container .modal__content .link) {
        align-items: center;
        color: var(--heading-font-color);
        background-color: var(--colortheme-neutral-7);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--font-size-button);
        gap: 1rem;
        margin-left: auto;
        outline: none;
        padding: 1rem 0;
        text-align: left;
        text-decoration: none;
        font-style: normal;
        transition: color var(--transition-standard);
        width: fit-content;

        @media screen and (max-width: 400px) {
            margin-left: unset
        }
    }

    .submitgroup .button--text:is(:hover, :focus) .typography--text,
    .modal__portal__container .modal__content .link:is(:hover, :focus) .typography--text {
        color: var(--colortheme-primary);
    }

    .modal__portal__container .modal__content .link .typography--text {
        align-items: center;
        color: var(--heading-font-color);
        background-color: var(--colortheme-neutral-7);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--font-size-button);
        gap: 1rem;
        margin-left: auto;
        outline: none;
        padding: 1rem 0;
        text-align: left;
        text-decoration: none;
        font-style: normal;
        transition: color var(--transition-standard);
        width: fit-content;
    }

    /* Radio buttons */
    .radio-button-group {
        @media screen and (max-width: 575px) {
            flex-direction: column;
        }
    }

    .radio-button-group__item__label {
        padding-left: 40px;
    }

    .radio-button-group__item__button {
        border-color: var(--colortheme-delta);
        border-width: 1px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: none;
    }

    .radio-button-group__item__button::after {
        border-radius: 50%;
        background-color: var(--colortheme-delta);
        width: 14px;
        height: 14px;
    }

    .radio-button-group__item__input:checked+.radio-button-group__item__label .radio-button-group__item__button {
        border-color: var(--colortheme-delta);
    }

    .radio-button-group__item__input:is(:focus-visible, :focus)+.radio-button-group__item__label .radio-button-group__item__button {
        outline: none;
        border-width: 2px;
    }

    .radio-button-group__item__input:is(:focus-visible, :focus)+.radio-button-group__item__label .radio-button-group__item__button::after {
        width: 12px;
        height: 12px;
    }

    /* Slider component */
    .slider:hover .slider__thumb,
    .slider:hover .slider__track__selection {
        background-color: var(--colortheme-delta);
    }

    .slider__thumb {
        background-color: var(--colortheme-delta);
        box-shadow: var(--box-shadow);
        transition: transform 0.2s ease;
    }

    .slider__thumb::before {
        content: attr(aria-valuenow);
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 0.4rem;
        top: -10px;
        left: 8px;
    }

    .slider__thumb:focus-visible {
        outline: none;
        transform: scale(1.15);
    }

    .slider__track {
        background-color: var(--colortheme-neutral-4);
        border-radius: 5px;
    }

    .slider__track__selection {
        background-color: var(--colortheme-delta);
        border-radius: 5px;
    }

    .slider-field__textfield {
        display: none;
    }

    /* Cards and results */
    .scroll-into-view .card {
        align-items: flex-start;
        background-color: var(--colortheme-accent-secondary);
        border-radius: var(--card-border-radius);
        display: flex;
        flex-direction: column;
        gap: 64px;
        padding: var(--large-gap) var(--padding-large);
        margin: 4rem 0;
    }

    .kundekroner-result {
        text-align: left;

        .kundekroner-result__result {
            align-items: flex-start;
            margin-bottom: var(--large-gap);
        }

        .kundekroner-result__info-text {
            text-align: left;
        }
    }

    .what-can-i-buy-for-result__result-note {
        text-align: left;
    }

    :is(.what-can-i-buy-for-result, .home-equity-calculator-result) {
        align-items: flex-start;
        gap: var(--padding-large);
    }

    /* Tooltips */
    :is(.tooltip__content, .tooltip__content--light-mode) {
        border: 0;
        border-radius: var(--select-border-radius);
        box-shadow: var(--box-shadow);
        background-color: var(--colortheme-neutral-7);
        padding: 2rem;

        .tooltip__arrow {
            fill: var(--colortheme-neutral-7);
        }
    }

    svg.tooltip__arrow--light-mode {
        fill: var(--colortheme-neutral-7);
    }

    .bar__tooltip__row {
        align-items: flex-start;
    }

    .color-circle {
        margin-top: 5px;
    }

    /* Modals */
    .modal__overlay {
        background-color: var(--colortheme-neutral-5-40);
        z-index: 1000;
    }

    .modal__portal {
        border-radius: var(--card-border-radius);
        display: flex;
        flex-direction: column;
        height: unset;
        max-height: calc(100vh - 12rem);
        max-width: 67rem;
        padding: var(--large-gap);
        width: 100%;
        z-index: 1001;

        .modal__exit {
            width: 44px;
            height: 44px;
            min-height: 44px;
            border-radius: 4rem;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--colortheme-neutral-2);
            cursor: pointer;
            margin-left: auto;

            svg {
                width: 10px;
                height: 10px;
            }
        }

        .modal__portal__container {
            border-radius: var(--card-border-radius);
            display: flex;
            flex-direction: column;
            height: unset;
            max-height: calc(100vh - 12rem);
            max-width: 67rem;
            width: 100%;
            z-index: 1001;

            .modal__content {
                .link {
                    align-items: center;
                    background-color: var(--colortheme-neutral-7);
                    color: var(--heading-font-color);
                    cursor: pointer;
                    display: inline-flex;
                    font-size: var(--font-size-button);
                    gap: 1rem;
                    margin-left: auto;
                    outline: none;
                    padding: 1rem 0;
                    text-align: left;
                    text-decoration: none;
                    font-style: normal;
                    transition: color var(--transition-standard);
                    width: fit-content;

                    .typography--text {
                        background-color: var(--colortheme-neutral-7);
                        color: var(--heading-font-color);
                        cursor: pointer;
                        font-size: var(--font-size-button);
                        font-style: normal;
                        transition: color var(--transition-standard);
                    }
                }

                &:focus-within {
                    outline: none;
                }
            }
        }
    }


    /* Spinner components */
    .spinner {
        width: 100%;

        .typography--text {
            color: var(--colortheme-primary-dark);
            font-family: var(--font-family);
            font-size: var(--font-size-small);
        }
    }

    .kundekroner-page .spinner {
        min-height: 150px;
    }

    .what-can-i-buy-for-page .spinner {
        min-height: 170px;
    }

    /* House visualization */
    .supplementary-mortgage-distribution {
        column-gap: 15rem;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto 1fr;
        row-gap: 1.8rem;
        margin-top: 50px;

        [role=alert] {
            grid-column: 1 / -1;
        }
    }

    .supplementary-mortgage-distribution__legend {
        justify-self: start;
    }

    .supplementary-mortgage-distribution__legend__row__percentage {
        font-size: var(--font-size-small);
    }

    .supplementary-mortgage-distribution__legend__row--first {
        background-color: var(--colortheme-beta);
    }

    .supplementary-mortgage-distribution__legend__row--second {
        background-color: var(--colortheme-gamma);
    }

    .supplementary-mortgage-distribution__legend__row--third {
        background-color: var(--colortheme-primary-dark);
        color: var(--colortheme-neutral-1);
    }

    .supplementary-mortgage-distribution__legend__row--third .supplementary-mortgage-distribution__legend__row__percentage {
        color: var(--colortheme-neutral-7);
    }

    .supplementary-mortgage-distribution__graph {
        justify-self: end;
        width: 160px;
    }

    /* House sections colors */
    .house-graph__top-section {
        fill: var(--colortheme-beta);
    }

    .house-graph__mid-section {
        fill: var(--colortheme-gamma);
    }

    .house-graph__bottom-section {
        fill: var(--colortheme-primary-dark);
    }

    /* Refinancing specific styles */
    .refinancing-page .refinancing-page__result-card {
        background-color: transparent;
        border: 0;
        padding: 0;
    }

    .refinancing-page .refinancing-page__result-card .card__header-tooltip-container {
        justify-content: flex-start;
        gap: 1rem;
    }

    .refinancing-page .bar-chart__chart {
        justify-content: space-between;
        position: relative;
        max-width: 400px;
    }

    .refinancing-page .bar-chart__chart::after {
        content: '';
        position: absolute;
        bottom: 36px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--colortheme-neutral-4);
        z-index: 0;
    }

    .refinancing-page .bar-chart__chart__bar {
        width: unset;
        z-index: 1;
    }

    .refinancing-page .bar-chart__chart__bar svg,
    .refinancing-page .bar-chart__chart__bar svg * {
        stroke: none;
        stroke-width: 0;
    }

    .refinancing-page .bar-chart__chart__bar pattern {
        display: none;
    }

    .refinancing-page .bar-chart__chart__bar__label {
        text-align: center;
    }

    .refinancing-page .bar-chart__chart__bar .bar-chart__chart__bar__spacer {
        display: none;
    }

    .refinancing-page .bar-chart__chart .tooltip__custom-trigger {
        padding: 0;
    }

    .refinancing-page .bar-chart__labels circle {
        stroke: none;
        stroke-width: 0;
    }

    .refinancing-page .bar-chart__labels pattern {
        display: none;
    }

    /* Layout and spacing */
    .slimbox {
        margin: unset;
        max-width: unset;
    }

    .page {
        padding: 0;
    }

    form,
    .scroll-into-view .card:not(.refinancing-page__result-card) {
        max-width: 600px;

        &+ :is(p, .supplementary-mortgage-page__info-box) {
            max-width: 600px;
        }
    }

    .kundekroner-form {
        gap: 4.4rem;
    }

    .supplementary-mortgage-page__input {
        max-width: 40.5em;
    }

    :is(.loan-type-filter, .loan-type-filter--mobile) {
        gap: 4rem;
    }

    .home-equity-calculator-page__result-box {
        width: 100%;
    }

    /* Miscellaneous resets and overrides */
    .interest-only-info__contact {
        border-top: none;
    }

    :is(.new-loan-distribution__legend__row--third, .supplementary-mortgage-distribution__legend__row--third) {
        color: var(--colortheme-neutral-1);
    }

    :is(.home-equity-calculator-result__percent.home-equity-calculator-result__percent--higher,
        .home-equity-calculator-result .link .typography,
        .refinancing-result__tab-content__table-top-header__text .typography) {
        color: var(--colortheme-primary-dark);
    }

    .interest-only-result__graph-and-info-container {
        flex-direction: column;
    }

    .tab__root__content:focus {
        box-shadow: unset;
    }

    .link:is(:hover, :focus-within):not([disabled]) {
        outline: none;
    }

    /* Responsive design */
    @media (max-width: 1440px) {
        .supplementary-mortgage-distribution {
            grid-template-columns: auto;
            grid-template-rows: auto 1fr 1fr;
            gap: 1.8rem;
        }

        .supplementary-mortgage-distribution__graph,
        .supplementary-mortgage-distribution__legend {
            justify-self: center;
        }

        .loan-type-filter-group {
            grid-template-columns: 0.9fr;
        }
    }

    @media screen and (max-width: 575px) {
        .submitgroup {
            flex-flow: row;
        }

        .modal__portal {
            min-height: 100dvh;
            max-height: 100dvh;
            border-radius: 0;
            padding: 2rem;
            margin: 0;
        }
    }

    @media screen and (max-width: 400px) {
        .submitgroup {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* Highcharts responsive width constraints */
    .highcharts-container,
    .highcharts-container svg {
        @media screen and (max-width: 1280px) {
            max-width: 600px;
        }

        @media screen and (max-width: 1100px) {
            max-width: 500px;
        }

        @media screen and (max-width: 800px) {
            max-width: 450px;
        }

        @media screen and (max-width: 500px) {
            max-width: 350px;
        }
    }

    /* Tables */
    .card--minimalPadding {
        padding: 0;
        border: 0;
    }

    table.table__table {
        width: 100%;
    }

    table.table__table thead {
        border-bottom: 1px solid var(--Color-border-solid-border-primary-dark, #9C9DB7);
    }

    table.table__table tr {
        background-color: transparent;
    }

    table.table__table tr :is(td, th) {
        padding: 0;
    }

    table.table__table tr :is(td, th) p {
        padding: 18px 0;
        text-align: right;
    }

    table.table__table tr :is(td, th):first-child p {
        text-align: left;
    }

    .loan-table-display {
        margin-top: 4rem;
    }

    .loan-table-display,
    .loan-table-display__table-container {
        gap: 5rem;
    }

    .loan-table-display__table-container__table {
        gap: 0;
    }
}

/* Container styles (outside main scope) */
.nyk-contextless-calculator.nyk-hero-topic-pages,
div:has(> .nyk-contextless-calculator) {
    background-color: var(--colortheme-neutral-7);
}

@media screen and (min-width: 1440px) {

    .nyk-contextless-calculator.nyk-hero-topic-pages.nyk-contextless-calculator,
    div:has(> .nyk-contextless-calculator) .nyk-contextless-calculator {
        max-width: 1280px;
    }
}