.cbs_booking_form{
    width:100%;
    display: flex;
    gap:20px;
  }
  .cbs_booking_form #cbs_tab_menu{
    /* width:100%; */
    float:left;
    /* border:2px solid gray; */
  }
  .cbs_booking_form #content_menu{
    /* width:100%; */
    float:left;
    /* border:2px solid gray; */
  }
  .proceed-other-stylists{margin: 0px 36% !important;}
  .custom-alert-ok-button{margin: 0px 40% !important;}
  .cbs_booking_form #cbs_navigation #cbs_back,#extra-add-service,.proceed-other-stylists,.custom-alert-ok-button{
    /*float:left;    
    background: #dbbd5feb;
    border:1px solid rgb(0, 0, 0);;
    border-radius: 5px;
    font-weight: bold;
    padding:10px !important;*/
	   float: left;
		background: linear-gradient(145deg, #e6c765, #d1ab4c);
		border: 1px solid #b58a30;
		border-radius: 8px;
		font-weight: bold;
		padding: 12px 20px;
		color: #fff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
		box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;
		font-size: 14px;
		cursor: pointer;
    line-height:20px !important;
	  height:auto !important;font-size: 16px;
  }
  #extra-add-service {
    /*float: left;
    width: fit-content;
    margin: 20px;
    background-color: #dbbd5feb;
    padding: 10px;*/
	   float: left;
    background: linear-gradient(145deg, #e6c765, #d1ab4c);
    border: 1px solid #b58a30;
    border-radius: 8px;
    font-weight: bold;
    padding: 12px 20px;
	   width: fit-content;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 14px;
    cursor: pointer;
	  margin-bottom:10px;
  }
  .cbs_booking_form #cbs_navigation #cbs_back:disabled {
    background: #9abba1;
  }
  .cbs_booking_form #cbs_navigation #cbs_next {
    /*float:right;    
    background: #dbbd5feb;
      border:1px solid rgb(0, 0, 0);;
      border-radius: 5px;
      font-weight: bold;
      padding:10px !important;*/
	  float: left;
    background: linear-gradient(145deg, #e6c765, #d1ab4c);
    border: 1px solid #b58a30;
    border-radius: 8px;
    font-weight: bold;
    padding: 12px 20px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 14px;
    cursor: pointer;
    line-height:20px !important;
	  height:auto !important;font-size: 16px;
  }
  .cbs-main-container{
    max-width: 100% !important;
  }
  #cbs_tab_menu ul li{
    list-style-type: none;
    font-size: 18px;
      font-weight: 800;
      margin-bottom: 20px;
      font-family: 'Muli';
      width: 150px;
      padding: 20px 0px 20px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      /* line-height: 50px; */
      /* padding: 0px 20px; */
  }
  #cbs_tab_menu ul li:hover{
    background-color: #dee39e;
    border-radius: 2px;
  }
  #cbs_service_menu , #cbs_cart_menu{
    width: 100%;
    margin: auto;
    display: grid;
    align-items: center;
    /* padding: 30px; */
  }
  #cbs_service_menu h3, #cbs_cart_menu h3, #cbs_booking_menu h3{
    display: flex;
      margin: auto;
      padding: 20px;
      font-family: 'math';
      font-size: 26px;
      justify-content: center;
  }
  #cbs_service_menu table {
    /* width: 100%; */
    border-collapse: collapse;
  }
  
  #cbs_service_menu td {
    padding: 10px 50px;
    vertical-align: middle;
  }
  
  #cbs_service_menu label {
    /* font-weight: bold; */
    font-family: 'math';
  }
  
  .cbs_booking_form #cbs_navigation {
   
    width: 70%;
      margin: auto;
      padding-top: 50px;
    /* width: 80%;
      margin: auto; */
  }
  .li-category-name ,#cbs_tab_menu ul li span , #cbs_service_menu td, #selected-category-name , #cart_list td, .cbs-time-slot div{
    color: black !important;
  }
  #service_duration, #service_price, #selected_category_id{
    padding: 15px;
    display: none;
  }
   #cbs_service_list , #cbs_staff_list{
    padding: 15px;
    width: 500px;
    border-radius: 2px;
  }
  .cbs-grid-card {
    padding: 1rem;
    border-radius: 8px;
    background-color: #ffffff;
    display: grid;
    gap: 1rem;
  }
  
  .cbs-shadow-card {
    background: #ffffff;
    border-color: #000;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  }
  #cbs_category_list:focus,#cbs_service_list:focus , #cbs_staff_list:focus {
    background-color: #f0f8ff; /* Light blue background */
    border-color: #007bff; /* Blue border */
    outline: none; /* Remove default outline */
  }
  .li-category-description{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 'normal';
  }
  #cbs_category_list .category-item{
    font-family: 'circular';
      font-weight: bold;
      font-size: 20px;
  }
  /* #back, #next{
    padding: 10px 40px;
  } */
  .li-category-price{
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    /* font-weight: normal; */
  }
  #cart_list{
    font-size: 16px;
  }
  
  
  #cart_list td {
    /* display: inline-block; */
    padding: 15px;
  }
  #cart_list th {
  font-family: 'math';
  background-color: rgb(194 185 92);
      color:#000;
  }
  
  /* calander */
  
  .cbs-calendar-container {
    width: 500px;
    /* margin: 0 auto; */
    font-family: Arial, sans-serif;
  }
  
  .cbs-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(194, 185, 92);
    color: black !important;
    padding: 10px;
    border: 1px solid #000000;
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(194, 185, 92); 
    color: black !important; 
    padding: 10px;
    border: 1px solid #000000; 
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
	  background: linear-gradient(145deg, #dbbd5f, #f1e19c);*/
  }
  
  .cbs-calendar-current-date {
    font-size: 18px;
    font-weight: bold;
  }
  
  .cbs-calendar-navigation span {
    cursor: pointer;
    font-size: 24px;
  }
  
  .cbs-calendar-body {
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px solid #000000;
    /* border-radius: 5px; */
  }
  
  .cbs-calendar-weekdays,
  .cbs-calendar-dates {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    padding-left: 0px;
  }
  
  .cbs-calendar-weekdays li,
  .cbs-calendar-dates li {
    text-align: center;
    padding: 5px;
    font-size: 16px;
    font-family: 'math';
    list-style:none !important;
  }
  
  .cbs-calendar-dates li {
    /* background-color: #fff; */
    cursor: pointer;
  }
  
  .cbs-calendar-dates li:hover {
    background-color: #dee39e;
  }
  
  /* Time Slot Grid Styling */
  .cbs-time-slot {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
    width:40%;
    max-height: 378px;
    border: 1px solid #000000;
      overflow: auto;
  }
  
  .cbs-time-slot div {
    margin-bottom: 10px;
    font-weight: bold;
    font-family: 'math';
      font-size: 28px;
  }
  
  .cbs-time-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Adjust number of columns */
  gap: 10px;
}

