/* Hide the "today" button of jQuery UI Date Picker */
button.ui-datepicker-current{
  display: none;
}

/* Hide the "close" button of jQuery UI Date Picker */
@media screen and (min-width:721px){
  button.ui-datepicker-close{
    display: none;
  }
}

/* Datepicker - title, make it central */
.ui-datepicker-title select{
  text-indent: 20%;
}

/*///////////////////////////making the calendar responsive////////////////////////*/
/* !important , override element style*/
@media screen and (max-width:720px){
  #datepicker-wo-datepicker, #ui-datepicker-div {
    width: 100% !important;
    position: fixed !important;
    z-index: 99999999 !important;
    top: 0 !important;
    left: 0px !important;
    background-color: white;
    overflow-x: hidden;
    height: 100%;
    right: 0;
  }

  .ui-datepicker-multi-2  div.ui-datepicker-group{
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
    border: 1px solid #E4E4E4;
  }

  .ui-datepicker .ui-datepicker-calendar td .ui-state-default, 
  .ui-datepicker .ui-datepicker-calendar td a{
    text-align: center;
    padding: .4em;
  }

  /*need to further check the compatible*/
  .ui-datepicker-title select{
    text-indent: 50%;
  }


}

/*//////////////////Hotel tabs css in below///////////////////*/


/*Package button - date field*/
button#wo-package-hotel-from-but:disabled, button#wo-package-hotel-to-but:disabled{
	background: #ebebe4;
}

.booking_search_daterange button#wo-package-hotel-from-but:disabled i.fa-calendar , 
.booking_search_daterange button#wo-package-hotel-to-but:disabled i.fa-calendar{
	background: #ebebe4;
}

/*  //////////Tab///////////  */


/* Style the tab */
.wo_search_tab {
  overflow: hidden;
  border: none;
  background: none;
}

/* Style the buttons inside the tab */
.wo_search_tab button {
  /*background-color: inherit;*/
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 8px;
  transition: 0.3s;
  font-size: 17px;
  border-radius: 10px 10px 0px 0px;
}

/* Change background color of buttons on hover */
.wo_search_tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */


button.wo_search_package_tab, button.wo_search_hotel_tab, button.wo_search_flight_tab {
border-width: 1px 1px 0px 1px;
border-style: solid;
background: #a5bbc3;
color:white;
width:33.33%;
}

.wo_search_tab button.active {
	background: #2293bb;
	color:white;
}


/* Style the tab content */
/*Apply to all tab_content*/
.wo_search_tab_content {
  display: none;
  /*padding: 6px 12px; */
  padding:	4%;
  border: 1px solid #ccc;
  border-top: none;
  /*whole formatting*/
  height: 350px;
  position: relative;
}



.wo_search_sub_tab_content {
	display: none;
	/*padding: 6px 12px;*/
	/*border: 1px solid #ccc;*/
	border-top: none;
  }


/* ////////////////////////Tab End & Input field////////////////////////////*/

.widget_wo_booking_search_box li.T_C_Select {
	width: 55%;
    margin: 0;
    float: left;
}

.widget_wo_booking_search_box li.T_C_Select_right {
	width: 45%;
    margin: 0;
    float: left;
}
/*Flight*/
#Search_Dcity0, #Search_Dcity0_P {
	width: 80%;
    padding: 7px 0;
	text-align: center;
	margin-right: 2%;
}

@media screen and (max-width:1150px){
	#Search_Dcity0, #Search_Dcity0_P {
		margin-right: 1%;
	}
}

@media screen and (max-width:890px){
	#Search_Dcity0, #Search_Dcity0_P {
		margin-right: -1px;
	}
}

@media screen and (max-width:720px){
	#Search_Dcity0, #Search_Dcity0_P {
		margin-right: 3%;
	}
}

@media screen and (max-width:350px){
	#Search_Dcity0, #Search_Dcity0_P {
		margin-right: 1%;
	}
}

#Search_Acity0 {
	width: 100%;
    padding: 7px 0;
    text-align: center;
}
/*Hotel*/
#Search_Hotel0{
	width: 100%;
    padding: 7px 0;
    text-align: center;    
}

/*package*/
#Search_Acity0_P {
	width: 100%;
    padding: 7px 0;
    text-align: center;
}

li.T_C_Select i.fa-exchange {
	max-width: 1%;
}

#sidebar .widget li.hotel_search_top{
	margin-top: 32px;
	width: 65%;
}

