/**
 * Imports
 */
@import "mixins";
@import "variables";

// Products list icon
table.wp-list-table span.product-type.appointment:before {
	content: '\f321';
	font-family: 'dashicons' !important;
}

// Product data tabs
#woocommerce-product-data {
	ul.wc-tabs {
		li.appointments_staff_tab {
			a {
				&:before {
					content: '\e03a' !important;
					font-family: 'woocommerce' !important;
				}
			}
		}
		li.appointments_availability_tab {
			a {
				&:before {
					content: '\e00e' !important;
					font-family: 'woocommerce' !important;
				}
			}
		}
	}
}

// CPT table.
.post-type-wc_appointment {
	.wp-list-table {
		// Descriptions.
		span.description {
		   display: block;
		   color: $grey;
		}

		// Columns.
		th.column-appointment_id {
		    width: 30ch;
			@media only screen and (min-width: 980px) {
				width: 42ch;
			}
		}
		th.column-appointment_actions {
			padding-right: 2em;
		    width: 12ch;
			@media screen and ( min-width: 782px ) {
				text-align: right;
			}
		}

		//* Appointment actions.
		td.column-appointment_actions {
			@media screen and ( min-width: 782px ) {
				text-align: right;
			}
			&:last-child {
				padding-right: 2em;
			}
			a {
				@include il();
				padding: 0 !important;
				height: 2em !important;
				width: 2em;
				margin: 2px 4px 2px 0;
				overflow: hidden;
				vertical-align: middle;

				&:after {
					@include icon();
					line-height: 1.85;
				}
				&.confirm:after {
					content: "\e017";
				}
				&.cancel:after {
					content: "\e013";
				}
				&.view:after {
					content: "\e010";
				}
			}
		}

		// Appointment statuses.
		.appointment-status {
			 @include statuses();
		}
	}
}

#woocommerce-appointment-data {
	h2.hndle, h3.hndle, .handlediv {
		display: none;
	}
	.inside {
		display: block !important;
		margin: 0;
	    padding: 0;
	}
}
#woocommerce-appointable-staff-data {
	.inside, .woocommerce_options_panel {
		padding: 0;
		margin: 0;
	}
}
#woocommerce-customer-data {
	.appointment-customer-details {
		width: 100%;
		td, th {
			vertical-align: top;
			text-align: left;
		}
		th {
			padding: 0 6px 6px 0;
		}
		td {
			padding: 0 0 6px;
			word-break: break-all;
		}
		.view td {
			padding-bottom: 12px;
		}
	}
}

