<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-modals.html.twig */
class __TwigTemplate_7146b18d248cc6ffc3a5bd69e237d135 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
            'javascript' => [$this, 'block_javascript'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-modals.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-modals.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-modals.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Modals
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Modals"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Modals</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA rendered modal with header, body, and set of actions in the footer.
\t\t\t\t\t</p>

\t\t\t\t\t<!-- Standard modal content -->
\t\t\t\t\t<div id=\"standard-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"standard-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"standard-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t<hr>
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">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>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!--  Modal content for the Large example -->
\t\t\t\t\t<div class=\"modal fade\" id=\"bs-example-modal-lg\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-lg\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"myLargeModalLabel\">Large modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div class=\"modal fade\" id=\"bs-example-modal-sm\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"mySmallModalLabel\">Small modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Full width modal content -->
\t\t\t\t\t<div id=\"full-width-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fullWidthModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-full-width\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fullWidthModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t<hr>
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">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>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Long Content Scroll Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"scrollable-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"scrollableModalTitle\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"scrollableModalTitle\">Modal title</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Standard  modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#standard-modal\">Standard Modal</button>
\t\t\t\t\t\t<!-- Large modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#bs-example-modal-lg\">Large Modal</button>
\t\t\t\t\t\t<!-- Small modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#bs-example-modal-sm\">Small Modal</button>
\t\t\t\t\t\t<!-- Full width modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#full-width-modal\">Full Width Modal</button>
\t\t\t\t\t\t<!-- Scrollable modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#scrollable-modal\">Scrollable Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal with Pages</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Examples of custom modals.</p>

\t\t\t\t\t<!-- Signup modal content -->
\t\t\t\t\t<div id=\"signup-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">


\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"auth-brand text-center mt-2 mb-4 position-relative top-0\">
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-dark\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo-dark.png\" alt=\"dark logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-light\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo.png\" alt=\"logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t<form class=\"ps-3 pe-3\" action=\"#\">

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

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

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

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-check\">
\t\t\t\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" class=\"form-check-input\" id=\"customCheck1\">
\t\t\t\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"customCheck1\">I accept
\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\">Terms and Conditions</a>
\t\t\t\t\t\t\t\t\t\t\t\t</label>
\t\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3 text-center\">
\t\t\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"submit\">Sign Up Free</button>
\t\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t</form>

\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->


\t\t\t\t\t<!-- SignIn modal content -->
\t\t\t\t\t<div id=\"login-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"auth-brand text-center mt-2 mb-4 position-relative top-0\">
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-dark\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo-dark.png\" alt=\"dark logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-light\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo.png\" alt=\"logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t</div>

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

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

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

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3 text-center\">
\t\t\t\t\t\t\t\t\t\t\t<button class=\"btn rounded-pill btn-primary\" type=\"submit\">Sign In</button>
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Sign Up modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#signup-modal\">Sign Up Modal</button>
\t\t\t\t\t\t<!-- Log In modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#login-modal\">Log In Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal based Alerts</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Show different contexual alert messages using modal component</p>

\t\t\t\t\t<!-- Success Alert Modal -->
\t\t\t\t\t<div id=\"success-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-success\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-check-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Well Done!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Alert Modal -->
\t\t\t\t\t<div id=\"info-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-information-line h1 text-info\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Heads up!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Alert Modal -->
\t\t\t\t\t<div id=\"warning-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-alert-line h1 text-warning\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Incorrect Information</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Alert Modal -->
\t\t\t\t\t<div id=\"danger-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-danger\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Pink Alert Modal -->
\t\t\t\t\t<div id=\"pink-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-pink\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Purple Alert Modal -->
\t\t\t\t\t<div id=\"purple-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-purple\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Success Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#success-alert-modal\">Success Alert</button>
\t\t\t\t\t\t<!-- Info Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#info-alert-modal\">Info Alert</button>
\t\t\t\t\t\t<!-- Warning Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#warning-alert-modal\">Warning Alert</button>
\t\t\t\t\t\t<!-- Danger Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#danger-alert-modal\">Danger Alert</button>
\t\t\t\t\t\t<!-- Pink Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\" data-bs-toggle=\"modal\" data-bs-target=\"#pink-alert-modal\">Pink Alert</button>
\t\t\t\t\t\t<!-- Purple Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\" data-bs-toggle=\"modal\" data-bs-target=\"#purple-alert-modal\">Purple Alert</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal Position</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Specify the position for the modal. You can display modal at top, bottom, center or right of page by specifying 
\t\t\t\t\t\t                                                classes
\t\t\t\t\t\t<code>modal-top</code>,
\t\t\t\t\t\t<code>modal-bottom</code>,
\t\t\t\t\t\t<code>modal-dialog-centered</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>modal-right</code>
\t\t\t\t\t\trespectively.</p>

\t\t\t\t\t<!-- Top modal content -->
\t\t\t\t\t<div id=\"top-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-top\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"topModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Right modal content -->
\t\t\t\t\t<div id=\"right-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm modal-right\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header border-0\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-0\">Text in a modal</h4>
\t\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger btn-sm\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Bottom modal content -->
\t\t\t\t\t<div id=\"bottom-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm modal-bottom\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"bottomModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Center modal content -->
\t\t\t\t\t<div class=\"modal fade\" id=\"centermodal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"myCenterModalLabel\">Center modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Top modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#top-modal\">Top Modal</button>
\t\t\t\t\t\t<!-- Bottom modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#bottom-modal\">Bottom Modal</button>
\t\t\t\t\t\t<!-- Center modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#centermodal\">Center modal</button>
\t\t\t\t\t\t<!-- Right modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#right-modal\">Rightbar Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Colored Header Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A rendered modal with header having contexual background color.</p>

\t\t\t\t\t<!-- Primary Header Modal -->
\t\t\t\t\t<div id=\"primary-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"primary-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-primary\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"primary-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Primary Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Success Header Modal -->
\t\t\t\t\t<div id=\"success-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"success-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-success\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"success-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Success Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Header Modal -->
\t\t\t\t\t<div id=\"info-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"info-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-info\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"info-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Info Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Header Modal -->
\t\t\t\t\t<div id=\"warning-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"warning-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-warning\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"warning-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Warning Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Header Modal -->
\t\t\t\t\t<div id=\"danger-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"danger-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-danger\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"danger-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Danger Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Dark Header Modal -->
\t\t\t\t\t<div id=\"dark-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dark-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-dark\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"dark-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Dark Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Primary header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#primary-header-modal\">Primary Header</button>
\t\t\t\t\t\t<!-- Success header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#success-header-modal\">Success Header</button>
\t\t\t\t\t\t<!-- Info header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#info-header-modal\">Info Header</button>
\t\t\t\t\t\t<!-- Warning header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#warning-header-modal\">Warning Header</button>
\t\t\t\t\t\t<!-- Danger header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#danger-header-modal\">Danger Header</button>
\t\t\t\t\t\t<!-- Dark header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" data-bs-toggle=\"modal\" data-bs-target=\"#dark-header-modal\">Dark Header</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Filled Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A rendered modal with header, body and footer having contexual background color.</p>

\t\t\t\t\t<!-- Primary Filled Modal -->
\t\t\t\t\t<div id=\"fill-primary-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-primary-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-primary\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-primary-modalLabel\">Primary Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Success Filled Modal -->
\t\t\t\t\t<div id=\"fill-success-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-success-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-success\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-success-modalLabel\">Success Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Filled Modal -->
\t\t\t\t\t<div id=\"fill-info-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-info-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-info\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-info-modalLabel\">Info Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Filled Modal -->
\t\t\t\t\t<div id=\"fill-warning-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-warning-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-warning\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-warning-modalLabel\">Warning Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Filled Modal -->
\t\t\t\t\t<div id=\"fill-danger-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-danger-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-danger\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-danger-modalLabel\">Danger Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Dark Filled Modal -->
\t\t\t\t\t<div id=\"fill-dark-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-dark-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-dark\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-dark-modalLabel\">Dark Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->


\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Primary header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-primary-modal\">Primary Filled</button>
\t\t\t\t\t\t<!-- Success header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-success-modal\">Success Filled</button>
\t\t\t\t\t\t<!-- Info header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-info-modal\">Info Filled</button>
\t\t\t\t\t\t<!-- Warning header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-warning-modal\">Warning Filled</button>
\t\t\t\t\t\t<!-- Danger header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-danger-modal\">Danger Filled</button>
\t\t\t\t\t\t<!-- Dark header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-dark-modal\">Dark Filled</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Multiple Modal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Display a series of modals one by one to guide your users on multiple aspects or take step wise input.</p>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div id=\"multiple-one\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"multiple-oneModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"multiple-oneModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-target=\"#multiple-two\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Next</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div id=\"multiple-two\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"multiple-twoModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"multiple-twoModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Multiple modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#multiple-one\">Multiple Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Toggle Between Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Toggle between multiple modals with some clever placement of the
\t\t\t\t\t\t<code>data-bs-target</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>data-bs-toggle</code>
\t\t\t\t\t\tattributes.</p>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalToggle\" aria-hidden=\"true\" aria-labelledby=\"exampleModalToggleLabel\" tabindex=\"-1\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalToggleLabel\">Modal 1</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\tShow a second modal and hide this one with the button below.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" data-bs-target=\"#exampleModalToggle2\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Open second modal</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalToggle2\" aria-hidden=\"true\" aria-labelledby=\"exampleModalToggleLabel2\" tabindex=\"-1\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalToggleLabel2\">Modal 2</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\tHide this modal and show the first with the button below.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" data-bs-target=\"#exampleModalToggle\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Back to first</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<a class=\"btn btn-secondary\" data-bs-toggle=\"modal\" href=\"#exampleModalToggle\" role=\"button\">Open first modal</a>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Fullscreen Modal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a
\t\t\t\t\t\t<code>.modal-dialog</code>
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"hstack gap-2 flex-wrap\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#fullscreeexampleModal\">
\t\t\t\t\t\t\tFullscreen Modal
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenSm\">Full Screen Below sm</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenMd\">Full Screen Below md</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenLg\">Full Screen Below lg</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenXl\">Full Screen Below xl</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenXxl\">Full Screen Below xxl</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"modal fade\" id=\"fullscreeexampleModal\" tabindex=\"-1\" aria-labelledby=\"fullscreeexampleModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"fullscreeexampleModalLabel\">Full Screen Modal</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenSm\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenSmLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-sm-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenSmLabel\">Full screen below sm</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenMd\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenMdLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-md-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenMdLabel\">Full screen below md</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenLg\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenLgLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-lg-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenLgLabel\">Full screen below lg</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenXl\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenXlLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-sm-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenXlLabel\">Full screen below xl</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenXxl\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenXxlLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-xxl-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenXxlLabel\">Full screen below xxl</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Static Backdrop</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Static Backdrop modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#staticBackdrop\">
\t\t\t\t\t\t\tStatic Backdrop
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- btn list -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"staticBackdrop\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"staticBackdropLabel\">Modal title</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end modal header -->
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<p class=\"m-0\">I will not close if you click outside me. Don't even try to press escape key.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Understood</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end modal footer -->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end modal content-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end modal dialog-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end modal-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Varying Modal Content</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
\t\t\t\t\t\t<code>event.relatedTarget</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\" target=\"_blank\">HTML
\t\t\t\t\t\t\t<code>data-bs-*</code>
\t\t\t\t\t\t\tattributes</a>
\t\t\t\t\t\tto vary the contents of the modal depending on which button was clicked.</p>

\t\t\t\t\t<div class=\"hstack gap-2 flex-wrap\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@mdo\">Open modal for @mdo</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@fat\">Open modal for @fat</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@getbootstrap\">Open modal for @getbootstrap</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalLabel\">New message</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<form>
\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<label for=\"recipient-name\" class=\"col-form-label\">Recipient:</label>
\t\t\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" id=\"recipient-name\">
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<label for=\"message-text\" class=\"col-form-label\">Message:</label>
\t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" id=\"message-text\"></textarea>
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Send message</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 1286
    public function block_javascript($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));

        // line 1287
        echo "<script>
