<?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;

/* extended-scrollbar.html.twig */
class __TwigTemplate_6cffc71cf48510b2f90e1563ae087a63 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", "extended-scrollbar.html.twig"));

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

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "extended-scrollbar.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 "Scrollbar
";
        
        $__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" => "Extended UI", "page_title" => "Scrollbar"]);
        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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Default Scroll</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">RTL Position</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar data-simplebar-direction='rtl'</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-direction='rtl' style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>

\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Scroll Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-lg style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Scroll Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar data-simplebar-primary</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-primary style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\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);

    }

    public function getTemplateName()
    {
        return "extended-scrollbar.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 %}Scrollbar
{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Extended UI', page_title: 'Scrollbar' }) }}
{% 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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Default Scroll</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">RTL Position</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar data-simplebar-direction='rtl'</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-direction='rtl' style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>

\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Scroll Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->

\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-lg style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\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 pb-0\">
\t\t\t\t\t<h4 class=\"header-title\">Scroll Color</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Just use data attribute
\t\t\t\t\t\t<code>data-simplebar data-simplebar-primary</code>
\t\t\t\t\t\tand add
\t\t\t\t\t\t<code>max-height: **px</code>
\t\t\t\t\t\toh fix height</p>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t\t<div class=\"card-body py-0 mb-3\" data-simplebar data-simplebar-primary style=\"max-height: 250px;\">
\t\t\t\t\tSimpleBar does only one thing: replace the browser's default scrollbar
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        with a custom CSS-styled one without losing performances.
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Unlike some popular plugins, SimpleBar doesn't mimic scroll with
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        Javascript, causing janks and strange scrolling behaviours...
\t\t\t\t\t\t\t\t\t\t\t\t\t                                        You keep the awesomeness of native scrolling...with a custom scrollbar!
\t\t\t\t\t<p>SimpleBar
\t\t\t\t\t\t<strong>does NOT implement a custom scroll
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                                behaviour</strong>. It keeps the
\t\t\t\t\t\t<strong>native</strong>
\t\t\t\t\t\t<code>overflow: auto</code>
\t\t\t\t\t\tscroll and
\t\t\t\t\t\t<strong>only</strong>
\t\t\t\t\t\treplace
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            the scrollbar visual appearance.
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Design it as you want</h5>
\t\t\t\t\t<p>SimpleBar uses pure CSS to style the scrollbar. You can easily
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            customize it as you want! Or even have multiple style on the same
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            page...or just keep the default style (\"Mac OS\" scrollbar style).
\t\t\t\t\t</p>
\t\t\t\t\t<h5>Lightweight and performant</h5>
\t\t\t\t\t<p>Only 6kb minified. SimpleBar doesn't use Javascript to handle
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scrolling. You keep the performances/behaviours of the native
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            scroll.</p>
\t\t\t\t\t<h5>Supported everywhere</h5>
\t\t\t\t\t<p class=\"mb-0\">SimpleBar has been tested on the following browsers: Chrome,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Firefox,
\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                            Safari, Edge, IE11.</p>
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->
{% endblock %}
", "extended-scrollbar.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/extended-scrollbar.html.twig");
    }
}