//* Appointment details
#appointment_data {
	@include clearfix();
	h2 {
		margin: 0;
		font-size: 21px;
		line-height: 1.2;
		text-shadow: 1px 1px 1px white;
		padding: 0;
		.dashicons {
			text-decoration: none;
			vertical-align: bottom;
			font-size: 18px;
		}
	}
	h3 {
		color: #333;
		font-weight: 400;
		margin: 0;
	}
	h4 {
		font-size: 14px;
		margin: 1.33em 0 0;
	}
	p {
		color: #777;
	}
	p.appointment-order-number {
		margin: 0;
		line-height: 1.6em;
		font-size: 1.2em;
	}
	.appointment_data_container {
		clear: both;
		padding: 24px;
		&.appointment_data_addons {
			background: #f8f8f8;
    		border-top: 1px solid #ddd;
		}
	}
	.appointment_data_column {
		width: 32%;
		padding: 0 2% 0 0;
		float: left;
		&.last_column {
			padding-right: 0;
		}
		&.data_column_wide {
			clear: both;
			width: 100%;
		}
		.wc-item-meta {
		    margin: 1em 0 0;
			strong {
			    margin-right: .2em;
			}
			p {
				display: inline-block;
				margin: .5em 0;
				&:last-child {
				    margin-bottom: 0;
				}
			}
		}
		.form-field {
			float: left;
			width: 48%;
			padding: 0;
			margin: 9px 0 0 0;
			&._appointment_parent_id_field,
			&.appointment_start_date_field,
			&.appointment_end_date_field {
				margin-right:3.8%;
			}
			&._appointment_all_day_field {
				width:100%;
			}
			label {
				display: block;
				padding: 0 0 3px;
			}
			input[type="text"],
			input[type="number"],
			input[type="time"],
			textarea,
			select {
				width: 100%;
			}
			#appointment_status_chzn {
				.chzn-search {
					display: none;
				}
			}
			.chzn-container {
				width: 100% !important;
			}
			.date-picker {
				width: 100%;
			}
			.hour,
			.minute {
				width: 3.5em;
			}
			small {
				display: block;
				margin: 5px 0 0 0;
				color: $grey;
			}
			&.form-field-wide {
				input[type="text"] {
					width: auto;
				}
			}
		}
		.form-field.last {
			float: right;
		}
		.form-field-wide {
			width: 100%;
			clear: both;
			input, textarea {
				width: 100%;
			}
			select {
				width: 100%;
			}
		}
		p.none_set {
			color: $grey;
		}
		._billing_first_name_field, ._billing_address_1_field, ._billing_city_field, ._billing_country_field, ._billing_email_field,
		._shipping_first_name_field, ._shipping_address_1_field, ._shipping_city_field, ._shipping_country_field {
			float: left;
		}
		._billing_last_name_field, ._billing_address_2_field, ._billing_postcode_field, ._billing_state_field, ._billing_phone_field,
		._shipping_last_name_field, ._shipping_address_2_field, ._shipping_postcode_field, ._shipping_state_field {
			float: right;
		}
		._billing_company_field, ._shipping_company_field {
			clear: both;
			width: 100%;
		}
		._billing_email_field {
			clear: left
		}
		div.edit_address {
			display: none;
			overflow: hidden;
			zoom: 1;
			padding-right: 1px;
		}
	}
	#appointment_date {
		width: 50%;
	}
	.select2-container {
		min-width: 100% !important;
		max-width: 100% !important;
	}
}

/**
 * Small screen optimisation
 */
@media only screen and (max-width: 1280px) {
	#appointment_data {
		.appointment_data_column {
			width: 48%;
		}
	}
}
@media only screen and (max-width: 580px) {
	#appointment_data {
		.appointment_data_column {
			width: 100%;
			clear: both;
		}
	}
}

