@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');

body {
  background: #fff;
  color:#686868;
}

.ha-summary__icon,
.ha-summary__backlink {
  display: none;
}

.ha-summary__title {
  margin-left:20px;
  background: url(https://camperplaatsbrouwersdam.nl/wp-content/uploads/2018/04/logo-camperplaats-brouwersdam-500x117.png) no-repeat left center;
  background-size:contain;
  text-indent: -9999px;
  font-size:4.4em;
}



.ha-wrapper a {
  color: inherit;
}

.ha-wrapper, .ha-layer {
  font-family: 'Montserrat', sans-serif;
}

.ha-select__content h3,
.ha-select__header h2, .ha-select__header h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size:2em;
  color: #0a0a0a;
  font-weight: 400;
}

.ha-booking-view-period {
  max-width: unset;
}

.ha-select__button {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.4px;
  background: #0096ff;
  color:#fff;
}

.ha-select__button:hover {
  background: #0078cc;
}

.ha-select__button--book {

}

ul.ha-form-options-list {
  margin:0;
}

ul.ha-pricelist {
  padding:0;
}

div.ha-form-fldset {
  margin:0;
  display: flex;
  flex-flow: row wrap;
}

.ha-topbar {
    box-shadow: none;
    background: url(https://camperplaatsbrouwersdam.nl/wp-content/uploads/2017/07/decoration_bottom.png) repeat-x bottom center #f2f2f2;
    transform: translateY(9em)
}

.ha--disable-scrolling .ha-topbar {
  background: #f2f2f2;
}

.ha-booking-screen .ha-summary {
    background: transparent;
}

.ha-summary {
  height:12em;
  color: inherit;
}
.ha-wrapper {
  padding-top:10em;
}

.booking-widget-receipt-result .ha-content .ha-receipt-close {
    background: transparent;
    color: #fff;
    border:0px;
}


.booking-widget-reservation .ha-select--bookingfields .ha-form-fldset {display: flex; flex-flow:row wrap; display: -webkit-flex; -webkit-flex-flow:row wrap; margin-left:-4px; margin-right:-4px; margin-top:8px; font-size:1em;}

.booking-widget-reservation .ha-select--mybooking .ha-form-input-field {flex: 0 100%; -webkit-flex: 0 100%;}
.booking-widget-reservation .ha-form-input-field {flex: 0 calc(50% - 8px); -webkit-flex: 0 calc(50% - 8px);}
.booking-widget-reservation .ha-form-input-field__opmerking {flex: 0 calc(100% - 8px); -webkit-flex: 0 calc(100% - 8px);}

.booking-widget-reservation .ha-form-input-field__Achternaam,
.booking-widget-reservation .ha-form-input-field__email {flex: 0 calc(100% - 8px); -webkit-flex: 0 calc(100% - 8px);}
.ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-day,
.booking-widget-reservation .ha-form-input-field__Geboortedatum-day {flex: 0 calc(33.333333% - 8px); -webkit-flex: 0 calc(33.333333% - 8px);}
.ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-month,
.booking-widget-reservation .ha-form-input-field__Geboortedatum-month {flex: 0 calc(33.333333% - 8px); -webkit-flex: 0 calc(33.333333% - 8px);}
.ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-year,
.booking-widget-reservation .ha-form-input-field__Geboortedatum-year {flex: 0 calc(33.333333% - 8px); -webkit-flex: 0 calc(33.333333% - 8px);}
.ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-month label,
.ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-year label,
.booking-widget-reservation .ha-form-input-field__Geboortedatum-month label,
.booking-widget-reservation .ha-form-input-field__Geboortedatum-year label {opacity:0 !important; visibility: hidden;}

@media screen and (max-width: 500px){
  .booking-widget-reservation .ha-form-input-field {flex: 0 calc(100% - 8px); -webkit-flex: 0 calc(100% - 8px);}
  .ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-day,
  .booking-widget-reservation .ha-form-input-field__Geboortedatum-day {flex: 0 calc(100% - 8px) !important; -webkit-flex: 0 calc(100% - 8px)  !important;}
  .ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-month,
  .booking-widget-reservation .ha-form-input-field__Geboortedatum-month {flex: 0 calc(100% - 8px) !important; -webkit-flex: 0 calc(100% - 8px)  !important;}
  .ha-form-input-field__mr_dob.ha-form-input-field__mr_dob-year,
  .booking-widget-reservation .ha-form-input-field__Geboortedatum-year {flex: 0 calc(100% - 8px) !important; -webkit-flex: 0 calc(100% - 8px)  !important;}
  .booking-widget-reservation .ha-form-input-field__Geboortedatum-month label,
  .booking-widget-reservation .ha-form-input-field__Geboortedatum-year label {opacity:0 !important; visibility: hidden;}
}

.booking-widget-reservation .ha-form-input-field[data-field-ident="field-email"] {flex: 0 calc(100% - 8px); -webkit-flex: 0 calc(100% - 8px);}

.booking-widget-reservation .ha-form-input-field {position: relative; padding:4px; display: flex; flex-flow:column;}

.booking-widget-reservation .ha-form-input-field input,
.booking-widget-reservation .ha-form-input-field textarea,
.booking-widget-reservation .ha-form-input-field select {width:100%; order:2; border:1px solid #ccc; padding:8px 16px; height:50px; -webkit-appearance:none; margin:0; box-sizing: border-box; box-shadow: none; border-radius:4px;}
.booking-widget-reservation .ha-form-input-field textarea {height:100px;}
.booking-widget-reservation .ha-form-input-field label {position: relative; font-size: 1rem !important; font-weight: 600; margin-top: 10px; transform: none !important; padding: 0 !important;
    margin-bottom: 6px; line-height: 1 !important; color: #504942 !important; opacity: 1 !important;}


.booking-widget-map-result,
.booking-widget-map-result .leaflet-pane {
    transition:background .3s ease;
}


.booking-widget-map-result.updating {
    background:#ffffff;
}
.booking-widget-map-result.updating .leaflet-pane {
    opacity: .3;
    filter: blur(1px);
}

.booking-widget-map-result.updating::before,
.booking-widget-map-result.updating::after{
    position: absolute;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -23px;
    border-radius: 100%;
    background: #0096ff;
    -webkit-animation: spinner 1.5s infinite ease-in-out both;
    animation: spinner 1.5s infinite ease-in-out both;
    z-index: 999;
}

.booking-widget-map-result.updating::after{
    margin: -10px 0 0 3px;
    -webkit-animation-delay: .32s;
    animation-delay: .32s;
}