{% set primaryColor = '#f86f4d' %};
{% set lightblue = 'rgb(173, 216, 230, 0.4)' %};
{% set fontColor = '#334961' %};
 
.hs_cos_wrapper_type_form{ 
  border: 1px solid red; 
}

@font-face {
  font-family: Avenir;
  src: url('https://cdn2.hubspot.net/hubfs/383733/Calculator/Font/AvenirLTStd-Medium.otf');
}

@font-face {
  font-family: Avenirbold;
  font-weight: bold;
  src: url('https://cdn2.hubspot.net/hubfs/383733/Calculator/Font/AvenirLTStd-Black.otf');
}


.tc {
  text-align: center;
}

/*======================================*/
/*vvvvvvvvvvvv Main Header vvvvvvvvvvvv*/

#main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#header-image img{
  width: 200px;
}

#header-title h1 {
  color: #334961;
  font-size: 28px;
  text-align: center;
  font-family: Avenirbold;
}

#header-title p { 
  color: #334961;
  font-size: 12px;
  text-align: center;
  font-family: Avenir, sans-serif;
}

#header-divider {
  border-bottom: 3px solid #f86f4d;
  width: 50px;
  margin-top: 30px;
}

/*^^^^^^^^^^^^ Main Header ^^^^^^^^^^^^*/
/*======================================*/


.calculadora-wrapper {
  box-shadow: 0 0 15px rgb(173, 216, 230);
  padding: 50px 1em;
  margin: 50px 0;
  font-family: Avenir, sans-serif;
  background-color: white;
}


/*======================================*/
/*vvvvvvvvvvvv Progress Bar vvvvvvvvvvvv*/



ul.progress-bar {
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px; 
}

.bullet {
  list-style-type: none;
  float: left;
  width: 16.6666%;
  text-align: center;
  position: relative;
  margin-bottom: 60px;
}
 

.bullet i{
  text-align: center;
  border: 1px solid #f86f4d;   
  height: 35px;
  width: 35px;
  line-height: 35px;
  border-radius: 50%;
  color: white;
}

.bullet.completed i {
  background-color: #f86f4d;
  color: white;
}

.bullet.active i {
  border: 1px dashed #f86f4d;
}

.bullet.completed::after { 
  content: '';
  position: absolute;
  background-color: #f86f4d;
  height: 7px;
  width: calc(100% - 35px);
  top: calc(50% - 3.5px);
  left: calc(-50% + 17.5px);
}

.bullet.completed:first-child::after {content: none;}
/*^^^^^^^^^^^^ Progress Bar ^^^^^^^^^^^^*/
/*======================================*/



/*======================================*/
/*vvvvvvvvvvvv FORM vvvvvvvvvvvv*/

    

  #hs_cos_wrapper_module_158593305524266 /* FORM DIV */ {
    box-shadow: 0 0 15px rgb(173, 216, 230); 
    padding: 50px 1em;
    margin: 50px 0;
  }
  
  .myform {
    max-width: 500px;
    margin: 0 auto;
  }

.myform-title {
  color: #f86f4d;
  font-size: 16px;
  margin: 13px auto 50px auto;
  text-align: center;
}

 

.form-columns-2 .hs-form-field:first-child { 

}

.form-columns-2 .hs-form-field:last-child { 

} 

  h3.form-title {
    font-size: 13px;
    color: #f86f4d;
    font-family: Avenir, sans-serif;
    margin: 0px auto 50px auto; 
    text-align: center;
  }
  
  fieldset.form-columns-0,
  fieldset.form-columns-1,
  fieldset.form-columns-2 {
    margin-right: auto!important;
    margin-left: auto!important; 
  }
  
  .hs-form-required {
    display: none;
  }
  
  .hs-form-field {
    margin-bottom: 50px!important;
  }
  
  .hs-form label {
    font-family: Avenir, sans-serif;
    font-size: 13px;
    color: #334961;
  }
  
  .hs-form input {
    width: 100%!important;
    border: none;
    border-bottom: 1px solid rgb(173, 216, 230, 0.4);
    margin-top: 10px;
    padding-left: 5px; 
    outline: none!important;
    line-height: 22px; 
    font-size: 20px;
    color: #334961;
  }

