/* SIMPLE STEPS 
////////////////////////*/
.simple-steps .item {
  font-size: 1.2em;
  color: #fff;
  position:relative;
  padding: 1em 0 1em 3.2em;
}

section.simple-steps {
  padding: 3em 0;
}

.simple-steps .item .number {
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  background-color: #fff;
  text-align: center;
  line-height: 2.5;
  border-radius: 100px;
  vertical-align: middle;
  color: #7ac142;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);
}

@media(max-width:768px){
  .simple-steps .item {
    font-size: 1em;
  }
}


/* hide HS form select */
.hs_number_of_phone_calls_in_an_hour,
.hs_interactive_calculator_quote_estimate,
.hs_what_kinds_of_services_do_you_need_help_with, 
.hs_what_scheduling_system_do_you_use {
  display: none;
}


.inter-calc .custom-form{
  color:#0069AA;
  padding-left: 4em;
}


.inter-calc .custom-form form h3 .number {
  position: absolute;
  left: -2em;
  width: 1.5em;
  height: 1.5em;
  background-color: #0069AA;
  border-radius: 100%;
  text-align: center;
  line-height: 1.5;
  color: #fff;
}

.inter-calc .custom-form form h3 {
  position: relative;
}

.inter-calc .custom-form .fieldsets {
  position: relative;
  padding-bottom: 5em;
}

.inter-calc .custom-form .fieldsets:not(.fieldset-3):before {
  content: "";
  position: absolute;
  left: -2.5em;
  height: 100%;
  background-color: #0069aa;
  width: 2px;
  top: 1em;
}

.inter-calc .custom-form form label {
  text-transform: initial;
  font-size: 1.4em;
  cursor:pointer;
  font-weight: 500;
  position:relative;
}


.inter-calc .custom-form form label:before {
  content: "\f096";
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 1.1em;
  top: 5px;
}

.inter-calc .custom-form form .active label:before {
  content: "\f14a";
}

.inter-calc .custom-form form label input {
  visibility: hidden;
}



/* SLIDER STYLE 
* //////////////////*/
.inter-calc .custom-form .fieldset-1 h3 {
  margin-bottom: 1.5em;
}

.inter-calc .range {
  position: absolute;
  bottom: -2em;
  font-size: 0.9em;
  color: #AAAAAA;
}

.inter-calc .range.range-2 {
  right: 0;
}

.inter-calc .slider-input {
  position: relative;
  margin:0 !important;
}

.inter-calc .slider-output {
  position: absolute;
  top: -3.1em;
  background-color: #7AC142;
  padding: 0.25em 0.5em;
  font-size: 0.9em;
  color: #fff;
  border-radius: 0.3em;
  left: 0;
  -webkit-transform: translateX(calc(-50% - 0.5em));-ms-transform: translateX(calc(-50% - 0.5em));transform: translateX(calc(-50% - 0.5em));
  box-shadow: 0px 1px 3px rgba(170, 170, 170, .65);
}

.inter-calc .slider-output:before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  background-color: #7ac142;
  bottom: -0.5em;
  position: absolute;
  -webkit-transform: rotate(45deg) translateX(-50%);-ms-transform: rotate(45deg) translateX(-50%);transform: rotate(45deg) translateX(-50%);
  left: 50%;
}

.inter-calc .slider {
  width: 100%;
}

.inter-calc .slider-result {
  max-width: 8em;
  margin-left: 4em;
  text-align:center;
}

.inter-calc .slider-result span {
  /*padding: 0.75em 1em;
  background-color: #0069aa;
  color: #fff;
  border-radius: 0.4em;
  font-size: 1.2em;
  display: block;
  */
  display: none;
}

.inter-calc .slider-result #pc-input {
  padding: 0.75em 1em;
  margin: 0;
  background-color: #0069aa;
  color: #fff;
  border: none;
  border-radius: 0.4em;
  font-size: 1.2em;
  display: block;
  -webkit-appearance: none;
}