/*mobile input field*/

.mob_booking_input{
	font-size: 16px;
	width: 100%;
}

/*package-font size*/
.package-container label{
	font-size: 14px;
}

/* ////////////////////////Input field End & General setting////////////////////////////*/
div.widget_wo_booking_search_box li{list-style-type: none;}
/* ////////////////////////General setting End ////////////////////////////*/

#tab-demo{ width:350px; height:200px;}
#tab-demo > ul{ display:block; margin:0;list-style:none;}
.tab-title{list-style:none;}
#tab-demo > ul > li{ display:inline-block; vertical-align:top;font-family:'微軟正黑體'; margin:0 -1px -1px 0 ; border:1px solid #BCBCBC; height:25px; line-height:25px; background:#cdcdcd;padding:0 15px;list-style:none; box-sizing:border-box;}
#tab-demo >  ul > li a{ color:#000; text-decoration:none;}
#tab-demo > ul > li.active{ border-bottom:1px solid #fff; background:#fff;}
#tab-demo > .tab-inner{ clear:both; color:#000; border:1px #BCBCBC solid;}
.tab-inner{ padding:15px; height:50px;}

/*  //////////SubTab///////////  */
.wo_search_sub_tab{
    width: 34%;
    margin: 0px auto 15px auto;
}

.wo_search_sub_tab button.wo_search_sub_tablinks{
    width: 40%;
    font-size: 14px;
    border-radius: 10px;
	padding: 3px;
	background: white;
    color: black;
}
.wo_search_sub_tab button.active{
	width: 40%;
	font-size: 14px;
	background: #2293bb;
    color: white;
}
/*  //////////SubTab End///////////  */


/*  //////////Package checkbox///////////  */
.package-container, .package-container .round{
	float: left;
}

.package-container input[type=checkbox] { display:none; } /* to hide the checkbox itself */
.package-container input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

.package-container input[type=checkbox] + label:before { content: "\f10c"; } /* unchecked icon */
.package-container input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

.package-container input[type=checkbox]:checked + label:before { content: "\f058"; } /* checked icon */
.package-container input[type=checkbox]:checked + label:before { letter-spacing: 10px; } /* allow space for check mark */

/*  //////////Package checkbox End///////////  */


/*////////////////Package fix list/////////////////*/
.wg-tab {
    padding-left: 35px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d3dadf;
    height: 36px;
    font-size: 0;
    line-height: 0
}

.wg-panel>.wg-header .wg-tab {
    float: left;
    border-bottom-width: 0;
    border-bottom-style: solid;
    border-bottom-color: #d3dadf
}

.wg-tab>li {
    display: inline-block;
    *display: inline;
    *zoom:1;position: relative;
    height: 100%;
    line-height: 36px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    color: #686a6c;
    font-size: 14px
}

.wg-tab>li>a {
    display: block;
    padding: 0 20px;
    line-height: 16px;
    margin-top: 10px;
    color: #686a6c;
    text-decoration: none
}

.wg-tab>li+li>a {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #686a6c
}

.wg-tab>li.wg-active {
    margin-bottom: -1px;
    border-color: #d3dadf;
    border-bottom-color: #fff;
    background-color: #fff;
    color: #17a1dd
}

.wg-tab>li.wg-active>a {
    color: #17a1dd;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: transparent
}

.wg-tab>li.wg-active+li>a {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: transparent
}

.wg-tab>li.wg-active>a {
    margin-top: 9px
}

/*equivalent to wg-city-list, for displaying*/
.wg-tab-body {
    display: none
}

.wg-tab-body .wg-container {
    width: auto
}

.wg-tab-body.wg-active {
    display: block
}

.wg-tab.wg-sub-tab {
    padding-left: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d3dadf;
    height: 46px
}

.wg-tab.wg-sub-tab>li {
    margin-right: 3px;
    border-color: #17a1dd;
    background-color: #17a1dd;
    color: #fff;
    line-height: 46px
}

.wg-tab.wg-sub-tab>li>a {
    border-left: none!important;
    border-left-width: none;
    border-left-style: solid;
    border-left-color: #d3dadf;
    margin-top: 0;
    border-top: 5px solid transparent;
    line-height: 41px;
    color: #fff
}

.wg-tab.wg-sub-tab>li.wg-active {
    background-color: #fff;
    border-color: #d3dadf
}

.wg-tab.wg-sub-tab>li.wg-active>a {
    border-top-color: #6ccc5c;
    color: #686a6c
}

