/**
 * Styles for admin pages
 *
 * @link https://timeslotplugins.com
 *
 * @package Time Slot
 * @since 1.0.0
 *
 */

/*------------------------------------------------*/
/*  Colors                                        */
/*------------------------------------------------*/

:root {
	--ts-blue: #016ee0;
	--ts-offwhite: #f0f0f0;
	--ts-gray: #d9d9d9;
	--ts-navy: #0e1b38;
	--ts-white: #fff;
	--ts-red: #b20921;
	--ts-font: 'Roboto', sans-serif;
	--ts-border-radius-sm: 4px;
	--ts-border-radius-md: 10px;
	--ts-border-radius-lg: 20px;
	--fc-button-text-color: #0e1b38;
	--fc-button-bg-color: #d9d9d9;
	--fc-button-border-color: #d9d9d9;
	--fc-button-hover-bg-color: #016ee0;
	--fc-button-hover-border-color: #016ee0;
	--fc-button-active-bg-color: #016ee0;
	--fc-button-active-border-color: #016ee0;
	--fc-today-bg-color: #f0f0f0;
	--fc-neutral-bg-color: #f0f0f0;
	--fc-now-indicator-color: #016ee0;
	--fc-more-link-bg-color: #016ee0;
	--fc-more-link-text-color: #fff;
}

/*------------------------------------------------*/
/*   FOUC                                         */
/*------------------------------------------------*/

.ts-load {
	opacity: 0;
	visibility: hidden;
}

/*------------------------------------------------*/
/*   Page Header                                  */
/*------------------------------------------------*/

.timeslot-header img {
	background-color: var(--ts-navy);
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-white);
	max-width: 230px;
}

.timeslot-header .logo-link {
	line-height: 0;
}

.timeslot-header {
	align-items: center;
	background-color: var(--ts-white);
	color: var(--ts-navy);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;
	padding: 1em 3%;
	width: 100%;
}

[class*="timeslot"] #wpcontent {
	padding: 0;
}

.timeslot-header nav {
	display: flex;
	gap: 1em;
	justify-content: space-between;
}

.timeslot-header .ts-nav-link {
	background: var(--ts-gray);
	border: 0;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	display: inline-block;
	font: 500 13px var(--ts-font);
	min-width: max-content;
	padding: 0.5em 1em;
	text-decoration: none;
}

.timeslot-header .ts-nav-link:hover,
.timeslot-header .ts-highlight-link {
	background-color: var(--ts-blue);
	color: var(--ts-white);
}

.timeslot-header .ts-highlight-link:hover {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

.ts-notice {
	background: var(--ts-blue);
	color: var(--ts-white);
	font-weight: 600;
	margin: 0;
	padding: 0.5em;
	text-align: center;
}

.ts-notice a {
	color: var(--ts-white);
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
}

/*------------------------------------------------*/
/*   Page Footer                                  */
/*------------------------------------------------*/

body.toplevel_page_timeslot #wpfooter,
body[class*="time-slot"] #wpfooter {
	font-family: var(--ts-font);
	font-size: 12px;
	padding: 10px 3%;
}

body.toplevel_page_timeslot #wpfooter {
	padding: 10px calc(20px + 3%);
}

body.toplevel_page_timeslot #wpfooter p,
body[class*="time-slot"] #wpfooter p {
	font-size: 1em;
}

body.toplevel_page_timeslot #wpfooter p a,
body[class*="time-slot"] #wpfooter p a {
	color: inherit;
	text-decoration: none;
}

body.toplevel_page_timeslot #wpfooter p .stars,
body[class*="time-slot"] #wpfooter p .stars {
	color: var(--ts-blue);
	font-size: larger;
	text-decoration: none;
}

body.toplevel_page_timeslot #wpfooter p a:hover,
body[class*="time-slot"] #wpfooter p a:hover {
	text-decoration: underline;
}

/*------------------------------------------------*/
/*   Nav Tabs                                     */
/*------------------------------------------------*/

/* Structure */
.ts-settings-pg {
	border-radius: var(--ts-border-radius-lg);
	display: flex;
	gap: clamp(30px, 3vw, 40px);
	padding: 40px 20px 20px;
}

.ts-settings-menu {
	flex-basis: 300px;
	interpolate-size: allow-keywords;
	margin: 0;
	min-width: max-content;
	overflow: hidden;
}

.ts-settings-wrapper {
	width: 100%;
}

.ts-nav.nav-tab-wrapper {
	border-bottom: none;
	margin: 0;
	padding: 0;
}

/* Icons */
.ts-settings-pg .ts-settings-menu .ts-settings-icon {
	border-radius: var(--ts-border-radius-sm) 0 0 var(--ts-border-radius-sm);
	display: flex;
	fill: var(--ts-navy);
	height: 100%;
	justify-content: center;
	padding: 5px;
}

.ts-settings-pg .ts-settings-menu .ts-settings-icon svg {
	height: auto;
	width: 20px;
}

.ts-settings-menu ul li a:not(.nav-tab-active):hover .ts-settings-icon,
.ts-settings-menu ul li a:not(.nav-tab-active):focus .ts-settings-icon,
.ts-settings-menu ul li .nav-tab-active .ts-settings-icon,
.ts-nav button:hover .ts-settings-icon,
.ts-nav button:focus .ts-settings-icon,
.ts-nav button:active .ts-settings-icon {
	background-color: var(--ts-blue);
	fill: var(--ts-white);
}

/* Menu list */
.ts-settings-menu ul {
	color: var(--ts-navy);
	display: flex;
	flex-direction: column;
	font: 14px var(--ts-font);
	gap: 0.5em;
}

.ts-settings-menu ul li {
	align-items: center;
	border-radius: var(--ts-border-radius-sm);
	display: flex;
	gap: 0.5em;
	height: 33px;
}

.ts-settings-menu ul li a {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	display: flex;
	float: none;
	font-weight: 500;
	line-height: 1;
	margin: 0;
	padding: 0;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	width: 100%;
}

.ts-settings-menu ul li a:hover,
.ts-settings-menu ul li a:focus {
	background-color: var(--ts-white);
	color: var(--ts-navy);
}

.ts-nav .nav-tab.nav-tab-active,
.ts-nav .nav-tab.nav-tab-active:focus,
.ts-nav .nav-tab.nav-tab-active:focus:active,
.ts-nav .nav-tab.nav-tab-active:hover,
.ts-nav .nav-tab:hover,
.ts-nav .nav-tab:focus,
.ts-nav .nav-tab:active {
	background-color: var(--ts-white);
	border: none;
	box-shadow: none;
	outline: none;
}

.ts-settings-menu .ts-settings-title {
	padding: 0 1em;
	transition: padding 0.2s ease;
}

/* Collapsible Menu */
.ts-settings-menu {
	transition: none;
}

body.ts-ready .ts-settings-menu {
	transition: flex-basis 0.2s ease, min-width 0.2s ease;
}

.ts-settings-menu.is-collapsed {
	flex-basis: 33px;
	min-width: 33px;
}

/* Hide titles when collapsed */
.ts-settings-menu.is-collapsed .ts-settings-title {
	display: none;
	padding: 0;
}

.ts-settings-menu.is-collapsed .ts-nav .nav-tab {
	background-color: transparent;
	transition: background-color 0s ease;
}

.ts-settings-menu.is-collapsed .ts-settings-icon {
	border-radius: var(--ts-border-radius-sm);
}

/* Toggle Button */
.ts-nav-toggle {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	cursor: pointer;
	display: flex;
	float: none;
	font-weight: 500;
	margin: 0;
	padding: 0;
	transition: all 0.2s ease;
	width: 100%;
}

.ts-nav-toggle:hover,
.ts-nav-toggle:focus,
.ts-nav-toggle:active {
	color: var(--ts-navy);
}

.ts-settings-menu.is-collapsed .ts-nav-toggle-icon {
	transform: rotate(180deg);
}

/* Popovers */
.ts-settings-menu [popover] {
	background: var(--ts-navy);
	border: none;
	border-radius: 3px;
	color: var(--ts-white);
	font: 500 11px var(--ts-font);
	margin-left: 10px;
	padding: 2px 8px;
	position-area: right center;
	white-space: nowrap;
}

/* Mobile */
.ts-settings-pg .ts-settings-menu select {
	align-items: center;
	-webkit-appearance: base-select;
	appearance: base-select;
	background-color: var(--ts-white);
	border: 2px solid var(--ts-gray);
	border-radius: 5px;
	box-shadow: none;
	color: var(--ts-navy);
	font: 14px var(--ts-font);
	justify-content: space-between;
	margin: 0;
	max-width: 100%;
	min-height: 32px;
	padding: 0 0 0 10px;
	width: 100%;
}

@supports not (appearance: base-select) {
	.ts-settings-pg .ts-settings-menu select {
		background-image: none;
		appearance: auto;
		-moz-appearance: auto;
		-webkit-appearance: auto;
	}
}

/* Hide on desktop */
.ts-nav.nav-tab-wrapper.ts-mobile-nav {
	display: none;
}

/* Dropdown */
select.ts-settings-select::picker(select) {
	-webkit-appearance: base-select;
	appearance: base-select;
	background-color: var(--ts-white);
	border: 2px solid var(--ts-gray);
	border-radius: 0 0 5px 5px;
	border-width: 0 2px 2px;
	min-height: -webkit-max-content;
	min-height: max-content;
	padding: 1em 0;
	position-area: end span-all;
	top: anchor(bottom);
}

/* Arrow */
select.ts-settings-select::picker-icon {
	align-content: center;
	align-self: stretch;
	background: var(--ts-blue) url(../images/chevron-down-white.svg) no-repeat center;
	background-size: 40%;
	border-radius: 0;
	color: var(--ts-white);
	content: "";
	margin: 0;
	text-align: center;
	width: 32px;
}

select:focus,
select:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--ts-blue);
	outline-offset: -2px;
}

select option {
	border-radius: 0;
	color: var(--ts-navy);
	padding: .5rem 1rem;
}

select option:checked {
	font-weight: 700;
}