//* Calendar form
.wc_appointments_calendar_form {
	.appointments {
		color: #000;
		width: 100%;
		.single_appointment {
			font-size: 15px;
			line-height: 1.5em;
			margin: 0 0 4px 0;
			overflow: hidden;
			padding:0;
			position: absolute;
			width: 100%;
			z-index: 5;
			&:hover {
				z-index: 10;
				box-shadow: 0px 8px 9px -6px rgba(0, 0, 0, 0.2);
				transition: all 150ms ease;
			}
			a {
				background-color: rgba(255, 255, 255, 0.8);
				color: #000;
				display: block;
				height: 100%;
				margin-left: 4px;
				padding: 2px 4px;
				position: relative;
				text-decoration: none;
				width: 100%;
				&:hover {
					background-color: rgba(255, 255, 255, 0.7);
				}
				ul {
					padding: 0;
					margin: 0;
					li {
						list-style: none;
						font-size: 0.75em;
						padding: 0;
						margin: 0;
						border:0;
						&.appointment_status {
							display: inline-block;
							position: absolute;
							top: 3px;
							left: auto;
							right: 16px;
							text-align: right;
							&:before {
								font-family: WooCommerce;
								speak: none;
								font-weight: 400;
								font-variant: normal;
								text-transform: none;
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								margin: 0;
								text-indent: 0;
								content: '';
								font-size: 1.2em;
							}
							&.status-unpaid:before, &.status-incart:before {
								content: "\e033";
							}
							&.status-pending:before,
							&.status-pending-confirmation:before {
								content: "\e012";
							}
							&.status-confirmed:before {
								content: "\e011";
							}
							&.status-paid:before {
								content: "\e015";
							}
							&.status-cancelled:before {
								content: "\e013";
							}
							&.status-complete:before {
								content: "\e015";
							}
						}
					}
				}
			}
		}
		&.bymonth {
			margin-top: 10px;
			max-height: 100px;
			overflow: auto;
			.single_appointment {
				position: relative;
			}
		}
	}
	.events {
		color: #000;
		width: 100%;
		.event_card {
			border-radius: 4px;
			font-size: 15px;
			line-height: 22px;
			margin: 0 0 4px 0;
			min-height: 25px;
			overflow: hidden;
			padding:0;
			position: absolute;
			width: 100%;
			z-index: 5;
			&:hover {
				z-index: 10;
				box-shadow: 0px 8px 9px -6px rgba(0, 0, 0, 0.2);
				transition: all 150ms ease;
			}
			a {
				background-color: rgba(255, 255, 255, 0.8);
				color: #000;
				display: block;
				height: 100%;
				margin-left: 4px;
				padding: 2px 4px;
				position: relative;
				text-decoration: none;
				width: 100%;
				&:hover {
					background-color: rgba(255, 255, 255, 0.7);
				}
				ul {
					padding: 0;
					margin: 0;
					li {
						list-style: none;
						line-height: 22px;
						font-size: 0.75em;
						padding: 0;
						margin: 0;
						border:0;
						&.event_status {
							display: inline-block;
							position: absolute;
							top: 3px;
							left: auto;
							right: 16px;
							text-align: right;
							&:before {
								font-family: WooCommerce;
								speak: none;
								font-weight: 400;
								font-variant: normal;
								text-transform: none;
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								margin: 0;
								text-indent: 0;
								content: '';
								font-size: 1.2em;
							}
							&.status-unpaid:before, &.status-incart:before {
								content: "\e033";
							}
							&.status-pending:before,
							&.status-pending-confirmation:before {
								content: "\e012";
							}
							&.status-confirmed:before {
								content: "\e011";
							}
							&.status-paid:before {
								content: "\e015";
							}
							&.status-cancelled:before {
								content: "\e013";
							}
							&.status-complete:before {
								content: "\e015";
							}
						}
					}
				}
			}
		}
		&.bymonth {
			margin-top: 10px;
			max-height: 100px;
			overflow: auto;
			.event_card {
				position: relative;
			}
		}
	}
	.calendar_wrapper {
		display:flex;
		overflow: hidden;
		.calendar_presentation {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			.calendar_header {
				.header_wrapper {
					background-color: #fff;
					border: solid #ddd;
					border-width: 1px 1px 0;
					display: flex;
					flex-flow: row wrap;
					z-index: 10;
					.header_labels {
						flex: 0 0 $labels-width;
						.empty_label {
							cursor: auto;
							display: block;
							height: $elabel-height;
							margin: 10px 10px 0;
							vertical-align: top;
							@include noselect;
						}
						.allday_label {
							cursor: auto;
							display: block;
							box-sizing: border-box;
							height: $alabel-height;
							padding: 6px 12px;
							vertical-align: top;
							@include noselect;
						}
					}
					.header_days {
						flex: 1 1 0;
						&.staff_scroll {
							 overflow-x: auto;
							.days_wrapper {
								.header_column {
									flex: 0 0 $column-width;
								}
							}
						}
						.days_wrapper {
							background-color: #fff;
							display: flex;
							margin: 0;
							min-width: 100%;
							position: relative;
							width: auto;
							white-space: nowrap;
							z-index: 4;
							.header_column {
								box-sizing: border-box;
								border-left: 1px solid #ddd;
								cursor: default;
								display: flex;
								flex: 1 1 0%;
								flex-direction: column;
								position: relative;
								.header_label {
									height: $elabel-height;
									margin: 10px 10px 0;
									&.staff_label,
									&.week_label {
										text-align: center;
									}
									a {
										position: relative;
										display: inline-block;
										vertical-align: top;
										text-align: center;
										text-decoration: none;
										z-index: 9;
										&:hover {
											opacity: 0.8;
										}
									}
									img {
										border-radius: 50%;
										margin-right: 5px;
									}
									span {
										vertical-align: top;
										display: block;
										line-height: 1.3;
										&.daynum {
											font-size: 3.5em;
										}
										&.staff_name {
											max-width: 145px;
											overflow: hidden;
										}
									}
								}
								.header_allday {
									box-sizing: border-box;
									display: block;
									padding: 3px 0;
									height: $alabel-height;
								}
					    	}
						}
					}
				}
			}
			.calendar_body {
				background-image: linear-gradient(to bottom, #999 0%, #f9f9f9 1%, #f9f9f9 26%, #f9f9f9 50%, #ddd 51%, #f9f9f9  52%);
				background-repeat: repeat;
				background-position-x: 0;
				background-size: auto $hours-height;
				background-origin: content-box;
				border: solid #ddd;
				border-width: 0 1px 1px;
				display: flex;
				flex-flow: row wrap;
				.body_labels {
					flex: 0 0 $labels-width;
					.hours {
						font-size: .85em;
						margin: 0;
						position: relative;;
						z-index: 4;
						.hour_label {
							display: block;
							height: 60px;
							height: $labels-height;
							&:first-child {
								label {
									display: none;
								}
							}
							label {
								background: #f9f9f9;
								float: left;
								margin-top: -15px;
								padding: 5px 10px;
								vertical-align: top;
								@include noselect;
							}
						}
					}
				}
				.body_days {
					flex: 1 1 0;
					&.staff_scroll {
						overflow-x: auto;
						.body_wrapper {
							.body_column {
								flex: 0 0 $column-width;
							}
						}
					}
					.body_wrapper {
						display: flex;
						height: $wrapper-height;
						margin: 0;
						min-width: 100%;
						width: auto;
						white-space: nowrap;
						z-index: 8;
						.body_column {
							box-sizing: border-box;
							border-left: 1px solid #ddd;
							display: flex;
							flex: 1 1 0%;
							flex-direction: column;
							position: relative;
				    	}
					}
				}
			}
			.current {
				background-color: rgba(0, 0, 0, 0.05);
				z-index: 3;
			}
			.past a {
				color: rgba(0, 0, 0, 0.4);
			}
			.indicator {
				width: 100%;
				height: 0px;
				margin-top: -1px;
				border-bottom: 2px solid rgba(255, 0, 0, .9);
				background-color: rgba(255, 255, 255, 0.5);
				position: absolute;
				z-index: 4;
			}
		}
	}
	.tablenav {
		background-color: #f1f1f1;
		height: auto;
		margin: 0;
		padding-top: 10px;
		width: 100%;
		@include clearfix();
		.filters {
			display: none;
			float: left;
			@media screen and ( min-width: 782px ) {
				display: inline-block;
			}
			.select2 {
				margin-right: 3px;
			}
		}
		.views {
			float: right;
			margin: 0 0 -1px;
			padding: 0;
			a {
				display: inline-block;
				padding: 15px 12px;
				text-decoration: none;
				@media screen and ( min-width: 782px ) {
					padding: 10px 12px;
				}
				&.current {
				    background-color: #fff;
					border: solid #ddd;
					border-width: 1px 1px 0;
					color: #000;
				    pointer-events: none;
				    cursor: default;
				}
			}
		}
		.date_selector {
			display: inline-block;
			float: left;
			margin: 0 5px;
			div {
				float: left;
				margin: 0 3px;
				&:first-of-type {
					select {
						margin-right: 5px;
					}
				}
			}
			select {
				vertical-align: middle;
				width: 6em;
			}
			a {
				@include ir();
				font-size: 1.1em;
				padding: .5em;
				&:before {
					@include icon();
					line-height: 2.3;
				}
			}
			a.prev {
				float: left;
				&:before {
					content: "\e00b";
				}
			}
			a.next {
				float: right;
				&:before {
					content: "\e008";
				}
			}
			.calendar_day {
			    margin: 0;
			}
		}
		.week_selector {
			display: inline-block;
			float: left;
			margin: 0 5px;
			.week_picker {
				float: left;
				.calendar_day {
				    padding: 6px;
				    margin: 0;
				}
			}
			button {
			    background: 0;
			    border: 0;
			    padding: 0;
			}
			a {
				@include ir();
				font-size: 1.1em;
				padding: .5em;
				&:before {
					@include icon();
					line-height: 2.3;
				}
			}
			a.prev {
				float: left;
				&:before {
					content: "\e00b";
				}
			}
			a.next {
				float: right;
				&:before {
					content: "\e008";
				}
			}
		}
	}
	.wc_appointments_calendar {
		width: 100%;
		td {
			color: #bbb;
			padding: 10px 10px 0 0;
			font-size: 15px;
			border-right: 1px solid #ddd;
			border-bottom:1px solid #ddd;
			height: 120px;
			.datenum {
				margin-left: 10px;
			}
			&.calendar-current-day {
				.datenum {
					color: $red;
				    font-weight: 600;
				}
			}
			&.calendar-passed-day {
				background: #efefef;
				a,
				ul,
				li {
					color: rgba(0,0,0,.4);
				}
			}
			&.calendar-diff-month {
				background: #efefef;
			}
		}
		tbody {
			tr {
				td {
					&:last-child {
						border-right:0;
					}
				}
				&:last-child {
					td {
						border-bottom:0;
					}
				}
			}
		}
	}
}

// Appointments list table.
.post-type-wc_appointment {
	.tablenav {
		.date_filter {
			display: inline-block;
			position: relative;
			.date_from,
			.date_to {
				margin-right: 6px;
				max-width: 7.5rem;
				padding: 0 0 0 28px;
			}
			.ui-datepicker-trigger {
				background: transparent;
				border: 0;
				color: #777;
				margin: -10px 0 0 5px;
				padding: 0;
				position: absolute;
					left: 0;
					top: 50%;
			}
		}
		.actions {
			.select2 {
				margin-right: 6px;
			}
		}
	}
}

@media only screen and (max-width: 580px) {
	.header_days:not(.staff_scroll) {
		.header_column {
			.header_label {
				margin: 5px 5px 0 !important;
				max-height: 50px;
				span.daynum {
					font-size: 1.2em !important;
				}
			}
		}
	}
	.header_labels:not(.staff_scroll) {
		.empty_label {
			margin: 5px 5px 0 !important;
			max-height: 50px;
		}
	}
}

//* Calendar dialog
#wca-dialog-container-edit-appointment,
#wca-dialog-container-add-appointment {
	display: none;
	position: relative;
	z-index: 10;
}

