/* Booked Appointments styles
----------------------------------------------------------------- */

@import "../../../../../css/_mixins.scss";
@import "../../../../../css/_theme-vars.scss";
@import "../../../css/_skin-vars.scss";

/* Buttons */
body #booked-profile-page input[type="submit"],
body #booked-profile-page input[type="submit"].button-primary,
body #booked-profile-page button,
body .booked-list-view input[type="submit"],
body .booked-list-view input[type="submit"].button-primary,
body .booked-list-view button,
body table.booked-calendar input[type="submit"],
body table.booked-calendar input[type="submit"].button-primary,
body table.booked-calendar button,
body .booked-modal input[type="submit"],
body .booked-modal input[type="submit"].button-primary,
body .booked-modal button {
	@include theme_button_filled;
}
body #booked-profile-page .booked-fea-appt-list .appt-block button.button-primary:hover,
.booked-calendar-wrap .booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,
.booked-calendar-wrap .booked-calendar .booked-appt-list .timeslot .timeslot-people button:focus,
#booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons .google-cal-button > a:hover,
#booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons .google-cal-button > a:focus,
#booked-profile-page input[type="submit"]:hover,
#booked-profile-page input[type="submit"]:focus,
#booked-profile-page input[type="submit"].button-primary:hover,
#booked-profile-page input[type="submit"].button-primary:focus,
#booked-profile-page button:hover,
#booked-profile-page button:focus,
.booked-list-view input[type="submit"]:hover,
.booked-list-view input[type="submit"]:focus,
.booked-list-view input[type="submit"].button-primary:hover,
.booked-list-view input[type="submit"].button-primary:focus,
.booked-list-view button:hover,
.booked-list-view button:focus,
table.booked-calendar input[type="submit"]:hover,
table.booked-calendar input[type="submit"]:focus,
table.booked-calendar input[type="submit"].button-primary:hover,
table.booked-calendar input[type="submit"].button-primary:focus,
table.booked-calendar button:hover,
table.booked-calendar button:focus,
.booked-modal input[type="submit"]:hover,
.booked-modal input[type="submit"]:focus,
.booked-modal input[type="submit"].button-primary:hover,
.booked-modal input[type="submit"].button-primary:focus,
.booked-modal button:hover,
.booked-modal button:focus {
	@include theme_button_colors_hover;
}
body #booked-profile-page input[type="submit"].button-primary {
	border-color: var(--theme-color-text_link3) !important;
	background:  var(--theme-color-text_link3) !important;
}
body #booked-profile-page input[type="submit"].button-primary:hover {
	border-color: var(--theme-color-text_hover3) !important;
	background:  var(--theme-color-text_hover3) !important;
}
body #booked-profile-page .booked-profile-appt-list .appt-block .cancel {
	margin: 0 !important;
	color: var(--theme-color-inverse_hover) !important;
	border-color: var(--theme-color-text_dark) !important;
	background:  var(--theme-color-text_dark) !important;
	@include transition(color .3s ease, border-color .3s ease, background-color .3s ease !important);
	&:hover {
		color: var(--theme-color-inverse_link) !important;
		border-color: var(--theme-color-text_link3) !important;
		background:  var(--theme-color-text_link3) !important;
	}
}

body #booked-profile-page input[type="submit"],
body #booked-profile-page input[type="submit"].button-primary{
	@include font(15px !important, 20px !important);
	padding: 14px 50px !important;
}

body #booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons {
	@include flex;
	@include flex-align-items(center);
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc,
body #booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons a {
	text-align: center;
	@include font(15px !important, 20px !important);
	padding: 10px 44px !important;
	@include border-radius(0);
	border: none !important;
	float: none;
	@include box-shadow(none);
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc,
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc:active {
	top: 0;
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc {
	color: var(--theme-color-inverse_link) !important;
	border-color: var(--theme-color-text_link3) !important;
	background: var(--theme-color-text_link3) !important;
	@include transition-all(0.3s);
	&:hover {
		color: var(--theme-color-inverse_link) !important;
		border-color: var(--theme-color-text_hover3) !important;
		background: var(--theme-color-text_hover3) !important;
	}
	.addeventatc_icon {
		display: none;
	}
	.addeventatc_dropdown {
		margin-top: 0;
		border: none;
		@include border-radius(0);
		overflow: hidden;
		@include box-shadow(0 2px 6px rgba(0,0,0,.15));
	}
}
body #booked-profile-page h4:last-child {
	margin: 0;
}

