/* Minification failed. Returning unminified contents.
(16,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(45,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(155,23): run-time error CSS1039: Token not allowed after unary operator: '-lora'
(172,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(177,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-three'
(186,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-three'
(215,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(235,36): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(239,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-three'
(243,21): run-time error CSS1039: Token not allowed after unary operator: '-max-container-width'
(250,23): run-time error CSS1039: Token not allowed after unary operator: '-lora'
(256,21): run-time error CSS1039: Token not allowed after unary operator: '-max-container-width'
(289,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(290,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(297,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(339,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(343,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-five'
(348,21): run-time error CSS1039: Token not allowed after unary operator: '-max-container-width'
(354,23): run-time error CSS1039: Token not allowed after unary operator: '-lora'
(368,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(369,23): run-time error CSS1039: Token not allowed after unary operator: '-lora'
(526,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(545,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-three'
(557,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(571,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(603,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-three'
(611,32): run-time error CSS1039: Token not allowed after unary operator: '-white'
(676,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(678,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(728,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(758,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(762,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-five'
(774,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(820,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(821,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(843,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(845,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(851,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(855,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-error'
(869,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(913,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-two'
(914,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(928,34): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(962,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
(994,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1006,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1012,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1024,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1035,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1038,35): run-time error CSS1039: Token not allowed after unary operator: '-secondary-two'
(1041,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(1050,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-five'
(1061,24): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-one'
(1073,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(1088,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1091,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-one'
(1102,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-three'
(1105,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1119,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1128,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1140,23): run-time error CSS1039: Token not allowed after unary operator: '-lora'
(1501,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-two'
(1521,23): run-time error CSS1039: Token not allowed after unary operator: '-muli'
(1522,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-two'
 */
@media (min-width: 768px) {
    .c-section-block__asset--RVC {
        width: 56%;
    }

        .c-section-block__asset--RVC .embed-responsive-item {
            border-bottom-left-radius: 30px;
        }
}

.section-block--hl {
    margin-top: 2.1rem;
}

.section-block--hl-refinance .c-section-block__header {
    color: var(--primary-one);
}

.section-block--hl-refinance span:first-child {
    display: block;
    margin-bottom: 1.8rem;
}

.section-block--hl-refinance .c-picture__img-item {
    border-top-left-radius: 30px;
}

@media (max-width: 767px) {
    .section-block--hl-refinance .c-section-block__asset {
        display: none;
    }
}

.hl-refinance__rates {
    padding: 6rem 0 2rem;
}

