/* Tab Inactive state */
.booknetic-cp-tab-item {
    background-color: #ffffff !important; /* White background for inactive buttons */
    color: #333331 !important; /* Text color for inactive buttons */
	border: 1px solid #ececee !important;
    border-radius: 10px !important; /* Rounded corners for the tabs */
    margin-left: -3px !important; /* Adjust tab position slightly to the left */
    margin-right: 10px !important; /* Add space between buttons */
    padding: 10px 20px 10px 15px !important; /* Padding: top-right-bottom-left */
	height: 50px !important;
}

.booknetic-body.device-max-md .booknetic-cp-tabs {
	top: 12px !important;
}

.booknetic-cp-tabs .booknetic-cp-tab-item {
	border: 0 1px 1px 1px solid !important;
	border-color: #ececee !important;
}

.booknetic-cp-tab-item .booknetic-cp-tab-item-name {
	color: #333331 !important;
}

/* ICON Inactive state */
.booknetic-body .device-max-md .booknetic-cp-tabs .booknetic-cp-tab-item i {
    color: #333331 !important; /* Icon color for inactive state */
	height: 50px !important;
	width: 60px !important;
	align-content: center;
}

/* Tab Active state */
.booknetic-cp-tab-item.active {
    background-color: #045CB4 !important; /* Purple background for active buttons */
    color: #ffffff !important; /* White text for active buttons */
	border: 0 1px 1px 1px solid #045CB4 !important;
    border-radius: 10px !important; /* Rounded corners for the tabs */
    margin-left: -3px !important; /* Adjust tab position slightly to the left */
	margin-right: 10px !important; /* Add space between buttons */
    padding: 10px 20px 10px 15px !important; /* Padding: top-right-bottom-left */
	height: 50px !important;
}

.booknetic-cp-tab-item.active .booknetic-cp-tab-item-name {
	color: #ffffff !important;
}

/* ICON Active state */
.booknetic-cp-tab-item.active i {
    color: #ffffff !important; /* White icon for active state */
}

/* Tab Hover state */
.booknetic-cp-tab-item:hover {
    background-color: #045CB4 !important; /* Purple background for hovered buttons */
	border: 1px solid #ececee !important;
    border-radius: 10px !important; /* Rounded corners for the tabs */
    margin-left: -3px !important; /* Adjust tab position slightly to the left */
	margin-right: 10px !important; /* Add space between buttons */
    padding: 10px 20px 10px 15px !important; /* Padding: top-right-bottom-left */
}

@media only screen and (max-device-width: 1000px) {
	.booknetic-cp-sidebar-toggle { margin-left: -8px !important; }
	.booknetic-cp-tab-item { padding: 0px 20px 0px 0px !important; margin-left: -8px !important; }
	.booknetic-cp-tab-item.active { padding: 0px 20px 0px 0px !important; margin-left: -8px !important; }
	.booknetic-cp-tab-item:hover { padding: 0px 20px 0px 0px !important; margin-left: -8px !important; }
}

/* ICON Hover state */
.booknetic-cp-tab-item:hover i {
    color: #ffffff !important; /* White icon for hovered state */
}

/* TEXT Hover state */
.booknetic-cp-tab-item:hover span {
    color: #ffffff !important; /* White text for hovered buttons */
}

/* 
Header container with new background color, border, and rounded corners at the top.
*/
.booknetic-cp-header {
    background-color: #F4F7FA !important; /* Light gray/blue background */
    border-bottom: none !important; /* No border at the bottom */
    border-top-left-radius: 15px !important; /* Rounded corner at the top-left */
    border-top-right-radius: 15px !important; /* Rounded corner at the top-right */
    padding: 10px !important; /* Optional padding inside the header */
}

/* Set the color of the customer email to #4C5459 */
.booknetic-cp-header-customer-card-info p {
    color: #4C5459 !important; /* Light gray text for email */
}

/* Set the color of the customer name to #4C5459 */
.booknetic-cp-header-customer-card-info h2 {
    color: #4C5459 !important; /* Light gray text for customer name */
}

/* Style for the logout button */
.booknetic-cp-header-logout-btn {
    background-color: #ffffff !important; /* White background for logout button */
    color: #333331 !important; /* Light gray text for logout button */
    border: none !important; /* Remove border for cleaner look */
    border-radius: 10px !important; /* Rounded corners for the tabs */
}

/* Style for the logout button icon */
.booknetic-cp-header-logout-btn i {
    color: #333331 !important; /* Light gray icon color */
    border-radius: 10px !important; /* Rounded corners for the tabs */
}

/* Hover effect for the logout button */
.booknetic-cp-header-logout-btn:hover {
    background-color: #045CB4 !important; /* Purple background on hover */
    color: #ffffff !important; /* White text on hover */
    border-radius: 10px !important; /* Rounded corners for the tabs */
}

/* Hover effect for the logout button icon */
.booknetic-cp-header-logout-btn:hover i {
    color: #ffffff !important; /* White icon on hover */
    border-radius: 10px !important; /* Rounded corners for the tabs */
}

/* Ensure the span text also turns white on hover */
.booknetic-cp-header-logout-btn:hover span {
    color: #ffffff !important; /* White text on hover */
}