select option:hover {
	background-color: color-mix(in lab,currentcolor 10%,#0000);
}

select.ts-settings-select option svg {
	height: 1.5em;
	width: 1.5em;
}

select.ts-settings-select selectedcontent {
	align-content: center;
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 1em;
}

select.ts-settings-select > label {
	padding: 0 1.2em;
}

select.ts-settings-select selectedcontent svg {
	height: 1.5em;
	width: 1.5em;
}

select.ts-settings-select option::checkmark {
	content: "";
	display: none;
}

select.ts-settings-select span.ts-option-icon {
	display: flex;
}

/* Settings pages */
.ts-settings-wrapper .ts-datatable-wrapper {
	padding: 0;
}

/*------------------------------------------------*/
/*   Dashboard Page                               */
/*------------------------------------------------*/

.ts-dashboard-wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px 5% 0;
}

.ts-dashboard {
	color: var(--ts-navy);
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, calc(50% - 10px));
	font-family: var(--ts-font);
}

.ts-dashboard .ts-dashboard-group {
	background-color: var(--ts-white);
	border-radius: var(--ts-border-radius-md);
	padding: 20px;
}

/* Links */
.ts-dashboard .ts-dashboard-group > a {
	align-items: center;
	background-color: var(--ts-white);
	border-bottom: 1px solid var(--ts-offwhite);
	color: var(--ts-navy);
	display: flex;
	justify-content: space-between;
	padding: 0.7em 0.5em;
	text-align: center;
	text-decoration: none;
}

.ts-dashboard .ts-dashboard-group > a strong {
	font-size: 14px;
	font-weight: 500;
	padding-right: 10px;
	text-align: left;
}

.ts-dashboard .ts-dashboard-group > a:hover {
	background: var(--ts-offwhite);
	border-radius: var(--ts-border-radius-sm);
}

.ts-dashboard .ts-dashboard-group > a:focus,
.ts-dashboard .ts-dashboard-group > a:active {
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
	outline: 2px solid var(--ts-blue);
}

.ts-dashboard .ts-dashboard-group > a:last-child {
	border-bottom: none;
}

.ts-dashboard svg {
	fill: var(--ts-blue);
	height: 18px;
	width: 18px;
}

/* Headings */
.ts-dashboard-wrapper h1 {
	font: 500 24px var(--ts-font);
	margin: 0;
}

.ts-dashboard h2 {
	background-color: var(--ts-offwhite);
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 10px;
	padding: 2px 12px;
}

.ts-dashboard h3 {
	font-size: 1.1em;
	margin: 0;
}

.ts-dashboard p {
	margin: 0;
	text-align: right;
}

/* Setup group */
.ts-dashboard-group.ts-dash-group-setup {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	justify-content: space-between;
}

.ts-dashboard-group.ts-dash-group-setup h2 {
	align-self: start;
	border-bottom: none;
	margin: 0;
}

.ts-dashboard-group.ts-dash-group-setup p {
	padding: 0 0.5em;
	text-align: left;
}

.ts-dashboard-group.ts-dash-group-setup strong {
	font-size: 14px;
}

.ts-dashboard-group.ts-dash-group-setup ul {
	list-style: square inside;
	margin: 0;
	padding-inline-start: 0.4em;
}

.ts-dashboard-group.ts-dash-group-setup ul li::marker {
	content: "";
	display: none;
}

.ts-dashboard-group.ts-dash-group-setup ul li::before {
	background-color: var(--ts-blue);
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: 7px;
	margin-right: 0.5em;
	width: 7px;
}

.ts-dashboard .ts-dashboard-group .ts-btn,
.ts-dashboard .ts-dashboard-group .ts-btn:focus {
	font-size: 14px;
	margin: 0 0.5em;
	padding: 0.5em 1em;
	width: fit-content;
}

/* Flex */
.ts-flex-col {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.ts-flex-col > span {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ts-dashboard .clear {
	display: none;
}

/*------------------------------------------------*/
/*   Setup Page                                   */
/*------------------------------------------------*/

.timeslot-setup #adminmenumain,
.timeslot-setup #wpcontent #wpadminbar,
.timeslot-setup .error,
.timeslot-setup .notice,
.timeslot-setup .update-nag,
.timeslot-setup .updated {
	display: none;
}

body.timeslot-setup #wpwrap,
body.timeslot-setup #wpbody,
body.timeslot-setup #wpbody-content {
	height: 100%;
	padding-bottom: 0;
}

body.timeslot-setup #wpfooter {
	display: none;
}

.ts-setup > * {
	margin: 0;
}

.ts-setup {
	align-items: center;
	background: var(--ts-white);
	display: flex;
	flex-direction: column;
	font-family: var(--ts-font);
	height: 100%;
	justify-content: space-between;
	left: 0;
	overflow-y: auto;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999999;
}

#ts-setup-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	width: clamp(300px, 60vw, 600px);
}

.ts-setup-footer {
	align-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ts-setup .ts-success-msg {
	width: 100%;
}

/* Header */
.ts-setup .timeslot-header .ts-nav-link {
	font: 500 14px var(--ts-font);
}

/* Headings */
.ts-setup h1 {
	color: var(--ts-navy);
	font-size: 32px;
	font-size: clamp(24px, 5vw, 32px);
	line-height: normal;
	margin: 0;
	text-align: center;
}

.ts-setup h1:focus {
	outline: none;
}

.ts-setup .ts-setup-desc {
	color: var(--ts-navy);
	font-size: clamp(14px, 2vw, 16px);
	line-height: 1.5;
	margin: 0.5em 0 0;
	text-align: center;
}

.ts-setup .ts-setup-desc.ts-setup-desc-ext {
	line-height: 1.8;
	margin: 1em auto 1.5em;
}

/* Progress */
#step-progress {
	background: transparent;
	border-color: var(--ts-gray);
	border-width: 2px 0 0;
	margin: 0;
	width: 100%;
}

#step-progress[value] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 20px;
}

#step-progress[value]::-moz-progress-bar {
	background-color: var(--ts-blue);
	border-radius: 0;
	box-shadow: none;
}

#step-progress::-webkit-progress-value {
	background-color: var(--ts-blue);
	border-radius: 0;
	box-shadow: none;
}

#step-progress::-webkit-progress-bar {
	background-color: var(--ts-gray);
}

/* Buttons */
.ts-setup-pagination {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	padding: 0 0 3rem;
	width: clamp(300px, 60vw, 600px);
}

.ts-setup[data-step="1"] .ts-setup-pagination,
.ts-setup[data-step="5"] .ts-setup-pagination {
	display: none;
}

.ts-actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.ts-setup .button.ts-btn,
.ts-setup .button.ts-btn:active,
.ts-setup .button.ts-btn:focus {
	display: inline-block;
	font-weight: 500;
}

.ts-btn.ts-btn-gray.button {
	background-color: var(--ts-gray);
	color: var(--ts-navy);
}

.ts-btn.ts-btn-blue.button {
	background-color: var(--ts-blue);
	color: var(--ts-white);
}

body .ts-btn.ts-btn-gray:not(:disabled):hover {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

.ts-setup .ts-setup-link {
	color: var(--ts-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ts-setup .ts-setup-link:hover,
.ts-setup .ts-setup-link:focus,
.ts-setup .ts-setup-link:active {
	box-shadow: none;
	outline: none;
	text-decoration: underline;
}

/* Form */
.ts-setup-form {
	margin: 0!important;
	width: 100%;
}

.ts-setup select {
	color: var(--ts-navy);
	width: 100%;
}

.ts-setup select:hover,
.ts-setup select:active,
.ts-setup select:focus {
	color: inherit;
}

.ts-setup select.ts-error,
.ts-setup input[type="text"].ts-error,
.ts-setup input[type="number"].ts-error,
.ts-setup .ts-duration.ts-error + .bdp-input-container input {
	border-color: var(--ts-red);
}

.ts-setup select.ts-error:focus,
.ts-setup input[type="text"].ts-error:focus,
.ts-setup input[type="number"].ts-error:focus {
	outline-color: var(--ts-red);
}

.ts-setup-form input[type=text].ts-timepicker {
	max-height: 30px;
	max-width: 150px;
	min-height: 30px;
}

.ts-setup .ts-width-50 {
	flex: 0 0 100%;
	max-width: 100%;
}

.ts-setup legend {
	font: 500 14px var(--ts-font);
}

.ts-setup .ts-setup-submit {
	display: flex;
	justify-content: center;
	padding-top: 1.5rem;
	width: 100%;
}

/* Hours */
#ts-setup-form-hours {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

#ts-setup-form-hours .ts-hours-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

#ts-setup-form-hours .ts-hours-settings-wrapper {
	display: flex;
}

#ts-setup-form-hours .ts-checkbox-label {
	align-content: center;
	height: 100%;
}

#ts-setup-form-hours .ts-checkmark {
	top: 50%;
	transform: translateY(-50%);
}

/*------------------------------------------------*/
/*   Settings API                                 */
/*------------------------------------------------*/

.ts-settings-form {
	background: var(--ts-white);
	border-radius: var(--ts-border-radius-lg);
	color: var(--ts-navy);
	font-family: var(--ts-font);
	padding: 20px;
}

.ts-settings-form p a {
	color: var(--ts-navy);
	display: inline-block;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
	text-decoration-color: var(--ts-gray);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ts-settings-form p a:hover {
	background: transparent;
	text-decoration-color: var(--ts-blue);
}

.ts-settings-form p a:focus {
	border-bottom-color: transparent;
	box-shadow: none;
	outline: 2px solid var(--ts-blue);
	outline-offset: 0;
	text-decoration: none;
}

/*--- Settings API Headers ---*/
.ts-settings-header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.8rem 5px;
}

.ts-settings-form h1 {
	font-weight: 700;
	line-height: 1.3;
}

.ts-settings-form h1,
.ts-subtitle {
	margin: 0;
	padding: 0;
}

.ts-settings-form h2 {
	background-color: var(--ts-offwhite);
	border-radius: var(--ts-border-radius-sm);
	font-size: 18px;
	font-weight: 600;
	margin: 30px 0 0;
	padding: 10px;
}

.ts-settings-form h1,
.ts-settings-form h2,
.ts-settings-form h3,
.ts-settings-form h4,
.ts-settings-form h5,
.ts-settings-form h6 {
	color: var(--ts-navy);
}

.ts-settings-form .form-table th {
	color: var(--ts-navy);
	padding: 20px 10px;
}

.ts-settings-form label {
	font: 500 14px var(--ts-font);
}

/*--- Settings API Inputs ---*/
.ts-settings-form input[type=text],
.ts-settings-form input[type=number],
.ts-settings-form input[type=email],
.ts-settings-form input[type=password],
.ts-settings-form input[type=url],
.ts-settings-form input[type=tel],
.ts-settings-form select,
.ts-select2 input[type=search] {
	border: 1px solid var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	max-height: 33px;
	min-height: 33px;
}