\tconst exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => { // Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = `New message to \${recipient}`
modalBodyInput.value = recipient
})
</script>
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-modals.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  1407 => 1287,  1397 => 1286,  114 => 11,  104 => 10,  91 => 7,  81 => 6,  61 => 3,  38 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Modals
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Modals' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Modals</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA rendered modal with header, body, and set of actions in the footer.
\t\t\t\t\t</p>

\t\t\t\t\t<!-- Standard modal content -->
\t\t\t\t\t<div id=\"standard-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"standard-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"standard-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t<hr>
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">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>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!--  Modal content for the Large example -->
\t\t\t\t\t<div class=\"modal fade\" id=\"bs-example-modal-lg\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-lg\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"myLargeModalLabel\">Large modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div class=\"modal fade\" id=\"bs-example-modal-sm\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"mySmallModalLabel\">Small modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Full width modal content -->
\t\t\t\t\t<div id=\"full-width-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fullWidthModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-full-width\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fullWidthModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t<hr>
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">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>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Long Content Scroll Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"scrollable-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"scrollableModalTitle\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-scrollable\" role=\"document\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"scrollableModalTitle\">Modal title</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t\t<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
\t\t\t\t\t\t\t\t\t\t                                                            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
\t\t\t\t\t\t\t\t\t\t                                                            laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
\t\t\t\t\t\t\t\t\t\t                                                            consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Standard  modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#standard-modal\">Standard Modal</button>
\t\t\t\t\t\t<!-- Large modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#bs-example-modal-lg\">Large Modal</button>
\t\t\t\t\t\t<!-- Small modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#bs-example-modal-sm\">Small Modal</button>
\t\t\t\t\t\t<!-- Full width modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#full-width-modal\">Full Width Modal</button>
\t\t\t\t\t\t<!-- Scrollable modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#scrollable-modal\">Scrollable Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal with Pages</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Examples of custom modals.</p>