/* Text fields */
body #booked-page-form input[type="email"],
body #booked-page-form input[type="text"],
body #booked-page-form input[type="password"],
body #booked-page-form textarea,
.booked-upload-wrap,
.booked-upload-wrap input {
	@include theme_field_colors;
}
body #booked-page-form input[type="email"]:focus,
body #booked-page-form input[type="email"].filled,
body #booked-page-form input[type="text"]:focus,
body #booked-page-form input[type="text"].filled,
body #booked-page-form input[type="password"]:focus,
body #booked-page-form input[type="password"].filled,
body #booked-page-form textarea:focus,
body #booked-page-form textarea.filled,
.booked-upload-wrap:hover,
.booked-upload-wrap input:focus,
.booked-upload-wrap input.filled {
	@include theme_field_colors_hover;
}

/* Icons fix */
.booked-icon {
	padding-left: 1px;
}

/* Calendar */
body table.booked-calendar th {
	padding: 1.05rem 0 1.15rem !important;
}
body table.booked-calendar,
body table.booked-calendar thead,
body table.booked-calendar body {
	background-color: transparent !important;
}
body table.booked-calendar,
body table.booked-calendar tr {
	border-width: 0 !important;
}
body table.booked-calendar tr th,
body table.booked-calendar tr td {
	border-width: 1px !important;
	border-style: solid !important;
	background-color: transparent !important;
	@include transition-properties(color, border-color, background-color);
}

table.booked-calendar tr td .date,
table.booked-calendar tr td:hover .date,
table.booked-calendar tr td:hover .date span,
table.booked-calendar tr td.prev-date .date,
table.booked-calendar tr td.prev-date:hover .date,
table.booked-calendar tr td.prev-date:hover .date span,
table.booked-calendar tr td.today .date,
table.booked-calendar tr td.today .date span,
table.booked-calendar tr td.prev-month .date,
table.booked-calendar tr td.prev-month .date span,
table.booked-calendar tr td.next-month .date,
table.booked-calendar tr td.next-month .date span,
table.booked-calendar tr td .booked-appt-list {
	color: inherit !important;
	background: transparent !important;
}
body table.booked-calendar td .date .number {
	@include font(19px, 24px, 500);
	@include box(auto, auto, normal);
	@include border-radius(0);
	@include transition(none);
}
body table.booked-calendar tr.week td.active .date .number {
	color: inherit !important;
	background: transparent !important;
	border: none !important;
}
body table.booked-calendar td.today .date span {
	border: none !important;
}
body table.booked-calendar td.today:hover .date span {
	background: transparent !important;
	color: var(--theme-color-inverse_link) !important;
}
body table.booked-calendar td.today.prev-date .date span,
body table.booked-calendar td.today.next-date .date span {
	color: var(--theme-color-inverse_hover) !important;
}
body table.booked-calendar td.today.prev-date:hover .date span,
body table.booked-calendar td.today.next-date:hover .date span {
	color: var(--theme-color-inverse_link) !important;
	background: transparent !important;
}

body table.booked-calendar tr.days {
	color: var(--theme-color-alter_dark) !important;
	background: var(--theme-color-alter_bg_color) !important;
}
body table.booked-calendar thead tr.days th {
	color: var(--theme-color-alter_dark) !important;
	border-color: var(--theme-color-alter_bd_color) !important;
}
body table.booked-calendar tr.days th {
	background: transparent !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}
table.booked-calendar thead tr {
	background-color: var(--theme-color-text_link2) !important;
}
table.booked-calendar thead tr th:first-child {
	border: 1px solid var(--theme-color-text_link2) !important;
}
table.booked-calendar thead tr th {
	color: var(--theme-color-inverse_link) !important;
}
table.booked-calendar thead th i {
	color: var(--theme-color-inverse_link) !important;
	@include transition(opacity .3s ease);
}
body table.booked-calendar thead th .page-right,
body table.booked-calendar thead th .page-left {
	@include font(12px, '', 400);
	margin-top: -6px;
}
body table.booked-calendar th .page-left,
body table.booked-calendar th .page-left:hover {
	left: 20px;
}
body table.booked-calendar th .page-right,
body table.booked-calendar th .page-right:hover {
	right: 20px;
}
body table.booked-calendar th .page-left:hover i,
body table.booked-calendar th .page-right:hover i {
	opacity: .8;
}
body table.booked-calendar thead th .page-right i:before,
body table.booked-calendar thead th .page-left i:before {
	font-family: $theme_icons;
}
body table.booked-calendar thead th .page-left i:before {
	content: '\EA07';
}
body table.booked-calendar thead th .page-right i:before {
	content: '\E9DF';
}