.ts-settings-form select {
	line-height: 1;
}

.ts-settings-form textarea {
	border: 1px solid var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
}

.ts-settings-form input[type=text]:focus,
.ts-settings-form select:focus,
.ts-settings-form input[type=number]:focus,
.ts-settings-form input[type=email]:focus,
.ts-settings-form input[type=password]:focus,
.ts-settings-form input[type=url]:focus,
.ts-settings-form input[type=tel]:focus,
.ts-settings-form textarea:focus,
.ts-settings-form select:focus,
.ts-select2 input[type=search]:focus {
	border-color: var(--ts-blue);
	box-shadow: none;
	outline: 2px solid var(--ts-blue);
	outline-offset: -2px;
}

.ts-settings-form input[type=text].ts-color-input:focus {
	border-color: var(--ts-gray);
	outline: 2px solid var(--ts-gray);
}

.ts-settings-form input[type=email],
.ts-settings-form input[type=password],
.ts-settings-form input[type=tel] {
	width: 100%;
}

.ts-settings-form input[type=file] {
	margin-bottom: 15px;
}

.ts-settings-form input[type=file]::file-selector-button {
	background-color: var(--ts-gray);
	border: none;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	cursor: pointer;
	font-family: var(--ts-font);
	font-weight: 600;
	padding: 5px 10px;
}

.ts-settings-form input[type=file]::file-selector-button:hover {
	background-color: var(--ts-blue);
	color: var(--ts-white);
}

body .ts-full-width {
	max-width: 100%;
	width: 100%;
}

.ts-settings-group label {
	display: block;
	font-weight: 500;
	padding: 6px 0;
}

.ts-settings-form .ts-number,
.ts-settings-form input[type=number] {
	box-shadow: none;
	margin: 0;
	vertical-align: middle;
	width: 100%;
}

.ts-settings-group select:required:invalid {
	color: gray;
}

.ts-settings-group option[value=""][disabled] {
	display: none;
}

.ts-settings-group option {
	color: #000;
}

/*------------------------------------------------*/
/*   Select2                                      */
/*------------------------------------------------*/

body .ts-settings-form .ts-settings-row select.ts-full-width-select + .select2 {
	min-width: 100%;
	width: 100%!important;
}

.ts-modal .select2-container,
.ts-settings-form .select2-container {
	display: block;
}

.ts-modal .select2-container.select2-container--default .select2-selection--multiple .select2-search.select2-search--inline,
.ts-settings-form .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline {
	display: none;
}

.ts-modal .select2-selection__rendered,
.ts-settings-form .select2-selection__rendered {
	font-size: 14px;
	line-height: 31px!important;
}

.ts-modal .select2-container *:focus,
.ts-settings-form .select2-container *:focus,
.ts-modal .select2-container *:focus-visible,
.ts-settings-form .select2-container *:focus-visible,
.select2-container--default.select2-container--focus .select2-selection--multiple.ts-select2-container {
	outline: 2px solid var(--ts-blue);
	outline-offset: -2px;
}

.ts-modal .select2-container .select2-selection--single,
.ts-settings-form .select2-container .select2-selection--single {
	border-color: var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	height: 33px!important;
}

.ts-modal .select2-selection__arrow,
.ts-settings-form .select2-selection__arrow {
	height: 32px!important;
}

.select2-container--default .ts-select2 .select2-results__option--highlighted[aria-selected],
.select2-results .ts-select2 .select2-highlighted {
	background-color: var(--ts-blue)!important;
	color:var(--ts-white)!important;
}

.select2-container--default .ts-select2 .select2-results__option--selected {
	background-color:#ddd!important;
	color:var(--ts-navy)!important;
}

.select2-dropdown.ts-select2 {
	font-family: var(--ts-font);
}

/*------------------------------------------------*/
/*   Copy Text to Clipboard                       */
/*------------------------------------------------*/

.ts-copytext {
	cursor: pointer;
}

.ts-copytext-tooltip {
	-moz-animation: fade-copytext 1.5s linear;
	-webkit-animation: fade-copytext 1.5s linear;
	animation: fade-copytext 1.5s linear;
	background-color: var(--ts-navy);
	border: none;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-white);
	font: 500 11px var(--ts-font);
	padding: 2px 8px;
	position-area: bottom center;
	white-space: nowrap;
	opacity: 0;
}

@-webkit-keyframes fade-copytext {
	0% {opacity:1;}
	85% {opacity:1;}
	100% {opacity:0;}
}

@keyframes fade-copytext {
	0% {opacity:1;}
	85% {opacity:1;}
	100% {opacity:0;}
}

/*------------------------------------------------*/
/*   Import Export Page                           */
/*------------------------------------------------*/

.ts-settings-form.ts-export-form {
	padding-bottom: 5px;
	padding-top: 0;
}

.ts-settings-form.ts-import-form {
	padding-bottom: 40px;
}

.ts-settings-form.ts-export-form h2 {
	margin-top: 0;
}

.ts-settings-form.ts-import-form > *:not(h2),
.ts-settings-form.ts-export-form > *:not(h2) {
	padding: 0 5px;
}

/*------------------------------------------------*/
/*   Repeater Fields                              */
/*------------------------------------------------*/

.ts-settings-group .ts-repeating {
	align-items: center;
	background-color: #f5f5f5;
	border-radius: var(--ts-border-radius-sm);
	display: flex;
	margin-bottom: 10px;
	max-width: 460px;
	padding: 4px;
}

/* Labels */
.ts-settings-row .ts-inline,
.ts-settings-group .ts-inline {
	display: inline;
}

.ts-settings-row .ts-repeating label,
.ts-settings-group .ts-repeating label {
	padding: 6px 0 0;
}

/* Buttons */
.ts-settings-group .ts-remove,
.ts-settings-group .ts-repeat {
	background-color: var(--ts-navy);
	border: none;
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
	color: var(--ts-white);
	cursor: pointer;
	font-weight: 600;
	height: auto;
	padding: 5px;
	transition: background-color 0.1s ease;
}

.ts-settings-group .ts-remove,
.wp-core-ui .ts-settings-row button:hover {
	background-color: var(--ts-gray);
	color: var(--ts-navy);
}

.ts-settings-group .ts-repeat {
	align-items: center;
	background-color: var(--ts-blue);
	color: var(--ts-white);
	display: flex;
	font-size: 16px;
	justify-content: center;
}

.ts-settings-group .ts-remove:hover,
.ts-settings-group .ts-repeat:hover {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

.ts-settings-group .ts-remove {
	margin-left: auto;
}

/* Icons */
.ts-settings-group .ts-remove .dashicons-no-alt:before {
	align-items: center;
	display: flex;
	height: 20px;
	justify-content: center;
	width: 21px;
}

.ts-settings-group .dashicons,
.ts-settings-group .dashicons-before:before,
.ts-settings-row .dashicons,
.ts-settings-row .dashicons-before:before {
	line-height: inherit;
	transition: color .1s ease;
}

/* State changes */
button.ts-remove:focus-visible {
	outline: 2px solid var(--ts-blue);
}

button.ts-repeat:focus-visible {
	outline: 2px solid var(--ts-navy);
}

/*------------------------------------------------*/
/*   Media Uploader                               */
/*------------------------------------------------*/

.ts-company-logo-thumb {
	cursor:pointer;
}

.wp-core-ui .ts-settings-row .ts-btn.ts-remove-img-btn {
	padding: 4px 7px;
}

.wp-core-ui .ts-settings-row .ts-btn.ts-remove-img-btn .dashicons {
	align-items: center;
	display: flex;
	height: 25px;
	justify-content: center;
}

.wp-core-ui .ts-settings-row .ts-btn.ts-upload-img-btn {
	padding: 6px 10px;
}

.wp-core-ui .ts-settings-row .ts-btn.ts-upload-img-btn.no-img-saved {
	width: 140px;
}

.wp-core-ui .ts-settings-row .ts-media-btn-wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
	max-width: 140px;
}

#ts-media-confirm .ts-btn {
	padding: .375rem .75rem;
}

/*------------------------------------------------*/
/*   Business Hours Page                          */
/*------------------------------------------------*/

li.ui-timepicker-am,
li.ui-timepicker-pm {
	display: none;
}

.ts-hours-wrapper .ts-timepicker::placeholder {
	color: #bbb;
	opacity: 1;
}

#ts-business-hours-form h2 + p {
	padding: 0 5px;
}

#ts-business-hours-form .ts-settings-group {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	max-width: 650px;
	padding: 10px 5px 20px;
}

/*--- Business Hours Checkboxes ---*/

/* Structure */
.ts-hours-wrapper {
	gap: 0.5em;
	display: flex;
	flex-direction: column;
}

.ts-workday-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.ts-settings-form .ts-break-label,
.ts-settings-form .ts-day-label {
	padding: 0;
}

.ts-check-wrapper {
	align-items: center;
	display: flex;
	gap: 2em;
}

.ts-settings-form .ts-checkbox-label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 5px;
}

#ts-business-hours-form .ts-time-wrapper {
	align-items: center;
	display: flex;
	flex-grow: 1;
	justify-content: space-between;
}

.ts-time-wrapper .ts-timepicker {
	width: calc(50% - 20px);
}

.ts-hours-input-wrapper {
	display: flex;
	gap: 1em 3em;
}

#ts-business-hours-form .ts-break-wrapper {
	align-items: flex-start;
	flex-direction: column;
	gap: 0.3em;
}

.ts-break-wrapper .ts-time-wrapper {
	width: calc(100% - 204px);
}

/* Checkboxes */
input[type=checkbox] {
	background: none;
	background-color: var(--ts-white);
	border: 1px solid var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
	color: var(--ts-blue);
	cursor: pointer;
	flex-grow: 0;
	height: 25px;
	margin: 0;
	outline: 0;
	position: relative;
	transition: background 300ms;
	vertical-align: middle;
	width: 25px;
}

input[type=checkbox]:checked {
	background-color: currentcolor;
	border-color: currentcolor;
}

input[type="checkbox"]:checked::before {
	border: solid var(--ts-white);
	border-radius: 0;
	border-width: 0 2px 2px 0;
	box-shadow: none;
	content: "";
	height: 14px;
	left: 8px;
	margin: 0;
	position: absolute;
	top: 3px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 7px;
}

input[type=checkbox]:disabled {
	background-color: var(--ts-gray);
}

.ts-checkbox-label input[type=checkbox]:focus {
	box-shadow: none;
}