\t\t\t\t\t<!-- Signup modal content -->
\t\t\t\t\t<div id=\"signup-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">


\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"auth-brand text-center mt-2 mb-4 position-relative top-0\">
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-dark\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo-dark.png\" alt=\"dark logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-light\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo.png\" alt=\"logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t<form class=\"ps-3 pe-3\" action=\"#\">

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

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

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

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-check\">
\t\t\t\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" class=\"form-check-input\" id=\"customCheck1\">
\t\t\t\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"customCheck1\">I accept
\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\">Terms and Conditions</a>
\t\t\t\t\t\t\t\t\t\t\t\t</label>
\t\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3 text-center\">
\t\t\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"submit\">Sign Up Free</button>
\t\t\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t\t\t</form>

\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->


\t\t\t\t\t<!-- SignIn modal content -->
\t\t\t\t\t<div id=\"login-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"auth-brand text-center mt-2 mb-4 position-relative top-0\">
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-dark\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo-dark.png\" alt=\"dark logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t\t<a href=\"index\" class=\"logo-light\">
\t\t\t\t\t\t\t\t\t\t\t<span><img src=\"/images/logo.png\" alt=\"logo\" height=\"22\"></span>
\t\t\t\t\t\t\t\t\t\t</a>
\t\t\t\t\t\t\t\t\t</div>

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

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

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