body table.booked-calendar th .monthName {
	@include font(19px, 1rem, 600);
	letter-spacing: 0;
}
table.booked-calendar thead th .monthName a {
	color: var(--theme-color-inverse_link);
	@include transition(opacity .3s ease);
}
table.booked-calendar thead th .monthName a:hover {
	color: var(--theme-color-inverse_link);
	opacity: .8;
}
table.booked-calendar tbody tr {
	background-color: var(--theme-color-bg_color) !important;
}
table.booked-calendar tbody tr td {
	color: var(--theme-color-text_light) !important;
	border-color: var(--theme-color-bd_color) !important;
}
table.booked-calendar tbody tr td.prev-month,
table.booked-calendar tbody tr td.next-month {
	color: var(--theme-color-text_light) !important;
}
table.booked-calendar tbody tr td:not(.prev-date) .date {
	color: var(--theme-color-text_dark) !important;
	background-color: transparent !important;
	@include transition(color .3s ease, background-color .3s ease, border-color .3s ease);
}
table.booked-calendar tbody tr td:not(.prev-date):hover .date {
	color: var(--theme-color-inverse_link) !important;
	background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr td.today:not(.prev-date):hover .date,
body table.booked-calendar tr td.active:not(.prev-date) .date {
	color: var(--theme-color-inverse_link) !important;
	background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr td.today .date {
	color: var(--theme-color-inverse_hover) !important;
	background-color: var(--theme-color-text_dark) !important;
}
body table.booked-calendar tr td.today:hover .date {
	color: var(--theme-color-inverse_link) !important;
	background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr.entryBlock td {
	padding: 0 !important;
}
body table.booked-calendar .booked-appt-list {
	padding: 40px 32px;
	@include box-shadow(none);
	@include border-radius(0);
	border: 20px solid var(--theme-color-text_link3);
}
body table.booked-calendar tr.week td.active .date,
body table.booked-calendar tr.week td.active:hover .date,
body table.booked-calendar tr.entryBlock {
	background: var(--theme-color-bg_color);
}
body table.booked-calendar tr.entryBlock {
	color: var(--theme-color-text);
}
body table.booked-calendar td.booked .date,
body table.booked-calendar td.booked .date span,
body table.booked-calendar td.booked:hover .date,
body table.booked-calendar td.booked:hover .date span {
	color: var(--theme-color-alter_dark) !important;
	background: var(--theme-color-alter_bg_color) !important;
}
.booked-calendar-wrap .booked-calendar .booked-appt-list h2 {
	margin: 0 0 38px;
	@include font(24px, 1.2em, 600);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--theme-color-text_dark);
	strong {
		font-weight: inherit;
	}
}
body .booked-calendar-wrap {
	margin: 0;
	.booked-calendar .booked-appt-list .timeslot {
		padding: 16px 0;
		@include flex;
		@include flex-align-items(center);
		background: var(--theme-color-bg_color);
		border-top: none;
		+ .timeslot {
			border-top: 1px solid var(--theme-color-bd_color);
		}
		&:last-child {
			margin-bottom: 0;
		}
		&:hover {
			background: var(--theme-color-bg_color);
		}
		.timeslot-title {
			color: var(--theme-color-text_link3);
		}
	}

	.booked-appt-list .timeslot .timeslot-people,
	.booked-appt-list .timeslot .timeslot-time,
	.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-time {
		color: var(--theme-color-text_dark);
		padding: 0;
	}
	.booked-appt-list .timeslot .timeslot-time {
		@include font(15px, 19px, 500);
	}
	.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-people {
		height: auto;
		padding: 0;
	}
	.booked-appt-list .timeslot .timeslot-time i:before {
		@include font(18px, '', 400);
		font-family: $theme_icons;
		content: '\EA00';
		margin-right: 5px;
	}
	.booked-appt-list .timeslot .timeslot-time,
	.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-time,
	.booked-appt-list .timeslot .timeslot-people {
		height: auto;
	}

	.booked-appt-list .timeslot .spots-available {
		padding-left: 33px;
		padding-bottom: 0;
		@include font(15px, 19px, 400);
		text-transform: none;
		color: var(--theme-color-text);
		letter-spacing: 0;
	}

	.booked-calendar .booked-appt-list .timeslot .timeslot-people button {
		@include font(14px, 20px, 500);
		padding: 14px 44px;
		color: var(--theme-color-inverse_link) !important;
		background: var(--theme-color-text_link3) !important;
		border-color: var(--theme-color-text_link3) !important;
		.button-timeslot {
			font-weight: inherit;
			letter-spacing: 0;
		}
		&:hover {
			color: var(--theme-color-inverse_link) !important;
			background: var(--theme-color-text_hover3) !important;
			border-color: var(--theme-color-text_hover3) !important;
		}
	}
	.booked-appt-list .timeslot .timeslot-people button[disabled],
	.booked-appt-list .timeslot .timeslot-people button[disabled]:hover {
		color: var(--theme-color-inverse_link) !important;
		background: var(--theme-color-text_light) !important;
		border-color: var(--theme-color-text_light) !important;
		@include box-shadow(none !important);
	}

}
/* Calendar Large */
.booked-calendar-wrap.large {
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date),
	table.booked-calendar tr.week td.active:not(.prev-date),
	table.booked-calendar tr td.today {
		overflow: visible;
	}
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
	table.booked-calendar tr.week td.active:not(.prev-date):before,
	table.booked-calendar tr td.today:before,
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):after,
	table.booked-calendar tr.week td.active:not(.prev-date):after,
	table.booked-calendar tr td.today:after {
		content: '';
		display: none;
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 1px;
		@include transition(background-color .15s ease-out);
	}
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
	table.booked-calendar tr.week td.active:not(.prev-date):before,
	table.booked-calendar tr td.today:before {
		top: -1px;
		bottom: auto;
	}
	table.booked-calendar tr td.today:before,
	table.booked-calendar tr td.today:after {
		background-color: var(--theme-color-text_dark) !important;
	}
	table.booked-calendar tr.week td.active:not(.prev-date):before,
	table.booked-calendar tr.week td.active:not(.prev-date):after {
		background-color: var(--theme-color-text_link3) !important;
	}
	table.booked-calendar tr td:not(.prev-date):hover:before,
	table.booked-calendar tr td.today:hover:before,
	table.booked-calendar tr td:not(.prev-date):hover:after,
	table.booked-calendar tr td.today:hover:after {
		background-color: var(--theme-color-text_link3) !important;
	}
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
	table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):after {
		@include transition(background-color .3s ease);
	}
}


