/* Estilo para el modal */
  #chatModal {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    display: none; /* Ocultar el modal por defecto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  #chatModal .modal-dialog {
    margin: 10% auto; /* Centrar verticalmente */
  }

  #chatModal .modal-content {
    border-radius: 0;
    background-color: #f5f5f5;
  }

  #chatModal .modal-header {
    background-color: #333;
    color: #fff;
  }

  #chatModal .modal-title {
    color: #ffffff; /* Color del título */
  }

  #chatModal .modal-body {
    background-color: #fff; /* Color de fondo del cuerpo */
    padding: 20px;
  }

  #chatModal .modal-footer {
    background-color: #f5f5f5; /* Color de fondo del pie de página */
    border-top: none;
  }

  #chatModal .form-control {
    border-radius: 4px;
  }

  #chatModal .btn-primary {
    border-radius: 4px;
  }

  #chatModal .btn-close {
    color: #fff;
  }

  #chatModal .modal-footer button {
    color: #ff0000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    margin-left: 5px;
  }

  #chatModal .modal-footer button:hover {
    background-color: #ccc;
    color: #fff;
  }

  #chatModal .close {
    color: #fff;
    opacity: 1;
  }

  #chatModal .close:hover {
    opacity: 0.8;
  }

  /* Clase para hacer el modal más amplio */
  #chatModal.custom-modal-xl .modal-dialog {
    max-width: 10px; /* Ajusta el ancho máximo según tus necesidades */
  }

  /* Clase para hacer el modal aún más amplio */
  #chatModal.custom-modal-xxl .modal-dialog {
    max-width: 10px; /* Ajusta el ancho máximo según tus necesidades */
  }