.wg-tab.wg-sub-tab>li.wg-active+li>a {
    border-left: none!important;
    border-left-width: none;
    border-left-style: solid;
    border-left-color: #d3dadf
}
.wg-city-selector {
    background: #fff;
    border: 1px solid #d3dadf;
    border-top: 4px solid #7ada11;
    position: absolute;
    z-index: 9999;
    padding: 10px 15px;
    width: 575px;
    display: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,.1)
}

.wg-city-selector div.wg-body {
    border: none;
    padding: 0
}

.wg-city-selector .wg-tab {
    padding-left: 0;
    margin-top: 10px
}

.wg-city-selector .wg-city-list {
    padding: 15px 0
}

.wg-city-selector .wg-city-list>li {
    float: left;
    padding: 0 5px;
    width: 60px;
    line-height: 26px;
    white-space: nowrap;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    list-style: none;
}

.wg-city-selector .wg-city-list>li:hover {
    background-color: #caeaf8;
}

.wg-city-selector .wg-city-list .wg-wider-char {
    width: 130px;
}

/*add a///////////////////////////*/

.wg-city-selector .wg-city-list-a {
    padding: 15px 0
}

.wg-city-selector .wg-city-list-a>li {
    float: left;
    padding: 0 5px;
    width: 60px;
    line-height: 26px;
    white-space: nowrap;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    list-style: none
}

.wg-city-selector .wg-city-list-a>li:hover {
    background-color: #caeaf8
}

.wg-city-selector .wg-city-list-a .wg-wider-char {
    width: 130px
}

/*////////////////Package fix list End/////////////////*/



/*Default of the jquery-ui - datepicker, mobile in wo-hotel-datepicker.css*/
/* for the position */
.wo-search-daterangepicker {
	float: left;
}

/* for datepicker font-size */
#ui-datepicker-div{
	font-size: 14px;
    line-height: 1;
}

/*For the datepicker color*/
.ui-datepicker-year, .ui-datepicker-month{
	color: white;
}

select.ui-datepicker-month{
	color:  #1799d5;
}
#ui-datepicker-div .ui-datepicker-header{
	background:  #1799d5;
}

.ui-widget-content .dp-highlight a.ui-state-active{
	background: #007fff;
	border:1px solid #cccccc;
}

/*need to change all input*/
@media screen and (max-width:720px) and (min-width: 360px){
	input.hasDatepicker, form.flight_passenger_display input, input.ui-autocomplete-input {
		font-size: 16px;
	}
}

/*For the selected date range*/
.ui-widget-content .dp-highlight .ui-state-default {
	background: #2faee9;
	color: #FFF;
  }
 
  .ui-datepicker-multi .ui-datepicker-group {
  float:none;
  }
/*For the selected date range End*/


/*Amending the hover color while selecting date*/
.ui-widget-content .dp-highlight .ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}

/* Auto complete, default list & else  */
/*Autocomplete likesearch css*/
@media screen and (max-width:720px){
	.ui-menu {
		width: 100% !important;
		position: fixed !important;
		z-index: 99999999 !important;
		top: 92px !important;
		left: 0 !important;
		background-color: #fff;
		overflow-x: hidden;
		height: 100%;
		right: 0;
	}
}

.ui-autocomplete-category{
	background: #2293bb;
}

/*mob back header*/
.wo_mob_back{
	text-align: center;
    background: #1799d5;
    color: white;
	padding: 15px;
	display: none;
}

.wo_book_back{
	float: left;
    color: white;
    background: #1799d5;
	border: none;
	display: none;
}

@media screen and (min-width:721px){
	.mob_booking_input{
		display: none;
	}
}