/* Calendar Small */
body .booked-calendar-wrap.small {
	overflow: hidden;
	padding: 20px 35px 35px !important;
	@include content-box;
	margin: 0;
	background-color: var(--theme-color-alter_bg_color) !important;

	.entryBlock .booked-appt-list .timeslot,
	.entryBlock .booked-appt-list .timeslot:hover {
		background-color: var(--theme-color-alter_bg_color) !important;
	}
	.booked-appt-list {
		max-height: 375px;
		border: 7px solid var(--theme-color-alter_link2);
		h2 {
			@include font(16px, 1.2em);
			letter-spacing: 0;
			margin: 10px 0 8px;
		}
		.timeslot {
			margin-bottom: 0;
			.timeslot-people {
				float: none;
				button {
					@include flex;
					@include flex-direction(column);
					@include flex-justify-content(center);
					@include border-radius(0);
					.button-timeslot {
						position: relative;
						@include font(14px, 18px, 500);
						letter-spacing: 0;
						&:before {
							font-family: $theme_icons;
							content: '\EA00';
							@include font(14px, '', 400);
							margin-right: 8px;
						}
					}
				}
			}
		}
		.timeslot.timeslot-unavailable button .button-text {
			display: block;
		}
		.timeslot.timeslot-unavailable button .spots-available {
			display: none;
		}
		.timeslot button .spots-available {
			padding: 2px 0 3px;
			color: var(--theme-color-inverse_link);
			opacity: .8;
		}
	}


	table.booked-calendar  {
		border: none !important;
		tbody {
			position: relative;
			tr {
				background-color: var(--theme-color-alter_bg_color) !important;
			}
			&:before {
				line-height:1em;
				content:'\200C';
				display:block;
			}
		}
		thead .calendarSavingState {
			position: relative;
			top: 1px;
			.booked-icon {
				padding: 0;
				&:before {
					padding: 1px;
				}
			}
		}
		td .date {
			color: var(--theme-color-alter_light) !important;
			border-color: transparent !important;
			background-color: transparent !important;

		}
		td .date,
		.date span {
			@include transition(color .3s ease, background-color .3s ease, border-color .3s ease);
		}
		td.booked .date,
		td.booked .date span,
		td.booked:hover .date,
		td.booked:hover .date span {
			color: var(--theme-color-text_dark) !important;
			background: var(--theme-color-bg_color) !important;
		}
		td.today.prev-date:not(.booked) .date span,
		td.today.next-date:not(.booked) .date span {
			color: var(--theme-color-inverse_hover) !important;
		}
		td.today.prev-date:not(.booked):hover .date span,
		td.today.next-date:not(.booked):hover .date span {
			color: var(--theme-color-inverse_link) !important;
		}
		tbody tr td.prev-month .date,
		tbody tr td.next-month .date {
			color: var(--theme-color-alter_light) !important;
		}
		tbody tr td:not(.prev-date) .date {
			color: var(--theme-color-alter_dark) !important;
			background-color: transparent !important;
			border-color: transparent !important;;
		}
		tbody tr td:not(.prev-date):hover .date {
			color: var(--theme-color-inverse_link) !important;
			background-color: var(--theme-color-alter_link2) !important;
		}
		tbody tr td.active:not(.prev-date) .date {
			color: var(--theme-color-inverse_link) !important;
			background-color: var(--theme-color-alter_link2) !important;
		}
		tbody tr td.today .date {
			color: var(--theme-color-inverse_hover) !important;
			background-color: var(--theme-color-alter_dark) !important;
		}
		tbody tr td.today:hover .date {
			color: var(--theme-color-inverse_link) !important;
			background-color: var(--theme-color-alter_link2) !important;
		}
		tr.week td.active .date,
		td.today.active:hover .date span {
			background-color: var(--theme-color-alter_link2) !important;
		}
		tr th, tr td {
			border: none !important;
		}
		thead tr th {
			padding: 0.3rem 0 1.5rem !important;
			color: var(--theme-color-alter_dark) !important;
		}
		th .monthName {
			@include flex;
			@include flex-direction(column);
			@include flex-justify-content(center);
			@include flex-align-items(center);
			height: 1.2em;
			@include font(24px, 1em, 600);
			a {
				margin-top: 5px;
				padding-left: 0;
				display: inline-block;
				@include font(14px, 1.1em);
				top: 0;
				color: var(--theme-color-alter_dark) !important;
			}
		}
		thead tr {
			background-color: var(--theme-color-alter_bg_color) !important;
			&.days {
				background-color: var(--theme-color-bg_color) !important;
				th {
					position: relative;
					padding: 1rem 0 !important;
					font-size: 14px;
					&:first-child {
						background-color: var(--theme-color-bg_color) !important;
						&:after {
							content: '';
							position: absolute;
							z-index: 0;
							top: 0;
							left: -35px;
							@include box(35px, 100%);
							background-color: inherit !important;
						}
					}
					&:last-child {
						background-color: var(--theme-color-bg_color) !important;
						&:after {
							content: '';
							position: absolute;
							z-index: 0;
							top: 0;
							right: -35px;
							@include box(35px, 100%);
							background-color: inherit !important;
						}
					}

				}
			}
		}

		thead tr th:first-child {
			background-color: var(--theme-color-alter_bg_color) !important;
			border-color: var(--theme-color-alter_bg_color) !important;
		}
		thead th i {
			color: var(--theme-color-alter_dark) !important;
		}
		thead th {
			height: 3.5rem;
		}
		thead th .page-right,
		thead th .page-left {
			@include font(12px, '', 400);
			margin-top: -17px;
		}

		thead th .page-left,
		thead th .page-left:hover {
			left: 20px;
		}
		thead th .page-right,
		thead th .page-right:hover {
			right: 20px;
		}
		thead th .page-right i:before {
			content: '\E9E6';
		}
		thead th .page-left i:before {
			content: '\E9E5';
		}

		td .date .number {
			@include font(14px, '', 400);
			@include transform(none);
		}
		tr.week td.active .date .number {
			@include transform(none);
		}

	}

}

