ul.inputs-list li > label[for*='how_much_money_do_you_need'],
ul.inputs-list li > label[for*='mortgage_payment_status'],
ul.inputs-list li > label[for*='credit_score'],
ul.inputs-list li > label[for*='lease_back'],
ul.inputs-list li > label[for*='what_is_your_gross_monthly_household_income']{
  min-height: 100px;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 2rem 1rem;
  border-radius: 20px;
  background-image: linear-gradient(90deg, #25142B, #25142B)!important;
  transition: all 0.3s linear;
}

ul.inputs-list li > label[for*='how_much_money_do_you_need_']:hover,
ul.inputs-list li > label[for*='mortgage_payment_status']:hover,
ul.inputs-list li > label[for*='credit_score']:hover,
ul.inputs-list li > label[for*='lease_back']:hover,
ul.inputs-list li > label[for*='what_is_your_gross_monthly_household_income']:hover{
  background-image: linear-gradient(90deg, rgba(202,74,62,1) 0%, rgba(209,57,136,1) 100%)!important;
  transition: all 0.3s linear;
}

ul.inputs-list li > label[for*='how_much_money_do_you_need'] input::before,
ul.inputs-list li > label[for*='mortgage_payment_status'] input::before,
ul.inputs-list li > label[for*='credit_score'] input::before,
ul.inputs-list li > label[for*='lease_back'] input::before,
ul.inputs-list li > label[for*='what_is_your_gross_monthly_household_income'] input::before{
  content: '';
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 10px;
  left: 0;
}

ul.inputs-list li > label[for*='how_much_money_do_you_need'] input::after,
ul.inputs-list li > label[for*='mortgage_payment_status'] input::after,
ul.inputs-list li > label[for*='credit_score'] input::after,
ul.inputs-list li > label[for*='lease_back'] input::after,
ul.inputs-list li > label[for*='what_is_your_gross_monthly_household_income'] input::after{
  content: '';
  position: absolute;
  width: 17px;
  height: 10px;
  top: 15px;
  right: 15px;
  background: transparent;
  border: 3px solid #d13988;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-50deg);
  opacity: 0;
}

ul.inputs-list li > label[for*='how_much_money_do_you_need'] input:checked::after,
ul.inputs-list li > label[for*='mortgage_payment_status'] input:checked::after,
ul.inputs-list li > label[for*='credit_score'] input:checked::after,
ul.inputs-list li > label[for*='lease_back'] input:checked::after,
ul.inputs-list li > label[for*='what_is_your_gross_monthly_household_income'] input:checked::after{
  opacity: 1;
}

{# Hide require * and errors #}
.calc-viewport-center .form-container .hs-form-required {
  display: none;
}
.calc-viewport-center .form-container .hs-error-msgs > li {
  display: none;
}

.calc-viewport-center .form-container form input[type=submit],
.calc-viewport-center .form-container form .hs-button.primary.large {
  border: 2px solid #d13988;
  padding-top: 15px;
  padding-right: 24px;
  padding-bottom: 15px;
  padding-left: 24px;
  font-family: Inter,sans-serif;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  background: rgb(202,74,62);
  background-image: linear-gradient(90deg, rgba(202,74,62,1) 0%, rgba(209,57,136,1) 100%)!important;
  border-radius: 60px;
  color: #FFF;
  text-transform: none;
  transition: .3s;
  text-shadow: none;
  text-align: center;
}
.calc-viewport-center .form-container form input[type=submit]:hover,
.calc-viewport-center .form-container form input[type=submit]:focus,
.calc-viewport-center .form-container form input.hs-button.primary.large:hover,
.calc-viewport-center .form-container form input.hs-button.primary.large:focus {
  background: linear-gradient(90deg, rgba(202,74,62,1) 0%, rgba(209,57,136,1) 100%)!important;
  color: #FFF!important;
}
input::placeholder {
  opacity: .3;
}
.hs-form-field:not(.leadgen .hs-form-field) > label span {
  font-size: 2rem;
}
.calc-viewport-center {
  min-height: 100vh;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.curve-divider {
  width: 100%;
  background: orange;
  position: absolute;
  height: 30vh;
  bottom: 0;
  border-top-left-radius: 70vw;
  border-top-right-radius: 70vw;
}
{# input lists #}
ul.inputs-list {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
}
.step4 ul.inputs-list li>label {
  flex-grow: 1;
}
@media(max-width: 767px) {
  ul.inputs-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /*.step4 ul.inputs-list,
  .step10 ul.inputs-list {
    grid-template-columns: repeat(3, 1fr);
  }*/
  .step5 .dial-view ul.inputs-list li,
  .step6 .dial-view ul.inputs-list li {
    height: 3rem;
    width: 3rem;
  }
}
@media (min-width:768px) {
  .step4 ul.inputs-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .step5 ul.inputs-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .step7 ul.inputs-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .step8 ul.inputs-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .step10 ul.inputs-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
ul.inputs-list li {
  display: flex;
  flex-direction: column;
}
ul.inputs-list li > label {
  display: flex;
  flex-direction: column;
  background-color: #25142B;
  color: #fff;
  padding-bottom:10px;
  margin-bottom:0px;
}
ul.inputs-list li > span {
  align-self: center;
}
ul.inputs-list li > label > input[type="radio"],
ul.inputs-list li > label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 0px!important;
  width: 0px!important;
  margin-top: 0;
  margin-left: 0;
}
@media (min-width:768px) {
  ul.inputs-list li {
    flex-basis: auto;
  }
}
.card-view ul.inputs-list li {
  border: 1px solid #AAAAAA;
  border-radius: 4px;
  padding-top: 10px;
  overflow: hidden;
}
.card-view ul.inputs-list li > label {
  position: relative;
  padding-top: 90px;
  font-size: 0.9rem;
  text-align: center;
}
.card-view ul.inputs-list li > label:before {
  content: '';
  background-repeat:no-repeat;
  background-size:55px;
  width: 100%;
  height: 80px;
  background-color: white;
  background-position: center;margin-bottom:10px;
  position:absolute;top:0;left:0;
}
.card-view ul.inputs-list li > label > input[type="radio"]:after,
.card-view ul.inputs-list li > label > input[type="checkbox"]:after {
  position: absolute;
  content: "";
  width: 17px;
  height: 10px;
  top: 5px;
  right: 5px;
  background: transparent;
  border: 3px solid #d13988;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-50deg);
  opacity: 0;
}
.card-view ul.inputs-list li > label > input[type="radio"]:checked:after,
.card-view ul.inputs-list li > label > input[type="checkbox"]:checked:after {
  opacity: 1;
}
{# Map #}
#map {height:300px;width:500x;}
{# Dial view #}
.dial-view ul.inputs-list li > label {
  padding-bottom: 0;
}
.dial-view ul.inputs-list li {
  position:relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1!important;
  white-space: break-spaces;
  word-spacing: 100%;
  background: #25142B;
  color: #fff;
  border-radius: 100%;
  height: 5rem;
  width: 5rem;
  padding: 0;
}
.dial-view ul.inputs-list li input[type="radio"]:after{
  position: absolute;
  content: "";
  width: 120%;
  height: 120%;
  background: transparent;
  border: 3px solid #d13988;
  border-radius: 100%;
  -webkit-transform: none;
  top: -10%;
  left: -10%;
  color: #fff;
  padding: 5px 7px;
  font-size: .6rem;
  opacity: 0;
}

.dial-view ul.inputs-list li input[type="radio"]:checked:after {
  opacity: 1;
}
{# STEP 1 #}

span.address {
  background: #e5e3e3;
  padding: 3px;
  border-radius: 4px;
}
.step1 input[type=text] {
  margin: 15px;
}
.step1 h2 {font-size:2rem;line-height:2.3rem;}
form label {
  display: flex;
  font-size: .875rem;
  margin-bottom: 0.35rem;
  align-items: center;
  line-height: 1.1
}
.step6 form div[class*="bathrooms"] > label {
  display: block;
}
.step8 form div[class*="property_features"] > label {
  display: block;
}
form label > span:first-child {
  margin-bottom: 1rem;
}
form label ~ legend {
  margin-bottom: 1rem;
}
.form-container > p:last-child{
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.1;
}
{# Progress Stepper #}
.c_stepper-wrapper { 
  position:relative;
  max-width: 575px;
  margin: auto;
}
.c-stepper {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
@media (min-width: 768px){
  .c-stepper {
    margin-bottom: 3rem;
  }
}
.c-stepper__item {
  position: relative;
}
.c-stepper__item .c-stepper__item__icon > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@media (min-width:768px) {
  .c-stepper__item .c-stepper__item__icon > img {
    width: 2rem;
    height: 2rem;
  }
}
.c-stepper__item.c-stepper__item--complete .c-stepper__item__icon > img {
  opacity: 1;
}
.c-stepper__item__icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid #9B9B9B;
  background: #FFF;
}
.c-stepper__bar {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-bottom: 3px solid #9B9B9B;
  transform: translateY(-50%);
  z-index: 0;
}
{# tooltip #}
.tooltip {
  display:none;
}
label .tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  background:#cecece;
  border-radius:1.5rem;
  height:1.5rem;
  width:1.5rem;
  display:inline-block;
  font-size:1rem!important;
  margin-left:20px;
  vertical-align: middle;
}
.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  font-size:1rem;

  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */

  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
  z-index:111;
  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
}
.tooltip:after {
  content: "";
  position:absolute;

  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;

  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* the arrow */
  border:10px solid #000;
  border-color: transparent black transparent transparent;

  display:none;
}
.tooltip:hover:before, .tooltip:hover:after {
  display:block;
}
.addition-instruction {
  font-size: 1rem;
}