.hl-refinance__eligible,
.hl-refinance__work {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.hl-refinance__eligible {
    background-color: var(--tertiary-one);
}

.hl-refinance__hassle {
    padding: 0 2rem;
    max-width: 78rem;
    margin: 0 auto;
}

    .hl-refinance__hassle .c-section-title {
        margin-bottom: 3rem;
    }

@media (min-width: 1024px) {
    .hl-refinance__hassle {
        margin-top: 6.4rem;
        margin-bottom: 10rem;
    }
}

.hl-refinance__hassle-list {
    list-style: none;
    padding-left: 0;
    margin-top: 2.4rem;
}

.hl-refinance__hassle-list-item::before {
    content: '';
    background-image: url('../../Images/Icons/more-tick.png');
    display: inline-block;
    width: 2.2rem;
    height: 2rem;
    margin-right: 0.1rem;
}

.hl-refinance__hassle-list-item {
    margin-bottom: 2.1rem;
}

.hl-refinance__hassle-list-item-header {
    font-size: 20px;
    font-family: 'Muli';
    font-weight: 700;
    line-height: 26px;
    display: inline-block;
    color: #373f41;
}

.hl-refinance__hassle-list-item p {
    margin-top: 1.2rem;
    margin-bottom: 3.2rem;
}

.hl-refinance__small {
    display: block;
    line-height: 1.8rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.hl-refinance__sep {
    margin: -8rem 0 4rem;
}

.hl-refinance__start-title {
    font-size: 3.4rem;
    line-height: 4.6rem;
    font-weight: 500;
    margin-bottom: 2.1rem;
}

@media (max-width: 767px) {
    .section-block--hl .c-picture {
        display: none;
    }
}

.homeloans-page .homeloans-hero-rate {
    font-size: 7rem;
    font-weight: 600;
}

.homeloans-page .c-container,
.homeloans-eligibility-home .c-container {
    margin-top: 30px;
}

    .homeloans-page .c-container.calculator {
        margin-bottom: 5rem;
    }

.homeloans-page .hl-links a {
    text-decoration: underline;
}

.homeloans-page .c-accordion {
    margin-bottom: 5rem;
}

/*Rates*/

.homeloans-page .hl-fees-container,
.homeloans-page .hl-links-container {
    margin-left: auto;
    margin-right: auto;
}

.accordion-group-dp h3,
.homeloans-rates-links h3,
.hl-fees-container h3 {
    font-family: var(--lora);
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 3.6rem;
}

@media (min-width: 1024px) {
    .accordion-group-dp h3,
    .homeloans-rates-links h3,
    .hl-fees-container h3 {
        font-size: 3.4rem;
        line-height: 4.6rem;
    }
}

/*Home*/
.homeloans-page .c-section-block h1 {
    color: var(--primary-two);
}

.homeloans-rates-home {
    padding-top: 2rem;
    background-color: var(--tertiary-three);
}

.homeloans-rates-home-para {
        font-size: 15px
}

.homeloans-calculator-home {
    padding-top: 2rem;
    background-color: var(--tertiary-three);
}

.homeloans-page .homeloans-features-home h3 {
    font-size: 1.8rem;
}

.homeloans-eligibility-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: space-between;
}

    .homeloans-eligibility-list .c-check-list {
        width: 100%;
    }

.home-loans-faqs-home .more-questions,
.hl-revolving__faqs .more-questions {
    margin-bottom: 100px;
    margin-top: 35px;
    text-align: center;
    font-size: 1.6rem;
}

    .home-loans-faqs-home .more-questions a,
    .hl-revolving__faqs .more-questions a {
        text-decoration: underline;
        color: var(--primary-two);
    }

.homeloans-eligibility-para-small {
    font-size: 1.4rem;
    padding-bottom: 4rem;
}

.homeloans-affordability-page__text {
    margin-bottom: 6rem;
}

.homeloans-affordability-page__text--small {
    font-size: 1.4rem;
    max-width: 965px;
}

    .homeloans-affordability-page__text--small .disclaimer {
        margin-top: 3rem;
        padding-top: 3rem;
        border-top: 1px solid var(--primary-one);
    }

.homeloans-calculators__section--grey {
    background-color: var(--tertiary-three);
}

.homeloans-calculators__section {
    max-width: var(--max-container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.homeloans-calculators__header {
    text-align: center;
    font-family: var(--lora);
}

.homeloans-calculators__list {
    list-style: none;
    margin: 0 auto;
    max-width: var(--max-container-width);
    padding: 0 2rem 3rem;
    width: 100%;
}

.homeloans-calculators__item {
    background-color: white;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    display: block;
    margin-bottom: 1rem;
    padding: 2rem 1.5rem 2.5rem;
    position: relative;
    text-align: center;
    width: 100%;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0px 3px 15px 0px #C1C1C1;
}

    .homeloans-calculators__item:hover {
        box-shadow: 0px 3px 20px 0px #ACACAC;
    }

.homeloans-calculators__item-image {
    align-content: center;
    justify-content: center;
    display: flex;
    height: 6rem;
    margin-bottom: 2rem;
    width: 100%;
}

.homeloans-calculators__item-title {
    color: var(--primary-two);
    font-family: var(--muli);
    font-size: 2rem;
    font-weight: 600;
}

.homeloans-refinance-page__title .c-section-title__header {
    margin-bottom: 24px;
    color: var(--primary-two);
}

.homeloans-refinance-page__title {
    max-width: 94rem;
}

.refinance__container label {
    font-weight: 700;
    white-space: nowrap;
}

.homeloans-refinance-page__para-text {
    max-width: 850px;
    margin-bottom: 16px;
    text-align: center;
}

.homeloans-affordability-page__para-text {
    max-width: 850px;
}

#affordability-calculator {
    min-height: 966px;
}

.homeloans-features-home {
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .mobile_no_padding {
        padding: 0;
    }
}

/*
    BANNER
    --------------------------------------------
*/

.hl-banner--tertiary-one {
    background-color: var(--tertiary-one);
}

.hl-banner--tertiary-five {
    background-color: var(--tertiary-five);
}

.hl-banner {
    padding: 3rem 2rem 3rem;
    max-width: var(--max-container-width);
    margin: 0 auto;
}

.hl-banner-header {
    font-size: 3.5rem;
    font-family: var(--lora);
    line-height: 4rem;
}

.hl-banner-text {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    max-width: 900px;
    margin: auto;
}

.hl-banner-featured .hl-banner__featured-title {
    font-size: 3.4rem;
    color: var(--primary-two);
    font-family: var(--lora);
    font-weight: 500;
}

.hl-banner-featured-big {
    font-size: 7rem;
    font-weight: 600;
}

.hl-banner-para__btn {
    margin-top: 2.1rem;
}

@media (min-width: 768px) {
    .hl-banner-para {
        text-align: left;
    }

    .hl-banner-featured {
        width: 42%;
        margin-right: 5px;
    }

    .hl-banner-para-feature {
        width: 57%;
    }

    .hl-banner-featured .hl-banner__featured-title {
        font-size: 5rem;
    }
}

@media (min-width: 1024px) {
    .hl-banner-featured {
        width: 44%;
    }

    .hl-banner-para-feature {
        width: 55%;
    }

    .hl-banner-header {
        font-size: 5rem;
        line-height: 5.6rem;
        margin-bottom: 1.2rem;
    }

    .hl-banner-featured-big {
        font-size: 9.5rem;
    }

    .homeloans-page .c-section-title__header--h1 {
        margin-top: 8rem;
    }

    .homeloans-features-home {
        margin-bottom: 0;
    }
}

/*FAQs*/
@media (min-width: 768px) {
    .homeloans-page .c-container.calculator {
        margin-bottom: 0;
    }

    .homeloans-page .common-questions h3 {
        width: 70%;
        max-width: 700px;
        margin: 1rem auto;
    }

    .homeloans-eligibility-list .c-check-list,
    .homeloans-eligibility-list .homeloans-eligibility-second-colum {
        width: 44%;
    }

        .homeloans-eligibility-list .homeloans-eligibility-second-colum .c-check-list {
            width: fit-content;
        }

    .homeloans-eligibility-para {
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }

    .homeloans-page .hl-fees-container,
    .homeloans-page .hl-links-container {
        max-width: 70%;
    }

    .homeloans-page .rates-title {
        max-width: 85%;
    }

    .homeloans-calculators__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 5rem;
        text-align: center;
    }

    .homeloans-calculators__item {
        padding: 3rem 2rem 2.5rem;
    }

    .hl-refinance__start {
        display: flex;
        width: 50rem;
        margin: 0 auto;
        justify-content: space-between;
        align-items: flex-start;
    }

    .hl-refinance__small {
        text-align: center;
    }
}

@media (min-width: 1024px) {
    .homeloans-page .c-container,
    .homeloans-eligibility-home .c-container, {
        margin-top: 5rem;
    }

        .homeloans-page .c-container.page {
            margin-top: 8rem;
            margin-bottom: 10rem;
        }

    .homeloans-page .homeloans-hero-rate {
        font-size: 8.3rem;
    }

    .section-block--hl-refinance,
    .section-block--hl-revolving {
        margin-top: 2rem;
    }

        .section-block--hl-refinance .c-section-block__copy {
            max-width: 50%;
        }

    .homeloans-calculators__item {
        margin-bottom: 0;
        width: 49%;
        /* Note : for more information please read this ticket #32420*/
        /*        width: 32%;
*/
    }
}

/*revolving credit*/

.section-block--hl-revolving .c-section-block__header {
    color: var(--primary-one);
}

.section-block--hl-revolving span:first-child {
    display: block;
    margin-bottom: 1.8rem;
}

.section-block--hl-revolving .c-picture__img-item {
    border-top-left-radius: 30px;
}

@media (max-width: 767px) {
    .section-block--hl-revolving .c-section-block__asset {
        display: none;
    }
}

.hl-revolving__rates {
    background-color: var(--tertiary-three);
    padding: 6rem 0 2rem;
}

.hl-revolving__eligible,
.hl-revolving__work,
.hl-revolving__how {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.hl-revolving__eligible {
    background-color: var(--tertiary-one);
}

.hl-revolving__hassle {
    padding: 6rem 2rem;
    max-width: 71rem;
    margin: 0 auto;
}

.hl-revolving__hassle-list {
    padding-left: 0;
}

.hl-revolving__hassle-list-item::marker {
    color: var(--primary-two);
}

.hl-revolving__hassle-list-item {
    margin-bottom: 2.1rem;
    margin-left: 1.8rem;
}

.hl-revolving__hassle-para {
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
}

.hl-revolving__small {
    display: block;
    line-height: 1.8rem;
    margin-top: 4rem;
}

.hl-revolving__sep {
    margin: 6rem 0;
}

.hl-revolving__start-title {
    font-size: 3.4rem;
    line-height: 4.6rem;
    font-weight: 500;
    margin-bottom: 2.1rem;
}

.hl-revolving__how,
.hl-revolving__faqs {
    background-color: var(--tertiary-three);
}

.hl-revolving__faqs {
    padding-top: 5rem;
}

    .hl-revolving__faqs .c-accordion__title[aria-expanded='true'] {
        background-color: var(--white);
    }

    .hl-revolving__faqs .more-questions {
        margin-bottom: 0;
        padding-bottom: 100px;
    }

.hl-revolving__features .c-section-block-icon__item-link {
    text-align: left;
    display: block;
}

.hl-revolving__features .c-section-block-icon__item-img {
    max-height: 4.5rem;
}

@media (max-width: 575px) {
    .hl-revolving__features.c-section-block-icon--5x .c-section-block-icon__item {
        width: 100%;
    }

    .homeloans-calculators__header {
        text-align: left;
    }
}

@media (min-width: 768px) {
    .hl-revolving__how .c-container {
        max-width: 86rem;
    }

    .hl-revolving__features .c-section-block-icon__items {
        justify-content: normal;
        max-width: inherit;
    }

    .hl-revolving__features.c-section-block-icon--5x .c-section-block-icon__item {
        width: 27%;
        margin-right: 2rem;
        margin-left: 2rem;
    }
}

@media (min-width: 1024px) {
    .hl-revolving__features .c-section-block-icon__items {
        max-width: 86rem;
    }

    .section-block--hl-revolving .c-section-block__copy {
        max-width: 42%;
    }
}

#refinance-calculator {
    min-height: 830px;
    margin: 6rem auto;
}

#repayments-calculator {
    min-height: 1252px;
}