#wca-dialog-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 310px;
	background: #000;
	opacity: 0.7;
	filter: alpha(opacity=70);
	z-index: 100100;
}

#wca-dialog-wrap {
	background-color: #fff;
	-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
	width: 440px;
	height: 305px;
	overflow: hidden;
	margin-left: -220px;
	margin-top: -150px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100105;
}

#wca-dialog {
	position: relative;
	height: 100%;
	.button .dashicons {
		vertical-align: text-top;
		font-size: 18px;
	}
	.button-success {
		background-color: $dark-green;
		color: white;
		border-color: darken($dark-green,5)  darken($dark-green,6)  darken($dark-green,7);
		box-shadow: 0 1px 0 darken($dark-green,10);
		&:hover {
			background-color: lighten($dark-green,2)
		}
	}
}

#wca-dialog-header {
	display: flex;
    align-items: flex-end;
	background: #fcfcfc;
	border-bottom: 1px solid #ddd;
	height: 60px;
	margin: 0;
	padding: 0 36px 8px 23px;
	.dashicons {
		vertical-align: middle;
	}
	a {
		text-decoration: none;
	}
	#wca-dialog-close {
		color: #666;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		width: 36px;
		height: 36px;
		text-align: center;
		background: none;
		border: none;
		cursor: pointer;
		&:before {
			font: normal 20px/36px dashicons;
			vertical-align: top;
			speak: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			width: 36px;
			height: 36px;
			content: "\f158";
		}
		&:hover {
			color: #00a0d2;
		}
		&:focus {
			color: #00a0d2;
			outline: none;
			-webkit-box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba(30, 140, 190, .8);
			box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba(30, 140, 190, .8);
		}
	}

	#wca-dialog-name {
		display: inline-block;
		height: 48px;
		line-height: 48px;
		overflow: hidden;
		white-space: nowrap;
		dd {
			vertical-align: middle;
		}
		.wca-customer-avatar {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			margin-right: 20px;
			vertical-align: middle;
		}
		.wca-availability-name {
			font-size: 17px;
		}
		.wca-customer-name {
			font-size: 17px;
			font-weight: 700;
		}
		.wca-customer-status {
			font-style: italic;
			font-size: .8em;
			font-weight: 400;
			margin-left: .45em;
		}
		.wca-customer-meta {
			display: inline-block;
			margin-left: .45em;
			.dashicons {
				font-size: 17px;
			}
		}
	}
}