\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3 text-center\">
\t\t\t\t\t\t\t\t\t\t\t<button class=\"btn rounded-pill btn-primary\" type=\"submit\">Sign In</button>
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Sign Up modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#signup-modal\">Sign Up Modal</button>
\t\t\t\t\t\t<!-- Log In modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#login-modal\">Log In Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal based Alerts</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Show different contexual alert messages using modal component</p>

\t\t\t\t\t<!-- Success Alert Modal -->
\t\t\t\t\t<div id=\"success-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-success\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-check-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Well Done!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Alert Modal -->
\t\t\t\t\t<div id=\"info-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-information-line h1 text-info\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Heads up!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Alert Modal -->
\t\t\t\t\t<div id=\"warning-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-alert-line h1 text-warning\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Incorrect Information</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Alert Modal -->
\t\t\t\t\t<div id=\"danger-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-danger\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Pink Alert Modal -->
\t\t\t\t\t<div id=\"pink-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-pink\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Purple Alert Modal -->
\t\t\t\t\t<div id=\"purple-alert-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-purple\">
\t\t\t\t\t\t\t\t<div class=\"modal-body p-4\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-close-circle-line h1\"></i>
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-2\">Oh snap!</h4>
\t\t\t\t\t\t\t\t\t\t<p class=\"mt-3\">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light my-2\" data-bs-dismiss=\"modal\">Continue</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Success Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#success-alert-modal\">Success Alert</button>
\t\t\t\t\t\t<!-- Info Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#info-alert-modal\">Info Alert</button>
\t\t\t\t\t\t<!-- Warning Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#warning-alert-modal\">Warning Alert</button>
\t\t\t\t\t\t<!-- Danger Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#danger-alert-modal\">Danger Alert</button>
\t\t\t\t\t\t<!-- Pink Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\" data-bs-toggle=\"modal\" data-bs-target=\"#pink-alert-modal\">Pink Alert</button>
\t\t\t\t\t\t<!-- Purple Alert modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\" data-bs-toggle=\"modal\" data-bs-target=\"#purple-alert-modal\">Purple Alert</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Modal Position</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Specify the position for the modal. You can display modal at top, bottom, center or right of page by specifying 
\t\t\t\t\t\t                                                classes
\t\t\t\t\t\t<code>modal-top</code>,
\t\t\t\t\t\t<code>modal-bottom</code>,
\t\t\t\t\t\t<code>modal-dialog-centered</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>modal-right</code>
\t\t\t\t\t\trespectively.</p>

