.component.calculator{background-color:var(--surface-turquiseBright);padding:24px}
.component.calculator .content{display:flex;flex-direction:column}
.component.calculator .content>.headline{padding:16px 0;text-align:center}
.component.calculator .content>.headline h2{margin:0 auto}
.component.calculator .content .component.rte{text-align:center}
.component.calculator .content .component.rte.lead{display:flex;justify-content:center;margin-bottom:32px}
.component.calculator .content .calculator-form{display:grid;grid-gap:32px}
.component.calculator .content .calculator-form notification-element.error{font-size:.875rem;top:-2px;z-index:4}
.component.calculator .content .result-wrapper{font-size:.875rem;line-height:1rem;display:flex;flex-direction:column;text-align:center;grid-gap:12px}
.component.calculator .content .cost-and-customer-section{display:flex;flex-direction:column;align-items:center;margin-top:32px;margin-bottom:56px;grid-gap:12px;text-align:center}
.component.calculator .content .cost-and-customer-section .as-headline{font-family:SwedbankHeadlineBlack,Arial,sans-serif;font-weight:normal}
.component.calculator .content .cost-and-customer-section .as-headline.as-h1{font-size:3rem;line-height:3rem;color:var(--text-brand)}
.component.calculator .content .cost-and-customer-section .as-headline.as-h3{font-family:SwedbankHeadlineBold,Arial,sans-serif;font-size:1.375rem;line-height:1.875rem}
.component.calculator .content .cost-and-customer-section .login-button{margin-top:12px;margin-bottom:4px;width:100%}
.component.calculator .content .cost-and-customer-section .login-button .button-link{padding:16px 32px}
.component.calculator .content .cost-and-customer-section .result-wrapper .component.headline h1.loan-result-value{font-size:4.25rem;line-height:4.25rem}
.component.calculator .content .representative-example{color:var(--text-regularHigh);border-top:1px solid var(--line-regularMedium)}
.component.calculator .content .representative-example .representative-text{padding-top:24px}
.component.calculator .content .representative-example .representative-headline{font-weight:bold}
.component.calculator .content .calculator-legend .label b,.component.calculator .content .downpayment-additional-label b{font-family:SwedbankHeadlineBold,Arial,sans-serif;color:var(--text-regularHigh);font-size:1.1875rem;line-height:1.6875rem}
@media screen and (min-width:37.5em){.component.calculator{padding:48px 40px}
.component.calculator .content .cost-and-customer-section .as-headline.as-h1{font-size:4.25rem;line-height:4.25rem}
.component.calculator .content .cost-and-customer-section .as-headline.as-h3{font-size:1.625rem;line-height:2.125rem}
.component.calculator .content .cost-and-customer-section .login-button{width:auto}
.layout-container .container-component .block-d .component.calculator,.layout-container .container-component .block-c .component.calculator{padding:24px !important}
.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .as-headline.as-h1,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .as-headline.as-h1{font-size:3rem !important;line-height:3rem !important}
.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .as-headline.as-h3,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .as-headline.as-h3{font-family:SwedbankHeadlineBold,Arial,sans-serif;font-size:1.375rem !important;line-height:1.875rem !important}
.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .login-button,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .login-button,.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .login-button .button-link,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .login-button .button-link{width:100%}
.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .calculator-legend .label b,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .calculator-legend .label b,.layout-container .container-component .block-d .component.calculator .content .cost-and-customer-section .downpayment-additional-label b,.layout-container .container-component .block-c .component.calculator .content .cost-and-customer-section .downpayment-additional-label b{font-size:1.1875rem !important;line-height:1.6875rem !important}
}
@media screen and (min-width:56.5625em){.component.calculator .content .lead-text,.component.calculator .content .calculator-form,.component.calculator .content .result-wrapper,.component.calculator .content .cost-and-customer-section,.component.calculator .content>.component.headline,.component.calculator .content>.heading-wrapper .component.headline,.component.calculator .content .component.rte,.component.calculator .content .component.rte p{max-width:702px;width:100%;margin-right:auto;margin-left:auto}
.component.calculator .content .calculator-legend .label b,.component.calculator .content .downpayment-additional-label b{font-size:1.375rem;line-height:1.875rem}
}