/* Tooltips */
.hover-tipso-tooltip {
    background-color: var(--primary-one);
    border-radius: 50%;
    color: var(--white);
    cursor: help;
    display: inline-block;
    font-family: Lora;
    font-size: 18px;
    font-weight: bold;
    height: 22px;
    line-height: 18px;
    margin-left: 0.5rem;
    padding: 2px 0 0 0;
    text-align: center;
    width: 22px;
}

@media (max-width: 768px) {
    .hover-tipso-tooltip {
        font-size: 14px;
        height: 18px;
        line-height: 14px;
        padding: 1px 0 0 0;
        transform: translateY(-1px);
        width: 18px;
    }
}

.tipso_bubble {
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    padding: 0.8rem;
}
.hl_calculation {
    padding: 0 0;
    position: relative;
    margin-top: 30px;
}
#calculation_top_anchor {
    position: absolute;
    top: -150px;
}

.hl_calculation .calculation_wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}
.hl_calculation .one_calc {
    background-color: var(--tertiary-one);
    padding: 2.3rem 3rem 0;
    grid-area: 1/1/2/2;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 3rem;
    box-shadow: 0 2px 15px 2px rgba(68, 68, 68, 0.1);
    transition: all 0.4s;
    align-self: flex-start;
}

@media screen and (max-width: 768px) {
    .one_calc {
        min-height: 300px;
    }
    .one_calc form {
        display: none;
    }
    .one_calc.mobile_shown form {
        display: block;
    }
}