.cbs-time-grid .cbs-time-slot-item {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  width: 97%;
  margin: auto;
  font-size: 15px;
}
  
  .cbs-time-grid .cbs-time-slot-item:hover {
    background-color: #dee39e;
  }
  
  .cbs-calendar-dates li.highlighted {
    background-color: rgb(194, 185, 92); /* Green background */
    color: white; /* White text */
    border-radius: 50%;
    padding: 5px;
    margin : 0px !important;
  }
  
  .cbs-calendar-dates li.blurred {
    filter: blur(1px); /* Apply blur effect */
    opacity: 0.5; /* Optional: Reduce opacity to make the blurred dates appear lighter */
  }
  .cbs-calendar-current-date{
    display: flex
  ;
      justify-content: center;
      margin: auto;
      margin-bottom: 0px !important;
  }
  .selected-category-name{
    font-family: 'math';
  }
  .cbs_booking_form #cbs_navigation #cbs_back{
    float:left;    
  }
  
  .cbs_booking_form #cbs_navigation #cbs_next{
    float:right;    
  }
  
  .cbs_booking_form .error_field{
    color:red;
    display:none;
  }
  
  .cbs_booking_form .service_update{
    display: none;
  }
  
  #cbs_service_section{
    background: none;
  }
  
  .service_update .update {
    background: none !important;
    border: none !important;
    font-weight: bold !important;
    /*height: 32px;*/
    padding: 0;
  }
  
  #cbs_service_menu table {
    display: none; /* Initially hide the table */
  }
  #cbs_service_menu table,#cbs_service_menu td,#cbs_service_menu th{
    border:none;
  }
  
  
  #cbs_service_section select,#cbs_staff_section select{
    padding: 10px;
  }
  #cbs_category_list {
    list-style: none;
	  max-height: 580px;
  overflow: auto;
  }
  #cbs_category_list .category-item{
    padding: 10px;
    cursor: pointer;
  }
  .cbs_disabled {
    pointer-events: none; /* Prevent clicks */
    color: #aaa; /* Greyed out to indicate disabled */
    cursor: not-allowed; /* Show a disabled cursor */
  }
  #selected-category-name{
       margin-left:6px;
      display: flex;
      justify-content: center;
  }
  
  #cbs_service_menu label{
    font-size: 18px !important;
  }
  
  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #bf53a8;
    display: inline-block;
    margin-left: 5px;
  }
  .dot_class {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bf53a8;
    display: inline-block;
    margin-right: 15px;
  }
  #cbs_staff_section{
    background: none !important;
    border : none !important;
  }
  .cbs-time-slot-item.selected {
    background-color: rgb(194, 185, 92) !important; /* Change to your desired color */
    color: #000; /* Change to your desired text color */
  }
  .cbs-time-grid div{
    font-size: 18px;
    font-family: 'math';
  }
  
  
  /* mobile view */
  #cbs-hamburger-btn{
    display: none;
  }
  @media (max-width: 900px) {
    #cbs_service_list, #cbs_staff_list{
      width:150px;
    }
  }
  .cbs-no-slots-message{
    color: red;
  }
  #cbs_calendar_section{
    display: flex;
    gap: 20px;
  }
  @media (max-width: 800px) {
    .cbs-calendar-dates li.highlighted {
      background-color: #4caf50;
      color: white;
      border-radius: 58%;
      padding: 5px;
      width: 30px !important;
      height: 20px !important;
      margin: auto !important;
  }
  .cbs-no-slots-message{
    font-size: 14px !important;
    color: red;
  }
  #cbs_service_menu h3, #cbs_cart_menu h3, #cbs_booking_menu h3{
    font-size: 24px !important;
      font-weight: bold;
  }
  .cbs_avl_slot{
    font-size: 12px !important;
  }
    .cbs-time-slot {
      width:100% !important;
      padding: 0px !important;
    }
    .dot {
      width: 4px;
      height: 4px;
    }
    .cbs-time-slot div{
      font-size: 20px;
    }
    .cbs-calendar-weekdays li, .cbs-calendar-dates li {
      text-align: center;
      padding: 7px 0px;;
      font-size: 12px !important;
      font-family: 'math';
      list-style:none !important;
  }
  .cbs-calendar-container {
    width: 100% !important;
    margin: 0 auto !important;
    font-family: Arial, sans-serif;
  }
    #cbs_calendar_section{
      display: block !important;
      gap: 20px;
    }
    #cbs_service_menu{
      padding:0px  !important;
    }
    #cbs_service_list, #cbs_staff_list{
      width:150px;
      box-sizing: border-box; /* Ensures padding and borders don't affect the width */
    }
    .cbs_booking_form #content_menu {
      padding: 10px !important;
    }
    option {
      max-width:100px;
      width:100px !important;
    }
    .cbs_booking_form #cbs_tab_menu {
      width: 70%;
      left: 0;
    }
    .cbs_booking_form{
      display: grid !important;
      /* padding: 20px; */
      width: 100%;
    }
    #cbs-hamburger-btn{
      display: block;
    }
    #hamburger-menu-container {
      position: relative;
    }
    
    #cbs_tab_menu {
      display: none; /* Hidden by default */
      position: absolute;
      top: 40px; /* Adjust to the height of your button */
      right: 0;
      background-color: white;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      border-radius: 8px;
      overflow: hidden;
      padding: 10px;
      width: 200px;
    }
    
    #cbs_tab_menu ul {
      list-style: none;
      margin: 0;
      padding: 0 !important;
    }
    
    #cbs_tab_menu ul li {
      padding: 10px 15px;
      cursor: pointer;
    }
    
    #cbs_tab_menu ul li:hover {
      background-color: #dee39e;
    }
    
    #cbs-hamburger-btn {
      /* display: none; Hidden by default */
      background: #000;
      border: none;
      font-size: 24px;
      cursor: pointer;
    }
    
    #cbs-hamburger-btn {
        display: block; /* Show the hamburger button */
    }
  
    #cbs_tab_menu {
        display: none; /* Keep the menu hidden by default */
    }
  }
  
  /* Highlighted item */
  .category-item.highlight {
    background-color: #dee39e; /* White background when highlighted */
    border: 2px solid black; /* Black border on highlight */
    border-radius: 5px;
    transition: background-color 0.3s, border 0.3s; /* Smooth transition for background and border */
  }
  
  
  .cbs_action{
    display: flex;
  
  }
  .cbs_action img{
    width:24px !important;
    height:24px !important
  }
  .cbs-active-background {
    background-color: rgb(194, 185, 92) !important; /* Ensure it overrides other styles */
	  border-radius : 5px;
  }
  
  /* Responsive Breakpoints */
  @media (max-width: 800px) {
    .cbs_action img{
    width:14px !important;
    height:14px !important
    }
    .cbs_booking_form {
        flex-direction: column; /* Stack content vertically */
    }
  
    #hamburger-menu-container {
        flex-direction: row; /* Keep button and menu aligned horizontally */
    }
  
    #content_menu {
        overflow-x: auto; /* Scroll content if it overflows horizontally */
    }
  
    #cbs_tab_menu ul {
        flex-direction: column; /* Stack menu items vertically */
    }
  }
  
  @media(max-width:480px) {
    .cbs-calendar-weekdays,.cbs-calendar-dates {
      gap:0px !important;
    }
    #cart_list td {
      font-size: 12px !important;
    }
    #cbs_service_menu td{
      padding: 10px 20px;
    }
    
  #cart_list td img{
    width: 18px;
        height: 18px;
    }
  
    
  }
  
  @media(max-width:340px) {
    #cbs_service_menu td{
      padding: 10px 10px;
    }
    
  }
  
  @media(min-width:800px){
    .cbs_booking_form #content_menu{
      width:100% ;
    }
  }
  
  
  #tooltip {
    display: none;
    position: absolute;
    background-color: indianred;
    color: #fff !important;
    padding: 10px;
    border-radius: 10px; /* Rounded corners for chat-bubble look */
    font-size: 14px;
    z-index: 1000;
    border: 1px solid #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width: 200px; /* Limit width of the tooltip */
    text-align: center; /* Center the text */
    margin: -45px -32px !important; /* Adjust tooltip's horizontal positioning */
  }
  
  /* Arrow styling */
  #tooltip::after {
    content: '';
    position: absolute;
    top: 15px; /* Adjust vertical position of the arrow */
    left: -10px; /* Position arrow on the left */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0; /* Create a triangle */
    border-color: transparent indianred transparent transparent; /* Match tooltip background */
  }
  
  hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: scroll;
    border: 0;
    height: 3px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #ececec;
    opacity: 2.25;
    color: #000000;
  }
  
  #cbs_service_list,#cbs_staff_list{
    padding: 10px;
    font-size: 14px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
  }
  
  #loader-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.3);
      display:none;
  }
  #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      margin: -50px 0 0 -50px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #3498db;
      -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
   
  #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #e74c3c;
      -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
   
  #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #f9c922;
      -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
   
  @-webkit-keyframes spin {
      0%   {
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
      100% {
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
      }
  }
  @keyframes spin {
      0%   {
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
      100% {
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
      }
  }
  
  #service-section-table tr{
      border: none !important;
  }
  
  #csb_error_message {
    display: none; /* Initially hidden */
    position: relative;
    background-color: indianred; /* Match tooltip color */
    color: #fff !important; /* Tooltip text color */
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1000;
    border: 1px solid #000; /* Optional border */
    margin: 10px 0px 10px 0px;
  }
  
  @media screen and (max-width: 800px){
    #cbs_tab_menu ul li{
       width: auto;
    }
	  
	.category_div {
    	align-items: center;
	}

 }

.category_div {
    display: flex;
}

.li-category-name {
    font-family: 'Muli';
    font-weight: bold;
}

.li-category-description,
.li-category-price{
	font-family: 'Muli';
}

#cbs_tab_menu ul {
    margin: 0px;
}
.cbs-no-slots-message{
	font-size: 18px !important;
    color: red !important;
}