/* Modal Styles */
.modal {
  position: fixed;
  display: none; /* Hidden by default */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.custom-modal-width {
  max-width: 40vw; /* Default to half of the viewport width */
}
.modal-dialog {
  width: 100%;
  max-width: none;
  margin: 2rem auto;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 40vw;
  }
}

@media (min-width: 768px) {
  .modal-dialog {
    max-width: 80vw;
  }
}
@media (min-width: 574px) {
  .modal-dialog {
      min-width: 60vw; /* Set your desired minimum width */
  }
}
@media (min-width: 992px) {
  .modal-dialog {
    max-width: 40vw;
  }
}

@media (min-width: 1200px) {
  .modal-dialog {
    max-width: 40vw;
  }
}

/* Center the modal */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 1rem);
}


/* Modal Footer Button Styles */
.modal-footer .btn-secondary:hover {
  background-color: #c00; /* Change the background color */
  border-color: #c00; /* Change the border color to match */

}

/* Modal Body Styles */
  .modal-body {
    height: calc(100% - 120px); /* Adjust based on header and footer size */
    overflow-y: auto; /* Scroll if content exceeds the height */
  }

.modal-body p, .modal-body div {
  word-wrap: break-word; /* Breaks long words to prevent overflow */
  
}

/* Ellipsis Text Overflow */
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* More Fields Visibility */
#moreFields {
  display: block; /* or 'flex', 'inline', 'inline-block', etc., depending on your layout needs */
}