.hl_calculation .one_calc.mobile_shown {
    z-index: 50;
}

.hl_calculation .one_calc.mobile_shown .calc_controls {
    background-color: var(--tertiary-one);
}

.hl_calculation .calc_controls {
    background-color: var(--tertiary-five);
    box-shadow: 0 -7px 9px 0 rgba(100, 100, 100, 0.2);
    border-radius: 20px 0 0 0;
    padding: 5px 30px 6px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: -35px;
    left: 0;
    width: 50%;
    display: flex;
    font-family: var(--muli);
}

.hl_calculation .one_calc:only-child .calc_controls {
    width: 100%;
    left: 0;
}

.hl_calculation .one_calc:only-child .tab_open_button.visible {
    opacity: 0;
}

.hl_calculation .one_calc:first-child:not(:only-child) .calc_controls {
    border-top-right-radius: 20px;
    padding-right: 15px;
}

.hl_calculation .one_calc + .one_calc .calc_controls {
    left: 50%;
    padding-right: 15px;
}

.hl_calculation .tab_open_button {
    opacity: 0;
    flex: 1;
    outline: none !important;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
}
.hl_calculation .tab_open_button.visible {
    opacity: 1;
}

.hl_calculation .tab_open_button.visible + .tab_remove_button {
    font-size: 0;
    width: 3rem;
    height: 2rem;
}
.hl_calculation .tab_remove_button {
    background-image: url(../../Images/HomeLoans/close-icon.svg);
}

