body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.header-c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
 
 /* Sidebar */
 .sidebar {
  width: 75px;
  background-color: rgba(215, 215, 215, 1);
  color: white;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 2svh;
  z-index: 1000;
}

.sidebar ul {
  list-style-type: none;
  padding: 2svh 4px;
  margin: 0;
}

.sidebar-item {
  display: flex;
  flex-direction: column; /* Align icons and text vertically */
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: black;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.3s ease-in-out; /* Optional hover effect */
}

.sidebar-item i {
  font-size: 24px; /* Adjust the icon size */
  margin-bottom: 5px; /* Space between icon and text */
}

.sidebar-item:hover {
  background-color: rgba(0, 0, 0, 0.1); /* Optional hover background */
  cursor: pointer;
}

.sidebar-item span {
  font-size: 14px; /* Text size below the icon */
  color: black;
  text-align: center;
}


/* Responsive Design */
@media screen and (max-width: 768px) {
  .sidebar {
      width: 65px;
  }
}



/* .btn {
    @apply inline-flex items-center gap-1 py-2 px-3 min-w-fit text-base font-semibold justify-center rounded-lg transition-all duration-500 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white;
  }
   
  .logoutButton {
    @apply btn bg-orange-700 opacity-90 text-white hover:opacity-100 focus:bg-orange-700 focus:ring-orange-700;
  }
   
  .primaryButton {
    @apply btn bg-[#2f3192e3]/70 text-white hover:bg-[#2f3192e3] focus:bg-[#2f3192e3] focus:ring-[#2f3192e3];
  }
   
  .secondaryButton {
    @apply btn bg-slate-200/60 border border-slate-400 text-gray-900 hover:bg-slate-200 hover:text-opacity-80 focus:bg-slate-200 focus:ring-slate-400;
  }
   
  .successButton {
    @apply btn bg-green-600/70 text-white hover:bg-green-600 focus:bg-green-600 focus:ring-green-600;
  }
   
  .dangerButton {
    @apply btn bg-red-600/70 text-white hover:bg-red-600 focus:bg-red-600 focus:ring-red-600;
  }
   
  .actionButton {
    @apply btn bg-slate-200/60 text-gray-900 hover:bg-slate-200 hover:text-opacity-80 focus:bg-slate-200 focus:text-opacity-80 focus:ring-slate-400;
  }
   
  button:disabled,
  button[disabled] {
    @apply opacity-50 cursor-not-allowed;
  } */