/* Calendar Small in Sidebar */
[class*="scheme_"].sidebar .booked-calendar-wrap.small {
	margin-top: -1rem;
	padding: 0 !important;
	background-color: transparent !important;
	table.booked-calendar thead tr:not(.days) th {
		padding: 0 !important;
	}
	table.booked-calendar thead th .page-right, 
	table.booked-calendar thead th .page-left {
		margin-top: -4px;
	}
}

/* Booked form */
body .booked-form {
	.field {
		label.field-label {
			@include font(16px ,24px, 500);
			padding: 5px 0 5px;
			color: var(--theme-color-text_dark);
			.required-asterisk {
				font-size: 10px;
				margin: 5px 0 0 5px;
				vertical-align: top;
				color: var(--theme-color-text_link);
			}
		}
		p.field-small-p {
			margin: 0 0 5px;
			@include font(16px, 24px, 400);
		}
		.checkbox-radio-block label {
			padding-left: 1.6em;
			top: 0;
		}
		.checkbox-radio-block label:before {
			line-height: 15px;
			top: 0.5em;
		}
		select,
		input[type="text"],
		input[type="password"],
		input[type="tel"],
		input[type="email"],
		textarea {
			width: 100%;
			float: none;
			@include font(16px, 1.5em, 400);
			margin: 0;
			padding: 13px 0;
			border: none;
			@include border-radius(0);
			color: var(--theme-color-input_text);
			background-color: var(--theme-color-input_bg_color);
			border-bottom: 1px solid var(--theme-color-input_bd_color);
		}

		select:focus,
		select.filled,
		input[type="text"]:focus,
		input[type="text"].filled,
		input[type="password"]:focus,
		input[type="password"].filled,
		input[type="tel"]:focus,
		input[type="tel"].filled,
		input[type="email"]:focus,
		input[type="email"].filled,
		textarea:focus,
		textarea.filled {
			color: var(--theme-color-input_dark);
			background-color: var(--theme-color-input_bg_hover);
			border-color: var(--theme-color-input_bd_hover);
		}
	}
	.cf-block {
		select {
			visibility: visible;
			height: auto;
			-webkit-appearance: auto;
		}
		.paid-variations {
			width: 100%;
		}
	}
	.booked-appointments {
		margin: 0 0 5px;
		@include border-radius(0);
		color: var(--theme-color-text);
		background-color: var(--theme-color-bg_color) !important;
		p.appointment-info {
			margin-top: 8px;
			@include font(15px, 19px, 400);
			i {
				position: relative;
				top: -1px;

				&:before{
					font-family: $theme_icons;
					content: '\E9B7';
					color: var(--theme-color-text_link3);
				}
			}
		}

	}
}

