/*******************************************************************************
                            			Universal
*******************************************************************************/



@media (min-width: 992px) {

}

												/* Customizing Form Fields */

.tr-container .tr-check-availability .tr-occupancy .tr-field:last-of-type,
.tr-container .tr-check-availability .tr-search-dates .check-in label,
.tr-container .tr-check-availability .tr-search-dates .check-out label {
  display: none !important;
}

.tr-container .tr-check-availability .tr-occupancy .tr-field:first-of-type label {
  display: inline !important;
	padding-right: 20px;
}

.tr-container .tr-check-availability .tr-search-dates .tr-field {
	padding-bottom: 0 !important;
}

.tr-container .tr-check-availability .tr-search-dates input[type=text] {
	border: none;
	background-color: transparent;
}

.tr-container .tr-check-availability select {
	background-color: transparent;
}

.tr-container .tr-check-availability .tr-search-dates input[type=text].start-date {
	background-size: 10%;
}

.tr-container .tr-check-availability .tr-search-dates input[type=text].end-date {
	background-size: 5%;
}

															/* Date Picker */

#ui-datepicker-div {
	width: unset !important;
	z-index: 2100!important;
}

#ui-datepicker-div table td {
	padding: 3px 4px;
}

/*******************************************************************************
                            Check Availability Block
*******************************************************************************/

/***********************  Layout and Responsiveness  **************************/

.tr-container.check-availability-block {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 55px;
}

													   	/* Mobile */

.tr-container.check-availability-block .tr_availability_header.desktop,
.tr-container.check-availability-block .tr-widget {
	display: none;
}

.tr-container.check-availability-block .tr_availability_header.mobile {
	display: flex;
	flex-grow: 1;
	justify-content: center;
}

.tr-container.check-availability-block .tr_availability_header.mobile a {
	color: inherit;
	font-size: 20px;
	line-height: inherit;
	font-weight: inherit;
	padding: 5px 9px!important;
}

																/* Desktop */

@media (min-width: 992px){

	.tr-container.check-availability-block .tr_availability_header.mobile {
		display: none;
	}

	.tr-container.check-availability-block .tr_availability_header.desktop {
		display: flex;
		flex-grow: .5;
	}

	.tr-container.check-availability-block .tr-widget {
		display: flex;
		flex-grow: 1;
	}

	.tr-container.check-availability-block .tr-check-availability {
		width: 100%;
	}

	.tr-container.check-availability-block .tr-check-availability form {
	  display: flex;
	  flex-direction: row;
		justify-content: space-between;
	}

}






/*******************************************************************************
    							  Room/Unit-Specific Block with Calendar
*******************************************************************************/

.tr-container.calendar .tr-widget,
.tr-button-wrapper {
	display: flex;
	justify-content: center;
}

.tr-container.calendar .tr-unit-calendar {
	width: 100%;
	max-width: 700px;
	position: relative;
	padding-top: min(650px, 110%);
	overflow: hidden;
}

.tr-container.calendar .tr-unit-calendar iframe {
	width: 100%;
	height: 100%;
	max-height: 650px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

div.ui-datepicker td span.ui-state-default {
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid transparent!important;
	}

													   	/* Mobile */

.tr-container.calendar .tr-unit-calendar-with-availability-form {
	display: flex;
	flex-direction: column;
}

.tr-button-wrapper a.desktop {
	display: none;
}

.tr-button-wrapper a.mobile {
	display: block;
}

													  	/* Desktop */

@media (min-width: 768px){

	.tr-container.calendar .tr-unit-calendar-with-availability-form {
		flex-direction: row;
	}

	.tr-button-wrapper a.desktop {
		display: block;
	}

	.tr-button-wrapper a.mobile {
		display: none;
	}

}



/*******************************************************************************
	                              Color Schemes
*******************************************************************************/

													   	/* Light Mode */

.tr-container.light {
  color: #303030 !important;
}

.tr-container.light .tr-check-availability .tr-search-dates,
.tr-container.light .tr-check-availability select,
.tr-container.light .tr_availability_header.mobile a {
	border: 1px solid #303030 !important;
}

.tr-container.light .tr-check-availability .tr-search-dates .tr-field input[type=text].start-date {
	background-image: url('../assets/calendar-lightmode.svg');
}

.tr-container.light .tr-check-availability .tr-search-dates .tr-field input[type=text].end-date {
	background-image: url('../assets/angle-right-lightmode.svg');
}

.tr-container.light .tr-check-availability .tr-form-actions button.tr-search {
	background-color: #3b6e8f;
	color: #fff;
}


													   	/* Dark Mode */

.tr-container.dark {
  color: #fff !important;
}

.tr-container.dark .tr-check-availability .tr-search-dates,
.tr-container.dark .tr-check-availability select,
.tr-container.dark .tr_availability_header.mobile a {
	border: 1px solid #fff;
}

.tr-container.dark .tr-check-availability .tr-search-dates .tr-field input[type=text].start-date {
	background-image: url('../assets/calendar-darkmode.svg');
}

.tr-container.dark .tr-check-availability .tr-search-dates .tr-field input[type=text].end-date {
	background-image: url('../assets/angle-right-darkmode.svg');
}

.tr-container.dark .tr-check-availability .tr-form-actions button.tr-search {
	background-color: #fff;
	color: #3b6e8f;
}

													   	   /* Fonts */

.tr-container h2.tr_availability_header {
	font-size: 28px;
	line-height: 28px;
	color: inherit;
}

.tr-container .tr-check-availability .tr-search-dates .tr-field input[type=text],
.tr-container .tr-check-availability .tr-search-dates .tr-field input[type=text]::placeholder,
.tr-container .tr-check-availability select {
	color: inherit !important;
}