\t\t\t\t\t<!-- Top modal content -->
\t\t\t\t\t<div id=\"top-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-top\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"topModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Right modal content -->
\t\t\t\t\t<div id=\"right-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm modal-right\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header border-0\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t\t\t\t<h4 class=\"mt-0\">Text in a modal</h4>
\t\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger btn-sm\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Bottom modal content -->
\t\t\t\t\t<div id=\"bottom-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-sm modal-bottom\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"bottomModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Center modal content -->
\t\t\t\t\t<div class=\"modal fade\" id=\"centermodal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"myCenterModalLabel\">Center modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5>Overflowing text to show scroll behavior</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Top modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#top-modal\">Top Modal</button>
\t\t\t\t\t\t<!-- Bottom modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#bottom-modal\">Bottom Modal</button>
\t\t\t\t\t\t<!-- Center modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#centermodal\">Center modal</button>
\t\t\t\t\t\t<!-- Right modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"modal\" data-bs-target=\"#right-modal\">Rightbar Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Colored Header Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A rendered modal with header having contexual background color.</p>

\t\t\t\t\t<!-- Primary Header Modal -->
\t\t\t\t\t<div id=\"primary-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"primary-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-primary\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"primary-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Primary Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Success Header Modal -->
\t\t\t\t\t<div id=\"success-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"success-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-success\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"success-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Success Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Header Modal -->
\t\t\t\t\t<div id=\"info-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"info-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-info\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"info-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Info Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Header Modal -->
\t\t\t\t\t<div id=\"warning-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"warning-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-warning\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"warning-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Warning Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Header Modal -->
\t\t\t\t\t<div id=\"danger-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"danger-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-danger\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"danger-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Danger Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Dark Header Modal -->
\t\t\t\t\t<div id=\"dark-header-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dark-header-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header modal-colored-header bg-dark\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"dark-header-modalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Dark Background</h5>
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Primary header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#primary-header-modal\">Primary Header</button>
\t\t\t\t\t\t<!-- Success header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#success-header-modal\">Success Header</button>
\t\t\t\t\t\t<!-- Info header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#info-header-modal\">Info Header</button>
\t\t\t\t\t\t<!-- Warning header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#warning-header-modal\">Warning Header</button>
\t\t\t\t\t\t<!-- Danger header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#danger-header-modal\">Danger Header</button>
\t\t\t\t\t\t<!-- Dark header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" data-bs-toggle=\"modal\" data-bs-target=\"#dark-header-modal\">Dark Header</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Filled Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A rendered modal with header, body and footer having contexual background color.</p>

