.datepicker{
  position:relative; 
  font-family: 'Lato', sans-serif;
}
.ui-datepicker-prev{
    position: absolute;
    left: 35px;
    top: 50%;
}
.ui-datepicker-prev.ui-state-disabled:after{
  display:none;
} 
.ui-datepicker-next span,
.ui-datepicker-prev span{
 display:none; 
}

.ui-datepicker-prev:after{
  display:block;
  cursor:pointer;
  content:' ';
  width: 19px;
  height: 30px;
  background: url(https://39515953.fs1.hubspotusercontent-na1.net/hubfs/39515953/sitio2023/simulador/disena-tu-experiencia-flecha-izq.png) no-repeat;
  opacity: 1;
}
.ui-datepicker-title{
  font-weight:600;
  padding:15px 0;
  font-size:18px;
  
}
.ui-datepicker-next:after{
  display:block;
  content:' ';
  cursor:pointer;
  width: 19px;
  height: 30px;
  background: url(https://39515953.fs1.hubspotusercontent-na1.net/hubfs/39515953/sitio2023/simulador/disena-tu-experiencia-flecha-der.png) no-repeat;
  opacity: 1;
}

.ui-datepicker-next{
    position: absolute;
    right: 35px;
    top: 50%;
}

.bg-gray{
 background:#F1F1F1;
}
.formulario{
   text-align: center;
}
.formulario .hs-form-field {
   text-align: left;
}
.formulario label{
  margin-right: 0.5rem!important;
}
.formulario label, .formulario select{
   display:inline-block!important; 
   width:auto!important;
}
.form-group{
  max-width:800px;
  margin:0 auto;
  text-align: text-center;
}
.avance{
  position: relative; 
}
.pasos{
    margin:0;
  padding:10px 0 ;
  list-style:none;
  border-bottom: 1px solid #000;
}
.col-3 {
    flex: 0 0 auto;
    width: 20%;
}
.pasos li{
  vertical-align: middle;
  margin:0;
  padding:0;
  text-align: center;  
  font-size:18px;
}
.hidden{
  display:none; 
}
.anterior, .anterior:hover, .anterior:active, .anterior:visited,
.continuar, .continuar:hover, .continuar:active, .continuar:visited{
   background: #252630;
   width:160px;
  font-size:16px;
  display:inline-block;
  text-transform:uppercase;
  padding:5px 0;
  text-decoration:none;
  color:#FFF;
  text-align:center;
  cursor:pointer;
}
.resumen:hover,
.resumen{
   background: #252630;
   width:250px;
  font-size:16px;
  display:inline-block;
  text-transform:uppercase;
  padding:5px 0;
  text-decoration:none;
  color:#FFF;
  text-align:center;
  cursor:pointer;
}

.pasos li span.active{
font-weight: 600;
}

.barra::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #20315A;
    clear: both;
    transition: .4s linear;
    transition-property: width,left;
}
.avance2::after {
  left: calc(75% - 10px);
}
.avance3::after {
  left: calc(85% - 10px);
}
.avance4::after,
.avance5::after {
  left: calc(88% - 10px);
}
.progreso{
    position:relative;
    border: 6px solid #8D97AF;
    width: 100%;
    top: 0;
    z-index: 5;
    transition: .4s linear;
    transition-property: width,background-color;
}

.barra{
  position: absolute;  
  top:-6px;
  left:-6px;
  height: 12px;
  background: #20315A;
  transition: .1000s linear;
  transition-property: width,background-color;
}

.error{
  color:red;  
}
#extra,
#activities{
   max-width:580px;
   margin:0 auto;
}
.form-hs{
   max-width:350px;
   margin:0 auto;
}

#locations{
   max-width:480px;
   margin:0 auto;
}

.ui-datepicker-inline{
    display: flex!important;
    column-gap: 1em;
    align-items: start;
    background: #FFF;
    flex-wrap: wrap;
    justify-content: center;
}
.ui-datepicker-calendar th{
  font-weight:500;
  font-family: 'Lato', sans-serif;
  font-size:14px;
}
.ui-state-default, .ui-state-default:hover{
   background:#E4E9F7;
   display: block;
    margin:4px;
   padding-top: 10px;
    height:45px;
  width:45px;
   color:#414040;
   text-decoration:none;
  font-family: 'Lato', sans-serif;
  font-size:14px;
  
}
.ui-datepicker-unselectable .ui-state-default{
  
  opacity: 0.3;
}

td.dateFrom .ui-state-default,
td.dateTo .ui-state-default,
td.dp-highlight .ui-state-default{
  background:#20315A;
  color:#FFF;
}

.containerForm{
      margin: 0 auto;
    text-align: center;
}
.containerForm input{
  width: 263px;
    height: 25px;
    text-align: left;
    padding: 5px;
    margin-bottom: 10px;
}
.iconos-simulador{
   display:inline-block;
   height:53px;
   background: url(https://39515953.fs1.hubspotusercontent-na1.net/hubfs/39515953/sitio2023/simulador/disena-tu-experiencia-iconos.png)no-repeat
}
.icono-1{
   background-position:0 0;
   width:53px;
}
.icono-2{
background-position: -67px 0;
    width: 55px;
}
.icono-3{
background-position: -134px 0;
    width: 53px;
}
.icono-4{
    background-position: -197px 0;
    width: 57px;
}
.fs16.montserrat{
  font-size:16px!important; 
}
.icono-5{
    background-position: -265px 0;
    width: 56px;
}
.formulario label{
  font-size:16px!important; 
  font-weight:400!important;
  font-family: 'Lato', sans-serif!important;
  
}
body .formulario input[type=color], body .formulario input[type=date], body .formulario input[type=datetime-local], body .formulario input[type=datetime], body .formulario input[type=email], body .formulario input[type=file], body .formulario input[type=month], body .formulario input[type=number], body .formulario input[type=password], body .formulario input[type=search], body .formulario input[type=tel], body .formulario input[type=text], body .formulario input[type=time], body .formulario input[type=url], body .formulario input[type=week], body select, body textarea{
  padding:0 10px;  
}



@media screen and (max-width: 767px){
  
  #step-5{
      max-width: 350px;
    margin: 0 auto;
}
#step-5 .col-12{
  width:100%;
  margin-bottom:15px;
  }
.ui-state-default, .ui-state-default:hover {
    height: 25px;
    width: 25px;
    padding:0;
}
  
  #locations {
    max-width: 230px;
    margin: 0 auto;
}
  #activities {
    max-width: 245px;
    margin: 0 auto;
}
}