.hl_calculation .tab_add_button,
.hl_calculation .tab_remove_button,
.hl_calculation .split_button {
    color: var(--primary-two);
    font-family: var(--muli);
    font-size: 1.8rem;
    font-weight: 700;
    background-size: 18px;
    background-repeat: no-repeat;
    padding-right: 24px;
    outline: none !important;
    background-position: right center;
    text-decoration: underline;
    border-radius: 3px;
}

.hl_calculation .tab_add_button {
    background-image: url(../../Images/HomeLoans/compare-icon.svg);
}

.hl_calculation .calc_controls .tab_add_button {
    padding-top: 15px;
    background-position: right 20px;
}

.hl_calculation .form_label {
    color: var(--primary-one);
    font-weight: 700;
    font-family: var(--muli);
    margin-bottom: 0.8rem;
    line-height: 1;
}

.hl_calculation .form_label--split {
    color: var(--primary-two);
}

.hl_calculation .error_text {
    color: var(--tertiary-error);
    font-size: 1.3rem;
    margin-top: -2.5rem;
}

.hl_calculation .v-text-field fieldset {
    background-color: #fff;
    box-shadow: 1px 1px 6px 1px rgba(2, 0, 185, 0.12);
    border-width: 0;
    border-color: transparent;
}

.hl_calculation .v-text-field.years_field fieldset {
    box-shadow: 0 5px 7px 1px rgba(100, 100, 100, 0.2),
        0 2px 0 0 var(--primary-two);
}

.hl_calculation .v-text-field.v-input--is-dirty fieldset,
.hl_calculation .v-text-field.v-input--is-focused fieldset {
    border-width: 1px;
}

.hl_calculation .years_field .v-text-field__slot {
    justify-content: flex-end;
}

.hl_calculation .years_field [type='number'],
.hl_calculation .years_field [type='tel'],
.hl_calculation .years_field [type='text'] {
    flex: 0 0 2.4rem;
    text-align: left;
}

.hl_calculation .years_field input[type='number']::-webkit-inner-spin-button,
.hl_calculation .years_field input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hl_calculation .slider_box {
    margin-top: -4.6rem;
}

.hl_calculation .v-slider--horizontal {
    margin-left: 0.6rem;
    margin-right: 1.4rem;
    cursor: pointer;
}

.hl_calculation .v-slider--active .v-slider__thumb {
    transform: translateY(-50%) scale(1.1);
}

.hl_calculation .under_slider {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.4rem;
    color: var(--secondary-two);
    font-family: var(--muli);
    margin-top: -2.5rem;
    margin-bottom: 2rem;
    padding: 0 1.2rem;
}

.hl_calculation .v-slider:before {
    content: '';
    position: absolute;
    top: 1.4rem;
    left: -0.5rem;
    right: -1.4rem;
    height: 0.4rem;
    background-color: #c4c4c4;
    border-left: 10px solid var(--primary-two);
    border-bottom-left-radius: 3px;
    overflow: hidden;
}

.hl_calculation .v-slider .primary.lighten-3 {
    background-color: #c4c4c4 !important;
    border-color: #c4c4c4 !important;
}

.hl_calculation .v-slider .v-slider__thumb:before {
    background: white;
    transform: scale(0.45) !important;
    opacity: 1;
}

.hl_calculation .frequency_selection {
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 1px 2px 10px 1px rgba(2, 0, 185, 0.12);
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}
.hl_calculation .frequency_selection:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32%;
    z-index: 3;
    background-color: var(--primary-two);
    border-radius: 2.5rem;
    transition: all 0.2s ease-in;
    box-shadow: 0 1px 5px 4px rgba(100, 100, 100, 0.2);
}
.hl_calculation .frequency_selection.mod_1:before {
    right: 32%;
    width: 37%;
}
.hl_calculation .frequency_selection.mod_2:before {
    right: 69%;
    width: 31%;
}
.hl_calculation .fs_label {
    flex: 1 1 auto;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    margin-bottom: 0;
    cursor: pointer;
    z-index: 5;
}