body .booked-modal .bm-overlay {
	background: rgba(0,0,0,.5);
}
body .booked-modal .bm-window {
	padding: 54px 0 30px;
	@include border-box;
	@include border-radius(0);
	@include box-shadow(1px 1px 15px rgba(0,0,0,.2));
	background: none;
	p {
		@include font(16px, 24px, 400);
		&.appointment-title {
			font-weight: 600;
			color: var(--theme-color-text_link3);
		}
		&.calendar-name {
			font-weight: 600;
			text-transform: uppercase;
			color: var(--theme-color-text_dark);
		}
	}
	p.booked-title-bar {
		margin: 0;
		@include border-radius(0);
		color: var(--theme-color-alter_dark) !important;
		background-color: var(--theme-color-alter_bg_color) !important;
		small {
			@include font(17px, 24px, 600);
			text-transform: uppercase;
			letter-spacing: 0;
		}
	}
	.close {
		font-size: 18px;
		top: 18px;
		right: 14px;
		@include transition(transform .3s ease-out);
		&:hover {
			@include transform(rotate(180deg));
		}
		i {
			color: var(--theme-color-alter_dark);
			&:before {
				font-weight: 400;
				font-family: $theme_icons;
				content: '\E9E1';
			}
		}
	}
	.booked-scrollable {
		padding: 25px 30px 25px;
		@include border-radius(0);
		color: var(--theme-color-text);
		background-color: var(--theme-color-bg_color) !important;
		em {
			color: var(--theme-color-text_dark);
			font-style: normal;
		}
	}
	.field:last-child {
		width: 100%;
		@include flex;
		@include flex-justify-content(space-between);
		@include flex-wrap(wrap);
		&:after {
			display: none;
		}
	}
	.button.button-primary,
	.button.booked-forgot-goback,
	.button.cancel {
		@include flex;
		@include flex-justify-content(center);
		text-align: center;
		@include font(14px, 20px, 500);
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 14px 30px;
		color: var(--theme-color-inverse_link) !important;
		background: var(--theme-color-text_link3) !important;
		border-color: var(--theme-color-text_link3) !important;
		margin: 0;
		float: none;
		&:hover {
			color: var(--theme-color-inverse_link) !important;
			background: var(--theme-color-text_hover3) !important;
			border-color: var(--theme-color-text_hover3) !important;
		}
	}
	input[type="submit"].button:disabled {
		@include box-shadow(none !important);
		color: var(--theme-color-inverse_link) !important;
		background: var(--theme-color-bd_color) !important;
		border-color: var(--theme-color-bd_color) !important;
	}
	#customerChoices {
		text-align: left;
		padding: 5px 0 18px;
		margin: 0;
		margin-bottom: 14px;
		@include flex;
		@include flex-align-items(flex-start);
		@include flex-justify-content(flex-start);
		background-color: transparent;
		border-color: var(--theme-color-bd_color);
		&.bookedClearFix:after {
			display: none;
		}
		.field {
			margin: 0;
			margin-right: 30px;
			line-height: 1;
			&:last-child {
				width: auto;
				margin-right: 0;
			}
			.checkbox-radio-block {
				padding: 0;
				label {
					@include font(16px, 21px, 400);
				}
			}
		}
	}
	#condition-current,
	#condition-new {
		padding-bottom: 20px;
	}


	#newAppointmentForm {
		.field {
			margin: 15px 0 0;
		}
		.bookings .field {
			margin: 0;
		}
		p.status {
			color: var(--theme-color-text);
		}
	}


}

