{#
    Some calculator-module-specific CSS vars to allow for uber-quick color changes. You can plugin in theme
    vars but from site to site they likely won't match up perfectly. Easier to just modify things here in one spot.

    The slider background color (when you move it), and the button use the primary theme color.
    var(--primary)
#}

:root {
    --app-background: var(--primary); /* Horiz background of module */
    --app-calc-background: #FFF; /* Calc el background  */
    --app-borders: #E4DED7; /* Calc borders  */
    --app-border-radius: 10px;
    --app-highlight: var(--tertiary); /* Background of el where $ calculation displays. Has white text by default */
}

.loan-calculator-module {
    position: relative;
}

.loan-calculator-module input::placeholder {
    font-size: 1rem;
    color: var(--header) !important;
}

.loan-calculator-module a {
    color: #FFF;
    font-weight: bold;
    text-decoration: underline;
}

.loan-calculator-module a:hover{
    color: #FFF;
}

#loan-calculator {
    position: relative;
    border-radius: var(--app-border-radius);
    background-color: var(--primary);
}

#loan-calculator .calculator-module {
    position: relative;
    z-index: 1;
}
#loan-calculator strong {
    color: #fff !important;
}

.v-application--wrap {
    min-height: auto !important;
}

.wrap-content-calculator {
    position: relative;
    z-index: 1;
}

.wrap-content-calculator .desktop-only {
    display: none;
}

.txt-white {
    color: var(--white) !important;
}

.wrap-content-calculator .content-left h6 {
    text-transform: uppercase;
    margin-bottom: 32px;
}

.wrap-content-calculator .content-right .body-1 {
    /* margin-bottom: 40px; */
}

.wrap-content-calculator .content-right {
    background: var(--app-calc-background);
    border-radius: var(--app-border-radius);
    box-shadow: 15px 25px 60px rgba(0, 0, 0, 0.1);
    padding: 20px 12px 30px;
}

/*
    #inspire
*/
#inspire {
    width: 100%;
    background-color: transparent;
}

#inspire .v-application--wrap {
    margin-left: 12px;
    margin-right: 12px;
    padding: 0;
}

#inspire .v-subheader {
    height: auto;
    padding: 0 !important;
    position: relative;
    margin-bottom: .5rem;
}

#inspire .v-subheader span.info {
    background-color: transparent!important;
    border: none !important;
    cursor: pointer;
    display: block;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    margin-right: 5px;
}

#inspire .v-subheader span.info i {
    vertical-align: top;
    color: #323232;
}

#inspire .v-subheader div.info-content {
    background: #ccc;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
    border-radius: var(--app-border-radius);
    display: none;
    font-size: 12px !important;
    line-height: 18px !important;
    max-width: 270px;
    padding: 12px;
    position: absolute;
    left: 0;
    right: auto;
    text-align: center;
    top: 32px;
    z-index: 3;
}

#inspire .v-subheader.active div.info-content {
    display: block;
}

#inspire .v-subheader div.info-content::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    left: 97px;
    position: absolute;
    top: -7px;
    right: auto;
}

#inspire .v-subheader label {
    margin-bottom: 0 !important;
}

.wrap-form {
    padding-top: 36px;
}

.wrap-form #inspire .container {
    padding-left: 15px;
    padding-right: 15px;
}

.wrap-form #inspire .row .col {
    padding: 0 15px 30px;
}

.wrap-form #inspire .row .col > label {
    text-transform: capitalize;
}

#inspire .v-card__text {
    padding-top: 10px;
}

/*
    Switch elements
*/

.loan-calculator-module .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 14px
}

.loan-calculator-module .switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.loan-calculator-module .slider {
    position: absolute !important;
    cursor: pointer;
    top: 2px;
    left: 4px;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.loan-calculator-module .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: -1px !important;
    top: -3px !important;
    bottom: -4px;
    -webkit-transition: .4s;
    transition: .4s
}
.loan-calculator-module .slider:after {
    opacity: 0!important;
}
.loan-calculator-module input:checked+.slider {

}