.hl_calculation .fs_label input {
    position: absolute;
    left: -100vw;
}

.hl_calculation input,
.hl_calculation .v-text-field__prefix {
    font-family: var(--muli);
}

@media (min-width: 768px) {
    .hl_calculation input {
        font-size: 1.8rem;
    }
}

.homeloans-page .v-select__selection,
.homeloans-page .v-list-item__content .v-list-item__title {
    font-size: 1.6rem;
    font-family: var(--muli);
    letter-spacing: 0.5px;
}

.hl_calculation .fs_text {
    flex: 1;
    font-family: var(--muli);
    text-align: center;
    line-height: 4rem;
    transition: all 0.4s;
}

.hl_calculation .fs_label input:checked + .fs_text {
    color: white;
}

.hl_calculation .estimation_text {
    text-align: center;
    font-family: var(--muli);
    font-weight: 400;
    color: #373f41;
    font-size: 1.6rem;
    line-height: 1.87rem;
}

.hl_calculation .big_number {
    display: block;
    text-align: center;
    font-weight: 700;
    font-family: var(--muli);
    font-size: 4.5rem;
    line-height: 6.6rem;
    border-bottom: 1px solid var(--secondary-two);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    color: var(--primary-one);
}

.hl_calculation .button_box {
    text-align: center;
    padding-bottom: 1.5rem;
}

.hl_calculation .results {
    background-color: var(--tertiary-five);
    margin: 0 -3rem;
    padding: 4rem 2rem 2rem;
    position: relative;
}

.hl_calculation .results:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2rem 2rem 0 2rem;
    border-color: var(--tertiary-one) transparent transparent transparent;
    position: absolute;
    top: -1px;
    left: calc(50% - 1.5rem);
    content: '';
}

.hl_calculation .results_line {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: var(--primary-one);
}

.hl_calculation .rl_text {
    font-weight: 400;
    text-align: right;
}

.hl_calculation .rl_number {
    font-weight: 600;
}
.hl_calculation .rl_text,
.hl_calculation .rl_number {
    display: inline-block;
    flex: 0 0 50%;
    font-family: var(--muli);
    font-size: 1.6rem;
    padding: 0.2rem 1rem;
    color: var(--primary-one);
}

.hl_calculation .results_button_place {
    padding: 2rem 0 0;
    text-align: center;
}

.hl_calculation .results_button_place button {
    display: inline-block;
    color: white;
    background-color: var(--primary-three);
    font-size: 1.6rem;
    line-height: 4rem;
    font-family: var(--muli);
    font-weight: 700;
    border-radius: 20px;
    padding: 0 2.3rem;
}

.hl_calculation .split_button {
    margin: -20px auto 20px;
    display: block;
    background-image: url(../../Images/HomeLoans/split-icon.svg);
}

.hl_calculation .compare_note {
    text-align: center;
    font-family: var(--muli);
    font-size: 1.6rem;
    padding: 1.6rem 0;
    line-height: 1;
    margin: 0 -1rem;
    color: #373f41;
}

.hl_calculation .footnote {
    font-family: var(--muli);
    font-size: 1.4rem;
    padding: 0 2rem 2rem;
}

.hl_calculation .bigger {
    font-size: larger;
    font-weight: 700;
}

.hl_calc_hero .calc_hero_title {
    text-align: center;
    font-family: var(--lora);
    font-weight: 500;
    font-size: 3.4rem;
    line-height: 4rem;
    margin-bottom: 5rem;
}

.hl_calc_hero .calc_hero_subtitle {
    display: none;
    font-size: 1.6rem;
    line-height: 2.4rem;
}

.hl_calculation .v-text-field .v-input__control .v-input__slot {
    max-height: 4.4rem;
    min-height: 4.4rem;
}

.hl_calculation
    .v-select.v-text-field--outlined:not(.v-text-field--single-line)
    .v-select__selections {
    padding: 3px 0;
}

.hl_calculation .v-text-field--enclosed .v-input__append-inner {
    margin-top: 8px;
}

.hl_calculation .v-slider--horizontal .v-slider__track-container {
    height: 4px;
}

.hl_calculation .v-slider__thumb {
    height: 22px;
    width: 22px;
}

.hl_calculation .v-slider__thumb:before {
    left: -7px;
    top: -7px;
}