.ts-checkbox-label input[type=checkbox]:not(:checked):focus {
	border-color: var(--ts-blue);
	outline: 1px solid var(--ts-blue);
}

.ts-checkbox-label input[type=checkbox]:checked:focus {
	border-color: var(--ts-navy);
	outline: 1px solid var(--ts-navy);
}

/* Holidays */
.ts-repeating.ts-holidays {
	justify-content: space-between;
	margin-bottom: 0;
}

.ts-holiday-input-wrapper {
	align-items: center;
	display: flex;
	gap: 1.5em;
}

.ts-repeating.ts-holidays button.ts-remove {
	margin-left: 0;
}

.ts-holidays .ts-holiday-input-wrapper .ts-checkbox-label{
	padding: 0;
}

/*--- Break Times---*/
.ts-break-wrapper {
	display: none;
}

.ts-checkbox-label.ts-disabled,
.ts-checkbox-label.ts-disabled span {
	cursor: default;
}

/*---------------------------------------------*/
/*   TinyMCE                                   */
/*---------------------------------------------*/

.ts-settings-row .mce-widget.mce-btn button {
	background-color: transparent;
}

.ts-settings-row .mce-toolbar .mce-btn-group .mce-timeslot-btn,
.ts-settings-row .mce-toolbar .mce-btn-group .mce-timeslot-btn button {
	background-color: transparent;
	border: none;
	border-radius: var(--ts-border-radius-sm);
}

.ts-settings-row .mce-toolbar .mce-btn-group .mce-timeslot-btn:hover,
.ts-settings-row .mce-toolbar .mce-btn-group .mce-timeslot-btn button:hover {
	background: #dedede;
}

.ts-settings-row .mce-toolbar .mce-btn-group .mce-btn.mce-active,
.ts-settings-row .mce-toolbar .mce-btn-group .mce-btn:active,
.ts-settings-row .mce-toolbar .mce-btn-group .mce-btn:not(.mce-listbox):focus,
.ts-settings-row .mce-toolbar .mce-btn-group .mce-btn:not(.mce-listbox):hover {
	background: #dedede;
	border-color: transparent;
	box-shadow: none;
}

.ts-settings-row .mce-toolbar .mce-last.mce-btn-group {
	float: right;
}

.ts-settings-row .mce-toolbar .mce-btn-group {
	border-left: none;
}

.ts-settings-row .mce-toolbar-grp {
	border-radius: var(--ts-border-radius-md) 0 0 0;
}

