/******************************************************************************
 *
 * Check Availability form layout
 *
 * The surrounding card is provided by public-form-card.css. This stylesheet
 * is limited to the layout and spacing of the Check Availability form itself.
 *
 ******************************************************************************/

#AvailabilityForm > table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

#AvailabilityForm > table > tbody > tr > td {
	padding: 3px 0;
	vertical-align: middle;
}

#AvailabilityForm > table > tbody > tr > td:first-child:not([colspan]) {
	width: 165px;
	padding-right: 14px;
}

#AvailabilityForm input,
#AvailabilityForm select,
#AvailabilityForm textarea {
	box-sizing: border-box;
	max-width: 100%;
}

#AvailabilityForm textarea {
	line-height: 1.4;
}

#AvailabilityForm .crdm-button {
	margin: 4px 8px 4px 0;
}

@media (max-width: 767px) {
	#AvailabilityForm > table,
	#AvailabilityForm > table > tbody,
	#AvailabilityForm > table > tbody > tr,
	#AvailabilityForm > table > tbody > tr > td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	#AvailabilityForm > table > tbody > tr > td {
		padding: 4px 0;
	}

	#AvailabilityForm > table > tbody > tr > td:first-child:not([colspan]) {
		width: 100%;
		padding-top: 9px;
		padding-right: 0;
		padding-bottom: 0;
	}
}