.loan-calculator-module input:focus+.slider {

}

.loan-calculator-module input:checked+.slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px)
}

.loan-calculator-module .slider.round {
    border-radius: 34px
}

.loan-calculator-module .slider.round:before {
    border-radius: 50%
}

.loan-calculator-module #switch-gcu {
    margin-top: 5px
}

.loan-calculator-module .switch span.label-name {
    bottom: -6px;
    cursor: pointer;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .1px;
    left: -85px;
    position: absolute
}

.loan-calculator-module .switch span.label-name strong {
    font-weight: normal;
    font-style: normal
}

.loan-calculator-module #switch-calculator {
    margin-top: -2px;
    margin-left: 7rem;
    margin-right: 7px
}

.loan-calculator-module #switch-calculator .slider {
    border: 1px solid #AFAFAF;
}

.loan-calculator-module #switch-calculator .slider::before {
    background-color: #FFA123;
}

.loan-calculator-module #switch-calculator span.label-name {
    color: #1C3646;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .1px;
    position: absolute;
    left: -52px;
    bottom: -6px;
    cursor: pointer
}

.loan-calculator-module .v-subheader span.month-calculator {
    color: #1C3646;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .1px;
    margin-top: -2px
}

.vuetify-namespace-selector .v-slider__thumb {
    width: 21px;
    height: 21px;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vuetify-namespace-selector .v-slider__thumb:before {
    left: -8px;
    top: -8px;
    background: #FFA123 !important;
}

#inspire .v-card__text .v-slider__tick-label {
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.25px;
}

#inspire.v-application .d-flex {
    background: #F3F5F9;
    border-radius: var(--app-border-radius);
}

#inspire .v-application .primary.lighten-3 {
    background-color: #333 !important;
    border-color: #333 !important;
}

.vuetify-namespace-selector .v-slider--horizontal .v-slider__track-container {
    height: 10px;
}

#inspire .theme--light.v-slider .v-slider__track-background {
    background-color: #3B5565 !important;
    border-color: #3B5565 !important;
    border-radius: 6px;
}

#inspire .theme--light.v-slider .v-slider__thumb {
    background-color: #FFA123 !important;
    background-image: none;
    border-color: #FFA123 !important;
}

#inspire .v-application .primary {
    background-color: #ccc !important;
    background-image: none;
    border-color: #ccc  !important;
}

#inspire .v-slider--horizontal .v-slider__track-fill {
    background-color: var(--primary) !important;
    background-image: none;
    border-color: var(--primary) !important;
    border-radius: 6px;
}

#inspire .v-slider__ticks-container--always-show .v-slider__tick {
    height: 0 !important;
    width: 0 !important;
}

.vuetify-namespace-selector .v-slider--horizontal .v-slider__ticks-container {
    top: 30px;
}

.v-application--is-ltr .v-text-field__prefix {
    position: absolute;
}

#number-large {
    background: var(--app-highlight);
    box-sizing: border-box;
    display: block;
    border-radius: var(--app-border-radius);
    margin-left: 12px;
    margin-right: 12px;
    padding: 24px;
    width: 100%;
}

#number-large h2 {
    color: #1C3646 !important;
    margin-bottom: 0 !important;
    font-weight: 700;
}


/* Style form */
#loan-calculator form label {
    font-family: "Open Sans", sans-serif!important;
    color: #1C3646 !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin-bottom: 8px;
}

#loan-calculator form input[type="text"],
#loan-calculator form input[type="email"] {
    background-color: #F3F5F9;
    border-radius: var(--app-border-radius) !important;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.25px;
    min-height: 56px;
    color: #000000;
    border: none;
}

#loan-calculator form input[type="text"]:focus,
#loan-calculator form input[type="email"]:focus {
    box-shadow: 0 0 0 !important;
}

