body {
     background: #f8f9fa;
     margin: 0;
     display: flex;
 }

 .sidebar {
     background: #DFE7FF;
     min-height: 100vh;
     transition: all 0.3s ease;
     overflow: hidden;
     position: fixed;
     top: 0;
     left: 0;
     border-radius: 0 18px 18px 0;
 }

 .sidebar.collapsed {
     width: 80px;
 }

 .sidebar.collapsed .logo {
     justify-content: center;
     margin-left: 0;
     padding: 0;
 }

 .sidebar.collapsed .logo img {
     max-width: 60px;
     height: auto;
 }

 .sidebar.collapsed ul li a span {
     display: none;
 }

 .sidebar.collapsed ul li a {
     justify-content: center;
     font-size: 1.3rem;
 }

 /* expanded sidebar */
 .sidebar.expanded {
     width: 220px;
 }

 .sidebar .logo {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 10px;
     margin-top: 20px;
     margin-left: 15px;
     height: auto;
     cursor: pointer;
     margin-bottom: 40px;
 }


.sidebar.expanded .logo {
    justify-content: center;   
    margin-left: 0;           
    padding: 10px 0;          
}


 .sidebar.expanded .logo img {
     width: 120px;
     height: 120px;
         transition: all 0.3s ease; 

 }

 .sidebar ul {
     list-style: none;
     padding: 0;
     margin: 25 0 0 0;
 }

 .sidebar li {
     margin: 14px 12px;
     padding: 10px 14px;
     border-radius: 8px;
 }

 .sidebar li a {
     text-decoration: none;
     color: #333;
     /* font-weight: 500; */
     display: flex;
     align-items: center;
     font-size: 0.95rem;
     transition: 0.2s;
     gap:20px;

 }

 .sidebar li.active,
 .sidebar li:hover {
     background-color: #0C3DD0;
     margin-right: 18px;
 }


 .sidebar li:hover .menu-icon,
.sidebar li.active .menu-icon {
    filter: brightness(0) invert(1);
} 
/* .sidebar li.active .menu-icon {
    filter: brightness(0) invert(1);
}

.sidebar li:hover .menu-icon {
    filter: none;
} */

.sidebar li:focus,
.sidebar li a:focus {
    outline: none;
    background: none;
    color: inherit;
}


 .sidebar li.active a,
 .sidebar li:hover a {
     color: #fff;
 }

 .sidebar li a i {
     margin-right: 12px;
     font-size: 1.2rem;
 }

 .content {
     flex: 1;
     transition: margin-left 0.3s ease;
     margin-left: 80px;
     width: calc(100% - 80px);
 }

 .content.shifted {
     margin-left: 220px;
     width: calc(100% - 220px);
 }



 .navbar-custom {
     background: #0C3DD0;
     border-radius: 15px 15px 15PX 15PX;
     margin-top: 10px;
     margin-left: 10px;
 }

 .navbar-custom span {
     color: #fff;
 }


.menu-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;         
}



/* .search-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     margin-right: 400px;
 }
*/

.search-wrapper {
    position: relative;
    display: inline-block; /* wrapper width ke hisaab se button align ho */
}


 .search-wrapper input {
     width: 447px;
     height: 42px;
     /* background-color: #072683; */
     border: none;
     background-color: white;

 }

 .search-wrapper input::placeholder {
     color: black;
 }
#searchbtn {
    background-color: #0C3DD0;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    right: 5px; /* input ke andar right side */
    top: 50%;
    transform: translateY(-50%);
}