.hl_calculation .v-slider__thumb-label {
    transform: translateY(-20%) translateY(-12px) translateX(-35%) rotate(45deg) !important;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .hl_calculation .tab_add_button:focus,
    .hl_calculation .tab_remove_button:focus,
    .hl_calculation .split_button:focus {
        box-shadow: 0 0 0 2px rgba(2, 0, 185, 0.8);
        text-decoration: none;
        padding-left: 3px;
        padding-right: 27px;
        background-position-x: calc(100% - 3px);
    }

    .hl_calc_hero .calc_hero_title {
        margin-bottom: 3.5rem;
    }

    .hl_calc_hero .calc_hero_subtitle {
        display: block;
        margin: 0 auto 1rem;
        max-width: 72rem;
    }

    .hl_calculation .footnote {
        margin: 0 auto;
        max-width: 77rem;
        text-align: center;
    }

    .hl_calculation {
        padding: 0 3rem;
    }

    .hl_calculation .calc_controls {
        display: none;
    }

    .hl_calculation .one_calc {
        border-top-left-radius: 2rem;
        -ms-grid-column: 2;
        grid-area: 1/2/2/3;
        margin-bottom: 5rem;
    }

    .hl_calculation .calculation_wrap {
        -ms-grid-columns: auto 334px auto;
        grid-template-columns: auto 334px auto;
        transition: all 0.4s;
    }

    .hl_calculation .calculation_wrap.show_comparison {
        -ms-grid-columns: 1fr 334px 35px 334px 1fr;
        grid-template-columns: auto 334px 35px 334px auto;
    }

    .hl_calculation .calculation_wrap.show_comparison .one_calc:first-child {
        animation: 0.4s show-first-calc ease;
    }

    .hl_calculation .calculation_wrap.show_comparison .one_calc + .one_calc {
        -ms-grid-column: 4;
        grid-area: 1/4/2/5;
        animation: 0.4s show-second-calc ease;
        z-index: 0;
    }

    .hl_calculation
        .calculation_wrap.show_comparison
        .one_calc:first-child.hiding {
        animation: 0.4s hide-left-calc ease;
        opacity: 0;
    }

    .hl_calculation
        .calculation_wrap.show_comparison
        .one_calc
        + .one_calc.hiding {
        animation: 0.4s hide-right-calc ease;
        opacity: 0;
    }

    .hl_calculation .calc_removing .one_calc:first-child:not(.hiding) {
        animation: 0.4s hide-left-calc ease;
    }

    .hl_calculation .calc_removing .one_calc + .one_calc:not(.hiding) {
        animation: 0.4s hide-right-calc ease;
    }

    .hl_calculation .compare_note {
        padding: 1.6rem 0;
    }

    .hl_calculation .estimation_text {
        font-size: 1.6rem;
        line-height: 1.95rem;
    }
    .hl_calculation .estimation_text .text_part {
        margin: 0 -1.5rem;
    }
    .hl_calculation .big_number {
        font-size: 5.7rem;
    }
}

@media (min-width: 1024px) {
    .hl_calc_hero .calc_hero_title {
        font-size: 5rem;
        margin-bottom: 4rem;
    }
    .hl_calc_hero .calc_hero_subtitle {
        font-size: 1.8rem;
    }
    .hl_calculation .estimation_text {
        font-size: 2rem;
        line-height: 2.88rem;
    }
    .hl_calculation .fs_text {
        line-height: 4.8rem;
    }
    .hl_calculation .frequency_selection {
        margin-bottom: 5rem;
    }
    .hl_calculation .frequency_selection,
    .hl_calculation .fs_label {
        border-radius: 3.5rem;
    }
    .hl_calculation .v-text-field--enclosed .v-input__append-inner {
        margin-top: 12px;
    }
    .hl_calculation .v-text-field .v-input__control .v-input__slot {
        max-height: 4.8rem;
        min-height: 4.8rem;
    }

    .hl_calculation
        .v-select.v-text-field--outlined:not(.v-text-field--single-line)
        .v-select__selections {
        padding: 8px 0;
    }
    .hl_calculation .tab_add_button,
    .hl_calculation .tab_remove_button,
    .split_button {
        font-size: 1.8rem;
        background-size: 17px;
        font-weight: 700;
    }
    /* .hl_calculation .form_label {
        margin-bottom: 1rem;
    } */
    .hl_calculation .rl_text,
    .hl_calculation .rl_number {
        font-size: 1.8rem;
    }
    .hl_calculation .results_button_place button {
        font-size: 1.6rem;
        line-height: 4rem;
        padding: 0 2.4rem;
    }
    .hl_calculation .compare_note {
        font-size: 1.8rem;
    }
}