/* Background for the main container */
#booknetic-customer-panel { 
	background-color: #F4F7F8 !important;
}

/* Background for the container holding the buttons */
.booknetic-cp-tabs {
    background-color: #F4F7FA !important; /* Light gray/blue background behind the buttons */
}

/* Background for the table headers and rows */
.booknetic_elegant_table>thead>tr>th {
	background-color: #ffffff !important;
}

/* Remove border from table headers */
table th {
    border: none !important; /* Remove any borders around the headers */
}

/* Optional: Add padding to align with content */
table th.pl-4 {
    padding-left: 4px !important; /* Optional: Adjust padding for alignment */
	background-color: #ffffff !important;
}

/* Round corners bottom */
.booknetic-cp-container {
    background-color: #F4F7FA !important; /* Light gray/blue background */
    border-radius: 0 0 15px 15px !important; /* Rounded corners for the entire container */
}

.booknetic-cp-header-customer-card-img img {
    content: url('<?php echo get_site_url(); ?>/wp-content/plugins/booknetic-customer-panel-customization/image/calendar.png'); /* Fullstendig filsti */
    width: 100px; /* Juster bredde om nødvendig */
    height: 100px; /* Juster høyde om nødvendig */
    border-radius: 50%; /* Gjør bildet rundt */
    object-fit: cover; /* Sørger for at bildet fyller området uten deformasjon */
}

.booknetic-cp-sidebar-toggle {
    background-color: #ffffff !important; /* White background, same as other buttons */
    color: #333331 !important; /* Light gray text, same as other buttons */
    border: 0 1px 1px 1px solid #ececee !important; /* Remove border, same as other buttons */
    border-radius: 10px !important; /* Rounded corners, same as other buttons */
	height: 50px !important;
    padding: 10px 15px !important; /* Same padding as other buttons */
    /* margin-left: -2px !important; /* Ensure button is fully to the left */
    margin-right: 10px !important; /* Same margin as other buttons */
    cursor: pointer; /* Pointer cursor for button */
}

/* ICON Inactive state */
.booknetic-cp-sidebar-toggle i {
    color: #333331 !important; /* Icon color for inactive state, same as other buttons */
}

/* Hover effect */
.booknetic-cp-sidebar-toggle:hover {
    background-color: #045CB4 !important; /* Purple background on hover, same as other buttons */
    color: #ffffff !important; /* White text on hover, same as other buttons */
}

.booknetic-cp-sidebar-toggle:hover i {
    color: #ffffff !important; /* White icon on hover, same as other buttons */
}

.booknetic_btn_primary {
	background-color: #045CB4 !important;
}

/* CUSTOMER DASHBOARD - APPOINTMENT LISTING STYLING */

#booknetic_customer_panel_appointments_table .appointment-list {
	background: #ffffff;
	border: 1px solid #f0f0f0;
	border-radius: 8px;
	box-shadow: 0 0 3px 0 #EAECEF;
}

.appointment-list .appointment-service {
	border-right: 1px solid #ececee;
	min-width: 380px;
}

.appointment-list .appointment-service span.service-name{
	font-size: 18px;
	font-weight: 500;
}

.appointment-list .appointment-staff,
.appointment-list .appointment-datetime, .appointment-list .appointment-price,
.appointment-list .appointment-duration, .appointment-list .appointment-status {
	border-right: 1px solid #f2f2f2;
   /* padding: 20px 40px; */
}

.appointment-list .appointment-actions {
	padding: 20px 20px;
	margin: auto;
	align-content: center;
}

.appointment-actions button.booknetic_zoom_btn {
	background-color: #045CB4 !important; 
	color: #ffffff !important;
	width: auto !important;
	padding: 0 15px !important;
}

.appointment-actions button.booknetic_zoom_btn:hover {
	background-color: #1d9e35 !important; 
	color: #ffffff !important;
}

.appointment-actions .booknetic_zoom_btn .fa-video { color: #ffffff !important; padding-right: 5px; } 

span.service-name, span.staff-name, span.datetime, span.duration, span.status-text {
	font-size: 15px;
	margin: auto;
	padding: 15px 40px;
	
}

.appointment-list span.label {
	font-weight: 600;
	background-color: #f2f2f2;
	padding: 12px 40px;
	text-align: center;
}

@media only screen and (max-device-width: 1000px) {
	
	.appointment-list .appointment-service, .appointment-list .appointment-staff,
	.appointment-list .appointment-datetime, .appointment-list .appointment-price,
	.appointment-list .appointment-duration, .appointment-list .appointment-status {
		border-bottom: 1px solid #f2f2f2;
	}
	
	.appointment-list .appointment-service {
		padding: 12px 0;
	}
	
	.appointment-list span.label {
		padding: 20px 10px;
		min-width: 100px;
		text-align: left;
		font-size:12px
	}
	
	span.service-name, span.staff-name, 
	span.datetime, span.duration, span.status-text {
    	padding: 10px 15px;
		text-align: center;
	}
	
	.appointment-list .appointment-actions {
		margin: auto;
	}
	
	.appointment-actions button.booknetic_zoom_btn {
	padding: 0 40px !important;
	}

}