#ui-datepicker-div{display:none}



#DivContainerBooking {
    font-family: arial,sans-serif;
    margin-top: 32px;
}

/*.loader {border: 8px solid #faf7f1;border-top: 8px solid #f45712;border-radius: 50%;width: 120px;height: 120px;animation: spin 2s linear infinite;margin: auto}*/
.loader-blue {border-top-color: #0d8fe0}

#DivPerson .loader{width:30px;height:30px;border-width:4px;}
.loader-input-person{position:absolute;top:0;left:0;bottom:0;width:40px;background-color: lightgray;}

.bg-hover-deep-blue:hover{background:#0989ea!important;color:#fff!important}

/*search bar*/
.search-bar {margin:auto;margin-top: 10px;margin-bottom: 32px;background: #0d8fe0;padding: 6px;color: #fff;font-family:Arial,sans-serif;}
#DivPeriod { width:calc(32% - 6px);margin-right:6px;background-color:white;    padding: 0; cursor:pointer;     color: black; line-height: 40px; text-align: center; position:relative }
#DivPeriod > div { height:40px }
#DivPeriodMulti { width:calc(37% - 6px);margin-right:6px;background-color:white;    padding: 0; cursor:pointer;     color: black; line-height: 40px; text-align: center; position:relative }
#DivPeriodMulti > div { height:40px }
#DivType { width:calc(25% - 6px);margin-right:6px; position:relative  }
#DivType select { font-size: 16px; height:40px; text-align: center; background:#fff!important}

#DivTypeMulti { width:calc(25% - 6px);margin-right:6px; position:relative  }
#DivTypeMulti select { font-size: 16px; height:40px; text-align: center; background:#fff!important}

.PersonSet { background-color:white!important }
#DivPerson {width:calc(25% - 6px);margin-right:6px; color: black;line-height: 40px;text-align: center;position: relative;cursor: pointer;background-color: lightgray;padding:0 8px}
#DivPerson .fa-arrow-down{position: absolute;right: 8px;top: 50%;transform: translateY(-50%);}

#DivPersonMulti {     width: calc(10% - 6px);background-color: white; }
#DivAnimal {     width: calc(10% - 6px);    background-color: white;    margin-right: 10px; }

#uxAnimali { width:26px;padding:0;margin-left: 4px; }

#DivGuestMulti {width:calc(20% - 6px);margin-right:6px; color: black;text-align: center;position: relative;cursor: pointer;background-color: lightgray;padding:0 8px}
#DivGuestMulti .fa-arrow-down{position: absolute;right: 8px;top: 50%;transform: translateY(-50%);}

#DivGuest { width:15% }
#DivSearch { width:25%;margin-top: 27px; }
.container-input span{font-size:16px;text-align:center;font-family:Arial;}
.container-input input, .container-input select{height:40px;} 
.date-range-hover a, .focusPeriod a { background:none !important; background-color:dodgerblue !important; color:white !important}
.endPeriod a, .startPeriod a { background:none !important; background-color: #ffcd45 !important; color: #000 !important; }
.RequiredField {top:47px;line-height:1.5;position: absolute;background: #F44336;border: 1px solid #000000;padding: 8px;text-align: center;color: white;font-weight: bold;font-family: arial;font-size: 12px;margin-left: -2px;}
.RequiredField:after, 
.RequiredField:before {bottom: 100%;left: 20px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.RequiredField:after {border-color: rgba(213, 13, 13, 0);border-bottom-color: #F44336;border-width: 7px;margin-left: -7px;}
.RequiredField:before {border-color: rgba(0, 0, 0, 0);border-bottom-color: #000000;border-width: 8px;margin-left: -8px;}

@media(min-width:1920px){
    .RequiredField{font-size:16px}
}


/*guest details*/
.FasceEta{background:white; color:black}
.FasceEta div {padding: 0 8px; width:100%;}
.continaer-input-fasceEta span {display: block;text-align: center;font-size: 18px;line-height: 22px;}
.continaer-input-fasceEta span:nth-of-type(2){font-size:16px;}
#uxDivSearchFacilitie { width:18%;height:40px; }
#uxDivSearchFacilitie input { width:100%;line-height: 24px; }
#DivImmagineCampeggio { width:36% }
#DivDescrizioneCampeggio { width:36%; font-size: 18px; }
#DivPrezzoOfferta { width: 28%;
    border-radius: 11px;
    color: black;
    font-family: arial;}
.ServiziBooking { margin-top:10px } 
#PrezzoDa {font-size:40px; line-height: 40px; display:block}
.PrezzoDaLabel { display:block}

/*typology offer*/ 
.ServiziBooking { margin-top:10px } 
 
/*offer details*/
#DivCaricamentoBooking {position: absolute;width: 100%;text-align: center;height: 100%;}
#CaricamentoBooking {top: 50%;position: absolute;left: 50%;background-color: gray;width: 400px;margin-left: -200px;height: 100px;color: white;font-size: 30px;text-align:center}
.BoxAletrnativa:not(:first-child) {margin-left: 20px}

.DivBottonePrenota { width: 50% }
.PrezzoOfferta, 
.PrezzoOffertaPromo {font-size: 20px;font-weight: bold;width: 50%;}
.PrezzoOfferta span {display:block}
.DivCostoOfferta { width: 40% }
.ServiziListino {width:30% }
.DivDescrizioneOfferta { width:60%; display:flex }

.IntestazioneOfferta {font-size: 16px;background-color: #f79f1b;background-color: #D9E2EC;padding-top: 10px;padding-bottom: 10px;color: #fff;color:#333;font-weight: bold;letter-spacing: 0.5px;}
.VideoTipologia { cursor:pointer}
.DivVideoTipologia { width: 30%; float:left; padding-top:10px;text-align: right; }

.container-offerte{margin:auto 10px;border:1px solid #ccc}

.box-nessuna-disponibilita{padding: 16px;width:80%;margin:0 auto}
.box-nessuna-disponibilita p{font-size:20px;margin:0}
.box-proposte-periodi{width:100%;margin:auto}
.box-proposte-periodi p{font-size:20px;margin:0;margin-bottom:24px;}
.list-proposte-periodi-wrapper{margin-right:-24px;}
.list-proposte-periodi{display: flex;flex-wrap: wrap;place-content: center;}
.BoxAlternativa{padding:10px; font-size: 20px;border: 1px solid #017cc2;margin-bottom:20px ;background-color: aliceblue;width: calc(33.33% - 24px);margin-right: 24px;text-align: center;}
.div-no-offerte{padding:32px 0;margin:auto}
.text-proposte-periodi{margin-top:24px;margin-bottom:32px;}

@media(min-width:1920px) {
    .BoxAlternativa{width: calc(20% - 24px);}
    .div-no-offerte{width:90%}
    .box-proposte-periodi{width:90%;}
}

.box-descrizione-tipo{padding:0 16px;}
.box-info .w3-col:first-of-type{width:40%;}
.box-info .w3-col:last-of-type{width:60%;}
.NomeListino span{padding-left:0}
.DescrizioneListino span, 
.NomeListino span, 
.ServiziListino span {padding: 5px;display:block}
.NomeListino, 
.DescrizioneListino { width: 35%}
.DescrizioneListino, 
.NomeListino, 
.ServiziListino {border-right: 1px solid lightgrey;}


.DivOffertaContainer {font-size: 16px;padding-top: 16px;padding-bottom:16px;}
.lista-offerte .DivOffertaContainer:nth-of-type(odd){background:#fff}
.lista-offerte .DivOffertaContainer:nth-of-type(even){background:#D9E2EC}




/*TODO: eliminare regole sopra che non serveno */

/* Div Guest Setting */
#uxDivGuestSetting {position:absolute;z-index:9999; cursor:auto;width:219%;top:112%;left:-50%;padding:64px 36px 36px;}
#uxDivGuestSetting.hidden{display:none}
#uxDivGuestSetting .container-input-fasceEta{display:flex;margin-bottom:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid #f5f5f5}

#uxDivGuestSetting .container-input-fasceEta:last-of-type{margin-bottom:0;padding-bottom:0;border:none}
#uxDivGuestSetting .container-input-fasceEta > .labelInputFasceEta{width:70%;}

#uxDivGuestSetting .container-input-fasceEta > select{width:30%;text-align:center;border:1px solid #70b0d8}
#uxDivGuestSetting .container-input-fasceEta .PersoneLabel, 
#uxDivGuestSetting .container-input-fasceEta .PersoneValue,
#uxDivGuestSetting .container-input-fasceEta .AnimaliLabel{display:block;line-height:initial;text-align:left;}


#uxDivGuestSetting .container-input-fasceEta .labelNoAnimali{width:100%;line-height:1.5;font-size:15px;display:block;}

#uxDivGuestSetting .container-input-fasceEta .PersoneValue{color:#888;font-size:15px;}
#uxDivGuestSetting .container-input-fasceEta .AnimaliLabel{font-weight: 600;color: #0d8fe0;font-size: 16px;}
#uxDivGuestSetting .container-input-fasceEta .PersoneLabel {margin-bottom: 4px;font-weight: 600;color: #0d8fe0;font-size: 16px;}


@media(min-width:1660px){
    #uxDivGuestSetting{width:150%;left:0}
}

/* Typology */
.card-typology{width: 100%;margin: 32px auto;background:#F0F4F8;font-family:Arial,sans-serif}
.typology-info-container{display:flex;}
.typology-info-container > div:first-of-type{width:40%;}
.typology-info-container > div:last-of-type{width:60%;padding:0 16px;}
.typology-name {font-weight: 700;color: #0d8fe0;font-size: 36px;line-height: 1.2;font-family: "Segoe UI",sans-serif}
.typology-description{color:#333;font-size:16px;font-family:Arial,sans-serif}
.typology-main-image{width:100%;height:auto; cursor:pointer}
.typology-service-list{padding:16px 0 8px 16px}
.card-typology .service-icon{margin:0 4px 8px 0;}
.summary-user-preference{position:absolute;top:8px;right:8px;}
.summary-user-preference p{font-size:13px;color:#0d8fe0;margin:0}
.lista-proposte .proposta:nth-of-type(odd){background:#fff}
.proposta{padding:16px 0}
.proposta p{margin:0}
.campo-proposta-mobile{display:none}
.campi-proposta-desktop{background:#D9E1EC;display:flex;padding:16px 0;align-items:center}
.campi-proposta-desktop h5{position:relative;margin:0;width:25%;text-align:center;font-family: arial,sans-serif;font-size: 12px;text-transform: uppercase;font-weight: bold;letter-spacing: 0.5px;color: #192636;}
.campi-proposta-desktop h5:after {content: "";width: 1px;background: #bcccdc;position: absolute;right: 0;height: 100%;top:0}
.campi-proposta-desktop h5:last-of-type{visibility:hidden;}
.proposta-info-container {display: table;width: 100%;table-layout: fixed;}
.proposta-single-info {width: 25%;text-align: center;display: table-cell;vertical-align: middle;position:relative;padding:0 8px;}
.proposta .proposta-single-info:after {content: "";width: 1px;background: #ddd;position: absolute;right: 0;height: 100%;top: 0;}
.proposta-single-info p{text-align: center;font-family: arial,sans-serif;font-size: 15px;color: #333;letter-spacing: 0.2px;}
.proposta .proposta-single-info:last-of-type{padding-right:0}
.proposta .proposta-single-info:last-of-type:after{content:none}
.proposta-single-info .nome-tariffa{color:#3D90C4;font-weight: 600;}
.proposta-prezzo{color:#0d8fe0;display:block;font-size:24px;font-weight:bold;}
.proposta-prezzo-promo{color:orange;display:block;font-size:24px;font-weight:bold;}
.label-notti, .label-stock {font-style: italic;color:#0d8fe0;font-size:16px;font-weight:bold;    display: block;}
.proposta-single-info button{width:100%;background:#51af30;font-family:Oswald,Arial,sans-serif}

@media(min-width:1920px){
    .card-typology{width:90%}
    .typology-name{font-size:46px;}
}

/* Layer Typology Details */
#layer-typology-details{font-family:Arial,sans-serif;background: #F0F4F8;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;background:rgba(0,0,0,.75);z-index:999999999999;overflow: auto;}
#layer-typology-details-inner{min-width:1200px;overflow-y:hidden;overflow-x:auto;width: 100%;height: 100%;padding: 32px;min-height: 600px;}
.layer-typology-content{padding:0 24px}
.layer-typology-content hr{border-color:#ddd}
.layer-typology-nome-campeggio {font-size: 14px;color: #0d8fe0;font-weight: 500;text-transform: uppercase;width: max-content;margin:112px auto auto 0}
#layer-typology-details .typology-name{margin-top:8px}
#layer-typology-details .typology-description{margin-bottom:48px;margin-top:48px;}
.layer-typology-services h5 {font-weight: 700;color: #0d8fe0;font-size: 24px;}
.layer-typology-services img{margin-right:8px;}
.layer-typology-services-list {list-style: none;padding: 0;display: flex;flex-wrap: wrap;}
.layer-typology-services-list li{width: calc(50% - 8px);margin:auto 8px 16px 0;display: inline-flex;align-items: center;color: #333;font-size:14px;}
.layer-typology-content-wrapper{background: #f5f5f5;width: 30%;height: 100%;overflow: auto;padding:24px 0 48px;}
.layer-typology-media-wrapper{background: #000;width: 70%;height: 100%;position:relative;overflow:hidden;background:rgba(0,0,0,.9)}
.close-layer-typology-details{text-transform:uppercase}
.btn-altri-servizi{cursor:pointer;text-decoration:underline;display:inline-block;color:#333}
.btn-altri-servizi:hover{color:#0d8fe0}
.layer-box-info {display: flex;height: 100%;}
#layer-typology-details-loader{background: #fff;position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 2;transition:opacity .4s ease;opacity:1;}
.layer-typology-details-nav-media {padding: 48px 32px 24px;position: absolute;left: 70%;width: 30%;background: #f5f5f5;border-bottom: 1px solid #ccc;}
.layer-typology-details-nav-media button {border: none;display: inline-block;padding: 8px 16px;vertical-align: middle;overflow: hidden;text-decoration: none;text-align: center;cursor: pointer;white-space: nowrap;text-transform: uppercase;background: #89c6f4;color: #fff}
.layer-typology-details-nav-media button:first-of-type{margin-right:8px}
.layer-typology-details-nav-media button.active{background:#0d8fe0!important}
.layer-typology-media-tab {height: 100%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;transform:translateX(100%);transition:transform .4s ease}
.layer-typology-media-tab.active{transform:translateX(0)}
#layer-typology-video{padding:80px;overflow:auto}
.layer-typology-video-container{position: relative;padding-top: calc(9/16 * 100%);max-width:900px;margin:0 auto 80px;}
.layer-typology-video-container:last-of-type{margin-bottom:0}
.layer-typology-video-container iframe {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;border:none}

@media(min-width:1920px) {
    #layer-typology-details-inner{padding:64px;}
    .layer-typology-content{padding:0 48px}
    .layer-typology-content-wrapper{padding-top:48px;}
    .layer-typology-details-nav-media{padding: 24px 48px;}
    .layer-typology-nome-campeggio{margin:80px auto auto 0}
}

/* viewer js */
.viewer-title{font-size:24px!important}

/* flatpickr */
.flatpickr-calendar{font-family:arial;padding: 16px 32px 32px!important;width: 696px!important;}
.flatpickr-day.inRange,
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow: -5px 0 0 #f7e08c, 5px 0 0 #f7e08c!important;}
.flatpickr-day.inRange{background: #f7e08c!important;border-color:#f7e08c!important}
.flatpickr-weekdays{padding:32px 0 16px;}
span.flatpickr-weekday{font-size:110%;font-weight:500}
.flatpickr-current-month span.cur-month{font-weight:500!important}
.flatpickr-current-month{padding-top:16px!important;}
.flatpickr-months .flatpickr-month{height:40px!important;}
.flatpickr-weekdays .flatpickr-weekdaycontainer:first-of-type{margin-right:16px;}
.flatpickr-days .dayContainer:first-of-type{margin-right:16px;}
.flatpickr-days{width:100%!important;}
.dayContainer + .dayContainer{box-shadow:none!important}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{background:#0d8fe0}

/* custom select style w3 school https://www.w3schools.com/howto/howto_custom_select.asp */
/*the container must be positioned relative:*/
.custom-select {position: relative;height: 40px;}
.custom-select select {display: none; /*hide original SELECT element:*/}
.select-selected, .selectperson-selected {background-color: #fff;height:100%;}

/*style the arrow inside the select element:*/
.selectperson-selected::after, .select-selected:after {position: absolute;content: "";top: 14px;right: 10px;width: 0;height: 0;border: 6px solid transparent;border-color: #fff transparent transparent transparent;}

/*point the arrow upwards when the select box is open (active):*/
.selectperson-selected.select-arrow-active:after, .select-selected.select-arrow-active:after {border-color: transparent transparent #fff transparent;top: 7px;}

/*style the items (options), including the selected item:*/
.selectperson-items div, .select-items div, .checkboxanimal-selected,
.selectperson-selected, .select-selected {text-align: center;color: #000;padding: 8px 16px;border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;cursor: pointer;user-select: none;}

.selectperson-items div, .select-items div {font-weight: 600;color: #0d8fe0;font-size: 16px;padding:16px;}

/*style items (options):*/
.selectperson-items, .select-items {position: absolute;background-color: #fff;top: 112%;left: 0;right: 0;z-index: 99;}

/*hide the items when the select box is closed:*/
.select-hide {display: none;}
.selectperson-items div:hover, .select-items div:hover, .same-as-selected {color:#fff;background:#569ff7;background-color: #0d8fe0;}

.selectperson-selected .fa-arrow-down, .select-selected .fa-arrow-down{position: absolute;right: 8px;top: 50%;transform: translateY(-50%);z-index:1}

.booking-info-container{margin: auto;}
.booking-info-container h2{color: #0d8fe0;font-weight: 700;font-size: 48px;}
.booking-info-container p{margin:0;font-size: 17px;margin-top: 0;margin-bottom: 34px;color: #555;font-family: arial;}

@media(min-width:1920px){
    .booking-info-container {width: 90%;}
}

.prevent-select-text {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#DivPeriod > div {
    position: relative;
    user-select: none;
    cursor: pointer;
}

#DivPeriod > div::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





.TastoBooking {
    width: 173px;
    background: rgb(255,0,0);
    background: -moz-linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,151,0,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,151,0,1) 100%);
    background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,151,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#ff9700",GradientType=1);
    border: 1px solid #ff0000;
    display: inline-block;
    cursor: pointer;
    font-family: PT Sans, Arial,Helvetica,sans-serif;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 5px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #333333;
}