<?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-utilities.html.twig */
class __TwigTemplate_5ac59a31e2873440af916519d6baee47 extends Template
{
    private $source;
    private $macros = [];

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

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

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

    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-utilities.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-utilities.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-utilities.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 "Utilities
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_css($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", "css"));

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

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 8
    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 9
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Utilities"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 12
    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 13
        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\">Background Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Similar to the contextual text color classes, set the background of an element to any contextual class. Background
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            utilities
\t\t\t\t\t\t<strong>do not set
\t\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\t</strong>, so in some cases you’ll want to use
\t\t\t\t\t\t<code>.text-*</code>color utilities.</p>

\t\t\t\t\t<div class=\"bg-primary text-white p-2 mb-2\">.bg-primary</div>
\t\t\t\t\t<div class=\"bg-secondary text-white p-2 mb-2\">.bg-secondary</div>
\t\t\t\t\t<div class=\"bg-success text-white p-2 mb-2\">.bg-success</div>
\t\t\t\t\t<div class=\"bg-danger text-white p-2 mb-2\">.bg-danger</div>
\t\t\t\t\t<div class=\"bg-warning text-dark p-2 mb-2\">.bg-warning</div>
\t\t\t\t\t<div class=\"bg-info text-dark p-2 mb-2\">.bg-info</div>
\t\t\t\t\t<div class=\"bg-pink text-dark p-2 mb-2\">.bg-pink</div>
\t\t\t\t\t<div class=\"bg-purple text-dark p-2 mb-2\">.bg-purple</div>
\t\t\t\t\t<div class=\"bg-light text-dark p-2 mb-2\">.bg-light</div>
\t\t\t\t\t<div class=\"bg-dark p-2 mb-2\">.bg-dark</div>
\t\t\t\t\t<div class=\"bg-body text-dark p-2 mb-2\">.bg-body</div>
\t\t\t\t\t<div class=\"bg-body-secondary text-dark p-2 mb-2\">.bg-body-secondary</div>
\t\t\t\t\t<div class=\"bg-body-tertiary text-dark p-2 mb-2\">.bg-body-tertiary</div>
\t\t\t\t\t<div class=\"bg-white p-2 mb-2\">.bg-white</div>
\t\t\t\t\t<div class=\"bg-black text-white p-2 mb-2\">.bg-black</div>
\t\t\t\t\t<div class=\"bg-transparent text-dark p-2\">.bg-transparent</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\">Background Gradient Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">By adding a
\t\t\t\t\t\t<code>.bg-gradient</code>
\t\t\t\t\t\tclass, a linear gradient is added as background image to the backgrounds. This
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            gradient starts with a semi-transparent white which fades out to the bottom.</p>

\t\t\t\t\t<div class=\"p-2 mb-2 bg-primary bg-gradient text-white\">.bg-gradient.bg-primary</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-secondary bg-gradient text-white\">.bg-secondary.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-success bg-gradient text-white\">.bg-success.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-danger bg-gradient text-white\">.bg-danger.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-warning bg-gradient text-dark\">.bg-warning.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-info bg-gradient text-dark\">.bg-info.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-pink bg-gradient text-dark\">.bg-pink.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-purple bg-gradient text-dark\">.bg-purple.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-light bg-gradient text-dark\">.bg-light.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-dark bg-gradient text-white\">.bg-dark.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-black bg-gradient text-white\">.bg-black.bg-gradient</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\">Soft background</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set
\t\t\t\t\t\t<code>color</code>, so in some cases you’ll want to use
\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\t<a href=\"https://getbootstrap.com/docs/5.3/utilities/colors/\">color utilities</a>.</p>
\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-12\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-column gap-2\">
\t\t\t\t\t\t\t\t<div class=\"bg-primary-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-primary-emphasis\">.text-primary-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-secondary-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-secondary-emphasis\">.bg-secondary-subtle
\t\t\t\t\t\t\t\t\t</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-success-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-success-emphasis\">.bg-success-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-danger-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-danger-emphasis\">.bg-danger-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-warning-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-warning-emphasis\">.bg-warning-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-info-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-info-emphasis\">.bg-info-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-pink-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-pink-emphasis\">.bg-pink-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-purple-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-purple-emphasis\">.bg-purple-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-light-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-light-emphasis\">.bg-light-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-dark-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-dark-emphasis\">.bg-dark-subtle</code>
\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\">Color & background</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Color and background helpers combine the power of our
\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\tutilities and
\t\t\t\t\t\t<code>.bg-*</code>
\t\t\t\t\t\tutilities in one class. Using our Sass
\t\t\t\t\t\t<code>color-contrast()</code>
\t\t\t\t\t\tfunction, we automatically determine a contrasting
\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\tfor a particular
\t\t\t\t\t\t<code>background-color</code>.</p>
\t\t\t\t\t<div class=\"d-flex flex-column gap-2\">
\t\t\t\t\t\t<div class=\"text-bg-primary p-2\">Primary with contrasting color (.text-bg-primary)</div>
\t\t\t\t\t\t<div class=\"text-bg-secondary p-2\">Secondary with contrasting color (.text-bg-secondary)</div>
\t\t\t\t\t\t<div class=\"text-bg-success p-2\">Success with contrasting color (.text-bg-success)</div>
\t\t\t\t\t\t<div class=\"text-bg-danger p-2\">Danger with contrasting color (.text-bg-danger)</div>
\t\t\t\t\t\t<div class=\"text-bg-warning p-2\">Warning with contrasting color (.text-bg-warning)</div>
\t\t\t\t\t\t<div class=\"text-bg-info p-2\">Info with contrasting color (.text-bg-info)</div>
\t\t\t\t\t\t<div class=\"text-bg-light p-2\">Light with contrasting color (.text-bg-light)</div>
\t\t\t\t\t\t<div class=\"text-bg-dark p-2\">Dark with contrasting color (.text-bg-dark)</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<div class=\"row\">
\t\t<div class=\"col-xl-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Background Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t<code>background-color</code>
\t\t\t\t\t\tutilities are generated with Sass using CSS variables. This
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            allows for real-time color changes without compilation and dynamic alpha transparency changes.</p>

\t\t\t\t\t<div class=\"text-bg-primary p-2\">This is default primary background</div>
\t\t\t\t\t<div class=\"text-bg-primary p-2 bg-opacity-75\">This is 75% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-50\">This is 50% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-25\">This is 25% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-10\">This is 10% opacity success background</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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Text Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Colorize text with color utilities. If you want to colorize links, you can use the
\t\t\t\t\t\t<code>.link-*</code>
\t\t\t\t\t\thelper classes which have
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>:focus</code>
\t\t\t\t\t\tstates.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<p class=\"text-primary\">.text-primary</p>
\t\t\t\t\t\t\t<p class=\"text-primary-emphasis\">.text-primary-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-secondary\">.text-secondary</p>
\t\t\t\t\t\t\t<p class=\"text-secondary-emphasis\">.text-secondary-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-success\">.text-success</p>
\t\t\t\t\t\t\t<p class=\"text-success-emphasis\">.text-success-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-danger\">.text-danger</p>
\t\t\t\t\t\t\t<p class=\"text-danger-emphasis\">.text-danger-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-warning bg-dark\">.text-warning</p>
\t\t\t\t\t\t\t<p class=\"text-warning-emphasis\">.text-warning-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-info bg-dark\">.text-info</p>
\t\t\t\t\t\t\t<p class=\"text-info-emphasis\">.text-info-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-light bg-dark\">.text-light</p>
\t\t\t\t\t\t\t<p class=\"text-light-emphasis\">.text-light-emphasis</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<p class=\"text-dark\">.text-dark</p>
\t\t\t\t\t\t\t<p class=\"text-dark-emphasis\">.text-dark-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-muted\">.text-muted</p>
\t\t\t\t\t\t\t<p class=\"text-body\">.text-body</p>
\t\t\t\t\t\t\t<p class=\"text-body-emphasis\">.text-body-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-body-secondary\">.text-body-secondary</p>
\t\t\t\t\t\t\t<p class=\"text-body-tertiary\">.text-body-tertiary</p>
\t\t\t\t\t\t\t<p class=\"text-black\">.text-black</p>
\t\t\t\t\t\t\t<p class=\"text-white bg-dark\">.text-white</p>
\t\t\t\t\t\t\t<p class=\"text-black-50\">.text-black-50</p>
\t\t\t\t\t\t\t<p class=\"text-white-50 bg-dark\">.text-white-50</p>
\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<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\">Text Opacity Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">text color utilities are generated with Sass using CSS variables. This allows for real-time color
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            changes without compilation and dynamic alpha transparency changes.</p>

\t\t\t\t\t<div class=\"text-primary\">This is default primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-75\">This is 75% opacity primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-50\">This is 50% opacity primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-25\">This is 25% opacity primary text</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\">Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">The
\t\t\t\t\t\t<code>opacity</code>
\t\t\t\t\t\tproperty sets the opacity level for an element. The opacity level describes the transparency
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            level, where
\t\t\t\t\t\t<code>1</code>
\t\t\t\t\t\tis not transparent at all,
\t\t\t\t\t\t<code>.5</code>
\t\t\t\t\t\tis 50% visible, and
\t\t\t\t\t\t<code>0</code>
\t\t\t\t\t\tis
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            completely transparent. Set the
\t\t\t\t\t\t<code>opacity</code>
\t\t\t\t\t\tof an element using
\t\t\t\t\t\t<code>.opacity-{value}</code>
\t\t\t\t\t\tutilities.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"opacity-100 p-2 bg-primary text-light fw-bold rounded\">100%</div>
\t\t\t\t\t\t<div class=\"opacity-75 p-2 bg-primary text-light fw-bold rounded\">75%</div>
\t\t\t\t\t\t<div class=\"opacity-50 p-2 bg-primary text-light fw-bold rounded\">50%</div>
\t\t\t\t\t\t<div class=\"opacity-25 p-2 bg-primary text-light fw-bold rounded\">25%</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</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\">Additive(Add) Border</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use border utilities to
\t\t\t\t\t\t<b>add</b>
\t\t\t\t\t\tan element’s borders. Choose from all borders or one at a time.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-top avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-end avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-bottom avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-start avatar-md bg-light bg-opacity-50\"></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\">Subtractive(Remove) Border</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use border utilities to
\t\t\t\t\t\t<b>remove</b>
\t\t\t\t\t\tan element’s borders. Choose from all borders or one at a time.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-top-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-end-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-bottom-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-start-0 avatar-md bg-light bg-opacity-50\"></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 -->

\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\">Border Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the border color using utilities built on our theme colors.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-primary avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-secondary avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-success avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-danger avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-warning avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-info avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-light avatar-md\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-dark avatar-md bg-light bg-opacity-50\"></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\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Border Width Size</h4>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-1 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-2 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-3 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-4 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-5 avatar-md bg-light bg-opacity-50\"></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\">Border Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">choose from any of the
\t\t\t\t\t\t<code>.border-opacity</code>
\t\t\t\t\t\tutilities:</p>

\t\t\t\t\t<div class=\"border border-success p-2 mb-2\">This is default success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-75\">This is 75% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-50\">This is 50% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-25\">This is 25% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 border-opacity-10\">This is 10% opacity success border</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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Border subtle Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the border color using utilities built on our theme colors.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-primary-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-secondary-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-success-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-danger-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-warning-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-info-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-light-subtle avatar-md\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-dark-subtle avatar-md bg-light bg-opacity-50\"></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-->

\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\">Border Radius</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add classes to an element to easily round its corners.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded\" alt=\"rounded\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-top\" alt=\"rounded-top\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-end\" alt=\"rounded-end\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-bottom\" alt=\"rounded-bottom\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-start\" alt=\"rounded-start\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-circle\" alt=\"rounded-circle\">
\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"avatar-lg w-auto rounded-pill\" alt=\"rounded-pill\">
\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\">Border Radius Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the scaling classes for larger or smaller rounded corners. Sizes range from
\t\t\t\t\t\t<code>0</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>5</code>.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-0\" alt=\"rounded-0\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-1\" alt=\"rounded-1\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-2\" alt=\"rounded-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-3\" alt=\"rounded-3\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-4\" alt=\"rounded-4\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-5\" alt=\"rounded-5\">
\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\">Text Selection</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>user-select-all</code>,
\t\t\t\t\t\t<code>user-select-auto</code>, or
\t\t\t\t\t\t<code>user-select-none</code>
\t\t\t\t\t\tclass to the content which is selected when the user interacts with it.</p>

\t\t\t\t\t<p class=\"user-select-all\">This paragraph will be entirely selected when clicked by the user.</p>
\t\t\t\t\t<p class=\"user-select-auto\">This paragraph has default select behavior.</p>
\t\t\t\t\t<p class=\"user-select-none mb-0\">This paragraph will not be selectable when clicked by the user.</p>
\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\">Pointer Events</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Bootstrap provides
\t\t\t\t\t\t<code>.pe-none</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.pe-auto</code>
\t\t\t\t\t\tclasses to prevent or add element interactions.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"pe-none\" tabindex=\"-1\" aria-disabled=\"true\">This link</a>
\t\t\t\t\t\tcan not be clicked.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"pe-auto\">This link</a>
\t\t\t\t\t\tcan be clicked (this is default behavior).</p>
\t\t\t\t\t<p class=\"pe-none\">
\t\t\t\t\t\t<a href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">This link</a>
\t\t\t\t\t\tcan not be clicked because the
\t\t\t\t\t\t<code>pointer-events</code>
\t\t\t\t\t\tproperty is inherited from its parent. However,
\t\t\t\t\t\t<a href=\"#\" class=\"pe-auto\">this
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                link</a>
\t\t\t\t\t\thas a
\t\t\t\t\t\t<code>pe-auto</code>
\t\t\t\t\t\tclass and can be clicked.</p>
\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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Overflow</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Adjust the
\t\t\t\t\t\t<code>overflow</code>
\t\t\t\t\t\tproperty on the fly with four default values and classes. These classes are not
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            responsive by default.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"overflow-auto p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-auto</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions. By
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                design, this content will vertically scroll.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-hidden p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-hidden</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-visible p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-visible</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-scroll p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-scroll</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\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 -->

\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\">Position in Arrange</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Arrange elements easily with the edge positioning utilities. The format is
\t\t\t\t\t\t<code>{property}-{position}</code>.</p>

\t\t\t\t\t<!-- Arrange elements -->
\t\t\t\t\t<div class=\"position-relative p-5 bg-light bg-opacity-50 m-3 border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 end-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-50 end-50 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 end-0 avatar-xs bg-dark rounded\"></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\">Position in Center</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">In addition, you can also center the elements with the transform utility class
\t\t\t\t\t\t<code>.translate-middle</code>.</p>

\t\t\t\t\t<!-- Center elements -->
\t\t\t\t\t<div class=\"position-relative m-3 bg-light bg-opacity-50 border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-100 translate-middle avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-50 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-100 translate-middle avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-100 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-100 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-100 start-100 translate-middle avatar-xs bg-dark rounded\"></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 -->

\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\">Position in Axis</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">By adding
\t\t\t\t\t\t<code>.translate-middle-x</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>.translate-middle-y</code>
\t\t\t\t\t\tclasses, elements can be positioned only in horizontal or vertical direction.</p>

\t\t\t\t\t<!-- Center elements -->
\t\t\t\t\t<div class=\"position-relative m-3 bg-light border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 avatar-xs bg-dark rounded \"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-50 translate-middle-x avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 end-0 avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-50 start-0 translate-middle-y avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 end-0 translate-middle-y avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-50 translate-middle-x avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 end-0 avatar-xs bg-dark rounded\"></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\">Shadows</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">While shadows on components are disabled by default in Bootstrap and can be enabled via
\t\t\t\t\t\t<code>\$enable-shadows</code>, you can also quickly add or remove a shadow with our
\t\t\t\t\t\t<code>box-shadow</code>
\t\t\t\t\t\tutility
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            classes. Includes support for
\t\t\t\t\t\t<code>.shadow-none</code>
\t\t\t\t\t\tand three default sizes (which have associated variables to
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            match).</p>

\t\t\t\t\t<div class=\"shadow-none p-2 mb-2 bg-light rounded\">No shadow</div>
\t\t\t\t\t<div class=\"shadow-sm p-2 mb-2 rounded\">Small shadow</div>
\t\t\t\t\t<div class=\"shadow p-2 mb-2 rounded\">Regular shadow</div>
\t\t\t\t\t<div class=\"shadow-lg p-2 mb-2 rounded\">Larger shadow</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\">Width</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Width utilities are generated from the utility API in
\t\t\t\t\t\t<code>_utilities.scss</code>. Includes support for
\t\t\t\t\t\t<code>25%</code>,
\t\t\t\t\t\t<code>50%</code>,
\t\t\t\t\t\t<code>75%</code>,
\t\t\t\t\t\t<code>100%</code>, and
\t\t\t\t\t\t<code>auto</code>
\t\t\t\t\t\tby default. Modify
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            those values as you need to generate different utilities here.</p>

\t\t\t\t\t<!-- Width -->
\t\t\t\t\t<div class=\"w-25 p-2 bg-light\">Width 25%</div>

\t\t\t\t\t<div class=\"w-50 p-2 bg-light\">Width 50%</div>

\t\t\t\t\t<div class=\"w-75 p-2 bg-light\">Width 75%</div>

\t\t\t\t\t<div class=\"w-100 p-2 bg-light\">Width 100%</div>

\t\t\t\t\t<div class=\"w-auto p-2 bg-light\">Width auto</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\">Height</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Height utilities are generated from the utility API in
\t\t\t\t\t\t<code>_utilities.scss</code>. Includes support for
\t\t\t\t\t\t<code>25%</code>,
\t\t\t\t\t\t<code>50%</code>,
\t\t\t\t\t\t<code>75%</code>,
\t\t\t\t\t\t<code>100%</code>, and
\t\t\t\t\t\t<code>auto</code>
\t\t\t\t\t\tby default. Modify
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            those values as you need to generate different utilities here.</p>

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-3 align-items-start\" style=\"height: 255px;\">
\t\t\t\t\t\t<!-- Height -->
\t\t\t\t\t\t<div class=\"h-25 p-2 bg-light\">Height25%</div>

\t\t\t\t\t\t<div class=\"h-50 p-2 bg-light\">Height50%</div>

\t\t\t\t\t\t<div class=\"h-75 p-2 bg-light\">Height75%</div>

\t\t\t\t\t\t<div class=\"h-100 p-2 bg-light\">Height100%</div>

\t\t\t\t\t\t<div class=\"h-auto p-2 bg-light\">Height auto</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 -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Object fit</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the value of the
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\">
\t\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\t\tproperty</a>
\t\t\t\t\t\twith our responsive
\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\tutility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-3 text-center\">
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-contain border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-contain</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-cover border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-cover</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-fill border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-fill</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-scale border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-scale</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-none border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-none</code>
\t\t\t\t\t\t\t</p>
\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 end -->

\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\">Object fit</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the value of the
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\">
\t\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\t\tproperty</a>
\t\t\t\t\t\twith our responsive
\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\tutility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.</p>

\t\t\t\t\t<div class=\"position-relative\" style=\"height: 220px;z-index: 1;\">
\t\t\t\t\t\t<div class=\"z-3 position-absolute p-5 rounded-3 bg-primary-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-2 position-absolute p-5 m-2 rounded-3 bg-success-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-1 position-absolute p-5 m-3 rounded-3 bg-secondary-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-0 position-absolute p-5 m-4 rounded-3 bg-danger-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-n1 position-absolute p-5 m-5 rounded-3 bg-info-subtle\"></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 end -->

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

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

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

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  132 => 13,  122 => 12,  109 => 9,  99 => 8,  81 => 6,  61 => 3,  38 => 1,);
    }

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