.input input.invalid {
  border-bottom: 1px solid red; 
}
   
  .hs-input.invalid.error {
    border-bottom: 1px solid red;
  }
  
  div.submit-actions {
    margin: 30px auto 0 auto; 
    text-align: center;
  }
  
  .hs-main-font-element { 
    font-family: Avenir, sans-serif;
    margin: 10px 0!important;
    text-align: center;
    font-style: italic;
    margin-bottom: 20px; 
    color: #334961!important; 
    opacity: 0.8; 
    line-height: 12px; 
    font-size: 12px;
  }
  
.actions {
  text-align: center; 
}

.actions input[type="submit"],
  #getstartedbtn{
    background-color: #f86f4d;
    border: 1px solid #f86f4d;
    color: white;
    padding: 2px 15px 0 15px;
    font-size: 13px;
    transition: 0.25s;
    width: auto!important;
  }

.actions input[type="submit"]:hover,
  #getstartedbtn:enabled:hover{
    cursor: pointer;
    color: #f86f4d;
    border: 1px solid #f86f4d;
    background-color: white;
  }

#getstartedbtn:disabled{
  opacity: 0.5;
}

#getstartedbtn:disabled:hover{
  cursor: not-allowed;
}
  
  .hs-error-msg {
    font-size: 10px!important;
    color: red!important;
  }
  
  .hs-error-msgs {
    list-style-type: none; 
    margin: 10px 0 0 0;
    padding: 0;
  }


div.submitted-message {
  display: none!important;
}

/*#hidden-form .hs-button{
  display:none!important;
}*/

/*^^^^^^^^^^^^ FORM ^^^^^^^^^^^^*/
/*======================================*/



/*======================================*/
/*vvvvvvvvvvvv INPUTS vvvvvvvvvvvv*/

.each-input-wrapper {
  width: 100%;
  margin-bottom: 40px;
}

.each-input {
  width: 90%;
  margin: 0 auto;
}

.input-title {
  color: #334961;
  margin-left: 5%;
  font-size: 14px;
  padding-right: 5%; 
}

.input-title a {
  text-decoration: none;
  color: #f86f4d; 
}

.input-title2 {
  color: #f86f4d;
  margin-left: 5%;
  font-size: 15px;
}

.each-input label {
  color: #334961;
  font-size: 14px;
}

input[type='range'] {
  width: 100%;
  -webkit-appearance: none;
  height: 7px;
  border-radius: 7px;
  background-image: linear-gradient(to right, rgb(173, 216, 230, 0.5),rgb(173, 216, 230, 0.2));  
  outline: none!important;
}
 
.each-input input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background-color: #f86f4d;
  border-radius: 50%;
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background-color: #f86f4d;
  border-radius: 50%;
  cursor: pointer;
}

.range-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: 0.7em;
  color: #f86f4d;
}

.each-input.radio {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap; 
}

.each-input.radio2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; 
}

.radio-label {
  border: 1px solid #334961;
  color: #334961;
  background-color: rgb(173, 216, 230, 0.4);
  padding: 4px 30px;
  font-size: 12px!important; 
  margin: 5px; 
}

.radio-label:hover {
  background-color: #334961;
  opacity: 0.9;/*rgb(51, 73, 97, 0.9)*/
  color: white;
  cursor: pointer;
}  

.each-input input[type='radio']:checked + label {
  background-color: #334961;
  opacity: 0.9;
  color: white;
}


.each-input input[type='radio']{
  opacity: 0;
  width: 0px !important;
  position: absolute;
}