#loan-calculator form input[type="email"]::-webkit-input-placeholder,
#loan-calculator form input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ccc;
    opacity: 1;
    text-transform: capitalize;
}
#loan-calculator form input[type="email"]::-moz-placeholder,
#loan-calculator form input[type="text"]::-moz-placeholder { /* Firefox 19+ */
    color: #ccc;
    opacity: 1;
    text-transform: capitalize;
}
#loan-calculator form input[type="email"]:-ms-input-placeholder,
#loan-calculator form input[type="text"]:-ms-input-placeholder { /* IE 10+ */
    color: #ccc;
    opacity: 1;
    text-transform: capitalize;
}
#loan-calculator form input[type="email"]:-moz-placeholder,
#loan-calculator form input[type="text"]:-moz-placeholder { /* Firefox 18- */
    color: #ccc;
    opacity: 1;
    text-transform: capitalize;
}

#loan-calculator form fieldset {
    border-color: #EDEBE1;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    padding-left: 0px;
    padding-right: 0px;
    flex-wrap: wrap;
    gap: 0;
}

#loan-calculator form fieldset .action-form label {
    min-height: 24px;
    display: block;
}

#loan-calculator form fieldset .action-form.btn-wrapper {
    display: flex;
    justify-content: center;
}

#loan-calculator form fieldset .action-form input[type="submit"] {
    {#
    THIS WILL INHERIT THEME PRIMARY BUTTON STYLES
    background-color: var(--black);
    background-repeat: no-repeat;
    background-position: 96% center;
    border: 1px solid var(--black);
    {# border-radius: 60px; #}
    color: var(--white);
    display: block;
    font-weight: 600;
    min-height: 56px;
    padding: 6px 20px;
    text-transform: uppercase;
    text-align: center;
    width: 100%; #}
}

#loan-calculator form fieldset .action-form input[type="submit"]:focus,
#loan-calculator form fieldset .action-form input[type="submit"]:hover {
    {# box-shadow: 0 0 0 !important; #}
}

#loan-calculator form section {
    width: 100%;
}


.theme--light.v-card {
    width: 100%;
}

.theme--light.v-select .v-select__selection--comma {
    position: absolute;
    z-index: 9;
    left: 16px;
}

.menuable__content__active .theme--light.v-select .v-select__selection--comma  {
    z-index: 0;
}

.v-menu__content.theme--light.menuable__content__active {
    z-index: 100 !important;
}

.v-select__slot input[type="text"] {
    border: 0 !important;
}

.v-messages__message {
    display: none;
}

#mortgage .v-card__text {
    padding-bottom: 0;
}

.loan-calculator-module .item-wrapper .row {
    border-top: solid 1px #3F99C2;
}

.loan-calculator-module .item-wrapper .item-wrapper-item {
    padding: 1rem 0;
}

.loan-calculator-module .item-wrapper .item-wrapper-item strong {
    font-size: 26px;
    font-weight: 600;
    font-family: 'League Spartan', sans-serif;
}

.loan-calculator-module .item-wrapper .item-wrapper-item p:last-of-type {
    margin-bottom: 0;
}


.cont-cta .cta_button {
    min-width: 202px;
    border-radius: 100px;
    position: relative;
    text-transform: capitalize;
}

.cont-cta .cta_button svg {
    position: absolute;
    right: 1rem;
}

@media (min-width: 768px) {
    #loan-calculator {
        padding: 3rem;
    }
    .mobile-only  {
        display: none;
    }

    .loan-calculator-module {
        margin-top: 74px;
        margin-bottom: 74px;
    }

    .wrap-content-calculator {
        box-shadow: 0 0 0;
        /* padding-left: 4%; */
        display: flex;
    }

    .wrap-content-calculator .content-right {
        padding-top: 2rem;
    }

    .wrap-content-calculator .content-left {
        padding-right: 5rem !important;
        padding-left: 3rem;
    }

    .loan-calculator-module .item-wrapper .item-wrapper-item {
        /* padding: 1rem 0; */
    }
    .wrap-content-calculator .content-left .wrap-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

}

@media (max-width: 991px) {

    #loan-calculator form fieldset .row {
        flex-flow: column;
        -moz-flex-flow: column;
        -webkit-flex-flow: column;
    }

}