{% block title %}Utilities
{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Utilities' }) }}
{% 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\">Background Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Similar to the contextual text color classes, set the background of an element to any contextual class. Background
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            utilities
\t\t\t\t\t\t<strong>do not set
\t\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\t</strong>, so in some cases you’ll want to use
\t\t\t\t\t\t<code>.text-*</code>color utilities.</p>

\t\t\t\t\t<div class=\"bg-primary text-white p-2 mb-2\">.bg-primary</div>
\t\t\t\t\t<div class=\"bg-secondary text-white p-2 mb-2\">.bg-secondary</div>
\t\t\t\t\t<div class=\"bg-success text-white p-2 mb-2\">.bg-success</div>
\t\t\t\t\t<div class=\"bg-danger text-white p-2 mb-2\">.bg-danger</div>
\t\t\t\t\t<div class=\"bg-warning text-dark p-2 mb-2\">.bg-warning</div>
\t\t\t\t\t<div class=\"bg-info text-dark p-2 mb-2\">.bg-info</div>
\t\t\t\t\t<div class=\"bg-pink text-dark p-2 mb-2\">.bg-pink</div>
\t\t\t\t\t<div class=\"bg-purple text-dark p-2 mb-2\">.bg-purple</div>
\t\t\t\t\t<div class=\"bg-light text-dark p-2 mb-2\">.bg-light</div>
\t\t\t\t\t<div class=\"bg-dark p-2 mb-2\">.bg-dark</div>
\t\t\t\t\t<div class=\"bg-body text-dark p-2 mb-2\">.bg-body</div>
\t\t\t\t\t<div class=\"bg-body-secondary text-dark p-2 mb-2\">.bg-body-secondary</div>
\t\t\t\t\t<div class=\"bg-body-tertiary text-dark p-2 mb-2\">.bg-body-tertiary</div>
\t\t\t\t\t<div class=\"bg-white p-2 mb-2\">.bg-white</div>
\t\t\t\t\t<div class=\"bg-black text-white p-2 mb-2\">.bg-black</div>
\t\t\t\t\t<div class=\"bg-transparent text-dark p-2\">.bg-transparent</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\">Background Gradient Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">By adding a
\t\t\t\t\t\t<code>.bg-gradient</code>
\t\t\t\t\t\tclass, a linear gradient is added as background image to the backgrounds. This
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            gradient starts with a semi-transparent white which fades out to the bottom.</p>

\t\t\t\t\t<div class=\"p-2 mb-2 bg-primary bg-gradient text-white\">.bg-gradient.bg-primary</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-secondary bg-gradient text-white\">.bg-secondary.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-success bg-gradient text-white\">.bg-success.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-danger bg-gradient text-white\">.bg-danger.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-warning bg-gradient text-dark\">.bg-warning.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-info bg-gradient text-dark\">.bg-info.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-pink bg-gradient text-dark\">.bg-pink.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-purple bg-gradient text-dark\">.bg-purple.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-light bg-gradient text-dark\">.bg-light.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-dark bg-gradient text-white\">.bg-dark.bg-gradient</div>
\t\t\t\t\t<div class=\"p-2 mb-2 bg-black bg-gradient text-white\">.bg-black.bg-gradient</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\">Soft background</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set
\t\t\t\t\t\t<code>color</code>, so in some cases you’ll want to use
\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\t<a href=\"https://getbootstrap.com/docs/5.3/utilities/colors/\">color utilities</a>.</p>
\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-12\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-column gap-2\">
\t\t\t\t\t\t\t\t<div class=\"bg-primary-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-primary-emphasis\">.text-primary-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-secondary-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-secondary-emphasis\">.bg-secondary-subtle
\t\t\t\t\t\t\t\t\t</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-success-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-success-emphasis\">.bg-success-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-danger-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-danger-emphasis\">.bg-danger-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-warning-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-warning-emphasis\">.bg-warning-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-info-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-info-emphasis\">.bg-info-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-pink-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-pink-emphasis\">.bg-pink-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-purple-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-purple-emphasis\">.bg-purple-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-light-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-light-emphasis\">.bg-light-subtle</code>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"bg-dark-subtle p-2\">
\t\t\t\t\t\t\t\t\t<code class=\"text-dark-emphasis\">.bg-dark-subtle</code>
\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\">Color & background</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Color and background helpers combine the power of our
\t\t\t\t\t\t<code>.text-*</code>
\t\t\t\t\t\tutilities and
\t\t\t\t\t\t<code>.bg-*</code>
\t\t\t\t\t\tutilities in one class. Using our Sass
\t\t\t\t\t\t<code>color-contrast()</code>
\t\t\t\t\t\tfunction, we automatically determine a contrasting
\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\tfor a particular
\t\t\t\t\t\t<code>background-color</code>.</p>
\t\t\t\t\t<div class=\"d-flex flex-column gap-2\">
\t\t\t\t\t\t<div class=\"text-bg-primary p-2\">Primary with contrasting color (.text-bg-primary)</div>
\t\t\t\t\t\t<div class=\"text-bg-secondary p-2\">Secondary with contrasting color (.text-bg-secondary)</div>
\t\t\t\t\t\t<div class=\"text-bg-success p-2\">Success with contrasting color (.text-bg-success)</div>
\t\t\t\t\t\t<div class=\"text-bg-danger p-2\">Danger with contrasting color (.text-bg-danger)</div>
\t\t\t\t\t\t<div class=\"text-bg-warning p-2\">Warning with contrasting color (.text-bg-warning)</div>
\t\t\t\t\t\t<div class=\"text-bg-info p-2\">Info with contrasting color (.text-bg-info)</div>
\t\t\t\t\t\t<div class=\"text-bg-light p-2\">Light with contrasting color (.text-bg-light)</div>
\t\t\t\t\t\t<div class=\"text-bg-dark p-2\">Dark with contrasting color (.text-bg-dark)</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<div class=\"row\">
\t\t<div class=\"col-xl-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Background Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t<code>background-color</code>
\t\t\t\t\t\tutilities are generated with Sass using CSS variables. This
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            allows for real-time color changes without compilation and dynamic alpha transparency changes.</p>

\t\t\t\t\t<div class=\"text-bg-primary p-2\">This is default primary background</div>
\t\t\t\t\t<div class=\"text-bg-primary p-2 bg-opacity-75\">This is 75% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-50\">This is 50% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-25\">This is 25% opacity primary background</div>
\t\t\t\t\t<div class=\"bg-primary p-2 text-dark bg-opacity-10\">This is 10% opacity success background</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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Text Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Colorize text with color utilities. If you want to colorize links, you can use the
\t\t\t\t\t\t<code>.link-*</code>
\t\t\t\t\t\thelper classes which have
\t\t\t\t\t\t<code>:hover</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>:focus</code>
\t\t\t\t\t\tstates.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<p class=\"text-primary\">.text-primary</p>
\t\t\t\t\t\t\t<p class=\"text-primary-emphasis\">.text-primary-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-secondary\">.text-secondary</p>
\t\t\t\t\t\t\t<p class=\"text-secondary-emphasis\">.text-secondary-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-success\">.text-success</p>
\t\t\t\t\t\t\t<p class=\"text-success-emphasis\">.text-success-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-danger\">.text-danger</p>
\t\t\t\t\t\t\t<p class=\"text-danger-emphasis\">.text-danger-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-warning bg-dark\">.text-warning</p>
\t\t\t\t\t\t\t<p class=\"text-warning-emphasis\">.text-warning-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-info bg-dark\">.text-info</p>
\t\t\t\t\t\t\t<p class=\"text-info-emphasis\">.text-info-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-light bg-dark\">.text-light</p>
\t\t\t\t\t\t\t<p class=\"text-light-emphasis\">.text-light-emphasis</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<p class=\"text-dark\">.text-dark</p>
\t\t\t\t\t\t\t<p class=\"text-dark-emphasis\">.text-dark-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-muted\">.text-muted</p>
\t\t\t\t\t\t\t<p class=\"text-body\">.text-body</p>
\t\t\t\t\t\t\t<p class=\"text-body-emphasis\">.text-body-emphasis</p>
\t\t\t\t\t\t\t<p class=\"text-body-secondary\">.text-body-secondary</p>
\t\t\t\t\t\t\t<p class=\"text-body-tertiary\">.text-body-tertiary</p>
\t\t\t\t\t\t\t<p class=\"text-black\">.text-black</p>
\t\t\t\t\t\t\t<p class=\"text-white bg-dark\">.text-white</p>
\t\t\t\t\t\t\t<p class=\"text-black-50\">.text-black-50</p>
\t\t\t\t\t\t\t<p class=\"text-white-50 bg-dark\">.text-white-50</p>
\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<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\">Text Opacity Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">text color utilities are generated with Sass using CSS variables. This allows for real-time color
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            changes without compilation and dynamic alpha transparency changes.</p>

\t\t\t\t\t<div class=\"text-primary\">This is default primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-75\">This is 75% opacity primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-50\">This is 50% opacity primary text</div>
\t\t\t\t\t<div class=\"text-primary text-opacity-25\">This is 25% opacity primary text</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\">Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">The
\t\t\t\t\t\t<code>opacity</code>
\t\t\t\t\t\tproperty sets the opacity level for an element. The opacity level describes the transparency
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            level, where
\t\t\t\t\t\t<code>1</code>
\t\t\t\t\t\tis not transparent at all,
\t\t\t\t\t\t<code>.5</code>
\t\t\t\t\t\tis 50% visible, and
\t\t\t\t\t\t<code>0</code>
\t\t\t\t\t\tis
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            completely transparent. Set the
\t\t\t\t\t\t<code>opacity</code>
\t\t\t\t\t\tof an element using
\t\t\t\t\t\t<code>.opacity-{value}</code>
\t\t\t\t\t\tutilities.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"opacity-100 p-2 bg-primary text-light fw-bold rounded\">100%</div>
\t\t\t\t\t\t<div class=\"opacity-75 p-2 bg-primary text-light fw-bold rounded\">75%</div>
\t\t\t\t\t\t<div class=\"opacity-50 p-2 bg-primary text-light fw-bold rounded\">50%</div>
\t\t\t\t\t\t<div class=\"opacity-25 p-2 bg-primary text-light fw-bold rounded\">25%</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</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\">Additive(Add) Border</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use border utilities to
\t\t\t\t\t\t<b>add</b>
\t\t\t\t\t\tan element’s borders. Choose from all borders or one at a time.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-top avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-end avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-bottom avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border-start avatar-md bg-light bg-opacity-50\"></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\">Subtractive(Remove) Border</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use border utilities to
\t\t\t\t\t\t<b>remove</b>
\t\t\t\t\t\tan element’s borders. Choose from all borders or one at a time.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-top-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-end-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-bottom-0 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-start-0 avatar-md bg-light bg-opacity-50\"></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 -->

\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\">Border Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the border color using utilities built on our theme colors.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-primary avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-secondary avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-success avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-danger avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-warning avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-info avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-light avatar-md\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-dark avatar-md bg-light bg-opacity-50\"></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\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Border Width Size</h4>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-1 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-2 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-3 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-4 avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-5 avatar-md bg-light bg-opacity-50\"></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\">Border Opacity</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">choose from any of the
\t\t\t\t\t\t<code>.border-opacity</code>
\t\t\t\t\t\tutilities:</p>

\t\t\t\t\t<div class=\"border border-success p-2 mb-2\">This is default success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-75\">This is 75% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-50\">This is 50% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 mb-2 border-opacity-25\">This is 25% opacity success border</div>
\t\t\t\t\t<div class=\"border border-success p-2 border-opacity-10\">This is 10% opacity success border</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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Border subtle Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the border color using utilities built on our theme colors.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-primary-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-secondary-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-success-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-danger-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-warning-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-info-subtle avatar-md bg-light bg-opacity-50\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-light-subtle avatar-md\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"text-center\">
\t\t\t\t\t\t\t<div class=\"border border-dark-subtle avatar-md bg-light bg-opacity-50\"></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-->

\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\">Border Radius</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add classes to an element to easily round its corners.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded\" alt=\"rounded\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-top\" alt=\"rounded-top\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-end\" alt=\"rounded-end\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-bottom\" alt=\"rounded-bottom\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-start\" alt=\"rounded-start\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-2.jpg\" class=\"avatar-lg rounded-circle\" alt=\"rounded-circle\">
\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"avatar-lg w-auto rounded-pill\" alt=\"rounded-pill\">
\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\">Border Radius Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the scaling classes for larger or smaller rounded corners. Sizes range from
\t\t\t\t\t\t<code>0</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>5</code>.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-0\" alt=\"rounded-0\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-1\" alt=\"rounded-1\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-2\" alt=\"rounded-2\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-3\" alt=\"rounded-3\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-4\" alt=\"rounded-4\">
\t\t\t\t\t\t<img src=\"/images/users/avatar-4.jpg\" class=\"avatar-lg rounded-5\" alt=\"rounded-5\">
\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\">Text Selection</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>user-select-all</code>,
\t\t\t\t\t\t<code>user-select-auto</code>, or
\t\t\t\t\t\t<code>user-select-none</code>
\t\t\t\t\t\tclass to the content which is selected when the user interacts with it.</p>

\t\t\t\t\t<p class=\"user-select-all\">This paragraph will be entirely selected when clicked by the user.</p>
\t\t\t\t\t<p class=\"user-select-auto\">This paragraph has default select behavior.</p>
\t\t\t\t\t<p class=\"user-select-none mb-0\">This paragraph will not be selectable when clicked by the user.</p>
\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\">Pointer Events</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Bootstrap provides
\t\t\t\t\t\t<code>.pe-none</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.pe-auto</code>
\t\t\t\t\t\tclasses to prevent or add element interactions.</p>

\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"pe-none\" tabindex=\"-1\" aria-disabled=\"true\">This link</a>
\t\t\t\t\t\tcan not be clicked.</p>
\t\t\t\t\t<p>
\t\t\t\t\t\t<a href=\"#\" class=\"pe-auto\">This link</a>
\t\t\t\t\t\tcan be clicked (this is default behavior).</p>
\t\t\t\t\t<p class=\"pe-none\">
\t\t\t\t\t\t<a href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">This link</a>
\t\t\t\t\t\tcan not be clicked because the
\t\t\t\t\t\t<code>pointer-events</code>
\t\t\t\t\t\tproperty is inherited from its parent. However,
\t\t\t\t\t\t<a href=\"#\" class=\"pe-auto\">this
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                link</a>
\t\t\t\t\t\thas a
\t\t\t\t\t\t<code>pe-auto</code>
\t\t\t\t\t\tclass and can be clicked.</p>
\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-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Overflow</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Adjust the
\t\t\t\t\t\t<code>overflow</code>
\t\t\t\t\t\tproperty on the fly with four default values and classes. These classes are not
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            responsive by default.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-4\">
\t\t\t\t\t\t<div class=\"overflow-auto p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-auto</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions. By
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                design, this content will vertically scroll.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-hidden p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-hidden</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-visible p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-visible</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"overflow-scroll p-3 bg-light\" style=\"max-width: 260px; max-height: 100px;\">
\t\t\t\t\t\t\tThis is an example of using
\t\t\t\t\t\t\t<code>.overflow-scroll</code>
\t\t\t\t\t\t\ton an element with set width and height dimensions.
\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 -->

\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\">Position in Arrange</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Arrange elements easily with the edge positioning utilities. The format is
\t\t\t\t\t\t<code>{property}-{position}</code>.</p>

\t\t\t\t\t<!-- Arrange elements -->
\t\t\t\t\t<div class=\"position-relative p-5 bg-light bg-opacity-50 m-3 border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 end-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-50 end-50 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 end-0 avatar-xs bg-dark rounded\"></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\">Position in Center</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">In addition, you can also center the elements with the transform utility class
\t\t\t\t\t\t<code>.translate-middle</code>.</p>

\t\t\t\t\t<!-- Center elements -->
\t\t\t\t\t<div class=\"position-relative m-3 bg-light bg-opacity-50 border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-100 translate-middle avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-50 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-100 translate-middle avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-100 start-0 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-100 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-100 start-100 translate-middle avatar-xs bg-dark rounded\"></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 -->

\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\">Position in Axis</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">By adding
\t\t\t\t\t\t<code>.translate-middle-x</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>.translate-middle-y</code>
\t\t\t\t\t\tclasses, elements can be positioned only in horizontal or vertical direction.</p>

\t\t\t\t\t<!-- Center elements -->
\t\t\t\t\t<div class=\"position-relative m-3 bg-light border rounded\" style=\"height: 180px;\">
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-0 avatar-xs bg-dark rounded \"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 start-50 translate-middle-x avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-0 end-0 avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute top-50 start-0 translate-middle-y avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute top-50 end-0 translate-middle-y avatar-xs bg-dark rounded\"></div>

\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-0 avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 start-50 translate-middle-x avatar-xs bg-dark rounded\"></div>
\t\t\t\t\t\t<div class=\"position-absolute bottom-0 end-0 avatar-xs bg-dark rounded\"></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\">Shadows</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">While shadows on components are disabled by default in Bootstrap and can be enabled via
\t\t\t\t\t\t<code>\$enable-shadows</code>, you can also quickly add or remove a shadow with our
\t\t\t\t\t\t<code>box-shadow</code>
\t\t\t\t\t\tutility
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            classes. Includes support for
\t\t\t\t\t\t<code>.shadow-none</code>
\t\t\t\t\t\tand three default sizes (which have associated variables to
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            match).</p>

\t\t\t\t\t<div class=\"shadow-none p-2 mb-2 bg-light rounded\">No shadow</div>
\t\t\t\t\t<div class=\"shadow-sm p-2 mb-2 rounded\">Small shadow</div>
\t\t\t\t\t<div class=\"shadow p-2 mb-2 rounded\">Regular shadow</div>
\t\t\t\t\t<div class=\"shadow-lg p-2 mb-2 rounded\">Larger shadow</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\">Width</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Width utilities are generated from the utility API in
\t\t\t\t\t\t<code>_utilities.scss</code>. Includes support for
\t\t\t\t\t\t<code>25%</code>,
\t\t\t\t\t\t<code>50%</code>,
\t\t\t\t\t\t<code>75%</code>,
\t\t\t\t\t\t<code>100%</code>, and
\t\t\t\t\t\t<code>auto</code>
\t\t\t\t\t\tby default. Modify
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            those values as you need to generate different utilities here.</p>

\t\t\t\t\t<!-- Width -->
\t\t\t\t\t<div class=\"w-25 p-2 bg-light\">Width 25%</div>

\t\t\t\t\t<div class=\"w-50 p-2 bg-light\">Width 50%</div>

\t\t\t\t\t<div class=\"w-75 p-2 bg-light\">Width 75%</div>

\t\t\t\t\t<div class=\"w-100 p-2 bg-light\">Width 100%</div>

\t\t\t\t\t<div class=\"w-auto p-2 bg-light\">Width auto</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\">Height</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Height utilities are generated from the utility API in
\t\t\t\t\t\t<code>_utilities.scss</code>. Includes support for
\t\t\t\t\t\t<code>25%</code>,
\t\t\t\t\t\t<code>50%</code>,
\t\t\t\t\t\t<code>75%</code>,
\t\t\t\t\t\t<code>100%</code>, and
\t\t\t\t\t\t<code>auto</code>
\t\t\t\t\t\tby default. Modify
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            those values as you need to generate different utilities here.</p>

\t\t\t\t\t<div
\t\t\t\t\t\tclass=\"d-flex flex-wrap gap-3 align-items-start\" style=\"height: 255px;\">
\t\t\t\t\t\t<!-- Height -->
\t\t\t\t\t\t<div class=\"h-25 p-2 bg-light\">Height25%</div>

\t\t\t\t\t\t<div class=\"h-50 p-2 bg-light\">Height50%</div>

\t\t\t\t\t\t<div class=\"h-75 p-2 bg-light\">Height75%</div>

\t\t\t\t\t\t<div class=\"h-100 p-2 bg-light\">Height100%</div>

\t\t\t\t\t\t<div class=\"h-auto p-2 bg-light\">Height auto</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 -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Object fit</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the value of the
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\">
\t\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\t\tproperty</a>
\t\t\t\t\t\twith our responsive
\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\tutility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.</p>

\t\t\t\t\t<div class=\"d-flex align-items-start flex-wrap gap-3 text-center\">
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-contain border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-contain</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-cover border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-cover</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-fill border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-fill</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-scale border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-scale</code>
\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"object-fit-none border rounded avatar-xl\" alt=\"...\">
\t\t\t\t\t\t\t<p class=\"mt-1 mb-0\">
\t\t\t\t\t\t\t\t<code class=\"user-select-all\">.object-fit-none</code>
\t\t\t\t\t\t\t</p>
\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 end -->

\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\">Object fit</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Change the value of the
\t\t\t\t\t\t<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\">
\t\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\t\tproperty</a>
\t\t\t\t\t\twith our responsive
\t\t\t\t\t\t<code>object-fit</code>
\t\t\t\t\t\tutility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.</p>

\t\t\t\t\t<div class=\"position-relative\" style=\"height: 220px;z-index: 1;\">
\t\t\t\t\t\t<div class=\"z-3 position-absolute p-5 rounded-3 bg-primary-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-2 position-absolute p-5 m-2 rounded-3 bg-success-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-1 position-absolute p-5 m-3 rounded-3 bg-secondary-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-0 position-absolute p-5 m-4 rounded-3 bg-danger-subtle\"></div>
\t\t\t\t\t\t<div class=\"z-n1 position-absolute p-5 m-5 rounded-3 bg-info-subtle\"></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 end -->

{% endblock %}
", "ui-utilities.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-utilities.html.twig");
    }
}
