﻿#container-booking{position:relative;z-index:3;padding:0 16px}
/*#barra-booking{overflow:hidden;transition:max-height .4s;max-height:0;}*/
#barra-booking-inner{padding:6px 13px}
#label-prenota{font-family:'Josefin Sans';background:#EF902E;padding:6px 0 6px 16px;margin:0;display:inline-block;width:100%;text-align:left;position:relative;z-index:1}
#btn-barra-booking{padding:0px 16px;cursor:pointer;}
#btn-barra-booking {
    /*background:#EF902E;position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 44%);border-radius: 50%;z-index: 0;padding: 21px 32px 0;font-size: 24px*/
    background: #EF902E;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%) rotate(45deg);
    z-index: 0;
    padding: 21px 22px;
    font-size: 24px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 0 0 15% 0;
}  
#btn-barra-booking i{color:#fff;transform:rotate(-45deg);font-size:32px}
#modifica-prenotazione-help-container{width:100%;/*padding:0px 0 6px*/}
.btn-cerca{outline:none;cursor:pointer;width:100%;padding:8px 16px;display:inline-block;border:none;color:#fff;background-color:#329BD1;text-decoration:none;font-size:12px;}
.btn-cerca:hover{background-color:#fff;color:#329BD1}
.btn-modifica-prenotazione,.btn-help {text-transform:uppercase;text-decoration: none;color:#fff;padding:0 4px;cursor:pointer;display:block;font-size:12px;width:100%;padding:4px 0;font-family:'Josefin Sans'}
.btn-modifica-prenotazione:hover,.btn-help:hover {color: #000 }
.btn-help{font-weight:bold;display: inline-block;}

/* The container must be positioned relative: */
.custom-select {position: relative;font-family:'Josefin Sans',sans-serif,serif}
.custom-select select {display: none; /*hide original SELECT element: */}
.select-selected {white-space:nowrap;border-color:#329BD1 !important;border:2px solid;color: #329BD1;padding: 8px 16px;border: none;border-color: transparent #329BD1 #329BD1 #329BD1;cursor: pointer;background-color:#ffffff;}
/* Style the arrow inside the select element: */
.select-selected:after {position: absolute;content: "";top: 10px;right: 10px;width: 0;height: 0;border: 6px solid transparent;border-color: #329BD1 transparent transparent transparent;}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {border-color: transparent transparent #329BD1 transparent;top: 7px;}
/* style the items (options), including the selected item: */
.select-items div{color: #329BD1;padding: 8px 16px;border: none;cursor: pointer;background:#fdf5e6}
/* Style items (options): */
.select-items {position: absolute;top: 100%;left: 0;right: 0;z-index:1;padding:0 3px}
/* Hide the items when the select box is closed: */
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {background-color: #329BD1;color:#fff;}

.custom-select,.container-fake-input,.container-coupon{display:inline-block;width:100%;font-size:12px;margin-bottom:6px}
#DivPartenza,#DivArrivo{font-family:'Josefin Sans',sans-serif,serif}
#DivArrivo{width:50%;padding:0 3px 0 0}
#DivPartenza{width:50%;padding:0 0 0 3px}

.fake-input,.coupon{width:100%;padding:8px 16px;display:inline-block;border:none;color:#329BD1;background-color:#fff;outline:none;}



.info-date{text-align:left;}
#modifica-prenotazione-help-container{padding: 6px 0 6px 16px;}
.btn-modifica-prenotazione{padding:16px 0 4px;}





@media(min-width:450px) {
    #DivPersone,#DivBambini, #DivBambiniMulti,#DivNeonati,#DivBambiniGrandi{width:33.33%;padding:0 3px;}
    #DivTipologia, #DivPartenza, #DivArrivo {width: 33.33%;padding:0 3px}
    #DivCoupon, #DivCerca{width:50%;padding:0 3px}
    #ui-datepicker-div {top: 215px !important}
    /*#modifica-prenotazione-help-container{padding:0}*/
    #label-prenota{font-size:17px;padding:8px 0 8px 13px;}
    /*.btn-modifica-prenotazione,.btn-help{padding:0;}*/
}


@media(min-width:768px){
    #DivPersone,#DivBambini,
    #DivBambiniMulti,#DivNeonati,#DivBambiniGrandi{width:25%;}
    #DivTipologia, #DivPartenza, #DivArrivo {width: 25%;}
    #DivCoupon, #DivCerca{width:25%}
    #controlli-booking-container {position: absolute;right: 16px;top:45px;transform: translate(0%,-50%);-ms-transform: translate(0%,-50%);z-index:1}
    #barra-booking-inner{padding:48px 0 6px}
    #ui-datepicker-div {top: 198px !important}

    #modifica-prenotazione-help-container{padding:0}
    .btn-modifica-prenotazione,.btn-help{padding:0;}
    .info-date{text-align:right}
}


@media(min-width:1280px){ 
    #controlli-booking-container {position: absolute;top: 50%;right: 0%;transform: translate(0%,-50%);-ms-transform: translate(0%,-50%);z-index:1}
    #container-booking-inner{margin:auto;width:1200px;position:relative}
    .custom-select, .container-fake-input,#DivCerca,.container-coupon{width:11.11%}               
    #DivTipologia, #DivArrivo, #DivPartenza, #DivCoupon, #DivCerca, #DivPersone, #DivBambini,
    #DivBambiniMulti, #DivNeonati, #DivBambiniGrandi{width:11.11%}
    #ui-datepicker-div {top: 140px !important}
    #barra-booking-inner{padding:24px 0 6px}
    #label-prenota{font-size:15px}
    #barra-booking{width:1200px}

    .select-selected{padding:4px 4px}
    .fake-input, .coupon{padding:4px 4px}
    #barra-booking-inner{padding:6px 0 6px}
    .btn-cerca{padding:4px 16px}
    #label-prenota{padding:0;padding-top:8px;text-align:left}
    #DivHelp{width:36.5px;padding:0 3px;}
    #DivModificaPrenotazione{width:36.5px;padding:0 3px;}
   #DivTipologia{width:110px;}
    #DivArrivo{width:90px;}
    #DivPartenza{width:90px;}
    #DivPersone{width:95px;}
    #DivBambini{width:125px;}
    #DivBambiniGrandi{width:130px;}
    #DivNeonati{width:125px;}
    #DivCoupon{width:90px;}
    #DivCerca{width:auto;}
}

@media(min-width:1366px){
    #container-booking{padding:0}
    #barra-booking{width:1130px;}
    .custom-select, .container-fake-input,.container-coupon{width:11.11%}               
    #DivTipologia, #DivArrivo, #DivPartenza, #DivCoupon, #DivCerca, #DivPersone, #DivBambini,
    #DivBambiniMulti, #DivNeonati, #DivBambiniGrandi{width:11.11%}
    #DivCerca{width:auto;}
}

@media(min-width:1533px){
    #barra-booking{width:1200px}
    #ui-datepicker-div {top: 150px !important}
}