#wca-dialog-content {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	padding: 0 16px;
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	bottom: 44px;
}

#wca-dialog-inner {
	display: table;
	padding: 12px 0;
	width: 100%;
	dl {
		display: table-row;
		dt, dd {
			display: table-cell;
			padding: .35em .65em;
		}
		dt {
			width: 90px;
			text-align: left;
			color: $subtext;
		}
	}
	a {
		text-decoration: none;
	}
	#wca-product-qty {
		color: $secondarytext;
	}
}

#wca-dialog-footer {
	padding: 8px 16px;
	background: #fcfcfc;
	border-top: 1px solid #ddd;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	#wca-dialog-cancel {
		line-height: 25px;
		float: left;
	}
	#wca-dialog-update {
		line-height: 23px;
		float: right;
		.button:first-child{
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
	}
}

@media screen and ( max-width: 782px ) {
	#wca-dialog-content {
		padding: 0 16px 60px;
	}

	#wca-dialog-content {
		bottom: 52px;
	}

	#wca-dialog-cancel {
		line-height: 32px;
	}

	#wca-dialog-footer .button {
		margin-bottom: 0;
	}
}

@media screen and ( max-width: 460px ) {
	#wca-dialog-wrap {
		width: auto;
		margin-left: 0;
		left: 10px;
		right: 10px;
		max-width: 440px;
	}
}

