/* BASE STYLING */



.booking_widget {
  position: absolute;
  z-index: 400;
  top: 185px;
}

.booking_form_title {
  background: #006eb4;/*booking_widget_color*/
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 5px;



}


.booking_form_title h4 {
    margin-top: 0;
    color: white;
  }

.booking_form_title .booking_title_1,
.booking_form_title .booking_title_2 {
    display: none;
}



.booking_form {
  font-family: 'Source Sans Pro', sans-serif;
  padding: 20px;
  width: 260px;
  background: #d8d9dd;/*$booking_widget_color_1*/
}

.destination_wrapper {
  position: relative;


}


.destination_wrapper label {
    color: #5b5b5f;/*$booking_widget_color_3*/
    font-size: 12px;

  }

.destination_wrapper input {
    @include border-radius(5px);
    height: 40px;
    border: 0;
    width: 250px;
    padding-left: 10px;
  }

.destination_wrapper .right_arrow {
    @include border-radius(3px);
    position: absolute;
    background: #006eb4 url(https://cdn.paraty.es/static_files/vidamar-resorts/generic/202506160912/images/booking/flecha_motor_der.png) no-repeat center center;/*$booking_widget_color_2*/
    right: 2px;
    top: 30px;
    height: 35px;
    width: 35px;
  }






.stay_selection .entry_date_wrapper,
.stay_selection .departure_date_wrapper {
    margin-right: 10px;
  }

.stay_selection .entry_date_wrapper,
.stay_selection .departure_date_wrapper,
.stay_selection .rooms_number_wrapper {
    float: left;
    width: 80px;
  }

.stay_selection .entry_date_wrapper label,
.stay_selection .departure_date_wrapper label,
.stay_selection .rooms_number_wrapper label {
    color: #5b5b5f;/*$booking_widget_color_3*/
    font-size: 12px;
  }


.date_box {
  @include border-radius(5px);
  cursor: pointer;
  position: relative;
  background: white;
  height: 40px;


}



.date_box .date_day,
.date_box .date_year {
    display: block;
    text-align: center;
  }

.date_box .date_day {
    text-transform: uppercase;
    color: #006eb4;/*$booking_widget_color_2*/
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: bolder;
  }

.date_box .date_year {
    color: #d8d9dd;/*$booking_widget_color_1*/
    font-size: 12px;
    height: 14px;
    line-height: 14px;
  }







.room {

  clear: both;
  margin-bottom: 5px;

}

.room .room_title {
    margin-top: 25px;
  }

.room .room_title,
.room .adults_selector {
    margin-right: 10px;
  }

.room .room_title,
.room .adults_selector,
.room .children_selector
  {
    float: left;
    width: 80px;

  }


.room .room_title label,
.room .adults_selector label,
.room .children_selector  label {
      display: block;
    }



.room .room_title,
.room .adults_selector label,
.room .children_selector label {
    color: #5b5b5f;/*$booking_widget_color_3*/
    font-size: 12px;
  }



.wrapper_booking_button {

  font-family: 'Source Sans Pro', sans-serif;
  position: relative;
  margin-top: 50px;


}



.wrapper_booking_button .promocode_input {
    @include border-radius(5px);
    border: 0;
    padding: 0;
    margin-top: 10px;
    text-align: center;
    color: #006eb4;/*$booking_widget_color_2*/
    width: 170px;
    height: 40px;
    font-size: 16px;
  }

.wrapper_booking_button button {
    @include border-radius(5px);
    color: white;
    border: 0;
    float: right;
    background: #006eb4;/*$booking_widget_color_2*/
    font-size: 16px;
    text-transform: uppercase;
    height: 40px;
    width: 80px;
    margin-top: 10px;
  }

.wrapper_booking_button .spinner_wrapper {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }



.horizontal_engine{
  height:379px;
  background: #d8d9dd !important;/*$booking_widget_color_1*/
}



.booking_widget_horizontal {
  width: 600px;
  margin: 0 auto;
  padding-top: 172px;



}

.booking_widget_horizontal .hotel_selector {
    left: 20px;
    top: 70px;
  }