#default_flight_list, #default_flight_list_a {
	position: relative/*absolute*/;
	left: 0px;
	top: 0px;
	z-index: 99999;
	background: white;
  }

  #default_package_list_a{
	position: relative;
  }

  
  .wg-header .area_hd{
	color: #b7bfc5;
  }

  @media screen and (max-width:720px){
	  /*if default_flight_list need control, use back relative, & left : __ px */
	/*#default_flight_list{
		position: initial;
	}*/

	.wo_mob_back{
		text-align: center;
		background: #1799d5;
		color: white;
		padding: 15px;
		display: block;
	}
	
	.wo_book_back{
		float: left;
		color: white;
		background: #1799d5;
		border: none;
		display: block;
	}

	

	/*likesearch z-index*/
	.ui-autocomplete {
		z-index: 99999999999 !important;
   }
	
	
	#default_flight_list,#default_flight_list_a,#default_flight_list_h ,#default_package_list, #default_package_list_a, div.flight_passenger_list {
	/*	position: relative;
		left: 150px;*/

		width: 100% ;
		position: fixed ;
		z-index: 99999999 ;
		top: 0 ;
		left: 0px ;
		background-color: white;
		overflow-x: hidden;
		height: 100%;
		right: 0;
	}
	/*for flight hd , package hd, package body*/
	.pop_sel_city_list div.area_hd , div.wg-header, div.wg-body {
		padding-left: 20px;
	}
	div.wg-header ul.wg-tab li{
		width: 24%;
	}


	  /*Package list responsive-mob*/
	  /*other @ 56-474*/


	   ul.wg-tab li a {
		   padding: 0 10px;
	   }

	   div.wg-city-selector{
		   width:100%;		   
	   }

	   .pop_sel_city_list div.area_hd {
		width: 100%;

	  }
	  .pop_sel_city_list div.area_list {		
		width: 100%;
	  }

  }

  .pop_sel_city_list {
	/*width: 342px;*/
	border-radius: 3px 0 0 3px;
	border-top: 2px solid #71da1c;
	position: absolute;
	background-color: #ffffff;
	box-shadow: 0 2px 10px rgba(210, 210, 210, 0.5);
	z-index: 999;
	right:0;
  }

  .pop_sel_city_list h4{
	margin: 14px 0 14px 16px;
  }


  .pop_sel_city_list .area_hd {
	width: 300px;
	font-size: 14px;
	margin: 0 auto;
	padding: 10px 0 10px 0;
	border-bottom: 1px solid #d3dadf;
	color: #b7bfc5;
  }
  .pop_sel_city_list .area_list {
	overflow: hidden;
	width: 327px;
	padding: 0 0 6px 16px;
	margin: 0 0 14px 0;
	border-bottom: 2px solid #f0f3f4;
  }

  .pop_sel_city_list .area_box a {
	overflow: hidden;
	float: left;
	padding-left: 4px;
	line-height: 22px;
	color: #686a6c;
	font-size: 14px;
	width: 59px;
	height: 22px;
	margin: 0 0 10px 0;
	display: block;
	text-decoration: none;
  }

  /*package list*/
  .wg-city-selector .wg-tab li{
	margin-left: 0px;
  }

   .widget li.flight_passenger_box {
	  margin-left: 0px;
	  margin-right: 2px; /* offset the border box */
	  float: left;
	  /*position: relative;*/
  }

  .flight_passenger_display{
	  display: flex;
	  flex-direction: row;
	  float: left;
	  width: 80%;
	  margin-right: 20%;
	  border: 1px solid #E4E4E4;
	  align-items:center;
	  justify-content:center;
	  /*position: static;*/
  }



  #WoSearchHotel .hotel_guest_display{
	  width: 40%;
  }

  .flight_passenger_list{
	  position: absolute;
	  top: 28px;
	  z-index: 9999999999;
	  background:white;
  }

  @media screen and (max-width: 731px){
	.flight_passenger_list{
		top: 56px;
	}
  }
  @media screen and (max-width: 720px){
	.flight_passenger_list{
		top: 28px;
	}
  }


  .flight_passenger_display span{
	  width:100%;
	  margin-right:5%
  }
  
  /*including both flight & hotel*/
  .flight_passenger_display input {
	display: block;
	float: left;
	width: 30%;
	border: none;
	text-align: center;
	padding: 7px 0px;
}
.flight_passenger_display label {
	display: block;
	float: left;
	width: 20%;
	font-size: 14px;
	padding: 4px 0px;
	text-align: left;
}

  /*package passenger box*/
  form.package_guest_display{
	display: flex;
	flex-direction: row;
	float: left;
	width: 100%;
	margin-right: 20%;
	border: 1px solid #E4E4E4;
	align-items:center;
	justify-content:center;
	/*position: static;*/
}

form.package_guest_display span{
	width:100%;
	margin-right:0;
}

form.package_guest_display input {
	display: block;
	float: left;
	width: 10%;
	border: none;
	text-align: center;
	padding: 7px 0px;
}
form.package_guest_display label {
	display: block;
	float: left;
	width: 20%;
	font-size: 14px;
	padding: 4px 0px;
	text-align: left;
}