/* #searchbtn {
     background-color: #0C3DD0;
     border: none;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     cursor: pointer;
     border-radius: 50%;
 }*/

 #searchbtn i {
     /* color: #0d6efd; */
     font-size: 1rem;
     color: white;
 }

 .appointment-buttons {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 20px;
 }

 .appointment-buttons button {
     flex: 1;
     max-width: 700px;
     min-width: 180px;
     font-size: 1rem;
     padding: 12px 18px;
     border-radius: 25px;
 }

 .dropdown-menu {
     border-radius: 12px;
     padding: 8px;
     min-width: 160px;
 }

 .dropdown-item {
     border-radius: 6px;
     transition: background 0.3s ease;
 }

 .dropdown-item:hover {
     background-color: #e6ecff;
 }


 .dropdown-toggle::after {
     display: none !important;
 }


 .appointment-card .d-flex.align-items-center {
     align-items: flex-start !important;
 }

 .payment-status {
     margin-top: 4px;
     font-size: 0.9rem;
 }

 .rate-experience {
     font-size: 0.9rem;
     margin-top: 2px;

 }

 .rate {
     margin-top: 65px;
          /* color: #7058C4; */

 }

.doc-experience {
  color: #7058C4;
}



 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
     max-width: none;
 }

 .btn-primary {
     background: linear-gradient(180deg, #0D44E9 0%, #072683 100%);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

 }

 .shadow-lg {
     /* box-shadow: var(--bs-box-shadow) !important; */
     box-shadow: 0px 4px 16px 0px #00000038 !important;
     ;
 }

 .rounded-circle {
     font-size: 3rem;
     width: 87px;
 }

 .text-primary {

     color: #0C3DD0 !important;
 }

.bookapp {
    margin-top:250px;
    color: white;
    text-decoration: none;
}
 


.bookapp a {
    color: white;
    text-decoration: none;
}
 
#pieChart {
    width: 400px !important;
    height: 400px !important;
}

.icons{
  width:30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;           
}
.Topcard{
   background-color: rgb(223, 231, 255); 
   cursor:pointer;
}
.Pendingcard {
    width: 200px; 
    min-width: 200px;
    height: 150px; 
    flex-shrink: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.search-box {
    width: 400px;
    background-color:rgb(239, 239, 239);
    border-radius: 10px;
}

.search-box input {
    border-radius: 10px;
    height: 40px;
    border: none;
    background-color:rgba(239, 239, 239, 0.514);
}
.option-box {
  border: 1px solid #dce4f9;
  background: #f8f9ff;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;        /* radio & text ke beech distance */
  width: 100%;
  transition: 0.3s ease;
}

.option-box input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.option-box.selected {
  background: #e6f0ff;  /* Light sky blue */
  border-color: #6e9cff;
  box-shadow: 0 0 4px rgba(70, 110, 255, 0.4);
}

.option-box span {
  font-size: 16px;
  font-weight: 500;
  color: #28365f;
  cursor: pointer;
}

/* Inquiries */
.active-card {
    background-color: #003366 !important;
    color: white !important;
    transform: scale(1.02);
    transition: 0.2s;
}

.active-card h6 ,
.active-card h4  {
    color: white !important;
}

.locationdrodown{
    font-size: 14px; 
    height: 36px; 
    border-radius: 8px;
     min-width: 180px;
     justify-content:space-between;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 10px 0;
}
table.dataTable {
    border-top: 2px solid #dee2e6 !important;
}
/* Remove DataTable sorting icons completely */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    display: none !important;
    content: "" !important;
}

.action-icons .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: #f1f1f1;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.icon-btn.approve {
    color: #25D366; /* WhatsApp green */
}
.icon-btn.approve:hover {
    background-color: #25D366;
    color: #fff;
    transform: scale(1.1);
}

/* Cancel */
.icon-btn.cancel {
    color: #ff4d4f;
}
.icon-btn.cancel:hover {
    background-color: #ff4d4f;
    color: #fff;
    transform: scale(1.1);
}

/* Block */
.icon-btn.block {
    color: #dc3545;
}
.icon-btn.creaditCard{
    color: #ffc107;
}
.icon-btn.creaditCard:hover{
    color: #fff;
    background-color: #ffc107;
    transform: scale(1.1);


}
.icon-btn.block:hover {
    background-color: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

/* Click effect */
.icon-btn:active {
    transform: scale(0.95);
}