@media screen and ( max-height: 320px ) {
	#wca-dialog-wrap {
		-webkit-transition: none;
		transition: none;
		height: auto;
		margin-top: 0;
		top: 10px;
		bottom: 10px;
	}
}

@media screen and ( max-height: 290px ) {
	#wca-dialog-content {
		height: -webkit-calc(100% - 92px);
		height: calc(100% - 92px);
		padding-bottom: 2px;
	}
}

div.wca-dialog-input {
	float: left;
	margin: 2px;
	max-width: 694px;
	input {
		width: 300px;
		padding: 3px;
		box-sizing: border-box;
	}
}

@media screen and ( max-width: 782px ) {
	div.wca-dialog-input {
		max-width: 70%;
		max-width: -webkit-calc(100% - 86px);
		max-width: calc(100% - 86px);
		width: 300px;
		input {
			width: 100%;
			font-size: 16px;
			padding: 5px;
		}
	}
}

//* Appointment form
.wp-admin {
	.wc-appointments-appointment-form-wrap {
		display: block;
		width: 100%;
		.wc-appointments-appointment-form {
			margin: 0;
			max-width: 430px;
			.select2-container {
				max-width: 100% !important;
			}
			.ui-datepicker th,
			.ui-datepicker td {
				display: table-cell;
			}
		}
		div.quantity {
			float: left;
			margin: 0 4px 0 0;
			.qty {
			    width: 100%;
			}
		}
	}
	div.appointment-order-label-select {
		display: none;
		margin-top: 10px;
	}
}

//* Appointments data
#appointments_product_data,
#appointments_availability .options_group,
#appointments_pricing {
	.table_grid {
		padding: 0 9px;
		@media only screen and (min-width: 1500px) {
			.price_wrap {
				position: relative;
				width: 100%;
				select {
					margin-right: 7px;
					width: calc(45% - 7px);
				}
				input[type="number"] {
					width: 55%;
				}
			}
		}
	}
}