.ts-settings-row .mce-top-part::before {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.ts-settings-row .mce-toolbar .mce-listbox button {
	color: #50575e;
}

.wp-core-ui .ts-settings-row .html-active .switch-html,
.wp-core-ui .ts-settings-row .tmce-active .switch-tmce {
	background: #f5f5f5;
	border: solid #dcdcde;
	border-width: 1px 1px 0 1px;
	color: #50575e;
}

.wp-core-ui .ts-settings-row .wp-switch-editor {
	background: #dedede;
	border-radius: var(--ts-border-radius-sm) var(--ts-border-radius-sm) 0 0;
	color: #50575e;
	font-weight: 500;
}

.wp-core-ui .ts-settings-row .wp-switch-editor:hover {
	background-color: #cbcbcb;
	color: #50575e;
}

.ts-settings-row .mce-statusbar.mce-last {
	background: #f6f7f7;
	border-radius: 0 0 var(--ts-border-radius-md) var(--ts-border-radius-md);
}

.ts-settings-row .wp-editor-container {
	border-radius: var(--ts-border-radius-md) 0 var(--ts-border-radius-md) var(--ts-border-radius-md);
	box-shadow: none;
}

/*--- Code editor ---*/

.ts-settings-row .quicktags-toolbar {
	border-radius: var(--ts-border-radius-md) 0 0 0;
}

.ts-settings-row .wp-editor-container textarea.wp-editor-area {
	border-radius: 0 0 var(--ts-border-radius-md) var(--ts-border-radius-md);
}

/*--- TinyMCE Dialog ---*/
body.timeslot-email:has(.mce-floatpanel.mce-window) {
	overflow: hidden;
}

.mce-tinymce.mce-container.mce-panel {
	border-radius: var(--ts-border-radius-md) 0 var(--ts-border-radius-md) var(--ts-border-radius-md);
}

.mce-window.mce-floatpanel .mce-window-head {
	background-color: var(--ts-navy);
	border-bottom: none;
}

.mce-window.mce-floatpanel .mce-window-head .mce-title,
.mce-window-head.mce-floatpanel .mce-close .mce-i-remove:before,
.mce-window-head .mce-close i.mce-i-remove:before {
	color: var(--ts-white);
}

.mce-window-head.mce-floatpanel .mce-close:hover .mce-i-remove:before,
.mce-window-head .mce-close:hover i.mce-i-remove:before {
	color: var(--ts-blue);
}

.mce-window.mce-floatpanel .mce-tabs {
	overflow: auto hidden;
	scrollbar-color: var(--ts-navy) var(--ts-gray);
	scrollbar-width: thin;
}

.mce-window.mce-floatpanel .mce-btn {
	background-color: transparent;
	border: 1px solid var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
}

.mce-window.mce-floatpanel .mce-tab,
.mce-window.mce-floatpanel .mce-label,
.mce-window.mce-floatpanel .mce-btn .mce-txt {
	color: var(--ts-navy);
	text-shadow: none;
}

.mce-window.mce-floatpanel .mce-tab {
	font-weight: 600;
}

.mce-window.mce-floatpanel .mce-tab:hover {
	background-color: var(--ts-gray);
}

.mce-window.mce-floatpanel .mce-tab:focus {
	box-shadow: none;
	outline: 1px solid var(--ts-blue);
	outline-offset: -1px;
}

.mce-window.mce-floatpanel .mce-tab.mce-active {
	background-color: var(--ts-gray);
}

.mce-window.mce-floatpanel .mce-label {
	font-weight: 600;
}

.mce-window.mce-floatpanel .mce-foot .mce-btn,
.mce-window.mce-floatpanel .mce-foot .mce-btn button .mce-txt {
	background-color: var(--ts-gray);
	border: none;
	color: var(--ts-navy);
	font-weight: 600;
}

body .mce-window.mce-floatpanel .mce-foot .mce-btn:hover,
.mce-window.mce-floatpanel .mce-foot .mce-btn:hover button .mce-txt {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

.mce-window.mce-floatpanel .mce-btn:hover,
.mce-window.mce-floatpanel .mce-btn:focus {
	background-color: transparent;
	border-color: var(--ts-blue);
	box-shadow: none;
}

.mce-container.mce-panel .mce-btn i.mce-caret {
	border-top-color: var(--ts-navy);
}

.mce-floatpanel.mce-menu .mce-menu-item.mce-active.mce-menu-item-normal,
.mce-floatpanel.mce-menu .mce-menu-item.mce-active.mce-menu-item-preview,
.mce-floatpanel.mce-menu .mce-menu-item.mce-selected,
.mce-floatpanel.mce-menu .mce-menu-item:focus,
.mce-floatpanel.mce-menu .mce-menu-item:hover {
	background: var(--ts-blue);
	color: var(--ts-white);
}

.mce-container .mce-textbox {
	border-color: var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
}

.mce-container .mce-textbox:focus {
	border-color: var(--ts-blue);
	box-shadow: none;
	outline: 1px solid var(--ts-blue);
}

/* TinyMCE structure */
.mce-container-body {
	height: auto!important;
	max-width: 100% !important;
	width: 100%!important;
}

body .mce-floatpanel.mce-window {
	border-radius: var(--ts-border-radius-md);
	left: 50% !important;
	max-width: 90%;
	min-width: 300px;
	transform: translateX(-50%);
	width: auto !important;
}

.mce-window-body .mce-abs-layout-item {
	height: auto !important;
	position: static!important;
	width: auto!important;
}

/* TinyMCE forms */
.mce-abs-layout-item.mce-label {
	display: block!important;
	margin-bottom: 5px;
}

.mce-window-body .mce-abs-layout-item.mce-formitem {
	padding: 5%;
}

/* TinyMCE text input */
.mce-abs-layout-item.mce-textbox {
	box-sizing: border-box;
	display: block!important;
	min-height: 32px;
	width: 100%!important;
}

/* TinyMCE select input */
.mce-window.mce-floatpanel .mce-btn.mce-listbox {
	width: 100% !important;
}

/* TinyMCE header */
.mce-window.mce-floatpanel .mce-window-head {
	align-items: center;
	border-radius: var(--ts-border-radius-md) var(--ts-border-radius-md) 0 0;
	display: flex;
}

.mce-window .mce-window-head .mce-title {
	line-height: 1.2!important;
	white-space: normal;
}

/* TinyMCE footer */
.mce-window .mce-foot {
	border-radius: 0 0 var(--ts-border-radius-md) var(--ts-border-radius-md);
	border-top: none;
	max-width: 100%;
	padding: 0 5%;
	width: auto !important;
}

.mce-window .mce-foot .mce-container-body {
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.mce-window.mce-floatpanel .mce-foot .mce-btn:nth-of-type(3),
.mce-window.mce-floatpanel .mce-foot .mce-btn:nth-of-type(3) button span {
	background-color: var(--ts-blue);
	color: var(--ts-white);
}

.mce-window.mce-floatpanel .mce-foot .mce-btn {
	left: auto !important;
	position: relative;
}

/*------------------------------------------------*/
/*   Save Success Popup                           */
/*------------------------------------------------*/

.ts-success-msg {
	align-items: center;
	background: var(--ts-navy);
	bottom: -65px;
	color: var(--ts-white);
	display: flex;
	font-size: 16px;
	font-weight: 600;
	height: 65px;
	justify-content: center;
	margin: 0;
	position: fixed;
	right: 0;
	text-align: center;
	width: calc(100% - 160px);
	z-index: 9999;
}

body.folded .ts-success-msg {
	width: calc(100% - 36px);
}

.timeslot-saving .ts-success-msg {
	animation-delay: 0s;
	animation-duration: 4s;
	animation-name: success-slide;
	animation-timing-function: ease;
	display: flex;
}

@keyframes success-slide {
	0% {bottom:-65px}
	30% {bottom:0;}
	60% {bottom:0;}
	100% {bottom:-65px;}
}

#ts-success-msg--service-category {
	background: var(--ts-gray);
	color: var(--ts-navy);
	display: none;
	font-size: 16px;
	font-weight: 600;
	padding: 10px;
	width: 100%;
}

/*------------------------------------------------*/
/*   Toggle Switch                                */
/*------------------------------------------------*/

.ts-settings-row .ts-switch {
	display: inline-block;
	height: 24px;
	position: relative;
	width: 40px;
}

.ts-settings-row .ts-switch input {
	height: 0;
	opacity: 0;
	width: 0;
}

.ts-settings-row .ts-slider {
	background-color: #ccc;
	border-radius: 12px;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transition: .4s;
	transition: .4s;
}

.ts-settings-row .ts-slider:before {
	background-color: var(--ts-white);
	border-radius: 50%;
	bottom: 4px;
	content: "";
	height: 16px;
	left: 4px;
	position: absolute;
	-webkit-transition: .4s;
	transition: .4s;
	width: 16px;
}

.ts-settings-row .ts-switch input[disabled],
.ts-settings-row .ts-switch input[disabled] + .ts-slider {
	cursor: default;
}

.ts-settings-row .ts-switch input[type=checkbox] + .ts-slider {
	transition: none;
}

.ts-settings-row input:checked + .ts-slider {
	background-color: var(--ts-blue);
}

.ts-settings-row input:checked:focus + .ts-slider {
	outline: 2px solid var(--ts-navy);
}

.ts-settings-row input:not(:checked):focus + .ts-slider {
	outline: 2px solid var(--ts-blue);
}

.ts-settings-row input:checked + .ts-slider:before {
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}

.ts-hide-sandbox {
	display: none;
}

/*------------------------------------------------*/
/*   Form Errors                                  */
/*------------------------------------------------*/

input.ts-error,
select.ts-error {
	border-color: var(--ts-red);
}

.ts-settings-row label.ts-error,
.ts-settings-group label.ts-error,
.ts-modal div.ts-appt-error,
.ts-setup div.ts-error {
	align-items: center;
	color: var(--ts-red);
	display: flex;
	font-size: 13px;
	font-weight: 500;
	padding: 5px 0 0;
}

.ts-settings-row label.ts-error:before,
.ts-settings-group label.ts-error:before,
.ts-modal div.ts-appt-error:before,
.ts-setup div.ts-error:before {
	background-color: var(--ts-red);
	color: var(--ts-white);
	content: "\f158";
	font:  13px 'dashicons';
	height: 13px;
	line-height: 1;
	margin-right: 5px;
	width: 13px;
}

/*---------------------------------------------*/
/*   Datatables                                */
/*---------------------------------------------*/

.ts-datatable-wrapper .ts-datatable > tbody > tr.selected > *,
.ts-datatable-wrapper .ts-datatable > tbody > tr.selected > *,
.ts-datatable-wrapper .ts-datatable.display > tbody > tr:nth-child(2n+1).selected > *,
.ts-datatable-wrapper .ts-datatable.display > tbody > tr:nth-child(2n+1).selected > *,
.ts-datatable-wrapper .ts-datatable tbody > tr.selected,
.ts-datatable-wrapper .ts-datatable tbody > tr>.selected,
.ts-datatable-wrapper table.ts-datatable.hover > tbody > tr.selected:hover > *,
.ts-datatable-wrapper table.ts-datatable.display > tbody > tr.selected:hover > * {
	background-color: #e9e9e9;
	box-shadow: none;
	color: var(--ts-navy);
}

.ts-datatable-wrapper .ts-datatable thead th {
	border-bottom: 2px solid var(--ts-gray);
	max-width: 14ch;
	overflow: hidden;
	padding: 10px;
	text-overflow: ellipsis;
}

.ts-datatable-wrapper .ts-datatable tbody td.dt-type-date,
.ts-datatable-wrapper .ts-datatable thead th.dt-type-date,
.ts-datatable-wrapper .ts-datatable tbody td.dt-type-numeric,
.ts-datatable-wrapper .ts-datatable thead th.dt-type-numeric {
	text-align: left;
}

.ts-datatable-wrapper .ts-datatable thead th.dt-type-date .dt-column-header,
.ts-datatable-wrapper .ts-datatable thead th.dt-type-numeric .dt-column-header {
	flex-direction: row;
}

table.ts-datatable thead tr th:focus-visible {
	background: var(--ts-offwhite);
	outline: 2px solid var(--ts-gray);
	outline-offset: -2px;
}

.ts-hidden-id {
	display: none;
}

/*--- Datatables Modals ---*/

#ts-modal-edit--staff .ts-form-row #ts-days-off,
#ts-modal-edit--staff .ts-form-row #ts-services {
	width:100%;
}

.ts-appt-error {
	display: none;
}

.ts-datatable caption {
	visibility: hidden;
}

/*--- Datatables Checkbox ---*/

.ts-datatable-wrapper input[type=checkbox] {
	box-shadow: none;
}

.ts-datatable-wrapper input[type=checkbox]:checked::before {
	border: solid var(--ts-white);
	border-width: 0 2px 2px 0;
	content: '';
	height: 13px;
	left: 4px;
	margin: 0;
	position: relative;
	top: -1px;
	transform: rotate(45deg);
	width: 6px;
}

.ts-datatable input[type=checkbox]:focus {
	border-color: var(--ts-blue);
	box-shadow: 0 0 0 1px var(--ts-blue);
}

.ts-datatable .ts-select-all,
.ts-datatable .select-checkbox {
	border-color: #999;
	border-radius: var(--ts-border-radius-sm);
	height: 1rem;
	margin: 0 auto;
	text-align: center;
	width: 1rem;
}

.ts-datatable tbody td.select-checkboxes {
	padding: 10px 18px;
}

.ts-datatable-wrapper .ts-datatable .select-checkboxes {
	text-align: center;
}

/*--- Datatables Search ---*/

.ts-datatable-wrapper .dt-container .dt-search input:focus,
.ts-datatable-wrapper .dt-container .dt-search input:focus-visible {
	border-color: var(--ts-navy);
	box-shadow: inset 0 0 0 1px var(--ts-navy);
	outline: none;
}

.ts-datatable-wrapper .dt-container .dt-search label {
	align-items: center;
	background-color: var(--ts-gray);
	border-radius: 0 var(--ts-border-radius-sm) var(--ts-border-radius-sm) 0;
	cursor: pointer;
	display: flex;
	order: 2;
	padding: 0 10px;
}

.ts-datatable-wrapper .dt-container .dt-search label svg {
	fill: var(--ts-navy);
	height: 20px;
	width: 20px;
}

.ts-datatable-wrapper .dt-container .dt-search input::placeholder {
	color: #999;
}

.ts-datatable-wrapper .dt-container .dt-search {
	background-color: transparent;
	color: var(--ts-navy);
	display: flex;
	justify-content: flex-end;
	padding-left: 0.5em;
	width: 50%;
}

.ts-datatable-wrapper .dt-container .dt-search input {
	background-color: var(--ts-white);
	border-color: var(--ts-gray);
	border-radius: var(--ts-border-radius-sm) 0 0 var(--ts-border-radius-sm);
	font-size: 13px;
	margin: 0;
	order: 1;
}

.ts-datatable-wrapper .dt-container .dt-search input[type="search"]::-webkit-search-cancel-button {
	background-image: url(../images/xmark-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 15px;
	width: 15px;
	appearance: none;
	-webkit-user-modify: read-write!important;
}

/*--- Tables ---*/
.ts-datatable-wrapper {
	font-family: var(--ts-font);
	padding: 20px 3%;
	text-align: left;
}

.ts-datatable-wrapper .dt-container {
	background: var(--ts-white);
	border-radius: var(--ts-border-radius-lg);
	display: flex;
	flex-wrap: wrap;
	padding: 30px 20px 20px;
}

.ts-datatable-wrapper .dt-container .ts-table-header {
	margin: 0;
}

.ts-datatable-wrapper .ts-datatable {
	border-bottom: 2px solid var(--ts-gray);
	border-collapse: collapse;
	color: var(--ts-navy);
	margin-bottom: 20px!important;
	padding-bottom: 4px;
	width: 100%!important;
}

.ts-datatable .no-select {
	text-align: center;
}

.ts-datatable .child .no-select {
	text-align: left;
}

.ts-btn.ts-add {
	margin: 0 auto;
}

.dt-container .dt-paging .dt-paging-button.next.disabled,
.dt-container .dt-paging .dt-paging-button.previous.disabled {
	display: none;
}

.ts-datatable-wrapper .ts-datatable.hover tbody tr:hover,
.ts-datatable-wrapper .ts-datatable.display tbody tr:hover,
.ts-datatable-wrapper .ts-datatable.display tbody > tr.selected {
	background-color: #ededed;
}

.ts-datatable-wrapper .ts-datatable.hover tbody > tr.selected:hover > *,
.ts-datatable-wrapper .ts-datatable.display tbody > tr.selected:hover > * {
	box-shadow: none!important;
}

.ts-datatable tbody tr td {
	border-bottom: 2px solid var(--ts-offwhite);
}

.ts-datatable tbody tr.selected td {
	border-bottom-color: var(--ts-gray);
}

.ts-datatable-wrapper .ts-datatable tfoot td {
	border-top: none;
	padding: 10px 0;
}

.ts-datatable-wrapper .dt-info {
	align-items: center;
	color: var(--ts-navy);
	display: flex;
	gap: 10px;
}

/*--- Empty Datatables ---*/
.ts-datatable tbody tr td.dt-empty {
	height: 200px;
	vertical-align: middle;
}

.ts-datatable-wrapper .ts-datatable tbody tr:has(.dt-empty):hover {
	background-color: #f9f9f9;
}

.ts-datatable-wrapper .ts-datatable tbody tr:hover .dt-empty{
	box-shadow: none;
}

.dt-empty .ts-btn.ts-add {
	background-color: var(--ts-blue);
	font-size: 14px;
	padding: 6px 12px;
}

.dt-empty .ts-btn.ts-add:active,
.dt-empty .ts-btn.ts-add:focus,
.dt-empty .ts-btn.ts-add:focus-visible {
	font-size: 14px;
	padding: 6px 12px;
}

.dt-empty .ts-btn.ts-add:hover {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

.dt-empty strong {
	font-size: 18px;
}

/*--- Datatables Responsive ---*/

/* Plus symbol */
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before,
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
	align-items: center;
	background-color: var(--ts-navy);
	border: none;
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
	color: var(--ts-white);
	content: '\f132';
	font: 12px 'dashicons';
	line-height: 1;
	padding: 3px 3px 2px 2px;
}

/* X symbol */
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before {
	content: '\f158';
}

.ts-datatable-wrapper .ts-datatable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
	text-align: left;
}

.ts-datatable-wrapper .ts-datatable > tbody > tr.child ul.dtr-details,
.ts-datatable-wrapper .ts-datatable > tbody > tr.child> tr {
	width: 100%;
}

.ts-datatable-wrapper .ts-datatable .child ul.dtr-details li span {
	display: inline-block;
	max-width: 100px;
	min-width: 20ch;
	overflow-x: hidden;
	padding-right: 0.5em;
	text-overflow: ellipsis;
}

#ts-datatable--coupons .dtr-title {
	min-width: 120px;
}