\t\t\t\t\t<!-- Primary Filled Modal -->
\t\t\t\t\t<div id=\"fill-primary-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-primary-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-primary\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-primary-modalLabel\">Primary Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Success Filled Modal -->
\t\t\t\t\t<div id=\"fill-success-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-success-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-success\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-success-modalLabel\">Success Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Info Filled Modal -->
\t\t\t\t\t<div id=\"fill-info-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-info-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-info\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-info-modalLabel\">Info Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Warning Filled Modal -->
\t\t\t\t\t<div id=\"fill-warning-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-warning-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-warning\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-warning-modalLabel\">Warning Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Danger Filled Modal -->
\t\t\t\t\t<div id=\"fill-danger-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-danger-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-danger\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-danger-modalLabel\">Danger Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Dark Filled Modal -->
\t\t\t\t\t<div id=\"fill-dark-modal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"fill-dark-modalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content modal-filled bg-dark\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"fill-dark-modalLabel\">Dark Filled Modal</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<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>
\t\t\t\t\t\t\t\t\t<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-outline-light\">Save changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->


\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Primary header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-primary-modal\">Primary Filled</button>
\t\t\t\t\t\t<!-- Success header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-success-modal\">Success Filled</button>
\t\t\t\t\t\t<!-- Info header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-info-modal\">Info Filled</button>
\t\t\t\t\t\t<!-- Warning header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-warning\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-warning-modal\">Warning Filled</button>
\t\t\t\t\t\t<!-- Danger header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-danger-modal\">Danger Filled</button>
\t\t\t\t\t\t<!-- Dark header modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-dark\" data-bs-toggle=\"modal\" data-bs-target=\"#fill-dark-modal\">Dark Filled</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Multiple Modal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Display a series of modals one by one to guide your users on multiple aspects or take step wise input.</p>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div id=\"multiple-one\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"multiple-oneModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"multiple-oneModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-target=\"#multiple-two\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Next</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div id=\"multiple-two\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"multiple-twoModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\" id=\"multiple-twoModalLabel\">Modal Heading</h4>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<h5 class=\"mt-0\">Text in a modal</h5>
\t\t\t\t\t\t\t\t\t<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Multiple modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#multiple-one\">Multiple Modal</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Toggle Between Modals</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Toggle between multiple modals with some clever placement of the
\t\t\t\t\t\t<code>data-bs-target</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>data-bs-toggle</code>
\t\t\t\t\t\tattributes.</p>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalToggle\" aria-hidden=\"true\" aria-labelledby=\"exampleModalToggleLabel\" tabindex=\"-1\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalToggleLabel\">Modal 1</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\tShow a second modal and hide this one with the button below.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" data-bs-target=\"#exampleModalToggle2\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Open second modal</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalToggle2\" aria-hidden=\"true\" aria-labelledby=\"exampleModalToggleLabel2\" tabindex=\"-1\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-dialog-centered\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalToggleLabel2\">Modal 2</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\tHide this modal and show the first with the button below.
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" data-bs-target=\"#exampleModalToggle\" data-bs-toggle=\"modal\" data-bs-dismiss=\"modal\">Back to first</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- /.modal-content -->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- /.modal-dialog -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- /.modal -->

