WooCommerce Appointments CSS for the frontend

booking-form.css

/* 
   Modify the color styles of the WooCommerce Appointments booking form.
   Add any/all of these styles to your theme's custom CSS, but be sure to change
   the color hex codes to your choice. They're all default here.
*/

/* Booking form wrapper */
.wc-appointments-appointment-form {
	background-color: #fff;
	border: 1px solid #ddd;
	margin: 0 0 1em;
	padding: 1em 1em 0;
}

/* Month header */
.wc-appointments-date-picker .ui-datepicker-header {
	background-color: #fff;
}

/* Previous/Next month arrow */
.wc-appointments-date-picker .ui-datepicker .ui-datepicker-next, 
.wc-appointments-date-picker .ui-datepicker .ui-datepicker-prev {
	background-color: #fff;
}

/* Previous/Next month arrow hover */
.wc-appointments-date-picker .ui-datepicker .ui-datepicker-prev.ui-state-hover,
.wc-appointments-date-picker .ui-datepicker .ui-datepicker-next.ui-state-hover {
	background: rgba(0,0,0,.05);
}

/* Previous/Next month arrows if not allowed, and calendar dates that are not available */
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: 0.35;
}

/* Days of the week header */
.ui-datepicker-calendar thead {
	background-color: #fff;
}

/* Days of the week header */
.wc-appointments-date-picker .ui-datepicker th {
	color: #999;
	font-size: .6em;
	padding: .6em 0!important;
}

/* Available calendar days */
.wc-appointments-date-picker .ui-datepicker td.appointable a {
	color: #000000;
}

/* Available calendar day hover */
.wc-appointments-date-picker .ui-datepicker td.appointable a:hover {
	background-color: rgba(0,0,0,.05);
}

/* Today's date on calendar */
.wc-appointments-date-picker .ui-datepicker td.ui-datepicker-today,
.wc-appointments-date-picker .ui-datepicker td.ui-datepicker-today a {
	color: #f6563e;
}

/* Selected day */
.wc-appointments-date-picker .ui-datepicker td.ui-datepicker-current-day a,
.wc-appointments-date-picker .ui-datepicker td.ui-datepicker-current-day a:hover {
	background-color: #935386;
	color: #fff;
	opacity: 1;
}

/* Partially scheduled */
.wc-appointments-date-picker .ui-datepicker td.partial_scheduled a:before {
	background-color: rgba(0,0,0,.2);
}

/* Partially scheduled progress */
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_9 a:before { width: 10%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_8 a:before { width: 20%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_7 a:before { width: 30%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_6 a:before { width: 40%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_5 a:before { width: 50%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_4 a:before { width: 60%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_3 a:before { width: 70%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_2 a:before { width: 80%; }
.wc-appointments-date-picker .ui-datepicker td.remaining_scheduled_1 a:before { width: 90%; }


/* Slot picker wrapper */
.wc-appointments-appointment-form .slot-picker {
	background-color: rgba(0,0,0,.03);
	border: solid #ddd;
	border-width: 1px 0;
	margin: 1em -1em -1px;
	padding: 1em;
}

/* Slot picker slot heading (Morning/Afternoon/Evening) */
.wc-appointments-appointment-form .slot-picker li.slot_heading {
	color: #999;
	display: block;
	margin-bottom: 7px;
	font-size: .6em;
	text-align: center;
}

/* Time Slots */
.wc-appointments-appointment-form .slot-picker li.slot a {
	color: #333;
	padding: 8px 5px;
}

/* Time Slots Hover */
.wc-appointments-appointment-form .slot-picker li.slot:focus a,
.wc-appointments-appointment-form .slot-picker li.slot:hover a {
	background-color: #dadada;
	color: #2b2b2b;
}