/* Custom styles to make dropdown menu pop outside the table */
.dropdown-menu {
    position: absolute !important;
    z-index: 1055; /* Ensure dropdown is above other elements */
    transform: translate3d(0, 38px, 0) !important; /* Bootstrap's default positioning */
    will-change: transform;
    visibility: visible;
    display: block;
  }

  .dropdown {
    position: relative; /* Allow the dropdown to break out of the parent element */
  }

  .table-responsive {
    overflow: visible !important; /* Allow the dropdown to overflow */
  }

  .card-body {
    overflow: visible !important; /* Prevent clipping of the dropdown */
  }

  .truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* adjust as needed */
  }

  .custom__text-wrap{
    text-wrap: auto;
  }

  .navbar-vertical.navbar-expand-xs .navbar-collapse{
    height: unset;
  }

  .flashmessage-container{
    position: absolute;
    right: 2rem;
    top: 5rem;
  }

  .alert-error{
    background-color: rgb(238, 105, 105);
  }

  .custom__primary-btn{
    background-color: #e91e63!important;
  }

  .custom__add-btn{
    margin-right: 1rem;
  }

  /* Full-screen dimming overlay */
  #loading-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);  /* Semi-transparent background */
      z-index: 9999;  /* Ensure the overlay is on top */
  }

  /* Spinner styling */
  #spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  /* Disable all buttons while the overlay is active */
  .disable-click {
      pointer-events: none;  /* Disables click events */
      opacity: 0.5;  /* Optional: visually dim the buttons */
  }

  #confirmDelete .modal-content{
    text-align: center;
  }

  #confirmDelete .modal-content .modal-header{
    display: block;
  }

  .flashmessage-container .alert{
    z-index: 999999999!important;
  }