\t\t\t\t\t<a class=\"btn btn-secondary\" data-bs-toggle=\"modal\" href=\"#exampleModalToggle\" role=\"button\">Open first modal</a>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Fullscreen Modal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a
\t\t\t\t\t\t<code>.modal-dialog</code>
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"hstack gap-2 flex-wrap\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#fullscreeexampleModal\">
\t\t\t\t\t\t\tFullscreen Modal
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenSm\">Full Screen Below sm</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenMd\">Full Screen Below md</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenLg\">Full Screen Below lg</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenXl\">Full Screen Below xl</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreenXxl\">Full Screen Below xxl</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"modal fade\" id=\"fullscreeexampleModal\" tabindex=\"-1\" aria-labelledby=\"fullscreeexampleModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"fullscreeexampleModalLabel\">Full Screen Modal</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenSm\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenSmLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-sm-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenSmLabel\">Full screen below sm</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenMd\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenMdLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-md-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenMdLabel\">Full screen below md</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenLg\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenLgLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-lg-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenLgLabel\">Full screen below lg</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenXl\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenXlLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-sm-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenXlLabel\">Full screen below xl</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModalFullscreenXxl\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenXxlLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog modal-fullscreen-xxl-down\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalFullscreenXxlLabel\">Full screen below xxl</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t...
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0);\" class=\"btn btn-light\" data-bs-dismiss=\"modal\">Close</a>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Save Changes</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Static Backdrop</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<!-- Static Backdrop modal -->
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"modal\" data-bs-target=\"#staticBackdrop\">
\t\t\t\t\t\t\tStatic Backdrop
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t\t<!-- btn list -->

\t\t\t\t\t<!-- Modal -->
\t\t\t\t\t<div class=\"modal fade\" id=\"staticBackdrop\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"staticBackdropLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"staticBackdropLabel\">Modal title</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end modal header -->
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<p class=\"m-0\">I will not close if you click outside me. Don't even try to press escape key.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Understood</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- end modal footer -->
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<!-- end modal content-->
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end modal dialog-->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end modal-->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->


\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Varying Modal Content</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
\t\t\t\t\t\t<code>event.relatedTarget</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\" target=\"_blank\">HTML
\t\t\t\t\t\t\t<code>data-bs-*</code>
\t\t\t\t\t\t\tattributes</a>
\t\t\t\t\t\tto vary the contents of the modal depending on which button was clicked.</p>

\t\t\t\t\t<div class=\"hstack gap-2 flex-wrap\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@mdo\">Open modal for @mdo</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@fat\">Open modal for @fat</button>
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\" data-bs-whatever=\"@getbootstrap\">Open modal for @getbootstrap</button>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">
\t\t\t\t\t\t<div class=\"modal-dialog\">
\t\t\t\t\t\t\t<div class=\"modal-content\">
\t\t\t\t\t\t\t\t<div class=\"modal-header\">
\t\t\t\t\t\t\t\t\t<h5 class=\"modal-title\" id=\"exampleModalLabel\">New message</h5>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-body\">
\t\t\t\t\t\t\t\t\t<form>
\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<label for=\"recipient-name\" class=\"col-form-label\">Recipient:</label>
\t\t\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" id=\"recipient-name\">
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t\t\t<label for=\"message-text\" class=\"col-form-label\">Message:</label>
\t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" id=\"message-text\"></textarea>
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"modal-footer\">
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\">Send message</button>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

{% endblock %}

{% block javascript %}
<script>
\tconst exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => { // Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = `New message to \${recipient}`
modalBodyInput.value = recipient
})
</script>
{% endblock %}

", "ui-modals.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-modals.html.twig");
    }
}
