/*Button*/
.reservations {height: 80px; margin-left: auto !important; padding: 0 !important; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; z-index: 250; position: relative;}
.reservations .collapse {display: block;}
.reservations .dropdown-toggle:after{content: none}

.reservations .button {float:right;}
	.reservations .button button{font-size:1.4rem; font-family:'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';}
	.th .reservations .button button{font-size: 1.6rem}
    .reservations .button button.booking-avail{background:#6daca4; outline:none; position:relative; text-align:center; margin:0; padding:20px; overflow: hidden; color:#fff; }
	.reservations .button button.booking-avail:hover{cursor:pointer}
	
	.reservations .button button.show-mobile{font-size:1.6rem; padding:32px 30px;}
	.th .reservations .button button.show-mobile{font-size:1.7rem; padding:32px 27px;}
	
    /*button:before (attr data-hover)*/
    .reservations .button button.booking-avail:hover:before{opacity: 1; transform: translate(0,0);}
    .reservations .button button.booking-avail:before{background:#3a616d; content:attr(data-hover); position:absolute; left:0; top:0; padding:15px 0; width:100%; height:90px; text-align:center; opacity:0; transform:translate(-100%,0); transition: all .3s ease-in-out;}
    /*button div (button text before hover)*/
    .reservations .button button.booking-avail:hover div{opacity: 0; transform: translate(100%,0)}
    .reservations .button button.booking-avail div{transition: all .3s ease-in-out;}
	
	/*Button - x close*/
	.reservations .button button.booking-close{opacity:1; background:#fff; width:80px; height:80px; text-indent:-99999em; margin:0; padding:35px;}
	.reservations .button button.booking-close:hover {background:#f08f6c;}
		
	.reservations .button button.booking-close:before, .reservations .button .booking-close:after {content:'';  position:absolute; top:20px; left:40px; height:40px; width:2px; background-color:#000;}
	.reservations .button button.booking-close:before { transform: rotate(45deg);}
	.reservations .button button.booking-close:after {transform: rotate(-45deg);}
	.reservations .button button.booking-close	:before{padding:0; opacity:1}
	.reservations .button button.booking-close:hover:before, .reservations .button .booking-close:hover:after{background-color: #fff;}

	.reservations .button button.close-btn.show-mobile.booking-avail:before{background:#fff; content:none;}

.reservations .navbar-nav .nav-link{padding: 0!important}
/** booking overlay **/
.loading-wrap {position:fixed; text-align: center; width: 100vw; height: 300vh; top: -90px; right:0; left:0; bottom:0; background-color: rgba(0,0,0,.85); z-index: 200}

/*New booking overlay*/
/*.reservations:after{content: ''; top: 0;right: 0;bottom: 0;left: 0;transition: opacity .15s ease-in-out;opacity: 0;visibility:hidden;background-color: rgba(0,0,0,.7);pointer-events: none;  }
	.reservations.show .nav-link{	position:relative; z-index:200; }
	.reservations.show:after{z-index:10; opacity:1; visibility:visible;	position: fixed; width: 5000px;height: 5000px;top: -40px;right: 0;left: 0; text-align: center;}*/
						 
/*button - Check + Close*/
.mega-bookingmask .booking-button{margin:15px;}	

	/*Button - Check Availability*/
	.mega-bookingmask .booking-check{width:100%; background:#000; padding: 24px; font-family:'Graphik', 'Roboto', Arial, 'Noto Sans Thai', 'YouYuan'; font-size: 1.8rem; color: #fff; text-align: center;}
	.mega-bookingmask .booking-check:hover{background: #2d637f;}
	
	/*Button - x close*/
	/*.mega-bookingmask .booking-button .booking-close{display:none}*/
	
	/*Show - when click check availability*/	
	.mega-bookingmask .booking-close{float:right; position:relative; background-color:#222; display:block; width:70px; height:70px; text-indent:-99999em; padding:31px;  opacity:1;}
	.mega-bookingmask .booking-close:hover {background:#f2aba5;}
	
	.mega-bookingmask .booking-close:before, .mega-bookingmask .booking-close:after {content:''; background-color:#fff; position:absolute; top:19px; left:34px; width:2px; height:32px;}
	.mega-bookingmask .booking-close:before { transform: rotate(45deg);}
	.mega-bookingmask .booking-close:after {transform: rotate(-45deg);}
	.mega-bookingmask .booking-close	:before{padding:0; opacity:1}
	
/*Booking Mask*/
.dropdown-menu.mega-bookingmask{position:fixed!important; top:45px!important; left:84px!important; right:0; background:#efefef; min-width:100vw; width:100vw; height:2000vh; padding:0; box-sizing:border-box; border:0; border-radius:0; font-size: 1.6rem; -webkit-overflow-scrolling: touch;}

.mb-stepname, .stepname{background:#113658; color:#fff; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; align-content:stretch; padding:15px;}
	.mb-stepname .icon-back, .stepname .icon-back{width:50px; height:50px; text-align:center}
	.mb-stepname .icon-back a, .stepname .icon-back a{display:block; color:#fff; width: 50px; height: 50px; line-height: 50px;}
	.mb-stepname .icon-back .fa, .stepname .icon-back .fa{font-size:3rem; line-height: 50px;}
	
	.mb-stepname .name, .stepname .name{text-align:center; line-height: 50px; padding:0 15px}
	.mb-stepname .name h6, .stepname .name h6{font-family:'Roboto', Arial, 'Noto Sans Thai', 'YouYuan'; font-size:1.6rem; line-height: 50px; color: #fff; margin:0}

.bookingmask{margin:20px 0}
	.bookingmask .select{position:relative; background:#fff; width:100%; margin:15px 0; padding:0; border-radius: 3px; display:block; cursor:pointer;}
	
	/*Select Hotel*/
	.easy-autocomplete{width:100%!important}
	.easy-autocomplete-container{z-index: 3!important;}
	.easy-autocomplete-container ul{height:500px;}
	.easy-autocomplete input{box-shadow:none}
	.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {padding:17px 12px}
	.easy-autocomplete-container ul li.selected div {color: #7ea0c4!important;}
	.easy-autocomplete-container ul li div {font-family: 'Roboto', 'Noto Sans Thai', 'YouYuan', 'Microsoft Sans Serif'; color:#6d6d6d !important;}
	
	/*old*/
	.bookingmask .select h5, .bookingmask .select h6{display:none}
	.bookingmask .icon-search{background-image:url('https://storage.mosaic-collection.com/icon/sprite_bookingmask.svg'); background-position:0 0; width:25px; height:25px; position:absolute; top:calc(50% - 12px); left:12px; display:inline-block; z-index:1}
	
	.pulldown {position:absolute; background-image: url('https://storage.mosaic-collection.com/icon/arrow-bullets-open.svg'); background-repeat: no-repeat; background-position:5px; display:inline-block; width:30px; height:30px; }	
	.bookingmask .pulldown{top:16px; right:10px}
	
	/*New icon*/
	/*.bookingmask .sel_dest:before{content:''; background-image:url('https://storage.saffron-collection.com/icon/sprite_bookingmask.svg'); background-position:0 0; width:25px; height:25px; position:absolute; top:calc(50% - 12px); left:12px; display:inline-block; z-index:1}*/
	.bookingmask .sel_chkin-out:before{content:''; background-image:url('https://storage.mosaic-collection.com/icon/sprite_bookingmask.svg'); background-position:-25px 0; width:25px; height:25px; position:absolute; top:calc(50% - 12px); left:12px; display:inline-block; z-index:1}
	.bookingmask .sel_guest:before{content:''; background-image:url('https://storage.mosaic-collection.com/icon/sprite_bookingmask.svg'); background-position:-50px 0; width:25px; height:25px; position:absolute; top:calc(50% - 12px); left:12px; display:inline-block; z-index:1}
	.bookingmask .sel_promocode:before{content:''; background-image:url('https://storage.mosaic-collection.com/icon/sprite_bookingmask.svg'); background-position:-75px 0; width:25px; height:25px; position:absolute; top:calc(50% - 12px); left:12px; display:inline-block; z-index:1}
	
	.bookingmask input{width:100%; border:0; color:#333; background: transparent; padding:20px 20px 20px 45px; cursor:pointer; display:block}	
		.bookingmask input::-webkit-input-placeholder {color:#555;}
		.bookingmask input:-moz-placeholder {color:#555; opacity:1;}
		.bookingmask input::-moz-placeholder {color:#555; opacity:1;}
		.bookingmask input:-ms-input-placeholder {color:#555;}
		.bookingmask input::-ms-input-placeholder {color:#555;}
		.bookingmask input::placeholder {color:#555;}
	
	.bookingmask .select .box_wrapper{margin:0 auto; padding:0; position:relative; display: block}	
	.bookingmask .sel_promocode input:before{display:inline-block;}	

	/*check in-out*/	
	.bookingmask .sel_chkin-out{display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; align-content:stretch; margin:0; padding:10px 0;}
		.bookingmask .icon-next{background-image:url('https://storage.shama.com/icon/arrow-next.svg'); width:20px; height:20px; display:inline-block; position: absolute; top:calc(50% - 10px); left: 50%; z-index: 2;}		
	
	.bookingmask .select.sel_chkin, .bookingmask .select.sel_chkout{background:transparent;}
	.bookingmask .select.sel_chkin{position:relative;margin:0 0 0 25px;width:calc(50% - 25px);}	
	.bookingmask .select.sel_chkout{position:relative; width:49%; margin:0;}			
	.bookingmask .select.sel_chkin-out:after{content:''; background-image:url('https://storage.shama.com/icon/arrow-next.svg'); width:20px; height:20px; display:inline-block; position: absolute; top:calc(50% - 10px); left: calc(50% - 5px);; z-index: 2;}
		
		
		.bookingmask .sel_chkin .box_inout, .bookingmask .sel_chkout .box_inout{width:100%; text-align:center}
		
		.bookingmask .text-check{width:100%; border:0; padding:22px 5px; color:#333; cursor:pointer; display:none}		
		.bookingmask .text-date{display:block; text-align: center; margin: 7px 0; overflow: hidden;}		
			.bookingmask .day{font-size:5.4rem; color:#464d7b; line-height:1; font-weight:500; display:inline}
			.bookingmask .month{font-size:1.2rem; line-height:1.2; color: #777; padding:12px 5px; display:inline}
	
	/*select guest*/	
	.bookingmask .sel_guest{padding:15px 0}
	.bookingmask .sel_guest .pulldown{top:0; right:10px}
	.bookingmask .sel_guest .guests-info{margin: 0; padding:22px 22px 22px 43px;font-weight: 400; color: #333;}
	.bookingmask .sel_guest .guests-info, .bookingmask .sel_guest .room-info {padding: 3px 10px 3px 50px; text-align: left;}
	.bookingmask .sel_guest .room-info {color:#8d9ca0; line-height: 1;}
	
	/*Select Rooms & Guests*/	
	.guests-flyout_container{position:fixed; top:-80px; left:0; background:#fff; width:100vw; height:100vh; padding:0; font-size:1.6rem; border-radius:0; -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.15); box-shadow: 0 2px 16px rgba(0,0,0,0.15);  z-index: 999;}
	.guests-flyout_container .header{background:#5b97aa; padding:15px;}
	.guests-flyout_container .header b{font-family:'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; line-height:2; color: #fff; margin:0}
	
		.guest-quantity-selection_container{display:table; width:100vw; padding:5px 20px; border-collapse:separate; border-spacing:0 1.6rem; color:#6d6d6d; text-align:left;}	
		.guest-quantity-selection_container input{box-shadow:none}
		.guest-quantity-selection_container>div div.quantity-selection_container{display:table-row}
		
		.guest-quantity-selection_container>div .quantity-selection_container>span,.guest-quantity-selection_container>div .quantity-selection_wrapper{display:table-cell; width:100px; vertical-align:middle}
		
		.quantity-selection_container{display:inline-block}
		.quantity-selection_container h6{margin-bottom:.5rem}
		.quantity-selection_container h6:empty{display:none}
		.quantity-selection_container .input-field_label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
		.quantity-selection_container .input-field_container label{padding:0}
		.quantity-selection_container .input-field_container input{padding-top:0}
		.quantity-selection_wrapper{max-width:250px;position:relative}
		.quantity-selection_wrapper button:first-child{top:0;bottom:0;position:absolute;width:30%;padding:0;border-top-left-radius:3px;border-bottom-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:3px;line-height:3.5em}
		
		.quantity-selection_wrapper input{text-align:center}
		.quantity-selection_wrapper button:last-child{top:0;bottom:0;position:absolute;width:30%;padding:0;border-top-left-radius:0;border-bottom-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:0;line-height:3.5em}
		
		html[dir=ltr] .quantity-selection_wrapper button:first-child{left:0}
		html[dir=rtl] .quantity-selection_wrapper button:first-child{right:0;border-top-left-radius:0;border-bottom-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:0}
		
		html[dir=ltr] .quantity-selection_wrapper button:last-child{right:0}
		html[dir=rtl] .quantity-selection_wrapper button:last-child{left:0;border-top-left-radius:3px;border-bottom-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:3px}
	
	.guests-flyout_container .apply{background-color:#6daca4; font-family:'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:2rem; color: #fff; text-align: center; margin: 15px; padding: 25px; width: calc(100% - 30px); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s; border-radius:3px; cursor:pointer}
	.guests-flyout_container .apply:hover{background-color: #3a616d;}
	
	
	/*	.criteria-container_childField{display:table-row}
		@media (max-width:1024px){
		.criteria-container_childField{display:block;width:100%;max-width:250px;padding:0 1rem 1rem 0}html[dir=rtl] .criteria-container_childField{padding:0 0 1rem 1rem}
		}
		@media (max-width:767px){
		.criteria-container_childField{padding:0 0 1rem}
		}
		.criteria-container_childField>div{display:table-cell}
		@media (max-width:1024px){
		.criteria-container_childField>div{display:block}
		.criteria-container_childField>div:first-child{display:none}
		}
		.criteria-container_childField .criteria-container_select_container{display:table-cell}
		@media (max-width:1024px){
		.criteria-container_childField .criteria-container_select_container{display:block}
		}*/
	
	/*Result*/
	.result.bookingmask{display:none}
	
/*Calendar*/	
	.date-caption,  .big-date-txtchkIn, .big-date-txtchkOut {font-family: 'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';}	
	/** hide arrow that's not use**/
	/*.datepicker__month-button.datepicker__month-button--prev.fa.fa-angle-left.datepicker__month-button--disabled, .datepicker__month-button.datepicker__month-button--next.fa.fa-angle-right.datepicker__month-button--disabled {display: none;}*/
	
	.style-date-right {height: 56px !important;}	
	/*.datepicker__topbar:after {width: 0;height: 0;border-style: solid;border-width: 0 40px 40px 40px;border-color: transparent transparent #ffffff transparent;content: "";margin-left: 13%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;}
	.datepicker__topbar.move-arrow:after {-webkit-transform: translate(3em,0);-moz-transform: translate(3em,0);-o-transform: translate(3em,0);-ms-transform: translate(3em,0); transform: translate(3em,0); margin-left: 68%;}*/
	
	.header-top.show-desktop.opacity {opacity: .3;}
	.big-date {text-align: center; display:inline-block; width:100%;}
		.big-date .fa-arrow-circle-right,.big-date .fa-chevron-right {font-size: 30px;	position: absolute;	left: 47%;	top: 50px}
	.big-date-checkin, .big-date-checkout {	width: 50%; float: left; margin-top: 10px}	
	.big-date-indaynum, .big-date-indaynum-bookingmask, .big-date-outdaynum, .big-date-outdaynum-bookingmask {width:55%; float:left; font-family:'Roboto', 'Noto Sans Thai', 'YouYuan'; font-size:4em; line-height:1; font-weight: bold; text-align: right}	
	.style-date-left, .style-date-left-bookingmask, .style-date-right, .style-date-right-bookingmask {float: left;text-align: left;font-size: 10px;line-height: 12px; padding-top:20px;padding-left:5px}
	.style-date-left, .style-date-right {color: #fff}		
	#datepicker-input-id-mask .fa-long-arrow-right {margin-top: 0}
	.fa-long-arrow-right:before {position: absolute;top: 50px;left: 48%;font-size: 2em}


/*New Carlendar*/
#datepicker-input-id {top:0; left:calc(100% - 100vw); width:100vw; height:2000vh; z-index:500; border-radius:0}
.datepicker{border-radius: 0;top: 173px; color:#484c55; font-family:'Proxima Nova Alt Rg', 'Noto Sans Thai', 'YouYuan', 'Microsoft Sans Serif'; }
.datepicker__inner{padding:0;}

.datepicker__topbar {position: relative; margin: 0; padding: 20px 10px; background-color: #5b97aa; color: #fff; overflow: hidden;}

.datepicker__info-text{font-size:1.6rem;color:#fff;}
.datepicker__info--help, .datepicker__info--selected{text-align: center; text-transform: inherit;}
.datepicker__info--selected-label{font-size:1.6rem; color:#fff; display: block; margin-bottom: 10px}

    /*Close button x */
    .datepicker__close-button{display:block;position:absolute;top:-10px;right:10px;z-index:50;width:16px;height:16px;outline:none;-webkit-transform: rotate(45deg); transform: rotate(45deg); color:#5574c3; background: transparent; padding: 0}
        .datepicker__close-button:before {content: ''; position: absolute; top: 50%; left: 0; display: block; margin-top: -1px; width: 16px; height: 2px; background-color: #fff;}
        .datepicker__close-button:after {content: ''; position: absolute; top: 0; left: 50%; display: block; margin-left: -1px; width: 2px; height: 16px; background-color: #fff;}
        .datepicker__close-button:hover{opacity:.5; background: transparent;-webkit-animation: rotating 0.2s linear; -moz-animation: rotating 0.2s linear; -ms-animation: rotating 0.2s linear; -o-animation: rotating 0.2s linear; animation: rotating 0.2s linear;}

    /*Month*/
    .datepicker__month{width:calc(100vw - 20px)!important;}
    .datepicker__months{float: left; width: 100%;top: 0;padding:10px;}
    .datepicker__months:before{content:none!important}

    .datepicker__month--month1 {float: left; margin-bottom: 20px}
    .datepicker__month--month2 {display: table;float: right; }

    .datepicker__month-caption th {text-align: center}
    th.datepicker__month-name {width: 100%}
    .datepicker__week-name {padding-top:3px;}
    th.datepicker__week-name {text-align: center}
    
    /*Date - color*/
    .datepicker__month-day{color:#484c55}
    .datepicker__month-day--invalid {color: #dadde6;}
    .datepicker__month-day--today {background-color: #7aa2de!important; color: #fff!important; line-height: 16px; font-weight: 600;}
    .datepicker__month-day--selected,.datepicker__month-day--hovering{background-color: rgba(62,154,136,.3)!important; color: #fff}
    .datepicker__month-day--first-day-selected, .datepicker__month-day--last-day-selected{background-color: #8ac0b4!important; color: #fff}
	.datepicker__tooltip{background-color:#f4b098!important;}
	.datepicker__tooltip:after{border-top:4px solid #f2aba5!important;}
    
    /* <  Arrow  > */
    .datepicker__month-button{background:transparent}
    .datepicker__month-button:hover{background:#dce0eb}
    .datepicker__month-button--prev, .datepicker__month-button--next{font-size:0; line-height: 1}
    .datepicker__month-button--prev:before, .datepicker__month-button--next:before{
        display: inline-block; font-family: FontAwesome; font-size: 1.6rem!important; color: #484c55; text-rendering: auto; 
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
    .datepicker__month-button--next:before{content: "\f105";}
    .datepicker__month-button--prev:before{content: "\f104";}

	
	/*Guests - add nummber*/
	input[type="number"] {-webkit-appearance: textfield;-moz-appearance: textfield;appearance: textfield;}
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;}
	.number-input {display:flex; width:280px; justify-content: flex-end; align-items: center;}
		.number-input,
		.number-input * {box-sizing: border-box;	}
			.number-input button {outline: none;-webkit-appearance: none;background-color: transparent; align-items: center;justify-content: center;width: 5rem;height: 5rem;cursor: pointer;margin: 0;position: relative; border-radius: 50%; border: 1px solid #ababab;	}
			
				.number-input button:before, .number-input button:after {display:inline-block;	position:absolute;	content: '';	width:1rem;	height:2px; background-color:#ababab; 	transform: translate(-50%, -50%);}
				
				.number-input button.plus{border:1px solid #8ac0b4;}
				.number-input button.plus:after {transform: translate(-50%, -50%) rotate(90deg);}
				
				.number-input button.plus:before,.number-input button.plus:after{background-color:#8ac0b4;}
				
			.number-input input[type=number] {max-width:5rem; padding:.5rem; font-size:2rem; height:3.6rem; text-align: center; background:transparent; color:#8ac0b4;}
	
	@-webkit-keyframes bounceRight {
	0%, 100%, 20%, 50%, 80% {-webkit-transform:translateX(0); transform: translateX(0)}
	40% {-webkit-transform: translateX(-30px);	transform: translateX(-30px)}
	60% {-webkit-transform: translateX(-15px);	transform: translateX(-15px)}
	}
	
	@-moz-keyframes bounceRight {
	0%, 100%, 20%, 50%, 80% {	transform: translateX(0)}
	40% {transform: translateX(-30px)}
	60% {transform: translateX(-15px)}
	}
	
	@keyframes bounceRight {
	0%, 100%, 20%, 50%, 80% {	-ms-transform: translateX(0);	transform: translateX(0)}
	40% {-ms-transform: translateX(-30px);	transform: translateX(-30px)}
	60% {-ms-transform: translateX(-15px);	transform: translateX(-15px)}
	}
	
	.anime-rights {-webkit-animation: bounceRight 2s infinite;animation: bounceRight 2s infinite}
	
	.selection-panel {width: 100%;height: 1000px;position: fixed;top: 0;left: 0;padding: 20px;background-color: red}
	
	.datepicker__month-button.datepicker__month-button--next.fa.fa-angle-right.datepicker__month-button--disabled, .datepicker__month-button.datepicker__month-button--prev.fa.fa-angle-left.datepicker__month-button--disabled {display: none}
	
	.style-date-right {height: 56px !important}
	.datepicker__topbar {padding-bottom: 20px !important}
		.datepicker__topbar:after {	width: 0;	height: 0;	border-style: solid;	border-width: 0 40px 40px 40px;	border-color: transparent transparent #fff transparent;	content: "";	margin-left: 17%;	-webkit-transition: all .5s ease-in-out;	-moz-transition: all .5s ease-in-out;	-o-transition: all .5s ease-in-out;	-ms-transition: all .5s ease-in-out}
		.datepicker__topbar.move-arrow:after {-webkit-transform: translate(3em, 0); -moz-transform: translate(3em, 0); -o-transform: translate(3em, 0); -ms-transform: translate(3em, 0); transform: translate(3em, 0); margin-left: 68%}
	.big-date-checkin-bookingmask.opacity, .big-date-checkout-bookingmask.opacity {opacity: .1}
	
	#spanchildtext{display:block}
		
	.select_container {width:160px; position: relative; display:inline-block; margin:0; padding:0; }
	#childage-container .select_container{width:70px;}
	#childage-container .select_container select{margin:0 4px 4px 0; padding:10px; font-size:1.6rem; border: 1px solid #dddddd; background:#fff; appearance: menulist; -webkit-appearance:menulist;  -moz-appearance:menulist}
	/*#childage-container .select_container select:after{content: '\f078'; font: normal normal normal 12px/1 FontAwesome; right:15px; top: 15px; padding:2px;  position: absolute; pointer-events: none; width:16px; height:16px}*/
	
	.set-hide {display:none;}
	.set-show {display:inline-block;}

.bookingmask .sel_check{width:100%; background:transparent;}
.bookingmask .sel_check .btn-check{background: #6daca4; padding:30px; display: block; margin: 0; border-radius:0; font-size: 1.8rem; color: #fff; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.bookingmask .sel_check .btn-check a{color:#fff; display: block}
.bookingmask .sel_check .btn-check:hover{background:#3a616d}

@media (min-width:415px){
    .datepicker__month{width:48%!important}
    .datepicker__close-button{top: 10px}
    .datepicker__months:before{content:''!important}
}

@media (min-width:568px) and (max-width: 896px) and (orientation : landscape) {
.dropdown-menu.mega-bookingmask{top:58px!important;}
.dropdown-menu.mega-bookingmask{height: 240px; overflow-y: auto}
	
.easy-autocomplete-container ul{height: 200px!important}
	
#datepicker-input-id{height: 120vh}
.datepicker__month{width:48%!important}

.guests-flyout_container{height: 280px; overflow-y: auto}
.guest-quantity-selection_container{padding: 5px 20%;}
#childage-container{padding: 15px 0 0}
}

@media all and (device-width:768px) and (device-height:1024px) and (orientation:portrait) {
.dropdown-menu.mega-bookingmask{height:2000vh; padding:50px 15px}
.bookingmask .sel_dest, .bookingmask .sel_dest input{width: calc(100vw - 60px);}

.guests-flyout_container{height:2000vh;}
.guest-quantity-selection_container{padding: 30px}
}

@media (min-width: 1024px) {		
/*Button - Check Avialability*/
.reservations .button{margin:0}

.mega-bookingmask .booking-button{margin-left:auto!important; width:260px; margin:0;}
.mega-bookingmask .booking-button .booking-check, .mega-bookingmask .booking-button .booking-close{display:inline-block}

.mega-bookingmask .booking-check{float:left; position:relative; background:#2d637f; width:190px; height:70px; display:block; margin:0; padding:26px; font-family:'Roboto', Arial, 'Noto Sans Thai', 'YouYuan'; font-size:1.8rem; color:#fff; text-align: center; -webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}	
.mega-bookingmask .booking-check:hover{background:#000}
	
.reservations .button button.booking-avail{width:130px; margin:0; padding:33px 5px;}
.reservations .button button.booking-avail:before{padding:33px 5px;}

/*Booking Mask - show*/
.dropdown-menu.mega-bookingmask{top: 58px!important; min-width:calc(100vw - 15px); width: calc(100vw - 15px); height:250px; padding:0;}
.mb-stepname{display:none}
.mega-bookingmask .bookingmask {display:flex; flex-direction:row; justify-content:center; flex-wrap: wrap; margin:20px 0; text-align:center;}

	.bookingmask .select{height:60px; margin:5px 2px;}
	.bookingmask .pulldown{top:6px; right:0}
	.bookingmask .icon-search{left:0}
	
	.bookingmask .sel_dest, .bookingmask .sel_chkin-out, .bookingmask .sel_guest, .bookingmask .sel_promocode{width:49.5%;}
	#txt-search-main, .easy-autocomplete, .easy-autocomplete-container, .easy-autocomplete-container ul{width:100%}
		
	.bookingmask .sel_dest, .bookingmask .sel_promocode{padding:10px;}
	.bookingmask .sel_dest input:focus, .bookingmask .sel_promocode input:focus{font-size:1.4rem}	
	.bookingmask .sel_chkin-out{padding:0}
	.bookingmask .sel_dest input, .bookingmask .sel_promocode input{padding:12px 7px 7px 35px;}
	
		.easy-autocomplete-container{text-align:left; left: -10px; top: calc(100% + 15px); }
		.easy-autocomplete, .easy-autocomplete-container, .easy-autocomplete-container ul{width:450px!important}
		
		.easy-autocomplete-container ul{height:auto!important}
				
		.easy-autocomplete-container ul .eac-category, .easy-autocomplete-container ul li{padding:5px 15px!important}
		.easy-autocomplete-container ul li div{padding:3px 3px!important}
		

	.bookingmask .text-check{padding:17px 5px; display:none}
	.bookingmask .text-date{margin:0; padding:0; display:block}
		.bookingmask .sel_chkin:after{top:47px; right:-9px;}
		.bookingmask .icon-next{margin:0}		
		.bookingmask .sel_chkin .box_inout, .bookingmask .sel_chkout .box_inout{width:100%}
		.bookingmask .sel_chkin .box_wrapper, .bookingmask .sel_chkout .box_wrapper{height:60px; margin:0; padding:0}
	
	.bookingmask .day{font-size:4.6rem; line-height:1.2}
	.bookingmask .month{font-size: 1.3rem; padding:9px 5px;}
	.bookingmask .sel_guest{padding:19px 10px 10px 10px}
	.bookingmask .select.sel_chkin {margin: 0 0 0 30px;}
	
	.bookingmask .sel_guest .guests-info, .bookingmask .sel_guest .room-info {padding: 0 10px 0 50px; text-align: left;}
	.bookingmask .sel_guest .room-info {color:#8d9ca0; line-height: 1;}
	
	/*old*/
	.bookingmask .sel_check{width:100%; background:transparent;}
	.bookingmask .sel_check .btn-check{width:100%; height: 60px; line-height:60px; display: block; margin: 0; padding:0; font-size: 1.7rem;}	
	
	/*Calendar*/
	#datepicker-input-id {top:calc(100% + 90px); left: inherit; right: 24px; width:530px; height: auto; border-radius:4px}
		.big-date-indayname-bookingmask, .big-date-inmonth-bookingmask, .big-date-inyear-bookingmask, .big-date-outdayname-bookingmask, .big-date-outmonth-bookingmask, .big-date-outyear-bookingmask{margin:2px 3px 0 0}	
		.datepicker__month{ width:240px!important;}
		.datepicker__months:before{content:''!important}
	
	/*Select Rooms & Guests*/
	.guests-flyout_container{position:absolute; top:calc(100% + 6px); width:460px; height:430px; border-radius: 4px;}
	.guests-flyout_container .header{font-family: 'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; padding:15px 20px; border-radius:4px 4px 0 0; text-align:left;}
	/*new*/
		.stepname{padding:15px 20px; border-radius:4px 4px 0 0; text-align:left;}
		.stepname .icon-back{display:none}
		.stepname .name h6{line-height:2}
		
		.guest-quantity-selection_container{width:410px;padding:20px 30px; border-spacing:0 .8rem;}
			.number-input button{width:4rem; height:4rem;}
			.number-input input[type=number] {font-size:1.6rem;height:4rem;color:#6d6d6d;}
		.guests-flyout_container .apply{position:absolute; bottom:0; left:0; padding:18px 20px;}
		

/*Result*/
.result.bookingmask .sel_chkin .box_wrapper, .result.bookingmask .sel_chkout .box_wrapper{box-shadow:none}

/*stickytop - reservations*/
.stickytop .reservations .button a{text-align:center}
.stickytop .dropdown-menu.mega-bookingmask{top: 53px!important;}
	
/*stickytop - result check in - check out*/
.stickytop .result.bookingmask{float:left; height:70px; display:none}

	.result.bookingmask{display:none;}
	.result.bookingmask .select{margin:0;}
	.result.bookingmask .select:before{content:none;}
	.result.bookingmask .sel_chkin, .result.bookingmask .sel_chkout{width:120px; height:70px}
	
	.result.bookingmask .sel_chkin .box_wrapper, .result.bookingmask .sel_chkout .box_wrapper{padding:0; height:54px}
	
	.result.bookingmask .bookingmask h5, .result.bookingmask h6{font-size:1.2rem; line-height:1em; color:#9aa2a9; margin:3px 0 0 0}
	.result.bookingmask .day, .result.bookingmask .month{color:#000;}
	.result.bookingmask .month{line-height:1}
	.result.bookingmask .sel_chkin:after{top:34px; right:-2px}
}

@media (min-width: 1200px) {
/*bookingmask*/
.stickytop .result.bookingmask {display:inline-block;}
	
/*Booking Mask - show*/
.dropdown-menu.mega-bookingmask{width: 100%; height:70px!important; top: 58px!important; padding:0;}
.mega-bookingmask .bookingmask {margin:0;}

	.bookingmask .sel_guest .guests-info, .bookingmask .sel_guest .room-info {padding: 0 10px 0 35px; text-align: left;}

	.bookingmask .sel_dest, .easy-autocomplete, .easy-autocomplete-container, .easy-autocomplete-container ul {width:330px!important}
	#txt-search-main  {width:320px!important}
		
	.bookingmask .sel_chkin-out{width:290px}
		.bookingmask .sel_chkin:after {right:-11px;}
		
		.bookingmask .day{font-size:5rem;}
		
		.big-date-indayname-bookingmask, .big-date-inmonth-bookingmask, .big-date-inyear-bookingmask, .big-date-outdayname-bookingmask, .big-date-outmonth-bookingmask, .big-date-outyear-bookingmask{margin:0}
	.bookingmask .sel_guest{width:170px}
	.bookingmask .sel_promocode{width:170px}
	.bookingmask .sel_check{width:170px}

#datepicker-input-id {top: calc(100% + 70px); left:27%;}

}
@media (min-width: 1360px) {
.dropdown-menu.mega-bookingmask{top: 58px!important}
.reservations .button button.booking-avail{width:195px; margin:0; font-size: 1.8rem; padding:31px 5px;}

.bookingmask .sel_chkin-out{width:320px}
	.bookingmask .sel_guest{width:200px}
	.bookingmask .sel_promocode{width:180px}
	.bookingmask .sel_check{width:200px}
}
@media (min-width: 1440px) {
.dropdown-menu.mega-bookingmask{width: calc(100% + 7px);}
.bookingmask .sel_chkin-out{width:330px}
.bookingmask .sel_guest{width:300px}
.reservations .button button.booking-avail{width:195px; font-size: 2rem; padding:30px 10px;}
}
@media (min-width: 1530px) {
.dropdown-menu.mega-bookingmask{width: calc(100% - 0);}
}
@media (min-width: 1680px) {
.dropdown-menu.mega-bookingmask{width: 100%; top: 58px!important}
}
/*End*/