@media ( max-width: 61.9em) {
	.loader {left: 36% !important;}

	.title{padding-top: 20px;}

	.col-12 {
		width: 100% !important;
	}	
}

@media (max-width: 1250px) {
	.big-modal{
		width: 1200px!important;
	}

	.big-modal .modal-content{
		width: 1200px!important;
	}

	.big-modal .modal-header{
		width: 1170px!important;
	}

	.big-modal .modal-body{
		width: 1170px!important;
	}

	.big-modal .modal-footer{
		width: 1170px!important;
	}

	.big-modal .topright{
		right: 40px!important;
	}
}

@media (min-width: 1251px) and (max-width: 1350px) {
	.big-modal{
		width: 1300px!important;
	}

	.big-modal .modal-content {
		width: 1300px!important;
	}

	.big-modal .modal-header{
		width: 1270px!important;
	}

	.big-modal .modal-body{
		width: 1270px!important;
	}

	.big-modal .modal-footer {
		width: 1270px!important;
	}

	.big-modal .topright {
		right: 40px!important;
	}
	}

@media (min-width: 1351px) {
	.big-modal{
		width: 1400px!important;
}

	.big-modal .modal-content {
		width: 1400px!important;
	}

	.big-modal .modal-header{
		width: 1370px!important;
	}

	.big-modal .modal-body{
		width: 1370px!important;
	}

	.big-modal .modal-footer {
		width: 1370px!important;
	}

	.big-modal .topright {
		right: 40px!important;
	}
}

.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 14px;
}

/* Mobile tab navigation */
@media (max-width: 768px) {
	.tab {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	
	.tab button {
		display: inline-block;
		float: none;
		padding: 12px 10px;
		font-size: 12px;
		min-width: 120px;
		white-space: nowrap;
	}
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
	font-weight: 500;
	color: red;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.clickable {
	cursor: pointer;
}

.link {
	color: blue;
	cursor: pointer;
}

#x-notify-container {
	z-index: 999999!important;
}

.loader {
	border: 16px solid #c0def3;
	border-top: 16px solid #ddd;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: fixed;
	top: 50%;
	left: 46%;
	z-index: 999999!important;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.hide-loader{
	display:none;
}

/* add nice and responsive styling for the tables (tr, th, header-row) created in loyalty.js file */
table, th, td {
	border: 1px solid #ddd;
}

.header-row {
	background-color: #c0def3;
	color: #000;
	padding: 5px!important;
	font-size: 13px!important;
}

tr {
	border-bottom: 1px solid #ddd;
	padding: 1px;
}

th {
	padding: 5px;
	font-size: 13px;
}

td{
	font-size: 12px;
	padding-left: 3px;
	padding-right: 3px;
}

.action-buttons-cell{
	padding: 5px !important;
}

.action-button{
	padding: 1px!important;
	font-size: 13px;
	font-weight: 600;
	line-height: 15px!important;
}

.action-main-button{
	line-height: 10px;
	font-size: 14px;
	font-weight: bold;
}

.pagination-section{
	margin-top: 12px;
	margin-bottom: 12px;
}

.pagination-button{
	font-size: 13px!important;
	line-height: 10px!important;
	margin-left: 5px!important;
	margin-right: 5px!important;
}

.pagination-page-number{
	font-size: 13px!important;
}

.filter-input{
	width: 100%;
}

/* Mobile pagination and actions */
@media (max-width: 768px) {
	.pagination-section {
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.pagination-button {
		font-size: 11px !important;
		padding: 8px 12px !important;
		margin: 2px !important;
		line-height: normal !important;
	}
	
	.pagination-page-number {
		font-size: 11px !important;
		margin: 0 5px;
	}
	
	.filter-input {
		padding: 8px;
		font-size: 14px;
		margin-bottom: 10px;
	}
	
	.action-main-button {
		width: 100%;
		margin-bottom: 10px;
		padding: 10px;
		font-size: 12px;
	}
}

.modal-header{
	background-color: lightgrey;
}

.close-button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	font-size: 26px;
}

.topright {
	position: absolute;
	right: 0;
	top: 0
}

.btn{
	line-height: 15px!important;
}

#client-points-calculus{
	font-size: 11px;
}

.strike-through{
	text-decoration: line-through;
}

.disabled{
	pointer-events: none;
	cursor: default;
}

.booking-config-log{
	border: 1px solid;
	border-radius: 10px;
	/* padding: 0; */
	padding-left: 5px;
	margin-bottom: 10px;
}

/* Desktop layout - side by side modules */
@media (min-width: 769px) {
	.recommendations-container {
		flex-direction: row !important;
		gap: 20px !important;
	}
	
	.appointment-recommendations-module {
		flex: 0 0 40% !important;
		max-width: 40% !important;
		background-color: #f8faff !important;
		border: 2px solid #e3f2fd !important;
		border-radius: 10px !important;
		padding: 20px !important;
		box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
	}
	
	.manual-recommendations-module {
		flex: 0 0 60% !important;
		max-width: 60% !important;
		background-color: #fff8f5 !important;
		border: 2px solid #ffe0d4 !important;
		border-radius: 10px !important;
		padding: 20px !important;
		box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
	}
	
	/* Hide filters section on desktop */
	#staff-appointments-filters {
		display: none !important;
	}
	
	/* Module headers styling */
	.appointment-recommendations-module h4 {
		background-color: #e3f2fd !important;
		border: 2px solid #bbdefb !important;
		border-radius: 8px !important;
		padding: 12px !important;
		margin: -5px -5px 20px -5px !important;
		color: #1565c0 !important;
		font-weight: bold !important;
		text-align: center !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	}
	
	.manual-recommendations-module h4 {
		background-color: #ffe0d4 !important;
		border: 2px solid #ffcc99 !important;
		border-radius: 8px !important;
		padding: 12px !important;
		margin: -5px -5px 20px -5px !important;
		color: #bf360c !important;
		font-weight: bold !important;
		text-align: center !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	}
}