/* Login form */
body .booked-form #ajaxlogin {
	.field {
		margin: 0;
	}
	.booked-forgot-password {
		display: inline-block;
		margin-top: 10px;
		@include font(16px, 21px, 400);
		color: var(--theme-color-text_link3);
		&:hover {
			color: var(--theme-color-text_hover3);
		}
	}
}

body #booked-page-form {
	color: var(--theme-color-text);
	border-color: var(--theme-color-bd_color);

	.login-remember {
		float: none;
		margin: 0;
		input {
			display: inline;
			vertical-align:middle;
		}
	}
	.login-submit {
		float: none;
		margin-top: 15px;
	}
}

/* User profile */
body #profile-login label,
#profile-register label,
#profile-forgot label {
	@include font(15px, 1em, 500);
	color: var(--theme-color-text_dark);
}

body #booked-profile-page {
	.booked-profile-appt-list .appt-block {
		@include font(16px, 28px, 400);
		color: var(--theme-color-text);
		border-color: var(--theme-color-bd_color);
		&.approved {
			color: var(--theme-color-text_dark);
			> i.booked-icon {
				color: var(--theme-color-text_dark);
			}
		}
		.status-block {
			padding: 6px 16px;
			@include border-radius(0);
			@include font(15px, 20px, 500);
			text-transform: capitalize;
			background-color: var(--theme-color-text_light) !important;
			color: var(--theme-color-inverse_link);
		}
		&.approved .status-block {
			background-color: var(--theme-color-text_link3) !important;
			color: var(--theme-color-inverse_link) !important;
		}
		> i.booked-icon {
			color: var(--theme-color-text);
		}
	}

	h4 {
		@include font(1em, 1.2em, 500);
	}
	i.fa {
		color: inherit;
	}
	div.booked-profile-header {
		padding: 0 0 2em;
		background-color: var(--theme-color-bg_color) !important;
		border-color: transparent !important;
		color: var(--theme-color-text);

		.booked-logout-button {
			color: var(--theme-color-text_link3);
			margin-top: 10px;
		}
		.booked-logout-button:hover {
			color: var(--theme-color-text_hover3);
		}
	}
	div.booked-user-avatar {
		float: none;
		@include box(50px, 50px);

		img {
			@include border-round;
		}
	}
	.booked-user {
		* {
			line-height: 1.3em;
		}
		@include flex;
		@include flex-align-items(center);
		h3 {
			letter-spacing: 0 !important;
			color: var(--theme-color-text_dark);
		}
		strong {
			font-weight:400;
		}
	}
	.booked-tabs {
		border-width: 0;
		background-color: var(--theme-color-bg_color) !important;
		border-color: var(--theme-color-alter_bd_color) !important;
		&.login {
			border-top-width: 0;
		}
		li a {
			border: 1px solid var(--theme-color-bd_color);
			@include font(16px, '', 500);
			background-color: var(--theme-color-bg_color);
			color: var(--theme-color-text_dark);
		}
		li.active a {
			border-bottom-color: transparent;
		}
		li a i {
			color: inherit;
		}
		li.active a,
		li.active a:hover,
		li a:hover {
			color: var(--theme-color-alter_dark) !important;
			background-color: var(--theme-color-alter_bg_color) !important;
		}
		li:not(.edit-button) + li {
			margin-left: -1px !important;
		}
	}
	div.booked-tab-content {
		margin-top: -1px !important;
		border-top: 1px solid;
		@include border-sharp;
		background-color: var(--theme-color-alter_bg_color);
		border-color: var(--theme-color-alter_bd_color);
		.appt-block {
			border-color: var(--theme-color-alter_bd_color); 
			> strong {
				color: var(--theme-color-text_dark) !important;
			}
		}
	}
	#loginform .login-remember  {
		label {
			padding-left: 1.8em;
			position: relative;
			@include font(14px !important, 22px !important, 400 !important);
			color: var(--theme-color-text) !important;
			input[type="checkbox"] {
				position: static !important;
				clip: auto;
				width: 0;
				outline: 0 !important;
				-webkit-appearance: none;
				-moz-appearance: none;
				&:before {
					content: '';
					font-family: $theme_icons;
					display: block;
					text-align: center;
					border: 1px solid var(--theme-color-bd_color);
					font-size: 7px;
					@include box(16px, 16px, 15px);
					@include abs-lt(0, 0.45em);
					@include border-box;
					@include border-radius(4px);
					color: var(--theme-color-text_dark);
					cursor: pointer;
					@include transition(all .3s ease);
				}
				&:checked:before {
					content: '\e9f6';
				}
			}
			&:hover input[type="checkbox"]:before {
				border-color: var(--theme-color-text_dark) !important;
			}
		}
	}
}
.ua_ie #booked-profile-page #loginform .login-remember  {
	label {
		padding-left: 0;
	}
	input[type="checkbox"] {
		width: auto;
		&:before {
			display: none;
		}
	}
}