.ts-datatable-wrapper .ts-datatable .child ul.dtr-details li span.dtr-data {
	max-width: 60%;
	white-space: normal;
}

/*--- Datatables Buttons ---*/

.ts-datatable .ts-add .dashicons-plus {
	height: 18px;
}

.ts-datatable .ts-add {
	align-items: center;
	display: flex;
	margin: 0 auto;
}

.ts-datatable-wrapper tbody button {
	border: none!important;
	cursor: pointer;
	margin: 0 5px;
	padding: 5px;
}

.ts-datatable-wrapper button:disabled {
	cursor: auto;
}

.ts-datatable tbody .ts-table-buttons {
	width: 100px;
}

.ts-datatable tbody .ts-table-buttons button {
	background: var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
}

.ts-datatable tbody .ts-table-buttons button:hover {
	background: #72a2f8;
}

.ts-datatable tbody .ts-table-buttons button:focus,
.ts-datatable tbody .ts-table-buttons button:focus-visible {
	outline: 2px solid var(--ts-blue);
}

.ts-datatable tbody .ts-table-buttons button:focus:hover,
.ts-datatable tbody .ts-table-buttons button:focus-visible:hover {
	outline-color: #72a2f8;
}

.ts-datatable-wrapper .dt-buttons {
	align-content: center;
	align-items: center;
	display: flex;
	gap: 10px;
}

.ts-datatable-wrapper .dt-buttons .dt-button.ts-btn {
	margin: 0 !important;
}

.ts-btn,
.ts-settings-form .ts-btn,
.dt-buttons .ts-btn.dt-button,
.ts-btn.button,
.ts-btn:active:not(:disabled),
.dt-buttons .ts-btn.dt-button:active:not(:disabled),
.ts-btn:focus:not(:disabled),
.ts-btn:focus-visible:not(:disabled),
.dt-buttons .ts-btn.dt-button:focus-visible:not(:disabled),
.dt-buttons .ts-btn.dt-button:focus:not(:disabled) {
	align-items: center;
	background-color: var(--ts-navy);
	background-image: none;
	border: none;
	border-radius: var(--ts-border-radius-sm);
	box-shadow: none;
	color: var(--ts-white);
	display: flex;
	font-size: 16px;
	font-weight: 500;
	justify-content: center;
	line-height: normal;
	min-height: 1px;
	padding: .375rem .75rem;
	text-align: center;
	text-shadow: none;
	transition: all 0.2s ease;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}

.ts-btn:not(:disabled):hover,
.ts-datatable-wrapper .dt-buttons .ts-btn.dt-button:not(:disabled):hover,
.ts-btn.button:not(:disabled):hover,
.ts-datatable-wrapper .dt-buttons .ts-btn.dt-button:active:not(.disabled):hover:not(.disabled) {
	background-color: var(--ts-gray);
	background-image: none;
	border: none;
	box-shadow: none;
	color: var(--ts-navy);
}

.ts-btn:focus:not(:disabled),
.ts-btn:focus-visible:not(:disabled),
.dt-buttons .ts-btn.dt-button:focus-visible:not(:disabled),
.dt-buttons .ts-btn.dt-button:focus:not(:disabled) {
	outline: 2px solid var(--ts-blue);
}

.ts-btn i,
.ts-btn:not(:disabled):focus:hover i,
.ts-datatable-wrapper .dt-buttons .ts-btn.dt-button i,
.ts-datatable-wrapper .dt-buttons .ts-btn.dt-button:not(:disabled):focus:hover i {
	color: var(--ts-blue);
}

.ts-btn:not(:disabled):hover i,
.ts-datatable-wrapper .dt-buttons .ts-btn.dt-button:not(:disabled):hover i {
	color: var(--ts-navy);
}

.ts-btn:not(:disabled):not(.disabled) {
	cursor: pointer;
}

.ts-btn:disabled {
	opacity: 0.7;
}

.ts-datatable tfoot .ts-btn.ts-delete-multi {
	background-color: var(--ts-gray);
	margin: 0 auto;
}

.ts-datatable tfoot .ts-btn.ts-delete-multi i {
	color: var(--ts-navy);
}

.ts-datatable tfoot .ts-btn.ts-delete-multi:not(:disabled):hover {
	background-color: var(--ts-navy);
}

.ts-datatable tfoot .ts-btn.ts-delete-multi:not(:disabled):hover i {
	color: var(--ts-white);
}

.ts-datatable .no-select.table-buttons {
	padding: 10px 5px;
}

.wp-core-ui .ts-settings-row button {
	background-color: var(--ts-navy);
	color: var(--ts-white);
}

/*--- Datatables Pagination ---*/
.ts-datatable-wrapper .dt-container .dt-paging {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.ts-datatable-wrapper .dt-container .dt-paging .dt-paging-button.current,
.ts-datatable-wrapper .dt-container .dt-paging .dt-paging-button.current:hover,
.ts-datatable-wrapper .dt-container .dt-paging .dt-paging-button:hover {
	background: var(--ts-navy);
	border: none;
	color: var(--ts-white)!important;
}

.ts-datatable-wrapper .dt-container .dt-paging .dt-paging-button {
	border: none;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy)!important;
	font-weight: 600;
}

.ts-datatable-wrapper .dt-container .dt-paging a.dt-paging-button:focus,
.ts-datatable-wrapper .dt-container .dt-paging a.dt-paging-button:focus-visible {
	outline: 2px solid var(--ts-blue);
}

/*--- Datatables Sorting ---*/
.ts-datatable-wrapper table.ts-datatable thead > tr > th .dt-column-header .dt-column-order:before,
.ts-datatable-wrapper table.ts-datatable thead > tr > th .dt-column-header .dt-column-order:after {
	color: var(--ts-gray);
	opacity: 1!important;
}

.ts-datatable-wrapper table.ts-datatable thead > tr > th.dt-ordering-desc .dt-column-header .dt-column-order:before,
.ts-datatable-wrapper table.ts-datatable thead > tr > th.dt-ordering-asc .dt-column-header .dt-column-order:after {
	color: var(--ts-blue);
}

/*------------------------------------------------*/
/*   Forms                                        */
/*------------------------------------------------*/

/*--- Form Layout ---*/

.ts-form-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -5px;
	margin-right: -5px;
}

.ts-form-col {
	margin-bottom: 1rem;
	min-height: 1px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
	width: 100%;
}

.ts-width-0 {
	display: none;
}

.ts-width-50 {
	flex: 0 0 50%;
	max-width: 50%;
}

.ts-width-100 {
	flex: 0 0 100%;
	max-width: 100%;
}

#ts-payment-methods-form .form-table {
	margin-top: 0;
}

/*--- Form Inputs ---*/

.ts-input,
.ts-modal .ts-input {
	background-clip: padding-box;
	background-color: var(--ts-white);
	border: 1px solid var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-navy);
	display: block;
	font-size: 14px;
	line-height: 1.5;
	max-height: 33px;
	min-height: 33px;
	padding: 5px 10px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	width: 100%;
}

.ts-input:disabled,
.ts-input[readonly] {
	background-color: #e1e1e1;
	opacity: 1;
}

.ts-modal input[type=number] {
	height: calc(2.25rem + 2px);
}

.ts-modal input[type=number]:read-only {
	appearance: textfield;
}

.ts-modal textarea.ts-input {
	max-height: none;
	overflow: auto;
	resize: vertical;
}

select.ts-input {
	height: calc(2.25rem + 2px);
}

.ts-input:focus-visible,
.ts-input:focus,
.ts-modal .ts-input:focus-visible,
.ts-modal .ts-input:focus {
	border-color: var(--ts-gray);
	box-shadow: none;
	outline: 2px solid var(--ts-blue);
}

.ts-modal .ts-repeating input[type="text"] {
	display: inline-block;
	width: 88%;
}

.ts-modal label,
.ts-modal legend {
	color: var(--ts-navy);
	display: inline-block;
	font-weight: 500;
	padding-bottom: 5px;
}

/*--- TimePicker Inputs ---*/

.bdp-input-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.bdp-block {
	width: 48%;
}

.bdp-block label {
	font-size: 0.83em;
	font-weight: 400;
	padding-left: 3px;
}

.bdp-block.hidden {
	display: none;
}

/*--- Select2 ---*/

.select2-container--default .select2-selection--multiple.ts-select2-container .select2-selection__choice__remove > span {
	display: none;
}

.select2-container--default .select2-selection--multiple.ts-select2-container .select2-selection__choice__remove:after {
	color: var(--ts-navy);
	content: 'x';
	font-family: sans-serif;
	font-weight: 600;
}

.select2-container--default .select2-selection--multiple.ts-select2-container .select2-selection__choice__remove {
	background-color: #e1e1e1;
	border-right-color: var(--ts-gray);
	color: var(--ts-navy);
	height: 100%;
}

.select2-container--default .select2-selection--multiple.ts-select2-container .select2-selection__choice {
	background-color: #f5f5f5;
	border-color: var(--ts-gray);
}

.select2-container--default .select2-selection--multiple.ts-select2-container {
	border-color: var(--ts-gray);
}

/*--------------------------------------------*/
/*   Modals                                   */
/*--------------------------------------------*/

.ts-modal {
	color: var(--ts-navy);
	display: none;
}

.ts-modal.is-open {
	display: block;
	position: relative;
	z-index: 99;
}

.ts-modal-dialog {
	align-items: center;
	background: rgb(29 35 39 / 80%);
	bottom: 0;
	display: flex;
	font-family: var(--ts-font);
	justify-content: center;
	outline: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: calc(100% - 160px);
}

body.sticky-menu .ts-modal-dialog {
	width: calc(100% - 36px);
}