@media (max-width: 768px) {
	/* Set up flex container for the entire recommendations section */
	#content-section-recommendations-providers .col-md-12 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* Stack the recommendation modules vertically on mobile */
	.recommendations-container {
		flex-direction: column !important;
		gap: 15px !important;
	}
	
	.appointment-recommendations-module,
	.manual-recommendations-module {
		flex: none !important;
		min-width: auto !important;
		max-width: none !important;
		width: 100% !important;
	}
	
	/* Stack the split layout vertically on mobile (fallback for non-JS) */
	#staff-appointments-list > div[style*="display: flex"] {
		flex-direction: column !important;
	}
}

/* Mobile layout - additional styling for stacked modules */
@media (max-width: 768px) {
	.appointment-recommendations-module {
		background-color: #f8faff !important;
		border: 2px solid #e3f2fd !important;
		border-radius: 10px !important;
		padding: 15px !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
		margin-bottom: 20px !important;
	}
	
	.manual-recommendations-module {
		background-color: #fff8f5 !important;
		border: 2px solid #ffe0d4 !important;
		border-radius: 10px !important;
		padding: 15px !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}
	
	/* Hide filters section on mobile too */
	#staff-appointments-filters {
		display: none !important;
	}
	
	/* Module headers styling for mobile */
	.appointment-recommendations-module h4 {
		background-color: #e3f2fd !important;
		border: 2px solid #bbdefb !important;
		border-radius: 8px !important;
		padding: 10px !important;
		margin: -5px -5px 15px -5px !important;
		color: #1565c0 !important;
		font-weight: bold !important;
		text-align: center !important;
		font-size: 16px !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	}
	
	.manual-recommendations-module h4 {
		background-color: #ffe0d4 !important;
		border: 2px solid #ffcc99 !important;
		border-radius: 8px !important;
		padding: 10px !important;
		margin: -5px -5px 15px -5px !important;
		color: #bf360c !important;
		font-weight: bold !important;
		text-align: center !important;
		font-size: 16px !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
	}
	
	/* Mobile-friendly filter sections */
	.date-filter-section {
		padding: 10px !important;
		margin-bottom: 15px !important;
		text-align: center !important;
	}
	
	.date-filter-section label {
		display: block !important;
		margin-bottom: 8px !important;
		font-size: 14px !important;
	}
	
	.date-filter-section input[type="date"] {
		width: 90% !important;
		max-width: 200px !important;
		padding: 8px !important;
		font-size: 16px !important;
	}
	
	.client-search-section {
		padding: 10px !important;
		margin-bottom: 15px !important;
		text-align: center !important;
	}
	
	.client-search-section label {
		display: block !important;
		margin-bottom: 8px !important;
		font-size: 14px !important;
	}
	
	.client-search-section input[type="text"] {
		width: 90% !important;
		max-width: 250px !important;
		padding: 8px !important;
		font-size: 16px !important;
		margin-bottom: 10px !important;
		margin-right: 0 !important;
	}
	
	.client-search-section button {
		padding: 8px 16px !important;
		font-size: 14px !important;
	}
	
	/* Prevent mobile zoom on search inputs */
	#client-search-input,
	#treatments-search,
	#products-search,
	input[id="treatments-search"],
	input[id="products-search"],
	input[id="client-search-input"] {
		font-size: 16px !important;
		min-height: 44px !important;
		-webkit-appearance: none !important;
		border-radius: 0 !important;
	}
	
	/* Login inputs mobile styling */
	#username-input,
	#password-input {
		font-size: 16px !important;
		width: 100% !important;
		max-width: 300px !important;
		padding: 12px !important;
	}
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
	#staff-appointments-list > div[style*="display: flex"] {
		gap: 20px !important;
	}
	
	#staff-appointments-table th,
	#staff-appointments-table td,
	#staff-manual-recommendations-table th,
	#staff-manual-recommendations-table td {
		font-size: 12px !important;
		padding: 10px 6px !important;
	}
}

