/* Apply this only on mobile (screens smaller than 768px) */
@media (max-width: 768px) {
  .modal-dialog {
    /* Position the modal at the bottom of the screen */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%; /* Ensure it takes up full width on small screens */
    border-radius: 0;
    transform: translateY(
      100%
    ); /* Initially position the modal off-screen at the bottom */
    transition: transform 0.3s ease-in-out; /* Smooth sliding animation */
  }

  .modal.show .modal-dialog {
    transform: translateY(0); /* Move the modal up into view */
  }
}

.custom-dropdown-menu {
  max-height: 40vh; /* Adjust the height according to your preference */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal overflow (optional) */
}

.dropdown-menu .dropdown-item {
  white-space: normal; /* Allow text to wrap inside the dropdown items */
}

/* Bouncing animation */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0); /* Start and end at normal position */
  }
  50% {
    transform: translateY(
      -10px
    ); /* Move 10px up in the middle of the animation */
  }
}

/* Apply the bounce animation to the bell icon */
.bell-bounce {
  animation: bounce 0.6s ease-in-out infinite;
}

/* Apply the bounce animation to the notification count */
.count-bounce {
  animation: bounce 0.6s ease-in-out infinite;
}

/* Fix for floating label going out in mobile view */
label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
} */
.accordion-button::after {
  -webkit-filter: grayscale(1) invert(1);
  filter: grayscale(1) invert(1);
}

/* select2 related */
.select2-selection__clear {
  margin-left: auto;
}

/* select2 selected tags */
.select2-selection__choice,
.select2-selection__choice__remove {
  color: #fff !important;
  background-color: #198754 !important;
}
/* Scrollable Modal Classes */
.modal-scrollable .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Optional: Add smooth scrolling */
.modal-scrollable .modal-body {
  scroll-behavior: smooth;
}

/* Optional: Custom scrollbar styling for better UX */
.modal-scrollable .modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-scrollable .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}