.ts-modal-content {
	background-color: var(--ts-white);
	border: none;
	border-radius: var(--ts-border-radius-md);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	max-width: 80%;
	padding: 20px;
	outline: 0;
	overflow-y: auto;
	width: 500px;
}

#ts-modal--service-category {
	overflow-y: auto;
}

/*--- Modal Header ---*/

.ts-modal-header {
	align-items: center;
	border-bottom: 2px solid var(--ts-gray);
	border-top-left-radius: .3rem;
	border-top-right-radius: .3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 10px 20px;
	padding-bottom: 10px;
}

.ts-modal-title {
	color: var(--ts-navy);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0;
	margin-top: 0;
}

.ts-modal-header p {
	flex-basis: 100%;
}

.ts-modal-header .ts-btn.ts-close {
	padding: 5px;
}

/*--- Modal Body ---*/

.ts-modal-body {
	flex: 1 1 auto;
	margin: 10px;
	padding: 10px;
	position: relative;
}

/*--- Modal Footer ---*/

.ts-modal-footer {
	align-items: center;
	border-top: none;
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}

.ts-modal-footer>:not(:first-child) {
	margin-left: .25rem
}

.ts-modal-footer>:not(:last-child) {
	margin-right: .25rem
}

/*--- Modal Error ---*/

.ts-modal div.ts-appt-error {
	font-size: 12px;
	line-height: 1;
}

.ts-modal input.ts-appt-error,
.ts-modal .ts-appt-error + .select2-container .select2-selection--single {
	border-color: var(--ts-navy);
	outline: 1px solid var(--ts-navy);
}

/*--- Modal Confirm ---*/

.ts-modal-confirm p,
.ts-modal-confirm span,
.ts-modal-confirm-no-refund p {
	color: var(--ts-navy);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.ts-modal-confirm.show .ts-modal-dialog {
	width: 400px;
}

/*------------------------------------------------*/
/*   DatePicker                                   */
/*------------------------------------------------*/

.ts-datepicker {
	background: var(--ts-white);
	color: #000;
	font: 1.1em var(--ts-font);
	padding: 0;
	width: 17em;
}

.ts-datepicker .ui-datepicker-header {
	align-items: center;
	background: var(--ts-blue);
	border: none;
	color: var(--ts-white);
	display: flex;
	font-weight: 700;
	justify-content: space-around;
	padding: .3em 0;
}

.ts-datepicker .ui-datepicker-prev span,
.ts-datepicker .ui-datepicker-next span {
	background-image: none !important;
}

.ts-datepicker .ui-datepicker-header .ui-datepicker-next:after,
.ts-datepicker .ui-datepicker-header .ui-datepicker-prev:after {
	color: var(--ts-white);
	font-weight: normal;
}

.ts-datepicker .ui-datepicker-header .ui-datepicker-next:after {
	content: '\276F';
}

.ts-datepicker .ui-datepicker-header .ui-datepicker-prev:after {
	content: '\276E';
}

.ts-datepicker .ui-datepicker-prev,
.ts-datepicker .ui-datepicker-next {
	cursor: pointer;
	display: flex;
}

.ts-datepicker .ui-datepicker-header .ui-state-hover,
.ts-datepicker .ui-datepicker-header .ui-widget-content .ui-state-hover,
.ts-datepicker .ui-datepicker-header .ui-widget-header .ui-state-hover,
.ts-datepicker .ui-datepicker-header .ui-state-focus,
.ts-datepicker .ui-datepicker-header .ui-widget-content .ui-state-focus,
.ts-datepicker .ui-datepicker-header .ui-widget-header .ui-state-focus {
	background: none;
	border: none;
	font-weight: 700;
}

.ts-datepicker td span,
.ts-datepicker td a.ui-state-default {
	background: #f8f8f8;
	color: #333;
	display: block;
	font-weight: 700;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}

.ts-datepicker .ui-datepicker-prev {
	order: 1;
}

.ts-datepicker .ui-datepicker-next {
	order: 3;
}

.ts-datepicker .ui-datepicker-title {
	order: 2;
	text-align: center;
}

.ts-datepicker td.ui-datepicker-unselectable.ui-state-disabled span {
	color: #bbb;
}

.ts-datepicker table {
	border: solid #ccc;
	border-collapse: collapse;
	border-width: 0 2px 2px;
	font-size: .9em;
	margin:0 0 .4em;
	width: 100%;
}

.ts-datepicker th {
	border: 0;
	font-weight: 700;
	padding: .7em .3em;
	text-align: center;
}

.ts-datepicker td {
	border: 0;
	padding: 1px;
}

.ts-datepicker .ui-state-default,
.ts-datepicker .ui-widget-header .ui-state-default {
	color: #555;
	font-weight: normal;
}

.ts-datepicker .ui-state-active {
	background-color: #ddd!important;
	font-weight: normal;
}

/*------------------------------------------------*/
/*   Appearance Page                              */
/*------------------------------------------------*/

.ts-px-block {
	align-items: center;
	background-color: #ddd;
	border-radius: 0 var(--ts-border-radius-sm) var(--ts-border-radius-sm) 0;
	display: flex;
	font-size: 14px;
	padding: 3px 5px 3px 4px;
}

.ts-unit-wrapper {
	display: flex;
	justify-content: flex-start;
}

.ts-unit-wrapper input[type=number]{
	border-radius: var(--ts-border-radius-sm) 0 0 var(--ts-border-radius-sm);
}

.ts-css-group-wrapper {
	display: flex;
	justify-content: space-between;
	max-width: fit-content;
}

.ts-css-group-wrapper > * {
	padding-right: 5px;
}

.ts-css-group-wrapper .select2 {
	max-width: 150px;
	min-width: 150px;
	width: 150px;
}

.ts-settings-row .ts-css-group-wrapper .sp-preview {
	width: 142px;
}

.ts-settings-form .ts-css-group-wrapper .ts-number,
.ts-settings-form .ts-css-group-wrapper input[type=number] {
	max-width: 60px;
}

#ts-appearance-form td > .ts-unit-wrapper input,
#ts-appearance-form td > .ts-unit-wrapper input[type=number] {
	max-width: 100%;
	width: 360px;
}

#ts-appearance-form td > .select2,
#ts-appearance-form td > .select2 .ts-appearance-full-width {
	max-width: 100%;
	width: 385px!important;
}

/*--- Color Pickers ---*/

input.ts-color-input.spectrum.with-add-on {
	max-width: 110px;
}

.ts-settings-row td > .sp-original-input-container {
	max-width: 100%;
}

.ts-settings-row td > .sp-original-input-container .ts-color-input {
	max-width: 100%;
	width: 350px;
}

.ts-spectrum .sp-input {
	font-family: var(--ts-font);
	min-height: 1px;
}

.ts-spectrum .sp-picker-container .sp-choose,
.ts-spectrum .sp-picker-container .sp-choose:hover {
	background-color: var(--ts-navy)!important;
	border-radius: var(--ts-border-radius-sm);
	color: var(--ts-white);
	font-weight: 500;
	opacity: 1;
}

.ts-spectrum .sp-picker-container .sp-cancel,
.ts-spectrum .sp-picker-container .sp-cancel:hover {
	color: var(--ts-navy)!important;
	opacity: 1;
}

.ts-spectrum {
	font-family: var(--ts-font);
}

/*--- Legacy Spectrum Styles ---*/

.ts-sp-replacer .sp-preview-inner, 
.ts-sp-replacer .sp-alpha-inner, 
.ts-sp-replacer .sp-thumb-inner {
	height: 33px;
}

.ts-sp-replacer .sp-dd {
	display: none;
}

.ts-sp-replacer.sp-replacer {
	background: transparent;
	border: solid 1px var(--ts-gray);
	border-radius: var(--ts-border-radius-sm);
	height: 33px;
	padding: 0;
	width: auto;
}

.ts-sp-replacer.sp-replacer:hover,
.ts-sp-replacer.sp-replacer.sp-active {
	border-color: #bbb;
}

.ts-sp-replacer .sp-preview {
	border: none;
	height: 33px;
	margin: 0;
	width: 383px;
}

/*------------------------------------------------*/
/*   Info Icons                                   */
/*------------------------------------------------*/

.ts-settings-form .ts-hdr-w-info {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.ts-info-wrapper {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	padding: 10px;
}

.ts-info-wrapper.ts-info-inline *,
.ts-info-wrapper.ts-info-inline {
	margin: 0;
	padding: 0;
}

.ts-info-wrapper.ts-info-inline {
	gap: 1rem;
}

.ts-info-wrapper.ts-info-inline .ts-info-header {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.ts-info-wrapper.ts-info-gray {
	background-color: var(--ts-offwhite);
	border-radius: var(--ts-border-radius-sm);
	margin-top: 20px;
}

.ts-info-wrapper.ts-info-gray + p.ts-info-toggle {
	padding: 0 5px;
}

.ts-info-icon {
	background-color: transparent;
	border: none;
	color: var(--ts-blue);
	cursor: pointer;
	margin-left: 10px;
}

.ts-info-icon:hover,
.ts-info-icon:focus-visible {
	color: var(--ts-navy);
	outline: none;
}

.ts-info-toggle {
	display: none;
}

/*------------------------------------------------*/
/*   Full Calendar                                */
/*------------------------------------------------*/

.ts-calendar-wrapper {
	background: var(--ts-white);
	border-radius: var(--ts-border-radius-lg);
	color: var(--ts-navy);
	font-family: var(--ts-font);
	margin: 20px 3%;
	padding: 20px;
}

#ts-calendar h2 {
	background-color: transparent;
}

/* Buttons */
#ts-calendar .fc-popover-header,
#ts-calendar .fc-button-primary,
#ts-calendar .fc-button-primary {
	font-weight: 500;
}

#ts-calendar .fc-button-primary:not(:disabled).fc-button-hover,
#ts-calendar .fc-button-primary:not(:disabled):hover,
#ts-calendar .fc-button-primary:not(:disabled).fc-button-active,
#ts-calendar .fc-button-primary:not(:disabled):active {
	color: var(--ts-white);
}

#ts-calendar  .fc-button.fc-today-button:disabled {
	visibility: hidden;
}

#ts-calendar .fc-button-primary:focus {
	box-shadow: none;
	outline: 2px solid var(--ts-navy);
}

#ts-calendar .fc-daygrid-more-link {
	background-color: var(--ts-gray);
	color: var(--ts-navy);
	font-weight: 600;
	padding: 2px 5px;
}