/* Small mobile devices */
@media (max-width: 480px) {
	#staff-appointments-list > div[style*="display: flex"] {
		gap: 15px !important;
	}
	
	#staff-appointments-table,
	#staff-manual-recommendations-table {
		min-width: auto !important;
		width: 100% !important;
		font-size: 10px !important;
	}
	
	#staff-appointments-table th,
	#staff-appointments-table td,
	#staff-manual-recommendations-table th,
	#staff-manual-recommendations-table td {
		padding: 6px 3px !important;
		font-size: 10px !important;
	}
	
	.action-button {
		padding: 3px 6px !important;
		font-size: 9px !important;
	}
	
	#staff-appointments-list h4 {
		font-size: 13px !important;
	}
}

/* Mobile modal responsiveness - add this back */
@media (max-width: 768px) {
	.big-modal {
		padding: 5px !important;
	}

	.big-modal .modal-content {
		width: 95% !important;
		max-width: none !important;
		margin: 5px auto !important;
	}

	/* Specific styling for recommendations modals on mobile */
	#staffRecommendationsModal,
	#staffRecommendationsSentModal {
		padding: 2px !important;
	}

	/* Mobile-responsive table layout for Recommendations - Providers module */
	.appointments-table,
	.manual-table {
		/* Reset min-width for mobile */
		min-width: auto !important;
		width: 100% !important;
	}

	/* Make tables stack vertically on mobile and completely remove headers */
	.appointments-table thead,
	.manual-table thead,
	#staff-appointments-table thead,
	#staff-manual-recommendations-table thead {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	.appointments-table th,
	.manual-table th,
	#staff-appointments-table th,
	#staff-manual-recommendations-table th,
	#staff-appointments-table .header-row,
	#staff-manual-recommendations-table .header-row,
	#staff-manual-recommendations-table tr[style*="background-color: rgb(255, 234, 167)"] th {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
	}

	.appointments-table tbody,
	.manual-table tbody {
		display: block !important;
	}

	.appointments-table tr,
	.manual-table tr {
		display: block !important;
		border: 1px solid #ddd !important;
		margin-bottom: 15px !important;
		padding: 10px !important;
		border-radius: 8px !important;
		background-color: #f5f5f5 !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}

	.appointments-table td,
	.manual-table td {
		display: block !important;
		border: none !important;
		padding: 8px 0 !important;
		text-align: left !important;
		position: relative !important;
	}

	/* Add labels for each cell on mobile */
	.appointments-table td:before,
	.manual-table td:before {
		content: attr(data-label) !important;
		font-weight: bold !important;
		display: block !important;
		margin-bottom: 4px !important;
		color: #333 !important;
		font-size: 12px !important;
	}
	
	/* Style data rows for better visibility */
	.appointments-table tbody tr,
	.manual-table tbody tr {
		background-color: #f8f9fa !important;
		border: 1px solid #dee2e6 !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
	}

	/* Style the first column (Start Time/Created Time) */
	.appointments-table td:first-child,
	.manual-table td:first-child {
		font-weight: bold !important;
		font-size: 14px !important;
		color: #007bff !important;
		border-bottom: 1px solid #ddd !important;
		padding-bottom: 12px !important;
		margin-bottom: 12px !important;
	}

	/* Style the Actions column - move it below first column */
	.appointments-table td:last-child,
	.manual-table td:last-child {
		order: 1 !important;
		margin-top: 12px !important;
		padding-top: 12px !important;
		border-top: 1px solid #ddd !important;
		text-align: center !important;
	}

	/* Make action buttons full width on mobile */
	.appointments-table .action-button,
	.manual-table .action-button {
		width: 100% !important;
		max-width: 200px !important;
		margin: 5px 0 !important;
		padding: 10px 15px !important;
		font-size: 14px !important;
	}

	/* Adjust table container overflow for mobile */
	.appointment-recommendations-module,
	.manual-recommendations-module {
		overflow-x: visible !important;
	}
	
	/* Hide header rows completely on mobile */
	.header-row,
	#staff-appointments-table .header-row,
	#staff-manual-recommendations-table .header-row,
	#staff-manual-recommendations-table tr.header-row,
	#staff-appointments-table tr.header-row,
	#staff-manual-recommendations-table tr[style*="background-color: rgb(255, 234, 167)"],
	#staff-manual-recommendations-table tr[style*="background-color: rgb(255, 234, 167)"] th {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}

	/* Staff recommendations modal mobile styling */
	#staffRecommendationsModal .modal-dialog,
	#staffRecommendationsSentModal .modal-dialog {
		width: 85% !important;
		max-width: 320px !important;
	}
	
	#staffRecommendationsModal .modal-content,
	#staffRecommendationsSentModal .modal-content {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 8px !important;
	}
	
	#staffRecommendationsModal .modal-body,
	#staffRecommendationsSentModal .modal-body {
		padding: 6px 4px !important;
		max-height: 68vh;
		overflow-y: auto;
		font-size: 12px !important;
		max-width: 320px !important;
	}
	
	#staffRecommendationsModal .modal-header,
	#staffRecommendationsSentModal .modal-header {
		padding: 4px 6px !important;
		font-size: 10px !important;
		min-height: 28px !important;
		background-color: #f8f9fa !important;		
		max-width: 320px !important;
	}

	.big-modal .modal-header{
		width: 100%!important;
	}

	.big-modal .modal-footer{
		width: 100%!important;
	}
	
	#staffRecommendationsModal .modal-header h4,
	#staffRecommendationsSentModal .modal-header h4 {
		font-size: 10px !important;
		margin: 0 !important;
		line-height: 1.1 !important;
		font-weight: 600 !important;
	}
	
	#staffRecommendationsModal .modal-footer,
	#staffRecommendationsSentModal .modal-footer {
		padding: 3px 6px !important;
		flex-wrap: nowrap;
		gap: 4px;
		min-height: 32px !important;
		justify-content: center !important;
	}
	
	#staffRecommendationsModal .modal-footer .btn,
	#staffRecommendationsSentModal .modal-footer .btn {
		font-size: 10px !important;
		padding: 3px 8px !important;
		line-height: 1.1 !important;
		min-width: 60px !important;
		height: 26px !important;
	}
	
	#staffRecommendationsModal input[type="text"],
	#staffRecommendationsModal textarea,
	#staffRecommendationsSentModal input[type="text"],
	#staffRecommendationsSentModal textarea {
		font-size: 16px !important;
		padding: 4px !important;
		width: 100% !important;
		max-width: 280px !important;
		border-radius: 4px !important;
		line-height: 1.3 !important;
		min-height: 44px !important;
		-webkit-appearance: none !important;
	}
	
	#staffRecommendationsModal textarea,
	#staffRecommendationsSentModal textarea {
		min-height: 60px !important;
		max-height: 100px !important;
		resize: vertical !important;
	}
	
	#staffRecommendationsModal h5,
	#staffRecommendationsSentModal h5 {
		font-size: 11px !important;
		margin: 8px 0 4px 0 !important;
		font-weight: bold !important;
	}
	
	#staffRecommendationsModal label,
	#staffRecommendationsSentModal label {
		font-size: 10px !important;
		margin-bottom: 2px !important;
	}
	
	/* Compact search results and treatment/product options */
	#staffRecommendationsModal #treatments-results,
	#staffRecommendationsModal #products-results,
	#staffRecommendationsSentModal #treatments-results,
	#staffRecommendationsSentModal #products-results {
		max-width: 280px !important;
		width: 100% !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		font-size: 9px !important;
		padding: 2px !important;
		box-sizing: border-box !important;
	}
	
	#staffRecommendationsModal #treatments-results .form-check,
	#staffRecommendationsModal #products-results .form-check,
	#staffRecommendationsSentModal #treatments-results .form-check,
	#staffRecommendationsSentModal #products-results .form-check {
		margin-bottom: 3px !important;
		padding: 2px !important;
		width: 100% !important;
		max-width: 270px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	#staffRecommendationsModal #treatments-results .form-check-label,
	#staffRecommendationsModal #products-results .form-check-label,
	#staffRecommendationsSentModal #treatments-results .form-check-label,
	#staffRecommendationsSentModal #products-results .form-check-label {
		font-size: 9px !important;
		line-height: 1.1 !important;
		padding-left: 2px !important;
		max-width: 240px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		white-space: normal !important;
	}
	
	#staffRecommendationsModal #treatments-results .form-check-input,
	#staffRecommendationsModal #products-results .form-check-input,
	#staffRecommendationsSentModal #treatments-results .form-check-input,
	#staffRecommendationsSentModal #products-results .form-check-input {
		transform: scale(0.8) !important;
		margin-right: 3px !important;
	}
	
	/* Compact variant selection */
	#staffRecommendationsModal .variant-selection,
	#staffRecommendationsSentModal .variant-selection {
		margin: 4px 0 !important;
		padding: 3px !important;
		border: 1px solid #dee2e6 !important;
		border-radius: 3px !important;
		background-color: #f8f9fa !important;
		max-width: 270px !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	#staffRecommendationsModal .variant-selection h6,
	#staffRecommendationsSentModal .variant-selection h6 {
		font-size: 9px !important;
		margin: 2px 0 !important;
		font-weight: bold !important;
	}
	
	#staffRecommendationsModal .variant-selection .form-check,
	#staffRecommendationsSentModal .variant-selection .form-check {
		margin-bottom: 1px !important;
		padding: 1px 2px !important;
	}
	
	#staffRecommendationsModal .variant-selection .form-check-label,
	#staffRecommendationsSentModal .variant-selection .form-check-label {
		font-size: 8px !important;
		line-height: 1.0 !important;
		max-width: 230px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		white-space: normal !important;
	}
	
	#staffRecommendationsModal .variant-selection .form-check-input,
	#staffRecommendationsSentModal .variant-selection .form-check-input {
		transform: scale(0.7) !important;
		margin-right: 2px !important;
	}
	
	/* Treatment/product descriptions */
	#staffRecommendationsModal .treatment-description,
	#staffRecommendationsModal .product-description,
	#staffRecommendationsSentModal .treatment-description,
	#staffRecommendationsSentModal .product-description {
		font-size: 8px !important;
		color: #666 !important;
		line-height: 1.1 !important;
		margin-top: 1px !important;
		padding-left: 12px !important;
		max-width: 230px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		white-space: normal !important;
	}
	
	#staffRecommendationsModal .topright,
	#staffRecommendationsSentModal .topright {
		right: 5px !important;
		top: 3px !important;
		font-size: 20px !important;
	}
	
	.big-modal .modal-body {
		padding: 15px 10px !important;
		max-height: 70vh;
		overflow-y: auto;
	}
	
	.big-modal .modal-footer {
		padding: 10px !important;
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.big-modal .modal-footer .btn {
		flex: 1;
		margin: 0;
		min-width: 120px;
	}
	
	.big-modal .topright {
		padding: 0px 16px !important;
		right: 10px !important;
		top: -3px !important;
	}
	
	/* Recommendations modal content */
	.big-modal #recommendations-content h5 {
		font-size: 14px !important;
	}
	
	.big-modal #recommendations-content input[type="text"],
	.big-modal #recommendations-content textarea {
		font-size: 16px !important;
		padding: 10px !important;
	}
	
	.big-modal #treatments-results,
	.big-modal #products-results {
		max-height: 250px;
		overflow-y: auto;
	}
	
	/* Client recommendations modal mobile styling */
	#clientsRecommendationsModal .modal-dialog {
		width: 90% !important;
		max-width: 330px !important;
	}
	
	#clientsRecommendationsModal .modal-content {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 8px !important;
	}
	
	#clientsRecommendationsModal .modal-body {
		padding: 6px 4px !important;
		max-height: 68vh;
		overflow-y: auto;
		font-size: 12px !important;
		max-width: 330px !important;
	}
	
	#clientsRecommendationsModal .modal-header {
		padding: 4px 6px !important;
		font-size: 10px !important;
		min-height: 28px !important;
		background-color: #007bff !important;
		color: white !important;
		max-width: 330px !important;
	}
	
	#clientsRecommendationsModal .modal-header h4 {
		font-size: 10px !important;
		margin: 0 !important;
		line-height: 1.1 !important;
		font-weight: 600 !important;
		color: white !important;
	}
	
	/* Apply mobile table styling to client recommendations table */
	#client-recommendations-table .appointments-table {
		min-width: auto !important;
		width: 100% !important;
	}
	
	#client-recommendations-table .appointments-table thead {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	#client-recommendations-table .appointments-table th,
	#client-recommendations-table .appointments-table .header-row {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	#client-recommendations-table .appointments-table tbody {
		display: block !important;
	}
	
	#client-recommendations-table .appointments-table tr {
		display: block !important;
		border: 1px solid #ddd !important;
		margin-bottom: 15px !important;
		padding: 8px !important;
		border-radius: 8px !important;
		background-color: #f5f5f5 !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}
	
	#client-recommendations-table .appointments-table td {
		display: block !important;
		border: none !important;
		padding: 4px 0 !important;
		text-align: left !important;
		position: relative !important;
	}
	
	/* Add labels for each cell on mobile */
	#client-recommendations-table .appointments-table td:before {
		content: attr(data-label) !important;
		font-weight: bold !important;
		display: block !important;
		margin-bottom: 4px !important;
		color: #333 !important;
		font-size: 12px !important;
	}
	
	/* Style data rows for better visibility */
	#client-recommendations-table .appointments-table tbody tr {
		background-color: #f8f9fa !important;
		border: 1px solid #dee2e6 !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
	}
	
	/* Style the first column (Created Date) */
	#client-recommendations-table .appointments-table td:first-child {
		font-weight: bold !important;
		font-size: 14px !important;
		color: #007bff !important;
		border-bottom: 1px solid #ddd !important;
		padding-bottom: 12px !important;
		margin-bottom: 12px !important;
	}
}