#appointments_product_data,
#appointments_pricing,
#appointments_availability,
#appointments_products,
#appointments_settings,
#appointments_staff {
	.options_group_heading {
		background: #ececec;
		border-bottom: 1px solid #dfdfdf;
		padding: .5em 12px;
		margin: -10px -9px .75em;
	}
	.photo {
		vertical-align: middle;
		margin-right: 10px;
	}
	.edit_staff {
		float: right;
		font-weight: normal;
		line-height: 26px;
		margin: 0 1em 0 0;
		padding: 0;
		position: relative;
	}
	.align_right {
		text-align: right;
	}
	.table_grid {
		.wca-nav-wrapper {
			background: #f5f5f5;
			border: solid #e5e5e5;
			border-width: 1px 1px 0;
			display: flex;
			position: relative;
			z-index: 10;
			&::before,
			&::after {
				content: " ";
				display: table;
			}
			&::after {
				clear: both;
			}
			a {
				border-right: 1px solid #e5e5e5;
				display: inline-block;
				padding: 10px;
				line-height: 26px;
				font-weight: bold;
				font-size: 14px;
				text-decoration: none;
				&.wca-nav-active {
					background: #fff;
					box-shadow: 0 4px 0 0 #fff;
					color: #777;
				}
			}
		}
		table {
			border-collapse: collapse;
			margin-bottom: 9px;
			position: relative;
			.wc-metabox-sortable-placeholder td {
				border-color: #bbb;
				background-color: #f5f5f5;
				margin-bottom: 9px;
				border-width: 1px;
				border-style: dashed;
			}
			td.sort {
				cursor: move;
				&:before {
					content: "\f333";
					font-family: dashicons;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
				}
			}
			.woocommerce_staff_products {
				td.sort {
					cursor: auto;
					&:before {
						@include iconbefore( "\e006" );
					}
				}
			}
			td.remove {
				cursor: pointer;
				&:before {
					content: "\f158";
					font-family: dashicons;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
				}
				&:hover {
					background-color: #fb0216;
					color: #fff;
				}
			}
			th.sort,
			td.sort,
			th.remove,
			td.remove {
				color: #ccc;
				width: 16px !important;
			}
			th {
				padding: 15px 5px;
				white-space: nowrap;
			}
			td {
				background-color: #fff;
				border-bottom: 1px solid #DFDFDF;
				border-top: 0;
				padding: 10px 5px;
				position: relative;
				vertical-align: middle;
				width: auto !important;
				input, span.text {
					width: 100%;
					height: 35px;
					padding: 6px 7px;
					margin: 0;
					display: block;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					float: none;
					outline: none;
				}
				span.text {
					background: transparent none;
				}
				&.checkbox {
					vertical-align: middle;
					text-align: center;
					input, label {
						width: auto;
						float: none;
						display: inline;
					}
				}
				.from_date,
				.to_date,
				.on_date {
					position: relative;
				}
				input.short {
					-moz-box-sizing: content-box;
					-webkit-box-sizing: content-box;
					width: 1em;
					box-sizing: content-box;
					text-align: center;
				}
				.ui-datepicker-trigger {
					background: #fff;
					border: 0;
					color: #777;
					margin: -15px 5px 0 0;
					padding: 5px;
					position: absolute;
						right: 0;
						top: 50%;
				}
				select {
					width: 100%;
					padding: 4px 6px;
					margin: 0;
					height: 35px;
				}
				.select {
					overflow: hidden;
					zoom: 1;
					min-width: 50px;
				}
			}
			td:last-child {
				border-right: 0;
			}
			tr.current td {
				background: #fefbcc;
			}
			.button {
				clear: none;
				display: inline;
				float: right;
				margin: 0 7px 0 0;
				&:before {
					@include iconbefore( "\e007" );
				}
			}
			tfoot {
				td, th {
					background-color: #f5f5f5;
					border-top: 0;
					font-weight: 400;
					line-height: 26px;
					vertical-align: middle;
				}
			}
			.description {
				clear: none;
				display: inline;
				margin: 0 0 0 7px;
				padding: 0;
			}
		}
		.woocommerce-help-tip {
			margin-left: 3px;
		}
	}
	.toolbar {
		font-size: 13px;
		line-height: normal;
		min-height: 32px;
		overflow: hidden;
		.add_staff,
		.add_select_id {
			float: right;
			&:before {
				@include iconbefore( "\e007" );
			}
		}
	}
	.toolbar h3 {
		float: left;
		padding: 0;
		border: 0;
	}
	.woocommerce_appointment_staff {
		label {
			width: auto;
			float: none;
			margin: 0;
		}
	}
	.appointment-day-restriction {
		table {
			border: 0;
			label.checkbox {
				margin: 2px !important;
			}
		}
	}
}

#woocommerce-appointment-save {
	.inside {
		margin: 0;
		padding: 0;
		&:after {
			content: " ";
			display: block;
			height: 0;
			clear: both;
		}
		.submitbox {
			background: #f5f5f5;
			clear: both;
			#appointment_date {
				width: 10em;
			}
			#appointment_date_hour,
			#appointment_date_minute {
				width: 3em;
			}
			.minor-save-actions {
				background: white;
				border-bottom: 1px solid #ddd;
				label {
					color: #777;
					padding: 0 0 3px;
					display: block;
				}
			}
			.major-save-actions {
				padding: 10px;
			}
			&:after {
				content: " ";
				display: block;
				height: 0;
				clear: both;
			}
		}
	}
}