/* Chrome, Safari, Edge, Opera */
#pc-input::-webkit-outer-spin-button,
#pc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#pc-input {
  -moz-appearance: textfield;
}

.inter-calc .custom-form .error {
  font-style: italic;
  color: red;
  font-size: 0.9em;
  margin-bottom: 1em;
}

.inter-calc .custom-form .button{
  background-color:#7AC142;
  border-radius: 0.3em;
}

/* FORM AREA
* ///////////////*/

.final-results .form-area-1 {
  padding: 4em;
  border-radius: 1em 1em 0 0;
  margin-top: 5em;
}

/* final print estimate  */
.final-results .form-area-1 .estimator-title {
  color: #7ac142;
}

.final-results .form-area-1 .estimator-total {
  max-width: 317px;
  width: 100%;
  margin-left: 5em;
  padding: 2em 1em;
  background-color: #7ac142;
  color: #fff;
  border-radius: 0.5em;
  line-height: 1.3;
}

.final-results .form-area-1 .estimator-total span {
  display: block;
  font-size: 3.4em;
  font-weight: 700;
}

.final-results .form-area-1 .estimator-total #estimator-schedule {
  display: none;
  margin-top: 10px;
  font-size: 14px;
}

/* cost per year   */
.final-results .form-area-1 .cost-per-year {
  margin-bottom: 5em;
  margin-top: 5em;
}

.final-results .form-area-1 .cost-per-year-item {
  border-top: solid 5px #7AC142;
  padding-top: 1em;
  color: #0069aa;
}

.final-results .form-area-1 .cost-per-year-item h3 {
  font-size: 1.3em;
}

.final-results .form-area-1 .cost-per-year-item > div {
  font-weight: bold;
  font-size: 1.5em;
}

.final-results .form-area-1 .cost-per-year-item > div > span {
  font-weight: 400;
  font-size: 0.6em;
}


.final-results .form-area-1 .brand-logos > div {
  margin: 0.5em 2em;
}



/* Form style  */
.final-results .form-area-1 .form-wrap {
  max-width: 700px;
  margin: auto;
  width: 100%;
}

.final-results .form-area-1 input[type="email"], 
.final-results .form-area-1 input[type="text"] {
  margin-right: 0;
  max-width: none;
  width:100%;
  background-color: transparent;
  border: 0;
  border-bottom: solid 1px #7AC142;
  box-shadow: none;
}

.final-results .form-area-1 input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#0069AA;
  opacity: 1; /* Firefox */
}

.final-results .form-area-1 input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#0069AA;
}

.final-results .form-area-1 input::-ms-input-placeholder { /* Microsoft Edge */
  color:#0069AA;
}

.final-results .form-area-1 .hs_submit {
  padding-top: 0.5em;
}

.final-results .form-area-1 form .actions {
  text-align: center;
}

.final-results .form-area-1 input.hs-button.primary.large {
  background-color: #7AC142;
  border-radius: 0.4em;
  margin: auto;
}

.final-results .form-area-1 .quiz-retake-trigger{
  font-weight: 600;
  margin-top: 2em;
  display: block;
  text-decoration: underline;
}



/* FORM AREA 2 
* //////////////////////*/
.form-area-2 {
  border-radius: 0 0 0.4em 0.4em;
}

.form-area-2 .form-wrap {
  max-width: 500px;
  margin: auto;
  width: 100%;
  padding: 2em;
}

.form-area-2 .form-title-small {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 1em;
}

.form-area-2 form {
  display: -webkit-box;display: -ms-flexbox;display: flex;
}

.form-area-2 input[type="email"] {
  margin-bottom: 0;
  border: 0;
  width: 100%;
  padding: 1em;
  border-radius: 0.4em 0 0 0.4em;
  height: initial;
}

.form-area-2 input[type="email"]:focus{
  border: 0 !important;
}

.form-area-2 .hs-form-field,
.form-area-2 input[type="submit"],
.form-area-2 label {
  margin: 0 !important;
  border: 0 !important;
}

.form-area-2 .hs-form-field {
  width: calc(100%);
}

