@extends('layouts.master')

@section('title', 'Modernize Bootstrap Admin')

@section('pageContent')

        @include('layouts.breadcrumb', ['title' => 'Modals', 'subtitle' => 'Home'])
          <div class="row">
            <div class="col-12">
              <!-- start Modal Sizes -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Modal Sizes</h4>

                  <div class="d-md-flex button-group">
                    <div>
                      <!-- ------------------------------------------ -->
                      <!-- Extra Large -->
                      <!-- ------------------------------------------ -->
                      <button class="btn me-1 mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-xlg">
                        Extra Large Modal
                      </button>
                      <!-- sample modal content -->
                      <div class="modal fade" id="bs-example-modal-xlg" tabindex="-1"
                        aria-labelledby="bs-example-modal-lg" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                          <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                              <h4 class="modal-title" id="myLargeModalLabel">
                                Extra Large modal
                              </h4>
                              <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <h4>
                                Overflowing text to show scroll behavior
                              </h4>
                              <p>
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Vivamus sagittis lacus
                                vel augue laoreet rutrum faucibus dolor
                                auctor.
                              </p>
                              <p>
                                Aenean lacinia bibendum nulla sed consectetur.
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Donec sed odio dui. Donec
                                ullamcorper nulla non metus auctor fringilla.
                              </p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                                data-bs-dismiss="modal">
                                Close
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                      <!-- /.modal -->
                    </div>
                    <div>
                      <!-- ------------------------------------------ -->
                      <!-- Large -->
                      <!-- ------------------------------------------ -->
                      <button class="btn me-1 mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-lg">
                        Large Modal
                      </button>
                      <div class="modal fade" id="bs-example-modal-lg" tabindex="-1"
                        aria-labelledby="bs-example-modal-lg" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                              <h4 class="modal-title" id="myLargeModalLabel">
                                Large modal
                              </h4>
                              <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <h4>
                                Overflowing text to show scroll behavior
                              </h4>
                              <p>
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Vivamus sagittis lacus
                                vel augue laoreet rutrum faucibus dolor
                                auctor.
                              </p>
                              <p>
                                Aenean lacinia bibendum nulla sed consectetur.
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Donec sed odio dui. Donec
                                ullamcorper nulla non metus auctor fringilla.
                              </p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                                data-bs-dismiss="modal">
                                Close
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                    </div>
                    <div>
                      <!-- ------------------------------------------ -->
                      <!-- Medium -->
                      <!-- ------------------------------------------ -->
                      <button class="btn me-1 mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-md">
                        Medium Modal
                      </button>
                      <!-- sample modal content -->
                      <div id="bs-example-modal-md" class="modal fade" tabindex="-1"
                        aria-labelledby="bs-example-modal-md" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-lg">
                          <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                              <h4 class="modal-title" id="myModalLabel">
                                Medium Modal
                              </h4>
                              <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <h4>
                                Overflowing text to show scroll behavior
                              </h4>
                              <p>
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Vivamus sagittis lacus
                                vel augue laoreet rutrum faucibus dolor
                                auctor.
                              </p>
                              <p>
                                Aenean lacinia bibendum nulla sed consectetur.
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Donec sed odio dui. Donec
                                ullamcorper nulla non metus auctor fringilla.
                              </p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn bg-danger-subtle text-danger  waves-effect"
                                data-bs-dismiss="modal">
                                Close
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                    </div>
                    <div>
                      <!-- ------------------------------------------ -->
                      <!-- Small -->
                      <!-- ------------------------------------------ -->
                      <button class="btn me-1 mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-sm">
                        Small Modal
                      </button>
                      <!-- sample modal content -->
                      <div class="modal fade" id="bs-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-sm">
                          <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                              <h4 class="modal-title" id="myModalLabel">
                                Small Modal
                              </h4>
                              <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <h4>
                                Overflowing text to show scroll behavior
                              </h4>
                              <p>
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Vivamus sagittis lacus
                                vel augue laoreet rutrum faucibus dolor
                                auctor.
                              </p>
                              <p>
                                Aenean lacinia bibendum nulla sed consectetur.
                                Praesent commodo cursus magna, vel scelerisque
                                nisl consectetur et. Donec sed odio dui. Donec
                                ullamcorper nulla non metus auctor fringilla.
                              </p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn bg-danger-subtle text-danger  waves-effect"
                                data-bs-dismiss="modal">
                                Close
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                      <!-- /.modal -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- end Modal Sizes -->
              <!-- start Modal Types -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Modal Types</h4>

                  <div class="button-group">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                      Static backdrop modal
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
                      tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Static backdrop Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#scroll-long-outer-modal">
                      Scroll Long Outer Modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="scroll-long-outer-modal" data-bs-backdrop="static"
                      data-bs-keyboard="false" tabindex="-1" aria-labelledby="scroll-long-outer-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Scroll Long Outer Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#scroll-long-inner-modal">
                      Scroll Long Inner Modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="scroll-long-inner-modal" data-bs-backdrop="static"
                      data-bs-keyboard="false" tabindex="-1" aria-labelledby="scroll-long-inner-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Scroll Long Inner Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#with-grid-modal">
                      With Grid Modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="with-grid-modal" tabindex="-1" aria-labelledby="scroll-long-inner-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              With Grid Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <div class="container-fluid">
                              <div class="row border mt-3">
                                <div class="col-md-4 border-end bg-light py-3">
                                  .col-md-4
                                </div>
                                <div class="col-md-4 ms-auto bg-light py-3">
                                  .col-md-4 .ms-auto
                                </div>
                              </div>
                              <div class="row border mt-3">
                                <div class="col-md-3 ms-auto bg-light border-end py-3">
                                  .col-md-3 .ms-auto
                                </div>
                                <div class="col-md-2 ms-auto bg-light py-3">
                                  .col-md-2 .ms-auto
                                </div>
                              </div>
                              <div class="row border mt-3">
                                <div class="col-md-6 ms-auto bg-light py-3">
                                  .col-md-6 .ms-auto
                                </div>
                              </div>
                              <div class="row border mt-3">
                                <div class="col-sm-9 border-end bg-light">
                                  <div class="py-3">Level 1: .col-sm-9</div>
                                  <div class="row border-top">
                                    <div class="col-8 col-sm-6 py-3 border-end">
                                      Level 2: .col-8 .col-sm-6
                                    </div>
                                    <div class="col-4 col-sm-6 py-3">
                                      Level 2: .col-4 .col-sm-6
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#vertical-center-modal">
                      Vertically centered Modal
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="vertical-center-modal" tabindex="-1"
                      aria-labelledby="vertical-center-modal" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Vertically centered Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#vertical-center-scroll-modal">
                      Vertically centered scrollable
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="vertical-center-scroll-modal" tabindex="-1"
                      aria-labelledby="vertical-center-modal" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Vertically centered scrollable Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#pop-tool-modal">
                      Tooltip & Popover Modal
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="pop-tool-modal" tabindex="-1" aria-labelledby="vertical-center-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                          <div class="modal-header d-flex align-items-center">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Tooltip & Popover Modal
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5>Popover in a modal</h5>
                            <p>
                              This
                              <a href="javascript:void(0)" role="button" class="btn btn-secondary popover-test" title="Popover title"
                                data-bs-content="Popover body content is set in this attribute.">button</a>
                              triggers a popover on click.
                            </p>
                            <hr />
                            <h5>Tooltips in a modal</h5>
                            <p>
                              <a href="javascript:void(0)" class="tooltip-test" title="Tooltip">This link</a>
                              and
                              <a href="javascript:void(0)" class="tooltip-test" title="Tooltip">that link</a>
                              have tooltips on hover.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger  waves-effect text-start"
                              data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end Modal Types -->
            </div>
            <div class="col-md-6">
              <!-- start Varying Modal content -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Varying Modal content</h4>

                  <!-- sample modal content -->
                  <div class="button-group">
                    <button type="button" class="btn mb-1 px-4 fs-4  bg-primary-subtle text-primary"
                      data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@mdo">
                      Open modal for @mdo
                    </button>

                    <button type="button" class="btn mb-1 px-4 fs-4  bg-success-subtle text-success"
                      data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@fat">
                      Open modal for @fat
                    </button>

                    <button type="button" class="btn mb-1 px-4 fs-4  bg-warning-subtle text-warning"
                      data-bs-toggle="modal" data-bs-target="#samedata-modal" data-bs-whatever="@getbootstrap">
                      Open modal for @getbootstrap
                    </button>
                  </div>
                  <div class="modal fade" id="samedata-modal" tabindex="-1" aria-labelledby="exampleModalLabel1">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header d-flex align-items-center">
                          <h4 class="modal-title" id="exampleModalLabel1">
                            New message
                          </h4>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <form>
                            <div class="mb-3">
                              <label for="recipient-name" class="">Recipient:</label>
                              <input type="text" class="form-control" id="recipient-name1" />
                            </div>
                            <div class="mb-3">
                              <label for="message-text" class="">Message:</label>
                              <textarea class="form-control" id="message-text1"></textarea>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                            Close
                          </button>
                          <button type="button" class="btn btn-success">
                            Send message
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.modal -->
                </div>
              </div>
              <!-- end Varying Modal content -->
            </div>
            <div class="col-md-6">
              <!-- start Custom Modal -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Custom Modal</h4>

                  <div class="button-group">
                    <!-- Signup modal content -->
                    <div id="signup-modal" class="modal fade" tabindex="-1" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-body">
                            <div class="text-center mt-2 mb-4">
                              <a href="/main/index" class="text-success">
                                <span>
                                  <img src="{{ URL::asset('build/images/logos/favicon.png') }}" class="me-3 img-fluid"
                                    alt="modernize-img" />
                                </span>
                              </a>
                            </div>

                            <form class="ps-3 pr-3" action="#">
                              <div class="mb-3">
                                <label for="username">Name</label>
                                <input class="form-control" type="email" id="username" required=""
                                  placeholder="Michael Zenaty" />
                              </div>

                              <div class="mb-3">
                                <label for="emailaddress">Email address</label>
                                <input class="form-control" type="email" id="emailaddress" required=""
                                  placeholder="john@deo.com" />
                              </div>

                              <div class="mb-3">
                                <label for="password">Password</label>
                                <input class="form-control" type="password" required="" id="password"
                                  placeholder="Enter your password" />
                              </div>

                              <div class="mb-3">
                                <div class="form-check">
                                  <input type="checkbox" class="form-check-input" id="customCheck1" />
                                  <label class="form-check-label" for="customCheck1">I accept
                                    <a href="javascript:void(0)">Terms and Conditions</a></label>
                                </div>
                              </div>

                              <div class="mb-3 text-center">
                                <button class="btn bg-info-subtle text-info " type="submit">
                                  Sign Up Free
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- Custom width modal -->
                    <button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#signup-modal">
                      <i class="ti ti-lock fs-5 text-center d-block"></i>
                      Sign Up Modal
                    </button>
                    <!-- SignIn modal content -->
                    <div id="login-modal" class="modal fade" tabindex="-1" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-body">
                            <div class="text-center mt-2 mb-4">
                              <a href="/main/index" class="text-success">
                                <span><img src="{{ URL::asset('build/images/logos/favicon.png') }}" class="me-3 img-fluid"
                                    alt="modernize-img" />
                                </span>
                              </a>
                            </div>

                            <form action="#" class="ps-3 pr-3">
                              <div class="mb-3">
                                <label for="emailaddress1">Email address</label>
                                <input class="form-control" type="email" id="emailaddress1" required=""
                                  placeholder="john@deo.com" />
                              </div>

                              <div class="mb-3">
                                <label for="password1">Password</label>
                                <input class="form-control" type="password" required="" id="password1"
                                  placeholder="Enter your password" />
                              </div>

                              <div class="mb-3">
                                <div class="form-check">
                                  <input type="checkbox" class="form-check-input" id="customCheck2" />
                                  <label class="form-check-label" for="customCheck2">Remember me</label>
                                </div>
                              </div>

                              <div class="mb-3 text-center">
                                <button class="btn btn-rounded bg-info-subtle text-info " type="submit">
                                  Sign In
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- Full width modal -->
                    <button type="button" class="btn bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#login-modal">
                      <i class="ti ti-login fs-5 text-center d-block"></i>
                      Log in Modal
                    </button>
                  </div>
                </div>
              </div>
              <!-- end Custom Modal -->
            </div>
            <div class="col-12">
              <!-- start Fullscreen Modal -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Fullscreen Modal</h4>

                  <div class="button-group">
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen">
                      Fullscreen Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen" tabindex="-1" aria-labelledby="bs-example-modal-lg"
                      aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen-down-sm">
                      Fullscreen Below sm Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen-down-sm" tabindex="-1"
                      aria-labelledby="bs-example-modal-lg" aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen-sm-down">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen below sm modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen-down-md">
                      Fullscreen Below md Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen-down-md" tabindex="-1"
                      aria-labelledby="bs-example-modal-lg" aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen-md-down">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen below md modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen-down-lg">
                      Fullscreen Below lg Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen-down-lg" tabindex="-1"
                      aria-labelledby="bs-example-modal-lg" aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen-lg-down">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen below lg modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen-down-xl">
                      Fullscreen Below xl Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen-down-xl" tabindex="-1"
                      aria-labelledby="bs-example-modal-xl" aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen-xl-down">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen below xl modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- ------------------------------------------ -->
                    <!-- Fullscreen -->
                    <!-- ------------------------------------------ -->
                    <button class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bs-fullscreen-down-xxl">
                      Fullscreen Below xxl Modal
                    </button>
                    <div class="modal fade" id="bs-fullscreen-down-xxl" tabindex="-1"
                      aria-labelledby="bs-example-modal-xxl" aria-hidden="true">
                      <div class="modal-dialog modal-fullscreen-xxl-down">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title h4" id="exampleModalFullscreenLabel">
                              Full screen below xxl modal
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- end Fullscreen Modal -->
            </div>
            <div class="col-md-6">
              <!-- start Modal Header Coloured -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Modal Header Coloured</h4>

                  <div class="button-group">
                    <!-- Primary header modal -->
                    <button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#primary-header-modal">
                      Primary Header
                    </button>
                    <!-- Primary Header Modal -->
                    <div id="primary-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="primary-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-primary text-white">
                            <h4 class="modal-title text-white" id="primary-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Primary Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn bg-primary-subtle text-primary ">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- info header modal -->
                    <button type="button" class="btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#info-header-modal">
                      Info Header
                    </button>
                    <!-- info Header Modal -->
                    <div id="info-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="info-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-info text-white">
                            <h4 class="modal-title text-white" id="info-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Info Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn bg-info-subtle text-info ">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- danger header modal -->
                    <button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#danger-header-modal">
                      Danger Header
                    </button>
                    <!-- danger Header Modal -->
                    <div id="danger-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="danger-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-danger text-white">
                            <h4 class="modal-title text-white" id="danger-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Danger Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn bg-danger-subtle text-danger ">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- warning header modal -->
                    <button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#warning-header-modal">
                      Warning Header
                    </button>
                    <!-- warning Header Modal -->
                    <div id="warning-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="warning-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-warning text-white">
                            <h4 class="modal-title text-white" id="warning-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Warning Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn bg-warning-subtle text-warning ">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- success header modal -->
                    <button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#success-header-modal">
                      Success Header
                    </button>
                    <!-- success Header Modal -->
                    <div id="success-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="success-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-success text-white">
                            <h4 class="modal-title text-white" id="success-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Success Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn bg-success-subtle text-success ">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- dark header modal -->
                    <button type="button" class="btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#dark-header-modal">
                      Dark Header
                    </button>
                    <!-- dark Header Modal -->
                    <div id="dark-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="dark-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content">
                          <div class="modal-header modal-colored-header bg-dark">
                            <h4 class="modal-title text-white" id="dark-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0">Dark Background</h5>
                            <p>
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn btn-dark">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                  </div>
                </div>
              </div>
              <!-- end Modal Header Coloured -->
            </div>
            <div class="col-md-6">
              <!-- start Modal Filled Coloured -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Modal Filled Coloured</h4>

                  <div class="button-group">
                    <!-- Primary header modal -->
                    <button type="button" class="btn mb-1 bg-primary-subtle text-primary px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#bg-primary-header-modal">
                      Primary Modal
                    </button>
                    <!-- Primary Header Modal -->
                    <div id="bg-primary-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="primary-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-primary">
                          <div class="modal-header modal-colored-header text-white">
                            <h4 class="modal-title text-white" id="primary-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">
                              Primary Background
                            </h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- info header modal -->
                    <button type="button" class="btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bg-info-header-modal">
                      Info Modal
                    </button>
                    <!-- info Header Modal -->
                    <div id="bg-info-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="info-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-info">
                          <div class="modal-header modal-colored-header text-white">
                            <h4 class="modal-title text-white id=" info-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">Info Background</h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- danger header modal -->
                    <button type="button" class="btn mb-1 bg-danger-subtle text-danger px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#bg-danger-header-modal">
                      Danger Modal
                    </button>
                    <!-- danger Header Modal -->
                    <div id="bg-danger-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="danger-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-danger">
                          <div class="modal-header modal-colored-header text-white">
                            <h4 class="modal-title text-white" id="danger-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">Danger Background</h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- warning header modal -->
                    <button type="button" class="btn mb-1 bg-warning-subtle text-warning px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#bg-warning-header-modal">
                      Warning Modal
                    </button>
                    <!-- warning Header Modal -->
                    <div id="bg-warning-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="warning-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-warning">
                          <div class="modal-header modal-colored-header text-white">
                            <h4 class="modal-title text-white" id="warning-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">
                              Warning Background
                            </h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- success header modal -->
                    <button type="button" class="btn mb-1 bg-success-subtle text-success px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#bg-success-header-modal">
                      Success Modal
                    </button>
                    <!-- success Header Modal -->
                    <div id="bg-success-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="success-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-success">
                          <div class="modal-header modal-colored-header text-white">
                            <h4 class="modal-title text-white" id="success-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">
                              Success Background
                            </h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- dark header modal -->
                    <button type="button" class="btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#bg-dark-header-modal">
                      Dark Modal
                    </button>
                    <!-- dark Header Modal -->
                    <div id="bg-dark-header-modal" class="modal fade" tabindex="-1"
                      aria-labelledby="dark-header-modalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-scrollable modal-lg">
                        <div class="modal-content modal-filled bg-dark">
                          <div class="modal-header modal-colored-header">
                            <h4 class="modal-title text-white" id="dark-header-modalLabel">
                              Modal Heading
                            </h4>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                              aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <h5 class="mt-0 text-white">Dark Background</h5>
                            <p class="text-white-50">
                              Cras mattis consectetur purus sit amet
                              fermentum. Cras justo odio, dapibus ac facilisis
                              in, egestas eget quam. Morbi leo risus, porta ac
                              consectetur ac, vestibulum at eros.
                            </p>
                            <p class="text-white-50">
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                              Close
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                  </div>
                </div>
              </div>
              <!-- end Modal Filled Coloured -->
            </div>
            <div class="col-12">
              <!-- start Modal Based Alerts -->
              <div class="card">
                <div class="card-body">

                  <h4 class="card-title mb-4">Modal Based Alerts</h4>

                  <div class="button-group">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-success-subtle text-success  px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#al-success-alert">
                      Success Alert
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="al-success-alert" tabindex="-1" aria-labelledby="vertical-center-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-success-subtle text-success">
                          <div class="modal-body p-4">
                            <div class="text-center text-success">
                              <i class="ti ti-circle-check fs-7"></i>
                              <h4 class="mt-2">Well Done!</h4>
                              <p class="mt-3 text-success-50">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac
                                facilisis in, egestas eget quam.
                              </p>
                              <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-info-subtle text-info  px-4 fs-4 " data-bs-toggle="modal"
                      data-bs-target="#al-info-alert">
                      Info Alert
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="al-info-alert" tabindex="-1" aria-labelledby="vertical-center-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-info-subtle">
                          <div class="modal-body p-4">
                            <div class="text-center text-info">
                              <i class="ti ti-info-circle fs-7"></i>
                              <h4 class="mt-2">Heads up!</h4>
                              <p class="mt-3">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac
                                facilisis in, egestas eget quam.
                              </p>
                              <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-warning-subtle text-warning  px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#al-warning-alert">
                      Warning Alert
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="al-warning-alert" tabindex="-1" aria-labelledby="vertical-center-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-warning-subtle">
                          <div class="modal-body p-4">
                            <div class="text-center text-warning">
                              <i class="ti ti-alert-octagon fs-7"></i>
                              <h4 class="mt-2">Incorrect Information</h4>
                              <p class="mt-3">
                                Cras mattis consectetur purus sit amet
                                fermentum.Cras justo odio, dapibus ac
                                facilisis in, egestas eget quam.
                              </p>
                              <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                    </div>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn mb-1 bg-danger-subtle text-danger  px-4 fs-4 "
                      data-bs-toggle="modal" data-bs-target="#al-danger-alert">
                      Danger Alert
                    </button>

                    <!-- Vertically centered modal -->
                    <div class="modal fade" id="al-danger-alert" tabindex="-1" aria-labelledby="vertical-center-modal"
                      aria-hidden="true">
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-danger-subtle">
                          <div class="modal-body p-4">
                            <div class="text-center text-danger">
                              <i class="ti ti-hexagon-letter-x fs-7"></i>
                              <h4 class="mt-2">Oh snap!</h4>
                              <p class="mt-3">
                                Cras mattis consectetur purus sit amet
                                fermentum.Cras justo odio, dapibus ac
                                facilisis in, egestas eget quam.
                              </p>
                              <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end Modal Based Alerts -->
            </div>
          </div>
@endsection

@section('scripts')
@endsection