/* Mobile styles for client appointments history table */
@media (max-width: 768px) {
	/* Apply mobile table styling to client appointments history table */
	#client-appointments-history-table .appointments-table {
		min-width: auto !important;
		width: 100% !important;
	}
	
	#client-appointments-history-table .appointments-table thead {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	#client-appointments-history-table .appointments-table th,
	#client-appointments-history-table .appointments-table .header-row {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	#client-appointments-history-table .appointments-table tbody {
		display: block !important;
	}
	
	#client-appointments-history-table .appointments-table tr {
		display: block !important;
		border: 1px solid #ddd !important;
		margin-bottom: 15px !important;
		padding: 8px !important;
		border-radius: 8px !important;
		background-color: #f5f5f5 !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	}
	
	#client-appointments-history-table .appointments-table td {
		display: block !important;
		border: none !important;
		padding: 4px 0 !important;
		text-align: left !important;
		position: relative !important;
	}
	
	/* Add labels for each cell on mobile */
	#client-appointments-history-table .appointments-table td:before {
		content: attr(data-label) !important;
		font-weight: bold !important;
		display: block !important;
		margin-bottom: 4px !important;
		color: #333 !important;
		font-size: 12px !important;
	}
	
	/* Style data rows for better visibility */
	#client-appointments-history-table .appointments-table tbody tr {
		background-color: #f8f9fa !important;
		border: 1px solid #dee2e6 !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
	}
	
	/* Style the first column (Date & Time) */
	#client-appointments-history-table .appointments-table td:first-child {
		font-weight: bold !important;
		font-size: 14px !important;
		color: #17a2b8 !important;
		border-bottom: 1px solid #ddd !important;
		padding-bottom: 12px !important;
		margin-bottom: 12px !important;
	}
}