.form-area-2 .hs_submit {
  padding-top: 0 !important;
  border: solid 3px #fff;
  background-color: #7ac142;
  border-radius: 0 0.4em 0.4em 0;
  position: relative;
  left: -1px;
}

.form-area-2 input[type="submit"] {
  padding: 0.6em 1em !important;
  background-color: #7ac142 !important;
  border-radius: 0.2em !important;
  line-height: 1.9;
}

.form-area-2 .hs-form .hs-form-field ul.inputs-list {
  position: absolute;
}

@media(max-width:768px){
  .inter-calc .custom-form {
    padding-left: 3em;
  }

  .inter-calc .custom-form .fieldsets h3 {
    font-size: 1.3em;
  }

  .inter-calc .custom-form .fieldset-1 h3{
    margin-bottom: 3em;
  }

  .inter-calc .custom-form form label {
    font-size: 1.1em;
  }

  .inter-calc .custom-form .fieldsets:not(.fieldset-3):before {
    left: -1.7em;
  }

  .inter-calc .custom-form .fieldset-3 {
    padding-bottom: 1.5em;
  }

  .final-results .form-area-1 {
    padding: 2em;
  }

  .inter-calc .calc-estimator .flex-item{
    -webkit-box-flex: 1;-ms-flex: auto;flex: auto;
    margin-left: auto;
    margin-right: auto;    
    text-align: center;
  }

  .final-results .form-area-1 .estimator-total {
    padding: 1em;
  }

  .final-results .form-area-1 .estimator-total span {
    font-size: 2em;
  }

  .final-results .form-area-1 .cost-per-year-item:not(:last-of-type) {
    margin-bottom: 3em;
  }
}

@media(max-width:480px){
  .final-results .form-area-1 {
    padding: 2em 1em;
  }

  .inter-calc .slider-result {
    margin: auto;
    margin-top: 3em;
  }

  .inter-calc .custom-form .fieldset-1 .flex-item {
    -webkit-box-flex: 1;-ms-flex: auto;flex: auto;
  }

  .inter-calc .calc-estimator .flex-item {
    font-size: 1.3em;
  }

  .final-results .form-area-1 .brand-logos > div {
    max-width: 6em;
    width: 100%;
    margin: 1em;
  }

  .final-results .form-area-1 .cost-per-year-item {
    font-size: 0.9em;
  }

}


span.range-progress {
  height: .7em;
  background-color: #7ac142;
  left: 0;
  position: absolute;
  z-index: -1;
  bottom: .5em;
  border-radius: 0.4em;
}

.range-progress.range-progress_track {
  width: 100%;
  background-color: #E6E6E6;
  z-index: -2;
}

input#phone-calls {
  margin: 0;
}

/* RANGE SLIDER STYLE 
* /////////////////////*/
/**/
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
  background-color: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  background: transparent; /*update track */
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 2px #8a8a8a;
  height: 2em;
  width: 2em;
  border-radius: 100px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1.45em;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent; /*update track */
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent; /*update track */
  border-radius: 1.3px;
}
input[type=range]::-moz-range-thumb {
  box-shadow:0px 0px 2px #8a8a8a;
  height: 2em;
  width: 2em;
  border-radius: 100px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #3071a9; /*update track */
  border-radius: 2.6px;
  box-shadow: 0px 0px 2px #8a8a8a;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9; /*update track */;
  border-radius: 2.6px;
  box-shadow: 0px 0px 2px #8a8a8a;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 2px #8a8a8a;
  height: 2em;
  width: 2em;
  border-radius: 100px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}



@media all and (-ms-high-contrast:none){
  .inter-calc .slider-result,
  .range-progress, 
  .inter-calc .slider-output {
    display: none;
  }

  .inter-calc .range{
    bottom:0;
  }

  .form-area-2 input[type="email"]{
    height:3.5em;
  }

}

.inter-calc .form-area-1 .submitted-message {
  margin-top: 2em;
}

.inter-calc .submitted-message {
  text-align: center;
}

.form-area-2 .submitted-message {
  color: #fff;
}