
/* Customize modal overlay (background behind the modal) */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Overlay background color and opacity */
}

/* Customize modal content */
.modal-content {
  border-radius: 10px; /* Border radius for modal content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for modal content */
}

/* Customize button within the modal */
.btn-modal {
  background-color: #2ecc71; /* Button background color */
  color: #505050; /* Button text color */
}

/* Customize button on modal close */
.btn-close-modal {
  background-color: #e74c3c; /* Close button background color */
  color: #afafaf; /* Close button text color */
}

/* Optional: Add some padding to the modal body */
.modal-body {
  padding: 10px;
}

/* Primary Button */
.btn-primary {
  background-color: #007bff; /* Change to the desired background color */
  color: #fff; /* Change to the desired text color */
  border-color: #007bff; /* Change to the desired border color */
}

/* Secondary Button */
.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border-color: #6c757d;
}

/* Success Button */
.btn-success {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}

/* Danger Button */
.btn-danger {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* Warning Button */
.btn-warning {
  background-color: #ffc107;
  color: #212529;
  border-color: #ffc107;
}

/* Info Button */
.btn-info {
  background-color: #17a2b8;
  color: #fff;
  border-color: #17a2b8;
}

   /* Large Button */
   .btn-lg {
    padding: 0.75rem 1.5rem; /* Adjust the padding for the desired size */
    font-size: 1.25rem; /* Adjust the font size for the desired size */
  }
  
  /* Small Button */
  .btn-sm {
    padding: 0.25rem 0.5rem; /* Adjust the padding for the desired size */
    font-size: 0.875rem; /* Adjust the font size for the desired size */
    border-radius: 0.5rem; 
    margin: 0.5rem;
  }
  
      /* Custom CSS for the text area */
  .custom-textarea {
    word-wrap: break-word;
    white-space: normal;
    font-size: 0.65rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0.05rem solid #303030;
    border-radius: 0.2rem;
  }
      .modal-backdrop {
        opacity: 0.1 !important;
        /* Adjust the opacity value as needed (0 to 1) */
      }