@media (min-width: 992px) {

    #number-large h2 {
        font-size: 60px !important;
        line-height: 68px !important;
    }

    #number-large h2 span {
        font-size: 34px !important;
        line-height: 41.25px !important;
        letter-spacing: 0.25px !important;
    }

    .wrap-content-calculator .content-right {
        height: fit-content;
    }

    .wrap-content-calculator .content-left {
    }

    .loan-calculator-module .item-wrapper .item-wrapper-item {
        padding: 2rem 0;
    }

    .cont-cta {
        margin-bottom: -3.7rem;
    }
    .wrap-content-calculator .v-alert {
        margin-top: 3.7rem;
    }

}

@media (min-width: 1200px) {

    .wrap-content-calculator .content-left {
    }
}


@media (max-width: 767px) {

    .vuetify-namespace-selector {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    #loan-calculator .row {
        flex-flow: column;
        -moz-flex-flow: column;
        -webkit-flex-flow: column;
    }

    #loan-calculator fieldset div {
        width: unset!important;
    }

    #loan-calculator .mobile-only.col {
        display: none !important;
    }

    /* Style calculator mobile */
    .wrap-content-calculator {
        display: flex;
        flex-flow: column;
        -moz-flex-flow: column;
        -webkit-flex-flow: column;
        padding: 2rem;
    }

    .wrap-content-calculator .content-right {
    }

    .wrap-content-calculator .content-left {
    }

    .wrap-content-calculator .content-right .wrap-body {
    }

    #inspire .v-card__text .v-slider__tick-label {
        font-size: 9px !important;
    }
    #number-large {
        padding: 16px !important;
    }

    #number-large h2 span {
        font-size: 20px !important;
        line-height: 25px !important;
        letter-spacing: 0.25px !important;
    }

}

@media (min-width: 481px) and (max-width: 767px) {

    #number-large {
        width: 96% !important;
    }

}

@media (max-width: 480px) {

    #number-large {
        width: 93% !important;
    }

    #inspire .v-subheader .inspire-label,
    .loan-calculator-module #switch-calculator span.label-name,
    .loan-calculator-module .v-subheader span.month-calculator {
        font-size: 12px;
    }

}

#loan-calculator .preheading {
    color: var(--tertiary);
    margin-bottom: 10px;
    font-weight: 700;
}

#loan-calculator .wrap-body ul li {
    position: relative;
    list-style: none;
    margin-bottom: 2rem;
    margin-left: 10px;
}

#loan-calculator .wrap-body ul li:last-of-type {
    margin-bottom: 0;
}

#loan-calculator .wrap-body ul li:before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.4327 0.0679864C11.1234 0.468067 7.12895 2.49536 4.26198 5.73878C1.39659 8.98212 -0.124707 13.1965 0.00807565 17.5212C0.14249 21.848 1.91994 25.9594 4.97974 29.0207C8.04123 32.0806 12.1528 33.8579 16.4792 33.9923C20.8044 34.1252 25.0186 32.6039 28.2616 29.7384C31.505 26.8715 33.5325 22.8771 33.9324 18.5677C34.3816 13.5373 32.5772 8.56568 29.0065 4.9935C25.4343 1.42282 20.4627 -0.38137 15.4323 0.0675814L15.4327 0.0679864ZM26.1323 13.1807L16.0558 23.1511C15.428 23.7631 14.4254 23.7631 13.7976 23.1511L7.858 17.4787C7.21279 16.8588 7.19069 15.8325 7.81214 15.1857C8.43201 14.5405 9.45833 14.5184 10.1051 15.1399L14.8982 19.7383L23.8692 10.8763C24.5096 10.2753 25.5122 10.2927 26.1305 10.919C26.7472 11.5436 26.7536 12.5477 26.1447 13.1803L26.1323 13.1807Z' fill='%23FFCB18'/%3E%3C/svg%3E");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: left;
    position: absolute;
    left: -45px;

}
.vuetify-namespace-selector hr{
  width:100%;
  border-color:white;
}