@media (min-width: 1199px) {
    .hl_calculation .calculation_wrap {
        -ms-grid-columns: 1fr 488px 1fr;
        grid-template-columns: auto 488px auto;
    }

    .hl_calculation .calculation_wrap.show_comparison {
        -ms-grid-columns: 1fr 488px 80px 488px 1fr;
        grid-template-columns: auto 488px 80px 488px auto;
    }

    .hl_calculation .one_calc {
        margin-bottom: 6rem;
        padding: 3.6rem 4.3rem 0;
    }

    .hl_calculation .results {
        margin: 0 -4.3rem;
        padding-bottom: 2.8rem;
    }

    .hl_calculation .big_number {
        font-size: 5.5rem;
        line-height: 6.6rem;
    }
}

@keyframes show-first-calc {
    from {
        transform: translateX(150px);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes show-second-calc {
    from {
        transform: translateX(-150px);
        z-index: 0;
        opacity: 0;
    }

    to {
        transform: translateX(0);
        z-index: 1;
        opacity: 1;
    }
}

@keyframes hide-left-calc {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(280px);
    }
}

@keyframes hide-right-calc {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-280px);
    }
}

.hl_calculation .amount_field_wrap.v-input--is-focused.error--text {
    color: #0200b9 !important;
    caret-color: #0200b9 !important;
}

.hl_calculation .amount_field_wrap.v-input--is-focused .v-text-field__details {
    opacity: 0;
}

.hl_calculation .v-text-field.v-text-field--enclosed .v-text-field__details {
    margin-top: 2px;
}

.mac .mac_font_fix {
    -webkit-font-smoothing: none;
}

.hl_calculation .split_inputs {
    background-color: #fff;
    margin-bottom: 4rem;
    border-radius: 4px;
    box-shadow: 1px 1px 6px 1px rgba(2, 0, 185, 0.12);
}
.hl_calculation .split_inputs .split_controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.hl_calculation .split_controls .v-input {
    flex: 0 0 50%;
}

.hl_calculation .split_controls fieldset {
    box-shadow: none;
}

.v-text-field--outlined fieldset {
    transition: none !important;
}

.hl_calculation .split_controls .v-input__slot {
    margin-bottom: 0;
}
.hl_calculation .split_controls .v-text-field__details,
.hl_calculation .one_split .v-text-field__details,
.hl_calculation .split_controls .v-messages {
    display: none;
}

/* .hl_calculation .one_split {
    margin-bottom: 4.4rem;
} */
.hl_calculation .split_controls input::-webkit-outer-spin-button,
.hl_calculation .split_controls input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hl_calculation .split_controls input[type='number'] {
    -moz-appearance: textfield;
}

.hl_calculation .split_fraction input {
    text-align: right;
}

.hl_calculation .split_controls .v-input__slider {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
    position: relative;
    z-index: 10;
}

.hl_calculation .split_controls .v-slider--horizontal {
    margin-left: 4px;
}

.split_area_separation {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    border-top-color: var(--secondary-two);
}

/* .split_area_separation + label.form_label,
.split_header + label.form_label {
    color: var(--primary-two);
} */

.hl_calculation .split_controls .v-slider::before {
    height: 5px;
    border-bottom-left-radius: 0;
    background-color: #8656ff;
}

.hl_calculation .split_controls .v-slider .primary.lighten-3 {
    background-color: #8656ff !important;
}

.hl_calculation .split_header,
.hl_calculation .split_repayments {
    font-family: var(--muli);
    color: var(--primary-two);
    font-weight: 700;
    font-size: 18px;
}

.hl_calculation .split_header + .form_label {
    margin-bottom: 0;
}

.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    transform-origin: top center;
    animation: bounce-out 0.3s;
}

.split_controls {
    position: relative;
}

.split_controls .split_button {
    position: relative;
    z-index: 5;
}

.split_controls svg {
    position: absolute;
    top: -10px;
    left: 140px;
    z-index: 1;
}

.hl_calculation__spacer-more {
    display: block;
    margin-bottom: 5rem;
}

.hl_calculation__spacer {
    display: block;
    margin-bottom: 4.4rem;
}

.hl_calculation__spacer-less {
    display: block;
    margin-bottom: 2.2rem;
}