.notification-icon-wrapper {
  position: relative;
  display: inline-block;
}

/* The container for the dropdown content */
.notifications-dropdown {
  position: absolute;
  top: 40px; /* adjust based on your icon’s height */
  right: 0; /* align to the right edge of the icon */
  background: #fff;
  border: 1px solid #ccc;
  min-width: 600px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999;
  border-radius: 4px;
  padding: 10px;
}

.notification-item {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}

.notification-item:last-child {
  border-bottom: none;
}

#auditTable th,
#auditTable td {
  border: 1px solid #343a40 !important;
  padding: 8px;
}
#notificationTable th,
#notificationTable td {
  border: 1px solid #343a40 !important;
  padding: 8px;
}


.activebg {
  background-color: #007bff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.completed {
  background-color: #28a745;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}


.arrow-blocked {
  /* Container is a thin horizontal line */
  position: relative;
  display: inline-block;
  width: 120px;
  height: 2px;
  background: black; /* The horizontal line */
}

/* Arrow on the left */
.arrow-blocked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px; /* Move arrow left of the line */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid black; /* Arrow points right */
}

/* Circle with slash in the center */
.arrow-blocked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 2px solid black;  /* Circle outline */
  border-radius: 50%;
  /*
    Create the diagonal slash by using a linear gradient
    from transparent to black and back to transparent.
    Adjust the percentages for slash thickness.
  */
  background: linear-gradient(
    135deg,
    transparent 48%,
    black 48%,
    black 52%,
    transparent 52%
  );
}

::placeholder {
  color: #ccc !important;
} 

/* audit trail */
.audit-trail {
  position: fixed;
  bottom: 20px; /* Adjust based on footer height */
  width: 100%;
  z-index: 1000;
}

/* otp */
.position-relative {
  position: relative;
}

.form-control.formcontrol {
  padding-right: 40px; /* Add padding to the right to make space for the eye icon */
}

.eye-icon {
  font-size: 18px;
}

.resend-otp {
  color: #007bff;
  text-decoration: none;
}

.resend-otp:hover {
  text-decoration: underline;
}

.btn-primary.formcontrol {
  padding: 6px 16px;
  border-radius: 15px;
  height: auto;
  border: 0px;
  box-shadow: -4px 3px 6px 2px #698A8E;
}


.btn-add-disabled {
  background-color: #cccccc !important; /* Gray background */
  color: #666666 !important; /* Darker gray text */
  cursor: not-allowed !important; /* No pointer cursor */
  opacity: 0.6; /* Slightly faded */
  pointer-events: none; /* Prevents clicks */
}