.appointments-datetime-select-both .from_time,
.appointments-datetime-select-both .to_time {
	margin-top: 1em;
}

._wc_appointment_cal_color_field {
	.wp-color-result {
		box-shadow: none;
		margin: 0 0 1px 0;
	}
	.wp-picker-container {
		display: inline-block;
	}
	.wp-picker-input-wrap {
		label {
			width: auto;
			margin: 0;
	   }
	}
}

label.disabled {
	color: $grey;
	pointer-events: none;
}

//* jQuery inline Datepicker.
.ui-datepicker:not(.ui-datepicker-inline) {
	z-index: 10 !important;
	@include inline_datepicker();
}

//* Appointment summary
.wc-appointment-summary {
	background-color: #eee;
	background-color: rgba(0, 0, 0, 0.07);
	padding: 1.5em;

	.wc-appointment-summary-name{
		small {
			padding: .2em .6em;
			@include statuses();
		}
	}
	.wc-appointment-summary-list {
		margin: 1em 0 0;
		li {
			margin: 0;
			strong {
				margin-right: .5em;
			}
		}
	}
	.wc-appointment-summary-actions {
		margin-top: 1em;
		a {
			border-right: 1px solid #ccc;
			margin: 0 3px 0 0;
			padding: 0 4px 0 0;
		}
		a:last-child {
			border-right: 0;
			margin: 0;
			padding: 0;
		}
	}
}

#availability_rows tr {
	display: table-row;
}

//* WCML integration
.icl_div_config {
	margin: 0 1em 1em;
	padding: 0 1em 1em;
}
.wcml_appointments_range_slot,
.wcml_appointments_staff_slot {
	display: flex !important;
	flex-direction: row !important;
	margin-top: 10px !important;
	label {
	    display: inline-block !important;
		margin: 0 5px !important;
		width: 20px !important;
	}
	input {
		background-color: #f5f4ec !important;
		display: inline-block !important;
		width: 100% !important;
	}
}

.wcml_custom_cost_field .wcml_appointments_staff_slot {
	clear: both !important;
	padding-top: 5px !important;
	width: 1em !important;
}

.wcml_custom_costs {
    display: inline-block !important;
	margin: 10px !important;
	label {
	    width: auto !important;
	    margin: 0 5px !important;
	    float: left !important;
	}
	input {
	    width: 16px !important;
	    clear: both !important;
	    margin: 2px 5px 2px 0 !important;
	    float: left !important;
	}
}

//* Add-ons integration
.wc-pao-addons {
	.style_if_appointment {
		// header
		.wc-pao-addon-content-option-header {
		    grid-column: 1/5;
		}
		.wc-pao-addon-content-price-header {
		    grid-column: 5/9;
		}
		.wc-pao-addon-content-duration-header {
		    display: block;
		    padding-top: 8px;
		    grid-column: 9/span 5;
		    background-color: #f5f5f5;
		    margin-right: -15px;
		}
		// content
		.wc-pao-addon-content-label {
		    grid-column: 3/5;
			&.full {
			    grid-column: 2/5;
			}
		}
		.wc-pao-addon-content-price-type {
		    grid-column: 5/7;
		}
		.wc-pao-addon-content-price {
		    grid-column: 7/9;
		}
		.wc-pao-addon-content-duration-type {
		    display: block;
		    align-self: center;
		    grid-column: 9/11;
		}
		.wc-pao-addon-content-duration {
		    display: block;
		    align-self: center;
		    grid-column: 11/13;
		}
		// Non-option styling.
		.wc-pao-addon-adjust-duration-settings {
		    margin-top: 15px;
			&.show {
				display: flex;
			}
			&.hide {
				display: none;
			}
			select {
				max-width: 20%;
				margin-left: 22px;
			    margin-right: 10px;
			    float: none;
			    flex: 1;
			}
			input[type="text"],
			input[type="number"] {
				flex-basis: 80px;
				width: 80px !important;
			}
		}
	}
	.show_if_appointment {
		.show {
			display: block;
		}
		.hide {
			display: none;
		}
	}
}