.booking_widget_horizontal .booking_form {
    border-left: 1px solid white;
    border-right: 1px solid white;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

.booking_widget_horizontal .booking_form_title {
    display: none;
  }

.booking_widget_horizontal .booking_form {
    width: 560px;
  }

.booking_widget_horizontal .destination_wrapper {
    float: left;
  }

.booking_widget_horizontal .stay_selection {
    float: right;
  }

.booking_widget_horizontal .room {
    float: right;
  }

.booking_widget_horizontal .wrapper_booking_button {
    clear: both;
  }

.booking_widget_horizontal .promocode_input {
    width: 260px !important;
  }

.booking_widget_horizontal .wrapper_booking_button button {
    width: 170px !important;
  }


/* INLINE BOOKING STYLING */

.boking_widget_inline{
  width: 1140px;
  height:75px;
  margin: 0 auto;
  padding-top: 20px;
  background-color:#5b5b5f;/*$booking_widget_color_3*/


}

.boking_widget_inline .hotel_selector {
    left: 20px;
    top: 70px;
  }

.boking_widget_inline .booking_form {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    background-color:#5b5b5f;/*$booking_widget_color_3*/
  }

.boking_widget_inline .booking_form_title {
    display: none;
  }

.boking_widget_inline .booking_form {
    width: 1140px;
    padding:0;
  }

.boking_widget_inline .destination_wrapper {
    float: left;
  }

.boking_widget_inline .stay_selection {
    float:left;
    margin-left:90px;

}

.boking_widget_inline .stay_selection .entry_date_wrapper label,
.boking_widget_inline .stay_selection .departure_date_wrapper label,
.boking_widget_inline .stay_selection .rooms_number_wrapper label {
  color: rgb(120,120,120);
  font-size: 12px;
}



.boking_widget_inline .room_list_wrapper{
    float:left;
    margin-left:20px;
    margin-right:20px;
    margin-top:5px;
  }



.boking_widget_inline .room {
    float: right;


}


.boking_widget_inline .room .room_title,
.boking_widget_inline .room .adults_selector label,
.boking_widget_inline .room .children_selector label {
      color: gray;/*$booking_widget_color_4*/
      font-size: 12px;
 }
.boking_widget_inline .room  .room_title{
      text-align:right;
}





.boking_widget_inline .wrapper_booking_button {
    display:inline;
    margin-top:10px;


  }


.boking_widget_inline .wrapper_booking_button  button{
      float:none;
    }


.boking_widget_inline .promocode_input {
    width: 200px !important;
    margin-right:20px;
    margin-top:19px;
    background-color:rgb(90,90,90);
  }

.boking_widget_inline .wrapper_booking_button button {
    width: 170px !important;
  }

.boking_widget_inline .selectric, .date_box{
    background: white;
  }

/*=====================================================================
  Selectric
======================================================================*/

.selectricWrapper {
  position: relative;
  margin: 0 0 0px;
  width: 80px;
  cursor: pointer;
}

.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.selectricOpen {
  z-index: 9999;
}

.selectricOpen .selectricItems {
  display: block;
}

.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}

.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}

.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  _font: 0/0 a;
  background: none !important;
}

.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}


.selectricOpen .selectric {

  z-index: 9999;
}

.selectricOpen .selectricItems {
  display: block;
}

.selectric {
  background: white;
  position: relative;
  border-radius: 6px;
  height: 40px;
}

.selectric .label {
  display: block;
  overflow: hidden;
  font-size: 16px;
  line-height: 40px;
  color: #006eb4;/*$booking_widget_color_2*/
  text-align: left;
  margin-left: 20px;
}

.selectric .button {
    border-radius: 5px;
  zoom: 1;
  position: absolute;
  font: 0/0 a;
  overflow: hidden;
  margin: auto;
  top: 0;
  right: 2px;
  bottom: 0;
  width: 35px;
  height: 35px;
  border: 0;
  background: #006eb4 url(https://cdn.paraty.es/static_files/vidamar-resorts/generic/202506160912/images/booking/flecha_motor.png) no-repeat center center !important;/*$booking_widget_color_2*/
  padding: 0;
}

.selectricHover .selectric .button {
  border-top-color: #DDD;
}

/* Items box */

.selectricItems {
  display: none;
  position: absolute;
  overflow: hidden;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #CCC;
  z-index: 9998;
  -webkit-box-shadow: 0 0 10px -6px;
  box-shadow: 0 0 10px -6px;
}

.selectricItems ul,
.selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 20px;
  line-height: 20px;
  font-size: 12px;
}

.selectricItems li {
  padding: 5px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #EEE;
  color: #666;
  border-top: 1px solid #FFF;


}


 .selectricItems li :hover {
    background: #F0F0F0;
    color: #444;
  }

 .selectricItems li .selected {
    background: #EFEFEF;
    color: #444;
    border-top-color: #E0E0E0;
  }


.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}


/* Special datepickers */
#ui-datepicker-div{
    margin-left: -20px !important;
}

.ui-widget-header {
background: #006eb4;
    color: white;
}

.ui-widget-content {
    background: white;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #006eb4;
color: white;
}