FileMaster

Edit File: availability_page.css

/** TOOLBAR ***********************************************************************************************************/

/* Override default settings of main  toolbar: ../includes/_toolbar_ui/_src/toolbar_ui.css */
#toolbar_booking_availability.wpbc_ajx_toolbar {
	margin: 0;		/* margin: 0 0 10px 50px; */
}

/** CONTENT ***********************************************************************************************************/
/* Main container */
.wpbc_ajx_avy__container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 20px 0 0;
}
/* LEFT section */
.wpbc_ajx_avy__container .wpbc_ajx_avy__section_left {
	flex: 1 1 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
	/* Calendar in right section */
	.wpbc_ajx_avy__calendar{
		width:100%;
		max-width:100%;
		margin:0;
	}
/* RIGHT section */
.wpbc_ajx_avy__container .wpbc_ajx_avy__section_right {
	flex: 0 1 auto;
	margin: 0 0 0 30px;

display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

/** WIDGETS ***********************************************************************************************************/

/* Widgets Section	- Define width  of widget here  */
.wpbc_widgets {
	width:200px;				/* WIDTH of WIDGETs*/

display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
/* Widget */
.wpbc_widgets .wpbc_widget {
	margin: 0 0 20px;
	width:100%;
	flex: 1 1 100%;
}
/* Widget Header */
 .wpbc_widget .wpbc_widget_header {
	width: 100%;
	height: 44px;

border: 1px solid #ccc;
	background: #fff;

font-weight: 600;
	text-shadow: none;

display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
 }
 /* Widget Header text */
 .wpbc_widget .wpbc_widget_header .wpbc_widget_header_text {
	 flex: 1 1 auto;
	 padding: 0 15px;
 }
 /* Settings Link in right side of header */
.wpbc_widget .wpbc_widget_header .wpbc_widget_header_settings_link {
	flex: 0 0 auto;
	margin-left: auto;
	border-left: 1px solid #ccc;
	padding: 5px 10px;
	color: #0e70b7;
	display: none;
}

/** MOBILE  ***********************************************************************************************************/
@media (max-width: 470px) {
	.wpbc_ajx_avy__container {
		flex-flow: row wrap;
	}
	div.wpbc_ajx_avy__container .wpbc_ajx_avy__section_right {
		margin: 30px 0;
	}
	div.wpbc_widgets {
		width:100%;
	}
	div.wpbc_widgets .wpbc_widget.wpbc_widget_available_unavailable {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		padding: 0 2px;
		left: 0;
		margin: 0 0 -10px;
	}
}

/** Toolbar Dates Hints  **********************************************************************************************/
#wpbc_hidden_template__select_booking_resource {
	flex: 0 1 auto;
}
#wpbc_toolbar_dates_hint{
	flex: 1 1 auto;
	justify-content: flex-start;
	margin-left: 0;
}
#wpbc_toolbar_dates_hint .ui_element {

}
#wpbc_toolbar_dates_hint .ui_element .wpbc_help_text {
	font-size: 1.1em;
	line-height: 1.8em;
	height: auto;
}
#wpbc_toolbar_dates_hint .ui_element .wpbc_help_text *{
	font-size: 1em;
}
#wpbc_toolbar_dates_hint .ui_element .wpbc_help_text strong{

}
/* Dates hints */
.wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints {
	font-size: 1.05em;

display: block;
			/*flex-flow: row wrap;*/
	/*width: 100%;*/
			/*justify-content: flex-start;*/
			/*align-items: first baseline;*/
}
.wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span{
			/*flex: 1 1 auto;*/
	padding: 0 0.2em;
}
.wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span.wpbc_big_text,
.wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span.wpbc_big_date{
	font-size: 1.05em;
	font-weight: 600;
	padding: 0 0.3em;
}
/* Fix for round dates in calendars */
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_booked,
.block_hints .block_pending,
.block_hints .block_check_in_out,
.datepick-inline .datepick-days-cell{
    border-radius: 0 !important; /* at  the WP Booking Calendar > Availability > Days Availability page we can  not show round dates :( */
}

Back