#ts-calendar .fc-prev-button,
#ts-calendar .fc-next-button {
	background-color: var(--ts-blue);
	border-color: var(--ts-blue);
	color: var(--ts-white);
}

#ts-calendar .fc-prev-button.fc-button:hover,
#ts-calendar .fc-next-button.fc-button:hover {
	background-color: var(--ts-gray);
	border-color: var(--ts-gray);
	color: var(--ts-navy);
}

/* Calendar */
#ts-calendar .fc-col-header-cell.fc-day a,
#ts-calendar .fc-daygrid-day-number {
	color: var(--ts-navy);
}

#ts-calendar .fc-daygrid-day-number {
	font-weight: 500;
	font-size: 0.9rem;
}

#ts-calendar .fc-col-header-cell.fc-day {
	background-color: var(--ts-offwhite);
}

#ts-calendar .fc-event {
	cursor: pointer;
}

/* Popover */
#ts-calendar .fc-popover-header {
	padding: 0;
	background: var(--ts-white);
	position: relative;
	border-radius: 5px 5px 0 0;
	border-bottom: 2px solid var(--ts-gray);
}

#ts-calendar .fc-popover-close {
	background: var(--ts-gray);
	color: var(--ts-navy);
	opacity: 1;
	width: 2em;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	display: flex;
	height: auto;
	border-radius: 0 2px 0 0;
	font-weight: 700;
	font-size: 1rem;
}

#ts-calendar .fc-popover-title {
	padding: 0.4rem 10px;
	font-size: 0.9rem;
	font-weight: 600;
}

#ts-calendar .fc-popover {
	border: 1px solid var(--ts-gray);
	border-radius: 5px;
	box-shadow: rgba(14, 27, 56, 0.25) 0px 0px 5px 5px;
}

/* Events */
#ts-calendar .fc-daygrid-dot-event .fc-event-title {
	font-weight: 500;
}

/* Days off */
#ts-calendar .fc-daygrid .fc-day.ts-dayoff {
	background-color: var(--ts-offwhite);
}

/*------------------------------------------------*/
/*   General settings                             */
/*------------------------------------------------*/

.timeslot-general .ts-btn,
.timeslot-general input[type="file"]::file-selector-button {
	min-width: 160px;
}

/*------------------------------------------------*/
/*   Miscellaneous                                */
/*------------------------------------------------*/

body[class*="timeslot"] ::selection {
	background: rgba(67, 134, 252, 0.5);
}

body[class*="timeslot"] ::-moz-selection {
	background: rgba(67, 134, 252, 0.5);
}

*,
::after,
::before {
	box-sizing: border-box;
}

/*------------------------------------------------*/
/*   Media Queries                                */
/*------------------------------------------------*/

@media (max-width:1000px){
	/*--- Dashboard Page ---*/
	.ts-dashboard a p {
		display: none;
	}
}

@media (max-width:960px){
	body.auto-fold .ts-success-msg {
		width: calc(100% - 36px);
	}
	body:not(.auto-fold) .ts-success-msg {
		width: calc(100% - 160px);
	}
	body.auto-fold .ts-modal-dialog {
		width: calc(100% - 36px);
	}
	body:not(.auto-fold) .ts-modal-dialog {
		width: calc(100% - 160px);
	}
}

@media (min-width:782px){
	.ts-settings-row select.ts-unit-select {
		min-width: 96px;
	}
}

@media (max-width:782px){
	/*--- Settings Forms ---*/
	.ts-settings-form .ts-settings-row label:not(.ts-px-block) {
		display: block;
		font-weight: 500;
		margin-bottom: 5px;
	}
	.ts-settings-form input[type=text],
	.ts-settings-form input[type=number],
	.ts-settings-form input[type=email],
	.ts-settings-form input[type=password],
	.ts-settings-form input[type=url],
	.ts-settings-form input[type=tel],
	.ts-settings-form textarea,
	.ts-select2 input[type=search] {
		font-size: 14px;
	}
	.ts-settings-form .ts-settings-row {
		padding: 10px 0;
		display: block;
	}
	.ts-settings-form .form-table th {
		padding: 0px 3px;
	}
	/*--- Switches ---*/
	.ts-settings-form .ts-settings-row:has(.ts-switch) {
		align-items: center;
		display: flex;
		padding: 5px 3px;
	}
	.ts-settings-form .ts-settings-row:has(.ts-switch) th {
		min-width: 200px;
		padding: 0;
	}
	/*---Save Success ---*/
	.ts-success-msg,
	body.auto-fold .ts-success-msg {
		width: 100%;
	}
	body .wp-responsive-open .ts-success-msg {
		width: calc(100% - 190px);
	}
	/*--- Modals ---*/
	.ts-modal-content {
		padding: 10px;
	}
	.ts-modal-header {
		margin: 10px;
	}
	.ts-modal-body {
		margin: 0px;
	}
	.ts-modal-dialog,
	body.auto-fold .ts-modal-dialog {
		width: 100%;
	}
	body .wp-responsive-open .ts-modal-dialog {
		width: calc(100% - 190px);
	}
}

@media (max-width:767px){
	/*--- Data Tables ---*/
	.ts-datatable-wrapper .dt-container .dt-paging,
	.ts-datatable-wrapper .dt-container .dt-info {
		justify-content: center;
		width: 100%;
	}
	.ts-datatable-wrapper .dt-container .dt-info {
		flex-direction: column;
		padding-bottom: 0.7rem;
	}
	.ts-datatable-wrapper .dt-buttons {
		justify-content: center;
	}
	.ts-datatable-wrapper .dt-container .ts-table-header .ts-table-search .dt-search {
		display: flex;
		justify-content: center;
		padding-left: 0;
		width: 100%;
	}
	.ts-datatable-wrapper .dt-container .dt-search input {
		width: 100%;
	}
	.ts-datatable-wrapper .dt-container .ts-table-header .ts-table-search {
		width: 100%;
	}
	.ts-datatable-wrapper .dt-container .ts-table-header.dt-layout-row {
		display: flex;
		flex-direction: column;
		gap: 1.5em;
	}
	.ts-datatable-wrapper .dt-container {
		padding-top: 20px;
	}
}

@media (max-width:640px){
	/*--- Dashboard Page ---*/
	.ts-dashboard {
		grid-template-columns: auto;
	}
	/*--- Settings Forms ---*/
	#ts-business-hours-form {
		padding: 10px;
	}
	.ts-btn,
	.ts-settings-form .ts-btn,
	.dt-buttons .ts-btn.dt-button,
	.dt-buttons .ts-btn.dt-button:focus:not(:disabled),
	.ts-btn.button,
	.ts-settings-group .ts-repeat,
	.ts-btn:focus:not(:disabled),
	.ts-btn:active:not(:disabled),
	#ts-media-confirm .ts-btn {
		font-size: 14px;
		padding: 4px 10px;
	}
	.wp-core-ui .ts-settings-row .ts-btn.ts-remove-img-btn .dashicons {
		height: 23px;
	}
	/*--- Settings pages ---*/
	.ts-nav.nav-tab-wrapper.ts-desktop-nav {
		display: none;
	}
	.ts-nav.nav-tab-wrapper.ts-mobile-nav {
		display: block;
	}
	.ts-settings-pg {
		flex-direction: column;
	}
	.ts-settings-menu,
	.ts-settings-menu.is-collapsed {
		flex-basis: auto;
	}
}

@media (max-width:480px){
	/*--- Header --- */
	.timeslot-header {
		justify-content: center;
	}
	/*--- Modals ---*/
	#ts-modal-edit--service .ts-hidden-id + .ts-form-row .ts-width-50,
	#ts-modal-edit--staff .ts-hidden-id + .ts-form-row .ts-width-50 {
		flex-basis: 100%;
		max-width: 100%;
	}
	/*--- Datatables ---*/
	.ts-datatable-wrapper .dt-container .dt-paging .dt-paging-button {
		padding: 0.2em 0.6em;
	}
	.ts-datatable-wrapper .dt-container .dt-paging .ellipsis {
		padding: 0;
	}
	/*--- Appearance ---*/
	.ts-settings-row .ts-css-group-wrapper .select2 {
		max-width: 100%;
		min-width: 100%;
		width: 100%;
	}
	.ts-settings-form .ts-unit-wrapper input[type=number] {
		max-width: calc(100% - 21px);
		width: calc(100% - 21px);
	}
	.ts-settings-form .ts-css-group-wrapper {
		flex-direction: column;
		max-width: 100%;
	}
	.ts-css-group-wrapper > * {
		padding-right: 0;
		padding-bottom: 14px;
	}
	input.ts-color-input.spectrum.with-add-on {
		max-width: none;
	}
	#ts-appearance-form table {
		table-layout: fixed;
	}
	/*--- Settings Forms ---*/
	.ts-settings-form h1,
	.ts-settings-form .ts-subtitle {
		text-align: center;
	}
	/*--- Switches ---*/
	.ts-settings-form .ts-settings-row:has(.ts-switch) {
		justify-content: space-between;
	}
	/*--- Business Hours ---*/
	.ts-hours-input-wrapper {
		flex-wrap: wrap;
	}
	.ts-break-wrapper .ts-time-wrapper {
		width: 100%;
	}
	.ts-hours-wrapper {
		border-bottom: 2px solid var(--ts-gray);
		display: flex;
		flex-direction: column;
		gap: 1em;
		justify-content: space-between;
		margin-bottom: 14px;
		padding-bottom: 20px;
	}
	.ts-check-wrapper {
		align-items: flex-start;
		flex-direction: column;
		gap: 0;
	}
	.ts-workday-wrapper {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	.ts-hours-wrapper label {
		font-size: 13px;
	}
	.ts-settings-form .ts-day-label {
		font-size: 15px;
	}
	/*--- Holidays ---*/
	.ts-repeating.ts-holidays {
		align-items: flex-start;
		gap: 1em;
		padding: 15px 5px;
	}
	.ts-holiday-input-wrapper {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: 1em;
	}
	.ts-settings-group .ts-repeating .ts-holiday-date {
		width: 100%;
	}
	/* Setup */
	.ts-setup-form .ts-check-wrapper {
		margin-top: 0px;
	}
	/* Info icons */
	.ts-info-wrapper.ts-info-inline {
		flex-direction: column;
		gap: 0.3rem;
	}
	.ts-info-wrapper.ts-info-inline .ts-info-toggle {
		text-align: center;
	}
}

@media (max-width:400px){
	.ts-nav .nav-tab {
		font-size: 11px;
	}
}