input.other-input {
  border: none;
  border-bottom: 1px solid rgb(173, 216, 230, 0.4);
  height: 19px;
  line-height: 16px;
  padding: 0px 5px;
  color: #334961;
  outline: none!important;
  max-width: 150px;
  margin-left: 10px;
  margin-top: 10px;
}

/*^^^^^^^^^^^^ INPUTS ^^^^^^^^^^^^*/
/*======================================*/

#nav-btns {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#backBtn,
#nextBtn {
  display: block;
  font-family: Avenir, sans-serif; 
  color: white;
  background-color: #f86f4d;
  padding: 5px 30px;
  border: 1px solid #f86f4d;
  outline: none!imporant;
  transition: 0.25s;
  font-size: 12px;
  line-height: 12px;
  margin: 0 auto!important;
}


#backBtn:enabled:hover,
#nextBtn:enabled:hover {
  cursor: pointer;
  background-color: transparent;
  color: #f86f4d;
}
 
#backBtn:focus,
#nextBtn:focus {
  outline: none!important;
}

#backBtn:disabled,
#nextBtn:disabled {
  opacity: 0.5;
  transition: 0.4s;
}

#backBtn:disabled:hover,
#nextBtn:disabled:hover {
  cursor: not-allowed;
}


/*======================================*/
/*vvvvvvvvvvvv RESULTS vvvvvvvvvvvv*/

.each-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.each-result-wrapper {
  border-bottom: 1px solid rgb(173, 216, 230, 0.4);
  padding: 5px 5px 7px 5px;
  width: 90%;
  margin: 30px auto 0px auto; 
  display: flex;
  flex-direction: column;
}

#results-conclusion {
  padding: 5px 5px 7px 5px;
  width: 90%;
  margin: 30px auto 0px auto;
}

#results-conclusion p {
  margin: 0px;
  font-size: 12px;
  color: #334961;
  text-align: justify;
  padding: 0 5px; 
}

.each-result-text {
  color: #334961;
  font-family: Avenirbold;
  font-size: 14px;
}

.each-result-points {
  color: #f86f4d;
  font-size: 14px;
}

.each-result-points:hover {
  cursor: pointer;
}

.each-result-points p {
  margin: 0!important;
  display: inline-block;
}

.each-result-points small{
  color: silver;
}

.each-result-points i {
  margin-left: 15px;
  color: grey;
}


.dropdown-text {
  padding-top: 10px;
  padding-bottom: 5px;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.dropdown-text p{
  margin: 0px;
  font-size: 13px;
  line-height: 1.6em;
  color: #334961;
  text-align: justify;
  padding: 0 5px; 
}

#results-conclusion a, 
.dropdown-text a {
  text-decoration: none;
  color: #f86f4d;
}

.dropdown-text a:hover {
  cursor: pointer;
  text-decoration: underline;
}



.cta-div {
  width: 80%;
  margin: 50px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.cta-div p{
  color: #334961;
  font-size: 12px; 
  text-align: center;
}

.results-cta {
  text-decoration: none;
  color: white;
  font-size: 14px;
  background-color: #f86f4d;
  border: 1px solid #f86f4d;
  padding: 7px 14px;
  margin: 10px auto;
  transition: .3s;
}

.results-cta:hover {
  color: #f86f4d;
  background-color: white;
  border: 1px solid #f86f4d;
  cursor: pointer;
}

.email-cta { 
  display: none;
  margin: 0 auto;
  text-align: center; 
  height: 30px!important;
  width: 30px!important; 
  color: white;
  background-color: #f86f4d;
  border: 1px solid #f86f4d; 
  border-radius: 50%; 
  font-size: 13px; 
  transition: .25s; 
}

.email-cta:hover{
  transform: scale(1.1);
}

.email-cta a {
  color: white;
  width: 100%;
  height: 100%; 
}
/*^^^^^^^^^^^^ RESULTS ^^^^^^^^^^^^*/
/*======================================*/