@media screen and (max-width:885px){
	.flight_passenger_display input  {
		font-size: 12px;
		padding: 5px 0px;
	}
	.flight_passenger_display label {
		font-size: 12px;
		
	}
}

.widget li.flight_passenger_box button.fa-chevron-circle-down::before{
	padding-right: 3px;
    border-left: 1px solid #E4E4E4;
    padding-left: 3px;
}

.widget li.flight_passenger_box button.fa-chevron-circle-down{
	border:0;
	background: white;
	color: #909090;
	padding-right: 0;
}

.flight_no_of_passenger{
	display: flex;
    flex-direction: row;
    float: left;
    width: 100%;
    /*margin-right: 20%;*/
    border: 1px solid #E4E4E4;
    align-items: baseline;
    justify-content: center;
}

.search_box_row label{
	font-size: 16px;
	width:20%;
	text-align: center;
	margin-right: 2%;
}
.search_box_row label.reminder{
	font-size: 12px;
	width:38%;
	text-align: left;
}

.search_box_row input{
	width:19%;
	padding: 0;
    text-align: center;
	margin: 7px 0px;
	background-color: white;
}

.search_box_row .first_label{
	margin-left:2%;
}

.search_box_row .last_button{
    margin-right: 2%;
}


.widget_wo_booking_search_box .flight_no_of_passenger button{
border:0;
background: white;
color: #909090;
}

.widget_wo_booking_search_box .flight_no_of_passenger button:disabled{
	border:0;
	background: white;
	color: #d9d9d9;
	}

	.wo_warning_box{
		bottom: 0;
		left: 0;
		right: 0;
		position: absolute;
		margin-bottom: 53px;
		text-align: center;
		color:#ff8d27;
		height: 24px;
		overflow: hidden;
		font-size: 12px;
	}

	.wo_package_guest_warn, .wo_flight_guest_warn{
		text-align: center;
		color:#ff8d27;
		font-size: 12px;
	}

	@media screen and (min-width:721px){
		.wo_package_guest_warn, .wo_flight_guest_warn{
			display: none;
		}
	}

	#flight_search_button, .booking_search_button{
	border-radius: 12px;
    border: none;
    padding: 5px 0px;
    width: 70%;
    transform: translateX(+22%);
    background: #ff8d27;
	color: white;
	font-size: 18px;
	/*Adding the formating*/
	bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin-bottom: 15px;
}

.booking_search_button i.fa-search {
	margin-right: 10px;
}

form.search_box_display, form.search_box_display input, form.search_box_display label, form.search_box_display button, .booking_search_button, .booking_search_button i, .booking_search_button label {
	cursor: pointer;
}

/* 出發地 目的地 font-awesome */
.T_C_Select .fa-map-marker{
	float: left;
	margin-right: 2px;
	color: #909090;
}

/*Other CSS, from daterangepicker.min.css*/

.widget_wo_booking_search_box li.wo-search-daterangepicker{width: 100%;margin: 10px 0 10px 0;} .wo-search-daterangepicker #flight-daterange{width: 100%;}.second_daterange_field{width: 45%;float: right;padding-right: 2px;}.first_daterange_field{width: 45%;float: left;margin-right: 7%;}.date_range_input_field_1{margin: 7px 0px; width: 100%;padding: 0;}.date_range_input_field_2{margin: 7px 0px; width: 100%;padding: 0;}#flight_daterange button{border: 1px solid #E4E4E4;background: white;padding: 0;}.booking_search_daterange button input{border-left:0;border-top:0;border-bottom:0;border-right: 1px #909090 solid;width: 70%;}.booking_search_daterange button i.fa-calendar{border-radius:50%;background: #909090;box-shadow: 0px 0px 2px #888;padding: 0.3em;margin-left:0.3em;}@media screen and (max-width:1050px){.booking_search_daterange button i.fa-calendar{margin-left:0;}}@media screen and (max-width:900px){.booking_search_daterange button i.fa-calendar{margin-left:-2px;}}@media screen and (max-width:720px){.booking_search_daterange button i.fa-calendar{margin-left:0.3em;}}@media screen and (max-width:320px){.booking_search_daterange button i.fa-calendar{margin-left:-2px;}}.booking_search_daterange button i.fa-calendar::before{border-left:1px solid #E4E4E4;}select.ui-datepicker-month{padding:1px;}.ui-datepicker-group .ui-datepicker-header{margin: 0 .4em .4em;}