<div class="modal fade" id="messageMLModal" tabindex="-1" role="dialog" aria-labelledby="messageMLLabel"

    aria-hidden="true">

  <div class="modal-dialog modal-lg" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <div class="col px-2 bg-primary text-white">

          <p class="h4 modal-title">Escribir mensaje</p>

        </div>                                

      </div>

      <div class="modal-body" id="messageMLInModal">

        <div class="row my-5" id="messageMLInput">

          <div class="col-12">

            <div class="form-outline">

              <div class="form-outline">

                <textarea class="form-control" id="messageMLText" rows="5" data-mdb-showcounter="true" maxlength="335"></textarea>                                    

                <label class="form-label" for="messageMLText">Mensaje (max 335 caracteres)</label>

                <div class="form-helper"></div>

              </div>

            </div>

          </div>                        

        </div>                    

      </div>

      <div class="modal-footer">

        <a class="btn btn-primary btn-sm" id="messageMLLink">Link de pago</a>

        <a class="btn btn-danger btn-sm" id="messageMLCancel">Cancelar</a>

        <a class="btn btn-success btn-sm" id="messageMLSave">Enviar</a>

      </div>

    </div>

  </div>

</div>