/* User profile content */
.booked-calendarSwitcher.calendar,
.booked-calendarSwitcher.calendar select {
	background-color: var(--theme-color-alter_bg_color) !important;
}
#booked-page-form #profile-register,
#booked-page-form #profile-login,
#booked-page-form #profile-forgot,
#profile-edit #booked-page-form {
	label {
		font-weight: 500;
	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		border: none;
		border-bottom: 1px solid;
		padding: 0.6em 0;
	}
}
#profile-edit #booked-page-form {
	.form-table {
		margin-bottom: 2em;
	}
	label {
		@include font(15px, 1em, 500 !important);
		color: var(--theme-color-text_dark);
	}
	body & .hint-p {
		color: var(--theme-color-text_light);
	}
	body & p.form-submit {
		margin-top: 10px;
		margin-bottom: 0;
	}
}

body .booked-upload-wrap {
	span {
		font-size: 15px;
	}
}
body .booked-upload-wrap,
body .booked-upload-wrap input {
	background: var(--theme-color-input_bg_color);
	border-color:  var(--theme-color-input_bd_color);
	@include border-radius(0);
	@include transition-colors;
}
body .booked-upload-wrap:hover {
	background-color: var(--theme-color-input_bg_hover);
}

/* Booked icon */
.booked-icon-alert {
	color: var(--theme-color-text_link) !important;
}
body #booked-profile-page p.booked-no-margin {
	color: var(--theme-color-text);
}

/* Messages */
body #booked-plugin-page p.booked-form-notice,
body #booked-profile-page p.booked-form-notice {
	border-color: var(--theme-color-text_link3);
	background-color: transparent;
	@include border-radius(0);
	margin: 0 0 20px;
	padding: 6px 12px;
}


body #booked-profile-page .booked-tabs li a > .counter {
	display: inline-block;
	margin-left: 5px;
}


// booked-list-view
body .booked-list-view.booked-calendar-wrap .booked-appt-list .timeslot {
	padding: 15px 0;
	margin: 0;
	border-color: var(--theme-color-bd_color);
	.timeslot-people button {
		@include font(14px, 21px, 500);
		text-transform: uppercase;
		letter-spacing: 1.4px;
		padding: 14px 44px;
		.button-timeslot {
			font-weight: 500;
		}
	}
}
body .booked-list-view {
	button.bb-small,
	.booked-list-view-nav .booked-list-view-date-next {
		padding: 4px 12px;
		font-size: 15px;
		line-height: 18px;
	}
	button:hover {
		color: var(--theme-color-inverse_link);
		background-color: var(--theme-color-text_hover);
	}
}

// datepicker
body #ui-datepicker-div.booked_custom_date_picker {
	@include border-radius(0);
	.ui-datepicker-header {
		.ui-datepicker-title {
			@include font(13px, 1.7em, 500);
			padding: 10px 0;
		}
		> a {
			&[class*="ui-datepicker"] {
				top: 6px;
				font-size: 11px;
			}
			&:before {
				font-family: $theme_icons;
				font-weight: 400;
			}
			&.ui-datepicker-prev:before {
				content: '\E9E5';
			}
			&.ui-datepicker-next:before {
				content: '\E9E6';
			}
		}		
	}
	table.ui-datepicker-calendar {
		thead th {
			background: var(--theme-color-alter_bg_color) !important;
			color: var(--theme-color-alter_dark) !important;
		}
		tbody td a {
			@include border-radius(0);
		}
	}
}